/* The Vitals — shared components (components/*.js): ruled sections, value-first figures and rows (D46), the ⓘ
   tooltip (D39), the years multi-select (D40), the range control (§4.2), Readiness (§3.0), sheets, toasts, the
   life-event sheet and suggestion cards (§6.3), cards (only for things Mike acts on), tables and skeletons.
   Colours only through tokens. Phone sizing follows the Desk breakpoint (max-width:900px) and coarse pointers. */

/* ---- Sections: 2px ink rule + .section-title, hairlines inside (spec P8) ---------- */
.v-section{margin:0 0 16px;min-width:0}
.v-section-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;border-top:2px solid var(--desk-ink);padding:6px 0 4px}
/* Contract-role variants inside Vitals blocks: :is(#app, #v-layer) outranks editorial.css's body.desk-connected rules. */
:is(#app,#v-layer) .v-section-head .section-title{margin:0;flex:1 1 auto;min-width:0}
:is(#app,#v-layer) .v-section-head .section-title.small{font-size:18px;letter-spacing:-.3px}
.v-section-meta{font:500 12px/1.5 var(--desk-mono);color:var(--desk-muted)}
.v-section-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.v-section-body{display:flex;flex-direction:column;gap:10px;padding-top:6px;min-width:0}
.v-section.is-callout{box-shadow:inset 4px 0 var(--v-mark);padding-left:12px}
.v-section.is-busy{opacity:.85}
.v-hair{border:0;border-top:1px solid var(--desk-rule);margin:4px 0}
.v-kicker{font:400 11px/1.5 var(--desk-mono);color:var(--desk-muted);margin:0}
.v-caption{font:400 11px/1.5 var(--desk-mono);color:var(--desk-muted);margin:0}
.v-sentence{font:400 15px/1.5 var(--desk-font);margin:0}
.v-small{font:400 12px/1.5 var(--desk-font);color:var(--desk-muted)}

/* ---- Figures ----------------------------------------------------------------------- */
.v-figure{display:flex;flex-direction:column;gap:2px;min-width:0}
.v-fig-line{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.v-fig-value{font:800 var(--desk-figure-size)/1.05 var(--desk-display);letter-spacing:-1.3px;font-variant-numeric:tabular-nums;color:var(--desk-ink)}
.v-figure.large .v-fig-value{font-size:32px;letter-spacing:-1px}
.v-figure.medium .v-fig-value{font-size:24px;letter-spacing:-.5px;font-weight:700}
.v-figure.small .v-fig-value{font-size:18px;letter-spacing:-.3px;font-weight:700}
.v-fig-unit{font:600 14px/1.2 var(--desk-font);color:var(--desk-ink)}
.v-fig-label{font:400 11px/1.5 var(--desk-mono);color:var(--desk-muted)}
.v-fig-sub{font:400 12px/1.5 var(--desk-mono);color:var(--desk-muted)}
.v-usual{font:400 12px/1.5 var(--desk-mono);color:var(--desk-muted)}
.v-usual .v-glyph{color:var(--desk-ink);font-weight:500}
.v-usual.is-out{color:var(--desk-ink)}
.v-mark{background:var(--v-mark);color:var(--desk-ink);padding:0 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.v-glyph{font-family:var(--desk-mono);font-weight:500}

/* ---- Chips, links, notices ---------------------------------------------------------- */
.v-chip{display:inline-flex;align-items:center;gap:4px;min-height:20px;padding:1px 6px;border:1px solid var(--desk-rule);border-radius:2px;background:transparent;color:var(--desk-muted);font:400 11px/1.5 var(--desk-mono);white-space:nowrap}
.v-chip.ink{color:var(--desk-ink);border-color:var(--desk-ink)}
.v-chip.blue{color:var(--desk-blue);border-color:var(--desk-blue)}
.v-chip.solid{background:var(--desk-ink);color:var(--desk-paper);border-color:var(--desk-ink)}
.v-chip.mark{background:var(--v-mark);color:var(--desk-ink);border-color:var(--desk-ink)}
.v-chip.clay{color:var(--v-clay-text);border-color:var(--desk-clay)}
.v-chip.soft{background:var(--desk-soft);color:var(--desk-ink);border-color:transparent}
.v-link{display:inline-flex;align-items:center;gap:4px;min-height:28px;color:var(--desk-blue);font:600 13px/1.4 var(--desk-font);text-decoration:none;border-bottom:1px solid transparent}
.v-link:hover{border-bottom-color:currentColor}
@media (max-width:900px),(pointer:coarse){.v-link{min-height:44px}}
.v-link.quiet{color:var(--desk-ink)}
.v-notice{margin:0;padding:8px 10px;border-left:3px solid var(--desk-rule);background:transparent;font:400 13px/1.5 var(--desk-font);color:var(--desk-ink)}
.v-notice.muted{color:var(--desk-muted);border-left-color:var(--desk-rule)}
.v-notice.info{background:var(--desk-soft);border-left-color:var(--desk-blue)}
.v-notice.mark{border-left:4px solid var(--v-mark);background:color-mix(in srgb,var(--v-mark) 22%,transparent)}
.v-notice.clay{border-left-color:var(--desk-clay);color:var(--desk-ink);background:color-mix(in srgb,var(--desk-clay) 10%,transparent)}
/* D44: the disclaimer is gone; ui.nonClinical() appends nothing. */
.v-nonclinical{display:none}

/* ---- Cards: only for things Mike acts on (suggestions, decisions, approvals) ------- */
.v-card{position:relative;padding:12px 14px 14px;background:var(--desk-raised);border:1px solid var(--desk-rule);border-top:3px solid var(--desk-blue);border-radius:2px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.v-card-kicker{font:500 10.5px/1.4 var(--desk-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--desk-muted)}
.v-card-title{font:700 16px/1.3 var(--desk-font);margin:0}
.v-card-body{font:400 13px/1.5 var(--desk-font);margin:0}
.v-card-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---- Rows and cells ----------------------------------------------------------------- */
.v-rows{display:flex;flex-direction:column}
.v-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 0;border-bottom:1px solid var(--desk-rule);color:var(--desk-ink);text-decoration:none}
.v-row:hover{background:var(--hover)}
.v-row .v-row-main{flex:1;min-width:0}
.v-row .v-row-title{display:block;font:600 14px/1.35 var(--desk-font)}
.v-row .v-row-sub{display:block;font:400 11px/1.5 var(--desk-mono);color:var(--desk-muted)}
.v-cell{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 10px;border:1px solid var(--desk-rule);border-radius:2px;background:transparent;color:var(--desk-ink);text-decoration:none}
a.v-cell:hover{background:var(--hover)}
/* Link rows and cells read as ink, not link blue (.v-root a would otherwise win). */
a.v-row,a.v-cell{color:var(--desk-ink)}
.v-dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;margin:0;font:400 13px/1.5 var(--desk-font)}
.v-dl dt{color:var(--desk-muted);font:400 12px/1.6 var(--desk-mono)}
.v-dl dd{margin:0;font-variant-numeric:tabular-nums}

/* ---- Trail (kicker breadcrumb; first item is the back link) ------------------------ */
.v-trail{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0 0 4px;font:400 11px/1.5 var(--desk-mono);color:var(--desk-muted)}
.v-trail a{position:relative;color:var(--desk-ink);text-decoration:none;border-bottom:1px solid var(--desk-rule);display:inline-flex;align-items:center;min-height:24px}
@media (max-width:900px),(pointer:coarse){.v-trail a{min-height:44px;border-bottom:0;text-decoration:underline;text-decoration-color:var(--desk-rule)}}
@media (max-width:900px),(pointer:coarse){.v-trail a::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:max(100%,44px);transform:translateX(-50%)}}
.v-trail a:hover{border-bottom-color:var(--desk-ink)}
.v-trail .sep{color:var(--desk-rule)}

/* ---- Segmented control (radiogroup) ------------------------------------------------- */
.v-seg{display:inline-flex;flex-wrap:nowrap;border:1px solid var(--desk-rule);border-radius:2px;background:var(--desk-paper);box-shadow:0 2px 0 var(--desk-shadow);max-width:100%}
.v-seg button{flex:1 1 auto;min-width:0;min-height:32px;padding:4px 10px;border:0;border-right:1px solid var(--desk-rule);background:transparent;color:var(--desk-ink);font:600 12px/1.3 var(--desk-font);cursor:pointer;white-space:nowrap}
.v-seg button:last-child{border-right:0}
.v-seg button[aria-checked="true"]{background:var(--desk-ink);color:var(--desk-paper)}
.v-seg button:disabled{color:var(--desk-muted);cursor:not-allowed;text-decoration:line-through}
.v-seg.full{display:flex;width:100%}
@media (max-width:900px),(pointer:coarse){.v-seg button{min-height:44px}.v-seg:not(.full) button{min-width:44px}}

/* ---- Readout, skeleton, table ------------------------------------------------------- */
.v-readout{min-height:1.5em;font:400 12px/1.5 var(--desk-mono);color:var(--desk-ink)}
.v-skel{display:flex;flex-direction:column;gap:8px}
.v-skel-bar{height:12px;background:var(--hover);border-radius:2px}
.v-skel-block{background:repeating-linear-gradient(0deg,transparent 0 19px,var(--desk-rule) 19px 20px);border:1px solid var(--desk-rule);border-radius:2px}
.v-skel-label{font:400 11px/1.5 var(--desk-mono);color:var(--desk-muted)}
.v-table-wrap{max-width:100%;overflow-x:auto}
.v-table{border-collapse:collapse;width:100%;font:400 12px/1.5 var(--desk-mono)}
.v-table caption{text-align:left;font:400 11px/1.5 var(--desk-mono);color:var(--desk-muted);padding:0 0 6px}
.v-table th{font:600 11px/1.4 var(--desk-font);color:var(--desk-muted);text-align:left;border-bottom:1px solid var(--desk-ink);padding:4px 8px 4px 0}
.v-table td{border-bottom:1px solid var(--desk-rule);padding:4px 8px 4px 0;font-variant-numeric:tabular-nums}
.v-table .r{text-align:right}
details.v-details>summary{cursor:pointer;font:600 12px/1.5 var(--desk-font);min-height:32px;display:flex;align-items:center;gap:6px;list-style:none}
details.v-details>summary::-webkit-details-marker{display:none}
details.v-details>summary::before{content:"▸";font-family:var(--desk-mono);color:var(--desk-muted)}
details.v-details[open]>summary::before{content:"▾"}
@media (max-width:900px),(pointer:coarse){details.v-details>summary{min-height:44px}}


/* ---- Sheets (bottom sheet on the phone, 420px drawer on desktop) and the fixed layer (sheets, tooltips) ---- */
.v-layer{position:fixed;inset:0;z-index:1000;pointer-events:none}
.v-layer>*{pointer-events:auto}
.v-backdrop{position:fixed;inset:0;background:color-mix(in srgb,var(--desk-ink) 22%,transparent)}
.v-sheet{position:fixed;display:flex;flex-direction:column;background:var(--desk-paper);color:var(--desk-ink);border:1px solid var(--desk-ink);box-shadow:var(--shadow-lg);outline:none}
.v-sheet.bottom{left:0;right:0;bottom:0;max-height:86%;border-radius:2px 2px 0 0;border-bottom:0;border-top:2px solid var(--desk-ink);padding-bottom:env(safe-area-inset-bottom,0px)}
.v-sheet.drawer{top:0;right:0;bottom:0;width:min(420px,100%);border-top:0;border-right:0;border-bottom:0}
.v-sheet-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--desk-rule)}
.v-sheet-head h2{flex:1;margin:0;font:700 22px/1.2 var(--desk-display);letter-spacing:-.4px}
.v-sheet-body{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 20px;display:flex;flex-direction:column;gap:12px}
.v-sheet .v-grip{display:block;width:40px;height:4px;margin:8px auto 0;background:var(--desk-rule);border-radius:2px}
/* The ⓘ About sheet (components/info-sheet.js): small-caps section heads, as in the prototype */
.v-info-sec{display:flex;flex-direction:column;gap:5px;padding:0 0 12px;border-bottom:1px solid var(--desk-rule)}
.v-info-sec h3{margin:0;font:700 11px/1.5 var(--desk-font);letter-spacing:.06em;text-transform:uppercase;color:var(--desk-muted)}
.v-info-sec p{margin:0;font:400 13.5px/1.55 var(--desk-font)}

/* ---- Toasts: clear of the phone tab bar, its 1px rule and the safe area (Desk contract) ------------------- */
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:1100;display:flex;flex-direction:column;gap:8px;width:min(440px,calc(100% - 32px));pointer-events:none}
@media (max-width:900px){#toasts{bottom:calc(var(--desk-tabbar-height) + 1px + env(safe-area-inset-bottom,0px) + 12px)}}
.v-toast{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--desk-ink);color:var(--desk-paper);border-radius:2px;box-shadow:var(--shadow);font:500 13px/1.4 var(--desk-font)}
.v-toast span{flex:1}
.v-toast button{min-height:32px;padding:4px 10px;border:1px solid var(--desk-paper);border-radius:2px;background:transparent;color:var(--desk-paper);font:700 12px/1 var(--desk-font);cursor:pointer}
@media (max-width:900px),(pointer:coarse){.v-toast button{min-height:44px}}

/* ---- Errors and placeholders ------------------------------------------------------------------------------ */
.v-error,.v-panel-error{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px;border:1px solid var(--desk-rule);border-left:4px solid var(--desk-clay);background:var(--desk-paper);color:var(--desk-ink);font:400 13px/1.5 var(--desk-font)}
.v-error p,.v-panel-error p{margin:0}
.v-error-detail{font:400 11px/1.5 var(--desk-mono);color:var(--desk-muted)}

/* ---- A figure that changed in a live patch: a 1.2s yellow underline fade (off under reduced motion) -------- */
@keyframes v-updated{from{box-shadow:inset 0 -3px var(--v-mark)}to{box-shadow:inset 0 -3px transparent}}
.is-updated .fig-value,.fig-value.is-updated{animation:v-updated 1.2s ease-out 1}
/* Anything else view-data.flash() marks (a callout sentence, a row): the node itself takes the underline. */
.is-updated:not(:has(.fig-value)){animation:v-updated 1.2s ease-out 1}
@media (prefers-reduced-motion:reduce){.is-updated,.is-updated .fig-value{animation:none}}
/* ==== Round 2 (03-FEEDBACK-1.md) ===================================================== */

/* ---- Quiet section heads (D46): group and section headings are quieter than the figures */
:is(#app,#v-layer) .section-title.quiet{font:600 12px/1.4 var(--desk-font);letter-spacing:.08em;text-transform:uppercase;color:var(--desk-muted);margin:0}
.v-section.is-quiet>.v-section-head{border-top:1px solid var(--desk-ink);padding:10px 0 6px}
.v-section.is-quiet>.v-section-body{padding-top:10px}
:is(#app,#v-layer) .v-section-head .section-title+.v-info{margin-left:-6px}
/* An ⓘ sits right after its section title: the title hugs its text (this outranks the flex:1 title above). */
:is(#app,#v-layer) .v-section-head:has(>.v-info) .section-title{flex:0 1 auto}
:is(#app,#v-layer) .v-section-head:has(>.v-info)>.v-info{margin-right:auto}

/* ---- Value-first figures (D46): the number is the hero; unit, name and usual are quiet */
.fig{display:flex;flex-direction:column;gap:6px;min-width:0;color:var(--desk-ink);text-decoration:none}
.fig-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;min-width:0}
.fig-value{font:800 40px/1 var(--desk-display);letter-spacing:-1.4px;font-variant-numeric:tabular-nums;color:var(--desk-ink);white-space:nowrap}
.fig-unit{font:600 15px/1.2 var(--desk-font);color:var(--desk-muted)}
.fig-extra{font:600 15px/1.2 var(--desk-font);color:var(--desk-ink)}
.fig-ex{align-self:center;font:500 11px/1.4 var(--desk-mono);color:var(--desk-ink);background:var(--desk-soft);border-radius:2px;padding:1px 6px;white-space:nowrap}
.fig-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;min-width:0}
.fig-label{font:500 13px/1.4 var(--desk-font);color:var(--desk-muted)}
.fig-sub{font:400 12px/1.5 var(--desk-mono);color:var(--desk-muted)}
.fig-xl .fig-value{font-size:64px;letter-spacing:-2.4px}
.fig-xl .fig-unit,.fig-xl .fig-extra{font-size:18px}
.fig-xl .fig-label{font-size:14px}
.fig-md .fig-value{font-size:30px;letter-spacing:-1px}
.fig-md .fig-unit,.fig-md .fig-extra{font-size:13px}
.fig-sm .fig-value{font-size:22px;letter-spacing:-.5px;font-weight:700}
.fig-sm .fig-unit,.fig-sm .fig-extra{font-size:12px}
@media (max-width:900px){.fig-xl .fig-value{font-size:52px;letter-spacing:-2px}}
@media (max-width:900px){.fig-lg .fig-value{font-size:36px;letter-spacing:-1.2px}}
@media (max-width:900px){.fig-md .fig-value{font-size:28px}}
a.fig-link{color:var(--desk-ink);border-radius:2px}
.fig-link:hover .fig-value{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.fig-link:hover .fig-label{color:var(--desk-ink)}
.fig-wrap{display:flex;align-items:flex-start;gap:4px;min-width:0}
.fig-wrap>.fig{flex:0 1 auto}

/* ---- Value-first list rows (Explore, D46): value, then the quiet name; trend on the right */
.v-vrow{display:flex;align-items:center;gap:16px;min-height:76px;padding:14px 0;border-bottom:1px solid var(--desk-rule);color:var(--desk-ink);text-decoration:none}
a.v-vrow{color:var(--desk-ink)}
a.v-vrow:hover{background:var(--hover)}
a.v-vrow:hover .fig-value{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.v-vrow-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.v-vrow .fig-value{font-size:30px;letter-spacing:-1px}
.v-vrow .fig-unit,.v-vrow .fig-extra{font-size:13px}
@media (max-width:900px){.v-vrow .fig-value{font-size:26px;letter-spacing:-.8px}}
.v-vrow-trend{flex:none;display:flex;align-items:center;opacity:.9}
.v-vrow-go{flex:none;display:flex;color:var(--desk-muted)}
.v-vrow-go svg{width:16px;height:16px}

/* ---- infoTip (D39): a small ⓘ with a 44px hit area on the phone frame; the tooltip lives in #v-layer */
.v-info{display:inline-flex;align-items:center;vertical-align:middle;flex:none;position:relative}
.v-info-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin:-4px 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--desk-muted);cursor:help;flex:none;box-shadow:none}
.v-info-btn svg{width:16px;height:16px}
.v-info-btn:hover,.v-info-btn[aria-expanded="true"]{color:var(--desk-ink);background:var(--hover)}
@media (max-width:900px),(pointer:coarse){.v-info-btn::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}}
.v-tip{position:absolute;z-index:80;box-sizing:border-box;width:max-content;max-width:320px;padding:10px 12px;background:var(--desk-raised);color:var(--desk-ink);
  border:1px solid var(--desk-ink);border-radius:2px;box-shadow:var(--shadow);font:400 13px/1.5 var(--desk-font);text-align:left;pointer-events:auto}
.v-tip p{margin:0}
.v-tip p+p{margin-top:6px}
.v-tip::before{content:"";position:absolute;left:calc(var(--tip-x,20px) - 5px);top:-6px;width:9px;height:9px;background:var(--desk-raised);border-left:1px solid var(--desk-ink);border-top:1px solid var(--desk-ink);transform:rotate(45deg)}
.v-tip.is-above::before{top:auto;bottom:-6px;transform:rotate(225deg)}

/* ---- multiSelect (D40): button + popover checkbox list */
.v-ms{position:relative;display:inline-flex;max-width:100%;width:fit-content;align-self:flex-start}
.v-ms-btn{display:inline-flex;align-items:center;gap:8px;min-height:32px;max-width:100%;padding:4px 10px;border:1px solid var(--desk-rule);border-radius:2px;background:var(--desk-paper);
  color:var(--desk-ink);font:600 12px/1.3 var(--desk-font);box-shadow:0 2px 0 var(--desk-shadow);cursor:pointer;white-space:nowrap}
.v-ms-btn svg{width:14px;height:14px;flex:none;color:var(--desk-muted)}
.v-ms-text{overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.v-ms.is-open .v-ms-btn{border-color:var(--desk-ink)}
@media (max-width:900px),(pointer:coarse){.v-ms-btn{min-height:44px}}
.v-ms-pop{position:absolute;top:calc(100% + 4px);left:0;z-index:40;width:max-content;min-width:max(100%,180px);max-width:min(320px,calc(var(--fw,400px) - 32px));max-height:320px;overflow-y:auto;padding:6px 0;background:var(--desk-raised);
  border:1px solid var(--desk-ink);border-radius:2px;box-shadow:var(--shadow)}
.v-ms-pop.is-up{top:auto;bottom:calc(100% + 4px)}
.v-ms-pop.is-end{left:auto;right:0}
.v-ms-list{display:flex;flex-direction:column}
.v-ms-opt{display:flex;align-items:center;gap:10px;min-height:36px;padding:4px 12px;font:500 13px/1.3 var(--desk-font);font-variant-numeric:tabular-nums;cursor:pointer}
.v-ms-opt:hover{background:var(--hover)}
.v-ms-opt input{width:16px;height:16px;margin:0;accent-color:var(--desk-blue)}
@media (max-width:900px),(pointer:coarse){.v-ms-opt{min-height:44px}}
.v-ms-quick{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 4px;border-top:1px solid var(--desk-rule);margin-top:4px}
.v-ms-q{min-height:28px;padding:3px 8px;border:1px solid var(--desk-rule);border-radius:2px;background:transparent;color:var(--desk-ink);font:600 11px/1.2 var(--desk-font);cursor:pointer}
@media (max-width:900px),(pointer:coarse){.v-ms-q{min-height:44px}}
.v-ms-q:hover{background:var(--hover)}

/* ---- Suggestion cards (§3.7) and the life-event sheet (§6.3): shared by Today and Life events -------------- */
.events-sg .v-card-body{display:flex;flex-direction:column;gap:6px}
.events-sg-text{margin:0;font:400 14px/1.5 var(--desk-font)}
.events-sg-text strong{font-weight:700}
.events-draft{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:28px;max-width:100%;font:400 12px/1.4 var(--desk-mono);color:var(--desk-ink);cursor:pointer}
.events-draft span{border-bottom:1px dotted var(--desk-muted)}
.events-draft svg{width:14px;height:14px;flex:none;color:var(--desk-muted)}
.events-draft:hover svg{color:var(--desk-blue)}
.events-draft:focus-visible{outline:2px solid var(--desk-blue);outline-offset:3px}
@media (max-width:900px),(pointer:coarse){.events-draft{min-height:44px}}
.events-sg .v-card-actions .v-link{font-size:12px}
/* ---- Add / edit sheet ------------------------------------------------------------ */
.events-form{display:flex;flex-direction:column;gap:14px}
.events-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.events-field .input{width:100%}
.events-note-input{resize:vertical;min-height:72px}
.events-dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.events-check{display:inline-flex;align-items:center;gap:8px;min-height:32px;font:600 12px/1.3 var(--desk-font);color:var(--desk-ink);cursor:pointer}
.events-check input{width:16px;height:16px;margin:0;accent-color:var(--desk-blue)}
@media (max-width:900px),(pointer:coarse){.events-check{min-height:44px}}
.events-count,.events-hint{font:400 11px/1.5 var(--desk-mono);color:var(--desk-muted)}
.v-seg.events-kinds button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:6px 2px;font-size:11.5px}
.v-seg.events-kinds button svg{width:18px;height:18px}
.events-illness{margin:-4px 0 0}
.events-preview-wrap{display:flex;flex-direction:column;gap:4px;padding:10px 0 0;border-top:1px solid var(--desk-rule)}
.events-preview{display:flex;align-items:center;gap:8px;margin:0;font:400 14px/1.4 var(--desk-font)}
.events-preview svg{flex:none}
.events-preview b{font-weight:700}
.events-source{margin:0;font:400 11px/1.5 var(--desk-mono);color:var(--desk-muted)}
.events-err{margin:0;padding:6px 10px;border-left:3px solid var(--desk-ink);font:600 13px/1.4 var(--desk-font);color:var(--desk-ink)}
.events-err:empty{display:none}
.events-sheet-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.events-del{margin-left:auto}
.events-confirm{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border:1px solid var(--desk-ink);border-radius:2px;background:var(--desk-raised);box-shadow:var(--shadow)}
.events-confirm p{margin:0;font:600 14px/1.45 var(--desk-font)}


/* ---- Range control (§4.2): sticky once scrolled past; 44px segments on the phone ----------------------------- */
.v-range{position:sticky;top:0;z-index:6;display:flex;flex-direction:column;gap:6px;margin:2px calc(var(--desk-gutter) * -1) 0;padding:8px var(--desk-gutter);background:var(--desk-ground);border-top:1px solid var(--desk-rule);border-bottom:1px solid var(--desk-rule)}
.v-range-seg{align-self:stretch}
.v-stepper{display:flex;align-items:center;gap:6px;min-width:0}
.v-step-label{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;font:500 12.5px/1.25 var(--desk-mono);color:var(--desk-ink)}
.v-step-label b{font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-step-label span{font-size:10.5px;font-weight:400;color:var(--desk-muted)}
.v-step-gap{display:none}
.v-custom[aria-pressed="true"]{background:var(--desk-ink);color:var(--desk-paper);border-color:var(--desk-ink)}
.v-range-note{margin:0;font:400 11px/1.4 var(--desk-mono);color:var(--desk-muted)}
@container view (min-width:900px){
  .v-range{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;margin:2px 0 0;padding:8px 0}
  .v-range-seg{align-self:auto}
  .v-stepper{flex:0 1 auto}
  .v-step-label{flex:0 1 auto;min-width:170px}
  .v-range-note{flex-basis:100%}
}

/* ---- Readiness (§3.0 figure; §4.12 Inputs strip) ----------------------------------------------------------- */
.v-ready{min-width:0}
.v-ready-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px;margin:0;padding:0;list-style:none}
.v-ready-cell{min-width:0;display:flex}
.v-ready-input .fig-meta{flex-direction:column;align-items:flex-start;gap:3px}
.v-ready-input .fig-label{color:var(--desk-muted)}
.v-ready-nw{white-space:nowrap}
.v-ready-note{margin:14px 0 0;font:400 13px/1.5 var(--desk-font);color:var(--desk-muted);max-width:70ch}
@media (max-width:900px){.v-ready-strip{gap:18px 16px}}
@media (max-width:900px){.v-ready-input .fig-value{font-size:24px}}
/* Desktop row with room (Today ≥1180, §3.3 ~72px): the label on one line, the inputs as an even grid of dl pairs. */
@container view (min-width:1180px){
  .v-ready.is-desktop .v-ready-meta{max-width:none}
  .v-ready.is-desktop .v-ready-label{white-space:nowrap}
  .v-ready.is-desktop .v-ready-dl{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(max-content,1fr);column-gap:24px}