/* ═══════════════════════════════════════════════════════════════════════════
   THE FEEDBACK HUB — roadmap board, changelog feed, feature requests.
   Built on the existing SFV tokens. No new palette, no rounded SaaS cards,
   no glassmorphism. A cabinet of ideas, and dated notes from the shop.
   ═══════════════════════════════════════════════════════════════════════════ */

.fh-shell{max-width:1320px;margin:0 auto;padding:0 clamp(18px,4vw,44px)}

/* ---- masthead and tabs -------------------------------------------------- */
.fh-top{padding:clamp(38px,6vw,68px) 0 0}
.fh-top h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.04;margin-bottom:14px;text-wrap:balance}
.fh-lede{font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.6;max-width:58ch;color:rgba(0,0,0,.74)}

.fh-tabs{display:flex;gap:0;margin:clamp(26px,4vw,40px) 0 0;border-bottom:2px solid var(--black);
  overflow-x:auto;scrollbar-width:none;
  /* Belt as well as braces. The strip is a div now, but if it is ever moved
     back inside a nav or a header these keep the site chrome's paint off it. */
  background:none;position:static;height:auto;min-height:0;padding:0;
  align-items:stretch;justify-content:flex-start;border-top:0}
.fh-tabs::-webkit-scrollbar{display:none}
.fh-tab{appearance:none;background:none;border:0;border-bottom:4px solid transparent;
  font-family:'Rosario',sans-serif;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:rgba(0,0,0,.55);padding:14px 20px;margin-bottom:-2px;cursor:pointer;
  white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:9px;min-height:48px}
.fh-tab:hover{color:var(--black)}
.fh-tab[aria-current="page"]{color:var(--black);border-bottom-color:var(--lime)}
.fh-tab-n{font-size:.62rem;background:var(--black-06);padding:3px 7px;letter-spacing:.06em}

/* ---- controls ----------------------------------------------------------- */
/* One toolbar row, not three stacked bands. A search field stretched across
   1440px reads as an unfinished form; capped, it reads as a control, and the
   category chips can sit beside it where the eye already is. */
.fh-controls{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;
  padding:clamp(18px,2.4vw,26px) 0 4px}
.fh-search{flex:0 1 340px;min-width:210px;max-width:340px;position:relative}
.fh-search input{width:100%;font-family:'Rosario',sans-serif;font-size:.95rem;padding:13px 15px;
  border:2px solid var(--black);background:var(--white);color:var(--black);min-height:48px}
.fh-search input::placeholder{color:rgba(0,0,0,.42)}
.fh-filters{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 auto;padding:2px 0}
.fh-chip{appearance:none;font-family:'Rosario',sans-serif;font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;padding:0 13px;min-height:38px;display:inline-flex;
  align-items:center;gap:7px;border:2px solid var(--black-10);background:none;color:rgba(0,0,0,.66);
  cursor:pointer;transition:.15s;white-space:nowrap}
.fh-chip:hover{border-color:var(--black);color:var(--black)}
.fh-chip[aria-pressed="true"]{background:var(--black);color:var(--cream);border-color:var(--black)}
.fh-chip-n{opacity:.62;font-size:.92em}

/* ---- the board ---------------------------------------------------------- */
.fh-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);
  padding:clamp(14px,1.8vw,22px) 0 clamp(60px,8vw,100px);align-items:start}
.fh-col{min-width:0}
.fh-col-head{display:flex;align-items:baseline;gap:10px;padding-bottom:9px;
  border-bottom:2px solid var(--black);margin-bottom:11px}
.fh-col-title{font-family:'Lustria',serif;font-size:clamp(.92rem,1.4vw,1.08rem);line-height:1.2}
.fh-col-n{font-size:.68rem;font-weight:700;letter-spacing:.08em;color:var(--black);
  background:var(--lime);padding:3px 8px;line-height:1.4}
.fh-col[data-status="considering"] .fh-col-n{background:var(--black-06)}
.fh-col[data-status="planned"]     .fh-col-n{background:var(--cyan)}
.fh-col[data-status="in_progress"] .fh-col-n{background:var(--lime)}
.fh-col[data-status="released"]    .fh-col-n{background:var(--teal);color:var(--white)}

.fh-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--black-10);
  background:var(--white);padding:13px 14px 12px;margin-bottom:9px;transition:.15s}
.fh-card:hover{border-color:var(--black);transform:translateY(-1px)}
.fh-card:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
.fh-card-title{font-family:'Lustria',serif;font-size:1rem;line-height:1.26;margin-bottom:7px}
.fh-card-sum{font-size:.84rem;line-height:1.45;color:rgba(0,0,0,.7)}
.fh-card-foot{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:9px}
.fh-cat{font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:rgba(0,0,0,.5);border:1px solid var(--black-10);padding:3px 7px}
.fh-soon{font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  background:var(--lime);color:var(--black);padding:4px 8px;border:1px solid var(--black)}
.fh-card-img{width:100%;height:112px;object-fit:cover;display:block;margin:-15px -16px 13px;
  width:calc(100% + 32px);border-bottom:1px solid var(--black-10)}

.fh-empty{font-size:.85rem;color:rgba(0,0,0,.45);font-style:italic;padding:8px 0}

/* ---- changelog feed ----------------------------------------------------- */
.fh-feed{padding:clamp(18px,3vw,30px) 0 clamp(60px,8vw,100px);max-width:900px}
.fh-entry{display:grid;grid-template-columns:132px minmax(0,1fr);gap:8px 28px;
  padding:24px 0;border-bottom:1px solid var(--black-10)}
.fh-entry-date{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:rgba(0,0,0,.55);padding-top:4px}
.fh-entry h2{font-family:'Lustria',serif;font-weight:400;font-size:clamp(1.06rem,1.8vw,1.3rem);
  margin:9px 0 7px;line-height:1.26}
.fh-entry h2 a{color:inherit;text-decoration:none;border-bottom:2px solid transparent}
.fh-entry h2 a:hover{border-bottom-color:var(--lime)}
.fh-entry p{line-height:1.6;color:rgba(0,0,0,.76);max-width:62ch}
.fh-entry-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:11px}
.fh-mini{font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--teal);text-decoration:none;border-bottom:2px solid var(--teal);
  padding-bottom:2px;display:inline-flex;align-items:center;min-height:24px}
.fh-mini:hover{color:var(--purple);border-color:var(--purple)}
.fh-tagc{font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:4px 9px;border:2px solid var(--black);display:inline-block}
.fh-tagc[data-c="new"]{background:var(--lime)}
.fh-tagc[data-c="improved"]{background:var(--cyan)}
.fh-tagc[data-c="updated"]{background:var(--white)}
.fh-tagc[data-c="fixed"]{background:var(--white)}
.fh-tagc[data-c="paused"]{background:transparent;border-style:dashed;color:rgba(0,0,0,.62)}

/* ---- detail pages ------------------------------------------------------- */
.fh-detail{max-width:760px;padding:clamp(26px,4vw,44px) 0 clamp(60px,8vw,100px)}
.fh-back{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:var(--teal);text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.fh-detail h1{font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.1;margin:14px 0 16px}
.fh-meta{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.fh-detail h2{font-family:'Rosario',sans-serif;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--brass,#8a6d1f);margin:32px 0 12px}
.fh-detail p{line-height:1.68;margin-bottom:14px;color:rgba(0,0,0,.82)}
.fh-rel{display:grid;gap:9px}
.fh-rel a{display:block;text-decoration:none;color:inherit;border:1px solid var(--black-10);
  background:var(--white);padding:13px 15px;transition:.15s}
.fh-rel a:hover{border-color:var(--black)}

/* ---- the submission form ------------------------------------------------ */
.fh-form{max-width:660px;padding:clamp(18px,3vw,30px) 0 clamp(60px,8vw,100px)}
.fh-form label{display:block;font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:rgba(0,0,0,.66);margin-bottom:7px}
.fh-form input[type=text],.fh-form input[type=email],.fh-form textarea,.fh-form select{
  width:100%;font-family:'Rosario',sans-serif;font-size:.98rem;padding:12px 14px;
  border:2px solid var(--black);background:var(--white);color:var(--black);margin-bottom:18px;min-height:48px}
.fh-form textarea{min-height:130px;resize:vertical;line-height:1.55}
.fh-form .fh-hint{font-size:.82rem;color:rgba(0,0,0,.58);margin:-13px 0 18px;line-height:1.5}
.fh-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden}
.fh-note{border-left:4px solid var(--teal);background:var(--teal-10);padding:18px 20px;margin-bottom:26px}
.fh-note p{line-height:1.58;color:rgba(0,0,0,.8)}
.fh-msg{padding:16px 18px;margin-bottom:20px;border-left:4px solid var(--black);background:var(--white)}
.fh-msg[data-kind="ok"]{border-color:var(--teal);background:var(--teal-10)}
.fh-msg[data-kind="bad"]{border-color:#b3261e;background:rgba(179,38,30,.07)}
.fh-msg[data-kind="wait"]{border-color:var(--black-10);color:rgba(0,0,0,.6)}

.fh-btn{appearance:none;font-family:'Rosario',sans-serif;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;padding:0 28px;min-height:50px;border:2px solid var(--black);
  background:var(--lime);color:var(--black);cursor:pointer;transition:.15s;
  display:inline-flex;align-items:center;justify-content:center;gap:9px}
.fh-btn:hover:not(:disabled){background:var(--black);color:var(--cream)}
.fh-btn:disabled{opacity:.45;cursor:not-allowed}
.fh-btn-quiet{background:none}
.fh-btn-quiet:hover:not(:disabled){background:var(--black);color:var(--cream)}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--purple);outline-offset:2px}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1080px){
  .fh-board{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  /* Four columns crushed into a phone is unreadable, so the board becomes a
     status-filtered single column with the statuses as chips. */
  .fh-board{grid-template-columns:minmax(0,1fr)}
  .fh-col[hidden]{display:none}
  .fh-statusbar{display:flex!important}
  .fh-entry{grid-template-columns:minmax(0,1fr);gap:5px}
  .fh-entry-date{padding-top:0}
}
.fh-statusbar{display:none;gap:8px;flex-wrap:wrap;padding:4px 0 2px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── The legal links in the footer ─────────────────────────────────────────
   `.sfv-legal` is markup that exists on thirty pages across this site and has
   never had a single style rule anywhere, so Privacy and Terms have been
   rendering as default browser links: blue, underlined, on a dark teal
   footer. This rule covers the pages this hub ships. The other pages carry
   the same defect and are logged as a follow-up rather than fixed here,
   because a site-wide footer pass is explicitly out of scope this sprint. */
.sfv-legal{font-family:'Rosario',sans-serif;font-size:.65rem;color:rgba(255,255,255,.5)}
.sfv-legal a{color:rgba(255,255,255,.62);text-decoration:none;transition:color .2s}
.sfv-legal a:hover{color:var(--lime)}