/* Georgia Coastal Escapes — base layer, ported from design/gce.css (A-P01-02). Loaded first on every
   page; site.css / portal.css / admin.css only add area layout. Fonts are self-hosted (OFL, see
   /fonts/OFL-*.txt) — CSP style-src/font-src is 'self', so no Google Fonts. */
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/marcellus-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/public-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/public-sans-latin-600-normal.woff2") format("woff2"); }
:root {
  /* Roles */
  --color-bg: #fcf7ee;            /* logo cream */
  --color-surface: #fffdf8;
  --color-text: #0b241b;          /* live-oak ink */
  --color-muted: #5a554b;         /* secondary text, 7:1 on bg */
  --color-accent: #1c4433;        /* live-oak green — primary actions, links, focus */
  --color-gold: #a4783a;          /* marsh gold — marks, kickers, rules (not small text) */
  --color-gold-ink: #85601f;      /* gold for small text on cream (≥4.5:1) */
  --color-divider: color-mix(in srgb, #0b241b 14%, transparent);
  --color-alert: #a6452f;         /* terracotta — overdue, emergency, destructive */
  --color-alert-tint: #f6e1da;
  --color-alert-ink: #6e2717;

  /* Live-oak green ramp */
  --green-100: #eef4f0; --green-200: #d6e5dc; --green-300: #b2cdbd; --green-400: #7fa892;
  --green-500: #4f7f67; --green-600: #2f5f49; --green-700: #1c4433; --green-800: #0f3024;
  --green-900: #062219;
  /* Marsh gold ramp */
  --gold-100: #fbf3e3; --gold-200: #f3e0b8; --gold-300: #e7c787; --gold-400: #dba44f;
  --gold-500: #c08c3f; --gold-600: #a4783a; --gold-700: #85601f; --gold-800: #5f4416;
  --gold-900: #3d2c0e;
  /* Warm sand neutrals */
  --sand-100: #fcf7ee; --sand-200: #f3ede1; --sand-300: #e4ddcf; --sand-400: #c9c2b3;
  --sand-500: #a29b8c; --sand-600: #7b7568; --sand-700: #5a554b; --sand-800: #3b3831;
  --sand-900: #24221d;

  /* Presence ground — footer band, admin sidebar. Ink on it: --sand-200 */
  --color-section: #0f3024;
  --color-section-ink: #f3ede1;

  --font-display: "Marcellus", Georgia, serif;     /* h1, h2, wordmark only */
  --font-body: "Public Sans", system-ui, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-full: 999px;

  --shadow-sm: 0 0 0 1px #e4ddcf;
  --shadow-md: 0 0 0 1px #e4ddcf, 0 6px 18px rgba(6, 34, 25, 0.07);
  --shadow-lg: 0 0 0 1px #c9c2b3, 0 16px 40px rgba(6, 34, 25, 0.14);

  --rule: linear-gradient(to right, transparent, var(--color-divider) 48px,
          var(--color-divider) calc(100% - 48px), transparent);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; }
h1, h2, h3, h4, h5, h6 { line-height: 1.15; margin: 0 0 var(--space-2); font-weight: 500;
  letter-spacing: -0.01em; }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; }
h1 { font-size: 42px; } h2 { font-size: 30px; } h3 { font-size: 22px; } h4 { font-size: 18px; }
h5 { font-size: 15px; }
h6 { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold-ink); }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--green-600); }
img { display: block; max-width: 100%; }
.text-muted { color: var(--color-muted); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: var(--gold-200); }
.rule { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--rule); }

/* Kicker — the logo's spaced "ESCAPES" caps */
.kicker { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  color: var(--color-gold-ink); }

/* Buttons — one solid primary per view; everything else outlined or ghost */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; font: inherit; font-size: 14px; font-weight: 500;
  line-height: 1.2; color: var(--color-accent); background: transparent;
  border: 1px solid transparent; padding: 8px 14px; border-radius: var(--radius-md); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--sand-100); }
.btn-primary:hover { background: var(--green-600); color: var(--sand-100); }
.btn-primary:active { background: var(--green-800); }
.btn-secondary { border-color: var(--green-300); color: var(--color-accent); }
.btn-secondary:hover { background: var(--green-100); color: var(--color-accent); }
.btn-secondary:active { background: var(--green-200); }
.btn-ghost { padding-inline: var(--space-2); }
.btn-ghost:hover { background: var(--green-100); color: var(--color-accent); }
.btn-danger { color: var(--color-alert); border-color: var(--color-alert); }
.btn-danger:hover { background: var(--color-alert-tint); color: var(--color-alert-ink); }
.btn-lg { padding: 12px 20px; font-size: 15px; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-block { width: 100%; }

/* Forms */
.field > label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.hint { font-size: 12px; color: var(--color-muted); margin-top: 6px; }
.input { width: 100%; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 15px;
  color: var(--color-text); background: var(--color-surface); caret-color: var(--color-accent);
  border: 1px solid var(--sand-400); border-radius: var(--radius-md); }
.input:hover { border-color: var(--sand-600); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input:disabled { background: var(--sand-200); color: var(--color-muted); }
.input[aria-invalid="true"] { border-color: var(--color-alert); }
textarea.input { min-height: 110px; resize: vertical; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--sand-400);
  border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.seg-opt { position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 14px; cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--sand-400); }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-opt:has(input:checked) { background: var(--green-100); color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: var(--sand-200); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.check { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.check input { accent-color: var(--color-accent); width: 16px; height: 16px; }

/* Shared form bits (auth cards, account, admin forms) */
.field-hint { font-size: 12px; margin-top: 5px; }
.form-alert { font-size: 13px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--color-alert-tint); color: var(--color-alert-ink); margin: 0; }
.btn-start { align-self: start; }
.code-input { font-size: 22px; letter-spacing: 0.3em; text-align: center; min-height: 52px; }

/* Account page (Tenant Portal prototype "account"; also used in the admin shell) */
.page-head { display: flex; flex-direction: column; gap: 4px; }
.page-head h1, .account h1 { margin: 0; }
.account { max-width: 520px; display: flex; flex-direction: column; gap: 24px; }
.account form.card { padding: 20px; gap: 14px; }
.account-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 14px; margin: 0; }
.account-facts dt { color: var(--color-muted); }
.account-facts dd { margin: 0; }

/* Cards */
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);
  border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.card-title { font-size: 16px; font-weight: 500; line-height: 1.25; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-muted); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* Chips (status tags) — see DESIGN_LANGUAGE.md for the status → chip map */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500;
  padding: 2px 9px; border-radius: var(--radius-full); white-space: nowrap; }
.chip-green   { background: var(--green-200); color: var(--green-900); }
.chip-gold    { background: var(--gold-200);  color: var(--gold-900); }
.chip-sand    { background: var(--sand-200);  color: var(--sand-800); box-shadow: inset 0 0 0 1px var(--sand-300); }
.chip-outline { box-shadow: inset 0 0 0 1px var(--green-500); color: var(--green-800); }
.chip-alert   { background: var(--color-alert-tint); color: var(--color-alert-ink); }
.chip-alert-outline { box-shadow: inset 0 0 0 1px var(--color-alert); color: var(--color-alert-ink); }

/* Notices — flash messages, info, emergency */
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border-radius: var(--radius-md); font-size: 14px; background: var(--green-100); color: var(--green-900); }
.notice-gold { background: var(--gold-100); color: var(--gold-900); }
.notice > .icon { font-size: 18px; }
.notice-alert { background: var(--color-alert-tint); color: var(--color-alert-ink); }

/* Tables — row rules fade at the ends */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-muted); padding: 8px 10px; }
.table td { padding: 10px; }
.table thead tr { background: var(--rule) no-repeat bottom / 100% 1px; }
.table tbody tr { background: linear-gradient(to right, transparent,
  color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
  color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent)
  no-repeat bottom / 100% 1px; }
.table tbody tr:hover { background-color: var(--sand-200); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Nav */
.nav { display: flex; align-items: center; gap: var(--space-4); }
.nav-brand { margin-right: auto; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--color-accent); }

/* Dialog */
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--green-900) 40%, transparent); }
.dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 20px;
  border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); }

/* Inline Phosphor SVGs from icon() — sized by the surrounding font size. */
.icon { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.125em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

/* Wordmark — emblem, "Georgia Coastal" in Marcellus, spaced caps underneath. */
.brand { display: flex; align-items: center; gap: 12px; color: var(--color-text); text-decoration: none; }
.brand img { width: 44px; height: 44px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-display); font-size: 19px; }
.brand-sub { font-size: 10px; letter-spacing: 0.42em; color: var(--color-gold-ink); margin-top: 4px; }

/* Error pages (404 / 500) */
.error-page { max-width: 1120px; margin: 0 auto; padding: 80px 24px 120px; display: flex;
  flex-direction: column; gap: 10px; align-items: flex-start; }
.error-page h1, .error-page p { margin: 0; }
.error-page .btn { margin-top: 8px; }