/* ==========================================================================
   Practice portal layout. The design system lives in neu.css + medtap.css;
   this is only the arrangement — the desk shell, the form builder, and the
   queue. Loaded third.
   ========================================================================== */

/* ---------- Hiding -------------------------------------------------------
   The UA's `[hidden] { display:none }` loses to any class that sets display,
   and most of this portal's panels carry one. `hidden` is the switch used
   throughout, so it has to win.                                             */

[hidden]{ display:none !important; }

/* ---------- Screens ------------------------------------------------------- */

/* Not `.screen`: neu.css uses that for the 720px phone viewport. */
.page{ display:none; }
.page.active{ display:block; }

/* ---------- Auth ---------------------------------------------------------- */

.auth-wrap{
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:24px 18px;
}

.auth-card{
  width:100%; max-width:420px;
  padding:28px 26px;
  border-radius:var(--r-xl);
  display:flex; flex-direction:column; gap:18px;
}

.wordmark{ font-size:24px; font-weight:800; letter-spacing:-.03em; color:var(--accent); }

/* ---------- Data tables ---------------------------------------------------
   The queue and the people list are spreadsheets: one raised neumorphic
   tray, a header row, and one hairline-separated row per record with every
   value under its own column. Narrow screens scroll the tray sideways
   rather than reflowing — a table that reflows stops being a table.       */

.dt-wrap{
  border-radius:var(--r-lg);
  padding:6px 10px;
}

/* The scroller is a child, not the tray itself: hydrate() masks any
   overflowing rail so its cut edge fades, and a mask on the tray would take
   the raised shadow with it. */
.dt-scroll{
  position:relative;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.dt{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}

.dt th{
  text-align:left;
  font-size:13px; font-weight:700; letter-spacing:-.005em;
  color:var(--text);
  padding:14px 12px 11px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}

.dt td{
  padding:11px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  white-space:nowrap;
}

.dt tbody tr:last-child td{ border-bottom:0; }

/* A row that opens something reads as a control on hover, but with a wash
   rather than a lift — the tray is the raised object, not the rows in it. */
.dt tbody tr.is-link{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.dt tbody tr.is-link:hover td,
.dt tbody tr.is-link:focus-visible td{
  background:color-mix(in srgb, var(--sh-light) 45%, transparent);
}
.dt tbody tr.is-link:focus-visible{ outline:none; }
.dt tbody tr.is-link:focus-visible td:first-child{ box-shadow:inset 3px 0 0 var(--accent); }

.dt .dt-who{ display:flex; align-items:center; gap:10px; min-width:0; }
.dt .dt-name{ font-weight:700; letter-spacing:-.01em; }
.dt .dt-sub{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.dt .dt-muted{ color:var(--muted); }
.dt .dt-num-cell{ font-variant-numeric:tabular-nums; }
.dt .dt-end{ text-align:right; width:1%; }
.dt .dt-end i{ color:var(--muted); }
.dt .pill{ font-size:12px; }

/* ---------- Queue --------------------------------------------------------- */

.dt-queue{ min-width:1000px; }
.dt-people{ min-width:780px; }
.dt-history{ min-width:820px; }

/* The name is the control; the row's own click handler defers to any button
   inside it, so "Mark seen" and the filing actions stay one tap each. */
.q-open{
  text-align:left; cursor:pointer; min-width:0;
  font:inherit; color:inherit; background:none; border:0; padding:0;
  -webkit-tap-highlight-color:transparent;
}
.q-open:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

.q-name{ font-size:14px; font-weight:700; letter-spacing:-.01em; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.q-meta{ font-size:12px; color:var(--muted); }
.q-when{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Progress through the packet, so the desk can see who is nearly done.
   The ring is drawn only when the patient app has reported a step count —
   inventing a percentage from a coarse status would be worse than no ring. */
.q-status .ring{ vertical-align:middle; }
.q-status .ring .label{ font-size:10px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* Actions cell: the one primary action and the filing pair on one line.
   The filing audit stamps sit under the filing badge in their own column,
   one short line each, so a row stays a row. */
.dt .q-actions{ padding-top:8px; padding-bottom:8px; }
.q-actions-row{ display:flex; align-items:center; gap:6px; }
.q-handoff-actions{ flex:0 0 auto; }

/* The filing badge is the tip's owner; the stamps ride along hidden. */
.dt-tip{ display:inline-flex; cursor:default; border-radius:999px; }
.dt-tip:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.tip{
  position:fixed; z-index:60;
  max-width:320px;
  padding:10px 12px;
  border-radius:12px;
  background:var(--surface);
  color:var(--text-2);
  font-size:12px; line-height:1.4;
  box-shadow:6px 6px 14px var(--sh-dark), -4px -4px 10px var(--sh-light);
  pointer-events:none;
}
.tip .q-handoff-meta{ display:flex; flex-direction:column; gap:2px; white-space:normal; }

.filter-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px;
  font-size:13px; font-weight:600;
  color:var(--text-2);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}

.filter-chip.is-on{ color:var(--accent); }
.filter-chip b{ font-variant-numeric:tabular-nums; }

/* ---------- Form builder -------------------------------------------------- */

.builder{ display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }

@media (max-width:980px){
  .builder{ grid-template-columns:1fr; }
  .builder-rail{ order:-1; }        /* the library comes first on a tablet */
}

.builder-main{ min-width:0; }

.palette{
  display:flex; flex-direction:column; gap:8px;
  max-height:min(56vh, 460px);
  overflow-y:auto; scrollbar-width:none;
  padding:12px 10px; margin:-12px -10px;   /* room so a raised chip's shadow isn't clipped */
}

.palette::-webkit-scrollbar{ display:none; }

/* Tap to add as well as drag — on a tablet, dragging is the awkward one. */
/* Section headings in the block library. A flat list of thirty-odd blocks is
   a wall; the heading is what lets someone building a dental form skip five
   sixths of it. */
.palette-section{ display:contents; }
.palette-section-head{
  grid-column:1/-1; display:flex; flex-direction:column; gap:2px;
  padding:14px 2px 6px;
}
.palette-section:first-child .palette-section-head{ padding-top:2px; }
.palette-section-name{
  display:block;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text);
}
.palette-section-desc{ display:block; font-size:12px; color:var(--muted); line-height:1.4; }

.palette-chip{
  display:flex; align-items:center; gap:10px;
  padding:11px 13px; border-radius:var(--r-sm);
  text-align:left; width:100%;
  cursor:grab; -webkit-tap-highlight-color:transparent;
}

.palette-chip:active{ cursor:grabbing; }
.palette-chip .pc-name{ font-size:13.5px; font-weight:600; }
.palette-chip .pc-desc{ font-size:11.5px; color:var(--muted); }
.palette-chip .pc-add{ margin-left:auto; color:var(--accent); flex:0 0 auto; }
.palette-chip svg{ width:15px; height:15px; }

/* Spacing groups the form blocks; carving appears only while dragging over. */
#builder-drop-zone{ min-height:220px; }
#builder-drop-zone.is-over{ box-shadow:inset 8px 8px 18px var(--sh-dark), inset -8px -8px 18px var(--sh-light); }

.bblock{
  padding:14px 16px;
  border-radius:var(--r);
  display:flex; flex-direction:column; gap:12px;
}

.bblock-head{ display:flex; align-items:flex-start; gap:12px; }
.bblock-head .grow{ min-width:0; }
.bblock-name{ font-size:14.5px; font-weight:700; }
.bblock-desc{ font-size:12px; color:var(--muted); }

/* Per-block settings sit on the block, not in a separate panel. */
/* flex-start, not center: the segmented control used to sit under its own
   "ASK" caption, which needed the row centred to land the checkboxes beside
   its midpoint. Without that caption every control should share one top
   edge, the same way the two checkboxes already did. */
.bblock-opts{ display:flex; flex-wrap:wrap; gap:16px 20px; align-items:flex-start; }
/* The kit's 38px button minimum overflowed the old 34px padded track.
   Match the label's box to the thumb's inner height, retaining its 6px inset. */
.bblock-opts .segmented{ height:44px; max-width:100%; }
.bblock-opts .segmented button{
  display:flex; align-items:center; justify-content:center;
  min-height:0; min-width:0; height:100%; padding:0 8px;
  font-size:12px; line-height:1.2;
}
.bblock-opts .check{ height:44px; }

/* ---------- Visit types --------------------------------------------------- */

/* The document library and editor share one raised surface. Dividers and
   typography separate versions and form groups without more inset trays. */
.documents-panel{ padding:24px; border-radius:var(--r-lg); }
.documents-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.documents-head .body{ margin-top:6px; max-width:56ch; }
.documents-head > .caption{ flex-shrink:0; padding-top:6px; }
.documents-empty{ display:flex; align-items:center; gap:18px; padding:30px 0; }
.documents-empty > svg{ width:32px; height:32px; flex-shrink:0; color:var(--muted); }
.documents-empty .body{ margin-top:6px; max-width:60ch; }
.doc-group{ padding:22px 0; }
.doc-group + .doc-group{ border-top:1px solid var(--line); }
.doc-kind-heading{ margin:0 0 12px; color:var(--muted); font-size:13px; font-weight:600; }
.doc-version-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.doc-version-head h4{ margin:0; overflow-wrap:anywhere; }
.doc-version-head .pill{ flex-shrink:0; }
.doc-version-meta{ display:grid; grid-template-columns:minmax(80px,.6fr) minmax(130px,1fr) minmax(0,1.5fr); gap:12px 24px; margin:16px 0 0; }
.doc-version-meta dt{ color:var(--muted); font-size:12px; margin-bottom:4px; }
.doc-version-meta dd{ margin:0; font-size:14px; color:var(--text-2); overflow-wrap:anywhere; }
.doc-history{ margin-top:16px; }
.doc-history > summary{ display:flex; align-items:center; gap:6px; width:fit-content; padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer; }
.doc-history > summary svg{ width:14px; height:14px; transition:transform var(--dur) var(--ease); }
.doc-history[open] > summary svg{ transform:rotate(90deg); }
.doc-history-list{ padding-left:18px; margin:10px 0 0 6px; border-left:1px solid var(--line); }
.doc-history-list .doc-version{ padding:12px 0; }
.doc-history-list .h3{ font-size:14px; }
.doc-history-list .doc-version-meta{ margin-top:10px; }
.doc-composer{ border-top:1px solid var(--line); }
.doc-composer > summary{ display:flex; align-items:center; gap:14px; padding:22px 0 0; cursor:pointer; list-style:none; }
.doc-composer > summary::-webkit-details-marker,
.doc-history > summary::-webkit-details-marker{ display:none; }
.doc-compose-icon{ display:grid; place-items:center; flex-shrink:0; width:40px; height:40px; border-radius:12px; background:var(--surface); color:var(--accent); box-shadow:4px 4px 9px var(--sh-dark), -4px -4px 9px var(--sh-light); }
.doc-summary-note{ display:block; margin-top:4px; color:var(--muted); font-size:13px; line-height:1.5; }
.doc-compose-chevron{ flex-shrink:0; color:var(--muted); transition:transform var(--dur) var(--ease); }
.doc-composer[open] .doc-compose-chevron{ transform:rotate(180deg); }
.doc-composer > summary:focus-visible,
.doc-history > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:5px; border-radius:6px; }
.doc-editor{ display:flex; flex-direction:column; gap:24px; margin-top:26px; }
.doc-editor-heading{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:20px; }
.doc-editor-body{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr); gap:28px; align-items:start; }
.doc-editor .field-label{ font-size:13px; }
.doc-copy-field{ min-width:0; }
textarea.doc-textarea{ width:100%; min-height:340px; padding:16px; font:inherit; font-size:14px; line-height:1.7; color:var(--text); resize:vertical; }
.doc-publication-fields{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.doc-version-note{ display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.6; color:var(--muted); margin:0; }
.doc-version-note svg{ flex-shrink:0; margin-top:3px; width:16px; height:16px; }
.doc-editor-actions{ display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:20px; }
.doc-editor-actions > .caption{ max-width:42ch; font-size:13px; line-height:1.5; }
.doc-editor-actions > .row{ flex-shrink:0; }
.doc-editor #doc-publish-alert:empty{ display:none; }
.documents-panel #practice-docs-alert:not(:empty){ margin-top:18px; }
/* The right-column calendar opens inward instead of overflowing the card. */
.doc-publication-fields .datepanel{ left:auto; right:0; }
@media (max-width:1100px){
  .doc-editor-heading,.doc-editor-body{ grid-template-columns:minmax(0,1fr); }
  .doc-editor-actions{ align-items:flex-start; flex-direction:column; }
  .doc-publication-fields .datepanel{ left:0; right:auto; }
}
@media (max-width:560px){
  .documents-panel{ padding:18px 16px; }
  .documents-head,.doc-version-head{ flex-direction:column; gap:8px; }
  .doc-version-meta{ grid-template-columns:1fr 1fr; }
  .doc-version-meta > div:last-child{ grid-column:1 / -1; }
  .doc-editor-actions > .row{ width:100%; flex-wrap:wrap; }
  .doc-editor-actions .btn{ flex:1; }
  .doc-publication-fields .datepanel{ left:0; right:0; }
}

.vt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }

.vt-card{ padding:18px; border-radius:var(--r-lg); display:flex; flex-direction:column; gap:14px; }
.vt-head{ display:flex; align-items:center; gap:10px; }
.vt-name{ font-size:16px; font-weight:700; letter-spacing:-.01em; }

.vt-forms{ display:flex; flex-direction:column; gap:7px; }

.vt-form{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:var(--r-sm);
  font-size:13px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.vt-form[aria-pressed="true"]{ color:var(--accent); font-weight:600; }

.vt-link{ display:flex; align-items:center; gap:12px; }

.link-box{
  display:flex; align-items:center; gap:8px;
  padding:9px 11px; border-radius:var(--r-sm);
  min-width:0;
}

.link-box code{
  flex:1; min-width:0;
  font-size:11.5px; color:var(--text-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
}

/* ---------- People -------------------------------------------------------- */

.person-sub{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }

/* ---------- Modal --------------------------------------------------------- */

.modal-bg{
  position:fixed; inset:0; z-index:70;
  background:color-mix(in srgb, #1b2130 46%, transparent);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}

.modal-bg.open{ display:flex; }

/* Not the .neu raised shadow — that pairs a dark shadow with a near-white
   one, which reads fine sitting on the page surface but turns into a stark
   halo bleeding into a darkened scrim. Same fix as the slide-over: a single,
   real drop shadow appropriate for a panel floating over a dark backdrop,
   not one sitting flush on the light it would otherwise be reflecting. */
.modal{
  width:100%; max-width:420px;
  padding:24px 26px;
  border-radius:var(--r-xl);
  box-shadow:0 24px 60px -16px rgba(10,14,24,.45);
}

.modal-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }

/* ---------- Utilities ----------------------------------------------------- */

.hidden{ display:none !important; }
.mb32{ margin-bottom:32px; }
.nowrap{ white-space:nowrap; }

/* ---------- Sign-in busy state -------------------------------------------- */

.btn[data-busy="1"]{ pointer-events:none; opacity:.72; }

/* ---------- Submission detail (rendered into the slide-over) --------------- */

.answer{ display:flex; flex-direction:column; gap:3px; padding:9px 0; border-bottom:1px solid var(--line); }
.answer:last-child{ border-bottom:0; }
.answer-q{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.answer-a{ font-size:14px; overflow-wrap:anywhere; }

/* A consent is only defensible if the practice can produce the mark itself,
   when it was made, and evidence it hasn't changed since. */
.sig-record{ display:flex; flex-direction:column; gap:8px; padding:12px 0 4px; }

.sig-image{
  width:100%; max-width:280px; height:auto;
  border-radius:var(--r-sm); padding:8px;
  background:#777;
  box-shadow:inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light);
}

.sig-meta{ font-size:11.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px; }
.sig-hash{ font-family:ui-monospace,"SF Mono",Menlo,monospace; }

/* ---------- Assign-forms picker ------------------------------------------- */

.pick-list{ display:flex; flex-direction:column; gap:8px; max-height:44vh; overflow-y:auto; scrollbar-width:none; padding:8px; margin:-8px; }
.pick-list::-webkit-scrollbar{ display:none; }

.pick{
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:var(--r-sm);
  text-align:left; width:100%; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.pick[aria-pressed="true"]{ color:var(--accent); }
.pick .pick-name{ font-size:13.5px; font-weight:600; }
.pick .pick-meta{ font-size:11.5px; color:var(--muted); }

/* ---------- Builder block preview ----------------------------------------
   Collapsed by default: the settings are the job, the preview is a check.   */

.bblock-preview{ border-top:1px solid var(--line); }
.bblock-preview > summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:48px; padding:10px 2px;
  font-size:13px; font-weight:600; line-height:1.4; color:var(--text-2);
  -webkit-tap-highlight-color:transparent;
}

.bblock-preview > summary::-webkit-details-marker{ display:none; }
.bblock-preview-toggle{
  display:grid; place-items:center; flex:0 0 auto;
  width:28px; height:28px; border-radius:9px;
  background:var(--surface); color:var(--muted);
  box-shadow:3px 3px 7px var(--sh-dark), -3px -3px 6px var(--sh-light);
}
.bblock-preview-toggle svg{ width:16px; height:16px; transition:transform .18s var(--ease); }
.bblock-preview[open] > summary .bblock-preview-toggle,
.bblock-preview > summary:active .bblock-preview-toggle{
  color:var(--accent);
  box-shadow:inset 2px 2px 5px var(--sh-dark), inset -2px -2px 5px var(--sh-light);
}
.bblock-preview[open] > summary .bblock-preview-toggle svg{ transform:rotate(180deg); }
.bblock-preview > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }
[data-theme="contrast"] .bblock-preview-toggle{ border:1px solid var(--line); }
.bblock-preview .field input{ cursor:default; }

/* ---------- Top bar on a narrow screen -----------------------------------
   The brand is the one thing that must not truncate — "M…" tells nobody
   anything. The practice name goes first, since the person reading it already
   knows which practice they signed into.                                    */

@media (max-width:640px){
  #nav-user-name{ display:none; }
}

.topbar .brand{
  flex:0 1 auto;
  min-width:auto;   /* undo .grow — only the label span should truncate */
}

/* ---------- Narrow screens: say each thing once --------------------------
   The stat tiles and the filter chips carry the same four numbers. On a phone
   that costs most of the first screenful before a single patient is visible —
   and the chips are the better half of the pair, because they also filter.   */

@media (max-width:640px){
  #checkin-status-summary{ display:none; }
}

/* ---------- Pulse: the day, drawn ----------------------------------------
   The kit's three chart primitives — ring, bar column, segment display — on
   the practice's own numbers. Two narrow cards, two wide ones.              */

.pulse{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.pulse-card{ padding:18px 20px; border-radius:var(--r-lg); display:flex; flex-direction:column; gap:12px; }
.pulse-wide{ grid-column:span 2; }
.pulse-full{ grid-column:1 / -1; }

.pulse-ring{ align-items:center; text-align:center; }
.pulse-ring .ring{ margin:2px 0; }
.pulse-big{ font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1; }
.pulse-unit{ font-size:14px; font-weight:700; color:var(--muted); margin-left:1px; }

/* The kit's LCD is a hero element at 56px; here it is one stat among four. */
.pulse-lcd{ padding:12px 16px; text-align:center; border-radius:var(--r); }
.pulse-lcd .lcd-digits{ font-size:34px; }

.pulse .bars{ height:120px; gap:6px; }
.pulse .bars .bar{ border-radius:8px; }
/* Hue comes from the chart's own .hue-* class, not from here — this rule used
   to hard-code the accent and quietly beat it. */
.pulse .bars .bar i{ border-radius:6px; }
.pulse .bars-x{ gap:6px; margin-top:8px; }
.pulse .bars-x span{ font-size:10px; }

@media (max-width:1100px){
  .pulse{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pulse-wide{ grid-column:span 2; }
}

@media (max-width:640px){
  .pulse{ grid-template-columns:1fr; }
  .pulse-wide, .pulse-full{ grid-column:span 1; }

  /* --bar-pad is a fixed 6px inset per side, which is right on a desktop
     bar and ruinous on a phone: a clinic day is thirteen hourly bars, and
     at 375px that leaves a 17.8px track whose fill is 5.8px — a third of
     its own well, so the chart reads as hairlines rather than columns.
     Tightening the inset and the gap together gives the fill about two
     thirds of the track back, which is what it has on a wide screen. */
  .pulse .bars{ gap:4px; }
  .pulse .bars .bar{ --bar-pad:3px; border-radius:6px; }
  .pulse .bars .bar i{ border-radius:4px; }
  .pulse .bars-x{ gap:4px; }
}

/* ---------- The single check-in code -------------------------------------- */

.checkin-card{ padding:20px; border-radius:var(--r-lg); display:flex; gap:20px; align-items:center; flex-wrap:wrap; }

/* The shadow lives on a ::before behind the code, not on the same box as the
   code's own padding — some WebKit builds visibly band an inset shadow's blur
   over a dense, high-contrast child (exactly what a QR code is) when they
   share a paint layer, especially at retina scale. isolation:isolate plus a
   hard z-index split makes that layering unambiguous everywhere rather than
   relying on ordinary background-vs-child paint order to keep them apart. */
.qr-big{
  position:relative;
  width:150px; height:150px; flex:0 0 auto;
  padding:12px; border-radius:20px;
  isolation:isolate;
}

.qr-big::before{
  content:''; position:absolute; inset:0; z-index:0;
  border-radius:inherit;
  background:#fff;
  box-shadow:inset 2px 2px 6px var(--sh-dark), inset -2px -2px 6px var(--sh-light);
}

.qr-big > *{ position:relative; z-index:1; }
.qr-big{ display:grid; place-items:center; }
.qr-big svg, .qr-big canvas, .qr-big img{ width:100%; height:100%; display:block; }
.qr-big .caption{ font-size:11px; text-align:center; color:#5e6b87; }

.vt-foot{ margin-top:2px; }

/* ---------- Update banner --------------------------------------------------
   Appears once a live check finds a newer build than the one running. GitHub
   Pages caches this file for 10 minutes, so a tab left open through a deploy
   would otherwise sit on stale code with no visible sign of it. */

#update-banner{
  position:fixed; left:50%; bottom:20px; z-index:90;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:14px;
  padding:11px 12px 11px 18px; border-radius:999px;
  background:var(--text); color:var(--bg);
  box-shadow:0 10px 30px -8px rgba(20,26,40,.4);
  font-size:13.5px; font-weight:600;
  animation:update-banner-in .22s var(--ease) both;
}

#update-banner span{ display:flex; align-items:center; gap:8px; }
#update-banner svg{ width:16px; height:16px; }

#update-banner button{
  border-radius:999px; font-size:12.5px; font-weight:700;
  padding:7px 14px;
  background:var(--bg); color:var(--text);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}

#update-banner .update-banner-dismiss{
  padding:7px; background:transparent; color:var(--bg); opacity:.7;
}

#update-banner .update-banner-dismiss:hover{ opacity:1; }

@keyframes update-banner-in{
  from{ opacity:0; transform:translate(-50%, 10px); }
  to{ opacity:1; transform:translate(-50%, 0); }
}

@media (prefers-reduced-motion:reduce){ #update-banner{ animation:none; } }

@media (max-width:900px){
  /* Clear the fixed bottom tab bar rather than sit under it. */
  #update-banner{ bottom:calc(78px + env(safe-area-inset-bottom)); }
}

@media (max-width:520px){
  #update-banner{ left:12px; right:12px; transform:none; }
  #update-banner span{ flex:1; min-width:0; }
}

/* ---------- Today's action notice ------------------------------------------
   Empty on a normal page load — no space reserved for it then, since a
   permanent gap here would just be dead air above the charts most of the
   time. Only pushes the charts down once it actually has something to say. */

#checkin-action-notice:not(:empty){ margin-bottom:18px; }
.coverage-benefits{padding-top:12px;margin-top:12px;border-top:1px solid var(--line);}
.coverage-test{color:var(--muted);font-weight:600;}

/* The handoff actions stay together above the original submitted answers. */
.handoff-tools p{margin:0;}
.handoff-option{align-items:flex-start;font-size:13px;line-height:1.5;color:var(--text-2);}
.handoff-option > span:last-child{padding-top:3px;}
.handoff-option input:focus-visible ~ .box{outline:2px solid var(--accent);outline-offset:4px;}
.handoff-filing{padding-top:12px;border-top:1px solid var(--line);}
.handoff-section-title{justify-content:space-between;}
.handoff-answer .row{justify-content:space-between;align-items:flex-start;}
.handoff-answer .answer-q{min-width:0;overflow-wrap:anywhere;}
.handoff-answer .answer-a{white-space:pre-wrap;overflow-wrap:anywhere;}
.handoff-copy-text{box-sizing:border-box;width:100%;padding:10px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;}
#handoff-message:empty{display:none;}