/* ==========================================================================
   FORGE — FAQ page
   ========================================================================== */

/* ---------- hero ---------- */
.fhero { background-color: var(--surface-shell); color: var(--text-on-shell); }
.fhero__in { display: grid; justify-items: start; gap: 18px; padding-block: clamp(28px, 3vw, 44px) clamp(44px, 5vw, 72px); }
.fhero .crumbs { color: var(--shell-9); }
.fhero .crumbs a:hover { color: var(--shell-12); }
.fhero .crumbs > span:last-child { color: var(--safety); }
.fhero .h-display { font-size: clamp(3.6rem, 8vw, 8rem); }
.fhero .h-display em { color: var(--safety); }
.fhero .lede { color: var(--shell-10); }
.fsearch { --c: 14px; position: relative; display: flex; align-items: center; gap: 14px; width: min(760px, 100%); height: 72px; margin-top: 6px; padding: 0 16px 0 22px; background: rgba(237, 238, 240, .08); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); box-shadow: inset 0 0 0 1px var(--border-on-shell); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: box-shadow var(--dur-base); }
.fsearch:focus-within { box-shadow: inset 0 0 0 2px var(--safety); }
.fsearch > .i { width: 26px; height: 26px; color: var(--safety); }
.fsearch input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: 0; font: 800 clamp(1.2rem, 2vw, 1.7rem)/1 var(--font-display); text-transform: uppercase; color: var(--shell-12); }
.fsearch input::placeholder { color: var(--shell-8); }
.fsearch__n { flex: none; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--shell-9); }
.fsearch__x { --c: 5px; width: 36px; height: 36px; display: grid; place-items: center; background: rgba(237, 238, 240, .1); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.fsearch__x:hover { background: var(--safety); color: var(--ink); }
.fmost { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fmost .mono { margin-right: 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--shell-9); }
.fmost a { --c: 5px; height: 32px; display: inline-flex; align-items: center; padding: 0 12px; background: var(--shell-4); color: var(--shell-11); font-size: var(--text-xs); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); transition: background var(--dur-fast), color var(--dur-fast); }
.fmost a:hover { background: var(--shell-12); color: var(--ink); }
@media (max-width: 559px) { .fsearch { height: 60px; padding: 0 10px 0 14px; gap: 10px; } .fsearch__n { display: none; } }

/* ---------- body ---------- */
.fbody { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-block: 40px clamp(64px, 7vw, 112px); }
.fnav { position: sticky; top: calc(var(--bar-h) + var(--head-h) + var(--nav-h) + 24px); display: grid; gap: 14px; transition: top .35s var(--ease-snap); }
html.bar-hidden .fnav { top: calc(var(--head-h) + var(--nav-h) + 24px); }
.fnav__k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.fnav ol { display: grid; gap: 2px; border-top: 2px solid var(--ink); }
.fnav a { position: relative; display: grid; grid-template-columns: 40px 20px 1fr auto; align-items: center; gap: 10px; padding: 11px 8px 11px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); transition: background var(--dur-fast), padding var(--dur-base) var(--ease-snap); }
.fnav a::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; background: var(--safety); transform: scaleY(0); transition: transform .3s var(--ease-snap); }
.fnav a .mono { font-size: 10px; color: var(--text-muted); }
.fnav a .i { width: 18px; height: 18px; color: var(--text-secondary); }
.fnav a b { font-weight: 600; }
.fnav a small { font-size: 10px; color: var(--text-muted); }
.fnav a:hover { padding-left: 4px; }
.fnav a.is-on { padding-left: 6px; }
.fnav a.is-on::before { transform: none; }
.fnav a.is-on .i, .fnav a.is-on .mono { color: var(--amber-11); }
.fnav a.is-off { opacity: .35; }
.fnav__help { --c: 18px; display: grid; justify-items: start; gap: 10px; padding: 18px; background: var(--surface-shell); color: var(--text-on-shell); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.fnav__help > .mono { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--safety); }
.fnav__help b { font: 900 1.6rem/1 var(--font-display); text-transform: uppercase; }
.fnav__help .status { color: var(--shell-11); }
.fnav__help .link-u { color: var(--shell-12); }
@media (max-width: 1023px) {
  .fbody { grid-template-columns: 1fr; padding-top: 0; }
  .fnav { top: calc(var(--bar-h) + var(--head-h)); z-index: calc(var(--z-sticky) - 1); margin-inline: calc(var(--gutter) * -1); padding: 10px var(--gutter); background: rgba(232, 233, 234, .9); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--border-subtle); }
  html.bar-hidden .fnav { top: var(--head-h); }
  .fnav__k, .fnav__help { display: none; }
  .fnav ol { display: flex; gap: 6px; border: 0; overflow-x: auto; scrollbar-width: none; }
  .fnav ol::-webkit-scrollbar { display: none; }
  .fnav li { flex: none; }
  .fnav a { --c: 6px; grid-template-columns: auto auto auto; gap: 7px; height: 38px; padding: 0 12px !important; border: 0; background: var(--surface-raised); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
  .fnav a .mono { display: none; }
  .fnav a::before { display: none; }
  .fnav a.is-on { background: var(--ink); color: var(--shell-12); }
  .fnav a.is-on .i { color: var(--safety); }
  .fnav a b { font-size: var(--text-xs); white-space: nowrap; }
}

/* ---------- topics + questions ---------- */
.fmain { display: grid; gap: clamp(36px, 4vw, 56px); min-width: 0; }
.ftopic { scroll-margin-top: 200px; }
.ftopic__h { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.ftopic__ic { --c: 8px; width: 48px; height: 48px; display: grid; place-items: center; background: var(--ink); color: var(--safety); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.ftopic__ic .i { width: 24px; height: 24px; }
.ftopic__code { font-size: 11px; letter-spacing: .1em; color: var(--amber-11); }
.ftopic .h-2 { font-size: clamp(1.9rem, 3vw, 2.8rem); }
.ftopic__n { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.fq { border-bottom: 1px solid var(--border-default); scroll-margin-top: 200px; }
.fq summary { display: grid; grid-template-columns: 52px 1fr 24px; align-items: center; gap: 12px; padding: 18px 0; cursor: pointer; list-style: none; transition: background var(--dur-fast); }
.fq summary::-webkit-details-marker { display: none; }
.fq summary:hover .fq__q { color: var(--amber-11); }
.fq__no { font-size: 10.5px; color: var(--text-muted); }
.fq__q { font-size: var(--text-md); font-weight: 600; line-height: 1.35; transition: color var(--dur-fast); }
.fq summary .i { transition: transform var(--dur-base) var(--ease-snap); }
.fq[open] summary .i { transform: rotate(45deg); color: var(--amber-11); }
.fq[open] summary .fq__no { color: var(--amber-11); }
.fq__a { display: grid; gap: 12px; padding: 0 36px 22px 64px; color: var(--text-secondary); max-width: 860px; animation: fqIn .35s var(--ease-out); }
@keyframes fqIn { from { opacity: 0; transform: translateY(-6px); } }
.fq__a b { color: var(--ink); }
.fq__a a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fq__a .mono { font-size: .92em; color: var(--ink); }
.fq mark { background: var(--safety); color: var(--ink); padding: 0 1px; }
.fq.is-flash { animation: flash 1.8s var(--ease-standard); }
@keyframes flash { 0%, 30% { background: var(--amber-3); box-shadow: inset 3px 0 0 var(--safety); } 100% { background: transparent; box-shadow: inset 3px 0 0 transparent; } }
.ftable { width: 100%; max-width: 640px; border-collapse: collapse; border-top: 2px solid var(--ink); font-size: var(--text-sm); }
.ftable th { padding: 9px 12px 9px 0; text-align: left; font: 500 9.5px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-default); }
.ftable td { padding: 10px 12px 10px 0; border-bottom: 1px dashed var(--border-default); color: var(--ink); }
.ftable td:first-child { font-weight: 600; }
.fq__a .pays { margin-top: 2px; }
.fq__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--border-subtle); }
.fq__foot > .mono { margin-right: 4px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted) !important; }
.fq__vote, .fq__copy { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--border-default); color: var(--text-secondary); transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); }
.fq__vote:hover, .fq__copy:hover { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.fq__vote.is-on { background: var(--ink); color: var(--shell-12); box-shadow: none; }
.fq__vote:disabled:not(.is-on) { opacity: .4; }
.fq__copy { margin-left: auto; }
.fq__copy .i { width: 14px; height: 14px; }
.fempty { --c: 22px; display: grid; justify-items: start; gap: 12px; padding: 28px; background: var(--surface-raised); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); border-top: 4px solid var(--safety); }
.fempty p:not(.h-3) { color: var(--text-secondary); max-width: 52ch; }
.fempty__cta { display: flex; gap: 8px; flex-wrap: wrap; }
.fempty .btn--line { --fill: var(--surface-raised); }
@media (max-width: 559px) { .fq summary { grid-template-columns: 40px 1fr 22px; gap: 8px; } .fq__q { font-size: var(--text-sm); } .fq__a { padding: 0 0 20px 0; } .fq__copy { margin-left: 0; } .ftopic__h { grid-template-columns: auto 1fr; } .ftopic__code, .ftopic__n { display: none; } .ftopic__ic { width: 40px; height: 40px; } .ftable { font-size: var(--text-xs); } }

/* ---------- still stuck ---------- */
.fstuck { background: var(--surface-shell); color: var(--text-on-shell); border-top: 10px solid transparent; border-image: repeating-linear-gradient(-45deg, var(--safety) 0 10px, var(--ink) 10px 20px) 10; }
.fstuck__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; padding-block: clamp(48px, 6vw, 88px); }
.fstuck__in > div:first-child { display: grid; justify-items: start; gap: 18px; }
.fstuck .h-1 em { color: var(--safety); }
.fstuck__r { display: grid; justify-items: start; gap: 16px; }
.fstuck .status { color: var(--shell-12); }
.fstuck .lede { color: var(--shell-10); }
.fstuck__btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 767px) { .fstuck__in { grid-template-columns: 1fr; } }