/* Shared pieces of the old look's screens: sortable table headers, the row's "⋮" menu, pills, tabs, the modal and a board. Loaded after looks/old.css. Colors are tokens (see the token blocks of old.css). */
:root[data-look="old"] .old-sort { display: inline-flex; align-items: center; gap: .5rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
:root[data-look="old"] .old-sort:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
:root[data-look="old"] .old-arrows { display: inline-grid; line-height: .7; color: var(--color-text-muted); }
:root[data-look="old"] .old-arrow { display: block; font-size: .7rem; opacity: .6; }
:root[data-look="old"] .old-arrow.on { color: var(--old-ok-text); opacity: 1; }
:root[data-look="old"] .old-kebab { position: relative; display: inline-block; }
:root[data-look="old"] .old-kebab > summary { list-style: none; cursor: pointer; }
:root[data-look="old"] .old-kebab > summary::-webkit-details-marker { display: none; }
:root[data-look="old"] .old-round.small { width: 2rem; height: 2rem; border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: none; }
:root[data-look="old"] .old-kebab-menu { position: absolute; right: 0; top: 2.4rem; z-index: 25; min-width: 11rem; margin: 0; padding: .3rem 0; list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 4px 16px rgb(0 0 0 / .18); text-align: left; }
:root[data-look="old"] .old-kebab-menu a, :root[data-look="old"] .old-kebab-menu button, :root[data-look="old"] .old-kebab-menu span { display: block; width: 100%; padding: .55rem 1rem; border: 0; background: none; color: var(--color-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
:root[data-look="old"] .old-kebab-menu a:hover, :root[data-look="old"] .old-kebab-menu button:hover { background: var(--color-surface-2); }
:root[data-look="old"] .old-kebab-menu .off { color: var(--color-text-muted); cursor: not-allowed; }
/* Where a pop-up opens is decided by ui.js when it opens (2026-10-26): below its button as always; class "up" opens it above when the bottom of the visible part of the page would cut it; class "float" takes it out of every clipping box (a table's wrapper scrolls sideways, so it clips
   downward too) and places it in the window from --pop-l, --pop-t and --pop-w, no taller than --pop-h (then it scrolls). The row menu and the states drop-down (old-multi, in the clinic and operator screens) share this. */
:root[data-look="old"] .old-kebab.up > .old-kebab-menu { top: auto; bottom: 2.4rem; }
:root[data-look="old"] .oa-page .old-kebab.up > .old-kebab-menu { top: auto; bottom: -.3rem; }
:root[data-look="old"] .old-multi.up > .old-multi-list { top: auto; bottom: 2.9rem; }
:root[data-look="old"] .old-kebab.float > .old-kebab-menu, :root[data-look="old"] .old-multi.float > .old-multi-list { position: fixed; top: var(--pop-t, 0); left: var(--pop-l, 0); right: auto; bottom: auto; margin: 0; width: var(--pop-w, auto); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; }
:root[data-look="old"] .old-kebab.float > .old-kebab-menu { max-height: var(--pop-h, none); }
:root[data-look="old"] .old-multi.float > .old-multi-list { max-height: min(var(--pop-h, 18rem), 18rem); }
:root[data-look="old"] .old-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 600; background: var(--old-chip-bg); color: var(--old-chip-text); }
:root[data-look="old"] .old-pill.on { background: var(--old-ok-bg); color: var(--old-ok-text); }
:root[data-look="old"] .old-pill.off, :root[data-look="old"] .old-pill.warn { background: var(--old-off-bg); color: var(--old-off-text); }
:root[data-look="old"] .old-tabs { display: flex; gap: 0; margin: 1rem 0; border-bottom: 1px solid var(--color-border); }
:root[data-look="old"] .old-tabs a, :root[data-look="old"] .old-tabs button { padding: .7rem 1.2rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--color-text-muted); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
:root[data-look="old"] .old-tabs [aria-current="page"], :root[data-look="old"] .old-tabs [aria-selected="true"] { color: var(--old-chip-text); border-bottom-color: var(--color-accent); }
:root[data-look="old"] dialog.old-modal { width: min(46rem, 94vw); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); box-shadow: 0 12px 40px rgb(0 0 0 / .3); }
:root[data-look="old"] dialog.old-modal::backdrop { background: rgb(0 0 0 / .45); }
:root[data-look="old"] .old-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.4rem; border-bottom: 1px solid var(--color-border); font-size: 1.25rem; font-weight: 600; }
:root[data-look="old"] .old-modal-body { padding: 1.2rem 1.4rem; max-height: 70vh; overflow-y: auto; }
:root[data-look="old"] .old-modal-foot { display: flex; justify-content: flex-end; gap: .8rem; padding: 1rem 1.4rem; border-top: 1px solid var(--color-border); }
:root[data-look="old"] .old-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: 1rem; }
:root[data-look="old"] .old-column { display: flex; flex-direction: column; gap: .7rem; padding: .8rem; border-radius: var(--radius-lg); background: var(--color-surface-2); }
:root[data-look="old"] .old-column h2 { margin: 0 0 .3rem; font-size: 1rem; font-weight: 600; }
:root[data-look="old"] .old-card { padding: .8rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-card); }
:root[data-look="old"] .oicon { width: 1em; height: 1em; fill: currentColor; stroke: none; }
:root[data-look="old"] .credit-banner { border-color: var(--old-off-text); background: var(--old-off-bg); color: var(--old-off-text); }
:root[data-look="old"] .credit-banner-title { display: flex; align-items: center; gap: .5rem; }
:root[data-look="old"] .credit-banner-title .oicon { width: 1.2em; height: 1.2em; }
/* v1's "Select Clinic" dropdown (lane OLDLOCSWITCH): one piece on Results, Exams, White Label, Medication Management and Send Exam Invite; the label above the list as v1's Results drew it. Its own form (Exams, White Label) sits in the page's head row. */
:root[data-look="old"] .old-clinic-switch-form { display: flex; align-items: flex-end; gap: .6rem; margin: 0; }
:root[data-look="old"] .old-clinic-switch { flex: 0 1 16rem; min-width: 12rem; }
:root[data-look="old"] .old-clinic-switch label { display: grid; gap: .4rem; }
:root[data-look="old"] .old-clinic-switch select { box-sizing: border-box; width: 100%; min-width: 0; }