/* Authenticated application design system: calm, dense, and operational. */
:root {
  --va-canvas: #f6f8fc;
  --va-surface: #ffffff;
  --va-surface-subtle: #f8fafc;
  --va-ink: #172033;
  --va-muted: #64748b;
  --va-border: #dbe3ef;
  --va-brand: #2563eb;
  --va-brand-dark: #1d4ed8;
  --va-navy: #162033;
  --va-danger: #c2413a;
  --va-success: #16745a;
  /* STATUS COLOUR, AND ONLY STATUS COLOUR. The reception dashboard is the first
     screen in this app where a row means one of two things at a glance, so it
     gets two token families and no third. They are a green-teal and a slate off
     the same neutral ramp the rest of the app already uses — not a second
     palette, and never the only thing that says which state a row is in: every
     use of them below sits beside a word. `off` is the third, rarer state
     (cancelled), kept quiet on purpose. */
  --va-in: #0f766e;
  --va-in-soft: #e7f5f1;
  --va-in-line: #a3d5c9;
  --va-out: #475569;
  --va-out-soft: #eef2f7;
  --va-out-line: #cbd5e1;
  --va-off: #9a3412;
  --va-off-soft: #fff4ec;
  --va-off-line: #f6cfae;
  --va-radius: 12px;
  --va-radius-sm: 8px;
  --va-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .045);
}

* { box-sizing: border-box; }
/* EVERY form control, not a list of types. The rule below used to name
   text/email/password/textarea/select, so input[type=time], tel, number,
   search and date fell back to the UA font — the opening-hours grid rendered
   its 28 time fields in Arial next to Inter labels. A list of types is a list
   somebody has to remember to extend; `button, input, select, textarea` is not. */
button, input, select, textarea { font: inherit; }
body { min-height: 100vh; margin: 0; background: var(--va-canvas); color: var(--va-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
header { position: sticky; top: 0; z-index: 20; min-height: 64px; padding: 10px max(20px, calc((100vw - 1440px) / 2)); display: flex; align-items: center; gap: 18px; background: var(--va-navy); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
header .brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-weight: 700; letter-spacing: -.015em; text-decoration: none; white-space: nowrap; }
header .brand img { display: block; border-radius: 7px; }
header .tenant-context { min-width: 0; max-width: 260px; padding: 4px 10px; overflow: hidden; border: 1px solid rgba(203,213,225,.18); border-radius: 999px; color: #cbd5e1; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
header nav { display: flex; align-items: center; gap: 4px; margin-left: auto; font-size: 14px; }
header nav a { display: inline-flex; min-height: 36px; align-items: center; padding: 7px 10px; border-radius: 7px; color: #cbd5e1; text-decoration: none; }
header nav a:hover, header nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.1); }
header nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 #60a5fa; }
.account-menu { position: relative; }
.account-toggle { max-width: 240px; padding: 7px 10px; overflow: hidden; border: 0; border-radius: 7px; background: none; color: #cbd5e1; cursor: pointer; font: inherit; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-toggle:hover, .account-toggle:focus-visible { background: rgba(255,255,255,.1); color: #fff; }
.account-email { display: none; }
.account-menu-items { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; display: none; min-width: 190px; padding: 5px; border: 1px solid #334155; border-radius: var(--va-radius-sm); background: #1e293b; box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.account-menu.open .account-menu-items { display: block; }
.account-menu-items a { display: block; width: 100%; padding: 9px 10px; }
.notice-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; color: #cbd5e1; font-size: 19px; line-height: 1; }
.notice-bell:hover { background: rgba(255,255,255,.1); color: #fff; }
.notice-bell .notice-count { position: absolute; top: -3px; right: -5px; min-width: 18px; height: 18px; padding: 0 3px; border: 2px solid var(--va-navy); border-radius: 999px; background: #e11d48; color: #fff; font-size: 10px; font-weight: 800; line-height: 14px; text-align: center; }
.nav-toggle { display: none; margin-left: auto; border: 0; border-radius: 7px; background: none; color: #fff; cursor: pointer; font-size: 22px; line-height: 1; padding: 9px; }
main { width: min(1120px, calc(100% - 40px)); margin: 30px auto 48px; }
a { color: var(--va-brand); text-decoration: none; }
a:hover { color: var(--va-brand-dark); text-decoration: underline; }
.card { margin-bottom: 18px; padding: 22px; border: 1px solid var(--va-border); border-radius: var(--va-radius); background: var(--va-surface); box-shadow: var(--va-shadow); }
/* A SCALE, NOT FIVE UNRELATED SIZES. Before this the page title was 21.6px and
   a section heading 16.8px — close enough that neither won, while a stat card's
   "0" rendered at 32px. The largest thing on the screen was an empty number and
   the smallest was the name of the page. These four steps are a 1.25 ratio off a
   16px body, so the jumps are audible rather than arbitrary. */
h1, h2, h3, h4 { color: var(--va-ink); letter-spacing: -.021em; text-wrap: balance; }
h1 { margin: 0 0 4px; font-size: 1.95rem; font-weight: 750; line-height: 1.18; }
h2 { margin: 0 0 4px; font-size: 1.5rem;  font-weight: 700; line-height: 1.22; }
h3 { margin: 0 0 4px; font-size: 1.15rem; font-weight: 680; line-height: 1.3; }
/* h4 is the small uppercase label above a number or a column. It is a LABEL, so
   it gets label treatment rather than being a fourth heading nobody reads as one. */
h4 { margin: 0 0 6px; color: var(--va-muted); font-size: .75rem; font-weight: 650;
     letter-spacing: .055em; text-transform: uppercase; }

/* HEADINGS BELONG TO WHAT FOLLOWS THEM. A section heading and its one-line
   explanation were separated by the same gap as the explanation and the content
   below, so the sentence read as floating between two sections instead of
   introducing one. Proximity is the only thing that says which. */
h1 + p, h2 + p, h3 + p, h1 + .muted, h2 + .muted, h3 + .muted { margin-top: 0; }
.card > h2:first-child, .card > h3:first-child, .card > legend + p { margin-top: 0; }
.card > h2 + p.muted, .card > h3 + p.muted, .card > legend + p.muted { margin-bottom: 16px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--va-border); border-radius: var(--va-radius-sm); background: var(--va-surface); overflow: hidden; }
th, td { padding: 11px 13px; border-bottom: 1px solid #e8edf5; font-size: 14px; text-align: left; vertical-align: top; } tr:last-child td { border-bottom: 0; } th { background: var(--va-surface-subtle); color: #475569; font-size: 12px; letter-spacing: .025em; text-transform: uppercase; }
/* EMPTY TABLES LOOK EMPTY ON PURPOSE, NOT BY ACCIDENT. "No calls yet." sat in
   a table row at body size and full ink, indistinguishable from a row of real
   data until you read it — the one moment a new customer is guaranteed to see,
   rendered as if something had gone wrong. Every empty table in this app is the
   same shape: a tbody whose only row is a single colspan cell. That is why this
   is one rule and not a class threaded through fourteen templates. */
tbody tr:only-child td[colspan] { padding: 34px 20px; color: var(--va-muted);
  font-size: .95rem; text-align: center; }

/* TABS. The tenant page carries its own copy of these four rules inline; this
   is the canonical one so a second screen does not have to invent a third
   pattern. Same class names, so the two look identical and a person who has
   used one has used both. */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 18px; border-bottom: 2px solid var(--va-border); }
.tab-btn { margin-bottom: -2px; padding: 10px 16px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--va-muted); cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; }
.tab-btn:hover { color: var(--va-ink); }
.tab-btn.active { border-bottom-color: var(--va-brand); color: var(--va-brand); }
/* PANEL VISIBILITY IS DELIBERATELY NOT HERE. Two conventions exist in this
   codebase and neither is wrong: settings.html closes a panel with the `hidden`
   ATTRIBUTE, which is server-rendered and what a screen reader already
   understands, while kiosk_admin.html and tenant.html toggle an `.active` class
   from JS. A global `.tab-panel { display: none }` silently wins over the
   attribute convention, so it hid every panel on the settings page — its open
   tab has no class to mark it open, because it never needed one. Each page that
   switches panels with a class says so in its own stylesheet. */

.pill { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #e8edf5; color: #475569; font-size: 12px; font-weight: 650; }.pill.spam { background: #fee2e2; color: #991b1b; }.pill.followup { background: #fef3c7; color: #92400e; }.pill.blocked { background: #e5e7eb; color: #6b7280; }
label { display: block; margin: 14px 0 5px; color: #334155; font-size: 13px; font-weight: 700; }
input[type=text], input[type=email], input[type=password], textarea, select { width: 100%; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: var(--va-radius-sm); background: #fff; color: var(--va-ink); font: inherit; } textarea { min-height: 88px; resize: vertical; }
.btn { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 8px 14px; border: 1px solid var(--va-brand); border-radius: var(--va-radius-sm); background: var(--va-brand); color: #fff; cursor: pointer; font: inherit; font-weight: 700; text-decoration: none; }.btn:hover { background: var(--va-brand-dark); color: #fff; text-decoration: none; }.btn.secondary { border-color: #cbd5e1; background: #fff; color: #334155; }.btn.secondary:hover { border-color: #94a3b8; background: #f8fafc; color: #172033; }/* DESTRUCTIVE ACTIONS ARE QUIET UNTIL YOU MEAN THEM. A solid red fill made
   "Remove" the highest-contrast element on the kiosk admin screen — three of
   them, louder than the page title and louder than every Save beside them.
   Weight should follow intent, and nobody opens that page intending to delete
   a clinician. Outline by default, solid only where the whole screen exists to
   confirm a deletion (.btn.danger.solid). */
.btn.danger { border-color: #e7c9c7; background: #fff; color: var(--va-danger); }
.btn.danger:hover { border-color: var(--va-danger); background: #fdf3f2; color: #9f2f2a; }
.btn.danger.solid { border-color: var(--va-danger); background: var(--va-danger); color: #fff; }
.btn.danger.solid:hover { background: #9f2f2a; color: #fff; }
.ok, .err { padding: 10px 12px; border: 1px solid; border-radius: var(--va-radius-sm); font-size: 14px; }.ok { border-color: #a7e3cf; background: #ecfdf5; color: #166534; }.err { border-color: #fecaca; background: #fff1f2; color: #9f1239; }.muted { color: var(--va-muted); font-size: 13px; }.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } fieldset { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--va-border); border-radius: var(--va-radius-sm); } legend { padding: 0 6px; color: #475569; font-size: 13px; font-weight: 700; }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid rgba(96,165,250,.75); outline-offset: 2px; }
@media (max-width: 760px) { header { min-height: 58px; flex-wrap: wrap; gap: 9px; padding: 9px 14px; } header .brand { font-size: 15px; } header .tenant-context { flex: 1 1 0; max-width: none; } .nav-toggle { display: block; } header nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; margin-left: 0; padding-top: 6px; } header nav.open { display: flex; } header nav a { min-height: 44px; padding: 11px 8px; border-top: 1px solid rgba(255,255,255,.08); } .notice-bell { width: auto; justify-content: flex-start; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0; } .notice-bell .notice-count { position: static; margin-left: 7px; border-color: transparent; } .account-menu { width: 100%; border-top: 1px solid rgba(255,255,255,.08); } .account-toggle { display: none; }.account-email { display: block; padding: 11px 8px; overflow: hidden; color: #94a3b8; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.account-menu-items { position: static; display: block; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }.account-menu-items a { min-height: 44px; padding: 11px 8px; border-top: 1px solid rgba(255,255,255,.08); } main { width: min(100% - 24px, 1120px); margin: 16px auto 32px; }.card { padding: 16px; border-radius: 10px; }.row2 { grid-template-columns: 1fr; } table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } th, td { white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Files: the label, the shelves, and the search box.
   .file-tag is a link that reads as a chip; `on` marks the shelf in view. */
.file-description { margin: 2px 0 4px; color: #334155; font-size: 14px; }
.file-tags { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.file-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #334155;
  font-size: 13px; text-decoration: none; }
.file-tag:hover { border-color: #94a3b8; text-decoration: none; }
.file-tag.on { background: var(--va-brand); border-color: var(--va-brand); color: #fff; }
.file-tag span { color: #64748b; font-size: 12px; }
.file-tag.on span { color: #e2e8f0; }
.file-search { display: flex; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; }
.file-search input[type=search] { flex: 1 1 260px; min-height: 38px; padding: 8px 12px;
  border: 1px solid #cbd5e1; border-radius: var(--va-radius-sm); font: inherit; }
.file-edit input[type=text] { width: 100%; min-height: 36px; padding: 7px 10px;
  border: 1px solid #cbd5e1; border-radius: var(--va-radius-sm); font: inherit; margin: 4px 0 8px; }

/* Files — shared by the Files page and anything else that lists documents.
   These lived in a <style> block inside settings.html; when the list moved to
   its own page it arrived unstyled, with every action stacked one per line. */
.file-list { display: grid; gap: 10px; }
.file-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
  align-items: start; padding: 12px; border: 1px solid #e5e7eb; border-radius: 10px; }
.file-row h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.file-meta { margin: 6px 0 0; color: #5f6773; font-size: 13px; }
.file-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.file-actions form { margin: 0; }
/* A <details> is block-level, so without this each action claims its own row
   and one file becomes six lines tall. */
.file-actions details { margin: 0; }
.file-actions > details > summary { list-style: none; cursor: pointer; }
.file-actions > details > summary::-webkit-details-marker { display: none; }
/* The editor a summary opens spans the row rather than squeezing into the
   button column, so the text field is wide enough to read what you typed. */
.file-actions > details[open] { grid-column: 1 / -1; flex: 1 0 100%; }
.file-actions > details > form { margin-top: 8px; }
.file-edit textarea { width: 100%; min-height: 180px; box-sizing: border-box; }

@media (max-width: 640px) {
  .file-row { grid-template-columns: 1fr; }
  .file-actions { justify-content: flex-start; }
  .file-actions .btn { min-height: 36px; padding: 7px 10px; font-size: 13px;
    white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Files: folders, the table, and the row menu.

   MOBILE FIRST IN THE PARTS THAT MATTER. A phone is the primary device here, so
   the table stops being a table below 720px and each row becomes a card with
   its own labels — a four-column grid on a 390px screen is either unreadable or
   scrolls sideways, and both are worse than a card.
   -------------------------------------------------------------------------- */
.files-page .ico { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -3px; }
.files-views { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
.files-view { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1px solid #cbd5e1; border-radius: 999px; color: #334155; background: #fff;
  text-decoration: none; font-weight: 600; font-size: 14px; min-height: 40px; }
.files-view:hover { border-color: #94a3b8; text-decoration: none; }
.files-view.on { background: var(--va-brand); border-color: var(--va-brand); color: #fff; }
.files-icon-action { display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 8px 10px; border: 1px solid #cbd5e1;
  border-radius: 999px; color: #334155; background: #fff; text-decoration: none; }
.files-icon-action:hover { border-color: #94a3b8; text-decoration: none; }
.files-action-label { margin-left: 7px; font-size: 14px; font-weight: 600; }

.file-search { display: flex; gap: 8px; margin: 0 0 8px; }
.file-search-box { position: relative; flex: 1 1 auto; display: flex; align-items: center; }
.file-search-box .ico { position: absolute; left: 11px; color: #64748b; }
.file-search input[type=search] { width: 100%; min-height: 44px; padding: 9px 12px 9px 36px;
  border: 1px solid #cbd5e1; border-radius: var(--va-radius-sm); font: inherit; }

.folder-grid { display: grid; gap: 10px; margin-top: 6px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.folder { display: flex; align-items: center; gap: 10px; padding: 14px;
  border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; color: #0f172a;
  text-decoration: none; min-height: 56px; }
.folder:hover { border-color: var(--va-brand); text-decoration: none; }
.folder .ico { width: 22px; height: 22px; color: var(--va-brand); }
.folder-name { font-weight: 600; overflow-wrap: anywhere; }
.folder-count { margin-left: auto; color: #64748b; font-size: 13px; }
.folder-unfiled .ico { color: #94a3b8; }
.new-folder { position: fixed; right: max(16px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom)); z-index: 10; }
.new-folder > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  padding: 12px 16px; border-radius: 999px; background: var(--va-brand); color: #fff;
  box-shadow: 0 8px 22px rgba(37,99,235,.28); cursor: pointer; font-weight: 700;
  list-style: none; }
.new-folder > summary::-webkit-details-marker { display: none; }
.new-folder-form { position: absolute; right: 0; bottom: calc(100% + 10px);
  width: min(340px, calc(100vw - 32px)); padding: 14px; border: 1px solid var(--va-border);
  border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(15,23,42,.16); }
.new-folder-form label { margin-top: 0; }
.new-folder-fields { display: flex; gap: 8px; }
.new-folder-fields input { min-width: 0; flex: 1; min-height: 44px; }
.new-folder-form .muted { margin: 8px 0 0; }

/* OVERFLOW VISIBLE, or the row menu is invisible. The global `table` rule sets
   overflow:hidden to clip its own rounded corners, which also clips anything
   absolutely positioned inside — so the actions panel opened and could not be
   seen. The border and radius move to the wrapper instead, which keeps the
   corners and stops the clipping. Also: the global mobile rule turns tables
   into horizontally scrolling blocks, which is exactly what a phone must not
   do here, so this one opts out and becomes cards instead. */
.files-table-wrap { border: 1px solid var(--va-border); border-radius: var(--va-radius-sm);
  background: var(--va-surface); }
.files-table { width: 100%; border-collapse: collapse; border: 0;
  border-radius: 0; overflow: visible; background: transparent; }
.files-table th { text-align: left; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: #64748b; padding: 6px 10px; border-bottom: 1px solid #e5e7eb; }
.files-table td { padding: 10px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.f-title { font-weight: 600; overflow-wrap: anywhere; }
.f-note { color: #475569; font-size: 13px; margin-top: 2px; }
.f-when { color: #94a3b8; font-size: 12px; margin-top: 2px; }
.f-folder { white-space: normal; }
.f-folder .file-tag { margin: 0 4px 4px 0; }
.f-size { white-space: nowrap; color: #475569; }
.f-actions { text-align: right; white-space: nowrap; }
.f-actions .btn { padding: 7px 10px; min-height: 38px; }

/* The row menu. A <details> so it opens with no script and by keyboard. */
.f-menu { display: inline-block; position: relative; }
.f-menu > summary { list-style: none; cursor: pointer; display: inline-flex; }
.f-menu > summary::-webkit-details-marker { display: none; }
.f-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  width: 280px; max-width: 88vw; padding: 8px; text-align: left;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16); }
.f-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px;
  min-height: 42px; border: 0; border-radius: 8px; background: none; color: #0f172a;
  font: inherit; text-align: left; cursor: pointer; }
.f-item:hover { background: #f1f5f9; }
.f-danger { color: var(--va-danger); }
.f-danger:hover { background: #fef2f2; }
.f-form { padding: 8px 10px; border-top: 1px solid #f1f5f9; margin: 0; }
.f-label { display: flex; align-items: center; gap: 8px; font-size: 13px;
  font-weight: 600; color: #334155; margin-bottom: 5px; }
.f-form input[type=text] { width: 100%; min-height: 40px; padding: 8px 10px;
  border: 1px solid #cbd5e1; border-radius: var(--va-radius-sm); font: inherit; margin-bottom: 6px; }
.f-form .btn { width: 100%; }
.files-pager { display: flex; align-items: center; gap: 10px; margin-top: 14px; }

@media (max-width: 720px) {
  /* The outer canvas and desktop card must not spend phone width. The card still
     owns its 16px content padding; only the decorative frame/gutter disappears. */
  main:has(.files-page) { width: 100%; margin: 0; padding: 0; }
  .files-page.wrap { width: 100%; }
  .files-page .card { width: 100%; margin: 0; border: 0; border-radius: 0;
    box-shadow: none; }
  .files-views { align-items: center; }
  .files-view { justify-content: center; min-width: 44px; padding: 8px 12px; }
  .files-icon-action { margin-left: auto; }
  .files-action-label { display: none; }
  /* The global rule makes every table a scrolling block on a phone; here that
     would be the four-column horizontal scroll this layout exists to avoid. */
  .files-table { display: table; max-width: none; overflow-x: visible; }
  .files-table-wrap { border: 0; background: transparent; }
  .files-table td, .files-table th { white-space: normal; }
  /* EACH ROW BECOMES A CARD. Four columns on a 390px screen either wrap into
     nonsense or scroll sideways; both lose. */
  .files-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; }
  .files-table, .files-table tbody, .files-table tr, .files-table td { display: block; width: 100%; }
  .files-table tr { border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px;
    margin-bottom: 10px; position: relative; }
  .files-table td { border: 0; padding: 3px 0; }
  .f-folder::before, .f-size::before { content: attr(data-label) ": ";
    color: #94a3b8; font-size: 12px; }
  /* The actions sit at the top-right of the card, where a thumb reaches. */
  .f-actions { position: absolute; top: 10px; right: 10px; width: auto;
    display: flex; gap: 6px; }
  /* `.files-table td` above is (0,1,1) and this was (0,1,0), so the cell's own
     padding won and the name ran underneath the buttons — hidden behind them
     rather than wrapped. Qualified so it actually applies. */
  .files-table .f-name { padding-right: 104px; }
  .f-menu-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px;
    width: auto; max-width: none; }
  .new-folder { bottom: max(16px, env(safe-area-inset-bottom)); }
}


/* --------------------------------------------------------------------------
   The reception dashboard (/admin/{slug}/kiosk).

   A screen somebody looks at all day, so colour carries meaning and nothing
   else: the count of people in the building, and which state a row is in. No
   colour appears without a word beside it — the repo's accessibility rule —
   and the row tint is a wash rather than a fill so a table of thirty arrivals
   still reads as a table.
   -------------------------------------------------------------------------- */
.lobby-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; }
.lobby-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* THE NUMBER IS THE PAGE. It is the one fact worth crossing a room to read, so
   it gets the weight — a 6px status edge, a tinted ground and a 3rem figure —
   and everything else on the screen is quieter than it. */
.lobby-count { display: flex; align-items: center; gap: 20px; padding: 20px 24px;
  border: 1px solid var(--va-in-line); border-left: 6px solid var(--va-in);
  border-radius: var(--va-radius); background: var(--va-in-soft); }
.lobby-count .n { color: var(--va-in); font-size: 3rem; font-weight: 750;
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lobby-count .what { font-size: 1.05rem; font-weight: 650; }
.lobby-count .when { margin: 2px 0 0; color: var(--va-muted); font-size: 13px; }
/* NOBODY IN THE BUILDING IS A CALM STATE, NOT A BROKEN ONE. Same shape, the
   neutral ramp instead of the live one: an empty lobby reads as quiet rather
   than as a screen that failed to load. */
.lobby-count.quiet { border-color: var(--va-border); border-left-color: #94a3b8;
  background: var(--va-surface-subtle); }
.lobby-count.quiet .n { color: var(--va-muted); }

.status-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border: 1px solid; border-radius: 999px; font-size: 12px; font-weight: 650;
  white-space: nowrap; }
.status-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto; }
.status-tag.in { color: var(--va-in); border-color: var(--va-in-line); background: var(--va-in-soft); }
.status-tag.out { color: var(--va-out); border-color: var(--va-out-line); background: var(--va-out-soft); }
.status-tag.off { color: var(--va-off); border-color: var(--va-off-line); background: var(--va-off-soft); }

.lobby-table td { vertical-align: middle; }
/* The wash that groups the open visits together down the page. Deliberately
   fainter than the tag: it is a secondary cue for the same fact, which is the
   only thing a colour on its own is allowed to be. */
.lobby-table tr.is-in td { background: rgba(15, 118, 110, .045); }
.lobby-table tr.is-in td:first-child { box-shadow: inset 3px 0 0 var(--va-in); }
.lobby-when { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 650; }
.lobby-who .sub { color: var(--va-muted); font-size: 12.5px; }
.lobby-act { text-align: right; white-space: nowrap; }
.lobby-act form { margin: 0; }
.lobby-act .btn { min-height: 34px; padding: 6px 12px; }
/* THE CALM EMPTY STATE. Not a table with one apologetic row in it: a short
   sentence in the space the table would occupy, saying what will happen rather
   than what is missing. */
.lobby-empty { padding: 40px 24px; border: 1px dashed var(--va-border);
  border-radius: var(--va-radius-sm); background: var(--va-surface-subtle);
  text-align: center; }
.lobby-empty p { margin: 0; color: var(--va-muted); }
.lobby-empty p.lead { margin-bottom: 4px; color: var(--va-ink);
  font-size: 1.05rem; font-weight: 650; }

@media (max-width: 640px) {
  .lobby-count { gap: 14px; padding: 16px; }
  .lobby-count .n { font-size: 2.4rem; }
}