/* MedOps screens: a board of classes you can drag treatments between, ranked lists you reorder, a class by fact heat grid, and visual dose ladders. Everything here is decoration and
   motion on top of ordinary forms and buttons (every drag has a button), uses only theme tokens, and stands still under prefers-reduced-motion. */
.board { display: grid; gap: var(--space-3); }
.lane { position: relative; padding: var(--space-3); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); overflow: hidden;
        transition: border-color var(--motion) var(--ease), box-shadow var(--motion) var(--ease), transform var(--motion) var(--ease); }
.lane::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 35%, transparent)); }
.lane > header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2) var(--space-2); }
.lane > header h3 { margin: 0; font-size: 1.05rem; }
.lane > header .lane-meta { margin-left: auto; display: flex; gap: .4rem; }
.lane.accepting { border: 2px dashed var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface)); }
.lane.over { border-style: solid; box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--color-accent) 60%, transparent); transform: scale(1.003); }
.lane .cards { list-style: none; margin: 0 0 0 var(--space-2); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-2); }
.lane .cards:empty::after { content: "Drop a treatment here"; grid-column: 1 / -1; padding: var(--space-3); text-align: center; color: var(--color-text-muted); border: 1px dashed var(--color-border); border-radius: var(--radius-md); }
.tcard { position: relative; display: grid; gap: .3rem; padding: .6rem .7rem; border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-border);
         box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 6%, transparent); transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease), opacity var(--motion) var(--ease); }
.tcard[draggable="true"] { cursor: grab; }
.tcard:hover, .tcard:focus-within { transform: translateY(-2px); box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--color-text) 55%, transparent); }
.tcard.dragging { opacity: .4; cursor: grabbing; }
.tcard .tc-top { display: flex; align-items: center; gap: .5rem; }
.tcard .tc-icon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)); color: var(--color-accent-text); flex: none; }
.tcard .tc-name { all: unset; cursor: pointer; font-weight: 650; color: var(--color-text); border-radius: var(--radius-sm); }
.tcard .tc-name:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.tcard .tc-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.tcard .tc-move { margin-top: .2rem; }
.tcard .tc-move summary { cursor: pointer; font-size: .8rem; color: var(--color-text-muted); }
.tcard .tc-move form { display: flex; gap: .3rem; margin-top: .3rem; }
.tcard .tc-move select { flex: 1 1 auto; min-width: 0; }
.tcard.retired { opacity: .6; }
.board-note { min-height: 1.4rem; }
.view-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.view-toggle a { padding: .35rem .8rem; text-decoration: none; color: var(--color-text); }
.view-toggle a[aria-current="true"] { background: var(--color-accent); color: var(--color-on-accent); }
.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.stat { display: grid; gap: 0; padding: .5rem .9rem; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); min-width: 7rem; }
.stat b { font-size: 1.5rem; line-height: 1.1; color: var(--color-accent-text); }
.stat span { font-size: .8rem; color: var(--color-text-muted); }

/* the classes of one treatment: two drop zones (belongs to / other classes) of draggable chips */
.cchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; min-height: 2.6rem; }
.cchip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border);
         box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 6%, transparent); transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease); }
.cchip[draggable="true"] { cursor: grab; }
.cchip.primary { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)); font-weight: 650; }
.cchip.dragging { opacity: .4; }
.cchip button { all: unset; cursor: pointer; padding: 0 .25rem; border-radius: var(--radius-sm); color: var(--color-accent-text); font-size: .85rem; }
.cchip button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; }

.lane-note { margin: .5rem 0 0 var(--space-2); }

/* motion that respects the person */
@media (prefers-reduced-motion: reduce) { .lane, .tcard, .cchip { transition: none; } .tcard:hover, .tcard:focus-within, .lane.over { transform: none; } }
@media (max-width: 40rem) { .lane .cards { grid-template-columns: minmax(0, 1fr); } }

/* class defaults: a heat grid. Colour is never the only signal: every effect carries a mark and a word. */
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 var(--space-3); padding: 0; align-items: center; font-size: .85rem; color: var(--color-text-muted); }
.defaults-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem); gap: var(--space-3); align-items: start; }
.heat-scroll { overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.heat-grid { border-collapse: separate; border-spacing: 4px; width: 100%; }
.heat-grid thead th { font-weight: 600; font-size: .78rem; vertical-align: bottom; text-align: center; min-width: 5.2rem; max-width: 7rem; color: var(--color-text-muted); }
.heat-grid thead th span { display: block; padding: 0 .2rem; overflow-wrap: anywhere; }
.heat-grid tbody th { text-align: left; font-size: .9rem; padding-right: .6rem; position: sticky; left: 0; background: var(--color-surface); white-space: nowrap; z-index: 1; }
.heat { all: unset; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .2rem; min-height: 2.6rem; width: 100%; border-radius: var(--radius-md); cursor: pointer; position: relative;
        background: var(--color-surface-2); border: 1px solid var(--color-border); transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease); }
.heat.empty { cursor: default; opacity: .55; justify-content: center; }
button.heat.empty { cursor: pointer; opacity: .7; color: var(--color-text-muted); }
button.heat:hover, button.heat:focus-visible { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--color-text) 60%, transparent); opacity: 1; }
button.heat:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.heat[aria-expanded="true"], .heat.chosen { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.heat-chip { display: inline-flex; align-items: center; gap: .2rem; padding: 0 .45rem; border-radius: 999px; font-size: .74rem; font-weight: 650; line-height: 1.4rem; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
.heat-chip.fx-deny { background: var(--color-danger-soft); color: var(--color-danger-text); border-color: var(--color-danger-text); }
.heat-chip.fx-flag { background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface)); color: var(--color-text); border-color: var(--color-accent); border-style: dashed; }
.heat-chip.fx-recommend { background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)); color: var(--color-accent-text); border-color: var(--color-accent); }
.heat-chip.fx-no_effect, .heat-chip.fx-none { color: var(--color-text-muted); background: var(--color-surface-2); }
.heat-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent); display: inline-block; }
.heat .heat-dot { position: absolute; top: -.2rem; right: -.2rem; }
.heat-ovr { font-size: .7rem; color: var(--color-text-muted); }
.cell-panel { position: sticky; top: var(--space-3); max-height: calc(100vh - 2rem - var(--env-banner-h)); overflow: auto; }
.cell-h { margin: 0 0 .2rem; font-size: 1.1rem; }
.rule-list { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; gap: var(--space-2); }
.rule-card { padding: .7rem .8rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-2); position: relative; }
.rule-card.override { margin-left: var(--space-3); border-left: 4px solid var(--color-accent); }
.rule-card > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rule-h { margin: 0; font-size: .95rem; }
.rule-test { margin: .3rem 0; }
.open-change { margin-top: var(--space-2); padding: .5rem .6rem; border-radius: var(--radius-md); border: 1px dashed var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface)); }
.open-change.in_review { border-style: solid; }
.inline-actions { display: grid; gap: .4rem; }
.rule-new { margin-top: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.rule-new h3 { margin: 0 0 .4rem; font-size: 1rem; }
.qchips { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.ask-flow { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.ask-flow li { padding: .4rem .6rem; border-left: 4px solid var(--color-accent); background: var(--color-surface-2); border-radius: var(--radius-sm); }
@media (max-width: 62rem) { .defaults-layout { grid-template-columns: minmax(0, 1fr); } .cell-panel { position: static; max-height: none; } }
@media (prefers-reduced-motion: reduce) { .heat { transition: none; } button.heat:hover, button.heat:focus-visible { transform: none; } }

/* interactions and sequencing: pairs as cards, spacing as a timeline bar */
.pair-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pair-card { border: 1px solid var(--color-border); border-left: 5px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-surface); transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease); }
.pair-card.fx-deny { border-left-color: var(--color-danger-text); }
.pair-card:hover, .pair-card:focus-within { transform: translateY(-2px); box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--color-text) 55%, transparent); }
.pair-link { display: grid; gap: .4rem; padding: .7rem .9rem; color: inherit; text-decoration: none; border-radius: var(--radius-md); }
.pair-link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.pair-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pair-side { display: grid; padding: .3rem .7rem; border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-border); min-width: 8rem; }
.pair-side small { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.pair-side.kind-class { border-color: var(--color-accent); }
.pair-arrow { font-size: 1.3rem; color: var(--color-accent-text); }
.pair-meta { display: flex; flex-wrap: wrap; gap: .3rem; }
.timeline .gap { flex: 1 1 8rem; display: flex; align-items: center; min-width: 6rem; }
.timeline .gap::before, .timeline .gap::after { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--color-accent); flex: none; }
.gap-bar { flex: 1 1 auto; height: .35rem; margin: 0 -.1rem; border-radius: 999px; background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 30%, transparent)); min-width: 1.5rem; max-width: 100%; }
.gap-bar.w-5 { width: 8.3%; }
.gap-bar.w-10 { width: 16.7%; }
.gap-bar.w-15 { width: 25.0%; }
.gap-bar.w-20 { width: 33.3%; }
.gap-bar.w-25 { width: 41.7%; }
.gap-bar.w-30 { width: 50.0%; }
.gap-bar.w-35 { width: 58.3%; }
.gap-bar.w-40 { width: 66.7%; }
.gap-bar.w-45 { width: 75.0%; }
.gap-bar.w-50 { width: 83.3%; }
.gap-bar.w-55 { width: 91.7%; }
.gap-bar.w-60 { width: 100.0%; }
.big-prompt { font-size: 1.05rem; font-weight: 600; margin: .2rem 0 .5rem; }
@media (prefers-reduced-motion: reduce) { .pair-card { transition: none; } .pair-card:hover, .pair-card:focus-within { transform: none; } }

/* a name or an email you can click to edit */
.inline-edit { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: inherit; color: inherit; text-align: left; cursor: pointer; border-bottom: 1px dashed var(--color-text-muted); border-radius: 2px; }
.inline-edit::after { content: " \270E"; font-size: .85em; color: var(--color-accent-text); opacity: .7; }
.inline-edit:hover, .inline-edit:focus-visible { color: var(--color-accent-text); border-bottom-color: var(--color-accent); }
.inline-edit:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.dialog-h { margin: 0 0 var(--space-3); font-size: 1.15rem; }
/* Rx management: state rule colours, selectable state chips, catalog mapping */
.heat.rule-allowed, .heat-chip.rule-allowed { background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); color: var(--color-accent-text); border-color: var(--color-accent); }
.heat.rule-conditional, .heat-chip.rule-conditional { background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-2)); border-style: dashed; border-color: var(--color-accent); }
.heat.rule-prohibited, .heat-chip.rule-prohibited { background: var(--color-danger-soft); color: var(--color-danger-text); border-color: var(--color-danger-text); }
.heat.stale, .state-chip.stale span { outline: 2px dashed var(--color-text-muted); outline-offset: -3px; }
.state-map .heat { min-height: 2rem; min-width: 1.8rem; justify-content: center; }
.state-map thead th { min-width: 2rem; max-width: 2.4rem; }
.strip { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.strip-h { margin: 0 0 var(--space-2); font-size: 1rem; }
.state-chips { display: flex; flex-wrap: wrap; gap: .3rem; border: 0; padding: 0; margin: 0 0 var(--space-2); }
.state-chip { position: relative; display: inline-block; cursor: pointer; }
.state-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.state-chip span { display: inline-flex; align-items: center; gap: .15rem; padding: .2rem .5rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); font-size: .78rem; font-weight: 650; transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease); }
.state-chip.available span { background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); border-color: var(--color-accent); color: var(--color-accent-text); }
.state-chip.unavailable span { background: var(--color-danger-soft); border-color: var(--color-danger-text); color: var(--color-danger-text); }
.state-chip.none span { color: var(--color-text-muted); }
.state-chip:hover span { box-shadow: 0 6px 12px -8px color-mix(in srgb, var(--color-text) 60%, transparent); }       /* no movement on hover: a target that moves from under the pointer flickers */
.state-chip input:checked + span { box-shadow: 0 0 0 3px var(--color-focus); transform: scale(1.06); }
.state-chip input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.strip-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.strip-actions input[type=text] { flex: 1 1 14rem; min-width: 0; }
.mapping { margin: .1rem 0; }
.anchor-nav { display: flex; gap: var(--space-3); margin: 0 0 var(--space-3); }
.stat.warn b { color: var(--color-danger-text); }
.import-preview .import-error td { background: var(--color-danger-soft); }
.import-preview h4 { margin: 0 0 var(--space-2); }
.policy-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
@media (prefers-reduced-motion: reduce) { .state-chip span { transition: none; } .state-chip input:checked + span { transform: none; } }

.tcard.unavail { border-style: dashed; border-color: var(--color-danger-text); }

/* treatment view */
.tv-fact { margin: var(--space-3) 0; }
.tv-fact h3 { margin: 0 0 .3rem; font-size: 1rem; }
.tv-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.tv-entries li { padding: .5rem .7rem; border-left: 4px solid var(--color-accent); background: var(--color-surface-2); border-radius: var(--radius-sm); }
.tv-entries li.override { margin-left: var(--space-3); }
.tv-entries li.overridden { border-left-color: var(--color-border); }
.tv-entries li.overridden > b, .tv-entries li.overridden > .heat-chip { text-decoration: line-through; }
.tv-states { list-style: none; padding: 0; margin: 0; }
.tv-states .state-chip.allowed span, .tv-states .state-chip.conditional span, .tv-states .state-chip.prohibited span { border-width: 1px; }
.tv-states .state-chip span.not-ok { opacity: .85; border-style: dotted; }
.ladder { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; align-items: flex-end; gap: .3rem; }
.ladder .step { flex: 1 1 0; min-width: 3.2rem; display: grid; gap: .1rem; padding: .4rem .3rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)); border: 1px solid var(--color-accent); font-size: .78rem; text-align: center; }
.ladder .step span { color: var(--color-text-muted); font-size: .7rem; }
.ladder .s1 { min-height: 2.6rem; } .ladder .s2 { min-height: 3.2rem; } .ladder .s3 { min-height: 3.8rem; } .ladder .s4 { min-height: 4.4rem; } .ladder .s5 { min-height: 5rem; } .ladder .s6 { min-height: 5.6rem; } .ladder .s7 { min-height: 6.2rem; } .ladder .s8 { min-height: 6.8rem; } .ladder .s9 { min-height: 7.4rem; }
.ladder .step.max { background: var(--color-accent); color: var(--color-on-accent); } .ladder .step.max span { color: inherit; }
.primary-chip { border-color: var(--color-accent); font-weight: 700; }
.ladder { flex-wrap: wrap; }
.tv-entries li, .tv-fact, .pair-msg { overflow-wrap: anywhere; }
.tv-states { display: flex; flex-wrap: wrap; gap: .3rem; }
.cards { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.tcard { min-width: 0; }
.fact-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }

/* entry points: ranked lists */
.rank-preview { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; counter-reset: r; }
.rank-preview li { counter-increment: r; padding: .15rem .55rem; border-radius: 999px; background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: .8rem; }
.rank-preview li:not(.muted)::before { content: counter(r) ". "; color: var(--color-text-muted); }
.rank-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: .4rem; }
.rank-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .4rem .6rem; border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-border); transition: box-shadow var(--motion) var(--ease), border-color var(--motion) var(--ease); }
.rank-n { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent); font-weight: 700; font-size: .85rem; flex: none; }
.rank-card { flex: 1 1 10rem; padding: .25rem .5rem; border-radius: var(--radius-sm); background: var(--color-surface); border: 1px solid var(--color-border); }
.rank-card[draggable="true"] { cursor: grab; }
.rank-card.dragging { opacity: .4; }
.rank-slot.accepting { border: 2px dashed var(--color-accent); }
.rank-slot.over { border-style: solid; box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--color-accent) 60%, transparent); }
@media (prefers-reduced-motion: reduce) { .rank-list > li { transition: none; } }

/* dose ladders: a real staircase */
.ladder.big { margin: .4rem 0 var(--space-3); }
.ladder.big .step { min-width: 4.2rem; font-size: .85rem; }
.step-notes { margin: 0 0 var(--space-2); padding-left: 1.2rem; display: grid; gap: .25rem; font-size: .9rem; }
.guidance { margin: .4rem 0; padding: .6rem .9rem; border-left: 4px solid var(--color-danger-text); background: var(--color-danger-soft); color: var(--color-danger-text); border-radius: var(--radius-sm); font-weight: 600; }

/* Ordering policy */
.mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: .6rem; border: 0; padding: 0; margin: 0 0 .8rem; }
.mode-cards legend { font-weight: 650; margin-bottom: .4rem; padding: 0; }
.radio-card { display: flex; align-items: center; gap: .5rem; padding: .7rem .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; transition: box-shadow var(--motion) var(--ease), border-color var(--motion) var(--ease); }
.radio-card:has(input:checked) { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.radio-card:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.access-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; }
.access-row { display: grid; gap: .3rem; padding: .7rem .8rem; border: 1px solid var(--color-border); border-left: 5px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-surface); }
.access-row.no { border-left-color: var(--color-danger-text); }
.access-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.access-row .inline-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.access-row .inline-form input[type="text"] { flex: 1 1 12rem; min-width: 0; }

/* Qualisign */
.tiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: .6rem; padding: 0; margin: 1rem 0; }
.tile a { display: grid; gap: .1rem; padding: .8rem .9rem; border: 1px solid var(--color-border); border-left: 5px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-surface); color: inherit; text-decoration: none; transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease); }
.tile a:hover, .tile a:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--color-text) 55%, transparent); }
.tile b { font-size: 1.6rem; line-height: 1.1; }
.tile span { font-size: .78rem; color: var(--color-text-muted); }
.tile.sg-declined a, .tile.sg-voided a, .tile.sg-expired a { border-left-color: var(--color-danger-text); }
.sg-card.sg-declined, .sg-card.sg-voided, .sg-card.sg-expired { border-left-color: var(--color-danger-text); }
.sg-chip-completed, .sg-chip-ok { border-color: var(--color-accent); color: var(--color-accent-text); }
.sg-chip-declined, .sg-chip-voided, .sg-chip-expired, .sg-chip-bad { border-color: var(--color-danger-text); color: var(--color-danger-text); }
.sg-progress { display: inline-block; width: 4.5rem; height: .4rem; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 12%, transparent); overflow: hidden; vertical-align: middle; }
.sg-progress-bar { display: block; height: 100%; background: var(--color-accent); border-radius: 999px; }
.sg-p-0 { width: 0; } .sg-p-1 { width: 10%; } .sg-p-2 { width: 20%; } .sg-p-3 { width: 30%; } .sg-p-4 { width: 40%; } .sg-p-5 { width: 50%; }
.sg-p-6 { width: 60%; } .sg-p-7 { width: 70%; } .sg-p-8 { width: 80%; } .sg-p-9 { width: 90%; } .sg-p-10 { width: 100%; }
.sg-steps, .sg-events { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .5rem; }
.sg-step { display: grid; grid-template-columns: 2rem 1fr auto; gap: .6rem; align-items: center; }
.sg-dot { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--color-border); font-weight: 700; }
.sg-party-signed .sg-dot { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); }
.sg-party-active .sg-dot { border-color: var(--color-accent); }
.sg-party-declined .sg-dot { border-color: var(--color-danger-text); }
.sg-events li { border-left: 3px solid var(--color-border); padding-left: .6rem; }
.sg-when { font-size: .75rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.sg-picks { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .4rem 0; }
.sg-role { margin: .8rem 0; }
.sg-picked { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.sg-downloads { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (prefers-reduced-motion: reduce) { .tile a { transition: none; } .tile a:hover, .tile a:focus-visible { transform: none; } }

/* Qualisign: the signer's page */
.sg-public { max-width: 62rem; margin: 0 auto; padding: 1.2rem 1rem 3rem; display: grid; gap: 1rem; }
.sg-public-head h1 { margin: .6rem 0 .2rem; }
.sg-public > * { min-width: 0; }       /* a grid item is as wide as its widest word unless told it may shrink: a wide table scrolls inside its own box instead of widening the page */
.sg-pages { display: grid; gap: 1rem; }
.sg-canvas { position: relative; }
.sg-page { margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; overflow: hidden; }
.sg-page img { display: block; width: 100%; height: auto; }
.sg-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sg-page figcaption { padding: .3rem .6rem; background: var(--color-surface); }
.sg-box { fill: color-mix(in srgb, var(--color-accent) 16%, transparent); stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 6 4; }
.sg-box-done { fill: color-mix(in srgb, var(--color-accent) 30%, transparent); stroke-dasharray: none; }
.sg-box-label { font: 600 13px system-ui, sans-serif; fill: #14213d; }

/* Qualisign: the template editor */
.fe-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 62rem) { .fe-layout { grid-template-columns: minmax(0, 1fr); } }
.fe-side { display: grid; gap: 1rem; }
.fe-toolbar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .5rem; }
.fe-stage { overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.fe-canvas { position: relative; width: 100%; user-select: none; touch-action: none; }
.fe-canvas img { display: block; width: 100%; height: auto; pointer-events: none; }
.fe-box { position: absolute; box-sizing: border-box; border: 2px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 18%, transparent); border-radius: 4px; cursor: grab; min-width: 8px; min-height: 8px; }
.fe-box:focus-visible { outline: 3px solid var(--color-text); outline-offset: 2px; }
.fe-box.selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 50%, transparent); background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.fe-box-label { position: absolute; left: 4px; top: 1px; font: 600 11px system-ui, sans-serif; color: #14213d; pointer-events: none; white-space: nowrap; }
.fe-handle { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; background: var(--color-accent); border-radius: 3px; cursor: nwse-resize; }
.fe-r1 { border-color: #c2410c; background: color-mix(in srgb, #c2410c 16%, transparent); } .fe-r1 .fe-handle { background: #c2410c; }
.fe-r2 { border-color: #047857; background: color-mix(in srgb, #047857 16%, transparent); } .fe-r2 .fe-handle { background: #047857; }
.fe-r3 { border-color: #7e22ce; background: color-mix(in srgb, #7e22ce 16%, transparent); } .fe-r3 .fe-handle { background: #7e22ce; }
.fe-r4 { border-color: #b91c1c; background: color-mix(in srgb, #b91c1c 16%, transparent); } .fe-r4 .fe-handle { background: #b91c1c; }
.fe-r5 { border-color: #0e7490; background: color-mix(in srgb, #0e7490 16%, transparent); } .fe-r5 .fe-handle { background: #0e7490; }
.fe-table-wrap { overflow-x: auto; }
.fe-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.fe-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); padding: .2rem .3rem; }
.fe-table td { padding: .15rem .2rem; }
.fe-table input, .fe-table select { width: 100%; min-width: 3.2rem; }
.fe-table tr.selected td { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.file-field { display: grid; gap: .3rem; margin: .6rem 0; }
@media (prefers-reduced-motion: reduce) { .fe-box { transition: none; } }

.sg-pad { width: 100%; max-width: 40rem; height: auto; aspect-ratio: 3 / 1; border: 2px dashed var(--color-border); border-radius: var(--radius-md); background: #fff; touch-action: none; cursor: crosshair; display: block; }
.sg-sigbox { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .5rem; display: inline-block; max-width: 100%; }
.sg-sigbox img { display: block; max-width: 100%; height: auto; }
/* Retention */
.rt-tabs ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1rem; }
.rt-tabs a { display: inline-block; padding: .5rem .9rem; border: 1px solid var(--color-border); border-radius: 999px; text-decoration: none; min-height: 24px; }
.rt-tabs a[aria-current="page"] { background: var(--color-accent); color: var(--color-on-accent, #fff); border-color: var(--color-accent); }
.rt-stats { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; padding: 0; margin: 0; }
.rt-stats li { display: grid; gap: .2rem; padding: .9rem 1rem; border: 1px solid var(--color-border); border-radius: .8rem; }
.rt-stats b { font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.rt-stats .rt-warn { border-color: var(--color-danger-text); }
.rt-ungoverned { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 0; margin: .4rem 0; }
.rt-table { width: 100%; border-collapse: collapse; }
.rt-table th, .rt-table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.rt-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.rt-hold, .rt-warn-chip { border-color: var(--color-danger-text); color: var(--color-danger-text); }
.rt-retired { border-style: dashed; }
@media (max-width: 40rem) {
  .rt-table, .rt-table tbody, .rt-table tr, .rt-table th, .rt-table td { display: block; width: auto; }
  .rt-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rt-table tr { border-bottom: 1px solid var(--color-border); padding: .4rem 0; }
  .rt-table th, .rt-table td { border-bottom: 0; padding: .15rem .2rem; }
}

/* MedOps home */
.tile.mh-attn a { border-left-color: var(--color-danger-text); }
.mh-table { width: 100%; border-collapse: collapse; }
.mh-table th, .mh-table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.mh-flags { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: 0; }
.mh-flag { border-color: var(--color-danger-text); color: var(--color-danger-text); }
@media (max-width: 40rem) {
  .mh-table, .mh-table tbody, .mh-table tr, .mh-table th, .mh-table td { display: block; width: auto; }
  .mh-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mh-table tr { border-bottom: 1px solid var(--color-border); padding: .4rem 0; }
  .mh-table th, .mh-table td { border-bottom: 0; padding: .15rem .2rem; }
}

/* Treatment view picker: always at the top, switching is one choice */
.tv-picker { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; }
.tv-pick-label { font-weight: 600; }
.tv-picker select { flex: 1; max-width: 32rem; }

/* Tags shown on a provider's or clinic's page */
.tg-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.tg-chip { text-decoration: none; display: inline-flex; align-items: center; min-height: 1.75rem; }
.tg-chips li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; }
.tg-remove summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 .5rem; }
.tg-add { margin-top: var(--space-3); align-items: flex-end; }
.tags-on-panel h2 { font-size: 1rem; margin: 0 0 .5rem; }

/* Patient Connect */
.cn-param .cn-edit { margin-top: .4rem; }
.cn-value { font-weight: 650; }
.cn-v1 { font-style: italic; }
.cn-no b { color: var(--color-text-muted); }
.cn-used { columns: 2; list-style: none; padding: 0; margin: .4rem 0 0; font-size: .85rem; }

/* An invitation */
.cn-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.cn-link-row a { overflow-wrap: anywhere; font-family: var(--font-mono, ui-monospace, monospace); }
.cn-visits { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.cn-visit { border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-2, 10px); background: var(--color-surface-2, var(--color-surface)); padding: var(--space-3); display: grid; gap: var(--space-2); }
.cn-visit-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cn-items { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.cn-items li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.cn-outcome-approved { border-color: var(--color-success-text, var(--color-accent)); }
.cn-outcome-denied { border-color: var(--color-danger-text); }
.cn-notes { margin: 0 0 var(--space-2); padding-left: 1.2rem; }
.decisions { border: 1px solid var(--color-border); border-radius: var(--radius-2, 10px); padding: var(--space-3); display: grid; gap: var(--space-3); margin: 0 0 var(--space-3); min-width: 0; }
.decision-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; }
.decision-row > b { flex: 1 1 14rem; }
.clinic-note { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-accent); background: var(--color-surface-2, var(--color-surface)); }
.clinic-note p { margin: 0 0 .3rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.cn-guardian { border: 1px solid var(--color-border); border-radius: var(--radius-2, 10px); padding: var(--space-3); display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); min-width: 0; }
.room-consent { border-left: 3px solid var(--color-accent); }
.cn-visit-items { display: flex; flex-wrap: wrap; gap: .4rem; }
.cn-resend { margin-top: var(--space-3); }
.cn-channels { border: 0; padding: 0; margin: 0 0 var(--space-2); display: grid; gap: .4rem; }
.cn-channels legend { font-weight: 600; padding: 0; margin-bottom: .3rem; }
.cn-cancel { margin-top: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.cn-cancel summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 1.75rem; }
.cn-cancel form { margin-top: var(--space-2); max-width: 36rem; }

#exam-matches .pair-card:hover, #exam-matches .pair-card:focus-within { background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)); cursor: pointer; }
#exam-matches { margin-block: .4rem; }
#exam-matches .pair-card[aria-busy="true"] { cursor: progress; }
.pair-opening { font-weight: 600; color: var(--color-text); }
.cn-picked { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem; margin: 0 0 .4rem; }
.cn-picked-name { font-size: 1.35rem; overflow-wrap: anywhere; }
.cn-picked-born { font-size: 1.05rem; }
.cn-picked-code { font-size: .8rem; overflow-wrap: anywhere; }
.cn-picked-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: 0 0 var(--space-3); }
.cn-state summary { cursor: pointer; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 2.75rem; }
.cn-state summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.cn-state form { margin-top: var(--space-2); max-width: 24rem; }
.cn-filter { display: flex; flex-wrap: wrap; gap: .6rem .8rem; align-items: end; margin-block: .8rem; }
.cn-filter .field, .cn-filter .select-field { min-width: 9rem; flex: 0 1 12rem; }
.cn-entries { display: grid; gap: .4rem; margin-block: .4rem .8rem; border: 0; padding: 0; }
.cn-entries legend { font-weight: 600; margin-bottom: .3rem; }
.cn-entries p { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cn-price { margin: .1rem 0 .6rem 2.4rem; }
.cn-price summary { cursor: pointer; font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }
.cn-price-none { font-weight: 500; font-style: italic; }
.cn-price-why { margin: .5rem 0; }
.cn-price-why summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; }
.cn-chip { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem; cursor: pointer; }
.cn-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cn-chip:has(input:checked) { background: var(--color-accent); color: var(--color-on-accent); }
.cn-chip:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.cn-chip small { margin-left: .35rem; }
.cn-sub { margin: .8rem 0 .3rem; font-size: 1rem; }
.tg-add { display: flex; flex-wrap: wrap; gap: .6rem .8rem; align-items: end; margin-top: .8rem; }
.tg-add .tg-pick { flex: 1 1 14rem; min-width: 12rem; }
.tg-add .tg-value { flex: 1 1 14rem; min-width: 12rem; }
.tg-add .tg-value[hidden] { display: none; }
.menu-badge:not(:empty) { margin-left: auto; min-width: 1.4rem; padding: 0 .4rem; text-align: center; border-radius: 999px; background: var(--color-accent); color: var(--color-on-accent); font-size: .75rem; font-weight: 700; }
.cm-list { display: grid; gap: .6rem; margin-block: .6rem 1rem; }
.cm-msg { border: 1px solid var(--color-border); border-left: 5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: .6rem .9rem; max-width: 46rem; }
.cm-msg.cm-mine { border-left-color: var(--color-accent); margin-left: auto; }
.cm-msg header { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.cm-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: .3rem 0 0; }
.cm-gone { border-left-style: dashed; }
.cm-hide { margin-top: .3rem; }
.cm-files { list-style: none; display: grid; gap: .4rem; margin: .5rem 0 0; padding: 0; }
.cm-file { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; }
.cm-view { min-height: 44px; display: inline-flex; align-items: center; padding-inline: .9rem; text-decoration: none; }
.cm-attach { margin-top: 1rem; }
.cm-attach > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.cm-pick-files { display: grid; gap: .35rem; margin-block: .6rem .2rem; }
.cm-pick-files input[type=file] { min-height: 44px; max-width: 100%; padding: .55rem .6rem; border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); }
.cm-subject { min-height: 44px; margin-block: .4rem; }
.cm-people { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.cm-presence { font-size: .8rem; color: var(--color-text-muted); }
.cm-presence.cm-online::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .3rem; border-radius: 50%; background: var(--color-accent); }
.cm-typing { min-height: 1.2rem; margin: 0 0 .3rem; }
.cm-toast { position: fixed; right: 1rem; bottom: calc(1rem + var(--env-banner-h)); z-index: 50; padding: .8rem 1.1rem; border: 1px solid var(--color-border); border-left: 5px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--color-text) 55%, transparent); }
.cm-toast a { color: var(--color-accent-text); font-weight: 600; }
.room-frame { display: block; width: 100%; min-height: 26rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.visit-timer { font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 700; }

/* Pricing: a long choice in a select never pushes the page sideways */
#pr-propose-price select, #pr-propose-adjustment select, #pr-why-form select { max-width: 100%; text-overflow: ellipsis; }
/* Patient messages (the token page): the standing not-for-emergencies note and the sign-out link sit in the header, quietly. */
.pm-emergency { margin: 0; padding: .6rem .9rem; border: 1px solid var(--color-border); border-left: 5px solid var(--color-danger-text); border-radius: var(--radius-md); background: var(--color-surface); }
.pm-links { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin: .2rem 0 0; }
.pm-out { display: inline; margin: 0; }
.tap { display: inline-flex; align-items: center; min-height: 1.75rem; }       /* a link on its own line is at least 24px tall whatever the font: the target-size rule (found on Linux, where the fallback font is smaller) */

/* The patient's call */
.room-call { max-width: 80rem; }
.room-call .room-frame { height: 72vh; min-height: 24rem; border: 0; border-radius: var(--radius-2, 12px); }

/* Billing */
.bl-table td, .bl-table th { font-variant-numeric: tabular-nums; }
.bl-table tfoot th, .bl-table tfoot td { border-top: 2px solid var(--color-border); font-weight: 600; }
.bl-loss { color: var(--color-danger-text); }
.bl-checks { border: 0; padding: 0; margin: .6rem 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.bl-checks legend { font-weight: 600; padding: 0; margin-bottom: .2rem; }
.bl-clinics { margin: .6rem 0; }
.bl-clinics .bl-checks { max-height: 14rem; overflow: auto; }
.bl-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.bp-form { display: grid; gap: .4rem; min-width: 14rem; }
.bp-section { margin-top: 1.5rem; }
@media (max-width: 40rem) {
  .bl-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; }
  .bl-table tfoot th { padding-top: .6rem; }
}

/* Organization settings: the "use the organization's value" disclosure under a clinic's own setting */
.setting-source { margin-top: .25rem; }
.reset-setting { display: block; margin-top: .35rem; }
.reset-setting > summary { cursor: pointer; display: inline-block; text-decoration: underline; text-underline-offset: 2px; }
.reset-setting > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.reset-setting form { margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); max-width: 28rem; }

/* the patient portal's change-your-details page */
.pd-item { padding: var(--space-2) 0; border-bottom: 1px solid var(--line, rgba(127, 127, 127, 0.25)); }
.pd-more > summary { cursor: pointer; display: inline-block; min-height: 24px; min-width: 24px; padding: 4px 0; }
.pd-more[open] > form { margin-top: var(--space-2); }
.one-time-key { user-select: all; word-break: break-all; }          /* the partner API key shown once: one click selects all of it, and it wraps on a phone */

/* The provider's big on/off switch on the Visits desk (both looks; the old look restyles it in looks/old-video.css). The colors are tokens (--color-live-*), the state is always in words and an icon, and the whole bar is the target. */
.presence { margin: 0 0 var(--space-4); }
.presence-form { margin: 0; }
.presence-switch { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: 5.5rem; padding: var(--space-4) var(--space-5); border: 0; border-radius: var(--radius-lg); cursor: pointer; text-align: left; font: inherit;
  color: var(--color-live-fg); background: var(--color-live-off); box-shadow: var(--shadow-card); transition: filter var(--motion) var(--ease); }
.presence-online .presence-switch { background: var(--color-live-on); }
.presence-offline .presence-switch { background: var(--color-live-off); }
.presence-away .presence-switch { background: var(--color-live-away); }
.presence-switch:hover { filter: brightness(1.1); }
.presence-switch:active { filter: brightness(.95); }
.presence-switch:focus-visible { outline: 4px solid var(--color-focus); outline-offset: 3px; }
.presence-icon { display: inline-flex; flex: none; }
.presence-icon svg { width: 2.75rem; height: 2.75rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.presence-words { display: grid; gap: .2rem; flex: 1; min-width: 0; }
.presence-state { font-size: clamp(1.2rem, 1rem + 2vw, 2rem); font-weight: 800; letter-spacing: .02em; line-height: 1.15; text-transform: uppercase; overflow-wrap: anywhere; }
.presence-action { font-size: 1rem; font-weight: 600; }
.presence-onoff { font-size: 1.15rem; font-weight: 800; letter-spacing: .1em; flex: none; }
.presence-track { display: flex; align-items: center; flex: none; width: 4.4rem; height: 2.4rem; padding: 3px; border: 3px solid currentColor; border-radius: 999px; }
.presence-knob { width: 1.55rem; height: 1.55rem; border-radius: 50%; background: currentColor; }
.presence-online .presence-track { justify-content: flex-end; }
.presence-help { margin: var(--space-2) 0 0; color: var(--color-text-muted); }
@media (max-width: 30rem) {
  .presence-switch { flex-wrap: wrap; padding: var(--space-4); gap: var(--space-3); }
  .presence-icon svg { width: 2.25rem; height: 2.25rem; }
  .presence-words { flex-basis: calc(100% - 3.5rem); }
}
@media (prefers-reduced-motion: reduce) { .presence-switch { transition: none; } }
/* the Offline screen of the provider's desk (new look; Provider offline screen, 2026-10-23) */
.offline-screen { display: grid; justify-items: start; gap: var(--space-3); }
.offline-screen h2, .offline-screen p { margin: 0; }
.offline-screen .vo-form { margin: 0; }
.offline-screen .btn[disabled], .presence-switch[disabled] { opacity: .6; cursor: not-allowed; }

/* Admin > Async review (2026-10-25 layout fix), new look only. The filter is one row at desktop width (the search box wide enough for its floating label, the box, the select and the button one height, sitting on one baseline) and a column on a phone;
   in a row of change the Why box and the buttons are one row (the box takes what is left, the buttons are one size) and wrap as a whole on a narrow screen. Scoped to this page's ids: the other pages that use .cn-filter and .inline-actions keep their own look. */
:root:not([data-look="old"]) #ar-filter { --ar-h: 2.75rem; gap: .8rem 1rem; align-items: end; }
:root:not([data-look="old"]) #ar-filter .field { margin: 0; flex: 1 1 20rem; min-width: min(20rem, 100%); max-width: 32rem; }
:root:not([data-look="old"]) #ar-filter .select-field { flex: 0 1 12rem; min-width: 9rem; }
:root:not([data-look="old"]) #ar-filter .field input, :root:not([data-look="old"]) #ar-filter select { box-sizing: border-box; height: var(--ar-h); padding-block: 0; }
:root:not([data-look="old"]) #ar-filter .field.float > span { top: calc(var(--ar-h) / 2 - .75em); white-space: nowrap; max-width: calc(100% - 1.5rem); overflow: hidden; text-overflow: ellipsis; }
:root:not([data-look="old"]) #ar-filter .btn { box-sizing: border-box; height: var(--ar-h); display: inline-flex; align-items: center; justify-content: center; padding-block: 0; }
:root:not([data-look="old"]) #ar-filter > a { display: inline-flex; align-items: center; min-height: var(--ar-h); }
@media (max-width: 40rem) {
  :root:not([data-look="old"]) #ar-filter { flex-direction: column; align-items: stretch; }
  :root:not([data-look="old"]) #ar-filter .field, :root:not([data-look="old"]) #ar-filter .select-field { flex: none; min-width: 0; max-width: none; }
  :root:not([data-look="old"]) #ar-filter .btn { align-self: flex-start; }
}
:root:not([data-look="old"]) #ar-accounts .inline-actions, :root:not([data-look="old"]) #ar-clinics .inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; min-width: 14rem; }
:root:not([data-look="old"]) #ar-accounts input[name=reason], :root:not([data-look="old"]) #ar-clinics input[name=reason] {
  flex: 1 1 8rem; min-width: 7rem; box-sizing: border-box; height: 2.25rem; padding: 0 .6rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: .9rem; }
:root:not([data-look="old"]) #ar-accounts .ar-btns, :root:not([data-look="old"]) #ar-clinics .ar-btns { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .4rem; }
:root:not([data-look="old"]) #ar-accounts .ar-btns .btn, :root:not([data-look="old"]) #ar-clinics .ar-btns .btn { box-sizing: border-box; min-height: 2.25rem; justify-content: center; white-space: nowrap; }
@media (min-width: 64rem) {          /* wide enough for the table to sit in the page: the row does not wrap, so the cell of change is as wide as its row needs (the box and both buttons on one line) in WHATEVER font the machine has, and the text columns beside it give way; below that the row wraps as a whole. (A fixed reservation of 25.5rem was enough in the Mac's system font and too little in DejaVu Sans, the usual Linux fallback: the buttons dropped under the box.) */
  :root:not([data-look="old"]) #ar-accounts .inline-actions, :root:not([data-look="old"]) #ar-clinics .inline-actions { flex-wrap: nowrap; }
}