/* ===========================================================
   San Yama Ryu Bujutsu — modern rebuild
   Theme: red / black / white
   =========================================================== */

:root {
  --red: #d11d2b;
  --red-dark: #9e131e;
  --red-glow: rgba(209, 29, 43, 0.45);
  --red-rgb: 209, 29, 43; /* the accent as r, g, b, for its tints; a console-made dojo's accent sets it (lib/brand.js accentCss) */
  --black: #0c0c0d;
  --ink: #141417;
  --ink-soft: #1c1c20;
  --smoke: #2a2a30;
  --white: #ffffff;
  --paper: #f6f5f3;
  --muted: #b8b8c0;
  --muted-dark: #6d6d76;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-jp: "Shippori Mincho", "Noto Serif JP", serif;

  --maxw: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 14px;
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--white);
  background: var(--black);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
  text-transform: uppercase;
}

p { margin: 0 0 1.15em; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.accent { color: var(--red); }
.jp { font-family: var(--font-jp); }

/* ---------- Eyebrow / section heads ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--red);
}

.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section--alt { background: var(--ink); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--paper .eyebrow { color: var(--red-dark); }

.section-title {
  font-size: clamp(2rem, 5.5vw, 3.4rem);
}
.lead {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--muted);
  max-width: 56ch;
}
.section--paper .lead { color: var(--muted-dark); }

/* ===========================================================
   NAVIGATION
   =========================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--gutter);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.nav.is-scrolled {
  background: rgba(10, 10, 11, 0.82);
  backdrop-filter: blur(14px);
  padding-block: 0.65rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 1.05rem;
}
.brand__mark {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}
/* Any brand logo image keeps its aspect ratio regardless of the tenant's
   logo shape (square mon, portrait/oval emblem, …) — never stretch. */
img[data-brand-logo] { object-fit: contain; }
/* The login/auth card logo: size by height so portrait/oval logos aren't tiny. */
.auth-card > img[data-brand-logo] { width: auto; height: 64px; }
.brand small {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.34em;
  color: var(--muted);
  font-weight: 400;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding: 0.3rem 0;
  transition: color 0.25s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--red);
  transition: width 0.3s var(--ease);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: #fff; }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { width: 100%; }

.nav-cta {
  background: var(--red);
  color: #fff !important;
  padding: 0.55rem 1.1rem !important;
  border-radius: 999px;
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--red-dark); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px; height: 44px;
  cursor: pointer;
  position: relative;
  z-index: 110;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 10px;
  width: 24px; height: 2px;
  background: #fff;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav.is-open .nav-toggle span { background: transparent; }
.nav.is-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

/* ===========================================================
   HERO
   =========================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 7rem 0 4rem;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(var(--red-rgb), 0.22), transparent 55%),
    radial-gradient(90% 70% at 10% 90%, rgba(var(--red-rgb), 0.10), transparent 60%),
    linear-gradient(160deg, #16161a 0%, #0a0a0b 60%);
}
/* giant kanji watermark */
.hero__kanji {
  position: absolute;
  right: clamp(-2rem, 2vw, 4rem);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-jp);
  font-size: clamp(18rem, 46vw, 42rem);
  line-height: 0.8;
  color: rgba(255, 255, 255, 0.035);
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
.hero__inner { max-width: 760px; }
.hero__mon {
  width: clamp(96px, 12vw, 150px);
  height: auto;
  margin-bottom: 1.4rem;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}
.hero h1 {
  font-size: clamp(3rem, 11vw, 7.5rem);
  letter-spacing: 0.01em;
  margin-bottom: 0.2em;
}
.hero h1 span { display: block; color: var(--red); }
.hero__sub {
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  color: var(--muted);
  max-width: 50ch;
  margin-bottom: 2rem;
}
.hero__tag {
  font-family: var(--font-display);
  letter-spacing: 0.3em;
  font-size: 0.85rem;
  color: #fff;
  text-transform: uppercase;
  border-left: 3px solid var(--red);
  padding-left: 1rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.95rem 1.8rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
    border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); box-shadow: 0 14px 30px -12px var(--red-glow); }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,0.3); color: #fff; }
.btn--ghost:hover { border-color: var(--red); color: var(--red); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }

/* ===========================================================
   PAGE HEADER (interior pages)
   =========================================================== */
.page-head {
  position: relative;
  padding: clamp(8rem, 16vw, 12rem) 0 clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.page-head__bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(100% 80% at 85% 0%, rgba(var(--red-rgb), 0.20), transparent 55%),
    linear-gradient(160deg, #16161a, #0a0a0b);
}
.page-head__kanji {
  position: absolute;
  right: -1rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-jp);
  font-size: clamp(12rem, 32vw, 26rem);
  color: rgba(255,255,255,0.04);
  z-index: -1; pointer-events: none; user-select: none;
  line-height: 0.8;
}
.page-head h1 {
  font-size: clamp(2.6rem, 8vw, 5.5rem);
}
.page-head p { color: var(--muted); max-width: 58ch; font-size: 1.1rem; }
.crumb {
  font-family: var(--font-display);
  letter-spacing: 0.28em;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.2rem;
}

/* ===========================================================
   PROSE (article body)
   =========================================================== */
.prose { max-width: 70ch; }
.prose p { font-size: 1.08rem; color: #d9d9de; }
.section--paper .prose p { color: #34343a; }
.prose h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-top: 2.2em; }
.prose .drop::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em;
  float: left;
  line-height: 0.8;
  padding: 0.05em 0.12em 0 0;
  color: var(--red);
}
.prose blockquote {
  margin: 2rem 0;
  padding: 1.4rem 1.8rem;
  border-left: 4px solid var(--red);
  background: rgba(255,255,255,0.03);
  font-family: var(--font-jp);
  font-size: 1.35rem;
  font-style: italic;
  color: #fff;
}
.section--paper .prose blockquote { background: rgba(0,0,0,0.04); color: var(--ink); }

/* ===========================================================
   FEATURE GRID / CARDS
   =========================================================== */
.grid {
  display: grid;
  gap: 1.5rem;
}
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  background: linear-gradient(160deg, var(--ink-soft), var(--ink));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--red-rgb), 0.4);
  box-shadow: var(--shadow);
}
.card:hover::before { transform: scaleX(1); }
.card__num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--red);
  margin-bottom: 0.8rem;
}
.card h3 { font-size: 1.4rem; }
.card p { color: var(--muted); margin: 0; font-size: 0.98rem; }

/* split: text + panel */
.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.panel {
  background: linear-gradient(150deg, var(--red), var(--red-dark));
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.panel .jp-bg {
  position: absolute;
  right: -1rem; bottom: -3rem;
  font-family: var(--font-jp);
  font-size: 14rem;
  color: rgba(255,255,255,0.12);
  line-height: 0.8;
}
.panel h3 { font-size: 1.8rem; }
.panel ul { margin: 0; padding-left: 1.1rem; }
.panel li { margin-bottom: 0.6rem; }

/* ===========================================================
   YUDANSHA (instructor / rank cards)
   =========================================================== */
.sensei {
  background: linear-gradient(160deg, var(--ink-soft), var(--ink));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 2rem;
}
.sensei__head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.8rem;
  background: linear-gradient(90deg, rgba(var(--red-rgb), 0.18), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sensei__avatar {
  flex: none;
  width: 64px; height: 64px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--red);
  font-family: var(--font-jp);
  font-size: 1.8rem;
  color: #fff;
}
.sensei__name { font-size: 1.7rem; margin: 0; }
.sensei__title {
  font-family: var(--font-display);
  letter-spacing: 0.22em;
  font-size: 0.8rem;
  color: var(--red);
  text-transform: uppercase;
}
.sensei__primary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1rem;
  padding: 1.4rem 1.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sensei__primary .style { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; }
.badge {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.badge--ghost { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: var(--muted); }

.ranks {
  list-style: none;
  margin: 0;
  padding: 0.6rem 0;
}
.ranks li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.7rem 1.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.95rem;
}
.ranks li:last-child { border-bottom: 0; }
.ranks .art { color: #fff; }
.ranks .rank { color: var(--red); font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; }
.ranks .date { color: var(--muted-dark); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
/* Rank and date hug the right edge, so they line up row to row at every width (on a
   phone they stack in one column, which is only as wide as each row needs). */
.ranks .rank, .ranks .date { justify-self: end; text-align: right; }
.ranks__label {
  font-family: var(--font-display);
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--muted-dark);
  padding: 1rem 1.8rem 0.4rem;
}
.sensei__note {
  padding: 1.2rem 1.8rem;
  color: var(--muted);
  font-style: italic;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ===========================================================
   CTA STRIP
   =========================================================== */
.cta {
  background: linear-gradient(120deg, var(--red), var(--red-dark));
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta .jp-bg {
  position: absolute; inset: 0;
  font-family: var(--font-jp);
  font-size: 30rem;
  line-height: 1;
  color: rgba(0,0,0,0.08);
  display: grid; place-items: center;
  pointer-events: none;
}
.cta h2 { font-size: clamp(2rem, 6vw, 3.6rem); position: relative; }
.cta p { color: rgba(255,255,255,0.85); max-width: 50ch; margin-inline: auto; position: relative; }
.cta .btn--primary { background: #fff; color: var(--red); }
.cta .btn--primary:hover { background: var(--black); color: #fff; }

/* ===========================================================
   FOOTER
   =========================================================== */
.footer {
  background: #070708;
  padding: clamp(3rem,6vw,5rem) 0 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
}
.footer h4 {
  font-size: 0.85rem; letter-spacing: 0.2em; color: var(--muted-dark); margin-bottom: 1.2rem;
}
.footer a { color: var(--muted); transition: color 0.25s var(--ease); display: inline-block; padding: 0.2rem 0; }
.footer a:hover { color: var(--red); }
.footer .brand { margin-bottom: 1rem; }
.footer__addr { color: var(--muted); font-size: 0.95rem; }
.footer__addr strong { color: #fff; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer__bar {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--muted-dark);
}

/* ===========================================================
   AUTH / ACCOUNT / ADMIN
   =========================================================== */
.auth-wrap {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 7.5rem var(--gutter) 3rem;
  /* echo the public hero: dark with a faint scarlet glow up top */
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(var(--red-rgb), 0.18), transparent 62%),
    var(--black);
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(160deg, var(--ink-soft), var(--ink));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: var(--shadow);
}
.auth-card.is-wide { max-width: 880px; }
.auth-card h1 { font-size: clamp(1.7rem, 4vw, 2.1rem); margin-bottom: 0.3rem; }
.auth-sub { color: var(--muted); margin-bottom: 1.6rem; font-size: 0.95rem; }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.45rem;
}
.input {
  width: 100%;
  background: #0e0e10;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #fff;
  padding: 0.8rem 0.9rem;
  font: inherit;
}
.input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
}
.pw-row { position: relative; }
.pw-row .input { padding-right: 4.2rem; }
.pw-toggle {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--muted);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0.4rem 0.55rem;
}
.pw-toggle:hover { color: var(--red); }

.auth-actions { margin-top: 1.4rem; }
.btn--block { width: 100%; justify-content: center; }
.auth-links {
  margin-top: 1.2rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  font-size: 0.85rem;
}
.auth-links a { color: var(--muted); }
.auth-links a:hover { color: var(--red); }

.alert {
  border-radius: 10px;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
}
.alert--error { background: rgba(209, 29, 43, 0.12); border: 1px solid rgba(209, 29, 43, 0.4); color: #ffb3b3; }
.alert--ok { background: rgba(40, 160, 80, 0.14); border: 1px solid rgba(40, 160, 80, 0.45); color: #b6f0c4; }
.alert--warn { background: rgba(230, 160, 40, 0.12); border: 1px solid rgba(230, 160, 40, 0.45); color: #ffd9a0; }
.hidden { display: none !important; }

.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.95rem;
}
.meta-row span:first-child { color: var(--muted); }
.role-pill {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}
.role-pill.is-admin { background: var(--red); color: #fff; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  vertical-align: middle;
}
.admin-table th {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  color: var(--muted);
}
.admin-table .input { padding: 0.45rem 0.5rem; width: auto; }
.table-scroll { overflow-x: auto; }

.admin-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: 0.5rem;
}
.admin-panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  background: rgba(255, 255, 255, 0.02);
}
.admin-panel h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.admin-panel__hint { color: var(--muted-dark); font-size: 0.85rem; margin-bottom: 1rem; }

.btn-mini {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  padding: 0.4rem 0.65rem;
  margin: 0 0.2rem;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn-mini:hover { border-color: var(--red); color: var(--red); }
.btn-mini:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===========================================================
   APP SHELL (authenticated admin area)
   =========================================================== */
.app-body { background: var(--black); }
.app { display: grid; grid-template-columns: 268px 1fr; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh; /* dvh = the ACTUAL visible height on mobile (100vh sits behind the browser toolbar) */
  overflow-y: auto; -webkit-overflow-scrolling: touch; /* scroll to the account footer if the nav is tall / the screen short */
  background: #08080a;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  display: flex; flex-direction: column;
  padding: 1.1rem 0.9rem;
  padding-bottom: max(1.1rem, env(safe-area-inset-bottom)); /* clear the iOS home indicator */
  z-index: 60;
}
.sidebar__brand { display: flex; align-items: center; gap: 0.65rem; padding: 0.4rem 0.6rem 1rem; margin: 0 0.2rem 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.sidebar__brand img { width: auto; height: 38px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)); }
.sidebar__brand-text { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.92rem; line-height: 1.1; color: #fff; }
.sidebar__brand-text small { display: block; font-size: 0.5rem; letter-spacing: 0.22em; color: var(--muted-dark); font-weight: 400; margin-top: 2px; }

.sidebar__nav { flex: 1; padding-top: 0.5rem; }
.sidebar__section { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.62rem; color: var(--muted-dark); padding: 0.6rem 0.7rem; margin: 0; }
.sidebar__item { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.75rem; border-radius: 10px; color: var(--muted); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82rem; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.sidebar__item:hover { background: rgba(255, 255, 255, 0.04); color: #fff; }
.sidebar__item.is-active { background: rgba(var(--red-rgb), 0.14); color: #fff; }
.sidebar__item.is-active .icn { color: var(--red); }
.icn { width: 20px; height: 20px; flex: none; }

.sidebar__user { border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 0.7rem; position: relative; }
.sidebar__user-btn { width: 100%; display: flex; align-items: center; gap: 0.6rem; background: none; border: 0; cursor: pointer; padding: 0.5rem; border-radius: 10px; color: #fff; text-align: left; }
.sidebar__user-btn:hover { background: rgba(255, 255, 255, 0.04); }
.sidebar__user-meta { flex: 1; min-width: 0; }
.sidebar__user-meta strong { display: block; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__user-meta small { display: block; color: var(--muted-dark); font-size: 0.7rem; }
.sidebar__user-btn .icn { width: 16px; height: 16px; color: var(--muted-dark); }
.avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(150deg, var(--red), var(--red-dark)); color: #fff; font-family: var(--font-display); font-size: 0.8rem; }

.sidebar__user-pop { position: absolute; bottom: calc(100% + 6px); left: 0.5rem; right: 0.5rem; background: #16161a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 0.4rem; box-shadow: var(--shadow); }
.sidebar__user-pop a, .sidebar__user-pop button { width: 100%; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; border-radius: 8px; background: none; border: 0; color: var(--muted); font: inherit; font-size: 0.85rem; cursor: pointer; text-align: left; }
.sidebar__user-pop a:hover, .sidebar__user-pop button:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.sidebar__user-pop .icn { width: 18px; height: 18px; }

.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-header { display: flex; flex-direction: column; align-items: stretch; padding: 1.3rem clamp(1.1rem, 3vw, 2.2rem); border-bottom: 1px solid rgba(255, 255, 255, 0.07); position: sticky; top: 0; background: rgba(12, 12, 13, 0.85); backdrop-filter: blur(12px); z-index: 50; }
.app-header__row { display: flex; align-items: center; gap: 1rem; }
.app-header__titles { flex: 1; min-width: 0; }
.app-header__titles h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0; }
.app-header__titles p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.9rem; }
.app-header__actions { display: flex; gap: 0.6rem; }
.app-header__actions:empty { display: none; }

.app-burger { display: none; background: none; border: 0; color: #fff; cursor: pointer; }
.app-burger .icn { width: 24px; height: 24px; }
.app-content { padding: clamp(1.1rem, 3vw, 2.2rem); }
.sidebar-scrim { display: none; }

/* Button busy state — one standard: an inline spinner the instant an action starts,
   so waiting is always visible and a slow save never reads as "nothing happened". */
.btn.is-loading, button.is-loading { position: relative; pointer-events: none; cursor: default; -webkit-text-fill-color: transparent; }
.btn.is-loading > *, button.is-loading > * { visibility: hidden; }
.btn.is-loading::after, button.is-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 1.05em; height: 1.05em; margin: -0.525em 0 0 -0.525em;
  border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: 0.85;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::after, button.is-loading::after { animation-duration: 1.3s; } }

/* "Acting as [child]" banner — a guardian's whole-app child context */
.acting-banner { display: flex; align-items: center; gap: 0.6rem; background: linear-gradient(90deg, rgba(var(--red-rgb), 0.18), rgba(var(--red-rgb), 0.06)); border-bottom: 1px solid rgba(var(--red-rgb), 0.4); color: var(--white); padding: 0.55rem clamp(1.1rem, 3vw, 2.2rem); font-size: 0.85rem; }
.acting-banner > .icn { width: 18px; height: 18px; color: var(--red); flex: none; }
.acting-banner b { color: var(--red); }
[data-theme="light"] .acting-banner b { color: var(--red-dark); }
.acting-banner button { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; background: var(--red); color: #fff; border: 0; border-radius: 8px; padding: 0.35rem 0.85rem; font: inherit; font-weight: 700; font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
.acting-banner button .icn { width: 14px; height: 14px; color: #fff; }

/* ---- Tab standard (two levels) ----
   Level 1 PAGE TABS: primary in-page sections, rendered by the shell in the header under
   the title (pill row). Level 2 SUB TABS: secondary sections inside a page tab, in the
   content body (underline row). Never nest a third level. */
/* Page tabs = true tabs living INSIDE the header band: a rounded-top tab whose bottom sits
   flush on the header's own bottom border. Icon left of each label. */
.page-tabs { display: flex; align-items: flex-end; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.9rem; }
.page-tab { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.95rem; margin-bottom: -1px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; font-weight: 600; color: var(--muted); background: transparent; text-decoration: none; cursor: pointer; }
.page-tab:hover { color: var(--white); }
.page-tab.is-active { background: var(--red); color: #fff; }
.page-tab .icn { width: 15px; height: 15px; }
.page-tab__badge { min-width: 1.05rem; height: 1.05rem; padding: 0 0.3rem; border-radius: 999px; background: #e0a100; color: #111; font-size: 0.62rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.page-tab.is-active .page-tab__badge { background: #fff; color: var(--red); }
/* When the header carries tabs, keep its bottom border (the tabs sit ON it) and drop the
   bottom padding so the active tab is flush with that line. */
.app-header.has-tabs { padding-bottom: 0; }
.sub-tabs { display: flex; gap: 1.1rem; flex-wrap: wrap; border-bottom: 1px solid var(--c-line); margin-bottom: 1.3rem; }
.sub-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.1rem; margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; cursor: pointer; text-decoration: none; }
.sub-tab .icn { width: 14px; height: 14px; }
.sub-tab:hover { color: var(--white); }
.sub-tab.is-active { color: var(--white); border-bottom-color: var(--red); }

/* stat cards */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: linear-gradient(160deg, var(--ink-soft), var(--ink)); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius); padding: 1.1rem 1.3rem; }
.stat-card b { font-family: var(--font-display); font-size: 1.9rem; display: block; line-height: 1; }
.stat-card span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem; color: var(--muted-dark); }
.stat-card.is-accent b { color: var(--red); }

/* toolbar / filters */
.toolbar { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-bottom: 1.2rem; }
.toolbar .search { position: relative; flex: 1; min-width: 220px; }
.toolbar .search .icn { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted-dark); }
.toolbar .search .input { padding-left: 2.4rem; }
.toolbar .input { width: auto; }
.toolbar .link-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.85rem; }
.toolbar .link-btn:hover { color: var(--red); }

/* badges */
.badge-role, .badge-status { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; padding: 0.25rem 0.6rem; border-radius: 999px; display: inline-block; }
.badge-role { background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.badge-role.is-admin { background: var(--red); color: #fff; }
.badge-status.active { background: rgba(40, 160, 80, 0.16); color: #7fd99a; }
.badge-status.invited { background: rgba(230, 170, 40, 0.16); color: #e6c06a; }
.badge-status.managed { background: rgba(110, 130, 220, 0.16); color: #a9b6f0; }
.badge-status.paused { background: rgba(209, 29, 43, 0.14); color: #f0959c; }
.badge-status.awaiting { background: rgba(230, 120, 40, 0.18); color: #f2b07a; }

.cell-user { display: flex; align-items: center; gap: 0.7rem; }
.cell-user .avatar { width: 34px; height: 34px; font-size: 0.72rem; }
.cell-user small { display: block; color: var(--muted-dark); font-size: 0.8rem; }
.you-tag { font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--red); text-transform: uppercase; margin-left: 0.3rem; }

/* row actions menu */
.row-actions { position: relative; text-align: right; }
.row-actions__btn { background: none; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: var(--muted); cursor: pointer; padding: 0.3rem; }
.row-actions__btn:hover { border-color: var(--red); color: var(--red); }
.row-actions__btn .icn { width: 18px; height: 18px; }
.row-menu { position: fixed; background: #16161a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 0.35rem; min-width: 190px; box-shadow: var(--shadow); z-index: 300; }
.row-menu button { width: 100%; display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.6rem; border-radius: 7px; background: none; border: 0; color: var(--muted); font: inherit; font-size: 0.83rem; cursor: pointer; text-align: left; white-space: nowrap; }
.row-menu button:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.row-menu button.danger:hover { color: #ff8080; }
.row-menu .icn { width: 16px; height: 16px; }

/* modal */
/* The overlay scrolls; margin:auto centers a short modal and collapses to 0 for a tall
   one, so its header/footer stay reachable (grid centering pushed them off-screen). */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem; z-index: 200; }
/* A confirm or alert answers whatever opened it: above drawers (201) and other modals, below toasts (400). */
.modal-overlay--dialog { z-index: 300; }
.modal-overlay > * { margin: auto; flex: none; }
.modal { width: 100%; max-width: 460px; background: linear-gradient(160deg, var(--ink-soft), var(--ink)); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.modal__head h2 { margin: 0; font-size: 1.25rem; }
.modal__head button { background: none; border: 0; color: var(--muted); cursor: pointer; }
.modal__head .icn { width: 22px; height: 22px; }
.modal__body { padding: 1.4rem; }
.modal__foot { padding: 1rem 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; justify-content: flex-end; gap: 0.7rem; }

/* branded dialogs (ui-dialog.js) — replaces native alert/confirm/prompt */
.modal--dialog { max-width: 420px; }
.dlg-msg { margin: 0; color: var(--muted); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
/* Always red, whatever the dojo's accent (--red is the accent: Tatami Dojo's is blue, and Delete looked like Save). */
.btn--danger { background: #c62832; color: #fff; }
.btn--danger:hover { background: #a51f28; box-shadow: 0 14px 30px -12px rgba(198, 40, 50, 0.45); }

/* transient toasts (ui-dialog.js) */
.toast-wrap { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 400; display: flex; flex-direction: column; gap: 0.6rem; max-width: min(92vw, 380px); }
.toast { background: var(--ink-soft); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.12); border-left-width: 3px; border-radius: 11px; padding: 0.8rem 1rem; font-size: 0.9rem; line-height: 1.45; box-shadow: var(--shadow); cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
.toast.is-in { opacity: 1; transform: none; }
.toast--error { border-left-color: var(--red); }
.toast--info { border-left-color: var(--muted); }
.toast--ok { border-left-color: #3FA34D; }
[data-theme="light"] .toast { border-color: rgba(0, 0, 0, 0.12); }

.cur-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; flex-wrap: wrap; }

/* ===========================================================
   HANDBOOK — redesign (SPEC-handbook-redesign.md). Namespaced .hb,
   re-tokenized to the shared design tokens. app/handbook.html.
   =========================================================== */
.hb { --hb-line: rgba(255,255,255,0.09); --hb-line-2: rgba(255,255,255,0.16);
      --hb-surface: var(--ink); --hb-accent: var(--red); --hb-serif: Georgia, "Times New Roman", serif; }
[data-theme="light"] .hb { --hb-line: rgba(0,0,0,0.10); --hb-line-2: rgba(0,0,0,0.16); }

.hb-empty { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center; color: var(--muted-dark); padding: 3rem 1rem; }
.hb-empty svg { width: 34px; height: 34px; opacity: 0.6; }
.hb-hidden { display: none !important; }

/* hero: lead + search + view toggle */
.hb-hero { border: 1px solid var(--hb-line); background: var(--hb-surface); border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: 1.1rem; }
.hb-hero__lead { display: flex; align-items: center; gap: 0.6rem; color: var(--muted); font-size: 0.92rem; }
.hb-hero__lead svg { width: 20px; height: 20px; color: var(--hb-accent); flex: 0 0 20px; }
.hb-hero__tools { display: flex; gap: 0.8rem; margin-top: 0.9rem; flex-wrap: wrap; }
.hb-search { position: relative; flex: 1; min-width: 220px; max-width: 420px; display: flex; align-items: center; }
.hb-search svg { position: absolute; left: 0.7rem; width: 17px; height: 17px; color: var(--muted-dark); pointer-events: none; }
.hb-search input { width: 100%; background: var(--ink-soft); border: 1px solid var(--hb-line-2); border-radius: 10px; color: var(--white); padding: 0.6rem 0.8rem 0.6rem 2.1rem; font-family: inherit; font-size: 0.9rem; }
.hb-toggle { display: flex; background: var(--ink-soft); border: 1px solid var(--hb-line-2); border-radius: 10px; padding: 3px; gap: 2px; }
.hb-toggle button { display: inline-flex; align-items: center; gap: 0.4rem; border: 0; background: none; color: var(--muted); padding: 0.5rem 0.85rem; border-radius: 8px; font-weight: 700; font-size: 0.82rem; cursor: pointer; font-family: inherit; }
.hb-toggle button svg { width: 15px; height: 15px; }
.hb-toggle button.on { background: var(--hb-accent); color: #fff; }
.hb-toggle button:disabled { opacity: 0.4; cursor: not-allowed; }
/* Clean, theme-aware search inside the read view's contents rail (replaces the old
   black/red hero: that used --white — "prominent text" — as a background, so it went
   dark in light mode). --ink is the surface token, so this reads light-on-light / dark-on-dark. */
.hb-tocsearch { position: relative; display: flex; align-items: center; margin-bottom: 0.85rem; }
.hb-tocsearch svg { position: absolute; left: 0.65rem; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.hb-tocsearch input { width: 100%; background: var(--ink); border: 1px solid var(--hb-line-2); border-radius: 9px; color: var(--white); padding: 0.55rem 0.7rem 0.55rem 2rem; font: inherit; font-size: 0.88rem; }
.hb-tocsearch input::placeholder { color: var(--muted); }
.hb-tocsearch input:focus { outline: none; border-color: var(--muted); }

/* three-column read layout */
.hb-body.is-read { display: flex; gap: 1.3rem; height: calc(100dvh - 15rem); min-height: 26rem; }
.hb-toc-toggle { display: none; }
.hb-toc { width: 244px; flex: 0 0 244px; overflow-y: auto; padding-right: 0.4rem; }
.hb-toc__sec { font-family: var(--font-display); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dark); padding: 1rem 0.55rem 0.4rem; }
.hb-toc__sec:first-child { padding-top: 0; }
.hb-toc__link { text-align: left; background: none; border: 0; color: var(--muted); padding: 0.5rem 0.65rem; border-radius: 9px; cursor: pointer; font-size: 0.88rem; line-height: 1.3; width: 100%; display: block; }
.hb-toc__link small { display: block; color: var(--muted-dark); font-weight: 400; font-size: 0.74rem; margin-top: 1px; }
.hb-toc__link:hover { background: var(--ink-soft); color: var(--white); }
.hb-toc__link.is-active { background: rgba(var(--red-rgb), 0.14); color: var(--white); font-weight: 600; }
[data-theme="light"] .hb-toc__link.is-active { color: var(--red-dark); }

.hb-article-scroll { flex: 1; overflow-y: auto; min-width: 0; }
.hb-article { max-width: 720px; margin: 0 auto; padding: 0 0.4rem 3rem; }
.hb-crumbs { color: var(--muted-dark); font-size: 0.76rem; font-weight: 600; margin-bottom: 0.7rem; }
.hb-crumbs b { color: var(--muted); }
.hb-crumbs span { opacity: 0.5; }
.hb-artmeta { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.hb-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--ink-soft); color: var(--muted); border: 1px solid var(--hb-line); }
.hb-chip svg { width: 12px; height: 12px; }
.hb-chip.is-sec { background: rgba(var(--red-rgb), 0.14); color: var(--red); border-color: transparent; }
[data-theme="light"] .hb-chip.is-sec { color: var(--red-dark); }
.hb-article h1 { font-family: var(--font-display); font-size: 2rem; line-height: 1.12; color: var(--white); margin: 0 0 0.5rem; }
.hb-article h2 { font-family: var(--font-display); font-size: 1.4rem; color: var(--white); margin: 1.9rem 0 0.7rem; padding-top: 0.4rem; position: relative; }
.hb-article h2::before { content: ""; position: absolute; top: -0.2rem; left: 0; width: 40px; height: 3px; background: var(--hb-accent); border-radius: 2px; }
.hb-article h3 { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: 0.01em; color: var(--white); margin: 1.4rem 0 0.5rem; }
.hb-article p, .hb-article li { font-family: var(--hb-serif); font-size: 1.02rem; line-height: 1.75; color: var(--muted); }
.hb-article p { margin: 0 0 1rem; }
.hb-lede { font-size: 1.12rem !important; color: var(--muted) !important; }
.hb-article ul, .hb-article ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.hb-article li { margin-bottom: 0.45rem; }
.hb-article li::marker { color: var(--hb-accent); }
.hb-article a { color: var(--red); }
.hb-article code { font-family: ui-monospace, Menlo, monospace; background: var(--ink-soft); border: 1px solid var(--hb-line); padding: 1px 6px; border-radius: 5px; font-size: 0.86em; }
.hb-article hr { border: 0; border-top: 1px solid var(--hb-line); margin: 1.8rem 0; }

/* callouts (emitted by markdown.js: > [!note] / > [!warn]) */
.md-callout { border: 1px solid var(--hb-line, rgba(128,128,128,0.2)); border-left: 3px solid var(--hb-accent, #d11d2b); border-radius: 10px; padding: 0.85rem 1.1rem; margin: 0 0 1.15rem; background: rgba(120,140,180,0.08); }
.md-callout--warn { border-left-color: #e0952b; background: rgba(224,149,43,0.09); }
.md-callout__label { font-weight: 800; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hb-accent, #d11d2b); margin-bottom: 0.3rem; }
.md-callout--warn .md-callout__label { color: #cf8a1e; }
.md-callout__body { font-family: var(--hb-serif, Georgia, serif); font-size: 0.97rem; line-height: 1.6; color: var(--muted); }

/* on this page rail */
.hb-onpage { width: 208px; flex: 0 0 208px; overflow-y: auto; padding: 0.2rem 0.3rem; }
.hb-onpage__lbl { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--muted-dark); margin-bottom: 0.6rem; }
.hb-onpage__link { display: block; color: var(--muted-dark); font-size: 0.8rem; padding: 0.32rem 0 0.32rem 0.7rem; border-left: 2px solid var(--hb-line-2); cursor: pointer; line-height: 1.35; }
.hb-onpage__link.is-sub { padding-left: 1.3rem; font-size: 0.76rem; }
.hb-onpage__link:hover { color: var(--muted); }
.hb-onpage__link.is-active { color: var(--red); border-left-color: var(--red); font-weight: 700; }
.hb-progress { margin-top: 1.4rem; }
.hb-progress__t { font-size: 0.68rem; color: var(--muted-dark); font-weight: 700; margin-bottom: 0.35rem; }
.hb-progress__bar { height: 5px; background: var(--hb-line); border-radius: 999px; overflow: hidden; }
.hb-progress__bar .f { height: 100%; width: 0; background: var(--hb-accent); border-radius: 999px; transition: width 0.15s linear; }

/* reading list */
.hb-readwrap { max-width: 940px; }
.hb-rl-note { display: flex; gap: 0.6rem; align-items: flex-start; background: rgba(120,90,190,0.12); border: 1px solid rgba(120,90,190,0.28); color: var(--muted); border-radius: 12px; padding: 0.85rem 1.05rem; font-size: 0.86rem; line-height: 1.5; margin-bottom: 1.5rem; }
.hb-rl-note svg { width: 18px; height: 18px; flex: 0 0 18px; color: #9a7fe0; margin-top: 1px; }
.hb-rl-note b { color: var(--white); }
.hb-rl-link { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--red); font-weight: 700; white-space: nowrap; }
.hb-rl-link svg { width: 13px; height: 13px; color: var(--red); }
.hb-band { margin-bottom: 2rem; }
.hb-band__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.hb-band__num { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 0.9rem; background: var(--muted-dark); flex: 0 0 32px; }
.hb-band__num[data-band="0"] { background: #1f9d55; }
.hb-band__num[data-band="1"] { background: #2b7de9; }
.hb-band__num[data-band="2"] { background: #6a3fb0; }
.hb-band__head h2 { font-family: var(--font-display); font-size: 1.2rem; color: var(--white); margin: 0; }
.hb-band__tag { color: var(--muted-dark); font-size: 0.78rem; font-weight: 600; }
.hb-band__lvl { margin-left: auto; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--ink-soft); border: 1px solid var(--hb-line); padding: 0.2rem 0.6rem; border-radius: 999px; }
.hb-bookgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 0.75rem; }
.hb-book { display: flex; gap: 0.75rem; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 12px; padding: 0.8rem 0.85rem; }
.hb-book__cov { width: 42px; height: 56px; border-radius: 6px; background: linear-gradient(140deg, #2b3550, #4a5878); display: flex; align-items: center; justify-content: center; flex: 0 0 42px; }
.hb-book__cov svg { width: 20px; height: 20px; color: #dfe6f5; }
.hb-book__meta { min-width: 0; }
.hb-book__meta .t { font-weight: 700; font-size: 0.9rem; line-height: 1.25; color: var(--white); }
.hb-book__meta .t a { color: var(--white); }
.hb-book__meta .t a:hover { color: var(--red); }
.hb-book__meta .a { color: var(--muted-dark); font-size: 0.78rem; margin-top: 0.15rem; }

.hb-toc-scrim { display: none; }
@media (max-width: 1100px) { .hb-onpage { display: none; } }
@media (max-width: 760px) {
  .hb-body.is-read { display: block; height: auto; }
  .hb-toc-toggle { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--hb-surface); border: 1px solid var(--hb-line-2); color: var(--muted); border-radius: 10px; padding: 0.55rem 0.9rem; font-weight: 700; font-size: 0.82rem; cursor: pointer; font-family: inherit; margin-bottom: 0.9rem; }
  .hb-toc-toggle svg { width: 15px; height: 15px; }
  .hb-toc { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 84vw; background: var(--ink); border-right: 1px solid var(--hb-line-2); z-index: 60; transform: translateX(-100%); transition: transform 0.2s var(--ease); padding: 1.1rem 0.8rem; }
  .hb-toc.is-open { transform: translateX(0); }
  .hb-toc-scrim.is-open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 55; }
  .hb-article { padding-bottom: 2rem; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: 0; left: 0; width: 280px; transform: translateX(-100%); transition: transform 0.3s var(--ease); }
  .sidebar.is-open { transform: none; }
  .app-burger { display: block; }
  .sidebar-scrim.is-open { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 55; }
}

/* user-menu theme row */
.sidebar__user-pop .theme-icon { display: inline-flex; }
.sidebar__user-pop .theme-icon .icn { width: 18px; height: 18px; }
.sidebar__user-pop .theme-val { margin-left: auto; font-family: var(--font-display); font-size: 0.64rem; letter-spacing: 0.12em; color: var(--muted-dark); }

/* ===========================================================
   LIGHT THEME — applied on app + auth pages via [data-theme="light"]
   (public marketing pages stay dark by design)
   =========================================================== */
:root[data-theme="light"] {
  --black: #f1f1f4;
  --ink: #ffffff;
  --ink-soft: #f7f7f9;
  --smoke: #e6e6ea;
  --white: #17171b;
  --muted: #55555d;
  --muted-dark: #8a8a93;
  --paper: #ffffff;
  --shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.22);
}

[data-theme="light"] body { background: var(--black); color: var(--white); }

[data-theme="light"] .input { background: #fff; border-color: rgba(0, 0, 0, 0.18); color: var(--white); }
[data-theme="light"] .btn--ghost { border-color: rgba(0, 0, 0, 0.22); color: var(--white); }
[data-theme="light"] .btn--ghost:hover { border-color: var(--red); color: var(--red); }

[data-theme="light"] .card,
[data-theme="light"] .auth-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .admin-panel,
[data-theme="light"] .sensei { border-color: rgba(0, 0, 0, 0.1); }

[data-theme="light"] .nav.is-scrolled { background: rgba(255, 255, 255, 0.85); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }
[data-theme="light"] .meta-row { border-bottom-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .role-pill { background: rgba(0, 0, 0, 0.07); }

[data-theme="light"] .alert--ok { color: #1f7a45; }
[data-theme="light"] .alert--warn { color: #8a5a00; }
[data-theme="light"] .alert--error { color: #b21d2b; }

/* sidebar */
[data-theme="light"] .sidebar { background: #ffffff; border-right-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .sidebar__brand { border-bottom-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .sidebar__brand-text { color: var(--white); }
[data-theme="light"] .sidebar__item:hover { background: rgba(0, 0, 0, 0.045); color: var(--white); }
[data-theme="light"] .sidebar__item.is-active { background: rgba(var(--red-rgb), 0.1); color: var(--white); }
[data-theme="light"] .sidebar__user { border-top-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .sidebar__user-btn { color: var(--white); }
[data-theme="light"] .sidebar__user-btn:hover { background: rgba(0, 0, 0, 0.045); }
[data-theme="light"] .sidebar__user-pop { background: #fff; border-color: rgba(0, 0, 0, 0.1); }
[data-theme="light"] .sidebar__user-pop a:hover,
[data-theme="light"] .sidebar__user-pop button:hover { background: rgba(0, 0, 0, 0.05); color: var(--white); }

/* header */
[data-theme="light"] .app-header { background: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .app-burger { color: var(--white); }

/* table */
[data-theme="light"] .admin-table th,
[data-theme="light"] .admin-table td { border-bottom-color: rgba(0, 0, 0, 0.08); }

/* row actions + menu */
[data-theme="light"] .row-actions__btn { border-color: rgba(0, 0, 0, 0.15); }
[data-theme="light"] .row-menu { background: #fff; border-color: rgba(0, 0, 0, 0.1); }
[data-theme="light"] .row-menu button:hover { background: rgba(0, 0, 0, 0.05); color: var(--white); }

/* badges */
[data-theme="light"] .badge-role { background: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .badge-status.active { background: rgba(40, 160, 80, 0.15); color: #1f7a45; }
[data-theme="light"] .badge-status.invited { background: rgba(200, 140, 20, 0.16); color: #8a5e00; }
[data-theme="light"] .badge-status.managed { background: rgba(70, 90, 190, 0.14); color: #34449a; }
[data-theme="light"] .badge-status.paused { background: rgba(209, 29, 43, 0.1); color: #a3121f; }
[data-theme="light"] .badge-status.awaiting { background: rgba(230, 120, 40, 0.16); color: #9a4a10; }

/* modal */
[data-theme="light"] .modal { border-color: rgba(0, 0, 0, 0.1); }
[data-theme="light"] .modal__head,
[data-theme="light"] .modal__foot { border-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .sidebar-scrim.is-open { background: rgba(0, 0, 0, 0.35); }

/* ===========================================================
   REVEAL ANIMATION
   =========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(80vw, 340px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.4rem;
    padding: 5rem 2.4rem;
    background: rgba(12,12,13,0.97);
    backdrop-filter: blur(18px);
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    border-left: 1px solid rgba(255,255,255,0.06);
  }
  .nav.is-open .nav-links { transform: translateX(0); }
  .nav-links a { font-size: 1.1rem; }
  .split { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .ranks li { grid-template-columns: 1fr auto; }
  .ranks .date { grid-column: 2; }
}

/* ===========================================================
   CURRICULUM MODULE (member browse + sensei console)
   Re-tokenized from the mockups onto the shared design system, so
   light/dark flips come for free via the existing CSS variables.
   =========================================================== */
.curric { --c-line: rgba(255,255,255,0.08); --c-line-2: rgba(255,255,255,0.16); --cur-shadow: none; --cur-shadow-h: none; }
[data-theme="light"] .curric { --c-line: rgba(0,0,0,0.09); --c-line-2: rgba(0,0,0,0.16);
  --cur-shadow: 0 1px 2px rgba(16,18,22,0.05), 0 4px 14px rgba(16,18,22,0.05);
  --cur-shadow-h: 0 2px 6px rgba(16,18,22,0.08), 0 10px 26px rgba(16,18,22,0.09); }

/* breadcrumb */
.cur-crumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--muted); margin-bottom: 1rem; flex-wrap: wrap; }
.cur-crumb button { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; padding: 0; }
.cur-crumb button:hover { color: var(--red); }
.cur-crumb .sep { color: var(--muted-dark); }
.cur-crumb .here { color: var(--white); }

/* now bar */
.cur-now { display: flex; align-items: center; gap: 0.8rem; background: linear-gradient(90deg, rgba(var(--red-rgb), 0.08), rgba(var(--red-rgb), 0.02) 60%, transparent); border: 1px solid var(--c-line); border-left: 3px solid var(--red); border-radius: var(--radius); padding: 0.7rem 1rem; margin-bottom: 1rem; box-shadow: var(--cur-shadow); }
.cur-now .cur-node { width: 22px; height: 22px; box-shadow: 0 0 0 2px var(--red); }
.cur-now .big { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.15; }
.cur-now .sub { font-size: 0.82rem; color: var(--muted); }
.cur-now .sub strong { color: var(--white); }
.cur-lead { color: var(--muted); font-size: 0.9rem; max-width: 64ch; margin: 0 0 1.4rem; }

/* rank ladder */
.cur-ladder { position: relative; padding-left: 0.4rem; }
.cur-ladder .spine { position: absolute; left: 1.55rem; top: 1.2rem; bottom: 1.2rem; width: 2px; background: var(--c-line-2); }
.cur-rank { position: relative; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 1rem; padding: 0.7rem 1rem 0.7rem 0; border-radius: var(--radius); cursor: pointer; transition: background 0.15s var(--ease); }
.cur-rank:hover { background: var(--ink); }
.cur-node { justify-self: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--black); box-shadow: 0 0 0 2px var(--c-line-2); z-index: 1; }
.cur-rank.is-cur .cur-node { box-shadow: 0 0 0 2px var(--red), 0 0 14px var(--red-glow); }
.cur-rank.is-tgt .cur-node { box-shadow: 0 0 0 2px var(--muted); }
.cur-rank .nat { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.cur-rank .eng { font-size: 0.82rem; color: var(--muted); }
.cur-rank .kyu { font-family: var(--font-mono, monospace); font-size: 0.7rem; color: var(--muted-dark); text-transform: uppercase; letter-spacing: 0.04em; }
.cur-rank .right { display: flex; align-items: center; gap: 0.6rem; }
.cur-rank .icn { width: 18px; height: 18px; color: var(--muted-dark); }
.cur-stat { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.cur-stat.is-cur { color: #fff; background: var(--red-dark); border: 1px solid var(--red); }
.cur-stat.is-tgt { color: var(--muted); border: 1px solid var(--muted); }
.cur-stat.is-open { color: var(--muted); border: 1px solid var(--c-line-2); }
.cur-rank.is-lock { cursor: not-allowed; opacity: 0.5; }
.cur-rank.is-lock:hover { background: transparent; }
.cur-rank.is-lock .cur-node { box-shadow: 0 0 0 2px var(--c-line); }

/* category sections + item grid */
.cur-cat { margin-bottom: 1.6rem; }
.cur-cat-h { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; margin-bottom: 0.9rem; background: var(--ink); border: 1px solid var(--c-line); border-left: 3px solid var(--red); border-radius: 10px; box-shadow: var(--cur-shadow); }
.cur-cat-h .cn { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.cur-cat-h .ce { font-size: 0.8rem; color: var(--muted); }
.cur-cat-h .cc { margin-left: auto; font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 700; color: var(--muted-dark); background: var(--black); border: 1px solid var(--c-line); border-radius: 999px; min-width: 1.4rem; text-align: center; padding: 0.05rem 0.4rem; }
.cur-cat-h .cur-cat-thumb { width: 32px; height: 32px; border-radius: 8px; }
.cur-cat-h .cur-cat-thumb .icn { width: 16px; height: 16px; }
.cur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; }
.cur-item { background: var(--ink); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 0.85rem 0.95rem; cursor: pointer; box-shadow: var(--cur-shadow); transition: border-color 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease); display: flex; flex-direction: column; gap: 0.2rem; min-height: 74px; text-align: left; }
.cur-item:hover { border-color: rgba(var(--red-rgb), 0.5); transform: translateY(-2px); box-shadow: var(--cur-shadow-h); }
.cur-item .inat { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.cur-item .ieng { font-size: 0.8rem; color: var(--muted); }
.cur-item .ivar { font-family: var(--font-mono, monospace); font-size: 0.66rem; color: var(--muted-dark); margin-top: 0.1rem; }
.cur-item .ihas { margin-top: auto; display: flex; gap: 0.4rem; padding-top: 0.4rem; color: var(--muted-dark); }
.cur-item .ihas .icn { width: 14px; height: 14px; }
.cur-typetag { align-self: flex-start; font-family: var(--font-mono, monospace); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--c-line-2); border-radius: 4px; padding: 0.05rem 0.35rem; }

/* item detail */
.cur-detail { max-width: 880px; }
.cur-dtop { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem; }
.cur-badge { font-size: 0.7rem; letter-spacing: 0.05em; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid var(--c-line-2); color: var(--muted); display: inline-flex; align-items: center; gap: 0.4rem; }
.cur-badge .dot { width: 10px; height: 10px; border-radius: 50%; }
.cur-dnat { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.04; margin: 0.4rem 0 0.1rem; }
.cur-deng { font-size: 1.05rem; color: var(--muted); }
.cur-dvar { font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; }
.cur-sect-h { font-family: var(--font-display); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dark); margin: 1.6rem 0 0.7rem; }
.cur-desc { font-size: 0.95rem; line-height: 1.7; color: var(--white); max-width: 64ch; }

/* media gallery + step list */
.cur-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.8rem; }
.cur-media { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); background: var(--ink-soft); aspect-ratio: 16/10; display: grid; place-items: center; }
.cur-media img, .cur-media video, .cur-media iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.cur-media .play { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,0.45); border: 1.5px solid rgba(255,255,255,0.55); }
.cur-media .play .icn { width: 20px; height: 20px; color: #fff; }
.cur-media.is-embed .play { background: var(--red); border-color: var(--red); }
.cur-media .src { position: absolute; top: 8px; left: 8px; font-family: var(--font-mono, monospace); font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: 5px; background: rgba(0,0,0,0.55); color: #fff; }
.cur-media .ic { color: var(--muted-dark); }
.cur-media .ic .icn { width: 30px; height: 30px; }
.cur-mediabtn { cursor: pointer; }
.cur-steps { counter-reset: s; display: flex; flex-direction: column; max-width: 64ch; }
.cur-step { display: grid; grid-template-columns: 30px 1fr; gap: 0.7rem; align-items: start; padding: 0.55rem 0; border-bottom: 1px solid var(--c-line); }
.cur-step::before { counter-increment: s; content: counter(s); font-family: var(--font-mono, monospace); font-size: 0.75rem; color: var(--red); font-weight: 700; padding-top: 0.1rem; }
.cur-step span { font-size: 0.9rem; color: var(--white); }

/* empty states */
.cur-empty { border: 1px dashed var(--c-line-2); border-radius: var(--radius); padding: 1.3rem; color: var(--muted); font-size: 0.86rem; display: flex; align-items: center; gap: 0.7rem; }
.cur-empty .icn { width: 18px; height: 18px; color: var(--muted-dark); flex: none; }

/* ---- console: tabs ---- */
.cur-tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--c-line); margin-bottom: 1.3rem; flex-wrap: wrap; }
.cur-tab { padding: 0.8rem 0.25rem; margin-right: 1.1rem; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; cursor: pointer; }
.cur-tab:hover { color: var(--white); }
.cur-tab.is-active { color: var(--white); border-bottom-color: var(--red); }

/* ---- console: list rows (ranks / categories) ---- */
.cur-listrow { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem; border: 1px solid var(--c-line); border-radius: var(--radius); margin-bottom: 0.5rem; background: var(--ink); box-shadow: var(--cur-shadow); }
.cur-listrow.dragging { opacity: 0.45; }
.cur-grip { display: inline-flex; flex: none; color: var(--muted-dark); cursor: grab; }
.cur-grip:active { cursor: grabbing; }
.cur-grip .icn { width: 18px; height: 18px; }
.cur-cat-mini { width: 36px; height: 36px; flex: none; border-radius: 8px; overflow: hidden; background: var(--ink-soft); }
.cur-cat-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cur-listrow .swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.4); flex: none; }
.cur-listrow .swatch.sq { border-radius: 6px; width: 18px; height: 18px; }
.cur-listrow .meta { flex: 1; min-width: 0; }
.cur-listrow .ln { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.cur-listrow .le { font-size: 0.8rem; color: var(--muted); }
.cur-listrow .kyu { font-family: var(--font-mono, monospace); font-size: 0.68rem; color: var(--muted-dark); text-transform: uppercase; }
.cur-listrow .tig { font-size: 0.78rem; color: var(--muted); }
.cur-iconbtn { background: none; border: 1px solid var(--c-line-2); color: var(--muted); width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.cur-iconbtn:hover { border-color: var(--red); color: var(--red); }
.cur-iconbtn .icn { width: 17px; height: 17px; }
.cur-mcell { font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--muted-dark); }
.cur-mcell.has { color: var(--muted); }

/* ---- console: right drawer ---- */
.cur-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease); }
.cur-scrim.is-open { opacity: 1; pointer-events: auto; }
.cur-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 480px; max-width: 94vw; background: var(--black); border-left: 1px solid var(--c-line-2); z-index: 201; transform: translateX(100%); transition: transform 0.24s var(--ease); display: flex; flex-direction: column; }
.cur-drawer.is-open { transform: none; }
.cur-drawer__head { display: flex; align-items: center; gap: 0.8rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--c-line); }
.cur-drawer__head .dt { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-right: auto; }
.cur-drawer__body { padding: 1.2rem 1.3rem; overflow-y: auto; flex: 1; }
.cur-drawer__foot { padding: 1rem 1.3rem; border-top: 1px solid var(--c-line); display: flex; gap: 0.6rem; justify-content: flex-end; }
.cur-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.cur-hint { font-size: 0.72rem; color: var(--muted-dark); margin-top: 0.4rem; }
.field label .opt { color: var(--muted-dark); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.72rem; }
textarea.input { resize: vertical; min-height: 92px; line-height: 1.6; }

/* ---- console: media manager ---- */
.cur-mgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.cur-mcard { position: relative; border: 1px solid var(--c-line); border-radius: 8px; background: var(--ink-soft); aspect-ratio: 16/10; display: grid; place-items: center; overflow: hidden; }
.cur-mcard img, .cur-mcard video, .cur-mcard iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.cur-mcard .ic .icn { width: 26px; height: 26px; color: var(--muted-dark); }
.cur-mcard .play { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.45); display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,0.5); }
.cur-mcard.is-embed .play { background: var(--red); }
.cur-mcard .play .icn { width: 15px; height: 15px; color: #fff; }
.cur-mcard .src { position: absolute; top: 6px; left: 6px; font-family: var(--font-mono, monospace); font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.35rem; border-radius: 4px; background: rgba(0,0,0,0.6); color: #fff; }
.cur-mcard .rm { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.6); border: 0; color: #fff; display: grid; place-items: center; cursor: pointer; }
.cur-mcard .rm .icn { width: 13px; height: 13px; }
.cur-addrow { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.cur-addbox { border: 1px dashed var(--c-line-2); border-radius: 8px; padding: 0.9rem; margin-top: 0.6rem; background: var(--ink); }
.cur-addbox .lbl { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.6rem; }
.cur-urlrow { display: flex; gap: 0.5rem; }

/* ---- console: settings ---- */
.cur-setrow { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--c-line); }
.cur-setrow:first-of-type { border-top: 0; }
.cur-setrow .info { flex: 1; }
.cur-setrow .st { font-weight: 500; font-size: 0.92rem; }
.cur-setrow .sd { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.cur-switch { position: relative; width: 42px; height: 24px; flex: none; }
.cur-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cur-switch .track { position: absolute; inset: 0; background: var(--smoke); border: 1px solid var(--c-line-2); border-radius: 999px; transition: 0.18s; }
.cur-switch .knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: 0.18s; }
.cur-switch input:checked + .track { background: var(--red-dark); border-color: var(--red); }
.cur-switch input:checked + .track .knob { transform: translateX(18px); background: #fff; }
.cur-seg { display: inline-flex; border: 1px solid var(--c-line-2); border-radius: 8px; overflow: hidden; }
.cur-seg button { background: var(--ink-soft); border: 0; color: var(--muted); padding: 0.5rem 0.9rem; font: inherit; font-size: 0.82rem; cursor: pointer; }
.cur-seg button.is-active { background: var(--red); color: #fff; }
.cur-seg.is-disabled { opacity: 0.4; pointer-events: none; }
.cur-preview { border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--black); padding: 1.1rem; margin-top: 0.9rem; }
.cur-preview .pl { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: 0.7rem; }
.cur-preview .pv-nat { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1.05; }
.cur-preview .pv-eng { font-size: 0.95rem; color: var(--muted); }
.cur-preview .pv-eng.lead { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--white); line-height: 1.05; }
.cur-preview .pv-sub { font-size: 0.95rem; color: var(--muted); }

/* console items table name cell */
.admin-table .nm-nat, .admin-table .nm-lead { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.15; }
.admin-table .cellsub { font-size: 0.8rem; color: var(--muted); }

@media (max-width: 900px) {
  .cur-drawer { width: 480px; }
  .cur-row2 { grid-template-columns: 1fr; }
}

/* ===========================================================
   MEMBER EXPERIENCE — shell groups, belt rail, community, study
   (shell chrome uses tokens directly; page components scope under .curric)
   =========================================================== */

/* sidebar persona groups + Study badge + title-icon chip */
.sidebar__group { margin-bottom: 1.1rem; }
.sidebar__group:last-child { margin-bottom: 0; }
.sidebar__badge { margin-left: auto; font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; color: var(--muted); background: rgba(255,255,255,0.08); border-radius: 999px; padding: 0.08rem 0.45rem; }
[data-theme="light"] .sidebar__badge { background: rgba(0,0,0,0.07); }
.app-header__icon { width: 42px; height: 42px; flex: none; border-radius: 12px; background: rgba(var(--red-rgb), 0.14); color: var(--red); display: grid; place-items: center; }
.app-header__icon .icn { width: 22px; height: 22px; }

/* curriculum step-2: belt rail + categories columns */
.cur-cols { display: grid; grid-template-columns: 236px 1fr; gap: 1.4rem; align-items: start; }
.cur-rail { position: sticky; top: 0.4rem; background: var(--ink); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 0.7rem 0.6rem; box-shadow: var(--cur-shadow); }
/* consolidated rank nav (full ladder list as the left column) */
.cur-rnav-row { position: relative; display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; background: none; border: 0; padding: 0.5rem 0.55rem; border-radius: 9px; cursor: pointer; }
/* subtle connector down the dots — stepping-stone feel; omit on the last row so it doesn't dangle */
.cur-rnav-row::before { content: ""; position: absolute; z-index: 0; left: calc(0.55rem + 6.5px); top: 50%; width: 2px; height: 100%; background: var(--c-line-2); }
.cur-rnav-row:last-child::before { display: none; }
.cur-rnav-row:hover { background: var(--ink); }
.cur-rnav-row.is-active { background: rgba(var(--red-rgb), 0.14); }
.cur-rnav-row.is-lock { cursor: default; opacity: 0.5; }
.cur-rnav-row.is-lock:hover { background: none; }
.cur-rnav-row .dot { position: relative; z-index: 1; width: 15px; height: 15px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.22); } /* the outer ring keeps a black belt visible on the dark theme */
.cur-rnav-row.is-current .dot { box-shadow: 0 0 0 2px var(--red), inset 0 0 0 1px rgba(0,0,0,0.28); }
.cur-rnav-row .meta { min-width: 0; }
.cur-rnav-row .rn { display: block; font-weight: 600; font-size: 0.9rem; color: var(--white); line-height: 1.2; }
.cur-rnav-row.is-lock .rn { color: var(--muted); }
.cur-rnav-row .rb { display: block; font-size: 0.7rem; color: var(--muted-dark); }
.cur-rnav-row .mk { margin-left: auto; display: inline-flex; align-items: center; }
.cur-rnav-row .mk .icn { width: 13px; height: 13px; color: var(--muted-dark); }
.cur-rnav-pill { font-family: var(--font-display); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.12rem 0.42rem; border-radius: 999px; white-space: nowrap; }
.cur-rnav-pill.cur { background: var(--red); color: #fff; }
.cur-rnav-pill.tgt { border: 1px solid var(--c-line-2); color: var(--muted); }
.cur-rail-label { font-family: var(--font-display); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dark); padding: 0 0.5rem 0.15rem; }
.cur-rail-sub { font-size: 0.72rem; color: var(--muted-dark); padding: 0 0.5rem 0.6rem; margin-bottom: 0.2rem; border-bottom: 1px solid var(--c-line); }
.cur-rail-sub strong { color: var(--red); font-weight: 700; }
[data-theme="light"] .cur-rail-sub strong { color: var(--red-dark); }
.cur-railrow { display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left; background: none; border: 0; padding: 0.5rem; border-radius: 8px; font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.cur-railrow:hover { background: var(--ink); color: var(--white); }
.cur-railrow.is-active { background: rgba(var(--red-rgb), 0.14); color: var(--white); font-weight: 600; }
.cur-railrow.is-lock { cursor: default; opacity: 0.55; }
.cur-railrow.is-lock:hover { background: none; color: var(--muted); }
.cur-railrow .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.cur-railrow .lk { margin-left: auto; display: inline-flex; color: var(--muted-dark); }
.cur-railrow .lk .icn { width: 13px; height: 13px; }

/* category section thumbnail (image hook) */
.cur-cat-thumb { width: 44px; height: 44px; flex: none; border-radius: 10px; background: linear-gradient(150deg, var(--smoke), var(--ink)); display: grid; place-items: center; color: var(--muted); overflow: hidden; }
.cur-cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cur-cat-thumb .icn { width: 20px; height: 20px; }

/* community panel (item detail) */
.cur-commpanel { margin-top: 1.6rem; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--ink); }
.cur-ctabs { display: flex; gap: 0.2rem; border-bottom: 1px solid var(--c-line); padding: 0 1rem; }
.cur-ctab-btn { background: none; border: 0; padding: 0.85rem 0.5rem; margin-right: 1rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.cur-ctab-btn.is-active { color: var(--white); border-bottom-color: var(--red); }
.cur-ctab { padding: 1.2rem; }
.cur-composer { display: flex; gap: 0.6rem; margin-bottom: 1rem; }
.cur-composer textarea { flex: 1; resize: vertical; min-height: 46px; background: var(--black); border: 1px solid var(--c-line-2); border-radius: 10px; color: var(--white); padding: 0.7rem 0.85rem; font: inherit; font-size: 0.9rem; }
.cur-note-lock { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: var(--muted-dark); margin: 0 0 0.9rem; }
.cur-note-lock .icn { width: 14px; height: 14px; }
.cur-entry { padding: 0.9rem 0; border-top: 1px solid var(--c-line); }
.cur-entry:first-of-type { border-top: 0; }
.cur-ehead { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.cur-eav { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--smoke); color: var(--muted); display: grid; place-items: center; font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; }
.cur-eav.is-sensei { background: var(--red); color: #fff; }
.cur-ename { font-weight: 600; font-size: 0.85rem; }
.cur-ebadge { font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: 6px; background: rgba(var(--red-rgb), 0.16); color: var(--red); }
.cur-etime { margin-left: auto; font-size: 0.72rem; color: var(--muted-dark); }
.cur-ebody { font-size: 0.9rem; color: var(--white); white-space: pre-wrap; }
.cur-answer { margin-top: 0.6rem; padding: 0.8rem 0.9rem; border: 1px solid var(--c-line); border-radius: 10px; background: var(--ink-soft); }
.cur-statuschip { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; }
.cur-statuschip.answered { background: rgba(40,160,80,0.18); color: #7fd99a; }
.cur-statuschip.open { background: rgba(230,170,40,0.18); color: #e6c06a; }
.cur-statuschip.pending { background: rgba(230,170,40,0.18); color: #e6c06a; }
.cur-modrow { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.cur-btn-mod { font-size: 0.72rem; font-weight: 600; padding: 0.35rem 0.65rem; border-radius: 8px; border: 1px solid var(--c-line-2); background: var(--black); color: var(--muted); cursor: pointer; }
.cur-btn-mod:hover { border-color: var(--red); color: var(--red); }
.cur-hidden-note { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--muted-dark); padding: 0.3rem 0; }
.cur-hidden-note .icn { width: 14px; height: 14px; }
/* role-gated affordances (set on <html> by mountAppShell) */
.mod-only { display: none; }
html[data-role="admin"] .mod-only { display: flex; }
.member-only { display: none; }
html[data-role="member"] .member-only { display: block; }

/* study / flashcards */
.study-summary { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.4rem 0 1rem; }
.study-chip { background: var(--ink); border: 1px solid var(--c-line); border-radius: 999px; padding: 0.5rem 0.9rem; font-size: 0.85rem; color: var(--muted); }
.study-chip b { color: var(--white); }
.study-chip.is-dir { margin-left: auto; background: rgba(var(--red-rgb), 0.12); border-color: rgba(var(--red-rgb), 0.4); color: var(--red); font-weight: 600; }
.flashwrap { max-width: 540px; margin: 1.2rem auto 0; text-align: center; perspective: 1400px; }
.flashcard { position: relative; height: 280px; cursor: pointer; }
.flashcard .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--radius); border: 1px solid var(--c-line-2); background: var(--ink); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; padding: 1.6rem; transition: transform 0.55s cubic-bezier(.2,.7,.2,1); }
.flashcard .back { transform: rotateY(180deg); }
.flashcard.is-flipped .front { transform: rotateY(-180deg); }
.flashcard.is-flipped .back { transform: rotateY(0deg); }
.flashcard .fk { font-family: var(--font-display); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-dark); }
.flashcard .term { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; line-height: 1.1; }
.flashcard .sub { color: var(--muted); font-size: 0.85rem; }
.flashcard .hint { font-size: 0.78rem; color: var(--muted-dark); }
.grade { display: flex; gap: 0.7rem; justify-content: center; margin-top: 1.1rem; max-width: 540px; margin-inline: auto; }
.btn-grade { flex: 1; max-width: 210px; padding: 0.8rem; border-radius: 10px; font-size: 0.9rem; font-weight: 700; border: 1px solid var(--c-line-2); background: var(--ink); color: var(--white); cursor: pointer; }
.btn-grade.again { color: var(--red); border-color: rgba(209,29,43,0.4); }
.btn-grade.good { color: #fff; background: #1f7a45; border-color: #1f7a45; }
.study-progress { height: 6px; background: var(--smoke); border-radius: 99px; margin: 1.4rem auto 0.5rem; max-width: 540px; overflow: hidden; }
.study-progress .bar { height: 100%; background: var(--red); width: 0; transition: width 0.3s ease; }
.study-plabel { font-size: 0.78rem; color: var(--muted-dark); text-align: center; }
.study-done { max-width: 540px; margin: 2rem auto; text-align: center; color: var(--muted); padding: 2rem; border: 1px dashed var(--c-line-2); border-radius: var(--radius); }
.study-done b { color: var(--white); display: block; margin-bottom: 0.4rem; }

/* community page — inbox + media grid */
.cur-tabs-top { display: flex; gap: 0.2rem; border-bottom: 1px solid var(--c-line); margin: 0 0 1.3rem; }
.cur-inboxrow { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; padding: 1rem 0; border-top: 1px solid var(--c-line); }
.cur-inboxrow:first-of-type { border-top: 0; }
.cur-inboxq { font-weight: 600; font-size: 0.92rem; }
.cur-inboxmeta { font-size: 0.8rem; color: var(--muted-dark); }
.cur-inboxside { display: flex; align-items: center; gap: 0.6rem; grid-row: span 2; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.6rem; }
.mtile { border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: var(--ink); }
.mthumb { aspect-ratio: 4/3; background: var(--ink-soft); display: grid; place-items: center; color: var(--muted-dark); position: relative; }
.mthumb img, .mthumb video { width: 100%; height: 100%; object-fit: cover; }
.mthumb .corner { position: absolute; top: 8px; left: 8px; }
.mbody { padding: 0.8rem 0.9rem; }
.mbody .mt { font-weight: 700; font-size: 0.86rem; }
.mbody .mu { font-size: 0.78rem; color: var(--muted-dark); margin-top: 0.1rem; }
.section-label { font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-dark); margin: 0.5rem 0 0.8rem; }

@media (max-width: 1080px) {
  .cur-cols { grid-template-columns: 1fr; }
  /* Narrow screens: the rank ladder becomes a scrollable chip bar of the ranks the
     member can open (it used to vanish, leaving phones stuck on "This rank"). */
  .cur-rail { position: static; display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.45rem; scrollbar-width: none; }
  .cur-rail::-webkit-scrollbar { display: none; }
  .cur-rail-label, .cur-rail-sub, .cur-rnav-row.is-lock, .cur-rnav-row .rb { display: none; }
  .cur-rnav-row { flex: none; width: auto; padding: 0.4rem 0.7rem; border: 1px solid var(--c-line-2); border-radius: 999px; }
  .cur-rnav-row::before { display: none; }
  .cur-rnav-row .dot { width: 12px; height: 12px; }
  .cur-rnav-row .rn { white-space: nowrap; font-size: 0.84rem; }
}
@media (max-width: 760px) {
  .media-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   UNIFIED CURRICULUM SURFACE (SPEC-curriculum-unified-surface)
   view switch · filter bar · list/grid/test-prep · detail flyout ·
   inline admin-edit affordances. Re-tokenized to the shared system.
   =========================================================== */
.cur-admintoggle { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.btn--sm { padding: 0.42rem 0.7rem; font-size: 0.8rem; }
.cur-workspace { min-width: 0; }

.cur-adminbtns { display: none; align-items: center; gap: 0.5rem; }
.curric.is-adminmode .cur-adminbtns { display: inline-flex; }

.cur-viewswitch { display: inline-flex; background: var(--ink); border: 1px solid var(--c-line); border-radius: 10px; padding: 3px; gap: 2px; }
.cur-viewswitch button { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: 0.78rem; padding: 0.4rem 0.65rem; border-radius: 8px; cursor: pointer; }
.cur-viewswitch button .icn { width: 15px; height: 15px; }
.cur-viewswitch button.is-active { background: rgba(var(--red-rgb), 0.14); color: var(--red); }
[data-theme="light"] .cur-viewswitch button.is-active { color: var(--red-dark); }
.cur-viewswitch button:hover:not(.is-active) { color: var(--white); }

/* unified controls card: filters on top, view row beneath */
.cur-controls { background: var(--ink); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--cur-shadow); overflow: hidden; margin-bottom: 1.2rem; }
.cur-filterbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.7rem 0.8rem; }
.cur-viewrow { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; padding: 0.5rem 0.8rem; border-top: 1px solid var(--c-line); background: var(--black); }
.cur-viewrow .cur-crumb { flex: 1; margin: 0; }
.cur-searchwrap { position: relative; flex: 1; min-width: 190px; max-width: 340px; display: flex; align-items: center; }
.cur-searchwrap .icn { position: absolute; left: 0.6rem; width: 16px; height: 16px; color: var(--muted-dark); pointer-events: none; }
.cur-searchwrap input { width: 100%; background: var(--black); border: 1px solid var(--c-line-2); border-radius: 10px; color: var(--white); padding: 0.55rem 0.7rem 0.55rem 2rem; font: inherit; font-size: 0.86rem; }
.cur-searchwrap input:focus { outline: none; border-color: var(--red); }
.cur-fsel { background: var(--black); border: 1px solid var(--c-line-2); border-radius: 10px; color: var(--muted); padding: 0.5rem 0.7rem; font: inherit; font-size: 0.82rem; cursor: pointer; }
.cur-fsel:focus { outline: none; border-color: var(--red); }
.cur-scope { display: inline-flex; background: var(--ink); border: 1px solid var(--c-line); border-radius: 10px; padding: 3px; gap: 2px; }
.cur-scope button { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: 0.78rem; padding: 0.4rem 0.7rem; border-radius: 8px; cursor: pointer; }
.cur-scope button.is-active { background: rgba(var(--red-rgb), 0.14); color: var(--red); }
[data-theme="light"] .cur-scope button.is-active { color: var(--red-dark); }
.cur-resultcount { margin-left: auto; font-size: 0.78rem; color: var(--muted-dark); font-weight: 600; }

/* card chip + inline edit affordances (hidden unless admin-edit is ON) */
.cur-item { position: relative; }
.cur-rankchip { display: inline-block; align-self: flex-start; margin-top: 0.5rem; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--smoke); color: var(--muted); font-family: var(--font-display); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.cur-editpencil, .cur-catedit, .cur-addcard { display: none; }
.cur-item .cur-editpencil { position: absolute; top: 0.5rem; right: 0.5rem; width: 28px; height: 28px; }
.curric.is-adminmode .cur-item .cur-editpencil { display: inline-flex; }
.cur-catedit { margin-left: 0.4rem; width: 28px; height: 28px; }
.curric.is-adminmode .cur-catedit { display: inline-flex; }
.cur-addcard { align-items: center; justify-content: center; gap: 0.4rem; border: 1.5px dashed var(--c-line-2); background: transparent; color: var(--muted); border-radius: var(--radius); min-height: 74px; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.82rem; }
.curric.is-adminmode .cur-addcard { display: flex; }
.cur-addcard:hover { border-color: var(--red); color: var(--red); }
.cur-addcard .icn { width: 15px; height: 15px; }

/* list view */
.cur-listview { border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: var(--ink); box-shadow: var(--cur-shadow); }
.cur-lrow { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--c-line); cursor: pointer; }
.cur-lrow:last-child { border-bottom: 0; }
.cur-lrow:hover { background: var(--ink-soft); }
.cur-lrow .tn { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; min-width: 40%; }
.cur-lrow .tc { color: var(--muted); font-size: 0.82rem; flex: 1; }
.cur-lrow .cur-rankchip { margin-top: 0; }
.cur-lrow .cur-editpencil { width: 28px; height: 28px; }
.curric.is-adminmode .cur-lrow .cur-editpencil { display: inline-flex; }

/* grid (dense) view */
.cur-gridview { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; }
.cur-gcell { background: var(--ink); border: 1px solid var(--c-line); border-radius: 10px; padding: 0.6rem 0.7rem; cursor: pointer; box-shadow: var(--cur-shadow); transition: border-color 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.cur-gcell:hover { border-color: rgba(var(--red-rgb), 0.5); transform: translateY(-2px); box-shadow: var(--cur-shadow-h); }
.cur-gcell .tn { font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; }
.cur-gcell .tc { color: var(--muted); font-size: 0.72rem; margin-top: 0.1rem; }

/* test-prep view */
/* Test-prep toolbar — neutral config row (ceiling + grouping), not a loud callout. */
.cur-tptools { display: flex; align-items: flex-end; gap: 1.2rem; flex-wrap: wrap; background: var(--ink); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 0.7rem 0.9rem; margin-bottom: 1.2rem; box-shadow: var(--cur-shadow); }
.cur-tptool { display: flex; flex-direction: column; gap: 0.35rem; }
.cur-tptool-lbl { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.66rem; color: var(--muted-dark); }
.cur-tpseg { display: inline-flex; gap: 0.2rem; padding: 0.25rem; border: 1px solid var(--c-line-2); border-radius: 10px; background: var(--black); }
.cur-tpseg button { padding: 0.42rem 0.85rem; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; color: var(--muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; }
.cur-tpseg button.on { background: var(--red); color: #fff; }
.cur-tpcat { margin-bottom: 1.6rem; }
/* Rank-grouped test prep: belt section header, then category sub-blocks within it. */
.cur-tprank { margin-bottom: 1.8rem; }
.cur-rank-h { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.85rem; margin-bottom: 0.8rem; background: var(--ink); border: 1px solid var(--c-line); border-left: 4px solid #888; border-radius: 10px; box-shadow: var(--cur-shadow); }
.cur-rank-h .bdot { width: 20px; height: 20px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3); }
.cur-rank-h .rh-name { flex: 1; }
.cur-rank-h .bname { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.cur-rank-h .bsub { font-size: 0.72rem; color: var(--muted-dark); text-transform: uppercase; letter-spacing: 0.04em; }
.cur-rank-h .cc { font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 700; color: var(--muted-dark); background: var(--black); border: 1px solid var(--c-line); border-radius: 999px; min-width: 1.4rem; text-align: center; padding: 0.05rem 0.4rem; }
.cur-rankcat { margin: 0 0 0.7rem 0.5rem; padding-left: 0.85rem; border-left: 2px solid var(--c-line-2); }
.cur-rankcat-h { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; }
.cur-rankcat-h .icn { width: 15px; height: 15px; color: var(--muted-dark); }
.cur-rankcat-h .cn { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; }
.cur-rankcat-h .ce { font-size: 0.76rem; color: var(--muted); }
.cur-rankcat-h .cc { margin-left: auto; font-family: var(--font-mono, monospace); font-size: 0.68rem; font-weight: 700; color: var(--muted-dark); }
.cur-beltrow { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding: 0.8rem 0.9rem; background: var(--ink); border: 1px solid var(--c-line); border-radius: var(--radius); margin-bottom: 0.5rem; box-shadow: var(--cur-shadow); }
.cur-belttag { display: flex; align-items: flex-start; gap: 0.5rem; padding-top: 0.2rem; }
.cur-belttag .bdot { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3); }
.cur-belttag .bname { font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; }
.cur-belttag .bsub { font-size: 0.7rem; color: var(--muted-dark); text-transform: uppercase; letter-spacing: 0.04em; }
.cur-belttech { display: flex; flex-direction: column; }
.cur-techline { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.45rem 0.5rem; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.cur-techline:hover { background: var(--ink-soft); border-color: var(--c-line); }
.cur-techline .tn { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; }
.cur-techline .tc { color: var(--muted); font-size: 0.78rem; }
.cur-techline .go { margin-left: auto; color: var(--muted-dark); opacity: 0; display: inline-flex; }
.cur-techline .go .icn { width: 15px; height: 15px; }
.cur-techline:hover .go { opacity: 1; }

/* detail flyout */
.cur-fly .cur-flytags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-right: auto; }
.cur-flyname { font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; line-height: 1.05; margin-top: 0.2rem; }
.cur-flysub { color: var(--muted); font-size: 0.95rem; margin-top: 0.1rem; }
.cur-flyedit { margin: 0.9rem 0 0.2rem; }
.cur-detlist { border: 1px solid var(--c-line); border-radius: 10px; margin-top: 1rem; overflow: hidden; }
.cur-detrow { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.8rem; border-top: 1px solid var(--c-line); font-size: 0.85rem; }
.cur-detrow:first-child { border-top: 0; }
.cur-detrow .k { color: var(--muted); }
.cur-detrow .v { color: var(--white); font-weight: 600; text-align: right; }

/* instructor-note form (admin) */
.cur-inote-form { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.cur-inote-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.cur-inote-row .cur-fsel { flex: 1; min-width: 160px; }
.cur-inote-form textarea.input { min-height: 70px; resize: vertical; }
.cur-inote-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.cur-inote-actions .cur-note-lock { margin: 0; }
.cur-inote-ctx { font-size: 0.75rem; color: var(--muted-dark); margin-bottom: 0.3rem; }

/* manage drawer header row */
.cur-managehead { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.9rem; }
.cur-managehead + * .cur-listrow:first-child, .cur-managehead ~ .cur-listrow:first-of-type { margin-top: 0; }
.cur-drawer .cur-tabs { padding: 0 1.3rem; margin-bottom: 0; }

@media (max-width: 760px) {
  .cur-beltrow { grid-template-columns: 1fr; gap: 0.4rem; }
  .cur-filterbar { gap: 0.45rem; }
  .cur-searchwrap { max-width: none; }
}

/* ===========================================================
   SCHEDULING & EVENTS — namespaced .sched, re-tokenized to the
   shared design tokens (NOT the mockup's raw palette). Applied on
   app/schedule.html + app/admin-schedule.html.
   =========================================================== */
.sched {
  --c-line: rgba(255,255,255,0.08); --c-line-2: rgba(255,255,255,0.16);
  --ev-green: #7fd99a; --ev-green-soft: rgba(40,160,80,0.16);
  --ev-amber: #e6c06a; --ev-amber-soft: rgba(230,170,40,0.16);
  --ev-blue:  #9fbef0; --ev-blue-soft: rgba(90,141,214,0.16);
  --ev-mut-soft: rgba(255,255,255,0.07);
}
[data-theme="light"] .sched {
  --c-line: rgba(0,0,0,0.10); --c-line-2: rgba(0,0,0,0.18);
  --ev-green:#1f7a45; --ev-amber:#8a5e00; --ev-blue:#2b5aa8; --ev-mut-soft: rgba(0,0,0,0.05);
}

/* filter chips */
.ev-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.ev-chip { padding: 0.42rem 0.9rem; border-radius: 999px; border: 1px solid var(--c-line-2); background: var(--ink); color: var(--muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.ev-chip:hover { color: var(--white); }
.ev-chip.on { background: var(--white); color: var(--black); border-color: var(--white); }

/* section label */
.ev-sec { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-dark); font-weight: 600; margin: 1.6rem 0 0.8rem; display: flex; align-items: center; gap: 0.6rem; }
.ev-sec:first-child { margin-top: 0; }
.ev-sec .n { background: var(--ev-mut-soft); color: var(--muted); border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.7rem; }

/* event card */
.ev-card { background: var(--ink); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; margin-bottom: 0.85rem; transition: border-color 0.15s var(--ease); }
.ev-card:hover { border-color: var(--c-line-2); }
.ev-card.is-past { opacity: 0.62; }
.ev-card.is-cancel { opacity: 0.6; }
.ev-card.is-cancel .ev-titlerow h3 { text-decoration: line-through; }
.ev-cardbody { padding: 1rem 1.1rem; display: flex; gap: 1.1rem; align-items: flex-start; cursor: pointer; text-align: left; width: 100%; background: none; border: 0; color: inherit; font: inherit; }
.ev-date { width: 58px; flex: none; text-align: center; border-radius: 10px; border: 1px solid var(--c-line-2); overflow: hidden; background: var(--black); }
.ev-date .mo { background: var(--red); color: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; padding: 0.18rem 0; text-transform: uppercase; }
.ev-date.tbd .mo { background: var(--smoke); color: var(--muted); }
.ev-date .dy { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; padding: 0.25rem 0 0.05rem; }
.ev-date .dow { font-size: 0.62rem; color: var(--muted); padding-bottom: 0.35rem; }
.ev-main { flex: 1; min-width: 0; }
.ev-titlerow { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.ev-titlerow h3 { margin: 0; font-size: 1.02rem; font-family: var(--font-display); font-weight: 600; }
.ev-desc { color: var(--muted); font-size: 0.86rem; margin: 0.2rem 0; }
.ev-meta { color: var(--muted); font-size: 0.82rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.45rem; }
.ev-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.ev-meta .icn { width: 14px; height: 14px; opacity: 0.7; }
.ev-aside { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; min-width: 118px; }
/* On a phone the three columns squeezed the title into a sliver: the date sits beside a full-width title (its badges
   under it), the description and details run the card's width, and the status and action share a footer row. */
@media (max-width: 640px) {
  .sched .ev-lead { display: none; } /* the page header already says it */
  .ev-cardbody { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 0.85rem; row-gap: 0.15rem; padding: 0.9rem 0.95rem; }
  .ev-date { width: 52px; grid-row: 1; }
  .ev-main { display: contents; }
  .ev-titlerow { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
  .ev-titlerow h3 { flex-basis: 100%; font-size: 1.05rem; line-height: 1.2; }
  .ev-desc, .ev-meta { grid-column: 1 / -1; }
  .ev-desc { margin: 0.55rem 0 0; }
  .ev-aside { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--c-line); }
  .ev-aside > :last-child { margin-left: auto; }
}

/* badges */
.ev-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-display); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.ev-badge.is-poll { background: var(--ev-amber-soft); color: var(--ev-amber); }
.ev-badge.is-sched { background: var(--ev-green-soft); color: var(--ev-green); }
.ev-badge.is-done { background: var(--ev-mut-soft); color: var(--muted); }
.ev-badge.is-cancel { background: rgba(209,29,43,0.16); color: #ffb3b3; }
.ev-badge.is-draft { background: var(--ev-mut-soft); color: var(--muted); }
.ev-badge.is-rank { background: rgba(212,162,78,0.16); color: #e6c06a; }
.ev-badge.is-type { background: var(--ev-blue-soft); color: var(--ev-blue); }
[data-theme="light"] .ev-badge.is-cancel { background: rgba(209,29,43,0.12); color: #b3121f; }
[data-theme="light"] .ev-badge.is-rank { color: #8a5e00; }

/* detail */
.ev-back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.85rem; font-weight: 600; background: none; border: 0; padding: 0; margin-bottom: 1.1rem; cursor: pointer; font-family: inherit; }
.ev-back:hover { color: var(--red); }
.ev-head h2 { margin: 0.4rem 0 0; font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; }
.ev-detail-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; color: var(--muted); font-size: 0.88rem; margin-top: 0.7rem; }
.ev-detail-meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
.ev-detail-meta .icn { width: 15px; height: 15px; opacity: 0.75; }
.ev-grid { display: grid; grid-template-columns: 1fr 300px; gap: 1.3rem; margin-top: 1.4rem; align-items: start; }
.ev-h4 { font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-dark); font-weight: 600; margin: 0 0 0.8rem; }
.ev-prose { color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.ev-prose strong { color: var(--white); }
.ev-agenda { list-style: none; margin: 0; padding: 0; counter-reset: ag; }
.ev-agenda li { position: relative; padding: 0.65rem 0 0.65rem 2.4rem; border-bottom: 1px solid var(--c-line); counter-increment: ag; }
.ev-agenda li:last-child { border-bottom: none; }
.ev-agenda li::before { content: counter(ag); position: absolute; left: 0; top: 0.6rem; width: 24px; height: 24px; border-radius: 50%; background: rgba(var(--red-rgb), 0.14); color: var(--red); font-size: 0.72rem; font-weight: 800; display: grid; place-items: center; }
.ev-agenda .t { font-weight: 600; font-size: 0.92rem; }
.ev-agenda .d { color: var(--muted); font-size: 0.82rem; }
.ev-rsvp { position: sticky; top: 1rem; }
.ev-rsvp__count { font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; }
.ev-rsvp__count small { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.ev-atts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.8rem; }
.ev-att { width: 30px; height: 30px; border-radius: 50%; background: var(--smoke); border: 1px solid var(--c-line-2); display: grid; place-items: center; font-size: 0.66rem; font-weight: 700; }

/* poll response */
.ev-polldate { border: 1px solid var(--c-line); border-radius: 12px; padding: 0.9rem 1.05rem; margin-bottom: 0.8rem; background: var(--ink); }
.ev-polldate.picked { border-color: rgba(40,160,80,0.5); box-shadow: inset 0 0 0 1px rgba(40,160,80,0.22); }
.ev-poll-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ev-dt { font-weight: 700; font-size: 0.98rem; }
.ev-dt small { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 500; margin-top: 0.1rem; }
.ev-avset { display: flex; gap: 0.5rem; }
.ev-avbtn { border: 1px solid var(--c-line-2); background: var(--black); color: var(--muted); padding: 0.5rem 0.95rem; border-radius: 9px; font-size: 0.82rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.ev-avbtn.on[data-v="yes"] { background: #2f9e5c; border-color: #2f9e5c; color: #fff; }
.ev-avbtn.on[data-v="maybe"] { background: #d9a441; border-color: #d9a441; color: #1a1205; }
.ev-avbtn.on[data-v="no"] { background: var(--red); border-color: var(--red); color: #fff; }
.ev-polldate .cmt { margin-top: 0.75rem; }

/* admin: segmented filter */
.ev-seg { display: inline-flex; border: 1px solid var(--c-line-2); border-radius: 9px; overflow: hidden; }
.ev-seg button { background: var(--ink); border: 0; color: var(--muted); padding: 0.5rem 0.95rem; font-size: 0.82rem; font-weight: 600; border-right: 1px solid var(--c-line-2); cursor: pointer; font-family: inherit; }
.ev-seg button:last-child { border-right: 0; }
.ev-seg button.on { background: var(--ink-soft); color: var(--white); }
.ev-rowacts { display: flex; gap: 0.4rem; justify-content: flex-end; }

/* admin: form */
.ev-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.ev-form-grid .full { grid-column: 1 / -1; }
.ev-mode { display: flex; gap: 0.8rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.ev-mode-card { flex: 1; min-width: 220px; border: 1px solid var(--c-line-2); border-radius: 12px; padding: 0.9rem 1rem; background: var(--ink); cursor: pointer; }
.ev-mode-card.on { border-color: var(--red); background: rgba(var(--red-rgb), 0.1); }
.ev-mode-card .mt { font-weight: 700; display: flex; align-items: center; gap: 0.6rem; }
.ev-mode-card .md { font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; }
.ev-radio { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--c-line-2); flex: none; }
.ev-mode-card.on .ev-radio { border-color: var(--red); background: radial-gradient(circle, var(--red) 42%, transparent 46%); }
.ev-rows .ev-row { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.6rem; }
.ev-rows .ev-row .input { flex: 1; }
.ev-iconbtn { background: var(--ink); border: 1px solid var(--c-line-2); color: var(--muted); width: 38px; height: 38px; border-radius: 9px; flex: none; display: grid; place-items: center; cursor: pointer; }
.ev-iconbtn:hover { color: var(--red); border-color: var(--red); }
.ev-iconbtn .icn { width: 16px; height: 16px; }
.ev-additem { background: transparent; border: 1px dashed var(--c-line-2); color: var(--muted); padding: 0.55rem; border-radius: 9px; width: 100%; font-weight: 600; font-size: 0.82rem; cursor: pointer; font-family: inherit; }
.ev-additem:hover { border-color: var(--red); color: var(--white); }
.ev-gatehelp { background: rgba(212,162,78,0.12); border: 1px solid rgba(212,162,78,0.3); border-radius: 10px; padding: 0.75rem 0.9rem; font-size: 0.8rem; color: #e3c893; margin-top: 0.5rem; display: flex; gap: 0.6rem; }
[data-theme="light"] .ev-gatehelp { color: #7a5600; }
.ev-gatehelp .icn { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.ev-foot { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--c-line); flex-wrap: wrap; }

/* admin: tally */
.ev-note { background: var(--ink); border: 1px dashed var(--c-line-2); border-radius: 12px; padding: 0.85rem 1rem; font-size: 0.85rem; color: var(--muted); display: flex; gap: 0.7rem; align-items: flex-start; margin: 1rem 0 1.2rem; }
.ev-note .icn { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--red); }
.ev-note b { color: var(--white); }
.ev-tally { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--ink); }
.ev-tally table { width: 100%; border-collapse: collapse; min-width: 520px; }
.ev-tally th, .ev-tally td { padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--c-line); font-size: 0.84rem; text-align: center; }
.ev-tally th { background: var(--ink-soft); font-size: 0.7rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.ev-tally th.mem, .ev-tally td.mem { text-align: left; font-weight: 600; }
.ev-tally td.mem small { display: block; color: var(--muted); font-weight: 500; font-size: 0.72rem; }
.ev-tally .best { background: var(--ev-green-soft); }
.ev-tally th.best { background: rgba(40,160,80,0.22); color: var(--ev-green); }
.ev-cell { display: inline-flex; width: 25px; height: 25px; border-radius: 7px; align-items: center; justify-content: center; font-weight: 800; font-size: 0.72rem; }
.ev-cell.yes { background: #2f9e5c; color: #fff; }
.ev-cell.maybe { background: #d9a441; color: #1a1205; }
.ev-cell.no { background: rgba(209,29,43,0.25); color: #ffb3b3; }
.ev-cell.none { background: var(--smoke); color: var(--muted-dark); }
.ev-tally tfoot td { font-weight: 800; background: var(--ink-soft); }
.ev-lockrow { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.1rem; }
.ev-lockcard { flex: 1; min-width: 190px; border: 1px solid var(--c-line-2); border-radius: 12px; padding: 0.9rem 1rem; background: var(--ink); }
.ev-lockcard.best { border-color: #2f9e5c; background: var(--ev-green-soft); }
.ev-lockcard .lc-dt { font-weight: 700; font-size: 0.94rem; }
.ev-lockcard .lc-sc { font-size: 0.8rem; color: var(--muted); margin: 0.35rem 0 0.7rem; }
.ev-comments .ev-cmt { display: flex; gap: 0.7rem; padding: 0.65rem 0; border-bottom: 1px solid var(--c-line); }
.ev-comments .ev-cmt:last-child { border: none; }
.ev-cmt .who { font-weight: 600; font-size: 0.84rem; }
.ev-cmt .who span { color: var(--muted); font-weight: 500; }
.ev-cmt .txt { color: var(--muted); font-size: 0.84rem; }

.ev-empty { color: var(--muted-dark); font-size: 0.86rem; padding: 0.5rem 0.1rem; }

@media (max-width: 820px) {
  .ev-grid { grid-template-columns: 1fr; }
  .ev-form-grid { grid-template-columns: 1fr; }
  .ev-rsvp { position: static; }
}

/* -----------------------------------------------------------
   Scheduling — console cosmetics: tighter, cleaner, "clinical".
   Retunes the marketing .btn into a compact, sentence-case
   control ONLY inside .sched (member + admin schedule pages);
   the marketing site + other consoles are untouched.
   ----------------------------------------------------------- */
.sched .btn {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 0.84rem;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 9px;
  border-width: 1px;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.sched .btn:hover { transform: none; }
.sched .btn--primary { border-color: var(--red); }
.sched .btn--primary:hover { box-shadow: none; background: var(--red-dark); border-color: var(--red-dark); }
.sched .btn--ghost { border-color: var(--c-line-2); color: var(--white); background: transparent; }
.sched .btn--ghost:hover { border-color: var(--muted); color: var(--white); background: var(--ev-mut-soft); }
.sched .btn--danger { background: #c62832; color: #fff; border-color: #c62832; }

/* Compact table row actions + subtle icon delete (no more big red circle) */
.sched .ev-rowacts { gap: 0.4rem; align-items: center; }
.sched .ev-rowacts .btn { padding: 0.38rem 0.72rem; font-size: 0.8rem; }
.sched .ev-rowacts .ev-iconbtn { width: 32px; height: 32px; border-radius: 8px; }
.sched .ev-rowacts .ev-iconbtn .icn { width: 15px; height: 15px; }
.sched .ev-del:hover { border-color: var(--red); color: var(--red); background: rgba(209,29,43,0.08); }

/* Tighter, quieter table + segmented filter */
.sched .admin-table { font-size: 0.88rem; }
.sched .admin-table th { font-size: 0.64rem; letter-spacing: 0.09em; color: var(--muted-dark); padding: 0.7rem 0.9rem; }
.sched .admin-table td { padding: 0.75rem 0.9rem; vertical-align: middle; }
.sched .admin-table tbody tr { transition: background 0.12s var(--ease); }
.sched .admin-table tbody tr:hover td { background: var(--ev-mut-soft); }
.sched .admin-table .evname strong { font-weight: 600; }
.sched .ev-seg { border-radius: 9px; }
.sched .ev-seg button { padding: 0.42rem 0.85rem; font-size: 0.8rem; }
.sched .ev-badge { font-size: 0.6rem; letter-spacing: 0.05em; padding: 0.18rem 0.5rem; }

/* Softer, tighter cards in the console forms/screens */
.sched .card { border-radius: 12px; }

/* Poll tally — per-member response table (one row per member, full width) */
.sched .ev-badge.is-maybe { background: var(--ev-amber-soft); color: var(--ev-amber); }
.sched .ev-badge.is-none { background: var(--ev-mut-soft); color: var(--muted-dark); }
.sched .ev-mscroll { overflow-x: auto; }
.sched .ev-mtable { width: 100%; }
.sched .ev-mtable td { vertical-align: top; }
.sched .ev-mtable .ev-mwho { white-space: nowrap; }
.sched .ev-mtable .ev-mwho strong { font-weight: 600; }
.sched .ev-mrank { display: block; color: var(--muted); font-size: 0.76rem; margin-top: 0.1rem; }
.sched .ev-mtable th:not(:first-child), .sched .ev-mtable td:not(:first-child) { white-space: nowrap; }
.sched .ev-mtable th.best { background: var(--ev-green-soft); color: var(--ev-green); }
.sched .ev-mtable td.best { background: var(--ev-green-soft); }
.sched .ev-mcmt { display: block; color: var(--muted); font-size: 0.74rem; font-style: italic; margin-top: 0.3rem; white-space: normal; max-width: 260px; }

/* ===========================================================
   THE GUARDIAN — community & messaging hub (SPEC-the-guardian).
   Namespaced .grd, re-tokenized to the shared design system. Two
   layouts (Channels rail + Tabs) over shared components.
   =========================================================== */
.app-content.grd-wrap { padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.grd-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; flex: none; padding: 0.7rem clamp(1rem, 2.5vw, 1.6rem); border-bottom: 1px solid var(--c-line); }
.grd-actrow { display: flex; align-items: center; gap: 0.4rem; }
.grd { display: flex; flex: 1; min-height: 0; width: 100%; overflow: hidden; }
.grd-nav { flex: none; display: flex; flex-direction: column; min-height: 0; }
.grd-main { flex: 1; min-width: 0; min-height: 0; display: flex; background: var(--ink); }

/* header buttons + layout toggle */
.grd-headbtns { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.grd-lswitch { display: inline-flex; align-items: center; gap: 0.5rem; }
.grd-lseg-lbl { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--muted-dark); }
.grd-lseg { display: inline-flex; background: var(--black); border: 1px solid var(--c-line); border-radius: 10px; padding: 3px; gap: 2px; }
.grd-lseg button { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: 0.78rem; padding: 0.4rem 0.65rem; border-radius: 8px; cursor: pointer; }
.grd-lseg button .icn { width: 15px; height: 15px; }
.grd-lseg button:hover:not(.is-active) { color: var(--white); }
.grd-lseg button.is-active { background: var(--ink); color: var(--red); box-shadow: 0 1px 2px rgba(0,0,0,0.14); }
[data-theme="light"] .grd-lseg button.is-active { color: var(--red-dark); }
.btn--sm { padding: 0.42rem 0.7rem; font-size: 0.8rem; }

/* ---- channels rail ---- */
.grd--channels .grd-nav { width: 264px; background: var(--black); border-right: 1px solid var(--c-line-2); overflow-y: auto; }
.grd-rail-head { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1rem; font-family: var(--font-display); font-weight: 700; color: var(--white); border-bottom: 1px solid var(--c-line); }
.grd-rail-head .icn { width: 18px; height: 18px; color: var(--red); }
/* section LABELS: flush, quiet, non-interactive — visually distinct from rows */
.grd-sec { font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dark); font-weight: 700; padding: 1rem 1.1rem 0.4rem; }
/* channel ROWS: inset, rounded, hover + selected states so they read as clickable */
.grd-ch { display: flex; align-items: center; gap: 0.55rem; width: auto; text-align: left; background: none; border: 0; color: var(--muted); font: inherit; font-size: 0.86rem; font-weight: 500; padding: 0.45rem 0.6rem; margin: 0 0.5rem 1px; border-radius: 8px; cursor: pointer; transition: background 0.12s var(--ease), color 0.12s var(--ease); }
.grd-ch:hover { background: var(--ink); color: var(--white); }
.grd-ch .h { display: inline-flex; opacity: 0.6; flex: none; }
.grd-ch .h .icn { width: 15px; height: 15px; }
.grd-ch:hover .h, .grd-ch.is-sel .h { opacity: 1; }
.grd-ch .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grd-ch:hover { background: var(--ink-soft); color: var(--white); }
.grd-ch.is-sel { background: var(--red); color: #fff; }
.grd-ch.is-sel .h { opacity: 1; }
.grd-ch .nb { margin-left: auto; background: var(--red); color: #fff; border-radius: 999px; font-size: 0.62rem; font-weight: 800; padding: 0.05rem 0.4rem; }
.grd-ch.is-sel .nb { background: #fff; color: var(--red); }
.grd-add { display: flex; align-items: center; gap: 0.4rem; width: auto; text-align: left; background: none; border: 0; color: var(--muted-dark); font: inherit; font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.6rem; margin: 0.1rem 0.5rem 0.3rem; border-radius: 8px; cursor: pointer; }
.grd-add:hover { color: var(--white); background: var(--ink); }
.grd-add .icn { width: 13px; height: 13px; }
.grd-empty-sm { color: var(--muted-dark); font-size: 0.78rem; padding: 0.2rem 1rem 0.4rem; }

/* ---- tabs bar ---- */
.grd--tabs .grd-nav { width: 100%; border-bottom: 1px solid var(--c-line); background: var(--ink); }
.grd.grd--tabs { flex-direction: column; }
.grd-tabbar { display: flex; gap: 0.2rem; padding: 0 clamp(0.6rem, 2vw, 1.4rem); overflow-x: auto; }
.grd-tabbar button { display: inline-flex; align-items: center; gap: 0.4rem; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; font-size: 0.84rem; padding: 0.8rem 0.7rem; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.grd-tabbar button .icn { width: 15px; height: 15px; }
.grd-tabbar button.is-active { color: var(--red); border-bottom-color: var(--red); }
.grd-tabbar .nb { background: var(--red); color: #fff; border-radius: 999px; font-size: 0.62rem; font-weight: 800; padding: 0.05rem 0.4rem; }
.grd--tabs .grd-main { min-height: 0; }
.grd-tabcols { display: flex; flex: 1; min-height: 0; width: 100%; }
.grd-listcol { width: 340px; flex: none; border-right: 1px solid var(--c-line); overflow-y: auto; background: var(--ink); }
.grd-listhint { padding: 0.8rem 1rem; color: var(--muted); font-size: 0.8rem; border-bottom: 1px solid var(--c-line); }
.grd-threadcol { flex: 1; min-width: 0; display: flex; }

/* ---- conversation rows (tabs list) ---- */
.grd-crow { display: flex; gap: 0.7rem; align-items: flex-start; width: 100%; text-align: left; padding: 0.75rem 1rem; border: 0; border-bottom: 1px solid var(--c-line); background: none; cursor: pointer; }
.grd-crow:hover { background: var(--ink-soft); }
.grd-crow.is-sel { background: rgba(var(--red-rgb), 0.14); }
.grd-glyph { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.grd-glyph .icn { width: 18px; height: 18px; }
.gt-broadcast { background: #b5701e; } .gt-group { background: #2b6fd0; } .gt-dm { background: #6a3fb0; }
.grd-cmain { min-width: 0; flex: 1; }
.grd-ctitle { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; color: var(--white); }
.grd-clast { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }
.grd-cmeta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.grd-ctime { color: var(--muted-dark); font-size: 0.7rem; }
.grd-unread { background: var(--red); color: #fff; border-radius: 999px; font-size: 0.62rem; font-weight: 800; padding: 0.05rem 0.42rem; }
.grd-tag { font-size: 0.55rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.08rem 0.36rem; border-radius: 999px; }
.grd-tag.cast { background: rgba(181,112,30,0.2); color: #d29a51; }
.grd-tag.auto { background: rgba(43,111,208,0.2); color: #6ba0e6; }
.grd-tag.grp { background: rgba(106,63,176,0.2); color: #a583e0; }
.grd-tag.youth { background: rgba(40,160,80,0.2); color: #7fd99a; }

/* ---- thread ---- */
.grd-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.grd-thead { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--c-line); }
.grd-thead .grd-glyph { width: 34px; height: 34px; border-radius: 10px; }
.grd-thead-t h3 { margin: 0; font-size: 1rem; }
.grd-thead-t .sub { color: var(--muted); font-size: 0.76rem; }
.grd-thead-r { margin-left: auto; display: flex; gap: 0.4rem; }
.grd-tbody { flex: 1; min-height: 0; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.grd-msg { max-width: 78%; display: flex; flex-direction: column; gap: 0.2rem; }
.grd-msg .who { font-size: 0.7rem; color: var(--muted); font-weight: 700; padding: 0 0.3rem; }
.grd-msg .bubble { padding: 0.6rem 0.8rem; border-radius: 14px; font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.grd-msg.them .bubble { background: var(--ink); border: 1px solid var(--c-line); border-top-left-radius: 4px; color: var(--white); }
.grd-msg.me { align-self: flex-end; align-items: flex-end; }
.grd-msg.me .bubble { background: var(--red); color: #fff; border-top-right-radius: 4px; }
.grd-msg .mt { display: flex; align-items: center; gap: 0.4rem; font-size: 0.66rem; color: var(--muted-dark); padding: 0 0.3rem; }
.grd-report { background: none; border: 0; color: var(--muted-dark); cursor: pointer; display: inline-flex; padding: 0; }
.grd-report .icn { width: 12px; height: 12px; }
.grd-report:hover { color: var(--red); }
.grd-cancelbanner { align-self: center; display: flex; align-items: center; gap: 0.5rem; background: rgba(209,29,43,0.14); border: 1px solid rgba(209,29,43,0.4); color: #f0a0aa; border-radius: 12px; padding: 0.7rem 1rem; font-size: 0.86rem; font-weight: 600; text-align: center; max-width: 92%; }
.grd-cancelbanner .icn { width: 16px; height: 16px; flex: none; }
.grd-sysbanner { align-self: center; color: var(--muted); font-size: 0.78rem; background: var(--ink); border: 1px solid var(--c-line); border-radius: 10px; padding: 0.4rem 0.8rem; }
.grd-composer { border-top: 1px solid var(--c-line); padding: 0.75rem 1rem; background: var(--ink); }
.grd-composer.grd-readonly { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-dark); font-size: 0.82rem; }
.grd-composer.grd-readonly .icn { width: 15px; height: 15px; }
.grd-aud { display: flex; align-items: center; gap: 0.4rem; color: var(--muted-dark); font-size: 0.72rem; margin-bottom: 0.5rem; }
.grd-aud .icn { width: 13px; height: 13px; }
.grd-cinput { display: flex; gap: 0.5rem; align-items: center; }
.grd-cinput input { flex: 1; background: var(--black); border: 1px solid var(--c-line-2); border-radius: 999px; color: var(--white); padding: 0.65rem 1rem; font: inherit; font-size: 0.9rem; }
.grd-cinput input:focus { outline: none; border-color: var(--red); }
.grd-send { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--red); color: #fff; border: 0; cursor: pointer; display: grid; place-items: center; }
.grd-send .icn { width: 17px; height: 17px; }
.grd-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; color: var(--muted); text-align: center; padding: 2.5rem 1.5rem; min-height: 16rem; }
.grd-empty__ic { width: 56px; height: 56px; border-radius: 16px; background: rgba(var(--red-rgb), 0.1); color: var(--red); display: grid; place-items: center; margin-bottom: 0.35rem; }
.grd-empty__ic .icn { width: 26px; height: 26px; }
.grd-empty h3 { font-family: var(--font-display); font-size: 1.15rem; color: var(--white); margin: 0; }
.grd-empty p { font-size: 0.88rem; line-height: 1.55; max-width: 44ch; margin: 0; color: var(--muted); }
.grd-empty__btn { margin-top: 0.7rem; }
.grd-tabempty { flex: 1; display: flex; min-height: 60vh; }

/* ---- hub panels (Q&A + media) ---- */
.grd-panel { flex: 1; overflow-y: auto; padding: clamp(1rem, 3vw, 1.8rem); }
.grd-panel-top { display: flex; align-items: flex-start; gap: 1rem; }
.grd-panel-top > div { flex: 1; }
.grd-panel-h { margin: 0 0 0.2rem; font-family: var(--font-display); font-size: 1.3rem; }
.grd-panel-sub { color: var(--muted); font-size: 0.82rem; margin: 0 0 1.2rem; }
.qacard { display: flex; align-items: flex-start; gap: 0.8rem; background: var(--ink); border: 1px solid var(--c-line); border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 0.6rem; }
.qacard .grd-glyph { width: 34px; height: 34px; border-radius: 10px; }
.qacard-main { flex: 1; min-width: 0; }
.qacard .qt { font-weight: 600; font-size: 0.92rem; }
.qacard .qm { color: var(--muted); font-size: 0.78rem; margin-top: 0.15rem; }
.grd-mediagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; }
.grd-mcard { background: var(--ink); border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; }
.grd-thumb { aspect-ratio: 1; background: var(--ink-soft); display: grid; place-items: center; color: var(--muted-dark); }
.grd-thumb img, .grd-thumb video { width: 100%; height: 100%; object-fit: cover; }
.grd-thumb .ph .icn { width: 28px; height: 28px; }
.grd-mc { padding: 0.6rem 0.7rem; }
.grd-mc .mn { font-weight: 600; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grd-mc .mb { color: var(--muted-dark); font-size: 0.72rem; margin: 0.1rem 0 0.3rem; }

/* ---- compose picker (modal) ---- */
.grd-picklist { max-height: 220px; overflow-y: auto; border: 1px solid var(--c-line); border-radius: 10px; margin-top: 0.5rem; }
.grd-note { margin: 0.2rem 0 0.5rem; font-size: 0.85rem; color: var(--muted); }
.grd-pick { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--c-line); font-size: 0.86rem; cursor: pointer; }
.grd-pick:last-child { border-bottom: 0; }
.grd-pick input { accent-color: var(--red); }
.grd-seg { display: inline-flex; border: 1px solid var(--c-line-2); border-radius: 8px; overflow: hidden; }
.grd-seg button { background: var(--ink-soft); border: 0; color: var(--muted); padding: 0.5rem 0.9rem; font: inherit; font-size: 0.82rem; cursor: pointer; }
.grd-seg button.is-active { background: var(--red); color: #fff; }

/* Viewport-lock the whole Guardian page (app-like: no body scroll, panes scroll
   internally). Scoped to .grd-body so every other page keeps normal body scroll.
   100dvh handles mobile browser chrome; 100vh is the fallback. */
.grd-body { overflow: hidden; }
.grd-body .app { height: 100vh; height: 100dvh; min-height: 0; }
.grd-body .app-main { min-height: 0; overflow: hidden; }
.grd-body .app-content.grd-wrap { flex: 1; min-height: 0; }
/* A showcase dojo's banner (lib/showcase.js) sits above the app: the app gets the rest of the window, so the message
   box isn't pushed below the fold. */
.grd-body:has(> .showcase-banner) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.grd-body:has(> .showcase-banner) > .app { flex: 1; height: auto; }
.grd-body:has(> .showcase-banner) .sidebar { height: 100%; }

/* Tablet (761–900px): sidebar is a drawer; keep the two-pane but let it use full width. */
@media (max-width: 900px) and (min-width: 761px) {
  .grd--channels .grd-nav { width: 240px; }
  .grd-listcol { width: 300px; }
}

/* Phones (≤760px): single-pane drill-in — the JS renders an inbox (.grd--mobile /
   .grd-mobilelist) or a full-screen thread/panel with a back button. */
.grd--mobile { flex-direction: column; }
.grd-mobilelist { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.grd--mobile .grd-main { flex: 1; min-width: 0; min-height: 0; width: 100%; }
.grd-mobilebar { display: flex; gap: 0.5rem; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--c-line); position: sticky; top: 0; background: var(--black); z-index: 3; }
.grd-mobilebar .btn { flex: 1; min-width: 0; justify-content: center; white-space: nowrap; padding-left: 0.6rem; padding-right: 0.6rem; }
.grd-mobilebar .btn span { overflow: hidden; text-overflow: ellipsis; }
.grd-mobilebar .grd-iconact { flex: 0 0 auto; width: 46px; padding: 0; }
.grd-hubrow { display: flex; gap: 0.6rem; padding: 0.8rem 0.9rem 0.4rem; }
.grd-hubbtn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.45rem; background: var(--ink); border: 1px solid var(--c-line); border-radius: 12px; color: var(--white); font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.75rem 0.5rem; cursor: pointer; }
.grd-hubbtn .icn { width: 16px; height: 16px; color: var(--red); flex: none; }
.grd-msec { font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-dark); font-weight: 700; padding: 1rem 0.9rem 0.35rem; }
.grd-mobilelist .grd-crow { padding: 0.8rem 0.9rem; }
.grd-mobilelist .grd-clast { max-width: 62vw; }
.grd-backbar { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0 0.9rem; }
.grd-backbar span { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.grd-back { flex: none; }
@media (max-width: 760px) {
  /* give the thread body / composer comfortable touch sizing */
  .grd-tbody { padding: 0.9rem; }
  .grd-cinput input { padding: 0.7rem 1rem; font-size: 16px; } /* 16px avoids iOS zoom-on-focus */
  .grd-msg { max-width: 86%; }
  .grd-panel { padding: 0.9rem 1rem 1.4rem; }
}

/* ===========================================================
   STUDY & BOOK-QUIZ ENGINE — member (.sq-*) + admin (.sqa-*),
   re-tokenized to the shared system. (SPEC-study-quiz-engine)
   =========================================================== */
/* difficulty + type chips (shared) */
.diff { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 999px; }
.d-easy { background: rgba(40,160,80,0.18); color: #7fd99a; }
.d-medium { background: rgba(230,170,40,0.18); color: #e6c06a; }
.d-hard { background: rgba(209,29,43,0.18); color: #f0a0aa; }
.sq-typ { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--smoke); color: var(--muted); }
.sq-typ.ai { background: rgba(122,92,192,0.22); color: #b7a2e6; }

/* home stat cards */
.sq-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin: 0.2rem 0 1.5rem; }
.sq-stat { padding: 1rem 1.15rem; }
.sq-stat .n { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--white); display: inline-flex; align-items: center; gap: 0.3rem; }
.sq-stat .l { color: var(--muted); font-size: 0.8rem; font-weight: 600; margin-top: 0.45rem; }
.sq-flame .icn { width: 18px; height: 18px; color: #e6c06a; }

/* engaging empty reading-path state */
.sq-empty { text-align: center; padding: 2.4rem 1.5rem; border: 1px dashed var(--c-line-2); border-radius: var(--radius); background: var(--ink); }
.sq-empty__ic { width: 56px; height: 56px; margin: 0 auto 0.9rem; border-radius: 16px; background: rgba(var(--red-rgb), 0.12); color: var(--red); display: grid; place-items: center; }
.sq-empty__ic .icn { width: 26px; height: 26px; }
.sq-empty__h { font-family: var(--font-display); font-size: 1.35rem; color: var(--white); margin: 0 0 0.5rem; }
.sq-empty__p { color: var(--muted); font-size: 0.9rem; line-height: 1.6; max-width: 54ch; margin: 0 auto 1.2rem; }
.sq-empty__acts { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.sq-empty__hint { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted-dark); font-size: 0.8rem; background: var(--ink-soft); border: 1px solid var(--c-line); border-radius: 999px; padding: 0.4rem 0.9rem; }
.sq-empty__hint .icn { width: 15px; height: 15px; flex: none; }

/* home mode tiles */
.sq-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.8rem; margin-bottom: 1.6rem; }
.sq-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; text-align: left; color: var(--white); font: inherit; background: var(--ink); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1rem; cursor: pointer; transition: border-color 0.15s var(--ease), transform 0.15s var(--ease); }
.sq-mode:hover { border-color: var(--red); transform: translateY(-1px); }
.sq-mi { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; margin-bottom: 0.5rem; }
.sq-mi .icn { width: 19px; height: 19px; }
.sq-mt { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.sq-md { color: var(--muted); font-size: 0.8rem; line-height: 1.4; }

/* book rows (path list) */
.sq-bookrow { display: flex; gap: 0.9rem; align-items: center; padding: 0.9rem 1rem; border-bottom: 1px solid var(--c-line); cursor: pointer; }
.sq-bookrow:last-child { border-bottom: 0; }
.sq-bookrow:hover { background: var(--ink-soft); }
.sq-cover { width: 44px; height: 58px; flex: none; border-radius: 8px; background: linear-gradient(140deg, #2b3550, #4a5878); display: grid; place-items: center; color: #dfe4ea; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.sq-cover .icn { width: 22px; height: 22px; }
.sq-cover.lg { width: 92px; height: 124px; }
.sq-cover.lg .icn { width: 40px; height: 40px; }
.sq-bookinfo { flex: 1; min-width: 0; }
.sq-bookinfo .bt { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.sq-bookinfo .ba { color: var(--muted); font-size: 0.82rem; }
.sq-band { font-size: 0.55rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--smoke); color: var(--muted); margin-left: 0.35rem; vertical-align: middle; }
.sq-prog { display: flex; flex-direction: column; gap: 0.35rem; min-width: 160px; }
.sq-pbar { height: 7px; border-radius: 999px; background: var(--smoke); overflow: hidden; }
.sq-pfill { height: 100%; border-radius: 999px; }
.sq-pmeta { font-size: 0.74rem; color: var(--muted); font-weight: 600; }
.sq-status { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.18rem 0.5rem; border-radius: 999px; white-space: nowrap; }
/* Phones: title on its own line, then progress and status on the next, never squeezed or pushed off the card. */
@media (max-width: 560px) {
  .sq-bookrow { flex-wrap: wrap; }
  .sq-bookinfo { flex: 1 1 calc(100% - 4rem); }
  .sq-bookinfo .bt { overflow-wrap: anywhere; }
  .sq-prog { flex: 1 1 auto; min-width: 0; }
}
.sq-status.done { background: rgba(40,160,80,0.18); color: #7fd99a; }
.sq-status.prog { background: rgba(230,170,40,0.18); color: #e6c06a; }
.sq-status.new { background: var(--smoke); color: var(--muted); }

/* book track */
.sq-trackhead { display: flex; gap: 1.2rem; margin-bottom: 1.4rem; }
.sq-h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 0.2rem; }
.sq-ta { color: var(--muted); font-size: 0.86rem; margin-bottom: 0.8rem; }
.sq-steps { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.sq-step { display: flex; align-items: center; gap: 0.6rem; background: var(--ink); border: 1px solid var(--c-line); border-radius: 11px; padding: 0.6rem 0.9rem; }
.sq-step .dot { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; font-weight: 800; color: #fff; background: var(--c-line-2); }
.sq-step .dot .icn { width: 14px; height: 14px; }
.sq-step.done .dot { background: #1f7a45; }
.sq-step.active .dot { background: var(--red); }
.sq-step b { font-size: 0.86rem; }
.sq-step small { display: block; color: var(--muted); font-size: 0.72rem; }
.sq-trackbtns { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
.sq-histrow { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--c-line); }
.sq-histrow:last-child { border-bottom: 0; }
.sq-histrow .hd { font-weight: 600; font-size: 0.88rem; }
.sq-histrow .hm { color: var(--muted); font-size: 0.76rem; text-transform: capitalize; }
.sq-pending { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.03em; padding: 0.18rem 0.5rem; border-radius: 999px; background: rgba(122,92,192,0.22); color: #b7a2e6; }
.sq-score { font-size: 0.78rem; font-weight: 700; color: var(--muted); }

/* quiz taking */
.sq-quizwrap { max-width: 720px; margin: 0 auto; }
.sq-qtop { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.sq-qprog { flex: 1; height: 7px; border-radius: 999px; background: var(--smoke); overflow: hidden; }
.sq-qprog .f { height: 100%; background: var(--red); border-radius: 999px; transition: width 0.25s var(--ease); }
.sq-qn { font-size: 0.76rem; color: var(--muted); font-weight: 700; }
.sq-qcard { padding: 1.6rem 1.6rem; }
.sq-qmeta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; }
.sq-qtext { font-size: 1.15rem; font-weight: 600; line-height: 1.4; margin-bottom: 1.2rem; }
.sq-choice { display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left; border: 1.5px solid var(--c-line-2); border-radius: 12px; padding: 0.85rem 1rem; margin-bottom: 0.6rem; cursor: pointer; font-size: 0.95rem; background: var(--ink); color: var(--white); }
.sq-choice:hover { border-color: var(--muted); }
.sq-choice.sel { border-color: var(--red); background: rgba(var(--red-rgb), 0.1); }
.sq-choice .k { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--smoke); display: grid; place-items: center; font-weight: 800; font-size: 0.72rem; }
.sq-choice.sel .k { background: var(--red); color: #fff; }
.sq-written { width: 100%; border: 1.5px solid var(--c-line-2); border-radius: 12px; padding: 0.9rem; font-family: inherit; font-size: 1rem; min-height: 140px; resize: vertical; background: var(--black); color: var(--white); }
.sq-written:focus { outline: none; border-color: var(--red); }
.sq-wild { display: flex; gap: 0.6rem; background: rgba(122,92,192,0.16); border: 1px solid rgba(122,92,192,0.4); color: #c3b1ea; border-radius: 10px; padding: 0.7rem 0.9rem; font-size: 0.8rem; margin-bottom: 1rem; }
.sq-wild .icn { width: 16px; height: 16px; flex: none; }
.sq-qfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 1.4rem; }

/* results */
.sq-hero { display: flex; gap: 1.2rem; align-items: center; padding: 1.4rem 1.5rem; margin-bottom: 1.2rem; }
.sq-ring { width: 92px; height: 92px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.sq-ring .inner { width: 70px; height: 70px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; text-align: center; }
.sq-ring .inner b { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; }
.sq-ring .inner small { font-size: 0.6rem; color: var(--muted); }
.sq-herolead { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: 0.2rem; }
.sq-herosub { color: var(--muted); font-size: 0.84rem; line-height: 1.5; }
.sq-ritem { padding: 1rem; border-bottom: 1px solid var(--c-line); }
.sq-ritem:last-child { border-bottom: 0; }
.sq-ritem .rq { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.5rem; display: flex; gap: 0.5rem; align-items: baseline; }
.sq-rans { font-size: 0.86rem; color: var(--white); background: var(--ink); border: 1px solid var(--c-line); border-radius: 9px; padding: 0.7rem 0.85rem; white-space: pre-wrap; }
.sq-rans .ok { color: #7fd99a; font-weight: 600; }
.sq-rans .bad { color: #f0a0aa; font-weight: 600; }
.sq-feed { margin-top: 0.5rem; border-radius: 9px; padding: 0.7rem 0.85rem; font-size: 0.82rem; line-height: 1.5; }
.sq-feed.reviewed { background: rgba(40,160,80,0.14); border: 1px solid rgba(40,160,80,0.35); color: #a9e2bd; }
.sq-feed.pending { background: rgba(122,92,192,0.14); border: 1px solid rgba(122,92,192,0.35); color: #c3b1ea; }

/* ---- admin: question bank ---- */
.sqa-qrow { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.9rem 1rem; border-bottom: 1px solid var(--c-line); }
.sqa-qrow:last-child { border-bottom: 0; }
.sqa-qrow.draft { background: rgba(122,92,192,0.07); }
.sqa-qbody { flex: 1; min-width: 0; }
.sqa-qq { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.sqa-qtags { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.sqa-muted { color: var(--muted-dark); font-size: 0.76rem; }
.sqa-choices { color: var(--muted); font-size: 0.8rem; margin-top: 0.4rem; }
.sqa-approve { border: 1px solid var(--c-line-2); background: var(--black); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.72rem; font-weight: 700; cursor: pointer; color: var(--muted); flex: none; }
.sqa-approve.on { background: rgba(40,160,80,0.18); border-color: rgba(40,160,80,0.4); color: #7fd99a; }
.sqa-qact { display: flex; gap: 0.35rem; flex: none; }
.sqa-gen { background: linear-gradient(135deg, rgba(122,92,192,0.16), rgba(122,92,192,0.08)); border: 1px solid rgba(122,92,192,0.4); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; }
.sqa-gen-h { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 700; color: #c3b1ea; margin-bottom: 0.3rem; }
.sqa-gen-h .icn { width: 17px; height: 17px; }
.sqa-gen p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.82rem; }
.sqa-gen-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

/* ---- admin: assign + difficulty ---- */
.sqa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sqa-arow { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; border-top: 1px solid var(--c-line); }
.sqa-arow:first-of-type { border-top: 0; }
.sqa-stepper { display: flex; align-items: center; gap: 0.7rem; font-size: 0.86rem; }
.sqa-stepper button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--c-line-2); background: var(--black); color: var(--white); font-size: 1rem; cursor: pointer; }
.sqa-stepper .v { font-weight: 800; font-size: 1.1rem; min-width: 22px; text-align: center; }
.sqa-diffread { font-weight: 700; margin: 0.6rem 0 0.3rem; }
.sqa-sliderlabels { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted); font-weight: 700; }

/* ---- admin: grading queue ---- */
.sqa-gcard { padding: 1.1rem 1.2rem; margin-bottom: 0.9rem; }
.sqa-gtop { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.sqa-gq { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.5rem; }
.sqa-studentans { background: var(--ink); border: 1px solid var(--c-line); border-radius: 10px; padding: 0.8rem 0.9rem; font-size: 0.88rem; line-height: 1.5; margin-bottom: 0.8rem; white-space: pre-wrap; }
.sqa-airow { display: flex; gap: 0.9rem; align-items: flex-start; background: rgba(122,92,192,0.14); border: 1px solid rgba(122,92,192,0.35); border-radius: 12px; padding: 0.9rem 1rem; }
.sqa-airow .aiscore { text-align: center; flex: none; min-width: 56px; }
.sqa-airow .aiscore b { font-family: var(--font-display); font-size: 1.6rem; color: #c3b1ea; }
.sqa-airow .aiscore small { display: block; font-size: 0.62rem; color: var(--muted); }
.sqa-airow .aifb { flex: 1; font-size: 0.82rem; color: #c3b1ea; line-height: 1.5; }
.sqa-override { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.9rem; flex-wrap: wrap; }
.sqa-override input[type="range"] { flex: 1; min-width: 140px; accent-color: var(--red); }
.sqa-ovread { font-weight: 800; font-size: 1.1rem; min-width: 26px; text-align: center; }

@media (max-width: 860px) {
  .sqa-grid { grid-template-columns: 1fr; }
  .sq-trackhead { flex-direction: column; gap: 0.9rem; }
  .sq-hero { flex-direction: column; text-align: center; }
}

/* ===========================================================
   PARENT / YOUTH — My Family (.fam-*) + Age Groups (.ag-*),
   re-tokenized to the shared system. (SPEC-parent-youth-safety)
   =========================================================== */
.fam-head { display: flex; align-items: center; gap: 1rem; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1rem; }
.fam-sub { color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; }
.fam-parent { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem; margin-bottom: 1.2rem; }
.fam-tag { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--smoke); color: var(--muted); white-space: nowrap; }
.fam-tag.rank { background: var(--smoke); color: var(--muted); }
.fam-tag.group { background: rgba(43,111,208,0.2); color: #6ba0e6; }
.fam-tag.youth { background: rgba(40,160,80,0.2); color: #7fd99a; }
.fam-tag.override { background: rgba(209,29,43,0.2); color: #f0a0aa; }
.fam-tag.own { background: rgba(122,92,192,0.22); color: #b7a2e6; }
.fam-tag.managed { background: rgba(230,170,40,0.2); color: #e6c06a; }
.fam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.9rem; }
.fam-kid { padding: 1rem 1.1rem; }
.fam-kidtop { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.fam-kidav { width: 44px; height: 44px; flex: none; border-radius: 12px; background: linear-gradient(150deg, var(--red), var(--red-dark)); display: grid; place-items: center; color: #fff; }
.fam-kidav .icn { width: 22px; height: 22px; }
.fam-kid h3 { margin: 0; font-size: 1rem; }
.fam-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0 0.7rem; }
.fam-consent { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; }
.fam-consent .icn { width: 15px; height: 15px; }
.fam-consent.ok { color: #7fd99a; }
.fam-consent.pending { color: #e6c06a; }
.fam-kidactions { display: flex; gap: 0.5rem; flex-wrap: wrap; border-top: 1px solid var(--c-line); padding-top: 0.8rem; margin-top: 0.8rem; }
.fam-addtile { border: 1.5px dashed var(--c-line-2); background: transparent; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; color: var(--muted); font-weight: 600; cursor: pointer; min-height: 150px; font: inherit; }
.fam-addtile:hover { border-color: var(--red); color: var(--red); }
.fam-addtile .icn { width: 26px; height: 26px; }
.fam-form { max-width: 620px; }
.fam-autobox { background: var(--ink); border: 1px solid var(--c-line); border-radius: 12px; padding: 0.9rem 1rem; margin: 0.2rem 0 1rem; font-size: 0.85rem; }
.fam-autobox .line { padding: 0.2rem 0; }
.fam-autobox .muted, .fam-autobox .line .muted { color: var(--muted); }
.fam-radio { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.fam-rc { text-align: left; border: 1.5px solid var(--c-line-2); border-radius: 12px; padding: 0.85rem; cursor: pointer; background: var(--ink); color: var(--white); display: flex; flex-direction: column; gap: 0.25rem; }
.fam-rc b { font-size: 0.9rem; }
.fam-rc span { color: var(--muted); font-size: 0.76rem; line-height: 1.4; }
.fam-rc.is-sel { border-color: var(--red); background: rgba(var(--red-rgb), 0.1); }
.fam-formfoot { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.6rem; }
.fam-consentbox { max-width: 680px; }
.fam-disclosure { padding: 1.3rem 1.4rem; margin-bottom: 1rem; }
.fam-disclosure h2 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.fam-clause { display: flex; gap: 0.7rem; padding: 0.7rem 0; border-top: 1px solid var(--c-line); font-size: 0.86rem; line-height: 1.5; }
.fam-clause .n { width: 24px; height: 24px; flex: none; border-radius: 50%; background: rgba(var(--red-rgb), 0.16); color: var(--red); font-weight: 800; display: grid; place-items: center; font-size: 0.72rem; }
.fam-agree { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0; font-size: 0.86rem; line-height: 1.45; cursor: pointer; }
.fam-agree input { width: 18px; height: 18px; margin-top: 0.15rem; flex: none; accent-color: var(--red); cursor: pointer; }
/* guardian family messaging */
.fam-ctxswitch { display: flex; align-items: center; gap: 0.8rem; background: var(--ink); border: 1px solid var(--c-line); border-radius: 12px; padding: 0.7rem 0.9rem; margin-bottom: 1rem; flex-wrap: wrap; }
.fam-ctxswitch .lab { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; color: var(--muted-dark); }
.fam-seg { display: inline-flex; background: var(--black); border: 1px solid var(--c-line); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.fam-seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: 0.8rem; padding: 0.4rem 0.75rem; border-radius: 8px; cursor: pointer; }
.fam-seg button.is-active { background: var(--red); color: #fff; }
.fam-ctxbanner { display: flex; gap: 0.6rem; align-items: center; border-radius: 12px; padding: 0.7rem 0.9rem; font-size: 0.82rem; margin-bottom: 1rem; }
.fam-ctxbanner .icn { width: 18px; height: 18px; flex: none; }
.fam-ctxbanner.self { background: var(--ink); border: 1px solid var(--c-line); color: var(--muted); }
.fam-ctxbanner.self { flex-wrap: wrap; }
.fam-ctxbanner.self > div { flex: 1 1 16rem; }
.fam-ctxbanner .fam-privbtn { flex: none; margin-left: auto; }
.fam-ctxbanner.child { background: rgba(43,111,208,0.14); border: 1px solid rgba(43,111,208,0.35); color: #9cc2ee; }
.fam-remove { margin-left: auto; padding-left: 0.5rem; padding-right: 0.5rem; }
.fam-remove .icn { width: 15px; height: 15px; }
.fam-remove:hover { color: var(--red); border-color: rgba(209,29,43,0.5); }
.fam-legend { display: flex; gap: 0.6rem; background: rgba(122,92,192,0.12); border: 1px solid rgba(122,92,192,0.32); color: #c3b1ea; border-radius: 12px; padding: 0.7rem 0.9rem; font-size: 0.8rem; margin-bottom: 1rem; }
.fam-legend .icn { width: 17px; height: 17px; flex: none; }

/* delegated child overview (read-only) */
.fam-ovtag { font-family: var(--font-body); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-dark); background: var(--ink); border: 1px solid var(--c-line); border-radius: 999px; padding: 0.1rem 0.5rem; margin-left: 0.5rem; vertical-align: middle; }
.fam-ovgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.8rem; margin-bottom: 1.4rem; }
.fam-ovcard { padding: 1rem 1.1rem; }
.fam-ovh { display: flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--muted-dark); margin-bottom: 0.5rem; }
.fam-ovh .icn { width: 15px; height: 15px; color: var(--red); }
.fam-ovbig { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.05; color: var(--white); }
.fam-ovsub { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }
.fam-ovstats { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.6rem; }
.fam-ovstats span { font-size: 0.8rem; color: var(--muted); }
.fam-ovstats b { font-family: var(--font-display); font-size: 1.05rem; color: var(--white); margin-right: 0.15rem; }
.fam-ovlist { display: flex; flex-direction: column; gap: 0.3rem; }
.fam-ovrow { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--muted); }
.fam-ovrow .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--white); }
.fam-ovmuted { font-size: 0.8rem; color: var(--muted-dark); }
.fam-ovpill { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.12rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.fam-ovpill.done { background: rgba(40,160,80,0.18); color: #7fd99a; }
.fam-ovpill.prog { background: rgba(230,170,40,0.18); color: #e6c06a; }
.fam-ovpill.new { background: var(--smoke); color: var(--muted); }
[data-theme="light"] .fam-ovpill.done { color: #1f7a45; }
[data-theme="light"] .fam-ovpill.prog { color: #8a5e00; }
.fam-msgcols { display: flex; gap: 1rem; min-height: 0; }
.fam-convlist { width: 320px; flex: none; overflow: hidden; }
.fam-conv { display: flex; gap: 0.6rem; align-items: center; width: 100%; text-align: left; background: none; color: var(--white); font: inherit; border: 0; border-bottom: 1px solid var(--c-line); padding: 0.7rem 0.9rem; cursor: pointer; }
.fam-conv:hover { background: var(--ink-soft); }
.fam-conv.is-sel { background: rgba(var(--red-rgb), 0.14); }
.fam-cvg { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.fam-cvg .icn { width: 17px; height: 17px; }
.fam-cvg.priv { background: #7a5cc0; } .fam-cvg.cast { background: #b5701e; } .fam-cvg.dm { background: #6a3fb0; } .fam-cvg.grp { background: #2b6fd0; }
.fam-cvmain { min-width: 0; flex: 1; }
.fam-cvmain .ct { font-weight: 600; font-size: 0.88rem; display: flex; align-items: center; gap: 0.4rem; }
.fam-cvmain .cl { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-lock { font-size: 0.55rem; font-weight: 800; text-transform: uppercase; color: #b7a2e6; }
.fam-threadcol { flex: 1; min-width: 0; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--ink); display: flex; }
.fam-threadcol { min-height: 320px; }
.fam-threadcol > .cur-empty { flex: 1; border: 0; justify-content: center; }
.fam-composer--ro { align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.82rem; }
.fam-composer--ro .icn { width: 16px; height: 16px; flex: none; }
.cur-dw-del { margin-right: auto; color: var(--red); border-color: rgba(209, 29, 43, 0.4); }
.cur-dw-del .icn { width: 15px; height: 15px; }
.hb-chip.is-draft { color: #e6c06a; border-color: rgba(230, 170, 40, 0.4); }
.grd-rename { padding: 0.35rem 0.6rem; font-size: 0.95rem; max-width: 22rem; }
[data-theme="light"] .hb-chip.is-draft { color: #8a5e00; }
.fam-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fam-tbody { flex: 1; min-height: 260px; max-height: 460px; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.fam-msg { max-width: 82%; display: flex; flex-direction: column; gap: 0.15rem; }
.fam-msg .who { font-size: 0.68rem; color: var(--muted); font-weight: 700; padding: 0 0.3rem; }
.fam-msg .bubble { padding: 0.55rem 0.8rem; border-radius: 14px; font-size: 0.88rem; line-height: 1.45; white-space: pre-wrap; }
.fam-msg.them .bubble { background: var(--black); border: 1px solid var(--c-line); border-top-left-radius: 4px; color: var(--white); }
.fam-msg.me { align-self: flex-end; align-items: flex-end; }
.fam-msg.me .bubble { background: var(--red); color: #fff; border-top-right-radius: 4px; }
.fam-msg .t { font-size: 0.64rem; color: var(--muted-dark); padding: 0 0.3rem; }
.fam-composer { display: flex; gap: 0.5rem; padding: 0.7rem; border-top: 1px solid var(--c-line); }
.fam-composer input { flex: 1; background: var(--black); border: 1px solid var(--c-line-2); border-radius: 999px; color: var(--white); padding: 0.6rem 1rem; font: inherit; font-size: 0.9rem; }
.fam-composer input:focus { outline: none; border-color: var(--red); }

/* age groups admin */
.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; }
.ag-card { padding: 1rem 1.1rem; }
.ag-h { display: flex; align-items: center; justify-content: space-between; }
.ag-h h3 { margin: 0; font-size: 1.05rem; }
.ag-actions { display: flex; gap: 0.35rem; }
.ag-range { color: var(--muted); font-size: 0.8rem; margin-bottom: 0.7rem; }
.ag-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--c-line); font-size: 0.82rem; }
.ag-row > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.ag-row .icn { width: 15px; height: 15px; color: var(--muted); }
.ag-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.ag-chip { background: var(--smoke); color: var(--muted); border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.72rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; }
.ag-chip .ov { background: var(--red); color: #fff; border-radius: 999px; font-size: 0.5rem; font-weight: 800; padding: 0 0.3rem; letter-spacing: 0.03em; }
.ag-table .ag-sel { padding: 0.35rem 0.5rem; font-size: 0.82rem; width: auto; min-width: 150px; }

@media (max-width: 860px) {
  .fam-radio { grid-template-columns: 1fr; }
  .fam-msgcols { flex-direction: column; }
  .fam-convlist { width: 100%; }
}

/* ===========================================================
   ATTENDANCE & CHECK-IN — namespaced .att (+ .kiosk for the door
   kiosk), re-tokenized to the shared design system.
   app/attendance.html · app/admin-attendance.html · app/checkin.html
   =========================================================== */
.att { --att-line: rgba(255,255,255,0.09); --att-line-2: rgba(255,255,255,0.16);
       --att-green: #7fd99a; --att-amber: #e6c06a; --att-green-soft: rgba(40,160,80,0.16); --att-amber-soft: rgba(230,170,40,0.16); }
[data-theme="light"] .att { --att-line: rgba(0,0,0,0.10); --att-line-2: rgba(0,0,0,0.16); --att-green: #1f7a45; --att-amber: #8a5e00; }

.att-empty { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center; color: var(--muted-dark); padding: 2.6rem 1rem; }
.att-empty svg { width: 32px; height: 32px; opacity: 0.6; }
.att-seclbl { font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dark); margin: 1.2rem 0.15rem 0.7rem; }

/* member stat grid */
.att-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 1.3rem; }
.att-stat { padding: 1.15rem 1rem; text-align: center; }
.att-stat .n { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--white); }
.att-stat .l { color: var(--muted); font-size: 0.82rem; font-weight: 600; margin-top: 0.45rem; }
.att-stat .s { color: var(--muted-dark); font-size: 0.72rem; margin-top: 0.15rem; }
.att-flame svg { width: 22px; height: 22px; color: var(--att-amber); }

/* self check-in card */
.att-self { padding: 1.3rem; text-align: center; margin-bottom: 1.3rem; border: 1px solid rgba(var(--red-rgb), 0.3); }
.att-self__live { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(var(--red-rgb), 0.14); color: var(--red); font-weight: 800; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.7rem; border-radius: 999px; }
.att-self__live svg { width: 13px; height: 13px; }
.att-self__t { font-family: var(--font-display); font-size: 1.35rem; color: var(--white); margin-top: 0.7rem; }
.att-self__m { color: var(--muted); font-size: 0.86rem; margin-top: 0.2rem; }
.att-self__btn { margin: 1rem auto 0; }
.att-self__hint { color: var(--muted-dark); font-size: 0.76rem; margin-top: 0.6rem; }
.att-self.is-in { display: flex; align-items: center; gap: 0.9rem; text-align: left; border-color: rgba(40,160,80,0.35); background: var(--att-green-soft); }
.att-self.is-in .att-self__ic svg { width: 30px; height: 30px; color: var(--att-green); }
.att-self.is-in .att-self__t { margin: 0; font-size: 1.05rem; }

/* eligibility */
.att-elig { padding: 1.3rem 1.4rem; margin-bottom: 1.3rem; }
.att-elig__h { display: flex; align-items: center; gap: 0.5rem; }
.att-elig__h svg { width: 19px; height: 19px; color: var(--red); }
.att-elig__h h3 { font-family: var(--font-display); font-size: 1.1rem; color: var(--white); margin: 0; }
.att-elig__sub { color: var(--muted-dark); font-size: 0.82rem; margin: 0.25rem 0 1rem; }
.att-req { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.9rem; }
.att-req__ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--att-amber-soft); color: var(--att-amber); flex: 0 0 30px; }
.att-req__ic.is-met { background: var(--att-green-soft); color: var(--att-green); }
.att-req__ic svg { width: 15px; height: 15px; }
.att-req__main { flex: 1; min-width: 0; }
.att-req__t { font-weight: 600; font-size: 0.86rem; color: var(--white); }
.att-req__bar { height: 7px; border-radius: 999px; background: var(--att-line); overflow: hidden; margin-top: 0.4rem; }
.att-req__bar .f { height: 100%; border-radius: 999px; background: var(--att-amber); }
.att-req__bar .f.is-met { background: var(--att-green); }
.att-req__n { font-weight: 700; font-size: 0.8rem; min-width: 92px; text-align: right; color: var(--att-amber); }
.att-req__n.is-met { color: var(--att-green); }
.att-verdict { border-radius: 11px; padding: 0.8rem 1rem; font-size: 0.86rem; font-weight: 600; display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; }
.att-verdict svg { width: 18px; height: 18px; flex: 0 0 18px; }
.att-verdict.is-yes { background: var(--att-green-soft); color: var(--att-green); }
.att-verdict.is-soon { background: var(--att-amber-soft); color: var(--att-amber); }
.att-verdict.is-no { background: var(--ink); color: var(--muted); }

/* check-in code card */
.att-code { padding: 1rem 1.2rem; display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.att-code__l { display: flex; align-items: center; gap: 0.7rem; }
.att-code__l > svg { width: 26px; height: 26px; color: var(--muted); flex: 0 0 26px; }
.att-code__t { font-weight: 700; color: var(--white); font-size: 0.9rem; }
.att-code__m { color: var(--muted-dark); font-size: 0.8rem; margin-top: 0.1rem; }
.att-pin-show { display: flex; gap: 0.5rem; justify-content: center; }
.att-pin-show span { width: 42px; height: 52px; border-radius: 10px; background: var(--ink); border: 2px solid var(--red); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--white); }
.att-codemodal { max-width: 420px; }

/* history */
.att-hist { padding: 0.2rem 0; }
.att-histrow { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--att-line); }
.att-histrow:last-child { border-bottom: 0; }
.att-histrow__ic { width: 28px; height: 28px; border-radius: 8px; background: var(--att-green-soft); color: var(--att-green); display: flex; align-items: center; justify-content: center; flex: 0 0 28px; }
.att-histrow__ic.is-absent { background: var(--ink); color: var(--muted-dark); }
.att-histrow__ic svg { width: 15px; height: 15px; }
.att-histrow__main { flex: 1; min-width: 0; }
.att-histrow__main .t { font-weight: 600; font-size: 0.86rem; color: var(--white); }
.att-histrow__main .m { color: var(--muted-dark); font-size: 0.76rem; }
.att-chip { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--ink); color: var(--muted-dark); }
.att-chip.is-self { background: rgba(120,90,190,0.16); color: #b49ce8; }
.att-chip.is-kiosk { background: var(--ink); color: var(--muted); }
.att-chip.is-manual { background: var(--att-amber-soft); color: var(--att-amber); }
.att-chip.is-miss { background: var(--ink); color: var(--muted-dark); }
.att-chip.is-late { background: var(--att-amber-soft); color: var(--att-amber); }

/* admin tabs + dashboard */
.att-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.att-tabs button { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--att-line-2); background: var(--ink); color: var(--muted); padding: 0.55rem 1rem; border-radius: 10px; font-weight: 700; font-size: 0.82rem; cursor: pointer; font-family: inherit; }
.att-tabs button svg { width: 15px; height: 15px; }
.att-tabs button.on { background: var(--red); color: #fff; border-color: transparent; }
.att-note { display: flex; gap: 0.6rem; align-items: flex-start; background: rgba(90,141,214,0.12); border: 1px solid rgba(90,141,214,0.28); color: var(--muted); border-radius: 11px; padding: 0.8rem 1rem; font-size: 0.84rem; line-height: 1.5; margin-bottom: 1.1rem; }
.att-note svg { width: 17px; height: 17px; flex: 0 0 17px; color: #9fbef0; margin-top: 1px; }
.att-note b { color: var(--white); }
.att-toolbar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.att-sel { max-width: 220px; }
.att-count { margin-left: auto; color: var(--muted-dark); font-size: 0.8rem; font-weight: 600; }
.att-table { width: 100%; }
.att-nm { font-weight: 700; color: var(--white); }
.att-streakcell { font-weight: 800; white-space: nowrap; }
.att-streakcell svg { width: 14px; height: 14px; color: var(--att-amber); vertical-align: -2px; }
.att-consist { display: flex; align-items: center; gap: 0.5rem; }
.att-cbar { width: 60px; height: 7px; border-radius: 999px; background: var(--att-line); overflow: hidden; }
.att-cbar .f { height: 100%; border-radius: 999px; }
.att-pill { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; }
.att-pill.is-yes { background: var(--att-green-soft); color: var(--att-green); }
.att-pill.is-soon { background: var(--att-amber-soft); color: var(--att-amber); }
.att-pill.is-no { background: var(--ink); color: var(--muted-dark); }

/* roster */
.att-rosterhead { display: flex; gap: 0.9rem; align-items: center; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.att-rosterhead__ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--red-rgb), 0.14); color: var(--red); display: flex; align-items: center; justify-content: center; flex: 0 0 44px; }
.att-rosterhead__ic svg { width: 22px; height: 22px; }
.att-rosterhead h3 { font-family: var(--font-display); font-size: 1.1rem; color: var(--white); margin: 0; }
.att-rosterhead .m { color: var(--muted-dark); font-size: 0.8rem; margin-top: 0.1rem; }
.att-rosterhead__live { margin-left: auto; text-align: right; }
.att-rosterhead__live .n { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--att-green); }
.att-rosterhead__live .l { font-size: 0.72rem; color: var(--muted-dark); }
.att-rlist { padding: 0.2rem 0; }
.att-rrow { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--att-line); }
.att-rrow:last-child { border-bottom: 0; }
.att-rrow[hidden] { display: none; } /* search filters (e.g. Class rosters) hide rows with [hidden] */
.att-rrow.is-absent { opacity: 0.7; }
.att-rrow__nm { font-weight: 600; color: var(--white); font-size: 0.9rem; }
.att-rtime { margin-left: auto; color: var(--muted-dark); font-size: 0.8rem; font-weight: 600; }
.att-mark { margin-left: auto; border: 1px solid var(--att-line-2); background: var(--ink); color: var(--muted); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.76rem; font-weight: 800; cursor: pointer; font-family: inherit; }
.att-mark:hover { color: var(--att-green); border-color: var(--att-green); }
/* Roll call (0041): day bar, class chips, one segmented control per student. */
.att-prev svg { transform: rotate(180deg); }
.att-daybar .att-sel { max-width: 170px; }
.att-classpick { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.3rem; margin-bottom: 1rem; scrollbar-width: thin; }
.att-classchip { flex: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; border-radius: 12px; border: 1px solid var(--att-line-2); background: var(--ink); color: var(--muted); font: inherit; font-size: 0.84rem; cursor: pointer; }
.att-classchip .t { color: var(--muted-dark); font-size: 0.76rem; font-weight: 700; }
.att-classchip .n { color: var(--white); font-weight: 600; }
.att-classchip .c { min-width: 1.4rem; text-align: center; border-radius: 999px; background: var(--att-green-soft); color: var(--att-green); font-weight: 800; font-size: 0.72rem; padding: 0.05rem 0.4rem; }
.att-classchip.is-active { border-color: var(--red); background: rgba(var(--red-rgb), 0.12); }
.att-tally { margin-top: 0.3rem !important; }
.att-tally b { color: var(--white); }
.att-rollrow { display: flex; align-items: center; gap: 0.7rem 1rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--att-line); flex-wrap: wrap; }
.att-rollrow:last-child { border-bottom: 0; }
.att-rollrow__who { flex: 1 1 12rem; min-width: 0; }
.att-rollrow__who .m, .att-rrow .m { color: var(--muted-dark); font-size: 0.76rem; margin-top: 0.1rem; }
.att-seg { display: inline-flex; border: 1px solid var(--att-line-2); border-radius: 10px; overflow: hidden; flex: none; }
.att-seg button { border: 0; border-left: 1px solid var(--att-line-2); background: var(--ink); color: var(--muted); font: inherit; font-size: 0.76rem; font-weight: 700; padding: 0 0.75rem; min-height: 40px; cursor: pointer; }
.att-seg button:first-child { border-left: 0; }
.att-seg button:hover { color: var(--white); }
.att-seg button[aria-pressed="true"] { color: #fff; }
.att-seg button.is-present[aria-pressed="true"] { background: #2f8f55; }
.att-seg button.is-late[aria-pressed="true"] { background: #b8860b; }
.att-seg button.is-excused[aria-pressed="true"] { background: #4f6fa8; }
.att-seg button.is-absent[aria-pressed="true"] { background: var(--red); }
.att-seg--wide { display: flex; margin-top: 0.8rem; }
.att-seg--wide button { flex: 1; }
.att-seg--wide button[aria-pressed="true"] { background: var(--red); }
.att-dropin { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.9rem; flex-wrap: wrap; }
.att-hint { color: var(--muted-dark); font-size: 0.78rem; margin: 1rem 0.15rem 0; }
.att-warn { color: var(--att-amber); }
.att-rosterlist { display: grid; gap: 0.7rem; }
.att-rostercard { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.att-rostercard:hover { border-color: var(--red); }
.att-rostercard h3 { font-family: var(--font-display); font-size: 1.02rem; color: var(--white); margin: 0; }
.att-rostercard .m { color: var(--muted-dark); font-size: 0.8rem; margin-top: 0.15rem; }
.att-rostercard__n { margin-left: auto; text-align: right; }
.att-rostercard__n b { display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--white); }
.att-rostercard__n span { font-size: 0.72rem; color: var(--muted-dark); }
.att-rrow > .btn { margin-left: auto; flex: none; }
.att-latecard { padding: 1rem 1.2rem; margin-bottom: 1.1rem; }
.att-latecard h3 { font-family: var(--font-display); font-size: 1.05rem; color: var(--white); margin: 0; }
.att-latecard .m { color: var(--muted); font-size: 0.84rem; margin: 0.3rem 0 0; }
@media (max-width: 560px) {
  .att-seg:not(.att-seg--wide) { display: flex; width: 100%; }
  .att-seg:not(.att-seg--wide) button { flex: 1; min-height: 44px; padding: 0 0.3rem; }
}

/* eligibility rules */
.att-rulegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.9rem; }
.att-rulecard { padding: 1.1rem 1.2rem; }
.att-rulecard h3 { font-family: var(--font-display); font-size: 1rem; color: var(--white); margin: 0 0 0.7rem; }
.att-rr { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--att-line); font-size: 0.84rem; }
.att-rr label { flex: 1; color: var(--muted); }
.att-rr input { width: 68px; text-align: center; }
.att-rr .u { color: var(--muted-dark); font-size: 0.74rem; min-width: 66px; }

/* ---- door kiosk (full-screen, outside the app shell) ---- */
/* ===== Front Desk kiosk (SPEC-front-desk) — full-screen, locked check-in ===== */
.fd-page { margin: 0; min-height: 100dvh; background: var(--black); color: var(--white); }
.fd-root { min-height: 100dvh; display: flex; flex-direction: column; }
.fd-loading, .fd-gate { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; color: var(--muted); }
.fd-gate .fd-logo { width: 54px; height: 54px; border-radius: 14px; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.6rem; }
.fd-gate h2 { font-family: var(--font-display); color: var(--white); margin: 0; }
.fd-gate p { max-width: 30rem; text-align: center; margin: 0; }
.fd { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.fd-top { display: flex; align-items: center; justify-content: space-between; padding: 1rem clamp(1rem, 3vw, 1.8rem); border-bottom: 1px solid var(--c-line); }
.fd-tenant { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.fd-tenant strong { color: var(--white); font-family: var(--font-display); letter-spacing: 0.02em; }
.fd-exit { background: none; border: 0; color: var(--muted); font: inherit; font-size: 0.82rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fd-exit:hover { color: var(--white); }
.fd-body { flex: 1; display: grid; grid-template-columns: 280px 1fr; min-height: 0; }
.fd-today { padding: 1.3rem clamp(1rem, 2.5vw, 1.6rem); border-right: 1px solid var(--c-line); overflow-y: auto; }
.fd-today h4 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-dark); margin: 0 0 1rem; }
.fd-today-empty { color: var(--muted-dark); font-size: 0.85rem; }
.fd-tp-status { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 1rem 0 0.4rem; }
.fd-tp-status.live { color: var(--ev-green, #4c7a57); }
.fd-tp-status.up { color: var(--belt-gold, #d4a537); }
.fd-tp-row { padding: 0.55rem 0; border-bottom: 1px solid var(--c-line); }
.fd-tp-time { font-family: var(--font-mono, monospace); font-size: 0.82rem; color: var(--muted); }
.fd-tp-name { font-size: 0.9rem; font-weight: 600; color: var(--white); }
.fd-tp-instr { font-size: 0.75rem; color: var(--muted-dark); }
.fd-center { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 2rem clamp(1rem, 3vw, 2rem); overflow-y: auto; }
.fd-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.8rem; }
.fd-tab { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 1px solid var(--c-line); color: var(--muted); font: inherit; font-weight: 600; font-size: 0.8rem; padding: 0.5rem 1rem; border-radius: 999px; cursor: pointer; }
.fd-tab .icn { width: 15px; height: 15px; }
.fd-tab.is-active { background: var(--white); color: var(--ink); border-color: var(--white); }
.fd-tab.is-disabled { opacity: 0.4; cursor: not-allowed; }
.fd-panel { width: 100%; max-width: 380px; text-align: center; }
.fd-panel h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--white); margin: 0 0 1.3rem; }
.fd-code { background: var(--ink); border: 1px solid var(--c-line); border-radius: 12px; font-family: var(--font-mono, monospace); font-size: 1.4rem; letter-spacing: 0.4em; padding: 0.9rem 0; margin-bottom: 1.1rem; color: var(--white); min-height: 1.4em; }
.fd-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-bottom: 1.2rem; }
.fd-key { background: var(--ink); border: 1px solid var(--c-line); color: var(--white); font-family: var(--font-mono, monospace); font-size: 1.25rem; aspect-ratio: 1; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fd-key:hover { background: var(--smoke); }
.fd-key--alt, .fd-key--go { font-size: 0.85rem; font-family: inherit; }
.fd-key--go { color: #fff; background: var(--red); border-color: var(--red); }
.fd-key--go .icn { width: 20px; height: 20px; }
.fd-go { width: 100%; justify-content: center; }
.fd-msg { color: var(--red); font-size: 0.85rem; min-height: 1.1em; margin-top: 0.7rem; }
.fd-search { width: 100%; background: var(--ink); border: 1px solid var(--c-line); color: var(--white); font: inherit; font-size: 1rem; padding: 0.85rem 1rem; border-radius: 12px; margin-bottom: 1rem; }
.fd-search::placeholder { color: var(--muted-dark); }
.fd-results { display: flex; flex-direction: column; gap: 0.4rem; text-align: left; }
.fd-noresult { color: var(--muted-dark); font-size: 0.85rem; text-align: center; padding: 1rem; }
.fd-result { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.7rem; border-radius: 10px; border: 1px solid transparent; background: none; cursor: pointer; text-align: left; }
.fd-result:hover { background: var(--ink); border-color: var(--c-line); }
.fd-ring { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--red); }
.fd-ring--lg { width: 92px; height: 92px; font-family: var(--font-display); font-size: 1.7rem; margin: 0 auto 0.9rem; }
.fd-result-name { display: block; font-size: 0.92rem; font-weight: 600; color: var(--white); }
.fd-result-meta { display: block; font-size: 0.75rem; color: var(--muted-dark); }
/* welcome / session picker */
.fd-welcome { display: flex; gap: 1.8rem; width: 100%; max-width: 640px; }
.fd-welcome-side { width: 200px; text-align: center; flex: none; }
.fd-w-name { font-size: 1.15rem; font-weight: 700; color: var(--white); }
.fd-w-rank { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }
.fd-pick { flex: 1; min-width: 0; }
.fd-pick-grp { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0.9rem 0 0.5rem; }
.fd-pick-grp.live { color: var(--ev-green, #4c7a57); }
.fd-pick-grp.up { color: var(--belt-gold, #d4a537); }
.fd-pick-row { display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 0.7rem 0.8rem; border-radius: 10px; border: 1px solid var(--c-line); margin-bottom: 0.5rem; background: none; cursor: pointer; text-align: left; }
.fd-pick-row.is-on { background: rgba(var(--red-rgb), 0.12); border-color: var(--red); }
.fd-pick-row.is-locked { opacity: 0.55; cursor: default; }
.fd-chk { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--muted-dark); flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.fd-chk .icn { width: 14px; height: 14px; }
.fd-pick-row.is-on .fd-chk { background: var(--red); border-color: var(--red); }
.fd-pr-time { font-family: var(--font-mono, monospace); font-size: 0.8rem; color: var(--muted); width: 52px; flex: none; }
.fd-pr-name { display: block; font-size: 0.9rem; font-weight: 600; color: var(--white); }
.fd-pr-meta { display: block; font-size: 0.72rem; color: var(--muted-dark); }
.fd-confirm-row { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.fd-confirm { flex: 1; justify-content: center; }
.fd-empty-sessions p { color: var(--muted); margin: 0 0 1.2rem; }
/* stamp */
.fd-stamp-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; gap: 0.5rem; }
.fd-stamp { width: 120px; height: 120px; border-radius: 50%; border: 5px solid var(--red); color: var(--red); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; transform: scale(0) rotate(-18deg); opacity: 0; }
.fd-stamp .icn { width: 56px; height: 56px; }
.fd-stamp.play { animation: fd-stamp-in 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
@keyframes fd-stamp-in { 0% { transform: scale(1.6) rotate(-18deg); opacity: 0; } 60% { transform: scale(0.92) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fd-stamp.play { animation: none; transform: none; opacity: 1; } }
.fd-stamp-title { font-family: var(--font-display); font-size: 1.25rem; color: var(--white); }
.fd-stamp-sub { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.2rem; }
/* exit modal */
.fd-veil { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; }
.fd-modal { width: 100%; max-width: 400px; background: var(--ink); border: 1px solid var(--c-line); border-radius: 16px; padding: 1.5rem; }
.fd-modal h3 { font-family: var(--font-display); color: var(--white); margin: 0 0 0.5rem; }
.fd-modal p { color: var(--muted); font-size: 0.88rem; margin: 0 0 1rem; }
.fd-modal-input { width: 100%; background: var(--black); border: 1px solid var(--c-line); color: var(--white); font: inherit; padding: 0.7rem 0.85rem; border-radius: 10px; }
.fd-modal-msg { color: var(--red); font-size: 0.82rem; min-height: 1em; margin-top: 0.5rem; }
.fd-modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1rem; }
@media (max-width: 720px) { .fd-body { grid-template-columns: 1fr; } .fd-today { display: none; } .fd-welcome { flex-direction: column; align-items: center; } }

.kiosk-body { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: var(--black); padding: 1rem; }
.kiosk-root { width: 100%; max-width: 460px; text-align: center; }
.kiosk-card { background: var(--ink); border: 1px solid rgba(255,255,255,0.08); border-radius: 22px; padding: 2rem 1.8rem 1.7rem; box-shadow: var(--shadow); }
[data-theme="light"] .kiosk-card { border-color: rgba(0,0,0,0.1); }
.kiosk-loading { color: var(--muted-dark); padding: 2rem; }
.kiosk-logo { width: 52px; height: 52px; border-radius: 14px; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.8rem; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.kiosk-card h2 { font-family: var(--font-display); font-size: 1.4rem; color: var(--white); margin: 0; }
.kiosk-d { color: var(--muted); font-size: 0.86rem; margin-top: 0.35rem; }
.kiosk-pins { display: flex; gap: 0.55rem; justify-content: center; margin: 1.4rem 0; }
.kiosk-pin { width: 40px; height: 50px; border-radius: 11px; background: var(--black); border: 2px solid rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: var(--white); }
.kiosk-pin.filled { border-color: var(--red); }
.kiosk-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; max-width: 300px; margin: 0 auto; }
.kiosk-pad button { height: 60px; border-radius: 14px; border: 0; background: var(--smoke); color: var(--white); font-size: 1.4rem; font-weight: 700; cursor: pointer; font-family: var(--font-display); display: flex; align-items: center; justify-content: center; }
.kiosk-pad button:hover { filter: brightness(1.15); }
.kiosk-pad button.is-go { background: var(--red); color: #fff; }
.kiosk-pad button.is-alt { color: var(--muted); }
.kiosk-pad button svg { width: 22px; height: 22px; }
.kiosk-qr { margin-top: 1.2rem; color: var(--muted-dark); font-size: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.kiosk-qr svg { width: 30px; height: 30px; color: var(--muted); }
.kiosk-ok { background: var(--att-green-soft, rgba(40,160,80,0.16)); border: 1px solid rgba(40,160,80,0.4); border-radius: 16px; padding: 1.3rem; margin-top: 1rem; }
.kiosk-ok .big svg { width: 44px; height: 44px; color: #4fce85; }
.kiosk-ok .nm { font-size: 1.15rem; font-weight: 800; color: var(--white); margin-top: 0.3rem; }
.kiosk-ok .sub { color: #9fceb2; font-size: 0.85rem; margin-top: 0.15rem; }
.kiosk-ok .sub svg { width: 14px; height: 14px; vertical-align: -2px; }
.kiosk-err { background: rgba(209,29,43,0.14); border: 1px solid rgba(209,29,43,0.4); color: #f0a5ad; border-radius: 14px; padding: 1rem; margin-top: 1rem; font-weight: 600; }
.kiosk-foot { color: var(--muted-dark); font-size: 0.74rem; margin-top: 0.9rem; }

@media (max-width: 560px) { .att-code { flex-direction: column; align-items: flex-start; } }

/* =========================================================
   Schedule: view toggle, month/week calendar, recurring series
   (SPEC-schedule-calendar-view + SPEC-recurring-class-schedule)
   ========================================================= */
.sched {
  --cal-class: #5a8dd6; --cal-clinic: #2fa37a; --cal-training: #d99a3a; --cal-seminar: #a06fe0;
}
[data-theme="light"] .sched {
  --cal-class: #2f63b0; --cal-clinic: #1f8a63; --cal-training: #9a6a11; --cal-seminar: #7a49c4;
}

.sched-topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }

/* List / Calendar segmented toggle */
.sched-viewtoggle { display: inline-flex; gap: 0.2rem; padding: 0.25rem; border: 1px solid var(--c-line-2); border-radius: 10px; background: var(--ev-mut-soft); }
.sched-viewtoggle button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.85rem; font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; color: var(--muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; }
.sched-viewtoggle button .icn { width: 15px; height: 15px; }
.sched-viewtoggle button.on { background: var(--red); color: #fff; }

/* Calendar toolbar */
.cal-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cal-nav { display: flex; align-items: center; gap: 0.55rem; }
.cal-nav .ev-iconbtn { width: 34px; height: 34px; }
.cal-nav .ev-iconbtn .icn { width: 15px; height: 15px; }
.cal-title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; margin-left: 0.3rem; }
.cal-seg { display: inline-flex; gap: 0.2rem; padding: 0.22rem; border: 1px solid var(--c-line-2); border-radius: 9px; }
.cal-seg button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.36rem 0.7rem; font-size: 0.78rem; font-weight: 600; color: var(--muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.cal-seg button .icn { width: 14px; height: 14px; }
.cal-seg button.on { background: var(--ev-blue-soft); color: var(--ev-blue); }

.cal-shell { display: flex; gap: 1.1rem; align-items: flex-start; }
.cal-main { flex: 1; min-width: 0; }

/* Month grid */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--c-line-2); border-radius: 12px; overflow: hidden; background: var(--c-line); }
.cal-dow { background: var(--ev-mut-soft); font-family: var(--font-display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-dark); text-align: center; padding: 0.5rem 0; }
.cal-cell { background: var(--black); min-height: 108px; padding: 0.3rem 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; cursor: pointer; }
.cal-cell.is-out { opacity: 0.42; }
.cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--red); }
.cal-cell.is-sel { background: var(--ev-blue-soft); }
.cal-cell__n { font-size: 0.78rem; font-weight: 600; color: var(--muted); align-self: flex-end; }
.cal-cell.is-today .cal-cell__n { color: var(--red); font-weight: 800; }
.cal-cell__evs { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

/* Event chip */
.cal-chip { display: flex; align-items: center; gap: 0.3rem; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--cal-class); border-radius: 4px; padding: 0.16rem 0.35rem; font: inherit; font-size: 0.72rem; line-height: 1.2; color: var(--white); background: var(--ev-mut-soft); cursor: pointer; overflow: hidden; }
.cal-chip:hover { filter: brightness(1.15); }
.cal-chip__t { color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.cal-chip__x { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* In a month cell the time sits above the name, so the name gets the cell's width ("Kids karate", not "K."). */
.cal-cell .cal-chip { flex-wrap: wrap; row-gap: 0; }
.cal-cell .cal-chip__x { flex: 1 1 100%; min-width: 0; }
.cal-chip--class { border-left-color: var(--cal-class); }
.cal-chip--clinic { border-left-color: var(--cal-clinic); }
.cal-chip--training { border-left-color: var(--cal-training); }
.cal-chip--seminar { border-left-color: var(--cal-seminar); }
.cal-chip.is-cancelled { opacity: 0.55; text-decoration: line-through; }
.cal-chip.is-draft { border-left-style: dashed; background: transparent; box-shadow: inset 0 0 0 1px var(--c-line-2); }
.cal-more { border: 0; background: transparent; color: var(--muted-dark); font-size: 0.7rem; font-weight: 600; text-align: left; padding: 0.05rem 0.35rem; cursor: pointer; }
.cal-more:hover { color: var(--red); }

/* At-a-glance state dot (member) */
.cal-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--muted); }
.cal-dot--yes { background: var(--ev-green); }
.cal-dot--no { background: var(--red); }
.cal-dot--poll { background: var(--ev-amber); }
.cal-dot--open { background: var(--ev-blue); }

/* Week view (row per day) */
.cal-week { display: flex; flex-direction: column; border: 1px solid var(--c-line-2); border-radius: 12px; overflow: hidden; }
.cal-wrow { display: grid; grid-template-columns: 92px 1fr; gap: 0.6rem; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--c-line); background: var(--black); }
.cal-wrow:last-child { border-bottom: 0; }
.cal-wrow.is-today { box-shadow: inset 3px 0 0 var(--red); }
.cal-wrow__d { display: flex; flex-direction: column; }
.cal-wrow__d b { font-family: var(--font-display); font-size: 0.9rem; }
.cal-wrow__d span { color: var(--muted-dark); font-size: 0.76rem; }
.cal-wrow__evs { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; }
.cal-wrow__none { color: var(--muted-dark); }

/* Day side panel */
.cal-side { width: 320px; flex: none; border: 1px solid var(--c-line-2); border-radius: 12px; background: var(--black); overflow: hidden; }
.cal-side--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; color: var(--muted-dark); padding: 2rem 1.2rem; }
.cal-side--empty .icn { width: 26px; height: 26px; opacity: 0.6; }
.cal-side__h { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--c-line); }
.cal-side__h b { font-family: var(--font-display); font-size: 0.92rem; }
.cal-side__x { border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.cal-side__x .icn { width: 16px; height: 16px; }
.cal-side__list { display: flex; flex-direction: column; }
.cal-sidecard { display: flex; align-items: stretch; gap: 0.6rem; text-align: left; border: 0; border-bottom: 1px solid var(--c-line); background: transparent; color: inherit; font: inherit; padding: 0.7rem 0.9rem; cursor: pointer; }
.cal-sidecard:hover { background: var(--ev-mut-soft); }
.cal-sidecard.is-cancelled .cal-sidecard__t { text-decoration: line-through; opacity: 0.6; }
.cal-sidecard__bar { width: 3px; border-radius: 3px; flex: none; background: var(--cal-class); }
.cal-bar--class { background: var(--cal-class); } .cal-bar--clinic { background: var(--cal-clinic); }
.cal-bar--training { background: var(--cal-training); } .cal-bar--seminar { background: var(--cal-seminar); }
.cal-sidecard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.cal-sidecard__t { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; }
.cal-sidecard__m { color: var(--muted); font-size: 0.78rem; }
.cal-sidecard__x { color: var(--muted-dark); font-size: 0.74rem; }
.cal-sidecard > .icn { width: 16px; height: 16px; color: var(--muted-dark); align-self: center; flex: none; }

@media (max-width: 780px) {
  .cal-shell { flex-direction: column; }
  .cal-side { width: 100%; }
  .cal-cell { min-height: 84px; }
  .cal-chip__t { display: none; }
}

/* Recurring: day-of-week picker */
.rec-days { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rec-day { width: 46px; padding: 0.5rem 0; text-align: center; font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; color: var(--muted); background: var(--ev-mut-soft); border: 1px solid var(--c-line-2); border-radius: 8px; cursor: pointer; }
.rec-day.on { background: var(--red); color: #fff; border-color: var(--red); }

/* =========================================================
   Manage Rank panel (SPEC-rank-history) — admin.html member modal
   ========================================================= */
.modal.modal--wide { max-width: 640px; }
.rk-section { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.1); }
.rk-section:first-of-type { margin-top: 0.4rem; padding-top: 0; border-top: 0; }
[data-theme="light"] .rk-section { border-top-color: rgba(0,0,0,0.1); }
.rk-h { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: 0.7rem; }
.rk-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.rk-entry { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.6rem 0.7rem; border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; background: rgba(255,255,255,0.03); }
[data-theme="light"] .rk-entry { border-color: rgba(0,0,0,0.1); background: rgba(0,0,0,0.02); }
.belt-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; margin-top: 0.2rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); }
.rk-entry__body { flex: 1; min-width: 0; }
.rk-entry__top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.rk-entry__top strong { font-weight: 600; }
.rk-native { color: var(--muted); font-size: 0.82rem; }
.rk-tag { font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: 999px; }
.rk-tag--auto { background: rgba(120,120,130,0.2); color: var(--muted); }
.rk-tag--manual { background: rgba(90,141,214,0.18); color: #9fbef0; }
[data-theme="light"] .rk-tag--manual { color: #2b5aa8; }
.rk-entry__meta { color: var(--muted-dark); font-size: 0.78rem; margin-top: 0.15rem; }
.rk-entry__note { color: var(--muted); font-size: 0.82rem; font-style: italic; margin-top: 0.25rem; }
.rk-entry__acts { display: flex; gap: 0.3rem; flex: none; }
.rk-entry__acts .ev-iconbtn { width: 30px; height: 30px; border-radius: 7px; }
.rk-entry__acts .ev-iconbtn .icn { width: 14px; height: 14px; }
/* Drag-to-reorder handle (Manage rank → Other ranks & certificates): a full-height
   touch target; touch-action:none so dragging it never scrolls the page. */
.rk-grip { flex: none; align-self: stretch; width: 34px; min-height: 44px; margin: -0.35rem 0 -0.35rem -0.4rem; display: grid; place-items: center; background: none; border: 0; border-radius: 8px; color: var(--muted-dark); cursor: grab; touch-action: none; -webkit-touch-callout: none; }
.rk-grip:hover { color: var(--muted); background: rgba(127,127,127,0.08); }
.rk-grip:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.rk-grip .icn { width: 18px; height: 18px; }
.rk-entry.is-dragging { position: relative; z-index: 2; border-color: var(--red); box-shadow: 0 12px 28px rgba(0,0,0,0.35); transform: scale(1.015); }
.rk-status { margin: 0.5rem 0 0; font-size: 0.82rem; color: #b6f0c4; }
[data-theme="light"] .rk-status { color: #1f7a45; }
.rk-status:empty { display: none; }
.rk-sorting, .rk-sorting * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.rk-del:hover { border-color: var(--red); color: var(--red); }
.rk-formwrap { margin-bottom: 0.9rem; }
.date-parts { display: grid; grid-template-columns: minmax(5.5rem, 1fr) minmax(9rem, 1.6fr) minmax(5.5rem, 1fr); gap: 0.5rem; }
@media (max-width: 480px) { .date-parts { grid-template-columns: 1fr 1fr; } .date-parts [data-part="y"] { grid-column: 1 / -1; } }
.rk-form { border: 1px dashed var(--c-line-2, rgba(255,255,255,0.16)); border-radius: 10px; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; }

/* Schedule toolbar: right-aligned view toggle (in line with filters) + recurring badge */
.sched-viewbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.sched-toolright { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ev-badge.is-recur { background: var(--ev-blue-soft); color: var(--ev-blue); }
.ev-badge.is-recur .icn { width: 12px; height: 12px; }

/* Admin schedule: single Events surface — toolbar + locked kind cards on edit */
.sched-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1.2rem; }
.sched-toolright { gap: 0.85rem; }
.ev-mode-card.is-locked { cursor: default; }

/* Sidebar action item (e.g. Front Desk Mode) — a button styled as a nav row, accented */
.sidebar__item--action { width: 100%; background: transparent; border: 0; cursor: pointer; text-align: left; margin-top: 0.5rem; color: var(--red); }
.sidebar__item--action .icn { color: var(--red); }
.sidebar__item--action:hover { background: rgba(var(--red-rgb), 0.14); color: #fff; }
.sidebar__item--action:hover .icn { color: #fff; }
[data-theme="light"] .sidebar__item--action:hover { color: var(--white); }

/* Recurring series detail (member) — per-date occurrence rows + "see all dates" link */
.ev-serieslink { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.7rem; background: transparent; border: 0; color: var(--ev-blue); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 0; }
.ev-serieslink .icn { width: 15px; height: 15px; }
.ev-serieslink:hover { text-decoration: underline; }
.ser-list { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.4rem; }
.ser-card { display: flex; flex-direction: column; padding: 1rem 1.1rem; border: 1px solid var(--c-line, rgba(255,255,255,0.08)); border-radius: 14px; background: var(--ink, #1c1c20); box-shadow: var(--cur-shadow, none); }
.ser-card__row { display: flex; align-items: center; gap: 1.1rem; }
.ser-card.is-dim { opacity: 0.55; }
.ser-card__main { flex: 1; min-width: 0; }
.ser-card__t { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; margin-bottom: 0.35rem; }
.ser-card__a { flex: none; display: flex; align-items: center; }
.ser-state { color: var(--muted-dark); font-size: 0.82rem; display: inline-flex; align-items: center; gap: 0.35rem; }
.ser-you { color: var(--ev-green, #7fd99a); }
.ev-dimrow td { opacity: 0.55; }
/* "See who's coming" — collapsible attendee names (no notes) per class date */
.ser-who { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; background: transparent; border: 0; padding: 0; color: var(--ev-blue); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.ser-who .icn { width: 14px; height: 14px; }
.ser-who .icn:last-child { transition: transform 0.15s var(--ease); }
.ser-who.is-open .icn:last-child { transform: rotate(180deg); }
.ser-who:hover { text-decoration: underline; }
.ser-attendees { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed var(--c-line-2, rgba(255,255,255,0.16)); }
.ser-attendees.is-hidden { display: none; }
.ser-attn-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ser-attn-chip { display: inline-flex; align-items: center; padding: 0.24rem 0.65rem; border-radius: 999px; background: var(--ev-mut-soft, rgba(255,255,255,0.07)); color: var(--white); font-size: 0.8rem; }
.ser-attn-empty { color: var(--muted-dark); font-size: 0.82rem; }
@media (max-width: 620px) {
  .ser-card__row { flex-wrap: wrap; }
  .ser-card__a { width: 100%; }
  .ser-card__a .btn { width: 100%; justify-content: center; }
}

/* Series per-date RSVP control: explicit attending / can't-make-it + optional note */
.ser-card.is-yes { border-left: 3px solid var(--ev-green, #7fd99a); }
.ser-card.is-no { border-left: 3px solid var(--red); }
.ser-rsvp-ctl { display: flex; flex-direction: column; gap: 0.5rem; min-width: 250px; }
.ser-rsvp-btns { display: flex; gap: 0.45rem; }
.ser-rsvp-btns button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.5rem 0.6rem; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; border-radius: 9px; border: 1px solid var(--c-line-2, rgba(255,255,255,0.16)); background: transparent; color: var(--muted); cursor: pointer; }
.ser-rsvp-btns button .icn { width: 14px; height: 14px; }
.ser-rsvp-btns .ser-yes:hover { border-color: var(--ev-green, #7fd99a); color: var(--ev-green, #7fd99a); }
.ser-rsvp-btns .ser-no:hover { border-color: var(--red); color: var(--red); }
.ser-rsvp-btns .ser-yes.on { background: var(--ev-green-soft, rgba(40,160,80,0.16)); color: var(--ev-green, #7fd99a); border-color: transparent; }
.ser-rsvp-btns .ser-no.on { background: rgba(209,29,43,0.16); color: #ffb3b3; border-color: transparent; }
[data-theme="light"] .ser-rsvp-btns .ser-no.on { color: #b3121f; }
.ser-noterow { display: flex; gap: 0.4rem; align-items: center; }
.ser-noterow.is-hidden { display: none; }
.ser-noteinput { flex: 1; font-size: 0.82rem; padding: 0.42rem 0.6rem; }
@media (max-width: 620px) { .ser-rsvp-ctl { min-width: 0; width: 100%; } }

/* Series intro — a subtle pill hint, not a full-width banner */
.ser-hint { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0.1rem 0 1.2rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--ev-mut-soft, rgba(255,255,255,0.07)); color: var(--muted); font-size: 0.8rem; }
.ser-hint .icn { width: 14px; height: 14px; opacity: 0.8; flex: none; }

/* Series list header — count + range chips on the left, bulk RSVP far right */
.ser-listhead { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.ser-listhead__t { white-space: nowrap; }
.ser-spring { flex: 1 1 0; min-width: 0.5rem; }
.ser-bulk { display: inline-flex; gap: 1rem; flex-wrap: wrap; }
.ser-bulk .icn { width: 14px; height: 14px; }

/* =========================================================
   Inventory module (admin-inventory.html)
   ========================================================= */
.field-row { display: flex; gap: 1rem; }
.field-row .field { flex: 1; }

.inv {
  --c-line: rgba(255,255,255,0.08); --c-line-2: rgba(255,255,255,0.16);
  --ev-green: #7fd99a; --ev-green-soft: rgba(40,160,80,0.16);
  --ev-amber: #e6c06a; --ev-amber-soft: rgba(230,170,40,0.16);
  --ev-blue:  #9fbef0; --ev-blue-soft: rgba(90,141,214,0.16);
  --ev-mut-soft: rgba(255,255,255,0.07);
}
[data-theme="light"] .inv {
  --c-line: rgba(0,0,0,0.10); --c-line-2: rgba(0,0,0,0.18);
  --ev-green:#1f7a45; --ev-amber:#8a5e00; --ev-blue:#2b5aa8; --ev-mut-soft: rgba(0,0,0,0.05);
}
.inv .ev-badge.is-type { background: var(--ev-blue-soft); color: var(--ev-blue); }
.inv .ev-badge.is-sched { background: var(--ev-green-soft); color: var(--ev-green); }
.inv .ev-badge.is-cancel { background: rgba(209,29,43,0.16); color: #ffb3b3; }
.inv .ev-badge.is-draft { background: var(--ev-mut-soft); color: var(--muted); }
[data-theme="light"] .inv .ev-badge.is-cancel { background: rgba(209,29,43,0.12); color: #b3121f; }

.inv-table th { font-size: 0.64rem; letter-spacing: 0.09em; color: var(--muted-dark); }
.inv-table td { vertical-align: middle; }
.inv-table tbody tr.inv-low td { background: rgba(209,29,43,0.06); }
.inv-table tbody tr.inv-inactive { opacity: 0.55; }
.inv-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 0.4rem; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); }
.inv-order { color: var(--red); }
.inv-who { color: var(--muted); font-size: 0.82rem; max-width: 320px; }
.inv-sub { color: var(--muted-dark); font-size: 0.82rem; margin-top: -0.4rem; }

.inv-qty { display: inline-flex; align-items: center; gap: 0.5rem; }
.inv-step { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--c-line-2); background: var(--ink); color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; }
.inv-step:hover { border-color: var(--red); color: var(--red); }
.inv-qnum { min-width: 1.6rem; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.inv-qnum.is-low { color: var(--red); }

/* ===== Members → Inquiries (website trial / demo / after-school leads) ===== */
.inq-bar { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-bottom: 1.1rem; }
.inq-bar .ev-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.inq-bar .ev-seg button { white-space: nowrap; } /* "Contacted 3" stays on one line; the row scrolls on a narrow phone */
.inq .ev-seg { max-width: 100%; overflow-x: auto; }
.inq-n { font-variant-numeric: tabular-nums; opacity: 0.7; margin-left: 0.15rem; }
.inq-list { display: grid; gap: 0.9rem; }
.inq-card { padding: 0.95rem 1.15rem; display: grid; gap: 0.55rem; border-left: 3px solid var(--c-line-2); min-width: 0; }
.inq-card.is-new { border-left-color: var(--red); }
.inq-card.is-contacted { border-left-color: #e6a23c; }
.inq-card.is-enrolled { border-left-color: #3fae6a; }
.inq-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.7rem; }
.inq-head h3 { margin: 0; font-size: 1.05rem; flex: 1; min-width: 10rem; }
.inq-head .inq-when { color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.inq-form { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: rgba(var(--red-rgb), 0.14); color: var(--red); }
/* One row of facts under the name: the contact, then each short answer as "Label value". */
.inq-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.4rem; font-size: 0.92rem; }
.inq-fact b { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-dark); margin-right: 0.3rem; }
.inq-contact { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; overflow-wrap: anywhere; }
/* The message (and any other long answer) takes the card's full width. */
.inq-msg { border-left: 3px solid var(--c-line-2); padding: 0.15rem 0 0.15rem 0.8rem; }
.inq-msg b { display: block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-dark); margin-bottom: 0.15rem; }
.inq-msg p { margin: 0; font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.inq-contact .icn { width: 16px; height: 16px; color: var(--muted); flex: none; }
.inq-contact a { color: var(--white); }
.inq-warn { display: flex; gap: 0.45rem; align-items: center; font-size: 0.82rem; color: #e6c06a; }
.inq-warn .icn { width: 15px; height: 15px; flex: none; }
.inq-meta { font-size: 0.78rem; color: var(--muted-dark); }
.inq-foot { display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr auto; gap: 0.7rem; align-items: end; border-top: 1px solid var(--c-line); padding-top: 0.6rem; }
.inq-foot select, .inq-foot textarea { min-height: 2.5rem; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.inq-foot label { display: grid; gap: 0.25rem; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.inq-foot label .opt { text-transform: none; letter-spacing: 0; color: var(--muted-dark); }
.inq-foot textarea { resize: vertical; text-transform: none; letter-spacing: 0; }
.inq-actions { display: flex; align-items: center; gap: 0.6rem; }
@media (max-width: 640px) { .inq-foot { grid-template-columns: 1fr auto; } .inq-notes { grid-column: 1 / -1; order: 3; } .inq-actions { justify-content: flex-end; } }
[data-theme="light"] .inq-contact a { color: var(--white); }
[data-theme="light"] .inq-warn { color: #8a5e00; }

/* Age groups: bulk-assign members with no group */
.ag-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.8rem; padding: 0.8rem 1rem; margin-bottom: 0.8rem; font-size: 0.88rem; color: var(--muted); }
.ag-bulk > .icn { width: 18px; height: 18px; flex: none; color: var(--white); }
.ag-bulk > span:first-of-type { flex: 1 1 16rem; }
.ag-bulk b { color: var(--white); }
.ag-bulk__act { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ag-bulk__act .ag-sel { width: auto; min-width: 10rem; }

/* Small helper line under a form field */
.field-hint { color: var(--muted); font-size: 0.8rem; line-height: 1.45; margin: 0.4rem 0 0; }

/* Member banner above the page header: birthday greeting, add-your-birthday, paused */
.member-banner { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem clamp(1.1rem, 3vw, 2.2rem); font-size: 0.86rem; color: var(--muted); background: var(--ink-soft); border-bottom: 1px solid rgba(127, 127, 127, 0.2); }
.member-banner > .icn { width: 20px; height: 20px; flex: none; color: var(--white); }
.member-banner > span { flex: 1; min-width: 0; }
.member-banner b { color: var(--white); }
.member-banner .btn { flex: none; }
.member-banner__x { flex: none; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0.25rem; display: inline-flex; border-radius: 6px; }
.member-banner__x:hover { color: var(--white); }
.member-banner__x .icn { width: 16px; height: 16px; }
.member-banner.is-bday { background: linear-gradient(90deg, rgba(var(--red-rgb), 0.2), rgba(var(--red-rgb), 0.05)); border-bottom-color: rgba(var(--red-rgb), 0.4); color: var(--white); }
.member-banner.is-bday > .icn { color: var(--red); }
.member-banner.is-wait { background: rgba(214, 160, 40, 0.12); border-bottom-color: rgba(214, 160, 40, 0.4); }
.member-banner.is-wait > .icn { color: #d6a028; }

/* Account: add-your-birth-date block */
.acct-bday { border: 1px solid rgba(127, 127, 127, 0.25); border-radius: 12px; padding: 0.8rem 0.9rem; margin: 0.6rem 0; }
.acct-bday__h { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.acct-bday__h .icn { width: 20px; height: 20px; flex: none; color: var(--red); margin-top: 0.05rem; }
.acct-bday__h b { color: var(--white); }
.acct-bday__row { display: flex; gap: 0.5rem; margin-top: 0.7rem; flex-wrap: wrap; }
.acct-bday__row .input { flex: 1 1 11rem; max-width: 14rem; }

/* Roster: upcoming birthdays */
.bday-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; padding: 0.7rem 1rem; margin: 0 0 1rem; font-size: 0.85rem; }
.bday-strip > .icn { width: 18px; height: 18px; color: var(--red); flex: none; }
.bday-strip__lbl { font-weight: 600; color: var(--white); }
.bday-strip__list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bday-chip { border: 1px solid rgba(127, 127, 127, 0.25); border-radius: 999px; padding: 0.2rem 0.65rem; color: var(--muted); white-space: nowrap; }
.bday-chip b { color: var(--white); font-weight: 600; }
.bday-chip.is-today { border-color: rgba(var(--red-rgb), 0.55); background: rgba(var(--red-rgb), 0.12); }
.bday-chip.is-today b { color: var(--red); }
.bday-chip__age { color: var(--muted-dark); }

/* Phones (kept last so it overrides the base rules above): header actions (Add Member, Admin edit…) get their own row so the title and
   subtitle keep the full width instead of wrapping one word per line; the page icon
   chip is redundant next to the burger and is dropped. */
@media (max-width: 640px) {
  .app-header__row { flex-wrap: wrap; row-gap: 0.7rem; }
  /* roster ⋮ column: the default cell padding pushed the table ~1px past its scroll box,
     clipping the button's right edge */
  .table-scroll td.row-actions { padding-left: 0.2rem; padding-right: 0.2rem; }
  .app-header__icon { display: none; }
  .app-header__titles p { font-size: 0.84rem; }
  .app-header__actions { flex-basis: 100%; flex-wrap: wrap; }
  .toolbar .search { flex-basis: 100%; min-width: 0; }
  .admin-table .col-opt { display: none; }
  .inv .ev-seg { max-width: 100%; overflow-x: auto; }
  .fam-parent { flex-wrap: wrap; }
  /* primary tabs scroll sideways instead of wrapping into rows that eat the sticky header */
  .page-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * clamp(1.1rem, 3vw, 2.2rem)); padding-right: 1rem; }
  .page-tabs::-webkit-scrollbar { display: none; }
  .page-tab { flex: none; white-space: nowrap; }
  .fam-parent > div { flex-basis: calc(100% - 60px) !important; }
}

/* ---- The platform console (docs/specs/platform-console/PLAN.md) ---------------------------------------------- */
.console-tag { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-left: 0.35rem; vertical-align: middle; }
.console-stop { text-align: center; }
.console-stop__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(var(--red-rgb), 0.14); color: var(--red); margin-bottom: 1rem; }
.console-stop__icon .icn { width: 26px; height: 26px; }
.console-stop .auth-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.console-page { display: flex; flex-direction: column; gap: 1.1rem; --c-line: rgba(255,255,255,0.08); --c-line-2: rgba(255,255,255,0.16); }
/* Console pages sit close under the header (no extra band of space above the tabs). */
.app-content.console-page { padding-top: clamp(0.9rem, 2vw, 1.3rem); }
/* A page about one dojo: its mark in the header's icon slot, its status beside its name. */
.app-header__titlerow { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.app-header__titlerow #hBadge:empty { display: none; }
.app-header__icon.is-mark { background: none; width: auto; height: auto; }
.app-header__icon.is-mark .console-mark { width: 46px; height: 46px; }
@media (max-width: 860px) { .app-header__icon.is-mark { display: grid; } .app-header__icon.is-mark .console-mark { width: 36px; height: 36px; } }
.console-mark--logo { background: var(--ink); border: 1px solid var(--c-line, rgba(127, 127, 127, 0.25)); padding: 5px; overflow: hidden; }
.console-mark--logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
[data-theme="light"] .console-page { --c-line: rgba(0,0,0,0.10); --c-line-2: rgba(0,0,0,0.18); }
[data-theme="light"] .console-pill.is-live { color: #1f7a45; }
[data-theme="light"] .console-pill.is-draft, [data-theme="light"] .console-warn { color: #8a5e00; }
[data-theme="light"] .console-pill.is-paused { color: #2b5aa8; }
[data-theme="light"] .console-pill.is-archived { color: #a3151f; }
.console-bar { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.console-search { flex: 1 1 260px; display: flex; align-items: center; gap: 0.5rem; position: relative; }
.console-search .icn { position: absolute; left: 0.75rem; width: 16px; height: 16px; color: var(--muted-dark); pointer-events: none; }
.console-search .input { padding-left: 2.2rem; width: 100%; }
.console-sort { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.82rem; }
.console-sort .input { width: auto; }
.console-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.console-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.3rem 1.3rem 1.1rem; color: inherit; text-decoration: none; }
.console-card:hover { border-color: rgba(var(--red-rgb), 0.45); }
.console-card__head { display: flex; align-items: center; gap: 0.8rem; }
.console-card__titles { flex: 1; min-width: 0; }
.console-card__titles h3 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.console-card__host { color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; }
.console-card__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0; }
.console-card__facts dt, .console-facts dt { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.64rem; color: var(--muted-dark); }
.console-card__facts dd { margin: 0.15rem 0 0; font-size: 0.85rem; }
.console-mark { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--red-rgb), 0.16); color: var(--red); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; }
.console-pill { flex: none; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--muted); }
.console-pill.is-live { background: rgba(40,160,80,0.16); color: #7fd99a; }
.console-pill.is-draft { background: rgba(230,170,40,0.16); color: #e6c06a; }
.console-pill.is-paused { background: rgba(110,130,220,0.16); color: #a9b6f0; }
.console-pill.is-archived { background: rgba(var(--red-rgb), 0.14); color: #f0959c; }
.console-warn { color: #e6c06a; }
.console-empty { display: flex; align-items: center; gap: 0.6rem; padding: 2rem 0; }
.console-empty .icn { width: 20px; height: 20px; flex: none; }
.console-readfail { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.console-readfail .icn { width: 18px; height: 18px; flex: none; }
.console-back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.85rem; text-decoration: none; }
.console-back .icn { width: 16px; height: 16px; }
.console-meta { color: var(--muted); font-size: 0.85rem; }
.console-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem 1.6rem; margin: 0; }
.console-facts dd { margin: 0.2rem 0 0; overflow-wrap: anywhere; }
/* An archived dojo's "Delete this dojo" (platform console → Overview): set apart in red, below the facts. */
.console-danger { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; padding: 0.9rem 1rem; border: 1px solid rgba(198, 40, 50, 0.45); border-radius: 10px; }
.console-danger b { display: block; margin-bottom: 0.2rem; }
.console-danger span { color: var(--muted); font-size: 0.88rem; }
.console-note { display: flex; gap: 0.5rem; align-items: flex-start; color: var(--muted); font-size: 0.85rem; margin: 1.2rem 0 0; }
.console-note .icn { width: 16px; height: 16px; flex: none; margin-top: 0.15rem; }
.console-switches { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; }
.console-switches li { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.75rem; border: 1px solid var(--c-line); border-radius: 10px; color: var(--muted); font-size: 0.85rem; }
.console-switches li code { flex: 1; color: inherit; }
.console-switches li.is-on { color: var(--white); }
.console-switch__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-dark); }
.console-switches li.is-on .console-switch__dot { background: #3fbf6a; }
.console-switches li.is-saving { opacity: 0.6; cursor: progress; }
.console-activity { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.console-activity li { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.88rem; }
.console-activity time { color: var(--muted-dark); min-width: 11rem; }
.console-activity code { overflow-wrap: anywhere; }
@media (max-width: 560px) { .console-card__facts { grid-template-columns: 1fr 1fr; } .console-sort { width: 100%; } }
.console-group { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 1.4rem 0 0.2rem; }
.console-switches.is-list { grid-template-columns: 1fr; }
.console-switches.is-list li { align-items: flex-start; gap: 0.8rem; padding: 0.8rem 0.9rem; }
.console-switches.is-list .console-switch__dot { margin-top: 0.4rem; flex: none; }
.console-switch__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.console-switch__text b { color: var(--white); font-weight: 600; }
.console-switch__text small { color: var(--muted-dark); }
.console-switch__text .console-pill { align-self: flex-start; }
.console-switch__state { font-style: normal; font-size: 0.8rem; white-space: nowrap; }
.console-switches li.is-on .console-switch__state { color: #7fd99a; }
[data-theme="light"] .console-switches li.is-on .console-switch__state { color: #1f7a45; }
@media (max-width: 560px) { .console-switches.is-list li { flex-wrap: wrap; } .console-switch__state { width: 100%; padding-left: 1.4rem; } }

.console-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem 1.2rem; align-items: start; margin-bottom: 1.6rem; }
.console-form .field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; }
.console-form .field > span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem; color: var(--muted-dark); }
.console-form__actions { grid-column: 1 / -1; display: flex; gap: 0.6rem; }
.console-form h3, .console-form > small { grid-column: 1 / -1; margin: 0; }
.console-invite { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--c-line); }
.console-banner { display: flex; gap: 0.6rem; align-items: center; padding: 0.7rem 0.9rem; border-radius: 10px; background: rgba(230,170,40,0.12); color: #e6c06a; font-size: 0.88rem; }
[data-theme="light"] .console-banner { color: #8a5e00; }
.console-banner .icn { width: 16px; height: 16px; flex: none; }
.console-toggle { position: relative; flex: none; width: 38px; height: 22px; margin-top: 0.1rem; cursor: pointer; }
.console-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.console-toggle span { position: absolute; inset: 0; border-radius: 999px; background: var(--smoke); transition: background 0.2s; pointer-events: none; }
.console-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.console-toggle input:checked + span { background: #2f9e5a; }
.console-toggle input:checked + span::after { transform: translateX(16px); }
.console-toggle input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.console-toggle input:disabled + span { opacity: 0.5; }
[data-theme="light"] .console-toggle span { background: #c9c9cf; }
.console-people__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.console-grid-table td, .console-grid-table th { text-align: center; }
.console-grid-table td:first-child, .console-grid-table th:first-child { text-align: left; }
@media (max-width: 560px) {
  .console-people thead { display: none; }
  .console-people, .console-people tbody, .console-people tr, .console-people td { display: block; width: 100%; }
  .console-people tr { padding: 0.8rem 0; border-bottom: 1px solid var(--c-line); }
  .console-people td { border: 0; padding: 0.15rem 0; overflow-wrap: anywhere; }
  .console-people td:first-child { font-weight: 600; }
  .console-people__actions { justify-content: flex-start; padding-top: 0.5rem !important; }
}

.console-check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; }
.console-check input { margin-top: 0.3rem; }
.console-fieldset { grid-column: 1 / -1; border: 1px solid var(--c-line); border-radius: 12px; padding: 0.9rem 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.5rem 1rem; margin: 0; }
.console-fieldset legend { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem; color: var(--muted-dark); padding: 0 0.4rem; }
.console-domain-help { color: var(--muted); font-size: 0.88rem; display: grid; gap: 0.3rem; margin: 1rem 0 0; }
.console-form input[type="color"] { height: 46px; padding: 4px 6px; cursor: pointer; }
.console-color { display: flex; gap: 0.5rem; }
.console-color input[type="color"] { width: 64px; flex: none; }
.console-color input[name="hex"] { flex: 1; min-width: 0; font-family: ui-monospace, monospace; text-transform: lowercase; }
/* Brand tab: the accent on a sample button and eyebrow, on the dark page the site and app use. */
.console-brand-preview { grid-column: 1 / -1; justify-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 12px; background: #0c0c0d; border: 1px solid rgba(255, 255, 255, 0.08); }
.console-brand-preview__btn { padding: 0.6rem 1.1rem; border-radius: 999px; background: var(--prev); color: #fff; font-family: "Oswald", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; }
.console-brand-preview__eyebrow { color: var(--prev); font-family: "Oswald", sans-serif; letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.75rem; }
.console-brand-logo { grid-column: 1 / -1; justify-self: start; min-width: 120px; min-height: 64px; align-items: center; justify-content: center; padding: 1rem; border-radius: 12px; background: #0c0c0d; border: 1px solid rgba(255, 255, 255, 0.08); display: inline-flex; }
.console-span { grid-column: 1 / -1; }
.console-font-field { max-width: 36rem; }
/* Brand tab: what "Start from its current website" found. */
.console-found { display: grid; gap: 0.6rem; }
.console-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.console-swatch { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.7rem 0.35rem 0.4rem; border-radius: 999px; border: 1px solid var(--c-line); background: transparent; color: inherit; font: 0.82rem ui-monospace, monospace; cursor: pointer; }
.console-swatch span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); }
.console-swatch.is-on, .console-swatch:hover { border-color: var(--red); }
.console-accent-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-height: 1.4em; }
.console-accent-note.is-ok { color: #7fd99a; }
.console-accent-note.is-warn > span { color: #ffd9a0; }
[data-theme="light"] .console-accent-note.is-ok { color: #1f7a45; }
[data-theme="light"] .console-accent-note.is-warn > span { color: #8a5a00; }
.console-logo-picks { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.console-logo-pick { margin: 0; display: grid; gap: 0.4rem; justify-items: start; }
.console-logo-pick img { display: block; max-height: 64px; max-width: 200px; padding: 0.6rem; border-radius: 10px; background: #0c0c0d; border: 1px solid rgba(255, 255, 255, 0.08); object-fit: contain; }
.console-font-preview { flex-direction: column; align-items: flex-start; gap: 0.4rem; max-width: 36rem; }
.console-font-preview__h { font-family: var(--prev-display), sans-serif; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.6rem; color: #fff; line-height: 1.1; }
.console-font-preview__p { font-family: var(--prev-body), sans-serif; color: #b8b8c0; font-size: 0.95rem; }
.console-brand-icon img { width: 48px; height: 48px; border-radius: 10px; }
.console-brand-logo img { display: block; max-height: 64px; max-width: 240px; object-fit: contain; }
.console-form .console-check > span { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: inherit; }