/* Rione: brand tokens from design/wordpress/rione-tokens.json (golgari-cloud),
   light mode, portal density. Fonts self-hosted (SIL OFL 1.1, fonts/OFL-*.txt). */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/figtree-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/figtree-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/marcellus-latin-400.woff2") format("woff2");
}
/* metric-matched fallbacks: no layout shift while the fonts load */
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial");
  size-adjust: 100.4%;
  ascent-override: 94.6%;
  descent-override: 24.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Marcellus Fallback";
  src: local("Georgia");
  size-adjust: 103.2%;
  ascent-override: 94.4%;
  descent-override: 27.1%;
  line-gap-override: 0%;
}

:root {
  /* common */
  --gm-font: "Figtree", "Figtree Fallback", system-ui, sans-serif;
  --gm-font-display: "Marcellus", "Marcellus Fallback", Georgia, serif;
  --gm-text-xs: 12px;
  --gm-text-sm: 14px;
  --gm-text-md: 16px;
  --gm-text-lg: 18px;
  --gm-text-xl: 22px;
  --gm-text-2xl: 28px;
  --gm-text-3xl: 36px;
  --gm-text-display: 44px;
  --gm-lh-tight: 1.15;
  --gm-lh-base: 1.5;
  --gm-lh-relaxed: 1.6;
  --gm-radius: 6px;
  --gm-radius-sm: 4px;
  --gm-radius-lg: 10px;
  --gm-radius-pill: 999px;
  --gm-focus-width: 2px;
  --gm-focus-offset: 2px;
  --gm-space-1: 4px;
  --gm-space-2: 8px;
  --gm-space-3: 12px;
  --gm-space-4: 16px;
  --gm-space-5: 24px;
  --gm-space-6: 32px;
  --gm-space-7: 48px;
  --gm-space-8: 64px;
  /* density: portal */
  --gm-text-body: 16px;
  --gm-control-h: 48px;
  --gm-size-target-min: 44px;
  --gm-pad: 24px;
  /* mode: light */
  --gm-bg: #F4EDE1;
  --gm-surface: #FBF7F0;
  --gm-surface-2: #EDE4D6;
  --gm-border: #DDD2C1;
  --gm-border-strong: #7A6E63;
  --gm-ink: #2A1D16;
  --gm-ink-2: #46362C;
  --gm-muted: #5E554D;
  --gm-success: #2F6B33;
  --gm-warning: #7E4A00;
  --gm-warning-bg: #F3E3C6;
  --gm-danger: #A8172E;
  --gm-danger-bg: #F6DEDF;
  --gm-info: #2F5D78;
  --gm-info-bg: #DCE6EA;
  --gm-neutral: #46362C;
  --gm-neutral-bg: #E5DDD0;
  --gm-brand: #9A3412;
  --gm-brand-text: #9A3412;
  --gm-on-brand: #FFFFFF;
  --gm-brand-soft: #F3DDD1;
  --gm-brand-hover: #7E2A0E;
  --gm-side-bg: #FBF7F0;
  --gm-side-ink: #46362C;
  --gm-side-muted: #5E554D;
  --gm-side-active: #F3DDD1;
  --gm-side-hover: #EDE4D6;
  --gm-sidebar-accent: #9A3412;
  --gm-focus: #9A3412;
  --gm-ink-display: #2A1D16;
  --gm-shadow: 0 1px 2px rgba(42,29,22,.08);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--gm-bg);
  color: var(--gm-ink);
  font-family: var(--gm-font);
  font-size: var(--gm-text-body);
  line-height: var(--gm-lh-base);
}
h1, h2 { font-family: var(--gm-font-display); font-weight: 400; color: var(--gm-ink-display); line-height: var(--gm-lh-tight); margin: 0; }
h1 { font-size: var(--gm-text-display); }
a { color: var(--gm-brand-text); text-underline-offset: 3px; }
a:hover { color: var(--gm-brand-hover); }
:focus-visible { outline: var(--gm-focus-width) solid var(--gm-focus); outline-offset: var(--gm-focus-offset); }
p { margin: 0 0 var(--gm-space-4); }

/* shell: sidebar + content (mockup 02) */
.shell { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.side {
  display: flex; flex-direction: column; gap: var(--gm-space-5);
  background: var(--gm-side-bg); color: var(--gm-side-ink);
  border-right: 1px solid var(--gm-border);
  padding: var(--gm-space-5) var(--gm-space-4);
}
.brand { display: inline-flex; align-self: flex-start; }
.brand img { display: block; height: 40px; width: auto; }
.mode-label { display: block; font-size: var(--gm-text-sm); color: var(--gm-side-muted); margin-bottom: var(--gm-space-2); }
.switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gm-space-1);
  padding: var(--gm-space-1); border: 1px solid var(--gm-border-strong);
  border-radius: var(--gm-radius-pill); background: var(--gm-surface);
}
.switch-opt {
  display: flex; align-items: center; justify-content: center; gap: var(--gm-space-1);
  min-height: var(--gm-size-target-min); border-radius: var(--gm-radius-pill);
  font-weight: 700; text-decoration: none; color: var(--gm-ink-2);
}
.switch-opt.is-on { background: var(--gm-brand); color: var(--gm-on-brand); }
.switch-opt.is-on:hover { background: var(--gm-brand-hover); color: var(--gm-on-brand); }
.switch-opt.is-off { font-weight: 400; color: var(--gm-muted); cursor: not-allowed; flex-direction: column; gap: 0; line-height: 1.1; }
.soon { font-size: var(--gm-text-xs); }
.nav { display: flex; flex-direction: column; gap: var(--gm-space-1); }
.nav-item {
  display: flex; align-items: center; min-height: var(--gm-size-target-min);
  padding: 0 var(--gm-space-4); border-radius: var(--gm-radius);
  color: var(--gm-side-ink); text-decoration: none;
}
.nav-item:hover { background: var(--gm-side-hover); color: var(--gm-side-ink); }
.nav-item.is-active { background: var(--gm-side-active); font-weight: 700; box-shadow: inset 3px 0 0 var(--gm-sidebar-accent); }
.who { margin-top: auto; padding-top: var(--gm-space-4); border-top: 1px solid var(--gm-border); display: flex; flex-direction: column; font-size: var(--gm-text-sm); }
.who strong { color: var(--gm-ink); }
.who span { color: var(--gm-side-muted); }
.who form { margin-top: var(--gm-space-3); }
button.link {
  font: inherit; font-weight: 700; color: var(--gm-brand-text); background: none; border: 0;
  padding: var(--gm-space-2) var(--gm-space-3); min-height: var(--gm-size-target-min);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
button.link:hover { color: var(--gm-brand-hover); }

.main { padding: var(--gm-space-7) var(--gm-space-7) var(--gm-space-6); max-width: 1180px; width: 100%; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gm-space-5); margin-bottom: var(--gm-space-6); }
.lead { color: var(--gm-ink-2); font-size: var(--gm-text-lg); margin: var(--gm-space-3) 0 0; }

.card { background: var(--gm-surface); border: 1px solid var(--gm-border); border-radius: var(--gm-radius-lg); padding: var(--gm-space-6); }
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gm-space-3); }
.empty-title { font-size: var(--gm-text-xl); }
.empty p { margin: 0; color: var(--gm-ink-2); max-width: 60ch; }
/* status "empty": dashed square + words (never colour alone) */
.state-empty { display: block; width: 28px; height: 28px; border: 2px dashed var(--gm-neutral); border-radius: var(--gm-radius-sm); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--gm-control-h); padding: 0 var(--gm-space-5);
  background: var(--gm-brand); color: var(--gm-on-brand);
  border-radius: var(--gm-radius); font-weight: 700; text-decoration: none;
  margin-top: var(--gm-space-2);
}
.btn:hover { background: var(--gm-brand-hover); color: var(--gm-on-brand); }

.note { display: flex; gap: var(--gm-space-3); align-items: baseline; margin-top: var(--gm-space-5); color: var(--gm-ink-2); }
.check { flex: none; width: 14px; height: 8px; border-left: 2px solid var(--gm-success); border-bottom: 2px solid var(--gm-success); transform: translateY(-3px) rotate(-45deg); }

/* access page (no session) */
.access { min-height: 100vh; display: grid; place-items: center; padding: var(--gm-space-5); }
.access-card { max-width: 560px; width: 100%; }
.access-card h1 { font-size: var(--gm-text-2xl); margin: var(--gm-space-5) 0 var(--gm-space-4); }
.access-logo { display: block; height: 60px; width: auto; }
.small { font-size: var(--gm-text-sm); }
.alert { padding: var(--gm-space-3) var(--gm-space-4); border-radius: var(--gm-radius); }
.alert-danger { background: var(--gm-danger-bg); color: var(--gm-danger); }
.alert-info { background: var(--gm-info-bg); color: var(--gm-info); }
.alert-warning { background: var(--gm-warning-bg); color: var(--gm-warning); }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { border-right: 0; border-bottom: 1px solid var(--gm-border); gap: var(--gm-space-4); }
  .who { margin-top: 0; }
  .main { padding: var(--gm-space-5) var(--gm-space-4); }
  h1 { font-size: var(--gm-text-3xl); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}