:root{
  --ink:#1c2430; --ink-2:#56617a; --ink-3:#8b94a8; --line:#dde2ea; --paper:#f7f8fa; --card:#fff;
  --teal:#0f6f6c; --teal-2:#e3f1f0;
  --call-now:#b5322b; --this-week:#c97a12; --keep-an-eye:#b8a11b; --slipping:#7a6fb3; --lapsed:#6c7686; --fine:#2e8b57; --none:#c9ced8;
  --sans: -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:15px;line-height:1.45}
body{margin:0}
a{color:var(--teal)}
main{max-width:1180px;margin:0 auto;padding:22px 20px 60px}
.num{font-variant-numeric:tabular-nums;text-align:right}
small{color:var(--ink-3)}
.muted{color:var(--ink-3)}
.empty{color:var(--ink-2);padding:14px 0}

/* top bar */
.top{display:flex;align-items:center;gap:26px;padding:0 20px;height:52px;background:#fff;border-bottom:1px solid var(--line)}
.brand{font-weight:700;letter-spacing:.02em;color:var(--ink);text-decoration:none;font-size:17px}
.brand::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--teal);margin-right:9px;vertical-align:1px}
.top nav{display:flex;gap:18px;flex:1}
.top nav a,.top nav .soon{color:var(--ink-2);text-decoration:none;padding:15px 0;border-bottom:2px solid transparent}
.top nav a.on{color:var(--ink);border-color:var(--teal)}
.top nav .soon{color:var(--ink-3);cursor:default}
.who{display:flex;gap:12px;align-items:center;color:var(--ink-2)}
button.link{background:none;border:0;color:var(--teal);cursor:pointer;font:inherit;padding:0}

/* login */
.login{max-width:360px;margin:12vh auto 0;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:30px}
.login h1{margin:0;font-size:26px}
.login .sub{margin:4px 0 22px;color:var(--ink-2)}
.login label{display:block;margin-bottom:14px;color:var(--ink-2);font-size:13px}
.login input{display:block;width:100%;margin-top:5px;padding:9px 10px;font:inherit;font-size:15px;border:1px solid var(--line);border-radius:6px}
.login button{width:100%;padding:10px;font:inherit;background:var(--teal);color:#fff;border:0;border-radius:6px;cursor:pointer}

/* headings */
.crumb{margin:0 0 6px;font-size:13px}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.head h1{margin:0;font-size:24px}
.meta{margin:0;color:var(--ink-2)}
.flash{background:var(--teal-2);border:1px solid #bfe0dd;color:var(--teal);padding:10px 14px;border-radius:8px;margin-bottom:16px}
.flash p{margin:0}

/* filters */
.filters{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.filters input{padding:8px 11px;font:inherit;border:1px solid var(--line);border-radius:6px;min-width:280px;background:#fff}
.bands{display:flex;gap:6px;flex-wrap:wrap}
.bands a{text-decoration:none;color:var(--ink-2);padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px}
.bands a.on{color:#fff;background:var(--ink);border-color:var(--ink)}
.bands a small{color:inherit;opacity:.7;margin-left:3px}

/* pills and bars: band colours carry meaning everywhere */
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;color:#fff;background:var(--none);white-space:nowrap}
.pill.status{background:var(--ink-2)} .pill.list{background:var(--teal)}
.band-call-now{--b:var(--call-now)} .band-this-week{--b:var(--this-week)} .band-keep-an-eye{--b:var(--keep-an-eye)}
.band-slipping{--b:var(--slipping)} .band-lapsed{--b:var(--lapsed)} .band-fine{--b:var(--fine)} .band-none{--b:var(--none)}
.pill[class*=band-]{background:var(--b)}
.bands a[class*=band-].on{background:var(--b);border-color:var(--b)}
.cover{display:flex;align-items:center;gap:8px;min-width:130px}
.cover .bar{display:block;height:8px;width:80px;border-radius:4px;background:var(--line);position:relative;overflow:hidden;flex:none}
.cover .bar::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--b);border-radius:4px}
.cover.big .bar{width:100%;height:12px;margin:8px 0 14px}

/* tables */
table.list{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
table.list th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:600;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
table.list td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.list tr:last-child td{border-bottom:0}
table.list td a{text-decoration:none;color:var(--ink);font-weight:600}
table.list td small{display:block;font-size:12px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);margin-left:6px}
table.mini{width:100%;border-collapse:collapse;font-size:14px}
table.mini th{text-align:left;font-weight:600;color:var(--ink-3);font-size:12px;padding:4px 0}
table.mini td{padding:5px 0;border-top:1px solid var(--line)}

/* clinic page */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.card.wide{grid-column:1 / -1}
.card h2{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.headline{margin:0 0 4px;font-weight:600}
dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}
dt{color:var(--ink-2)} dd{margin:0}
.contact{padding:10px 0;border-top:1px solid var(--line)}
.contact:first-of-type{border-top:0;padding-top:0}
.contact p{margin:2px 0}
.contact.primary strong::after{content:"primary";font-size:11px;font-weight:600;color:var(--teal);background:var(--teal-2);padding:1px 6px;border-radius:999px;margin-left:8px;vertical-align:1px}
.src{margin-left:6px}
.cls{margin-left:6px;font-size:12px}
.cls-accounts,.warn{color:var(--call-now)} .cls-freemail,.cls-isp{color:var(--this-week)}
.warn{margin:2px 0;font-size:13px}

/* history */
.note{display:grid;grid-template-columns:220px 1fr auto;gap:10px;align-items:start;margin-bottom:18px}
.note input,.note textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:6px;width:100%}
.note button{padding:9px 16px;font:inherit;background:var(--teal);color:#fff;border:0;border-radius:6px;cursor:pointer}
.act{display:grid;grid-template-columns:170px 110px 1fr;gap:4px 12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.act .when{color:var(--ink-3);font-variant-numeric:tabular-nums}
.act .who{color:var(--ink-2)}
.act .what{font-weight:600}
.act p{grid-column:3;margin:0;white-space:pre-wrap}

@media (max-width:820px){
  main{padding:14px}
  .grid{grid-template-columns:1fr}
  .note{grid-template-columns:1fr}
  .act{grid-template-columns:1fr}
  table.list th:nth-child(n+5),table.list td:nth-child(n+5){display:none}
  .top nav{gap:12px}
}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* today */
.today{margin-bottom:30px}
.today .head h2{margin:0;font-size:18px;text-transform:none;letter-spacing:0;color:var(--ink)}
.today .head h2 small{font-weight:400;margin-left:6px}
.item{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.item summary{display:grid;grid-template-columns:2fr 3fr 1.4fr auto;gap:14px;align-items:center;padding:12px 16px;cursor:pointer;list-style:none}
.item summary::-webkit-details-marker{display:none}
.item[open] summary{border-bottom:1px solid var(--line)}
.item .name a{font-weight:600;color:var(--ink);text-decoration:none}
.item .name small{display:block;font-size:12px}
.item .why{color:var(--ink-2);font-size:14px}
.item .facts{color:var(--ink-2);font-size:13px;text-align:left}
.item .phone{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;text-decoration:none}
.item .body{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;padding:14px 16px}
.item .col p{margin:0 0 8px}
.item .recent{padding-left:10px;border-left:2px solid var(--line)}
.outcome{display:grid;gap:8px}
.outcome input,.outcome textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:6px;width:100%}
.buttons{display:flex;flex-wrap:wrap;gap:6px}
.buttons button{font:inherit;font-size:13px;padding:7px 12px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer}
.buttons button.close{border-color:var(--teal);color:var(--teal)}
.buttons button.skip{margin-left:auto;color:var(--ink-2)}
.buttons button.park{color:var(--ink-2)}
.buttons button:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:820px){.item summary,.item .body{grid-template-columns:1fr}}

.missing{border-color:var(--call-now) !important;background:#fff6f5}
.buttons button.fix{border-color:var(--this-week);color:var(--this-week)}
.card h2 .edit{float:right;font-size:12px;text-transform:none;letter-spacing:0;font-weight:600}
.contact-form{display:grid;gap:8px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.contact-form input{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:6px;width:100%}
.contact-form button{font:inherit;padding:8px 14px;background:var(--teal);color:#fff;border:0;border-radius:6px;cursor:pointer}
.contact-form a{margin-left:10px;font-size:13px}

/* monday review */
.sendbar{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.sendbar button{font:inherit;padding:8px 16px;background:var(--teal);color:#fff;border:0;border-radius:6px}
.sendbar button:disabled{opacity:.45}
.prop summary{grid-template-columns:2fr 2.4fr 2fr auto}
.prop .to{font-size:14px}
.prop.approved{border-color:#bfe0dd}.prop.declined{opacity:.75}
.pill.proposed{background:var(--ink-3)}.pill.approved{background:var(--teal)}.pill.declined{background:var(--lapsed)}.pill.sent{background:var(--fine)}.pill.failed{background:var(--call-now)}
.merge p{margin:0 0 6px}
.decide{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.decide button,.decide select{font:inherit;font-size:13px;padding:7px 12px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer}
.decide .approve{background:var(--teal);color:#fff;border-color:var(--teal)}
.decide .or{color:var(--ink-2);font-size:13px;margin-left:6px}
.decide .undo{color:var(--ink-2)}
.filters .clear{font-size:13px}