/* ============================================================
   HOS Simulation layer — interactive demo styles
   Toasts, modals, drawers, AI-typing cursor, spinners, live
   pulses, flash-in rows, and the floating demo controls.
   Loaded alongside hos.css on every page. Uses hos.css tokens.
   ============================================================ */

/* ---- toasts ---- */
.hos-toasts {
  position: fixed; right: var(--space-7); bottom: var(--space-7); z-index: 9000;
  display: flex; flex-direction: column; gap: var(--space-3); max-width: 360px;
}
.hos-toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: var(--r-md); padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-md); font-size: 13px; color: var(--ink);
  animation: toast-in .28s cubic-bezier(.2,.8,.2,1);
}
.hos-toast.out { animation: toast-out .25s ease forwards; }
.hos-toast .ht-ic {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; margin-top: 1px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--teal);
}
.hos-toast.ai      { border-left-color: var(--ai); }
.hos-toast.ai .ht-ic { background: var(--ai); }
.hos-toast.good    { border-left-color: var(--good); }
.hos-toast.good .ht-ic { background: var(--good); }
.hos-toast.warn    { border-left-color: var(--warn); }
.hos-toast.warn .ht-ic { background: var(--warn); }
.hos-toast b { font-weight: 600; }
.hos-toast .ht-sub { color: var(--ink-2); font-size: 12px; margin-top: 1px; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }

/* ---- modal / dialog ---- */
.hos-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(23,15,48,.44); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: var(--space-7);
  animation: fade .2s ease;
}
.hos-dialog {
  width: min(560px, 100%); max-height: 88vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-glass);
  animation: dialog-in .26s cubic-bezier(.2,.8,.2,1);
}
.hos-dialog-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-6) var(--space-7); border-bottom: 1px solid var(--line);
}
.hos-dialog-h h3 { font-size: 16px; }
.hos-dialog-b { padding: var(--space-7); }
.hos-dialog-f { padding: var(--space-6) var(--space-7); border-top: 1px solid var(--line); display: flex; gap: var(--space-3); justify-content: flex-end; }
.hos-x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); display: grid; place-items: center; font-size: 15px; }
.hos-x:hover { background: var(--line); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- right-side drawer (patient / detail slide-in) ---- */
.hos-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 8000;
  width: min(460px, 100%); background: var(--panel);
  border-left: 1px solid var(--line); box-shadow: var(--shadow-glass);
  animation: drawer-in .3s cubic-bezier(.2,.8,.2,1); overflow: auto;
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }

/* ---- AI typing cursor (scribe / discharge / analytics answer) ---- */
.ai-cursor::after {
  content: "▍"; color: var(--ai); font-weight: 400;
  animation: blink 1s steps(1) infinite; margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }
.ai-thinking { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ai-deep); font-size: 12.5px; font-weight: 600; }
.ai-thinking .dots i {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ai);
  margin-left: 2px; animation: thinking 1.2s ease-in-out infinite;
}
.ai-thinking .dots i:nth-child(2) { animation-delay: .18s; }
.ai-thinking .dots i:nth-child(3) { animation-delay: .36s; }
@keyframes thinking { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* ---- button busy / spinner ---- */
.hos-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  display: inline-block; animation: spin .7s linear infinite;
}
.btn-ghost .hos-spin, .btn .hos-spin.dark { border-color: rgba(90,70,160,.3); border-top-color: var(--teal); }
@keyframes spin { to { transform: rotate(360deg); } }
/* opacity:.75 is nowhere near enough on a filled violet .btn-primary — a blocked
   control still read as pressable. Two separate reviewers hit this on gates that
   ARE the feature: a theatre-ready button held shut until the WHO checklist is
   complete, and a confirm held shut until a reason is typed. A gate you cannot
   see is not a gate, it is a button that mysteriously does nothing.
   .is-busy keeps the lighter treatment — it is mid-action, not refused. */
[disabled], .is-busy { cursor: default; pointer-events: none; }
.is-busy { opacity: .75; }
button[disabled], .btn[disabled], input[disabled] {
  opacity: .48;
  filter: saturate(.35);
  box-shadow: none;
}

/* ---- flash-in newly added row ---- */
@keyframes flash-row {
  0% { background: var(--teal-soft); box-shadow: inset 3px 0 0 var(--teal); }
  100% { background: transparent; box-shadow: none; }
}
.hos-flash { animation: flash-row 1.8s ease-out; }
.ai-flash { animation: ai-flash 1.8s ease-out; }
@keyframes ai-flash {
  0% { background: var(--ai-soft); box-shadow: inset 3px 0 0 var(--ai); }
  100% { background: transparent; box-shadow: none; }
}

/* ---- live pulse dot (activity feeds, "now serving", online workers) ---- */
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--good); display: inline-block; }
.live-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--good); opacity: 0; animation: ping 1.8s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---- toggle switch (workers on/off, module flags) ---- */
.sw { appearance: none; width: 40px; height: 22px; border-radius: 999px; background: var(--line-strong); position: relative; cursor: pointer; transition: background .18s; flex-shrink: 0; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: left .18s; }
.sw:checked { background: var(--teal); }
.sw:checked::after { left: 20px; }
.sw.ai:checked { background: var(--ai); }

/* utility */
.is-hidden { display: none !important; }
.reveal-in { animation: reveal-in .32s cubic-bezier(.2,.8,.2,1); }
@keyframes reveal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- floating demo controls ---- */
.hos-demobar {
  position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%); z-index: 7500;
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--chrome-glass); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--chrome-line); border-radius: 999px;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
  box-shadow: var(--shadow-glass); color: #fff; font-size: 12.5px;
}
.hos-demobar .db-badge { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; letter-spacing: .02em; }
.hos-demobar button {
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff;
  border-radius: 999px; padding: var(--space-2) var(--space-4); font-size: 12px; font-weight: 600;
}
.hos-demobar button:hover { background: rgba(255,255,255,.2); }
@media (max-width: 720px) { .hos-demobar { display: none; } }

/* ---- AI v2: staged progress lines ---- */
.ai-progress-line { display: flex; align-items: center; gap: var(--space-3); font-size: 12.5px; color: var(--ink-2); padding: var(--space-1) 0; }
.ai-progress-line .apl-tick { color: var(--good); font-weight: 700; }
.ai-progress-line.done { color: var(--ink); }
.ai-progress-line .hos-spin.dark { border-color: rgba(184,114,10,.25); border-top-color: var(--ai); width: 12px; height: 12px; }

/* ---- AI v2: chat bubbles (Health Memory, patient Q&A, Copilot) ---- */
.aichat-q {
  align-self: flex-end; max-width: 88%;
  background: var(--teal-soft); color: var(--teal-strong);
  border-radius: 12px 12px 3px 12px; padding: var(--space-3) var(--space-5);
  font-size: 13px; font-weight: 500; margin: var(--space-2) 0 var(--space-2) auto;
}
.aichat-a { display: flex; gap: var(--space-3); align-items: flex-start; margin: var(--space-2) 0; }
.aichat-a .ai-spark { margin-top: 2px; }
.aichat-a-body {
  background: var(--ai-ghost); border: 1px solid var(--ai-line);
  border-radius: 3px 12px 12px 12px; padding: var(--space-3) var(--space-5);
  font-size: 13px; line-height: 1.55; color: var(--ink); max-width: 88%;
}
.aichat-followups { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-2) 0 var(--space-3) 30px; }
.aichat-followups .chip { cursor: pointer; border: none; }

/* ---- WhatsApp typing indicator ---- */
.wa-typing .dots i {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #9AA79F; margin-right: 3px; animation: thinking 1.2s ease-in-out infinite;
}
.wa-typing .dots i:nth-child(2) { animation-delay: .18s; }
.wa-typing .dots i:nth-child(3) { animation-delay: .36s; }

/* ============================================================
   ✦ AI SHINE SYSTEM
   The AI is the product's whole claim, so it gets a motion signature no
   other surface has. Three composable pieces, all in saffron:

     ai-breathe  — a slow halo pulse. Says "alive and waiting."
     ai-orbit    — a conic-gradient ring rotating behind a surface.
                   Says "working." Only on things that actually compute.
     ai-sheen    — a specular highlight sweeping across. Says "premium."

   All three are decorative and sit in ::before/::after, never on the
   element's own transform — so they can't disturb layout or text
   legibility, and prefers-reduced-motion can kill them wholesale.
   ============================================================ */
@keyframes ai-breathe {
  0%, 100% { opacity: .5;  transform: scale(1); }
  50%      { opacity: .95; transform: scale(1.16); }
}
@keyframes ai-orbit { to { transform: rotate(1turn); } }
@keyframes ai-sheen {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  55%  { transform: translateX(230%)  skewX(-18deg); }
  100% { transform: translateX(230%)  skewX(-18deg); }
}
@keyframes ai-rise { from { opacity: 0; transform: translateY(6px) scale(.9); } }

/* a sweeping highlight — put on any AI surface. Needs position+overflow. */
.ai-sheen { position: relative; overflow: hidden; }
.ai-sheen::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.42) 48%, transparent 100%);
  animation: ai-sheen 3.6s ease-in-out infinite;
  pointer-events: none;
}

/* ---- ✦ HOS Copilot (global, Ctrl+K) ---- */
/* Bottom-RIGHT CORNER, not mid-edge. At bottom:74px the orb floated over
   live content — it covered the module-flag toggles on superadmin and sat
   awkwardly beside the demo bar. The corner is the one region no panel
   uses, and the demo bar is centred so they no longer collide. */
.hos-cop-dock {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 7600;
  display: flex; align-items: center; gap: var(--space-3);
}
.hos-copilot-fab {
  position: relative; flex-shrink: 0;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--ai-mark);
  color: #fff; font-size: 21px; line-height: 1; border: none; cursor: pointer;
  text-shadow: 0 1px 3px rgba(20,10,0,.5);
  display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(14,116,144,.42), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .18s cubic-bezier(.34,1.4,.64,1), box-shadow .2s ease;
}
/* the breathing halo — sits BEHIND the orb */
.hos-copilot-fab::before {
  content: ''; position: absolute; inset: -7px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255,255,255,.5) 0%, rgba(66,133,244,.34) 45%, rgba(66,133,244,0) 70%);
  animation: ai-breathe 2.8s ease-in-out infinite;
  pointer-events: none;
}
/* the orbiting ring — a conic sweep masked to a 2px band */
.hos-copilot-fab::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.92) 42deg, var(--ai-bright) 78deg, transparent 132deg);
  animation: ai-orbit 3.4s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 0 61%, #000 63% 100%);
          mask: radial-gradient(circle, transparent 0 61%, #000 63% 100%);
  pointer-events: none;
}
.hos-copilot-fab .cop-star { position: relative; z-index: 1; display: block; }
.hos-copilot-fab:hover { transform: scale(1.09); box-shadow: 0 12px 32px rgba(14,116,144,.58), inset 0 1px 0 rgba(255,255,255,.5); }
.hos-copilot-fab:active { transform: scale(.97); }
.hos-copilot-fab[aria-expanded="true"]::after { animation-duration: 1.1s; }

/* the label. Present so nobody has to guess what an orange circle does —
   the single biggest reason a demo viewer never clicks the AI. */
.hos-cop-label {
  order: -1;
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: rgba(20,12,44,.9); color: #fff;
  border: 1px solid rgba(34,211,238,.42); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: ai-rise .3s ease both;
}
.hos-cop-label kbd {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px; padding: 1px 5px; color: rgba(255,255,255,.8);
}
/* ---- panel placement ----
   BUG (reported): "Ask HOS AI is not at all working". It WAS working — the panel
   opened at bottom:88px, roughly 800px below the pill you just clicked in the app
   bar. Clicking a control at the top of the screen and having the response appear
   at the bottom, off your focus, is indistinguishable from a dead button. The
   panel now anchors to whichever control opened it (see `anchorPanel` in
   hos-sim.js): under the app-bar pill, or above the corner orb. */
.hos-copilot {
  position: fixed; right: var(--space-6); bottom: 88px; z-index: 7600;
  width: min(408px, calc(100vw - 24px));
  display: flex; flex-direction: column;
  max-height: min(560px, calc(100vh - 160px));
  animation: dialog-in .25s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
/* The panel carries the AI's colour signature so it is never mistaken for a
   generic chat widget: a saffron hairline at the top edge and a warm glow. */
.hos-copilot {
  border-top: 2px solid var(--ai);
  box-shadow: 0 18px 50px -12px rgba(8,47,58,.42), 0 0 0 1px rgba(14,116,144,.2);
}
.hcp-h {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ai-ghost), transparent);
}
.hcp-h b { font-size: 14px; }
/* min-height:120px left ~80px of dead space above the suggestion chips before
   any conversation existed — the same void that made the sidebar feel unfinished.
   flex:1 alone gives the chat all the room it needs once messages arrive. */
.hcp-chat { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-6) 0; display: flex; flex-direction: column; min-height: 0; }
.hcp-hint { font-size: 12.5px; color: var(--ink-2); padding: var(--space-2) 0; }
.hcp-sugg { display: flex; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) var(--space-6) var(--space-2); }
.hcp-sugg .chip { cursor: pointer; border: none; }
.hcp-form { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-6) var(--space-6); border-top: 1px solid var(--line); }
.hcp-form .f-input { flex: 1; }
/* anchored under the app bar rather than floating at the bottom of the viewport */
.hos-copilot.is-topdock { top: 74px; bottom: auto; max-height: min(560px, calc(100vh - 110px)); }

/* ---- notifications ----
   BUG (reported): "notifications list is also not working". The bell fired a
   toast, which is not a list — there was no way to SEE the items, only to be told
   they existed. A count badge that can't be opened is worse than no badge. */
.hos-notif {
  position: fixed; top: 74px; z-index: 7600;
  width: min(380px, calc(100vw - 24px));
  max-height: min(460px, calc(100vh - 110px));
  display: flex; flex-direction: column; overflow: hidden;
  animation: dialog-in .22s cubic-bezier(.2,.8,.2,1);
}
.hn-h { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid var(--line); }
.hn-h b { font-size: 14px; }
.hn-list { flex: 1; overflow-y: auto; }
.hn-item {
  display: flex; gap: var(--space-4); width: 100%; text-align: left;
  padding: var(--space-4) var(--space-5); border: none; background: none;
  border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background .14s ease;
}
.hn-item:hover { background: var(--panel-2); }
.hn-item:last-child { border-bottom: none; }
.hn-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.hn-dot.crit { background: var(--crit); } .hn-dot.warn { background: var(--warn); }
.hn-dot.ai { background: var(--ai); } .hn-dot.info { background: var(--info); }
/* display:block is LOAD-BEARING. These are <span>s, so without it the title,
   description and timestamp ran together on one line — "…(T-12)On Metformin
   1000mg BD…below 45.10:44 AM" — and their margin-top was inert, because
   vertical margins do nothing on an inline box. Every workspace's bell was
   affected. My own check had confirmed the rows existed and jumped to the right
   section, but never read the rendered text; structure passing is not the same
   as the thing being legible. */
.hn-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.hn-t { display: block; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.hn-d { display: block; font-size: 11.5px; color: var(--ink-2); line-height: 1.45; margin-top: 3px; }
.hn-when { display: block; font-size: 10.5px; color: var(--ink-3); font-family: var(--f-mono); margin-top: 4px; }
.hn-foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); background: var(--panel-2); }
.hn-empty { padding: var(--space-7) var(--space-5); text-align: center; font-size: 12.5px; color: var(--ink-2); }
/* The AI is the product's core claim — it used to `display:none` below 720px,
   which removed the entire value proposition on a phone. Only the label goes;
   the orb and the panel stay. */
@media (max-width: 720px) {
  .hos-cop-label { display: none; }
  .hos-cop-dock { right: var(--space-5); bottom: var(--space-5); }
  .hos-copilot-fab { width: 48px; height: 48px; font-size: 19px; }
  .hos-copilot { bottom: 76px; right: var(--space-4); }
}

/* ============================================================
   CROSS-WORKSPACE ORCHESTRATION
   ------------------------------------------------------------
   The checklist a discharge sets off, and the evidence trail every
   drafted artifact carries. Two rules hold these together:

   · a step is never "done" — it goes drafting → awaiting a named
     human, and stops there. The colour language says the same
     thing: AI-tinted while it waits, never green.
   · the evidence trail is plain text with its sources named. An AI
     claim a clerk cannot check is an AI claim they will either
     rubber-stamp or ignore, and both are worse than no claim.
   ============================================================ */
.orch-list { display: flex; flex-direction: column; gap: var(--space-3); }
.orch-step {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel);
  transition: border-color .2s ease, background .2s ease;
}
.orch-step.is-ready { border-color: var(--ai-line); background: var(--ai-ghost); }
.orch-ic { flex-shrink: 0; width: 18px; display: grid; place-items: center; margin-top: var(--space-0); }
.orch-b { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.orch-t { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.orch-s {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-size: 12px; color: var(--ink-2);
}
.orch-await { color: var(--ai-deep); font-weight: 600; }
.orch-go { font-size: 12px; font-weight: 600; color: var(--teal); }

/* ---- "Why this?" — the evidence behind one drafted line ---- */
.why-trail {
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--ai-line);
  background: var(--ai-ghost);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12px; color: var(--ink-2); line-height: 1.6;
}
.why-trail ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.why-trail li { position: relative; padding-left: var(--space-5); }
.why-trail li::before {
  content: '·'; position: absolute; left: var(--space-3);
  color: var(--ai); font-weight: 700;
}
.why-trail .wt-src { display: block; margin-top: var(--space-3); color: var(--ink-3); font-size: 11px; }

/* ---- card footnote ----
   Promoted from page-local duplicates: 07-pharmacy and 08-lab each carried a
   byte-identical `.sec-foot` rule, so any page that used the class WITHOUT
   copying the rule got unstyled text sitting flush against the card edge —
   which is exactly what happened when the discharge board and the billing
   discharge inbox started using it. Both page-local copies still win on
   source order and are identical anyway; this makes the class mean the same
   thing everywhere instead of only where someone remembered to define it. */
.sec-foot {
  padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line);
  background: var(--panel-2); border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: 12px; color: var(--ink-2); line-height: 1.55;
}

/* ---- a drafted booking: what was asked for vs what is proposed ---- */
.fu-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
}
.fu-cell {
  padding: var(--space-4) var(--space-5);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-sm); min-width: 0;
}
.fu-l {
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ai-deep);
}
.fu-v {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  line-height: 1.4; margin: var(--space-2) 0 var(--space-1);
}

/* ---- a card that arrived from another workspace moments ago ---- */
.card.handoff-new, .ai-block.handoff-new {
  border-color: var(--ai);
  box-shadow: 0 0 0 3px var(--ai-soft), var(--shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
  .hos-toast, .hos-dialog, .hos-drawer, .hos-overlay, .reveal-in,
  .hos-flash, .ai-flash, .hos-copilot, .hos-cop-label { animation: none !important; }
  .live-dot::after, .ai-thinking .dots i, .hos-spin, .wa-typing .dots i { animation-duration: .001ms; }
  .ai-cursor::after { animation: none; }
  .hos-copilot-fab { transition: none; }
  /* kill the AI motion signature, keep the colour signature */
  .hos-copilot-fab::before, .hos-copilot-fab::after,
  .ai-sheen::after, .tb-ask::after { animation: none !important; }
  .hos-copilot-fab::before { opacity: .7; transform: none; }
}

/* ============================================================
   DAILY BRIEF — the panel that tells you what to do next
   ------------------------------------------------------------
   Design rules this encodes:
   · it has to earn the top of the page without shouting. One
     container, a hairline, a severity accent per item — no red
     panel, no siren. A brief that shouts gets ignored by week two.
   · severity is carried by ONE custom property per item (--ba…),
     so all four levels share a single rule set and a fifth level
     is three lines, not a new block.
   · coloured text uses the -deep variants. --crit/--warn/--good
     as text sit at ~4.3:1 on a light panel, under the 4.5 floor;
     the -deep pairings exist for exactly this and the brief is
     small print that carries money and compliance meaning.
   · the baseline line is visually quieter than the claim above it
     but never grey-on-grey: it is the sentence that makes the
     claim checkable, so it has to survive a squint.
   ============================================================ */
.brief {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.brief-h {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ai-ghost), var(--panel));
}
.brief-title { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.brief-meta { font-size: 12px; color: var(--ink-2); }
.brief-list { display: flex; flex-direction: column; }

.brief-i {
  --ba: var(--ai); --ba-deep: var(--ai-deep); --ba-soft: var(--ai-soft);
  position: relative;
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-7);
  border-bottom: 1px solid var(--line);
}
.brief-i:last-child { border-bottom: none; }
/* the severity accent — a spine, not a fill */
.brief-i::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--ba);
}
.brief-i.sev-safety { --ba: var(--crit); --ba-deep: var(--crit-deep); --ba-soft: var(--crit-soft); }
.brief-i.sev-comp   { --ba: var(--warn); --ba-deep: var(--warn-deep); --ba-soft: var(--warn-soft); }
.brief-i.sev-money  { --ba: var(--info); --ba-deep: var(--info-deep); --ba-soft: var(--info-soft); }
.brief-i.sev-prod   { --ba: var(--ai);   --ba-deep: var(--ai-deep);   --ba-soft: var(--ai-soft); }

.brief-top { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.brief-kick {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ba-deep);
}
.brief-clock {
  font-size: 11.5px; font-weight: 600;
  color: var(--ba-deep); background: var(--ba-soft);
  border-radius: var(--r-full); padding: var(--space-0) var(--space-3);
}
.brief-t {
  font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.5;
  margin-top: var(--space-2);
}
.brief-base { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin-top: var(--space-2); }
.brief-base-k { font-weight: 700; color: var(--ba-deep); }
.brief-src { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; margin-top: var(--space-2); }
.brief-acts { margin-top: var(--space-4); }

@media (prefers-reduced-motion: no-preference) {
  .brief-i { transition: background .18s ease; }
  .brief-i:hover { background: var(--panel-2); }
}
@media (max-width: 620px) {
  .brief-i { padding-left: var(--space-6); padding-right: var(--space-5); }
  .brief-h { padding: var(--space-4) var(--space-5); }
}