/* ==================================================================
   Tokens

   EOS One's visual language, measured from its live app (DESIGN.md),
   with WeAssist blue in place of EOS One's orange. Light only, as EOS
   One is: a dark palette would have to be measured, not guessed, and
   two palettes drift apart the moment one of them stops being looked at.
   ================================================================== */
:root{
  color-scheme:light;

  /* Brand. White on --brand is about 2:1, so anything filled with it
     takes --brand-ink as its label. */
  --brand:#37C6F4;
  --brand-hover:#1FB8EC;
  --brand-ink:oklch(0.2 0.06 260);
  --brand-tint:rgba(55,198,244,.16);

  /* Structure */
  --navy:oklch(0.4329 0.1327 260.08);
  --navy-deep:oklch(0.28 0.11 260.08);
  --blue:#0878AF;
  --link:#0D7BB4;
  --nav-active:oklch(0.97 0.022 238.52);
  --topbar:linear-gradient(135deg,oklch(0.28 0.11 260.08),oklch(0.36 0.13 260.08) 45%,
                           oklch(0.6806 0.145 238.52) 87%,oklch(0.8063 0.1394 187.8));

  /* Ground, ink and lines */
  --page:#F8F9FA;
  --surface:#FFFFFF;
  --surface-2:#F3F4F5;
  --ink:#444444;
  --ink-strong:oklch(0.13 0.05 260.08);
  --ink-table:#445777;
  --ink-2:#6B7280;
  --ink-3:#8A919A;
  --ink-side:oklch(0.2 0.012 260);
  --ink-icon:#707070;
  --ink-seg:#555555;
  --line:#DCDFE2;
  --line-2:#C4C8CC;
  --line-rail:#EEF0F2;
  --card-line:#D5D9DE;
  --zebra:rgba(10,118,173,.04);
  --zebra-solid:#F5FAFC;          /* --zebra over white, for cells that must be opaque */

  /* Status. -soft is the colour at about 11% over white. --warn-ink is
     --warn darkened for text on --warn-soft, where #B7791F reads at ~3:1. */
  --good:#1E8E5A;  --good-soft:#E6F3ED;
  --bad:#C42847;   --bad-soft:#F9E7EB;
  --warn:#B7791F;  --warn-soft:#F7F0E6;  --warn-ink:#8A5A12;

  /* On dark grounds: the top bar, the clock, navy and status fills. */
  --on-dark:#FFFFFF;
  --on-dark-2:rgba(255,255,255,.75);
  --on-dark-3:rgba(255,255,255,.55);
  --on-dark-line:rgba(255,255,255,.25);
  --on-dark-fill:rgba(255,255,255,.12);
  --on-dark-fill-2:rgba(255,255,255,.2);

  /* Elevation */
  --shadow-card:2px 2px 4px rgba(0,0,0,.1);
  --shadow-pop:0 16px 40px -12px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.08);
  --scrim:rgba(2,20,50,.45);

  /* Shape and size */
  --radius:7px;                   /* cards, panes, widgets */
  --radius-ctl:8px;               /* buttons, inputs, nav items */
  --top-h:64px;                   /* the top bar; sticky offsets below read it */

  /* Type */
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:var(--sans);
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Avatars: a light fill and dark initials per person, as EOS One's are.
     avatarEl() picks one of the eight by hashing the person's id. */
  --av-1-bg:#DDEBFB; --av-1-fg:#204D98;
  --av-2-bg:#CFEFFC; --av-2-fg:#0B5E86;
  --av-3-bg:#D5F1EE; --av-3-fg:#0E6259;
  --av-4-bg:#DFF1E6; --av-4-fg:#1B6B45;
  --av-5-bg:#F6EBD6; --av-5-fg:#7A5212;
  --av-6-bg:#F8E0E5; --av-6-fg:#922138;
  --av-7-bg:#E8E1F6; --av-7-fg:#4F3A8C;
  --av-8-bg:#E3E7EE; --av-8-fg:#3A4A63;

  /* The names the rest of this sheet was written against. They resolve
     to the palette above so nothing downstream had to be renamed. */
  --ground:var(--page);
  --accent:var(--navy);
  --accent-ink:var(--on-dark);
  --accent-soft:var(--nav-active);
  --live:var(--brand);
  --live-soft:var(--brand-tint);
  --clock-bg:var(--navy-deep);
  --clock-fg:var(--on-dark);
  --shadow:var(--shadow-card);
}

/* ==================================================================
   Base
   ================================================================== */
*{box-sizing:border-box}
html{background:var(--page)}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.sp{margin-left:auto}
.eyebrow{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
/* Status as a text colour, for a value that is good, bad or unset. */
.tone-good{color:var(--good)}
.tone-bad{color:var(--bad)}
.tone-warn{color:var(--warn-ink)}
.tone-none{color:var(--ink-3)}
/* A rule above a block that follows other content in the same box. */
.sep-top{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

/* ==================================================================
   Shell

   One grid: the top bar runs the full width and the sidebar and page sit
   under it, as in EOS One. .mainwrap is display:contents, so the header
   and <main> inside it join this grid without the markup changing.
   ================================================================== */
.app{
  min-height:100%;display:grid;
  grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;
  grid-template-areas:"top top" "side main";
}
.mainwrap{display:contents}

/* Left-aligned rather than centred: with a sidebar, auto margins open a
   band of dead space between the nav and the content that reads as a
   layout fault. */
main{grid-area:main;max-width:1320px;width:100%;margin:0;padding:24px 24px 72px;min-width:0}

/* ---------- top bar ---------- */
.top{
  grid-area:top;position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background-color:var(--navy-deep);background-image:var(--topbar);color:var(--on-dark);
}
.top-in{height:var(--top-h);padding:0 20px;display:flex;align-items:center;gap:10px;min-width:0}

.top-brand{
  display:flex;align-items:center;gap:12px;flex:none;
  background:none;border:0;padding:4px 6px 4px 0;border-radius:var(--radius-ctl);color:inherit;
}
button.top-brand{cursor:pointer}
.top-logo{height:26px;width:auto;display:block}
.top-mark{
  font-size:13px;font-weight:700;letter-spacing:.06em;line-height:20px;color:var(--on-dark);
  padding-left:12px;border-left:1px solid var(--on-dark-line);
}

/* Quick add and Search: white 13/500 text on the bar, no box at rest. */
.tbtn{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 10px;flex:none;
  background:none;border:0;border-radius:var(--radius-ctl);cursor:pointer;white-space:nowrap;
  color:var(--on-dark);font-size:13px;font-weight:500;
}
.tbtn:hover{background:var(--on-dark-fill)}
.tbtn svg{width:16px;height:16px;flex:none}
.sbtn kbd{
  font-family:var(--sans);font-size:11px;font-weight:600;line-height:1;
  padding:4px 7px;border-radius:999px;background:var(--nav-active);color:var(--navy);
}
.tdiv{width:1px;height:24px;background:var(--on-dark-line);flex:none;margin:0 4px}

.whoami{flex:none;background:none;border:0;padding:0;margin-left:6px;border-radius:50%;cursor:pointer;display:block}
.whoami:focus-visible{outline-color:var(--on-dark)}
.avatar.av-me{width:32px;height:32px;font-size:12px;background:var(--av-2-bg);color:var(--navy)}

.pagetitle{
  font-size:14px;font-weight:600;color:var(--on-dark);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.livebadge{
  display:inline-flex;align-items:center;gap:7px;flex:none;height:26px;padding:0 11px;
  border-radius:999px;border:1px solid var(--on-dark-line);background:var(--on-dark-fill);
  color:var(--on-dark);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;cursor:pointer;
}
.livebadge:hover{background:var(--on-dark-fill-2)}
.livedot{width:7px;height:7px;border-radius:50%;background:var(--live);flex:none;animation:pulse 1.9s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.livedot{animation:none}}

.focusbtn{
  flex:none;height:30px;padding:0 12px;border:1px solid var(--on-dark-line);border-radius:var(--radius-ctl);
  background:none;color:var(--on-dark);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;
}
.focusbtn:hover,.focusbtn[aria-pressed="true"]{background:var(--on-dark-fill)}

.burger{
  display:none;place-items:center;width:36px;height:36px;flex:none;padding:0;
  background:none;border:0;border-radius:var(--radius-ctl);color:var(--on-dark);cursor:pointer;
}
.burger:hover{background:var(--on-dark-fill)}
.burger svg{width:20px;height:20px;display:block}

/* Who is in the room, beside the live badge in focus mode. The ring is
   the bar's own colour so the faces stay separate. */
.top .pres-stack>.avatar{box-shadow:0 0 0 2px var(--navy-deep)}
.top .pres-more{color:var(--on-dark-2)}

/* ---------- sidebar ---------- */
/* One column on white. Folded (the chevron at its foot, or focus mode
   during a live meeting) it narrows to icons in place: labels, section
   headings and the team switcher hide, and counts become corner badges. */
.side{
  grid-area:side;align-self:start;z-index:30;display:flex;
  position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--top-h));
  height:calc(100dvh - var(--top-h) - env(safe-area-inset-top,0px));
  background:var(--surface);border-right:1px solid var(--line);
}

.side-menu{
  width:228px;flex:none;display:flex;flex-direction:column;
  padding:12px 10px calc(12px + env(safe-area-inset-bottom,0px));overflow-y:auto;
}
.navsec{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);padding:16px 10px 6px;
}
.navlist{display:flex;flex-direction:column;gap:2px}
.navitem{
  display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 10px;text-align:left;
  background:none;border:0;border-radius:var(--radius-ctl);cursor:pointer;
  color:var(--ink-side);font-size:13px;font-weight:500;
}
.navitem:hover{background:var(--surface-2)}
.navitem[aria-current="true"]{background:var(--nav-active);color:var(--navy)}
.navitem svg{width:16px;height:16px;flex:none;color:var(--ink-icon)}
.navitem[aria-current="true"] svg{color:var(--navy)}
.navitem .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Count badge: round, brand tint. */
.cnt{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;flex:none;
  border-radius:999px;background:var(--brand-tint);color:var(--navy);
  font-family:var(--sans);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1;
}

.side-foot{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:6px}
.side-foot>.navsec{padding:0 2px 2px}
.teamname{
  min-height:36px;display:flex;align-items:center;padding:0 10px;border-radius:var(--radius-ctl);
  background:var(--surface-2);font-size:13px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.scrim{position:fixed;inset:0;background:var(--scrim);z-index:55}

.side-collapse{margin-top:8px;color:var(--ink-3)}
.side-collapse svg{color:var(--ink-3)}

@media (min-width:901px){
  .app[data-collapsed] .side-menu{width:64px;padding-left:10px;padding-right:10px}
  .app[data-collapsed] .navitem{justify-content:center;padding:0;position:relative}
  .app[data-collapsed] .navitem .lbl,
  .app[data-collapsed] .navsec,
  .app[data-collapsed] .side-foot{display:none}
  .app[data-collapsed] .navitem .cnt{
    position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;font-size:10px;
  }
  .app[data-collapsed] .navlist+.navlist,
  .app[data-collapsed] .navlist{padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--line)}
  .app[data-collapsed] .side-collapse{margin-top:auto}
}

/* ---------- focus mode ---------- */
/* Flagged on #app with data-focus while a meeting is live and on screen.
   The sidebar folds to icons (above) and the bar drops to 48px of
   solid navy with its actions as icons. Under 900px the sidebar is an
   off-canvas drawer anyway and keeps its labels. */
.app[data-focus]{--top-h:48px}
.app[data-focus] .top{background-image:none}
.app[data-focus] .top-in{gap:8px}
.app[data-focus] .top-logo{height:22px}
.app[data-focus] .tbtn{padding:0 8px}
.app[data-focus] main{max-width:1560px;padding-top:14px}

/* ---------- drawer and phone ---------- */
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "main"}
  .side{
    position:fixed;left:0;top:0;bottom:0;height:auto;z-index:60;
    padding-top:env(safe-area-inset-top,0px);
    transform:translateX(-100%);transition:transform .18s ease;
  }
  .app.navopen .side{transform:translateX(0);box-shadow:var(--shadow-pop)}
  .side-collapse{display:none}
  .burger{display:grid}
  main{padding-left:16px;padding-right:16px}
  .top-in{padding-left:12px;padding-right:12px}
}
@media (prefers-reduced-motion:reduce){ .side{transition:none} }

/* On a phone the bar has to stay one row: drop the labels and dividers,
   keep the targets. */
@media (max-width:620px){
  .app{--top-h:56px}
  .top-in{gap:4px;padding-left:8px;padding-right:10px}
  .top-brand{gap:8px}
  .top-logo{height:20px}
  .top-mark{font-size:12px;padding-left:8px}
  .tdiv{display:none}
  .tbtn>span,.sbtn kbd{display:none}
  .tbtn{padding:0 9px}
  .livebadge{padding:0 9px}
  .livebadge-l10{display:none}
  .whoami{margin-left:2px}
  .avatar.av-me{width:30px;height:30px}
  /* In focus the clock tile already names the section, and a phone has
     no room for it twice. The live badge and the room count need the
     wordmark's width too. */
  .app[data-focus] .pagetitle,
  .app[data-focus] .top-mark{display:none}
}

/* ==================================================================
   Components
   ================================================================== */

/* ---------- cards, panes, widgets ---------- */
/* White, 1px card line, 7px radius, EOS One's short shadow. The frame has
   no padding of its own; the header and body pad. */
.card,.pane,.widget{
  background:var(--surface);border:1px solid var(--card-line);border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
.widget{overflow:hidden}
/* A card nested in a pane is a list frame, not a second layer. */
.pane-bd .card,.widget-bd .card,.modal .card{box-shadow:none;border-color:var(--line)}

.pane-hd{
  padding:16px 20px 14px;border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;gap:10px 12px;flex-wrap:wrap;
}
/* The title block keeps a readable width; the actions wrap under it first. */
.pane-hd>.grow{flex:1 1 240px}
.pane-hd h2{font-size:18px;font-weight:700;line-height:1.3;text-transform:uppercase;color:var(--ink)}
/* The pane that is the page: its title is the page title. */
.pane-hd.is-page h2{font-size:24px;line-height:1.25}
.pane-hd .eyebrow+h2{margin-top:2px}
.pane-hd .sub{font-size:12px;color:var(--ink-2);margin:4px 0 0;max-width:66ch;line-height:1.5}
.pane-bd{padding:16px 20px}

.wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;align-items:start}
.wgrid .span2{grid-column:1/-1}
.widget-hd{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);min-height:64px}
/* The optional 40px icon badge: nav-active circle, navy icon. */
.wbadge{
  width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--nav-active);color:var(--navy);
}
.wbadge svg{width:18px;height:18px}
.widget-hd h3{
  flex:1;min-width:0;font-size:18px;font-weight:700;line-height:1.25;
  text-transform:uppercase;color:var(--ink);
}
.widget-hd .wcount{font-weight:700;white-space:nowrap}
.widget-bd{padding:14px 16px}
.widget-bd.flush{padding:0}
.widget-bd+.widget-bd{border-top:1px solid var(--line)}
.widget-act{display:flex;align-items:center;gap:8px;flex:none}

/* Outlined filter pill ("Mine"). Pressed, it fills and shows its ×. */
.filterchip{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;flex:none;
  border:1px solid var(--navy);border-radius:999px;background:var(--surface);
  color:var(--navy);font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer;
}
.filterchip:hover{background:var(--nav-active)}
.filterchip[aria-pressed="true"]{background:var(--nav-active)}
.filterchip svg{width:12px;height:12px}

/* ---------- buttons ---------- */
/* Base .btn is the outline button: navy line and label on white. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:36px;padding:0 14px;border:1px solid var(--navy);border-radius:var(--radius-ctl);
  background:var(--surface);color:var(--navy);font-size:13px;font-weight:500;line-height:1.2;
  white-space:nowrap;cursor:pointer;transition:background-color .12s,border-color .12s,color .12s;
}
.btn:hover:not([disabled]){background:var(--nav-active)}
.btn svg{width:16px;height:16px;flex:none}
/* Primary: the brand fill with the navy label. Never a white label: white
   on #37C6F4 is about 2:1. .live is the same button, kept for its name. */
.btn.primary,.btn.live{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.primary:hover:not([disabled]),.btn.live:hover:not([disabled]){background:var(--brand-hover);border-color:var(--brand-hover)}
/* Secondary: solid navy, white label. */
.btn.secondary{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.btn.secondary:hover:not([disabled]){background:var(--navy-deep);border-color:var(--navy-deep)}
.btn.ghost{background:none;border-color:transparent;color:var(--navy)}
.btn.ghost:hover:not([disabled]){background:var(--nav-active)}
/* Destructive: red text at rest, a red fill only while a two-click
   confirm is armed ("Really delete?"). */
.btn.danger,.btn.ghost.danger{background:none;border-color:transparent;color:var(--bad)}
.btn.danger:hover:not([disabled]){background:var(--bad-soft)}
.btn.danger.armed,.btn.danger.armed:hover{background:var(--bad);border-color:var(--bad);color:var(--on-dark)}
.btn.sm{min-height:28px;padding:0 10px}
.btn.big{min-height:40px;padding:0 18px;font-size:14px}
/* Round icon button: outlined + in a header, ghost for ⋮. */
.btn.round{width:32px;min-height:32px;height:32px;padding:0;border-radius:50%}
.btn.round.ghost{color:var(--ink-icon)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- form fields ---------- */
input[type=text],input[type=number],input[type=date],input[type=time],input[type=email],
input[type=search],input[type=password],select,textarea{
  width:100%;min-height:36px;padding:0 10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-ctl);
  font-size:14px;color:var(--ink);
}
textarea{padding:8px 10px;resize:vertical;min-height:70px;line-height:1.55}
select{
  appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),
                   linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
::placeholder{color:var(--ink-3);opacity:1}
:is(input,select,textarea):focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--brand-tint)}
input:disabled,select:disabled,textarea:disabled{background-color:var(--surface-2);color:var(--ink-3)}
label.fld{display:block;flex:1;min-width:120px}
label.fld>span{display:block;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:6px}
.teamswitch{font-size:13px;font-weight:600}

/* ---------- chips, tags, dots ---------- */
/* Tags are small capitals in a pill. Status tags take the soft ground and
   the solid colour; .accent is the brand tag. */
.chip{
  display:inline-flex;align-items:center;gap:5px;min-height:20px;padding:3px 8px;
  border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;line-height:1.2;
  text-transform:uppercase;white-space:nowrap;
}
.chip.good{background:var(--good-soft);color:var(--good)}
.chip.warn{background:var(--warn-soft);color:var(--warn-ink)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.neutral{background:var(--surface-2);color:var(--ink-2)}
.chip.accent{background:var(--brand-tint);color:var(--navy)}
.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.dot.good{background:var(--good)}.dot.warn{background:var(--warn)}
.dot.bad{background:var(--bad)}.dot.none{background:var(--line-2)}
.bar{height:4px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;background:var(--navy);border-radius:3px}
.bar i.over{background:var(--bad)}

/* ---------- segmented control ---------- */
.segctl{
  display:inline-flex;align-items:center;gap:2px;padding:4px;max-width:100%;overflow-x:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-ctl);
  align-self:flex-start;
}
.segctl>button{
  flex:none;height:28px;padding:0 12px;border:0;border-radius:4px;background:none;cursor:pointer;
  color:var(--ink-seg);font-size:13px;font-weight:600;white-space:nowrap;
}
.segctl>button:hover{background:var(--surface-2)}
.segctl>button[aria-pressed="true"]{background:var(--blue);color:var(--on-dark);font-weight:700}

/* ---------- accordion bar ---------- */
/* "Today (1)": the open or chosen bar in blue, the rest on grey. */
.accbar{
  display:flex;align-items:center;gap:11px;width:100%;min-height:40px;padding:8px 12px;text-align:left;
  border:0;border-radius:var(--radius);background:var(--surface-2);color:var(--ink);cursor:pointer;
}
.accbar:hover{background:var(--line)}
.accbar[aria-current="true"],.accbar[aria-expanded="true"]{background:var(--blue);color:var(--on-dark);font-weight:700}
.accbar[aria-current="true"] .dim,.accbar[aria-current="true"] .muted,
.accbar[aria-expanded="true"] .dim{color:var(--on-dark-2)}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14px;color:var(--ink-table)}
th{
  text-align:left;background:var(--surface-2);padding:8px;border-bottom:1px solid var(--line-2);
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.36px;color:var(--ink-table);
  white-space:nowrap;
}
td{padding:16px 16px 16px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
/* Zebra at zero specificity, so any row state (.off) or column (.cur)
   paints over it without a fight. */
:where(tbody tr:nth-child(even))>td{background:var(--zebra)}
tr.off td{background:var(--bad-soft)}
td.n,th.n{text-align:right}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Dense table inside widgets: the first column lines up with the header. */
.dtable th:first-child,.dtable td:first-child{padding-left:16px}
.dtable tbody tr:hover>td{background:var(--nav-active)}
.dtable .who{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.dtable .who span{font-size:13px;color:var(--ink-table);font-weight:500}
.tbl-more{padding:10px 16px;border-top:1px solid var(--line)}

/* A list of records laid out as table rows: one frame, a line between
   rows, zebra on the even ones. */
.acc-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-ctl);overflow:hidden}
.acc-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 12px;border-top:1px solid var(--line);color:var(--ink-table)}
.acc-row:first-child{border-top:0}
.acc-row:nth-child(even){background:var(--zebra)}
.acc-email{font-size:13px;font-weight:600;word-break:break-all;min-width:160px}
.acc-row>select{width:auto;min-width:160px}
.acc-row>select.acc-role{min-width:110px}

/* ---------- avatar ---------- */
.avatar{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:0;line-height:1;
  background:var(--av-1-bg);color:var(--av-1-fg);
}
.avatar[data-av="2"]{background:var(--av-2-bg);color:var(--av-2-fg)}
.avatar[data-av="3"]{background:var(--av-3-bg);color:var(--av-3-fg)}
.avatar[data-av="4"]{background:var(--av-4-bg);color:var(--av-4-fg)}
.avatar[data-av="5"]{background:var(--av-5-bg);color:var(--av-5-fg)}
.avatar[data-av="6"]{background:var(--av-6-bg);color:var(--av-6-fg)}
.avatar[data-av="7"]{background:var(--av-7-bg);color:var(--av-7-fg)}
.avatar[data-av="8"]{background:var(--av-8-bg);color:var(--av-8-fg)}

/* ---------- stat tiles ---------- */
.stat-strip{display:flex;gap:12px;flex-wrap:wrap}
.stat{
  border:1px solid var(--card-line);border-radius:var(--radius);padding:10px 14px;
  background:var(--surface);min-width:112px;flex:1;
}
.stat .v{font-family:var(--mono);font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.15;color:var(--ink-strong)}
.stat .k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.36px;color:var(--ink-table);margin-top:3px}
.stat.good .v{color:var(--good)}
.stat.bad .v{color:var(--bad)}

/* ---------- empty state ---------- */
/* A short sentence in --ink-2 and, where it helps, a solid navy button.
   Standalone it is a card; inside a pane, widget or modal just the words. */
.empty{
  background:var(--surface);border:1px solid var(--card-line);border-radius:var(--radius);
  box-shadow:var(--shadow-card);padding:32px 24px;text-align:center;color:var(--ink-2);
}
.empty h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:6px}
.empty p{margin:0 auto 16px;max-width:52ch;font-size:13px}
.empty p:last-child{margin-bottom:0}
.pane-bd .empty,.widget-bd .empty,.modal .empty{border:0;box-shadow:none;background:none}
.widget-bd .empty{padding:16px 6px}
.widget-bd .empty h3{font-size:14px}

/* ---------- banner ---------- */
.banner{
  display:flex;gap:11px;align-items:flex-start;padding:12px 16px;border-radius:var(--radius-ctl);
  background:var(--warn-soft);color:var(--ink);border-left:3px solid var(--warn);
  font-size:13px;font-weight:500;line-height:1.5;
}
.banner.info{background:var(--nav-active);color:var(--navy);border-left-color:var(--blue)}
.banner b{font-weight:700}
.banner.view-only{margin-bottom:16px}

/* ---------- modal ---------- */
.overlay{
  position:fixed;inset:0;z-index:100;background:var(--scrim);
  display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto;
}
.modal{
  background:var(--surface);border:1px solid var(--card-line);border-radius:var(--radius-ctl);
  box-shadow:var(--shadow-pop);width:100%;max-width:520px;margin:auto;
}
.modal-hd{padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.modal-hd h3{font-size:18px;font-weight:700;text-transform:uppercase;color:var(--ink)}
.modal-bd{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.modal-ft{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.acct-rows{display:flex;flex-direction:column;gap:7px;padding-top:12px;border-top:1px solid var(--line)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:200;
  background:var(--navy-deep);color:var(--on-dark);padding:10px 16px;border-radius:var(--radius-ctl);
  font-size:13px;font-weight:500;box-shadow:var(--shadow-pop);max-width:calc(100vw - 32px);
}

/* ---------- command palette ---------- */
.palette{
  position:fixed;inset:0;z-index:150;background:var(--scrim);
  display:flex;align-items:flex-start;justify-content:center;padding:11vh 16px 16px;
}
.pal{
  width:100%;max-width:560px;background:var(--surface);border:1px solid var(--card-line);
  border-radius:var(--radius-ctl);box-shadow:var(--shadow-pop);overflow:hidden;
  display:flex;flex-direction:column;max-height:68vh;
}
.pal input{
  min-height:52px;padding:0 16px;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:none;font-size:15px;
}
.pal input:focus{outline:none;box-shadow:none;border-color:var(--line)}
.pal-results{overflow-y:auto;padding:6px}
.pal-group{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.36px;
  color:var(--ink-3);padding:10px 10px 4px;
}
.pal-hit{
  display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:0 10px;text-align:left;
  background:none;border:0;border-radius:var(--radius-ctl);cursor:pointer;color:var(--ink);
}
.pal-hit svg{flex:none;color:var(--ink-icon)}
.pal-hit:hover{background:var(--surface-2)}
.pal-hit[aria-selected="true"]{background:var(--nav-active);color:var(--navy)}
.pal-hit[aria-selected="true"] svg{color:var(--navy)}
.pal-hit .t{flex:1;min-width:0;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-hit .m{font-size:12px;color:var(--ink-2);white-space:nowrap}
.pal-foot{
  border-top:1px solid var(--line);background:var(--surface-2);padding:8px 14px;
  font-size:12px;color:var(--ink-2);display:flex;gap:14px;flex-wrap:wrap;
}
.pal-foot kbd{
  font-family:var(--mono);font-size:11px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:4px;padding:0 5px;
}

/* ==================================================================
   Screens
   ================================================================== */
/* ---------- meeting ---------- */
.l10{display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px;align-items:start}
.rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--top-h) + 20px);display:flex;flex-direction:column;gap:14px}
.clockbox{
  background:var(--clock-bg);color:var(--clock-fg);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow);border:1px solid transparent;
}
.clockbox .eyebrow{color:var(--on-dark-3)}
.clock{
  font-family:var(--mono);font-size:38px;font-weight:500;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.05;margin:2px 0 1px;
}
.clock-sub{font-size:11.5px;color:var(--on-dark-2);font-family:var(--mono)}
.clock-ctl{display:flex;gap:6px;margin-top:12px}
.clock-ctl button{
  flex:1;background:var(--on-dark-fill);border:1px solid var(--on-dark-line);
  color:var(--on-dark);border-radius:var(--radius-ctl);padding:7px 4px;font-weight:500;font-size:13px;cursor:pointer;
}
.clock-ctl button:hover{background:var(--on-dark-fill-2)}
.clock-ctl button.go{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
.clock-ctl button.go:hover{background:var(--brand-hover)}

.segs{display:flex;flex-direction:column;gap:2px}
.seg{
  position:relative;display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;border-radius:8px;padding:9px 11px;cursor:pointer;color:var(--ink-2);
  overflow:hidden;
}
.seg:hover{background:var(--surface-2)}
.seg .fill{position:absolute;inset:0 auto 0 0;background:var(--accent-soft);opacity:.85;z-index:0}
.seg .fill.over{background:var(--bad-soft)}
.seg .fill.near{background:var(--warn-soft)}
.seg>*{position:relative;z-index:1}
.seg .idx{font-family:var(--mono);font-size:11px;color:var(--ink-3);width:12px;flex:none}
.seg .nm{flex:1;font-weight:600;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg .tm{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.seg[aria-current="true"]{color:var(--ink)}
.seg[aria-current="true"] .nm{font-weight:700}
.seg[aria-current="true"]::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  background:var(--live);border-radius:0 3px 3px 0;z-index:2;
}
.seg.done .nm{color:var(--ink-2)}
.seg.done .tm.over{color:var(--bad)}

.stage{display:flex;flex-direction:column;gap:14px;min-width:0}
.stage-hd{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.stage-hd h2{font-size:23px;font-weight:700;letter-spacing:-.025em}
.stage-hd .why{font-size:13px;color:var(--ink-2);margin-top:4px;max-width:66ch}
.budget{
  font-family:var(--mono);font-size:12px;color:var(--ink-3);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap;
}
.navrow{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding-top:4px}

.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.pcheck{
  display:flex;align-items:center;gap:9px;border:1px solid var(--line-2);
  border-radius:8px;padding:8px 11px;cursor:pointer;background:var(--surface);
}
.pcheck[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.pcheck .nm{font-weight:600;font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcheck .st{font-size:10.5px;color:var(--ink-3);display:block;font-weight:500}

.spark{display:block;width:104px;height:26px}

.issue-list{display:flex;flex-direction:column;gap:6px}
.issue{
  display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);cursor:pointer;text-align:left;width:100%;
}
.issue:hover{border-color:var(--line-2);background:var(--surface-2)}
.issue[aria-selected="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.issue .rank{
  font-family:var(--mono);font-weight:600;font-size:12px;width:22px;height:22px;flex:none;
  display:grid;place-items:center;border-radius:6px;background:var(--surface-2);color:var(--ink-3);
}
.issue .rank.top{background:var(--accent);color:var(--accent-ink)}
.issue .ttl{font-weight:600;font-size:13.5px;line-height:1.4}
.issue .meta{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.issue.solved{opacity:.55}
.issue.solved .ttl{text-decoration:line-through}

.ids{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:start}

.rock{
  display:flex;align-items:flex-start;gap:11px;padding:11px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);
}
.rock.off{border-left:3px solid var(--bad)}
.rock.done{border-left:3px solid var(--good)}
.rock .ttl{font-weight:600;font-size:13.5px}

.todo{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line)}
.todo:last-child{border-bottom:0}
.todo.done .t{text-decoration:line-through;color:var(--ink-3)}
.todo .t{font-weight:500;font-size:13.5px;line-height:1.45}
.cbx{
  width:18px;height:18px;flex:none;margin-top:1px;border:1.5px solid var(--line-2);border-radius:5px;
  background:var(--surface);cursor:pointer;display:grid;place-items:center;padding:0;color:transparent;
  font-size:12px;line-height:1;
}
.cbx[aria-pressed="true"]{background:var(--good);border-color:var(--good);color:var(--on-dark)}
.overdue{color:var(--bad);font-weight:600}

.rate{display:flex;gap:3px;flex-wrap:wrap}
.rate button{
  width:29px;height:29px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:6px;font-family:var(--mono);font-size:12px;font-weight:500;cursor:pointer;padding:0;
}
.rate button:hover{background:var(--surface-2)}
.rate button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}

.hl{border-left:3px solid var(--line-2);padding:4px 0 4px 11px;font-size:13.5px}
.hl.customer{border-color:var(--accent)}
.hl.employee{border-color:var(--warn)}
/* A solved issue in a list: the green rule says it is closed. */
.solved-item{border-left:3px solid var(--good);padding-left:11px}

.mtg{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:11px 13px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  width:100%;text-align:left;cursor:pointer;
}
.mtg:hover{border-color:var(--line-2);background:var(--surface-2)}
.mtg .d{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--link)}
.mtg .r{font-family:var(--mono);font-size:19px;font-weight:500;letter-spacing:-.02em}

.win{
  display:flex;gap:11px;align-items:flex-start;padding:11px 13px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);
}
.win.read{background:var(--surface-2);border-color:var(--line)}
.win.read .grow{opacity:.62}
.win .lbl{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-3);margin-top:7px;
}
.win p{margin:1px 0 0;font-size:13.5px;line-height:1.5}

.readiness{display:flex;gap:6px;flex-wrap:wrap}
.rchip{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:999px;padding:3px 11px 3px 3px;font-size:12px;font-weight:600;color:var(--ink-3);
}
.rchip.in{border-color:var(--good);color:var(--good);background:var(--good-soft)}

/* Upcoming dates in the lobby are accordion bars (.accbar): the date being
   prepared for is the blue one. */
.occ .dt{font-family:var(--mono);font-size:12.5px;font-weight:500;min-width:58px;flex:none}
.occ .tm2{font-family:var(--mono);font-size:12px;color:var(--ink-2);white-space:nowrap}
.occ[aria-current="true"] .tm2{color:var(--on-dark-2)}

.legend{font-size:11.5px;color:var(--ink-3);display:flex;gap:14px;flex-wrap:wrap;align-items:center}

@media (max-width:980px){
  .l10{grid-template-columns:1fr}
  .rail{position:static;flex-direction:column}
  .segs{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .seg{flex:none;width:auto;min-width:126px;border:1px solid var(--line);border-radius:8px}
  .ids{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .stage-hd h2{font-size:20px}
  .clock{font-size:33px}
}

/* ---------- sign in ---------- */
.gbtn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink);font-weight:600;
}
.orbar{
  display:flex;align-items:center;gap:12px;margin:16px 0;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.orbar::before,.orbar::after{content:"";flex:1;height:1px;background:var(--line)}

/* ==== meeting focus ==== */
/* The clock, the driver and the long-segment strip. The shell side of
   focus mode (folded sidebar, compact bar) lives with the shell above. */
/* ---- clock: time pressure ---- */
.mclock-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.clock[data-lvl="warn"]{color:var(--warn)}
.clock[data-lvl="bad"]{color:var(--bad)}
.clock-pulse{animation:mf-pulse .45s ease-out;transform-origin:left center}
@keyframes mf-pulse{0%,100%{transform:scale(1)}35%{transform:scale(1.08)}}
.mclock-over{
  font-size:12px;font-weight:600;color:var(--bad);background:var(--surface);
  border-radius:999px;padding:1px 9px;white-space:nowrap;
}
/* The whole tile changes, not just the digits: the navy tile stops being
   navy, which reads from across a room. */
.clockbox{transition:background-color .3s,border-color .3s}
.clockbox[data-lvl="warn"]{background:var(--warn-soft);border-color:var(--warn);color:var(--ink)}
.clockbox[data-lvl="bad"]{background:var(--bad-soft);border-color:var(--bad);color:var(--ink)}
.clockbox[data-lvl="warn"] .eyebrow,
.clockbox[data-lvl="bad"] .eyebrow{color:var(--ink-3)}
.clockbox[data-lvl="warn"] .clock-sub,
.clockbox[data-lvl="bad"] .clock-sub{color:var(--ink-2)}
.clockbox[data-lvl="warn"] .clock-ctl button:not(.go),
.clockbox[data-lvl="bad"] .clock-ctl button:not(.go){background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.clockbox[data-lvl="warn"] .clock-ctl button:not(.go):hover,
.clockbox[data-lvl="bad"] .clock-ctl button:not(.go):hover{background:var(--surface-2)}

/* ---- driver and followers ---- */
.mhint{margin-top:8px;font-size:11px;opacity:.62;white-space:nowrap;text-align:center}
.mfollow{margin-top:12px}
.mfollow>.clock-ctl{margin-top:7px}
.mfollow-who{font-size:12px;font-weight:600;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:none){ .mhint{display:none} }
.seg[disabled]{cursor:default}
.seg[disabled]:hover{background:none}

/* Under 980px the rail stacks above the stage and its segments run in a
   scrolling row. With a plain 1fr column the grid grew to the row's full
   width and pushed the whole page sideways on a phone; minmax(0,...) lets
   the row scroll inside the column as intended. */
@media (max-width:980px){ .l10{grid-template-columns:minmax(0,1fr)} }

/* ---- adaptive rail: the strip for long segments ---- */
.l10-strip{grid-template-columns:minmax(0,1fr);gap:12px}
.mstrip{
  display:grid;gap:8px 10px;align-items:stretch;
  grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"clock segs drive";
  background:var(--surface);border:1px solid var(--card-line);border-radius:var(--radius);
  padding:8px;box-shadow:var(--shadow);
}
.mstrip-clock{grid-area:clock;min-width:190px;padding:9px 14px;display:flex;flex-direction:column;justify-content:center;box-shadow:none}
.mstrip-segs{grid-area:segs;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px}
.mstrip-segs>.legend{padding:0 2px}
.mstrip-segs>.legend b{font-weight:600;color:var(--ink-2)}
.mchips{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;padding-bottom:1px}
.mchip{
  position:relative;flex:1 1 0;min-width:68px;display:flex;flex-direction:column;align-items:flex-start;
  background:var(--surface-2);border:1px solid transparent;border-radius:7px;padding:5px 8px 7px;
  text-align:left;cursor:pointer;color:var(--ink-2);overflow:hidden;
}
.mchip:hover{border-color:var(--line-2)}
.mchip[disabled]{cursor:default}
.mchip[disabled]:hover{border-color:transparent}
.mchip>*{position:relative;z-index:1}
.mchip .fill{position:absolute;left:0;bottom:0;height:3px;background:var(--accent);opacity:.6}
.mchip .fill.near{background:var(--warn)}
.mchip .fill.over{background:var(--bad)}
.mchip-nm{font-size:12px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mchip-tm{font-size:11.5px;color:var(--ink-3)}
.mchip[data-state="near"] .mchip-tm{color:var(--warn)}
.mchip[data-state="over"]{background:var(--bad-soft);color:var(--bad)}
.mchip[data-state="over"] .mchip-tm{color:var(--bad)}
.mchip[aria-current="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.mchip[aria-current="true"] .mchip-nm{font-weight:700}
.mchip[aria-current="true"][data-state="over"]{background:var(--bad-soft);border-color:var(--bad)}
.mdrive{grid-area:drive;min-width:180px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:2px}
.mdrive-ctl{display:flex;gap:6px}
.mdrive-ctl>button{flex:1}
.mdrive-run{min-width:74px}
.mdrive>.mhint{margin-top:0}

/* Crossfade the stage in when the segment changes, never on a repaint. */
.stage-enter{animation:mf-fade .15s ease-out}
@keyframes mf-fade{from{opacity:0}to{opacity:1}}
.stage-why{margin:0;font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The strip keeps the clock in view while the IDS pane scrolls, 10px under
   the top bar (--top-h: 64px, 48px in focus); the ground-coloured band above
   the strip hides the content passing through the gap between the two. */
@media (min-width:901px) and (min-height:640px){
  .mstrip{
    position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--top-h) + 10px);z-index:30;
    box-shadow:0 -10px 0 var(--ground),var(--shadow);
  }
}
/* One row needs about 1180px of stage. Below that the chips drop under the
   clock and the transport sits beside the running total. */
@media (max-width:1439px){
  .mstrip{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"clock segs" "clock drive"}
  .mdrive{flex-direction:row;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px 12px;min-width:0}
  .mdrive-ctl>button{flex:none}
}
@media (min-width:1280px){
  .app[data-focus] .mstrip{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"clock segs drive"}
  .app[data-focus] .mdrive{flex-direction:column;align-items:stretch;justify-content:center;min-width:180px}
  .app[data-focus] .mdrive-ctl>button{flex:1}
}
@media (max-width:620px){
  .mstrip{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"clock drive" "segs segs";padding:6px}
  .mstrip-clock{min-width:0;padding:8px 11px}
  .mdrive{flex-direction:column;align-items:stretch;justify-content:center;flex-wrap:nowrap}
  .mdrive-ctl>button{flex:1;padding-left:6px;padding-right:6px}
  .mchip{flex:none;min-width:92px}
  .focusbtn{display:none}
}
@media (prefers-reduced-motion:reduce){
  .clock-pulse,.stage-enter{animation:none}
  .clockbox{transition:none}
}

/* ==== ids workbench ==== */
/* IDS is 60 of the 90 minutes, so the workbench gets the width. The queue is
   a narrow index; the full title lives on hover and in the workbench. */
.ids{grid-template-columns:260px minmax(0,1fr);gap:14px}

.ids-q{overflow:hidden}
.ids-q-hd{display:flex;align-items:center;gap:8px;padding:12px 12px 4px}
.ids-q-hd h2{font-size:14px;font-weight:700;flex:1}
.ids-q-hint{margin:0;padding:0 12px 8px;font-size:11.5px;line-height:1.4;color:var(--ink-3)}
.ids-q-add{display:flex;gap:6px;padding:0 12px 10px;border-bottom:1px solid var(--line)}
.ids-q-add input[type=text]{padding:5px 8px;font-size:13px;min-width:0}
.ids-qlist{display:flex;flex-direction:column;gap:2px;padding:6px}
.ids-qi{
  display:flex;align-items:center;gap:9px;width:100%;min-width:0;padding:6px 7px;
  border:1px solid transparent;border-radius:7px;background:none;cursor:pointer;
  text-align:left;font-size:13px;color:var(--ink-2);
}
.ids-qi:hover{background:var(--surface-2);color:var(--ink)}
.ids-qi[aria-selected="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink);font-weight:600}
.ids-qi:focus-visible{outline-offset:1px;border-radius:7px}
.ids-rank{
  width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:5px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;
}
.ids-rank.p{background:var(--accent);color:var(--accent-ink)}
.ids-rank i{width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.ids-qt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ids-solved{border-top:1px solid var(--line)}
.ids-solved-hd{
  display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;background:none;border:0;
  cursor:pointer;text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-3);
}
.ids-solved-hd:hover{color:var(--ink)}
.ids-solved-n{margin-left:auto;letter-spacing:.02em}
.ids-caret{
  width:0;height:0;flex:none;border-left:5px solid currentColor;
  border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .12s;
}
.ids-solved-hd[aria-expanded="true"] .ids-caret{transform:rotate(90deg)}
.ids-sl{display:flex;flex-direction:column;gap:5px;padding:0 12px 12px}
.ids-si{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);min-width:0}
.ids-tick{color:var(--good);font-weight:700;flex:none;width:20px;text-align:center}
.ids-si-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:line-through}

/* ---- workbench ---- */
.ids-wb{container-type:inline-size;min-width:0}
.ids-wb-hd{display:flex;align-items:flex-start;gap:14px;padding:16px 20px 14px;border-bottom:1px solid var(--line)}
.ids-title{
  font-size:22px;line-height:1.25;font-weight:700;margin-top:3px;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
}
.ids-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px;font-size:12.5px;color:var(--ink-3)}
.ids-sep{color:var(--line-2)}
.ids-ontime{color:var(--ink-2);font-weight:500}
.ids-prio{display:flex;gap:4px;flex:none;padding-top:2px}
.ids-pbtn{min-width:30px}

/* I, D, S read as a progression: a connector runs between the badges and
   fills once the stage above it has content. */
.ids-stages{padding:18px 20px 4px}
.ids-stage{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;position:relative;padding-bottom:18px}
.ids-stage::before{
  content:"";position:absolute;left:13px;top:34px;bottom:6px;width:2px;border-radius:1px;background:var(--line);
}
.ids-stage:last-child::before{display:none}
.ids-stage.done::before{background:var(--accent)}
.ids-badge{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:0;
  border:1.5px solid var(--line-2);color:var(--ink-3);background:var(--surface);
  transition:background .15s,border-color .15s,color .15s;
}
.ids-stage.cur>.ids-badge{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.ids-stage.done>.ids-badge{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.ids-stage-bd{min-width:0}
.ids-stage-hd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-height:28px;padding-top:3px;margin-bottom:5px}
.ids-stage-hd h4{font-size:14.5px;font-weight:700}
.ids-stage-hd span{font-size:12.5px;color:var(--ink-3)}
.ids-stage textarea{min-height:0;max-height:60vh;resize:none;overflow-y:auto;font-size:14px;padding:8px 10px;display:block}

/* The to-do is what the meeting produces, so it sits inside Solve and never
   hides behind a toggle. */
.ids-out{grid-column:2;margin-top:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:10px 11px 11px}
.ids-out-hd{margin-bottom:7px}
/* Narrow: text and Add on one row, owner and due under it. Wide: one row. */
.ids-todo-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px;align-items:center}
.ids-todo-row #ids-todo{grid-column:1 / 3;grid-row:1}
.ids-todo-row .ids-todo-add{grid-column:3;grid-row:1}
.ids-todo-row #ids-todo-own{grid-column:1;grid-row:2}
.ids-todo-row #ids-todo-due{grid-column:2 / 4;grid-row:2}
@container (min-width:620px){
  .ids-todo-row{grid-template-columns:minmax(0,1fr) 150px 150px auto}
  .ids-todo-row #ids-todo,.ids-todo-row .ids-todo-add,
  .ids-todo-row #ids-todo-own,.ids-todo-row #ids-todo-due{grid-column:auto;grid-row:auto}
}
.ids-linked{display:flex;flex-direction:column;gap:5px}
.ids-linked:not(:empty){margin-top:9px}
.ids-lt{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);min-width:0}
.ids-lt-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ids-lt-m{flex:none;margin-left:auto;font-size:11.5px;color:var(--ink-3)}

.ids-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 20px 16px;border-top:1px solid var(--line)}
.ids-actions .ids-drop{margin-left:auto;border-color:transparent}
.ids-drop.armed{background:var(--bad-soft);border-color:var(--bad)}

.ids-clear{margin:6px 0}

/* Chip mode. Below 900px as specified, and also whenever the stage itself
   is too narrow for two columns (sidebar and rail both open at ~1000-1200px
   leave the workbench about 300px otherwise). The container is named so the
   rules inside the workbench measure the stage, not the nearer .ids-wb. */
.ids-cq{container:idsroom / inline-size}
@media (max-width:900px){
  .ids{grid-template-columns:minmax(0,1fr);gap:12px}
  .ids-q-hint{display:none}
  .ids-q-hd{padding-bottom:8px}
  .ids-q-add{border-bottom:0;padding-bottom:4px}
  .ids-qlist{flex-direction:row;overflow-x:auto;gap:6px;padding:6px 12px 12px;scroll-snap-type:x proximity;scrollbar-width:thin}
  .ids-qi{
    width:auto;flex:none;max-width:230px;scroll-snap-align:start;
    border-color:var(--line);border-radius:999px;padding:4px 6px 4px 4px;
  }
  .ids-rank{border-radius:50%}
  .ids-wb-hd{padding:14px 14px 12px;flex-wrap:wrap}
  .ids-title{font-size:19px}
  .ids-stages{padding:14px 14px 2px}
  .ids-stage{column-gap:10px}
  .ids-out{grid-column:1 / -1}
  .ids-actions{padding:12px 14px 14px}
}
@container idsroom (max-width:680px){
  .ids{grid-template-columns:minmax(0,1fr);gap:12px}
  .ids-q-hint{display:none}
  .ids-q-hd{padding-bottom:8px}
  .ids-q-add{border-bottom:0;padding-bottom:4px}
  .ids-qlist{flex-direction:row;overflow-x:auto;gap:6px;padding:6px 12px 12px;scroll-snap-type:x proximity;scrollbar-width:thin}
  .ids-qi{
    width:auto;flex:none;max-width:230px;scroll-snap-align:start;
    border-color:var(--line);border-radius:999px;padding:4px 6px 4px 4px;
  }
  .ids-rank{border-radius:50%}
  .ids-wb-hd{padding:14px 14px 12px;flex-wrap:wrap}
  .ids-title{font-size:19px}
  .ids-stages{padding:14px 14px 2px}
  .ids-stage{column-gap:10px}
  .ids-out{grid-column:1 / -1}
  .ids-actions{padding:12px 14px 14px}
}
@media (prefers-reduced-motion:reduce){ .ids-caret,.ids-badge{transition:none} }

/* ==== scorecard + first run ==== */

/* Scorecard table (.sc-tbl), used by the Scorecard page and the meeting pane.
   Separate borders, not collapsed: a collapsed border belongs to the table
   rather than the cell, so it scrolls out from under a sticky cell. */
.sc-tbl{border-collapse:separate;border-spacing:0}
/* Tighter than a plain table: every cell holds a 32px input. */
.sc-tbl td{white-space:nowrap;padding:6px 8px}
.sc-tbl th:first-child,.sc-tbl td:first-child{padding-left:12px}
.sc-tbl .sc-name{
  position:sticky;left:0;z-index:1;background:var(--surface);
  width:212px;min-width:212px;max-width:212px;
  /* the outer shadow covers the sub-pixel sliver a scrolled cell can show
     at the left edge when the pane sits at a fractional offset */
  box-shadow:inset -1px 0 0 var(--line),-3px 0 0 var(--surface);
}
.sc-tbl th.sc-name{background:var(--surface-2);box-shadow:inset -1px 0 0 var(--line),-3px 0 0 var(--surface-2)}
/* The pinned cell has to be opaque, so zebra rows use the solid mix. */
.sc-tbl :where(tbody tr:nth-child(even))>td.sc-name{background:var(--zebra-solid);box-shadow:inset -1px 0 0 var(--line),-3px 0 0 var(--zebra-solid)}
.sc-tbl tr.off td.sc-name{background:var(--bad-soft);box-shadow:inset -1px 0 0 var(--line),-3px 0 0 var(--bad-soft)}
.sc-nm{display:flex;align-items:center;gap:7px;min-width:0}
.sc-nm-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.sc-goal{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11px;
  color:var(--ink-3);padding-left:15px;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* This week: the column the room types into. */
.sc-tbl .cur{background:var(--accent-soft);background:color-mix(in srgb,var(--accent-soft) 55%,var(--surface))}
.sc-tbl th.cur{color:var(--ink);font-weight:800;padding-top:7px;border-radius:6px 6px 0 0}
.sc-tbl tr.off td.cur{background:var(--bad-soft);box-shadow:inset 2px 0 0 var(--accent-soft),inset -2px 0 0 var(--accent-soft)}
.sc-cur{display:flex;align-items:center;justify-content:flex-end;gap:6px}

/* Past weeks read as numbers; the box only shows when you reach for it. */
.sc-tbl .sc-in{
  width:80px;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
  min-height:32px;padding:0 7px;background:transparent;border-color:transparent;-moz-appearance:textfield;
}
.sc-tbl .sc-in::-webkit-inner-spin-button,
.sc-tbl .sc-in::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sc-tbl .sc-in:hover{border-color:var(--line-2);background:var(--surface)}
.sc-tbl .sc-in:focus{border-color:var(--blue);background:var(--surface)}
.sc-tbl td.cur .sc-in{border-color:var(--line-2);background:var(--surface);font-weight:600}
.sc-in.is-good,.sc-v.is-good{color:var(--good)}
.sc-in.is-bad,.sc-v.is-bad{color:var(--bad)}
.sc-v.is-none{color:var(--ink-3)}

.trend{display:inline-flex;width:12px;height:12px;flex:none;color:var(--ink-3)}
.trend svg{width:12px;height:12px;display:block}
.trend.is-good{color:var(--good)}
.trend.is-bad{color:var(--bad)}

/* Hollow: no reading yet, which is not the same as on track. */
.dot.hollow{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-3)}

@media (max-width:620px){
  .sc-tbl .sc-name{width:136px;min-width:136px;max-width:136px}
  .sc-tbl .sc-in{width:70px}
}

/* First-run setup panel on Home, above the widget grid. */
.setup{
  background:var(--surface);border:1px solid var(--card-line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;
}
.setup-hd{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.setup-hd h2{font-size:17px;font-weight:700;margin-top:3px}
.setup-meter{display:flex;gap:4px;flex:none}
.setup-meter i{width:22px;height:5px;border-radius:3px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.setup-meter i.on{background:var(--good);box-shadow:none}
.setup-list{list-style:none;margin:0;padding:0}
.setup-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line)}
.setup-row:first-child{border-top:0}
.setup-mark{
  width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--good);
}
.setup-mark svg{width:13px;height:13px}
.setup-mark.is-done{background:var(--good-soft);box-shadow:none}
.setup-t{font-weight:600;font-size:13.5px}
.setup-why{font-size:12.5px;color:var(--ink-2);margin-top:1px}
.setup-t.is-done{color:var(--ink-2)}
.setup-ok{font-size:12px;font-weight:600;color:var(--good);flex:none}
.setup-note{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:10px 14px;
  border:1px solid var(--card-line);border-radius:var(--radius);background:var(--surface);
  font-size:13px;color:var(--ink-2);
}
.setup-note b{color:var(--ink);font-weight:600}

/* Widget empty state for a team that has never had any of it. Left-aligned
   prose reads as an explanation; the terse centred line stays for "none
   open right now". */
.widget-bd .empty.teach{text-align:left;padding:4px 2px}
.widget-bd .empty.teach p{margin:0;max-width:60ch;font-size:13px;line-height:1.55}
.teach-btn{margin-top:10px}

@media (max-width:620px){
  .setup-row{flex-wrap:wrap;align-items:flex-start;padding:11px 14px}
  .setup-txt{flex:1 1 calc(100% - 40px)}
  .setup-btn,.setup-ok{margin-left:34px}
}

/* ==== vocabulary + mobile meeting ==== */

/* One style per verb. Delete is ghost-danger everywhere; its rules live
   with the other buttons under Components. */

/* Row actions: kept together so they can drop under the title as a unit. */
.todo-act{display:flex;align-items:center;gap:4px;flex:none}
.issue-act{display:flex;align-items:center;gap:4px;flex:none}
.rock-st{display:flex;align-items:center;gap:5px;flex:none}
.pcheck{text-align:left}

/* ---- phone: the live meeting ---- */
@media (max-width:620px){
  /* Segue: the read toggle is the thing people tap, so it gets the width. */
  .win{flex-wrap:wrap}
  .win>.grow{flex:1 1 0}
  .win>.btn{flex:1 0 100%;min-height:40px;font-size:13px}

  /* To-dos: title keeps the row, actions sit underneath it. The checkbox
     stays 18px to look at but takes a 40px tap. */
  .todo{flex-wrap:wrap;row-gap:4px;padding:10px 12px}
  .todo>.grow{flex:1 1 0}
  .todo-act{flex:1 0 100%;padding-left:28px;gap:8px}
  .todo-act>.btn.sm{min-height:34px;padding:6px 11px}
  .todo-act>.btn.ghost.danger{margin-left:auto;min-width:34px}
  .todo>.cbx{position:relative}
  .todo>.cbx::after{content:"";position:absolute;inset:-11px}

  /* Rocks: status buttons wrap under the title instead of squeezing it. */
  .rock{flex-wrap:wrap;row-gap:9px}
  .rock>.grow{flex:1 1 0}
  .rock-st{flex:1 0 100%;padding-left:39px}
  .rock-st>.btn{flex:1;min-height:34px;padding-left:4px;padding-right:4px}

  /* Issues list: Park and Delete under the title. */
  .issue{flex-wrap:wrap;row-gap:6px}
  .issue>.grow{flex:1 1 0}
  .issue-act{flex:1 0 100%;padding-left:32px;gap:8px}
  .issue-act>.btn.sm{min-height:34px;padding:6px 11px}
  .issue-act>.btn.ghost.danger{margin-left:auto}

  /* Conclude: two tidy rows of five, each a 40px square. */
  .rate{display:grid;grid-template-columns:repeat(5,40px);gap:6px}
  .rate button{width:40px;height:40px;font-size:13px}
}

/* ---- phone and tablet: keep where the meeting is in view ---- */
/* Under 900px the rail stacks above the stage and used to scroll away with
   it. The clock tile now pins under the top bar. The rail is flattened with
   display:contents so the tile's sticky range is the whole meeting, not the
   rail's own box; the segment row and budget line still scroll away as
   before. The long-segment strip pins the same way.
   The offset is the top bar's height (--top-h), which is fixed now that
   the bar never wraps: 64px, 56px on a phone, 48px in focus. It sits a
   pixel inside the bar, which paints above (z-index 40). */
@media (max-width:900px){
  .l10>.rail{display:contents}
  .l10>.rail>.clockbox,
  .l10>.mstrip{
    position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--top-h) - 1px);z-index:30;
  }

  /* A pinned tile has to be short: name, clock and overrun on the left,
     the driver's transport or the follower's line on the right. */
  .l10>.rail>.clockbox{
    display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;
    align-items:center;padding:9px 12px;
  }
  .l10>.rail>.clockbox>.eyebrow,
  .l10>.rail>.clockbox>.mclock-row,
  .l10>.rail>.clockbox>.clock-sub{grid-column:1}
  .l10>.rail>.clockbox>.clock-ctl,
  .l10>.rail>.clockbox>.mfollow{grid-column:2;grid-row:1 / span 3;margin-top:0}
  .l10>.rail>.clockbox>.clock-ctl{min-width:134px}
  .l10>.rail>.clockbox>.mclock-row{column-gap:8px}
  .l10>.rail>.clockbox>.mhint{display:none}
  .l10>.rail>.clockbox>.mclock-row>.clock{font-size:28px}
  .l10>.rail>.clockbox>.mfollow>.clock-ctl{margin-top:5px}
  .l10>.rail>.clockbox>.mfollow>.mfollow-who{max-width:150px}
}
/* Phone: the pinned strip gets a smaller clock, and the meeting total goes,
   since the chips already carry each segment's time. */
@media (max-width:620px){
  .l10>.mstrip>.mstrip-clock>.mclock-row>.clock{font-size:28px}
  .l10>.mstrip>.mstrip-segs>.legend{display:none}
}

/* ==== polish + teams ==== */

/* To-Dos view add form. The owner and due widths used to be inline, which
   no media rule can undo; they live here so a phone can wrap the row. */
.vt-add{margin-bottom:13px;flex-wrap:nowrap;align-items:flex-end}
.vt-add>.vt-add-fld{flex:0 0 150px}

/* Headline rows: text and actions, grouped so the actions can drop under
   the text as one unit on a phone, the same way .todo-act does. */
.hl-row{flex-wrap:nowrap;align-items:flex-start}
.hl-act{display:flex;align-items:center;gap:4px;flex:none}

/* Teams overview. The name is the way into the team, so it reads as a link
   and is a real button. */
.teams-go{
  background:none;border:0;padding:0;font:inherit;font-weight:600;
  color:var(--link);cursor:pointer;text-align:left;
}
.teams-go:hover{text-decoration:underline;text-underline-offset:2px}
.teams-go:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.teams-tbl-name>.chip{margin-left:8px;vertical-align:1px}
.teams-mem{display:inline-flex;align-items:center;gap:9px}
.teams-mem>.num{font-size:12.5px;min-width:1ch}
.teams-stack{display:inline-flex}
.teams-stack>.avatar{box-shadow:0 0 0 2px var(--surface)}
.teams-stack>.avatar+.avatar{margin-left:-4px}
.teams-leads{display:flex;flex-direction:column;gap:4px}
.teams-lead{display:inline-flex;align-items:center;gap:6px;font-weight:500;min-width:0}
.teams-lead>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teams-next{display:flex;flex-direction:column;line-height:1.35}
.teams-next>.num{font-size:12.5px;white-space:nowrap}
.teams-next>.dim{font-size:11.5px}
.teams-tbl-act{text-align:right;white-space:nowrap}

@media (max-width:620px){
  /* To-Dos add form: title full width, owner and due side by side, then Add. */
  .vt-add{flex-wrap:wrap;row-gap:10px}
  .vt-add>.vt-add-title{flex:1 0 100%}
  .vt-add>.vt-add-fld{flex:1 1 0;min-width:0}
  .vt-add>.vt-add-fld>input,.vt-add>.vt-add-fld>select{min-width:0}
  .vt-add>.vt-add-btn{flex:1 0 100%;min-height:40px}

  /* Home to-do table: rows restack. Checkbox and title on the first line,
     owner and due as a muted second line under the title. */
  .todo-tbl thead{display:none}
  .todo-tbl,.todo-tbl tbody{display:block}
  .todo-tbl tr{
    display:grid;grid-template-columns:18px auto minmax(0,1fr);
    column-gap:10px;row-gap:4px;align-items:center;
    padding:10px 12px;border-bottom:1px solid var(--line);
  }
  .todo-tbl tr:last-child{border-bottom:0}
  .todo-tbl td,.todo-tbl td:first-child{display:block;padding:0;border:0;background:none}
  .todo-tbl :where(tbody tr:nth-child(even)){background:var(--zebra)}
  .todo-tbl td:first-child{grid-row:1;align-self:start;line-height:0}
  .todo-tbl td>.cbx{position:relative}
  .todo-tbl td>.cbx::after{content:"";position:absolute;inset:-11px}
  .todo-tbl .todo-tbl-t{grid-column:2 / -1;font-size:13.5px;line-height:1.45}
  .todo-tbl .todo-tbl-who{grid-column:2;grid-row:2;min-width:0}
  .todo-tbl .todo-tbl-who .who span{font-size:12px}
  .todo-tbl .todo-tbl-due{grid-column:3;grid-row:2;font-size:12px}
  .todo-tbl .todo-tbl-due::before{content:"\00b7";margin-right:8px;color:var(--ink-3);font-weight:400}

  /* Headlines: actions under the text, 34px targets, Delete to the far right. */
  .hl-row{flex-wrap:wrap;row-gap:6px}
  .hl-row>.grow{flex:1 1 0}
  .hl-act{flex:1 0 100%;padding-left:14px;gap:8px}
  .hl-act>.btn.sm{min-height:34px;padding:6px 11px}
  .hl-act>.btn.ghost.danger{margin-left:auto;min-width:34px}

  /* Teams overview: each team becomes a card, one labelled line per column. */
  .teams-tbl thead{display:none}
  .teams-tbl,.teams-tbl tbody{display:block}
  .teams-tbl tr{
    display:block;border:1px solid var(--line);border-radius:8px;
    padding:10px 12px;margin-bottom:8px;
  }
  .teams-tbl tr:last-child{margin-bottom:0}
  .teams-tbl td{display:block;padding:0;border:0;background:none}
  .teams-tbl .teams-tbl-name{font-size:14px;margin-bottom:8px}
  .teams-tbl td[data-l]{
    display:grid;grid-template-columns:78px minmax(0,1fr);column-gap:10px;
    align-items:center;padding:5px 0;
  }
  .teams-tbl td[data-l]::before{
    content:attr(data-l);font-size:10px;font-weight:700;text-transform:uppercase;
    letter-spacing:.12em;color:var(--ink-3);align-self:start;padding-top:3px;
  }
  .teams-tbl td.teams-tbl-act{
    display:flex;align-items:center;gap:8px;text-align:left;
    margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
  }
  .teams-tbl td.teams-tbl-act:empty{display:none}
  .teams-tbl-act>.btn.sm{min-height:34px;padding:6px 11px}
  .teams-tbl-act>.btn.ghost.danger{margin-left:auto}
}

/* ==== editable agenda ==== */
/* Open short-term issue count on the IDS section of the rail and strip:
   a round count badge in the brand fill, as EOS One marks IDS. */
.agx-badge{
  flex:none;display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  font-size:10.5px;font-weight:700;line-height:1;
  background:var(--brand);color:var(--brand-ink);border-radius:999px;
}
.mchip>.agx-badge{position:absolute;top:5px;right:5px}

/* Agenda total: the same pill as .budget, amber past ninety, red past the limit. */
.agx-sum[data-over="over"]{color:var(--warn-ink);border-color:var(--warn);background:var(--warn-soft)}
.agx-sum[data-over="limit"]{color:var(--bad);border-color:var(--bad);background:var(--bad-soft)}
.agx-note{margin:0 0 10px;font-size:12.5px;color:var(--ink-2)}

.agx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.agx-row{
  display:flex;align-items:center;gap:8px;padding:6px 8px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);
}
.agx-row.is-drag{opacity:.45}
.agx-row.is-over{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.agx-grip{
  flex:none;width:12px;height:22px;cursor:grab;opacity:.55;
  background:radial-gradient(circle,var(--ink-3) 1.3px,transparent 1.6px) 0 0/6px 6px;
}
.agx-grip:active{cursor:grabbing}
.agx-idx{flex:none;width:18px;font-size:11px;color:var(--ink-3);text-align:right}
.agx-fields{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.agx-fields>.agx-name{flex:1;min-width:0}
.agx-fields>.agx-min{flex:none;width:96px}
.agx-tagslot{flex:none;width:64px}
.agx-acts{flex:none;display:flex;align-items:center;gap:2px}
.agx-acts>.agx-mv{min-width:30px;font-family:var(--mono)}
.agx-foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px}
.agx-err{margin:12px 0 0;font-size:12.5px;color:var(--bad);background:var(--bad-soft);border-radius:7px;padding:8px 11px}
.agx-save-row{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
}

@media (max-width:620px){
  /* The lobby header: the heading takes the full width and the buttons drop
     below it, instead of squeezing the date into a narrow column. */
  .lobby-hd>.grow{flex:1 0 100%}
  /* Editor rows wrap: name and minutes on one line, the controls under them. */
  .agx-row{flex-wrap:wrap;row-gap:6px}
  .agx-fields{flex:1 1 calc(100% - 50px)}
  .agx-grip{display:none}
  /* No room for the Custom tag beside the name on a phone. */
  .agx-tagslot{display:none}
  .agx-acts{flex:1 0 100%;justify-content:flex-end;gap:6px}
  .agx-acts>.btn.sm{min-height:34px;padding:6px 11px}
  .agx-acts>.agx-del{margin-left:auto}
}

/* ==== upcoming rows on phones ==== */
/* The time and the "2/8 posted" chip never wrap, so on a phone they took the
   row and left the relative date about 40px, wrapped over four lines. Put the
   time under the date text and keep the chip on the right, spanning both. */
@media (max-width:620px){
  .occ{
    display:grid;grid-template-columns:52px minmax(0,1fr) auto;
    grid-template-areas:"dt grow chip" "dt tm chip";column-gap:10px;row-gap:1px;
  }
  .occ .dt{grid-area:dt;min-width:0}
  .occ .grow{grid-area:grow;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .occ .tm2{grid-area:tm}
  .occ .chip{grid-area:chip;align-self:center}
}

/* ==== waiting room + presence ==== */
/* The lobby's "In the room" strip. Teammates here for the L10 (lobby or
   meeting) are the green chips; anyone elsewhere in the app is muted. */
.wr{
  display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--card-line);border-radius:var(--radius);
  padding:10px 14px;box-shadow:var(--shadow);margin-bottom:16px;
}
.wr-hd{display:flex;align-items:baseline;gap:8px;flex:none}
.wr-count{font-size:12px;font-weight:600;color:var(--good)}
.wr-alone{font-size:13px;color:var(--ink-3)}
.wr-list{display:flex;gap:6px;flex-wrap:wrap;min-width:0;flex:1}
.wr-chip{
  display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%;
  border:1px solid var(--line);border-radius:999px;padding:3px 11px 3px 3px;
  font-size:12.5px;color:var(--ink-3);
}
.wr-chip.here{border-color:var(--good);background:var(--good-soft);color:var(--ink)}
.wr-chip:not(.here)>.avatar{opacity:.55}
.wr-nm{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr-st{font-size:11.5px;white-space:nowrap}
.wr-chip.here .wr-st{color:var(--good)}

/* The green "in the room now" dot, ringed in whatever the avatar sits on. */
.pres-av{position:relative;display:inline-grid;flex:none}
.pres-dot{
  position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;
  background:var(--good);box-shadow:0 0 0 2px var(--surface);
}
.pcheck[aria-pressed="true"] .pres-dot{box-shadow:0 0 0 2px var(--accent-soft)}
.wr-chip.here .pres-dot{box-shadow:0 0 0 2px var(--good-soft)}

/* Focus mode: up to five overlapping avatars beside the live badge. */
.pres-stack{display:inline-flex;align-items:center;flex:none}
.pres-stack>.avatar{box-shadow:0 0 0 2px var(--surface)}
.pres-stack>.avatar+.avatar{margin-left:-6px}
.pres-more{margin-left:5px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.pres-more-sm{display:none}

/* A follower looking at another section. The room's chip keeps its live
   marker; the peeked one gets an outline. */
.peek-bar{align-items:center;flex-wrap:wrap}
.peek-bar>.btn{flex:none}
.seg[data-peek="true"]{outline:1px solid var(--accent);outline-offset:-1px}
.mchip[data-peek="true"]{border-color:var(--accent);border-style:dashed}

@media (max-width:620px){
  .wr{padding:9px 11px}
  .wr-list{flex:1 0 100%}
  /* Phones: a green dot and a count instead of faces, so the title keeps
     some room beside the live badge. */
  .pres-stack>.avatar,
  .pres-stack>.pres-more{display:none}
  .pres-stack>.pres-more-sm{display:inline-flex;align-items:center;gap:4px;margin-left:0}
  .pres-more-sm::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good)}
}