/* Island Factions — Family Management Portal
   Tokens: wine, charcoal, metallic gold, warm cream. */
:root {
  --ink: #16100f;
  --ink-2: #1c1416;
  --panel: #211719;
  --panel-2: #2a1d20;
  --panel-3: #33242a;
  --line: rgba(200, 161, 90, 0.14);
  --line-2: rgba(239, 228, 208, 0.08);
  --wine: #7a1f33;
  --wine-2: #9b2b43;
  --wine-deep: #4a1320;
  --gold: #c8a15a;
  --gold-2: #e6c98f;
  --gold-3: #8f6f36;
  --cream: #efe4d0;
  --cream-2: #d9ccb6;
  --muted: #a3968a;
  --muted-2: #7b6f67;
  --ok: #6fb592;
  --warn: #e1a651;
  --bad: #d86470;
  --info: #8fb3d9;
  --gold-metal: linear-gradient(135deg, #f1dca6 0%, #c8a15a 38%, #8f6f36 62%, #e6c98f 100%);
  --radius-lg: 14px;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
}
a { color: var(--gold-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1d1315 0%, #150e0f 100%);
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.sidebar .frond { position: absolute; right: -60px; bottom: 40px; width: 260px; opacity: 0.07; pointer-events: none; color: var(--gold); }
.brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px 18px; border-bottom: 1px solid var(--line); }
.brand img, .brand svg { width: 42px; height: 42px; flex: none; }
.brand-name { font-family: var(--display); font-size: 19px; letter-spacing: 0.04em; line-height: 1.05; color: var(--cream); }
.brand-sub { font-size: 11.5px; color: var(--gold); letter-spacing: 0.08em; margin-top: 3px; }
.nav { padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px;
  color: var(--cream-2); font-size: 14px; font-weight: 500; text-decoration: none; position: relative;
}
.nav a svg { width: 18px; height: 18px; opacity: 0.7; flex: none; }
.nav a:hover { background: rgba(239, 228, 208, 0.04); color: var(--cream); }
.nav a.active { background: linear-gradient(90deg, rgba(122, 31, 51, 0.55), rgba(122, 31, 51, 0.12)); color: var(--cream); }
.nav a.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--gold-metal); }
.nav a.active svg { opacity: 1; color: var(--gold-2); }
.nav-group { font-size: 11.5px; color: var(--muted-2); padding: 14px 12px 6px; letter-spacing: 0.04em; }

/* Grouped navigation. A heading opens and closes its own set, and the set holding the
   current page is open whatever was last left. */
.nav-sec { margin-top: 2px; }
.nav-head {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--cream-2); font: inherit; font-size: 14px; font-weight: 500; text-align: left;
}
.nav-head:hover { background: rgba(239, 228, 208, 0.04); color: var(--cream); }
.nav-head svg { width: 18px; height: 18px; opacity: .7; flex: none; }
.nav-head span { flex: 1; min-width: 0; }
.nav-head svg:last-child { width: 15px; height: 15px; opacity: .45; transition: transform .18s ease; }
.nav-sec.open > .nav-head svg:last-child { transform: rotate(180deg); }
.nav-sec.open > .nav-head { color: var(--cream); }
.nav-kids {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease;
  margin-left: 25px; border-left: 1px solid var(--line);
}
.nav-sec.open .nav-kids { grid-template-rows: 1fr; }
.nav-kids > div { overflow: hidden; display: flex; flex-direction: column; gap: 1px; padding: 2px 0; }
.nav-kids a { padding: 7px 12px; font-size: 13.5px; font-weight: 450; border-radius: 0 8px 8px 0; color: var(--muted); }
.nav-kids a:hover { color: var(--cream); }
.nav-kids a.active { background: linear-gradient(90deg, rgba(122, 31, 51, .5), rgba(122, 31, 51, .06)); color: var(--cream); }
.nav-kids a.active::before { left: -1px; top: 6px; bottom: 6px; width: 2px; }
@media (prefers-reduced-motion: reduce) {
  .nav-kids, .nav-head svg:last-child { transition: none; }
}
/* Name and role on one line each. A long display name truncates; the role never wraps,
   because "Faction Overseer" broken across two lines reads as two separate things. */
.me { border-top: 1px solid var(--line); padding: 13px 14px; display: flex; gap: 9px; align-items: center; position: relative; }
.me .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--wine); display: grid; place-items: center; font-family: var(--display); color: var(--gold-2); font-size: 14px; flex: none; }
.me .who { flex: 1 1 auto; min-width: 0; }
.me .who b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me .who span { display: block; font-size: 11.5px; line-height: 1.3; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .icon-btn { flex: none; padding: 5px; }
.me .icon-btn svg { width: 16px; height: 16px; }
.icon-btn { background: none; border: 1px solid transparent; border-radius: 8px; padding: 6px; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { color: var(--cream); border-color: var(--line); }
.icon-btn svg { width: 18px; height: 18px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px;
  padding: 14px 32px; background: rgba(22, 16, 15, 0.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-2);
}
.menu-btn { display: none; }
.search { position: relative; flex: 1; max-width: 440px; }
.search input { width: 100%; padding: 9px 12px 9px 36px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 9px; }
.search input::placeholder { color: var(--muted-2); }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; color: var(--muted-2); }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; max-height: 420px; overflow: auto; }
.search-results .grp { font-size: 11.5px; color: var(--muted-2); padding: 8px 10px 4px; }
.search-results a { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 6px; color: var(--cream); text-decoration: none; font-size: 14px; }
.search-results a:hover, .search-results a.hl { background: rgba(200, 161, 90, 0.1); }
.search-results .empty { padding: 10px; color: var(--muted); font-size: 14px; }
.week-chip { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--cream-2); white-space: nowrap; }
.week-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(111, 181, 146, 0.18); }
.week-chip b { color: var(--cream); font-weight: 600; }
.test-clock { background: repeating-linear-gradient(45deg, #5a3a12, #5a3a12 10px, #4a2f0e 10px, #4a2f0e 20px); color: #ffe2a8; font-size: 13px; padding: 6px 32px; text-align: center; }
.test-clock a { color: #fff; text-decoration: underline; }

.page { padding: 28px 32px 80px; max-width: 1360px; width: 100%; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 1.1; margin: 0; letter-spacing: 0.005em; }
.page-head p { margin: 6px 0 0; color: var(--muted); }
.page-head .actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.crumbs a { color: var(--muted); }

/* ---------- Primitives ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 9px 16px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--cream); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: rgba(200, 161, 90, 0.4); text-decoration: none; }
.btn svg { width: 16px; height: 16px; }
.btn.gold { background: var(--gold-metal); color: #24170a; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn.gold:hover { filter: brightness(1.06); }
.btn.wine { background: var(--wine); border-color: var(--wine-2); }
.btn.wine:hover { background: var(--wine-2); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--cream-2); }
.btn.ghost:hover { background: rgba(239, 228, 208, 0.05); }
.btn.danger { background: rgba(216, 100, 112, 0.14); border-color: rgba(216, 100, 112, 0.4); color: #f3b3ba; }
.btn.sm { padding: 6px 11px; font-size: 13px; border-radius: 7px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; }

.panel { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-lg); }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.panel-head h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; }
.panel-head .sub { color: var(--muted); font-size: 13px; }
.panel-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.panel-body { padding: 18px 20px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.b-ok { color: var(--ok); background: rgba(111, 181, 146, 0.1); border-color: rgba(111, 181, 146, 0.25); }
.b-warn { color: var(--warn); background: rgba(225, 166, 81, 0.1); border-color: rgba(225, 166, 81, 0.28); }
.b-bad { color: var(--bad); background: rgba(216, 100, 112, 0.1); border-color: rgba(216, 100, 112, 0.3); }
.b-info { color: var(--info); background: rgba(143, 179, 217, 0.1); border-color: rgba(143, 179, 217, 0.25); }
.b-gold { color: var(--gold-2); background: rgba(200, 161, 90, 0.1); border-color: rgba(200, 161, 90, 0.3); }
.b-mute { color: var(--muted); background: rgba(163, 150, 138, 0.08); border-color: rgba(163, 150, 138, 0.2); }
.b-wine { color: #f0b8c4; background: rgba(155, 43, 67, 0.25); border-color: rgba(155, 43, 67, 0.5); }

.tier { font-family: var(--display); font-weight: 600; color: var(--gold-2); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.pos { color: var(--ok); }
.neg { color: var(--bad); }

/* Tooltip */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #0c0808; color: var(--cream); border: 1px solid var(--line); padding: 7px 10px; border-radius: 7px;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.4;
  width: max-content; max-width: 260px; white-space: normal; z-index: 50; pointer-events: none;
}

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 600; color: var(--cream-2); }
.field .hint { font-size: 12.5px; color: var(--muted); }
.req::after { content: " *"; color: var(--gold); }
.input, select.input, textarea.input {
  width: 100%; padding: 10px 12px; background: var(--ink-2); border: 1px solid rgba(239, 228, 208, 0.12);
  border-radius: 8px; color: var(--cream);
}
.input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(200, 161, 90, 0.15); }
textarea.input { min-height: 84px; resize: vertical; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.color-row { display: flex; gap: 10px; align-items: center; }
.color-row input[type=color] { width: 44px; height: 40px; border: 1px solid rgba(239, 228, 208, 0.12); border-radius: 8px; background: var(--ink-2); padding: 3px; cursor: pointer; }
.form-error { background: rgba(216, 100, 112, 0.12); border: 1px solid rgba(216, 100, 112, 0.35); color: #f5c2c8; padding: 10px 12px; border-radius: 8px; font-size: 14px; margin-bottom: 14px; }

/* Combo box */
.combo { position: relative; }
.combo-list { position: fixed; z-index: 220; max-height: 260px; overflow: auto; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; }
.combo-list div { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
.combo-list div:hover, .combo-list div.hl { background: rgba(200, 161, 90, 0.12); }
.combo-list div small { color: var(--muted); }

/* Tables */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
table.t td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr.link { cursor: pointer; }
table.t tbody tr.link:hover td { background: rgba(239, 228, 208, 0.025); }
table.t td.r, table.t th.r { text-align: right; }
table.t tbody tr.dim td { opacity: 0.55; }
table.t td.nowrap { white-space: nowrap; }

/* Sortable column headers */
table.t th.sortable { cursor: pointer; user-select: none; position: relative; transition: color .12s ease; }
table.t th.sortable:hover, table.t th.sortable:focus-visible { color: var(--cream); outline: none; }
table.t th.sortable:focus-visible { box-shadow: inset 0 0 0 1px var(--gold-2); border-radius: 6px; }
table.t th.sortable.sorted { color: var(--gold); }
.sort-caret { width: 9px; height: 11px; margin-left: 6px; vertical-align: -1px; fill: currentColor; opacity: .3; transition: opacity .12s ease; }
table.t th.sortable:hover .sort-caret { opacity: .6; }
table.t th.sorted .sort-caret { opacity: 1; }
table.t th.sorted[data-dir="asc"] .sort-caret path:last-child,
table.t th.sorted[data-dir="desc"] .sort-caret path:first-child { opacity: .25; }
.empty-state { padding: 36px 20px; text-align: center; color: var(--muted); }
.empty-state b { display: block; color: var(--cream); font-size: 16px; margin-bottom: 4px; }

/* Crest (family logo or monogram) */
.crest { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; overflow: hidden; font-family: var(--display); font-size: 20px; color: var(--cream); position: relative; box-shadow: inset 0 0 0 1px rgba(230, 201, 143, 0.35); }
.crest img { width: 100%; height: 100%; object-fit: cover; }
.crest.sm { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }
.crest.xl { width: 92px; height: 92px; border-radius: 22px; font-size: 42px; box-shadow: inset 0 0 0 2px rgba(230, 201, 143, 0.55), 0 12px 30px -12px rgba(0,0,0,.8); }

/* The legacy rope: LP progress bar with the next level marked */
.rope { position: relative; height: 10px; border-radius: 10px; background: rgba(239, 228, 208, 0.07); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); overflow: hidden; }
.rope > i { position: absolute; inset: 0 auto 0 0; border-radius: 10px; background: var(--gold-metal); box-shadow: 0 0 12px rgba(200, 161, 90, 0.35); transition: width .5s ease; }
.rope.lg { height: 14px; }
.rope-meta { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-top: 7px; }
.rope-meta b { color: var(--cream); font-weight: 600; }

/* ---------- Dashboard ---------- */
.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 22px; }
.stat { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 14px 16px; }
.stat .v { font-family: var(--display); font-size: 30px; line-height: 1.1; }
.stat .k { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.stat.warn .v { color: var(--warn); }
.stat.bad .v { color: var(--bad); }
.stat.gold .v { background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }

.dash-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; margin-bottom: 26px; }
.cov-row { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--line-2); }
.cov-row:last-child { border-bottom: 0; }
.cov-row .fam { font-weight: 600; flex: 1; }
.cov-row .mgr { color: var(--muted); font-size: 13px; width: 110px; }
.cov-progress { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.cov-progress .big { font-family: var(--display); font-size: 28px; }
.cov-progress .rope { flex: 1; }
.mgr-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line-2); }
.mgr-pill { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-2); }
.mgr-pill.done { border-color: rgba(111, 181, 146, 0.35); }
.mgr-pill.open { border-color: rgba(225, 166, 81, 0.35); }

.attn { list-style: none; margin: 0; padding: 6px 0; max-height: 440px; overflow: auto; }
.attn li a { display: flex; gap: 12px; padding: 10px 20px; color: var(--cream); text-decoration: none; align-items: flex-start; }
.attn li a:hover { background: rgba(239, 228, 208, 0.03); }
.attn .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 14px; }
.attn .ic.warn { background: rgba(225, 166, 81, 0.14); color: var(--warn); }
.attn .ic.bad { background: rgba(216, 100, 112, 0.14); color: var(--bad); }
.attn .ic.gold { background: rgba(200, 161, 90, 0.14); color: var(--gold-2); }
.attn .ic.info { background: rgba(143, 179, 217, 0.12); color: var(--info); }
.attn b { font-weight: 600; font-size: 14px; }
.attn small { display: block; color: var(--muted); font-size: 12.5px; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.filters .input { width: auto; min-width: 150px; padding: 8px 11px; font-size: 14px; }
.filters select.input { padding-right: 30px; }
.fam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.fam-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.fam-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--fam, var(--wine)); }
.fam-card .top { display: flex; gap: 12px; align-items: center; }
.fam-card h3 { font-family: var(--display); font-weight: 500; font-size: 22px; margin: 0; line-height: 1.1; }
.fam-card .lvl { font-size: 13px; color: var(--muted); margin-top: 2px; }
.fam-card .lp { font-family: var(--display); font-size: 26px; }
.fam-card .lp small { font-family: var(--sans); font-size: 12px; color: var(--muted); margin-left: 4px; }
.fam-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 0; }
.fam-card dt { font-size: 12px; color: var(--muted); }
.fam-card dd { margin: 2px 0 0; font-weight: 600; font-size: 14px; }
.fam-card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }

/* ---------- Family profile ---------- */
.fam-hero { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 18px;
  background: radial-gradient(1200px 300px at 0% 0%, color-mix(in srgb, var(--fam, #7a1f33) 55%, transparent), transparent 70%), linear-gradient(180deg, #24181b, #1c1416); }
.fam-hero .inner { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; padding: 26px 28px; align-items: center; }
.fam-hero h1 { font-family: var(--display); font-weight: 500; font-size: 44px; line-height: 1; margin: 0 0 8px; }
.fam-hero .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fam-hero .lp-block { text-align: right; }
.fam-hero .lp-block .v { font-family: var(--display); font-size: 42px; line-height: 1; }
.fam-hero .lp-block .k { color: var(--muted); font-size: 13px; }
.hero-stats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line-2); }
.hero-stats > div { padding: 14px 22px; border-right: 1px solid var(--line-2); }
.hero-stats > div:last-child { border-right: 0; }
.hero-stats .k { font-size: 12px; color: var(--muted); }
.hero-stats .v { font-weight: 600; font-size: 15px; margin-top: 3px; }
.progress-block { padding: 18px 28px 22px; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.progress-block .next { display: flex; gap: 24px; font-size: 13px; color: var(--muted); }
.progress-block .next b { display: block; color: var(--cream); font-size: 15px; }

.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line-2); margin-bottom: 20px; overflow-x: auto; }
.tabs button { letter-spacing: 0.01em; }
.tabs button { background: none; border: 0; padding: 11px 14px; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button:hover { color: var(--cream); }
.tabs button.active { color: var(--cream); border-bottom-color: var(--gold); }
/* The views inside the open group. Lighter than the group row so the hierarchy reads. */
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -12px 0 18px; }
.subtabs button { background: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 13px; color: var(--muted);
  font-weight: 600; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.subtabs button:hover { color: var(--cream); border-color: var(--line); }
.subtabs button.active { color: #140d10; background: var(--gold); border-color: var(--gold); }

.two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.cta-week { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius-lg); border: 1px solid rgba(200, 161, 90, 0.3); background: linear-gradient(120deg, rgba(122, 31, 51, 0.35), rgba(122, 31, 51, 0.08)); margin-bottom: 18px; }
.cta-week h3 { margin: 0; font-size: 16px; }
.cta-week p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.cta-week .btn { margin-left: auto; }

/* ---------- Weekly review ---------- */
.review-head { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.review-head h1 { font-family: var(--display); font-weight: 500; font-size: 34px; margin: 0; line-height: 1.05; }
.review-head .sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.banner { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-radius: var(--radius); margin-bottom: 18px; border: 1px solid; font-size: 14px; }
.banner .ic { font-size: 18px; line-height: 1.2; }
.banner b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.banner .right { margin-left: auto; display: flex; gap: 8px; align-self: center; flex-wrap: wrap; }
.banner.lock { background: rgba(163, 150, 138, 0.07); border-color: rgba(163, 150, 138, 0.25); }
.banner.unlock { background: rgba(225, 166, 81, 0.08); border-color: rgba(225, 166, 81, 0.4); }
.banner.done { background: rgba(111, 181, 146, 0.07); border-color: rgba(111, 181, 146, 0.3); }
.banner.miss { background: rgba(216, 100, 112, 0.08); border-color: rgba(216, 100, 112, 0.35); }
.banner.info { background: rgba(143, 179, 217, 0.06); border-color: rgba(143, 179, 217, 0.25); }

.review-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.cat { margin-bottom: 16px; }
.cat-head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 20px; border-bottom: 1px solid var(--line-2); }
.cat-head h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 20px; }
.cat-head .sum { font-weight: 700; color: var(--gold-2); }
.act { display: grid; grid-template-columns: 1fr 150px 128px 76px; gap: 14px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line-2); }
.act:last-child { border-bottom: 0; }
.act .name { font-weight: 600; font-size: 14.5px; }
.act .rule { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.act .capnote { font-size: 12px; color: var(--warn); font-weight: 600; }
.act .lp { text-align: right; font-weight: 700; font-size: 15px; }
.act .lp.zero { color: var(--muted-2); font-weight: 500; }
.act.over { background: rgba(225, 166, 81, 0.04); }
.stepper { display: flex; align-items: center; border: 1px solid rgba(239, 228, 208, 0.12); border-radius: 9px; overflow: hidden; background: var(--ink-2); width: 128px; }
.stepper button { width: 38px; height: 38px; background: none; border: 0; color: var(--gold-2); font-size: 18px; cursor: pointer; flex: none; }
.stepper button:hover { background: rgba(200, 161, 90, 0.1); }
.stepper button:disabled { color: var(--muted-2); cursor: default; background: none; }
.stepper input { width: 100%; text-align: center; background: none; border: 0; font-weight: 700; font-size: 16px; padding: 0; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stepper.ro { width: auto; border: 0; background: none; }
.stepper.ro input { font-size: 16px; text-align: left; }

.total-card { position: sticky; top: 90px; padding: 20px; }
.total-card .k { color: var(--muted); font-size: 13px; }
.total-card .v { font-family: var(--display); font-size: 54px; line-height: 1; margin: 6px 0 2px; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.total-card .unit { color: var(--cream-2); font-size: 13px; }
.total-card ul { list-style: none; margin: 16px 0; padding: 14px 0 0; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.total-card li { display: flex; justify-content: space-between; }
.total-card li span { color: var(--muted); }
.total-card .proj { font-size: 13px; color: var(--muted); padding: 12px 0; border-top: 1px solid var(--line-2); margin-bottom: 14px; }
.total-card .proj b { color: var(--cream); }
.total-card .rep-line { font-size: 13px; color: var(--muted); padding: 10px 0 0; border-top: 1px solid var(--line-2); margin-top: 10px; }
.total-card .rep-line b { color: var(--gold-2); }
.total-card .btns { display: flex; flex-direction: column; gap: 8px; }
.levelup { color: var(--gold-2); font-weight: 600; }

.summary-list { list-style: none; padding: 0; margin: 0 0 16px; border: 1px solid var(--line-2); border-radius: var(--radius); }
.summary-list li { display: flex; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--line-2); }
.summary-list li:last-child { border-bottom: 0; }
.summary-list li.total { background: rgba(200, 161, 90, 0.08); font-weight: 700; font-size: 16px; }
.diff { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; border: 1px solid var(--line-2); border-radius: var(--radius); margin-bottom: 16px; }
.diff > div { padding: 14px; border-right: 1px solid var(--line-2); }
.diff > div:last-child { border-right: 0; }
.diff .v { font-family: var(--display); font-size: 28px; }
.diff .k { font-size: 12px; color: var(--muted); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 12px 20px; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.timeline li:last-child { border-bottom: 0; }
.timeline .when { color: var(--muted); font-size: 12.5px; }

/* ---------- Modals, drawers, toasts ---------- */
.scrim { position: fixed; inset: 0; background: rgba(8, 5, 5, 0.7); backdrop-filter: blur(3px); z-index: 100; display: grid; place-items: center; padding: 20px; animation: fade .15s ease; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow: auto; box-shadow: var(--shadow); animation: rise .18s ease; }
.modal.wide { max-width: 720px; }
.modal-head { padding: 20px 24px 0; }
.modal-head h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 26px; }
.modal-head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.modal-body { padding: 20px 24px; }
.modal-foot { padding: 16px 24px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end; gap: 10px; background: rgba(0,0,0,.12); position: sticky; bottom: 0; }
.drawer-scrim { place-items: stretch end; padding: 0; }
.drawer { background: var(--panel); border-left: 1px solid var(--line); width: min(460px, 100vw); height: 100vh; overflow: auto; display: flex; flex-direction: column; animation: slide .2s ease; }
.drawer .modal-body { flex: 1; }
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast { background: #120c0c; border: 1px solid var(--line); border-left: 3px solid var(--ok); padding: 12px 16px; border-radius: 10px; min-width: 260px; max-width: 380px; box-shadow: var(--shadow); font-size: 14px; animation: rise .2s ease; }
.toast.err { border-left-color: var(--bad); }
.toast.gold { border-left-color: var(--gold); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-art { position: relative; overflow: hidden; background: radial-gradient(900px 600px at 20% 30%, #5a1627 0%, #2a0d15 45%, #140a0b 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 56px; }
.login-art .frond { position: absolute; width: 620px; right: -140px; top: -60px; color: var(--gold); opacity: .12; }
.login-art .frond.b { width: 420px; left: -120px; bottom: -120px; top: auto; right: auto; transform: rotate(160deg); opacity: .08; }
.login-art .mark { width: 150px; margin-bottom: 22px; position: relative; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .45)); }
.login-art h1 { font-family: var(--display); font-weight: 500; font-size: 58px; line-height: .98; margin: 0; letter-spacing: .01em; position: relative; }
.login-art h1 span { display: block; font-size: 22px; letter-spacing: .12em; color: var(--gold-2); margin-top: 16px; font-family: var(--sans); font-weight: 500; }
.login-art p { color: var(--cream-2); max-width: 420px; margin: 18px 0 0; position: relative; }
.login-form { display: grid; place-items: center; padding: 40px; background: var(--ink); }
.login-form form { width: 100%; max-width: 360px; }
.login-form h2 { font-family: var(--display); font-weight: 500; font-size: 30px; margin: 0 0 6px; }
.login-form .lead { color: var(--muted); margin: 0 0 26px; }
.login-form .btn { width: 100%; padding: 12px; margin-top: 8px; }
.login-form .fine { font-size: 12.5px; color: var(--muted-2); margin-top: 22px; }

/* ---------- Settings ---------- */
.switch { position: relative; width: 38px; height: 22px; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: rgba(239,228,208,.12); border-radius: 22px; cursor: pointer; transition: .15s; }
.switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--cream-2); border-radius: 50%; transition: .15s; }
.switch input:checked + span { background: var(--wine-2); }
.switch input:checked + span::before { transform: translateX(16px); background: var(--gold-2); }
details.audit-d summary { cursor: pointer; color: var(--gold-2); font-size: 13px; }
pre.json { white-space: pre-wrap; word-break: break-word; font-size: 12px; background: var(--ink-2); padding: 10px; border-radius: 8px; color: var(--cream-2); margin: 8px 0 0; max-width: 560px; }

.loading { padding: 60px; text-align: center; color: var(--muted); }
.spin { width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: sp 0.8s linear infinite; display: inline-block; }
@keyframes sp { to { transform: rotate(360deg); } }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .dash-cols, .two { grid-template-columns: 1fr; }
  .review-layout { grid-template-columns: 1fr; }
  .total-card { position: static; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  /* A closed drawer is out of reach as well as out of sight: left visible it keeps its place
     in the tab order and a keyboard lands on links nobody can see. */
  .sidebar { position: fixed; z-index: 90; width: 270px; transform: translateX(-100%); transition: transform .2s ease, visibility .2s; visibility: hidden; }
  .shell.nav-open .sidebar { transform: none; visibility: visible; box-shadow: var(--shadow); }
  @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
  .menu-btn { display: grid; }
  .topbar { padding: 12px 16px; }
  .week-chip .long { display: none; }
  .page { padding: 20px 16px 80px; }
  .fam-hero .inner { grid-template-columns: auto 1fr; }
  .fam-hero .lp-block { grid-column: 1 / -1; text-align: left; }
  .fam-hero h1 { font-size: 34px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .progress-block { grid-template-columns: 1fr; }
  .act { grid-template-columns: 1fr 128px; }
  .act .rule-col { grid-column: 1 / -1; order: 3; }
  .act .lp { grid-column: 2; }
  .login { grid-template-columns: 1fr; }
  .login-art { min-height: 260px; padding: 32px; }
  .login-art h1 { font-size: 40px; }
  .grid-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 10px; }
}

/* ============================================================
   Phases 4-7: Reputation, Relationships, Milestones, Discipline
   ============================================================ */

/* Alliance meeting progress: Meeting 1 ✓ / 2 ✓ / 3 ○ */
.dots { display: inline-flex; gap: 6px; align-items: center; }
.dots i {
  font-style: normal; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; border: 1px solid var(--line); color: var(--muted-2); background: rgba(0,0,0,.18);
}
.dots i.on { color: var(--ok); border-color: rgba(111,181,146,.45); background: rgba(111,181,146,.1); }

/* Respect / Fear side by side. They are independent, never two ends of one scale. */
.rep-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rep-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: rgba(0,0,0,.14); }
.rep-box .k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rep-box .v { font-family: 'Bodoni Moda', Didot, Georgia, serif; font-size: 34px; line-height: 1.1; margin-top: 4px; }
.rep-box.respect .v { color: var(--ok); }
.rep-box.fear .v { color: var(--gold-2); }
.rep-box .sub { font-size: 12px; color: var(--muted-2); margin-top: 2px; }

/* Where a Family stands, in one line. The detail lives on the Progression tab. */
.gate-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px; padding: 10px 14px; background: rgba(0,0,0,.16); font-size: 13.5px; color: var(--muted); }
.gate-line b { color: var(--cream-2); }
.gate-line .go { font-size: 12.5px; white-space: nowrap; }
.gate-line.pending { border-left-color: #f0a93c; }
.gate-line.ready { border-left-color: #4fd39a; }
.gate-line.ready b { color: #4fd39a; }
.gate-line.frozen { border-left-color: #ff5f6f; }

/* Streak pips for the 2-week consistency requirement */
.streak { display: inline-flex; gap: 4px; vertical-align: middle; }
.streak i { width: 18px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); }
.streak i.on { background: #4fd39a; box-shadow: 0 0 10px rgba(79, 211, 154, 0.45); }
.pips { display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.pips small { font-size: 11.5px; color: var(--muted-2); }

/* Attendee chips when logging a qualifying meeting */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(0,0,0,.2); font-size: 12.5px;
}
.chip.hoh { border-color: rgba(200,161,90,.5); background: rgba(200,161,90,.1); color: var(--gold-2); }
.chip button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.chip button:hover { color: var(--bad); }

/* Pair header on a relationship record */
.pair { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pair .vs { color: var(--muted-2); font-family: 'Bodoni Moda', Didot, Georgia, serif; font-size: 20px; }
.pair .side { display: flex; align-items: center; gap: 10px; font-weight: 600; }

/* Consequence picker in the discipline ruling form */
.cons { display: grid; gap: 10px; }
.cons label.opt {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 10px; background: rgba(0,0,0,.14); cursor: pointer;
}
.cons label.opt:hover { border-color: rgba(200,161,90,.34); }
.cons label.opt.major { border-color: rgba(216,100,112,.28); }
.cons label.opt input { margin-top: 3px; }
.cons label.opt b { display: block; font-size: 13.5px; font-weight: 600; }
.cons label.opt small { color: var(--muted-2); font-size: 12px; }
.cons .extra { margin: 8px 0 0 28px; }

@media (max-width: 720px) {
  .rep-pair { grid-template-columns: 1fr; }
}

/* Logo link field */
.logo-link { display: flex; gap: 10px; align-items: center; }
.logo-link .input { flex: 1; min-width: 0; }
.logo-preview { width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px dashed var(--line, rgba(0,0,0,.2)); display: grid; place-items: center; overflow: hidden; }
.logo-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Small crest beside a Family name in tables and lists */
.crest.xs { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; vertical-align: middle; display: inline-grid; }
.fam-tag { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fam-tag b { font-weight: 600; }
.attn .crest.xs { margin: 0 2px; }
.fam-list { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.fam-list a { color: inherit; text-decoration: none; }
.fam-list a:hover b { text-decoration: underline; }
.cov-row .fam { display: flex; align-items: center; }
.search-results .fam-tag { gap: 6px; }
.gf-box { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* First name + Family surname */
.name-row { display: flex; align-items: center; gap: 0; }
.name-row .input { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.name-row .surname { padding: 0 14px; align-self: stretch; display: flex; align-items: center; border: 1px solid var(--line); border-left: 0; border-radius: 0 10px 10px 0; color: var(--gold-2); background: rgba(200, 161, 90, 0.06); font-weight: 600; white-space: nowrap; }
.name-row .surname[hidden] { display: none; }
.name-row:has(.surname[hidden]) .input { border-radius: 10px; }

/* Excuse a week */
.excuse-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -6px 0 16px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 12px; }

/* What's new */
.nav a .dot { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 10px; background: var(--gold); color: #2a1d20; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.updates { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.updates li { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; }
.updates li.fresh { border-color: rgba(200, 161, 90, 0.45); background: rgba(200, 161, 90, 0.05); }
.updates .u-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.updates .u-head b { font-size: 15px; }
.updates .when { color: var(--muted-2); font-size: 12px; }
.updates .u-act { margin-left: auto; display: flex; gap: 6px; }
.updates p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

/* Add points to Families */
.seg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; }
.seg label { display: flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.seg label:has(input:checked) { background: rgba(200, 161, 90, 0.14); color: var(--gold-2); }
.seg input { accent-color: var(--gold); }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; max-height: 190px; overflow: auto; padding: 10px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 14px; }
.pick-list label { display: flex; gap: 8px; align-items: center; }

/* Leaderboard bot box */
.bot-box { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(200, 161, 90, 0.03); }
.bot-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.bot-checks { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.bot-checks li.ok { color: var(--ok, #6fb592); }
.bot-checks code { font-size: 12px; }

/* Audit details, in plain English */
.audit-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 8px 0 2px; font-size: 13px; max-width: 560px; }
.audit-kv .k { color: var(--muted); white-space: nowrap; }
.audit-kv .v { color: var(--cream); word-break: break-word; }
.audit-kv .was { color: var(--muted-2); text-decoration: line-through; }
.audit-kv .arr { color: var(--gold-3); }
details.audit-raw { margin-top: 8px; }
details.audit-raw summary { cursor: pointer; color: var(--muted); font-size: 12px; }

/* Reputation logged with the weekly review */
.rep-panel .rep-track { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--line-2); }
.rep-panel .rep-track label { color: var(--muted); font-size: 13px; }
.rep-panel .rep-track select { max-width: 200px; }
.rep-panel .rep-track .hint { margin: 0; }
.rep-panel .rep-foot { padding: 10px 18px 14px; color: var(--muted); font-size: 13px; }
.rep-panel .lp { color: var(--cream-2); font-size: 13px; }

/* Respect against Fear, as a balance */
.rep-scale { --r: var(--ok); --f: var(--wine-2); padding: 6px 0; max-width: 420px; margin: 16px auto 4px; }
.rep-scale.sm { max-width: 200px; margin: 0; }
.rep-scale .beam { position: relative; height: 22px; }
.rep-scale .beam .bar { position: absolute; left: 50%; top: 8px; width: 120px; height: 3px; margin-left: -60px; border-radius: 3px;
  background: linear-gradient(90deg, var(--r), var(--f)); transform-origin: 50% 50%; transition: transform .25s ease; }
.rep-scale .beam .post { position: absolute; left: 50%; top: 10px; width: 2px; height: 12px; margin-left: -1px; background: var(--gold-3); }
.rep-scale .split { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.rep-scale .split span { transition: width .25s ease; }
.rep-scale .split .respect { background: var(--r); }
.rep-scale .split .fear { background: var(--f); }
.rep-scale .legend { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.rep-scale .legend b { color: var(--cream-2); }
.rep-scale.sm .beam { height: 16px; }
.rep-scale.sm .beam .bar { width: 80px; margin-left: -40px; top: 6px; }
.rep-scale.sm .beam .post { top: 8px; height: 8px; }
.rep-scale.sm .legend { font-size: 11px; }


/* Scrollbars in the portal's own colors, not the browser's */
* { scrollbar-width: thin; scrollbar-color: rgba(200, 161, 90, .35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(200, 161, 90, .28); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(200, 161, 90, .5); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Roles and permissions */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px 22px; }
.perm-group h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-3); }
.perm-group label { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; color: var(--cream-2); }
.perm-group label input { margin-top: 3px; flex: none; }

/* How to use the portal */
.howto { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; align-items: start; }
.howto-toc { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); }
.howto-toc .toc-title { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 0 8px 8px; }
.howto-toc a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--muted); text-decoration: none; transition: background .12s ease, color .12s ease; }
.howto-toc a:hover { color: var(--cream); background: rgba(239, 228, 208, 0.04); }
.howto-toc a.on { color: var(--gold); background: rgba(200, 161, 90, 0.1); }
.howto-body { display: flex; flex-direction: column; gap: 16px; }
.howto-h { font-family: var(--display); font-size: 21px; font-weight: 500; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.howto-h .who { font-family: var(--sans); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(200, 161, 90, 0.35); border-radius: 999px; padding: 3px 9px; }
.howto-body p { margin: 0 0 10px; line-height: 1.65; }
.howto-body h4 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.howto-body .table-wrap { margin-top: 12px; }
ul.how, ol.how { margin: 0 0 10px; padding-left: 20px; }
ul.how li, ol.how li { margin-bottom: 8px; line-height: 1.6; }
ul.how li:last-child, ol.how li:last-child { margin-bottom: 0; }
.howto-body .note { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(239, 228, 208, 0.025); line-height: 1.6; }
.howto-body .note b { display: block; margin-bottom: 3px; }
.howto-body .note.ok { border-color: rgba(122, 176, 137, 0.35); }
.howto-body .note.ok b { color: #8fcea5; }
.howto-body .note.warn { border-color: rgba(214, 168, 84, 0.4); }
.howto-body .note.warn b { color: var(--gold-2); }
@media (max-width: 900px) { .howto { grid-template-columns: 1fr; } .howto-toc { position: static; flex-direction: row; flex-wrap: wrap; } }

/* Your week: the personal strip at the top of the dashboard.
   The panels themselves are styled with the rest of the dashboard further down; what is
   left here is the shared furniture that nothing else overrides. */
.section-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.yw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.yw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--cream); text-decoration: none; transition: border-color .12s ease, background .12s ease; }
.yw-chip:hover { border-color: var(--gold); background: rgba(200, 161, 90, 0.08); }
.yw-chip.more { color: var(--muted); }
.yw-note { display: block; margin-top: 12px; font-size: 13px; color: var(--gold-2); text-decoration: none; }

/* Mine / All switch */
.scope { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; margin-right: 8px; }
.scope button { background: none; border: 0; padding: 4px 12px; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; transition: background .12s ease, color .12s ease; }
.scope button:hover { color: var(--cream); }
.scope button.on { background: rgba(200, 161, 90, 0.16); color: var(--gold-2); }

/* Room to recruit */
.roster-space { margin-bottom: 26px; }
.room-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.room-stat { display: block; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 14px; text-decoration: none; color: inherit; transition: border-color .12s ease, background .12s ease; }
.room-stat:hover { border-color: var(--gold); background: rgba(200, 161, 90, 0.05); }
.room-stat .v { font-family: var(--display); font-size: 28px; line-height: 1.1; }
.room-stat .k { font-size: 12px; color: var(--cream); margin-top: 2px; }
.room-stat .s { font-size: 11px; color: var(--muted); margin-top: 4px; }
.room-stat.ok .v { color: #8fcea5; }
.room-stat.warn .v { color: var(--warn); }
.room-stat.gold .v { color: var(--gold); }
.room-next { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.room-next b { display: block; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.room-list { display: flex; flex-wrap: wrap; gap: 10px; }
.room-list a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; color: var(--cream); text-decoration: none; }
.room-list a:hover { border-color: var(--gold); }
.room-list .muted { font-size: 12px; }
@media (max-width: 900px) { .room-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Roster space in the registry table */
.room { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.room.ok { color: #8fcea5; }
.room.full { color: var(--muted); }
.room.over { color: var(--warn); border-bottom: 1px dotted currentColor; cursor: help; }
.your-week.solo { grid-template-columns: 1fr; }

/* Rules that have not reached the open week yet */
.drift-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.drift-list span { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--cream); }

/* Notifications */
.bell-wrap { position: relative; flex: none; }
.icon-btn.bell { position: relative; }
.icon-btn.bell.has-new { color: var(--gold-2); }
.bell-dot { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--gold); color: #1a1113; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.notif-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 360px; max-width: calc(100vw - 32px); max-height: 440px; overflow: auto; z-index: 240;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.notif-head b { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.notif-panel ul { list-style: none; margin: 0; padding: 4px 0; }
.notif-panel li a { display: flex; gap: 11px; padding: 10px 14px; color: var(--cream); text-decoration: none; align-items: flex-start; }
.notif-panel li a:hover { background: rgba(239, 228, 208, 0.03); }
.notif-panel li.fresh { background: rgba(200, 161, 90, 0.06); }
.notif-panel li.fresh a { border-left: 2px solid var(--gold); padding-left: 12px; }
.notif-panel .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 13px; }
.notif-panel .ic.gold { background: rgba(200, 161, 90, 0.16); color: var(--gold-2); }
.notif-panel .ic.warn { background: rgba(225, 166, 81, 0.14); color: var(--warn); }
.notif-panel .ic.bad { background: rgba(216, 100, 112, 0.14); color: #e07a86; }
.notif-panel .ic.info { background: rgba(143, 179, 217, 0.12); color: #9fc3e4; }
.notif-panel b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.notif-panel small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.notif-panel time { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; opacity: .8; }
@media (max-width: 700px) { .notif-panel { width: calc(100vw - 32px); right: -8px; } }

/* Kudos */
.kudos-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kudos-list li { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; background: rgba(200, 161, 90, 0.04); }
.kudos-list .k-msg { font-size: 14.5px; line-height: 1.6; }
.kudos-list .k-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--muted); }

/* The dashboard points at the registry rather than repeating it */
.see-all { margin-bottom: 26px; }
.see-all a { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px 20px; color: var(--cream); text-decoration: none; font-size: 15px; font-weight: 600; transition: background .12s ease; }
.see-all a:hover { background: rgba(200, 161, 90, 0.05); color: var(--gold-2); }
.see-all small { font-weight: 400; font-size: 13px; color: var(--muted); }
.section-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.section-row .section-label { margin: 0; }

/* Folded long lists */
.fold-row > td, .fold-row > div { padding: 14px 16px; text-align: center; }
.fold-row { background: rgba(239, 228, 208, 0.02); }
.fold-row .muted { margin-right: 12px; font-size: 13px; }
.fold-row .btn { margin-left: 8px; }
.fold-row .btn + .btn { margin-left: 8px; }
ul.updates > li.fold-row, ul.attn > li.fold-row, ul.timeline > li.fold-row, ul.kudos-list > li.fold-row { list-style: none; border: 0; padding: 0; background: none; }


/* ---------- Progression: the climb through the Levels and Tiers ---------- */
.prog .track-wrap { overflow-x: auto; padding: 4px 20px 22px; scrollbar-width: thin; }
.track { display: flex; gap: 14px; min-width: min-content; }
/* Each Tier is a band of Levels, so the shape of the table is visible at a glance. */
.band { border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 14px 10px; background: rgba(239, 228, 208, 0.015); flex: 0 0 auto; }
.band > header { text-align: center; margin-bottom: 14px; display: grid; gap: 1px; }
.band > header b { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.band > header span { font-size: 12.5px; color: var(--muted); }
.band > header small { font-size: 11.5px; color: var(--muted-2); }
.band.b0 { --bc: #f5b63c; } .band.b1 { --bc: #b97bff; } .band.b2 { --bc: #2fcfe8; } .band.b3 { --bc: #ff6ba6; }
.band > header b { color: var(--bc); text-shadow: 0 0 16px color-mix(in srgb, var(--bc) 55%, transparent); }
.band.on { border-color: color-mix(in srgb, var(--bc) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bc) 12%, transparent), transparent 70%);
  box-shadow: 0 0 26px color-mix(in srgb, var(--bc) 18%, transparent); }
.lvls { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; align-items: start; }
.lvl { position: relative; width: 92px; min-height: 118px; text-align: center; display: grid; gap: 2px; justify-items: center; align-content: start; }
/* The rail joining one Level to the next, drawn behind the markers. */
.lvl::before { content: ''; position: absolute; top: 19px; left: -14px; right: 50%; height: 2px; background: var(--line-2); }
.lvl::after { content: ''; position: absolute; top: 19px; left: 50%; right: -14px; height: 2px; background: var(--line-2); }
.lvl:first-child::before { left: 50%; }
.lvl:last-child::after { right: 50%; }
.lvl .node { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; background: var(--panel); border: 2px solid var(--line-2); color: var(--muted-2); }
.lvl .name { font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.lvl .lp { font-size: 11.5px; color: var(--muted-2); }
.lvl.locked { opacity: 0.5; }
.lvl.passed { opacity: 0.55; }
.lvl.passed .node { border-style: dashed; }
.lvl.done .node { border-color: var(--bc); color: var(--bc); background: color-mix(in srgb, var(--bc) 14%, var(--panel));
  box-shadow: 0 0 14px color-mix(in srgb, var(--bc) 25%, transparent); }
.lvl.done::before, .lvl.done::after, .lvl.here::before { background: var(--bc); }
.lvl.here .node { border-color: var(--bc); background: var(--bc); color: #140d10; font-weight: 700;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--bc) 24%, transparent), 0 0 30px color-mix(in srgb, var(--bc) 60%, transparent); }
.lvl.here .name { color: var(--bc); text-shadow: 0 0 14px color-mix(in srgb, var(--bc) 50%, transparent); }
.lvl .crown { position: absolute; top: -15px; font-size: 15px; color: var(--bc); text-shadow: 0 0 12px color-mix(in srgb, var(--bc) 70%, transparent); }
/* Sits outside the flow so a long label never shunts the Levels beside it out of line. */
.lvl .here-tag { position: absolute; top: 92px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #140d10; font-weight: 700; background: var(--bc);
  border-radius: 8px; padding: 4px 9px; display: grid; line-height: 1.4;
  box-shadow: 0 0 22px color-mix(in srgb, var(--bc) 45%, transparent); }
/* The little pointer up to the Level it belongs to. */
.lvl .here-tag::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: var(--bc); border-radius: 2px; }
.lvl .here-tag b { font-size: 12.5px; letter-spacing: 0; text-transform: none; }

.prog-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { .prog-cards { grid-template-columns: 1fr; } }
.standing { font-size: 22px; font-weight: 600; margin-bottom: 12px; }
.standing .tier { color: #f5b63c; text-shadow: 0 0 14px rgba(245, 182, 60, 0.4); }
.prog-cards .bar { height: 10px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.prog-cards .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c87a2a, #f5b63c, #ffd98a); box-shadow: 0 0 16px rgba(245, 182, 60, 0.45); }
.barline { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); margin-top: 7px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pair > div { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.pair b { font-size: 18px; color: #f5b63c; }
.pair span { font-size: 12px; color: var(--muted); }
.nxt-head { font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.nxt-head .tier { color: #b97bff; text-shadow: 0 0 14px rgba(185, 123, 255, 0.45); }
.perks { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.perks li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; font-size: 13.5px; }
.perks li span { color: #f5b63c; font-weight: 700; }
.need { font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line-2); padding-top: 10px; }
.need.ready { color: #4fd39a; }
.need.pending, .need.frozen { color: #f0a93c; }
.tiers { display: grid; gap: 10px; }
.tcard { border: 1px solid var(--line-2); border-left-width: 3px; border-radius: 10px; padding: 9px 12px; display: grid; gap: 1px; }
.tcard.b0 { --bc: #f5b63c; } .tcard.b1 { --bc: #b97bff; } .tcard.b2 { --bc: #2fcfe8; } .tcard.b3 { --bc: #ff6ba6; }
.tcard { border-left-color: var(--bc); }
.tcard.on { background: linear-gradient(90deg, color-mix(in srgb, var(--bc) 16%, transparent), transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--bc) 14%, transparent); }
.tcard b { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bc); text-shadow: 0 0 14px color-mix(in srgb, var(--bc) 45%, transparent); }
.tcard span { font-size: 12px; color: var(--muted); }
.tcard .lp { color: var(--muted-2); }
.tcard .nm { color: var(--cream-2); font-size: 12.5px; margin-top: 2px; }

.evlist { list-style: none; margin: 0; padding: 0; }
.evlist .ev { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line-2); }
.evlist .ev:last-child { border-bottom: 0; }
.evlist .ic { font-size: 15px; line-height: 1.4; }
.evlist .line { font-size: 14px; }
.evlist .sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.evlist .when { font-size: 12px; color: var(--muted-2); margin-top: 3px; }
.evlist .tier .line b:first-child { color: #f5b63c; }
.evlist .down .line b:first-child { color: #ff6b7d; }

/* A week either reached its Level's minimum or it didn't. */
.weekstrip { display: flex; gap: 4px; flex-wrap: wrap; }
.weekstrip i { width: 14px; height: 20px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line-2); }
.weekstrip i.on { background: #4fd39a; border-color: #4fd39a; box-shadow: 0 0 10px rgba(79, 211, 154, 0.4); }

/* A pack or a Tier drop, listed out so staff know what to hand over. */
.drop { border: 1px solid var(--line-2); border-left: 3px solid var(--gold); border-radius: 10px; padding: 10px 13px; margin-bottom: 10px; }
.drop b { display: block; font-size: 13px; color: var(--gold-2); margin-bottom: 6px; }
.drop ul { margin: 0; padding-left: 17px; font-size: 13px; display: grid; gap: 3px; }
.drop small { font-size: 11.5px; color: var(--muted-2); }
.owed { margin-top: 14px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.owed b { font-size: 13px; color: #f5b63c; }
.owed ul { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 5px; font-size: 12.5px; }
.owed li { display: flex; justify-content: space-between; gap: 10px; }
.owed li span { color: var(--muted-2); }
.prog-cards.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1450px) { .prog-cards.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .prog-cards.four { grid-template-columns: 1fr; } }
.choice { display: flex; gap: 18px; flex-wrap: wrap; }
.choice label { display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }

/* Respect and Fear side by side when recording one RP scene. */
.side { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; opacity: 0.6; transition: opacity .15s, border-color .15s; }
.side.on { opacity: 1; }
.side h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.side.respect h4 { color: #4fd39a; }
.side.fear h4 { color: #f5b63c; }
.side.respect.on { border-color: rgba(79, 211, 154, .45); }
.side.fear.on { border-color: rgba(245, 182, 60, .45); }
.side .field:last-child { margin-bottom: 0; }

/* Which way a counted scene goes, set on the row while reviewing. */
.sidepick { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.sidepick button { background: none; border: 0; padding: 4px 11px; font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.sidepick button:hover { color: var(--cream); }
.sidepick button.on { color: #140d10; }
.sidepick button[data-val="RESPECT"].on { background: #4fd39a; }
.sidepick button[data-val="FEAR"].on { background: #f5b63c; }
.rep-row.on.respect .name { color: #4fd39a; }
.rep-row.on.fear .name { color: #f5b63c; }

/* ---------- Family Services ---------- */
.svc-head { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; }
.svc-crest { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
@media (max-width: 760px) { .svc-head { grid-template-columns: 48px 1fr; } .svc-head .actions { grid-column: 1 / -1; } .svc-crest { width: 48px; height: 48px; } }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--gold-2); }

/* The case folder header */
.case-hero { padding: 0; overflow: hidden; margin-bottom: 18px; }
.case-top { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 20px 22px;
  background: linear-gradient(120deg, rgba(122,31,51,.28), transparent 70%); }
.case-id .no { font-size: 12px; letter-spacing: .16em; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.case-id h1 { margin: 2px 0 8px; font-size: 26px; }
.case-id .meta { display: flex; gap: 8px; flex-wrap: wrap; }
.case-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.case-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--line-2); }
.case-facts > div { padding: 12px 18px; border-right: 1px solid var(--line-2); }
.case-facts > div:last-child { border-right: 0; }
.case-facts .k { font-size: 12px; color: var(--muted); }
.case-facts .v { font-size: 15px; font-weight: 600; margin-top: 2px; }
@media (max-width: 860px) { .case-top { grid-template-columns: 1fr; } .case-actions { justify-content: flex-start; } }

/* Session notes, as a running record */
.sesslist { list-style: none; margin: 0; padding: 0; }
.sesslist > li { padding: 16px 22px; border-bottom: 1px solid var(--line-2); }
.sesslist > li:last-child { border-bottom: 0; }
.sess-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.sess-body { white-space: pre-wrap; font-size: 14px; margin: 10px 0; }
.sess-line { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 13px; margin-top: 6px; white-space: pre-wrap; }
.sess-line span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.sess-foot { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.sess-foot summary { cursor: pointer; color: var(--gold-2); }

/* The calendar of sessions arranged elsewhere.
   One ruled sheet rather than seven floating cards: hairline separators, every week a
   full row, and a fixed row height so the month keeps its shape whether it holds one
   session or twenty. */
.cal {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(239, 228, 208, 0.012);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head {
  background: rgba(239, 228, 208, 0.03);
  border-bottom: 1px solid var(--line-2);
}
.cal-dow {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); text-align: center; padding: 9px 0 8px;
}
.cal-cell {
  min-height: 104px; padding: 7px 7px 8px;
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 3px;
}
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-grid .cal-cell:nth-last-child(-n+7) { border-bottom: 0; }
.cal-cell.out { background: rgba(0, 0, 0, 0.14); }
.cal-cell.out .d { color: rgba(123, 111, 103, 0.45); }
.cal-cell.today { background: rgba(200, 161, 90, 0.06); box-shadow: inset 0 0 0 1px rgba(200, 161, 90, 0.38); }
.cal-cell .d {
  font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums;
  line-height: 1; margin-bottom: 1px;
}
.cal-cell.today .d {
  color: var(--ink); font-weight: 700; background: var(--gold);
  border-radius: 999px; width: 19px; height: 19px;
  display: inline-flex; align-items: center; justify-content: center;
  margin: -2px 0 1px -2px;
}
.cal-item {
  display: block; width: 100%; text-align: left; border: 0; border-radius: 5px;
  padding: 3px 6px; font-size: 11.5px; line-height: 1.35; cursor: pointer;
  background: rgba(200, 161, 90, 0.16); color: var(--cream);
  border-left: 2px solid var(--gold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-item:hover { background: rgba(200, 161, 90, 0.3); }
.cal-item .t { color: var(--gold-2); font-variant-numeric: tabular-nums; margin-right: 3px; }
.cal-item.completed { background: rgba(79, 211, 154, 0.14); border-left-color: var(--ok); }
.cal-item.completed .t { color: var(--ok); }
.cal-item.canceled { background: rgba(123, 111, 103, 0.14); border-left-color: var(--muted-2); opacity: .65; }
.cal-item.canceled .t, .cal-item.canceled { text-decoration: line-through; }
.cal-item.no_show { background: rgba(245, 182, 60, 0.14); border-left-color: var(--warn); }
.cal-item.no_show .t { color: var(--warn); }
.cal-more { font-size: 10.5px; color: var(--muted-2); padding-left: 2px; }
/* An empty month should read as quiet, not as something that failed to load. */
.cal-none {
  text-align: center; color: var(--muted-2); font-size: 13px;
  padding: 14px 16px 2px;
}
@media (max-width: 760px) {
  .cal-cell { min-height: 62px; padding: 5px 4px; }
  .cal-item { font-size: 10px; padding: 2px 4px; }
  .cal-item .t { display: none; }
  .cal-dow { font-size: 9.5px; letter-spacing: .08em; }
}

/* The public Family story */
.storyline { list-style: none; margin: 0; padding: 6px 22px 16px; }
.storyline > li { display: grid; grid-template-columns: 18px 1fr; gap: 14px; position: relative; padding-bottom: 18px; }
.storyline > li::before { content: ''; position: absolute; left: 8px; top: 16px; bottom: -4px; width: 2px; background: var(--line-2); }
.storyline > li:last-child::before { display: none; }
.storyline .dot { width: 11px; height: 11px; border-radius: 999px; background: var(--gold); margin-top: 6px; position: relative; z-index: 1;
  box-shadow: 0 0 0 4px rgba(200,161,90,.14); }
.storyline .when { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.storyline b { display: block; font-size: 15px; margin-top: 2px; }
.storyline p { margin: 6px 0 0; font-size: 14px; white-space: pre-wrap; }
.storyline .by { font-size: 12px; color: var(--muted-2); margin-top: 8px; display: flex; gap: 10px; align-items: center; }
.story-img { max-width: 100%; max-height: 260px; border-radius: 10px; margin-top: 10px; border: 1px solid var(--line-2); }

/* Family Services: the compact case list on the overview, where a full table would be squeezed. */
ul.caselist { list-style: none; margin: 0; padding: 0; }
ul.caselist li { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--line); }
ul.caselist li:first-child { border-top: 0; }
ul.caselist li.link { cursor: pointer; }
ul.caselist li.link:hover { background: rgba(239, 228, 208, 0.025); }
ul.caselist .no { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
ul.caselist .main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
ul.caselist .main b { font-size: 14px; }
ul.caselist .main .sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
ul.caselist .badge { flex: 0 0 auto; }

/* ===================================================================
   The dashboard, dressed for the Islands

   One sunset runs under the whole page: the hero, the section rule and
   the recruiting cards are all cut from the same scenery, so the colour
   carries through instead of six unrelated gradients.
   Images live in public/brand and are drawn by scripts/scenery.py.
   =================================================================== */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 20px; margin-bottom: 20px;
  padding: 44px 34px 40px; min-height: 184px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  border: 1px solid rgba(200, 161, 90, 0.26);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("/brand/scene-sunset.jpg") center 34% / cover no-repeat;
}
/* Two jobs, kept separate: a soft wash so the whole banner sits in the page's key, and a
   scrim anchored to the left where the words are. The right-hand third keeps its colour. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(94deg, rgba(18, 12, 14, 0.9) 0%, rgba(18, 12, 14, 0.74) 26%, rgba(18, 12, 14, 0.3) 56%, rgba(18, 12, 14, 0.04) 100%),
    linear-gradient(0deg, rgba(18, 12, 14, 0.4), rgba(18, 12, 14, 0) 55%);
}
.hero-text { min-width: 0; flex: 1 1 32ch; }
.hero h1 {
  font-family: var(--display); font-weight: 500; font-size: clamp(27px, 2.7vw, 39px); line-height: 1.08;
  margin: 0; letter-spacing: .004em; color: var(--cream);
  display: flex; align-items: baseline; gap: .2em; flex-wrap: wrap;
}
/* The one flourish on the page, so it is given room: everything near it stays plain. */
.hero-name { position: relative; display: inline-block; }
.hero h1 em {
  font-family: "Pinyon Script", var(--display), cursive; font-style: normal; font-weight: 400;
  font-size: 1.85em; line-height: .84; padding: 0 .14em 0 .04em; display: inline-block;
  background: linear-gradient(96deg, var(--gold) 4%, #fff0cd 40%, var(--gold-2) 62%, var(--gold-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Resting over the tail of the name rather than butted against it. */
.hero-crown {
  position: absolute; right: -.52em; top: -.3em; color: var(--gold-2);
  transform: rotate(16deg); pointer-events: none; filter: drop-shadow(0 1px 2px rgba(18,12,14,.8));
}
.hero-crown svg { width: 24px; height: 24px; display: block; }
.hero p { margin: 10px 0 0; color: var(--cream-2); font-size: 14.5px; line-height: 1.5; }
.hero p i { font-style: normal; color: var(--gold-3); padding: 0 7px; }
.hero .actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.hero .actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.hero .actions .btn svg { width: 16px; height: 16px; flex: none; }

/* A plain rule under the section heading. One piece of scenery on the page is enough. */
.section-row { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.section-row::after {
  content: ""; flex: 1; height: 1px; margin-right: auto;
  background: linear-gradient(90deg, var(--line), rgba(200, 161, 90, 0) 70%);
}
.section-row .section-label { margin: 0; white-space: nowrap; }
.section-row .scope { order: 3; margin-left: 0; }

/* Six numbers, six colours. The tone says what kind of number it is before it is read.
   The wash is soft and the edge does the work, so none of them glows. */
.stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 16px 17px 16px; border-radius: 15px; text-decoration: none;
  border: 1px solid var(--tone-line, var(--line-2));
  background: linear-gradient(160deg, var(--tone-a, rgba(239,228,208,.05)) 0%, rgba(33,23,25,0) 62%), var(--panel);
  transition: border-color .14s ease, background .14s ease;
}
.tile:hover { border-color: var(--tone-edge, var(--gold)); }
.tile-ic {
  display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px;
  background: var(--tone-chip, rgba(239,228,208,.08)); color: var(--tone-edge, var(--gold-2));
  margin-bottom: 14px; flex: none;
}
.tile-ic svg { width: 18px; height: 18px; display: block; }
.tile-v {
  display: block; font-family: var(--display); font-weight: 500; font-size: 29px; line-height: 1;
  color: var(--cream); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.tile-k { display: block; font-size: 12.5px; line-height: 1.35; color: var(--muted); margin-top: 7px; }
.tile.zero .tile-v { color: var(--muted-2); }
.tile.isle     { --tone-edge: #3fd3a6; --tone-chip: rgba(63,211,166,.16); --tone-a: rgba(63,211,166,.1);  --tone-line: rgba(63,211,166,.26); }
.tile.risk     { --tone-edge: #ef6572; --tone-chip: rgba(239,101,114,.17); --tone-a: rgba(239,101,114,.1); --tone-line: rgba(239,101,114,.28); }
.tile.due      { --tone-edge: #eda944; --tone-chip: rgba(237,169,68,.17);  --tone-a: rgba(237,169,68,.1);  --tone-line: rgba(237,169,68,.28); }
.tile.missed   { --tone-edge: #a2b2c4; --tone-chip: rgba(162,178,196,.13); --tone-a: rgba(162,178,196,.06); --tone-line: rgba(162,178,196,.2); }
.tile.standing { --tone-edge: #ee62a4; --tone-chip: rgba(238,98,164,.17);  --tone-a: rgba(238,98,164,.1);  --tone-line: rgba(238,98,164,.28); }
.tile.climb    { --tone-edge: #8f73f2; --tone-chip: rgba(143,115,242,.19); --tone-a: rgba(143,115,242,.11); --tone-line: rgba(143,115,242,.3); }

/* Your week, in the Family colours, with a frond laid into the corner and the crown of the
   house behind the numbers. Both sit well under the text and neither is allowed to glow. */
.your-week { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; margin-bottom: 30px; align-items: start; }
.your-week > div { border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); padding: 20px 22px 20px; }
.yw-main {
  position: relative; overflow: hidden; isolation: isolate;
  border-color: rgba(200, 161, 90, .26) !important;
  background:
    radial-gradient(135% 160% at 0% 0%, #6a1527 0%, #4a0f1d 42%, #2e1118 74%, #231016 100%) !important;
}
/* A frond across the top corner, cut from the same drawing as the sidebar's. */
.frond-art svg.frond { position: static; width: 100%; height: 100%; opacity: 1; inset: auto; }
.yw-crest {
  position: absolute; z-index: -1; right: -26px; bottom: -34px; transform: rotate(-10deg);
  color: var(--gold); opacity: .07; pointer-events: none;
}
.yw-crest svg { width: 164px; height: 164px; display: block; }
.yw-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.yw-head h2 { font-family: var(--display); font-weight: 500; font-size: 20px; margin: 0; letter-spacing: .004em; }
.yw-head .sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.yw-head .sub svg { width: 14px; height: 14px; opacity: .7; }
.yw-prog { display: flex; align-items: center; gap: 16px; margin-bottom: 15px; }
.yw-prog .big { font-family: var(--display); font-size: 29px; line-height: 1; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.yw-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.yw-jobs {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(168deg, rgba(200,161,90,.07), rgba(33,23,25,0) 55%), var(--panel) !important;
  border-color: rgba(200,161,90,.2) !important;
}
.yw-jobs::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .2;
  background: url("/brand/scene-harbour.jpg") center 62% / cover no-repeat;
  -webkit-mask-image: linear-gradient(195deg, transparent 42%, #000);
  mask-image: linear-gradient(195deg, transparent 42%, #000);
}
.yw-jobs .frond-art {
  position: absolute; z-index: -1; left: -40px; bottom: -48px; width: 190px; height: 190px;
  color: var(--gold); opacity: .07; transform: rotate(26deg) scaleX(-1); pointer-events: none;
}
.yw-jobs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* The row is the link. Without this the list item keeps a line box of its own and every
   row carries fifteen pixels of nothing under it. */
.yw-jobs li { display: flex; }
.yw-jobs li a { flex: 1; }
.yw-jobs li a {
  display: flex; align-items: center; gap: 11px; padding: 10px 14px;
  border: 1px solid rgba(200,161,90,.22); border-radius: 12px;
  background: rgba(18,12,14,.55); color: var(--cream); text-decoration: none; font-size: 13.5px;
  transition: border-color .12s ease, background .12s ease;
}
.yw-jobs li a:hover { border-color: var(--gold); background: rgba(200,161,90,.1); }
.yw-jobs li a svg { width: 16px; height: 16px; color: var(--gold-2); flex: none; }
.yw-done { color: var(--muted); font-size: 13.5px; }

/* Recruiting room: four cards, each over its own stretch of coast. */
/* A small heading icon. Sized here rather than per-use, because an unsized inline SVG
   expands to fill whatever it is dropped into. */
.head-ic { display: inline-grid; place-items: center; color: var(--gold-2); flex: none; }
.head-ic svg { width: 18px; height: 18px; display: block; }
.room-next b .head-ic { display: inline-block; margin-right: 8px; vertical-align: -4px; }
.room-stat {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 15px; padding: 18px 18px 20px; text-decoration: none; display: block;
  border: 1px solid var(--tone-line, var(--line-2));
}
.room-stat::before {
  content: ""; position: absolute; inset: 0; z-index: -2; opacity: .8;
  background: var(--tone-img, url("/brand/scene-shore.jpg")) var(--tone-pos, center 60%) / cover no-repeat;
}
.room-stat::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(168deg, var(--tone-wash, rgba(33,23,25,.55)) 0%, var(--tone-wash, rgba(33,23,25,.55)) 32%, rgba(16,11,12,.93) 86%);
}
.room-stat .ic {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: var(--tone-chip, rgba(239,228,208,.1)); color: var(--tone-edge, var(--gold-2)); margin-bottom: 10px;
}
.room-stat .ic svg { width: 18px; height: 18px; }
.room-stat:hover { border-color: var(--tone-edge, var(--gold)); }
/* Four stretches of the same coast, each under its own light. */
.room-stat.ok    { --tone-edge: #37d6a4; --tone-chip: rgba(55,214,164,.22);  --tone-line: rgba(55,214,164,.32); --tone-wash: rgba(4,58,48,.72);  --tone-img: url("/brand/scene-harbour.jpg"); --tone-pos: 20% 70%; }
.room-stat.full  { --tone-edge: #e6c98f; --tone-chip: rgba(230,201,143,.22); --tone-line: rgba(200,161,90,.34); --tone-wash: rgba(84,44,14,.7);   --tone-pos: 72% 64%; }
.room-stat.warn  { --tone-edge: #ef5aa0; --tone-chip: rgba(239,90,160,.22);  --tone-line: rgba(239,90,160,.34); --tone-wash: rgba(92,10,56,.72);  --tone-pos: 38% 52%; }
.room-stat.gold  { --tone-edge: #8b6cf4; --tone-chip: rgba(139,108,244,.24); --tone-line: rgba(139,108,244,.36); --tone-wash: rgba(32,18,88,.74); --tone-img: url("/brand/scene-night.jpg"); --tone-pos: 60% 66%; }
.room-stat .v { font-family: var(--display); font-size: 29px; line-height: 1; color: var(--cream); }
.room-stat .k { font-size: 13.5px; color: var(--cream-2); margin-top: 5px; font-weight: 500; }
.room-stat .s { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* The six tiles step down in pairs so a row is never left with one card on its own. */
@media (max-width: 1340px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) {
  .your-week { grid-template-columns: 1fr; }
  .hero .actions { margin-left: 0; }
}
@media (max-width: 860px) {
  .hero { padding: 26px 20px 24px; border-radius: 16px; min-height: 0; gap: 18px; }
  .hero h1 { font-size: 26px; }
  .hero h1 em { font-size: 1.7em; }
  .hero-crown svg { width: 19px; height: 19px; }
  .hero .actions { width: 100%; }
  .hero .actions .btn { flex: 1 1 auto; justify-content: center; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 14px 14px 13px; border-radius: 13px; }
  .tile-ic { width: 30px; height: 30px; margin-bottom: 10px; }
  .tile-v { font-size: 27px; }
  .your-week > div { padding: 16px 17px 18px; border-radius: 15px; }
  .yw-crest { display: none; }
  .section-row::after { display: none; }
  .room-stat { padding: 15px 15px 16px; }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr; }
  .hero h1 { display: block; }
  .hero h1 em { font-size: 1.9em; }
}
@media (prefers-reduced-motion: reduce) { .tile, .tile:hover { transition: none; } }