/* ─────────────────────────────────────────────────────────────────
   css/use-boards.css
   On-device board switcher for use.html — Task #46 turn 3.

   Mirrors the visual language of library.css (the builder's Saved
   Boards modal) so a parent who used the builder finds the same
   cues here. Reuses .modal-overlay / .modal / .modal-btn from the
   inline use.html style block (intentional — keeps the modal
   visually consistent with use.html's existing modals like the
   aphasia helper).

   Colour-blind safety: the "● Current" affordance uses surface
   tint + label, never colour alone (mirrors library.css turn 2.5).
   ───────────────────────────────────────────────────────────────── */

/* ── Topbar pill ────────────────────────────────────────────────
   Sits between the title and ⚡/📝 mode toggle. Light-on-dark to
   read against #2E5090 topbar without competing with the amber
   "+ Save" install CTA. ≥36px high via padding for touch. */
.topbar-boards-btn{
  background:rgba(255,255,255,0.15);
  border:none;
  color:#fff;
  font-size:0.85rem;
  font-weight:600;
  padding:0.5rem 0.85rem;
  border-radius:8px;
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.topbar-boards-btn:active{
  background:rgba(255,255,255,0.3);
  transform:scale(0.97);
}

/* ── Modal shell ────────────────────────────────────────────────
   The modal-overlay/.modal classes come from BottomSheet kind:'modal'
   (it injects them) plus use.html's inline modal styles. We only
   add panel-specific surfaces here. */
.use-board-modal{
  max-width:600px;
  width:calc(100vw - 2rem);
  max-height:85vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff;
  border-radius:14px;
  padding:1.1rem 1.1rem 0.9rem;
  box-shadow:0 12px 40px rgba(0,0,0,0.25);
}
.use-board-modal .modal-title{
  font-size:1.15rem;
  font-weight:700;
  color:#1A1A2E;
  margin:0 0 0.25rem;
}
.use-board-modal .modal-sub{
  font-size:0.85rem;
  color:#5A5A75;
  line-height:1.45;
  margin:0 0 1rem;
}
.use-board-modal .modal-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:0.75rem;
  padding-top:0.6rem;
  border-top:1px solid rgba(0,0,0,0.06);
}
.use-board-modal .modal-btn{
  padding:0.55rem 1.1rem;
  font-size:0.9rem;
  font-weight:600;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  color:#1A1A2E;
  cursor:pointer;
  min-height:44px;
}
.use-board-modal .modal-btn:hover{ background:#F5F5F8; }

/* ── Section heads ──────────────────────────────────────────────
   Two sections (Saved + Quick) need clear visual grouping. The
   head label doubles as a recognition anchor — same emoji as the
   pill / builder, NN/g recognition over recall. */
.use-board-section + .use-board-section{ margin-top:1rem; }
.use-board-section-head{
  font-size:0.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:#5A5A75;
  margin:0 0 0.45rem;
}
.use-board-section-sub{
  font-size:0.78rem;
  color:#6B6B80;
  line-height:1.4;
  margin:0 0 0.55rem;
}

/* ── Row list ───────────────────────────────────────────────────
   Vertical stack of board buttons. Whole row is the tap target
   (button reset) — NN/g Fitts' law: bigger target = lower error
   rate, especially on phones one-handed. */
.use-board-list{
  display:flex;
  flex-direction:column;
  gap:0.45rem;
}
.use-board-row{
  /* Reset native <button> chrome so the row reads as a card. */
  appearance:none;
  -webkit-appearance:none;
  background:#FAF7F1;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:10px;
  padding:0.7rem 0.8rem;
  display:flex;
  align-items:center;
  gap:0.7rem;
  text-align:left;
  cursor:pointer;
  min-height:60px;       /* well above 44px tap-target floor */
  font:inherit;
  color:inherit;
  transition:background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.use-board-row:hover{ background:#F4EFDF; border-color:rgba(0,0,0,0.12); }
.use-board-row:active{ transform:scale(0.98); }

/* Saved-boards rows are slightly more "personal" tinted (cooler)
   so the user can tell at a glance which list they're scanning,
   even if section heads scroll out of view on a small screen. */
.use-board-row-saved{
  background:#F4F7FB;
  border-color:rgba(46,80,144,0.14);
}
.use-board-row-saved:hover{ background:#E9EFF8; border-color:rgba(46,80,144,0.30); }

/* "● Current" row tint — amber, mirrors library.css turn 2.5. */
.use-board-row-current{
  background:rgba(232,168,56,0.10);
  border-color:rgba(232,168,56,0.45);
}
.use-board-row-current:hover{
  background:rgba(232,168,56,0.18);
  border-color:rgba(232,168,56,0.65);
}

/* Big leading emoji on Quick rows — instant categorical recognition. */
.use-board-row-emoji{
  flex:0 0 auto;
  font-size:1.7rem;
  line-height:1;
  width:2.2rem;
  text-align:center;
}

.use-board-row-meta{
  flex:1 1 auto;
  min-width:0;
}
.use-board-row-name{
  font-size:0.98rem;
  font-weight:700;
  color:#1A1A2E;
  /* Long names truncate before they push the Use CTA off-row. */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.use-board-row-sub{
  font-size:0.76rem;
  color:#6B6B80;
  margin-top:0.15rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* "● Current" badge — pill with amber tint. Same shape language
   as library.css for cross-surface consistency. */
.use-board-current-badge{
  display:inline-block;
  margin-right:0.4rem;
  padding:0.05rem 0.4rem;
  font-size:0.62rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#8a5a00;
  background:rgba(232,168,56,0.18);
  border:1px solid rgba(232,168,56,0.45);
  border-radius:999px;
  vertical-align:middle;
}

/* "Use" CTA on the right edge — visual affordance that the row IS
   the action. Amber matches the builder's Save / Load family so a
   parent who already learned that vocabulary recognizes it here. */
.use-board-row-cta{
  flex:0 0 auto;
  padding:0.4rem 0.85rem;
  font-size:0.82rem;
  font-weight:700;
  background:var(--amber, #E8A838);
  color:#fff;
  border-radius:6px;
  pointer-events:none; /* whole row is the click target */
}
.use-board-row-saved .use-board-row-cta{
  background:#2E5090;  /* match topbar — saved = "your space" */
}
.use-board-row-current .use-board-row-cta{
  background:#c98c25;  /* darker amber so badge dominates */
}

/* ── Empty state (Saved section, first-run) ────────────────────
   Explains the value, doesn't just say "empty" — NN/g help &
   documentation. Cross-references the builder so the user knows
   exactly where to go. */
.use-board-empty{
  padding:0.8rem 0.5rem;
  text-align:left;
  background:#FAF7F1;
  border:1px dashed rgba(0,0,0,0.10);
  border-radius:10px;
  color:#5A5A75;
}
.use-board-empty p{
  font-size:0.85rem;
  line-height:1.5;
  margin:0;
}
.use-board-empty p + p{ margin-top:0.4rem; }
.use-board-empty-hint{
  font-size:0.78rem !important;
  color:#6B6B80;
}
.use-board-empty-hint strong{ color:#1A1A2E; }

/* ── Mobile — phone breakpoint ─────────────────────────────────
   Stack the row meta over the CTA so the name has full width on
   narrow screens. Tap target stays well above 44px via min-height. */
@media (max-width:420px){
  .use-board-modal{ padding:0.9rem 0.85rem 0.75rem; }
  .use-board-row{ flex-wrap:wrap; }
  .use-board-row-meta{ flex:1 1 100%; }
  .use-board-row-cta{ margin-left:auto; }
}

/* ─── Browse-all entry button on the switcher modal ─── */
/* Sits at the top of the switcher modal: "📚 Browse all 159 boards →".
   Visually distinct from Quick/Saved rows so users see it as the
   gateway to "everything". */
.use-board-browse-all-btn{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:0.75rem 1rem;
  margin:0 0 0.75rem 0;
  border-radius:10px;
  border:1px solid rgba(232,168,56,0.45);
  background:rgba(232,168,56,0.10);
  color:#8a5a00;
  font-size:0.95rem; font-weight:600;
  cursor:pointer;
  min-height:48px;
}
.use-board-browse-all-btn:hover{ background:rgba(232,168,56,0.18); }
.use-board-browse-all-btn:focus-visible{
  outline:2px solid #FBC02D; outline-offset:2px;
}
.use-board-browse-all-btn .ub-arrow{ font-size:1.1rem; }

/* ─── Catalog Browser modal (catalog-browser.js, Phase J 2026-05-04) ─── */
/* Full 159-board catalog. Categorized accordion + search. Each row tap
   loads the board via window.UseSwapBoard. Keep visual style consistent
   with use-board-switcher so the user feels like they're in one place. */
.cb-overlay{ /* Inherits .modal-overlay base styles */ }
.cb-modal{
  max-width:560px; width:100%;
  padding:1.1rem 1rem 0.9rem;
  background:#FAF6E7; color:#222;
  border-radius:14px;
  box-shadow:0 8px 32px rgba(0,0,0,0.18);
  display:flex; flex-direction:column;
  max-height:85vh;
  overflow:hidden;
}
.cb-modal .modal-title{
  font-size:1.1rem; font-weight:700; margin:0 0 0.25rem;
}
.cb-modal .modal-sub{
  font-size:0.8rem; color:#555; margin:0 0 0.75rem;
}
.cb-search-input{
  width:100%; padding:0.625rem 0.75rem;
  border-radius:8px; border:1px solid rgba(0,0,0,0.18);
  background:#fff;
  font-size:16px;        /* iOS no-zoom */
  margin-bottom:0.5rem;
  min-height:44px;
}
.cb-search-input:focus-visible{
  outline:2px solid #FBC02D; outline-offset:1px;
}
.cb-list{
  flex:1 1 auto;
  overflow-y:auto;
  margin:0 -0.25rem;        /* slight bleed for scrollbar comfort */
  padding:0 0.25rem;
}
.cb-loading-state, .cb-error-state, .cb-empty{
  text-align:center;
  padding:2rem 1rem;
  color:#555;
}
.cb-empty-icon{ font-size:1.75rem; opacity:0.8; margin-bottom:0.5rem; }
.cb-loading-state p, .cb-error-state p, .cb-empty p{ margin:0; font-size:0.9rem; }

.cb-category{
  border-bottom:1px solid rgba(0,0,0,0.06);
  padding:0.25rem 0;
}
.cb-category[open] > .cb-category-summary{
  background:rgba(232,168,56,0.06);
}
.cb-category-summary{
  display:flex; align-items:center; justify-content:space-between;
  padding:0.625rem 0.5rem;
  cursor:pointer; user-select:none;
  font-weight:600; font-size:0.95rem;
  border-radius:6px;
  list-style:none;
  min-height:44px;
}
.cb-category-summary::-webkit-details-marker{ display:none; }
.cb-category-summary::after{
  content:'▾';
  color:#999; font-size:0.9rem;
  margin-left:0.5rem;
  transition:transform 0.15s ease;
}
.cb-category[open] > .cb-category-summary::after{
  transform:rotate(180deg);
}
.cb-category-count{
  background:rgba(0,0,0,0.06); color:#555;
  font-size:0.7rem; font-weight:600;
  padding:0.15rem 0.5rem; border-radius:4px;
  margin-left:auto; margin-right:0.5rem;
}
.cb-category-rows{
  padding:0.25rem 0 0.5rem;
}
.cb-board-row, .cb-search-results .cb-board-row{
  display:flex; flex-direction:column; align-items:flex-start;
  width:100%;
  padding:0.625rem 0.75rem;
  margin:0.125rem 0;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.08);
  background:#fff;
  font-family:inherit; font-size:0.9rem; color:#222;
  text-align:left;
  cursor:pointer;
  min-height:48px;
}
.cb-board-row:hover{ background:#F4EFDF; border-color:rgba(0,0,0,0.12); }
.cb-board-row:focus-visible{
  outline:2px solid #FBC02D; outline-offset:1px;
}
.cb-board-row.cb-loading{ opacity:0.55; cursor:progress; }
.cb-board-name{ font-weight:600; }
.cb-board-meta{ font-size:0.75rem; color:#666; margin-top:0.125rem; }

@media (max-width:420px){
  .cb-modal{ padding:0.9rem 0.85rem 0.75rem; max-height:92vh; }
}