/* ============================================================================
om-kit.css - the om-* component layer.
Ported from docs/design-system/kit/css/{surfaces,controls,forms,data,overlay}.css
with every physical directional property converted to a logical one
(CLAUDE.md rule 5, docs/design-system/README.md conflict 6).
Port rationale, the conversions applied and the kit-vs-spec conflict
resolutions live in docs/design-system/kit-port-notes.md - not here, so the
delivered stylesheet stays inside its byte budget without a build step.
Depends on om-tokens.css (all custom properties) and om-base.css (keyframes,
reset, .om-num/.om-mono/.om-scroll/.om-flip). Declares no custom property at
document root scope. navigation.css is deliberately NOT ported (D5).
========================================================================= */
/* ============================ SURFACES ============================ */
.om-card{position:relative;display:flex;flex-direction:column;background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);transition:var(--t-elevate),border-color var(--motion-fast) var(--ease-out)}
.om-card--pad{padding:var(--pad-card)}
.om-card--pad-lg{padding:var(--pad-card-lg)}
.om-card--pad-sm{padding:var(--pad-card-sm)}
.om-card--flush{padding:0}
.om-card--radius-md{border-radius:var(--radius-xl)}
.om-card--sunken{background:var(--surface-sunken);box-shadow:none}
.om-card--ghost{background:transparent;border-color:var(--border-light);box-shadow:none}
.om-card--inverse{background:var(--gradient-ink);border-color:transparent;color:var(--text-inverse)}
.om-card--inverse .om-card__title,.om-card--inverse h1,.om-card--inverse h2,.om-card--inverse h3,.om-card--inverse h4{color:var(--text-inverse)}
.om-card--brand{background:var(--gradient-primary);border-color:transparent;color:var(--text-inverse);box-shadow:var(--glow-md)}
.om-card--interactive{cursor:pointer}
.om-card--interactive:hover{transform:translateY(var(--lift-3));box-shadow:var(--card-shadow-hover);border-color:var(--blue-200)}
.om-card--interactive:active{transform:translateY(-1px);box-shadow:var(--shadow-sm);transition-duration:var(--motion-fast)}
.om-card--interactive:focus-visible{outline:none;box-shadow:var(--card-shadow-hover),var(--shadow-ring)}
.om-card--glow{border-color:var(--blue-200);box-shadow:var(--shadow-sm),var(--glow-sm)}
.om-card--glow:hover{box-shadow:var(--shadow-lg),var(--glow-md)}
.om-card--selected{border-color:var(--primary);box-shadow:var(--shadow-sm),var(--glow-ring)}
.om-card--rail::before{content:"";position:absolute;inset:0 0 auto 0;height:var(--rail-h);border-radius:var(--card-radius) var(--card-radius) 0 0;background:var(--om-rail,var(--blue-500))}
.om-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--pad-card) var(--pad-card) 0}
.om-card--flush>.om-card__head{padding:var(--pad-card) var(--pad-card) 0}
.om-card__title{font:var(--type-card-title);letter-spacing:var(--ls-tight);color:var(--text-primary);margin:0}
.om-card__subtitle{font:var(--type-caption);color:var(--text-muted);margin-top:var(--space-05)}
.om-card__body{padding:var(--pad-card)}
.om-card__foot{display:flex;align-items:center;gap:var(--space-3);padding:0 var(--pad-card) var(--pad-card)}
.om-section-title{display:flex;align-items:center;gap:var(--space-2);font:var(--type-overline);letter-spacing:var(--ls-caps-wide);text-transform:uppercase;color:var(--text-muted)}
.om-divider{height:var(--hairline);background:var(--divider);border:0;margin:0}
.om-divider--v{width:var(--hairline);height:auto;align-self:stretch}
.om-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow:hidden}
.om-skel-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--pad-cell-y) 0}
.om-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-7) var(--space-5);text-align:center}
.om-empty__glyph{display:grid;place-items:center;width:64px;height:64px;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--blue-500);font-size:var(--icon-empty)}
/* .om-denied__title joins here rather than repeating the declaration: the denied
state IS an empty state that names a role, and om-denied is derived from this
block (see PERMISSION DENIED below). One rule, so they cannot drift. */
.om-empty__title,.om-denied__title{font:var(--type-card-title);color:var(--text-primary)}
.om-empty__text{font:var(--type-body);color:var(--text-muted);max-width:38ch}
/* The action that resolves the emptiness. DESIGN-LANGUAGE.md: never ship an
empty state without an icon, a sentence, and that action — so it gets a slot
of its own instead of leaning on the parent gap. */
.om-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-top:var(--space-1)}
/* Lane — the reception board wants ONE muted line inside a column that is
already narrow, so the illustration is dropped rather than shrunk. */
.om-empty--lane{padding:var(--space-4) var(--space-3)}
.om-empty--lane .om-empty__glyph{display:none}
.om-empty--lane .om-empty__title{font:var(--type-caption);color:var(--text-faint)}
/* ---------------------------- BUTTON ---------------------------- */
.om-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
height:var(--control-h);padding:0 var(--space-4);border-radius:var(--radius-md);
font:var(--type-button);letter-spacing:var(--ls-base);white-space:nowrap;
border:1px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;
transition:transform var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease-out),var(--t-color)}
.om-btn:disabled,.om-btn[aria-disabled="true"]{cursor:not-allowed;transform:none !important;box-shadow:none !important}
.om-btn__label{position:relative;z-index:var(--z-local-2);display:inline-flex;align-items:center;gap:var(--space-2)}
.om-btn__sheen{position:absolute;inset:0;z-index:var(--z-local-1);pointer-events:none;background:var(--gradient-sheen);transform:translateX(-120%);opacity:0}
.om-btn:hover .om-btn__sheen{animation:om-sheen 620ms var(--ease-out);opacity:1}
.om-btn:disabled .om-btn__sheen{animation:none;opacity:0}
/* Trailing arrow nudges 3px along the inline axis on hover. Conversion 12. */
.om-btn__trail{--om-nudge-dir:-3px}
[dir="ltr"] .om-btn__trail{--om-nudge-dir:3px}
.om-btn:hover .om-btn__trail{animation:om-nudge-inline 500ms var(--ease-out)}
@keyframes om-nudge-inline{0%,100%{transform:translateX(0)}50%{transform:translateX(var(--om-nudge-dir))}}
.om-btn--sm{height:var(--control-h-sm);padding:0 var(--space-3);font-size:var(--fs-xs);border-radius:var(--radius-sm);gap:var(--space-2)}
.om-btn--lg{height:var(--control-h-lg);padding:0 var(--space-5);font-size:var(--fs-base)}
.om-btn--block{width:100%}
.om-btn--pill{border-radius:var(--radius-pill)}
.om-btn--primary{background:var(--gradient-primary);color:var(--text-inverse);box-shadow:var(--elev-cta)}
.om-btn--primary:hover{transform:translateY(var(--lift-2));box-shadow:var(--elev-cta-hover)}
.om-btn--primary:active{transform:translateY(0) scale(var(--press-scale));box-shadow:var(--glow-sm);transition-duration:var(--motion-fast)}
.om-btn--primary:focus-visible{outline:none;box-shadow:var(--elev-cta),var(--shadow-ring)}
.om-btn--primary:disabled{background:var(--surface-disabled);color:var(--text-disabled)}
.om-btn--secondary{background:var(--surface);color:var(--text-primary);border-color:var(--border);box-shadow:var(--shadow-sm)}
.om-btn--secondary:hover{border-color:var(--blue-300);color:var(--text-brand);background:var(--blue-50);transform:translateY(var(--lift-1));box-shadow:var(--shadow-sm),var(--glow-xs)}
.om-btn--secondary:active{transform:scale(var(--press-scale-subtle));background:var(--blue-100)}
.om-btn--secondary:disabled{background:var(--surface-disabled);color:var(--text-disabled);border-color:transparent}
.om-btn--ghost{background:transparent;color:var(--text-secondary)}
.om-btn--ghost:hover{background:var(--blue-50);color:var(--text-brand)}
.om-btn--ghost:active{background:var(--blue-100);transform:scale(var(--press-scale-subtle))}
.om-btn--ghost:disabled{color:var(--text-disabled);background:transparent}
.om-btn--soft{background:var(--blue-50);color:var(--blue-700);border-color:transparent}
.om-btn--soft:hover{background:var(--blue-100);transform:translateY(var(--lift-1));box-shadow:var(--glow-xs)}
.om-btn--soft:active{transform:scale(var(--press-scale-subtle));background:var(--blue-200)}
.om-btn--inverse{background:var(--surface-inverse);color:var(--text-inverse)}
.om-btn--inverse:hover{transform:translateY(var(--lift-2));box-shadow:var(--shadow-lg)}
.om-btn--inverse:active{transform:scale(var(--press-scale))}
/* The kit cast this shadow in ITS OWN red, a hue the product does not use --
not --danger. --glow-danger is the palette's own expression of exactly this
shadow, so the rest state takes the token rather than re-deriving it. */
.om-btn--danger{background:var(--danger);color:var(--text-inverse);box-shadow:var(--glow-danger)}
.om-btn--danger:hover{background:var(--danger);transform:translateY(var(--lift-2));box-shadow:var(--glow-danger)}
.om-btn--danger:active{transform:scale(var(--press-scale))}
.om-btn--danger-ghost{background:transparent;color:var(--danger)}
.om-btn--danger-ghost:hover{background:var(--danger-soft)}
/* Same defect on the success side: the kit's green, not --success. */
.om-btn--success{background:var(--success);color:var(--text-inverse);box-shadow:var(--glow-success)}
.om-btn--success:hover{background:var(--success);transform:translateY(var(--lift-2));box-shadow:var(--glow-success)}
.om-btn--success:active{transform:scale(var(--press-scale))}
.om-btn--loading{pointer-events:none}
.om-btn--loading .om-btn__label{opacity:.35}
.om-btn__spinner{position:absolute;inset:0;z-index:var(--z-local-3);display:grid;place-items:center}
.om-btn__spinner i{display:block;width:16px;height:16px;border-radius:var(--radius-pill);border:2px solid currentColor;border-top-color:transparent;animation:om-spin 620ms var(--ease-linear) infinite}
.om-btn--attention{animation:om-glow-breathe var(--motion-ambient) var(--ease-in-out) infinite}
.om-btn--attention:hover{animation:none}
/* -------------------------- ICON BUTTON -------------------------- */
.om-iconbtn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-md);
color:var(--text-secondary);background:transparent;border:1px solid transparent;cursor:pointer;
transition:transform var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease-out),var(--t-color)}
.om-iconbtn:hover{background:var(--blue-50);color:var(--text-brand);transform:translateY(var(--lift-1))}
.om-iconbtn:active{transform:scale(var(--press-scale));background:var(--blue-100)}
.om-iconbtn:disabled{color:var(--text-disabled);background:transparent;cursor:not-allowed;transform:none}
.om-iconbtn--sm{width:32px;height:32px;border-radius:var(--radius-sm)}
.om-iconbtn--lg{width:48px;height:48px}
.om-iconbtn--round{border-radius:var(--radius-pill)}
.om-iconbtn--outline{border-color:var(--border);background:var(--surface);box-shadow:var(--shadow-sm)}
.om-iconbtn--outline:hover{border-color:var(--blue-300);box-shadow:var(--shadow-sm),var(--glow-xs)}
.om-iconbtn--solid{background:var(--gradient-primary);color:var(--text-inverse);box-shadow:var(--elev-cta)}
.om-iconbtn--solid:hover{background:var(--gradient-primary);color:var(--text-inverse);box-shadow:var(--elev-cta-hover);transform:translateY(var(--lift-2))}
.om-iconbtn--tint{background:var(--blue-50);color:var(--blue-600)}
.om-iconbtn--danger:hover{background:var(--danger-soft);color:var(--danger)}
.om-iconbtn__dot{position:absolute;top:var(--space-15);inset-inline-end:var(--space-15);width:8px;height:8px;border-radius:var(--radius-pill);background:var(--danger);box-shadow:0 0 0 2px var(--surface)}
.om-iconbtn__count{position:absolute;top:var(--space-05);inset-inline-end:var(--space-05);min-width:17px;height:17px;padding:0 var(--space-1);border-radius:var(--radius-pill);
background:var(--danger);color:var(--text-inverse);font:var(--fw-bold) var(--fs-2xs)/17px var(--font-sans);text-align:center;box-shadow:0 0 0 2px var(--surface)}
/* ----------------------------- BADGE ----------------------------- */
.om-badge{display:inline-flex;align-items:center;gap:var(--space-15);height:24px;padding:0 var(--space-3);border-radius:var(--radius-pill);
font:var(--fw-bold) var(--fs-2xs)/1 var(--font-sans);letter-spacing:.005em;white-space:nowrap;
background:var(--n-100);color:var(--text-secondary);border:1px solid transparent;transition:var(--t-all)}
/* The ramp is 8 / 12 / 16 — one --space rung per size. It used to be 8 / 10 / 12,
and when the base's frozen 10px went onto --space-3 it landed on --lg's 12px and
the two became the same declaration: a --lg badge had a default badge's side
padding in a taller box, and the --lg rule was a no-op a later edit would change
with no effect. Moving --lg up a rung restores a real three-step ramp. */
.om-badge--lg{height:28px;padding:0 var(--space-4);font-size:var(--fs-xs)}
.om-badge--sm{height:20px;padding:0 var(--space-2);font-size:var(--fs-2xs);gap:var(--space-1)}
.om-badge--square{border-radius:var(--radius-sm)}
.om-badge__dot,.om-chip__dot{width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor;flex:none;opacity:.9}
.om-badge--lg .om-badge__dot{width:7px;height:7px}
.om-badge__icon{font-size:var(--icon-micro);margin-inline-start:calc(var(--space-05) * -1)}
.om-badge--pulse .om-badge__dot,.om-chip--pulse .om-chip__dot{animation:om-breathe 1800ms var(--ease-in-out) infinite}
.om-badge--ring{box-shadow:0 0 0 3px var(--om-badge-ring,var(--blue-a12))}
.om-badge--outline{background:transparent;border-color:currentColor}
.om-badge--stable{background:var(--st-completed-bg);color:var(--st-completed-fg)}
.om-badge--observation{background:var(--st-arrived-bg);color:var(--st-arrived-fg)}
.om-badge--critical{background:var(--st-cancelled-bg);color:var(--st-cancelled-fg)}
.om-badge--deceased{background:var(--st-no-show-bg);color:var(--st-no-show-fg)}
.om-badge--waiting{background:var(--st-arrived-bg);color:var(--st-arrived-fg)}
.om-badge--ready{background:var(--st-scheduled-bg);color:var(--st-scheduled-fg)}
.om-badge--inroom{background:var(--st-in-progress-bg);color:var(--st-in-progress-fg)}
.om-badge--done{background:var(--st-completed-bg);color:var(--st-completed-fg)}
.om-badge--noshow{background:var(--st-no-show-bg);color:var(--st-no-show-fg)}
.om-badge--paid{background:var(--pay-paid-bg);color:var(--pay-paid-fg)}
.om-badge--due{background:var(--pay-due-bg);color:var(--pay-due-fg)}
.om-badge--partial{background:var(--pay-partial-bg);color:var(--pay-partial-fg)}
.om-badge--insured{background:var(--pay-insured-bg);color:var(--pay-insured-fg)}
/* Semantic tones. PORT SUPPLEMENT: the source kit shipped only --brand/--neutral/--ink,
but config/vocabulary.php's non-appointment domains (severity, subscription, activity,
stock movement) speak in success/warning/danger. Same soft-tint contract as --paid/--due
/--partial, which are these three tokens under domain names. */
.om-badge--success{background:var(--success-soft);color:var(--success-ink)}
.om-badge--warning{background:var(--warning-soft);color:var(--warning-ink)}
.om-badge--danger{background:var(--danger-soft);color:var(--danger-ink)}
.om-badge--brand{background:var(--blue-50);color:var(--blue-700)}
.om-badge--neutral{background:var(--n-100);color:var(--n-600)}
.om-badge--ink{background:var(--n-900);color:var(--text-inverse)}
/* ---------------------------- AVATAR ---------------------------- */
.om-avatar{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--avatar-md);height:var(--avatar-md);
border-radius:var(--radius-pill);background:var(--blue-100);color:var(--blue-700);overflow:visible;
font:var(--fw-bold) var(--fs-xs)/1 var(--font-sans);white-space:nowrap;transition:var(--t-elevate)}
.om-avatar>img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.om-avatar--xs{width:var(--avatar-xs);height:var(--avatar-xs);font-size:var(--fs-2xs)}
.om-avatar--sm{width:var(--avatar-sm);height:var(--avatar-sm);font-size:var(--fs-xs)}
.om-avatar--lg{width:var(--avatar-lg);height:var(--avatar-lg);font-size:var(--fs-base)}
.om-avatar--xl{width:var(--avatar-xl);height:var(--avatar-xl);font-size:var(--fs-2xl)}
.om-avatar--square{border-radius:var(--radius-lg)}
/* Gender tint + glyph (T8) — the patient "photo", because the system stores no
portraits. This retires the parallel .gender-avatar family in om-clinic.css and
design-tokens.css, which declared its own 38/32/56/88 ramp for what is the same
component; the avatar ramp above is now the only one. Decorative by design — the
accessible identity is the patient's name beside it and x-gender-chip's label,
never this tint alone.
The glyph sizes off the BOX, not off the avatar's own font-size: that font-size
is scaled for two initials, and a fa- glyph set from it renders about half the
size the square was drawn for. */
Radius is --tile, not the existing --square: --square is --radius-lg, which on a
40px box is a 40% corner and photographs as a circle, and round-vs-square is how
the product tells a staff avatar from a patient icon. --tile keeps the source
ramp (--radius-md, stepping up to --radius-lg once the box is big enough to
carry it) so that distinction survives the merge. */
.om-avatar--tile{border-radius:var(--radius-md)}
.om-avatar--tile.om-avatar--lg,.om-avatar--tile.om-avatar--xl{border-radius:var(--radius-lg)}
.om-avatar__glyph{font-size:var(--fs-lg)}
.om-avatar--sm .om-avatar__glyph{font-size:var(--fs-base)}
.om-avatar--lg .om-avatar__glyph{font-size:var(--fs-2xl)}
.om-avatar--xl .om-avatar__glyph{font-size:var(--fs-4xl)}
.om-avatar--male{background:var(--gender-male-soft);color:var(--gender-male)}
.om-avatar--female{background:var(--gender-female-soft);color:var(--gender-female)}
.om-avatar--other{background:var(--gender-other-soft);color:var(--gender-other)}
.om-avatar--ring-tone{box-shadow:0 0 0 3px var(--surface),0 0 0 5px currentColor}
.om-avatar--ring{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--blue-200)}
.om-avatar--glow{box-shadow:0 0 0 3px var(--surface),var(--glow-sm)}
.om-avatar--interactive{cursor:pointer}
.om-avatar--interactive:hover{transform:translateY(var(--lift-1)) scale(var(--hover-scale));box-shadow:var(--shadow-md)}
.om-avatar__status{position:absolute;inset-inline-end:calc(var(--hairline) * -1);bottom:calc(var(--hairline) * -1);width:11px;height:11px;border-radius:var(--radius-pill);border:2px solid var(--surface);background:var(--n-300)}
.om-avatar--lg .om-avatar__status,.om-avatar--xl .om-avatar__status{width:14px;height:14px;border-width:3px}
.om-avatar__status--online{background:var(--success)}
.om-avatar__status--busy{background:var(--danger)}
.om-avatar__status--away{background:var(--warning)}
.om-avatar-stack{display:flex;align-items:center}
.om-avatar-stack>.om-avatar{margin-inline-start:calc(var(--space-2) * -1);box-shadow:0 0 0 2px var(--surface);transition:transform var(--motion-base) var(--ease-out)}
.om-avatar-stack>.om-avatar:first-child{margin-inline-start:0}
.om-avatar-stack:hover>.om-avatar{transform:translateY(var(--lift-2))}
/* ---------------------- SEGMENTED CONTROL ---------------------- */
.om-seg{position:relative;display:inline-flex;align-items:center;gap:var(--space-05);padding:var(--space-05);
background:var(--surface-sunken);border:1px solid var(--border-light);border-radius:var(--radius-md)}
/* see kit-port-notes.md: om-seg__thumb - om-form.js sets BOTH insets */
.om-seg__thumb{position:absolute;top:var(--space-05);bottom:var(--space-05);inset-inline-start:0;inset-inline-end:100%;border-radius:calc(var(--radius-md) - var(--space-05));background:var(--surface);
box-shadow:var(--shadow-sm),var(--ring-hairline-soft);
transition:inset-inline-start var(--motion-slow) var(--ease-spring),inset-inline-end var(--motion-slow) var(--ease-spring)}
.om-seg__btn{position:relative;z-index:var(--z-local-1);display:inline-flex;align-items:center;gap:var(--space-15);height:32px;padding:0 var(--space-3);
border-radius:calc(var(--radius-md) - var(--space-05));font:var(--fw-medium) var(--fs-xs)/1 var(--font-sans);color:var(--text-secondary);
white-space:nowrap;transition:var(--t-color)}
.om-seg__btn:hover{color:var(--text-primary)}
.om-seg__btn[aria-selected="true"]{color:var(--text-brand);font-weight:var(--fw-bold)}
.om-seg__count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 var(--space-15);border-radius:var(--radius-pill);
background:var(--n-200);color:var(--text-secondary);font:var(--fw-bold) var(--fs-2xs)/1 var(--font-sans);transition:var(--t-color)}
.om-seg__btn[aria-selected="true"] .om-seg__count{background:var(--blue-500);color:var(--text-inverse)}
.om-seg--lg .om-seg__btn{height:38px;padding:0 var(--space-4);font-size:var(--fs-sm)}
.om-seg--block{display:flex;width:100%}
.om-seg--block .om-seg__btn{flex:1;justify-content:center}
/* ============================= FORMS ============================= */
.om-field{display:flex;flex-direction:column;gap:var(--space-2)}
.om-field__label{display:flex;align-items:center;gap:var(--space-15);font:var(--type-label);color:var(--text-secondary);
padding-inline-start:var(--space-05);transition:var(--t-color)}
.om-field__label em{font-style:normal;color:var(--danger)}
.om-field:focus-within .om-field__label{color:var(--text-brand)}
.om-field__hint{font:var(--type-caption);color:var(--text-muted);padding-inline-start:var(--space-05)}
.om-field__msg{display:flex;align-items:center;gap:var(--space-15);font:var(--type-caption);padding-inline-start:var(--space-05);animation:om-rise-sm var(--motion-base) var(--ease-out)}
.om-field__msg--error{color:var(--danger)}
.om-field__msg--success{color:var(--success)}
.om-input{position:relative;display:flex;align-items:center;gap:var(--space-2);
height:var(--control-h);padding:0 var(--space-3);background:var(--surface);
border:1px solid var(--border);border-radius:var(--radius-md);
transition:border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-base) var(--ease-out),background-color var(--motion-fast) var(--ease-out)}
.om-input:hover{border-color:var(--border-strong)}
.om-input:focus-within{border-color:var(--primary);box-shadow:var(--glow-focus)}
.om-input>input,.om-input>select,.om-input>textarea{flex:1;min-width:0;width:100%;height:100%;border:0;outline:none;background:transparent;
font:var(--fw-medium) var(--fs-sm)/1.4 var(--font-sans);letter-spacing:var(--ls-base);color:var(--text-primary)}
.om-input__icon{flex:none;font-size:var(--icon-tab);color:var(--text-muted);transition:var(--t-color)}
.om-input:focus-within .om-input__icon{color:var(--text-brand)}
.om-input__affix{flex:none;font:var(--fw-medium) var(--fs-xs)/1 var(--font-sans);color:var(--text-muted)}
.om-input--sm{height:var(--control-h-sm);border-radius:var(--radius-sm);padding:0 var(--space-3)}
.om-input--sm>input{font-size:var(--fs-xs)}
.om-input--lg{height:var(--control-h-lg);border-radius:var(--radius-lg)}
.om-input--pill{border-radius:var(--radius-pill);padding:0 var(--space-4)}
.om-input--sunken{background:var(--surface-sunken);border-color:transparent}
.om-input--sunken:focus-within{background:var(--surface)}
.om-input--error{border-color:var(--danger)}
.om-input--error:focus-within{border-color:var(--danger);box-shadow:var(--glow-danger)}
.om-input--error .om-input__icon{color:var(--danger)}
.om-input--success{border-color:var(--success)}
.om-input--success:focus-within{border-color:var(--success);box-shadow:var(--glow-success)}
.om-input--disabled,.om-input--disabled:hover{background:var(--surface-disabled);border-color:transparent;box-shadow:none}
.om-input--disabled>input{color:var(--text-disabled);cursor:not-allowed}
.om-input--textarea{height:auto;min-height:104px;padding:var(--space-3) var(--space-3);align-items:flex-start}
.om-input--textarea>textarea{height:auto;min-height:80px;resize:vertical;line-height:var(--lh-base)}
.om-select{position:relative}
/* Clearance is DERIVED from the chevron it must clear, not guessed. The chevron
sits at inset-inline-end:var(--space-3) and is --icon-tile wide, so the text
has to stop one --space-1 before its far edge.
A plain --space-5 is wrong here twice over: it is density-remapped, so it shrank
to 17.6px at compact — the CLINICAL DEFAULT — and put the text 2.4px UNDER the
chevron; and even the old fixed 24px left only 5.2px, which the survey had
already flagged as too tight. Expressed as a relationship, it cannot drift again
if the chevron moves or grows. */
.om-select>select{appearance:none;-webkit-appearance:none;padding-inline-end:calc(var(--space-3) + var(--icon-tile) + var(--space-1));cursor:pointer}
.om-select__chev{position:absolute;inset-inline-end:var(--space-3);pointer-events:none;font-size:var(--icon-tile);color:var(--text-muted);
transition:transform var(--motion-base) var(--ease-out),color var(--motion-fast) var(--ease-out)}
.om-select:focus-within .om-select__chev{transform:rotate(180deg);color:var(--text-brand)}
.om-search{display:flex;align-items:center;gap:var(--space-3);height:44px;padding:0 var(--space-4);
background:var(--surface-sunken);border:1px solid transparent;border-radius:var(--radius-pill);
transition:var(--t-all)}
.om-search:hover{background:var(--n-100)}
.om-search:focus-within{background:var(--surface);border-color:var(--blue-200);box-shadow:var(--glow-focus)}
.om-search>input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:var(--fw-medium) var(--fs-sm)/1 var(--font-sans);color:var(--text-primary)}
.om-search__icon{font-size:var(--icon-tab);color:var(--text-muted);transition:var(--t-color)}
.om-search:focus-within .om-search__icon{color:var(--text-brand)}
.om-search__kbd{flex:none;padding:var(--space-05) var(--space-15);border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border);
font:var(--fw-bold) var(--fs-2xs)/1.4 var(--font-sans);color:var(--text-muted);box-shadow:var(--shadow-sm)}
.om-search:focus-within .om-search__kbd{opacity:0}
/* SCREEN-READER-ONLY. It lived in om-clinic.css, which is the APP sheet, while
the element that needs it is the real behind .om-check right below —
so a standalone page showing one checkbox had to link the whole app sheet for
this one rule. --hairline is the token for exactly this job: om-tokens.css
calls it "cancels a border, clips an a11y box".
Table captions and skip links read it here too. */
.visually-hidden{position:absolute!important;width:var(--hairline);height:var(--hairline);padding:0;margin:calc(var(--hairline) * -1);overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.om-check{display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer}
.om-check__box{position:relative;flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:var(--hairline);
border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);
transition:var(--t-all)}
.om-check:hover .om-check__box{border-color:var(--blue-400);box-shadow:var(--glow-xs)}
.om-check__box>i{font-size:var(--icon-btn);color:var(--text-inverse);opacity:0;transform:scale(.4);
transition:opacity var(--motion-fast) var(--ease-out),transform var(--motion-base) var(--ease-spring)}
.om-check input{position:absolute;opacity:0;width:0;height:0}
.om-check input:checked+.om-check__box{background:var(--gradient-primary);border-color:var(--blue-500);box-shadow:var(--glow-sm)}
.om-check input:checked+.om-check__box>i{opacity:1;transform:scale(1)}
.om-check input:indeterminate+.om-check__box{background:var(--gradient-primary);border-color:var(--blue-500)}
.om-check input:indeterminate+.om-check__box>i{opacity:1;transform:scale(1)}
.om-check input:focus-visible+.om-check__box{box-shadow:var(--glow-ring)}
.om-check input:disabled+.om-check__box{background:var(--surface-disabled);border-color:var(--border);box-shadow:none}
.om-check__text{font:var(--type-body);color:var(--text-primary)}
.om-check__text small{display:block;font:var(--type-caption);color:var(--text-muted);margin-top:var(--hairline)}
.om-check--disabled{cursor:not-allowed}
.om-check--disabled .om-check__text{color:var(--text-disabled)}
.om-radio{display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer}
.om-radio__box{position:relative;flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:var(--hairline);
border:1.5px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface);transition:var(--t-all)}
.om-radio:hover .om-radio__box{border-color:var(--blue-400);box-shadow:var(--glow-xs)}
.om-radio__box::after{content:"";width:8px;height:8px;border-radius:var(--radius-pill);background:var(--text-inverse);
transform:scale(0);transition:transform var(--motion-base) var(--ease-spring)}
.om-radio input{position:absolute;opacity:0;width:0;height:0}
.om-radio input:checked+.om-radio__box{background:var(--gradient-primary);border-color:var(--blue-500);box-shadow:var(--glow-sm)}
.om-radio input:checked+.om-radio__box::after{transform:scale(1)}
.om-radio input:focus-visible+.om-radio__box{box-shadow:var(--glow-ring)}
.om-radio input:disabled+.om-radio__box{background:var(--surface-disabled);border-color:var(--border);box-shadow:none}
.om-radio-card{position:relative;display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4) var(--space-4);
border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);cursor:pointer;transition:var(--t-all)}
.om-radio-card:hover{border-color:var(--blue-300);background:var(--blue-50)}
.om-radio-card--selected{border-color:var(--primary);background:var(--blue-50);box-shadow:var(--glow-ring)}
/* Live selection: the tile follows the radio without a reload; --selected is the SSR hint. */
.om-radio-card:has(input:checked){border-color:var(--primary);background:var(--blue-50);box-shadow:var(--glow-ring)}
.om-radio-card input{position:absolute;opacity:0;width:0;height:0}
.om-radio-card:hover .om-radio__box{border-color:var(--blue-400);box-shadow:var(--glow-xs)}
.om-radio-card input:checked+.om-radio__box{background:var(--gradient-primary);border-color:var(--blue-500);box-shadow:var(--glow-sm)}
.om-radio-card input:checked+.om-radio__box::after{transform:scale(1)}
.om-radio-card input:focus-visible+.om-radio__box{box-shadow:var(--glow-ring)}
/* Switch - kit geometry; the thumb travels the inline axis. Conversion 1. */
.om-switch{position:relative;display:inline-block;width:var(--switch-w);height:var(--switch-h);flex:none}
.om-switch input{position:absolute;opacity:0;width:0;height:0}
.om-switch__track{display:block;width:var(--switch-w);height:var(--switch-h);border-radius:var(--radius-pill);background:var(--n-200);
cursor:pointer;transition:background-color var(--motion-slow) var(--ease-out),box-shadow var(--motion-slow) var(--ease-out)}
.om-switch__track::before{content:"";position:absolute;top:50%;inset-inline-start:var(--space-05);width:var(--switch-thumb);height:var(--switch-thumb);border-radius:var(--radius-pill);background:var(--text-inverse);
transform:translateY(-50%);box-shadow:0 2px 5px var(--ink-a24);
transition:inset-inline-start var(--motion-slow) var(--ease-spring)}
.om-switch input:checked+.om-switch__track{background:var(--blue-500);box-shadow:var(--glow-sm)}
.om-switch input:checked+.om-switch__track::before{inset-inline-start:calc(var(--switch-w) - var(--switch-thumb) - var(--space-05))}
.om-switch input:focus-visible+.om-switch__track{box-shadow:var(--glow-ring)}
.om-switch input:disabled+.om-switch__track{background:var(--surface-disabled);cursor:not-allowed;box-shadow:none}
.om-switch--danger input:checked+.om-switch__track{background:var(--danger);box-shadow:var(--glow-danger)}
.om-switch--success input:checked+.om-switch__track{background:var(--success);box-shadow:var(--glow-success)}
.om-switchfield{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
padding:var(--space-4) var(--space-4);border-radius:var(--radius-md);transition:background-color var(--motion-fast) var(--ease-out)}
.om-switchfield:hover{background:var(--surface-hover)}
.om-switchfield__text{display:flex;flex-direction:column;gap:var(--space-05)}
.om-switchfield__title{font:var(--type-body-strong);color:var(--text-primary)}
.om-switchfield__desc{font:var(--type-caption);color:var(--text-muted);max-width:52ch}
.om-form-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(2,minmax(0,1fr))}
.om-form-grid--1{grid-template-columns:1fr}
/* Controls that belong on ONE line — a settle box beside its method select
beside its submit, in a table cell or a toolbar. align-items:flex-end so a
labelled field and a bare button share a baseline instead of the button
floating to the top of the taller control. */
.om-inlineform{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-2)}
.om-form-grid__full{grid-column:1/-1}
/* .om-form-grid's single-column branch moved into the block below the pager:
this region now has ONE mobile block, not three. */
/* ---------------------------- TABLE ---------------------------- */
/* The index archetype's card. Was .data-table in om-clinic.css (T9). overflow
is hidden so the rounded corner clips the sticky header; the clinical variant
deliberately does NOT get this card, because a row tooltip has to escape it. */
.om-tablecard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);overflow:hidden}
/* The clinical board. It differs from the admin card on the one property that
matters, `overflow`: a queue row opens tooltips that must escape it, and
--live drops the column widths to table-layout:fixed so no width produces a
scrollbar. Cells must not clip either; truncation belongs to the inner text.
Was .live-table in om-clinic.css, and THAT BLOCK IS NOT RETIRED: the two
dashboards still hand-roll `
` around a raw
. */
.om-tablecard--live{overflow:visible}
.om-tablecard--live .om-table{table-layout:fixed}
.om-tablecard--live .om-table td{overflow:visible}
.om-tablecard--live .om-table td>*{max-width:100%}
/* Responsive visibility, used by the table's card-list swap. Was .hide-mobile /
.only-mobile in om-clinic.css. `display:flex` on the mobile side is not a
generic choice — .om-cardlist IS a column flexbox and inherits it here.
THE DOUBLED CLASS IS LOAD-BEARING, NOT A TYPO. Written once (0,1,0) these
helpers lost to any LATER single-class rule that set `display` on the same
element, and one did: `.om-cardlist{display:flex}` sits ~110 lines below and
re-enabled the card list at EVERY width. MEASURED on /pharmacy/receivables at
1280 — .om-table-wrap display:block w=950 AND .om-cardlist display:flex w=950,
both visible, every row listed twice, each copy carrying its own settle form.
Position, not specificity, decided it, which is the trap a media query always
sets. Self-doubling lifts the pair to (0,2,0) so NO single-class rule can tie
or beat them from anywhere in any sheet, and the fix stops depending on where
the next component rule happens to land. gate-visibility-helpers.sh enforces
the doubling; un-double either line and it fails at commit. */
.om-hide-mobile.om-hide-mobile{display:block}
.om-only-mobile.om-only-mobile{display:none}
/* Always-on scroll wrapper. See kit-port-notes.md: om-table-wrap.
THE 360px RULE. A wide table scrolls INSIDE its own box; the PAGE never scrolls
sideways. overflow-x:auto alone does not deliver that: a grid or flex item's
min-width defaults to auto, so the wrapper is sized by its widest content and
pushes the document instead of scrolling. min-width:0 — plus max-width:100% for
the block-layout case, where the parent has no intrinsic width to constrain it
— is what makes the declared overflow actually take effect. */
.om-table-wrap{position:relative;width:100%;max-width:100%;min-width:0;overflow-x:auto}
/* Clinical boards opt OUT: table-layout:fixed + column dropping, so a row
tooltip can escape the row. See kit-port-notes.md: om-table-wrap. */
.om-table-wrap--fixed{overflow-x:visible}
.om-table{width:100%;border-collapse:separate;border-spacing:0;min-width:var(--om-table-min,0)}
.om-table--min-md{--om-table-min:720px}
.om-table--min-lg{--om-table-min:980px}
.om-table thead th{position:sticky;top:0;z-index:var(--z-local-2);background:var(--surface);
padding:var(--space-3) var(--pad-cell-x) var(--space-3);text-align:start;white-space:nowrap;
border-bottom:1px solid var(--border);
font:var(--type-overline);letter-spacing:var(--ls-caps-wide);text-transform:uppercase;color:var(--text-muted)}
.om-table thead th.om-th--sortable{cursor:pointer;user-select:none;transition:var(--t-color)}
.om-table thead th.om-th--sortable:hover{color:var(--text-brand)}
.om-th__inner{display:inline-flex;align-items:center;gap:var(--space-1)}
.om-th__caret{font-size:var(--icon-btn);opacity:0;margin-inline-start:calc(var(--space-05) * -1);
transition:opacity var(--motion-fast) var(--ease-out),transform var(--motion-base) var(--ease-out)}
.om-th--sortable:hover .om-th__caret{opacity:.45}
.om-th--sorted .om-th__caret{opacity:1;color:var(--text-brand)}
.om-th--sorted-desc .om-th__caret{transform:rotate(180deg)}
.om-table thead th.om-th--end,.om-table td.om-td--end{text-align:end}
.om-table thead th.om-th--center,.om-table td.om-td--center{text-align:center}
.om-table tbody td{padding:var(--pad-cell-y) var(--pad-cell-x);border-bottom:1px solid var(--border-light);
font:var(--type-body-sm);color:var(--text-primary);vertical-align:middle}
.om-table tbody tr{position:relative;transition:background-color var(--motion-fast) var(--ease-out)}
.om-table tbody tr:last-child td{border-bottom:0}
.om-table tbody tr.om-tr:hover{background:var(--blue-50)}
.om-table tbody tr.om-tr>td:first-child{position:relative}
.om-table tbody tr.om-tr>td:first-child::before{content:"";position:absolute;inset-inline-start:0;top:var(--space-15);bottom:var(--space-15);width:3px;
border-start-end-radius:var(--radius-2xs);border-end-end-radius:var(--radius-2xs);background:var(--blue-500);transform:scaleY(0);transform-origin:top;
transition:transform var(--motion-base) var(--ease-out)}
.om-table tbody tr.om-tr:hover>td:first-child::before{transform:scaleY(1)}
.om-table tbody tr.om-tr--selected{background:var(--surface-selected)}
.om-table tbody tr.om-tr--selected>td:first-child::before{transform:scaleY(1)}
.om-table tbody tr.om-tr--critical>td:first-child::before{background:var(--danger);transform:scaleY(1)}
.om-table tbody tr.om-tr--muted td{color:var(--text-muted)}
.om-table tbody tr.om-tr--muted .om-cell__name{color:var(--text-secondary)}
.om-table--compact tbody td{padding:var(--space-2) var(--pad-cell-x)}
.om-table--compact thead th{padding:var(--space-3) var(--pad-cell-x) var(--space-2)}
.om-cell-id{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.om-cell__name{font:var(--type-body-strong);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.om-cell__sub{font:var(--fw-regular) var(--fs-xs)/1.35 var(--font-sans);color:var(--text-muted);
font-variant-numeric:tabular-nums;white-space:nowrap}
.om-cell-stack{display:flex;flex-direction:column;gap:var(--space-05);min-width:0}
.om-cell-time{display:flex;flex-direction:column;gap:var(--space-05)}
.om-cell-time b{font:var(--type-body-strong);font-variant-numeric:tabular-nums;color:var(--text-primary)}
.om-cell-time span{font:var(--fw-regular) var(--fs-2xs)/1.3 var(--font-sans);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--ls-caps)}
.om-table__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;padding:var(--pad-card) var(--pad-card) var(--space-4)}
.om-table__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--pad-card);border-top:1px solid var(--border-light)}
.om-table__count{font:var(--type-caption);color:var(--text-muted)}
/* ---- PAGER (T9) — the index archetype's third control, after sort and filter.
Laravel rendered `->links()` through Paginator::useBootstrapFive(), so every
paginated screen in the app emitted .pagination/.page-item/.page-link and was
repainted by four rules in design-tokens.css plus two !important overrides in
doctor-mobile.css. The paginator VIEW is the single place that markup is
produced, so replacing it retires all six at once and no call site changes.
Targets are --tap-min: a pager is the one control a phone user aims at most
and the Bootstrap default was 36px wide with a 0.78rem label. */
.om-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-1);margin:0;padding:0;list-style:none}
/* The