/* ─────────────────────────────────────────────────────────────────────────
   Tax Free — browser case-page channel styling.
   Ported faithfully from the Tax Free design system (claude.ai/design project
   5384e85e): tokens are verbatim; component classes (.btn/.input/.card/.stat/
   .badge/.pill/.topbar) replicate the React components' specs 1:1 for this
   server-rendered (Jinja) app — same pixels, no build step.
   60/30/10 — light surface / dark text / surgical Tax Red.
   ───────────────────────────────────────────────────────────────────────── */

/* Poppins — self-hosted (SIL OFL) so the brand font never depends on Google
   Fonts being reachable. Latin subset, 4 weights. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/static/fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/static/fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/poppins-700.woff2") format("woff2")}

:root{
  /* Brand */
  --tax-red:#d92546; --tax-red-dark:#c11e3d; --tax-red-light:#f8d7dc;
  --white:#ffffff; --dark:#212529;
  /* Neutrals */
  --bg:#f8f9fa; --gray:#6c757d; --border:#dee2e6; --gray-100:#e9ecef;
  --row-hover:#f8f9fb; --panel:#fafbfc;
  /* Status */
  --green:#198754; --green-bg:#d1e7dd; --green-dark:#157347;
  --yellow:#cc8a00; --yellow-bg:#fff3cd; --yellow-hover:#ffe69c;
  --blue:#0d6efd; --blue-bg:#cfe2ff;
  --red:#d92546; --red-bg:#f8d7dc;
  /* Type */
  --font-sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"SF Mono","Menlo","Consolas",ui-monospace,monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  /* Spacing & radius */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --radius:10px; --radius-card:10px; --radius-button:8px; --radius-pill:20px; --radius-logo:12px;
  /* Elevation & motion */
  --shadow:0 1px 3px rgba(0,0,0,.08);
  --shadow-lg:0 4px 12px rgba(0,0,0,.1);
  --shadow-red:0 2px 8px rgba(217,37,70,.1);
  --overlay-bg:rgba(248,249,250,.92);
  --tc:.15s ease;       /* color/bg/shadow */
  --tt:.2s ease;        /* transform */
  --topbar-height:64px;
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--font-sans); background:var(--bg); color:var(--dark);
  min-height:100dvh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ── Topbar (Topbar.jsx) ───────────────────────────────────────── */
.topbar{
  display:flex; align-items:center; gap:var(--space-4);
  height:var(--topbar-height); padding:0 var(--space-5);
  background:var(--white); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10;
}
.topbar img{height:36px}
.topbar .tagline{margin-left:auto; font-size:13px; font-weight:500; color:var(--gray)}

/* ── Page container (mobile-first) ─────────────────────────────── */
.wrap{flex:1; width:100%; max-width:480px; margin:0 auto; padding:var(--space-6) var(--space-5) var(--space-8)}

/* ── Typography helpers (type scale) ───────────────────────────── */
.wrap.center{display:flex; flex-direction:column; justify-content:center; padding-bottom:var(--space-12)}
.h1{font-size:28px; font-weight:700; line-height:1.2; letter-spacing:0; margin-bottom:var(--space-2)}
.sub{font-size:16px; line-height:1.6; color:var(--gray); margin-bottom:var(--space-6)}
.overline{font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--gray)}
.section-label{font-size:13px; font-weight:600; color:var(--dark); margin-bottom:var(--space-3)}

/* ── Button (Button.jsx) ───────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font-sans); font-weight:600; letter-spacing:.3px; line-height:1;
  border-radius:var(--radius-button); cursor:pointer; white-space:nowrap;
  padding:10px 20px; font-size:16px; border:1px solid transparent;
  transition:background var(--tc),box-shadow var(--tc),color var(--tc);
}
.btn:hover{box-shadow:var(--shadow-lg)}
.btn-primary{background:var(--tax-red); color:var(--white); border-color:var(--tax-red)}
.btn-primary:hover{background:var(--tax-red-dark)}
.btn-outline{background:var(--white); color:var(--dark); border-color:var(--border)}
.btn-ghost{background:transparent; color:var(--gray); border-color:transparent; box-shadow:none}
.btn-ghost:hover{box-shadow:none; color:var(--dark)}
.btn-block{display:flex; width:100%}
.btn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none}

/* ── Fork options (card-based choice, brand-consistent) ────────── */
.option{
  display:flex; align-items:center; gap:var(--space-4);
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:18px var(--space-5); margin-bottom:var(--space-4); cursor:pointer;
  box-shadow:var(--shadow); transition:box-shadow var(--tc),border-color var(--tc),transform var(--tt);
}
.option:hover{box-shadow:var(--shadow-lg); transform:translateY(-1px)}
.option-recommended{border-color:var(--tax-red)}
.option .ico{width:44px; height:44px; flex:0 0 auto; border-radius:var(--radius-button);
  display:flex; align-items:center; justify-content:center; background:var(--bg); color:var(--dark)}
.option .ico.green{background:var(--green-bg); color:var(--green)}
.option .ico.red{background:var(--tax-red-light); color:var(--tax-red)}
.option .meta{flex:1; display:flex; flex-direction:column; gap:2px; min-width:0}
.option .meta .rec{font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--tax-red); margin-bottom:1px}
.option .meta .t{font-size:16px; font-weight:600; color:var(--dark)}
.option .meta .d{font-size:13px; color:var(--gray)}
.option .chev{flex:0 0 auto; color:var(--gray); display:flex; align-items:center}

/* ── Input (Input.jsx) ─────────────────────────────────────────── */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:var(--space-5)}
.field > label{font-size:13px; font-weight:500; color:var(--dark)}
.input-wrap{
  display:flex; align-items:center; gap:8px; min-width:0; background:var(--white);
  border:1px solid var(--border); border-radius:var(--radius-button); padding:0 12px;
  transition:border-color var(--tc),box-shadow var(--tc);
}
.input-wrap:focus-within{border-color:var(--tax-red); box-shadow:var(--shadow-red)}
.input-wrap .lead{display:flex; color:var(--gray)}
.input{flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-family:inherit; font-size:15px; color:var(--dark); padding:11px 0}
.input::placeholder{color:var(--gray); opacity:.7}
.helper{font-size:12px; color:var(--gray)}
.field.error .input-wrap{border-color:var(--red)}
.field.error .helper{color:var(--red)}

/* Select styled to match the input (no native calendar anywhere) */
.select{
  width:100%; min-width:0; background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-button); padding:11px 36px 11px 12px;
  font-family:inherit; font-size:15px; color:var(--dark); cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4l4 4 4-4'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
  transition:border-color var(--tc),box-shadow var(--tc);
}
.select:focus{outline:none; border-color:var(--tax-red); box-shadow:var(--shadow-red)}
.date-row{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:8px}
.date-row > *{min-width:0}
.cc-row{display:grid; grid-template-columns:5.5rem 1fr; gap:8px; align-items:stretch}
.cc-row > *{min-width:0}
.cc-row .input-wrap{margin:0}

/* ── Card (Card.jsx) ───────────────────────────────────────────── */
.card{background:var(--white); border-radius:var(--radius-card); box-shadow:var(--shadow);
  padding:20px var(--space-6); margin-bottom:var(--space-4)}
.card .card-title{font-size:16px; font-weight:600; color:var(--dark); margin-bottom:4px}
.card .card-note{font-size:13px; color:var(--gray); margin-bottom:var(--space-4)}

/* ── StatCard (StatCard.jsx) — the refund total ────────────────── */
.stat{background:var(--white); border-radius:var(--radius-card); box-shadow:var(--shadow);
  padding:20px var(--space-6); margin-bottom:var(--space-4); border-left:4px solid var(--tax-red)}
.stat .stat-label{font-size:13px; font-weight:500; color:var(--gray);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px}
.stat .stat-value{font-size:32px; font-weight:700; line-height:1.2; color:var(--dark)}

/* ── Badge (Badge.jsx) ─────────────────────────────────────────── */
.badge{display:inline-block; padding:3px 10px; border-radius:var(--radius-pill);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.3px}
.badge-recommended{background:var(--red-bg); color:var(--tax-red)}
.badge-pending{background:var(--gray-100); color:var(--gray)}
.badge-approved{background:var(--green-bg); color:var(--green)}

/* ── Pill (Pill.jsx) — status chip ─────────────────────────────── */
.pill{display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  border-radius:var(--radius-pill); font-size:12px; font-weight:600}
.pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.pill-active{background:var(--blue-bg); color:var(--blue)}
.pill-ready{background:var(--green-bg); color:var(--green)}
.pill-onboarding{background:var(--yellow-bg); color:var(--yellow)}

/* ── Status checklist ──────────────────────────────────────────── */
.check{display:flex; align-items:center; gap:var(--space-3); padding:14px 0; border-bottom:1px solid var(--border)}
.check:last-child{border-bottom:none}
.check .ck{width:26px; height:26px; flex:0 0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700}
.ck-done{background:var(--green); color:var(--white)}
.ck-todo{background:var(--bg); color:var(--gray); border:1.5px solid var(--border)}
.check .lbl{font-weight:600; font-size:15px; color:var(--dark)}
.check .lbl small{display:block; font-weight:400; color:var(--gray); font-size:13px; margin-top:1px}

/* ── Refund breakdown rows ─────────────────────────────────────── */
.row-item{display:flex; justify-content:space-between; align-items:center; padding:11px 0;
  border-bottom:1px solid var(--border); font-size:14px}
.row-item:last-child{border-bottom:none}
.row-item .amt{font-weight:700; color:var(--green)}

/* ── Upload slots ──────────────────────────────────────────────── */
.slot{position:relative; display:flex; align-items:center; gap:var(--space-3);
  background:var(--white); border:1.5px dashed var(--border); border-radius:var(--radius-button);
  padding:16px var(--space-4); margin-bottom:10px; cursor:pointer; transition:border-color var(--tc),background var(--tc)}
.slot:hover{border-color:var(--tax-red); background:var(--bg)}
.slot input[type=file]{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
.slot .ico{width:40px; height:40px; flex:0 0 auto; border-radius:var(--radius-button);
  background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--tax-red)}
.slot .t{font-weight:600; font-size:15px; color:var(--dark)}
.slot .t small{display:block; font-weight:400; color:var(--gray); font-size:13px; margin-top:1px}

/* ── Save-link ─────────────────────────────────────────────────── */
.savebar{display:flex; gap:8px}
.savebar .input-wrap{flex:1}
.savebar .input{font-size:13px; color:var(--gray)}
.copy{flex:0 0 auto; padding:0 18px; border-radius:var(--radius-button); border:none;
  background:var(--tax-red); color:var(--white); font-family:inherit; font-weight:600; font-size:14px; cursor:pointer}
.copy:hover{background:var(--tax-red-dark)}

/* ── Agent message banner (surfaces the shared brain's reply on web) ─ */
.agent-msg{background:var(--white); border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow); padding:14px 18px; margin-bottom:var(--space-4);
  font-size:14px; line-height:1.55; color:var(--dark)}
.agent-msg .who{display:block; font-size:11px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--tax-red); margin-bottom:4px}

/* ── Alert ─────────────────────────────────────────────────────── */
.alert{background:var(--red-bg); color:var(--tax-red); border:1px solid var(--tax-red-light);
  padding:12px var(--space-4); border-radius:var(--radius-button); font-size:14px; margin-bottom:var(--space-4)}

/* ── Confirm-back ──────────────────────────────────────────────── */
.confirm{display:none; background:var(--yellow-bg); border:1px solid var(--yellow-hover);
  border-radius:var(--radius-button); padding:var(--space-4); margin-bottom:var(--space-4)}
.confirm.show{display:block}
.confirm .q{font-size:14px; color:var(--dark)}
.confirm .num{font-size:22px; font-weight:700; color:var(--dark); margin:6px 0 14px}
.confirm .row{display:flex; gap:8px}

/* ── Empty / error states ──────────────────────────────────────── */
.empty{text-align:center; padding:48px var(--space-4); display:flex; flex-direction:column; align-items:center}
.empty .big{width:64px; height:64px; border-radius:50%; background:var(--bg);
  display:flex; align-items:center; justify-content:center; color:var(--tax-red); margin-bottom:var(--space-4)}
.empty h2{font-size:22px; font-weight:700; margin-bottom:8px}
.empty p{color:var(--gray); font-size:15px; line-height:1.6; max-width:300px; margin-bottom:var(--space-6)}

.footnote{font-size:12px; color:var(--gray); text-align:center; margin-top:var(--space-5); line-height:1.6}

/* ── Card capture link (/card/{token}) ─────────────────────────── */
.card-capture-wrap{min-height:calc(100dvh - var(--topbar-height)); display:flex; flex-direction:column}
.capture-panel{background:var(--white); border-radius:var(--radius-card); box-shadow:var(--shadow);
  padding:var(--space-5); margin-top:var(--space-4); transition:box-shadow var(--tc)}
.trust-panel{background:var(--white); border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow); padding:var(--space-4); margin-bottom:var(--space-4);
  display:flex; flex-direction:column; gap:var(--space-3)}
.trust-row{display:flex; gap:var(--space-3); align-items:flex-start; font-size:14px; line-height:1.5; color:var(--dark)}
.trust-icon{width:24px; height:24px; flex:0 0 auto; border-radius:50%; background:var(--green-bg);
  color:var(--green); display:flex; align-items:center; justify-content:center}
.capture-frame{height:210px; border-radius:var(--radius-button); background:var(--bg);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--border);
  margin-bottom:var(--space-5); overflow:hidden}
.card-guide{width:min(320px,88%); aspect-ratio:1.58; border:2px solid var(--tax-red);
  border-radius:var(--radius-button); position:relative; background:var(--white); box-shadow:var(--shadow)}
.card-guide span{position:absolute; width:26px; height:26px; border-color:var(--tax-red)}
.card-guide span:nth-child(1){left:var(--space-3); top:var(--space-3); border-left:3px solid; border-top:3px solid; border-top-left-radius:var(--radius-button)}
.card-guide span:nth-child(2){right:var(--space-3); top:var(--space-3); border-right:3px solid; border-top:3px solid; border-top-right-radius:var(--radius-button)}
.card-guide span:nth-child(3){right:var(--space-3); bottom:var(--space-3); border-right:3px solid; border-bottom:3px solid; border-bottom-right-radius:var(--radius-button)}
.card-guide span:nth-child(4){left:var(--space-3); bottom:var(--space-3); border-left:3px solid; border-bottom:3px solid; border-bottom-left-radius:var(--radius-button)}
.capture-button{position:relative; display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:52px; border:1px solid var(--tax-red); border-radius:var(--radius-button); background:var(--tax-red);
  color:var(--white); font-size:16px; font-weight:var(--fw-semibold); letter-spacing:.3px; cursor:pointer;
  transition:background var(--tc),box-shadow var(--tc),color var(--tc)}
.capture-button:hover{background:var(--tax-red-dark); box-shadow:var(--shadow-lg)}
.capture-button input{position:absolute; inset:0; opacity:0; cursor:pointer}
.camera-ico{display:flex}
.capture-note{font-size:12px; color:var(--gray); text-align:center; margin-top:var(--space-4); line-height:1.55}
.manual-panel{margin-top:var(--space-4); background:var(--white); border-radius:var(--radius-card);
  box-shadow:var(--shadow); padding:var(--space-4)}
.manual-toggle{width:100%; border:1px solid var(--border); border-radius:var(--radius-button);
  background:var(--white); color:var(--dark); font-family:inherit; font-size:14px; font-weight:var(--fw-semibold);
  cursor:pointer; padding:10px var(--space-4); transition:background var(--tc),box-shadow var(--tc),color var(--tc)}
.manual-toggle:hover{background:var(--bg); box-shadow:var(--shadow-lg)}
.manual-form{display:none; margin-top:var(--space-4)}
.manual-form.show{display:block}
.manual-form .field{margin-bottom:var(--space-4)}
.manual-form .field > span:first-child{font-size:13px; font-weight:var(--fw-medium); color:var(--dark); margin-bottom:6px}
.manual-warning{background:var(--yellow-bg); border:1px solid var(--yellow-hover); color:var(--dark);
  border-radius:var(--radius-button); padding:12px; font-size:13px; line-height:1.45; margin-bottom:var(--space-4)}
.processing{position:fixed; inset:0; background:var(--overlay-bg); z-index:30;
  display:none; align-items:center; justify-content:center; gap:14px; padding:var(--space-6)}
.processing.show{display:flex}
.processing strong{display:block; font-size:16px; color:var(--dark)}
.processing span{display:block; font-size:13px; color:var(--gray); margin-top:2px}
.spinner{width:30px; height:30px; border-radius:50%; border:3px solid var(--border);
  border-top-color:var(--tax-red); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.capture-done{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.done-mark{width:78px; height:78px; border-radius:50%; background:var(--green-bg); color:var(--green);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-5)}

/* ── Desktop: frame the phone-first flow as a centered app panel ─────
   Mobile is untouched (.app is a full-width passthrough). On wider screens
   the content sits in a rounded, elevated panel so it reads as intentional
   rather than a narrow column floating in grey. */
.app{width:100%; display:flex; flex-direction:column; flex:1}
@media (min-width:768px){
  body{background:var(--gray-100); padding:var(--space-10) var(--space-4)}
  .app{max-width:448px; margin:0 auto; flex:0 1 auto;
       background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-card);
       overflow:hidden; box-shadow:var(--shadow-lg)}
  .topbar{position:static}
  .wrap{min-height:540px}
}