markup — no duplicate mobile-only markup to keep in sync.
thead hides; each
becomes a bordered card; each
becomes a labelled row inside it
via a `data-label` attribute (added only on the views' own secondary cells — the first,
identity cell needs no label, it reads as the card's own heading, and the last, action
cell becomes a full-width button at the card's foot instead of a label+value row).
.actions' hover-reveal fade (line 211) is meaningless on a touch device with no hover
state, so it's forced fully opaque here — same override this file already gives
.is-overdue rows for the identical reason. */
@media (max-width:640px){
.table thead{display:none}
.table, .table tbody, .table tr{display:block;width:100%}
.table tbody tr{border:1px solid var(--rule);border-radius:var(--radius);
margin-bottom:var(--s3);padding:var(--s3) var(--s3) var(--s2);background:var(--surface);
box-shadow:none}
.table tbody tr:last-child{margin-bottom:0}
.table tbody tr.is-overdue{border-left:3px solid var(--danger)}
.table tbody tr.is-overdue td:first-child{padding-left:0}
.table tbody td{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
height:auto;padding:8px 0;border-bottom:1px solid var(--rule)}
.table tbody td:first-child{padding-top:0}
.table tbody td[data-label]::before{content:attr(data-label);font-weight:600;
color:var(--ink-muted);font-size:var(--text-caption);flex:0 0 auto}
.table tbody td:last-child{display:block;padding-bottom:0;border-bottom:none}
.table tbody td.right .btn,.table tbody td:last-child .actions .btn{width:100%}
.table .actions{opacity:1}
}
/* ============================================================
COMPONENT · EmptyState — teaches, never a bare panel
============================================================ */
.empty{padding:var(--s6) var(--s4);text-align:center}
.empty__icon{display:grid;place-items:center;width:44px;height:44px;margin:0 auto var(--s3);
border-radius:50%;background:var(--surface-sunken);color:var(--ink-muted)}
.empty__title{font-weight:650;margin-bottom:var(--s1)}
.empty__msg{margin-bottom:var(--s4);color:var(--ink-secondary);font-size:var(--text-dense);
max-width:36ch;margin-left:auto;margin-right:auto}
/* ============================================================
COMPONENT · UndoToast — replaces confirmation dialogs
============================================================ */
.toast{display:inline-flex;align-items:center;gap:var(--s4);padding:12px var(--s4);
background:var(--ink);color:#fff;border-radius:var(--radius);font-size:var(--text-dense);
box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.toast__action{color:#93C5FD;font-weight:650;background:none;border:0;cursor:pointer;
font-family:inherit;font-size:var(--text-dense)}
.toast__progress{position:absolute;left:0;bottom:0;height:2px;background:#93C5FD;width:60%}
/* ============================================================
COMPONENT · Chips / Banner
============================================================ */
.chips{display:flex;gap:6px}
.chip{height:32px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;
background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--radius-pill);
font-size:var(--text-dense);font-weight:500;color:var(--ink-secondary);cursor:pointer;
text-decoration:none}
.chip:hover{background:var(--surface-hover)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip__count{font-size:var(--text-micro);opacity:.7;font-variant-numeric:tabular-nums}
.banner{display:flex;gap:10px;padding:12px var(--s3);border-radius:var(--radius-sm);
font-size:var(--text-dense);line-height:1.55;align-items:flex-start}
.banner .icon{margin-top:1px}
.banner--warning{background:var(--warning-subtle);color:#8A4A08;border:1px solid var(--warning-border)}
.banner--danger{background:var(--danger-subtle);color:#8F1D1D;border:1px solid var(--danger-border)}
.banner--accent{background:var(--accent-subtle);color:#1B3FA8;border:1px solid var(--accent-border)}
/* ============================================================
COMPONENT · ToothPicker (FDI)
============================================================ */
.teeth{display:inline-block;padding:var(--s3);background:var(--surface-raised);
border:1px solid var(--rule);border-radius:var(--radius)}
.teeth__arch{display:flex;gap:3px;justify-content:center}
.teeth__arch+.teeth__arch{margin-top:6px}
.teeth__gap{width:14px}
.tooth{width:30px;height:36px;display:grid;place-items:center;background:var(--surface);
border:1px solid var(--rule-strong);border-radius:5px;font-size:var(--text-micro);
font-variant-numeric:tabular-nums;color:var(--ink-secondary);cursor:pointer;
font-family:inherit;transition:all .1s;text-decoration:none}
.tooth:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.tooth[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;
font-weight:700;box-shadow:var(--shadow-sm)}
.teeth__legend{margin-top:10px;font-size:var(--text-micro);color:var(--ink-muted);text-align:center}
/* Clinical tooth chart — states, not selection (Phase 5 slice 2). Same .teeth/.tooth
markup as the picker above, scoped larger and state-coloured under .chart. */
/* Phase 7 slice 4 (ClickUp 86d3upap9): "Tooth chart | Keep the anatomical arrangement,
scale to width. Teeth stay ≥44px. Never reflow into a grid." .chart .tooth is already
exactly 44px — the floor, not a larger desktop-only size — so there's no room to shrink
it further on a phone without breaking that floor; a full arch at 44px teeth is wider
than a phone viewport (confirmed: ~800px), so "scale to width" is satisfied by letting the
chart's own box fit its container (max-width:100%) and scroll horizontally *within
itself* rather than blowing out the whole page's horizontal scroll — same "swipeable
panel, never drag across a boundary that doesn't work on a phone" reasoning as the lab
Kanban's own phone treatment. .teeth__arch stays a plain flex row (no wrap), so the
anatomical layout and the ≥44px floor both hold unconditionally, not just below a
breakpoint. */
.chart{padding:var(--s5) var(--s4);background:var(--surface);border:1px solid var(--rule);
border-radius:var(--radius);display:inline-block;max-width:100%;overflow-x:auto}
.chart .teeth__arch{gap:5px}
.chart .teeth__gap{width:22px}
.chart .tooth{width:44px;height:52px;font-size:var(--text-caption);font-weight:600;
border-width:2px;position:relative}
.tooth--history{background:var(--neutral-subtle);border-color:var(--neutral);color:var(--ink-secondary)}
.tooth--active{background:var(--warning-subtle);border-color:var(--warning);color:var(--warning)}
.tooth--flagged{background:var(--danger-subtle);border-color:var(--danger);color:var(--danger)}
.tooth--flagged::after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;
border-radius:50%;background:var(--danger)}
.chart__legend{display:flex;gap:var(--s4);justify-content:center;margin-top:var(--s4);flex-wrap:wrap}
.lg{display:flex;align-items:center;gap:7px;font-size:var(--text-caption);color:var(--ink-secondary)}
.lg__sw{width:16px;height:16px;border-radius:4px;border:2px solid}
.chart__arch-label{text-align:center;font-size:var(--text-micro);color:var(--ink-muted);
letter-spacing:.06em;text-transform:uppercase;margin:var(--s2) 0}
/* Tooth history drawer (Phase 5 slice 2) */
.drawer{width:420px;max-width:100%;background:var(--surface);border-left:1px solid var(--rule);
box-shadow:-4px 0 16px rgba(11,18,32,.06);display:flex;flex-direction:column}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:var(--s4);
border-bottom:1px solid var(--rule)}
.drawer__title{font-size:var(--text-title);font-weight:700}
.drawer__sub{font-size:var(--text-caption);color:var(--ink-muted)}
.drawer__body{flex:1;overflow:auto}
.drawer__foot{padding:var(--s3) var(--s4);border-top:1px solid var(--rule);background:var(--surface-sunken)}
/* Phase 7 slice 4 (ClickUp 86d3upap9): "History drawer | Side drawer → full-screen sheet."
patients/show.html.erb lays .drawer out as a plain flex sibling next to the tooth chart
(it was never a true overlay to begin with — flex-wrap already stacked it below the chart
at narrow widths), so no markup change is needed here, only making it cover the viewport
like a real sheet instead of sitting in normal document flow at phone width. The close
link's own Turbo Frame re-request (patient_path, no default block content) is unchanged
and remains the dismiss action. */
@media (max-width:640px){
.drawer{position:fixed;inset:0;z-index:45;width:auto;max-width:none;border-left:none}
}
.acc{border-bottom:1px solid var(--rule)}
.acc__head{display:flex;align-items:center;gap:10px;padding:var(--s3) var(--s4);cursor:pointer;
list-style:none}
.acc__head::-webkit-details-marker{display:none}
.acc__head:hover{background:var(--surface-hover)}
.acc__date{font-size:var(--text-caption);color:var(--ink-muted);font-variant-numeric:tabular-nums;
width:76px;flex:0 0 76px}
.acc__sum{flex:1;font-size:var(--text-dense);font-weight:550}
.acc__body{padding:0 var(--s4) var(--s4) 102px;font-size:var(--text-dense)}
.acc__row{display:grid;grid-template-columns:84px 1fr;gap:var(--s3);padding:5px 0}
.acc__k{color:var(--ink-muted);font-size:var(--text-caption)}
.acc__thumbs{display:flex;gap:6px;margin-top:8px}
.acc__thumb{width:54px;height:54px;border-radius:var(--radius-sm);overflow:hidden;
background:linear-gradient(135deg,#EDEFF3,#DDE2EA);border:1px solid var(--rule);display:block}
.acc__by{margin-top:10px;font-size:var(--text-micro);color:var(--ink-muted)}
/* Voice capture — one job, everything else hidden (Phase 5 slice 3). Ported verbatim from
docs/dental-os-handoff/design/dental-os-screens-phase5.html's own .rec block. */
.rec{display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:var(--s7) var(--s4);gap:var(--s4);min-height:440px}
.rec__ctx{font-size:var(--text-body);color:var(--ink-secondary);text-align:center}
.rec__ctx b{color:var(--ink)}
.rec__btn{width:132px;height:132px;border-radius:50%;border:0;cursor:pointer;
background:var(--danger);color:#fff;display:grid;place-items:center;
box-shadow:0 0 0 10px var(--danger-subtle)}
.rec__btn svg{width:48px;height:48px;stroke:currentColor;fill:none;stroke-width:1.75}
.rec__btn[disabled]{opacity:.5;cursor:not-allowed}
.rec__btn--active{animation:rec-pulse 1.6s ease-in-out infinite}
@keyframes rec-pulse{0%,100%{box-shadow:0 0 0 10px var(--danger-subtle)}50%{box-shadow:0 0 0 16px var(--danger-subtle)}}
.rec__time{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.rec__wave{display:flex;align-items:center;gap:3px;height:38px}
.rec__wave i{display:block;width:4px;border-radius:2px;background:var(--danger);opacity:.75}
.rec__hint{font-size:var(--text-body);color:var(--ink-muted);text-align:center;max-width:34ch}
.rec__actions{display:flex;gap:var(--s3);width:100%;max-width:420px}
.rec__actions .btn{flex:1}
/* [hidden] and .rec__actions{display:flex} are equal-specificity selectors, and this
stylesheet loads after the UA stylesheet — without this, the plain HTML `hidden`
attribute this component relies on to hide Discard/Done before recording starts is
silently overridden and the actions render visible from page load. Found live, not by
spec (view specs render static markup and never assert computed display). */
.rec__actions[hidden]{display:none}
/* Tooth-select-for-capture mini chart (Phase 5 slice 3, ToothChartComponent :select mode) —
same .chart/.teeth/.tooth classes as the :chart-mode history chart, just smaller and
embedded inline on the visit page rather than the full patient profile. */
.chart--compact{padding:var(--s3)}
.chart--compact .tooth{width:34px;height:40px;font-size:var(--text-caption)}
/* AI draft review — split, transcript left, draft right (Phase 5 slice 4). Ported verbatim
from docs/dental-os-handoff/design/dental-os-screens-phase5.html's own .review block. */
.review{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;
border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.review__left{background:var(--surface-sunken);border-right:1px solid var(--rule);padding:var(--s4)}
.review__right{padding:var(--s4)}
/* Phase 7 slice 4 (ClickUp 86d3upap9): .review__left is a — the transcript is
read-only reference material, not the primary editing surface, so it's collapsed by
default everywhere (not just below the stack breakpoint) rather than open on desktop and
closed on mobile, which server-rendered HTML can't express without JS. Marker hidden the
same way .acc__head already does for the history-drawer accordion — no custom arrow drawn
there either, so none added here for consistency. */
.review__label{font-size:var(--text-micro);text-transform:uppercase;letter-spacing:.06em;
font-weight:700;color:var(--ink-muted);margin-bottom:var(--s3);
cursor:pointer;list-style:none}
.review__label::-webkit-details-marker{display:none}
.review__label:hover{color:var(--ink-secondary)}
.transcript{font-size:var(--text-large);line-height:1.7;color:var(--ink);font-style:italic}
.transcript__meta{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule);
font-size:var(--text-caption);color:var(--ink-muted)}
.draft-note{display:flex;gap:10px;background:var(--warning-subtle);border:1px solid var(--warning-border);
border-radius:var(--radius-sm);padding:10px var(--s3);font-size:var(--text-dense);
color:#8A4A08;margin-bottom:var(--s4)}
@media(max-width:900px){.review{grid-template-columns:1fr}}
@media (max-width:640px){
/* "Confirm pinned to the bottom" — the draft form's own action row can end up well below
the fold on a phone (chart fields + finding/diagnosis/plan), so it sticks to the bottom
of the scroll container instead of requiring a scroll-to-submit. Desktop is untouched —
still inline, end of form. */
.review__actions{position:sticky;bottom:0;margin:var(--s4) calc(-1 * var(--s4)) calc(-1 * var(--s4));
padding:var(--s3) var(--s4);background:var(--surface);
border-top:1px solid var(--rule)}
}
/* ============================================================
COMPONENT · Modal
============================================================ */
.modal{width:580px;max-width:100%;background:var(--surface);border:1px solid var(--rule);
border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.modal--narrow{width:460px}
.modal__header{display:flex;align-items:center;gap:10px;padding:var(--s4);
border-bottom:1px solid var(--rule);font-size:var(--text-section);font-weight:650}
.modal__body{padding:var(--s4)}
.modal__footer{display:flex;justify-content:flex-end;gap:var(--s2);padding:var(--s3) var(--s4);
border-top:1px solid var(--rule);background:var(--surface-sunken);
border-radius:0 0 var(--radius-lg) var(--radius-lg)}
/* ============================================================
APP SHELL — clinic
============================================================ */
.app{display:grid;grid-template-columns:224px 1fr;min-height:560px;border:1px solid var(--rule);
border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.app--solo{grid-template-columns:1fr}
/* Phase 7 slice 4 (ClickUp 86d3upap9): a grid item's default min-width is auto, not 0 — the
same root cause this codebase already fixed once for .today-grid (see that fix's own
comment). Without this, the 1fr track sizes itself to fit whatever wide content lives
inside .content (e.g. the tooth chart's own intrinsic ~865px), and .app's own
overflow:hidden (there to clip the shell's rounded corners) silently clips the excess
instead of the track ever actually being constrained to the viewport — found live: the
tooth chart's own max-width:100%/overflow-x:auto never engaged because its immediate
parent had already grown past the viewport to accommodate it. */
.app__main{min-width:0}
.sidebar{background:var(--ink);padding:var(--s4) 0;color:#fff}
.sidebar__brand{display:flex;gap:10px;align-items:center;padding:0 var(--s4) var(--s4);margin-bottom:var(--s2);
border-bottom:1px solid rgba(255,255,255,.09)}
.sidebar__logo{width:32px;height:32px;border-radius:8px;background:var(--accent);display:grid;
place-items:center;font-weight:700;font-size:var(--text-dense);flex:0 0 32px}
.sidebar__name{font-size:var(--text-dense);font-weight:650;line-height:1.3}
.sidebar__name small{display:block;font-size:var(--text-micro);font-weight:400;color:rgba(255,255,255,.5)}
/* Also applied to a