/*
 * Heir shared styles
 * ------------------------------------------------------------------
 * One place for the design tokens and the pieces every page uses: glass material, top bar, pills, the
 * FR/EN switch, buttons, cards, form fields, chips, toast, confirm dialog, load bar and focus ring.
 *
 * Load order: <link rel="stylesheet" href="/styles/heir.css"> comes BEFORE the page's own <style>, so a page
 * only keeps what is genuinely its own (layout, page-specific parts) or a deliberate override.
 *
 * Standalone copies (heir-*.html): build-standalone.js inlines this file, fonts included.
 */

/* Self-hosted fonts (SIL Open Font License, see /fonts). No request leaves the site. */
@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")}

/* ---------- Tokens ---------- */
:root{
  --ivory:#FAF7F2; --ink:#211F1C; --ink-2:#5C574F; --ink-3:#5E5850;
  --sage:#C4D0BA; --bisque:#EFD9C6; --mist:#DCDAE6;
  --hair:rgba(33,31,28,.09); --hair-2:rgba(33,31,28,.16);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --t-12:12px; --t-13:13px; --t-15:15px; --t-17:17px; --t-24:24px; --t-40:clamp(34px,9vw,44px);
  --ease:cubic-bezier(.2,.8,.2,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}

/* ---------- Base ---------- */
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--ivory);color:var(--ink);font:400 var(--t-15)/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 12% 8%,rgba(196,208,186,.68),transparent 70%),
    radial-gradient(55% 45% at 95% 92%,rgba(239,217,198,.76),transparent 70%),
    radial-gradient(45% 40% at 92% 30%,rgba(220,218,230,.64),transparent 70%),
    var(--ivory);
}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid #211F1C;outline-offset:3px}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Glass material ---------- */
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.42));
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(60,50,40,.06),0 28px 56px -28px rgba(70,60,50,.35);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{background:rgba(255,255,255,.94)} }
@media (prefers-reduced-transparency:reduce){ .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.96)} }

/* ---------- Top bar, pills, FR/EN switch ---------- */
.bar{
  position:fixed;z-index:30;left:16px;right:16px;top:calc(env(safe-area-inset-top,0px) + 12px);
  display:flex;justify-content:space-between;align-items:center;pointer-events:none;
}
.bar > *{pointer-events:auto}
.pill{height:36px;border-radius:999px;display:inline-flex;align-items:center}
.wordmark{padding:0 16px;font:600 19px/1 var(--sans);letter-spacing:-.01em}
.wordmark svg{display:block;height:17px;width:auto}
.lang{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:3px}
.lang button{
  position:relative;z-index:1;border:0;background:none;cursor:pointer;height:30px;min-width:40px;border-radius:999px;
  font:600 12px var(--sans);letter-spacing:.06em;color:var(--ink-2);transition:color .3s;
}
.lang button[aria-pressed="true"]{color:var(--ink)}
.lang .thumb{
  position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.14);transition:transform .45s var(--ease);
}
.lang[data-lang="en"] .thumb{transform:translateX(100%)}

/* Shared bar (built by /nav/bar.js): left group [wordmark, Dashboard], right group [page controls, FR/EN] */
.bar-left,.bar-right{display:flex;align-items:center;gap:var(--s2);min-width:0}
.bar-right{margin-left:auto}
/* Hidden until /nav/bar.js has built it (no half-built bar on a slow load); shown anyway after 1.2s if it never does. */
.bar[data-heir-bar]:not([data-mounted]){visibility:hidden;animation:barfallback 0s 1.2s forwards}
@keyframes barfallback{to{visibility:visible}}
a.bar-home,.bar-dash{color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .25s var(--ease),color .2s}
.bar-dash{flex:none;justify-content:center;gap:8px;min-width:36px;padding:0 10px;font:600 12px/1 var(--sans);letter-spacing:.01em;color:var(--ink-2)}
.bar-dash svg{flex:none;display:block}
.bar-dash .bar-txt{display:none;white-space:nowrap}
@media (min-width:560px){ .bar-dash{padding:0 16px 0 13px} .bar-dash .bar-txt{display:inline} }
@media (hover:hover){ a.bar-home:hover,.bar-dash:hover{transform:translateY(-1px)} .bar-dash:hover{color:var(--ink)} }
a.bar-home:active,.bar-dash:active{transform:scale(.96)}
/* 44px hit areas around the 36px pills and the 30px FR/EN buttons, without changing how they look */
a.pill,button.pill{position:relative}
a.pill::after,button.pill::after{content:"";position:absolute;inset:-5px}
.lang button::after{content:"";position:absolute;inset:-8px 0}
@media print{ .bar-dash{display:none} }

/* ---------- Titles: one page title (35px on phones); menu and done screens use 26px ---------- */
.page-title,.page h1{font:600 var(--t-40)/1.06 var(--sans);letter-spacing:-.026em;text-wrap:balance}
.page h1{margin:var(--s5) 0 var(--s1)}

/* ---------- Cards ---------- */
.card{padding:var(--s5);border-radius:24px}
.card h2{margin:0 0 var(--s1);font:600 var(--t-24)/1.15 var(--sans);letter-spacing:-.016em}

/* ---------- Buttons ---------- */
.btn{
  height:44px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;background:var(--ink);color:#fff;
  font-size:var(--t-15);font-weight:500;transition:transform .25s var(--ease),background .25s,opacity .25s;
}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.ghost{background:rgba(255,255,255,.75);color:var(--ink);border:1px solid var(--hair-2)}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.btn.lg{height:52px;padding:0 28px;font-size:16px;font-weight:600}   /* the one main action of a screen */
.btn.block{display:flex;width:100%;align-items:center;justify-content:center}

/* ---------- Form fields, chips, small badges ---------- */
label.fld{display:block;margin-top:var(--s4)}
label.fld > span,.field > span{display:block;margin-bottom:var(--s1);font-size:var(--t-13);font-weight:600;color:var(--ink-2)}
.inp,.sel,.txt{width:100%;padding:0 14px;border-radius:14px;border:1px solid var(--hair-2);background:rgba(255,255,255,.85);font:400 16px/1.4 var(--sans);color:var(--ink)}   /* 16px stops iPhone zoom-on-tap */
.inp,.sel{height:48px}
.txt{padding:12px 14px;min-height:76px;resize:vertical;line-height:1.5}
.inp:focus,.sel:focus,.txt:focus{border-color:var(--ink)}
.inp[aria-invalid="true"],.txt[aria-invalid="true"]{border-color:#B0561A;background:rgba(255,241,228,.9)}
.hint{margin:var(--s2) 0 0;font-size:var(--t-13);color:var(--ink-2)}
.err{margin:var(--s2) 0 0;font-size:var(--t-13);color:#8A3E0E}
.two{display:grid;gap:var(--s3);grid-template-columns:1fr 1fr}
.chip{position:relative;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--hair-2);background:rgba(255,255,255,.65);font-size:14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip::after{content:"";position:absolute;inset:-5px 0}   /* 44px tap area, 36px look */
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.badge-demo{
  height:22px;padding:0 9px;border-radius:999px;display:inline-flex;align-items:center;
  font-size:var(--t-12);font-weight:500;background:rgba(239,205,170,.6);color:#6B3F14;border:1px solid rgba(107,63,20,.25);
}
.info{
  position:relative;z-index:1;flex:none;width:22px;height:22px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--hair-2);background:rgba(255,255,255,.7);color:var(--ink-2);
  font:600 12px/1 var(--sans);transition:background .25s,color .25s;
}
.info::after{content:"";position:absolute;inset:-12px}
.info[aria-expanded="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

.made{margin-top:var(--s4);padding:var(--s4);border-radius:16px;background:rgba(255,255,255,.78);border:1px solid var(--hair)}
.made h3{margin:0 0 var(--s2);font:600 var(--t-13)/1.3 var(--sans);color:var(--ink-2)}
.made code{display:block;margin:2px 0 var(--s3);padding:8px 10px;border-radius:8px;background:rgba(33,31,28,.05);font:500 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere;user-select:all}
.made .btn{padding:0 16px}

/* ---------- Switch (on/off): the whole row is the control; .swbtn is the bare switch for tables ---------- */
.switchrow{display:flex;align-items:center;gap:var(--s3);width:100%;padding:12px 16px;border-radius:18px;text-align:left;cursor:pointer;min-height:60px}
.sw-tx{flex:1;min-width:0}
.sw-tx b{display:block;font-size:var(--t-15);font-weight:600}
.sw-tx span{display:block;margin-top:2px;font-size:var(--t-13);color:var(--ink-2)}
.sw{flex:none;position:relative;display:block;width:51px;height:31px;border-radius:999px;background:rgba(33,31,28,.2);transition:background .25s var(--ease)}
.sw::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s var(--ease)}
[aria-checked="true"] > .sw,[aria-checked="true"].sw{background:var(--ink)}
[aria-checked="true"] > .sw::before,[aria-checked="true"].sw::before{transform:translateX(20px)}
.swbtn{position:relative;display:inline-block;padding:0;border:0;background:none;cursor:pointer;line-height:0;vertical-align:middle}
.swbtn::after{content:"";position:absolute;inset:-7px -6px}   /* 44px hit area */

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);z-index:90;max-width:calc(100% - 32px);
  transform:translate(-50%,8px);opacity:0;pointer-events:none;padding:10px 16px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:var(--t-13);text-align:center;transition:opacity .3s,transform .3s var(--ease);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Load bar: a slim bar at the top edge; never invisible-fast, never silent-forever ---------- */
.loadbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:40;background:transparent;overflow:hidden;opacity:0;transition:opacity .15s}
.loadbar.show{opacity:1}
.loadbar i{position:absolute;top:0;bottom:0;width:40%;background:var(--ink);border-radius:0 3px 3px 0;animation:loadsweep 1.1s ease-in-out infinite}
@keyframes loadsweep{0%{left:-40%}50%{left:60%}100%{left:100%}}

/* ---------- Confirm dialog (replaces the browser's own) ---------- */
.confirm-overlay{position:fixed;inset:0;background:rgba(33,31,28,.35);display:none;align-items:center;justify-content:center;z-index:41;padding:24px}
.confirm-overlay.show{display:flex}
.confirm-box{max-width:340px;width:100%;padding:22px;border-radius:20px;text-align:center}
.confirm-box p{margin:0 0 18px;font-size:14px;color:var(--ink-2)}
.confirm-row{display:flex;gap:10px}
.confirm-row button{flex:1;height:46px;border-radius:999px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit}
.confirm-cancel{background:rgba(255,255,255,.7);border:1.5px solid var(--hair-2);color:var(--ink)}
.confirm-ok{background:var(--ink);border:0;color:#fff}

/* ---------- Page transitions (Chrome and Safari; other browsers just navigate) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:var(--ease)}
.bar[data-heir-bar]{view-transition-name:heir-bar}   /* the bar stays put while the page changes underneath */
::view-transition-group(heir-bar){animation-duration:0s}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} @view-transition{navigation:none} }
