/* ═══════════════════════════ layout: dock → STATUS RAIL ═════════════════════
   31 Jul, Liam's reference. The nav is a live health readout on the dark
   ground: the three review channels are circular items wearing a progress
   ring — ring fill = the channel's cached score, colour = its band (lime
   good / amber warn / red bad; empty grey track before any review). Home,
   Create and Account are plain dark circles; Create and Account drop panels
   with the illustrated tool icons. Labels sit under every item, so there are
   no tooltips. Earlier dock generations (dark glass, white pill) are in git. */

.cc-topbar{display:none}
.main{margin-left:0;display:block}
html.is-pinned .main{margin-left:0}
.content{width:100%}
body.app{padding-top:132px;padding-bottom:32px}

@media(min-width:901px){
  .content,.pagehead{max-width:1440px;margin-left:auto;margin-right:auto}
}
body:has(.content.nohead) .pagehead{display:none}

/* ── the rail: a quiet dark bar, slightly deeper than the page ground ── */
.dock-wrap{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:50;
  width:min(1160px, calc(100vw - 28px))}
.dock{display:flex;align-items:flex-start;gap:26px;padding:14px 30px 12px;
  width:100%;
  /* equal-weight sides put the badge on the true centre, whatever each side holds */
  border-radius:18px;
  background:rgba(43,46,53,.92);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.30)}

.dock-reflection{display:none}
.dock-side{flex:1;display:flex;align-items:flex-start;gap:26px}

/* ── labelled trios: Review (website / instagram / google) and Create (flyer /
   carousel / editorial). Without these the bar is eight circles and you have to
   already know which half does what. The rule brackets the group; the word sits
   on it. ── */
.dock-trio{position:relative;display:flex;align-items:flex-start;gap:26px;
  padding-top:19px}
/* Home and Account sit outside a trio, so they need the same top padding or
   their rings float above the labelled ones */
.dock-side > .dock-item,.dock-side > .dock-group,.dock-side > .dock-sep{padding-top:19px}
.dock-trio::before{content:"";position:absolute;top:6px;left:2px;right:2px;height:1px;
  background:rgba(195,245,60,.30)}
.dock-trio::after{content:attr(data-trio);position:absolute;top:0;left:50%;
  transform:translate(-50%,-50%);padding:0 8px;background:#2b2e35;
  font-family:'Honey Basil',Inter,sans-serif;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;color:#c3f53c;white-space:nowrap}
@media(max-width:1000px){
  /* the labels are the first thing to go when the bar runs out of room */
  .dock-trio{padding-top:0}
  .dock-side > .dock-item,.dock-side > .dock-group,.dock-side > .dock-sep{padding-top:0}
  .dock-trio::before,.dock-trio::after{display:none}
}
.dock-side.right{justify-content:flex-end}

/* ── the brand badge, sat at the left with a hairline after it ── */
.dock-brand{display:flex;align-items:center;align-self:center;flex:none;
  padding:0 26px;margin:0 2px;text-decoration:none;
  border-left:1px solid rgba(255,255,255,.12);
  border-right:1px solid rgba(255,255,255,.12)}
.dock-brand img{height:26px;width:auto;display:block;transition:opacity .14s}
.dock-brand:hover img{opacity:.82}
@media(max-width:900px){
  /* the channel rings matter more than the mark when space runs out */
  .dock-brand{display:none}
}

/* ── items: ring (or plain circle) over a label ── */
.dock-item{position:relative}
.dock-btn{display:flex;flex-direction:column;align-items:center;gap:8px;
  background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.dock-btn:focus-visible{outline:2px solid #c3f53c;outline-offset:3px;border-radius:6px}

/* the ring: conic score track around a dark inner circle */
.ring{width:66px;height:66px;border-radius:50%;position:relative;display:block}
/* the ring is drawn as SVG strokes (track + score arc) — conic-gradient with
   var()/calc colour stops silently fails in Safari, which is how the scores
   vanished. 2.5px stroke ≈ the is-here outline weight. */
.ring-svg{position:absolute;inset:0;width:100%;height:100%}
.ring i{position:absolute;inset:5px;border-radius:50%;display:grid;place-items:center;
  background:#23252b;color:#eceef0;font-style:normal}
.ring i svg{width:24px;height:24px}
.ring i svg.ic-sm{width:21px;height:21px}
/* Create's sparkle is lime on the dark circle (reference) */
.ring.spark i{color:#c3f53c}
/* Home / Create / Account: solid circle, no score to show */
.ring.plain{background:#23252b;display:grid;place-items:center}
.ring.plain i{position:static;inset:auto;width:100%;height:100%;background:none}

.rail-lab{font-size:13px;font-weight:600;letter-spacing:.01em;line-height:1;
  color:#eceef0;white-space:nowrap}

/* hover: the inner circle warms with the light lime */
.dock-btn:hover .ring i,.dock-btn:hover .ring.plain{color:#1a2400}
.dock-btn:hover .ring i{background:#e9fbb0}
.dock-btn:hover .ring.plain i{background:none;color:#1a2400}
.dock-btn:hover .ring.plain{background:#e9fbb0}
/* current page: a thin lime outline + heavier label — the rings stay the show */
.dock-item.is-here .ring,.dock-group.has-here .ring{
  box-shadow:0 0 0 2px #c3f53c}
.dock-item.is-here .rail-lab,.dock-group.has-here .rail-lab{
  font-weight:800;color:#fff}

/* divider between the segments (home | channels | groups) */
.dock-sep{width:1px;align-self:stretch;margin:2px 4px;
  background:rgba(255,255,255,.14);flex:none}

/* ── group panels: same dark surface, dropping below with a caret ── */
.dock-group{position:relative;display:flex}
.dock-group .dock-group-btn{display:flex;flex-direction:column;align-items:center;gap:8px}
.dock-sub{position:absolute;top:calc(100% + 20px);left:50%;
  transform:translate(-50%,-6px);
  display:flex;align-items:center;padding:10px 12px;border-radius:18px;
  background:rgba(43,46,53,.96);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease}
.dock-group:hover .dock-sub,.dock-group:focus-within .dock-sub,
.dock-group.open .dock-sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.dock-sub::after{content:"";position:absolute;bottom:100%;left:50%;
  width:14px;height:14px;background:rgba(43,46,53,.96);
  border-left:1px solid rgba(255,255,255,.07);border-top:1px solid rgba(255,255,255,.07);
  transform:translate(-50%,58%) rotate(45deg)}
/* invisible hover bridge across the gap */
.dock-group:hover::after,.dock-group.open::after,.dock-group:focus-within::after{
  content:"";position:absolute;left:-40px;right:-40px;top:100%;height:22px}

/* panel items: icon + label pills, hairline between each */
.dock-sub .dock-item+.dock-item{margin-left:9px}
.dock-sub .dock-item+.dock-item::before{content:"";position:absolute;left:-5.5px;
  top:50%;transform:translateY(-50%);width:1px;height:24px;
  background:rgba(255,255,255,.12)}
.dock-sub .dock-btn{flex-direction:row;gap:8px;height:44px;padding:0 14px;
  border-radius:10px;color:#eceef0;transition:background .15s ease}
.dock-sub .dock-btn svg{width:19px;height:19px}
.dock-sub .dock-img{width:24px;height:24px;display:block}
.dock-sub .sub-lab{font-size:13px;font-weight:600;letter-spacing:.01em;
  line-height:1;color:#eceef0;white-space:nowrap}
.dock-sub .dock-btn:hover{background:#e9fbb0}
.dock-sub .dock-btn:hover svg,.dock-sub .dock-btn:hover .sub-lab{color:#1a2400}
.dock-sub .dock-item.is-here .dock-btn{background:rgba(255,255,255,.10)}

/* ── phones ── */
@media(max-width:560px){
  body.app{padding-top:112px;padding-bottom:24px}
  .dock{gap:10px;padding:10px 12px 9px}
  .ring{width:50px;height:50px}
  .ring i{inset:4px}
  .ring i svg{width:19px;height:19px}
  .rail-img{width:24px;height:24px}
  .dock{gap:14px}
  .rail-lab{font-size:11px}
  .dock-sub .dock-btn{padding:0 10px}
  /* touch: tap-open only */
  .dock-group:hover .dock-sub{opacity:0;visibility:hidden;pointer-events:none}
  .dock-group.open .dock-sub,.dock-group:focus-within .dock-sub{
    opacity:1;visibility:visible;pointer-events:auto}

  /* The bar is a single flex row of fixed-width items: about 708px of them
     inside a 362px phone. overflow was visible, so the last five — Social,
     Saved, Brand, Settings, Sign out — were clipped, not scrollable. There was
     no way to reach Settings or Sign out on a phone at all.
     Wrap into two rows instead of scrolling: a nav you have to swipe sideways
     hides the same items behind a gesture nobody looks for. */
  .dock{flex-wrap:wrap;justify-content:center;row-gap:4px;gap:12px;
        padding:9px 10px 8px}
  .dock-side{flex:0 1 auto;justify-content:center}
  /* the badge is decoration; the buttons are the navigation */
  .dock-brand{display:none}
  .dock-sep,.dock hr{display:none}
  body.app{padding-top:194px}
  /* centring the popout under Account pushed it past the right edge (measured
     x=219..399 on a 390 screen). Pin it to the right of its group instead. */
  .dock-sub{max-width:calc(100vw - 20px);left:auto;right:0;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .dock-sub,.dock-sub .dock-btn{transition:none}
}

/* Honey Basil on the rail labels (Liam confirmed after the preview) */
.rail-lab{font-family:'Honey Basil',Inter,sans-serif;font-size:13.5px;letter-spacing:.03em}

/* auto-hide: slides up and out on scroll down, back on scroll up (JS toggles
   .dock-hide on the wrap) */
.dock-wrap{transition:transform .85s ease-in-out,opacity .85s ease-in-out}   /* slower vanish (Liam); ease-out snapped to full speed at the start with no ramp-up — ease-in-out eases both ends, at the original duration */
.dock-wrap.dock-hide{transform:translate(-50%,calc(-100% - 24px));opacity:0;
  pointer-events:none}
@media(prefers-reduced-motion:reduce){.dock-wrap{transition:none}}

/* ~5% smaller overall (Liam) */
.dock{zoom:.95}

/* Account popout as a vertical list (Liam): stacked rows, icon + label,
   left-aligned, dividers between rows */
.dock-sub{flex-direction:column;align-items:stretch;min-width:190px;
  padding:8px}
.dock-sub .dock-item+.dock-item{margin-left:0;margin-top:2px}
.dock-sub .dock-item+.dock-item::before{display:none}
.dock-sub .dock-item+.dock-item{border-top:1px solid rgba(255,255,255,.08)}
.dock-sub .dock-btn{width:100%;justify-content:flex-start;height:42px;
  padding:0 12px;border-radius:8px}

/* ── phone: the dock is one row ───────────────────────────────────────────
   It wrapped to two rows (194px of chrome) because .rail-lab is 13.5px — the
   11px phone rule in dock.css sits ABOVE the 13.5px declaration, so it never
   applied. Rather than shrink the labels, drop the three review circles: the
   same three scores are already three full cards at the top of the home page,
   and the dock was their third appearance. */
@media (max-width:560px){
  .dock{flex-wrap:nowrap;gap:10px}
  .dock-side,.dock-trio{gap:10px}
  .dock-trio[data-trio="Review"]{display:none}
  body.app{padding-top:104px}
}

/* ── first-run product tour ───────────────────────────────────────────────
   A spotlight ring around one dock item at a time (giant box-shadow makes
   the "hole" — no actual overlay element cut out, one box does it all) plus
   a small card explaining it. Click-catching scrim sits behind the spot so
   clicking outside the card ends the tour early rather than trapping the
   page. Positions are set in JS from the real target's getBoundingClientRect
   every step, not guessed. */
.cc-tour-scrim{position:fixed;inset:0;z-index:200;background:transparent;cursor:pointer}
.cc-tour-spot{position:fixed;z-index:201;pointer-events:none;
  /* a moderate radius, not 999px — the target is a round icon stacked over a
     text label (taller than wide), so a full pill/stadium radius curved in
     hard enough to clip the label's corners. A flat-ish rounded rect holds
     the whole shape cleanly instead. */
  border-radius:22px;
  box-shadow:0 0 0 9999px rgba(10,11,13,.72);
  transition:top .35s ease-in-out,left .35s ease-in-out,width .35s ease-in-out,
    height .35s ease-in-out}
@media(prefers-reduced-motion:reduce){.cc-tour-spot{transition:none}}
.cc-tour-card{position:fixed;z-index:202;width:280px;max-width:calc(100vw - 28px);
  padding:18px 20px;border-radius:16px;background:#B6FF2E;color:#1F2329;
  box-shadow:0 24px 60px rgba(0,0,0,.4);border:1px solid rgba(0,0,0,.08);
  transition:top .35s ease-in-out,left .35s ease-in-out}
@media(prefers-reduced-motion:reduce){.cc-tour-card{transition:none}}
.cc-tour-eyebrow{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#1F2329;opacity:.6;margin:0 0 6px}
.cc-tour-title{margin:0 0 6px;font-family:'Honey Basil',Inter,sans-serif;
  font-size:19px;font-weight:400;color:#1F2329}
.cc-tour-text{margin:0 0 16px;font-size:13.5px;line-height:1.45;color:#1F2329}
.cc-tour-row{display:flex;align-items:center;gap:14px}
.cc-tour-back,.cc-tour-skip{background:none;border:0;padding:4px 0;font-size:12.5px;
  color:#1F2329;opacity:.65;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.cc-tour-back:hover,.cc-tour-skip:hover{opacity:1}
.cc-tour-next{padding:8px 16px;border-radius:999px;border:0;background:#1F2329;
  color:#B6FF2E;font-weight:700;font-size:13px;cursor:pointer}
.cc-tour-next:hover{background:#333944}

/* ── "Ask Tuesday Club" floating help chat ────────────────────────────────
   A fixed circular FAB (bottom-right) toggling a small chat panel. Dark
   panel / lime send button, same palette as the rest of the dock. */
.cc-help-fab{position:fixed;right:20px;bottom:20px;z-index:150;
  width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:#B6FF2E;color:#1F2329;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  display:flex;align-items:center;justify-content:center;
  transition:transform .14s,background .14s,color .14s}
.cc-help-fab-q{font-family:'Honey Basil',Inter,sans-serif;font-size:28px;line-height:1;
  transform:translateY(-1px)}
.cc-help-fab:hover{transform:scale(1.06);background:#a4ec1c}
.cc-help-fab[aria-expanded="true"]{background:#1F2329;color:#B6FF2E}
.cc-help-panel{position:fixed;right:20px;bottom:84px;z-index:150;
  width:320px;max-width:calc(100vw - 40px);max-height:min(480px, calc(100vh - 120px));
  display:flex;flex-direction:column;
  background:#1F2329;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  opacity:0;transform:translateY(10px) scale(.97);transform-origin:bottom right;
  transition:opacity .16s ease-out,transform .16s ease-out}
.cc-help-panel.is-open{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.cc-help-panel{transition:none}}
/* .cc-help-panel's own display:flex has the same specificity as the browser's
   built-in [hidden]{display:none}, and being an author rule it wins regardless
   of the hidden attribute -- the panel never actually hid. This beats it. */
.cc-help-panel[hidden]{display:none}
.cc-help-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:#15171a;color:#f2f4f6}
.cc-help-title{font-weight:700;font-size:14px}
.cc-help-sub{font-size:11.5px;color:#8b93a1;margin-top:2px}
.cc-help-close{background:none;border:0;color:#8b93a1;font-size:20px;line-height:1;
  cursor:pointer;padding:0 2px;align-self:flex-start}
.cc-help-close:hover{color:#f2f4f6}
.cc-help-msgs{flex:1 1 auto;overflow-y:auto;padding:14px 16px;display:flex;
  flex-direction:column;gap:10px;min-height:120px}
.cc-help-msg{font-size:13.5px;line-height:1.45;padding:9px 12px;border-radius:12px;
  max-width:85%;white-space:pre-wrap;word-break:break-word}
.cc-help-msg.is-bot{background:#2b2e35;color:#f2f4f6;align-self:flex-start;
  border-bottom-left-radius:4px}
.cc-help-msg.is-user{background:#B6FF2E;color:#1F2329;align-self:flex-end;
  border-bottom-right-radius:4px;font-weight:600}
.cc-help-chips{display:flex;flex-direction:column;gap:6px;align-self:flex-start;
  max-width:92%}
.cc-help-chip{background:#2b2e35;border:1px solid rgba(255,255,255,.12);color:#c7cbd1;
  font-size:12.5px;text-align:left;padding:8px 12px;border-radius:10px;cursor:pointer}
.cc-help-chip:hover{border-color:#B6FF2E;color:#f2f4f6}
.cc-help-typing{display:flex;align-items:center;gap:4px;padding:12px}
.cc-help-typing span{width:6px;height:6px;border-radius:50%;background:#8b93a1;
  animation:cc-help-bounce 1.1s infinite ease-in-out}
.cc-help-typing span:nth-child(2){animation-delay:.15s}
.cc-help-typing span:nth-child(3){animation-delay:.3s}
@keyframes cc-help-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}
  30%{transform:translateY(-4px);opacity:1}}
.cc-help-row{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.08)}
.cc-help-row input{flex:1 1 auto;background:#2b2e35;border:1px solid rgba(255,255,255,.10);
  border-radius:999px;padding:9px 14px;color:#f2f4f6;font-size:13.5px}
.cc-help-row input::placeholder{color:#5b626b}
.cc-help-row input:focus{outline:2px solid #B6FF2E;outline-offset:1px}
.cc-help-row button{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:0;
  background:#B6FF2E;color:#1F2329;display:flex;align-items:center;justify-content:center;
  cursor:pointer}
.cc-help-row button svg{width:18px;height:18px}
.cc-help-row button:hover{background:#a4ec1c}
@media(max-width:560px){
  .cc-help-fab{right:14px;bottom:14px}
  .cc-help-panel{right:14px;bottom:76px;width:calc(100vw - 28px)}
}

/* ── Help Centre page ─────────────────────────────────────────────────── */
.hc-layout{display:flex;align-items:flex-start;gap:32px;max-width:1220px;
  margin:0 auto;padding:0 4px}
/* top matches body.app's own padding-top (the dock's clearance) so the
   sidebar stops just below the fixed dock instead of sliding behind it */
/* hidden -- the page opens on the chat now, not a list of section jumps;
   .hc-content is flex:1 1 auto so it fills the space this leaves on its own. */
.hc-side{display:none}
.hc-side a{padding:9px 14px;border-radius:10px;color:#c7cbd1;font-size:13px;
  font-weight:600;text-decoration:none}
.hc-side a:hover{background:#2b2e35;color:#f2f4f6}
.hc-content{flex:1 1 auto;min-width:0;gap:22px}
.hc-diagram{background:#15171a;border-radius:12px;padding:16px 18px;margin:14px 0}
.hc-still{text-align:center}
@media(max-width:860px){
  .hc-layout{flex-direction:column;gap:18px}
  .hc-side{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}
  .hc-side a{background:#2b2e35;border-radius:999px;padding:7px 14px;font-size:12.5px}
}

/* ── Feedback form + admin list ──────────────────────────────────────── */
.fb-toggle{display:flex;gap:8px;margin-bottom:14px}
.fb-toggle-btn{background:var(--surface-2,#f0f2f4);border:1px solid var(--line,#e1e4e8);
  color:var(--ink-soft,#3a4048);font-size:13px;font-weight:600;padding:8px 16px;
  border-radius:999px;cursor:pointer}
.fb-toggle-btn.is-active{background:#1F2329;border-color:#1F2329;color:#B6FF2E}
.fb-row{display:flex;align-items:center;gap:12px;margin-top:12px}
.af-row{margin-bottom:12px}
.af-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12.5px}
.af-kind{font-weight:700;padding:3px 10px;border-radius:999px;font-size:11px;
  text-transform:uppercase;letter-spacing:.03em}
.af-kind.af-bug{background:rgba(242,131,111,.15);color:#f2836f}
.af-kind.af-idea{background:rgba(182,255,46,.15);color:#4f6a00}
/* the reporter's own title, as a real heading -- rows from before this
   field existed have none, so it only renders when present (see the
   {% if r.title %} guard in admin_feedback.html). */
.af-q{font-size:15px;margin:0 0 6px;color:var(--ink,#f2f4f6)}
/* two clearly separate groups (status, type), each labelled and stacked --
   as one undivided row of 7 pills it read as a single confusing list with
   no indication "Open" and "Bugs" belonged to different questions. */
.af-filters{display:flex;flex-wrap:wrap;gap:16px 32px;margin-bottom:18px;
  padding-bottom:16px;border-bottom:1px solid var(--line,#e1e4e8)}
.af-filter-group{display:flex;flex-direction:column;gap:7px}
.af-filter-label{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted,#8b93a1)}
.af-filters .fb-toggle{margin-bottom:0}
.af-empty{padding:20px 0}
.af-row.hidden{display:none}
.af-status-row{display:flex;gap:6px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line,#e1e4e8)}
.af-status-btn{background:none;border:1px solid var(--line,#e1e4e8);color:var(--ink-soft,#3a4048);
  font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;cursor:pointer}
.af-status-btn:hover{border-color:var(--ink-soft,#3a4048)}
/* literal colour, not var(--ink) -- on this page's dark (data-report) theme
   --ink IS the near-white text colour, not a dark background, so the var
   resolved to a white pill with lime text underneath it: unreadable. This
   is the same dark chip every other active toggle on the page already uses. */
.af-status-btn.is-active{background:#1F2329;border-color:#1F2329;color:#B6FF2E}
.af-msg{white-space:pre-wrap}
.af-expected{font-size:13px;margin:10px 0 0;padding:8px 12px;
  background:var(--surface-2,#f0f2f4);border-radius:8px;color:var(--ink-soft,#3a4048)}
#fb-expected-wrap.hidden{display:none}

/* ── Inline "ask a question" chat on the Help Centre page ───────────────
   Un-boxed on purpose (was a .fset card) -- chips, transcript and input sit
   straight on the page background, like a search bar rather than a panel.
   Reuses .cc-help-msg/.cc-help-chips/.cc-help-chip from the floating chat,
   restyled below for this wider, card-free context. */
.hc-chat-card{margin:0 0 26px}
.hc-chat-msgs{max-height:320px;overflow-y:auto;padding:0}
.hc-chat-msgs:empty{min-height:0}
/* .cc-help-msg.is-bot's shared background (#2b2e35) is close enough to the
   page bg (#1e2126) to read as barely-there -- lighter + a hairline border
   for real separation now there's no card behind it to add contrast. */
.hc-chat-card .cc-help-msg.is-bot{background:#3a3e46;
  border:1px solid rgba(255,255,255,.06)}
.hc-chat-msgs:not(:empty){margin-bottom:14px}
/* title + description only -- the input sits directly beneath, no card
   wrapping either, so the whole ask block reads as one open unit rather
   than a panel. */
.hc-ask-hero{text-align:left;margin-bottom:18px}
/* the Honey Basil treatment other h2s get is scoped to body[data-report]
   .fset > h2 (a direct-child combinator) in clean.css -- this h2 isn't
   inside a .fset on purpose, so it needs the same declaration restated
   here rather than inheriting it. Values pulled from the real computed
   style of a .fset h2, not guessed. */
.hc-ask-hero h2{margin:2px 0 6px;font-family:'Honey Basil',var(--display);
  font-weight:400;font-size:21px;color:#f2f4f6}
.hc-ask-hero .muted{margin:0 0 16px;max-width:640px}
/* suggested-question chips: a horizontal pill row above the input (no card
   width to constrain them to a vertical stack anymore). */
.hc-chat-card .cc-help-chips{flex-direction:row;flex-wrap:wrap;gap:8px;
  max-width:none;margin-bottom:14px}
.hc-chat-card .cc-help-chip{border-radius:999px;padding:9px 16px;
  background:#2b2e35}
/* the bar itself -- padding/font/radius/border/hover/focus lifted from the
   onboarding restaurant-search box, then bumped a size up (Wave's own help
   search: a big, unmissable bar with nothing boxing it in, not a form field
   buried in a card). Background one step lighter than the page (#1e2126)
   so it still reads as a distinct control while un-boxed. */
.hc-ask-search{display:flex;gap:10px;align-items:center;margin:0}
/* style.css:2051 has a global input[type=text]{border-radius:0 !important} rule
   (and a plain input:focus{border-color:var(--accent)} one behind it) that beats
   this on both !important and cascade order -- match its own weapon rather than
   lose the fight on specificity. */
.hc-ask-search input{flex:1 1 auto;padding:20px 24px !important;font-size:19px !important;
  font-family:'Inter',sans-serif;border-radius:16px !important;
  border:1.5px solid rgba(255,255,255,.14) !important;
  background:#282b32 !important;color:#f2f4f6 !important;
  transition:border-color .15s,background .15s,box-shadow .15s}
/* style.css:2051's input[type=text]:not(.lib-name) selector out-specifies the
   class rule above even with !important on both sides (attribute + :not(.x)
   beats a plain class). The id is the only thing that unambiguously wins. */
#hc-chat-input{border-radius:16px !important}
.hc-ask-search input::placeholder{color:#8b93a1}
.hc-ask-search input:hover:not(:focus){border-color:#B6FF2E !important;
  background:rgba(182,255,46,.06) !important}
.hc-ask-search input:focus{outline:none;border-color:#B6FF2E !important;
  box-shadow:0 0 18px 2px rgba(182,255,46,.35) !important}
.hc-ask-search button{flex:0 0 auto;width:60px;height:60px;border-radius:50%;
  border:0;background:#B6FF2E;color:#1F2329;display:flex;align-items:center;
  justify-content:center;cursor:pointer}
.hc-ask-search button:hover{background:#a4ec1c}
.hc-ask-search button svg{width:24px;height:24px}
.fset h3{margin:22px 0 8px;font-size:15px;color:var(--ink,#f2f4f6)}
.hc-table{width:100%;border-collapse:collapse;margin:10px 0 4px;font-size:12.5px}
.hc-table th,.hc-table td{text-align:left;padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}
.hc-table th{color:#8b93a1;font-weight:600;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.03em}