/* Shadeland internal app - Command (Graeme's home page). 04/11/2026.
   Brand: OS/Brand/colours.md. Navy for figures and labels; blue for marks only (2.7:1 on white is too faint for
   text); Sun Yellow only as the rule under the title, never text. Anton labels at 14px or larger; Poppins figures
   with even-width digits. Direction in words, not colour alone. No sideways scroll at 375px. */

/* Command widens past the phone column on a laptop so the branches sit side by side (plan 5c). app.js adds .wide. */
.app.wide{max-width:1120px}

.cmd{
  --c-navy:#235774; --c-blue:#27AAE1; --c-sun:#FFDD00;
  --c-ground:#F2F8FC; --c-surface:#FFFFFF; --c-surface2:#F7FBFE;
  --c-line:#D3E4EF; --c-line2:#E6F0F7;
  --c-ink:#1B2E3A; --c-ink2:#4A6274; --c-ink3:#66808F;
  --c-mark:#27AAE1; --c-partial:#8FD3F0;
  --c-good:#1B7F4B; --c-bad:#B3261E; --c-warn:#8A5A00;
  --c-goodbg:#E7F4EC; --c-badbg:#FBEAE8; --c-warnbg:#FFF6DC;
  --c-shadow:0 1px 2px rgba(35,87,116,.06), 0 8px 24px -12px rgba(35,87,116,.18);
  --c-r:14px;
  background:var(--c-ground); color:var(--c-ink);
  padding:0 16px 110px; display:flex; flex-direction:column; gap:12px;
  font-variant-numeric:tabular-nums;
}
.cmd *{box-sizing:border-box}
.cmd-top{padding:16px 0 4px}
.cmd-eyebrow{font-family:Anton,Impact,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--c-navy);font-size:14px}
.cmd h1{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:32px;line-height:1.05;margin:4px 0 0;color:var(--c-ink);letter-spacing:.01em}
.cmd-sunrule{height:3px;width:44px;background:var(--c-sun);border-radius:2px;margin-top:9px}
.cmd h2{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--c-navy);margin:0;text-wrap:balance}
.cmd-h3{font-size:14px;font-weight:600;color:var(--c-ink);margin:16px 0 6px}
.cmd-loading,.cmd-empty{color:var(--c-ink2);padding:24px 0;font-size:15px}
.cmd-err{background:var(--c-badbg);border:1px solid var(--c-bad);color:var(--c-bad);border-radius:var(--c-r);padding:14px;font-size:14px;margin-top:16px}
.cmd-err b{display:block}

/* warnings strip: Graeme only */
.cmd-warn{background:var(--c-badbg);border:1px solid var(--c-bad);border-left:5px solid var(--c-bad);border-radius:var(--c-r);padding:14px 16px}
.cmd-warn h2{color:var(--c-bad)}
.cmd-warn ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--c-ink)}
.cmd-warn-tail,.cmd-warn p{margin:8px 0 0;font-size:13px;color:var(--c-ink2)}
.cmd-warn.ok{background:var(--c-goodbg);border-color:var(--c-good);border-left-color:var(--c-good)}
.cmd-warn.ok p{margin:0;color:var(--c-ink)}
.cmd-new{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--c-bad);border:1px solid var(--c-bad);border-radius:999px;padding:0 6px;margin-left:4px}

/* tiles */
.cmd-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:620px){.cmd-grid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.cmd-grid{grid-template-columns:repeat(4,1fr)} .cmd-hero-row{grid-template-columns:2fr 1fr 1fr}}
@media(min-width:620px) and (max-width:959px){.cmd-hero-row .hero{grid-column:1/-1}}
.cmd-tile{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--c-r);padding:15px 16px 12px;display:flex;flex-direction:column;box-shadow:var(--c-shadow);min-width:0}
.cmd-tile.hero{border-color:var(--c-navy);box-shadow:inset 4px 0 0 var(--c-navy),var(--c-shadow)}
.cmd-label{font-family:Anton,Impact,sans-serif;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink2);margin-bottom:8px}
.cmd-value{font-weight:600;font-size:30px;line-height:1.05;color:var(--c-navy);letter-spacing:-.01em;overflow-wrap:anywhere}
.cmd-tile.hero .cmd-value{font-size:clamp(38px,9vw,52px)}
.cmd-held{font-size:22px;color:var(--c-warn)}
.cmd-sub{font-size:13.5px;color:var(--c-ink2);margin-top:7px;line-height:1.45}
.cmd-chg{display:inline-flex;align-self:flex-start;margin-top:9px;font-size:13px;font-weight:600;border-radius:999px;padding:3px 10px}
.cmd-chg.up{color:var(--c-good);background:var(--c-goodbg)}
.cmd-chg.down{color:var(--c-bad);background:var(--c-badbg)}
.cmd-chg.flat{color:var(--c-ink2);background:var(--c-surface2);font-weight:500}
.cmd-basis{margin-top:12px;padding-top:10px;border-top:1px solid var(--c-line2);font-size:11.5px;color:var(--c-ink3);line-height:1.5}
.cmd-tile>.cmd-basis{margin-top:auto;padding-top:10px}
.cmd-tile>.cmd-chg+.cmd-basis,.cmd-tile>.cmd-sub+.cmd-basis,.cmd-tile>.cmd-drill+.cmd-basis{margin-top:auto}
.cmd-tile>*:nth-last-child(2){margin-bottom:12px}
.cmd-stale{color:var(--c-warn);font-weight:600}

/* drill-downs */
.cmd-drill{margin-top:10px}
.cmd-drill>summary{cursor:pointer;font-size:13.5px;color:var(--c-navy);font-weight:600;list-style:none;display:inline-flex;gap:5px;min-height:32px;align-items:center;text-decoration:underline;text-decoration-color:var(--c-blue);text-underline-offset:3px}
.cmd-drill>summary::-webkit-details-marker{display:none}
.cmd-drill>summary::after{content:"\25BE";font-size:10px}
.cmd-drill[open]>summary::after{content:"\25B4"}
.cmd-calls{list-style:none;margin:6px 0 0;padding:0}
.cmd-calls li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--c-line2);font-size:13.5px}
.cmd-calls li:last-child{border-bottom:0}
.cmd-calls .who{min-width:0;overflow-wrap:anywhere;font-weight:500}
.cmd-calls small{display:block;color:var(--c-ink3);font-weight:400;font-size:12px}
.cmd-calls .amt{font-weight:600;white-space:nowrap}
.cmd-calls .amt.late{color:var(--c-bad)}

/* panels */
.cmd-panel{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--c-r);padding:16px;box-shadow:var(--c-shadow);min-width:0}
.cmd-psub{font-size:13.5px;color:var(--c-ink2);margin:6px 0 0}
.cmd-two{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:960px){.cmd-two{grid-template-columns:1fr 1fr}}

/* branches */
.cmd-branches{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
@media(min-width:620px){.cmd-branches{grid-template-columns:1fr 1fr 1fr}}
.cmd-branch{border:1px solid var(--c-line);border-radius:10px;padding:12px 14px;background:var(--c-surface2);min-width:0}
.cmd-branch.unattr{border-style:dashed}
.cmd-branch h3{margin:0 0 8px;font-size:17px;font-weight:600;color:var(--c-navy)}
.cmd-branch dl{margin:0;display:flex;flex-direction:column;gap:8px}
.cmd-branch dl>div{display:flex;flex-direction:column}
.cmd-branch dt{font-size:12px;color:var(--c-ink3);text-transform:uppercase;letter-spacing:.04em}
.cmd-branch dd{margin:0;font-size:19px;font-weight:600;color:var(--c-ink)}
.cmd-branch dd small{font-size:12px;font-weight:400;color:var(--c-ink2)}
.cmd-branch .cmd-dl-chg dd{font-size:13px}
.cmd-branch .cmd-chg{margin-top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cmd-later{color:var(--c-ink3)!important;font-weight:500!important;font-size:15px!important}
.cmd-check{font-size:13.5px;margin:12px 0 0;font-weight:600}
.cmd-check.ok{color:var(--c-good)}
.cmd-check.bad{color:var(--c-bad)}

/* kpi rows */
.cmd-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
@media(min-width:620px){.cmd-kpis{grid-template-columns:repeat(4,1fr)} .cmd-kpis.six{grid-template-columns:repeat(3,1fr)} .cmd-kpis.two{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.cmd-kpis.six{grid-template-columns:repeat(6,1fr)} .cmd-two .cmd-kpis{grid-template-columns:1fr 1fr}}
.cmd-kpis>div{background:var(--c-surface2);border:1px solid var(--c-line2);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;min-width:0}
.cmd-kpis .k{font-size:12px;color:var(--c-ink3);text-transform:uppercase;letter-spacing:.04em}
.cmd-kpis .v{font-size:24px;font-weight:600;color:var(--c-navy);line-height:1.15;margin-top:2px}
.cmd-kpis .v.bad{color:var(--c-bad)}
.cmd-kpis .s{font-size:12px;color:var(--c-ink2);margin-top:2px}
.cmd-kpis .s .cmd-chg{margin-top:2px;font-size:12px}

/* lead sources */
.cmd-src{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.cmd-src li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 2.2em;gap:8px;align-items:center;font-size:13px}
.cmd-src .n{overflow-wrap:anywhere;color:var(--c-ink)}
.cmd-src .b{height:10px;background:var(--c-line2);border-radius:5px;overflow:hidden}
.cmd-src .b span{display:block;height:100%;background:var(--c-mark);border-radius:5px}
.cmd-src .c{text-align:right;font-weight:600}

/* charts */
.cmd-chart{position:relative;margin-top:16px;padding-left:44px}
.cmd-plot{position:relative;height:190px}
.cmd-chart.short .cmd-plot{height:150px}
@media(min-width:620px){.cmd-plot{height:220px}}
.cmd-gl{position:absolute;left:0;right:0;height:1px;background:var(--c-line2)}
.cmd-gl span{position:absolute;right:calc(100% + 6px);top:-.65em;font-size:11px;color:var(--c-ink3);white-space:nowrap}
.cmd-target{position:absolute;left:0;right:0;border-top:2px dashed var(--c-navy);z-index:2}
.cmd-target span{position:absolute;right:0;top:-1.5em;font-size:11px;font-weight:600;color:var(--c-navy);background:var(--c-surface);padding:0 4px}
.cmd-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:3px}
.cmd-bcol{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.cmd-bar{width:100%;max-width:26px;background:var(--c-mark);border-radius:4px 4px 0 0;min-height:2px}
.cmd-bcol.partial .cmd-bar{background:repeating-linear-gradient(135deg,var(--c-partial) 0 5px,var(--c-surface) 5px 7px);border:1px solid var(--c-partial);border-bottom:0}
.cmd-blab{font-size:11px;font-weight:600;color:var(--c-ink);white-space:nowrap;margin-bottom:3px}
.cmd-xaxis{display:flex;gap:3px;margin-top:8px;border-top:1px solid var(--c-line);padding-top:6px}
.cmd-xt{flex:1 1 0;min-width:0;text-align:center;font-size:10.5px;color:var(--c-ink3);white-space:nowrap}

/* tables */
.cmd-tbl{overflow-x:auto;margin-top:12px}
.cmd table{border-collapse:collapse;width:100%;font-size:13.5px}
.cmd th,.cmd td{text-align:left;padding:6px 10px 6px 0;border-bottom:1px solid var(--c-line2)}
.cmd th{font-size:12px;font-weight:600;color:var(--c-ink2)}
.cmd td.num,.cmd th.num{text-align:right;padding-right:0}
.cmd td.low{color:var(--c-bad);font-weight:600}

/* freshness, method, foot */
.cmd-fresh{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--c-r);padding:14px 16px}
.cmd-fresh p{margin:6px 0 10px;font-size:13px;color:var(--c-ink2)}
.cmd-chips{display:flex;flex-wrap:wrap;gap:7px}
.cmd-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--c-line);border-radius:999px;padding:4px 11px 4px 9px;font-size:12px;color:var(--c-ink2);background:var(--c-surface2)}
.cmd-chip b{color:var(--c-ink);font-weight:600}
.cmd .dot{width:8px;height:8px;border-radius:50%;flex:none}
.cmd .dot.ok{background:var(--c-good)} .cmd .dot.mid{background:var(--c-warn)} .cmd .dot.old{background:var(--c-bad)}
.cmd-method{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--c-r)}
.cmd-method>summary{cursor:pointer;padding:14px 16px;font-family:Anton,Impact,sans-serif;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-navy);min-height:48px}
.cmd-mbody{padding:0 16px 14px;font-size:13.5px;color:var(--c-ink2)}
.cmd-mbody p{margin:0 0 8px}
.cmd-foot{font-size:12px;color:var(--c-ink3);margin:4px 0 0}
.cmd summary:focus-visible,.cmd button:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px;border-radius:4px}
/* Promises kept (DIFOTIS), 05/11/2026 */
.cmd-note{margin:10px 0 0;color:var(--c-ink2);font-size:14px;line-height:1.5;max-width:65ch}