/* ── RealtiFlow shared foundation ───────────────────────────────────────────
   Single source of truth for design tokens, focus states, motion preferences
   and responsive primitives. Every page links this FIRST, then its own styles.

   Two token naming schemes are exported on purpose:
     --color-*  (used by index.html)
     --primary/--ink/--muted/... (used by the app pages + auth.css)
   They alias the same values, so existing markup keeps working unchanged.
   ------------------------------------------------------------------------- */

/* §373 — the `hidden` attribute must actually hide.
   `hidden` only supplies display:none at the browser's DEFAULT-style level, so
   ANY class rule that sets display beats it. On admin.html the login screen
   carried .auth-body { display:flex }, so showAdmin() set hidden=true and the
   login box stayed on screen with the admin panel rendered below it — you had
   to scroll past a live login form to reach the dashboard.
   This is a whole CLASS of bug, not one element: every element in the project
   that combines a display-setting class with [hidden] had it. One guard here
   fixes them all and stops it recurring. !important is correct here — hiding
   is not a style preference, it is the element being absent.
   Elements that must stay laid out while invisible should use visibility or
   opacity, never [hidden]. */
[hidden] { display: none !important; }

:root {
  /* Brand */
  --color-primary: #0F766E;          /* trust teal */
  --color-primary-dark: #0B5C56;
  --color-secondary: #14B8A6;
  --color-accent: #0369A1;           /* professional blue */

  /* Warm CTA accent. The palette is teal-on-teal end to end, so a primary
     action painted in teal reads as just more page. This is the ONLY warm
     colour in the system and it is reserved for primary CTAs — spending it
     anywhere else destroys the signal it exists to carry.
     Darkened from the stock #EA580C so white label text clears 4.5:1. */
  --color-cta: #C2620E;
  --color-cta-hover: #A85009;
  --color-on-cta: #FFFFFF;

  /* Surfaces */
  --color-background: #F0FDFA;
  --color-card: #FFFFFF;
  --color-muted: #E8F0F3;

  /* Text — both meet 4.5:1 on white and on --color-background */
  --color-foreground: #134E4A;
  --color-muted-foreground: #475569;
  --color-on-primary: #FFFFFF;

  /* Lines + status */
  --color-border: #99F6E4;
  --color-divider: #E2E8F0;
  --color-destructive: #DC2626;
  --color-success: #047857;

  /* Aliases for the app pages / auth.css */
  --primary: var(--color-primary);
  --primary-dark: var(--color-primary-dark);
  --secondary: var(--color-secondary);
  --accent: var(--color-accent);
  --bg: #FFFFFF;
  --bg-soft: var(--color-background);
  --ink: var(--color-foreground);
  --muted: var(--color-muted-foreground);
  --card: var(--color-card);
  --border: var(--color-border);
  --divider: var(--color-divider);

  /* Typography — marketing uses display serif, app uses grotesk (see below) */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  /* Shape + depth */
  --radius: 18px;
  --radius-lg: 24px;
  --shadow-lg: 0 24px 70px -20px rgba(15, 118, 110, .25);
  --shadow-sm: 0 4px 16px -8px rgba(15, 118, 110, .10);

  /* Layout */
  --maxw: 1140px;

  /* Height of any fixed/sticky header, used for scroll-padding so a focused
     element is never hidden behind it (WCAG 2.2 — Focus Not Obscured). */
  --header-h: 72px;

  /* Motion — set to 0s by the reduced-motion block at the bottom */
  --motion-fast: .15s;
  --motion-base: .2s;
  --motion-slow: .25s;

  /* §399 — native UA-painted controls (date-picker popup, <select>, scrollbars)
     follow OUR theme, not the OS. Without this the browser falls back to
     prefers-color-scheme, so an OS-dark machine shows a dark calendar popup on
     a light page. The dark override lives on the html[data-theme="dark"] rule
     below, so controls flip WITH the toggle. */
  color-scheme: light;
}

/* ── Dark theme ──────────────────────────────────────────────────────────────
   Applied via [data-theme="dark"] on <html>. Reuses the same token names so
   every page that links base.css gets dark mode for free. */
html[data-theme="dark"] {
  /* §399 — dark UA controls to match (see the :root rule above) */
  color-scheme: dark;
  --color-background: #0B1220;
  --color-card: #111A2E;
  --color-muted: #1E293B;
  --color-foreground: #E2E8F0;
  --color-muted-foreground: #94A3B8;
  --color-border: #1E3A5F;
  --color-divider: #1E293B;
  --color-primary: #14B8A6;
  --color-primary-dark: #0F766E;
  --color-secondary: #2DD4BF;
  --color-accent: #38BDF8;
  --color-on-primary: #06201D;
  --color-destructive: #F87171;
  --color-success: #34D399;
  /* Lifted for dark surfaces — #C2620E is too dark to read against #0B1220. */
  --color-cta: #E07B1F;
  --color-cta-hover: #F0A14B;
  --color-on-cta: #1A0E02;
  --bg: #111A2E;
  --bg-soft: #0B1220;
  --ink: #E2E8F0;
  --muted: #94A3B8;
  --card: #111A2E;
  --border: #1E3A5F;
  --divider: #1E293B;
  --shadow-lg: 0 24px 70px -20px rgba(0,0,0,.6);
  --shadow-sm: 0 4px 16px -8px rgba(0,0,0,.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Ignored-groups list in Settings (KEY-DECISIONS §157). */
.ignored-list { display: flex; flex-direction: column; gap: 8px; max-height:340px; overflow:auto; padding-right:4px; }
.ignored-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 8px; background: var(--color-muted);
}
.ignored-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

html {
  /* Keeps a tab-focused target clear of the fixed nav / sticky topbar. */
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--color-foreground);
  background: var(--color-background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Nothing may push the page sideways on a phone.
     §339 — overflow-x:hidden on body makes body a scroll container, which
     silently disables position:sticky inside it. overflow-x:clip clips
     identically WITHOUT becoming a scroll container. */
  overflow-x: clip;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
a { text-decoration: none; color: inherit; }
img, svg { max-width: 100%; }

/* ── Brand mark ────────────────────────────────────────────────────────────
   One definition for all seven pages. Before this, index.html carried an SVG
   and the six app pages carried a 🏠 emoji — which renders as a different
   house per operating system and is announced as "house building" by screen
   readers. The mark is a roofline over three data rows: property + database.

   Markup:  <span class="logo-mark">…svg…</span>
   Sizes:   add .logo-mark--sm (28px) or .logo-mark--lg (44px).          */
.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}
.logo-mark svg { width: 22px; height: 22px; display: block; }
.logo-mark--sm { width: 28px; height: 28px; border-radius: 8px; }
.logo-mark--sm svg { width: 17px; height: 17px; }
.logo-mark--lg { width: 44px; height: 44px; border-radius: 12px; }
.logo-mark--lg svg { width: 27px; height: 27px; }

/* Wordmark lockup — mark + name, used in navs, auth headers and footers. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-primary);
}

/* ── Focus: one visible ring for every operable control ───────────────────
   :focus-visible only paints for keyboard/AT users, so mouse clicks stay
   clean. Never remove this without an equivalent replacement.            */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Screen-reader-only text (visible to AT, invisible on screen). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first tab stop on every page. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 999;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  transition: top var(--motion-base) ease;
}
.skip-link:focus { top: 0; }

/* ── Responsive primitives ────────────────────────────────────────────── */

/* Wrap any wide table/diagram in this so IT scrolls, not the page.
   NOTE (§339): overflow-x:auto makes this a scroll container in BOTH axes —
   visible cannot coexist with auto (CSS coerces it), so overflow-y here is
   always effectively auto. That KILLS position:sticky for any sticky header
   inside. The portal therefore overrides this class locally (portal.html)
   with overflow-x:clip, which clips without being a scroll container. Pages
   that need genuine horizontal scrolling (admin) keep using this as-is. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  h1 { font-size: clamp(26px, 7vw, 34px); }
  h2 { font-size: clamp(22px, 6vw, 28px); }

  /* Touch targets: 44x44 minimum (WCAG 2.5.5 / platform guidance). */
  button,
  .btn,
  .btn-primary,
  .btn-google,
  input[type="submit"] {
    min-height: 44px;
  }
}

/* ── Motion preference ────────────────────────────────────────────────────
   Zeroing the duration tokens neutralises every transition built on them,
   and the catch-all below covers hand-written durations too.            */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0s;
    --motion-base: 0s;
    --motion-slow: 0s;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Neutralise decorative lift/scale so nothing shifts under the pointer. */
  *:hover { transform: none !important; }
}