/*
 * FinCo Rate Tool — page styles.
 * Colours and type come from /assets/css/tokens.css (the chassis brand tokens).
 * The var() fallbacks let this same stylesheet work standalone in the Cowork
 * artifact, where tokens.css is not loaded. Never hardcode hex here — edit tokens.css.
 */
:root{
  --brand-bg:        var(--navy,  #0d1b2a);
  --brand-surface:   var(--navy2, #111f30);
  --brand-surface-2: var(--navy3, #152236);
  --brand-line:      var(--navy4, #1b2d44);
  --brand-accent:    var(--gold,  #c9a84c);
  /* gold2 is the site's HOVER / gradient gold only — site.css never uses it for text.
     Using it for text reads mustard against the navy. Text accents use --brand-accent. */
  --brand-accent-2:  var(--gold2, #dfc06a);
  --brand-ink:       var(--text,  #f4efe6);
  --brand-ink-dim:   var(--text-muted, #9aabc2);

  /* functional only — not brand colours */
  --brand-pos:  #4fd08a;
  --brand-neg:  #ff7d7d;
  --brand-warn: #f0b357;

  --font-display: var(--font-display, 'Playfair Display', Georgia, serif);
  --font-ui:      var(--font-body, 'DM Sans', system-ui, -apple-system, sans-serif);

  --radius: var(--radius-sm, 6px);
  --maxw:   var(--max-width, 1180px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--brand-bg);color:var(--brand-ink);
  font-family:var(--font-ui);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:26px 22px 90px}

/* ---------- header ---------- */
header.masthead{
  position:relative;padding:28px 32px;border:1px solid var(--brand-line);
  background:var(--brand-surface);margin-bottom:24px;
}
.corner{position:absolute;width:24px;height:24px;border-color:var(--brand-accent);border-style:solid}
.c-tl{top:-1px;left:-1px;border-width:2px 0 0 2px}
.c-tr{top:-1px;right:-1px;border-width:2px 2px 0 0}
.c-bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px}
.c-br{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
h1{font-family:var(--font-display);font-weight:700;font-size:31px;letter-spacing:.3px;line-height:1.15}
h1 .dot{color:var(--brand-accent)}
/* Brand standard: the "Co" in FinCo is gold, "Fin" takes the background's contrast colour. */
.wordmark{font-family:var(--font-display);font-weight:700}
.wordmark .co{color:var(--brand-accent)}
.masthead .sub{color:var(--brand-ink-dim);font-size:13.5px;margin-top:6px}
.masthead .prepared{margin-top:12px;color:var(--brand-accent);font-size:13px}

h2{font-size:11.5px;text-transform:uppercase;letter-spacing:2.4px;
   color:var(--brand-accent);margin:30px 0 10px;font-weight:600}
.card{border:1px solid var(--brand-line);background:var(--brand-surface);
      padding:18px;margin-bottom:14px;border-radius:var(--radius)}

label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:1.3px;
      color:var(--brand-ink-dim);margin-bottom:5px;font-weight:500}
input,select,textarea{
  width:100%;background:var(--brand-surface-2);border:1px solid var(--brand-line);
  color:var(--brand-ink);padding:9px 10px;font-size:14px;font-family:var(--font-ui);
  border-radius:var(--radius);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-accent);outline-offset:-1px}
input[readonly]{opacity:.65}
textarea{min-height:110px;font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid4{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:10px;align-items:end}
.rowlabel{font-size:13.5px;color:var(--brand-ink);padding-bottom:10px}
@media(max-width:760px){.grid2,.grid4{grid-template-columns:1fr}.rowlabel{padding-bottom:2px;color:var(--brand-accent)}}

/* ---------- comparison table ---------- */
table.cmp{width:100%;border-collapse:collapse;font-size:13.5px}
table.cmp th{color:var(--brand-accent);text-transform:uppercase;font-size:10px;
  letter-spacing:1.4px;text-align:right;padding:9px 10px;border-bottom:1px solid var(--brand-line);font-weight:600}
table.cmp th:first-child{text-align:left}
table.cmp td{padding:8px 10px;text-align:right;border-bottom:1px solid rgba(36,56,92,.5)}
table.cmp td:first-child{text-align:left;color:var(--brand-ink-dim)}
table.cmp tr.total td{font-weight:700;color:var(--brand-ink);border-top:1px solid var(--brand-line)}
.pos{color:var(--brand-pos)} .neg{color:var(--brand-neg)} .warn{color:var(--brand-warn)}
/* the total row sets its own colour, so the savings cell needs to win it back */
table.cmp tr.total td.pos{color:var(--brand-pos)}
table.cmp tr.total td.neg{color:var(--brand-neg)}

/* reconciliation banner */
#recon{font-size:12.5px;padding:10px 12px;border-radius:var(--radius);margin-top:10px;display:none;line-height:1.5}
#recon.ok{display:block;border:1px solid var(--brand-pos);color:var(--brand-pos);background:rgba(79,208,138,.07)}
#recon.bad{display:block;border:1px solid var(--brand-warn);color:var(--brand-warn);background:rgba(240,179,87,.07)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.stat{border:1px solid var(--brand-line);background:var(--brand-surface-2);padding:18px;text-align:center;border-radius:var(--radius)}
.stat .k{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--brand-ink-dim);font-weight:600}
.stat .v{font-family:var(--font-display);font-size:29px;color:var(--brand-accent);margin-top:7px;line-height:1.1}
.stat .n{font-size:10.5px;color:var(--brand-ink-dim);margin-top:5px}
@media(max-width:640px){.stats{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:linear-gradient(135deg,var(--brand-accent),var(--brand-accent-2));color:var(--brand-bg);border:none;
  padding:10px 18px;font-family:var(--font-ui);font-size:13px;font-weight:600;letter-spacing:.3px;
  cursor:pointer;border-radius:var(--radius);margin:4px 6px 4px 0}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--brand-accent);border:1px solid var(--brand-accent)}
.btn.small{padding:6px 12px;font-size:11.5px}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}

/* ---------- drop zone ---------- */
.drop{border:1.5px dashed var(--brand-accent);background:rgba(201,164,92,.05);
  padding:30px;text-align:center;cursor:pointer;transition:background .15s;border-radius:var(--radius)}
.drop.on{background:rgba(201,164,92,.16)}
.drop .big{font-family:var(--font-display);font-size:20px;color:var(--brand-accent)}
.drop .hint{font-size:12px;color:var(--brand-ink-dim);margin-top:7px;max-width:560px;margin-left:auto;margin-right:auto}

#aiStatus{font-size:12.5px;margin-top:12px;color:var(--brand-accent);min-height:18px}
#aiStatus.err{color:var(--brand-neg)}

/* progress bar */
.bar{height:3px;background:var(--brand-surface-2);border-radius:2px;overflow:hidden;margin-top:10px;display:none}
.bar.on{display:block}
.bar i{display:block;height:100%;width:0;background:var(--brand-accent);transition:width .25s}

/* ---------- fee rows ---------- */
.fee-row{display:grid;grid-template-columns:2fr 1fr auto;gap:10px;margin-bottom:8px;align-items:center}
.fee-row.zeroed input:nth-child(2){border-color:var(--brand-pos)}
.x{background:none;border:1px solid var(--brand-line);color:var(--brand-ink-dim);
   width:34px;height:34px;cursor:pointer;border-radius:var(--radius);font-size:16px;line-height:1}
.x:hover{border-color:var(--brand-neg);color:var(--brand-neg)}
.feehdr{display:grid;grid-template-columns:2fr 1fr auto;gap:10px;margin-bottom:6px}

/* ---------- proposed line items ---------- */
.lihdr,.li-row{display:grid;grid-template-columns:2.1fr 1.7fr .95fr 1.15fr .95fr auto;gap:9px;align-items:center}
.lihdr{margin-bottom:6px}
.lihdr span{font-size:10px;text-transform:uppercase;letter-spacing:1.3px;color:var(--brand-ink-dim);font-weight:500}
.li-row{margin-bottom:8px}
.li-row .li-out{text-align:right;font-size:13.5px;color:var(--brand-accent);font-weight:600;font-variant-numeric:tabular-nums}
.li-row input:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:900px){
  .lihdr{display:none}
  .li-row{grid-template-columns:1fr 1fr;gap:7px;padding:10px;border:1px solid var(--brand-line);border-radius:var(--radius);margin-bottom:12px}
  .li-row .li-label{grid-column:1/-1}
  .li-row .li-out{grid-column:1/-1;text-align:left}
}

/* comparison-table group headers */
table.cmp tr.grp td{padding-top:14px;color:var(--brand-accent);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--brand-line)}
table.cmp tr.sub td{font-weight:700;color:var(--brand-ink);border-bottom:1px solid var(--brand-line)}
table.cmp tr.sub td:first-child{color:var(--brand-ink)}
.feehdr span{font-size:10px;text-transform:uppercase;letter-spacing:1.3px;color:var(--brand-ink-dim);font-weight:500}

/* ---------- audit trail ---------- */
.audit{font-size:12.5px}
.audit-row{display:grid;grid-template-columns:1.2fr .7fr 2.5fr;gap:10px;padding:7px 0;
  border-bottom:1px solid rgba(36,56,92,.45);align-items:start}
.audit-row .f{color:var(--brand-ink-dim)}
.audit-row .v{color:var(--brand-ink);font-weight:600}
.audit-row .q{color:var(--brand-ink-dim);font-style:italic;font-size:11.5px}
.audit-row.missing .v{color:var(--brand-warn)}

/* ---------- pills / badges ---------- */
.pill{display:inline-block;border:1px solid var(--brand-line);color:var(--brand-ink-dim);
  font-size:10px;letter-spacing:1.4px;text-transform:uppercase;padding:4px 10px;
  border-radius:20px;margin-left:6px;font-weight:600}
.pill.ok{border-color:var(--brand-pos);color:var(--brand-pos)}
.pill.bad{border-color:var(--brand-neg);color:var(--brand-neg)}

/* ---------- second-opinion panel ---------- */
.so{border:1px solid var(--brand-line);border-left:3px solid var(--brand-accent);
    background:var(--brand-surface-2);padding:14px;border-radius:var(--radius);font-size:13px;display:none}
.so.on{display:block}
.so h4{font-size:11px;text-transform:uppercase;letter-spacing:1.6px;color:var(--brand-accent);margin-bottom:8px}
.so .agree{font-weight:600}
.disclaim{font-size:11px;color:var(--brand-ink-dim);margin-top:10px;line-height:1.45}

footer{margin-top:40px;border-top:1px solid var(--brand-line);padding-top:18px;
  text-align:center;color:var(--brand-ink-dim);font-size:12px}
footer .brandmark{font-family:var(--font-display);color:var(--brand-ink);font-size:19px;letter-spacing:.6px;line-height:1.05}
footer .tagline{font-family:var(--font-ui);font-size:9.5px;letter-spacing:5px;color:var(--brand-accent);font-weight:500;margin-top:2px}

/* ---------- print: merchant one-pager only ---------- */
@media print{
  @page{margin:14mm}
  .no-print{display:none !important}
  .wrap{padding:0;max-width:none}
  body{background:var(--brand-bg)}
  #onepager{display:block !important;border:none;page-break-inside:avoid}
}