body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body);
  font-size: var(--text-base); line-height: 1.55; margin: 0;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--color-text); text-decoration-color: var(--color-border);
  text-underline-offset: 3px; transition: text-decoration-color 120ms ease; }
a:hover { text-decoration-color: var(--color-text); }
/* ════════════════════════════════════════════════════════════════
   TYPE ROLES — the complete set. Every piece of text in the app is
   one of these seven roles; nothing defines its own typography.
   The styleguide (/admin/styleguide) documents each with its exact spec.

   1 Heading 1     Archivo 650 · 24px   page titles
   2 Heading 2     Archivo 600 · 19px   section headings, floor tabs, nav
   3 Heading 3     Archivo 600 · 15px   sub-headings (room names in cards)
   4 Body          Inter 400/500 · 15px text, buttons, chips, list items
   5 Support       Inter 400 · 13px     helper text, form labels, sublines
   6 Eyebrow       Plex Mono 500 · 12px caps, tracked — panel titles, sheet labels
   7 Data          Plex Mono · 12px     figures; 19px "data large" for key totals
   ════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, .task-edit__title-input { font-family: var(--font-display); letter-spacing: -0.01em; }
h1 { font-size: var(--text-xl); font-weight: 650; margin: 0 0 var(--space-4); }
h2, .task-edit__title-input { font-size: var(--text-lg); font-weight: 600; }
h3 { font-size: var(--text-base); font-weight: 600; }

:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
/* form fields signal focus via their ink border — no extra ring */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

.app-header { display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-4) var(--space-8); background: var(--color-surface);
  border-bottom: 1px solid var(--color-border); }
.app-header__logo { width: 20px; height: 20px; flex-shrink: 0; }
.app-header__logout-form { margin-left: auto; }
.app-header__brand { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-2); }
.app-header__nav { display: flex; gap: var(--space-6); align-items: center;
  border-left: 1px solid var(--color-border); padding-left: var(--space-6); }
.app-header__nav a, .app-header__logout, .app-header__side a { font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.01em; text-decoration: none;
  color: var(--color-text-muted); transition: color 120ms ease; }
.app-header__nav a, .app-header__side a { border-bottom: 2px solid transparent; padding-bottom: 2px; }
.app-header__nav a.app-header__nav--active, .app-header__side a.app-header__nav--active
  { color: var(--color-text); border-bottom-color: var(--color-text); }
/* Same box metrics as the links (transparent underline slot), so the
   header's align-items:center puts all their baselines on one line. */
.app-header__logout { background: none; cursor: pointer; padding: 0 0 2px; line-height: 1.55;
  border: none; border-bottom: 2px solid transparent; }
.app-header__nav a:hover, .app-header__logout:hover, .app-header__side a:hover { color: var(--color-text); }
/* Right-justified group: Admin (owners) · Styleguide · Log out. */
.app-header__side { margin-left: auto; display: flex; align-items: center; gap: var(--space-6); }
/* Unread-notifications dot on the Tasks nav item. */
.app-header__notif-dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-pill);
  background: var(--color-danger); margin-left: 3px; vertical-align: super; }
.app-header__navlink { display: inline-flex; align-items: center; gap: var(--space-2); }
.nav-icon { width: 20px; height: 20px; flex-shrink: 0; }
.app-header__logout { display: inline-flex; align-items: center; }

.app-main { padding: var(--space-8); max-width: 1920px; margin: 0 auto; }

input, select, textarea { font: inherit; font-size: var(--text-sm); color: var(--color-text);
  background: var(--color-surface); padding: var(--space-2) var(--space-4);
  border: var(--control-border-w) solid var(--color-border); border-radius: var(--control-radius);
  transition: border-color 120ms ease; }
textarea { border-radius: var(--radius-lg); }
select { appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 38px; background-image: var(--control-chevron);
  background-repeat: no-repeat; background-position: right var(--space-4) center; }
select:hover { border-color: var(--color-text); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-text); }
input::placeholder, textarea::placeholder { color: var(--color-text-muted); }
input[type="checkbox"] { accent-color: var(--color-text); width: 1rem; height: 1rem; }

/* role 5 — SUPPORT: helper text, form labels, secondary lines */
.t-support, .dashboard__total-label,
.auth__hint, .auth__footer, .auth__divider, .task-edit__grid label, .compare__hint, .filmstrip__kind,
.shopping-total {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400;
  color: var(--color-text-muted); }

/* role 6 — EYEBROW: mono caps annotation. Panel titles, sheet labels, back links */
.eyebrow, .card__title, .compare__label, .task-edit__section-h, .pin-popover strong,
.zone-chips__label, .workspace__panel-title {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted); }

/* role 7 — DATA: mono figures (costs, quantities, measurements) */
.t-data, .stat-bar__value, .task-row__cost, .shopping-item__qty, .shopping-item__total,
.shopping-group__subtotal, .dashboard__tasks li span, .filmstrip__pin-marker,
.task-edit__meta dd, .materials td:nth-child(4), .materials td:nth-child(5) {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400;
  color: var(--color-text); }

/* role 7b — DATA LARGE: the key figures (house totals) */
.t-data-lg, .dashboard__total strong, .shopping-total strong, .task-edit__footer strong {
  font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 500;
  color: var(--color-text); }

/* auth screens */
.auth { min-height: 70vh; display: grid; place-items: center; }
.auth__card { width: 100%; max-width: 360px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-8); box-shadow: var(--shadow-2); }
.auth__brand { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; margin-bottom: var(--space-1); }
.auth__hint { margin: 0 0 var(--space-6); }
.auth__form { display: flex; flex-direction: column; gap: var(--space-3); }
.auth__form input { width: 100%; box-sizing: border-box; }
.auth__passkey { display: flex; flex-direction: column; gap: var(--space-3); }
.auth__passkey .btn { width: 100%; }
/* hairline "or" between the passkey path and the password fallback */
.auth__divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1;
  border-top: 1px solid var(--color-border); }
.auth__footer { margin-top: var(--space-4); text-align: center; }
.auth__flash { font-size: var(--text-sm); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4);
  border: 1px solid var(--color-border); }
.auth__flash--alert { color: var(--color-danger); background: var(--color-danger-bg);
  border-color: var(--color-danger); }
.auth__flash--notice { color: var(--color-text); background: var(--color-status-done); }

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

/* Phone shell. The bar exists in the DOM at every width; CSS decides. */
.bottom-bar { display: none; }

@media (max-width: 700px) {
  .app-header { gap: var(--space-3); }
  .app-header__nav, .app-header__side a { display: none; } /* sign-out button stays */
  .app-main { padding: var(--space-3); padding-bottom: calc(64px + env(safe-area-inset-bottom) + var(--space-3)); }

  .bottom-bar { position: fixed; inset: auto 0 0 0; z-index: 30; display: flex;
    background: var(--color-surface); border-top: 1px solid var(--color-border);
    padding-bottom: env(safe-area-inset-bottom); }
  .bottom-bar__item { flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: var(--space-2) 0; min-height: 44px; color: var(--color-text-muted);
    font-family: var(--font-display); font-size: 10px; text-decoration: none; }
  .bottom-bar__item--active { color: var(--color-text); }
  .bottom-bar__item .nav-icon { width: 22px; height: 22px; }

  .btn, .filter-chip { min-height: 44px; display: inline-flex; align-items: center; }
}