/* GoalBank — layout on top of tokens.css (Editorial Field Notes) */
[hidden]{display:none !important}

/* ---------- gate: full-bleed ink cover ---------- */
.gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  background:var(--ink);color:var(--paper);text-align:center;padding:24px}
.gate-inner{max-width:420px;animation:rise .5s var(--ease,cubic-bezier(.16,1,.3,1)) both}
.gate-logo{margin-bottom:14px}
.gate-kicker{font:700 11px 'JetBrains Mono',monospace;letter-spacing:.28em;color:var(--persimmon)}
.gate-title{font:900 clamp(3rem,10vw,4.5rem)/1 'Fraunces',serif;margin:.2em 0 .35em}
.gate-title em{font-style:italic;color:var(--persimmon)}
.gate-sub{color:var(--line);font-size:.95rem;margin-bottom:1.4em}
.gate-form{display:flex;gap:10px;justify-content:center}
.gate-form input{background:transparent;border:1.5px solid var(--ink-faint);color:var(--paper);
  padding:12px 14px;border-radius:3px;font:600 1rem 'JetBrains Mono',monospace;width:170px;
  letter-spacing:.2em;text-align:center}
.gate-form input:focus{outline:none;border-color:var(--persimmon)}
.gate-err{color:var(--persimmon);font-size:.85rem;margin-top:.9em}

/* ---------- app frame ---------- */
.app{max-width:860px;margin:0 auto;padding:28px 20px 60px}
.app-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:34px}
.lockup{height:34px;width:auto}
.reset-btn{white-space:nowrap}

.hero{margin-bottom:36px}
.hero-title{font:900 clamp(2.6rem,7vw,4rem)/1.02 'Fraunces',serif;margin:.15em 0 .25em}
.hero-title em{font-style:italic;color:var(--persimmon)}
.hero-sub{max-width:56ch;color:var(--ink-soft)}

/* ---------- step panels (ledger cards) ---------- */
.panel{background:var(--paper-2);border:1.1px solid var(--ink);border-radius:4px;
  padding:20px 22px 22px;margin-bottom:22px;position:relative}
.step-head{display:flex;align-items:center;gap:14px;
  font:700 11px 'JetBrains Mono',monospace;letter-spacing:.28em;text-transform:uppercase;
  color:var(--persimmon);margin:0 0 16px}
.step-num{font:900 2rem/1 'Fraunces',serif;color:var(--ink);opacity:.18}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media (max-width:560px){.grid-2,.grid-3{grid-template-columns:1fr}}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;
  font:600 .8rem 'Inter',sans-serif;color:var(--ink-soft)}
.field input,.field select{font:400 1rem 'Inter',sans-serif;color:var(--ink);
  background:var(--paper-3);border:1px solid var(--line-strong);border-radius:3px;
  padding:11px 12px;transition:border-color .15s, box-shadow .15s}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink);
  box-shadow:3px 3px 0 var(--persimmon)}
.field select:disabled{opacity:.45;cursor:not-allowed}

.indicator-text{font:400 .88rem/1.5 'Inter',sans-serif;color:var(--ink-faint);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:8px 2px;margin:-4px 0 14px}

/* ---------- the filed goal card ---------- */
.goal-wrap{animation:rise .45s cubic-bezier(.16,1,.3,1) both}
.goal-card{position:relative;background:var(--paper-3);border:1.5px solid var(--ink);
  border-radius:4px;box-shadow:6px 6px 0 var(--persimmon);
  padding:28px 24px 18px;margin:30px 0 26px}
.goal-tab{position:absolute;top:-11px;left:16px;background:var(--ink);color:var(--paper-3);
  font:700 10px 'JetBrains Mono',monospace;letter-spacing:.14em;padding:4px 9px}
.goal-text{font:600 1.18rem/1.55 'Fraunces',serif;color:var(--ink)}
.goal-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.goal-code{font:700 .78rem 'JetBrains Mono',monospace;color:var(--persimmon)}

/* ---------- quarter / trial matrix ---------- */
.matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:640px){.matrix{grid-template-columns:repeat(2,1fr)}}
.qcol{display:flex;flex-direction:column;gap:8px}
.qlabel{font:700 11px 'JetBrains Mono',monospace;letter-spacing:.2em;color:var(--ink-faint);
  text-align:center;text-transform:uppercase}
.chip{font:600 .88rem 'Inter',sans-serif;color:var(--ink);background:var(--paper-3);
  border:1.2px solid var(--ink);border-radius:3px;padding:10px 6px;cursor:pointer;
  transition:transform .12s, box-shadow .12s, background .12s, color .12s}
.chip:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--line-strong)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper-3);
  box-shadow:4px 4px 0 var(--persimmon);transform:translate(-1px,-1px)}
.chip:focus-visible{outline:2px solid var(--persimmon);outline-offset:2px}
.hint{font-size:.85rem;color:var(--ink-faint);margin:-6px 0 14px}

/* ---------- actions & footer ---------- */
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.app-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:56px;padding-top:16px;border-top:1px solid var(--line);
  font:400 .78rem 'JetBrains Mono',monospace;color:var(--ink-faint)}

/* copy feedback */
.copied{background:var(--sage)!important;color:var(--paper-3)!important;border-color:var(--sage)!important}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .gate-inner,.goal-wrap{animation:none}
  .chip,.field input,.field select{transition:none}
}

/* screen: hide print container */
@media screen{.print-root{display:none}}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:640px){.grid-4{grid-template-columns:1fr 1fr}}

.goal-btns{display:flex;gap:10px;flex-wrap:wrap}