/*
  Room Tags — Highline brand system.

  The same tokens as Highline Safety and the client questionnaire, which took
  them from highlinebuilding.com.au: monochrome with one slate-navy accent,
  Adamina for display type and Nunito for interface type, hairline rules,
  square corners, no shadows.

  The accent is a variable because each company that uses Room Tags sets its
  own on the Company page. Everything else stays fixed.

  Used on site, on a phone, often in the sun: tap targets are large, body
  type is 16px, and the dark theme exists for the inside of a roof space.
*/

:root {
  --ink: #0a0a0a;
  --graphite: #5e5e5e;
  --ash: #949494;
  --mist: #c6c6c6;
  --bone: #f7f7f7;
  --paper: #ffffff;

  --accent: #273346;
  --accent-wash: #eef0f4;

  --bg: #ffffff;
  --fg: #0a0a0a;
  --surface: #ffffff;
  --surface-sunk: #f7f7f7;
  --line: #e4e4e4;
  --line-strong: #c6c6c6;
  --muted: #5e5e5e;

  --danger: #9b1c1c;
  --danger-wash: #fdf0f0;
  --ok: #1f5c3d;
  --ok-wash: #eef5f1;
  --hl: #ffd400;
  /* Placeholder text still has to be readable (4.5:1 on white). */
  --placeholder: #767676;
  --focus: var(--accent);

  --font-display: "Adamina", "Times New Roman", Georgia, serif;
  --font-sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --radius: 2px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111111;
    --fg: #f2f2f2;
    --surface: #1a1a1a;
    --surface-sunk: #141414;
    --line: #2c2c2c;
    --line-strong: #3d3d3d;
    --muted: #a3a3a3;
    --accent-wash: #1d2430;
    /* The reds and greens that read on white are too dark on black. */
    --danger: #f08a8a;
    --danger-wash: #2b1616;
    --ok: #6fbf95;
    --ok-wash: #12251b;
    --placeholder: #8a8a8a;
    --focus: #b9c6dc;
  }
}
:root[data-theme="dark"] {
  --bg: #111111;
  --fg: #f2f2f2;
  --surface: #1a1a1a;
  --surface-sunk: #141414;
  --line: #2c2c2c;
  --line-strong: #3d3d3d;
  --muted: #a3a3a3;
  --accent-wash: #1d2430;
  --danger: #f08a8a;
  --danger-wash: #2b1616;
  --ok: #6fbf95;
  --ok-wash: #12251b;
  --placeholder: #8a8a8a;
  --focus: #b9c6dc;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, .font-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}
h1 { font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.15; }
h2 { font-size: 1.125rem; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.wordmark {
  font-family: var(--font-display);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  line-height: 1;
}
.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.xs { font-size: 0.75rem; }

/* ------------------------------------------------------------ layout */

.site-header {
  position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: var(--surface);
  padding-top: env(safe-area-inset-top);
}
.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1rem; width: 100%; }
@media (min-width: 640px) { .wrap { padding: 0 1.5rem; } }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; min-width: 0; }
.brand img { height: 32px; width: auto; display: block; }
.brand .wordmark { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-default { filter: invert(1); mix-blend-mode: screen; } }
:root[data-theme="dark"] .logo-default { filter: invert(1); mix-blend-mode: screen; }
.nav { display: flex; gap: 1.25rem; align-items: center; }
.nav a, .nav button {
  font-size: 0.875rem; font-weight: 600; color: var(--muted); text-decoration: none;
  background: none; border: 0; padding: 0.5rem 0; cursor: pointer;
}
.nav a:hover, .nav button:hover, .nav a[aria-current="page"] { color: var(--fg); }

main { flex: 1; padding: 2rem 0 4rem; }
.site-footer { border-top: 1px solid var(--line); padding: 1.25rem 0; font-size: 0.75rem; color: var(--muted); }

.page-header { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; margin-bottom: 2rem; }
.page-header .row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.page-header .desc { margin-top: 0.75rem; color: var(--muted); font-size: 0.875rem; max-width: 42rem; }
.crumb { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; color: var(--muted); text-decoration: none; margin-bottom: 1rem; }
.crumb:hover { color: var(--fg); }

.stack > * + * { margin-top: 1.5rem; }
.grid-2 { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------ cards */

.card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); }
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
}
.card-head p { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--muted); }
.card-head > .btn-row { flex-wrap: nowrap; flex: none; }
.card-body { padding: 1.25rem; }
.card-body > * + * { margin-top: 1rem; }

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.625rem 1rem;
  font-size: 0.875rem; font-weight: 700; line-height: 1.2;
  border-radius: var(--radius); border: 1px solid transparent;
  background: var(--ink); color: var(--paper);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover { background: var(--accent); }
.btn:disabled { opacity: 0.4; pointer-events: none; }
.btn.accent { background: var(--accent); }
.btn.accent:hover { background: var(--ink); }
.btn.secondary { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn.secondary:hover { border-color: var(--fg); background: var(--surface-sunk); }
.btn.ghost { background: transparent; color: var(--muted); padding-left: 0.5rem; padding-right: 0.5rem; }
.btn.ghost:hover { color: var(--fg); }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--line-strong); }
.btn.danger:hover { border-color: var(--danger); background: var(--danger-wash); }
.btn.small { min-height: 2.25rem; padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn:not(.secondary):not(.ghost):not(.danger):not(.solid-danger):not(.accent) { background: var(--paper); color: var(--ink); }
  :root:not([data-theme="light"]) .btn:not(.secondary):not(.ghost):not(.danger):not(.solid-danger):not(.accent):hover { background: var(--mist); }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.link { background: none; border: 0; padding: 0; color: var(--muted); font-size: 0.8125rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--fg); }
.link.danger:hover { color: var(--danger); }

/* ------------------------------------------------------------ forms */

.field-wrap { display: block; }
.field-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; }
.field {
  width: 100%; font-size: 1rem; line-height: 1.5;
  padding: 0.6rem 0; border: 0; border-bottom: 1px solid var(--line-strong);
  background: transparent; color: var(--fg); outline: none; border-radius: 0;
  transition: border-color 120ms ease;
}
.field::placeholder { color: var(--placeholder); }
.field:focus { border-bottom-color: var(--focus); box-shadow: 0 1px 0 var(--focus); }
textarea.field { border: 1px solid var(--line-strong); padding: 0.5rem 0.75rem; min-height: 2.75rem; resize: vertical; border-radius: var(--radius); }
textarea.field:focus { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
select.field { padding-right: 1.5rem; }
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } .form-grid.cols-3 { grid-template-columns: 2fr 1fr auto; align-items: end; } }

.notice { border: 1px solid var(--line); background: var(--surface-sunk); padding: 0.875rem 1rem; font-size: 0.875rem; border-radius: var(--radius); }
.notice.error { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-wash); color: var(--danger); }
.notice.ok { border-color: color-mix(in srgb, var(--ok) 30%, transparent); background: var(--ok-wash); color: var(--ok); }
.notice.accent { border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: var(--accent-wash); }

.badge {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0.45rem;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--line); background: var(--surface-sunk); color: var(--muted); border-radius: var(--radius);
}
.badge.accent { background: var(--accent-wash); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge.accent { color: var(--fg); } }

/* ------------------------------------------------------------ lists */

.rows { list-style: none; margin: 0; padding: 0; }
.rows > li + li { border-top: 1px solid var(--line); }
.row-link {
  display: flex; align-items: center; gap: 1rem; padding: 0.875rem 1.25rem; min-height: 3.5rem;
  text-decoration: none; color: inherit; width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
}
.row-link:hover { background: var(--surface-sunk); }
.row-link .grow { flex: 1; min-width: 0; }
.row-link .title { font-weight: 700; }
.row-link .sub { font-size: 0.8125rem; color: var(--muted); }
.chev { color: var(--ash); flex: none; }
.group-label { padding: 0.75rem 1.25rem 0.25rem; background: var(--surface-sunk); border-bottom: 1px solid var(--line); }
.group-label .eyebrow { margin: 0; }

.thumb {
  width: 64px; height: 46px; flex: none; object-fit: cover; object-position: top left;
  border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius);
}
.thumb.empty { display: grid; place-items: center; font-size: 0.75rem; color: var(--ash); }

details.fold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.75rem;
  padding: 0.875rem 1.25rem; min-height: 3.5rem; font-weight: 700;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary:hover { background: var(--surface-sunk); }
details.fold > summary .chev { transition: transform 150ms ease; margin-left: auto; }
details.fold[open] > summary .chev { transform: rotate(90deg); }
details.fold[open] > summary { border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------ specs */

/* Sections sit open under eyebrow headings; values in a grid of hairline cells. */
.spec-blocks > * + * { margin-top: 1.75rem; }
.spec-block .eyebrow { margin-bottom: 0.5rem; font-family: var(--font-sans); }
.spec-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0 1.5rem; margin: 0;
}
.spec-item { border-top: 1px solid var(--line); padding: 0.6rem 0 0.7rem; min-width: 0; }
.spec-item.wide { grid-column: 1 / -1; }
.spec-item dt {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
  font-size: 0.75rem; color: var(--muted); font-weight: 600; margin-bottom: 0.15rem;
}
.spec-item dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.srcs { display: inline-flex; gap: 0.6rem; flex: none; }
/* The sheet a value came from: quiet, but a real tap target. */
.src {
  background: none; border: 0; padding: 0.25rem 0 0.25rem 0.25rem; margin: -0.25rem 0;
  font: 700 0.75rem/1 var(--font-sans); color: var(--accent); cursor: pointer; white-space: nowrap;
}
.src:hover { text-decoration: underline; text-underline-offset: 3px; }
.src.plain { color: var(--muted); cursor: default; }
.src.plain:hover { text-decoration: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .src:not(.plain) { color: #b9c6dc; } }
:root[data-theme="dark"] .src:not(.plain) { color: #b9c6dc; }

/* Section editor */
.ed-section { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; background: var(--surface); }
.ed-section + .ed-section { margin-top: 1rem; }
.ed-title { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.5rem; }
.ed-title .field { font-family: var(--font-display); font-size: 1.05rem; }
.ed-line { display: grid; grid-template-columns: 1fr; gap: 0.35rem; padding: 0.75rem 0; border-top: 1px dashed var(--line); }
@media (min-width: 720px) { .ed-line { grid-template-columns: 11rem 1fr 7rem auto; align-items: start; } }
.ed-line .field { font-size: 1rem; }
.ed-line .tools { display: flex; gap: 0.75rem; align-items: center; padding-top: 0.6rem; flex-wrap: wrap; }
.ed-line .hl-tag { font-size: 0.75rem; color: var(--ok); font-weight: 700; }
.sticky-bar {
  position: sticky; bottom: 0; z-index: 5; background: var(--bg); border-top: 1px solid var(--line);
  padding: 0.75rem 0; margin-top: 1.5rem;
}

/* ------------------------------------------------------------ QR */

.qr-compact { display: flex; gap: 1rem; align-items: center; }
.qr-compact img { width: 6.5rem; height: 6.5rem; flex: none; background: #fff; padding: 0.3rem; border: 1px solid var(--line); }
.qr-actions { display: grid; gap: 0.5rem; justify-items: start; }

/* ------------------------------------------------------------ job + room layouts */

/* Phone: one column in a set order. Wide: rooms and whole house on the left,
   plans and the site sign in a side column. */
.job-layout, .job-main, .job-side { display: flex; flex-direction: column; gap: 1.5rem; }
.job-main, .job-side { display: contents; }
.job-layout [data-area="rooms"] { order: 1; }
.job-layout [data-area="plans"] { order: 2; }
.job-layout [data-area="house"] { order: 3; }
.job-layout [data-area="qr"] { order: 4; }
@media (min-width: 900px) {
  .job-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
  .job-main, .job-side { display: flex; }
}

/* Phone order in a room: plan, specs, to do, hold points, photos. */
.room-layout { display: flex; flex-direction: column; gap: 1.5rem; }
.room-main, .room-side { display: contents; }
.room-layout [data-area="plan"] { order: 0; }
.room-layout [data-area="specs"] { order: 1; }
.room-layout [data-area="todo"] { order: 2; }
.room-layout [data-area="hold"] { order: 3; }
.room-layout [data-area="photos"] { order: 4; }
@media (min-width: 900px) {
  .room-layout { display: grid; grid-template-columns: 22rem minmax(0, 1fr); align-items: start; }
  .room-main, .room-side { display: flex; flex-direction: column; gap: 1.5rem; }
}

/* Room tiles */
.tile-groups > * + * { margin-top: 1.25rem; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.tile {
  display: flex; flex-direction: column; justify-content: center; gap: 0.15rem;
  min-height: 3.5rem; padding: 0.65rem 0.85rem; height: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  text-decoration: none; color: inherit; background: var(--surface);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.tile:hover { border-color: var(--fg); background: var(--surface-sunk); }
.tile-name { font-weight: 700; line-height: 1.25; }
.tile-sub { font-size: 0.75rem; color: var(--muted); }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr 1fr; } }

/* Where the room is: a window onto the floor plan, centred on the room. */
.locator-wrap { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; color: inherit; }
.locator {
  position: relative; height: 15rem; background-color: #fff; background-repeat: no-repeat;
  border-bottom: 1px solid var(--line); overflow: hidden;
}
@media (min-width: 900px) { .locator { height: 18rem; } }
.locator-pin {
  position: absolute; width: 4.5rem; height: 4.5rem; transform: translate(-50%, -50%);
  border: 3px solid var(--accent); border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.35); /* fades the rest of the sheet */
}
.locator-cap { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.25rem; font-size: 0.875rem; }
.locator-wrap:hover .locator-cap { background: var(--surface-sunk); }
.switch { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.875rem; font-weight: 600; }
.switch input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

/* ------------------------------------------------------------ photos */

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.5rem; }
.photo-grid figure { margin: 0; }
.photo-grid button { display: block; width: 100%; padding: 0; border: 1px solid var(--line); background: var(--surface-sunk); cursor: zoom-in; border-radius: var(--radius); }
.photo-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-grid figcaption { font-size: 0.75rem; color: var(--muted); padding-top: 0.25rem; }

/* ------------------------------------------------------------ viewer */

.viewer {
  position: fixed; inset: 0; z-index: 50; background: #0d0d0d; color: #f2f2f2;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.viewer-bar {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; min-height: 3.5rem;
  border-bottom: 1px solid #2c2c2c; background: #151515; position: relative;
}
.viewer-bar .name { flex: 1; min-width: 0; }
.viewer-bar .name strong, .viewer-bar .name span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-bar .name strong { font-family: var(--font-display); font-weight: 400; font-size: 1rem; }
.viewer-bar .name span { font-size: 0.75rem; color: #a3a3a3; }
.viewer .btn.secondary { color: #f2f2f2; border-color: #3d3d3d; }
.viewer .btn.secondary:hover { background: #222; border-color: #f2f2f2; }
.viewer .btn.secondary[aria-pressed="true"] { background: #f2f2f2; color: #0a0a0a; }
.viewer select.field { color: #f2f2f2; border-bottom-color: #3d3d3d; max-width: 12rem; }
.viewer select.field option { color: #0a0a0a; }
.viewer-hint { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; padding: 0.5rem 0.75rem; background: #1d2430; color: #dfe4ec; }
.viewer-hint .link { color: #dfe4ec; font-size: 0.875rem; padding: 0.35rem 0.25rem; }
.viewer-hint .hl-dot { display: inline-block; width: 0.7rem; height: 0.7rem; background: var(--hl); border: 1px solid #c00; vertical-align: middle; margin-right: 0.35rem; }
.viewer-scroll { flex: 1; overflow: auto; position: relative; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.viewer-stage { position: relative; margin: 0 auto; background: #fff; }
.viewer-stage img { display: block; width: 100%; height: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
.viewer-stage.placing, .viewer-stage.marking { cursor: crosshair; }
.pin {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  font: 700 12px/1.1 var(--font-sans); padding: 0.25rem 0.5rem; white-space: nowrap;
  background: rgba(10, 10, 10, 0.82); color: #fff; border: 1px solid #fff; border-radius: var(--radius);
  cursor: pointer;
}
.pin.self { background: var(--accent); outline: 2px solid var(--hl); }
.pin:hover { background: var(--accent); }
.hl-box {
  position: absolute; z-index: 3; pointer-events: none;
  background: rgba(255, 212, 0, 0.38); outline: 3px solid #d00000; outline-offset: 2px;
  animation: hl-pulse 1.4s ease-in-out 3;
}
@keyframes hl-pulse { 50% { outline-color: rgba(208, 0, 0, 0.25); } }
.mark-box { position: absolute; z-index: 3; background: rgba(39, 51, 70, 0.25); outline: 2px dashed #273346; pointer-events: none; }

/* ------------------------------------------------------------ misc */

.progress { height: 3px; background: var(--line); overflow: hidden; border-radius: 2px; }
.progress > div { height: 100%; background: var(--accent); transition: width 200ms ease; }
.spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -0.15rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state { padding: 2rem 1.25rem; text-align: center; color: var(--muted); font-size: 0.875rem; }
.toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 600;
  border-radius: var(--radius); max-width: calc(100vw - 2rem);
}
.check-row { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 1.25rem; }
.check-row input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); flex: none; }
.check-row + .check-row { border-top: 1px solid var(--line); }
.mini-lines { margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--muted); }
.mini-lines li { padding: 0.15rem 0; }
.mini-lines b { color: var(--fg); font-weight: 600; }
.swatch { width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-strong); padding: 0; background: none; cursor: pointer; }
.logo-preview { height: 56px; width: auto; border: 1px solid var(--line); padding: 0.4rem; background: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media print {
  .site-header, .site-footer, .no-print { display: none !important; }
}

/* Phones: the logo carries the brand; the nav keeps its words on one line. */
.nav a, .nav button { white-space: nowrap; }
@media (max-width: 520px) {
  .nav { gap: 0.9rem; }
  .brand .wordmark.long { display: none; }
}

/* Zoomed out, rooms are dots: big enough to tap, small enough not to pile up. */
.pin.dot {
  width: 18px; height: 18px; padding: 0; border-radius: 50%; font-size: 0;
  background: var(--accent); border: 2px solid #fff; outline: 1px solid rgba(0, 0, 0, 0.5);
}
.pin.dot::after { content: ""; position: absolute; inset: -10px; } /* larger touch area */

.photo-add { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.photo-type { display: inline-flex; align-items: center; gap: 0.5rem; }
.photo-type .field { width: auto; min-width: 11rem; }

/* ------------------------------------------------------------ to-do list */

.todo-add > * + * { margin-top: 0.6rem; }
.todo-add-row { display: flex; gap: 0.5rem; align-items: flex-end; }
.todo-add-row .field { flex: 1; min-width: 0; }
.todo-add-opts { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; }
.todo-add-opts select.field, .todo-add-opts input.field { width: auto; flex: 1 1 8rem; min-width: 0; font-size: 1rem; padding: 0.35rem 0; }

.prio-group { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; flex: none; }
.prio-pick {
  background: var(--surface); border: 0; border-left: 1px solid var(--line-strong);
  padding: 0.45rem 0.7rem; min-height: 2.25rem; font: 700 0.8125rem/1 var(--font-sans); color: var(--muted); cursor: pointer;
}
.prio-pick:first-child { border-left: 0; }
.prio-pick[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.prio-pick.p1[aria-pressed="true"] { background: var(--danger); color: var(--bg); }
.prio-pick.p3[aria-pressed="true"] { background: var(--graphite); color: #fff; }

.todo-list { border-top: 1px solid var(--line); }
.todo-item { display: flex; gap: 0.85rem; padding: 0.7rem 1.25rem 0.7rem 1rem; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
/* Urgent items carry a red edge, readable at a glance down the list. */
.todo-item.p1:not(.done) { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger-wash) 55%, transparent); }
.todo-check { display: flex; align-items: flex-start; cursor: pointer; padding: 0.6rem; margin: -0.5rem -0.35rem -0.6rem -0.6rem; }
.todo-check input { width: 1.6rem; height: 1.6rem; accent-color: var(--accent); cursor: pointer; margin: 0; }
.todo-body { flex: 1; min-width: 0; }
.todo-text {
  display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
  font: 600 1rem/1.4 var(--font-sans); overflow-wrap: anywhere;
}
.todo-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: center; margin-top: 0.2rem; font-size: 0.75rem; color: var(--muted); }
.todo-meta a { color: var(--muted); }
.prio-tag { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.75rem; }
.prio-tag.p1 { color: var(--danger); }
.prio-tag.p3 { color: var(--muted); }
.todo-item.done .todo-text { color: var(--muted); text-decoration: line-through; font-weight: 400; }
.todo-item.done { background: var(--surface-sunk); }
.todo-done-label { margin: 0; padding: 0.9rem 1.25rem 0.4rem; border-bottom: 1px solid var(--line); }
.todo-more { display: block; padding: 0.75rem 1.25rem; }
.todo-edit { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--line); }
.todo-edit > * + * { margin-top: 0.5rem; }
.badge.urgent { background: var(--danger-wash); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }

.job-layout [data-area="todo"] { order: 0; }
.job-layout [data-area="activity"] { order: 4; }
.job-layout [data-area="offline"] { order: 5; }
.job-layout [data-area="qr"] { order: 6; }

/* ------------------------------------------------------------ v3: site tools */

.icon { display: inline-flex; vertical-align: -0.2em; }
.icon-btn { padding-left: 0.7rem; padding-right: 0.7rem; }
.btn .icon + * { margin-left: 0.25rem; }

/* Trade filter and to-do filters: one row of chips, scrolling sideways on a phone. */
.trade-bar, .todo-filters {
  display: flex; gap: 0.4rem; align-items: center; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 1.25rem; padding-bottom: 0.15rem;
}
.trade-bar::-webkit-scrollbar, .todo-filters::-webkit-scrollbar { display: none; }
.todo-filters { margin: 0; padding: 0.6rem 1.25rem; border-top: 1px solid var(--line); }
.trade-bar-label { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; flex: none; margin-right: 0.2rem; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg);
  border-radius: 999px; padding: 0.4rem 0.8rem; min-height: 2.25rem;
  font: 600 0.8125rem/1 var(--font-sans); cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip[aria-pressed="true"] { background: var(--paper); color: var(--ink); } }
.chip-n { font-size: 0.75rem; font-weight: 800; opacity: 0.7; }

/* No signal */
.offline-banner {
  display: flex; gap: 0.6rem; align-items: center;
  padding: 0.6rem 1rem; background: #1d2430; color: #eef0f4; font-size: 0.875rem; font-weight: 600;
}
.save-offline { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* Site info card */
.site-info-wrap { margin-bottom: 1.25rem; }
.site-info > * + * { margin-top: 1rem; }
.induction { width: 100%; }
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 1.5rem; margin: 0; }
.site-row { border-top: 1px solid var(--line); padding: 0.55rem 0; }
.site-row dt { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.site-row dd { margin: 0; white-space: pre-wrap; }
.site-row.gate dd { font-size: 1.35rem; font-weight: 800; letter-spacing: 0.06em; }
.contacts { list-style: none; margin: 0; padding: 0; }
.site-info > .contacts:first-child li:first-child { border-top: 0; padding-top: 0; }
.contacts li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.call { flex: none; }
.contact-edit { display: grid; gap: 0.5rem; grid-template-columns: 1fr; padding: 0.25rem 0 0.75rem; border-bottom: 1px dashed var(--line); }
@media (min-width: 640px) { .contact-edit { grid-template-columns: 1fr 1fr 1fr; } }

/* Activity feed */
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 0.875rem; }
.activity .detail { color: var(--muted); overflow-wrap: anywhere; }

/* To-do extras */
.kind-tag {
  display: inline-block; margin-right: 0.4rem; padding: 0.05rem 0.4rem; vertical-align: 0.1em;
  font: 800 0.75rem/1.3 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--accent); color: var(--accent); border-radius: var(--radius);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kind-tag { color: var(--fg); border-color: var(--line-strong); } }
.todo-item.k-question:not(.done) { border-left-color: var(--accent); }
.todo-item.k-variation:not(.done) { border-left-color: var(--graphite); }
.due { font-weight: 700; }
.due.overdue { color: var(--danger); }
.for { font-weight: 700; color: var(--fg); }
.answer { margin-top: 0.4rem; padding: 0.5rem 0.65rem; background: var(--accent-wash); border-radius: var(--radius); font-size: 0.875rem; }
.todo-photo { display: block; margin-top: 0.5rem; padding: 0; border: 1px solid var(--line); background: none; cursor: zoom-in; border-radius: var(--radius); }
.todo-photo img { display: block; width: 7rem; height: 5.25rem; object-fit: cover; }
.photo-pending { display: flex; align-items: center; gap: 0.75rem; }
.photo-pending img { width: 4rem; height: 3rem; object-fit: cover; border: 1px solid var(--line); }
.todo-more-opts { display: grid; gap: 0.6rem; grid-template-columns: 1fr 1fr; }
.todo-edit-grid { display: grid; gap: 0.5rem; grid-template-columns: 1fr 1fr; }
.todo-edit-grid .field, .todo-more-opts .field { font-size: 1rem; padding: 0.35rem 0; }
.todo-item.waiting { opacity: 0.75; }
.waiting-tag { color: var(--accent); font-weight: 700; }
.todo-bin { padding: 0.75rem 1.25rem 1rem; background: var(--surface-sunk); border-top: 1px solid var(--line); }
.bin-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }

/* Tap a value to change just that line */
.spec-value {
  display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4;
  border-bottom: 1px dashed transparent;
}
.spec-value:hover { border-bottom-color: var(--line-strong); }
.spec-value.standard, dd .standard { color: var(--muted); }
.spec-value.unset { color: var(--placeholder); font-style: italic; }
.std-tag {
  display: inline-block; margin-left: 0.5rem; font: 800 0.75rem/1.4 var(--font-sans); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-strong); padding: 0 0.35rem; border-radius: var(--radius); vertical-align: 0.1em;
}
.line-edit > * + * { margin-top: 0.5rem; }
.history-link { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.line-history ul { list-style: none; margin: 0; padding: 0; }
.line-history li { padding: 0.45rem 0; border-top: 1px solid var(--line); font-size: 0.875rem; }
.add-value-wrap { border-top: 1px solid var(--line); }
.add-value-open { display: block; padding: 0.85rem 1.25rem; }
.add-value > * + * { margin-top: 0.75rem; }

.plan-was { margin-top: 0.3rem !important; font-size: 0.8125rem; color: var(--muted); white-space: normal !important; }
.plan-was .was { color: var(--fg); }
.changed-tag {
  display: inline-block; margin-right: 0.35rem; font: 800 0.75rem/1.4 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); padding: 0 0.35rem; border-radius: var(--radius);
}

/* Company standards editor */
.std-list > * + * { margin-top: 0.5rem; }
.std-row { display: grid; gap: 0.5rem; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 640px) { .std-row { grid-template-columns: 14rem 1fr auto; } }
.code-show { font: 800 1.35rem/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.04em; margin: 0.35rem 0; }

/* Hold points */
.hold-list { list-style: none; margin: 0; padding: 0; }
.hold-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1.25rem; border-top: 1px solid var(--line); }
.hold-list li:first-child { border-top: 0; }
.hold-list .grow { flex: 1; min-width: 0; }
.hold-list .title { font-weight: 700; }
.hold-mark { width: 1.6rem; height: 1.6rem; flex: none; display: grid; place-items: center; border: 2px solid var(--line-strong); border-radius: 50%; font-weight: 800; color: var(--muted); }
.hold-list li.ok .hold-mark { border-color: var(--ok); background: var(--ok); color: var(--bg); }
.tile-sub.ok { color: var(--ok); font-weight: 700; }
.insp-room { font-size: 1rem; margin-bottom: 0.5rem; }

/* Plan revisions */
.plan-row { display: flex; align-items: center; }
.plan-row.superseded .row-link, .row-link.superseded { opacity: 0.6; }
.src.old { color: var(--danger); }
.viewer-superseded { padding: 0.6rem 0.75rem; background: #9b1c1c; color: #fff; font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.viewer-superseded .btn { background: #fff; color: #9b1c1c; }
.uploader > * + * { margin-top: 0.5rem; }

/* Jobs list */
.job-row { align-items: flex-start; }
.job-flags { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; max-width: 45%; }
/* Phones: the flags go under the job, so the address keeps the full width. */
@media (max-width: 520px) {
  .job-row { flex-wrap: wrap; row-gap: 0.4rem; }
  .job-row .grow { flex: 1 1 calc(100% - 2.5rem); }
  .job-row .chev { order: 2; }
  .job-flags { order: 3; max-width: none; flex-basis: 100%; justify-content: flex-start; }
  .job-flags:empty { display: none; }
}
.sub.last { color: var(--muted); font-size: 0.75rem; }

/* Printing the to-do list */
.print-sheet { display: none; }
@media print {
  body.printing > *:not(.print-sheet) { display: none !important; }
  body.printing .print-sheet { display: block; font-size: 10.5pt; color: #000; }
  .print-sheet h1 { font-size: 16pt; margin: 0 0 0.25rem; }
  .print-sheet table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
  .print-sheet th, .print-sheet td { border-bottom: 0.5pt solid #999; padding: 5pt 4pt; text-align: left; vertical-align: top; }
  .print-sheet th { font-size: 8pt; text-transform: uppercase; letter-spacing: 0.08em; }
  .print-sheet .muted { color: #444; }
}

/* ------------------------------------------------------------ v4: design pass */

.grow { flex: 1; min-width: 0; }
.push-right { margin-left: auto; }
.narrow { max-width: 26rem; margin: 1rem auto 0; }

/* Keyboard users see where they are; mouse and touch don't get rings. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.field:focus-visible { outline: none; }
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.7rem 1rem; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: calc(0.75rem + env(safe-area-inset-top)); }
#app:focus { outline: none; }

/* Header: the job's name and "Saved" sit beside the logo once the page header scrolls away. */
.context { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.6rem; }
.context-title {
  min-width: 0; font-family: var(--font-display); font-size: 1rem; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(4px); transition: opacity 150ms ease, transform 150ms ease; pointer-events: none;
}
body.scrolled .context-title { opacity: 1; transform: none; pointer-events: auto; }
.site-header.has-context .brand { flex: none; }
.saved-mark {
  flex: none; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 800;
  color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-wash);
  padding: 0.15rem 0.45rem; border-radius: var(--radius);
}
.saved-mark .icon svg { width: 13px; height: 13px; }
.page-header .desc .desc-link { display: inline-block; margin-left: 0.75rem; font-weight: 700; color: var(--fg); text-underline-offset: 3px; }
.summary-peek { font-size: 0.875rem; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chev { display: inline-flex; }

/* Sections the tab bar jumps to stop below the sticky header. */
[id^="sec-"] { scroll-margin-top: 5rem; }

/* Tab bar: phones only, along the bottom, out of the way while typing. */
.tabbar { display: none; }
@media (max-width: 899px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--surface); border-top: 1px solid var(--line-strong);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body:has(.tabbar) { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom)); }
  body:has(.tabbar) .toast { bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
  body.typing .tabbar { display: none; }
  body.typing:has(.tabbar) { padding-bottom: 0; }
}
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  min-height: 3.75rem; padding: 0.4rem 0.25rem; background: none; border: 0; border-top: 2px solid transparent;
  color: var(--muted); font: 700 0.75rem/1.1 var(--font-sans); cursor: pointer;
}
.tab .icon svg { width: 22px; height: 22px; }
.tab[aria-current="true"] { color: var(--fg); border-top-color: var(--fg); }
.tab-badge {
  position: absolute; top: 0.3rem; left: calc(50% + 0.5rem); min-width: 1.1rem; padding: 0 0.3rem;
  background: var(--danger); color: var(--bg); border-radius: 999px; font-size: 0.75rem; line-height: 1.1rem;
}

/* In-app "are you sure?" and small forms: a sheet from the bottom on a phone, a box in the middle on a desk. */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: 30rem; background: var(--surface); color: var(--fg);
  border-top: 3px solid var(--fg); padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  max-height: 90vh; overflow: auto; animation: sheet-up 160ms ease-out;
}
.sheet.danger { border-top-color: var(--danger); }
.sheet h2 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.sheet-body > * + * { margin-top: 0.75rem; }
.sheet-body p { margin: 0; }
.sheet-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.25rem; }
.sheet-actions .btn { width: 100%; }
@media (min-width: 640px) {
  .sheet-scrim { align-items: center; }
  .sheet { border: 1px solid var(--line-strong); border-top: 3px solid var(--fg); padding-bottom: 1.25rem; }
  .sheet.danger { border-top-color: var(--danger); }
  .sheet-actions { flex-direction: row-reverse; justify-content: flex-start; }
  .sheet-actions .btn { width: auto; }
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
.btn.solid-danger { background: var(--danger); color: var(--bg); }
.btn.solid-danger:hover { background: var(--danger); filter: brightness(0.9); }

/* Loading placeholders in the shape of a page. */
.sk-page { display: grid; gap: 0.75rem; }
.sk-page > .sk-card { margin-top: 0.75rem; }
.sk-card .card-body { display: grid; gap: 0.75rem; }
.sk-card .card-body > * + * { margin-top: 0; }
.sk { display: block; max-width: 100%; background: var(--line); border-radius: var(--radius); animation: sk-pulse 1.2s ease-in-out infinite; }
@keyframes sk-pulse { 50% { opacity: 0.45; } }

/* Jobs list: Current / Archived and a search box. */
.list-tools { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; padding-top: 0.85rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--line); }
.list-tools > * + * { margin-top: 0; }
.list-tools .field { flex: 1 1 14rem; width: auto; }
.seg-tabs { display: flex; gap: 0.4rem; }

/* Rooms: to-dos on each tile, an urgent one edged in red. */
.tile.has-urgent { border-left: 3px solid var(--danger); }
.tile-sub.todo { color: var(--fg); font-weight: 700; }
.tile-sub.todo.urgent { color: var(--danger); }

/* Previous / next room */
.room-step { display: flex; justify-content: space-between; gap: 0.75rem; margin: -0.75rem 0 1.25rem; }
.room-step .btn { max-width: 48%; }
.step-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Plan rows with an Edit at the end */
.plan-row .row-link { flex: 1; min-width: 0; }
.link.row-action { flex: none; align-self: stretch; display: inline-flex; align-items: center; padding: 0 1.25rem; min-height: 3.5rem; }

/* New-job checklist and first-scan welcome */
.setup-card { margin-bottom: 1.25rem; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.welcome { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin-bottom: 1.25rem; }

/* Offer to save the job for no signal */
.offline-offer { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }

/* To-do add form and editor */
.todo-options > * + * { margin-top: 0.75rem; }
.todo-who { font-size: 0.875rem; color: var(--muted); }
.as-who strong { color: var(--fg); }
.todo-edit-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.who-when { white-space: nowrap; }

/* Icon-only buttons are square. */
.btn.icon-btn { padding: 0; width: 2.75rem; flex: none; }
.btn.small.icon-btn { width: 2.25rem; }

/* Viewer tools */
.viewer-tools { display: flex; gap: 0.35rem; flex: none; align-items: center; }
.viewer .btn:not(.secondary):not(.ghost):not(.danger):not(.accent) { background: #f2f2f2; color: #0a0a0a; }
.viewer .btn.danger { color: #f08a8a; border-color: #3d3d3d; }
.viewer .btn.danger:hover { background: #2b1616; border-color: #f08a8a; }
.viewer input.field { color: #f2f2f2; border-bottom-color: #3d3d3d; }
.viewer-close { margin-left: 0.25rem; }
.viewer-menu {
  position: absolute; right: 0.75rem; top: calc(100% + 4px); z-index: 6; min-width: 15rem;
  display: grid; background: #1d1d1d; border: 1px solid #3d3d3d;
}
.viewer-menu button {
  background: none; border: 0; color: #f2f2f2; text-align: left; cursor: pointer;
  padding: 0.85rem 1rem; min-height: 3rem; font: 600 0.9375rem/1.2 var(--font-sans);
}
.viewer-menu button + button { border-top: 1px solid #2c2c2c; }
.viewer-menu button:hover { background: #2a2a2a; }
.viewer-sub {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center;
  padding: 0.5rem 0.75rem; background: #151515; border-bottom: 1px solid #2c2c2c;
}
.viewer-sub.bottom { border-bottom: 0; border-top: 1px solid #2c2c2c; }
.viewer-sub .field { width: auto; flex: 1 1 10rem; min-width: 0; }
.viewer-sub select.field { max-width: none; }

/* A narrow phone keeps Fit and drops zoom-out, so the sheet name has room. */
@media (max-width: 420px) { .viewer .zoom-out { display: none; } }

/* Phones: a tighter page top, a shorter plan crop, readable meta and 44px targets. */
@media (max-width: 640px) {
  main { padding-top: 1.25rem; }
  .site-header .wrap { min-height: 3.5rem; gap: 0.75rem; }
  .brand img { height: 28px; }
  .site-header.has-context .wordmark { display: none; }
  .page-header { padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
  .crumb { margin-bottom: 0.6rem; min-height: 2.75rem; }
  .room-step { margin-top: -0.25rem; }
  .locator { height: 11rem; }
  .btn.small { min-height: 2.75rem; }
  .btn.small.icon-btn { width: 2.75rem; }
  .chip { min-height: 2.75rem; padding: 0.5rem 0.9rem; }
  .prio-pick { min-height: 2.75rem; padding: 0.5rem 0.8rem; }
  .todo-meta, .tile-sub, .sub.last { font-size: 0.8125rem; }
  .card-head { padding: 0.9rem 1rem; }
  .card-body { padding: 1rem; }
  .todo-item { padding-right: 1rem; }
  .row-link { padding-left: 1rem; padding-right: 1rem; }
}