/* ============================================================
   MEDSY — COMPONENT CLASSES
   The reusable surface of the system. React primitives apply
   these classes; plain HTML can use them directly. Everything is
   token-driven — recolour by overriding the custom properties.
   ============================================================ */

/* ---------- BUTTONS ----------
   Filled variants carry a material finish: a token-legible fill, a 1px top
   gloss + hairline rim (inset), and a layered green-tinted drop shadow. Motion
   uses the semantic press/hover tokens — a real, tactile press. Shadows are
   written explicitly per state (not via a custom property) so they never leak
   into the design-token registry. */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--f-body);font-weight:var(--fw-semibold);font-size:.95rem;line-height:1;letter-spacing:-.01em;
  padding:.82em 1.5em;border-radius:var(--r-pill);
  border:1.5px solid transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;
  user-select:none;touch-action:manipulation;
  transition: transform var(--dur-press) var(--ease-spring),
    box-shadow var(--dur-hover) var(--ease-standard),
    filter var(--dur-hover) linear,
    background-color var(--dur-hover) var(--ease-standard),
    border-color var(--dur-hover) var(--ease-standard),
    color var(--dur-hover) var(--ease-standard);
  white-space:nowrap;
}
.btn svg{width:1em;height:1em;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.97)}

/* Primary — deep forest gradient that stays legible for white at every width
   (all stops ≥4.6:1), a mint-lit top edge, and a mint glow + brighten on hover
   that brings the signature forest→mint energy into the interaction. */
.btn-primary{
  background:var(--grad-btn-primary);
  color:#fff;text-shadow:0 1px 1px rgba(4,40,26,.24);
  box-shadow:0 1px 1.5px rgba(6,58,40,.28),0 4px 10px -6px rgba(6,58,40,.24),0 10px 20px -14px rgba(15,104,68,.24),inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.06);
}
.btn-primary:hover{filter:brightness(1.07) saturate(1.06);box-shadow:0 2px 4px rgba(6,58,40,.3),0 8px 18px -8px rgba(6,58,40,.32),0 18px 40px -16px rgba(95,232,177,.45),inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.08)}
.btn-primary:focus-visible{box-shadow:0 1px 1.5px rgba(6,58,40,.28),0 4px 10px -6px rgba(6,58,40,.24),0 10px 20px -14px rgba(15,104,68,.24),inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.06),0 0 0 5px var(--focus-ring)}
/* signature light sweep across the primary on hover */
.btn-primary{overflow:hidden}
.btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.26) 50%,transparent 60%);
  transform:translateX(-135%);transition: transform var(--dur-slower) var(--ease-standard)}
.btn-primary:hover::after{transform:translateX(135%)}
@media (prefers-reduced-motion: reduce){.btn-primary::after{display:none}}

/* Secondary — mint, forest ink (8.3:1), same gloss + rim */
.btn-secondary{
  background:var(--grad-btn-secondary);color:var(--forest-900);
  box-shadow:0 1px 1.5px rgba(6,58,40,.14),0 4px 10px -6px rgba(15,104,68,.22),inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.14);
}
.btn-secondary:hover{filter:brightness(1.04);box-shadow:0 2px 4px rgba(6,58,40,.16),0 10px 22px -8px rgba(15,104,68,.3),inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.18)}
.btn-secondary:focus-visible{box-shadow:0 1px 1.5px rgba(6,58,40,.14),0 4px 10px -6px rgba(15,104,68,.22),inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 5px var(--focus-ring)}

/* Soft — tinted flat */
.btn-soft{background:var(--mint-100);color:var(--forest);border-color:var(--line-mint)}
.btn-soft:hover{background:var(--mint-200);border-color:rgba(var(--mint-rgb),.6)}

/* Outline — quiet on white, forest on hover */
.btn-outline{background:var(--surface-card);color:var(--forest);border-color:rgba(var(--forest-rgb),.32)}
.btn-outline:hover{border-color:var(--forest);background:var(--mint-50)}

/* Ghost — the quietest variant: no fill, no rim, identified by its forest label
   alone (the standard text-button pattern). WCAG 1.4.11 requires a 3:1 boundary
   only where a boundary is what identifies the control; here the label does that
   job, so ghost deliberately carries no chrome at rest.
   v9.5 added a --line-soft rim for "affordance" and that was a mistake: at
   1.11:1 over white it was imperceptible, and any rim strong enough to read
   (~rgba(forest,.30)+) IS .btn-outline. Two variants can't share one treatment.
   The system already covers the middle ground — .btn-soft is tinted at rest,
   .btn-outline is rimmed at rest — so ghost stays chrome-free on purpose.
   USE for a secondary action sitting beside a filled primary, where proximity
   and weight already group the pair. DON'T use as a lone control on a busy
   surface: pick .btn-outline or .btn-soft there. */
.btn-ghost{background:transparent;color:var(--forest);border-color:transparent}
.btn-ghost:hover{background:var(--mint-100)}

/* Dark — charcoal gradient, warms to forest on hover */
.btn-dark{
  background:linear-gradient(180deg,#3c3c3c 0%,#333 60%,#242424 100%);color:#fff;
  box-shadow:0 1px 1.5px rgba(0,0,0,.3),0 4px 12px -6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-dark:hover{background:linear-gradient(180deg,#0d5e3e 0%,#063a28 100%);box-shadow:0 2px 4px rgba(0,0,0,.32),0 10px 22px -8px rgba(6,58,40,.36),inset 0 1px 0 rgba(255,255,255,.16)}
.btn-dark:focus-visible{outline-color:var(--mint);box-shadow:0 1px 1.5px rgba(0,0,0,.3),0 4px 12px -6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.14),0 0 0 5px var(--focus-ring)}

/* Danger — red gradient, gloss + rim */
.btn-danger{
  background:linear-gradient(180deg,#eb5a5f 0%,#E5484D 60%,#d83a3f 100%);color:#fff;text-shadow:0 1px 1px rgba(120,20,24,.28);
  box-shadow:0 1px 1.5px rgba(120,20,24,.28),0 4px 12px -6px rgba(229,72,77,.3),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-danger:hover{filter:brightness(1.05);box-shadow:0 2px 4px rgba(120,20,24,.3),0 10px 24px -8px rgba(229,72,77,.42),inset 0 1px 0 rgba(255,255,255,.26)}
.btn-danger:focus-visible{box-shadow:0 1px 1.5px rgba(120,20,24,.28),0 4px 12px -6px rgba(229,72,77,.3),inset 0 1px 0 rgba(255,255,255,.22),0 0 0 5px var(--focus-ring)}

.btn-sm{font-size:.82rem;padding:.62em 1.1em}
.btn-lg{font-size:1.05rem;padding:.95em 1.9em}
.btn-icon{padding:.7em;border-radius:var(--r-pill);aspect-ratio:1}

/* Focus — keep the pill (bug fix: the global focus ring squared it to --r-sm),
   forest outline + signature mint halo. Filled variants re-state their own
   elevation above (so the lift survives focus); the tinted variants inherit the
   global mint-halo box-shadow. */
.btn:focus-visible{outline:2px solid var(--forest);outline-offset:2px;border-radius:var(--r-pill)}

.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;filter:saturate(.7)!important;box-shadow:none!important;text-shadow:none}
/* loading: an inline spinner replaces the leading icon; the label stays put so
   width barely shifts. Busy, not unavailable — so it keeps full opacity. */
.btn-spinner{width:1.05em;height:1.05em;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation: vd-spin .6s linear infinite;flex:none}
.btn.is-loading{opacity:1;cursor:progress}
@media (prefers-reduced-motion: reduce){.btn-spinner{animation-duration:1.3s}}

/* ---------- BRAND MARKS ----------
   The standard icon/wordmark are forest-stroked and vanish on a dark surface, so
   Medsy ships reversed (white) marks too. Render BOTH and let the theme choose:
     <img class="mark-onlight" src="…/medsy-wordmark.svg">
     <img class="mark-ondark"  src="…/medsy-wordmark-white.svg">
   This is the only correct way to put the lockup on a themed page. */
.mark-onlight{display:block}
.mark-ondark{display:none}
:is([data-theme="dark"],[data-theme="oled"]) .mark-onlight{display:none}
:is([data-theme="dark"],[data-theme="oled"]) .mark-ondark{display:block}

/* ---------- CARDS / SURFACES ---------- */
/* (press states for everything in this sheet live in the PRESS STATES block at
   the end of the file, where they win the cascade over these hover rules) */
.card{
  background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.85rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition: transform var(--dur-entrance) var(--ease-spring),box-shadow var(--dur-entrance) var(--ease-standard),border-color var(--dur-entrance);
}
.card-hover:hover,.card.is-interactive:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);border-color:var(--line-mint)}
.card-hover:hover .icon-chip,.card.is-interactive:hover .icon-chip{transform:rotate(-6deg) scale(1.06)}
.card-glass{background:var(--surface-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-rim);box-shadow:var(--shadow-md)}
.card-gradient{background:var(--grad-primary);color:#fff;border:none}
.card-gradient .card-title,.card-gradient h3{color:#fff}
.card-gradient .card-text{color:rgba(255,255,255,.82)}
.card-deep{background:var(--grad-deep);color:#fff;border:none}
.icon-chip{
  width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
  background:var(--mint-100);color:var(--forest);margin-bottom:1.1rem;
  border:1px solid var(--line-mint);transition: transform var(--dur-entrance) var(--ease-spring);
}
.icon-chip svg{width:24px;height:24px}
.card-gradient .icon-chip,.card-deep .icon-chip{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.25)}
.card-title{font-family:var(--f-display);font-weight:var(--fw-semibold);font-size:1.35rem;color:var(--text-strong);margin-bottom:.4rem;letter-spacing:-.02em}
.card-text{color:var(--ink-soft);font-size:.98rem}

/* ---------- BADGES / PILLS ---------- */
.pill{display:inline-flex;align-items:center;gap:.45em;font-size:.78rem;font-weight:var(--fw-semibold);padding:.4em .9em;border-radius:var(--r-pill);letter-spacing:-.01em;line-height:1;white-space:nowrap;transition: transform var(--dur-control) var(--ease-spring),box-shadow var(--dur-control) var(--ease-standard),filter var(--dur-control) var(--ease-standard)}
/* interactive pills (links/buttons/opt-in) answer the cursor; label pills stay still */
a.pill:hover,button.pill:hover,.pill.is-interactive:hover{transform:translateY(-1px);box-shadow:var(--shadow-xs);filter:brightness(1.03)}
a.pill:active,button.pill:active,.pill.is-interactive:active{transform:translateY(0) scale(.97)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
/* live-status pill: the dot breathes (opt-in) */
.pill.is-live .dot{animation: vd-dot-pulse 1.7s var(--ease-emphasized) infinite}
.pill-forest{background:var(--forest);color:#fff}
.pill-mint{background:var(--mint);color:var(--forest-900)}
.pill-soft{background:var(--mint-100);color:var(--forest);border:1px solid var(--line-mint)}
.pill-outline{background:transparent;color:var(--forest);border:1.5px solid rgba(var(--forest-rgb),.3)}
.pill-ink{background:var(--surface-inverse);color:var(--text-on-inverse)}
.pill-peach{background:var(--peach);color:#8a3f27}
.pill-lilac{background:var(--lilac);color:#5b4ba8}
.pill-butter{background:var(--butter);color:#6f5610}
.pill-sky{background:var(--sky);color:#2a6b9e}

/* ---------- FORMS ---------- */
.field{position:relative;margin-bottom:1.1rem}
.input,.textarea,.select{
  width:100%;font:inherit;color:var(--ink);background:var(--surface-card);
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:1.25rem 1rem .5rem;transition: border-color var(--dur),box-shadow var(--dur);
}
.textarea{padding-top:1.5rem;min-height:120px;resize:vertical}
/* Chrome/Safari autofill: keep the Medsy surface + ink instead of the UA's yellow fill */
.input:-webkit-autofill,.textarea:-webkit-autofill,.select:-webkit-autofill,
.input:-webkit-autofill:hover,.input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);caret-color:var(--forest);
  -webkit-box-shadow:0 0 0 1000px var(--surface-card) inset;
  transition: background-color 9999s ease-out;
}
.input:hover:not(:focus):not(:disabled),.textarea:hover:not(:focus):not(:disabled),.select:hover:not(:focus):not(:disabled){border-color:var(--line-mint)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px var(--focus-ring)}
.field label,.field .flabel{position:absolute;left:1rem;top:1rem;color:var(--ink-faint);pointer-events:none;font-size:1rem;transition: all var(--dur-control) var(--ease-standard)}
.input:focus+label,.input:not(:placeholder-shown)+label,
.input:focus+.flabel,.input:not(:placeholder-shown)+.flabel,
.textarea:focus+label,.textarea:not(:placeholder-shown)+label,
.textarea:focus+.flabel,.textarea:not(:placeholder-shown)+.flabel{top:.45rem;font-size:.72rem;color:var(--forest);font-weight:var(--fw-semibold);letter-spacing:.02em}
.select{appearance:none;padding-top:1.4rem;padding-bottom:.55rem;padding-right:2.6rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b736e' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}
.input:disabled,.textarea:disabled,.select:disabled{opacity:.55;cursor:not-allowed;background:var(--mint-50)}
.field.is-error .input,.field.is-error .textarea,.field.is-error .select,.input.is-error{border-color:var(--danger)!important;box-shadow:0 0 0 4px var(--danger-soft)}
.field.is-ok .input,.field.is-ok .select,.input.is-ok{border-color:var(--forest)!important;box-shadow:0 0 0 4px var(--mint-100)}
.field-msg{display:flex;align-items:center;gap:6px;font-size:.78rem;margin-top:var(--s-2);font-weight:500;color:var(--ink-faint)}
.field-msg svg{width:14px;height:14px;flex:none}
.field-msg.err{color:var(--danger-ink)}
.field-msg.ok{color:var(--forest)}

/* checkbox + radio */
.check{display:inline-flex;align-items:center;gap:.65em;cursor:pointer;font-size:.95rem;user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box,.radio .box{width:22px;height:22px;border:1.5px solid rgba(var(--forest-rgb),.35);border-radius:7px;display:grid;place-items:center;transition: var(--dur-control) var(--ease-spring);flex:none}
.check .box svg,.radio .box svg{width:13px;height:13px;color:var(--on-brand);opacity:0;transform:scale(.4);transition: var(--dur-control) var(--ease-spring)}
.check input:checked+.box{background:var(--forest);border-color:var(--forest)}
.check input:checked+.box svg{opacity:1;transform:scale(1)}
.check input:focus-visible+.box{box-shadow:0 0 0 4px var(--focus-ring)}
.check:hover input:not(:checked)+.box,.radio:hover input:not(:checked)+.box{border-color:rgba(var(--forest-rgb),.6)}
.radio .box{border-radius:50%}
.radio .box::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--on-brand);opacity:0;transform:scale(.3);transition: var(--dur-control) var(--ease-spring)}
.radio input:checked+.box{background:var(--forest);border-color:var(--forest)}
.radio input:checked+.box::after{opacity:1;transform:scale(1)}

/* switch */
.switch{display:inline-flex;align-items:center;gap:.7em;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0}
.track{width:48px;height:27px;border-radius:var(--r-pill);background:rgba(var(--forest-rgb),.18);position:relative;transition: var(--dur-control) var(--spring-snap);flex:none}
.track::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:var(--shadow-xs);transition: var(--dur-control) var(--spring-snap)}
/* iOS-style knob stretch while pressed */
.switch:active .track::after{width:25px}
.switch:active input:checked+.track::after{transform:translateX(17px)}
.switch input:checked+.track{background:var(--grad-primary)}
.switch input:checked+.track::after{transform:translateX(21px)}
.switch input:focus-visible+.track{box-shadow:0 0 0 4px var(--focus-ring)}
.switch:hover input:not(:checked)+.track{background:rgba(var(--forest-rgb),.26)}
.switch:hover input:checked+.track{filter:brightness(1.06)}

/* search */
.search{position:relative}
.search svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-faint)}
.search .input{padding:.85rem 1rem .85rem 2.6rem}

/* ---------- ACCORDION ---------- */
.acc-item{border:1px solid var(--line);border-radius:var(--r);margin-bottom:var(--s-3);overflow:hidden;background:var(--surface-card);transition: border-color var(--dur),box-shadow var(--dur)}
.acc-item.open{border-color:var(--line-mint);box-shadow:var(--shadow-sm)}
.acc-head{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:1.15rem 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-weight:var(--fw-semibold);font-size:1.02rem;color:var(--text-strong);transition: background-color var(--dur-hover) var(--ease-standard)}
.acc-head .chev{width:30px;height:30px;border-radius:50%;background:var(--mint-100);color:var(--forest);display:grid;place-items:center;transition: transform var(--dur-control) var(--ease-spring),background-color var(--dur-hover) var(--ease-standard);flex:none}
.acc-head .chev svg{width:16px;height:16px}
.acc-item.open .chev{transform:rotate(180deg);background:var(--mint)}
/* closed headers answer the cursor with a calm mint wash + chevron reaction */
.acc-item:not(.open) .acc-head:hover{background:var(--mint-50)}
.acc-item:not(.open) .acc-head:hover .chev{background:var(--mint-200);transform:translateY(1px)}
.acc-body{display:grid;grid-template-rows:0fr;transition: grid-template-rows var(--dur-slow) var(--ease-emphasized)}
.acc-item.open .acc-body{grid-template-rows:1fr}
.acc-body-inner{overflow:hidden;min-height:0;padding:0 1.3rem;color:var(--ink-soft);font-size:.97rem;opacity:0;transition: opacity var(--dur) var(--ease-standard)}
.acc-item.open .acc-body-inner{padding-bottom:1.25rem;opacity:1}

/* ---------- TABS ---------- */
.tabs{border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;background:var(--surface-card);box-shadow:var(--shadow-sm)}
.tab-nav{display:flex;gap:var(--s-1);padding:var(--s-2);background:var(--mint-50);border-bottom:1px solid var(--line-soft);position:relative}
.tab-btn{flex:1;border:none;background:none;cursor:pointer;padding:.7rem;border-radius:var(--r-sm);font-weight:var(--fw-semibold);font-size:.92rem;color:var(--ink-soft);transition: color var(--dur);position:relative;z-index:1}
.tab-btn.active{color:var(--forest);background:var(--surface-card);box-shadow:var(--shadow-xs)}
/* inactive tabs deepen toward forest on hover — a clickable hint before the tab is chosen */
.tab-btn:hover:not(.active){color:var(--forest)}
/* sliding thumb (Tabs component): the white panel glides between tabs */
.tab-thumb{position:absolute;top:var(--s-2);bottom:var(--s-2);left:0;width:0;border-radius:var(--r-sm);background:var(--surface-card);box-shadow:var(--shadow-xs);z-index:0;transition: left var(--dur-overlay) var(--spring-bounce),width var(--dur-overlay) var(--spring-bounce)}
.tab-nav.has-thumb .tab-btn.active{background:none;box-shadow:none}
.tab-panels{padding:1.6rem}
.tab-panel-in{animation: vd-rise-in var(--dur-control) var(--ease-standard)}

/* ---------- PROGRESS ---------- */
.progress{height:10px;border-radius:var(--r-pill);background:var(--mint-100);overflow:hidden}
.progress .bar{height:100%;border-radius:var(--r-pill);background:var(--grad-primary);transition: width var(--dur-reveal) var(--spring-bounce);position:relative;overflow:hidden}
/* live progress (opt-in): a soft sheen travels the fill while work is under way */
.progress.is-live .bar::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation: vd-shimmer 2s infinite}
.progress.thin{height:6px}

/* ---------- ALERT / BANNER ---------- */
.alert{display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 1.2rem;border-radius:var(--r);font-size:.95rem;animation: vd-rise-in var(--dur-overlay) var(--ease-standard) both}
.alert .ai{width:22px;height:22px;flex:none;animation: vd-pop-in var(--dur-overlay) var(--ease-spring) .12s both}
.alert-success{background:var(--mint-100);color:var(--forest-700);border:1px solid var(--line-mint)}
.alert-info{background:var(--sky);color:var(--info-ink)}
.alert-warn{background:var(--butter);color:var(--warn-ink)}
.alert-error{background:var(--danger-soft);color:var(--danger-ink)}
.banner{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:var(--r);font-size:.93rem;border:1px solid var(--line);position:relative;overflow:hidden;animation: vd-rise-in var(--dur-overlay) var(--ease-standard) both}
.banner::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--forest);transform-origin:top;animation: vd-grow-y var(--dur-entrance) var(--ease-standard) .1s both}
.banner .bi{width:22px;height:22px;flex:none;animation: vd-pop-in var(--dur-overlay) var(--ease-spring) .12s both}
.banner-txt{flex:1}
.banner.info{background:var(--sky);color:var(--info-ink)}.banner.info::before{background:var(--info-ink)}
.banner.ok{background:var(--mint-100);color:var(--forest-700)}.banner.ok::before{background:var(--forest)}
.banner.warn{background:var(--butter);color:var(--warn-ink)}.banner.warn::before{background:var(--warn-ink)}
.banner.err{background:var(--danger-soft);color:var(--danger-ink)}.banner.err::before{background:var(--danger)}

/* ---------- AVATAR ---------- */
.avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:var(--fw-bold);color:#fff;font-size:1rem;border:2px solid var(--surface-card);box-shadow:var(--shadow-xs);background:var(--grad-primary);transition: transform var(--dur-control) var(--ease-spring),box-shadow var(--dur-control) var(--ease-standard)}
.avatar-stack{display:flex}
.avatar-stack .avatar{margin-left:-12px;position:relative;transition: transform var(--dur-control) var(--ease-spring),margin-left var(--dur-control) var(--ease-standard),box-shadow var(--dur-control) var(--ease-standard)}
.avatar-stack .avatar:first-child{margin-left:0}
/* the stack fans out on hover; the hovered face lifts above its peers */
.avatar-stack:hover .avatar{margin-left:-5px}
.avatar-stack:hover .avatar:first-child{margin-left:0}
.avatar-stack .avatar:hover{transform:translateY(-4px) scale(1.07);z-index:2;box-shadow:var(--shadow-sm)}

/* ---------- STEPPER ---------- */
.stepper{display:flex;align-items:center;gap:0}
.step{display:flex;align-items:center;gap:.6rem}
.step .num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:var(--fw-bold);font-size:.9rem;flex:none;border:1.5px solid var(--line);color:var(--ink-faint);transition: background var(--dur-control) var(--ease-standard),color var(--dur-control),border-color var(--dur-control),box-shadow var(--dur-control),transform var(--dur-control) var(--ease-spring)}
.step.done .num{background:var(--forest);color:#fff;border-color:var(--forest)}
.step.active .num{background:var(--mint);color:var(--forest-900);border-color:var(--mint);box-shadow:0 0 0 4px var(--mint-100);animation: vd-pulse-ring var(--dur-reveal) var(--ease-standard) .3s 2}
.step:hover .num{transform:scale(1.08)}
.step-label{font-size:.88rem;font-weight:var(--fw-semibold);color:var(--ink-faint);transition: color var(--dur-control)}
.step.done .step-label,.step.active .step-label{color:var(--text-strong)}
.step-bar{height:2px;flex:1;background:var(--line);min-width:24px;margin:0 12px}
.step-bar.fill{background:var(--forest);transform-origin:left;animation: vd-grow-x var(--dur-entrance) var(--ease-standard) both}

/* ---------- DATA TABLE ---------- */
.table-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-card);box-shadow:var(--shadow-sm)}
.table-scroll{overflow-x:auto;overscroll-behavior-x:contain}
/* A table dropped straight into .table-wrap (no .table-scroll) would have its
   540px min-width clipped by the radius mask on narrow screens — data becomes
   unreachable. Make the wrap itself scroll so it is impossible to get wrong. */
.table-wrap:has(>table.table){overflow-x:auto;overscroll-behavior-x:contain}
table.table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:540px}
.table thead th{font-family:var(--f-caps);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.13em;color:var(--ink-faint);font-weight:var(--fw-semibold);text-align:left;padding:15px 18px;background:var(--mint-50);border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:2}
.table tbody td{padding:14px 18px;border-bottom:1px solid var(--line-soft);color:var(--ink);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr{transition: background var(--dur-hover),box-shadow var(--dur-control) var(--ease-standard)}
.table tbody tr:hover{background:var(--mint-50);box-shadow:inset 3px 0 0 var(--mint)}
.table .num,.table .th-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-strong)}
.table thead th.th-num{color:var(--ink-faint)}
.table .who{display:flex;align-items:center;gap:10px;font-weight:var(--fw-semibold);color:var(--text-strong);white-space:nowrap}
.table .who .avatar{width:30px;height:30px;font-size:var(--fs-micro);margin:0;flex:none}
.table .table-empty{text-align:center;padding:40px 18px;color:var(--ink-faint);font-size:.92rem;font-weight:var(--fw-medium)}

/* ---------- PAGINATION ---------- */
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pg{min-width:38px;height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface-card);font-weight:var(--fw-semibold);font-size:.9rem;color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;transition: var(--dur-fast)}
.pg:hover{border-color:var(--mint);color:var(--forest);background:var(--mint-50)}
.pg.active{background:var(--grad-primary);color:#fff;border-color:transparent;box-shadow:var(--shadow-sm);animation: vd-pop-in var(--dur-control) var(--ease-spring)}
.pg svg{width:16px;height:16px}
.pg-dots{color:var(--ink-faint);padding:0 4px;user-select:none}

/* ---------- MODAL / SCRIM ---------- */
.scrim{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:var(--s-5);
  background:rgba(6,58,40,.36);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;pointer-events:none;transition: opacity var(--dur-control) var(--ease-standard),visibility 0s linear var(--dur-control)}
.scrim.open{opacity:1;visibility:visible;pointer-events:auto;transition: opacity var(--dur-control) var(--ease-standard),visibility 0s}
.modal-card{width:100%;max-width:480px;background:var(--surface-card);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);border:1px solid var(--line);overflow:hidden;transform:translateY(18px) scale(.96);opacity:0;transition: var(--dur-overlay) var(--ease-spring)}
.scrim.open .modal-card{transform:none;opacity:1}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);padding:26px 26px 0}
.modal-head h3{font-size:1.3rem;font-weight:var(--fw-extrabold);color:var(--text-strong);letter-spacing:-.02em}
.modal-x{flex:none;width:34px;height:34px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface-card);display:grid;place-items:center;cursor:pointer;color:var(--ink-soft);transition: var(--dur-control) var(--ease-standard)}
.modal-x:hover{background:var(--mint-100);color:var(--forest);transform:rotate(90deg)}
.modal-x svg{width:16px;height:16px}
.modal-body{padding:14px 26px 4px;color:var(--ink-soft);font-size:.96rem;line-height:1.6}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:22px 26px 26px}
.modal-ico{width:54px;height:54px;border-radius:var(--r);display:grid;place-items:center;margin:26px 26px -4px}
.modal-ico svg{width:26px;height:26px}
.scrim.open .modal-ico{animation: vd-pop-in var(--dur-overlay) var(--ease-spring) .16s both}

/* ---------- EMPTY STATE ---------- */
.empty{text-align:center;padding:46px 24px}
.empty-ico{width:78px;height:78px;border-radius:var(--r-lg);margin:0 auto 20px;display:grid;place-items:center;background:var(--grad-soft);border:1px solid var(--line-mint);color:var(--forest);animation: vd-pop-in var(--dur-entrance) var(--ease-spring) both;transition: transform var(--dur-entrance) var(--ease-spring)}
.empty:hover .empty-ico{transform:scale(1.06) rotate(-4deg)}
.empty-ico svg{width:36px;height:36px}
.empty h3{font-size:1.25rem;font-weight:var(--fw-extrabold);color:var(--text-strong);margin-bottom:var(--s-2)}
.empty p{color:var(--ink-soft);font-size:.95rem;max-width:34ch;margin:0 auto 22px}

/* ---------- TOAST ---------- */
.toast-wrap{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:10001;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{display:inline-flex;align-items:center;gap:.7em;white-space:nowrap;background:var(--surface-inverse);color:var(--text-on-inverse);padding:.8em 1.3em;border-radius:var(--r-pill);font-size:.9rem;font-weight:var(--fw-semibold);box-shadow:var(--shadow-lg);transition: var(--dur-overlay) var(--ease-spring)}
.toast-wrap .toast{transform:translateY(20px) scale(.9);opacity:0;pointer-events:auto}
.toast-wrap .toast.show{transform:none;opacity:1}
.toast.show .tc{animation: vd-pop-in var(--dur-overlay) var(--ease-spring) .1s both}
.toast code{font-family:var(--f-code);background:rgba(255,255,255,.16);padding:2px 7px;border-radius:6px;font-size:.82rem}
.toast .tc{width:20px;height:20px;border-radius:50%;background:var(--mint);color:var(--forest-900);display:grid;place-items:center}
.toast .tc svg{width:13px;height:13px}
.toast.ok .tc{background:var(--mint);color:var(--forest-900)}
.toast.info .tc{background:var(--sky);color:var(--info-ink)}
.toast.warn .tc{background:var(--butter);color:var(--warn-ink)}
.toast.err .tc{background:#ff9b9b;color:#7a1418}

/* ---------- TOOLTIP ---------- */
.tip{position:relative;border-bottom:2px dotted var(--forest-300);cursor:help;font-weight:var(--fw-semibold);color:var(--forest)}
.tip::after{content:attr(data-tip);position:absolute;bottom:140%;left:50%;transform:translateX(-50%) translateY(6px);background:var(--surface-inverse);color:var(--text-on-inverse);padding:.5em .8em;border-radius:8px;font-size:.78rem;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition: var(--dur-control) var(--ease-spring);box-shadow:var(--shadow-md)}
.tip:hover::after,.tip:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- DROPDOWN / POPOVER MENU ---------- */
.menu-wrap{position:relative;display:inline-block}
/* Fallback trigger for a non-element `trigger` prop. Chrome-free on purpose —
   it must render exactly like the bare span it replaced, while being a real,
   focusable, announced button. */
.menu-trigger{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.5em}
.menu-trigger:hover{color:var(--forest)}
.menu-trigger:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:var(--r-sm)}
.menu-trigger-slot{display:inline-flex}
.menu{position:absolute;top:calc(100% + 10px);left:0;min-width:236px;background:var(--surface-card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-lg);padding:var(--s-2);z-index:50;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top left;pointer-events:none;transition: opacity var(--dur-control) var(--ease-spring),transform var(--dur-control) var(--ease-spring),visibility 0s linear var(--dur-control)}
.menu.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition: opacity var(--dur-control) var(--ease-spring),transform var(--dur-control) var(--ease-spring),visibility 0s}
.menu-label{font-family:var(--f-caps);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint);padding:8px 12px 4px}
.menu-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 12px;border-radius:10px;
  font-size:.92rem;font-weight:var(--fw-medium);color:var(--ink);background:none;border:none;cursor:pointer;transition: background var(--dur-hover),color var(--dur-hover),transform var(--dur-hover) var(--ease-standard)}
.menu-item svg{width:17px;height:17px;color:var(--forest-400);flex:none;transition: transform var(--dur-control) var(--ease-spring)}
.menu-item:hover{background:var(--mint-100);color:var(--text-strong);transform:translateX(2px)}
.menu-item:hover svg{color:var(--forest);transform:scale(1.1)}
/* items cascade in as the menu opens */
.menu.open .menu-item{animation: vd-menu-in var(--dur-control) var(--ease-standard) both}
.menu.open .menu-item:nth-child(2){animation-delay:.02s}
.menu.open .menu-item:nth-child(3){animation-delay:.05s}
.menu.open .menu-item:nth-child(4){animation-delay:.08s}
.menu.open .menu-item:nth-child(5){animation-delay:.11s}
.menu.open .menu-item:nth-child(6){animation-delay:.14s}
.menu.open .menu-item:nth-child(n+7){animation-delay:.17s}
.menu-item .km{margin-left:auto;font-family:var(--f-code);font-size:.7rem;color:var(--ink-faint)}
.menu-item.danger{color:var(--danger-ink)}
.menu-item.danger svg{color:var(--danger)}
.menu-item.danger:hover{background:var(--danger-soft)}
.menu-sep{height:1px;background:var(--line-soft);margin:6px 4px}

/* ---------- POPUP / POPOVER (general-purpose, click or hover) ---------- */
.v-popup-wrap{position:relative;display:inline-block}
.v-popup-trigger{display:inline-flex}
.v-popup{position:absolute;z-index:65;width:max-content;min-width:200px;max-width:min(340px,92vw);background:var(--surface-card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);transform-origin:top center;pointer-events:none;transition: opacity var(--dur-control) var(--ease-spring),transform var(--dur-control) var(--ease-spring),visibility 0s linear var(--dur-control)}
.v-popup.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition: opacity var(--dur-control) var(--ease-spring),transform var(--dur-control) var(--ease-spring),visibility 0s}
.v-popup.place-bottom{top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px) scale(.97)}
.v-popup.place-bottom.open{transform:translateX(-50%)}
.v-popup.place-top{bottom:calc(100% + 12px);left:50%;transform-origin:bottom center;transform:translateX(-50%) translateY(6px) scale(.97)}
.v-popup.place-top.open{transform:translateX(-50%)}
.v-popup.place-right{top:50%;left:calc(100% + 12px);transform-origin:left center;transform:translateY(-50%) translateX(-6px) scale(.97)}
.v-popup.place-right.open{transform:translateY(-50%)}
.v-popup.place-left{top:50%;right:calc(100% + 12px);transform-origin:right center;transform:translateY(-50%) translateX(6px) scale(.97)}
.v-popup.place-left.open{transform:translateY(-50%)}
/* hover-bridge so the cursor can travel trigger→panel without closing */
.v-popup.hoverable::before{content:"";position:absolute;left:0;right:0;height:14px}
.v-popup.hoverable.place-bottom::before{top:-14px}
.v-popup.hoverable.place-top::before{bottom:-14px}
.v-popup-arrow{position:absolute;width:12px;height:12px;background:var(--surface-card);border:1px solid var(--line);transform:rotate(45deg)}
.v-popup.place-bottom .v-popup-arrow{top:-7px;left:50%;margin-left:-6px;border-right:none;border-bottom:none}
.v-popup.place-top .v-popup-arrow{bottom:-7px;left:50%;margin-left:-6px;border-left:none;border-top:none}
.v-popup.place-right .v-popup-arrow{left:-7px;top:50%;margin-top:-6px;border-right:none;border-top:none}
.v-popup.place-left .v-popup-arrow{right:-7px;top:50%;margin-top:-6px;border-left:none;border-bottom:none}
.v-popup-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 0}
.v-popup-title{font-weight:var(--fw-bold);color:var(--text-strong);font-size:.96rem;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.v-popup-title .v-icon{width:17px;height:17px;color:var(--forest)}
.v-popup-x{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface-card);display:grid;place-items:center;cursor:pointer;color:var(--ink-soft);transition: var(--dur-hover) var(--ease-standard)}
.v-popup-x:hover{background:var(--mint-100);color:var(--forest)}
.v-popup-x:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.v-popup-x .v-icon{width:15px;height:15px}
.v-popup-body{padding:12px 16px;font-size:.92rem;line-height:1.55;color:var(--text-body)}
.v-popup-body > * + *{margin-top:10px}
.v-popup-foot{display:flex;gap:8px;justify-content:flex-end;padding:0 16px 14px}
/* action-list variant (popup menu) */
.v-popup-list{padding:6px}
.v-popup-list .v-popup-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:9px 12px;border-radius:10px;font:inherit;font-size:.92rem;font-weight:var(--fw-medium);color:var(--ink);transition: background var(--dur-hover)}
.v-popup-list .v-popup-item:hover{background:var(--mint-100);color:var(--text-strong)}
.v-popup-list .v-popup-item.danger{color:var(--danger-ink)}
.v-popup-list .v-popup-item.danger:hover{background:var(--danger-soft)}
.v-popup-list .v-popup-item .v-icon{width:17px;height:17px;color:var(--forest-400);flex:none}
.v-popup-list .v-popup-item.danger .v-icon{color:var(--danger)}

@media (prefers-reduced-motion: reduce){ .v-popup{transition: none!important} }

/* ---------- COMMAND PALETTE ---------- */
.cmdk-card{width:100%;max-width:560px;background:var(--surface-card);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);border:1px solid var(--line);overflow:hidden;transform:translateY(-12px) scale(.97);opacity:0;transition: var(--dur-control) var(--ease-spring);align-self:flex-start;margin-top:12vh}
.scrim.open .cmdk-card{transform:none;opacity:1}
.cmdk-input-row{display:flex;align-items:center;gap:var(--s-3);padding:18px 20px;border-bottom:1px solid var(--line-soft)}
.cmdk-input-row svg{width:20px;height:20px;color:var(--forest);flex:none}
/* a bare 21px-tall field is under the 24px pointer target floor even though the
   row around it looks generous — the input is what receives the tap. */
.cmdk-input{flex:1;min-height:26px;border:none;outline:none;font-size:1.05rem;font-family:var(--f-body);color:var(--ink);background:none}
/* the palette itself is the focus context — no ring on its bare input */
.cmdk-input:focus-visible{outline:none;box-shadow:none}
.cmdk-input::placeholder{color:var(--ink-faint)}
.cmdk-esc{font-family:var(--f-code);font-size:var(--fs-micro);color:var(--ink-faint);border:1px solid var(--line);border-radius:6px;padding:3px 7px;flex:none}
.cmdk-list{max-height:340px;overflow-y:auto;padding:var(--s-2)}
.cmdk-item{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:var(--r-sm);cursor:pointer;color:var(--ink)}
.cmdk-item .ci-ico{width:32px;height:32px;border-radius:9px;background:var(--grad-soft);border:1px solid var(--line-mint);display:grid;place-items:center;color:var(--forest);flex:none}
.cmdk-item .ci-ico svg{width:16px;height:16px}
.cmdk-item .ci-name{font-weight:var(--fw-semibold)}
.cmdk-item .ci-cat{margin-left:auto;font-family:var(--f-caps);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint)}
.cmdk-item.sel,.cmdk-item:hover{background:var(--mint-100)}
.cmdk-item.sel .ci-name{color:var(--text-strong)}
.cmdk-empty{padding:30px;text-align:center;color:var(--ink-faint);font-size:.92rem}

/* ---------- DRAWER ---------- */
.drawer{position:fixed;top:0;right:0;height:100%;width:min(430px,92vw);background:var(--surface-card);box-shadow:var(--shadow-lg);
  border-left:1px solid var(--line);transform:translateX(100%);transition: transform var(--dur-overlay) var(--ease-spring);
  display:flex;flex-direction:column}
.scrim.drawer-scrim{justify-content:flex-end;align-items:stretch;padding:0}
.scrim.drawer-scrim.open .drawer{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s-5);border-bottom:1px solid var(--line-soft)}
.drawer-head h3{font-size:1.2rem;font-weight:var(--fw-extrabold);color:var(--text-strong)}
.drawer-body{padding:var(--s-5);overflow-y:auto;flex:1;color:var(--ink-soft);font-size:.95rem;line-height:1.65}
.drawer-foot{padding:20px 24px;border-top:1px solid var(--line-soft)}

/* ---------- BREADCRUMBS ---------- */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:.88rem}
.crumbs a{color:var(--ink-soft);font-weight:var(--fw-medium);padding:4px 9px;border-radius:var(--r-pill);transition: var(--dur-fast);display:inline-flex;align-items:center;gap:6px}
.crumbs a:hover{color:var(--forest);background:var(--mint-100)}
.crumbs a svg{width:15px;height:15px}
.crumbs .sep{color:var(--ink-faint);display:flex}
.crumbs .sep svg{width:15px;height:15px}
.crumbs .cur{color:var(--text-strong);font-weight:var(--fw-bold);padding:4px 9px}

/* ---------- SPINNER ---------- */
.spinner{display:inline-block;border-radius:50%;border:2.5px solid var(--mint-200);border-top-color:var(--forest);animation: vd-spin .7s linear infinite;vertical-align:middle}
.spinner.on-dark{border-color:rgba(255,255,255,.3);border-top-color:#fff}
@keyframes vd-spin{to{transform:rotate(360deg)}}

/* ---------- shared micro-interaction keyframes ---------- */
@keyframes vd-pop-in{from{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
@keyframes vd-rise-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes vd-grow-x{from{transform:scaleX(0)}}
@keyframes vd-grow-y{from{transform:scaleY(0)}}
@keyframes vd-menu-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes vd-shake{0%,100%{transform:none}22%{transform:translateX(-5px)}44%{transform:translateX(4px)}66%{transform:translateX(-3px)}84%{transform:translateX(2px)}}
@keyframes vd-pulse-ring{0%{box-shadow:0 0 0 4px var(--mint-100)}45%{box-shadow:0 0 0 9px rgba(var(--mint-rgb),.22)}100%{box-shadow:0 0 0 4px var(--mint-100)}}
@keyframes vd-dot-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@media (prefers-reduced-motion: reduce){.spinner{animation-duration:1.4s}}

/* ---------- SKELETON / SHIMMER ---------- */
.skeleton{position:relative;overflow:hidden;background:var(--mist);border-radius:8px}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--shimmer),transparent);animation: vd-shimmer 1.5s infinite}
.sk-line{height:13px;border-radius:6px;margin-bottom:11px}
.sk-line.short{width:60%}
.sk-circle{width:46px;height:46px;border-radius:50%;flex:none}
.sk-row{display:flex;align-items:center;gap:14px;margin-bottom:20px}
@keyframes vd-shimmer{100%{transform:translateX(100%)}}

/* ---------- KBD ---------- */
.kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:7px;background:var(--surface-card);
  border:1px solid var(--line);border-bottom-width:2px;box-shadow:var(--shadow-xs);
  font-family:var(--f-code);font-size:.74rem;font-weight:var(--fw-semibold);color:var(--text-strong);
  transition: transform var(--dur-hover) var(--ease-standard),border-bottom-width var(--dur-hover),background var(--dur-hover)}
.kbd:active{transform:translateY(1px);border-bottom-width:1px;background:var(--mint-50)}

/* ---------- CHARTS ---------- */
.chart-card{display:flex;flex-direction:column}
.chart-card .ch-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:16px}
.chart-card .ch-title{font-family:var(--f-display);font-weight:var(--fw-bold);font-size:1.06rem;color:var(--text-strong);letter-spacing:-.01em}
.chart-card .ch-val{font-family:var(--f-display);font-weight:var(--fw-extrabold);font-size:1.4rem;color:var(--forest)}
.chart-wrap{display:flex;align-items:center;justify-content:center;flex:1;min-height:196px}
.chart-legend{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.lg-row{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--ink-soft)}
.lg-dot{width:10px;height:10px;border-radius:3px;flex:none}
.lg-val{margin-left:auto;font-family:var(--f-code);font-variant-numeric:tabular-nums;color:var(--text-strong);font-weight:var(--fw-semibold)}
.radar-poly{transform-box:fill-box;transform-origin:center}
.radar-lbl{font-family:var(--f-caps);font-size:13px;letter-spacing:.05em;fill:var(--ink-soft);font-weight:600}
.radar-tick{font-family:var(--f-code);font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.03em;fill:var(--ink-faint)}
/* Charts render at their final state with no mount animation — so they are
   correct in every context (live, print/PDF, screenshot, reduced-motion). */
.arc{stroke-dasharray:var(--c);stroke-dashoffset:calc(var(--c) * (1 - var(--pct)))}
.ring-num{font-family:var(--f-display);font-weight:var(--fw-extrabold);fill:var(--text-strong)}
.use{font-size:.85rem;color:var(--ink-soft);border-top:1px solid var(--line-soft);padding-top:14px;margin-top:16px}
.use b{color:var(--text-strong)}

@media (prefers-reduced-motion: reduce){
  .scrim,.modal-card,.drawer,.menu,.toast,.modal-x,.pg,.crumbs a,.menu-item,.cmdk-card,.acc-body,.acc-body-inner{transition: none!important}
  .modal-card,.drawer,.menu,.cmdk-card{transform:none!important}
  .skeleton::after{animation: none}
  .alert,.alert .ai,.banner,.banner::before,.banner .bi,.step .num,.step-bar.fill,.empty-ico,.modal-ico,
  .toast .tc,.menu.open .menu-item,.pg.active,.pill .dot,.tab-panel-in{animation: none!important}
  .tab-thumb,.avatar,.avatar-stack .avatar,.table tbody tr,.pill,.kbd,.step .num{transition: none!important}
  .progress.is-live .bar::after{animation: none!important;display:none}
}

/* ---------- NOTIFICATION CENTER ---------- */
.v-nc{position:relative;display:inline-block}
.v-nc-bell{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-card);color:var(--ink-soft);cursor:pointer;transition: border-color var(--dur-hover) var(--ease-standard),color var(--dur-hover) var(--ease-standard),box-shadow var(--dur-hover) var(--ease-standard)}
.v-nc-bell:hover{border-color:var(--line-mint);color:var(--forest);box-shadow:var(--shadow-xs)}
.v-nc-bell:focus-visible{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px var(--focus-ring)}
.v-nc-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-pill);background:var(--forest);color:var(--on-brand);font-variant-numeric:tabular-nums;font-family:var(--f-caps);font-size:var(--fs-micro);font-weight:700;display:grid;place-items:center;border:2px solid var(--surface-card)}
.v-nc-panel{position:absolute;z-index:30;top:calc(100% + 10px);right:0;width:340px;background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-md);overflow:hidden;animation: v-dp-pop var(--dur-overlay) var(--ease-spring) both;transform-origin:top right}
.v-nc-panel.left{right:auto;left:0;transform-origin:top left}
.v-nc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.v-nc-title{font-weight:var(--fw-semibold);font-size:.95rem;color:var(--text-strong)}
.v-nc-mark{font:inherit;font-size:.76rem;font-weight:600;color:var(--forest);background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:8px;transition: background var(--dur-hover) var(--ease-standard)}
.v-nc-mark:hover{background:var(--mint-100)}
.v-nc-mark:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.v-nc-list{max-height:340px;overflow-y:auto}
.v-nc-item{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;font:inherit;background:none;border:none;border-bottom:1px solid var(--line-soft);padding:13px 18px;cursor:pointer;transition: background var(--dur-hover) var(--ease-standard)}
.v-nc-item:last-child{border-bottom:none}
.v-nc-item:hover{background:var(--mint-50)}
.v-nc-item:focus-visible{outline:2px solid var(--forest);outline-offset:-2px}
.v-nc-ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--mint-100);color:var(--forest)}
.v-nc-ico .v-icon{width:15px;height:15px}
.v-nc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.v-nc-item-title{font-size:.86rem;font-weight:var(--fw-semibold);color:var(--text-strong);line-height:1.35}
.v-nc-item-body{font-size:.8rem;color:var(--ink-soft);line-height:1.45}
.v-nc-time{font-family:var(--f-caps);font-variant-numeric:tabular-nums;font-size:var(--fs-micro);letter-spacing:.04em;color:var(--ink-faint);margin-top:3px}
.v-nc-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--forest);margin-top:6px}
.v-nc-item.unread .v-nc-item-title{color:var(--text-strong)}
.v-nc-empty{padding:28px 18px;text-align:center;font-size:.86rem;color:var(--ink-faint)}

/* ---------- ANNOUNCEMENT BAR ---------- */
.v-announce{display:flex;align-items:center;gap:12px;padding:9px 16px;font-size:.86rem;line-height:1.4}
.v-announce.tone-forest{background:var(--forest);color:#fff}
.v-announce.tone-mint{background:var(--mint-100);color:var(--forest-900);border-bottom:1px solid var(--line-mint)}
.v-announce.tone-dark{background:#0B1712;color:#fff}
.v-announce-ico{flex:none;display:grid;place-items:center}
.v-announce.tone-forest .v-announce-ico,.v-announce.tone-dark .v-announce-ico{color:var(--mint)}
.v-announce.tone-mint .v-announce-ico{color:var(--forest)}
.v-announce-text{flex:1;min-width:0}
.v-announce-text strong{font-weight:700}
.v-announce-cta{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:24px;font-weight:700;font-size:.8rem;text-decoration:none;border-radius:var(--r-pill);padding:5px 14px;white-space:nowrap;transition: transform var(--dur-hover) var(--ease-standard),background var(--dur-hover) var(--ease-standard)}
.v-announce.tone-forest .v-announce-cta{background:var(--mint);color:var(--forest-900)}
.v-announce.tone-dark .v-announce-cta{background:var(--mint);color:var(--forest-900)}
.v-announce.tone-mint .v-announce-cta{background:var(--forest);color:var(--on-brand)}
.v-announce-cta:hover{transform:translateY(-1px)}
.v-announce-cta:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.v-announce-x{flex:none;display:grid;place-items:center;width:26px;height:26px;border:none;border-radius:8px;background:transparent;color:inherit;opacity:.7;cursor:pointer;transition: opacity var(--dur-hover) var(--ease-standard),background var(--dur-hover) var(--ease-standard)}
.v-announce-x:hover{opacity:1;background:rgba(255,255,255,.14)}
.v-announce.tone-mint .v-announce-x:hover{background:rgba(6,58,40,.08)}
.v-announce-x:focus-visible{outline:2px solid currentColor;outline-offset:2px;opacity:1}

/* ---------- COPY FIELD ---------- */
.v-copy{display:flex;flex-direction:column;gap:6px;max-width:100%}
.v-copy-label{font-size:.8rem;font-weight:var(--fw-semibold);color:var(--ink-soft)}
.v-copy-row{display:flex;align-items:stretch;gap:0;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--mint-50);overflow:hidden;transition: border-color var(--dur-hover) var(--ease-standard)}
.v-copy-row:hover{border-color:var(--line-mint)}
.v-copy-val{flex:1;min-width:0;padding:10px 14px;font-size:.86rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:center}
.v-copy-val.mono{font-size:.78rem;letter-spacing:.02em}
.v-copy-btn{flex:none;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:.78rem;font-weight:700;color:var(--forest);background:var(--surface-card);border:none;border-left:1.5px solid var(--line);padding:0 14px;cursor:pointer;transition: background var(--dur-hover) var(--ease-standard),color var(--dur-hover) var(--ease-standard)}
.v-copy-btn:hover{background:var(--mint-100)}
.v-copy-btn:focus-visible{outline:2px solid var(--forest);outline-offset:-2px}
.v-copy-btn.ok{color:#fff;background:var(--forest)}

/* ---------- AVATAR GROUP ---------- */
.v-avgroup{display:inline-flex;align-items:center}
.v-avg-item{position:relative;display:grid;place-items:center;border-radius:50%;background:var(--mint-100);color:var(--forest-700);font-weight:700;box-shadow:0 0 0 2.5px var(--surface-card);overflow:hidden;transition: transform var(--dur-hover) var(--ease-spring)}
.v-avg-item+.v-avg-item{margin-left:-9px}
.v-avg-item:hover{transform:translateY(-2px);z-index:40!important}
.v-avg-item img{width:100%;height:100%;object-fit:cover;display:block}
.v-avg-more{background:var(--forest);color:var(--on-brand);font-family:var(--f-caps);font-weight:700}

/* ---------- MEDIA PLAYERS ---------- */
.v-vp{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:linear-gradient(150deg,#063a28 0%,#0F6844 80%);box-shadow:var(--shadow-sm);color:#fff}
.v-vp-poster{position:absolute;inset:0;display:grid;place-items:center}
.v-vp-poster img{width:100%;height:100%;object-fit:cover;display:block}
.v-vp-brand{opacity:.6}
.v-vp-bigplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:none;background:rgba(233,248,241,.94);color:var(--forest-900);cursor:pointer;box-shadow:var(--shadow-md);transition: transform var(--dur-hover) var(--ease-spring),background var(--dur-hover) var(--ease-standard)}
.v-vp-bigplay:hover{transform:translate(-50%,-50%) scale(1.07);background:#fff}
.v-vp-bigplay:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.v-vp-bigplay svg{margin-left:3px}
.v-vp-scrim{position:absolute;left:0;right:0;bottom:0;height:84px;background:linear-gradient(180deg,transparent,rgba(6,26,18,.78));pointer-events:none}
.v-vp-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:10px 14px}
.v-vp-btn{flex:none;display:grid;place-items:center;width:32px;height:32px;border:none;border-radius:9px;background:transparent;color:#fff;cursor:pointer;transition: background var(--dur-hover) var(--ease-standard)}
.v-vp-btn:hover{background:rgba(255,255,255,.16)}
.v-vp-btn:focus-visible{outline:2px solid var(--mint);outline-offset:1px}
.v-vp-time{font-family:var(--f-code);font-variant-numeric:tabular-nums;font-size:var(--fs-micro);letter-spacing:.04em;color:rgba(255,255,255,.85);white-space:nowrap}
.v-vp-track{position:relative;flex:1;height:5px;border-radius:var(--r-pill);background:rgba(255,255,255,.28);cursor:pointer;touch-action:none}
/* the rail is 5px by design; the SEEK target is 24px — an invisible band centred
   on it, so a thumb finds the scrubber without thickening the chrome. */
.v-vp-track::before{content:'';position:absolute;left:0;right:0;top:50%;height:24px;transform:translateY(-50%)}
.v-vp-track:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.v-vp-track:hover{transform:scaleY(1.4)}
.v-vp-track{transition: transform var(--dur-hover) var(--ease-standard)}
.v-vp-fill{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-pill);background:var(--mint);transition: width var(--dur-press) linear}
.v-vp-fill::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:var(--shadow-xs)}
.v-vp-chap{position:absolute;top:50%;transform:translate(-50%,-50%);width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.85)}
.v-vp-title{position:absolute;left:14px;top:12px;right:14px;font-size:.88rem;font-weight:var(--fw-semibold);color:#fff;text-shadow:0 1px 8px rgba(6,26,18,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-ap{display:flex;align-items:center;gap:14px;background:var(--surface-card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-xs);padding:12px 16px}
.v-ap-play{flex:none;display:grid;place-items:center;width:42px;height:42px;border:none;border-radius:50%;background:var(--forest);color:#fff;cursor:pointer;box-shadow:var(--shadow-mint);transition: transform var(--dur-press) var(--ease-spring),background var(--dur-hover) var(--ease-standard)}
.v-ap-play:hover{background:var(--forest-700)}
.v-ap-play:active{transform:scale(.93)}
.v-ap-play:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.v-ap-play svg{margin-left:1px}
.v-ap-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.v-ap-meta{display:flex;align-items:baseline;gap:10px;min-width:0}
.v-ap-title{font-size:.86rem;font-weight:var(--fw-semibold);color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-ap-sub{font-family:var(--f-caps);font-size:var(--fs-micro);letter-spacing:.06em;color:var(--ink-faint);white-space:nowrap}
.v-ap-wave{display:flex;align-items:center;gap:2px;height:26px;cursor:pointer}
.v-ap-wave:hover .v-ap-bar:not(.on){background:var(--mint-300)}
.v-ap-wave:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:6px}
.v-ap-bar{flex:1;min-width:2px;border-radius:var(--r-pill);background:var(--mint-200);transition: background var(--dur-hover) var(--ease-standard)}
.v-ap-bar.on{background:var(--forest)}
.v-ap-bar.live{animation: v-ap-pulse 1s var(--ease-standard) infinite alternate}
@keyframes v-ap-pulse{from{transform:scaleY(.75)}to{transform:scaleY(1.18)}}
.v-ap-time{flex:none;font-family:var(--f-code);font-variant-numeric:tabular-nums;font-size:var(--fs-micro);letter-spacing:.04em;color:var(--ink-faint);white-space:nowrap}
@media (prefers-reduced-motion: reduce){
  .v-nc-panel{animation: none}
  .v-announce-cta:hover,.v-avg-item:hover{transform:none}
  .v-ap-bar.live{animation: none}
  .v-vp-bigplay:hover{transform:translate(-50%,-50%)}
}

/* ---------- RATING ---------- */
.v-rating{display:inline-flex;align-items:center;gap:3px;color:var(--forest)}
.v-rating-star{display:inline-grid;place-items:center;padding:0;border:none;background:none;color:inherit;line-height:0}
.v-rating.interactive .v-rating-star{cursor:pointer;transition: transform var(--dur-press) var(--ease-spring)}
.v-rating.interactive .v-rating-star:hover{transform:scale(1.18)}
.v-rating.interactive .v-rating-star:focus-visible{outline:2px solid var(--forest);outline-offset:2px;border-radius:6px}
.v-rating-label{margin-left:7px;font-size:.82rem;color:var(--ink-soft);white-space:nowrap}

/* ---------- KBD SHORTCUT ---------- */
.v-kbd{display:inline-flex;align-items:center;gap:3px;vertical-align:baseline}
.v-kbd kbd{font-family:var(--f-code);font-size:max(var(--fs-micro),.68em);font-weight:600;letter-spacing:.02em;color:var(--forest-700);background:var(--mint-50);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:2px 7px;min-width:1.5em;text-align:center;line-height:1.4}
@media (prefers-reduced-motion: reduce){.v-rating.interactive .v-rating-star:hover{transform:none}}

/* ============================================================
   PRESS STATES
   Hover is not feedback on a touch screen: every interactive surface
   in this sheet answers a press. One vocabulary, per the readme —
   small controls sink, lifted cards press back THROUGH their lift,
   data cells dip in place. All instant (transition:none), so the
   response lands on touch-down instead of easing in after it.
   Declared last so they win over the hover rules above.
   ============================================================ */
.card-hover:active,.card.is-interactive:active{transform:translateY(-2px) scale(.995);transition:none}
.tab-btn:active{transform:scale(.96);transition:none}
.acc-head:active{transform:scale(.995);transition:none}
.pg:active{transform:translateY(1px) scale(.95);transition:none}
.menu-item:active{transform:translateX(2px) scale(.98);transition:none}
.menu-item:active svg{transform:scale(1.04);transition:none}
.cmdk-item:active{transform:scale(.99);transition:none}
.step:active .num{transform:scale(.94);transition:none}
.check:active .box,.radio:active .box{transform:scale(.9);transition:none}
.v-popup-item:active{transform:scale(.98);transition:none}
.v-nc-bell:active{transform:translateY(1px) scale(.94);transition:none}
.modal-x:active{transform:rotate(90deg) scale(.88);transition:none}
.v-popup-x:active{transform:scale(.88);transition:none}
.v-nc-mark:active{transform:scale(.94);transition:none}
.v-nc-item:active{background:var(--mint-100)}
.v-vp-btn:active{transform:scale(.9);transition:none}
.v-ap-play:active{transform:scale(.92);transition:none}
.v-copy-btn:active{transform:scale(.96);transition:none}
.v-announce-cta:active{transform:translateY(0) scale(.96);transition:none}
.v-announce-x:active{transform:scale(.9);transition:none}
.v-vp-bigplay:active{transform:translate(-50%,-50%) scale(.95);transition:none}
.v-avg-item:active{transform:translateY(-1px) scale(.96);transition:none}
.avatar-stack .avatar:active{transform:translateY(-2px) scale(1.02);transition:none}
.v-rating-star:active{transform:scale(.88);transition:none}
/* release: press is instant, the return eases. These base rules only animated
   colour (or nothing), so the transform snapped back on release. */
.tab-btn,.acc-head,.v-nc-bell,.v-copy-btn,.v-announce-x{transition-property:color,background,background-color,border-color,box-shadow,opacity,transform}
.cmdk-item,.v-popup-item,.v-rating-star{transition:transform var(--dur-hover) var(--ease-standard),background var(--dur-hover) var(--ease-standard),color var(--dur-hover) var(--ease-standard)}