/* Callsistance client portal — the one stylesheet.
 *
 * Every colour on the page is a token defined here, once for light and once
 * for dark. Nothing else in the portal writes a hex value, so the theme
 * switch in the header recolours everything at once with no reload, and a
 * client's brand colour can be dropped in here later without a hunt.
 *
 * The three status colours (red / amber / green) mean what they mean on the
 * PDF and in the digest -- below the alert line, between, at or above the
 * target -- and are never used for anything else. The four rep colours are
 * identity only, assigned in roster order and never by rank, so Mason is the
 * same colour on every chart whether he is first or fourth that week.
 */

:root {
  --page:#F3F5F8; --card:#FFFFFF; --card-2:#F8FAFC; --line:#E3E7ED; --line-2:#EEF1F5;
  --ink:#16213A; --body:#3A4557; --muted:#6C7787; --faint:#98A2B3;
  --navy:#1D3A5F; --navy-ink:#FFFFFF; --gold:#C9952A; --link:#1F5FAE;
  --red:#B3261E; --amber:#8A6D00; --green:#2E7D32;
  --red-bg:#FBEAEA; --amber-bg:#FAF0D7; --green-bg:#E7F3E5; --grey-bg:#EEF1F5;
  --red-line:#D24A42; --green-line:#3C9A41;
  --field:#FFFFFF; --focus:#1F5FAE;
  --shadow:0 1px 2px rgba(22,33,58,.06), 0 8px 24px -12px rgba(22,33,58,.18);
  --shadow-2:0 2px 4px rgba(22,33,58,.06), 0 16px 40px -16px rgba(22,33,58,.25);
  --rep-1:#2A78D6; --rep-2:#EB6834; --rep-3:#1BAF7A; --rep-4:#4A3AA7;
  --rep-5:#E87BA4; --rep-6:#008300; --rep-7:#EDA100; --rep-8:#E34948;
  --grid:#E9ECF1; --axis:#C7CDD6;
  --plan-bg:#F7F3EA;
  color-scheme:light;
}
html[data-theme=dark] {
  --page:#14161A; --card:#1D2026; --card-2:#22262D; --line:#2C3039; --line-2:#262A32;
  --ink:#ECEFF4; --body:#C9CFD8; --muted:#8B93A1; --faint:#5F6775;
  --navy:#ECEFF4; --navy-ink:#14161A; --gold:#D9A64A; --link:#8AB4F8;
  --red:#F08C84; --amber:#E0B44A; --green:#8FCF7A;
  --red-bg:#3D2321; --amber-bg:#3A3117; --green-bg:#213A1F; --grey-bg:#2A2E36;
  --red-line:#E06D64; --green-line:#6FBF5F;
  --field:#14161A; --focus:#8AB4F8;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.7);
  --rep-1:#3987E5; --rep-2:#D95926; --rep-3:#199E70; --rep-4:#D4B23C;
  --rep-5:#D55181; --rep-6:#3FA63F; --rep-7:#C98500; --rep-8:#E66767;
  --grid:#262A32; --axis:#3A3F49;
  --plan-bg:#25231D;
  color-scheme:dark;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--page); color:var(--body);
  font:15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { color:var(--ink); margin:0; font-weight:650; letter-spacing:-.01em; }
h1 { font-size:24px; }
h2 { font-size:17px; }
h3 { font-size:14px; }
p { margin:0; }
button, input, select, textarea { font:inherit; color:inherit; }
.num { font-variant-numeric:tabular-nums; }
.muted { color:var(--muted); }
.faint { color:var(--faint); }
.small { font-size:13px; }
.tiny { font-size:12px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- header ---------- */
.top {
  background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.top-in {
  max-width:1240px; margin:0 auto; padding:0 24px; height:60px;
  display:flex; align-items:center; gap:22px;
}
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand img { height:36px; width:auto; display:block; }
.brand .sep { width:1px; height:26px; background:var(--line); }
.brand .kicker { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; white-space:nowrap; }
.nav { display:flex; gap:4px; margin-left:8px; }
.nav a { white-space:nowrap;
  padding:8px 12px; border-radius:8px; color:var(--body); font-weight:500;
}
.nav a:hover { background:var(--line-2); text-decoration:none; }
.nav a.on { background:var(--navy); color:var(--navy-ink); }
.top .grow { flex:1; }
.search {
  display:flex; align-items:center; gap:8px; background:var(--field);
  border:1px solid var(--line); border-radius:10px; padding:0 10px; height:38px; width:280px;
}
.search:focus-within { border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
.search input { border:0; outline:0; background:transparent; flex:1; min-width:0; }
.search svg { width:16px; height:16px; color:var(--muted); flex:none; }
.icon-btn {
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--card);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--body);
}
.icon-btn:hover { background:var(--line-2); }
.icon-btn svg { width:18px; height:18px; }
.who { font-size:13px; color:var(--muted); white-space:nowrap; }
.who a { color:var(--muted); margin-left:8px; }

/* ---------- page ---------- */
.wrap { max-width:1240px; margin:0 auto; padding:26px 24px 60px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.page-head .sub { color:var(--muted); margin-top:4px; }
.periods { display:flex; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:4px; }
.periods a { padding:6px 12px; border-radius:7px; color:var(--body); font-weight:500; font-size:14px; }
.periods a:hover { background:var(--line-2); text-decoration:none; }
.periods a.on { background:var(--navy); color:var(--navy-ink); }

.grid { display:grid; gap:18px; grid-template-columns:repeat(12, minmax(0,1fr)); }
.c12 { grid-column:span 12; } .c8 { grid-column:span 8; } .c6 { grid-column:span 6; }
.c4 { grid-column:span 4; } .c3 { grid-column:span 3; } .c7 { grid-column:span 7; } .c5 { grid-column:span 5; }
@media (max-width:1100px) { .c3 { grid-column:span 6; } .brand .kicker, .brand .sep { display:none; } }
@media (max-width:980px) { .c8,.c6,.c4,.c7,.c5 { grid-column:span 12; } .search { width:180px; } }
@media (max-width:640px) { .c3 { grid-column:span 12; } .who { display:none; } }

.card {
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:20px 22px; min-width:0;
}
.card-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.card-head .hint { color:var(--muted); font-size:13px; }
.card.flat { box-shadow:none; }

/* ---------- KPI tiles ---------- */
.kpi { display:flex; flex-direction:column; gap:6px; }
.kpi .label { font-size:13px; color:var(--muted); font-weight:500; }
.kpi .value { font-size:34px; font-weight:650; color:var(--ink); line-height:1.05; letter-spacing:-.02em; }
.kpi .value small { font-size:15px; color:var(--muted); font-weight:500; margin-left:6px; letter-spacing:0; }
.kpi .foot { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.delta { display:inline-flex; white-space:nowrap; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:12.5px; font-weight:600; background:var(--grey-bg); color:var(--body); }
.delta.up { background:var(--green-bg); color:var(--green); }
.delta.down { background:var(--red-bg); color:var(--red); }
.delta svg { width:11px; height:11px; }

/* ---------- score badges ---------- */
.score {
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:28px; padding:0 8px;
  border-radius:8px; font-weight:650; font-variant-numeric:tabular-nums; font-size:14px;
}
.score.lg { min-width:60px; height:44px; font-size:22px; border-radius:11px; }
.score.xl { min-width:78px; height:60px; font-size:30px; border-radius:14px; }
.b-red { background:var(--red-bg); color:var(--red); }
.b-amber { background:var(--amber-bg); color:var(--amber); }
.b-green { background:var(--green-bg); color:var(--green); }
.b-none { background:var(--grey-bg); color:var(--muted); }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; }
.dot.red { background:var(--red-line); } .dot.green { background:var(--green-line); } .dot.grey { background:var(--faint); }

/* ---------- rep identity ---------- */
.rep-swatch { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:7px; vertical-align:-1px; flex:none; }
.rep-chip { display:inline-flex; align-items:center; font-weight:600; color:var(--ink); }
.rep-1 { --rep:var(--rep-1); } .rep-2 { --rep:var(--rep-2); } .rep-3 { --rep:var(--rep-3); } .rep-4 { --rep:var(--rep-4); }
.rep-5 { --rep:var(--rep-5); } .rep-6 { --rep:var(--rep-6); } .rep-7 { --rep:var(--rep-7); } .rep-8 { --rep:var(--rep-8); }
.rep-swatch, .bar > i { background:var(--rep); }

/* ---------- tables ---------- */
table.t { width:100%; border-collapse:collapse; font-size:14px; }
.t th { text-align:left; font-weight:600; color:var(--muted); font-size:12px; letter-spacing:.04em; text-transform:uppercase; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.t td { padding:10px 10px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.t tr:last-child td { border-bottom:0; }
.t td.r, .t th.r { text-align:right; }
.t td.c, .t th.c { text-align:center; }
.t tr.row-link { cursor:pointer; }
.t tr.row-link:hover td { background:var(--card-2); }
/* max-width:0 + width:99% lets a cell take whatever is left and clip,
   instead of forcing the table wider than its card. */
.t td.ell { max-width:0; width:99%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scrollx { overflow-x:auto; }

/* ---------- heatmap ---------- */
.heat { width:100%; border-collapse:separate; border-spacing:3px; font-size:14px; }
.heat th { font-weight:600; color:var(--muted); font-size:12px; padding:4px 6px; text-align:center; white-space:nowrap; }
.heat th.rowh { text-align:left; padding-left:4px; }
.heat td { text-align:center; padding:0; }
.heat td.cell { border-radius:8px; height:44px; font-weight:650; font-variant-numeric:tabular-nums; position:relative; }
.heat td.cell.thin { opacity:.72; }
.heat td.cell small { display:block; font-weight:500; font-size:10.5px; color:var(--muted); line-height:1; margin-top:2px; }
.heat td.cell a { color:inherit; display:block; height:100%; padding:7px 4px; }
.heat td.cell a:hover { text-decoration:none; outline:2px solid var(--focus); outline-offset:-2px; border-radius:8px; }
.heat tr.team td.cell { outline:1px solid var(--line); }
.heat td.rowname { text-align:left; font-weight:600; color:var(--ink); padding:0 6px 0 4px; white-space:nowrap; }
.heat td.rowname small { display:block; font-weight:500; color:var(--muted); font-size:11.5px; }
.heat td.cell.b-red { background:var(--red-bg); color:var(--red); }
.heat td.cell.b-amber { background:var(--amber-bg); color:var(--amber); }
.heat td.cell.b-green { background:var(--green-bg); color:var(--green); }
.heat td.cell.b-none { background:var(--grey-bg); color:var(--faint); }

/* ---------- leaderboard / bars ---------- */
.lb { display:flex; flex-direction:column; gap:10px; }
.lb .row { display:grid; grid-template-columns:28px 150px 1fr 56px; align-items:center; gap:10px; }
.lb .rank { font-weight:650; color:var(--muted); text-align:center; font-variant-numeric:tabular-nums; }
.lb .rank.top { color:var(--gold); }
.lb .name { font-weight:600; color:var(--ink); display:flex; align-items:center; }
.lb .name small { color:var(--muted); font-weight:500; margin-left:6px; }
.bar { height:12px; background:var(--line-2); border-radius:6px; overflow:hidden; position:relative; }
.bar > i { display:block; height:100%; border-radius:0 6px 6px 0; }
.bar .tick { position:absolute; top:-3px; bottom:-3px; width:1.5px; background:var(--axis); }
.lb .val { text-align:right; font-weight:650; color:var(--ink); font-variant-numeric:tabular-nums; }
.lb .row.unranked .name, .lb .row.unranked .val { color:var(--muted); }
.lb .row.unranked .bar > i { opacity:.45; }
.metric-tabs { display:flex; flex-wrap:wrap; gap:4px; }
.metric-tabs button { border:1px solid var(--line); background:var(--card); border-radius:999px; padding:3px 10px; font-size:12.5px; cursor:pointer; color:var(--body); }
.metric-tabs button.on { background:var(--navy); color:var(--navy-ink); border-color:var(--navy); }

/* range strip (consistency) */
.range { position:relative; height:14px; background:var(--line-2); border-radius:7px; }
.range > i { position:absolute; top:3px; height:8px; border-radius:4px; background:var(--rep); opacity:.45; }
.range > b { position:absolute; top:1px; width:12px; height:12px; border-radius:50%; background:var(--rep); margin-left:-6px; box-shadow:0 0 0 2px var(--card); }

/* ---------- weak spots ---------- */
.spots { display:flex; flex-direction:column; gap:12px; }
.spot { display:grid; grid-template-columns:150px 1fr 120px; gap:12px; align-items:center; }
.spot .lbl { font-weight:600; color:var(--ink); }
.spot .lbl small { display:block; color:var(--muted); font-weight:500; font-size:12px; }
.spot .cnt { text-align:right; font-size:12.5px; color:var(--muted); white-space:nowrap; }
.spot .cnt b { color:var(--red); }
.spot .bar { height:10px; }
.spot .bar > i { background:var(--navy); opacity:.85; }
.spot .bar > i.b-red { background:var(--red-line); } .spot .bar > i.b-amber { background:var(--gold); } .spot .bar > i.b-green { background:var(--green-line); }
.examples { margin:8px 0 0 162px; display:flex; flex-direction:column; gap:4px; font-size:13px; }
.examples a { color:var(--body); }
.examples a:hover { color:var(--link); }
.examples .when { color:var(--muted); margin-left:6px; font-size:12px; }

/* ---------- call cards ---------- */
.callcard { display:flex; gap:14px; align-items:flex-start; }
.callcard .meta { flex:1; min-width:0; }
.callcard .meta .who { font-size:13px; color:var(--muted); }
.callcard .meta .verdict { font-weight:600; color:var(--ink); margin-top:2px; }
.callcard .meta .sum { color:var(--body); font-size:13.5px; margin-top:6px; }
.pill { display:inline-block; white-space:nowrap; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; background:var(--grey-bg); color:var(--muted); }
.pill.red { background:var(--red-bg); color:var(--red); } .pill.green { background:var(--green-bg); color:var(--green); } .pill.amber { background:var(--amber-bg); color:var(--amber); }

/* ---------- candles on the call page ---------- */
.candle { display:grid; grid-template-columns:64px 1fr; gap:14px; padding:14px 0; border-top:1px solid var(--line-2); }
.candle:first-child { border-top:0; padding-top:0; }
.candle .ts { font-variant-numeric:tabular-nums; color:var(--muted); font-size:13px; padding-top:3px; }
.candle .ts b { display:block; width:36px; height:5px; border-radius:3px; margin-bottom:6px; }
.candle.green .ts b { background:var(--green-line); } .candle.red .ts b { background:var(--red-line); }
.candle .hl { font-weight:650; color:var(--ink); }
.candle .cat { font-size:12px; color:var(--muted); margin-left:8px; font-weight:500; }
.candle .q { margin:8px 0; padding:10px 14px; border-left:3px solid var(--line); background:var(--card-2); border-radius:0 8px 8px 0; font-style:italic; color:var(--body); }
.candle .body { color:var(--body); font-size:14px; }
.candle .fix { margin-top:8px; padding:10px 14px; background:var(--green-bg); border-radius:8px; font-size:14px; color:var(--body); }
.candle .fix b { color:var(--green); }
.listen { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:12.5px; font-weight:600; color:var(--body); margin-top:8px; }
.listen:hover { background:var(--line-2); text-decoration:none; }
.listen svg { width:12px; height:12px; }

/* ---------- forms ---------- */
.field { display:flex; flex-direction:column; gap:5px; }
.field label { font-size:12.5px; font-weight:600; color:var(--muted); }
input[type=text], input[type=date], input[type=email], select, textarea {
  border:1px solid var(--line); background:var(--field); border-radius:9px; padding:8px 11px; outline:0; width:100%;
}
input:focus, select:focus, textarea:focus { border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px; border-radius:9px; border:1px solid var(--navy); background:var(--navy); color:var(--navy-ink); font-weight:600; cursor:pointer; }
.btn:hover { filter:brightness(1.08); text-decoration:none; }
.btn.ghost { background:var(--card); color:var(--body); border-color:var(--line); }
.btn.ghost:hover { background:var(--line-2); filter:none; }
.btn.sm { padding:5px 11px; font-size:13px; border-radius:8px; }
.notice { padding:10px 14px; border-radius:10px; background:var(--green-bg); color:var(--green); font-size:14px; margin-bottom:16px; }
.notice.bad { background:var(--red-bg); color:var(--red); }

/* ---------- charts ---------- */
.chart { position:relative; width:100%; }
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart .gridline { stroke:var(--grid); stroke-width:1; }
.chart .axis { stroke:var(--axis); stroke-width:1; }
.chart .tick { fill:var(--muted); font-size:11px; }
.chart .ref { stroke-width:1.5; stroke-dasharray:4 4; opacity:.8; }
.chart .ref.red { stroke:var(--red-line); } .chart .ref.green { stroke:var(--green-line); }
.chart .reflbl { font-size:10.5px; font-weight:600; }
.chart .reflbl.red { fill:var(--red); } .chart .reflbl.green { fill:var(--green); }
.chart .roll { fill:none; stroke:var(--navy); stroke-width:2.25; stroke-linejoin:round; stroke-linecap:round; }
.chart .rollarea { fill:var(--navy); opacity:.06; }
.chart .pt { stroke:var(--card); stroke-width:2; cursor:pointer; }
.chart .pt.dim { opacity:.25; }
.chart .marker { stroke:var(--gold); stroke-width:2; }
.chart .marker-lbl { fill:var(--gold); font-size:10.5px; font-weight:600; }
.chart .bump { fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.chart .bump-dot { stroke:var(--card); stroke-width:2; }
.chart .bump-lbl { font-size:12px; font-weight:600; fill:var(--ink); }
.chart .nodata { fill:var(--muted); font-size:13px; }
.chart .col.red { fill:var(--red-line); } .chart .col.amber { fill:var(--gold); } .chart .col.green { fill:var(--green-line); } .chart .col.none { fill:var(--faint); } .chart .col.plain { fill:var(--navy); }
.chart .col { opacity:.9; }
.chart .band { fill:var(--navy); opacity:.09; }
.chart .dotmark { stroke:var(--card); stroke-width:2; }
.chart .dotmark.red { fill:var(--red-line); } .chart .dotmark.amber { fill:var(--gold); } .chart .dotmark.green { fill:var(--green-line); } .chart .dotmark.none { fill:var(--faint); } .chart .dotmark.plain { fill:var(--navy); }
.chart .bandline { stroke:var(--navy); stroke-width:2; opacity:.2; }
.chart .roll.bold { stroke-width:3; }
.chart .repline { fill:none; stroke-width:1.75; opacity:.85; stroke-linejoin:round; stroke-linecap:round; }
.chart .replbl { font-size:11.5px; font-weight:600; }
.chart .pt.team { fill:var(--navy); }
.chart .endlbl { fill:var(--ink); font-size:12px; font-weight:650; }
.legend { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--body); margin-top:10px; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.legend i.line { width:16px; height:3px; border-radius:2px; background:var(--navy); }
.legend i.ref { width:16px; height:0; border-top:2px dashed var(--red-line); }
.legend i.ref.g { border-top-color:var(--green-line); }
.legend i.mk { width:0; height:12px; border-left:2px solid var(--gold); border-radius:0; }
.tip {
  position:absolute; pointer-events:none; z-index:5; background:var(--ink); color:var(--card);
  padding:8px 11px; border-radius:8px; font-size:12.5px; line-height:1.4; box-shadow:var(--shadow-2);
  max-width:260px; opacity:0; transition:opacity .08s; transform:translate(-50%, calc(-100% - 12px));
}
.tip.on { opacity:1; }
.tip b { font-weight:650; }
.tip .t2 { opacity:.75; }

/* ---------- plan ---------- */
.plan { background:var(--plan-bg); border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.plan .headline { font-size:16px; font-weight:600; color:var(--ink); }
.plan .keep { margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; font-size:14px; }
.plan .keep li { padding-left:22px; position:relative; }
.plan .keep li::before { content:""; position:absolute; left:3px; top:8px; width:9px; height:9px; border-radius:50%; background:var(--green-line); }
.focus { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-top:14px; }
.focus .fnum { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.focus h3 { font-size:16px; margin-top:4px; }
.focus .pattern { margin-top:8px; color:var(--body); }
.focus .cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:14px; }
@media (max-width:820px) { .focus .cols { grid-template-columns:1fr; } }
.focus h4 { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.focus ul { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px; font-size:14px; }
.focus .ev { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.focus .ev a { display:block; padding:9px 12px; border-radius:9px; background:var(--card-2); color:var(--body); border:1px solid var(--line-2); font-size:13.5px; }
.focus .ev a:hover { border-color:var(--focus); text-decoration:none; }
.focus .ev a b { color:var(--ink); display:block; }
.focus .ev a i { color:var(--muted); }
.focus .goal { margin-top:14px; padding:10px 14px; border-radius:9px; background:var(--green-bg); color:var(--green); font-weight:600; font-size:14px; }
.plan-wait { display:flex; align-items:center; gap:12px; color:var(--muted); padding:8px 0; }
.spin { width:18px; height:18px; border:2.5px solid var(--line); border-top-color:var(--navy); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- coaching log ---------- */
.notes { display:flex; flex-direction:column; gap:10px; }
.note { display:grid; grid-template-columns:92px 1fr auto; gap:12px; align-items:start; padding:10px 0; border-top:1px solid var(--line-2); }
.note:first-child { border-top:0; }
.note .d { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; padding-top:2px; }
.note .n { font-size:14px; }
.note .n .cat { font-size:11.5px; color:var(--gold); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-right:8px; }
.note .n .by { color:var(--muted); font-size:12px; margin-top:2px; }
.note form button { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; padding:2px 6px; }
.note form button:hover { color:var(--red); }
.note-form { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.note-form .wide { grid-column:span 2; }
.note-form .btn { justify-self:start; }

/* ---------- search ---------- */
.hit { padding:14px 0; border-top:1px solid var(--line-2); display:grid; grid-template-columns:56px 1fr; gap:14px; }
.hit:first-child { border-top:0; }
.hit .h1 { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.hit .h1 a { font-weight:600; color:var(--ink); }
.hit .snip { color:var(--body); font-size:14px; margin-top:5px; }
.hit .snip b { background:var(--amber-bg); color:var(--ink); padding:0 3px; border-radius:3px; font-weight:600; }

/* ---------- footer / login ---------- */
.foot { max-width:1240px; margin:0 auto; padding:0 24px 30px; font-size:12px; color:var(--faint); display:flex; justify-content:space-between; }
.login { max-width:420px; margin:12vh auto; padding:0 24px; }
.login .card { padding:32px; }
.login .brand { margin-bottom:22px; }
/* The Callsistance mark is drawn on white; give it a white plate so it
   reads as a badge in dark mode rather than a hole in the card. */
.login .brand img { background:#FFFFFF; padding:6px 10px; border-radius:8px; }
.login h1 { font-size:22px; }
.login p { color:var(--muted); margin:8px 0 20px; }
.login form { display:flex; flex-direction:column; gap:12px; }
.empty { color:var(--muted); padding:18px 0; text-align:center; font-size:14px; }
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:16px; }
.filters .field { min-width:150px; }
.filters .field.grow { flex:1; }
.tag { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.opened { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--muted); }
.opened .dot { width:7px; height:7px; }
.stack { display:flex; flex-direction:column; gap:10px; }
.split { display:flex; gap:18px; flex-wrap:wrap; }
.split > * { flex:1; min-width:240px; }
.then-now { display:flex; align-items:center; gap:14px; }
.then-now .v { font-size:28px; font-weight:650; color:var(--ink); letter-spacing:-.02em; }
.then-now .v small { display:block; font-size:12px; color:var(--muted); font-weight:500; letter-spacing:0; }
.then-now svg { width:26px; height:26px; color:var(--muted); flex:none; }