/* ============================================================
   site.css — shared chrome for the public Tabatha site.
   Loaded by every real page (hub, 6 category pages, roadmap).
   NOT loaded by the 8 surface frames: those are captured at an
   exact 1280x800 as the Chrome Web Store screenshots, so they
   must stay pristine renders with no site chrome on them.

   This file deliberately does NOT declare :root tokens. Every
   page already defines its own (--panel, --border, --cyan, the
   halved 2/4/8 radius scale). We consume those so the chrome
   inherits each page's palette instead of fighting it. The two
   fallbacks below only matter if a page forgets a token.
   ============================================================ */

/* ── header controls ─────────────────────────────────────── */
.nav .site-tools { display: flex; align-items: center; gap: 8px; flex: none; }

.searchbtn {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel, #14171c); border: 1px solid var(--border, rgba(255,255,255,.09));
  border-radius: var(--r-md, 4px); color: var(--muted, #7d8894);
  font: 400 12px var(--sans, system-ui); padding: 6px 10px; cursor: pointer;
  min-width: 180px; text-align: left; transition: border-color .16s ease, color .16s ease;
}
.searchbtn:hover { border-color: rgba(0, 210, 255, .4); color: var(--text, #F2F5F7); }
.searchbtn .grow { flex: 1; }
.searchbtn kbd {
  font: 600 10px var(--mono, monospace); color: var(--muted, #7d8894);
  border: 1px solid var(--border, rgba(255,255,255,.09)); border-radius: var(--r-sm, 2px);
  padding: 1px 5px; background: rgba(255, 255, 255, .03);
}

.reqbtn {
  background: transparent; border: 1px solid rgba(0, 210, 255, .35);
  border-radius: var(--r-md, 4px); color: var(--cyan, #00D2FF);
  font: 600 12px var(--sans, system-ui); padding: 6px 12px; cursor: pointer;
  white-space: nowrap; transition: background .16s ease;
}
.reqbtn:hover { background: rgba(0, 210, 255, .12); }
.reqbtn:active { transform: translateY(1px); }

/* ── section purpose copy ────────────────────────────────── */
/* Sits under a section heading and states what the group is and
   why it exists. Measure is capped so it stays readable. */
.sec-purpose {
  font-size: 13.5px; line-height: 1.6; color: #9aa5b1;
  max-width: 78ch; margin: -8px 0 22px;
}
.sec-head + .sec-purpose { margin-top: 0; }
.sec-purpose b { color: #c4ced8; font-weight: 600; }

/* ── product status badges ───────────────────────────────── */
/* The family now covers three products at three different maturities, so a
   card must say which it is. Same pill geometry as the hub's `.cwsflag`, so
   these read as one vocabulary rather than a bolted-on second system.

   Colours are the product's own semantic tokens, not new ones:
     live   → #66bb6a, the success/synced green
     dev    → #ffa726, the same amber the app uses for paused/not-running
     planned→ --muted, deliberately the quietest thing on the card

   `.dev` is the load-bearing one: every mobile card carries it, because the
   mobile app is not something you can install today and a gallery that renders
   it identically to the shipped extension would be lying by omission. */
.statusflag {
  font: 700 8.5px var(--sans, system-ui); letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 7px; white-space: nowrap; flex: none;
  border: 1px solid currentColor;
}
.statusflag.live { color: #66bb6a; }
.statusflag.dev { color: #ffa726; }
.statusflag.planned { color: var(--muted, #7d8894); }

/* Card-level sub-status. Sits in the caption under the title: the mobile page
   is tagged in-development as a whole, and this says how far along one card is
   within that — "built" is honest about the app, not about shipping. */
.substatus {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 9.5px var(--sans, system-ui); letter-spacing: .04em;
  margin-top: 6px; padding: 2px 7px; border-radius: var(--r-sm, 2px);
}
.substatus.built { color: #8fce93; background: rgba(102, 187, 106, .12); }
.substatus.partial { color: #ffc072; background: rgba(255, 167, 38, .12); }
.substatus.planned { color: #9aa5b1; background: rgba(255, 255, 255, .05); }

/* Page-level in-development notice. One honest paragraph at the top of a page
   whose product you cannot install yet. */
.devnote {
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 1180px; margin: 18px auto 0; padding: 14px 16px;
  border: 1px solid rgba(255, 167, 38, .3); background: rgba(255, 167, 38, .07);
  border-radius: var(--r-md, 4px);
}
.devnote .e { font-size: 16px; line-height: 1.4; flex: none; }
.devnote .tx { font-size: 12.5px; line-height: 1.6; color: #c8b490; }
.devnote .tx b { color: #ffc072; font-weight: 700; }
@media (max-width: 900px) { .devnote { margin: 18px 20px 0; } }

/* ── per-card feedback actions ───────────────────────────── */
/* Absolutely positioned and transparent until hover/focus, so
   they add ZERO layout height. The capture script clips each
   .libcard by its bounding box, so anything that changed the
   card's height would silently reflow all 90 card screenshots. */
.libcard { position: relative; }
.cardfb {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  display: flex; gap: 4px; opacity: 0; transition: opacity .16s ease;
}
.libcard:hover .cardfb,
.libcard:focus-within .cardfb { opacity: 1; }
.cardfb button {
  background: rgba(10, 12, 15, .92); border: 1px solid var(--border, rgba(255,255,255,.09));
  border-radius: var(--r-sm, 2px); color: var(--muted, #7d8894);
  font: 500 10px var(--sans, system-ui); padding: 4px 7px; cursor: pointer;
  backdrop-filter: blur(6px); transition: color .14s ease, border-color .14s ease;
}
.cardfb button:hover { color: var(--text, #F2F5F7); border-color: rgba(0, 210, 255, .45); }
.cardfb button.bug:hover { color: #ff8a80; border-color: rgba(255, 0, 85, .45); }
/* Keyboard users must be able to see the control they tabbed to. */
.cardfb button:focus-visible { opacity: 1; outline: 2px solid var(--cyan, #00D2FF); outline-offset: 1px; }

/* ── overlay shell (shared by search + feedback) ─────────── */
.ovl {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(3, 4, 6, .72); backdrop-filter: blur(4px);
  padding: 12vh 20px 20px; overflow-y: auto;
}
.ovl.open { display: block; }
.ovl-box {
  max-width: 620px; margin: 0 auto;
  background: var(--panel, #14171c); border: 1px solid var(--border, rgba(255,255,255,.09));
  border-radius: var(--r-lg, 8px); box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  overflow: hidden;
}

/* ── search ──────────────────────────────────────────────── */
.sx-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border, rgba(255,255,255,.09)); }
.sx-top .ic { color: var(--muted, #7d8894); font-size: 14px; }
#sx-input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--text, #F2F5F7); font: 400 16px var(--sans, system-ui);
}
#sx-input::placeholder { color: var(--muted, #7d8894); }
.sx-esc { font: 600 10px var(--mono, monospace); color: var(--muted, #7d8894);
  border: 1px solid var(--border, rgba(255,255,255,.09)); border-radius: var(--r-sm, 2px); padding: 2px 6px; }

.sx-results { max-height: 52vh; overflow-y: auto; padding: 6px; }
.sx-item {
  display: flex; align-items: flex-start; gap: 11px; padding: 9px 10px;
  border-radius: var(--r-md, 4px); text-decoration: none; color: inherit; cursor: pointer;
  border: 1px solid transparent;
}
.sx-item[aria-selected="true"] { background: rgba(0, 210, 255, .10); border-color: rgba(0, 210, 255, .32); }
.sx-item .e { font-size: 15px; flex: none; line-height: 1.35; }
.sx-item .body { min-width: 0; flex: 1; }
.sx-item .t { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sx-item .d {
  font-size: 11.5px; color: var(--muted, #7d8894); line-height: 1.5; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sx-item mark { background: rgba(0, 210, 255, .22); color: var(--text, #F2F5F7); border-radius: 2px; padding: 0 1px; }
.sx-kind {
  font: 700 8.5px var(--sans, system-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cyan, #00D2FF); border: 1px solid rgba(0, 210, 255, .3);
  border-radius: 999px; padding: 1px 6px; flex: none;
}
.sx-kind.roadmap { color: var(--gold, #FFD700); border-color: rgba(255, 215, 0, .3); }
.sx-kind.surface { color: #b388ff; border-color: rgba(179, 136, 255, .3); }
.sx-foot {
  display: flex; align-items: center; gap: 14px; padding: 9px 16px;
  border-top: 1px solid var(--border, rgba(255,255,255,.09));
  font-size: 11px; color: var(--muted, #7d8894);
}
.sx-foot .grow { flex: 1; }
.sx-foot b { font: 600 10px var(--mono, monospace); color: #9aa5b1; }
.sx-empty { padding: 26px 16px; text-align: center; color: var(--muted, #7d8894); font-size: 13px; }
.sx-empty .sub { font-size: 11.5px; margin-top: 6px; }

/* ── feedback form ───────────────────────────────────────── */
.fb-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border, rgba(255,255,255,.09)); }
.fb-head h3 { font-size: 15px; font-weight: 600; }
.fb-head .x { margin-left: auto; background: none; border: 0; color: var(--muted, #7d8894); font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 6px; }
.fb-head .x:hover { color: var(--text, #F2F5F7); }
.fb-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.fb-row { display: flex; flex-direction: column; gap: 6px; }
.fb-row > label { font-size: 12px; font-weight: 600; color: #c4ced8; }
.fb-row .hint { font-size: 11px; color: var(--muted, #7d8894); }
.fb-row input[type="text"], .fb-row input[type="email"], .fb-row textarea {
  background: var(--bg2, #0b0d10); border: 1px solid var(--border, rgba(255,255,255,.09));
  border-radius: var(--r-md, 4px); color: var(--text, #F2F5F7);
  font: 400 13px var(--sans, system-ui); padding: 9px 11px; outline: none; width: 100%;
}
.fb-row textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.fb-row input:focus, .fb-row textarea:focus { border-color: rgba(0, 210, 255, .55); }
/* Placeholders must clear WCAG AA against --bg2, so they are not dimmer than --muted. */
.fb-row input::placeholder, .fb-row textarea::placeholder { color: #6b7480; }

.fb-seg { display: flex; gap: 8px; }
.fb-seg label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--border, rgba(255,255,255,.09)); border-radius: var(--r-md, 4px);
  padding: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--muted, #7d8894); transition: all .14s ease;
}
.fb-seg input { position: absolute; opacity: 0; pointer-events: none; }
.fb-seg label:hover { color: var(--text, #F2F5F7); }
.fb-seg input:checked + span { color: inherit; }
.fb-seg label.on-bug { border-color: rgba(255, 0, 85, .5); background: rgba(255, 0, 85, .1); color: #ff8a80; }
.fb-seg label.on-feature { border-color: rgba(0, 210, 255, .5); background: rgba(0, 210, 255, .1); color: var(--cyan, #00D2FF); }
.fb-seg input:focus-visible + span { outline: 2px solid var(--cyan, #00D2FF); outline-offset: 3px; border-radius: 2px; }

.fb-ctx {
  font: 500 11px var(--mono, monospace); color: var(--cyan, #00D2FF);
  background: rgba(0, 210, 255, .07); border: 1px solid rgba(0, 210, 255, .2);
  border-radius: var(--r-sm, 2px); padding: 6px 9px;
}
.fb-foot {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-top: 1px solid var(--border, rgba(255,255,255,.09)); background: rgba(255, 255, 255, .02);
}
.fb-foot .grow { flex: 1; }
.fb-foot .note { font-size: 11px; color: var(--muted, #7d8894); }
.btn {
  border-radius: var(--r-md, 4px); font: 600 12.5px var(--sans, system-ui);
  padding: 9px 16px; cursor: pointer; border: 1px solid var(--border, rgba(255,255,255,.09));
  background: transparent; color: var(--muted, #7d8894);
}
.btn:hover { color: var(--text, #F2F5F7); }
.btn:active { transform: translateY(1px); }
/* Dark ink on the cyan fill: white-on-cyan would fail AA. */
.btn.primary { background: var(--cyan, #00D2FF); border-color: var(--cyan, #00D2FF); color: #06222b; }
.btn.primary:hover { filter: brightness(1.08); color: #06222b; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--cyan, #00D2FF); outline-offset: 2px; }

.fb-msg { font-size: 12px; line-height: 1.5; border-radius: var(--r-md, 4px); padding: 10px 12px; display: none; }
.fb-msg.show { display: block; }
.fb-msg.err { background: rgba(255, 0, 85, .1); border: 1px solid rgba(255, 0, 85, .3); color: #ff9db1; }
.fb-msg.ok { background: rgba(102, 187, 106, .1); border: 1px solid rgba(102, 187, 106, .3); color: #a5d6a7; }
.fb-msg a { color: inherit; font-weight: 600; }
.fb-done { padding: 30px 20px; text-align: center; }
.fb-done .e { font-size: 30px; }
.fb-done h4 { font-size: 15px; margin: 10px 0 6px; }
.fb-done p { font-size: 12.5px; color: var(--muted, #7d8894); max-width: 44ch; margin: 0 auto; line-height: 1.6; }

@media (max-width: 700px) {
  .nav .site-tools { gap: 6px; }
  .searchbtn { min-width: 0; }
  .searchbtn .lbl, .searchbtn kbd { display: none; }
  .reqbtn { font-size: 11px; padding: 6px 9px; }
  .ovl { padding: 6vh 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cardfb, .searchbtn, .reqbtn, .btn { transition: none; }
  .btn:active, .reqbtn:active { transform: none; }
}