/* ==========================================================================
   Herd Link vet portal (public/vet2)
   Landing + dashboard, one stylesheet.
   Palette, type and motion per docs/herd-link/00-brand-and-design.md.
   Vanilla CSS. Tablet first: vets read this at the bench on an iPad.
   ========================================================================== */

:root{
  /* brand */
  --ink:#22160F;
  --ink-soft:#7A6558;
  --cream:#FFF6EF;
  --paper:#FFFDF9;
  --ember:#FF3D1F;
  --amber:#FF9F1C;
  --link:#0E7C86;
  --ok:#3E9B4F;
  --warn:#E88A1A;
  --alert:#D6453A;
  --line:rgba(34,22,15,.10);
  --line-strong:rgba(34,22,15,.20);
  /* warm shadows, never grey blue */
  --shadow:0 20px 50px -18px rgba(120,60,30,.25), 0 4px 14px rgba(120,60,30,.10);
  --shadow-soft:0 14px 34px -16px rgba(120,60,30,.20), 0 2px 8px rgba(120,60,30,.08);
  /* motion */
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,.8,.28,1);
  /* data */
  --move:var(--link);
  --rest:#EADCCE;
  --prev:#C9B9AC;
  /* type */
  --font:"General Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  /* radii */
  --r-chip:999px;
  --r-input:13px;
  --r-card:20px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
section[id],.signin-card{scroll-margin-top:84px}
html,body{margin:0}
body{
  background:var(--cream);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0}
button{font:inherit;cursor:pointer;color:inherit}
a{color:inherit}
img,svg,canvas{display:block;max-width:100%}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}

/* ------------------------------------------------------------------ type -- */
.display{font-family:var(--serif);font-weight:560;letter-spacing:-.02em;font-variation-settings:"opsz" 72;line-height:1.04}
.eyebrow{
  text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:600;
  color:var(--ember);margin:0 0 14px;
}
.lede{font-size:clamp(1.05rem,1.6vw,1.24rem);color:var(--ink-soft);max-width:34em;margin:18px 0 0}

/* --------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:600;font-size:1rem;text-decoration:none;
  border-radius:var(--r-chip);border:1px solid transparent;
  padding:14px 24px;min-height:48px;
  transition:transform .18s var(--spring), background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn-ember{background:var(--ember);color:var(--cream)}
.btn-ember:hover{background:#F0300F}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{background:#3A2A1E}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--paper);border-color:rgba(34,22,15,.30)}
.btn-small{padding:9px 17px;font-size:.92rem;min-height:40px}
.btn-danger{border-color:rgba(214,69,58,.4);color:var(--alert);background:transparent}
.btn-danger:hover{background:rgba(214,69,58,.07)}
:focus-visible{outline:2px solid rgba(255,61,31,.5);outline-offset:2px;border-radius:6px}

/* ----------------------------------------------------------------- chips -- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:var(--r-chip);padding:4px 11px;
  font-size:.78rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.chip-alert{background:rgba(214,69,58,.09);border-color:rgba(214,69,58,.28);color:#A33327}
.chip-warm{background:rgba(255,159,28,.14);border-color:rgba(232,138,26,.38);color:#8A5410}
.chip-ok{background:rgba(62,155,79,.10);border-color:rgba(62,155,79,.30);color:#2F7A3D}
.chip-new{background:rgba(14,124,134,.10);border-color:rgba(14,124,134,.30);color:#0B6068}
.chip-calm{background:var(--paper);border-color:var(--line);color:var(--ink-soft)}
.chip-demo{background:rgba(122,101,88,.10);border-color:rgba(122,101,88,.25);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.07em;font-size:.68rem}
.chip-live{background:rgba(62,155,79,.10);border-color:rgba(62,155,79,.30);color:#2F7A3D}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* breathing light: the collar's glow, slow and calm */
.breathe-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 4px rgba(255,159,28,.20);
  animation:breathe 4s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{box-shadow:0 0 0 3px rgba(255,159,28,.22);opacity:1}
  50%{box-shadow:0 0 0 8px rgba(255,159,28,.06);opacity:.72}
}

/* ==========================================================================
   LANDING
   ========================================================================== */

/* nav */
.nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;
  padding:13px clamp(18px,4vw,44px);
  background:rgba(255,246,239,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.brand-mark{width:26px;height:26px;flex:none;color:var(--ink)}
.nav .spacer{flex:1}

/* hero */
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-20% -10% auto;height:80%;pointer-events:none;
  background:
    radial-gradient(900px 520px at 68% 14%, rgba(255,159,28,.20), transparent 62%),
    radial-gradient(700px 420px at 12% 6%, rgba(255,61,31,.08), transparent 70%);
}
.hero-grid{
  position:relative;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(26px,4vw,64px);align-items:center;
  padding-top:clamp(44px,6.5vw,92px);padding-bottom:clamp(34px,5vw,70px);
}
.hero h1{font-size:clamp(2.5rem,6vw,4.6rem);line-height:1;font-variation-settings:"opsz" 100}
.hero h1 em{font-style:italic;color:var(--ember)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-note{margin:20px 0 0;font-size:.92rem;color:var(--ink-soft)}
.hero-visual{position:relative;min-height:400px;display:grid;place-items:center}
.hero-glow{
  position:absolute;inset:8% 4%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,159,28,.22), rgba(255,61,31,.06) 60%, transparent);
  filter:blur(6px);pointer-events:none;
}
.clinic-card{
  position:relative;width:min(430px,100%);
  background:var(--paper);border:1px solid var(--line);border-radius:26px;
  padding:24px 24px 20px;box-shadow:var(--shadow);
}
.cc-head{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;margin-bottom:16px}
.cc-head .dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(255,159,28,.20);animation:breathe 4s ease-in-out infinite}
.cc-line{display:flex;align-items:center;gap:0;margin:6px 0 18px}
.cc-line i{height:2px;background:var(--line-strong);flex:1}
.cc-line b{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);flex:none}
.cc-line b.hot{border-color:var(--amber);background:var(--amber)}
.cc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.cc-note{margin:0;font-size:.9rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:14px}

/* how it works */
.how{padding:clamp(54px,7vw,96px) 0 0}
.how h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.how-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px 24px;box-shadow:var(--shadow-soft);
}
.how-num{
  font-family:var(--serif);font-weight:560;font-size:1rem;color:var(--ember);
  display:inline-block;margin-bottom:14px;letter-spacing:.06em;
}
.how-card h3{font-family:var(--serif);font-weight:560;font-size:1.22rem;letter-spacing:-.01em;margin-bottom:8px}
.how-card p{margin:0;color:var(--ink-soft);font-size:.96rem}

/* privacy band */
.band-dark{background:var(--ink);color:var(--cream);margin-top:clamp(54px,7vw,96px);padding:clamp(48px,6vw,84px) 0}
.band-dark .eyebrow{color:var(--amber)}
.band-dark h2{font-size:clamp(1.6rem,3vw,2.4rem);max-width:20em}
.band-dark p{color:rgba(255,246,239,.75);max-width:36em;margin:16px 0 0}
.band-dark .micro{margin-top:22px;font-size:.85rem;color:rgba(255,246,239,.55)}

/* sign in */
.signin{padding:clamp(54px,7vw,96px) 0}
.signin-grid{display:grid;grid-template-columns:1fr minmax(340px,460px);gap:clamp(28px,4vw,70px);align-items:start}
.signin-copy h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.signin-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.signin-list li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft);font-size:1rem}
.signin-list li b{color:var(--ink);font-weight:600}
.tick{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(14,124,134,.12);color:var(--link);display:grid;place-items:center;font-size:.75rem;font-weight:700;margin-top:2px}
.signin-card{
  background:var(--paper);border:1px solid var(--line);border-radius:24px;
  padding:28px 26px;box-shadow:var(--shadow);scroll-margin-top:90px;
}
.signin-card .step{display:none}
.signin-card .step.on{display:block}
.signin-card h3{font-family:var(--serif);font-weight:560;font-size:1.5rem;letter-spacing:-.015em;margin-bottom:6px}
.signin-card .sub{margin:0 0 20px;color:var(--ink-soft);font-size:.96rem}
.field{margin-bottom:14px}
.field label{display:block;font-size:.83rem;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;border:1px solid var(--line-strong);border-radius:var(--r-input);
  padding:10px 14px;font:inherit;background:#fff;color:var(--ink);
}
.field textarea{min-height:110px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid rgba(255,61,31,.35);outline-offset:0;border-color:transparent}
.field .hint{font-size:.82rem;color:var(--ink-soft);margin:6px 0 0}
.field.full{grid-column:1 / -1}
.status{margin:12px 0 0;font-size:.9rem;color:var(--ink-soft);min-height:1.4em}
.status.bad{color:var(--alert)}
.status.good{color:var(--ok)}
.linklike{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--link);text-decoration:underline;text-underline-offset:3px}
.signed-panel{border:1px solid rgba(14,124,134,.3);background:rgba(14,124,134,.06);border-radius:16px;padding:18px;margin-bottom:18px}
.signed-panel strong{display:block;font-size:1.05rem;margin-bottom:2px}
.signed-panel p{margin:0 0 14px;color:var(--ink-soft);font-size:.92rem}

/* footer */
.footer{border-top:1px solid var(--line);padding:34px 0 44px;background:var(--cream)}
.footer-inner{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.footer .micro{font-size:.84rem;color:var(--ink-soft);margin:0}

/* reveals: fade + 10px rise, once */
[data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ==========================================================================
   DASHBOARD
   ========================================================================== */
body.app{background:var(--cream)}

.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  padding:11px clamp(14px,3vw,26px);
  background:rgba(255,246,239,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar .brand{font-size:1.12rem}
.topbar .brand-mark{width:24px;height:24px}
.topbar .who{font-size:.9rem;color:var(--ink-soft);padding-left:12px;border-left:1px solid var(--line)}
.topbar .spacer{flex:1}

.layout{
  display:grid;grid-template-columns:minmax(286px,336px) 1fr;
  height:calc(100dvh - 63px);
}
.layout>*{min-height:0}

/* rail: ink, warm */
.rail{
  background:var(--ink);color:rgba(255,246,239,.92);
  display:flex;flex-direction:column;padding:14px 12px 18px;
}
.search-wrap{position:relative;display:block}
.search-wrap svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:rgba(255,246,239,.45);pointer-events:none}
.search{
  width:100%;min-height:46px;border:1px solid rgba(255,246,239,.14);border-radius:13px;
  padding:0 14px 0 38px;background:rgba(255,246,239,.07);color:var(--cream);font:inherit;
}
.search::placeholder{color:rgba(255,246,239,.45)}
.search:focus{outline:2px solid rgba(255,159,28,.5);outline-offset:0;border-color:transparent}
.plist{overflow:auto;margin-top:12px;display:flex;flex-direction:column;gap:4px;flex:1;scrollbar-width:thin}
.sec{
  font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,246,239,.45);margin:16px 8px 6px;display:flex;gap:8px;align-items:center;
}
.sec:first-child{margin-top:4px}
.pi{
  display:grid;grid-template-columns:1fr;gap:3px;text-align:left;width:100%;
  border:0;border-radius:14px;padding:11px 13px;min-height:56px;
  background:transparent;color:rgba(255,246,239,.92);
  transition:background .14s ease;
}
.pi:hover{background:rgba(255,246,239,.07)}
.pi.on{background:rgba(255,246,239,.11);box-shadow:inset 3px 0 0 var(--ember)}
.pi .row1{display:flex;align-items:center;gap:8px;min-width:0}
.pi .row1 strong{font-size:.98rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi .row1 .chips{margin-left:auto;display:flex;gap:5px;flex:none}
.pi .note{font-size:.8rem;color:rgba(255,246,239,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi .meta{font-size:.75rem;color:rgba(255,246,239,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.pi.concern{background:rgba(214,69,58,.14)}
.pi.concern:hover{background:rgba(214,69,58,.2)}
.pi.concern.on{background:rgba(214,69,58,.26)}
.pi .chip{background:transparent;border-color:rgba(255,246,239,.22);color:rgba(255,246,239,.8);padding:2px 8px;font-size:.68rem}
.pi .chip-alert{border-color:rgba(255,150,130,.5);color:#FFB4A8}
.pi .chip-warm{border-color:rgba(255,159,28,.5);color:#FFC978}
.pi .chip-ok{border-color:rgba(125,255,196,.4);color:#9BE8BC}
.pi .chip-new{border-color:rgba(140,200,255,.4);color:#9CC4FF}
.pi .chip-demo{border-color:rgba(255,246,239,.22);color:rgba(255,246,239,.6)}
.rail-hint{color:rgba(255,246,239,.55);font-size:.83rem;margin:2px 8px 10px;line-height:1.45}
.rail-reg{color:var(--amber)}

/* stage */
.stage{padding:clamp(16px,2.4vw,28px) clamp(16px,2.6vw,30px) 48px;overflow:auto}
.back{display:none;align-items:center;gap:6px;min-height:42px;padding:0 15px;margin-bottom:14px;background:var(--paper);border:1px solid var(--line-strong);border-radius:12px;font-weight:600}
.back svg{width:14px;height:14px}
.stage-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.stage-head h2{font-family:var(--serif);font-weight:560;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.02em;line-height:1.05}
.stage-head .sub{color:var(--ink-soft);font-size:.92rem;margin-top:5px}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-chip);padding:6px 12px;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft)}
.pill.live{color:#2F7A3D;border-color:rgba(62,155,79,.35);background:rgba(62,155,79,.07)}
.pill.sample{color:var(--ink-soft)}
.pill.new{color:#0B6068;border-color:rgba(14,124,134,.35);background:rgba(14,124,134,.06)}

.alert{display:flex;gap:10px;padding:13px 16px;border-radius:15px;background:rgba(214,69,58,.08);border:1px solid rgba(214,69,58,.26);color:#8F2C22;font-size:.98rem;font-weight:600;margin-bottom:14px}
.alert .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--alert);margin-top:6px}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 16px;min-height:96px}
.kpi.hero{background:var(--ink);color:var(--cream);border-color:transparent}
.kpi .lbl{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.kpi.hero .lbl{color:rgba(255,246,239,.55)}
.kpi .big{font-size:1.7rem;font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:.8rem;color:var(--ink-soft);margin-top:5px}
.kpi.hero .sub{color:rgba(255,246,239,.62)}

.grid2{display:grid;grid-template-columns:1.45fr .85fr;gap:12px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 16px 14px}
.panel+.panel{margin-top:12px}
.panel h4{font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.leg{display:flex;gap:16px;font-size:.78rem;color:var(--ink-soft);margin:-4px 0 12px}
.leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* 14 day chart */
.days{display:flex;gap:5px;height:158px;align-items:stretch}
.days span{flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;gap:1px;position:relative;padding-bottom:20px}
.days b{display:block;width:100%;border-radius:3px 3px 0 0}
.days b.move{background:var(--move)}
.days b.rest{background:var(--rest)}
.days em{position:absolute;bottom:0;left:-2px;right:-2px;text-align:center;font-style:normal;font-size:.62rem;font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* week vs week */
.cmp{display:flex;flex-direction:column;gap:16px}
.cmp-row{display:grid;grid-template-columns:52px 1fr 64px;gap:10px;align-items:center;font-size:.82rem}
.cmp-row .lab{color:var(--ink-soft);font-weight:600}
.cmp-bars{display:flex;flex-direction:column;gap:4px}
.cmp-bar{height:9px;border-radius:var(--r-chip);background:rgba(34,22,15,.05);overflow:hidden}
.cmp-bar i{display:block;height:100%;border-radius:var(--r-chip)}
.cmp-bar i.cur{background:var(--move)}
.cmp-bar i.prev{background:var(--prev)}
.cmp-row .vals{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.25}
.cmp-row .vals small{display:block;font-weight:500;color:var(--ink-soft);font-size:.72rem}
.cmp-keys{display:flex;flex-direction:column;gap:16px;justify-content:center}
.cmp-key{font-size:.78rem;color:var(--ink-soft)}
.cmp-key i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* time of day */
.hours-wrap{display:flex;flex-direction:column;gap:6px}
.hours{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;height:56px}
.hours i{display:block;height:100%;border-radius:3px;background:var(--rest)}
.hx{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;font-size:.62rem;font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.hx span{text-align:center}

/* warm line */
.warmline{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:12px 15px;border-radius:14px;border:1px solid var(--line);background:var(--paper);font-size:.95rem;color:var(--ink-soft)}
.warmline.warm{border-color:rgba(232,138,26,.4);background:rgba(255,159,28,.10);color:#7A4A0E;font-weight:600}
.warmline .breathe-dot{flex:none}

.call{margin-top:12px;padding:14px 16px;border-radius:15px;background:rgba(255,159,28,.10);border:1px solid rgba(232,138,26,.28)}
.call p{margin:0;font-size:1rem;line-height:1.5}
.caveat{font-size:.82rem;color:var(--ink-soft);margin:16px 0 0}

.empty{padding:44px 26px;text-align:center;background:var(--paper);border:1px dashed var(--line-strong);border-radius:18px;color:var(--ink-soft)}
.empty strong{display:block;color:var(--ink);font-family:var(--serif);font-weight:560;font-size:1.25rem;margin-bottom:6px}

/* actions + composer */
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px;align-items:flex-start}
.actions .btn{min-height:42px;padding:0 16px;font-size:.92rem}
.composer{display:none;margin:0 0 16px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px}
.composer.on{display:block}
.composer textarea{width:100%;min-height:130px;border:1px solid var(--line-strong);border-radius:var(--r-input);padding:12px 14px;font:inherit;resize:vertical;background:#fff;line-height:1.5}
.composer .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.composer .row .btn{min-height:42px;padding:0 16px;font-size:.92rem}

/* notes */
.note-row{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)}
.note-row:first-of-type{border-top:0}
.note-row .when{flex:0 0 118px;color:var(--ink-soft);font-size:.78rem;padding-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.note-row .body{flex:1;font-size:.95rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.note-row .del{border:0;background:none;color:var(--ink-soft);font-size:1.05rem;padding:2px 8px;border-radius:8px;line-height:1}
.note-row .del:hover{background:rgba(214,69,58,.08);color:var(--alert)}
.note-add{display:flex;gap:10px;margin-top:14px}
.note-add textarea{flex:1;min-height:56px;border:1px solid var(--line-strong);border-radius:var(--r-input);padding:11px 13px;font:inherit;resize:vertical;background:#fff}
.note-add .btn{min-height:56px;align-self:stretch}

/* record grid */
.rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.rec-row{display:flex;gap:14px;padding:8px 0;border-top:1px solid var(--line);font-size:.93rem}
.rec-row:first-of-type{border-top:0}
.rec-row .k{flex:0 0 108px;color:var(--ink-soft)}
.rec-row .v{flex:1;text-align:right;overflow-wrap:anywhere;font-weight:500}
.rec-row .v.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;letter-spacing:.02em}
.muted{color:var(--ink-soft);font-size:.9rem;margin:6px 0 0}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:660px}
.form-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}

/* token */
.token-box{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;word-break:break-all;background:rgba(34,22,15,.04);border:1px solid var(--line-strong);border-radius:14px;padding:14px 16px;margin:12px 0;font-variant-numeric:tabular-nums}
.token-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

/* toast + dialog */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,90px);
  background:var(--ink);color:var(--cream);padding:12px 20px;border-radius:14px;
  font-size:.94rem;font-weight:600;opacity:0;transition:.28s var(--ease);z-index:90;
  max-width:min(90vw,520px);box-shadow:var(--shadow);pointer-events:none;
}
.toast.on{transform:translate(-50%,0);opacity:1}
.dlg-bg{position:fixed;inset:0;background:rgba(34,22,15,.45);z-index:80;display:grid;place-items:center;padding:20px}
.dlg{background:var(--paper);border-radius:22px;padding:24px;max-width:420px;width:100%;box-shadow:0 30px 70px rgba(34,22,15,.3)}
.dlg h3{font-family:var(--serif);font-weight:560;font-size:1.25rem;letter-spacing:-.01em;margin-bottom:8px}
.dlg p{color:var(--ink-soft);font-size:.95rem;line-height:1.5;margin:0 0 20px}
.dlg .row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* print: the patient report */
.print-head{display:none}
@media print{
  @page{margin:14mm}
  html,body{background:#fff!important;color:#000}
  .rail,.topbar,.back,.search-wrap,.actions,.composer,.note-add,.note-row .del,.pill,.toast,.dlg-bg,.chip,.no-print{display:none!important}
  .layout{display:block;height:auto}
  .stage{padding:0;overflow:visible}
  .print-head{display:block;margin:0 0 18px;padding-bottom:14px;border-bottom:2px solid #22160F}
  .print-head h1{font-family:var(--serif);font-size:22pt;letter-spacing:-.01em}
  .print-head p{margin:5px 0 0;color:#333;font-size:9.5pt}
  .panel,.kpi,.empty,.warmline,.call{border:1px solid #C9B9AC!important;box-shadow:none!important;break-inside:avoid;background:#fff!important}
  .kpi.hero{color:#000;background:#fff!important}
  .kpi.hero .lbl,.kpi.hero .sub{color:#555!important}
  .days b.move{background:#22160F}
  .days b.rest{background:#E3D8CE}
  .hours i{background:#F1E8DF}
  .cmp-bar i.cur{background:#22160F}
  .cmp-bar i.prev{background:#B9A99B}
  .stage-head h2{font-size:18pt}
  .caveat{color:#444}
  a{text-decoration:none}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-visual{min-height:0}
  .signin-grid{grid-template-columns:1fr}
  .how-grid{grid-template-columns:1fr;gap:14px}
}
@media (max-width:780px){
  .layout{display:block;height:auto}
  .rail{min-height:calc(100dvh - 63px)}
  body.detail .rail{display:none}
  body.list .stage{display:none}
  .back{display:inline-flex}
  .kpis{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .rec-grid{grid-template-columns:1fr}
  .topbar .who{display:none}
  .note-row .when{flex-basis:92px}
}
@media (max-width:520px){
  .hero h1{font-size:2.3rem}
  .kpis{grid-template-columns:1fr 1fr}
  .actions .btn,.composer .row .btn{flex:1}
}

/* reduced motion: everything static */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
}