/* ==========================================================================
   GlassScript design system: "a clear pane over the public record."
   Identity: light frosted-glass surfaces on an airy ice-blue sky, deep petrol
   ink, soft rounded geometry. Never dark, never techy. Mono is reserved for
   numbers only (.num). Display face: Fraunces. UI face: Figtree.
   ========================================================================== */

:root {
  /* ---- color tokens ---- */
  --sky-0: #f7fbfd;         /* page base */
  --sky-1: #eef6f9;
  --sky-2: #e2eff4;
  --ink: #14333d;           /* primary text: deep petrol ink */
  --ink-soft: #33525c;
  --muted: #557380; /* 4.97:1 on the blended glass surface, AA with margin over the ice washes */
  --faint: #587681; /* 4.77:1 on the blended glass surface; placeholders stay AA */
  --accent: #0e7c86;        /* petrol teal: links, actions */
  --accent-deep: #0a5f68;
  --accent-soft: #d7edee;
  --accent-wash: rgba(14, 124, 134, 0.08);
  --amber: #b47a2a;         /* sparing warm highlight (receipt seal, marks) */
  --amber-soft: #f6ead8;
  --ok: #256a4d; /* 5.4:1 on --ok-soft; the reassuring notices stay AA */
  --ok-soft: #ddf0e6;
  --warn: #9a6a1f;

  /* ---- glass ---- */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-edge: rgba(20, 51, 61, 0.08);
  --glass-shadow: 0 12px 40px -18px rgba(20, 51, 61, 0.25), 0 2px 8px rgba(20, 51, 61, 0.04);
  --glass-blur: saturate(1.5) blur(18px);

  /* ---- shape & rhythm ---- */
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-pill: 999px;
  --pad-card: clamp(20px, 3.5vw, 32px);
  --maxw: 1080px;
  --maxw-narrow: 760px;

  /* ---- type ---- */
  --font-display: 'Fraunces Variable', Georgia, serif;
  --font-ui: 'Figtree Variable', system-ui, -apple-system, sans-serif;
  --font-num: 'Spline Sans Mono', ui-monospace, monospace;
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--sky-0);
  /* layered ice-light washes, the "sky behind the glass" */
  background-image:
    radial-gradient(1100px 520px at 12% -6%, rgba(178, 224, 231, 0.5), transparent 62%),
    radial-gradient(900px 480px at 88% 4%, rgba(214, 236, 225, 0.45), transparent 60%),
    radial-gradient(1200px 700px at 50% 110%, rgba(198, 224, 238, 0.35), transparent 65%);
  background-attachment: fixed;
  min-height: 100dvh;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 560; line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 3.2vw, 1.9rem); }
h3 { font-size: 1.18rem; }
h4 { font-family: var(--font-ui); font-weight: 700; font-size: 1rem; margin: 0 0 0.4em; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration-color: rgba(14, 124, 134, 0.35); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
small, .small { font-size: 0.87rem; color: var(--muted); }
strong { font-weight: 650; }

/* Numbers only: the single sanctioned mono use. */
.num { font-family: var(--font-num); font-weight: 500; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 28px); }
.container--narrow { max-width: var(--maxw-narrow); }

/* ---- glass surfaces ---- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  outline: 1px solid var(--glass-edge);
  outline-offset: -1px;
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
}
.glass--strong { background: var(--glass-bg-strong); }
.card { composes: none; padding: var(--pad-card); }
.glass.card, .card.glass { padding: var(--pad-card); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 1rem var(--font-ui); color: #fff;
  background: linear-gradient(180deg, #12909b, var(--accent) 55%, var(--accent-deep));
  border: 1px solid var(--accent-deep); border-radius: var(--r-pill);
  padding: 12px 24px; min-height: 44px; cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 18px -8px rgba(10, 95, 104, 0.55), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); color: #fff; }
.btn:active { transform: translateY(0); }
.btn--ghost {
  color: var(--accent-deep); background: var(--glass-bg-strong);
  border: 1px solid rgba(14, 124, 134, 0.3); box-shadow: none;
}
.btn--ghost:hover { background: #fff; color: var(--accent-deep); }
.btn--quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--accent); }
.btn--sm { padding: 8px 16px; font-size: 0.92rem; min-height: 38px; }

/* ---- inputs ---- */
.input, input[type="text"], input[type="search"], input[type="email"], select {
  font: 500 1.02rem var(--font-ui); color: var(--ink);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-edge); border-radius: var(--r-md);
  padding: 12px 16px; min-height: 46px; width: 100%;
}
.input:focus, input:focus-visible { border-color: var(--accent); }
::placeholder { color: var(--faint); }
label { font-weight: 600; font-size: 0.93rem; display: block; margin-bottom: 6px; }

/* ---- chips, pills, badges ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.84rem; font-weight: 600; color: var(--accent-deep);
  background: var(--accent-soft); border-radius: var(--r-pill); padding: 4px 12px;
  white-space: nowrap;
}
.chip--amber { color: #8a5a17; background: var(--amber-soft); }
.chip--plain { color: var(--muted); background: rgba(20, 51, 61, 0.06); }
.chip--ok { color: var(--ok); background: var(--ok-soft); }

/* ---- header / nav ---- */
.site-header { position: sticky; top: 0; z-index: 50; padding: 10px 0; }
.site-header .bar {
  display: flex; align-items: center; gap: 18px; justify-content: space-between;
  padding: 10px 18px; border-radius: var(--r-pill);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.28rem; font-weight: 620; color: var(--ink); text-decoration: none; }
.brand svg { flex: none; }
.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav a {
  font: 600 0.95rem var(--font-ui); color: var(--ink-soft); text-decoration: none;
  padding: 8px 14px; border-radius: var(--r-pill); min-height: 44px; display: inline-flex; align-items: center;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-deep); }

/* ---- footer ---- */
.site-footer { margin-top: clamp(48px, 8vw, 90px); padding: 40px 0 56px; }
.site-footer .inner { border-top: 1px solid var(--glass-edge); padding-top: 32px; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.site-footer h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
.site-footer a { display: block; color: var(--ink-soft); text-decoration: none; padding: 5px 0; font-size: 0.95rem; }
.site-footer a:hover { color: var(--accent-deep); }
.provenance { font-size: 0.85rem; color: var(--muted); background: var(--glass-bg); border: 1px solid var(--glass-edge); border-radius: var(--r-md); padding: 12px 16px; }

/* ---- search (hero + inline) ---- */
.searchbox { position: relative; }
.searchbox .field {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px;
  border-radius: var(--r-pill); background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border); outline: 1px solid var(--glass-edge); outline-offset: -1px;
  box-shadow: var(--glass-shadow);
}
.searchbox input { border: none; background: transparent; box-shadow: none; padding: 10px 4px; font-size: 1.08rem; min-height: 48px; }
.searchbox input:focus-visible { outline: none; }
.searchbox .field:focus-within { outline: 2px solid var(--accent); }
.ac-panel {
  position: absolute; inset-inline: 0; top: calc(100% + 8px); z-index: 60;
  border-radius: var(--r-lg); overflow: hidden; max-height: min(420px, 60vh); overflow-y: auto;
}
.ac-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; cursor: pointer; text-decoration: none; color: var(--ink); min-height: 44px; }
.ac-item:hover, .ac-item[aria-selected="true"] { background: var(--accent-wash); }
.ac-item .who { display: flex; flex-direction: column; }
.ac-item .who .nm { font-weight: 650; }
.ac-item .who .ctx { font-size: 0.85rem; color: var(--muted); }
.ac-empty { padding: 16px 18px; color: var(--muted); font-size: 0.95rem; }

/* ---- stat tiles ---- */
.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat { padding: 18px 20px; border-radius: var(--r-md); }
.stat .v { font-family: var(--font-num); font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 600; color: var(--ink); display: block; }
.stat .k { font-size: 0.86rem; color: var(--muted); font-weight: 600; }

/* ---- meaning module (the calm-framing block) ---- */
.meaning { border-left: 4px solid var(--accent); }
.meaning h3 { display: flex; gap: 8px; align-items: center; }
.meaning ul { margin: 0.4em 0 0; padding-left: 1.2em; }
.meaning li { margin-bottom: 0.45em; }

/* ---- receipt card (shareable) ---- */
.receipt {
  background: linear-gradient(168deg, rgba(255,255,255,0.94), rgba(240,249,251,0.9));
  border: 1px solid var(--glass-border); outline: 1px solid var(--glass-edge); outline-offset: -1px;
  border-radius: var(--r-lg); box-shadow: var(--glass-shadow);
  padding: 28px; position: relative; overflow: hidden;
}
.receipt::after {
  content: ""; position: absolute; inset: 10px; border-radius: calc(var(--r-lg) - 8px);
  border: 1.5px dashed rgba(20, 51, 61, 0.14); pointer-events: none;
}
.receipt .total { font-family: var(--font-num); font-size: clamp(2rem, 6vw, 2.9rem); font-weight: 600; letter-spacing: -0.02em; }
.receipt .seal {
  position: absolute; top: 18px; right: 18px; width: 54px; height: 54px; border-radius: 50%;
  background: var(--amber-soft); color: var(--amber); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 650; font-size: 0.7rem; text-align: center;
  transform: rotate(8deg); border: 1.5px solid rgba(180, 122, 42, 0.35);
}

/* ---- tables ---- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); }
table { border-collapse: collapse; width: 100%; font-size: 0.96rem; }
th { text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--glass-edge); }
td { padding: 12px 14px; border-bottom: 1px solid rgba(20, 51, 61, 0.06); vertical-align: top; }
td.amt, th.amt { text-align: right; }
tr:last-child td { border-bottom: none; }

/* ---- lists / hubs ---- */
.hub-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); padding: 0; margin: 0; list-style: none; }
.hub-grid a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--r-md); text-decoration: none; color: var(--ink); min-height: 44px; }
.hub-grid a:hover { background: var(--glass-bg-strong); }
.hub-grid .t { font-weight: 650; }
.hub-grid .s { font-size: 0.85rem; color: var(--muted); }

/* ---- section rhythm ---- */
.section { margin: clamp(36px, 6vw, 72px) 0; }
.eyebrow { font: 700 0.8rem var(--font-ui); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 10px; }
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 46ch; }

/* ---- charts ---- */
.chart { width: 100%; min-height: 260px; }
.chart--tall { min-height: 340px; }

/* ---- disclosure / faq ---- */
details { border-radius: var(--r-md); padding: 4px 0; }
summary { cursor: pointer; font-weight: 650; padding: 12px 4px; min-height: 44px; display: flex; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; font-family: var(--font-num); margin-right: 10px; color: var(--accent); font-size: 1.1rem; }
details[open] summary::before { content: "−"; }

/* ---- notices ---- */
.notice { padding: 14px 18px; border-radius: var(--r-md); font-size: 0.95rem; background: var(--accent-wash); color: var(--ink-soft); }
.notice--amber { background: var(--amber-soft); color: #6d4a17; }
.notice--ok { background: var(--ok-soft); color: var(--ok); }

/* ---- skeletons ---- */
.skeleton { background: linear-gradient(90deg, var(--sky-2) 25%, var(--sky-1) 50%, var(--sky-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- utility ---- */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Skip link: parked off-screen, slides in at the top-left on keyboard focus. */
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  padding: 10px 18px; background: var(--glass-bg-strong);
  border-radius: var(--r-pill); font-weight: 600;
}
.skip-link:focus { left: 8px; }

/* ---- coarse-pointer tap targets (fleet standard) ---- */
@media (pointer: coarse) {
  a, button, .btn, summary, input[type="submit"], .site-nav a, .ac-item { min-height: 44px; }
  /* Inline breadcrumb links: min-height only takes effect once they are flex boxes. */
  .crumb { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---- responsive ---- */
@media (max-width: 720px) {
  .site-header .bar { flex-wrap: wrap; gap: 8px; }
  .site-nav { gap: 0; }
  .site-nav a { padding: 8px 10px; font-size: 0.9rem; }
  body { font-size: 15.5px; }
}

/* ---- print (receipt-friendly) ---- */
@media print {
  body { background: #fff; }
  .site-header, .site-footer, .no-print { display: none !important; }
  .glass, .receipt { box-shadow: none; border-color: #ccc; }
}