/* Lead Tracker · Lemon Law Champions. Status and follow-up colors are the ones the team knows from the sheet. */
:root {
  color-scheme: only light;
  --green: #0B3D2E; --green-2: #135241; --green-3: #1C6A54; --gold: #FFD60A; --gold-soft: #FFF3B8;
  --bg: #F3F5F2; --panel: #FFFFFF; --ink: #14201B; --ink-2: #4A5953; --ink-3: #7C8A84; --line: #DFE5E1; --line-2: #EDF0EE;
  --focus: #1E88E5; --danger: #C5221F; --ok: #188038;
  --radius: 12px; --shadow: 0 1px 2px rgba(11, 61, 46, .06), 0 6px 24px rgba(11, 61, 46, .08);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.45 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* status colors: pill background / pill text / row tint */
.s-new-lead { --pb: #FFD35C; --pf: #0B3D2E; --tint: #FFF0C2; }
.s-nurture { --pb: #F29900; --pf: #fff; --tint: #FDE7C4; }
.s-non-responsive { --pb: #7E57C2; --pf: #fff; --tint: #EBE3F7; }
.s-docs-requested { --pb: #DCF5C0; --pf: #3A7D0A; --tint: #ECF8D9; }
.s-strong-docs-requested { --pb: #34A853; --pf: #fff; --tint: #CFEBD6; }
.s-docs-received { --pb: #00897B; --pf: #fff; --tint: #D2EEEA; }
.s-retainer-sent { --pb: #1E88E5; --pf: #fff; --tint: #DCEBFB; }
.s-retainer-signed { --pb: #188038; --pf: #fff; --tint: #B9DEC3; }
.s-disqualified { --pb: #F9D6D5; --pf: #A93226; --tint: #FADCDB; }
.s-signed-with-other-attorney { --pb: #8E1B14; --pf: #fff; --tint: #F2B8B4; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 26px; padding: 3px 12px;
  border-radius: 999px; background: var(--pb, #E4E8E5); color: var(--pf, #33423C); font-weight: 650; font-size: 12.5px; line-height: 1.15; white-space: nowrap; border: 0; }
button.pill { padding-right: 8px; transition: filter .12s, box-shadow .12s; }
button.pill:hover { filter: brightness(.96); box-shadow: 0 0 0 3px rgba(11, 61, 46, .10); }
button.pill svg.i { width: 13px; height: 13px; opacity: .75; }

/* follow-up heat: calendar days (Pacific) since the last call */
.h0, .h-ok { background: #A8DCAB !important; color: #1B5E20 !important; font-weight: 650; }
.h1 { background: #DDE6A0 !important; color: #3D2B00 !important; }
.h2 { background: #EEDC94 !important; color: #3D2B00 !important; }
.h3 { background: #FBD38A !important; color: #3D2B00 !important; }
.h4 { background: #F9C491 !important; color: #3D2B00 !important; }
.h5 { background: #F6B599 !important; color: #3D2B00 !important; }
.h6 { background: #F4A6A0 !important; color: #3D2B00 !important; }
.h7 { background: #DA837F !important; color: #fff !important; font-weight: 650; }
.h8 { background: #C0605D !important; color: #fff !important; font-weight: 650; }
.h9 { background: #A53D3C !important; color: #fff !important; font-weight: 650; }
.h10, .h-never { background: #8B1A1A !important; color: #fff !important; font-weight: 650; }

/* ---------- boot + sign in ---------- */
.boot { height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--ink-2); }
.boot-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--green); position: relative; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(180deg, var(--green) 0 46%, var(--bg) 46%); }
.auth-card { width: 100%; max-width: 400px; background: var(--panel); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .22); padding: 32px 32px 28px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-brand img { width: 40px; height: 40px; }
.auth-brand b { display: block; font-size: 17px; letter-spacing: -.01em; }
.auth-brand span { color: var(--ink-3); font-size: 12.5px; }
.auth h1 { font-size: 21px; margin: 0 0 4px; letter-spacing: -.02em; }
.auth p.sub { margin: 0 0 20px; color: var(--ink-2); }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.input, .field input, .field select, .field textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; transition: border-color .12s, box-shadow .12s; }
.field input:hover, .field textarea:hover, .field select:hover, .input:hover { border-color: #C5CFC9; }
.field input:focus, .field textarea:focus, .field select:focus, .input:focus { outline: 0; border-color: var(--green-3); box-shadow: 0 0 0 3px rgba(28, 106, 84, .16); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 9px; border: 1px solid var(--line); background: #fff; font-weight: 600; white-space: nowrap; transition: background .12s, border-color .12s, transform .05s; }
.btn:hover { background: #F6F8F6; border-color: #C5CFC9; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn.primary:hover { background: var(--green-2); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--green); }
.btn.gold:hover { filter: brightness(.96); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: rgba(11, 61, 46, .07); }
.btn.small { padding: 6px 11px; font-size: 13px; }
.btn.wide { width: 100%; padding: 11px 16px; }
.btn[disabled] { opacity: .55; cursor: default; }
.form-error { color: var(--danger); font-size: 13px; min-height: 19px; margin: 2px 0 10px; }

/* ---------- shell ---------- */
.shell { height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.body { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.top { background: var(--green); color: #fff; display: flex; align-items: center; gap: 18px; padding: 0 18px; min-height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.brand img { width: 28px; height: 28px; }
.brand small { display: block; font-weight: 500; font-size: 11px; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; }
.nav { display: flex; align-items: stretch; gap: 2px; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { display: flex; align-items: center; gap: 7px; padding: 0 13px; color: rgba(255, 255, 255, .78); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; border-top: 3px solid transparent; white-space: nowrap; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.nav a.on { color: #fff; border-bottom-color: var(--gold); }
.nav .n { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; }
.nav a.on .n { background: var(--gold); color: var(--green); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255, 255, 255, .75); white-space: nowrap; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #5FE08A; box-shadow: 0 0 0 3px rgba(95, 224, 138, .22); }
.live.off i { background: #FFB74D; box-shadow: 0 0 0 3px rgba(255, 183, 77, .25); animation: pulse 1s infinite; }
.userbtn { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; font-weight: 600; }
.userbtn:hover { background: rgba(255, 255, 255, .08); }
.avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--green); font-size: 12px; font-weight: 800; }
.main { min-height: 0; min-width: 0; overflow: auto; }
.banner { background: #FFF4E5; color: #7A4B00; border-bottom: 1px solid #F5D9A8; padding: 8px 18px; font-size: 13px; }

/* ---------- list ---------- */
.list { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; flex-wrap: wrap; }
.search { position: relative; flex: 0 1 300px; min-width: 200px; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.search input { width: 100%; padding: 8px 34px 8px 34px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.search input:focus { outline: 0; border-color: var(--green-3); box-shadow: 0 0 0 3px rgba(28, 106, 84, .16); }
.search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 11px var(--font); color: var(--ink-3); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; background: #F8FAF8; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.chip:hover { border-color: #C5CFC9; }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pb, #ccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.chip b { font-weight: 700; color: var(--ink-3); }
.chip.on { background: var(--green); border-color: var(--green); color: #fff; }
.chip.on b { color: var(--gold); }
.chip.alert { border-color: #F3B5B0; color: #A32018; background: #FFF4F3; }
.chip.alert.on { background: #C5221F; border-color: #C5221F; color: #fff; }
.chip.alert.on b, .chip.alert b { color: inherit; opacity: .8; }
.bar .count { margin-left: auto; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.tablewrap { min-height: 0; overflow: auto; margin: 0 18px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
table.leads { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
table.leads th { position: sticky; top: 0; z-index: 2; background: var(--green); color: #fff; text-align: left; font-size: 12px; font-weight: 650; padding: 10px 10px; white-space: nowrap; user-select: none; }
table.leads th.sortable { cursor: pointer; }
table.leads th.sortable:hover { background: var(--green-2); }
table.leads th .arrow { color: var(--gold); margin-left: 4px; }
table.leads th.c, table.leads td.c { text-align: center; }
table.leads td { padding: 0 10px; height: 44px; border-bottom: 1px solid rgba(255, 255, 255, .85); background: var(--tint, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
table.leads tbody tr { cursor: pointer; }
table.leads tbody tr:hover td { box-shadow: inset 0 0 0 999px rgba(11, 61, 46, .045); }
table.leads tbody tr.open td { box-shadow: inset 0 2px 0 var(--green), inset 0 -2px 0 var(--green); }
table.leads td.c-name { font-weight: 650; }
table.leads td.c-bz { padding: 0; text-overflow: clip; }
table.leads td.c-status { padding-right: 4px; text-overflow: clip; }
/* column widths; Case Notes takes what is left. Narrower screens drop the columns that are also in the lead panel. */
th.c-status { width: 212px; } th.c-bz { width: 30px; } th.c-name { width: 176px; } th.c-phone { width: 124px; } th.c-make { width: 128px; }
th.c-received { width: 142px; } th.c-year { width: 62px; } th.c-repairs { width: 100px; } th.c-attempts { width: 102px; } th.c-first { width: 78px; }
th.c-lastCall { width: 148px; } th.c-lastAnswered { width: 148px; } th.c-source { width: 150px; }
@media (max-width: 2100px) { .c-source { display: none; } }
@media (max-width: 1600px) { .c-first { display: none; } }
@media (max-width: 1500px) { .c-lastAnswered, .c-repairs { display: none; } }
@media (max-width: 1160px) { .c-received, .c-year { display: none; } }
@media (max-width: 980px) { .c-make { display: none; } }
table.leads td.c-name .tag { margin-left: 6px; }
table.leads td.c-notes { color: var(--ink-2); }
table.leads td.c-notes.empty { color: var(--ink-3); font-style: italic; }
table.leads td.num { font-variant-numeric: tabular-nums; }
tr.uncontacted td { background: #D93025 !important; color: #fff !important; font-weight: 650; }
tr.uncontacted td.c-notes { color: #fff; }
tr.leaving td { opacity: .62; }
tr.flash td { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 30% { box-shadow: inset 0 0 0 999px rgba(255, 214, 10, .55); } 100% { box-shadow: inset 0 0 0 999px rgba(255, 214, 10, 0); } }
.tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: #fff; color: var(--green); border: 1px solid rgba(11, 61, 46, .25); vertical-align: 1px; }
.tag.es { background: #E8F0FE; color: #174EA6; border-color: #AECBFA; }
.tag.warn { background: #FFF4E5; color: #8A5300; border-color: #F5D9A8; }
a.bz { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: inherit; opacity: .7; }
a.bz:hover { opacity: 1; background: rgba(0, 0, 0, .08); }
.step { display: inline-flex; align-items: center; gap: 2px; }
.step b { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 650; }
.step button { width: 24px; height: 24px; border-radius: 7px; border: 0; background: rgba(0, 0, 0, .09); color: inherit; display: grid; place-items: center; padding: 0; }
.step button:hover { background: rgba(0, 0, 0, .2); }
.step button svg.i { width: 13px; height: 13px; stroke-width: 2.6; }
.empty-state { padding: 60px 20px; text-align: center; color: var(--ink-3); }
.empty-state b { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 4px; }

/* cards on small screens */
.cards { display: none; padding: 0 12px 16px; gap: 10px; }
.card { background: var(--tint, #fff); border-radius: 12px; padding: 12px 14px; border: 1px solid rgba(11, 61, 46, .08); display: grid; gap: 8px; cursor: pointer; }
.card.uncontacted { background: #D93025; color: #fff; }
.card .r1 { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.card .r1 b { font-size: 15px; }
.card .r2 { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; opacity: .9; }
.card .r3 { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.card .heatchip { padding: 3px 9px; border-radius: 8px; font-size: 12.5px; background: rgba(255, 255, 255, .6); }
.card .n { font-size: 13px; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- popover menu ---------- */
.pop { position: fixed; z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(11, 61, 46, .22); padding: 6px; min-width: 220px; max-height: min(480px, 80vh); overflow: auto; }
.pop button.opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.pop button.opt:hover, .pop button.opt:focus { background: #EEF3F0; outline: 0; }
.pop button.opt .check { margin-left: auto; color: var(--green); }
.pop .sep { height: 1px; background: var(--line-2); margin: 6px 2px; }
.pop .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-weight: 550; text-decoration: none; }
.pop .menu-item:hover, .pop .menu-item:focus { background: #EEF3F0; outline: 0; }
.pop .who { padding: 8px 10px 6px; color: var(--ink-3); font-size: 12px; }
.pop .who b { display: block; color: var(--ink); font-size: 14px; }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(8, 28, 22, .32); z-index: 30; animation: fade .15s ease-out; }
@keyframes fade { from { opacity: 0; } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--panel); z-index: 40; box-shadow: -18px 0 50px rgba(8, 28, 22, .22); display: grid; grid-template-rows: auto 1fr; animation: slide .18s cubic-bezier(.2, .8, .2, 1); }
@keyframes slide { from { transform: translateX(36px); opacity: 0; } }
.d-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--line-2); background: linear-gradient(180deg, var(--tint, #fff), #fff 140%); }
.d-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.d-top .sp { flex: 1; }
.d-name { width: 100%; font-size: 22px; font-weight: 750; letter-spacing: -.02em; border: 1px solid transparent; border-radius: 8px; background: transparent; padding: 3px 6px; margin: 0 -6px; }
.d-name:hover { border-color: rgba(11, 61, 46, .18); background: rgba(255, 255, 255, .6); }
.d-name:focus { outline: 0; border-color: var(--green-3); background: #fff; box-shadow: 0 0 0 3px rgba(28, 106, 84, .16); }
.d-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; color: var(--ink-2); font-size: 13px; }
.d-body { overflow: auto; padding: 16px 20px 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; }
.d-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sect h3 { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.sect h3 .state { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink-3); }
.sect h3 .state.dirty { color: #B06000; }
.sect h3 .state.saved { color: var(--ok); }
.follow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.follow .box { border-radius: 10px; padding: 9px 10px; background: #F4F6F4; display: grid; gap: 3px; min-width: 0; }
.follow .box span { font-size: 11px; color: inherit; opacity: .75; font-weight: 600; }
.follow .box b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow .box .step b { font-size: 16px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
.grid2 .field { margin: 0; }
.grid2 .full { grid-column: 1 / -1; }
textarea.notes { width: 100%; min-height: 150px; resize: vertical; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; line-height: 1.5; }
textarea.notes:focus { outline: 0; border-color: var(--green-3); box-shadow: 0 0 0 3px rgba(28, 106, 84, .16); }
.hint { color: var(--ink-3); font-size: 12px; margin-top: 6px; }
.activity { display: grid; gap: 0; border-left: 2px solid var(--line-2); margin-left: 6px; }
.act { position: relative; padding: 0 0 12px 16px; font-size: 13px; }
.act::before { content: ""; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--ink-3); }
.act.call::before { border-color: var(--green-3); }
.act.answered::before { background: var(--green-3); border-color: var(--green-3); }
.act.edit::before { border-color: #1E88E5; }
.act.note::before { border-color: #F29900; }
.act time { color: var(--ink-3); font-size: 12px; display: block; }
.act .v { color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- dashboard ---------- */
.page { padding: 18px; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.page h1 { font-size: 22px; margin: 4px 0 0; letter-spacing: -.02em; }
.page p.lead { margin: 0; color: var(--ink-2); }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); border-top: 3px solid var(--green); }
.kpi.gold { border-top-color: var(--gold); }
.kpi.g2 { border-top-color: #34A853; }
.kpi span { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.kpi b { display: block; font-size: 32px; letter-spacing: -.03em; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--ink-3); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.panel h2 { margin: 0 0 12px; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; display: flex; align-items: center; }
.panel h2 small { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }
.bars { display: grid; gap: 6px; }
.barrow { display: grid; grid-template-columns: 190px 44px minmax(0, 1fr); align-items: center; gap: 10px; border: 0; background: transparent; padding: 2px 0; text-align: left; width: 100%; border-radius: 8px; }
button.barrow:hover { background: #F4F6F4; }
.barrow .pill { width: 100%; }
.barrow b { text-align: right; font-variant-numeric: tabular-nums; }
.barrow .track { height: 18px; border-radius: 5px; background: #F1F4F2; overflow: hidden; }
.barrow .fill { display: block; height: 100%; border-radius: 5px; background: var(--pb, var(--gold)); min-width: 2px; }
.barrow.make { grid-template-columns: 110px 34px minmax(0, 1fr); }
.barrow.make .fill { background: var(--gold); }
.days { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; align-items: end; height: 150px; }
.day { display: grid; grid-template-rows: 1fr auto auto; gap: 4px; height: 100%; text-align: center; font-size: 11px; color: var(--ink-3); }
.day .col { display: flex; align-items: flex-end; justify-content: center; }
.day .col i { display: block; width: 100%; max-width: 46px; border-radius: 6px 6px 2px 2px; background: var(--gold); min-height: 3px; }
.day.zero .col i { background: #E6EAE7; }
.day b { color: var(--ink); font-size: 13px; }
.day.today span { color: var(--green); font-weight: 700; }
.rows { display: grid; }
.rowbtn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 9px 8px; border: 0; border-top: 1px solid var(--line-2); background: transparent; text-align: left; width: 100%; border-radius: 0; }
.rowbtn:first-child { border-top: 0; }
.rowbtn:hover { background: #F4F6F4; }
.rowbtn b { font-weight: 650; }
.rowbtn small { color: var(--ink-3); grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowbtn .r { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: 8px; }
.heatchip { display: inline-block; padding: 3px 9px; border-radius: 8px; font-size: 12.5px; white-space: nowrap; background: #EEF1EF; }

/* ---------- team + settings ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl td .muted, .muted { color: var(--ink-3); }
.tbl.hist td { vertical-align: top; }
.tbl.hist tr.failed td { background: #FFF4F3; }
.tbl .nowrap { white-space: nowrap; }
.hv { overflow-wrap: anywhere; }
.linkbtn { border: 0; background: transparent; padding: 0; font-weight: 650; color: var(--green-3); text-decoration: underline; text-underline-offset: 2px; text-align: left; }
.linkbtn:hover { color: var(--green); }
.linkbox { display: flex; gap: 8px; margin-top: 10px; }
.linkbox input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: #F8FAF8; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.callout { background: var(--gold-soft); border: 1px solid #F1DE7A; border-radius: 10px; padding: 12px 14px; color: #5C4A00; }
.inline-form { display: grid; grid-template-columns: 1fr 1fr 160px auto; gap: 10px; align-items: end; }
.inline-form .field { margin: 0; }
.setting { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 6px 18px; padding: 14px 0; border-top: 1px solid var(--line-2); }
.setting:first-of-type { border-top: 0; }
.setting b { font-weight: 650; }
.setting small { display: block; color: var(--ink-3); margin-top: 3px; }
.setting textarea { min-height: 120px; resize: vertical; }

/* ---------- dialog + toasts ---------- */
dialog.modal { border: 0; border-radius: 16px; padding: 0; width: min(560px, calc(100vw - 24px)); box-shadow: 0 30px 80px rgba(8, 28, 22, .35); color: var(--ink); }
dialog.modal::backdrop { background: rgba(8, 28, 22, .4); }
.modal form { padding: 22px 24px 20px; }
.modal h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.02em; }
.modal p.sub { margin: 0 0 16px; color: var(--ink-2); }
.modal .foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.toasts { position: fixed; left: 18px; bottom: 18px; z-index: 80; display: grid; gap: 8px; max-width: min(440px, calc(100vw - 36px)); }
.toast { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 11px; background: #14201B; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); animation: up .18s ease-out; font-size: 13.5px; }
.toast.error { background: #A32018; }
.toast button { border: 0; background: transparent; color: var(--gold); font-weight: 700; padding: 2px 4px; border-radius: 6px; white-space: nowrap; }
.toast button:hover { background: rgba(255, 255, 255, .12); }
@keyframes up { from { transform: translateY(10px); opacity: 0; } }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand span.t { display: none; }
}
@media (max-width: 860px) {
  .tablewrap { display: none; }
  .cards { display: grid; }
  .list { display: block; }
  .top { flex-wrap: wrap; padding: 6px 12px 0; gap: 6px 10px; }
  .brand div { display: none; }
  .nav { order: 3; width: 100%; height: 42px; }
  .bar { padding: 10px 12px; }
  .search { flex: 1 1 100%; }
  .search kbd, .live span, .userbtn span.nm { display: none; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kpi b { font-size: 26px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .top-right .btn.gold { padding: 6px 9px; }
  .days { gap: 3px; }
  .rowbtn { grid-template-columns: minmax(0, 1fr) auto; }
  .page { padding: 12px; }
  .inline-form { grid-template-columns: 1fr; }
  .setting { grid-template-columns: 1fr; }
  .barrow { grid-template-columns: 150px 30px minmax(0, 1fr); }
  .barrow .pill { font-size: 11px; padding: 3px 6px; }
  .d-head { padding: 12px 14px; }
  .d-body { padding: 14px 14px 24px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }