/* Outreach tracker — Adjoltz palette
   bg #050706 · panels #0b0f0d / #0f1512 · green #2ee88f
   Manrope for UI, Space Grotesk for labels and counters */

:root{
  --bg:#050706; --panel:#0b0f0d; --panel-2:#0f1512;
  --line:rgba(126,148,136,.14); --line-2:rgba(126,148,136,.28);
  --green:#2ee88f; --green-2:#38d394; --green-dim:#16543c;
  --ink:#f2f5f3; --muted:#8e9a94; --muted-2:#6b7772;
  --amber:#e8c22e; --red:#e8564a; --ink-on-green:#04140c;

  /* one hue per status, so the state is readable before the label is */
  --s-researched:#8e9a94;  /* neutral, nothing sent yet */
  --s-sent:#4a9df0;        /* blue, in flight */
  --s-read:#a77df5;        /* violet, seen and ignored */
  --s-replied:#2ee88f;     /* green, they answered */
  --s-meeting:#38d394;     /* solid green, the win */
  --s-dormant:#e8c22e;     /* amber, ladder ran out */
  --s-dead:#e8564a;        /* red, closed */
  --r:14px; --r-sm:9px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}

/* faint hex grid behind everything */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.45;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'><path d='M28 0l24 14v28L28 56 4 42V14z' fill='none' stroke='rgba(46,232,143,0.055)' stroke-width='1'/><path d='M28 48l24 14v28L28 104 4 90V62z' fill='none' stroke='rgba(46,232,143,0.055)' stroke-width='1'/></svg>");
}
.wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:22px 20px 60px}

.mono{font-family:'Space Grotesk',ui-monospace,monospace}
.label{
  font-family:'Space Grotesk',monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--muted-2);
}

/* ---------- header ---------- */
header.top{display:flex; align-items:center; gap:14px; margin-bottom:22px}
header.top img.logo{height:26px; width:auto; display:block}
header.top h1{margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em}
header.top .sub{color:var(--muted-2); font-size:12px; margin-top:1px}
header.top .spacer{flex:1}

.conn{
  display:inline-flex; align-items:center; gap:7px; padding:6px 11px;
  border:1px solid var(--line); border-radius:999px; background:var(--panel);
  font-family:'Space Grotesk',monospace; font-size:11px; color:var(--muted);
}
.dot{width:7px; height:7px; border-radius:50%; background:var(--muted-2)}
.dot.live{background:var(--green); box-shadow:0 0 0 3px rgba(46,232,143,.14)}
.dot.demo{background:var(--amber); box-shadow:0 0 0 3px rgba(232,194,46,.13)}
.dot.err{background:var(--red)}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:18px}
.stat{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px;
}
.stat .n{font-family:'Space Grotesk',monospace; font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.1}
.stat .k{margin-top:3px}
.stat.accent .n{color:var(--green)}

/* ---------- tabs ---------- */
nav.tabs{display:flex; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--line)}
nav.tabs button{
  appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  color:var(--muted); padding:9px 14px; cursor:pointer; font-family:'Manrope',sans-serif;
  font-size:13px; font-weight:700; letter-spacing:-.01em; margin-bottom:-1px;
}
nav.tabs button:hover{color:var(--ink)}
nav.tabs button.on{color:var(--ink); border-bottom-color:var(--green)}
nav.tabs .count{
  font-family:'Space Grotesk',monospace; font-size:10.5px; margin-left:6px;
  background:var(--green-dim); color:var(--green); padding:1px 6px; border-radius:999px;
}

/* ---------- send window banner ---------- */
.window-note{
  display:flex; align-items:center; gap:10px; padding:11px 14px; margin-bottom:16px;
  border-radius:var(--r); border:1px solid var(--line); background:var(--panel);
  font-size:13px;
}
.window-note .hexdot{width:11px; height:12px; flex:0 0 auto; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.window-note.good{border-color:rgba(46,232,143,.3)} .window-note.good .hexdot{background:var(--green)}
.window-note.warn{border-color:rgba(232,194,46,.3)} .window-note.warn .hexdot{background:var(--amber)}
.window-note.bad{border-color:rgba(232,86,74,.35)}  .window-note.bad .hexdot{background:var(--red)}
.window-note b{font-weight:700}
.window-note span.t{color:var(--muted); margin-left:auto; font-family:'Space Grotesk',monospace; font-size:11.5px}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:12px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 16px 13px; display:flex; flex-direction:column; gap:10px;
}
.card.overdue{border-color:rgba(232,194,46,.34)}
.card .hd{display:flex; align-items:flex-start; gap:10px}
.card .who{min-width:0; flex:1}
.card .person{font-size:15.5px; font-weight:800; letter-spacing:-.015em}
.card .co{color:var(--muted); font-size:12.5px; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card .co a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line-2)}
.card .co a:hover{color:var(--green)}
.card .age{
  font-family:'Space Grotesk',monospace; font-size:11px; text-align:right;
  color:var(--muted); white-space:nowrap; padding-top:2px;
}
.card .age b{display:block; font-size:17px; color:var(--ink); font-weight:700}
.card.overdue .age b{color:var(--amber)}
.card .meta{font-size:12.5px; color:var(--muted-2); display:flex; flex-wrap:wrap; gap:5px 12px}
.card .notes{
  font-size:12.5px; color:var(--muted); background:var(--panel-2);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; margin:0;
}
.card .acts{display:flex; gap:7px; margin-top:2px; flex-wrap:wrap}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:5px}
.chip{
  font-family:'Space Grotesk',monospace; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--muted);
}
.chip.flag{border-color:rgba(232,86,74,.4); color:#f0938a}

/* status chips, tinted fill so they read at a glance across the grid */
.chip.st-researched{border-color:rgba(142,154,148,.4); background:rgba(142,154,148,.09); color:var(--s-researched)}
.chip.st-sent{border-color:rgba(74,157,240,.45); background:rgba(74,157,240,.11); color:var(--s-sent)}
.chip.st-read{border-color:rgba(167,125,245,.45); background:rgba(167,125,245,.12); color:var(--s-read)}
.chip.st-replied{background:var(--s-replied); border-color:var(--s-replied); color:var(--ink-on-green); font-weight:700}
.chip.st-meeting{background:var(--s-meeting); border-color:var(--s-meeting); color:var(--ink-on-green); font-weight:700}
.chip.st-dormant{border-color:rgba(232,194,46,.45); background:rgba(232,194,46,.1); color:var(--s-dormant)}
.chip.st-dead{border-color:rgba(232,86,74,.35); background:rgba(232,86,74,.07); color:#c9776f; text-decoration:line-through}

/* ---------- buttons ---------- */
.btn{
  appearance:none; cursor:pointer; border-radius:var(--r-sm); font-family:'Manrope',sans-serif;
  font-size:12.5px; font-weight:700; padding:8px 13px; border:1px solid var(--line-2);
  background:var(--panel-2); color:var(--ink); letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
}
.btn:hover{border-color:var(--muted-2)}
.btn.primary{background:var(--green); border-color:var(--green); color:var(--ink-on-green)}
.btn.primary:hover{background:var(--green-2); border-color:var(--green-2)}
.btn.primary.warn{background:var(--amber); border-color:var(--amber)}
.btn.primary.bad{background:var(--red); border-color:var(--red); color:#fff}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 10px; font-size:11.5px}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* ---------- table ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; align-items:center}
.filters input,.filters select{width:auto; min-width:150px}
.tablewrap{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel)}
table{width:100%; border-collapse:collapse; font-size:13px}
th{
  text-align:left; padding:10px 12px; background:var(--panel-2); color:var(--muted-2);
  font-family:'Space Grotesk',monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:500; border-bottom:1px solid var(--line);
}
td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(46,232,143,.03)}
td .co2{color:var(--muted); font-size:12px}
td.num{font-family:'Space Grotesk',monospace; color:var(--muted); white-space:nowrap}
td select{width:auto; padding:5px 8px; font-size:12px}

/* ---------- forms ---------- */
input,select,textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line);
  color:var(--ink); border-radius:var(--r-sm); padding:9px 11px;
  font-family:'Manrope',sans-serif; font-size:13px;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--green-dim)}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
select{cursor:pointer}
.field{display:flex; flex-direction:column; gap:5px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
.stack{display:flex; flex-direction:column; gap:12px}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px}
.panel + .panel{margin-top:12px}
.panel h3{margin:0 0 14px; font-size:13px; font-weight:800; letter-spacing:-.01em}
.checks{display:flex; flex-wrap:wrap; gap:14px}
.check{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); cursor:pointer}
.check input{width:auto; accent-color:var(--green)}

.dupe{
  border:1px solid rgba(232,194,46,.4); background:rgba(232,194,46,.06);
  border-radius:var(--r-sm); padding:11px 13px; font-size:13px; margin-top:12px;
}
.dupe b{color:var(--amber)}

/* ---------- empty + toast + gate ---------- */
.empty{
  text-align:center; padding:56px 20px; color:var(--muted-2);
  border:1px dashed var(--line-2); border-radius:var(--r);
}
.empty .hex{
  width:48px; height:54px; margin:0 auto 14px; background:var(--green-dim);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.empty h3{margin:0 0 6px; color:var(--ink); font-size:15px}

#toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--green); color:var(--ink-on-green); font-weight:700; font-size:13px;
  padding:11px 18px; border-radius:999px; opacity:0; pointer-events:none;
  transition:opacity .18s, transform .18s; z-index:50;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--red); color:#fff}

.gate{position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:60}
.gate .box{width:340px; text-align:center}
.gate .hex{
  width:54px; height:60px; margin:0 auto 18px; background:var(--green);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.gate h2{margin:0 0 6px; font-size:17px}
.gate p{margin:0 0 18px; color:var(--muted-2); font-size:13px}
.gate .btn{width:100%; justify-content:center; margin-top:10px}
.gate .err{color:var(--red); font-size:12.5px; margin-top:10px; min-height:16px}

.hide{display:none !important}

@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid2,.grid3{grid-template-columns:1fr}
}

/* ---------- timing insights ---------- */
.insights{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 16px; margin-bottom:16px;
}
.insights .hdr{display:flex; align-items:baseline; gap:10px; margin-bottom:12px}
.insights .hdr h3{margin:0; font-size:13px; font-weight:800}
.insights .hdr span{color:var(--muted-2); font-size:12px}
.ins-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.bars{display:flex; flex-direction:column; gap:7px}
.bar{display:grid; grid-template-columns:64px 1fr 62px; align-items:center; gap:9px}
.bar .bk{font-family:'Space Grotesk',monospace; font-size:11px; color:var(--muted)}
.bar .track{height:8px; background:var(--panel-2); border-radius:999px; overflow:hidden}
.bar .fill{height:100%; background:var(--green-dim); border-radius:999px}
.bar.best .fill{background:var(--green)}
.bar .v{font-family:'Space Grotesk',monospace; font-size:11px; color:var(--muted-2); text-align:right}
.bar.best .v{color:var(--green)}
@media (max-width:900px){ .ins-grid{grid-template-columns:1fr} }

/* ---------- status colour, carried through card and table ---------- */

/* left rail on the due card, the fastest read on the page */
.card{border-left:3px solid var(--line)}
.card.s-researched{border-left-color:var(--s-researched)}
.card.s-sent{border-left-color:var(--s-sent)}
.card.s-read{border-left-color:var(--s-read)}
.card.s-replied{border-left-color:var(--s-replied)}
.card.s-meeting{border-left-color:var(--s-meeting)}
.card.s-dormant{border-left-color:var(--s-dormant)}
.card.s-dead{border-left-color:var(--s-dead)}

/* overdue still overrides the box, the rail keeps the status */
.card.overdue{border-color:rgba(232,194,46,.34)}
.card.overdue.s-researched{border-left-color:var(--s-researched)}
.card.overdue.s-sent{border-left-color:var(--s-sent)}
.card.overdue.s-read{border-left-color:var(--s-read)}
.card.overdue.s-dormant{border-left-color:var(--s-dormant)}

/* the dropdown in the table wears its own colour */
select.status-sel{font-weight:700}
select.status-sel.s-researched{color:var(--s-researched); border-color:rgba(142,154,148,.35)}
select.status-sel.s-sent{color:var(--s-sent); border-color:rgba(74,157,240,.4)}
select.status-sel.s-read{color:var(--s-read); border-color:rgba(167,125,245,.4)}
select.status-sel.s-replied{color:var(--s-replied); border-color:rgba(46,232,143,.45)}
select.status-sel.s-meeting{color:var(--s-meeting); border-color:rgba(56,211,148,.45)}
select.status-sel.s-dormant{color:var(--s-dormant); border-color:rgba(232,194,46,.4)}
select.status-sel.s-dead{color:var(--s-dead); border-color:rgba(232,86,74,.4)}
select.status-sel option{background:var(--panel-2); color:var(--ink)}

/* table row keeps a thin colour edge on the first cell */
tbody tr td:first-child{border-left:3px solid transparent}
tbody tr.s-researched td:first-child{border-left-color:var(--s-researched)}
tbody tr.s-sent td:first-child{border-left-color:var(--s-sent)}
tbody tr.s-read td:first-child{border-left-color:var(--s-read)}
tbody tr.s-replied td:first-child{border-left-color:var(--s-replied)}
tbody tr.s-meeting td:first-child{border-left-color:var(--s-meeting)}
tbody tr.s-dormant td:first-child{border-left-color:var(--s-dormant)}
tbody tr.s-dead td:first-child{border-left-color:var(--s-dead)}
tbody tr.s-dead td b{color:var(--muted-2)}

/* ---------- edit drawer ---------- */
.modal{
  position:fixed; inset:0; z-index:70; display:flex; align-items:flex-start;
  justify-content:center; padding:34px 18px; overflow-y:auto;
  background:rgba(3,5,4,.72); backdrop-filter:blur(3px);
}
.modal .sheet{
  width:100%; max-width:720px; background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--r); padding:20px 22px 22px; box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.sheet-hd{display:flex; align-items:flex-start; gap:12px; margin-bottom:18px}
.sheet-hd h3{margin:0; font-size:16px; font-weight:800; letter-spacing:-.015em}
.sheet-hd .sub{color:var(--muted-2); font-size:12.5px; margin-top:2px}
.sheet-hd .btn{margin-left:auto}

.rule{border-top:1px solid var(--line); padding-top:14px; margin-top:2px}
.sheet-ft{display:flex; align-items:center; gap:8px; margin-top:6px}
.sheet-ft .spacer{flex:1}

.btn.danger{border-color:rgba(232,86,74,.45); color:#f0938a; background:transparent}
.btn.danger:hover{border-color:var(--red); color:#fff; background:rgba(232,86,74,.16)}
.btn.danger.armed{background:var(--red); border-color:var(--red); color:#fff}

@media (max-width:700px){
  .modal{padding:14px 10px}
  .modal .sheet{padding:16px}
  .sheet-ft{flex-wrap:wrap}
  .sheet-ft .spacer{display:none}
}

/* ---------- call brief ---------- */
.card .brief{
  background:rgba(46,232,143,.045); border:1px solid rgba(46,232,143,.2);
  border-radius:var(--r-sm); padding:9px 11px 9px 12px;
}
.card .brief .bl{
  font-family:'Space Grotesk',monospace; font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--green); display:block; margin-bottom:5px;
}
.card .brief ul{margin:0; padding-left:15px}
.card .brief li{font-size:12.5px; color:var(--ink); margin-bottom:3px; line-height:1.45}
.card .brief li::marker{color:var(--green-dim)}
.card .brief li:last-child{margin-bottom:0}
td .briefdot{
  display:inline-block; width:7px; height:8px; margin-left:6px; vertical-align:middle;
  background:var(--green-dim); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

/* brief popup */
.modal .sheet.narrow{max-width:520px}
#briefBody .brief{background:rgba(46,232,143,.05); border:1px solid rgba(46,232,143,.22);
  border-radius:var(--r-sm); padding:13px 15px}
#briefBody .brief ul{margin:0; padding-left:17px}
#briefBody .brief li{font-size:13.5px; color:var(--ink); margin-bottom:7px; line-height:1.5}
#briefBody .brief li::marker{color:var(--green)}
#briefBody .brief li:last-child{margin-bottom:0}
#briefBody .brief .bl{display:none}
#briefBody .none{color:var(--muted-2); font-size:13px; padding:14px 0}
.btn.hasbrief{border-color:rgba(46,232,143,.4); color:var(--green)}

/* ---------- scheduled calls ---------- */
.cards.wide{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
.card.call{border-left-width:3px; border-left-color:var(--green)}
.card.call.soon{border-color:rgba(46,232,143,.4); box-shadow:0 0 0 1px rgba(46,232,143,.12)}
.card.call.past{border-left-color:var(--amber)}
.whenrow{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.when{
  font-family:'Space Grotesk',monospace; font-size:19px; font-weight:700;
  letter-spacing:-.01em; color:var(--green);
}
.card.call.past .when{color:var(--amber)}
.whenfull{font-family:'Space Grotesk',monospace; font-size:11.5px; color:var(--muted-2)}
.card.call .paybadge{
  margin-left:auto; font-family:'Space Grotesk',monospace; font-size:11px;
  color:var(--muted); border:1px solid var(--line-2); border-radius:999px; padding:2px 9px;
}
.nocalls{grid-column:1/-1}

.card.call .kind{
  font-family:'Space Grotesk',monospace; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; padding:2px 8px; border-radius:999px;
  border:1px solid rgba(46,232,143,.4); color:var(--green);
}
.card.call .kind.irl{border-color:rgba(167,125,245,.5); color:var(--s-read)}
.card.call .where{font-size:12.5px; color:var(--muted); margin-top:-2px}
td .rowbtns{display:inline-flex; gap:6px; justify-content:flex-end}

/* ---------- phone ----------
   Three real breakages: cards had a 340px and 420px minimum so they overflowed
   a 390px screen, the table was clipped rather than scrollable because the
   wrapper hid overflow, and four tabs no longer fit on one line. */
@media (max-width:640px){
  .wrap{padding:14px 12px 48px}

  .cards, .cards.wide{grid-template-columns:1fr}

  header.top{flex-wrap:wrap; gap:10px}
  header.top h1{font-size:15px}
  header.top .conn{order:3}
  header.top .spacer{display:none}

  .stats{grid-template-columns:repeat(2,1fr); gap:8px}
  .stat{padding:11px 12px}
  .stat .n{font-size:22px}

  /* tabs scroll sideways instead of wrapping into two rows */
  nav.tabs{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs button{white-space:nowrap; flex:0 0 auto; padding:9px 11px}

  /* the table is 8 columns wide, so let it scroll rather than clip */
  .tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .tablewrap table{min-width:820px}

  .window-note{flex-wrap:wrap; font-size:12.5px}
  .window-note span.t{margin-left:0; width:100%}

  .card .acts{gap:6px}
  .card .acts .btn{flex:1 1 auto; justify-content:center; min-height:40px}
  .btn{min-height:38px}
  .btn.sm{min-height:34px}

  .whenrow{gap:7px}
  .when{font-size:17px}
  .card.call .paybadge{margin-left:0}

  /* iOS zooms any input under 16px on focus, which throws the layout */
  input, select, textarea{font-size:16px}

  .modal{padding:10px 8px}
  .modal .sheet{padding:15px 14px}
  .sheet-ft{flex-wrap:wrap}
  .sheet-ft .btn{flex:1 1 auto; justify-content:center}

  .filters input, .filters select{min-width:0; flex:1 1 140px}
}

/* ---------- expo desk additions ---------- */
.chip.booth{border-color:rgba(46,232,143,.45); color:var(--green); font-weight:700}
.chip.flag.good{border-color:rgba(46,232,143,.45); color:var(--green)}
.card .meta .mono{font-family:'Space Grotesk',monospace; color:var(--muted)}
.btn.hasmsg{border-color:rgba(74,157,240,.45); color:var(--s-sent)}

/* sign-by strip: one tile per show, days left in big type */
.deadlines{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; margin-bottom:16px}
.dl{
  display:flex; align-items:center; gap:12px; padding:10px 13px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
}
.dl-n{font-family:'Space Grotesk',monospace; font-size:24px; font-weight:700; color:var(--green); min-width:34px; text-align:center; line-height:1}
.dl-t{display:flex; flex-direction:column; min-width:0}
.dl-t b{font-size:13px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dl-t span{font-size:11.5px; color:var(--muted-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dl.soon{border-color:rgba(232,194,46,.4)} .dl.soon .dl-n{color:var(--amber)}
.dl.past{opacity:.55} .dl.past .dl-n{color:var(--muted-2)}

/* message preview */
.msgbody{
  white-space:pre-wrap; font-family:'Manrope',sans-serif; font-size:13.5px; line-height:1.55;
  background:rgba(74,157,240,.06); border:1px solid rgba(74,157,240,.25); border-radius:var(--r-sm);
  padding:14px 16px; margin:0 0 4px; color:var(--ink);
}
.card .meta .enr{color:var(--amber); font-size:11.5px}