/* Agent Builder Connect — the one stylesheet. Mobile-first; brand green used with restraint. */
:root {
  --bg: #f3f4f6; --surface: #fff; --surface2: #f7f8fa; --ink: #17222d; --ink2: #3d4c5c; --muted: #67788a;
  --line: #e2e6ea; --accent: #0a7d3e; --accent-dark: #065e2e; --accent-soft: #e8f5ed;
  --good: #177245; --warn: #9a6200; --bad: #b3261e; --ai: #0e6e6e;
  --r: 14px; --shadow: 0 1px 2px rgba(23,34,45,.04), 0 4px 16px rgba(23,34,45,.05);
  --side: 248px; --bar: 56px; --tab: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f151b; --surface: #17202a; --surface2: #1d2833; --ink: #e8edf2; --ink2: #c3ccd5; --muted: #8b9aa9;
    --line: #2a3643; --accent: #3fae6e; --accent-dark: #67c48d; --accent-soft: #173326;
    --good: #5cc48a; --warn: #e2b04a; --bad: #ef7a72; --ai: #4fc0c0;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); color-scheme: dark; }
}
/*  ---------- Base & module styles ----------  */
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
label { display: block; margin: .75rem 0; }
input { display: block; width: 100%; margin-top: .3rem; padding: .6rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
:where(button) { padding: .6rem 1rem; border: 0; border-radius: 6px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.login button { width: 100%; margin-top: .5rem; }
main { margin: 1.5rem auto; padding: 0 1rem; }
h2 { margin-top: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; }
th { text-transform: uppercase; }
.table-wrap { overflow-x: auto; }
.tag { display: inline-block; }
.tag.blue { background: var(--accent-soft); color: var(--accent); }
.steps { padding-left: 1.25rem; margin: 0; }
.steps li { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.steps li.done strong { color: var(--accent-dark); }
/* ---- Shell ---- */
.nav { gap: .25rem; }
.nav a { padding: .35rem .7rem; border-radius: 6px; color: var(--ink2); text-decoration: none; font-weight: 600; }
.nav a.active { background: var(--accent-soft); color: var(--accent); }
main { max-width: 1200px; }
.stack { display: grid; gap: .75rem; }
.strong { font-weight: 700; }
.mono { font-family: ui-monospace, Consolas, monospace; }
.tag.ai { background: color-mix(in srgb, var(--ai) 10%, var(--surface)); color: var(--ai); }
button.small { padding: .35rem .7rem; font-size: .85rem; }
button.secondary { background: var(--surface2); color: var(--ink); }
select { display: block; width: 100%; margin-top: .3rem; padding: .55rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: var(--surface); }
input[type=date] { width: auto; }
.bar { border-radius: 99px; overflow: hidden; margin: .5rem 0; }
.bar i { display: block; height: 100%; border-radius: 99px; }
.note { margin-top: .75rem; }
.toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(20px); max-width: min(92vw, 640px); padding: .7rem 1rem; opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translateX(-50%); }
/* ---- Easy Start ---- */
.hist { display: grid; gap: .4rem; margin-top: .75rem; }
.hist div { background: var(--surface2); padding: .4rem; text-align: center; }
.hist strong { display: block; font-size: 1.3rem; }
.hist span { font-size: .75rem; color: var(--muted); }
.parked { padding: .6rem 0; border-top: 1px solid var(--line); }
.easy-layout { display: grid; align-items: start; }
.rosterrow { text-decoration: none; }
.rosterrow:hover { border-color: var(--line); }
.rosterrow.selected { background: var(--accent-soft); }
.tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.estep { display: grid; grid-template-columns: 2.2rem 1fr minmax(200px, 260px); gap: .75rem; padding: .8rem; border: 1px solid var(--line); }
.estep.done { border-color: color-mix(in srgb, var(--accent) 35%, var(--surface)); background: var(--accent-soft); }
.estep.pending { border-color: color-mix(in srgb, var(--warn) 40%, var(--surface)); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.estep.current { box-shadow: 0 0 0 2px var(--accent-soft); }
.enum { width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface2); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.estep.pending .enum { background: var(--warn); color: #fff; }
.etitle { font-weight: 700; margin-bottom: .2rem; }
.sides { display: grid; gap: .5rem; align-content: start; }
.side { border: 1px dashed var(--line); border-radius: 8px; padding: .5rem .6rem; display: grid; gap: .35rem; font-size: .9rem; }
.side.marked { border-style: solid; border-color: color-mix(in srgb, var(--accent) 35%, var(--surface)); background: var(--accent-soft); }
.side label, .sides label { margin: 0; font-weight: 400; }
@media (max-width: 860px) {
  .easy-layout { grid-template-columns: 1fr; }
  .estep { grid-template-columns: 2.2rem 1fr; }
  .estep .sides { grid-column: 1 / -1; }
  .hist { grid-template-columns: repeat(4, 1fr); }
}
/* ---- Shared layout bits ---- */
.spread { display: flex; justify-content: space-between; align-items: center; }
.spread h3, .card h3 { margin: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.grid2 > .card { margin-bottom: 0; }
a.btnlink { display: inline-block; padding: .35rem .7rem; border-radius: 6px; background: var(--accent-soft); font-weight: 600; font-size: .85rem; text-decoration: none; }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.formgrid label { margin: .5rem 0 0; }
.seg { flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; font-size: .9rem; margin: .75rem 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.msgbox { margin-top: .75rem; }
.later { font-style: italic; margin: .5rem 0 0; }
/* ---- Person Hub ---- */
.hub-check { grid-template-columns: 1.4rem 1fr; border-bottom: 1px solid var(--surface2); }
.hc-ic { border: 1.5px solid var(--line); }
.hub-check.done .hc-ic { border-color: var(--accent); }
.hub-check.pending .hc-ic { border-color: var(--warn); }
.focus-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.jos-note { background: color-mix(in srgb, var(--ai) 10%, var(--surface)); border-radius: 8px; padding: .7rem .9rem; font-size: .9rem; margin-top: .6rem; }
.jos-close { font-weight: 700; margin-top: .3rem; color: var(--ai); }
.jos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; }
.jos-stage { border: 1px solid var(--line); border-radius: 8px; padding: .6rem; display: grid; gap: .35rem; align-content: start; }
.jos-stage.done { border-color: color-mix(in srgb, var(--accent) 35%, var(--surface)); background: var(--accent-soft); }
.jos-stage label { margin: 0; font-weight: 400; }
@media (max-width: 860px) {
  .grid2, .formgrid, .jos-grid { grid-template-columns: 1fr; }
}
/* ---- Licensing ---- */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.rosterrow.inactive { opacity: .65; }
h3.sub { font-size: .9rem; margin: 1rem 0 .5rem; color: var(--muted); }
@media (max-width: 860px) { .grid3 { grid-template-columns: 1fr; } }
/* ---- Field Training ---- */
.outing { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--line); }
.ft-credit { margin-top: .4rem; padding: .5rem .7rem; border-radius: 6px; background: color-mix(in srgb, var(--ai) 8%, var(--surface)); font-size: .85rem; }
.ft-credit.warn { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.ft-form { margin-top: 1rem; padding-top: .75rem; border-top: 1px dashed var(--line); }
.ft-form h4 { margin: 0 0 .25rem; }
input[type=number] { width: 100%; }
/* ---- GX Monitor ---- */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.grid3 { margin-bottom: 1rem; }
.grid2.tight { margin: .5rem 0 0; }
.gx-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: .75rem; }
.gx-stage { display: grid; gap: .2rem; align-content: start; }
.gx-stage.final { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--surface)); }
.gx-big { font-size: 1.35rem; font-weight: 700; }
.gx-mini { display: grid; grid-template-columns: 4.5rem 1fr 9rem; gap: .5rem; align-items: center; }
.gx-mini .bar { margin: .25rem 0; }
.gx-cal-block { border-top: 1px solid var(--line); padding: .8rem 0; }
.gx-cal-block h3 { font-size: 1rem; }
tr.total td { background: var(--surface2); }
.gx-entry { display: grid; grid-template-columns: 1fr minmax(180px, 280px); gap: .75rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--line); }
.gx-entry.out { opacity: .75; }
.gx-entry.new { border-top: 2px solid var(--line); margin-top: .5rem; }
.gx-entry-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.gx-entry-fields label { margin: 0; font-weight: 400; }
@media (max-width: 860px) {
  .grid4, .gx-flow, .gx-entry, .gx-entry-fields { grid-template-columns: 1fr; }
  .gx-mini { grid-template-columns: 4.5rem 1fr; }
}
/* ---- MD Checklist ---- */
.dual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.dual-path { border: 1px solid var(--line); border-radius: 8px; padding: .75rem; }
.dual-path.met { border-color: color-mix(in srgb, var(--accent) 35%, var(--surface)); background: var(--accent-soft); }
.dual-or { text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); margin-top: .5rem; }
.md-req { border: 1px solid var(--line); }
.md-req.met { border-color: color-mix(in srgb, var(--accent) 35%, var(--surface)); background: var(--accent-soft); }
.md-windows { display: grid; margin-top: .5rem; }
.md-window { border: 1px solid var(--line); display: grid; gap: .35rem; font-size: .85rem; }
.md-window.hit { border-color: color-mix(in srgb, var(--accent) 35%, var(--surface)); background: var(--accent-soft); }
.md-pair { display: grid; grid-template-columns: 3.2rem 1fr auto 1fr auto; gap: .25rem; align-items: center; }
.md-pair input { padding: .3rem; margin: 0; }
.md-slot { display: grid; gap: .5rem; align-items: center; margin-top: .4rem; }
.md-slot input { margin: 0; }
.snum { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--surface2); display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
.md-slot.filled .snum { background: var(--accent); color: #fff; }
.pips { display: flex; gap: .35rem; }
.pip { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.pip.hit { background: var(--accent); border-color: var(--accent); color: #fff; }
.pip.live { border-style: dashed; border-color: var(--warn); }
.streak-num { font-size: 2.2rem; font-weight: 700; }
@media (max-width: 860px) { .dual-grid, .md-windows { grid-template-columns: 1fr; } }
/* ---- SMD Checklist ---- */
.pips.six .pip { width: 1.8rem; height: 1.8rem; }
/* ---- Promotions ---- */
.rung-head { font-weight: 700; margin: 1rem 0 .25rem; }
.announce { white-space: pre-wrap; }
/* ---- Share List + Memory Jogger ---- */
.nav { flex-wrap: wrap; }
.script-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .6rem; }
.script-card { align-content: start; }
.script-card.rec { background: var(--accent-soft); }
.script-card.easy { border-color: color-mix(in srgb, var(--accent) 35%, var(--surface)); background: var(--accent-soft); }
.sc-text { line-height: 1.5; }
.jogger-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .35rem; margin-top: .75rem; }
.jog-item { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .3rem; align-items: center; text-align: left; background: var(--surface); color: var(--ink); border: 1px solid var(--line); padding: .45rem .55rem; font-weight: 400; font-size: .88rem; }
.jog-item:hover { border-color: var(--line); }
.jog-item.used { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--surface)); }
.jog-item.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.jnum { color: var(--muted); font-weight: 700; font-size: .8rem; }
.jadd { font-size: .75rem; color: var(--accent); font-weight: 700; }
@media (max-width: 860px) { .script-grid { grid-template-columns: 1fr; } }
/* ---- Referrals ---- */
.ref-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ref-track { box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ref-track.client { border-top-color: var(--ai); }
.ref-track ul { margin: .5rem 0; padding-left: 1.2rem; font-size: .9rem; }
.ref-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: .5rem 0; }
.ref-pick button { border: 2px solid var(--line); }
.ref-pick button.on-recruit { border-color: var(--accent); background: var(--accent-soft); }
.ref-pick button.on-client { border-color: var(--ai); background: color-mix(in srgb, var(--ai) 10%, var(--surface)); }
.ref-dot.next { font-weight: 700; }
@media (max-width: 860px) { .ref-tracks, .ref-pick { grid-template-columns: 1fr; } }
.script-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .script-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .script-grid.four { grid-template-columns: 1fr; } }
/* ---- Top Reasons to Win ---- */
.win-q { font-size: 1.05rem; }
.win-reason { display: grid; gap: .4rem; align-items: center; margin-top: .35rem; }
.win-reason input { margin: 0; }
textarea { display: block; width: 100%; padding: .6rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; resize: vertical; }
.win-text { white-space: pre-wrap; background: var(--surface2); border-radius: 6px; padding: .6rem; min-height: 2.4rem; }
.grid4.tight { gap: .75rem; margin: .5rem 0 0; }
/* ---- Reminders ---- */
.rhythm { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .75rem; }
.rhythm-node.event { border-color: var(--line); }
.chip { display: inline-block; border: 0; cursor: pointer; }
.chip:hover { color: var(--bad); }
@media (max-width: 860px) { .rhythm { grid-template-columns: 1fr 1fr; } }
/* ---- Workshops & Events ---- */
.sched-grid { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: .3rem; }
.sched-head { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--muted); padding: .2rem .3rem; }
.sched-cell { border: 1px solid var(--line); border-radius: 6px; padding: .4rem; font-size: .8rem; min-height: 4.5rem; background: var(--surface); }
.sched-cell.blank { border-style: dashed; background: transparent; }
.sched-cell.off { background: var(--surface2); color: var(--muted); }
.sched-cell.thu { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.sched-cell .sdate { font-size: .7rem; color: var(--muted); display: block; }
.sched-cell .sws { font-weight: 700; }
.sched-cell .sph { margin-top: .25rem; font-size: .72rem; color: var(--warn); font-weight: 700; }
@media (max-width: 860px) { .grid4.path { grid-template-columns: 1fr 1fr; } }
/* ---- Team Bubble Chart ---- */
.bubble-wrap { padding: .5rem 0 1rem; }
.btree, .btree ul { list-style: none; margin: 0; padding: 0; }
.btree { display: flex; justify-content: center; min-width: max-content; }
.btree ul { display: flex; justify-content: center; padding-top: 1.25rem; position: relative; }
.btree li { position: relative; padding: 1.25rem .5rem 0; display: flex; flex-direction: column; align-items: center; }
.btree > li { padding-top: 0; }
/* connector lines: the vertical drop from each parent and the horizontal bar across siblings */
.btree ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 1.25rem; border-left: 2px solid var(--line); }
.btree ul > li::before, .btree ul > li::after { content: ''; position: absolute; top: 0; width: 50%; height: 1.25rem; border-top: 2px solid var(--line); }
.btree ul > li::before { left: 0; }
.btree ul > li::after { right: 0; border-left: 2px solid var(--line); }
.btree ul > li:first-child::before, .btree ul > li:last-child::after { border-top: 0; }
.btree ul > li:only-child::before { border-top: 0; }
.btree ul > li:only-child::after { border-top: 0; }
.btree ul > li:first-child::after { border-radius: 6px 0 0 0; }
.btree ul > li:last-child::before { border-right: 2px solid var(--line); border-radius: 0 6px 0 0; }
.bnode { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bnode .tags { justify-content: center; }
.bubble { position: relative; display: grid; place-items: center; border-radius: 50%; background: var(--surface); text-decoration: none; color: var(--ink); }
.bubble svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bubble:hover { box-shadow: 0 0 0 3px var(--accent-soft); }
.bubble.stalled { background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.bname { font-weight: 700; }
/* Clear View */
.clear-card { display: grid; gap: .75rem; border: 1px solid var(--line); }
.clear-card.root { background: var(--surface2); grid-template-columns: 2.6rem 1fr; }
.clear-avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--accent-soft); color: var(--accent-dark); }
.clear-avatar.stalled { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); }
.clear-avatar.new, .clear-avatar.booked { background: var(--accent-soft); color: var(--accent); }
.clear-avatar.root { background: var(--ink); color: #fff; }
.clear-children { margin-top: .5rem; }
@media (max-width: 860px) {
  .btree, .btree ul { display: block; min-width: 0; }
  .btree ul { padding-top: 0; margin-left: 1rem; border-left: 2px solid var(--line); }
  .btree ul::before, .btree ul > li::before, .btree ul > li::after { display: none; }
  .btree li { align-items: flex-start; padding: .6rem 0 0 .6rem; }
  .bnode { flex-direction: row; text-align: left; align-items: center; }
  .bnode .tags { justify-content: flex-start; }
  .clear-card { grid-template-columns: 2.6rem 1fr; } .clear-card > .btnlink { grid-column: 2; justify-self: start; }
}
/* ---- Recruit 100 ---- */
/* ---- Leader Dashboard ---- */
.ticker { font-size: .9rem; padding: .4rem .6rem; border-left: 3px solid var(--line); background: var(--surface2); border-radius: 4px; }
.ticker.live { border-left-color: var(--accent); background: var(--accent-soft); }
/* ---- AI Scheduler ---- */
.sched-rules { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .88rem; line-height: 1.5; }
/*  ---------- Premium layer: shell, cards, pages ----------  */
html { -webkit-text-size-adjust: 100%; }
body { font-family: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink);
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -.01em; line-height: 1.25; }
h2 { font-size: 1.15rem; font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.error { color: var(--bad); }
/* ---------- Shell ---------- */
.shell { min-height: 100vh; }
.mobile-bar { position: sticky; top: 0; z-index: 20; height: var(--bar); display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); }
.brand-lockup { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.01em; }
.brand-mark { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); position: relative; }
.brand-mark::after { content: ""; position: absolute; inset: 8px; border-radius: 3px; border: 2px solid #fff; border-top-color: transparent; }
.brand-name { font-size: 1.02rem; }
.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent-dark); font-weight: 600; font-size: .8rem; flex: none; }
.avatar.sm { width: 32px; height: 32px; }
.page { display: block; max-width: 1080px; margin: 0 auto; padding: 20px 16px calc(var(--tab) + 32px + env(safe-area-inset-bottom)); outline: none; }
.sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(86vw, 320px); background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; transform: translateX(-102%); transition: transform .25s ease; }
body.menu-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.2); }
.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(10,16,22,.4); }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; }
.icon-btn { background: none; color: var(--muted); padding: 6px 10px; font-size: 1rem; }
.nav { display: block; flex: 1; overflow-y: auto; padding: 4px 10px 16px; }
.nav-group { margin-top: 14px; }
.nav-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 0 10px 6px; }
.nav a.nav-link { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--ink2); font-weight: 500; font-size: .93rem; }
.nav a.nav-link:hover { background: var(--surface2); text-decoration: none; }
.nav a.nav-link.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side-foot { border-top: 1px solid var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.me-chip { display: flex; align-items: center; gap: 10px; min-width: 0; }
.me-text { display: grid; line-height: 1.25; min-width: 0; }
.me-text strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabbar { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tab) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0;
  color: var(--muted); font: inherit; font-size: .7rem; font-weight: 500; padding: 0; border-radius: 0; }
.tab:hover { text-decoration: none; }
.tab.active { color: var(--accent); }
.tab .ic { width: 22px; height: 22px; }
@media (min-width: 960px) {
  .mobile-bar, .tabbar, .only-mobile, .scrim { display: none !important; }
  .sidebar { transform: none; width: var(--side); transition: none; }
  .page { margin-left: var(--side); padding: 40px 48px 64px; max-width: calc(1080px + 96px); }
}
@media (min-width: 1400px) { .page { margin-left: calc(var(--side) + (100vw - var(--side) - 1176px) / 2); } }
/* ---------- Page header ---------- */
.view-head { margin: 4px 0 24px; }
.view-head h1 { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; }
.view-head .lead { color: var(--ink2); font-size: 1rem; margin: 0 0 8px; max-width: 60ch; }
@media (min-width: 960px) { .view-head h1 { font-size: 1.9rem; } }
/* ---------- Expanders ---------- */
details.more { margin: 8px 0; }
details.more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: .84rem; font-weight: 500; padding: 4px 0; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s; }
details.more[open] > summary::before { transform: rotate(45deg); }
details.more > summary:hover { color: var(--ink2); }
.more-body { padding: 8px 0 4px; color: var(--ink2); font-size: .92rem; }
.more-body p { margin: 0 0 8px; }
/* ---------- Cards & surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 20px; margin-bottom: 16px; }
@media (min-width: 640px) { .card { padding: 24px; } }
.card h2, .card h3 { margin: 0 0 12px; }
.card h3 { font-size: 1.02rem; font-weight: 600; }
.note { background: var(--surface2); border-radius: 10px; padding: 12px 14px; color: var(--ink2); }
.warnbox { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.goodbox { background: var(--accent-soft); }
.grid2, .grid3, .grid4 { display: grid; gap: 16px; grid-template-columns: 1fr !important; }
.grid4, .grid4.tight { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
@media (min-width: 720px) { .grid2 { grid-template-columns: repeat(2, 1fr) !important; } .grid3 { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 960px) { .grid4 { grid-template-columns: repeat(4, 1fr) !important; } }
.grid2 > .card, .grid3 > .card, .grid4 > .card { margin-bottom: 0; }
.metric-num { font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.metric-num.good { color: var(--accent); }
.grid4 > .card { padding: 16px; }
.grid4 > .card .small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ---------- Controls ---------- */
label { font-weight: 500; color: var(--ink2); font-size: .88rem; }
input, select, textarea { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 16px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
:where(button), a.btnlink { border-radius: 10px; padding: 10px 16px; font-weight: 600; font-size: .92rem; background: var(--accent); color: #fff; border: 0;
  transition: background .15s, box-shadow .15s; }
:where(button:hover) { background: var(--accent-dark); }
button.secondary, button.ghost, a.btnlink { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
button.secondary:hover, button.ghost:hover, a.btnlink:hover { background: var(--surface2); text-decoration: none; }
button.ghost { box-shadow: none; color: var(--muted); }
button.small, a.btnlink.small { padding: 6px 12px; font-size: .84rem; }
button.link { background: none; color: var(--accent); padding: 0; box-shadow: none; }
button.danger { background: var(--bad); color: #fff; }
button.good { background: var(--good); color: #fff; }
button.block { width: 100%; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---------- Tags, bars, tables ---------- */
.tag { padding: 2px 9px; font-size: .72rem; font-weight: 600; letter-spacing: .01em; border-radius: 999px; }
.tag.good { background: var(--accent-soft); color: var(--accent-dark); }
.tag.warn { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); }
.tag.bad { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); }
.tag.blue, .tag.ai { background: color-mix(in srgb, var(--ai) 12%, var(--surface)); color: var(--ai); }
.tag.neutral { background: var(--surface2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.bar { height: 6px; background: var(--surface2); }
.bar i { background: var(--accent); }
.bar.good i { background: var(--accent); }
.bar.ai i { background: var(--ai); }
.bar.warn i { background: var(--warn); }
th { color: var(--muted); font-weight: 600; font-size: .72rem; letter-spacing: .06em; }
th, td { border-bottom: 1px solid var(--line); padding: 10px 8px; }
tr.inactive td { color: var(--muted); }
.table-wrap { margin: 0 -4px; }
.toast { background: var(--ink); color: var(--surface); border-radius: 12px; box-shadow: var(--shadow);
  bottom: calc(var(--tab) + 20px + env(safe-area-inset-bottom)); }
@media (min-width: 960px) { .toast { bottom: 28px; } }
/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(120% 60% at 50% 0%, var(--accent-soft), var(--bg) 70%); }
.login { width: 100%; max-width: 380px; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow); padding: 32px 24px; }
.login .brand-lockup { margin-bottom: 28px; }
.login h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 4px; }
.login-foot { text-align: center; margin: 24px 0 0; }
/* Sign-in + claim forms: one even rhythm (the form gap only, no label margins on top of it). */
.login form.stack { gap: 14px; margin-top: 20px; }
.login form.stack > p { margin: 0; }
.login form.stack label { margin: 0; }
.login form.stack input { margin-top: 6px; }
.login form.stack button { margin-top: 6px; }
/* ---------- Common rows: quieter dividers, more breathing room ---------- */
.rosterrow, .ref-row { border-color: var(--line) !important; }
.rosterrow.selected, .jog-item.selected { background: var(--accent-soft) !important; }
.chip { border-radius: 999px; }
.estep { border-color: var(--line); border-radius: 12px; }
.estep.done .enum { background: var(--accent); color: #fff; }
.pip.hit, .md-req.met, .dual-path.met { border-color: var(--accent); }
.spread { gap: 12px; flex-wrap: wrap; }
@media (max-width: 639px) {
  .easy-layout, .jos-grid, .dual-grid, .ref-tracks { grid-template-columns: 1fr !important; }
  .formgrid { grid-template-columns: 1fr !important; }
  .jogger-grid, .script-grid, .script-grid.four { grid-template-columns: 1fr !important; }
  .sched-grid { overflow-x: auto; }
  .card table { font-size: .88rem; }
}
/* ---------- Home ---------- */
.home-head { margin: 4px 0 20px; }
.home-head h1 { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; margin: 0 0 4px; }
.home-head .lead { color: var(--muted); margin: 0; }
.eyebrow { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin: 0 0 6px; }
@media (min-width: 960px) { .home-head h1 { font-size: 2rem; } }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { display: grid; gap: 2px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); color: var(--ink); }
.stat:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.stat-num { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.stat-label { font-size: .8rem; color: var(--muted); font-weight: 500; }
.stat.accent .stat-num { color: var(--accent); }
.stat.bad .stat-num { color: var(--bad); }
.home-grid { display: grid; gap: 0 16px; }
@media (min-width: 960px) { .home-grid { grid-template-columns: 3fr 2fr; align-items: start; } }
.list { display: grid; }
.list .row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); min-width: 0; }
.list .row:first-child { border-top: 0; padding-top: 4px; }
a.row:hover { text-decoration: none; }
a.row:hover strong { color: var(--accent); }
.row-main { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.row-main strong { font-weight: 600; font-size: .94rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-main .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.dot.alt { background: var(--ai); }
.card-link { display: inline-block; font-size: .86rem; font-weight: 600; margin-top: 8px; }
.spread .card-link { margin-top: 0; }
.spread h2 { margin: 0; }
.card > .spread:first-child { margin-bottom: 12px; }
.focus-card .big-step { font-size: 1.2rem; font-weight: 600; margin: 4px 0 4px; display: grid; gap: 2px; }
.step-n { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.progress-line { margin: 16px 0 0; }
.focus-card .btnlink { margin-top: 12px; display: inline-block; }
.quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.quick-link { padding: 12px 14px; border-radius: 10px; background: var(--surface2); color: var(--ink); font-weight: 500; font-size: .9rem; }
.quick-link:hover { text-decoration: none; background: var(--accent-soft); color: var(--accent-dark); }
/* ---------- Lists of actions (scheduler, dashboard) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 16px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; max-width: 100%; }
.seg button, .seg button.secondary { background: none; color: var(--muted); box-shadow: none; border-radius: 9px; padding: 6px 12px; white-space: nowrap; }
.seg button:hover { background: var(--surface2); }
.seg button.on, .seg button:not(.secondary):not(.on):first-child:only-child { background: var(--accent-soft); color: var(--accent-dark); }
select.compact { width: auto; display: inline-block; margin: 0; padding: 7px 10px; font-size: .88rem; }
.touch { padding: 16px 0; border-top: 1px solid var(--line); }
.touch:first-child { border-top: 0; padding-top: 4px; }
.touch-top { display: flex; gap: 12px; align-items: flex-start; }
.touch-why { margin: 8px 0 0 44px; color: var(--ink2); font-size: .9rem; }
.touch-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 44px; }
.touch details.more { margin: 6px 0 0 44px; }
@media (max-width: 479px) { .touch-why, .touch-actions, .touch details.more { margin-left: 0; } }
a.btnlink.quiet { box-shadow: inset 0 0 0 1px var(--line); }
.cadence .spread { margin: 0; }
.cadence p { margin: 6px 0; }
.cadence-next { margin: 4px 0; padding-left: 18px; color: var(--ink2); }
.foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
ul.sched-rules { padding-left: 18px; color: var(--ink2); font-size: .9rem; }
ul.sched-rules li { margin: 4px 0; }
.upper { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.promo-line { padding: 10px 0; border-top: 1px solid var(--line); }
.promo-line:first-of-type { border-top: 0; padding-top: 0; }
.promo-line p { margin: 4px 0 0; }
.row.exec { align-items: flex-start; }
.row.exec .spread { margin: 0; flex-wrap: nowrap; }
.row.exec .bar { margin: 8px 0 2px; }
.row.exec details.more { margin: 2px 0 0; }
.kv-list { display: grid; }
.kv-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.kv-list > div:first-child { border-top: 0; }
.kv-list span { color: var(--muted); }
.kv-list strong { font-weight: 600; text-align: right; }
/* ---------- Folding cards (hub modules) ---------- */
.folds { display: grid; gap: 10px; margin-bottom: 16px; }
details.card.fold { padding: 0; margin: 0; overflow: hidden; }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.7px solid var(--muted); border-bottom: 1.7px solid var(--muted);
  transform: rotate(45deg); margin: -4px 2px 0 4px; transition: transform .15s; flex: none; }
details.fold[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
details.fold > summary:hover { background: var(--surface2); }
.fold-title { flex: 1; font-weight: 600; font-size: .98rem; min-width: 0; }
details.fold > summary .tag { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold-body { padding: 4px 20px 20px; border-top: 1px solid var(--line); }
.fold-body > *:first-child { margin-top: 14px; }
h2.section { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 28px 0 12px; }
/* ---------- Profile header ---------- */
.profile .picker { margin: 0 0 16px; max-width: 100%; }
.profile-top { display: flex; align-items: center; gap: 14px; }
.profile-top h2 { margin: 0; font-size: 1.25rem; }
.profile-top .tag { flex: none; }
.avatar.lg { width: 52px; height: 52px; font-size: 1.05rem; }
.focus-next { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); }
.focus-next p { margin: 4px 0 0; color: var(--ink); font-weight: 500; }
.meters { display: grid; gap: 12px; margin: 18px 0 6px; }
@media (min-width: 640px) { .meters { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.meter .bar { margin: 6px 0 0; }
.checks { display: grid; }
.hub-check { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.checks > .hub-check:first-child { border-top: 0; padding-top: 2px; }
.hc-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700;
  background: var(--surface2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.hub-check.done .hc-ic { background: var(--accent); color: #fff; box-shadow: none; }
.hub-check.pending .hc-ic { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); box-shadow: none; }
.hc-title { font-weight: 500; }
.hc-sub { color: var(--muted); }
.page, .card, .fold-body { min-width: 0; overflow-wrap: anywhere; }
.stat.warn .stat-num { color: var(--warn); }
.stats.three { grid-template-columns: repeat(3, 1fr); }
.stats.three .stat-num { font-size: 1.3rem; }
.fold-body .stats { margin-top: 12px; }
.fold-body .stat { box-shadow: none; background: var(--surface2); border-color: transparent; }
.foot.center { justify-content: center; margin-top: 16px; }
.gx-flow { display: grid; gap: 10px; }
@media (min-width: 900px) { .gx-flow { grid-template-columns: repeat(5, 1fr); } }
.gx-stage { background: var(--surface2); border-radius: 12px; padding: 12px 14px; border: 0; }
.gx-stage.final { background: var(--accent-soft); }
.gx-person { border: 0; padding: 0; margin: 0; }
.grid2.tight { gap: 16px; margin-top: 12px; }
.next-up .big-step { font-size: 1.25rem; font-weight: 600; margin: 4px 0; }
.next-up p { margin: 4px 0; }
.row-main .wrap { white-space: normal; }
.fold-body .seg { margin: 4px 0 12px; }
.fold-body details.more > summary { color: var(--ink2); font-weight: 600; }
.sched-grid { min-width: 560px; }
.ref-row { padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 0 !important; margin: 0 !important; }
.touch-list > .ref-row:first-child { border-top: 0; padding-top: 4px; }
.ref-row details.more { margin: 6px 0 0 44px; }
@media (max-width: 479px) { .ref-row details.more { margin-left: 0; } }
.ref-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ref-dot { font-size: .76rem; padding: 3px 9px; border-radius: 999px; background: var(--surface2); color: var(--muted); }
.ref-dot.done { background: var(--accent-soft); color: var(--accent-dark); }
.ref-dot.next { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.ref-track { border-radius: 12px; border: 1px solid var(--line) !important; padding: 16px; background: var(--surface2); }
.ref-pick { display: grid; gap: 10px; margin-bottom: 12px; }
@media (min-width: 640px) { .ref-pick { grid-template-columns: 1fr 1fr; } }
.ref-pick button { text-align: left; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; padding: 14px; font-weight: 400; }
.ref-pick button.on-recruit, .ref-pick button.on-client { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.list.pending { margin-top: 8px; border-top: 1px solid var(--line); }
.list.pending .row:first-child { padding-top: 12px; border-top: 0; }
.msgbox { background: var(--surface2); border-left: 3px solid var(--accent); border-radius: 8px; padding: 12px 14px; white-space: pre-wrap; font-size: .9rem; color: var(--ink2); }
.chip { background: var(--surface); color: var(--ink2); box-shadow: inset 0 0 0 1px var(--line); padding: 5px 12px; font-size: .82rem; font-weight: 500; }
.chip:hover { background: var(--surface2); }
.rhythm { display: grid; gap: 8px; }
.rhythm-node { background: var(--surface2); border-radius: 10px; padding: 10px 12px; border: 0; }
.rhythm-node.event { background: var(--accent-soft); }
.card > .step-n { display: block; }
.big-step { font-size: 1.2rem; font-weight: 600; margin: 6px 0 2px; color: var(--ink); }
.ladder-line { margin: -4px 0 16px; }
@media (min-width: 720px) { .stats.three { grid-template-columns: repeat(3, 1fr); } .stats.three .stat-num { font-size: 1.75rem; } }
.bnode { width: 150px; gap: 4px; }
.bnode .bname { font-weight: 600; font-size: .9rem; }
.bubble { width: 60px; height: 60px; }
.binner { font-weight: 600; font-size: .85rem; color: var(--ink2); }
.clear-card { grid-template-columns: 40px 1fr !important; align-items: center; border-radius: 12px; padding: 12px 14px; color: var(--ink); background: var(--surface); }
a.clear-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.clear-card .spread { margin: 0; flex-wrap: nowrap; }
.clear-card .bname { font-size: .95rem; }
.clear-children { margin-left: 18px; padding-left: 12px; border-left: 2px solid var(--line); }
.clear-person { margin-top: 8px; }
@media (max-width: 860px) { .bnode { width: auto; gap: 12px; } .bnode .tag { margin-top: 3px; } .bubble { width: 48px; height: 48px; flex: none; } }
/* ---------- Easy Start ---------- */
.easy-layout { grid-template-columns: 1fr !important; gap: 16px; margin-top: 0; }
@media (min-width: 1100px) { .easy-layout { grid-template-columns: 1fr 300px !important; } }
.top-folds { margin-bottom: 16px; }
.es-detail { gap: 16px; }
.es-detail > .card, .es-detail > details.card { margin: 0; }
.roster .row.selected { background: var(--accent-soft); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; }
.roster .bar { margin: 6px 0 0; }
.esteps { display: grid; gap: 8px; }
details.estep { display: block; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: none !important; }
details.estep > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
details.estep > summary::-webkit-details-marker { display: none; }
details.estep .etitle { flex: 1; font-weight: 600; margin: 0; min-width: 0; }
details.estep > summary .tag { flex: none; }
details.estep .enum { width: 28px; height: 28px; flex: none; font-size: .8rem; font-weight: 600; color: var(--muted); background: var(--surface2); }
details.estep.done { background: var(--surface); border-color: var(--line); }
details.estep.done .enum { background: var(--accent); color: #fff; }
details.estep.pending { background: var(--surface); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
details.estep.pending .enum { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); }
details.estep.current { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
details.estep.current .enum { background: var(--accent-soft); color: var(--accent-dark); }
.estep-body { padding: 0 14px 14px 54px; }
.estep-body > p:first-child { margin-top: 0; }
@media (max-width: 479px) { .estep-body { padding-left: 14px; } }
details.estep .sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
details.estep .side { border: 1px solid var(--line); border-style: solid; border-radius: 10px; padding: 10px 12px; background: var(--surface2); gap: 6px; }
details.estep .side.marked { background: var(--accent-soft); border-color: transparent; }
.side-who { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.side-state { font-weight: 600; font-size: .9rem; }
.side-state.muted { font-weight: 400; color: var(--muted); font-size: .84rem; }
.side details.more { margin: 0; }
.side details.more > summary { font-size: .78rem; padding: 0; }
.side button { justify-self: start; }
.linked { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 6px; justify-items: start; }
.linked .bar { width: 100%; }
.welcome-row .enum { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 600; background: var(--surface2); color: var(--muted); flex: none; }
.welcome-row .enum.ok { background: var(--accent); color: #fff; }
.welcome-row .row-main .small { white-space: normal; }
.hist { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 720px) { .hist { grid-template-columns: repeat(8, 1fr); } }
.hist div { border-radius: 10px; }
.ref-dot.declined { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); }
.share-comm { background: var(--surface2); border-radius: 12px; padding: 16px; margin: 0 0 12px; border: 0 !important; }
.script-grid { display: grid; gap: 10px; }
.script-card { background: var(--surface); border: 1px solid var(--line) !important; border-radius: 12px; padding: 14px; display: grid; gap: 6px; justify-items: start; }
.script-card.rec { border-color: var(--accent) !important; }
.sc-text { font-size: .9rem; color: var(--ink2); }
.rosterrow { display: block; padding: 12px; border-radius: 12px; border: 1px solid var(--line) !important; color: var(--ink); background: var(--surface); }
.rosterrow:hover { text-decoration: none; background: var(--surface2); }
.rosterrow.selected { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)) !important; }
.rosterrow .tags { margin-top: 6px; }
.easy-layout > details.fold, .easy-layout > .stack > details.fold { margin: 0; }
details.fold > .fold-body > .stack { margin-top: 12px; }
/* ---------- Recruit 100: compact 10 × 10 board ---------- */
.r100dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin: 18px 0 12px; max-width: 420px; }
.r100dot { display: block; aspect-ratio: 1 / 1; border-radius: 6px; border: 1.5px dashed var(--line); background: transparent; }
.r100dot.filled { border: 0; background: color-mix(in srgb, var(--accent) 35%, var(--surface)); }
.r100dot.complete { background: var(--accent); }
a.r100dot.filled:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.r100legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: .8rem; color: var(--muted); }
.r100legend span { display: inline-flex; align-items: center; gap: 6px; }
.r100legend .r100dot { width: 12px; border-radius: 3px; }
.r100close { text-align: center; margin: 28px 0 8px; font-size: 1.1rem; font-weight: 600; color: var(--muted); }
/* ---------- Checklists (MD / SMD) + Reasons ---------- */
.focus-next.risk { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); }
.streak-line { margin: 18px 0 10px; align-items: center; }
.streak-line .streak-num, .fold-body .streak-num { font-size: 2rem; font-weight: 600; letter-spacing: -.02em; }
.md-windows { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.md-window { padding: 12px; border-radius: 10px; }
.md-window .spread { margin: 0; }
.md-slot { grid-template-columns: 1.6rem 1fr; }
.md-req { border-radius: 10px; padding: 14px; }
.md-req input[type=number] { margin-top: 10px; max-width: 200px; }
.fold-body .hub-check { margin: 6px 0; }
.fold-body h3 { margin: 18px 0 8px; font-size: .9rem; }
@media (max-width: 420px) { .pips.six .pip { width: 1.5rem; height: 1.5rem; font-size: .75rem; } .pips { gap: 4px; } }
details.estep.win summary { grid-template-columns: 1fr auto; }
.win-q { font-weight: 500; color: var(--ink2); margin: 0 0 10px; }
.win-reason { grid-template-columns: 1.4rem 1fr; }
/* ---------- Accounts (admin) ---------- */
.link-card { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.link-card .msgbox { word-break: break-all; font-size: .85rem; user-select: all; }
.filters input[type=search] { flex: 1 1 220px; min-width: 0; margin: 0; }
.ref-row .touch-top .tags { flex: none; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Events & schedules (admin) ---------- */
.day-list { display: grid; margin: 8px 0 4px; }
.day-row { display: grid; grid-template-columns: 4.2rem 9rem 1fr; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.day-row.week-start { border-top: 2px solid var(--line); margin-top: 6px; padding-top: 10px; }
.day-row:first-child { border-top: 0; margin-top: 0; }
.day-row input, .day-row select { margin: 0; width: 100%; min-width: 0; }
.day-label { font-size: .85rem; color: var(--muted); }
.day-label strong { color: var(--ink); font-size: .95rem; }
@media (max-width: 480px) { .day-row { grid-template-columns: 3.4rem 1fr; } .day-row input { grid-column: 2; } }
.check-line { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.check-line input { width: auto; margin: 0; }

/*  ---------- Premium layer 2: depth, type, calmer density ----------  */
:root {
  --r: 16px; --r-sm: 12px;
  --line: #e5e8ec; --line-soft: #eef0f3;
  --shadow: 0 1px 1px rgba(23,34,45,.03), 0 2px 6px -2px rgba(23,34,45,.06), 0 12px 28px -18px rgba(23,34,45,.16);
  --shadow-lift: 0 2px 4px rgba(23,34,45,.05), 0 18px 36px -20px rgba(23,34,45,.24);
  --wash: color-mix(in srgb, var(--accent) 5%, var(--bg));
}
@media (prefers-color-scheme: dark) {
  :root { --line: #27323e; --line-soft: #212b35; --wash: color-mix(in srgb, var(--accent) 7%, var(--bg));
    --shadow: 0 1px 1px rgba(0,0,0,.25), 0 12px 28px -18px rgba(0,0,0,.6); --shadow-lift: 0 18px 36px -18px rgba(0,0,0,.7); }
}
body { background: linear-gradient(180deg, var(--wash) 0, var(--bg) 360px) no-repeat, var(--bg); font-feature-settings: "ss01"; }
.stat-num, .metric-num, .streak-num, .gx-big, .big-num { font-variant-numeric: tabular-nums; }

/* Page header: section eyebrow + title + one-line lead */
.view-head .eyebrow { margin: 0 0 8px; }
.view-head h1 { letter-spacing: -.025em; }
.view-head .lead { color: var(--muted); font-size: .98rem; }
.view-head details.more > summary { font-size: .8rem; }
.home-head .lead { font-size: .98rem; }
/* Feedback: nav badge, Menu-tab dot, dashboard alert, inbox entries */
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bad, #c0392b); color: #fff;
  font-size: .72rem; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.nav-badge[hidden] { display: none; }
.tab.has-dot { position: relative; }
.tab.has-dot::after { content: ""; position: absolute; top: 6px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--bad, #c0392b); box-shadow: 0 0 0 2px var(--surface); }
a.feedback-alert { display: block; margin: 0 0 16px; text-decoration: none; color: var(--ink); border-left: 3px solid var(--bad, #c0392b); }
a.feedback-alert:hover { background: var(--surface2); }
.fb-item { padding: 14px 0; border-top: 1px solid var(--line-soft); display: grid; gap: 6px; }
.fb-item:first-child { border-top: 0; padding-top: 0; }
.fb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .8rem; color: var(--muted); }
.fb-details { white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-reply { padding: 10px 12px; border-radius: 10px; background: var(--surface2); font-size: .9rem; }
.fb-reply .small { display: block; margin-bottom: 2px; }
.fb-act { display: grid; gap: 8px; }
.fb-act textarea { min-height: 60px; }
.fb-cats { display: flex; flex-wrap: wrap; gap: 8px; }

/* AI follow-up: drafts, thread bubbles, consent */
.draft { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.draft:first-of-type { border-top: 0; }
.draft textarea { min-height: 96px; }
a.send-sms { background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; padding: 8px 14px; border-radius: 10px; }
.thread { display: grid; gap: 10px; }
.msg { max-width: 85%; padding: 10px 12px; border-radius: 14px; display: grid; gap: 4px; overflow-wrap: anywhere; }
.msg.out { justify-self: end; background: var(--accent-soft); border-bottom-right-radius: 4px; }
.msg.in { justify-self: start; background: var(--surface2); border-bottom-left-radius: 4px; }
.msg.skipped { opacity: .55; }
.consent-box { padding: 12px 14px; border-radius: 12px; background: var(--surface2); }
.note.badbox { border-left: 3px solid var(--bad, #c0392b); }

/* Team masthead: the team name is the star of the page header (right side); AB Connect supports */
.has-mast { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.head-main { flex: 1 1 auto; min-width: 0; }
.team-mast { flex: 0 1 auto; max-width: 42%; display: grid; gap: 4px; text-align: right; padding-top: 2px; }
.team-mast[hidden], .team-mast-tag[hidden] { display: none; }
.team-mast-name { font-size: 1.6rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: var(--ink); overflow-wrap: anywhere; }
.team-mast-tag { font-size: .86rem; color: var(--muted); line-height: 1.35; }
@media (min-width: 960px) { .team-mast-name { font-size: 1.9rem; } }
@media (max-width: 639px) {
  /* Phone: the team name sits above the greeting, left-aligned, so it never crowds it */
  .has-mast { flex-direction: column-reverse; gap: 12px; }
  .team-mast { max-width: none; text-align: left; padding: 0 0 12px; border-bottom: 1px solid var(--line-soft); width: 100%; gap: 2px; }
  .team-mast-name { font-size: 1.2rem; }
  .team-mast-tag { font-size: .8rem; }
}

/* Cards: one family — hairline, soft layered depth, roomy padding */
.card { border-color: var(--line); box-shadow: var(--shadow); }
.card h2 { font-size: 1.06rem; letter-spacing: -.012em; }
details.card.fold { box-shadow: var(--shadow); }
details.fold[open] { box-shadow: var(--shadow-lift); }
details.fold > summary { min-height: 56px; }
.fold-body { border-top-color: var(--line-soft); }
.list .row, .kv-list > div, .hub-check, .focus-row, .touch, .ref-row, .promo-line { border-top-color: var(--line-soft) !important; }

/* Stats: one quiet band instead of four separate tiles (half the height on a phone) */
.stats { gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.stats > .stat { border: 0; border-radius: 0; box-shadow: none; background: var(--surface); padding: 14px 16px; }
a.stat:hover { background: var(--surface2); }
.stats .stat-num { font-size: 1.5rem; }
.stats .stat-label { font-size: .76rem; }
.stats.three { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 720px) { .stats > .stat { padding: 18px 20px; } .stats .stat-num { font-size: 1.85rem; } .stats.three .stat-num { font-size: 1.85rem; } }
.fold-body .stats { box-shadow: none; }
.fold-body .stats > .stat { background: var(--surface2); }
@media (max-width: 380px) { .stats.three .stat-num { font-size: 1.2rem; } .stats > .stat { padding: 12px; } }

/* Buttons: crisp primary, quiet secondary */
:where(button):not(.secondary):not(.ghost):not(.link):not(.chip):not(.tab):not(.icon-btn) { box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.12); }
.seg button, .ref-pick button, .jog-item { box-shadow: none !important; }
.seg button.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent) !important; }

/* Sidebar: brand block, clear active state */
.side-head { padding: 20px 18px 10px; }
.brand-stack { display: grid; line-height: 1.2; min-width: 0; }
.brand-team { font-size: .74rem; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sidebar with a team: AB Connect shrinks to a supporting line; the team name leads */
.sidebar .brand-stack.has-team { gap: 2px; }
.sidebar .has-team .brand-name { font-size: .72rem; font-weight: 500; color: var(--muted); letter-spacing: .02em; }
.sidebar .has-team .brand-team { font-size: 1.08rem; font-weight: 800; color: var(--ink); letter-spacing: -.015em; white-space: normal; overflow-wrap: anywhere; }
/* Phone bar: the page header already features the team, so the bar shows just AB Connect */
.mobile-bar .brand-team { display: none; }
.nav-label { padding-top: 6px; }
.nav a.nav-link { position: relative; }
.nav a.nav-link.active::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav a.nav-link .ext { margin-left: auto; width: 14px; height: 14px; opacity: .55; }
.nav-group.resources { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line-soft); }

/* Tab bar: pill behind the active icon */
.tab { position: relative; }
.tab .ic { padding: 3px 14px; width: 52px; height: 28px; border-radius: 999px; transition: background .15s; }
.tab.active .ic { background: var(--accent-soft); }

/* Phone: calmer rhythm */
@media (max-width: 639px) {
  .page { padding-top: 16px; }
  .card { padding: 18px; border-radius: 14px; }
  .view-head { margin-bottom: 18px; }
  .view-head h1, .home-head h1 { font-size: 1.55rem; }
  h2.section { margin-top: 24px; }
  .row-main strong { font-size: .92rem; }
}

/* ---------- Team branding: a curated palette (each has a dark-mode pair) ---------- */
:root[data-brand="blue"]     { --accent: #1d5fbf; --accent-dark: #164a95; --accent-soft: #e9f0fb; }
:root[data-brand="teal"]     { --accent: #0b7a78; --accent-dark: #075e5c; --accent-soft: #e4f4f3; }
:root[data-brand="indigo"]   { --accent: #4a43b5; --accent-dark: #38328e; --accent-soft: #eeedfa; }
:root[data-brand="light-blue"] { --accent: #0277bd; --accent-dark: #01579b; --accent-soft: #e6f4fc; }
:root[data-brand="gold"]     { --accent: #94650a; --accent-dark: #744f07; --accent-soft: #f8f0df; }
:root[data-brand="slate"]    { --accent: #3d566e; --accent-dark: #2d4153; --accent-soft: #e9eef3; }
:root[data-brand="pastel-pink"]   { --accent: #b03a5b; --accent-dark: #8f2c48; --accent-soft: #fbeef0; }
:root[data-brand="pastel-yellow"] { --accent: #a16207; --accent-dark: #854d0e; --accent-soft: #fffbe0; }
:root[data-brand="pastel-orange"] { --accent: #b45309; --accent-dark: #92400e; --accent-soft: #fff3e3; }
:root[data-brand="light-green"]   { --accent: #2e7d32; --accent-dark: #1b5e20; --accent-soft: #edf6ed; }
@media (prefers-color-scheme: dark) {
  :root[data-brand="blue"]     { --accent: #6d9ee8; --accent-dark: #93b8ef; --accent-soft: #1a2a42; }
  :root[data-brand="teal"]     { --accent: #45b9b5; --accent-dark: #72ccc9; --accent-soft: #143331; }
  :root[data-brand="indigo"]   { --accent: #9590e8; --accent-dark: #b2aef0; --accent-soft: #24223f; }
  :root[data-brand="light-blue"] { --accent: #4fc3f7; --accent-dark: #81d4fa; --accent-soft: #0f2a3a; }
  :root[data-brand="gold"]     { --accent: #d8a845; --accent-dark: #e4bf72; --accent-soft: #352a14; }
  :root[data-brand="slate"]    { --accent: #8fa8bf; --accent-dark: #aec0d2; --accent-soft: #1f2a35; }
  :root[data-brand="pastel-pink"]   { --accent: #f48fb1; --accent-dark: #f9b4c4; --accent-soft: #3a1d22; }
  :root[data-brand="pastel-yellow"] { --accent: #fdd835; --accent-dark: #fff176; --accent-soft: #332c0f; }
  :root[data-brand="pastel-orange"] { --accent: #ffb74d; --accent-dark: #ffcc80; --accent-soft: #3a2610; }
  :root[data-brand="light-green"]   { --accent: #81c784; --accent-dark: #a5d6a7; --accent-soft: #17301a; }
}
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; }
.swatch { display: grid; justify-items: center; gap: 6px; padding: 10px 8px 8px; width: 84px; border-radius: 12px; background: var(--surface); color: var(--ink2);
  box-shadow: inset 0 0 0 1px var(--line) !important; font-weight: 500; font-size: .78rem; }
.swatch i { width: 30px; height: 30px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.swatch.on { box-shadow: inset 0 0 0 2px var(--ink) !important; color: var(--ink); }
.swatch:hover { background: var(--surface2); }
.brand-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--surface2); }
.brand-preview .brand-name, .brand-preview .brand-team, .brand-preview .preview-tag { color: inherit; }
.brand-preview .brand-name, .brand-preview .preview-tag { opacity: .85; }
.brand-preview .brand-name { font-size: .72rem; }
.brand-preview .brand-team { font-weight: 700; font-size: 1rem; }
.brand-preview .preview-swatch { width: 28px; height: 28px; border-radius: 8px; flex: none; box-shadow: 0 0 0 2px currentColor; }
.brand-preview .preview-label { margin-left: auto; font-size: .8rem; font-weight: 600; opacity: .9; }

/* ---------- Survey cards ---------- */
.card-kicker { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin: 0 0 14px; }
.survey-form .card { display: grid; gap: 4px; }
.survey-form label { margin: 8px 0; }
.q { margin: 10px 0 6px; }
.q-label { font-weight: 500; color: var(--ink2); font-size: .88rem; margin: 10px 0 8px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
button.choice { background: var(--surface); color: var(--ink2); box-shadow: inset 0 0 0 1px var(--line) !important; border-radius: 999px; padding: 8px 14px; font-weight: 500; font-size: .88rem; min-height: 40px; }
button.choice:hover { background: var(--surface2); }
button.choice.on { background: var(--accent-soft); color: var(--accent-dark); box-shadow: inset 0 0 0 1.5px var(--accent) !important; font-weight: 600; }
.yn-list { display: grid; margin: 2px 0 8px; }
.yn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: .92rem; }
.yn-row:first-child { border-top: 0; }
.yn-row .choices { flex: none; flex-wrap: nowrap; }
.yn-row button.choice { min-width: 56px; justify-content: center; }
.check-line.optin { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); }
.disclosure { margin: 18px 2px 8px; font-size: .76rem; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.survey-grid { display: grid; gap: 16px; }
@media (min-width: 960px) { .survey-grid { grid-template-columns: 3fr 2fr; align-items: start; } .survey-grid > .card { margin: 0; } }
ol.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: pt; }
.point { padding: 12px 14px; border-radius: 12px; background: var(--surface2); }
.point.bridge { background: var(--accent-soft); }
.point .spread { flex-wrap: nowrap; align-items: flex-start; }
.point strong { font-weight: 600; font-size: .94rem; }
.point p { margin: 6px 0 0; color: var(--ink2); font-size: .9rem; }
.head-actions { margin: -8px 0 18px; }
a.btnlink.primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 35%, transparent); }
a.btnlink.primary:hover { background: var(--accent-dark); }
.empty { text-align: center; padding: 18px 0 8px; color: var(--muted); }
.empty p { margin: 0 0 12px; }
a.tag:hover { text-decoration: none; filter: brightness(.97); }

/* ---------- Team Run ---------- */
.contest .spread h2 { margin: 2px 0 0; }
.reward { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface2)); }
.reward-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.reward strong { font-size: 1.05rem; }
.team-run { display: grid; gap: 2px; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--surface2); }
.team-run .bar { margin: 6px 0 2px; }
.contest .list .row-main .bar { margin: 6px 0 2px; }

/* ---------- Recruit 100: initials on the board ---------- */
.r100dots { max-width: 480px; }
.r100dot.filled { display: grid; place-items: center; font-size: .66rem; font-weight: 600; letter-spacing: .02em; color: var(--accent-dark); text-decoration: none; }
.r100dot.complete { color: #fff; }
a.r100dot.filled:hover { text-decoration: none; }
@media (max-width: 380px) { .r100dot.filled { font-size: .58rem; } .r100dots { gap: 4px; } }

/* ---------- Licensing: securities (record only) ---------- */
.sec-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.sec-row:first-of-type { border-top: 0; }
.sec-row .row-main { min-width: 160px; }
.sec-row input[type=date] { margin: 0; width: auto; }
.sec-badge { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: .72rem; background: var(--surface2); color: var(--muted); flex: none; }
.sec-row.held .sec-badge { background: var(--accent); color: #fff; }

/* ---------- Events: office + impromptu ---------- */
.local-event .row-main strong { font-size: .95rem; }
.date-chip { display: grid; place-items: center; width: 46px; height: 50px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); flex: none; line-height: 1.05; }
.date-chip b { font-size: 1.15rem; font-weight: 600; }
.date-chip span { font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.date-chip.weekly { background: var(--surface2); color: var(--ink2); }
.campaign-count { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 0; }
.campaign-count .stat-num { color: var(--accent); }

/* ---------- Hub: tags ---------- */
.person-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 0; }
.person-tags select.compact { padding: 4px 8px; font-size: .8rem; border-radius: 999px; }
.ptag { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--surface2); font-size: .78rem; color: var(--ink2); }
.ptag b { font-weight: 600; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.tag { white-space: nowrap; }
.point .tag, .spread > .tag { flex: none; }
.team-run .bar, .focus-next .bar, .point .bar, .reward .bar { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.local-event { flex-wrap: wrap; align-items: flex-start; }
.local-event > .row-main { flex: 1 1 200px; }
.local-event > .tags { margin: 0; }
@media (max-width: 639px) { .local-event > .tags { flex-basis: 100%; padding-left: 58px; } }
.local-event .wrap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.check-line.q-check { margin: 12px 0 4px; font-weight: 500; color: var(--ink2); font-size: .9rem; align-items: flex-start; }
.check-line.q-check input { margin-top: 3px; flex: none; }
.gx-entry .tag { white-space: normal; max-width: 100%; overflow-wrap: anywhere; text-align: left; }

/* ---------- Print: Team Bubble Chart (Print button → the browser's print dialog) ----------
   Every bubble expanded into words, black-and-white friendly, team name + date on top,
   drawn as an indented outline so it flows across pages without splitting a bubble. */
.print-only { display: none; }
@media print {
  @page { margin: 14mm 12mm; }
  :root, :root[data-theme="dark"] { --bg: #fff; --surface: #fff; --surface2: #fff; --ink: #000; --ink2: #222; --muted: #444; --line: #888; --line-soft: #bbb;
    --accent: #000; --accent-soft: #eee; --good: #000; --warn: #000; --bad: #000; --ai: #000; }
  html, body { background: #fff !important; color: #000; }
  .sidebar, .tabbar, .mobile-bar, .toast, .scrim, .no-print, .team-mast, .view-head .more, .view-head .lead, .view-head .eyebrow { display: none !important; }
  .shell, .page { display: block !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .print-only { display: block; }
  body.printing-chart .chart-page > :not(.print-head):not(.view-head):not(section.card):not(.folds) { display: none !important; }
  body.printing-chart .chart-page > .stats, body.printing-chart .chart-page .folds > details:not(.print-keep) { display: none !important; }
  body.printing-chart .chart-page .folds > details.print-keep { break-before: avoid; margin-top: 12px; }
  .print-head { border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px; }
  .print-team { font-size: 20pt; font-weight: 700; }
  .print-sub { font-size: 10pt; }
  .print-date { font-size: 9pt; color: #333; }
  .chart-page .view-head h1 { font-size: 13pt; margin: 0 0 6px; }
  .card, details.card { border: 0 !important; box-shadow: none !important; padding: 0 !important; background: #fff !important; }
  .table-wrap, .bubble-wrap { overflow: visible !important; }
  .btree, .btree ul { display: block !important; min-width: 0 !important; }
  .btree ul { padding-top: 0 !important; margin-left: 14px !important; border-left: 1.5px solid #000 !important; }
  .btree ul::before, .btree ul > li::before, .btree ul > li::after { display: none !important; }
  .btree li { display: block !important; padding: 5px 0 0 8px !important; }
  .bnode { display: flex !important; flex-direction: row !important; align-items: center !important; text-align: left !important; width: auto !important; gap: 8px !important;
    break-inside: avoid; page-break-inside: avoid; }
  .bubble { width: 34px !important; height: 34px !important; flex: none; background: #fff !important; box-shadow: none !important; }
  .bubble svg circle { stroke: #000 !important; }
  .bubble svg circle:first-child { stroke: #ccc !important; }
  .binner { font-size: 8pt !important; color: #000 !important; }
  .bname { font-size: 10pt !important; }
  .bprint { font-size: 8pt; color: #222; }
  .tag { border: 1px solid #000 !important; background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  details.fold > summary { list-style: none; }
  details.fold > summary::-webkit-details-marker { display: none; }
}

/* ---------- Communications thread ---------- */
.thread.full .msg { max-width: min(92%, 640px); }
.msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; color: var(--muted); }
.msg-head strong { color: var(--ink); }
.msg-body { white-space: pre-wrap; }
.msg.st-draft { border: 1px dashed var(--warn); background: var(--surface); }
.msg textarea { min-height: 80px; }
.pickup p { margin: .25rem 0; }
.block { display: block; }
.feed .filters { margin: 4px 0 10px; }
label.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
input.compact { width: auto; display: inline-block; margin: 0; padding: 6px 8px; font-size: .88rem; }

/* ---------- Who's in the area ---------- */
.area-map { height: 420px; border-radius: 12px; overflow: hidden; background: var(--surface2); z-index: 0; }
.map-card { padding: 8px; }
.map-legend { margin-top: 8px; padding: 0 6px; }
.pin-pop { display: grid; gap: 2px; font: inherit; font-size: .85rem; }
.leaflet-container a { color: var(--accent-dark); }
@media (max-width: 600px) { .area-map { height: 320px; } }

/* ---------- Import team ---------- */
.import-row { align-items: flex-start; }
.import-row.problem { border-left: 3px solid var(--bad); padding-left: 8px; }
ul.problems { margin: 4px 0 0; padding-left: 18px; color: var(--bad); }

/* ---------- 30 Days Relentless ---------- */
.card.relentless { border-left: 4px solid var(--bad); }
.card.relentless.done { border-left-color: var(--good); }
.rl-day { margin: 0; font-size: 1.05rem; }
.rl-count { font-size: 1.6rem; }
.rl-today { display: grid; gap: 6px; margin: 10px 0; }
.rl-strip { display: grid; grid-template-columns: repeat(15, minmax(0, 34px)); gap: 4px; margin: 8px 0; }
.rl-d { aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center; font-size: .7rem; font-weight: 700; background: var(--surface2); border: 1px solid var(--line); color: var(--muted); }
.rl-d.met { background: color-mix(in srgb, var(--good) 18%, var(--surface)); color: var(--good); border-color: transparent; }
.rl-d.missed { background: color-mix(in srgb, var(--bad) 14%, var(--surface)); color: var(--bad); border-color: transparent; }
.rl-d.today { border: 2px solid var(--warn); color: var(--warn); }
.rl-d.off { opacity: .35; }
.rl-log { display: grid; gap: 6px; margin-top: 8px; }
.rl-log-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rl-log-row input { flex: 1 1 160px; min-width: 0; margin: 0; }
.rl-results-title { font-weight: 700; font-size: 1.1rem; margin: 4px 0 8px; }
.rl-results .stats { margin-bottom: 8px; }

/* ---------- Widgets (My Day + Team Health) ----------
   Rounded card, soft shadow, brand-colour top accent; one big number, a small label,
   a trend arrow where it means something. Colour carries meaning, not decoration. */
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin: 0 0 20px; align-items: stretch; }
.widget { display: grid; gap: 12px; align-content: start; background: var(--surface); border-radius: 16px; padding: 18px 18px 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .06);
  border-top: 3px solid var(--accent); min-width: 0; color: var(--ink); text-decoration: none; }
.widget.w-bad { border-top-color: var(--bad); }
.widget.w-warn { border-top-color: var(--warn); }
.whead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.whead h2 { margin: 0; font-size: .95rem; font-weight: 650; letter-spacing: .01em; }
.wtop { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.wkpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
.wkpis .wtile { background: var(--surface); border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .06); border-top: 3px solid var(--accent); }
.wtile { display: grid; gap: 2px; align-content: start; color: var(--ink); text-decoration: none; min-width: 0; }
a.wtile:hover .wlabel { color: var(--ink); }
.wnum { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wnum.sm { font-size: 1.4rem; }
.wnum.good { color: var(--good); } .wnum.warn { color: var(--warn); } .wnum.bad { color: var(--bad); } .wnum.info { color: var(--ai); }
.wlabel { font-size: .8rem; color: var(--muted); font-weight: 500; }
.wsub { font-size: .75rem; color: var(--muted); }
.trend { font-size: .78rem; font-weight: 650; white-space: nowrap; }
.trend.good { color: var(--good); } .trend.bad { color: var(--bad); } .trend.flat { color: var(--muted); font-weight: 500; }
.trend-sub { font-weight: 400; color: var(--muted); }
.wlist { display: grid; }
.wrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-soft, var(--line)); color: var(--ink); text-decoration: none; min-width: 0; }
.wrow:first-child { border-top: 0; padding-top: 2px; }
a.wrow:hover strong { color: var(--accent-dark); }
.wrow-main { display: grid; gap: 1px; min-width: 0; flex: 1; }
.wrow-main strong { font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.wdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.wdot.good { background: var(--good); } .wdot.warn { background: var(--warn); } .wdot.bad { background: var(--bad); } .wdot.info { background: var(--ai); }
.wdate { font-size: .78rem; font-weight: 600; color: var(--ai); white-space: nowrap; background: color-mix(in srgb, var(--ai) 10%, var(--surface)); padding: 3px 8px; border-radius: 999px; }
.bad-text { color: var(--bad); }
.wbanner { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 16px; padding: 14px 18px; }
/* GX ring */
.wgx { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wgx-side { display: grid; gap: 6px; flex: 1; min-width: 140px; }
.wring-box { position: relative; width: 112px; height: 112px; flex: none; }
.wring circle { fill: none; stroke-width: 10; }
.wring-track { stroke: var(--line); }
.wring-fill { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .4s; }
.wring.warn .wring-fill { stroke: var(--warn); }
.wring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.wring-center strong { font-size: .95rem; }
.wring-center span { font-size: .68rem; color: var(--muted); }
/* Week bars */
.wbars-box { display: grid; gap: 4px; }
.wbars { width: 100%; height: auto; display: block; }
.wbars-axis { stroke: var(--line); stroke-width: 1; }
.wbar-done { fill: var(--accent); }
.wbar-due { fill: none; stroke: var(--ai); stroke-width: 1.5; stroke-dasharray: 3 2; }
.wbar-val { font-size: 9px; fill: var(--ink2); text-anchor: middle; font-weight: 600; }
.wbar-lab { font-size: 10px; fill: var(--muted); text-anchor: middle; }
.wbar-lab.today { fill: var(--ink); font-weight: 700; }
.wlegend { display: flex; gap: 14px; font-size: .75rem; color: var(--muted); }
.wlegend .key::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.wlegend .key.done::before { background: var(--accent); }
.wlegend .key.due::before { border: 1.5px dashed var(--ai); }
/* Funnel */
.wfunnel { display: grid; gap: 10px; }
.wf-row { display: grid; grid-template-columns: 96px 1fr 32px; align-items: center; gap: 10px; }
.wf-label { font-size: .82rem; color: var(--ink2); }
.wf-track { height: 10px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.wf-bar { display: block; height: 100%; border-radius: 999px; }
.wf-bar.info { background: var(--ai); } .wf-bar.warn { background: var(--warn); } .wf-bar.good { background: var(--good); }
.wf-num { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
/* Direct lines */
.wlines { display: grid; }
.wline { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line-soft, var(--line)); color: var(--ink); text-decoration: none; }
.wline:first-child { border-top: 0; padding-top: 0; }
.wline-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wline-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; color: var(--muted); }
.wline-nums b { color: var(--ink); font-weight: 650; }
@media (max-width: 760px) {
  .wkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wnum { font-size: 1.7rem; }
  .wgrid { gap: 12px; }
}
.wticker .wrow-main strong { font-weight: 450; font-size: .86rem; }
.rung-body { padding: 2px 0 12px; border-bottom: 1px solid var(--line-soft, var(--line)); margin-bottom: 8px; }

/* Bubble Chart: a lazy branch ("+N below") */
.bmore { margin-top: 10px; white-space: nowrap; }
@media print { .bmore { display: none !important; } }
.show-all { margin-top: 10px; }

/* Big teams on a phone: deep Clear View nesting indents less, and long tags may wrap. */
@media (max-width: 600px) {
  .clear-children { margin-left: 8px; padding-left: 8px; }
  .clear-children .clear-children .clear-children { margin-left: 4px; padding-left: 6px; }
  .clear-card .spread { flex-wrap: wrap; gap: 4px; }
  .clear-card .row-main { min-width: 0; }
}
.tag.wrap { white-space: normal; max-width: 100%; min-width: 0; flex: 0 1 auto; }
.spread.wrap-ok { flex-wrap: wrap; gap: 6px; }

/* ---------- Quotes ---------- */
.quote { margin: 0; display: grid; gap: 8px; }
.quote blockquote { margin: 0; font-size: 1.12rem; line-height: 1.5; font-style: italic; color: var(--ink); overflow-wrap: anywhere; }
.quote-title { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); }
.quote-author { margin: 0; font-size: .88rem; font-weight: 600; color: var(--ink2); }
.quote-card { margin: 0 0 16px; }
.quote-list { display: grid; gap: 12px; }
.quote-item.today { border-left: 4px solid var(--accent); }
.quote-card.placed { margin: 0 0 16px; }
.quote-card.compact { padding: 12px 14px; margin: 0 0 12px; box-shadow: none; background: var(--surface2); border-radius: 12px; }
.quote-card.compact blockquote { font-size: .98rem; }
.quote-admin p { margin: 4px 0; }

/* ---------- Person search (top of every page) ---------- */
.topsearch { position: sticky; top: var(--bar); z-index: 25; padding: 10px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft, var(--line)); }
.search-wrap { position: relative; max-width: 560px; margin: 0 auto; }
.search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 2; pointer-events: none; }
#person-search { width: 100%; margin: 0; padding: 10px 14px 10px 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: .95rem; }
#person-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .16); padding: 6px; max-height: min(70vh, 460px); overflow-y: auto; }
.sr { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 8px 10px; color: var(--ink); cursor: pointer; font: inherit; }
.sr:hover, .sr.on { background: var(--accent-soft); }
.sr-main { display: grid; min-width: 0; flex: 1; }
.sr-main strong { font-size: .92rem; overflow-wrap: anywhere; }
.sr-main .small { overflow-wrap: anywhere; }
.sr-empty { margin: 8px 10px; }
@media (min-width: 960px) {
  .topsearch { top: 0; margin-left: var(--side); padding: 12px 48px; }
  .page { padding-top: 28px; }
}
@media print { .topsearch { display: none !important; } }

/* ---------- Retention hooks ---------- */
.briefing { border-top-color: var(--accent); margin: 0 0 16px; }
.brief-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .92rem; }
.brief-list li.muted { color: var(--muted); }
.brief-next { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); text-decoration: none; }
.brief-next > span:first-child { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); }
.brief-next strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.brief-next .arrow { color: var(--accent-dark); font-weight: 700; }
a.brief-next:hover { text-decoration: none; filter: brightness(.98); }
.streak-risk { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--warn) 14%, var(--surface)); border-left: 4px solid var(--warn); font-size: .92rem; }
.quick-touch { display: grid; gap: 6px; }
.qt-label { font-size: .78rem; font-weight: 600; color: var(--muted); }
.qt-row { display: flex; flex-wrap: wrap; gap: 6px; }
.qt-row button { min-width: 72px; }
.profile .quick-touch { margin-top: 12px; }
.this-close { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ai) 9%, var(--surface)); border-left: 4px solid var(--ai); }
.this-close.compact { padding: 8px 12px; margin: 4px 0 8px; }
.this-close ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: .92rem; }
.tc-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ai); }
.profile .this-close { margin-top: 12px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: color-mix(in srgb, var(--warn) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--line)); }
.badge-ic { font-size: 1.1rem; line-height: 1; }
.badge-txt { display: grid; line-height: 1.15; }
.badge-txt strong { font-size: .8rem; }
.badge-txt .small { font-size: .7rem; }
.score4 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.challenge-label { margin: 0; }
.challenge-notes { margin: 6px 0 0; padding-left: 4px; list-style: none; display: grid; gap: 4px; font-size: .9rem; }
.lb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.lb h3 { margin: 0 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lb-list li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: .88rem; }
.lb-list li.me { background: var(--accent-soft); font-weight: 600; outline: 1.5px solid var(--accent); }
.lb-list li.lb-gap { margin-top: 6px; }
.lb-rank { width: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-val { font-variant-numeric: tabular-nums; }
.shouts { display: grid; gap: 8px; }
.shout { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.shout > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.shout-ic, .feed-ic { font-size: 1.15rem; line-height: 1.3; }
.shout-form { margin-top: 10px; }
.feed-top .wrow { background: color-mix(in srgb, var(--warn) 8%, var(--surface)); border-radius: 10px; padding: 8px 10px; border-top: 0; margin-bottom: 4px; }
.feed-top .wrow-main strong { font-weight: 600; }

/* ---------- Bolder header & sidebar: deep shades of the brand colour ----------
   Sidebar, page header, top search band, phone top bar and tab bar sit on a deep shade of the
   team's brand colour (green by default) with white text; the page body stays light and neutral.
   Text on the deep colour is white, or 82% white for secondary lines — except on the four baby colours and Gold,
   which keep their own light colour behind dark text (#1F2937). Values come from src/data/brand-colors.js. */
:root { --deep: #0f4a2b; --deep-2: #156038; --deep-glow: #9fe3bb; --on-deep: #ffffff; --on-deep-rgb: 255, 255, 255;
  --on-deep-muted: rgba(var(--on-deep-rgb), .82); --on-deep-line: rgba(var(--on-deep-rgb), .16); }
:root[data-brand="blue"]     { --deep: #143c70; --deep-2: #1b4c8c; --deep-glow: #b3cdf5; }
:root[data-brand="teal"]     { --deep: #0b4b49; --deep-2: #0f5f5c; --deep-glow: #93e1de; }
:root[data-brand="indigo"]   { --deep: #2d2975; --deep-2: #3a3591; --deep-glow: #c9c6f7; }
:root[data-brand="light-blue"] { --deep: #0277bd; --deep-2: #01579b; --deep-glow: #b3e5fc; }
:root[data-brand="gold"]     { --deep: #c9a227; --deep-2: #c9a227; --deep-glow: #422006; }
:root[data-brand="slate"]    { --deep: #22364b; --deep-2: #2c4560; --deep-glow: #bccbdb; }
/* The four baby colours (and Gold): one colour for picker and header alike, flat (no second shade), dark text. */
:root[data-brand="pastel-pink"]   { --deep: #f9b4c4; --deep-2: #f9b4c4; --deep-glow: #831843; }
:root[data-brand="pastel-yellow"] { --deep: #fde68a; --deep-2: #fde68a; --deep-glow: #713f12; }
:root[data-brand="pastel-orange"] { --deep: #fdb07a; --deep-2: #fdb07a; --deep-glow: #7c2d12; }
:root[data-brand="light-green"]   { --deep: #c9efc7; --deep-2: #c9efc7; --deep-glow: #14532d; }
:root[data-brand="gold"], :root[data-brand="pastel-pink"], :root[data-brand="pastel-yellow"], :root[data-brand="pastel-orange"], :root[data-brand="light-green"] {
  --on-deep: #1f2937; --on-deep-rgb: 31, 41, 55; --on-deep-muted: rgba(31, 41, 55, .86); --on-deep-line: rgba(31, 41, 55, .2); }

.sidebar { background: var(--deep); border-right-color: transparent; color: var(--on-deep); }
.sidebar .nav-label { color: var(--on-deep-muted); }
.sidebar .nav a.nav-link { color: rgba(var(--on-deep-rgb), .9); }
.sidebar .nav a.nav-link:hover { background: rgba(var(--on-deep-rgb), .09); color: var(--on-deep); }
.sidebar .nav a.nav-link.active { background: rgba(var(--on-deep-rgb), .17); color: var(--on-deep); font-weight: 650; }
.sidebar .nav a.nav-link.active::before { background: var(--deep-glow); width: 4px; }
.sidebar .brand-name, .sidebar .has-team .brand-team { color: var(--on-deep); }
.sidebar .has-team .brand-name, .sidebar .brand-team { color: var(--on-deep-muted); }
.sidebar .brand-mark, .mobile-bar .brand-mark { background: linear-gradient(135deg, var(--deep-glow), #ffffff); }
.sidebar .brand-mark::after, .mobile-bar .brand-mark::after { border-color: var(--deep); border-top-color: transparent; }
.sidebar .side-foot { border-top-color: var(--on-deep-line); }
.sidebar .me-text strong { color: var(--on-deep); }
.sidebar .me-text .muted { color: var(--on-deep-muted); }
.sidebar .avatar, .mobile-bar .avatar { background: rgba(var(--on-deep-rgb), .16); color: var(--on-deep); }
.sidebar #logout { color: var(--on-deep); border-color: rgba(var(--on-deep-rgb), .35); background: transparent; }
.sidebar #logout:hover { background: rgba(var(--on-deep-rgb), .1); }
.sidebar .icon-btn { color: var(--on-deep); }
.mobile-bar { background: var(--deep); color: var(--on-deep); border-bottom-color: transparent; }
.mobile-bar .brand-name { color: var(--on-deep); }
.tabbar { background: var(--deep); border-top-color: transparent; }
.tab { color: rgba(var(--on-deep-rgb), .8); }
.tab.active { color: var(--on-deep); }
.tab.active .ic { background: rgba(var(--on-deep-rgb), .18); }
.tab.has-dot::after { box-shadow: 0 0 0 2px var(--deep); }
.topsearch { background: var(--deep); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
#person-search { border-color: var(--on-deep-line); }
#person-search:focus { border-color: var(--deep-glow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--deep-glow) 45%, transparent); }
/* The page header: a deep band with white text (title, lead, team name + tagline). */
.view-head.has-mast, .home-head.has-mast { background: linear-gradient(135deg, var(--deep), var(--deep-2)); color: var(--on-deep); border-radius: 18px; padding: 22px 24px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--deep) 30%, transparent); }
.view-head.has-mast h1, .home-head.has-mast h1 { color: var(--on-deep); }
.view-head.has-mast .lead, .home-head.has-mast .lead, .view-head.has-mast p, .home-head.has-mast p { color: var(--on-deep-muted); }
.view-head.has-mast .eyebrow, .home-head.has-mast .eyebrow { color: var(--deep-glow); }
.view-head.has-mast .more > summary { color: var(--on-deep); }
.view-head.has-mast .more-body, .view-head.has-mast .more-body p { color: rgba(var(--on-deep-rgb), .88); }
.view-head.has-mast a:not(.tag):not(.btnlink) { color: var(--deep-glow); }
.has-mast .team-mast-name { color: var(--on-deep); }
.has-mast .team-mast-tag { color: var(--on-deep-muted); }
@media (max-width: 720px) {
  .view-head.has-mast, .home-head.has-mast { padding: 16px 18px; border-radius: 14px; }
  .has-mast .team-mast { border-bottom-color: var(--on-deep-line); }
}
@media print {
  .view-head.has-mast, .home-head.has-mast { background: none !important; color: #000 !important; box-shadow: none !important; padding: 0 !important; }
  .view-head.has-mast h1, .home-head.has-mast h1 { color: #000 !important; }
}
/* ---- Bubble chart zoom: − / % / + / Fit, and the compact look below 80% ---- */
.zoombar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.zoombar .zbtn { min-width: 44px; min-height: 40px; padding: 0 12px; font-size: 1.15rem; font-weight: 700; line-height: 1; }
.zoombar .zfit { font-size: .95rem; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.zoombar .zbtn:disabled { opacity: .4; cursor: default; }
.zoombar .zlevel { min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink2); }
.bubble-wrap { max-height: max(360px, calc(100vh - 170px)); overflow: auto; overscroll-behavior: contain; border-radius: 10px; }
@media (max-width: 860px) { .bubble-wrap { max-height: max(320px, calc(100dvh - 200px)); } }
@media screen {
  .bubble-wrap.bz-compact .bnode { width: 120px; gap: 2px; }
  .bubble-wrap.bz-compact .bnode > div:not(.bubble) { min-width: 0; max-width: 100%; }
  .bubble-wrap.bz-compact .bnode > div:not(.bubble) > :not(.bname) { display: none; }
  .bubble-wrap.bz-compact .bname { font-size: 1.2rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bubble-wrap.bz-compact .binner { font-size: 1.35rem; font-weight: 700; color: var(--ink); }
  .bubble-wrap.bz-compact .bmore { font-size: 1.4rem; padding: 6px 14px; }
}
@media screen and (max-width: 860px) { .bubble-wrap.bz-compact .bnode { width: auto; gap: 10px; } .bubble-wrap.bz-compact .binner { font-size: 1.15rem; } }
@media print { .btree { zoom: 1 !important; } .bubble-wrap { max-height: none !important; } }

/* ---- Claim page: who recruited you (name + agent code) ---- */
.claim-recruiter { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
.claim-recruiter strong { font-size: 1.05rem; }

/* ---- Archived agents ---- */
.archived-note { border-left: 4px solid var(--muted); background: var(--surface2); border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
.archived-note p { margin: 4px 0 0; }
.archive-confirm { margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--line)); background: color-mix(in srgb, var(--bad) 6%, var(--surface)); }
.archive-confirm ul { margin: 6px 0 10px; padding-left: 18px; }
.review-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.review-row:first-child { border-top: 0; }
.review-row .row-main { flex: 1 1 220px; min-width: 0; }
.review-row .row-main > * { white-space: normal; overflow: visible; text-overflow: clip; }

/* ---- Compliance: the content check's flag on a draft ---- */
.flag-note { border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--line)); background: color-mix(in srgb, var(--bad) 7%, var(--surface)); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.flag-note > strong { color: var(--bad); display: block; margin-bottom: 4px; }
.flag-note p { margin: 2px 0; }
a.btnlink.is-flagged { opacity: .55; cursor: not-allowed; }

/* ---- Compliance dashboard ---- */
.c-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.c-tab { background: var(--surface); color: var(--ink2); box-shadow: inset 0 0 0 1px var(--line); padding: 8px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.c-tab.on { background: var(--deep); color: var(--on-deep); box-shadow: none; }
.c-body .stack { display: grid; gap: 14px; }
.c-rows { display: grid; }
.c-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line-soft); background: none; color: var(--ink); text-align: left; width: 100%; border-radius: 0; box-shadow: none; font: inherit; }
.c-row:first-child { border-top: 0; }
button.c-row:hover { background: var(--surface2); }
.c-row .row-main { flex: 1 1 220px; min-width: 0; }
.c-row .row-main > * { white-space: normal; overflow: visible; text-overflow: clip; }
.c-row.c-col { flex-direction: column; align-items: stretch; }
.c-log { align-items: flex-start; }
.c-log .mono { flex: none; width: 8.5em; }
.c-list { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.c-sub { font-size: .95rem; margin: 14px 0 4px; }
.c-kv { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 4px 12px; margin: 0; font-size: .88rem; }
.c-kv dt { color: var(--muted); }
.c-kv dd { margin: 0; }
.c-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: end; margin: 8px 0 12px; }
.c-link { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); }
.c-link input { width: 100%; font-size: .8rem; }
.c-thread .msg { margin: 8px 0; }
.reviewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; background: var(--deep); color: var(--on-deep); }
.reviewer-bar .brand-name { color: var(--on-deep); font-weight: 700; }
.reviewer-main { max-width: 1000px; margin: 0 auto; padding: 18px 16px 40px; }
@media (max-width: 560px) { .c-kv { grid-template-columns: 1fr; } .c-kv dd { margin-bottom: 6px; } .c-log .mono { width: auto; } .reviewer-bar .brand-name { font-size: .9rem; } }
.c-add label.check { display: flex; flex-direction: row; gap: 8px; align-items: center; font-size: .85rem; padding-bottom: 10px; }
.compliance label.check { display: inline-flex; flex-direction: row; gap: 6px; align-items: center; }
.c-team { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin: 0 0 12px; }
.c-team select { width: auto; }
.c-hidden-note { background: var(--surface2); border-radius: 10px; padding: 8px 12px; }
.c-hidden { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.c-hidden ul { margin: 4px 0 0; padding-left: 18px; }
.c-exp { display: inline-flex; gap: 6px; align-items: center; }
.c-exp input { width: auto; padding: 6px 8px; }
.compliance .spread select { width: auto; max-width: 60%; }

/* ---- Bubble chart: Ball layout (root in the centre, legs around, downlines outward) ---- */
.chart-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.chart-tools .zoombar { margin: 0; }
.layout-toggle { display: inline-flex; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); padding: 3px; gap: 2px; background: var(--surface); }
.layout-toggle button { min-height: 40px; min-width: 64px; padding: 0 14px; background: transparent; color: var(--ink2); box-shadow: none; font-weight: 600; }
.layout-toggle button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.bball { position: relative; margin: 0 auto; }
.bball-lines { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.bball-ring { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 6; opacity: .7; }
.bball-spoke { stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.bball-stub { stroke-dasharray: 3 5; }
.bball .bslot { position: absolute; transform: translateX(-50%); z-index: 1; }
.bubble-wrap .bball .bnode, .bubble-wrap.bz-compact .bball .bnode { flex-direction: column; align-items: center; text-align: center; width: 150px; gap: 4px; }
.bball .bnode > div:not(.bubble) { background: color-mix(in srgb, var(--surface) 88%, transparent); border-radius: 8px; padding: 1px 6px; }
.bball .bnode .tags { justify-content: center; }
.bball .bmore { position: absolute; transform: translate(-50%, -50%); z-index: 2; margin: 0; background: var(--surface); }
.bubble-wrap.bz-compact .bball .bnode { width: 120px; gap: 2px; }
@media screen and (max-width: 860px) {
  .bubble-wrap .bball .bnode, .bubble-wrap.bz-compact .bball .bnode { width: 112px; gap: 3px; }
  .bubble-wrap:not(.bz-compact) .bball .bnode .bname { font-size: .82rem; }
  .bball .bubble { width: 48px; height: 48px; }
}
@media print { .bball { zoom: 1 !important; } }

/* ---- My quote + My profile ---- */
a.me-chip { color: inherit; text-decoration: none; border-radius: 10px; }
a.me-chip:hover .me-text strong { text-decoration: underline; }
.me-link-m { display: inline-flex; border-radius: 50%; text-decoration: none; padding: 4px; margin: -4px; }
.my-quote-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.my-quote-ways h3 { margin: 0; font-size: 1rem; }
.my-quote-ways select, .my-quote-ways textarea { width: 100%; max-width: 100%; }
.pick-preview { padding: 10px 12px; border-radius: 10px; background: var(--surface2); min-height: 3rem; }
.pick-preview .quote blockquote { font-size: 1rem; }
.my-quote-settings .quote-card { margin: 8px 0 0; }
@media (max-width: 860px) { .my-quote-ways { grid-template-columns: 1fr; } }