— they are all the same height. */
:root {
--amc-page-edge: 45px; /* screen edge → content */
--amc-gap: 15px; /* between cards */
--amc-card-pad: 25px; /* inside cards */
--amc-cols: 4;
--amc-page-max: none;
--amc-card-min: 260px; /* cards never get narrower than this — a row holds fewer cards instead (Navigation Lab) */
--amc-card-min-small: 150px; /* same for number cards (inside amc-grid--small) */
--amc-cell: 49px; /* one square (Squares Lab) */
--amc-cell-gap: 8px; /* between squares — and so between cards */
--amc-w-small: 3; /* number card: squares wide */
--amc-w-card: 4; /* card: squares wide (amc-span-2 = 2×, amc-span-all = 4×) */
--amc-group-gap: 24px; /* between different groups of panels */
--amc-chart-min: 120px; /* smallest a chart gets when it shrinks to fit its row */
}
.amc-page { box-sizing: border-box; width: 100%; max-width: none; margin: 0 auto; padding: var(--amc-page-edge); }
.amc-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--amc-gap); margin-bottom: var(--amc-space-block); }
.amc-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--amc-cell)); grid-auto-rows: auto; gap: var(--amc-cell-gap);
grid-auto-flow: row; justify-content: start; } /* square columns; rows are placed by amc-spacing.js */
.amc-grid > * { --amc-w: var(--amc-w-card); grid-column: span min(var(--amc-w), var(--amc-cols-now, 99)); min-width: 0; box-sizing: border-box; }
.amc-grid > .amc-small, .amc-grid--small > * { --amc-w: var(--amc-w-small); }
.amc-grid > .amc-span-2 { --amc-w: calc(var(--amc-w-card) * 2); } .amc-grid > .amc-span-all { --amc-w: calc(var(--amc-w-card) * 4); }
.amc-grid > .amc-is-measuring { align-self: start !important; min-height: 0 !important; } /* amc-spacing.js measures what's inside, then sets the rows */
.amc-grid + .amc-grid { margin-top: var(--amc-group-gap); }
.amc-grid > .amc-fit { display: flex; flex-direction: column; } /* a panel holding only an empty message: the message sits in the middle */
.amc-grid > .amc-fit > .amc-fit-grow { flex: 1; display: grid; align-content: center; }
.amc-card { padding: var(--amc-card-pad); box-sizing: border-box; min-width: 0; }
@media (max-width: 700px) { /* phone — amc-spacing.js makes the squares fill the width (6 across) */
:root { --amc-page-edge: 16px; --amc-gap: 12px; --amc-card-pad: 20px; --amc-cols: 2; --amc-card-min: 0px; --amc-card-min-small: 0px; }
}
/* AMC HMS — locked navigation (tuned in Navigation Lab, 25 Sept 2026).
PC: side bar that folds in & out and goes OVER the page when opened (the page never moves). Phone: bottom tab bar (first 4 pages + "More").
Pages: all 16. Current page: white pill. Bars: floating glass. Open side bar, phone tab bar, sheets: tinted glass (the normal glass, a little whiter). Side bar, tab bar, sheets: soft glass (a little more blur + grain).
Built by amc-nav.js — a page only calls amcNav({ current: 'patients' }). Load after amc-glass.css, amc-type.css, amc-icons.css, amc-interactions.css. */
:root {
--amc-nav-w: 240px; /* side bar open */
--amc-nav-w-icons: 72px; /* side bar folded (icons only) */
--amc-nav-inset: 15px; /* space around floating bars */
--amc-nav-item-h: 40px; /* page button height */
--amc-nav-gap: 4px; /* between page buttons */
--amc-nav-tab-h: 64px; /* phone tab bar */
--amc-nav-speed: 460ms;
--amc-nav-ease: cubic-bezier(.2,.8,.2,1);
}
/* The page makes room for the folded side bar only; opening it slides over the page */
body.amc-has-nav { padding-inline-start: calc(var(--amc-nav-w-icons) + var(--amc-nav-inset)); }
/* Tinted glass (same glass as everything else, a little whiter): the open side bar, the phone tab bar. The "More" sheet and the name tooltip use the pop-up glass (amc-glass-pop). */
.amc-side.is-open.amc-glass, .amc-tabs.amc-glass { background: var(--amc-glass-tint); }
/* Less colour split at the edges of the bars: side bar 0.15, phone tab bar 0.05 (the rest of the glass keeps 0.3) */
.amc-side { --amc-refraction-split: 0.15; }
.amc-tabs { --amc-refraction-split: 0.05; }
/* Page button */
.amc-nav-item { appearance: none; border: 0; background: none; margin: 0; text-align: start; text-decoration: none; box-sizing: border-box; display: flex; align-items: center; gap: 12px; height: var(--amc-nav-item-h); padding: 0 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
min-width: 0; overflow: hidden; font: 400 13px/1 var(--amc-font-body); letter-spacing: .01em; color: var(--amc-white-soft); position: relative; }
[dir="rtl"] .amc-nav-item { letter-spacing: 0; }
.amc-nav-item .amc-icon, .amc-tab .amc-icon { width: 20px; height: 20px; flex: none; color: inherit; }
.amc-nav-item .amc-nav-lbl { overflow: hidden; text-overflow: ellipsis; transition: opacity calc(var(--amc-nav-speed) * .6) var(--amc-nav-ease); }
.amc-nav-item[aria-current="page"], .amc-tab[aria-current="page"] { background: rgba(255,255,255,.92); color: #2b3a47; box-shadow: 0 2px 10px rgba(20,35,50,.15); } /* white pill */
/* PC: side bar */
.amc-side { position: fixed; z-index: 900; top: var(--amc-nav-inset); inset-inline-start: var(--amc-nav-inset); height: calc(100vh - var(--amc-nav-inset) * 2); width: var(--amc-nav-w-icons);
box-sizing: border-box; padding: 18px 12px; display: flex; flex-direction: column; gap: 14px; transition: width var(--amc-nav-speed) var(--amc-nav-ease); }
.amc-side.is-open { width: var(--amc-nav-w); }
.amc-side-head { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; }
.amc-side.is-open .amc-side-head { justify-content: space-between; padding: 0 6px 0 10px; }
.amc-logo { font: 500 17px/1 var(--amc-font-title); letter-spacing: .14em; color: #fff; white-space: nowrap; display: none; }
.amc-side.is-open .amc-logo { display: block; }
.amc-fold { all: unset; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--amc-white-soft); flex: none; }
.amc-fold:hover { background: rgba(255,255,255,.1); color: #fff; } .amc-fold:focus-visible { outline: 2px solid rgba(255,255,255,.9); }
.amc-fold .amc-icon { width: 18px; height: 18px; transform: rotate(-90deg); transition: transform var(--amc-nav-speed) var(--amc-nav-ease); } /* points into the page = "open" */
.amc-side.is-open .amc-fold .amc-icon { transform: rotate(90deg); } /* points back = "fold" */
[dir="rtl"] .amc-fold .amc-icon, [dir="rtl"].amc-side .amc-fold .amc-icon { transform: rotate(90deg); }
[dir="rtl"] .amc-side.is-open .amc-fold .amc-icon, [dir="rtl"].amc-side.is-open .amc-fold .amc-icon { transform: rotate(-90deg); }
.amc-side-list { display: grid; gap: var(--amc-nav-gap); overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 2px 4px; scrollbar-width: none; flex: 1; align-content: start; }
.amc-side-foot { display: grid; gap: var(--amc-nav-gap); padding-top: 12px; box-shadow: 0 -.5px 0 rgba(255,255,255,.2); }
.amc-side:not(.is-open) .amc-nav-item { padding: 0 calc((var(--amc-nav-w-icons) - 24px - 20px) / 2); }
.amc-side:not(.is-open) .amc-nav-lbl, .amc-side:not(.is-open) .amc-who-name { opacity: 0; pointer-events: none; }
.amc-who { display: flex; align-items: center; gap: 10px; padding: 4px 8px; min-height: 40px; white-space: nowrap; overflow: hidden; }
.amc-side:not(.is-open) .amc-who { padding: 4px calc((var(--amc-nav-w-icons) - 24px - 34px) / 2); }
.amc-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #2b3a47; font: 600 11px/1 var(--amc-font-body); letter-spacing: .04em; }
.amc-who-name { display: grid; gap: 4px; transition: opacity calc(var(--amc-nav-speed) * .6) var(--amc-nav-ease); }
.amc-who-name b { font: 500 12px/1 var(--amc-font-body); color: #fff; } .amc-who-name span { font: 400 11px/1 var(--amc-font-body); color: var(--amc-white-muted); }
/* Name tooltip for the folded side bar (on the top layer) */
.amc-nav-tip { position: fixed; padding: 8px 12px; border-radius: 999px; font: 400 12px/1 var(--amc-font-body); color: #fff; white-space: nowrap; pointer-events: none;
opacity: 0; transform: translateX(-4px); transition: opacity 200ms, transform 200ms; }
[dir="rtl"].amc-nav-tip { transform: translateX(4px); }
.amc-nav-tip.is-on { opacity: 1; transform: none; }
/* Phone: bottom tab bar + "More" sheet */
.amc-tabs { display: none; }
.amc-tab { all: unset; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 999px; font: 400 10px/1 var(--amc-font-body); color: var(--amc-white-soft); -webkit-tap-highlight-color: transparent; }
.amc-tab .amc-icon { width: 20px; height: 20px; }
.amc-sheet { position: fixed; box-sizing: border-box; padding: 8px; border-radius: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--amc-nav-gap);
opacity: 0; transform: translateY(8px) scale(.98); transform-origin: bottom; pointer-events: none;
transition: opacity var(--amc-dur-short, 300ms) var(--amc-nav-ease), transform var(--amc-dur-short, 300ms) var(--amc-nav-ease); }
.amc-sheet.is-open { opacity: 1; transform: none; pointer-events: auto; }
.amc-sheet .amc-nav-item { padding: 0 12px; }
@media (max-width: 700px) {
body.amc-has-nav { padding-inline-start: 0; padding-bottom: calc(var(--amc-nav-tab-h) + 24px); }
.amc-side { display: none; }
.amc-tabs { position: fixed; z-index: 900; left: 12px; right: 12px; bottom: 12px; height: var(--amc-nav-tab-h); box-sizing: border-box; padding: 6px; border-radius: 999px;
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
}
/* AMC HMS — locked dialogs (tuned in Dialog Lab, 25 Sept 2026).
Confirm, danger confirm (type the patient's name), form dialog, side panel. Tinted soft glass, like every pop-up.
Page behind: dim + blur. Main button last. Clicking outside does nothing (Esc or Cancel closes). Phone (≤ 700px): dialogs open from the bottom.
Built by amc-dialog.js on the top layer — pages call amcDialog.confirm / danger / form / panel. Load after amc-glass.css, amc-type.css, amc-buttons.css, amc-controls.css, amc-motion.css. */
:root {
--amc-dialog-w: 530px;
--amc-dialog-panel-w: 410px;
--amc-dialog-r: 28px;
--amc-dialog-pad: 25px;
--amc-dialog-dim: 0.55;
--amc-dialog-blur: 10px;
}
/* Page behind */
.amc-dialog-back { position: fixed; inset: 0; background: rgba(20,35,50,var(--amc-dialog-dim)); backdrop-filter: blur(var(--amc-dialog-blur)); -webkit-backdrop-filter: blur(var(--amc-dialog-blur));
opacity: 0; transition: opacity var(--amc-dur-medium, 460ms) cubic-bezier(.2,.8,.2,1); }
.amc-dialog-back.is-on { opacity: 1; }
/* Dialog */
.amc-dialog { position: fixed; left: 50%; top: 50%; box-sizing: border-box; width: min(var(--amc-dialog-w), calc(100vw - 24px)); max-height: calc(100vh - 48px); overflow: auto;
padding: var(--amc-dialog-pad); border-radius: var(--amc-dialog-r); color: var(--amc-white-soft);
opacity: 0; transform: translate(-50%, calc(-50% + var(--amc-rise, 14px) * .6)) scale(.96);
transition: opacity var(--amc-dur-medium, 460ms) var(--amc-ease, cubic-bezier(.34,1.56,.64,1)), transform var(--amc-dur-medium, 460ms) var(--amc-ease, cubic-bezier(.34,1.56,.64,1)); }
.amc-dialog.amc-glass, .amc-panel.amc-glass { background: var(--amc-glass-tint); }
.amc-dialog.is-open { opacity: 1; transform: translate(-50%, -50%); }
.amc-dialog-title { margin: 0 0 var(--amc-space-tight); display: flex; align-items: center; gap: 10px; }
.amc-dialog-text { margin: 0 0 var(--amc-space-block); }
.amc-dialog-fields { display: grid; gap: var(--amc-space-tight); margin-bottom: var(--amc-space-block); }
.amc-dialog-typed { margin-bottom: var(--amc-space-block); } .amc-dialog-typed .amc-label { display: block; margin-bottom: 10px; }
.amc-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; } /* main button last (right in English, left in Arabic) */
.amc-dialog-actions .amc-btn { min-width: 110px; }
/* Handle — only on the phone, where dialogs open from the bottom */
.amc-dialog-handle { display: none; }
/* Side panel — slides in from the end side (right in English, left in Arabic) */
.amc-panel { position: fixed; top: 15px; inset-inline-end: 15px; height: calc(100vh - 30px); width: min(var(--amc-dialog-panel-w), calc(100vw - 30px)); box-sizing: border-box; overflow: auto;
padding: var(--amc-dialog-pad); border-radius: var(--amc-dialog-r); color: var(--amc-white-soft);
opacity: 0; transform: translateX(40px); transition: opacity var(--amc-dur-medium, 460ms) var(--amc-ease, cubic-bezier(.34,1.56,.64,1)), transform var(--amc-dur-medium, 460ms) var(--amc-ease, cubic-bezier(.34,1.56,.64,1)); }
[dir="rtl"].amc-panel { transform: translateX(-40px); }
.amc-panel.is-open { opacity: 1; transform: none; }
.amc-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: var(--amc-space-block); }
.amc-panel-head .amc-heading { margin: 0 0 8px; }
.amc-panel-sec { padding: var(--amc-space-pair) 0; box-shadow: 0 -.5px 0 rgba(255,255,255,.2); } /* optional sections inside the panel body */
.amc-panel-sec > .amc-label { display: block; margin-bottom: 14px; }
/* Phone: dialogs and the side panel open from the bottom, with a handle */
@media (max-width: 700px) {
.amc-dialog, .amc-panel { left: 0; right: 0; top: auto; bottom: 0; inset-inline-end: auto; width: 100%; transform: translateY(100%);
border-radius: var(--amc-dialog-r) var(--amc-dialog-r) 0 0; padding-top: calc(var(--amc-dialog-pad) + 12px); padding-bottom: calc(var(--amc-dialog-pad) + env(safe-area-inset-bottom, 0px)); }
.amc-dialog { max-height: 90vh; } .amc-panel { height: 88vh; }
[dir="rtl"].amc-panel { transform: translateY(100%); }
.amc-dialog.is-open, .amc-panel.is-open { transform: none; }
.amc-dialog-handle { display: block; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(255,255,255,.55); }
.amc-dialog-actions { flex-direction: column-reverse; } .amc-dialog-actions .amc-btn { width: 100%; }
}
/* AMC HMS — locked tables & lists (tuned in Tables Lab, 25 Sept 2026).
Rows: zebra stripes, comfortable (59px). Phone (≤ 700px): each patient stacks into a small block. Many rows: pages (4 per page).
Selected rows: actions in a floating glass bar. Every change is smooth: old rows leave one after another, new rows arrive one after another,
the card height glides, the page pill slides, counts roll.
Built by amc-table.js — pages call amcTable(host, { columns, rows, … }). Simple lists: amc-list / amc-list-item (markup below).
Load after amc-glass.css, amc-type.css, amc-colour.css, amc-controls.css, amc-loading.css, amc-motion.css. */
:root {
--amc-table-row-h: 59px;
--amc-table-zebra: 0.15; /* stripe strength */
--amc-table-per-page: 4;
--amc-table-gap-x: 14px;
}
/* Rows */
.amc-table { position: relative; }
.amc-table-anim { overflow: clip; }
.amc-tr { display: grid; grid-template-columns: var(--amc-table-cols); gap: var(--amc-table-gap-x); align-items: center; min-height: var(--amc-table-row-h); padding: 0 12px; box-sizing: border-box;
border-radius: 14px; font: 400 12px/1.3 var(--amc-font-body); color: var(--amc-white-soft);
transition: opacity var(--amc-dur-medium, 460ms) var(--amc-ease, cubic-bezier(.34,1.56,.64,1)), transform var(--amc-dur-medium, 460ms) var(--amc-ease, cubic-bezier(.34,1.56,.64,1)), background-color 300ms cubic-bezier(.2,.8,.2,1); }
.amc-tr > * { min-width: 0; }
.amc-table-rows > .amc-tr:nth-child(even) { background: rgba(255,255,255,var(--amc-table-zebra)); } /* zebra stripes */
.amc-tr-body { cursor: pointer; }
@media (hover: hover) { .amc-table-rows > .amc-tr-body:hover { background: rgba(255,255,255,.08); } .amc-table-rows > .amc-tr-body:nth-child(even):hover { background: rgba(255,255,255,calc(var(--amc-table-zebra) + .06)); } }
.amc-table-rows > .amc-tr-body.is-sel { background: rgba(255,255,255,.22); }
.amc-tr-head { min-height: 34px; padding-bottom: 6px; background: none !important; cursor: default; transition: opacity var(--amc-dur-short, 300ms) cubic-bezier(.2,.8,.2,1); }
.amc-tr-head.is-hidden { opacity: 0; pointer-events: none; }
.amc-th { all: unset; display: inline-flex; align-items: center; gap: 4px; font: 400 9px/1 var(--amc-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--amc-white-muted); white-space: nowrap; }
[dir="rtl"] .amc-th { letter-spacing: 0; text-transform: none; font-size: 10px; }
button.amc-th { cursor: pointer; } button.amc-th:hover, .amc-th[aria-sort] { color: #fff; }
.amc-th:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 2px; border-radius: 4px; }
.amc-th .amc-icon { width: 12px; height: 12px; opacity: 0; transition: transform 300ms cubic-bezier(.2,.8,.2,1), opacity 300ms; }
.amc-th[aria-sort="ascending"] .amc-icon { opacity: 1; transform: rotate(180deg); } .amc-th[aria-sort="descending"] .amc-icon { opacity: 1; }
.amc-td-num, .amc-th-num { justify-self: end; text-align: end; }
.amc-td-num { font: 300 18px/1 var(--amc-font-number); color: #fff; }
.amc-td-main b { display: block; font-weight: 500; font-size: 13px; color: #fff; } .amc-td-main span { font-size: 11px; color: var(--amc-white-muted); }
.amc-td-status { display: flex; align-items: center; gap: 8px; }
.amc-td-sub { display: none; }
/* Smooth changes (amc-table.js / amcSwap) */
.amc-row-in { opacity: 0; transform: translateY(10px); }
.amc-row-out { pointer-events: none; }
/* Empty + loading */
.amc-table-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 48px 12px 40px; transition: opacity var(--amc-dur-medium, 460ms) var(--amc-ease), transform var(--amc-dur-medium, 460ms) var(--amc-ease); }
.amc-table-empty .amc-icon { width: 34px; height: 34px; opacity: .8; } .amc-table-empty p { margin: 0 0 8px; max-width: 320px; }
.amc-table-sk .amc-skeleton { height: 10px; } .amc-table-sk .amc-sk-two { display: grid; gap: 6px; } .amc-table-sk .amc-sk-small { height: 8px; }
.amc-table-sk .amc-sk-box { width: 18px; height: 18px; border-radius: 5px; } .amc-table-sk .amc-td-num .amc-skeleton { width: 34px; height: 16px; }
/* Footer: pages */
.amc-table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: var(--amc-space-pair); font: 400 11px/1 var(--amc-font-body); color: var(--amc-white-muted); }
.amc-table-foot:empty { display: none; }
.amc-pager { position: relative; display: flex; gap: 4px; }
.amc-pg-thumb { position: absolute; top: 0; left: 0; height: 32px; border-radius: 999px; background: rgba(255,255,255,.92); pointer-events: none;
transition: transform var(--amc-dur-medium, 460ms) var(--amc-ease), width var(--amc-dur-medium, 460ms) var(--amc-ease); }
.amc-pg { all: unset; box-sizing: border-box; position: relative; z-index: 1; cursor: pointer; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center;
font: 400 12px/1 var(--amc-font-number); color: var(--amc-white-soft); transition: color var(--amc-dur-short, 300ms) cubic-bezier(.2,.8,.2,1), opacity 300ms; }
.amc-pg:hover:not([aria-current]):not(:disabled) { color: #fff; } .amc-pg[aria-current="page"] { color: #2b3a47; } .amc-pg:disabled { opacity: .35; cursor: default; }
.amc-pg:focus-visible { outline: 2px solid rgba(255,255,255,.9); }
.amc-pg .amc-icon { width: 16px; height: 16px; } .amc-pg-prev .amc-icon { transform: rotate(90deg); } .amc-pg-next .amc-icon { transform: rotate(-90deg); }
[dir="rtl"] .amc-pg-prev .amc-icon { transform: rotate(-90deg); } [dir="rtl"] .amc-pg-next .amc-icon { transform: rotate(90deg); }
.amc-fade { transition: opacity 180ms cubic-bezier(.2,.8,.2,1); } .amc-fade.is-out { opacity: 0; }
/* Floating selection bar (on the top layer) */
.amc-selbar { position: fixed; left: 50%; bottom: 24px; display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 10px 10px 10px 22px; border-radius: 999px;
font: 400 12px/1 var(--amc-font-body); color: #fff; opacity: 0; transform: translate(-50%, 20px); pointer-events: none;
transition: opacity var(--amc-dur-short, 300ms) var(--amc-ease), transform var(--amc-dur-short, 300ms) var(--amc-ease); }
[dir="rtl"].amc-selbar { padding: 10px 22px 10px 10px; }
.amc-selbar.amc-glass { background: var(--amc-glass-tint); }
.amc-selbar.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.amc-selbar b { font: 300 18px/1 var(--amc-font-number); margin-inline-end: 4px; }
.amc-selbar-gap { width: 6px; }
/* Simple list —
Bed 12 — SpO₂ 86%Sara Mahmoud2 min
…
*/
.amc-list-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center; min-height: var(--amc-table-row-h); padding: 8px 12px; box-sizing: border-box; border-radius: 14px;
font: 400 12px/1.35 var(--amc-font-body); color: var(--amc-white-soft); transition: opacity var(--amc-dur-medium, 460ms) var(--amc-ease), transform var(--amc-dur-medium, 460ms) var(--amc-ease), background-color 300ms; }
.amc-list > .amc-list-item:nth-child(even) { background: rgba(255,255,255,var(--amc-table-zebra)); }
.amc-list-item b { display: block; font-weight: 500; font-size: 13px; color: #fff; } .amc-list-meta { font-size: 11px; color: var(--amc-white-muted); white-space: nowrap; }
@media (hover: hover) { a.amc-list-item:hover, .amc-list-item[tabindex]:hover { background: rgba(255,255,255,.08); } }
/* Phone: each row stacks — main text on top, the other details under it, the number and status on the side */
@media (max-width: 700px) {
.amc-tr-head { display: none; }
.amc-tr-body, .amc-table-sk { grid-template-columns: auto 1fr auto; grid-template-areas: "sel main side" "sel sub status"; row-gap: 6px; padding: 12px; min-height: 0; }
.amc-table.no-select .amc-tr-body, .amc-table.no-select .amc-table-sk { grid-template-columns: 1fr auto; grid-template-areas: "main side" "sub status"; }
.amc-td-sel { grid-area: sel; } [data-phone="main"] { grid-area: main; } [data-phone="side"] { grid-area: side; } [data-phone="status"] { grid-area: status; justify-self: end; }
.amc-tr [data-phone="sub"], .amc-tr [data-phone="hide"] { display: none; }
.amc-td-sub { display: block; grid-area: sub; font-size: 11px; color: var(--amc-white-muted); }
.amc-table-sk [data-phone="status"] { width: 64px; }
body.amc-has-nav .amc-selbar { bottom: calc(var(--amc-nav-tab-h, 64px) + 24px); }
.amc-selbar { max-width: calc(100vw - 24px); padding-inline-start: 16px; } .amc-selbar .amc-btn { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .amc-row-in { transform: none; } }
/* AMC HMS — forms (locked 2026-09-25, Forms Lab). Fields are the locked controls (floating labels, outline fields, dropdowns, switches, checkboxes, segmented).
Built by amc-form.js — amcForm(formEl, { onSubmit }). */
:root {
--amc-form-ease: cubic-bezier(.25,.1,.25,1); /* forms move smoothly — no bounce */
--amc-form-layout: steps; /* sections | steps | accordion — how a long form is split */
--amc-form-validate: leave; /* type | leave | save — when a mistake shows */
--amc-form-actions: sticky; /* end | sticky — where Save / Cancel sit */
--amc-form-cols: 2; /* fields per row on PC */
--amc-form-gap: 12px; /* between fields */
--amc-form-sec-gap: 45px; /* between sections — clearly apart */
--amc-form-head-gap: 14px; /* section title → its fields — close, so the title belongs to them */
--amc-form-title-gap: 25px; /* title → its small line under it */
--amc-form-err-f: 9px; /* error messages: red, smaller than the text */
}
.amc-form [hidden] { display: none !important; } /* steps hide sections and buttons */
.amc-form { display: grid; gap: var(--amc-form-sec-gap); }
.amc-form-sec { display: grid; gap: var(--amc-form-head-gap); min-width: 0; }
.amc-form-sec-h { display: grid; gap: var(--amc-form-title-gap); }
.amc-form-sec-h .amc-heading { margin: 0; }
.amc-form-grid { display: grid; grid-template-columns: repeat(var(--amc-form-cols), minmax(0, 1fr)); column-gap: var(--amc-form-gap); row-gap: 0; align-items: start; }
.amc-form-wide { grid-column: 1 / -1; }
/* Every field is 4 rows shared with its neighbours (subgrid): label · control · message · space.
So fields side by side always line up — their boxes sit on the same line even when only one has a label, a hint or an error. */
.amc-form-field { display: grid; min-width: 0; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.amc-form-field > * { grid-row: 2; align-self: center; }
.amc-form-field > .amc-label { grid-row: 1; align-self: end; }
.amc-form-field > .amc-form-hint, .amc-form-field > .amc-form-err, .amc-form-field > .amc-form-reveal { grid-row: 3; align-self: start; }
.amc-form-field::after { content: ""; grid-row: 4; height: var(--amc-form-gap); }
.amc-form-field > .amc-label { display: block; margin: 0 0 10px; } /* label above groups (sex, conditions, time) */
.amc-form-hint { margin-top: 7px; padding-inline-start: var(--amc-field-p); font: 400 11px/1.3 var(--amc-font-body); color: var(--amc-white-muted); }
.amc-form-opt { font: 400 10px/1 var(--amc-font-body); color: var(--amc-white-muted); margin-inline-start: 6px; letter-spacing: 0; text-transform: none; }
/* error message: glides open under the field */
.amc-form-err { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--amc-dur-short, 300ms) var(--amc-form-ease), opacity var(--amc-dur-short, 300ms) var(--amc-form-ease); }
.amc-form-err > div { overflow: hidden; }
.amc-form-err .amc-field-msg { padding-inline-start: var(--amc-field-p); gap: .6em; font-size: var(--amc-form-err-f, 9px); color: var(--amc-critical); }
.amc-form-err .amc-status-dot { width: max(3px, .75em); height: max(3px, .75em); }
.amc-form-field.has-error .amc-form-err { grid-template-rows: 1fr; opacity: 1; }
.amc-form-field.has-error .amc-form-hint { display: none; }
.amc-form-field.has-error .amc-seg, .amc-form-field.has-error .amc-chips { box-shadow: 0 0 0 .5px var(--amc-critical); border-radius: 999px; }
/* check / radio rows */
.amc-form-checks { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.amc-form-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 400 13px/1 var(--amc-font-body); color: var(--amc-white-soft); }
.amc-form-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--amc-field-h); font: 400 13px/1 var(--amc-font-body); color: var(--amc-white-soft); }
/* reveal: fields that appear when a switch turns on */
.amc-form-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--amc-dur-medium, 460ms) var(--amc-form-ease), opacity var(--amc-dur-medium, 460ms) var(--amc-form-ease); }
.amc-form-reveal > div { overflow: hidden; min-height: 0; } .amc-form-reveal > div > * { margin-top: var(--amc-form-gap); }
.amc-form-reveal.is-on { grid-template-rows: 1fr; opacity: 1; }
/* chips — choose one of many (time slots) */
.amc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.amc-chip { position: relative; }
.amc-chip input { position: absolute; opacity: 0; pointer-events: none; }
.amc-chip span { display: inline-grid; place-items: center; min-width: 64px; height: 34px; padding: 0 14px; box-sizing: border-box; border-radius: 999px; cursor: pointer;
font: 400 12px/1 var(--amc-font-number); color: var(--amc-white-soft); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.6); transition: background-color 300ms, color 300ms, box-shadow 300ms; }
.amc-chip input:checked + span { background: rgba(255,255,255,.92); color: #2b3a47; box-shadow: none; }
.amc-chip input:disabled + span { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.amc-chip input:focus-visible + span { outline: 2px solid rgba(255,255,255,.9); outline-offset: 2px; }
@media (hover: hover) { .amc-chip input:not(:checked):not(:disabled) + span:hover { background: rgba(255,255,255,.1); color: #fff; } }
/* actions */
.amc-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.amc-form-actions .amc-form-note { margin-inline-end: auto; font: 400 var(--amc-form-err-f, 9px)/1.3 var(--amc-font-body); color: var(--amc-critical); }
.amc-form-actions.is-sticky { position: sticky; bottom: 16px; z-index: 5; padding: 10px 10px 10px 22px; border-radius: 999px; }
[dir="rtl"] .amc-form-actions.is-sticky { padding: 10px 22px 10px 10px; }
.amc-form-actions.is-sticky.amc-glass { background: var(--amc-glass-tint); }
/* steps */
.amc-form-steps { display: grid; gap: 14px; }
.amc-form-steps ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.amc-form-step { all: unset; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 6px; border-radius: 999px; cursor: pointer; font: 400 12px/1 var(--amc-font-body); color: var(--amc-white-muted); transition: color 300ms, background-color 300ms; }
[dir="rtl"] .amc-form-step { padding: 0 6px 0 14px; }
.amc-form-step i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 500 11px/1 var(--amc-font-number); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.6); transition: background-color 300ms, color 300ms; }
.amc-form-step[aria-current="step"] { color: #fff; background: rgba(255,255,255,.12); }
.amc-form-step[aria-current="step"] i, .amc-form-step.is-done i { background: rgba(255,255,255,.92); color: #2b3a47; box-shadow: none; }
.amc-form-step.has-error i { background: var(--amc-critical); color: #fff; box-shadow: none; }
.amc-form-step:focus-visible { outline: 2px solid rgba(255,255,255,.9); }
.amc-form-body { position: relative; display: grid; gap: var(--amc-form-sec-gap); }
.is-accordion .amc-form-body { gap: 0; }
.amc-form-field .amc-seg { width: 100%; box-sizing: border-box; }
.amc-form-body.is-gliding { overflow-x: visible; overflow-y: clip; transition: height var(--amc-dur-medium, 460ms) var(--amc-form-ease); }
.amc-form-sec.is-leaving { opacity: 0; transform: translateX(calc(-10px * var(--amc-form-dir, 1))); transition: opacity var(--amc-dur-short, 300ms) var(--amc-form-ease), transform var(--amc-dur-short, 300ms) var(--amc-form-ease); }
.amc-form-sec.is-entering { opacity: 0; transform: translateX(calc(10px * var(--amc-form-dir, 1))); }
.amc-form-sec.is-in { transition: opacity var(--amc-dur-medium, 460ms) var(--amc-form-ease), transform var(--amc-dur-medium, 460ms) var(--amc-form-ease); }
[dir="rtl"] .amc-form-sec.is-leaving { transform: translateX(calc(10px * var(--amc-form-dir, 1))); }
[dir="rtl"] .amc-form-sec.is-entering { transform: translateX(calc(-10px * var(--amc-form-dir, 1))); }
/* accordion */
.amc-form-acc-h { all: unset; box-sizing: border-box; width: 100%; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; border-radius: 16px; }
.amc-form-acc-h:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 4px; }
.amc-form-acc-h .amc-icon { width: 18px; height: 18px; transition: transform var(--amc-dur-medium, 460ms) var(--amc-form-ease); }
.amc-form-sec.is-open .amc-form-acc-h .amc-icon { transform: rotate(180deg); }
.amc-form-acc-state { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; font: 400 11px/1 var(--amc-font-body); color: var(--amc-white-muted); }
.amc-form-acc-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--amc-dur-medium, 460ms) var(--amc-form-ease); }
.amc-form-acc-b > div { overflow: hidden; min-height: 0; }
.amc-form-acc-b > div > .amc-form-grid { padding: 4px 0 var(--amc-space-block); transition: opacity var(--amc-dur-medium, 460ms) var(--amc-form-ease); opacity: 0; }
.amc-form-sec.is-open .amc-form-acc-b { grid-template-rows: 1fr; } .amc-form-sec.is-open .amc-form-acc-b > div > .amc-form-grid { opacity: 1; }
.amc-form-acc-sep { height: .5px; background: rgba(255,255,255,.2); }
input[type="date"].amc-input { color-scheme: dark; }
@media (max-width: 700px) {
.amc-form-grid { grid-template-columns: 1fr; }
.amc-form-step span { display: none; } .amc-form-step { padding: 0 5px; } .amc-form-step[aria-current="step"] span { display: inline; } .amc-form-step[aria-current="step"] { padding: 0 14px 0 6px; }
.amc-form-actions.is-sticky { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .amc-form-sec.is-leaving, .amc-form-sec.is-entering { transform: none; } }
/* AMC HMS — search (locked 2026-09-25, Search Lab; moved into the top bar: Shell Lab, locked 7 Oct 2026). On PC: the field in the middle of the top bar; phone: a search button in the top bar. Finds patients, doctors & staff, appointments & rooms, pages & actions.
Behaviour: amc-search.js — amcSearch({ items, onPick }). Opens on the top layer, same glass as the dropdowns. Ctrl K (or /) opens it from anywhere. */
:root {
--amc-search-place: top; /* popup | top | side — where search lives on PC (top = the field in the top bar) */
--amc-search-results: grouped; /* grouped | mixed — how results show */
--amc-search-empty: recent-actions; /* recent | nothing | recent-actions — what shows before typing */
--amc-search-w: 600px; /* width of the pop-up (popup + side) */
--amc-search-per-group: 4; /* results per group (mixed: 3× this) */
--amc-search-max-h: 460px; /* results scroll inside after this */
--amc-search-curve: cubic-bezier(.2,.8,.2,1); /* no bounce */
}
/* ---- the field in the page head (top) and the buttons that open search ---- */
.amc-search-slot { min-width: 0; }
.amc-search-field { position: relative; width: 100%; max-width: 520px; min-height: var(--amc-field-h); } /* keeps its height while its input is in the pop-up, so nothing drops */
.amc-search-field .amc-input { padding-inline-start: calc(var(--amc-field-p) + 28px); padding-inline-end: 72px; }
.amc-search-field > .amc-icon, .amc-search-head > .amc-icon { position: absolute; top: 50%; inset-inline-start: var(--amc-field-p); transform: translateY(-50%); width: 18px; height: 18px; color: var(--amc-white-soft); pointer-events: none; }
.amc-search-field.is-away > :not(.amc-kbd) { visibility: hidden; } /* the field is inside the pop-up while it is open */
.amc-search-field .amc-kbd { transition: opacity 300ms var(--amc-search-curve); } .amc-search-field.is-away > .amc-kbd { opacity: 0; } /* the Ctrl K hint fades */
[dir="rtl"] .amc-search-field .amc-kbd { inset-inline-end: auto; left: 12px; } /* the hint is drawn left-to-right, so in Arabic it is placed on the left by hand */
.amc-kbd { position: absolute; top: 50%; inset-inline-end: 12px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 3px; pointer-events: none;
font: 400 10px/1 var(--amc-font-body); letter-spacing: .04em; color: var(--amc-white-muted); direction: ltr; }
.amc-kbd b { font-weight: 400; padding: 3px 5px; border-radius: 5px; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.45); }
.amc-search-open { display: inline-flex; align-items: center; gap: 10px; }
.amc-search-open .amc-kbd { position: static; transform: none; margin-inline-start: 6px; }
.amc-nav-item.amc-nav-search .amc-kbd { position: static; transform: none; margin-inline-start: auto; transition: opacity 280ms var(--amc-search-curve); }
.amc-side:not(.is-open) .amc-nav-search .amc-kbd { opacity: 0; }
/* ---- the pop-up (top layer) ---- */
.amc-search-back { position: fixed; inset: 0; background: rgba(20,35,50,.16); opacity: 0; transition: opacity 360ms var(--amc-search-curve); }
.amc-search-back.is-on { opacity: 1; }
.amc-search-pop { position: fixed; --amc-search-r: min(var(--amc-field-r), calc(var(--amc-field-h) / 2)); }
.amc-search-pop > .amc-search-glass { position: absolute; inset: 0 0 auto 0; height: var(--amc-field-h); box-sizing: border-box; border-radius: var(--amc-search-r);
opacity: 0; transition: height 460ms var(--amc-search-curve), opacity 460ms var(--amc-search-curve); }
/* glass: amc-glass-pop (amc-glass.css) */
.amc-search-pop[data-open] > .amc-search-glass { height: calc(var(--amc-field-h) + var(--amc-search-list-h, 0px)); opacity: 1; }
.amc-search-pop.is-center > .amc-search-glass, .amc-search-pop.is-center .amc-search-head { transform: translateY(-6px); transition: height 460ms var(--amc-search-curve), opacity 460ms var(--amc-search-curve), transform 460ms var(--amc-search-curve); }
.amc-search-pop.is-center[data-open] > .amc-search-glass, .amc-search-pop.is-center[data-open] .amc-search-head { transform: none; }
.amc-search-head { position: relative; z-index: 2; height: var(--amc-field-h); }
.amc-search-head .amc-input { height: var(--amc-field-h); padding-inline-start: calc(var(--amc-field-p) + 28px); padding-inline-end: 44px; }
.amc-search-pop:not(.is-top) .amc-search-head .amc-input, .amc-search-pop.is-top[data-open] .amc-search-head .amc-input { border-color: transparent !important; background: none !important; box-shadow: none !important; }
/* top bar: the pop-up grows out of the field (width glides) and the field's outline fades into the glass, both ways */
.amc-search-pop.is-top { transition: width 460ms var(--amc-search-curve), left 460ms var(--amc-search-curve); }
.amc-search-head .amc-input::-webkit-search-cancel-button { display: none; }
.amc-search-clear { all: unset; position: absolute; top: 50%; inset-inline-end: 8px; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
color: var(--amc-white-muted); opacity: 0; pointer-events: none; transition: opacity 300ms var(--amc-search-curve), background-color 300ms var(--amc-search-curve); }
.amc-search-clear.is-on { opacity: 1; pointer-events: auto; } .amc-search-clear:hover { background: rgba(255,255,255,.12); color: #fff; }
.amc-search-clear:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 1px; }
.amc-search-clear svg { width: 14px; height: 14px; }
.amc-search-busy { position: absolute; top: 50%; inset-inline-end: 40px; transform: translateY(-50%); display: none; } .amc-search-busy.is-on { display: block; }
.amc-search-busy .amc-spinner { --amc-spinner-size: 14px; }
/* results */
.amc-search-list { position: absolute; top: var(--amc-field-h); inset-inline: 0; z-index: 2; height: var(--amc-search-list-h, 0px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
box-sizing: border-box; padding: 0 6px; clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none;
transition: height 460ms var(--amc-search-curve), clip-path 460ms var(--amc-search-curve), opacity 460ms var(--amc-search-curve); }
.amc-search-list::-webkit-scrollbar { display: none; }
.amc-search-pop[data-open] > .amc-search-list { clip-path: inset(0); opacity: 1; pointer-events: auto; }
.amc-search-in { padding: 2px 0 6px; }
.amc-search-in::before { content: ""; display: block; height: .5px; margin: 0 8px 6px; background: rgba(255,255,255,.28); }
.amc-search-group + .amc-search-group { margin-top: 6px; }
.amc-search-group-h { padding: 8px 12px 4px; font: 400 9px/1 var(--amc-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--amc-white-muted); }
[dir="rtl"] .amc-search-group-h { letter-spacing: 0; font-size: 10.5px; text-transform: none; }
.amc-search-item { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 10px; border-radius: calc(var(--amc-field-r) - 8px); cursor: pointer; color: var(--amc-white-soft); }
.amc-search-item.is-active { background: rgba(255,255,255,.12); color: #fff; }
.amc-search-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.45); color: var(--amc-white-soft); }
.amc-search-ic .amc-icon { width: 16px; height: 16px; }
.amc-search-ic.is-person { background: rgba(255,255,255,.92); box-shadow: none; color: #2b3a47; font: 600 10.5px/1 var(--amc-font-body); letter-spacing: .04em; }
[dir="rtl"] .amc-search-ic.is-person { letter-spacing: 0; font-size: 12px; }
.amc-search-txt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.amc-search-t { font: 400 13px/1.2 var(--amc-font-body); color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; }
.amc-search-t .amc-status-dot { width: 7px; height: 7px; }
.amc-search-s { font: 400 11px/1.2 var(--amc-font-body); color: var(--amc-white-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amc-search-s bdi, .amc-search-t bdi { unicode-bidi: isolate; }
.amc-search-hit { background: none; color: #fff; font-weight: 600; }
.amc-search-tag { flex: none; padding: 4px 8px; border-radius: 999px; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.4); font: 400 10px/1 var(--amc-font-body); color: var(--amc-white-muted); }
.amc-search-go { flex: none; width: 14px; height: 14px; color: var(--amc-white-muted); opacity: 0; transition: opacity 200ms var(--amc-search-curve); }
.amc-search-item.is-active .amc-search-go { opacity: 1; }
[dir="rtl"] .amc-search-go { transform: scaleX(-1); }
.amc-search-none { padding: 18px 14px 16px; display: grid; gap: 6px; text-align: center; }
.amc-search-none b { font: 400 13px/1.3 var(--amc-font-body); color: #fff; } .amc-search-none span { font: 400 11px/1.4 var(--amc-font-body); color: var(--amc-white-muted); }
.amc-search-foot { display: flex; gap: 14px; justify-content: flex-end; padding: 8px 12px 4px; font: 400 10px/1 var(--amc-font-body); color: var(--amc-white-muted); }
.amc-search-foot span { display: inline-flex; align-items: center; gap: 5px; } .amc-search-foot .amc-kbd { position: static; transform: none; }
/* results arrive one after another (fade + small rise), never jump */
.amc-search-item, .amc-search-group-h, .amc-search-none, .amc-search-foot { animation: amc-search-in 320ms var(--amc-search-curve) both; animation-delay: calc(var(--i, 0) * 22ms); }
@keyframes amc-search-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .amc-search-item, .amc-search-group-h, .amc-search-none, .amc-search-foot { animation: none; } .amc-search-pop *, .amc-search-back { transition-duration: 1ms !important; } }
@media (max-width: 700px) { .amc-search-foot { display: none; } .amc-search-field { max-width: none; } .amc-kbd { display: none; } }
/* AMC HMS — tabs, tags and chips (locked 2026-09-25, Tabs Lab). Tabs: white pill that slides; content slides sideways; tabs that don't fit scroll sideways. Behaviour: amc-tabs.js.
Tabs inside a page:
Status tag:
Critical (amc-stable / amc-warning / amc-critical; no class = plain white dot)
Filter chips:
…
Removable:
Penicillin…
(× and typing are added by the script) */
:root {
--amc-tabset-style: pill; /* pill | line | bar */
--amc-tabset-change: slide; /* slide | fade — how the content changes */
--amc-tabset-narrow: scroll; /* scroll | dropdown — when the tabs don't fit (phone, narrow cards) */
--amc-tab-h: 41px;
--amc-tag-h: 28px;
--amc-chip-h: 36px;
--amc-tabset-shift: 24px; /* how far content slides */
--amc-tabset-gap: 20px; /* tabs → content */
--amc-tabs-curve: cubic-bezier(.2,.8,.2,1); /* no bounce */
}
/* ---------- tabs ---------- */
.amc-tabset { display: grid; gap: var(--amc-tabset-gap); min-width: 0; }
.amc-tabset-bar { position: relative; min-width: 0; }
.amc-tabset-list { position: relative; display: flex; align-items: center; gap: 2px; width: max-content; max-width: 100%; box-sizing: border-box; overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; overscroll-behavior-x: contain; scroll-behavior: smooth; }
.amc-tabset-list::-webkit-scrollbar { display: none; }
.amc-tabset-list.is-cut-end { -webkit-mask-image: linear-gradient(to var(--amc-tabs-end, right), #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to var(--amc-tabs-end, right), #000 calc(100% - 36px), transparent); }
.amc-tabset-list.is-cut-start { -webkit-mask-image: linear-gradient(to var(--amc-tabs-end, right), transparent, #000 36px); mask-image: linear-gradient(to var(--amc-tabs-end, right), transparent, #000 36px); }
.amc-tabset-list.is-cut-start.is-cut-end { -webkit-mask-image: linear-gradient(to var(--amc-tabs-end, right), transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to var(--amc-tabs-end, right), transparent, #000 36px, #000 calc(100% - 36px), transparent); }
[dir="rtl"] .amc-tabset-list { --amc-tabs-end: left; }
.amc-tabset-tab { all: unset; position: relative; z-index: 1; flex: none; box-sizing: border-box; height: var(--amc-tab-h); padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
border-radius: 999px; font: 400 13px/1 var(--amc-font-body); letter-spacing: .01em; color: var(--amc-white-soft); transition: color 460ms var(--amc-tabs-curve); }
[dir="rtl"] .amc-tabset-tab { letter-spacing: 0; }
.amc-tabset-tab:hover { color: #fff; }
.amc-tabset-tab:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: -2px; }
.amc-tabset-mark { position: absolute; z-index: 0; left: 0; top: 0; width: 0; pointer-events: none; transition: transform 460ms var(--amc-tabs-curve), width 460ms var(--amc-tabs-curve); }
.amc-tabset.no-anim .amc-tabset-mark { transition: none; }
/* pill — white pill slides under the chosen tab (like the segmented control) */
.amc-tabset.is-pill .amc-tabset-list { padding: 4px; border-radius: 999px; background: rgba(255,255,255,.1); box-shadow: inset 0 1px 2px rgba(20,35,50,.15), inset 0 0 0 .5px rgba(255,255,255,.25); }
.amc-tabset.is-pill .amc-tabset-tab { height: calc(var(--amc-tab-h) - 8px); padding: 0 16px; }
.amc-tabset.is-pill .amc-tabset-mark { top: 4px; height: calc(var(--amc-tab-h) - 8px); border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 2px 10px rgba(20,35,50,.15); }
.amc-tabset.is-pill .amc-tabset-tab[aria-selected="true"] { color: #2b3a47; }
/* line — plain words, a thin white line slides under the chosen one */
.amc-tabset.is-line .amc-tabset-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .5px; background: rgba(255,255,255,.3); }
.amc-tabset.is-line .amc-tabset-list { gap: 6px; }
.amc-tabset.is-line .amc-tabset-tab { padding: 0 6px; border-radius: 6px; color: var(--amc-white-muted); }
.amc-tabset.is-line .amc-tabset-tab:hover, .amc-tabset.is-line .amc-tabset-tab[aria-selected="true"] { color: #fff; }
.amc-tabset.is-line .amc-tabset-mark { top: auto; bottom: 0; height: 1.5px; border-radius: 2px; background: #fff; }
/* bar — tabs sit in a glass strip, the chosen one is lighter */
.amc-tabset.is-bar .amc-tabset-list { padding: 4px; border-radius: 999px; }
.amc-tabset.is-bar .amc-tabset-tab { height: calc(var(--amc-tab-h) - 8px); padding: 0 16px; }
.amc-tabset.is-bar .amc-tabset-mark { top: 4px; height: calc(var(--amc-tab-h) - 8px); border-radius: 999px; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.35); }
.amc-tabset.is-bar .amc-tabset-tab[aria-selected="true"] { color: #fff; }
/* when the tabs don't fit and the page chose a dropdown */
.amc-tabset-drop { display: none; max-width: 320px; }
.amc-tabset.is-drop .amc-tabset-list { visibility: hidden; position: absolute; inset-inline-start: 0; top: 0; pointer-events: none; }
.amc-tabset.is-drop .amc-tabset-drop { display: block; }
.amc-tabset.is-line.is-drop .amc-tabset-bar::after { display: none; }
/* content */
.amc-tabset-panels { position: relative; min-width: 0; }
.amc-tabset-panels.is-gliding { overflow: clip; overflow-clip-margin: 24px; transition: height 460ms var(--amc-tabs-curve); }
.amc-tabset-panel { min-width: 0; }
.amc-tabset-panel[hidden] { display: none !important; }
.amc-tabset-panel.is-out { opacity: 0; transform: translateX(calc(var(--amc-tabset-shift) * var(--amc-tab-dir, 1) * -1)); transition: opacity 180ms var(--amc-tabs-curve), transform 180ms var(--amc-tabs-curve); }
.amc-tabset-panel.is-in-start { opacity: 0; transform: translateX(calc(var(--amc-tabset-shift) * var(--amc-tab-dir, 1))); }
.amc-tabset-panel.is-in { opacity: 1; transform: none; transition: opacity 320ms var(--amc-tabs-curve), transform 360ms var(--amc-tabs-curve); }
.amc-tabset.is-fade .amc-tabset-panel.is-out, .amc-tabset.is-fade .amc-tabset-panel.is-in-start { transform: none; }
/* ---------- counts (on tabs, chips) ---------- */
.amc-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: rgba(255,255,255,.18);
font: 400 10.5px/1 var(--amc-font-number); color: #fff; transition: background-color 460ms var(--amc-tabs-curve), color 460ms var(--amc-tabs-curve); }
.amc-count.amc-odometer { display: inline-flex; justify-content: center; align-items: center; height: 18px; line-height: 18px; } /* a count that rolls (amcMotion.number) stays on one line */
.amc-count.amc-critical, .amc-count.amc-warning { background: var(--amc-status); color: #fff; }
.amc-tabset.is-pill .amc-tabset-tab[aria-selected="true"] .amc-count:not(.amc-critical):not(.amc-warning), .amc-fchip[aria-pressed="true"] .amc-count:not(.amc-critical):not(.amc-warning) { background: rgba(43,58,71,.12); color: #2b3a47; }
/* ---------- status tag: dot + white word ---------- */
.amc-tag { display: inline-flex; align-items: center; gap: 7px; height: var(--amc-tag-h); padding: 0 10px; box-sizing: border-box; border-radius: 999px; white-space: nowrap; vertical-align: middle;
box-shadow: inset 0 0 0 .5px rgba(255,255,255,.45); font: 400 11px/1 var(--amc-font-body); letter-spacing: .02em; color: #fff; }
[dir="rtl"] .amc-tag { letter-spacing: 0; font-size: 12px; }
.amc-tag .amc-status-dot { width: 7px; height: 7px; }
.amc-tag .amc-status-dot:not([class*="amc-critical"]):not([class*="amc-warning"]):not([class*="amc-stable"]) { background: rgba(255,255,255,.7); }
.amc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* ---------- filter chips: on / off ---------- */
.amc-fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.amc-fchip { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; height: var(--amc-chip-h); padding: 0 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
box-shadow: inset 0 0 0 .5px rgba(255,255,255,.6); font: 400 12px/1 var(--amc-font-body); color: var(--amc-white-soft);
transition: background-color 460ms var(--amc-tabs-curve), color 460ms var(--amc-tabs-curve), box-shadow 460ms var(--amc-tabs-curve); }
.amc-fchip[aria-pressed="true"] { background: rgba(255,255,255,.92); color: #2b3a47; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.92); }
@media (hover: hover) { .amc-fchip[aria-pressed="false"]:hover { background: rgba(255,255,255,.1); color: #fff; } }
.amc-fchip:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 2px; }
/* ---------- removable chips (+ type to add) ---------- */
.amc-rchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: var(--amc-field-h, 40px); padding: 5px; box-sizing: border-box; border-radius: calc(var(--amc-chip-h) / 2 + 5px);
box-shadow: inset 0 0 0 .5px rgba(255,255,255,.8); transition: box-shadow 460ms var(--amc-tabs-curve); cursor: text; }
.amc-rchips:focus-within { box-shadow: inset 0 0 0 .5px #fff, 0 0 6px rgba(255,255,255,.25); }
.amc-rchip { display: inline-flex; align-items: center; gap: 4px; height: calc(var(--amc-chip-h) - 4px); padding-inline: 12px 4px; box-sizing: border-box; border-radius: 999px; white-space: nowrap; overflow: hidden;
background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.4); font: 400 12px/1 var(--amc-font-body); color: #fff; }
.amc-rchip-x { all: unset; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--amc-white-muted); transition: background-color 300ms var(--amc-tabs-curve), color 300ms var(--amc-tabs-curve); }
.amc-rchip-x:hover, .amc-rchip-x:focus-visible { background: rgba(255,255,255,.18); color: #fff; outline: none; }
.amc-rchip-x svg { width: 12px; height: 12px; }
.amc-rchips-input { all: unset; flex: 1 1 120px; min-width: 100px; height: calc(var(--amc-chip-h) - 4px); padding: 0 8px; font: 300 var(--amc-field-f, 13px)/1 var(--amc-font-body); color: #fff; }
.amc-rchips-input::placeholder { color: rgba(255,255,255,.45); }
.amc-rchip.is-new { animation: amc-chip-in 360ms var(--amc-tabs-curve) both; }
@keyframes amc-chip-in { from { opacity: 0; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .amc-tabset-mark, .amc-tabset-panels.is-gliding, .amc-tabset-panel.is-out, .amc-tabset-panel.is-in { transition: none !important; } .amc-rchip.is-new { animation: none; } }
/* AMC HMS — empty & error states (locked 2026-09-25, States Lab). Icon + words; offline shows a bar at the top. Behaviour: amc-states.js.
amcState(host, { kind, title, text, action, onRetry }) kind: 'empty' | 'none' | 'error' | 'offline' | 'notfound' | 'denied'
empty = nothing here yet none = a search / filter found nothing error = couldn't load (Try again)
notfound / denied = a whole page (wrong link / not allowed) — host is the page's .amc-page
Offline: handled by amcOffline by itself — a bar at the top and/or a note inside each card that has data-amc-net. */
:root {
--amc-state-look: icon; /* icon | words */
--amc-offline: bar; /* bar | card | both */
--amc-state-ic: 56px; /* icon circle */
--amc-state-gap: 2px; /* between title and line */
--amc-state-pad: 34px; /* space above and below a state inside a card */
--amc-states-curve: cubic-bezier(.2,.8,.2,1);
}
/* ---------- a state inside a card (empty, no results, couldn't load, offline) ---------- */
.amc-state { display: grid; justify-items: center; text-align: center; padding: var(--amc-state-pad) 16px; box-sizing: border-box; }
.amc-state-ic { width: var(--amc-state-ic); height: var(--amc-state-ic); border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px;
box-shadow: inset 0 0 0 .5px rgba(255,255,255,.5); background: rgba(255,255,255,.08); color: var(--amc-white-soft); }
.amc-state-ic .amc-icon { width: calc(var(--amc-state-ic) * .43); height: calc(var(--amc-state-ic) * .43); }
.amc-state.is-words .amc-state-ic { display: none; }
.amc-state-t { font: 300 17.7px/1.25 var(--amc-font-title); letter-spacing: -.02em; color: #fff; margin: 0; }
[dir="rtl"] .amc-state-t { letter-spacing: 0; font-size: 19px; font-weight: 250; }
.amc-state-s { font: 400 12.5px/1.5 var(--amc-font-body); color: var(--amc-white-muted); margin: var(--amc-state-gap) 0 0; max-width: 42ch; }
.amc-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.amc-state-actions:empty { display: none; }
.amc-state .amc-status-dot { width: 7px; height: 7px; }
.amc-state-s .amc-status-dot { display: inline-block; margin-inline-end: 7px; vertical-align: 1px; }
/* ---------- whole page: not found / no access ---------- */
.amc-state.is-page { min-height: min(70vh, 620px); align-content: center; padding-block: 48px; }
.amc-state.is-page { --amc-state-ic: calc(var(--amc-state-ic-page, 76px)); }
.amc-state.is-page .amc-state-t { font-size: 30px; font-weight: 300; letter-spacing: -.046em; }
[dir="rtl"] .amc-state.is-page .amc-state-t { letter-spacing: 0; font-weight: 250; }
.amc-state.is-page .amc-state-s { font-size: 13.5px; }
.amc-state-code { font: 400 11px/1 var(--amc-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--amc-white-muted); margin-bottom: 14px; }
[dir="rtl"] .amc-state-code { letter-spacing: 0; text-transform: none; font-size: 12px; }
/* states arrive softly */
.amc-state > * { animation: amc-state-in 460ms var(--amc-states-curve) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes amc-state-in { from { opacity: 0; transform: translateY(6px); } }
/* ---------- offline bar (top of the screen) ---------- */
.amc-netbar { position: fixed; top: 14px; left: 50%; z-index: 1060; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); box-sizing: border-box;
padding: 10px 16px; border-radius: 999px; font: 400 12.5px/1.3 var(--amc-font-body); color: #fff; pointer-events: none;
opacity: 0; transform: translate(-50%, -14px); transition: opacity 460ms var(--amc-states-curve), transform 460ms var(--amc-states-curve); }
.amc-netbar.amc-glass { background: var(--amc-glass-tint); }
.amc-netbar.is-on { opacity: 1; transform: translate(-50%, 0); }
.amc-netbar .amc-icon { width: 18px; height: 18px; flex: none; }
.amc-netbar span { min-width: 0; }
.amc-netbar-t { transition: opacity 240ms var(--amc-states-curve); }
/* ---------- offline note inside a card (cards with data-amc-net) ---------- */
.amc-netnote { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 460ms var(--amc-states-curve), opacity 460ms var(--amc-states-curve), margin 460ms var(--amc-states-curve); opacity: 0; }
.amc-netnote > div { overflow: hidden; }
.amc-netnote-in { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 14px; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.45); background: rgba(255,255,255,.08);
font: 400 12px/1.35 var(--amc-font-body); color: #fff; }
.amc-netnote-in .amc-icon { width: 16px; height: 16px; flex: none; color: var(--amc-white-soft); }
.amc-netnote-in small { margin-inline-start: auto; font-size: 11px; color: var(--amc-white-muted); white-space: nowrap; }
.amc-netnote.is-on { grid-template-rows: 1fr; opacity: 1; margin-bottom: 14px; }
[data-amc-net] .amc-net-dim { transition: opacity 460ms var(--amc-states-curve); }
[data-amc-net].is-offline .amc-net-dim { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .amc-state > * { animation: none; } .amc-netbar, .amc-netnote { transition-duration: 1ms; } }
@media (max-width: 700px) { .amc-netbar { top: 10px; font-size: 12px; } .amc-state.is-page .amc-state-t { font-size: 24px; } }
/* AMC HMS — file upload (locked 2026-09-26, Upload Lab). Big drop box; files as a list with progress; phone: Take photo + Choose file. Behaviour: amc-upload.js — amcUpload(host, { name, accept, maxMB, upload }).
Scans & X-rays (images, DICOM .dcm), lab PDFs & reports, ID / insurance photos, any document. */
:root {
--amc-upload-look: box; /* box | button — a big drop box, or just an "Add file" button (dropping on the card still works) */
--amc-upload-list: rows; /* rows | grid — a list with progress, or square previews */
--amc-upload-phone: two; /* two | one — phone: "Take photo" + "Choose file", or one button */
--amc-upload-thumb: 96px; /* square preview (grid) */
--amc-upload-curve: cubic-bezier(.2,.8,.2,1);
}
.amc-upload { display: grid; gap: 14px; min-width: 0; position: relative; }
.amc-upload input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* drop box */
.amc-upload-drop { position: relative; display: grid; justify-items: center; gap: 8px; padding: 26px 16px; border-radius: 22px; text-align: center; cursor: pointer;
border: 1px dashed rgba(255,255,255,.55); background: rgba(255,255,255,.05);
transition: border-color 300ms var(--amc-upload-curve), background-color 300ms var(--amc-upload-curve), transform 300ms var(--amc-upload-curve); }
.amc-upload-drop:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.8); }
.amc-upload-drop:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 3px; }
.amc-upload-drop .amc-icon { width: 26px; height: 26px; color: var(--amc-white-soft); }
.amc-upload-drop b { font: 400 13.5px/1.3 var(--amc-font-body); color: #fff; }
.amc-upload-drop span { font: 400 11.5px/1.4 var(--amc-font-body); color: var(--amc-white-muted); }
.amc-upload-drop u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: .5px; }
.amc-upload-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.amc-upload-btns .amc-icon { width: 16px; height: 16px; }
.amc-upload-hint { font: 400 11px/1.4 var(--amc-font-body); color: var(--amc-white-muted); }
/* dragging files over the card / box */
.amc-upload.is-over .amc-upload-drop { border-style: solid; border-color: #fff; background: rgba(255,255,255,.14); transform: scale(1.01); }
.amc-upload-over { position: absolute; inset: -8px; z-index: 5; border-radius: 22px; display: grid; place-items: center; pointer-events: none; opacity: 0;
border: 1px solid #fff; background: rgba(255,255,255,.14); font: 400 13px/1 var(--amc-font-body); color: #fff; transition: opacity 300ms var(--amc-upload-curve); }
.amc-upload.is-button.is-over .amc-upload-over { opacity: 1; }
/* the files — rows */
.amc-upload-files { display: grid; gap: 6px; }
.amc-upload-files:empty { display: none; }
.amc-upload-file { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; border-radius: 16px; background: rgba(255,255,255,.06);
box-shadow: inset 0 0 0 .5px rgba(255,255,255,.25); overflow: hidden; }
.amc-upload-file.is-new { animation: amc-up-in 420ms var(--amc-upload-curve) both; }
@keyframes amc-up-in { from { opacity: 0; transform: translateY(6px); } }
.amc-upload-th { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: rgba(255,255,255,.1); color: var(--amc-white-soft); position: relative; }
.amc-upload-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amc-upload-th .amc-icon { width: 20px; height: 20px; }
.amc-upload-badge { position: absolute; inset-inline-end: 3px; bottom: 3px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,35,50,.55); color: #fff; }
.amc-upload-badge .amc-icon { width: 10px !important; height: 10px !important; }
.amc-upload.is-grid .amc-upload-badge { width: 24px; height: 24px; inset-inline-end: 6px; bottom: 6px; } .amc-upload.is-grid .amc-upload-badge .amc-icon { width: 14px !important; height: 14px !important; }
.amc-upload-th small { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font: 600 7.5px/1 var(--amc-font-body); letter-spacing: .06em; color: #fff; }
.amc-upload-tx { min-width: 0; display: grid; gap: 5px; }
.amc-upload-name { font: 400 12.5px/1.2 var(--amc-font-body); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amc-upload-meta { display: flex; align-items: center; gap: 8px; font: 400 11px/1.2 var(--amc-font-body); color: var(--amc-white-muted); min-width: 0; }
.amc-upload-meta .amc-progress { flex: 1; max-width: 220px; }
.amc-upload-meta .amc-icon { width: 14px; height: 14px; flex: none; }
.amc-upload-meta .amc-status-dot { width: 7px; height: 7px; }
.amc-upload-act { display: flex; gap: 4px; align-items: center; }
.amc-upload-x, .amc-upload-retry { all: unset; box-sizing: border-box; height: 30px; min-width: 30px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
font: 400 11.5px/1 var(--amc-font-body); color: var(--amc-white-soft); transition: background-color 300ms var(--amc-upload-curve), color 300ms var(--amc-upload-curve); }
.amc-upload-x:hover, .amc-upload-retry:hover, .amc-upload-x:focus-visible, .amc-upload-retry:focus-visible { background: rgba(255,255,255,.14); color: #fff; outline: none; }
.amc-upload-x svg { width: 12px; height: 12px; }
.amc-upload-retry { box-shadow: inset 0 0 0 .5px rgba(255,255,255,.5); }
.amc-upload-file.is-leaving { animation: amc-up-out 320ms var(--amc-upload-curve) forwards; }
@keyframes amc-up-out { to { opacity: 0; transform: translateX(calc(12px * var(--amc-dir, 1))); } }
/* the files — square previews */
.amc-upload.is-grid .amc-upload-files { grid-template-columns: repeat(auto-fill, var(--amc-upload-thumb)); gap: 10px; }
.amc-upload.is-grid .amc-upload-file { grid-template-columns: 1fr; grid-template-rows: var(--amc-upload-thumb) auto; padding: 0; gap: 6px; background: none; box-shadow: none; overflow: visible; position: relative; }
.amc-upload.is-grid .amc-upload-th { width: var(--amc-upload-thumb); height: var(--amc-upload-thumb); border-radius: 16px; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3); }
.amc-upload.is-grid .amc-upload-th .amc-icon { width: 28px; height: 28px; }
.amc-upload.is-grid .amc-upload-th small { bottom: 10px; font-size: 9px; }
.amc-upload.is-grid .amc-upload-meta .amc-progress, .amc-upload.is-grid .amc-upload-meta > span:not(.amc-status-dot):not(.amc-upload-err) { display: none; }
.amc-upload.is-grid .amc-upload-name { font-size: 11px; }
.amc-upload.is-grid .amc-upload-act { position: absolute; top: 4px; inset-inline-end: 4px; }
.amc-upload.is-grid .amc-upload-x { background: rgba(20,35,50,.35); color: #fff; height: 26px; min-width: 26px; padding: 0; }
.amc-upload.is-grid .amc-upload-retry { position: absolute; top: 34px; inset-inline-end: 0; background: rgba(20,35,50,.35); }
.amc-upload-ring { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20,35,50,.28); transition: opacity 400ms var(--amc-upload-curve); }
.amc-upload-ring svg { width: 40%; height: 40%; transform: rotate(-90deg); }
[dir="rtl"] .amc-upload-ring svg { transform: rotate(-90deg) scaleY(-1); }
.amc-upload-ring circle { fill: none; stroke-width: 3; }
.amc-upload-ring .t { stroke: rgba(255,255,255,.25); } .amc-upload-ring .a { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .35s var(--amc-upload-curve); }
.amc-upload-file.is-done .amc-upload-ring, .amc-upload-file.is-error .amc-upload-ring { opacity: 0; }
.amc-upload:not(.is-grid) .amc-upload-ring { display: none; }
.amc-upload-err { color: #fff; }
@media (prefers-reduced-motion: reduce) { .amc-upload-file.is-new, .amc-upload-file.is-leaving { animation-duration: 1ms; } }
/* AMC HMS — tooltips (locked 2026-09-26, Tooltips Lab). Hover anything with help (PC), tap ⓘ (phone); 0.3s wait; title / number / link when there is one. Behaviour: amc-tip.js — nothing to call.
Any element: data-amc-tip="Beds ready for a new patient now"
Richer help: data-amc-tip="Beds in use across all wards" data-amc-tip-title="Occupancy" data-amc-tip-value="212 of 244 beds" data-amc-tip-link="See beds|#beds"
Help icon:
(the ⓘ is drawn by the script; tap it on the phone)
Glass: the pop-up glass pack (amc-glass-pop). */
:root {
--amc-tip-trigger: hover; /* hover | info — hover anything with help (PC) + tap ⓘ (phone), or help only behind ⓘ */
--amc-tip-delay: 300ms; /* wait before it shows on hover */
--amc-tip-content: rich; /* short | rich — text only, or title + text + a number / link */
--amc-tip-w: 220px; /* widest a tooltip gets */
--amc-tip-curve: cubic-bezier(.2,.8,.2,1);
}
.amc-tip { position: fixed; z-index: 1040; top: 0; left: 0; max-width: min(var(--amc-tip-w), calc(100vw - 24px)); box-sizing: border-box; padding: 9px 12px; border-radius: 14px;
display: grid; gap: 5px; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 220ms var(--amc-tip-curve), transform 220ms var(--amc-tip-curve);
font: 400 12px/1.4 var(--amc-font-body); color: #fff; }
.amc-tip.is-below { transform: translateY(-4px); }
.amc-tip.is-on { opacity: 1; transform: none; }
.amc-tip.has-link { pointer-events: auto; }
.amc-tip-t { font: 500 12.5px/1.25 var(--amc-font-body); color: #fff; }
.amc-tip-s { color: var(--amc-white-soft); }
.amc-tip-v { font: 300 18px/1.1 var(--amc-font-number); color: #fff; }
.amc-tip-a { justify-self: start; font-size: 11.5px; }
.amc-tip.is-short .amc-tip-t, .amc-tip.is-short .amc-tip-v, .amc-tip.is-short .amc-tip-a { display: none; }
.amc-tip.is-short .amc-tip-s { color: #fff; }
/* the ⓘ */
.amc-info { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; cursor: help;
color: var(--amc-white-muted); transition: color 300ms var(--amc-tip-curve), background-color 300ms var(--amc-tip-curve); }
.amc-info:hover, .amc-info:focus-visible, .amc-info[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.14); outline: none; }
.amc-info .amc-icon { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .amc-tip { transition-duration: 1ms; } }
/* AMC HMS — locked top bar (Shell Lab, locked 7 Oct 2026). Behaviour: amc-topbar.js — amcTopbar({ … }).
One glass bar across the top on every page, next to the side bar. Start: AMC HMS · branch code · language. Middle: search. End: system status (only while something is not working),
tasks, notifications, Christina, the signed-in person.
Glass, type, buttons, badge, avatar, menus and search all come from their packs — this file only places them. */
:root {
--amc-topbar-h: 60px; /* bar height */
--amc-topbar-r: 36px; /* corners (anything over half the height = full pill) */
--amc-topbar-pad: 8px; /* inside the bar, start and end */
--amc-topbar-gap: 10px; /* between things in the bar */
--amc-topbar-search-w: 420px; /* search field */
--amc-topbar-glass: normal; /* normal | tinted (whiter, like the open side bar) */
--amc-topbar-brand: on; /* on | off — "AMC HMS" at the start of the bar */
}
/* Place: beside the folded side bar, the same distance from the screen edge as the side bar */
.amc-topbar { position: fixed; z-index: 850; top: var(--amc-nav-inset); inset-inline-start: calc(var(--amc-nav-w-icons) + var(--amc-nav-inset) * 2); inset-inline-end: var(--amc-nav-inset);
height: var(--amc-topbar-h); box-sizing: border-box; padding: 0 var(--amc-topbar-pad); border-radius: var(--amc-topbar-r);
display: flex; align-items: center; gap: var(--amc-topbar-gap); overflow: visible; }
.amc-topbar.amc-glass { overflow: visible; }
.amc-topbar.is-tinted.amc-glass { background: var(--amc-glass-tint); }
.amc-topbar { --amc-refraction-split: 0.15; } /* same edge as the side bar */
body.amc-has-topbar { padding-top: calc(var(--amc-topbar-h) + var(--amc-nav-inset)); }
.amc-topbar-start, .amc-topbar-end { display: flex; align-items: center; gap: var(--amc-topbar-gap); min-width: 0; }
.amc-topbar-start { flex: 0 0 auto; } /* start and end keep their size; search gives way */
.amc-topbar-end { flex: 0 0 auto; justify-content: flex-end; } /* the buttons never get squeezed */
.amc-topbar-end > *, .amc-topbar-start > .amc-topbar-brand { flex: none; }
.amc-topbar-mid { flex: 1 1 var(--amc-topbar-search-w); max-width: var(--amc-topbar-search-w); min-width: 140px; margin-inline: auto; } /* search sits in the middle and gives way when room runs out */
.amc-topbar-mid .amc-search-field { max-width: none; }
/* AMC HMS — words only, the same title font as the side bar logo */
.amc-topbar-brand { display: inline-flex; align-items: baseline; gap: 6px; padding-inline: 10px 4px; white-space: nowrap; font: 500 15px/1 var(--amc-font-title); letter-spacing: .14em; color: #fff; }
.amc-topbar-brand span { font-weight: 300; color: var(--amc-white-muted); }
.amc-topbar.no-brand .amc-topbar-brand { display: none; }
[dir="rtl"] .amc-topbar-brand { letter-spacing: .14em; } /* Latin letters, kept as they are */
/* Branch — a ghost button when the person may switch, plain words when not */
.amc-topbar-branch { min-width: 0; } .amc-topbar-branch span { overflow: hidden; text-overflow: ellipsis; }
.amc-topbar-branch .amc-icon:last-child { width: 14px; height: 14px; opacity: .7; }
.amc-topbar-branch-slot { min-width: 0; display: flex; }
.amc-topbar-place { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding-inline: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--amc-white-soft); font: 400 12px/1 var(--amc-font-body); }
.amc-topbar-place .amc-icon { width: 18px; height: 18px; flex: none; }
/* System status — only while something is wrong; it stays until it is fixed. It opens and closes smoothly (the motion pack):
its width glides, so the search beside it narrows and widens with it — nothing jumps. */
.amc-topbar-status-wrap { flex: none; display: flex; overflow: hidden; width: 0; opacity: 0; margin-inline-end: calc(var(--amc-topbar-gap) * -1);
transition: width var(--amc-dur-medium) var(--amc-ease), opacity var(--amc-dur-medium) var(--amc-ease), margin var(--amc-dur-medium) var(--amc-ease); }
.amc-topbar-status-wrap.is-on { opacity: 1; margin-inline-end: 0; }
.amc-topbar-status { flex: none; white-space: nowrap; max-width: 280px; } .amc-topbar-status > span:last-child { overflow: hidden; text-overflow: ellipsis; }
/* Language: one button beside the branch, in the other language's own words */
.amc-topbar-lang { flex: none; } .amc-topbar-lang-short { display: none; }
/* Tasks: the same round button and badge as the bell */
.amc-topbar-tasks { position: relative; }
/* The signed-in person: avatar + name (the side bar's avatar and name styles) */
.amc-topbar-user { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; height: 40px; padding-block: 3px; padding-inline: 3px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; min-width: 0; }
.amc-topbar-user .amc-who-name { opacity: 1; }
.amc-topbar-user.is-static { cursor: default; }
.amc-topbar-user:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .amc-topbar-user:not(.is-static):hover { background: rgba(255,255,255,.08); } }
/* Christina sits in its own slot when she lives in the bar */
.amc-topbar-christina { display: contents; }
/* Compact desktop: the middle gives way first, the name next */
@media (max-width: 1100px) { .amc-topbar-status { max-width: 200px; } .amc-topbar-user .amc-who-name { display: none; } .amc-topbar-user { padding-inline: 3px; } }
/* Phone: full width at the top; the side bar becomes the bottom tab bar */
@media (max-width: 700px) {
.amc-topbar { top: 12px; inset-inline: 12px; --amc-topbar-pad: 6px; gap: 6px; }
.amc-topbar-mid { min-width: 0; } .amc-topbar-start { flex: none; }
body.amc-has-topbar { padding-top: calc(var(--amc-topbar-h) + 12px); }
.amc-topbar-brand, .amc-topbar-branch .amc-icon, .amc-topbar-place .amc-icon, .amc-topbar-tasks { display: none; } /* phone: the branch is just its code */
.amc-topbar-branch { padding: 0 12px; }
.amc-topbar-status > span:last-child { display: none; } /* phone: the status shows as its dot; tap it for the words */
.amc-menu-item.is-phone-only { display: flex; }
.amc-topbar-lang { width: 40px; padding: 0; } .amc-topbar-lang-long { display: none; } .amc-topbar-lang-short { display: inline; } /* phone: ع / EN */
}
.amc-menu-item.is-phone-only { display: none; } /* Log out lives in the side bar on PC; the phone has no side bar, so it stays in this menu there */ /* AMC HMS — scrolling (Spine Lab, 26 Sept 2026). No scroll bars anywhere — the page and every scrolling panel.
When there is more below, a chevron bounces softly at the bottom; tap it to move down. It fades when the bottom is reached. No chevron at the top.
The chevron is the dropdown arrow (solar:alt-arrow-down-linear) on its own — no pill, no glass. Behaviour: amc-scroll.js — nothing to call. */
:root {
--amc-scroll-more-size: 34px; /* tap area around the chevron */
--amc-scroll-icon: 22px; /* the chevron itself */
--amc-scroll-bounce: 6px; /* how far it bounces */
--amc-scroll-bounce-speed: 1.6s;
--amc-scroll-gap: 14px; /* from the bottom edge */
}
html, * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, *::-webkit-scrollbar { display: none; width: 0; height: 0; }
.amc-scroll-more { all: unset; position: fixed; z-index: 1035; width: var(--amc-scroll-more-size); height: var(--amc-scroll-more-size); box-sizing: border-box; filter: drop-shadow(0 1px 6px rgba(20,35,50,.35));
display: grid; place-items: center; cursor: pointer; color: #fff; pointer-events: none; opacity: 0; transform: translate(-50%, 6px);
transition: opacity var(--amc-dur-medium) cubic-bezier(.2,.8,.2,1), transform var(--amc-dur-medium) cubic-bezier(.2,.8,.2,1); }
.amc-scroll-more.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.amc-scroll-more .amc-icon { width: var(--amc-scroll-icon); height: var(--amc-scroll-icon); animation: amc-scroll-bounce var(--amc-scroll-bounce-speed) ease-in-out infinite; }
@keyframes amc-scroll-bounce { 0%, 100% { transform: translateY(calc(var(--amc-scroll-bounce) * -.3)); } 50% { transform: translateY(calc(var(--amc-scroll-bounce) * .7)); } }
@media (prefers-reduced-motion: reduce) { .amc-scroll-more .amc-icon { animation: none; } }
/* Approved component refinements of 14 Oct 2026 (Reception developer package 2026-10-14): shared 3px row-edge
separation, panel-body scrolling, paired cards and the scoped rx- Reception recipes. Last, as in the pack. */
.rx-navigation{display:flex;flex-wrap:nowrap;flex:0 0 auto;justify-content:flex-end;align-items:center;gap:8px;direction:ltr;margin-left:auto;margin-right:0;align-self:start}.amc-panel-head.rx-panel-heading{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:start;direction:ltr}.rx-panel-heading>div:first-child{min-width:0;overflow-wrap:anywhere}.rx-navigation>button,#view-patient #back,#view-patient #patient-close{width:40px;height:40px;min-width:40px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px}#view-patient>.amc-page-head{display:flex;justify-content:flex-end;gap:8px;direction:ltr}
#patient-body{display:grid;gap:var(--amc-cell-gap,8px);min-width:0}
.rx-completion-copy{min-width:0}.rx-completion-actions{display:flex;flex-wrap:wrap;gap:8px}.rx-completion-checklist .rx-completion-row{grid-template-columns:10px minmax(0,1fr) auto}.rx-completion-checklist .rx-completion-actions{grid-column:3;flex-direction:column;align-items:flex-end}.rx-completion-note{margin-top:var(--amc-space-pair)}
[data-rx-missing]{gap:var(--amc-space-tight)}.rx-missing-header{position:relative;top:var(--amc-cell-gap,8px);display:flex;align-items:center;justify-content:space-between;gap:var(--amc-space-tight)}.page-title>.amc-display,.page-title>.amc-heading,.panel-head .amc-heading,.panel>.amc-heading{margin:0}.amc-panel-head .amc-heading{margin-top:0}.rx-completion-checklist .rx-completion-actions>.amc-btn{white-space:nowrap}
.amc-tag{justify-self:start;width:fit-content;max-width:100%}
.rx-document-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:var(--amc-space-pair);align-items:start}.rx-document-grid>[data-rx-document-type]{gap:var(--amc-space-tight)}.rx-document-grid .amc-upload-drop{padding:14px 12px;gap:6px}.rx-document-grid .amc-upload-drop .amc-icon{width:20px;height:20px}.rx-document-grid .amc-upload{gap:8px}.rx-document-grid .amc-upload-drop>span{font-size:11px}
.rx-document-grid>[data-rx-document-type]>h3:not([hidden]){min-block-size:2lh;align-content:start;margin:0}.rx-document-grid>[data-rx-document-type]>h3[hidden]{display:none}
.amc-phead-row .amc-phead-item>b,.amc-phead-row .amc-phead-none{min-height:var(--amc-tag-h);display:flex;align-items:center;margin:0}.amc-phead-row .amc-phead-item>.amc-tags{min-height:var(--amc-tag-h);align-items:center}
.amc-form-actions.is-sticky.amc-glass-pop{--amc-rf:initial;background:linear-gradient(172deg,rgba(255,255,255,var(--amc-pop-tint)),rgba(255,255,255,calc(var(--amc-pop-tint)*.45)))}.amc-phead-row .amc-phead-item>b{font:400 11px/1 var(--amc-font-body);letter-spacing:.02em}[dir=rtl] .amc-phead-row .amc-phead-item>b{font-size:12px;letter-spacing:0}
.amc-form-actions.is-sticky.rx-form-overlay{position:fixed;z-index:1050;box-sizing:border-box;--amc-rf:initial}
body>.amc-side.amc-glass{transition:width var(--amc-nav-speed,460ms) var(--amc-nav-ease,cubic-bezier(.2,.8,.2,1)),opacity var(--amc-dur-medium,460ms) var(--amc-ease);will-change:width}.amc-side .amc-nav-item{transition:padding var(--amc-nav-speed,460ms) var(--amc-nav-ease),transform 220ms var(--amc-nav-ease),background-color 160ms var(--amc-nav-ease)}
.amc-cpanel-body{min-height:0;overscroll-behavior-y:contain}.amc-cpanel{overscroll-behavior:contain}
#find-card .find .amc-input{height:var(--amc-field-h);min-height:var(--amc-field-h);padding-block:0;font-size:var(--amc-field-f);line-height:1.2}#find-card .find .amc-float label{font-size:var(--amc-field-f);top:50%;transform:translateY(-50%)}#find-card .find .amc-input:focus+label,#find-card .find .amc-input:not(:placeholder-shown)+label{opacity:0}#find-card #results .amc-state{--amc-state-pad:var(--amc-space-tight)}
#find-card .find{grid-template-columns:minmax(0,1fr)}
.amc-form-field.has-error .amc-chips{box-shadow:none;border-radius:0}
.amc-form-field.has-error .amc-chips .amc-chip>span{box-shadow:inset 0 0 0 1px var(--amc-critical)}
.amc-dialog-title{margin:0 0 var(--amc-space-tight)}.amc-panel-head>div:first-child{display:grid;gap:var(--amc-space-tight)}.amc-panel-head>div:first-child>.amc-heading{margin:0}
.amc-panel{display:flex;flex-direction:column;overflow:hidden}.amc-panel>.amc-panel-head{flex:0 0 auto}.amc-panel>.amc-panel-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.amc-panel>.amc-panel-body{clip-path:inset(0 0 var(--rx-footer-clip,0px) 0);scrollbar-width:none}.amc-panel>.amc-panel-body::-webkit-scrollbar{display:none}
.amc-float textarea.amc-input{padding-top:26px}.amc-float textarea.amc-input+label{top:8px;transform:none;font-size:8.5px;line-height:1.2}[dir=rtl] .amc-float textarea.amc-input+label{font-size:9.5px}
.amc-date-pop>.amc-cal{max-height:var(--rx-calendar-room,calc(100vh - 80px));overflow-y:auto;overscroll-behavior:contain}
#no-appts .amc-state,#no-visits .amc-state{--amc-state-pad:var(--amc-space-tight);justify-items:start;text-align:start;padding-inline:0}#no-appts .amc-state-actions{margin-top:var(--amc-space-tight);justify-content:flex-start}
.rx-document-statuses{display:grid;gap:var(--amc-cell-gap,8px)}.rx-document-statuses>.amc-upload-hint{display:block;min-height:1lh;overflow-wrap:anywhere;text-box:normal}
.fact{display:grid;gap:8px;min-width:0}.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--amc-space-pair)}.fact>.amc-body{overflow-wrap:anywhere}.rx-request-section{display:grid;gap:var(--amc-form-head-gap)}.rx-request-section>.amc-heading{margin:0}.rx-transport-intake{gap:var(--amc-space-block)}.rx-transport-intake .amc-form-sec-h{gap:var(--amc-space-tight)}.rx-provider-summary{display:flex;flex-wrap:wrap;gap:var(--amc-space-tight);align-items:center;margin-bottom:var(--amc-space-pair)}.rx-people .amc-input{padding-inline-end:60px}.rx-people-steps{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);display:flex;gap:2px}.rx-people-steps .amc-btn{width:24px;height:24px;min-width:24px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center}.rx-people-steps .amc-icon{width:16px;height:16px}.rx-time-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rx-transport-form .has-error .amc-input{border-color:var(--amc-critical)}
.panel-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.amc-select-pop>.amc-select-list{overscroll-behavior:contain}
.rx-paired-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--amc-cell-gap);align-items:start;margin-top:var(--amc-group-gap)}.rx-paired-panels--appointments{grid-template-columns:repeat(2,minmax(0,calc(var(--rx-cell,49px)*8 + var(--amc-cell-gap)*7)))}.rx-paired-panels>.amc-card{min-width:0;display:flex;flex-direction:column;gap:var(--amc-space-pair);height:var(--rx-paired-height,auto);overflow:hidden}.rx-paired-panels>.amc-card>.panel-head{flex:0 0 auto}.rx-paired-panels>.amc-card>:is(.amc-list,.meters){flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.rx-paired-panels>.amc-card>:is(.amc-list,.meters)::-webkit-scrollbar{display:none}.rx-paired-panels+.amc-grid{margin-top:var(--amc-group-gap)}
/* Separate adjacent zebra/hover/selection fills without adding row margins.
Keep clipping when the pack's hover background shorthand resets it. */
.amc-table-rows > .amc-tr-body,
.amc-list > .amc-list-item,
.amc-chart-table > div:not(:first-child) {
box-sizing: border-box;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
background-clip: padding-box !important;
}
/* The 3px transparent edge replaces 3px of the original 8px padding. */
.amc-list > .amc-list-item,
.amc-chart-table > div:not(:first-child) {
padding-top: 5px;
padding-bottom: 5px;
}
/* HMS layout (D-034). Every look — glass, type, colour, buttons, controls, dialogs, tables, tabs, states — comes from
Adham's design pack (@design/amc-m01.css). This file only places things (pack rule §3: a part's own CSS may only set
layout), plus three structural needs the pack leaves to the page: the static background used when the live background
is off, the skip link, and visually hidden text. Logical properties only, so RTL flips by itself. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
#root { min-height: 100vh; }
/* Static background — only when the live silk is off (automated browsers, no WebGL). Reduced motion keeps the live
silk: the pack script draws one still frame itself. The colour is the pack's own page background behind the silk
(amc-background.js `html { background: #aebfce }`); the earlier gradient used the pre-2026-10-14 pale palette. */
.hms-bg-static { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: #aebfce; }
html.hms-live-bg .hms-bg-static { display: none; }
.hms-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hms-skip-link { position: fixed; z-index: 2000; inset-inline-start: 16px; top: -80px; }
.hms-skip-link:focus { top: 16px; }
/* Shell frame: side bar (amc-side) + top bar (amc-topbar) are fixed by the pack; the body padding is set by the
pack classes amc-has-nav / amc-has-topbar. Main content uses amc-page. */
.hms-main { outline: none; }
.hms-main .amc-page { padding-top: 24px; }
.hms-foot { padding: 0 var(--amc-page-edge) 24px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.hms-side-section { display: grid; gap: var(--amc-nav-gap); }
.hms-side-section + .hms-side-section { margin-top: 10px; }
/* Module frame (registry.registerFrame): the module's other workspaces below its design pages, after a hairline. */
.hms-side-more { margin-top: 18px !important; padding-top: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.hms-topbar-ctx { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hms-env { position: fixed; z-index: 1040; bottom: 12px; inset-inline-end: 16px; pointer-events: none; }
@media (max-width: 700px) { .hms-env { bottom: calc(var(--amc-nav-tab-h) + 24px); } .hms-topbar-ctx { display: none; } }
/* Generic layout helpers */
.hms-stack { display: grid; gap: var(--amc-space-tight); min-width: 0; }
.hms-stack--lg { gap: var(--amc-space-block); }
.hms-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.hms-row--between { justify-content: space-between; }
.hms-row--end { justify-content: flex-end; }
.hms-grow { flex: 1 1 auto; min-width: 0; }
.hms-mt { margin-top: var(--amc-space-tight); }
.hms-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--amc-cell-gap); align-items: start; }
.hms-cards--wide { grid-template-columns: minmax(0, 1fr); }
.hms-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: var(--amc-space-tight); }
.hms-card-head > h2, .hms-card-head > h3 { margin: 0; }
.hms-kv { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 10px 18px; margin: 0; align-items: baseline; }
.hms-kv > dt { margin: 0; } .hms-kv > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .hms-kv { grid-template-columns: minmax(0, 1fr); gap: 4px; } .hms-kv > dd { margin-bottom: 8px; } }
.hms-note { display: flex; align-items: flex-start; gap: 10px; }
.hms-note > .amc-status-dot { margin-top: 4px; }
.hms-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hms-action { display: grid; gap: 4px; justify-items: start; }
.hms-ref { font-family: var(--amc-font-number); direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.hms-pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.hms-nested { padding-inline-start: 14px; box-shadow: inset 2px 0 0 rgba(255,255,255,.25); }
[dir="rtl"] .hms-nested { box-shadow: inset -2px 0 0 rgba(255,255,255,.25); }
.hms-list-reset { list-style: none; margin: 0; padding: 0; }
.hms-table-cols-2 { --amc-table-cols: minmax(0, 2fr) minmax(0, 1fr); }
.hms-table-cols-3 { --amc-table-cols: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.hms-table-cols-4 { --amc-table-cols: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.hms-table-cols-5 { --amc-table-cols: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
.hms-table-cols-6 { --amc-table-cols: minmax(0, 2fr) repeat(5, minmax(0, 1fr)); }
/* Accounts (owner 2026-10-24): column widths for the pack's grid rows; on narrow windows (the pack's 700px phone width)
each row's cells stack, so the actions wrap below the account instead of being squeezed or clipped (layout only). */
.hms-acc-table { --amc-table-cols: minmax(150px, 1.3fr) minmax(130px, 1fr) minmax(140px, 1fr) minmax(0, 2fr); }
@media (max-width: 700px) {
.hms-acc-table .amc-tr:not(.amc-tr-head) { grid-template-columns: minmax(0, 1fr); row-gap: var(--amc-space-tight); padding-block: var(--amc-space-tight); }
}
.hms-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.hms-filters > * { min-width: 160px; }
.hms-dialog-group { display: grid; gap: var(--amc-space-tight); padding: 12px; border-radius: 18px; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35); }
.hms-search-pop { position: fixed; z-index: 1001; max-height: min(70vh, 520px); overflow-y: auto; padding: 6px; border-radius: 24px; }
.hms-npanel { position: fixed; z-index: 1001; max-height: min(70vh, 560px); overflow-y: auto; }
.hms-menu { position: fixed; z-index: 1001; }
.hms-signin { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.hms-signin > .amc-glass { width: min(520px, 100%); }
/* Local module entry page: the chip + small Open row takes the slot of the design's instruction sentence
(amc-signin-words > p: 13px margins around a 9px trimmed line = 35px), so the card keeps the reference geometry. A
minimum, not a fixed height: the row wraps and grows on narrow screens or with longer labels. */
.hms-entry-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 35px; }
.hms-tabset-panel:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 4px; border-radius: 12px; }
.hms-btn-reset { appearance: none; border: 0; margin: 0; width: 100%; text-align: start; cursor: pointer; background-color: transparent; }
.amc-list > .hms-btn-reset:nth-child(even) { background-color: rgba(255,255,255,var(--amc-table-zebra)); }
/* Pack form fields are subgrids in rows; give them one full-width column so controls fill the field (layout only). */
.amc-form-field { grid-template-columns: minmax(0, 1fr); }
.amc-form-field > .amc-input, .amc-form-field > select, .amc-form-field > textarea { width: 100%; justify-self: stretch; }
/* Native dropdown lists: the pack's .amc-input text colour (white) is inherited by