/* ============================================================
   site.css — shared chrome for the public showcase 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; }

/* ── 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; }
}