/* Auth + account pages in the homepage design language. The outer page shell
   shares the navigation grid; the task card stays compact inside it. Depends
   on the variables defined in home.css. */

.auth-main{
  flex:1;width:min(calc(100% - 40px),var(--page-max));margin:0 auto;
  display:flex;align-items:flex-start;justify-content:flex-start;
  padding:56px 0 80px;
}
.card{
  width:100%;max-width:420px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 34px 30px;
}
.card h1{
  font-family:var(--sans);font-weight:800;font-size:24px;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);
}
.card h1::after{
  content:"";display:block;width:38px;height:4px;background:var(--danger);
  margin-top:12px;
}
.card .lead{margin-top:14px;font-size:14px;color:var(--ink-soft);line-height:1.5}
/* Signup trial callout - clear BEFORE they commit that a free account starts on
   a Pro trial. Accent-tinted so it reads as a perk, not a warning. */
.trial-teaser{
  margin-top:16px;padding:12px 14px;border:1px solid var(--danger-line);
  background:var(--danger-wash);border-radius:var(--radius);
  font-size:13px;color:var(--ink-soft);line-height:1.5;
}
.trial-teaser b{color:var(--danger-ink)}

.notice{
  margin-top:18px;padding:12px 14px;border-radius:var(--radius);
  font-size:13.5px;line-height:1.45;display:none;
}
.notice.show{display:block}
.notice.ok{background:var(--clear-wash);border:1px solid var(--line);color:var(--ink)}
.notice.err{background:var(--danger-wash);border:1px solid var(--danger-line);color:var(--danger-ink)}
.notice a{color:var(--danger);font-weight:600;text-decoration:none;cursor:pointer}
.notice a:hover{text-decoration:underline}

.field{margin-top:18px}
.field label{
  display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint);margin-bottom:7px;
}
.field input{
  width:100%;border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--paper);font-family:var(--mono);font-size:15px;color:var(--ink);
  padding:12px 14px;outline:0;transition:border-color .12s ease,box-shadow .12s ease;
}
.field input:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(233,85,43,.12)}
.field .hint{font-size:12px;color:var(--ink-faint);margin-top:6px}
/* Authenticator-code input on the access-decision pages: centred, spaced digits. */
.field input.otp{text-align:center;letter-spacing:.4em;font-size:20px}

.btn-primary{
  width:100%;margin-top:24px;border:0;border-radius:var(--radius);cursor:pointer;
  background:var(--danger);color:#fff;font-family:var(--sans);font-size:14px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:14px 0;
  transition:background .15s ease;
}
.btn-primary:hover{background:var(--danger-ink)}
.btn-primary:disabled{opacity:.55;cursor:default}
/* An <a> is inline, so width:100% is ignored and the button collapses to a
   small box that overlaps its neighbours. Anchor buttons render as centred
   blocks like the real <button> ones. */
a.btn-primary{display:block;box-sizing:border-box;text-align:center;text-decoration:none;padding:14px 0}

.alt{
  margin-top:18px;text-align:center;font-size:13.5px;color:var(--ink-soft);
}
.alt a{color:var(--danger);font-weight:600;text-decoration:none}
.alt a:hover{text-decoration:underline}

.divider{
  margin:26px 0 4px;display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint);
}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

.oauth-list{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.oauth-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  color:var(--ink);text-decoration:none;font-family:var(--sans);font-size:14px;
  font-weight:600;padding:11px 0;transition:all .12s ease;
}
.oauth-btn:hover{border-color:var(--ink);transform:translateY(-1px)}

/* account page */
.account-main{flex:1;width:min(calc(100% - 40px),var(--page-max));max-width:none;margin:0 auto;padding:56px 0 80px}
.account-main > *{width:min(100%,720px)}
.acct-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px}
.acct-head h1{
  max-width:16ch;font-family:var(--sans);font-weight:700;font-size:var(--display-size);
  line-height:var(--display-line);letter-spacing:var(--display-track);text-transform:none;
  color:var(--ink);text-wrap:balance;
}
.acct-head h1::after{display:none}
.acct-meta{font-family:var(--mono);font-size:13px;color:var(--ink-soft)}
.acct-meta b{color:var(--ink)}
/* Quiet trial markers - muted, never the loud accent pill. */
.acct-meta .trial-pill{
  font-size:11px;color:var(--ink-faint);background:var(--clear-wash);
  border-radius:999px;padding:2px 10px;white-space:nowrap;
}
.trial-note{
  color:var(--ink-soft) !important;border-left:2px solid var(--line);
  padding-left:12px;margin-top:0 !important;margin-bottom:12px;
}

.panel{
  margin-top:26px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;
}
.panel h2{
  font-family:var(--sans);font-size:14px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:var(--ink);
}
.panel h2::after{content:"";display:block;width:30px;height:3px;background:var(--danger);margin-top:8px}
.panel .p-sub{font-size:13px;color:var(--ink-soft);margin-top:10px;line-height:1.5}

.preference-form{margin-top:16px}
.preference-form fieldset{border:0;margin:0;padding:0;display:grid;gap:10px}
.preference-choice{
  display:grid;grid-template-columns:18px 1fr;align-items:start;gap:12px;
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);cursor:pointer;transition:border-color .12s ease,background .12s ease;
}
.preference-choice:hover{border-color:var(--ink-faint)}
.preference-choice:has(input:checked){border-color:var(--danger);background:var(--danger-wash)}
.preference-choice input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--danger)}
.preference-choice:focus-within{outline:3px solid rgba(233,85,43,.2);outline-offset:2px}
.preference-copy{display:grid;gap:3px}
.preference-copy b{font-family:var(--sans);font-size:14px;color:var(--ink)}
.preference-copy span{font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
.preference-actions{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.preference-actions button{
  border:0;border-radius:var(--radius);background:var(--danger);color:#fff;cursor:pointer;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:10px 16px;transition:background .15s ease;
}
.preference-actions button:hover{background:var(--danger-ink)}
.preference-actions button:disabled{opacity:.55;cursor:default}
.preference-status{font-family:var(--mono);font-size:12px;color:var(--danger-ink)}
.preference-note{margin-top:12px;font-size:12px;line-height:1.45;color:var(--ink-faint)}
.preference-note code{font-family:var(--mono);color:var(--ink-soft)}

@media(max-width:720px){
  .account-main{width:calc(100% - 24px);padding-top:48px}
  .acct-head h1{font-size:48px}
}

.key-row{
  display:flex;align-items:center;gap:14px;border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;margin-top:10px;background:var(--paper);
}
.key-row .kname{font-weight:600;font-size:14px;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.key-row .kexp{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.key-row .krevoke{
  border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);
  font-family:var(--mono);font-size:12px;padding:5px 12px;border-radius:var(--radius);cursor:pointer;
  transition:all .12s ease;
}
.key-row .krevoke:hover{border-color:var(--danger);color:var(--danger)}
.key-empty{font-family:var(--mono);font-size:13px;color:var(--ink-faint);margin-top:12px;font-style:italic}

.mint-form{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.mint-form input{
  flex:1;min-width:180px;border:1.5px solid var(--line);border-radius:var(--radius);
  font-family:var(--mono);font-size:14px;padding:10px 12px;outline:0;color:var(--ink);
}
.mint-form input:focus{border-color:var(--ink)}
.mint-form button{
  border:0;border-radius:var(--radius);background:var(--danger);color:#fff;cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:0 20px;transition:background .15s ease;
}
.mint-form button:hover{background:var(--danger-ink)}

/* Change-password form on the account page. */
.pw-form{margin-top:16px;max-width:420px}
.pw-field{margin-top:14px}
.pw-field:first-child{margin-top:0}
.pw-field label{
  display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint);margin-bottom:7px;
}
.pw-field input{
  width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--paper);font-family:var(--mono);font-size:14px;color:var(--ink);
  padding:11px 12px;outline:0;transition:border-color .12s ease,box-shadow .12s ease;
}
.pw-field input:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(233,85,43,.12)}
.pw-hint{font-size:12px;color:var(--ink-faint);margin-top:6px}
.pw-form button{
  margin-top:18px;border:0;border-radius:var(--radius);background:var(--danger);color:#fff;cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:11px 22px;transition:background .15s ease;
}
.pw-form button:hover{background:var(--danger-ink)}
.pw-form button:disabled{opacity:.55;cursor:default}

.key-reveal{
  margin-top:16px;padding:14px;border:1px solid var(--danger-line);background:var(--danger-wash);
  border-radius:var(--radius);display:none;
}
.key-reveal.show{display:block}
.key-reveal .kr-label{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--danger-ink);margin-bottom:8px;font-weight:600;
}
.key-reveal code{
  display:block;font-family:var(--mono);font-size:12px;word-break:break-all;
  background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:10px;
  color:var(--ink);
}
.key-reveal .kr-actions{margin-top:10px;display:flex;gap:10px;align-items:center}
.key-reveal .kr-copy{
  border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;
  font-family:var(--mono);font-size:12px;padding:6px 14px;border-radius:var(--radius);
}
.key-reveal .kr-copy:hover{border-color:var(--ink)}
.key-reveal .kr-note{font-size:12px;color:var(--danger-ink)}

@media(max-width:980px){
  .auth-main{width:calc(100% - 24px)}
}

@media(max-width:560px){
  .card{padding:26px 20px 24px}
  .auth-main{padding:32px 0 60px}
}

/* ---- usage page meters ---- */
.usage-card{margin-top:14px}
.uc-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.uc-label{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink)}
.uc-val{font-family:var(--mono);font-size:14px;color:var(--ink)}
.uc-unlim{color:var(--ink-faint)}
.uc-bar{margin-top:8px;height:8px;border-radius:var(--radius);background:var(--band);overflow:hidden}
.uc-fill{display:block;height:100%;background:var(--slate);border-radius:var(--radius);transition:width .3s ease}
.uc-fill.warm{background:var(--amber)}
.uc-fill.hot{background:var(--danger)}
.uc-sub{margin-top:6px;font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.limit-grid{margin-top:6px}
.lg-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.lg-row:last-child{border-bottom:0}
.lg-k{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint)}
.lg-v{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:500}

/* ── Request-access (upgrade) page ────────────────────────────────────────── */
/* textarea + select inherit the input treatment so the form reads as one piece. */
.field textarea,
.field select{
  width:100%;border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--paper);font-family:var(--mono);font-size:15px;color:var(--ink);
  padding:12px 14px;outline:0;transition:border-color .12s ease,box-shadow .12s ease;
}
.field textarea{resize:vertical;min-height:92px;line-height:1.5}
.field textarea:focus,
.field select:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(233,85,43,.12)}
/* The "by request only" eyebrow: a quiet mono label, not the orange accent —
   the exclusivity is in the words, not the colour. */
.up-eyebrow{
  display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:3px;padding:3px 9px;margin-bottom:12px;
}
.up-points{
  margin:16px 0 4px;padding:0;list-style:none;
  border-top:1px solid var(--line-soft);
}
.up-points li{
  font-size:13.5px;color:var(--ink-soft);line-height:1.5;
  padding:10px 0 10px 22px;position:relative;border-bottom:1px solid var(--line-soft);
}
.up-points li::before{
  content:"";position:absolute;left:2px;top:16px;width:6px;height:6px;
  border-radius:50%;background:var(--danger);
}
.up-who{
  font-family:var(--mono);font-size:12px;color:var(--ink-faint);
  background:var(--band);border-radius:var(--radius);padding:9px 12px;margin:4px 0 18px;
}
.btn-inline{
  display:inline-block;font-family:var(--sans);font-size:14px;font-weight:600;
  color:var(--danger);text-decoration:none;
}
.btn-inline:hover{text-decoration:underline}

/* Usage-meter widths as classes — see the CSP note in home.css. */
.uc-fill.w0{width:0%}.uc-fill.w1{width:1%}.uc-fill.w2{width:2%}.uc-fill.w3{width:3%}.uc-fill.w4{width:4%}.uc-fill.w5{width:5%}.uc-fill.w6{width:6%}.uc-fill.w7{width:7%}.uc-fill.w8{width:8%}.uc-fill.w9{width:9%}
.uc-fill.w10{width:10%}.uc-fill.w11{width:11%}.uc-fill.w12{width:12%}.uc-fill.w13{width:13%}.uc-fill.w14{width:14%}.uc-fill.w15{width:15%}.uc-fill.w16{width:16%}.uc-fill.w17{width:17%}.uc-fill.w18{width:18%}.uc-fill.w19{width:19%}
.uc-fill.w20{width:20%}.uc-fill.w21{width:21%}.uc-fill.w22{width:22%}.uc-fill.w23{width:23%}.uc-fill.w24{width:24%}.uc-fill.w25{width:25%}.uc-fill.w26{width:26%}.uc-fill.w27{width:27%}.uc-fill.w28{width:28%}.uc-fill.w29{width:29%}
.uc-fill.w30{width:30%}.uc-fill.w31{width:31%}.uc-fill.w32{width:32%}.uc-fill.w33{width:33%}.uc-fill.w34{width:34%}.uc-fill.w35{width:35%}.uc-fill.w36{width:36%}.uc-fill.w37{width:37%}.uc-fill.w38{width:38%}.uc-fill.w39{width:39%}
.uc-fill.w40{width:40%}.uc-fill.w41{width:41%}.uc-fill.w42{width:42%}.uc-fill.w43{width:43%}.uc-fill.w44{width:44%}.uc-fill.w45{width:45%}.uc-fill.w46{width:46%}.uc-fill.w47{width:47%}.uc-fill.w48{width:48%}.uc-fill.w49{width:49%}
.uc-fill.w50{width:50%}.uc-fill.w51{width:51%}.uc-fill.w52{width:52%}.uc-fill.w53{width:53%}.uc-fill.w54{width:54%}.uc-fill.w55{width:55%}.uc-fill.w56{width:56%}.uc-fill.w57{width:57%}.uc-fill.w58{width:58%}.uc-fill.w59{width:59%}
.uc-fill.w60{width:60%}.uc-fill.w61{width:61%}.uc-fill.w62{width:62%}.uc-fill.w63{width:63%}.uc-fill.w64{width:64%}.uc-fill.w65{width:65%}.uc-fill.w66{width:66%}.uc-fill.w67{width:67%}.uc-fill.w68{width:68%}.uc-fill.w69{width:69%}
.uc-fill.w70{width:70%}.uc-fill.w71{width:71%}.uc-fill.w72{width:72%}.uc-fill.w73{width:73%}.uc-fill.w74{width:74%}.uc-fill.w75{width:75%}.uc-fill.w76{width:76%}.uc-fill.w77{width:77%}.uc-fill.w78{width:78%}.uc-fill.w79{width:79%}
.uc-fill.w80{width:80%}.uc-fill.w81{width:81%}.uc-fill.w82{width:82%}.uc-fill.w83{width:83%}.uc-fill.w84{width:84%}.uc-fill.w85{width:85%}.uc-fill.w86{width:86%}.uc-fill.w87{width:87%}.uc-fill.w88{width:88%}.uc-fill.w89{width:89%}
.uc-fill.w90{width:90%}.uc-fill.w91{width:91%}.uc-fill.w92{width:92%}.uc-fill.w93{width:93%}.uc-fill.w94{width:94%}.uc-fill.w95{width:95%}.uc-fill.w96{width:96%}.uc-fill.w97{width:97%}.uc-fill.w98{width:98%}.uc-fill.w99{width:99%}
.uc-fill.w100{width:100%}