/* Roomshot web. The phone app's look carried to the browser: system type,
   a soft off-white page, white sections, near-black ink, hairlines, one green
   for level and done. Tokens first; views add their own sheet under
   /css/views/ via shell.useCss(). Admin screens use the same tokens and stay
   flat (tables and hairlines). */

:root {
  --bg: #F6F6F4;
  --surface: #FFFFFF;
  --raised: #EFEFEC;          /* photo placeholders, table heads */
  --hover: #F0F0ED;           /* pressed and hovered rows */
  --fill: rgba(17, 17, 17, 0.06);   /* gray buttons, tracks */
  --fill-2: rgba(17, 17, 17, 0.1);
  --ink: #111111;
  --ink-2: #3A3936;
  --muted: #6B6A65;           /* secondary text: 5:1 on the page */
  --faint: #A9A8A3;           /* placeholders and glyphs only, never text */
  --hairline: rgba(17, 17, 17, 0.09);
  --card-line: rgba(17, 17, 17, 0.05);
  --good: #157A3C;
  --good-soft: #E7F2EA;
  --bad: #C4282D;
  --bad-soft: #FBEBEA;
  --info: #2459D6;
  --info-soft: #EAF0FC;
  --warn: #A45500;
  --warn-soft: #FAF0E2;
  --brand: #181B1C;           /* the logo: brand/README.md ink on light, ivory on dark */
  --btn: #111111;
  --btn-ink: #FFFFFF;
  --seg-thumb: #FFFFFF;
  --level: #34C759;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 6px 20px rgba(17, 17, 17, 0.06);
  --shadow-lg: 0 2px 6px rgba(17, 17, 17, 0.06), 0 18px 48px rgba(17, 17, 17, 0.14);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --max: 1120px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0B0C; --surface: #18181A; --raised: #222225; --hover: #202023;
    --fill: rgba(255, 255, 255, 0.08); --fill-2: rgba(255, 255, 255, 0.13);
    --ink: #F4F4F2; --ink-2: #D2D1CD; --muted: #A3A29D; --faint: #5E5D59;
    --hairline: rgba(255, 255, 255, 0.1); --card-line: rgba(255, 255, 255, 0.06);
    --good: #34C759; --good-soft: #15291C; --bad: #FF6369; --bad-soft: #3A1C1D;
    --info: #6E9BFF; --info-soft: #18223B; --warn: #FFB340; --warn-soft: #36270F;
    --brand: #F4F3EE; --btn: #F4F4F2; --btn-ink: #111111; --seg-thumb: #3A3A3E;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 48px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  --bg: #0B0B0C; --surface: #18181A; --raised: #222225; --hover: #202023;
  --fill: rgba(255, 255, 255, 0.08); --fill-2: rgba(255, 255, 255, 0.13);
  --ink: #F4F4F2; --ink-2: #D2D1CD; --muted: #A3A29D; --faint: #5E5D59;
  --hairline: rgba(255, 255, 255, 0.1); --card-line: rgba(255, 255, 255, 0.06);
  --good: #34C759; --good-soft: #15291C; --bad: #FF6369; --bad-soft: #3A1C1D;
  --info: #6E9BFF; --info-soft: #18223B; --warn: #FFB340; --warn-soft: #36270F;
  --brand: #F4F3EE; --btn: #F4F4F2; --btn-ink: #111111; --seg-thumb: #3A3A3E;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 48px rgba(0, 0, 0, 0.6);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
h1 { font-size: 32px; line-height: 1.12; letter-spacing: -0.025em; }
h2 { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
h3 { font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.micro { font-size: 13px; font-weight: 600; color: var(--muted); }
.mono { font-family: var(--mono); font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.i { flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: color-mix(in srgb, var(--info) 22%, transparent); }

/* One focus ring for everything a keyboard can reach. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Layout */
.page { max-width: var(--max); margin: 0 auto; padding: 32px 24px 96px; }
.page.narrow { max-width: 680px; }
.page.column { max-width: 820px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack.tight { gap: 8px; }
.stack.loose { gap: 32px; }
.stack[hidden] { display: none; } /* .stack sets display, which would beat the hidden attribute (rehearsal D4) */
.row { display: flex; align-items: center; gap: 12px; }
.row[hidden] { display: none; }
.row.gap { gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.row.top { align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.head .sub { margin-top: 6px; font-size: 17px; }
.section-h { font-size: 14px; font-weight: 600; color: var(--muted); margin: 0; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.topbar-in { max-width: var(--max); margin: 0 auto; height: 56px; padding: 0 24px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.mark { width: 24px; height: 24px; color: var(--brand); flex: none; overflow: visible; } /* visible: the settling frame may pass the box's edge by half a pixel */
/* The full logo (ui.js LOGO) is set by its height; the width follows the
   artwork, 877.3 x 133.47 units. */
.logo { --logo-h: 20px; display: block; height: var(--logo-h); width: calc(var(--logo-h) * 6.573); color: var(--brand); flex: none; }
.solo-top .logo { --logo-h: 22px; }
/* Phones: the symbol alone stands for the brand in the top bar, 24 px wide like
   the mark (the box stops at the symbol's width; the logo's slice keeps the
   symbol whole and cuts the rest). */
@media (max-width: 420px) {
  .topbar .logo { --logo-h: 17.5px; width: calc(var(--logo-h) * 1.3751); }
}
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--muted); font-size: 15px; font-weight: 500; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.me { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); min-width: 0; }
.me .who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs { position: relative; display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { text-decoration: none; padding: 10px 12px; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.tabs .count { margin-left: 6px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tabs .count.bad { color: var(--bad); font-weight: 600; }

/* Buttons: capsules, like the phone. Filled ink is the one primary action. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px; border-radius: 999px; border: 0;
  background: var(--btn); color: var(--btn-ink); font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s, color 0.15s, opacity 0.15s, transform 0.1s;
}
.btn:hover { background: color-mix(in srgb, var(--btn) 84%, var(--bg)); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.btn.big { min-height: 50px; padding: 0 26px; font-size: 17px; }
.btn.small { min-height: 32px; padding: 0 12px; font-size: 14px; gap: 6px; }
.btn.ghost { background: var(--fill); color: var(--ink); }
.btn.ghost:hover { background: var(--fill-2); }
.btn.plain { background: transparent; color: var(--ink); padding: 0 10px; }
.btn.plain:hover { background: var(--fill); }
.btn.danger { background: var(--fill); color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); }
.btn.good { background: var(--good); color: #fff; }
.btn.block { width: 100%; }
.btn[aria-busy="true"] { opacity: 0.85; cursor: progress; }
.spin { display: inline-block; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Sections and panels */
.card { background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--radius); }
.card.pad { padding: 20px; }
.card.pad-sm { padding: 14px 16px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; font-size: 15px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.divider { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* Grouped list (the phone's inset sections): rows with inset hairlines. */
.list { background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--radius); overflow: hidden; }
.list-row {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px;
  color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
a.list-row:hover, button.list-row:hover { background: var(--hover); }
.list-row + .list-row::before {
  content: ""; position: absolute; top: 0; right: 0; left: var(--inset, 16px); height: 1px;
  background: var(--hairline); transform-origin: top;
}
@media (min-resolution: 2dppx) { .list-row + .list-row::before { transform: scaleY(0.5); } }
.list-row:focus-visible { outline-offset: -2px; border-radius: var(--radius); }
.list-row .chev { color: var(--faint); margin-left: auto; flex: none; }

/* Notion-flat table (admin) */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
/* position: relative above, on .tabs and on the phone's .nav: a scrolling strip holds its absolutely placed
   children (.sr-only labels), which would otherwise sit past the screen's edge and scroll the page sideways (rehearsal D5) */
table.flat { width: 100%; border-collapse: collapse; font-size: 14px; }
table.flat th { text-align: left; font-weight: 500; color: var(--muted); font-size: 13px; padding: 10px 14px; border-bottom: 1px solid var(--hairline); white-space: nowrap; background: var(--raised); }
table.flat td { padding: 12px 14px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
table.flat tr:last-child td { border-bottom: 0; }
table.flat tr.link { cursor: pointer; }
table.flat tr.link:hover td { background: var(--hover); }
table.flat td.num, table.flat th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.flat .thumb { width: 56px; height: 42px; border-radius: 6px; object-fit: cover; background: var(--raised); }

/* Status: a dot and a word in the status colour (never a shouting pill). */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--muted); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status.info { color: var(--info); }
.status.good { color: var(--good); }
.status.warn { color: var(--warn); }
.status.bad { color: var(--bad); }
/* Being edited right now: the spinner stands in for the dot (ui.js statusLabel busy). */
.status.busy::before { content: none; }
.status .spin { width: 12px; height: 12px; }

/* Tags: small, sentence case, quiet. */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1.5; padding: 1px 8px; border-radius: 6px; background: var(--fill); color: var(--ink-2); white-space: nowrap; }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.tag { display: inline-flex; font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--ink-2); white-space: nowrap; }

/* Forms. 16px text so iPhone Safari never zooms into a field. */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .label { font-size: 14px; font-weight: 500; color: var(--muted); }
.input, .field input, .field textarea, .field select {
  width: 100%; min-height: 46px; padding: 11px 14px; font-size: 16px;
  border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field textarea { min-height: 104px; resize: vertical; line-height: 1.45; }
.input:focus, .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--fill); }
.input:focus-visible, .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: none; }
.field input[aria-invalid="true"], .input[aria-invalid="true"] { border-color: var(--bad); }
.field .hint { font-size: 14px; color: var(--muted); }
.seg { display: inline-flex; padding: 2px; border-radius: 10px; background: var(--fill); }
.seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 8px; cursor: pointer; color: var(--ink-2); font-size: 14px; font-weight: 500; transition: background-color 0.15s, box-shadow 0.15s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--seg-thumb); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.04); }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }

/* Notices: a tinted panel, text stays ink. */
.banner { display: block; padding: 12px 16px; border-radius: 12px; font-size: 15px; line-height: 1.45; background: var(--info-soft); color: var(--ink); }
.banner.good { background: var(--good-soft); }
.banner.bad { background: var(--bad-soft); }
.banner.warn { background: var(--warn-soft); }
.banner a { font-weight: 600; }

/* Nothing here yet: left-aligned, a sentence and one action. */
.empty { padding: 40px 0 32px; color: var(--muted); max-width: 540px; }
.empty > .i { display: block; color: var(--faint); margin-bottom: 16px; }
.empty h3 { color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
.empty p + p { margin-top: 16px; }

.progress { height: 4px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--ink); border-radius: 2px; transition: width 0.3s; }
.progress.good > span { background: var(--good); }
.skeleton { background: var(--fill); border-radius: var(--radius-sm); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

/* Photos */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.photos.small { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--raised); cursor: zoom-in; border: 0; padding: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo:hover img { filter: brightness(0.96); }
.photo .cap { position: absolute; left: 8px; bottom: 8px; right: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.photo .cap .pill { background: rgba(17, 17, 17, 0.72); color: #fff; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(8, 8, 9, 0.96); display: flex; flex-direction: column; }
.lightbox .lb-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; color: #fff; gap: 12px; }
.lightbox .lb-body { flex: 1; display: grid; place-items: center; min-height: 0; padding: 0 56px 24px; position: relative; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 22px; cursor: pointer; display: grid; place-items: center; }
.lightbox .lb-nav.prev { left: 8px; }
.lightbox .lb-nav.next { right: 8px; }
.lightbox .btn.ghost { background: rgba(255, 255, 255, 0.12); color: #fff; }
.lightbox .btn.ghost:hover { background: rgba(255, 255, 255, 0.2); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; }
.modal-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); }
.modal-card { position: relative; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-lg); }
.modal-card h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.modal-card .row.end { margin-top: 6px; }

/* Toast: a small capsule, bottom centre. */
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 16px); z-index: 90; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 999px; font-size: 15px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; max-width: calc(100vw - 32px); box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--bad); color: #fff; }
.toast.good { background: var(--good); color: #fff; }

/* Drop zone (admin uploads) */
.drop { border: 1.5px dashed var(--hairline); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--muted); transition: border-color 0.15s, background-color 0.15s; cursor: pointer; }
.drop.over { border-color: var(--ink); background: var(--hover); color: var(--ink); }

/* Signed out, sign in, links that no longer work: the brand top left and one
   calm column, never a floating card. */
.solo { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 20px 24px 48px; }
.solo-top { display: flex; align-items: center; height: 36px; }
.solo-main { width: min(440px, 100%); margin: clamp(40px, 14vh, 140px) auto 0; display: flex; flex-direction: column; gap: 20px; }
.solo-main h1 { font-size: 34px; }
.solo-main .lede { font-size: 17px; color: var(--muted); }
.solo-actions { display: flex; flex-direction: column; gap: 10px; }
.solo-foot { font-size: 14px; color: var(--muted); }
/* Terms and privacy at the foot of the sign-in pages. */
.solo-legal { width: min(440px, 100%); margin: auto auto 0; padding-top: 48px; display: flex; gap: 20px; font-size: 13px; }
.solo-legal a { color: var(--muted); text-decoration: none; }
.solo-legal a:hover { color: var(--ink); text-decoration: underline; }
.link-form { display: flex; flex-direction: column; gap: 12px; }
.link-form[hidden] { display: none; }
.link-form [data-link-status]:empty { display: none; }
.link-form [data-link-status] { font-size: 14px; color: var(--bad); }
.link-alt { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.link-alt[hidden] { display: none; }
.link-sent { padding: 14px 16px; border-radius: 12px; background: var(--good-soft); line-height: 1.5; }
.textbtn { background: none; border: 0; padding: 0; color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline); }
.textbtn:hover { text-decoration-color: currentColor; }

/* The frame in the mark settles level once when a solo page opens (the album
   page asks for it too, in share.css). It turns about its own centre and
   never meets the wall. */
.mark .lvl, .logo .lvl { transform-box: fill-box; transform-origin: center; }
.solo .lvl { animation: settle 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both; }
@keyframes settle {
  0% { transform: rotate(-6deg); }
  60% { transform: rotate(0.6deg); }
  100% { transform: rotate(0deg); }
}

@media (max-width: 720px) {
  .page { padding: 20px 16px 96px; }
  .topbar-in { padding: 0 16px; gap: 14px; }
  .me .who { display: none; }
  h1 { font-size: 28px; }
  .head .sub { font-size: 16px; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { margin-bottom: 8px; }
  .photos { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .lightbox .lb-body { padding: 0 8px 16px; }
  .hide-sm { display: none !important; }
  table.flat .hide-sm { display: none; }
  .solo { padding: 16px 20px 40px; }
  .solo-main h1 { font-size: 30px; }
}
/* Phones: the mark alone stands for the brand once the bar is full (Listings
   and Your team, plus Admin and its count for the admin), and the spacing
   tightens so all of it fits from 375 px. Narrower than that the admin's
   links scroll sideways inside the bar; Sign out keeps its size, so the page
   never gets wider. The name leaves the screen but stays in the link: the
   mark is aria-hidden, so it is what screen readers call the link. */
/* A shorter nav label where the bar is full (Your office reads Office on a phone). */
.nav .nav-narrow { display: none; }
@media (max-width: 420px) {
  .nav .nav-wide { display: none; }
  .nav .nav-narrow { display: inline; }
  .nav:has(a[href="/office"]) a { padding-left: 4px; padding-right: 4px; }
  .topbar-in { gap: 10px; }
  .nav { position: relative; gap: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .me { flex: none; }
  .me .btn { padding: 0 6px; }
}
@media (max-width: 400px) {
  .nav a { padding: 6px; }
  .tabs a { padding: 10px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Address suggestions under an address field (address-suggest.js). */
.addr-suggest { display: grid; gap: 8px; margin-top: 8px; }
.addr-here { justify-self: start; }
.addr-here[hidden] { display: none; } /* .btn sets display, which would beat the hidden attribute */
.addr-list { list-style: none; margin: 0; padding: 4px 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); max-height: 280px; overflow-y: auto; }
.addr-list [role="option"] { display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; cursor: pointer; font-size: 15px; }
.addr-list [role="option"]:hover, .addr-list [aria-selected="true"] { background: var(--hover); }
.addr-head { padding: 8px 14px 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.addr-credit { margin: 0; }