/* ============================================================
   NEW-TRITION — Base styles, reset, typography, scrollbars
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  color: var(--ink);
  background: #FBFDF6;  /* whisper of green — white frames pop against it */
  line-height: 1.45;
  min-height: 100dvh;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; font-weight: 700; color: var(--ink); }

a { color: var(--gold-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

img, svg { display: block; }

/* ---- Slim scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: #d8c66e transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #E3D48A; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--gold-mid); }

/* ---- Tabular numbers everywhere data is dense ---- */
.num, td.num, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---- Utilities ---- */
.hidden { display: none !important; }
.muted { color: var(--ink-faint); }
.small { font-size: var(--fs-sm); }
.tiny  { font-size: var(--fs-xs); }
.gold  { color: var(--gold-deep); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.spacer { flex: 1 1 auto; }

.flex { display: flex; align-items: center; gap: var(--sp-3); }
.flex-wrap { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.col { display: flex; flex-direction: column; }
.center { display: flex; align-items: center; justify-content: center; }

.text-ok    { color: var(--ok); }
.text-warn  { color: var(--warn); }
.text-bad   { color: var(--danger); }

:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 1px; border-radius: 4px; }

::selection { background: var(--gold-soft); color: var(--ink); }

/* ---- Page scaffold ---- */
.app-header { position: sticky; top: 0; z-index: var(--z-header); }

.page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5) calc(var(--sp-8) + var(--tabbar-h));
}
@media (min-width: 961px) {
  .page { padding: var(--sp-6) var(--sp-6) var(--sp-8); }
}

.page-title { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.page-title h1 { font-size: var(--fs-h1); color: var(--green-deep); letter-spacing: 0.2px; }
.page-title .sub { color: var(--ink-faint); font-size: var(--fs-sm); }

/* Section frame — the signature gold rectangle */
.frame {
  background: var(--bg);
  border: var(--frame-w) solid var(--frame-color);
  border-radius: var(--frame-radius);
  box-shadow: var(--frame-shadow);
}
.frame + .frame { margin-top: var(--sp-5); }

.frame-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--bg-sunken);
  flex-wrap: wrap;
}
.frame-head h2 { font-size: var(--fs-h2); color: var(--green-deep); }
.frame-head .spacer { flex: 1 1 auto; }
.frame-body { padding: var(--sp-4); }
.frame-body.flush { padding: 0; }

/* Skip link for a11y */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold); color: var(--ink);
  padding: 8px 14px; z-index: 999; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Mobile bottom tab bar is shown by JS based on auth state */
@media (max-width: 960px) {
  body.has-tabbar .page { padding-bottom: calc(var(--tabbar-h) + var(--sp-7)); }
}