/* ── Self-hosted brand fonts (Inter + Poppins, OFL-1.1, latin subset) ─────────
   Replaces the Google Fonts <link> — no third-party font fetch. app.css is a
   STATIC file (no Jinja/url_for), so src is RELATIVE to this stylesheet:
   /static/css/app.css -> ../fonts/ -> /static/fonts/. Weights/styles are exactly
   those used by the app (Inter 400/500/600/700 + 400-italic; Poppins 600/700). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:'Inter';font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-400-italic.woff2") format("woff2");}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/poppins-latin-700-normal.woff2") format("woff2");}

:root{
  --iv-ink:#14264A; --iv-navy:#1B3A6B; --iv-teal:#0F8A9B; --iv-teal-deep:#0F766E;
  --iv-teal-tint:#DCEEF0; --iv-sand:#FAF8F4; --iv-amber:#E0A23C;
  --iv-white:#FFFFFF; --iv-gray-600:#6B7480; --iv-border:#E4E0D8;
  --iv-surface-subtle:#F4F6F9; --iv-shadow:0 1px 3px rgba(20,38,74,.08);
  --iv-bg:var(--iv-sand); --iv-surface:var(--iv-white);
  --iv-text:var(--iv-ink); --iv-text-muted:var(--iv-gray-600);
  --iv-primary:var(--iv-navy); --iv-primary-ink:var(--iv-ink); --iv-on-primary:var(--iv-sand);
  --iv-accent:var(--iv-teal); --iv-accent-soft:var(--iv-teal-tint); --iv-accent-strong:var(--iv-teal-deep);
  --iv-warm:var(--iv-amber); --iv-border-c:var(--iv-border);
  --iv-up:#B45309; --iv-down:#15803D; --iv-success:#15803D; --iv-danger:#B4452F; --iv-warn:#7A5B00;
  --iv-success-soft:#E6F4EC; --iv-danger-soft:#FBE9E7; --iv-warn-soft:#FFF6E0;
  --iv-font-display:'Poppins','Montserrat','Helvetica Neue',Arial,sans-serif;
  --iv-font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --iv-radius-sm:6px; --iv-radius-md:10px; --iv-radius-lg:16px; --iv-radius-pill:999px;
}

/* ── Base (migrated from base.html, tokenized) ─────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--iv-font-body); background: var(--iv-bg); color: var(--iv-text); }
h1, h2, h3 { font-family: var(--iv-font-display); color: var(--iv-navy); }
h1 { margin-bottom: 8px; }
h2 { margin-bottom: 24px; }
.container { max-width: 500px; margin: 80px auto; padding: 40px; background: var(--iv-surface); border-radius: var(--iv-radius-md); box-shadow: var(--iv-shadow); }
.subtitle { color: var(--iv-text-muted); margin-bottom: 32px; font-size: 14px; }
input { width: 100%; padding: 12px; margin-bottom: 16px; border: 1px solid var(--iv-border-c); border-radius: var(--iv-radius-sm); font-size: 14px; }
button { width: 100%; padding: 12px; background: var(--iv-primary); color: var(--iv-on-primary); border: none; border-radius: var(--iv-radius-sm); font-size: 16px; cursor: pointer; }
button:hover { background: var(--iv-accent); }
.link { text-align: center; margin-top: 16px; font-size: 14px; }
.link a { color: var(--iv-accent); text-decoration: none; }
a:link { color: var(--iv-accent); }
.flash-container { max-width: 800px; margin: 16px auto; padding: 0 20px; }
.flash { background: var(--iv-warn-soft); border: 1px solid var(--iv-warm); padding: 10px 16px; border-radius: var(--iv-radius-sm); margin-bottom: 8px; font-size: 14px; color: var(--iv-ink); }
.flash.success { background: var(--iv-success-soft); border-color: var(--iv-success); color: var(--iv-success); }
.flash.error { background: var(--iv-danger-soft); border-color: var(--iv-danger); color: var(--iv-danger); }

/* ── Global brand header ───────────────────────────────────────────────────── */
.iv-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 20px; background: var(--iv-surface); border-bottom: 1px solid var(--iv-border-c); }
.iv-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.iv-brand:focus-visible { outline: 2px solid var(--iv-accent); outline-offset: 3px; border-radius: var(--iv-radius-sm); }
.iv-brand__mark { display: block; flex: 0 0 auto; }
.iv-brand__word { font-family: var(--iv-font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; }
.iv-brand__a { color: var(--iv-navy); }
.iv-brand__b { color: var(--iv-accent); }

@media print { .iv-header { display: none; } }

/* ── Auth front-door (login / register) ────────────────────────────────────── */
/* Vertically center the hero+card group; crisp-white page bg SCOPED to auth only
   (the global --iv-bg token is untouched). min-height (never fixed height) so a
   tall form grows the body and justify-content:center can't clip the top. */
.iv-auth{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem 1rem;background:#fff}
.iv-auth .container{border:1px solid var(--iv-border-c)}
.iv-authbrand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;margin:3rem 0 0}
.iv-authbrand__mark{width:112px;height:112px}
.iv-authbrand__word{font-family:var(--iv-font-display);font-weight:700;font-size:3.1rem;letter-spacing:-.02em;line-height:1.05}
.iv-authbrand__tag{color:var(--iv-text-muted);font-size:1.4rem;margin:0}
/* pull the auth card up toward the hero — scoped to auth only, does NOT touch the shared .container margin */
.iv-authbrand + .container{margin-top:2rem}
/* neutralize browser autofill tint */
input:-webkit-autofill,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--iv-surface) inset;
  -webkit-text-fill-color:var(--iv-text);
  caret-color:var(--iv-text);
}
@media (max-width:480px){
  .iv-authbrand__mark{width:84px;height:84px}
  .iv-authbrand__word{font-size:2.4rem}
  .iv-authbrand__tag{font-size:1.2rem}
}