/* Visual system taken from /root/transfers/landing_pages_top1000.xlsx.
   The top of that list is shadcn-style product UI (8 of the top 12), not a
   marketing page. Dark mode (290) and responsive layout (335) are the two
   features that show up most often. WebGL and particle backgrounds are
   common on the template rows and are not used on a filing desk. */

:root {
  --bg: #f6f5f2;
  --bg-2: #efeeea;
  --panel: #ffffff;
  --ink: #1c1917;
  --muted: #57534e;
  --faint: #a8a29e;
  --line: #e7e5e4;
  --accent: #9f1239;
  --accent-ink: #ffffff;
  --accent-soft: #fff1f2;
  --ok: #047857;
  --ok-soft: #ecfdf5;
  --beta: #9a3412;
  --beta-soft: #fff7ed;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 18px 40px -28px rgba(28, 25, 23, 0.45);
  --radius: 14px;
  --side: 248px;
  color-scheme: light;
  font: 15px/1.5 "Segoe UI", "Helvetica Neue", sans-serif;
}
[data-theme="dark"] {
  --bg: #0c0a09;
  --bg-2: #141210;
  --panel: #1c1917;
  --ink: #fafaf9;
  --muted: #a8a29e;
  --faint: #78716c;
  --line: #292524;
  --accent: #fb7185;
  --accent-ink: #1c1917;
  --accent-soft: #3f1219;
  --ok: #6ee7b7;
  --ok-soft: #052e24;
  --beta: #fdba74;
  --beta-soft: #431407;
  --danger: #fca5a5;
  --danger-soft: #450a0a;
  --shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: 12px; top: -40px; background: var(--ink); color: var(--bg); padding: 8px 12px; z-index: 5; }
.skip:focus { top: 12px; }

.app { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: 18px 14px; background: var(--bg-2); border-right: 1px solid var(--line);
}
.brand { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; padding: 4px 8px 16px; }
.brand strong { display: block; letter-spacing: -0.03em; }
.brand small { color: var(--muted); }
.mark {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px;
  background: var(--ink); color: var(--bg); font-weight: 700; letter-spacing: -0.04em;
}
#nav { display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--ink);
}
.nav-link:hover, .nav-link[aria-current="page"] { background: var(--panel); }
.nav-link small { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.side-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; color: var(--muted); font-size: 13px; }
.side-foot button, .btn {
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 7px 12px;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn-ghost { background: transparent; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.workspace { min-width: 0; }
.top {
  display: flex; justify-content: space-between; gap: 16px; align-items: flex-end;
  padding: 22px 28px 8px;
}
.eyebrow { margin: 0; color: var(--accent); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 650; }
h1 { margin: 2px 0 0; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.04em; font-weight: 640; }
#view { padding: 8px 28px 64px; }
.year-pick { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: min(280px, 46vw); }
select, input, textarea {
  width: 100%; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 9px 11px;
}
textarea { min-height: 120px; resize: vertical; }
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card, .panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.card { padding: 16px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.card p, .panel p { margin: 0; color: var(--muted); }
.panel { padding: 18px; margin: 0 0 14px; }
.panel h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.03em; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 8px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
.badge.ready { background: var(--ok-soft); color: var(--ok); }
.badge.beta { background: var(--beta-soft); color: var(--beta); }
.callout { border-radius: 12px; padding: 12px 14px; background: var(--beta-soft); color: var(--beta); margin: 0 0 12px; }
.callout.ok { background: var(--ok-soft); color: var(--ok); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); position: sticky; top: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.form-error { color: var(--danger); margin: 0; }
.check { display: flex; gap: 8px; align-items: center; color: var(--ink); font-size: 14px; }
.check input { width: auto; }
.steps { margin: 0; padding-left: 1.1rem; }
.steps li { margin: 0 0 8px; }
.split { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 14px; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.toast {
  position: fixed; bottom: 16px; right: 16px; background: var(--ink); color: var(--bg);
  padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow);
}
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(900px 400px at 10% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 50%),
    var(--bg);
}
.auth-card { width: min(440px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 36px; }
.lede { color: var(--muted); }
.doc h2 { font-size: 22px; letter-spacing: -0.03em; }
.doc h3 { font-size: 18px; }
.doc code { font-family: ui-monospace, Menlo, monospace; font-size: 0.9em; background: var(--bg-2); padding: 0 4px; border-radius: 4px; }
.doc pre { overflow: auto; padding: 14px; background: #1c1917; color: #fafaf9; border-radius: 12px; }
.doc pre code { background: transparent; color: inherit; padding: 0; }
.doc table { margin: 8px 0 16px; }
.finding-error td:first-child { box-shadow: inset 3px 0 var(--danger); }
.finding-warning td:first-child { box-shadow: inset 3px 0 var(--beta); }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  #nav { flex-direction: row; flex-wrap: wrap; }
  .split { grid-template-columns: 1fr; }
  .top, #view { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}