/* Out & About SA — the interaction layer, phase 1 (parking lot #32a).
   Been / Want to go, browser-only. Built to match claude/interaction-taster.html.
   Loaded from build_full.py, gated to the pilot pages. Rolling it wider is a
   change to that gate, not to this file. */

:root{--oaa-fair:#1b7a43;--oaa-deep:#0c3d21;--oaa-cream:#f4ecd6;--oaa-terra:#c1471f}

/* --- the two-button control, appended to every card ------------------- */
.oaa-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;
  padding-top:10px;border-top:1px dashed #e2eae4}
button.oaa-t{border:1px solid #cde0d4;background:#fff;color:#0c3d21;font-weight:800;
  font-size:.8rem;padding:6px 13px;border-radius:999px;cursor:pointer;transition:.12s;
  font-family:inherit;line-height:1.3}
button.oaa-t:hover{background:#e9f1eb}
button.oaa-t.on{background:var(--oaa-deep);border-color:var(--oaa-deep);color:var(--oaa-cream)}
button.oaa-t.oaa-want.on{background:var(--oaa-terra);border-color:var(--oaa-terra);color:#fff}
.oaa-reward{font-size:.76rem;color:var(--oaa-fair);font-weight:700;opacity:0;transition:opacity .25s}
.oaa-reward.show{opacity:1}

/* Compact variant for the front page's Near Me and Town Select rows, which are
   list items rather than cards and cannot carry the full-size control. */
.oaa-acts.oaa-mini{margin:4px 0 2px;padding-top:0;border-top:0;gap:6px}
.oaa-acts.oaa-mini button.oaa-t{font-size:.72rem;padding:3px 10px}
.oaa-acts.oaa-mini .oaa-reward{font-size:.7rem}

/* --- the dock: a pill that carries the live counts -------------------- */
#oaa-dock{position:fixed;right:16px;bottom:16px;z-index:9998;background:var(--oaa-deep);
  color:var(--oaa-cream);border:0;border-radius:999px;padding:11px 17px;font-weight:800;
  font-size:.83rem;cursor:pointer;box-shadow:0 4px 14px rgba(12,40,26,.32);
  font-family:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:none;align-items:center;gap:8px;line-height:1}
#oaa-dock.show{display:inline-flex}
#oaa-dock b{color:#fff}
#oaa-dock .oaa-dot{width:7px;height:7px;border-radius:50%;background:var(--oaa-fair);flex:0 0 auto}
/* Chevron, so the pill reads as a control rather than a status badge. Watching
   someone use it for the first time, that was the whole difference. */
#oaa-dock .oaa-chev{flex:0 0 auto;width:7px;height:7px;margin-left:2px;
  border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(-45deg);opacity:.85;transition:transform .15s}
#oaa-dock:hover .oaa-chev{transform:rotate(-45deg) translate(1px,-1px)}

/* --- the panel: counts, map, milestones ------------------------------ */
/* dvh, not vh: on iOS the address bar is counted in vh, so a vh-sized panel is
   taller than what you can actually see and its heading sits above the fold. */
#oaa-panel{position:fixed;right:16px;bottom:16px;z-index:9999;width:326px;max-width:calc(100vw - 32px);
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #dfe8e1;
  border-radius:16px;padding:16px;box-shadow:0 10px 34px rgba(12,40,26,.26);display:none;
  font-family:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#12241a;font-size:16px;line-height:1.55}
#oaa-panel.show{display:block}
#oaa-panel h2{margin:0 0 3px;font-size:1.02rem;color:var(--oaa-deep)}
#oaa-panel .oaa-sub{margin:0 0 12px;font-size:.76rem;color:#6b7f74}
#oaa-close{position:absolute;top:11px;right:12px;background:none;border:0;font-size:1.15rem;
  line-height:1;color:#6b7f74;cursor:pointer;padding:2px 4px}
#oaa-panel .oaa-row{display:flex;gap:16px;margin-bottom:14px}
#oaa-panel .oaa-big{font-size:2rem;font-weight:800;color:var(--oaa-deep);line-height:1}
#oaa-panel .oaa-big small{font-size:.76rem;font-weight:700;color:#6b7f74;display:block;margin-top:2px}
#oaa-panel svg.oaa-map{width:100%;height:auto;display:block;margin:4px 0 10px}
.oaa-ctx{fill:#e6ece8;stroke:#d3ded7;stroke-width:.5}
.oaa-reg{fill:#eef3f0;stroke:#d3ded7;stroke-width:.5}
.oaa-pin{fill:#c9d6cd}.oaa-pin.been{fill:var(--oaa-fair)}.oaa-pin.want{fill:var(--oaa-terra)}
/* --- the two ladders: places and regions ------------------------------- */
/* Seven stacked milestone lines ate most of a phone screen. Two rows of four
   steps say the same thing in a fifth of the height. */
#oaa-miles{border-top:1px dashed #e2eae4;padding-top:8px;margin-top:2px}
.oaa-ladder{display:flex;align-items:center;gap:8px;padding:4px 0}
.oaa-lab{flex:0 0 52px;font-size:.72rem;color:#6b7f74;font-weight:700;letter-spacing:.01em}
.oaa-steps{display:flex;gap:4px;flex:1 1 auto}
.oaa-step{flex:1 1 0;min-width:0;text-align:center;font-size:.68rem;font-weight:800;
  padding:3px 0;border-radius:6px;background:#eef2ef;color:#9aa9a0;
  transition:background .2s,color .2s}
.oaa-step.hit{background:var(--oaa-fair);color:#fff}
.oaa-now{flex:0 0 auto;min-width:22px;text-align:right;font-size:.82rem;color:var(--oaa-deep)}
#oaa-panel .oaa-note{background:#eef4f0;border-radius:10px;padding:10px 12px;font-size:.78rem;
  margin-top:12px;color:#3c5347}
#oaa-reset{background:none;border:0;color:#6b7f74;text-decoration:underline;cursor:pointer;
  font-size:.76rem;padding:0;margin-top:10px;font-family:inherit}

/* --- "Remember my picks": offered, never demanded --------------------- */
#oaa-panel .oaa-note.oaa-ok{background:#e8f3ec;color:#14532d}
#oaa-panel .oaa-remember-offer label{display:block;margin-bottom:3px;font-size:.85rem;color:var(--oaa-deep)}
#oaa-panel .oaa-remember-offer p{margin:0 0 9px;font-size:.76rem;line-height:1.45}
.oaa-rrow{display:flex;gap:6px;flex-wrap:wrap}
#oaa-email{flex:1 1 140px;min-width:0;border:1px solid #cde0d4;border-radius:9px;padding:7px 10px;
  font-size:.82rem;font-family:inherit;color:var(--oaa-deep);background:#fff}
#oaa-email:focus{outline:2px solid var(--oaa-fair);outline-offset:1px}
#oaa-remember-go{flex:0 0 auto;border:0;background:var(--oaa-deep);color:var(--oaa-cream);
  font-weight:800;font-size:.8rem;padding:8px 14px;border-radius:999px;cursor:pointer;font-family:inherit}
#oaa-remember-go:disabled{opacity:.6;cursor:default}
.oaa-fine{margin:7px 0 0;font-size:.68rem;line-height:1.4;color:#7d8c83}
.oaa-fine a{color:#5b6b60}
.oaa-msg{margin:8px 0 0;font-size:.75rem;min-height:1em;color:#5b6b60}
.oaa-msg.good{color:var(--oaa-fair);font-weight:700}
.oaa-msg.bad{color:var(--oaa-terra);font-weight:700}
.oaa-link{background:none;border:0;padding:0;margin-left:6px;color:#6b7f74;text-decoration:underline;
  cursor:pointer;font-size:.74rem;font-family:inherit}

@media(max-width:520px){
  /* Anchored to the TOP on a phone, not the bottom. Bottom-anchored, anything
     taller than the screen pushes its own heading off the top - which is exactly
     what happened: the panel opened already scrolled past its title. */
  #oaa-panel{right:10px;left:10px;top:10px;bottom:10px;width:auto;max-height:none}
  #oaa-dock{right:10px;bottom:10px}
  #oaa-close{top:8px;right:10px;font-size:1.4rem;padding:6px 8px}
  /* The map is decorative for now, so on a phone it gives up its space to the
     things that are not: the offer, the counts and the ladders. */
  #oaa-panel svg.oaa-map{width:58%;margin:2px auto 6px}
}
@media print{#oaa-dock,#oaa-panel,.oaa-acts{display:none !important}}

/* ---------------------------------------------------------------- the list */
/* The counts were read as a scoreboard rather than a way in, so they are now
   buttons that look pressable. The regions cell is not - there is no list of
   regions to open, only the map beneath it. */
#oaa-panel .oaa-cell{flex:1;min-width:0;text-align:left;background:none;border:0;padding:4px 6px;
  margin:-4px -6px;border-radius:10px;cursor:pointer;font:inherit;color:inherit;
  transition:background .12s}
#oaa-panel .oaa-cell:hover,#oaa-panel .oaa-cell:focus-visible{background:#eef4f0}
#oaa-panel .oaa-cell-flat{cursor:default}
#oaa-panel .oaa-cell-flat:hover{background:none}
#oaa-panel .oaa-cell small{font-size:.76rem;font-weight:700;color:#6b7f74;display:block;margin-top:2px}
#oaa-panel .oaa-cell[data-list] small::after{content:" ›";color:#9aa8a0;font-weight:800}

#oaa-list{max-height:46vh;overflow:auto;-webkit-overflow-scrolling:touch;margin-bottom:12px}
.oaa-lhead{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.oaa-lhead b{font-size:.95rem;color:var(--oaa-deep)}
.oaa-lfoot{display:flex;gap:8px;padding:10px 0 2px;border-top:1px solid #eef2f0;margin-top:4px}
.oaa-back{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--oaa-fair);cursor:pointer}
.oaa-lcount{background:#eef4f0;border-radius:99px;padding:1px 8px;font-size:.75rem;font-weight:800;color:#4a6a58}
.oaa-mini-btn{background:none;border:1px solid #d6e0da;border-radius:8px;padding:3px 9px;
  font:inherit;font-size:.75rem;font-weight:700;color:#4a6a58;cursor:pointer}
.oaa-mini-btn:hover{border-color:var(--oaa-fair);color:var(--oaa-fair)}

.oaa-lreg{margin-bottom:14px}
.oaa-lreg h4{margin:0 0 4px;font-size:.84rem;color:var(--oaa-deep);display:flex;align-items:center;gap:6px}
.oaa-lnum{background:#eef4f0;border-radius:99px;padding:0 7px;font-size:.7rem;color:#6b7f74}
.oaa-trip{display:inline-block;margin:0 0 8px;font-size:.78rem;font-weight:700;
  color:var(--oaa-terra);text-decoration:none}
.oaa-trip:hover{text-decoration:underline}
.oaa-ltown{display:flex;align-items:baseline;gap:8px;margin:8px 0 2px}
.oaa-tn{font-size:.78rem;font-weight:700;color:#4a6a58}
/* The line that turns a list into a plan. */
.oaa-say{font-size:.72rem;color:var(--oaa-terra);font-weight:700}
.oaa-litems{list-style:none;margin:0;padding:0}
.oaa-litems li{display:flex;align-items:center;gap:8px;padding:3px 0;border-bottom:1px solid #f0f4f2}
.oaa-ln{flex:1;font-size:.82rem;color:#2b3a32;min-width:0;overflow-wrap:anywhere}
/* The kind sits quietly behind the name - "The Bell Tree (Restaurant)" - because
   the name is what you are scanning for and the kind is what disambiguates it. */
.oaa-kind{color:#8a998f;font-size:.75rem;white-space:nowrap}
.oaa-untick{background:none;border:0;padding:2px 6px;color:#b9c6bf;cursor:pointer;
  font-size:.85rem;line-height:1;border-radius:6px}
.oaa-untick:hover{color:var(--oaa-terra);background:#fdf0eb}
.oaa-empty{font-size:.82rem;color:#6b7f74;margin:8px 0 14px}

@media(max-width:520px){
  #oaa-list{max-height:none}
}