/* base.css — global layout: header, top nav, container, footer.
   Loaded after Pico + tokens. Component primitives (card, tile, sheet,
   chip, segmented, table, field, dialog) live under ./components/ and
   are pulled in here so a single <link rel="stylesheet" href="base.css">
   continues to be the only stylesheet a page needs to load. */

@import url("components/card.css");
@import url("components/tile.css");
@import url("components/sheet.css");
@import url("components/chip.css");
@import url("components/segmented.css");
@import url("components/table.css");
@import url("components/field.css");
@import url("components/dialog.css");
@import url("components/toc.css");
@import url("components/save-bar.css");
@import url("components/filter-sheet.css");
@import url("components/finance-stage.css");

/* ---- Typography root: body sans, display serif, mono numerals -------- */
html { color-scheme: light dark; }
/* Auth flash prevention: body hidden until auth-guard confirms session. */
html[data-auth-state="pending"] body { visibility: hidden; }
body {
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11", "kern";
  font-size: var(--text-base);
  line-height: var(--leading-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-feature-settings: "ss01", "ss02", "kern", "liga";
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: -0.012em;
  color: var(--ink);
}
h1 { font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); font-weight: 600; }
h4 { font-size: var(--text-lg); font-weight: 600; }
small, .small { font-size: var(--text-sm); color: var(--ink-muted); }

/* Tabular figures live in mono. Use class="num" for prices, dates, etc. */
.num, code, kbd, samp, pre, tt {
  font-family: var(--font-data);
  font-feature-settings: "tnum", "zero";
  font-variant-numeric: tabular-nums;
}

/* ---- View Transitions: cross-document, opt-in per page --------------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: var(--ease-out);
}
/* Named transition: area row title ↔ area detail h1. Both elements
   carry `style.viewTransitionName = "area-title"` so the title morphs
   across the navigation. Only one named target per page (the visible
   row that was clicked) — set in page-areas.js click handler. */
::view-transition-old(area-title),
::view-transition-new(area-title) {
  animation-duration: 400ms;
  animation-timing-function: var(--ease-out);
}

/* ---- Global a11y: reduced motion (WCAG 2.3.3) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Global focus: visible ring on keyboard navigation only ---- */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--rec-radius-sm);
  box-shadow: var(--focus-ring);
}

/* ---- Skip-to-content link (visually hidden until focused) ---- */
.skip-link {
  position: absolute;
  left: 0.5rem; top: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--accent); color: var(--accent-contrast);
  border-radius: var(--rec-radius-sm);
  font-weight: 600; text-decoration: none;
  transform: translateY(-150%);
  transition: transform 120ms ease;
  z-index: 100;
}
.skip-link:focus-visible { transform: translateY(0); }

body { min-height: 100dvh; display: flex; flex-direction: column; }
/* Defensive guard against stray horizontal overflow (clip, not hidden, so it
   never turns the page into a scroll container or breaks sticky descendants). */
html, body { overflow-x: clip; }

/* ---- Header (static — scrolls away with the page; not sticky) ---- */
.site-header {
  position: static; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rec-gap);
  padding-block: var(--space-3);
  /* Reserve room on the left for the fixed burger so the brand never sits under it. */
  padding-inline: max(calc(var(--space-2) + var(--tap-min) + var(--space-2)), env(safe-area-inset-left)) max(clamp(0.75rem, 3vw, 2rem), env(safe-area-inset-right));
  padding-top: max(var(--space-3), env(safe-area-inset-top));
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

/* ---- Burger toggle: fixed top-left, always visible regardless of scroll ---- */
.nav-toggle {
  position: fixed; z-index: 60;
  top: max(var(--space-2), env(safe-area-inset-top));
  left: max(var(--space-2), env(safe-area-inset-left));
  display: inline-grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min); margin: 0; padding: 0;
  color: var(--ink-muted);
  background: color-mix(in oklch, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
          backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid var(--hairline); border-radius: 999px;
  cursor: pointer;
  transition: color 120ms var(--ease-out), border-color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.nav-toggle:hover { color: var(--ink); border-color: var(--hairline-strong); }
.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-optical-sizing: auto;
  font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.015em;
  color: var(--ink); text-decoration: none;
}
.brand .brand-mark {
  display: inline-grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  color: var(--ink); /* house strokes use currentColor → flips with the theme */
}
.brand .brand-mark svg { display: block; width: 100%; height: 100%; }
.brand > span:last-child { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1; min-width: 0; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.header-user {
  /* Mobile-first: hidden on phones (too cramped); shown from tablet up. */
  display: none;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .header-user { display: inline-block; }
}
/* Mobile-first: compact sign-out on phones, roomier from tablet up. */
#btn-sign-out {
  width: auto; min-height: 32px;
  padding: 0 var(--space-2); margin: 0;
  font-size: var(--text-xs); font-weight: 500;
}
@media (min-width: 768px) {
  #btn-sign-out {
    padding: 0 var(--space-3);
    min-height: 36px;
  }
}
#theme-toggle {
  width: auto; min-height: var(--tap-min); min-width: var(--tap-min);
  padding: 0 var(--space-3); margin: 0;
  background: transparent; color: var(--ink-muted);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: var(--text-sm); font-weight: 500;
  transition: color 120ms var(--ease-out), border-color 120ms var(--ease-out), background 120ms var(--ease-out);
}
#theme-toggle:hover { color: var(--ink); border-color: var(--hairline-strong); background: var(--paper-2); }

/* ---- Sidebar nav drawer (native <dialog>, opened by the burger) ---- */
.nav-drawer {
  position: fixed; inset: 0 auto 0 0; z-index: 50;
  width: min(86vw, 20rem); max-width: 100%;
  height: 100dvh; max-height: 100dvh; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3);
  padding-top: max(var(--space-3), env(safe-area-inset-top));
  padding-left: max(var(--space-3), env(safe-area-inset-left));
  background: var(--paper); color: var(--ink);
  border: 0; border-right: 1px solid var(--hairline); border-radius: 0;
  overflow-y: auto; overscroll-behavior: contain;
}
/* One CSS-only slide-in reveal; honoured-off by the global reduced-motion rule. */
.nav-drawer[open] { animation: nav-drawer-in 220ms var(--ease-out); }
@keyframes nav-drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.nav-drawer::backdrop {
  background: color-mix(in oklch, var(--ink) 35%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

.nav-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-2);
}
.brand--drawer { font-size: var(--text-lg); }
.nav-drawer__close {
  display: inline-grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min); margin: 0; padding: 0;
  color: var(--ink-muted); background: transparent;
  border: 1px solid var(--hairline); border-radius: 999px; cursor: pointer;
  transition: color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.nav-drawer__close:hover { color: var(--ink); border-color: var(--hairline-strong); }

.nav-drawer__nav ul {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0; padding: 0; list-style: none;
}
.nav-drawer__nav a {
  position: relative;
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-min); padding: 0.5rem 0.75rem;
  border-radius: var(--rec-radius-sm);
  text-decoration: none; font-size: var(--text-sm);
  color: var(--pico-muted-color);
}
.nav-drawer__nav a:hover { color: var(--pico-color); background: var(--paper-2); }
.nav-drawer__nav a[aria-current="page"] {
  color: var(--pico-color); font-weight: 600; background: var(--paper-2);
}
/* Left accent bar marks the active page (replaces the old horizontal underbar). */
.nav-drawer__nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem;
  width: 3px; background: var(--accent); border-radius: 1px;
}

/* Short-viewport (landscape phones): tighten the drawer so all items fit
   without scrolling; keep items at the touch floor. Height-keyed, not
   orientation alone, so tall tablets-in-landscape aren't penalised. */
@media (max-height: 600px) {
  .nav-drawer {
    gap: 0;
    padding-top: max(var(--space-2), env(safe-area-inset-top));
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
  }
  .nav-drawer__head { margin-bottom: var(--space-1); }
  .nav-drawer__nav a { min-height: var(--tap-min); padding-block: var(--space-1); }
}

/* ---- Layout ---- */
main.container {
  width: 100%; max-width: var(--rec-maxw); margin-inline: auto; flex: 1 0 auto;
  padding-block: var(--space-6);
  padding-inline: max(clamp(0.75rem, 4vw, 2rem), env(safe-area-inset-left)) max(clamp(0.75rem, 4vw, 2rem), env(safe-area-inset-right));
}
.page-head { margin-bottom: var(--space-6); }
.page-head h1 { margin: var(--space-1) 0 var(--space-2); }
.page-head p { color: var(--ink-muted); margin: 0; }

/* Page-head with right-aligned actions. Mobile-first: stacked + full-width
   actions on phones; side-by-side row from tablet portrait (768) up. */
.page-head.has-actions {
  display: flex; flex-direction: column; gap: var(--space-4);
  align-items: stretch;
}
.page-head.has-actions > div:first-child { min-width: 0; flex: 1 1 auto; }
.page-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: center;
}
.page-actions button {
  margin: 0; min-height: var(--tap-min); padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm); white-space: nowrap;
}
/* Phone: actions fill the row (single buttons stay intrinsic). */
.page-head .page-actions { width: 100%; }
.page-head .page-actions button { flex: 1 1 auto; }
.page-head .page-actions button:only-child { flex: 0 0 auto; }
@media (min-width: 768px) {
  .page-head.has-actions {
    flex-direction: row; justify-content: space-between; align-items: flex-start;
    gap: var(--space-6);
  }
  .page-head .page-actions { width: auto; }
  .page-head .page-actions button { flex: 0 0 auto; }
}

/* Card, chip, dialog, field, tile primitives migrated to ./components/*. */

/* ---- Generic grid ---- */
.grid { display: grid; gap: var(--rec-gap); }
.grid.cols-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ---- Badges / placeholder ---- */
.badge {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  padding: 0.15rem 0.5rem; border-radius: 999px;
  background: var(--pico-secondary-background); color: var(--pico-secondary-inverse);
}
.placeholder-note {
  border: 1px dashed var(--pico-muted-border-color);
  border-radius: var(--rec-radius); padding: 1rem 1.2rem;
  color: var(--pico-muted-color); background: var(--pico-card-sectioning-background-color);
}

/* ---- Footer ---- */
.site-footer {
  flex-shrink: 0; margin-top: 2rem;
  border-top: 1px solid var(--pico-muted-border-color);
  padding: 1.25rem clamp(0.75rem, 3vw, 2rem);
  color: var(--pico-muted-color); font-size: 0.85rem;
}
.site-footer .container { max-width: var(--rec-maxw); margin-inline: auto; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---- Editorial article shell (Stripe-docs anchor) ------------------ */
.article {
  display: grid; gap: var(--space-6);
  grid-template-columns: 1fr;
  max-width: 70ch;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .article.has-rail {
    max-width: none;
    grid-template-columns: minmax(0, 70ch) 18rem;
    gap: var(--space-12);
    align-items: start;
  }
  .article-rail { position: sticky; top: 6.5rem; }
}
.article-section { display: grid; gap: var(--space-3); }
.article-section + .article-section { padding-top: var(--space-6); border-top: 1px solid var(--hairline); }
.article-section h2 { margin: 0; font-size: var(--text-xl); }
.article-section h3 { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--ink-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.article-section p { margin: 0; }

/* ---- Stat strip (hairline-divided, mono numerals) ------------------ */
/* Mobile-first: 2-col on phones (a tabular £400,000 never splits), folding to
   an auto-fit row from tablet portrait (768) up. */
.stat-strip {
  display: grid; gap: 0;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: var(--space-6) 0;
}
.stat-strip > div {
  padding: var(--space-3);
  border-left: 1px solid var(--hairline);
  display: grid; gap: var(--space-1);
  min-width: 0;
}
/* 2-col grid: odd cells sit on the left edge; rows from the 3rd cell get a top rule. */
.stat-strip > div:nth-child(odd) { border-left: 0; }
.stat-strip > div:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
.stat-strip dt {
  font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0;
}
.stat-strip dd {
  margin: 0; font-family: var(--font-display); font-optical-sizing: auto;
  font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
  font-size: var(--text-xl); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--ink);
  /* A tabular figure (e.g. £400,000) must never split mid-number. The cell
     already has min-width:0 + a 2-col phone layout to absorb the width. */
  overflow-wrap: normal; white-space: nowrap;
}
.stat-strip dd.is-text {
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 500;
  letter-spacing: 0; line-height: 1.3;
  /* Text values (e.g. a date range) wrap normally — only numerals stay nowrap. */
  white-space: normal; overflow-wrap: anywhere;
}
/* Tablet portrait and up: auto-fit row, full padding, vertical hairlines only. */
@media (min-width: 768px) {
  .stat-strip { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .stat-strip > div { padding: var(--space-4); border-left: 1px solid var(--hairline); border-top: 0; }
  .stat-strip > div:first-child { border-left: 0; }
  .stat-strip dd { font-size: var(--text-2xl); }
}

/* ---- Reading prose (long-form within article-section) -------------- */
.prose { color: var(--ink); }
.prose p { margin: 0 0 var(--space-3); line-height: var(--leading-body); }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--accent-ink); text-underline-offset: 3px; }

/* Utilities */
.muted { color: var(--ink-muted); }
.row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); }
.mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); }

/* "Moved" redirect stub — used by setup.html (tools relocated to data-sync). */
.page-moved { max-width: 35rem; padding-top: var(--space-16); }
.page-moved__eyebrow { font-family: var(--font-data); font-size: var(--text-xs); color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-3); }
.page-moved__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.02em; margin-bottom: var(--space-4); }
.page-moved__lead { color: var(--ink-muted); font-size: var(--text-base); line-height: 1.6; margin-bottom: var(--space-8); }

/* Keep focused elements clear of the sticky header + nav (SC 2.4.11 Focus Not Obscured) */
:focus-visible { scroll-margin-top: 6rem; }

/* ---- Profile page: field lists, edit rows, action bar ---- */
.page-actions button { margin: 0; min-height: var(--tap-min); padding: 0.5rem 0.95rem; font-size: var(--text-sm); }

.status-line { min-height: 1.25rem; margin: 0 0 1rem; font-size: 0.9rem; }
.status-line[data-kind="ok"]  { color: var(--accent); }
.status-line[data-kind="err"] { color: var(--danger); }

.lead { font-size: 1.05rem; line-height: 1.5; margin: 0; }

/* .field-*, .edit-*, .add-row, .chip-x migrated to components/field.css + chip.css. */