/* Staymark design system — one stylesheet for the marketing site, the web app
 * and the offline phone shell (mobile/www gets a copy via `npm run sync-engine`).
 * Fingerprint (jarvis-core config/estate_design_registry.json key "staymark"):
 * passport burgundy on visa-page cream, Instrument Serif display + Figtree body,
 * rubber-stamp status badges, a 180-cell day ribbon, an MRZ strip as signature.
 * Paths are relative so the same file works at /static/ and inside the app. */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/figtree.woff2) format("woff2")}

:root{
  --paper:#F4EFE4;--paper-2:#ECE5D6;--card:#FBF8F1;--ink:#1E1A1D;--mut:#6B6159;--faint:#9A8F84;
  --line:#DDD3C0;--line-2:#CFC3AC;
  --brand:#7A1E34;--brand-2:#5E1426;--brand-soft:#F1E1E2;--on-brand:#F7F1E6;
  --gold:#B8902A;--gold-2:#E2B84B;
  --ok:#2D6A4F;--ok-soft:#E1EDE4;--warn:#A86400;--warn-soft:#F5E8D0;--bad:#C7381F;--bad-soft:#F7DFD8;
  --shadow:0 1px 0 rgba(30,26,29,.04),0 8px 24px -12px rgba(30,26,29,.18);
  --r:12px;--display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#140F10;--paper-2:#1C1617;--card:#211A1B;--ink:#F1E9DC;--mut:#B3A797;--faint:#9A8E82;
  --line:#352B2B;--line-2:#45393A;
  --brand:#E08AA0;--brand-2:#E991A4;--brand-soft:#3A1F26;--on-brand:#1A0F12;
  --gold:#E2BE55;--gold-2:#E2BE55;
  --ok:#7CC49A;--ok-soft:#1D2C24;--warn:#E7AE52;--warn-soft:#33281A;--bad:#FF8A70;--bad-soft:#3A2019;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.7);color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#140F10;--paper-2:#1C1617;--card:#211A1B;--ink:#F1E9DC;--mut:#B3A797;--faint:#9A8E82;
  --line:#352B2B;--line-2:#45393A;
  --brand:#E08AA0;--brand-2:#E991A4;--brand-soft:#3A1F26;--on-brand:#1A0F12;
  --gold:#E2BE55;--gold-2:#E2BE55;
  --ok:#7CC49A;--ok-soft:#1D2C24;--warn:#E7AE52;--warn-soft:#33281A;--bad:#FF8A70;--bad-soft:#3A2019;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.7);color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
a{color:var(--brand);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--brand-2)}
img,svg{display:block}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em;line-height:1.05;margin:0}
h1{font-size:clamp(44px,7.4vw,86px)}
h2{font-size:clamp(30px,4vw,44px)}
h3{font-size:24px}
em.i,.i{font-style:italic}
p{margin:0 0 12px}
.mut{color:var(--mut)}.small{font-size:14px}.tiny{font-size:12.5px}
.eyebrow{font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── header ─────────────────────────────────────────────── */
.sm-top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.sm-top .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:30px;height:30px;border-radius:8px}
.brand b{font:400 27px/1 var(--display);letter-spacing:-.01em}
.sm-nav{display:flex;align-items:center;gap:6px;font-size:15px}
.sm-nav a{text-decoration:none;color:var(--ink);padding:8px 10px;border-radius:8px}
.sm-nav a:hover{background:var(--paper-2)}
.sm-nav a.btn,.sm-nav a.btn:hover{color:var(--on-brand);background:var(--brand);margin-left:4px}
.sm-nav a.btn:hover{background:var(--brand-2)}
a.btn,a.btn:hover,a.btn:visited{color:var(--on-brand)}
a.btn.ghost,a.btn.ghost:hover{color:var(--ink)}
a.btn.quiet{color:var(--brand)}
.sm-nav .hide-s{display:inline}
@media (max-width:640px){.sm-nav .hide-s{display:none}}

/* ── buttons & inputs ───────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:650 15.5px/1 var(--sans);padding:13px 20px;border-radius:10px;border:1px solid transparent;cursor:pointer;text-decoration:none;background:var(--brand);color:var(--on-brand);transition:transform .12s ease,background .15s}
.btn:hover{background:var(--brand-2);color:var(--on-brand)}
.btn:active{transform:translateY(1px)}
.btn.lg{font-size:17px;padding:16px 26px;border-radius:12px}
.btn.sm{font-size:14px;padding:9px 13px;border-radius:9px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--paper-2);color:var(--ink)}
.btn.quiet{background:var(--brand-soft);color:var(--brand)}
.btn.quiet:hover{background:color-mix(in srgb,var(--brand-soft) 70%,var(--brand) 12%)}
.btn.link{background:none;color:var(--brand);padding:6px 4px;border:0;font-weight:600}
.btn[disabled]{opacity:.5;cursor:default}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>span{font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
input,select,textarea{font:16px/1.3 var(--sans);color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:10px;padding:12px 13px;width:100%;min-width:0}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--brand);padding:0}
input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--brand) 22%,transparent);border-color:var(--brand)}
input[type=date]{min-height:47px}

/* ── panels ─────────────────────────────────────────────── */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
.panel h3{margin-bottom:6px}
.panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}

/* ── the rubber stamp (signature motif) ─────────────────── */
.stamp{--c:var(--ok);display:inline-flex;align-items:center;gap:6px;font:800 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--c);padding:6px 9px 5px;border:2px solid var(--c);border-radius:6px;box-shadow:inset 0 0 0 2px var(--card),inset 0 0 0 3px var(--c);transform:rotate(-4deg);white-space:nowrap;mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){.stamp{mix-blend-mode:normal}}
.stamp.warn{--c:var(--warn)}.stamp.bad{--c:var(--bad)}.stamp.idle{--c:var(--faint)}
.stamp.press{animation:press .42s cubic-bezier(.2,1.6,.4,1) both}
@keyframes press{0%{transform:scale(1.9) rotate(-14deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.stamp.press{animation:none}}

/* ── MRZ strip (signature) ──────────────────────────────── */
.mrz{font:500 13px/1.5 var(--mono);letter-spacing:.24em;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:clip;user-select:none}

/* ── guilloche security print ───────────────────────────── */
.guilloche{background-image:repeating-radial-gradient(circle at 78% 30%,transparent 0 13px,color-mix(in srgb,var(--brand) 9%,transparent) 13px 14px),repeating-radial-gradient(circle at 20% 110%,transparent 0 17px,color-mix(in srgb,var(--gold) 10%,transparent) 17px 18px)}

/* ── toast ──────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(30px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:12px;font-size:15px;display:flex;gap:14px;align-items:center;z-index:60;transition:.25s;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translateX(-50%);pointer-events:auto}
.toast button{background:none;border:0;color:var(--gold-2);font:700 15px var(--sans);cursor:pointer;padding:0}

/* ── footer ─────────────────────────────────────────────── */
.sm-foot{border-top:1px solid var(--line);margin-top:56px;padding:26px 0 36px;font-size:14px;color:var(--mut)}
.sm-foot .wrap{display:grid;gap:14px}
.sm-foot a{color:var(--mut)}
.sm-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}

/* iOS WebKit: a date input ignores width until its native appearance is reset,
   and shows an empty box (no dd/mm/yyyy) until a date is picked. */
@supports (-webkit-touch-callout: none) {
  input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;text-align:left}
  input[type=date]::-webkit-date-and-time-value{text-align:left}
  input[type=date].empty::before{content:attr(placeholder);color:var(--faint)}
}