/* MedSim VRAI Cloud — portal design system.
   Ported from the shared tokens (samples/tokens.css) in
   "updated graphics design for MedSim VRAI". One token source, two modes:
   light = clinical white (Frames A/B/D), dark = encounter (Frame C).
   Calm, clinical, visuals-first: neutral ground + one earned teal-blue accent;
   chroma reserved for clinical meaning (stable/caution/critical/info). */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* neutrals — light */
  --ink-900:#0F1A24; --ink-600:#43566A; --ink-400:#6B7C8F;
  --surface-0:#FFFFFF; --surface-1:#F6F8FA; --surface-2:#EDF1F5;
  --hairline:#DCE3EA;

  /* single brand accent (clinical teal-blue) */
  --accent-700:#0E6E78; --accent-500:#1391A0; --accent-300:#7CC4CC; --accent-050:#E6F3F4;

  /* clinical semantic set — meaning only, never decoration */
  --state-stable:#1E8E5A; --state-caution:#C9821A; --state-critical:#C7382F; --state-info:#2D6FB3;
  --state-stable-bg:#E7F3EC; --state-caution-bg:#FBF1DF; --state-critical-bg:#FBEAE8; --state-info-bg:#E8F0F8;

  /* type */
  --font-ui:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-data:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* space + geometry */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --shadow-1:0 1px 2px rgba(15,26,36,.06);
  --shadow-2:0 6px 20px rgba(15,26,36,.10);

  /* motion */
  --ease:cubic-bezier(.2,.6,.2,1); --t-fast:140ms; --t-base:240ms; --t-slow:480ms;
}

/* dark mode (encounter) — applied via [data-theme="dark"] */
[data-theme="dark"]{
  --ink-900:#E8EEF3; --ink-600:#A9B8C6; --ink-400:#7C8D9C;
  --surface-0:#0C141B; --surface-1:#121C25; --surface-2:#1A2630;
  --hairline:#26333F;
  --accent-050:#0d2a2e;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 10px 30px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ui); color:var(--ink-900); background:var(--surface-0);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  max-width:900px; margin:0 auto; padding:1.5rem 1.25rem 4rem;
}

/* ---- type ---- */
h1{font-size:1.9rem; line-height:1.12; letter-spacing:-.02em; font-weight:600; margin:.2rem 0 .9rem}
h2{font-size:1.35rem; line-height:1.25; letter-spacing:-.01em; font-weight:600; margin:1.4rem 0 .6rem}
h3{font-size:1.06rem; font-weight:600; margin:1.1rem 0 .5rem}
p{margin:.6rem 0}
a{color:var(--accent-700); text-decoration:none}
a:hover{text-decoration:underline}
small{color:var(--ink-400)}
hr{border:0; border-top:1px solid var(--hairline); margin:1.4rem 0}

.mono{font-family:var(--font-data); font-variant-numeric:tabular-nums}
.meta{font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-400)}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; color:var(--accent-700);
  font-weight:600; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:.4rem}
.muted,.noprint{color:var(--ink-400)}

/* ---- forms ---- */
form{margin:1.2rem 0; padding:1.15rem 1.25rem; background:var(--surface-1);
  border:1px solid var(--hairline); border-radius:var(--r-md)}
form h3:first-child{margin-top:.1rem}
label{display:block}
.field{display:block; margin:.85rem 0; font-weight:600; color:var(--ink-900)}
.field input,.field select,.field textarea{margin-top:.35rem; font-weight:400}
input,select,textarea{
  display:block; width:100%; margin:.4rem 0; padding:.6rem .7rem; box-sizing:border-box;
  font:inherit; color:var(--ink-900); background:var(--surface-0);
  border:1px solid var(--hairline); border-radius:var(--r-sm); transition:border-color var(--t-fast) var(--ease)}
input:hover,select:hover,textarea:hover{border-color:var(--accent-300)}
input::placeholder,textarea::placeholder{color:var(--ink-400)}
select{max-width:100%; background:var(--surface-0)}
textarea{line-height:1.5}

/* ---- buttons ---- */
button,.btn{
  font:inherit; font-weight:600; border:1px solid transparent; border-radius:var(--r-sm);
  padding:.6rem 1.15rem; cursor:pointer; background:var(--accent-500); color:#fff;
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease)}
button:hover,.btn-primary:hover{background:var(--accent-700)}
button:active,.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent-500); color:#fff}
.btn-ghost{background:transparent; color:var(--ink-900); border-color:var(--hairline)}
.btn-ghost:hover{background:var(--surface-2)}

/* ---- cards / chips / dots ---- */
.card{background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:1rem 1.15rem}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600;
  padding:.16rem .55rem; border-radius:999px; line-height:1.6; background:var(--surface-2); color:var(--ink-600)}
.chip.stable{background:var(--state-stable-bg); color:var(--state-stable)}
.chip.caution{background:var(--state-caution-bg); color:var(--state-caution)}
.chip.critical{background:var(--state-critical-bg); color:var(--state-critical)}
.chip.info{background:var(--state-info-bg); color:var(--state-info)}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--accent-500)}

/* ---- tables ---- */
table{border-collapse:collapse; width:100%; margin:.8rem 0;
  border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden}
caption{text-align:left; color:var(--ink-400); font-size:.85rem; margin-bottom:.4rem}
th,td{border-bottom:1px solid var(--hairline); padding:.55rem .7rem; text-align:left; vertical-align:top}
thead th,tr:first-child th{
  background:var(--surface-1); color:var(--ink-600);
  font-size:.74rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase}
tbody tr:last-child td,tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-1)}

pre{background:var(--surface-1); border:1px solid var(--hairline);
  padding:1rem; border-radius:var(--r-md); overflow:auto; font-family:var(--font-data); font-size:.86rem}
code{font-family:var(--font-data); font-size:.9em}

/* ---- status text ---- */
/* .err marks both hard errors and routine pending states ("awaiting review"); keep it as plain
   critical-tinted text — the design system reserves the filled alarm box for true critical state. */
.err{color:var(--state-critical)}

/* ---- avatar rig (blink + lip-sync) ---- */
.av .eye,.av .mouth{transform-box:fill-box; transform-origin:center}
.av .eye{animation:blink 4s infinite}
.av .mouth{animation:talk .9s infinite}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@keyframes talk{0%,100%{transform:scaleY(1)}50%{transform:scaleY(2)}}

/* ---- avatar / face gallery ---- */
.gallery{display:flex; flex-wrap:wrap; gap:.7rem; margin:.6rem 0}
.gallery figure{margin:0; width:6rem; text-align:center; font-size:.72rem; color:var(--ink-600)}

/* ---- top navigation (contained bar, neutral ground + accent mark) ---- */
.topnav{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  background:var(--surface-1); border:1px solid var(--hairline);
  padding:.55rem .9rem; border-radius:var(--r-md); margin-bottom:1.6rem}
.topnav a{color:var(--ink-600); text-decoration:none; font-size:.92rem; font-weight:500}
.topnav a:hover{color:var(--ink-900); text-decoration:none}
.topnav .brand{display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--ink-900); letter-spacing:-.01em}
.topnav .brand .mark{width:1.4rem; height:1.4rem; border-radius:6px; background:var(--accent-500);
  color:#fff; display:grid; place-items:center; font-family:var(--font-data); font-weight:600; font-size:.8rem}
.topnav .links{display:flex; gap:.95rem; flex-wrap:wrap; align-items:center}
.topnav .user{margin-left:auto; color:var(--ink-400); font-size:.82rem; display:flex; align-items:center; gap:.6rem}
.topnav form{margin:0; padding:0; border:0; background:none; display:inline}
.topnav .out{background:transparent; color:var(--ink-600); border:1px solid var(--hairline);
  padding:.18rem .6rem; border-radius:var(--r-sm); cursor:pointer; font:inherit; font-size:.82rem}
.topnav .out:hover{background:var(--surface-2); color:var(--ink-900)}

/* ---- focus + motion ---- */
:focus-visible{outline:2px solid var(--accent-500); outline-offset:2px; border-radius:3px}
.reveal{opacity:0; transform:translateY(10px); animation:rise var(--t-base) var(--ease) forwards}
@keyframes rise{to{opacity:1; transform:none}}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
}

/* ---- public landing (Frame A) ---- */
.lp-nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.2rem 0 1.3rem; border-bottom:1px solid var(--hairline); margin-bottom:2rem}
.lp-nav .brand{display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:1.05rem;
  color:var(--ink-900); letter-spacing:-.01em}
.lp-nav .brand .mark{width:1.5rem; height:1.5rem; border-radius:6px; background:var(--accent-500);
  color:#fff; display:grid; place-items:center; font-family:var(--font-data); font-weight:600; font-size:.85rem}
.lp-navlinks{display:flex; align-items:center; gap:1.1rem}
.lp-navlinks a{color:var(--ink-600); text-decoration:none; font-weight:500; font-size:.95rem}
.lp-navlinks a:hover{color:var(--ink-900)}
.lp-navlinks a.btn-primary,.lp-navlinks a.btn-primary:hover{color:#fff}

.hero{padding:1rem 0 2.2rem}
.hero h1{font-size:2.3rem; line-height:1.08; letter-spacing:-.02em; margin:.3rem 0 1rem; max-width:20ch}
.hero h1 em{font-style:normal; color:var(--accent-700)}
.hero .lede{font-size:1.15rem; color:var(--ink-600); max-width:54ch; margin:0 0 1.4rem}
.cta-row{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center}
.cta-row .btn{text-decoration:none; display:inline-flex; align-items:center}
.hero .trust{margin-top:1.3rem; color:var(--ink-400); font-size:.85rem}

.band{border:1px solid var(--hairline); background:var(--surface-1); border-radius:var(--r-md);
  margin:.4rem 0 2.4rem; overflow:hidden}
.stats{display:grid; grid-template-columns:repeat(4,1fr)}
.stat{padding:1.3rem 1.2rem; border-right:1px solid var(--hairline)}
.stat:last-child{border-right:0}
.stat .n{font-weight:600; font-size:1.9rem; letter-spacing:-.02em; color:var(--ink-900); line-height:1.05}
.stat .n .unit{color:var(--accent-700); font-size:1.1rem; margin-left:.06em}
.stat .l{color:var(--ink-600); font-size:.85rem; margin-top:.35rem}

.lp-sec{padding:0 0 2rem}
.lp-sec h2{font-size:1.5rem; margin:0 0 .4rem}
.lp-sec .lede{font-size:1.02rem; color:var(--ink-600); max-width:62ch; margin:0 0 .4rem}
.cats{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-top:1rem}
.cat{display:flex; align-items:center; gap:.55rem; padding:.7rem .8rem; font-size:.9rem; font-weight:500;
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-sm)}
.lp-foot{border-top:1px solid var(--hairline); color:var(--ink-400); font-size:.8rem; padding:1.3rem 0 0; margin-top:1rem}

@media (max-width:760px){
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2n){border-right:0}
  .cats{grid-template-columns:1fr 1fr}
  .hero h1{font-size:1.9rem}
}

@media print{
  .noprint,.topnav{display:none}
  body{margin:0; max-width:none; padding:0}
  .av *{animation:none}
  form,.card,table,pre{box-shadow:none}
}