@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/instrument-sans-400.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/instrument-sans-500.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/instrument-sans-600.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/instrument-sans-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-mono-600.woff2') format('woff2')}

:root{
  /* surfaces */
  --paper:#F4F3EF;      /* app background */
  --panel:#FAF9F6;      /* sidebar + topbar */
  --card:#FFFFFF;       /* cards */
  --soft:#FBFAF7;       /* inset panels, inputs, hover */
  --soft-2:#F1EFE9;     /* chips, tracks, dividers-as-fill */
  --soft-3:#EAE8E1;     /* glyph tiles, active tab-ish */
  --sand:#F0EEE7;       /* sidebar status card, active row */
  --sand-2:#EBE8E0;     /* active nav item */
  --sand-3:#EDEBE4;     /* progress track */
  --wash:#F7F6F2;       /* on-dark text, subtle hover */

  /* rules */
  --rule:#E9E6DF;       /* card border */
  --rule-2:#E4E0D6;     /* input + button border */
  --rule-3:#F1EFE9;     /* pane inner divider */
  --rule-4:#F4F2EC;     /* list row divider */
  --dash:#DCD7CC;       /* dashed borders */
  --edge:#CFCABF;       /* quote rules, unchecked boxes */
  --edge-2:#C6C1B4;     /* emphasised dashed / selected */
  --edge-3:#B5B0A6;     /* button hover border */
  --scroll:#DFDBD2;

  /* ink */
  --ink:#23221E;
  --ink-h:#26251F;
  --ink-2:#2B2A25;
  --ink-3:#33312B;
  --ink-4:#3D3A33;
  --ink-5:#5C5850;
  --ink-6:#6B665C;
  --ink-7:#8A857B;
  --ink-8:#A8A399;

  /* accent — near-black, not a hue */
  --accent:#2E332F;
  --accent-h:#1E221F;
  --on-accent:#FAF9F6;
  --link:#4A5A52;
  --link-h:#2E3A34;

  /* semantic tones: [bg, fg] */
  --late-bg:#F7EBE7;    --late:#8C4A38;
  --soon-bg:#F7F0E2;    --soon:#7A5E22;
  --ok-bg:#F1EFE9;      --ok:#6B665C;
  --good-bg:#ECF2ED;    --good:#4A6E58;
  --tone-ink-bg:#EAE8E1; --tone-ink:#3D3A33;

  --live:#5B8A6F;       /* pulsing "sync live" dot */
  --focus:#4A5A52;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; -webkit-font-smoothing:antialiased;
}
a{color:var(--link); text-decoration:none}
a:hover{color:var(--link-h); text-decoration:underline}
h1,h2,h3,h4{margin:0; text-wrap:pretty}
input::placeholder,textarea::placeholder{color:var(--ink-8)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll); border-radius:9px; border:3px solid transparent; background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
@keyframes chpulse{0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.8)}}
@keyframes chsweep{0%{transform:translateX(-100%)} 100%{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){
  .live-dot,.pipe-dot,.sweep{animation:none !important}
}

/* Two type faces, one Sans Serif family throughout the app — .dsp and .ui both
   resolve to Instrument Sans (self-hosted, see web/fonts.ts; each stack falls
   back to a near system sans face if the font is blocked or fails to load).
   .dsp used to be Instrument Serif; kept as its own class (distinct weight,
   used on headings/stat values/leads) even though the typeface is now
   identical to .ui, so no caller needs to change. */
.dsp{font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-weight:400}
.ui{font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.mono{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Code",Consolas,monospace; font-variant-numeric:tabular-nums}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================== app shell ============================== */
.app{display:flex; height:100vh; width:100%; overflow:hidden; background:var(--paper)}
/* overflow-x stays hidden even in the stacked mobile layout — found during
   audit: .topbar-title is flex:none + white-space:nowrap (a page title must
   never truncate mid-word) and .topbar-right's controls have their own
   floor widths, so on the narrowest real phones (375px) their combined
   minimum content is a few px wider than the viewport. overflow-y must stay
   visible (height:auto needs the page to scroll vertically past 100vh),
   but there's no reason the same rule should also permit a few pixels of
   pointless horizontal scroll. */
@media (max-width:860px){.app{height:auto; min-height:100vh; flex-direction:column; overflow-y:visible; overflow-x:hidden}}

/* The rail is an icon strip that widens on hover, and on focus-within so a
   keyboard user tabbing into it can read the labels too. .app is flex with
   .side flex:none, so the main column REFLOWS as the width animates rather than
   being overlapped — content stays fully visible at both widths. */
.side{
  --rail: 60px;
  --rail-open: 238px;
  width:var(--rail); flex:none; display:flex; flex-direction:column;
  padding:20px 8px 14px; background:var(--panel);
  border-right:1px solid var(--rule); overflow-y:auto; overflow-x:hidden;
  transition:width .16s ease, padding .16s ease;
}
.side:hover, .side:focus-within{width:var(--rail-open); padding-left:14px; padding-right:14px}
@media (prefers-reduced-motion:reduce){.side{transition:none}}

/* Collapsed: glyphs only. Everything textual folds away so it leaves no gap. */
.side:not(:hover):not(:focus-within) .brand-text,
.side:not(:hover):not(:focus-within) .nav-label,
.side:not(:hover):not(:focus-within) .nav-badge,
.side:not(:hover):not(:focus-within) .side-sec-h,
.side:not(:hover):not(:focus-within) .side-empty,
.side:not(:hover):not(:focus-within) .rail-d,
.side:not(:hover):not(:focus-within) .kebab,
.side:not(:hover):not(:focus-within) .status-label,
.side:not(:hover):not(:focus-within) .status-detail,
.side:not(:hover):not(:focus-within) .side-row-w,
.side:not(:hover):not(:focus-within) .side-row-d{
  display:none;
}
.side:not(:hover):not(:focus-within) .side-brand{padding:2px 0 20px}
.side:not(:hover):not(:focus-within) .nav-item{justify-content:center; padding:9px 0}
.side:not(:hover):not(:focus-within) .side-sec{margin-top:12px; padding:0}
.side:not(:hover):not(:focus-within) .side-status{padding:10px; display:flex; justify-content:center}
/* Collapsed, a rail row keeps its glyph and drops the title — the same idea as
   the nav items above it, so the whole strip reads as one column of icons. */
.side:not(:hover):not(:focus-within) .rail-list,
.side:not(:hover):not(:focus-within) .side-list{gap:2px; align-items:stretch}
.side:not(:hover):not(:focus-within) .rail-t,
.side:not(:hover):not(:focus-within) .side-row-t{display:none}
.side:not(:hover):not(:focus-within) .rail-link{justify-content:center; padding:7px 0}
.side:not(:hover):not(:focus-within) .rail-row.on{background:var(--sand-2)}

.side-scroll{display:flex; flex-direction:column; min-height:0}

@media (max-width:860px){
  .side{width:100%; height:auto; border-right:none; border-bottom:1px solid var(--rule);
        overflow:visible; padding-left:14px; padding-right:14px}
  /* No hover on touch: the rail stays open rather than trapping content behind
     an interaction the device cannot perform. */
  .side:not(:hover):not(:focus-within) .brand-text,
  .side:not(:hover):not(:focus-within) .nav-label,
  .side:not(:hover):not(:focus-within) .nav-badge,
  .side:not(:hover):not(:focus-within) .side-sec-h,
  .side:not(:hover):not(:focus-within) .status-label,
  .side:not(:hover):not(:focus-within) .status-detail,
  .side:not(:hover):not(:focus-within) .kebab,
  .side:not(:hover):not(:focus-within) .rail-d{display:revert}
  .side:not(:hover):not(:focus-within) .rail-t,
  .side:not(:hover):not(:focus-within) .side-row-t{
    width:auto; height:auto; border-radius:0; background:none; text-indent:0; flex:1;
  }
  .side:not(:hover):not(:focus-within) .nav-item{justify-content:flex-start; padding:8px 10px}
}

/* Logo stacked above the "Chronicle" name — matches the sign-in page's
   vertical brand lockup, and gives the wide real logo image more room than
   a side-by-side row would. */
.side-brand{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:2px 8px 20px;
  text-decoration:none; color:inherit; text-align:center;
}
.side-brand:hover{text-decoration:none}
.brand-mark{
  width:30px; height:30px; flex:none; border-radius:10px; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:17px; color:var(--on-accent); line-height:1;
}
.brand-mark.lg{width:56px; height:56px; border-radius:16px; font-size:30px}
/* The real logo is a wide horizontal lockup, not a square icon, so it's
   sized by height with a max-width cap rather than forced into a square box
   — the old fixed 30x30/56x56 squares squashed it illegibly. */
.brand-mark-img{flex:none; object-fit:contain; width:auto}
.brand-mark-img.sm{height:28px; max-width:170px}
.brand-mark-img.lg{height:46px; max-width:280px}
.brand-text{display:flex; flex-direction:column; gap:2px; min-width:0}
.brand-name{font-size:14.5px; font-weight:600; letter-spacing:-0.01em; color:var(--ink)}

.side-nav{display:flex; flex-direction:column; gap:3px}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:9px;
  font-size:13px; color:var(--ink-5); text-decoration:none;
}
.nav-item:hover{background:var(--sand); color:var(--ink); text-decoration:none}
.nav-item.on{background:var(--sand-2); color:var(--ink); font-weight:600}
.nav-glyph{font-size:11px; width:15px; text-align:center; opacity:.65; flex:none}
.nav-label{flex:1; min-width:0}
.nav-badge{font-size:9.5px; color:var(--ink-7); flex:none}

.side-sec{margin-top:22px; padding:0 8px}
/* Sentence case, not mono all-caps: these are section labels above a list of
   titles, and the reference sidebar reads far calmer this way. */
.side-sec-h{
  font-size:11.5px; font-weight:500; letter-spacing:0; color:var(--ink-7);
  margin-bottom:6px; padding:0 6px;
}
.side-list{display:flex; flex-direction:column; gap:2px}
.side-row{
  display:flex; align-items:center; gap:8px; padding:6px; border-radius:8px;
  font-size:12px; color:var(--ink-5); text-decoration:none;
}
.side-row:hover{background:var(--sand); color:var(--ink); text-decoration:none}
.side-row.on{background:var(--sand); color:var(--ink); font-weight:500}
.side-row-t{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-row-w{font-size:9px; color:var(--ink-7); flex:none}
.side-row-d{font-size:9px; color:var(--ink-7); flex:none}
.side-empty{font-size:11.5px; color:var(--ink-7); line-height:1.5; padding:2px 0}

.side-spacer{flex:1; min-height:14px}

.side-status{background:var(--sand); border-radius:12px; padding:12px 13px; margin-bottom:10px}
.status-top{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.live-dot{width:6px; height:6px; flex:none; border-radius:50%; background:var(--live); animation:chpulse 2.6s ease-in-out infinite}
.status-label{font-size:9px; letter-spacing:0.09em; color:var(--ink-6)}
.status-detail{font-size:11.5px; color:var(--ink-7); line-height:1.5}

.user-av{
  width:29px; height:29px; flex:none; border-radius:50%; background:var(--rule-2); color:var(--ink-5);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600;
}
.user-av.lg{width:36px; height:36px; font-size:13px}

/* ---------------------------------------------- account menu (top right) */
/* <details> rather than a scripted popover: the CSP forbids inline handlers and
   this stays keyboard-operable with JS off. */
.umenu{position:relative; flex:none}
.umenu-b{
  display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border-radius:999px;
  border:1px solid var(--rule); background:var(--card); cursor:pointer; list-style:none;
  height:36px; box-sizing:border-box;
}
.umenu-b .user-av{width:26px; height:26px; font-size:10px}
.umenu-b::-webkit-details-marker{display:none}
.umenu-b:hover{border-color:var(--edge)}
.umenu-n{font-size:12px; font-weight:500; color:var(--ink); max-width:150px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.umenu-c{font-size:8px; color:var(--ink-7)}
.umenu[open] .umenu-b{border-color:var(--edge); background:var(--soft)}
.umenu-panel{
  position:absolute; top:calc(100% + 7px); right:0; z-index:40; width:252px;
  background:var(--card); border:1px solid var(--rule); border-radius:14px;
  padding:12px; box-shadow:0 12px 32px rgba(35,34,30,.13);
}
.umenu-id{display:flex; align-items:center; gap:10px; margin-bottom:9px}
.umenu-name{display:block; font-size:13px; font-weight:600; color:var(--ink)}
.umenu-mail{display:block; font-size:10px; color:var(--ink-7); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.umenu-tags{display:flex; flex-wrap:wrap; gap:5px}
.umenu-sep{height:1px; background:var(--rule); margin:11px -12px}
.umenu-i{
  display:block; width:100%; text-align:left; padding:7px 8px; border-radius:8px;
  border:none; background:none; font:inherit; font-size:12.5px; color:var(--ink-5);
  cursor:pointer; text-decoration:none;
}
.umenu-i:hover{background:var(--sand); color:var(--ink); text-decoration:none}
.umenu-i.danger{color:var(--late)}
.umenu-i.danger:hover{background:var(--late-bg)}
@media (max-width:860px){.umenu-n{display:none}}

/* ------------------------------------------- pinned / recent meeting rails */
.rail-list{display:flex; flex-direction:column; gap:1px}
.rail-row{display:flex; align-items:center; gap:1px; border-radius:8px}
.rail-row:hover{background:var(--sand)}
.rail-row.on{background:var(--sand-2)}
.rail-link{
  flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:7px 6px;
  font-size:12.5px; color:var(--ink-5); text-decoration:none;
}
.rail-row:hover .rail-link, .rail-row.on .rail-link{color:var(--ink); text-decoration:none}
.rail-row.on .rail-link{font-weight:500}
.rail-g{font-size:10px; width:14px; text-align:center; flex:none; opacity:.6}
.rail-t{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rail-d{font-size:9px; color:var(--ink-7); flex:none}
/* The menu appears on hover/focus/open only, so a resting rail is a clean list
   of titles rather than a column of dots. */
.kebab{opacity:0; transition:opacity .12s ease}
.rail-row:hover .kebab, .kebab[open], .kebab:focus-within{opacity:1}

.kebab{position:relative; flex:none}
.kebab-b{
  display:flex; align-items:center; justify-content:center; width:20px; height:22px;
  border-radius:6px; cursor:pointer; list-style:none; color:var(--ink-7);
  font-size:13px; line-height:1;
}
.kebab-b::-webkit-details-marker{display:none}
.kebab-b:hover{background:var(--rule-2); color:var(--ink)}
.kebab-menu{
  position:absolute; top:calc(100% + 4px); right:0; z-index:50; width:206px;
  background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:7px;
  box-shadow:0 12px 30px rgba(35,34,30,.15);
}
.kebab-i{
  display:block; width:100%; text-align:left; padding:6px 8px; border-radius:7px;
  border:none; background:none; font:inherit; font-size:12px; color:var(--ink-5);
  cursor:pointer; text-decoration:none;
}
.kebab-i:hover{background:var(--sand); color:var(--ink); text-decoration:none}
.kebab-i.danger{color:var(--late)}
.kebab-i.danger:hover{background:var(--late-bg)}
.kebab-note{font-size:10px; color:var(--ink-7); line-height:1.45; padding:6px 8px 2px;
  border-top:1px solid var(--rule); margin-top:5px}

.main{flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden}
@media (max-width:860px){.main{overflow:visible}}

/* ================================ topbar ================================ */
.topbar{
  flex:none; min-height:62px; display:flex; align-items:center; gap:13px;
  padding:11px 24px; border-bottom:1px solid var(--rule); background:var(--panel); flex-wrap:wrap;
}
/* Left zone shrinks; right zone is pinned hard right and never wraps. As a row
   of bare siblings, the long mono caption and the search box competed for the
   same free space and pushed the account chip inward — which is what made the
   header look misaligned. */
.topbar-left{
  display:flex; align-items:center; gap:11px; flex:1 1 auto; min-width:0;
}
.topbar-right{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.topbar-title{
  font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--ink);
  flex:none; white-space:nowrap;
}
.topbar-dot{width:3px; height:3px; flex:none; border-radius:50%; background:var(--edge)}
/* Truncates rather than shoving the account chip off-centre. */
.topbar-meta{
  font-size:10.5px; color:var(--ink-7); letter-spacing:0.05em;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topbar-grow{flex:1; min-width:0}
.topbar-actions{display:flex; align-items:center; gap:7px; flex:none}
.topbar-sep{width:1px; height:22px; flex:none; background:var(--rule)}
.topbar{flex-wrap:nowrap}
@media (max-width:760px){
  .topbar-meta, .topbar-sep{display:none}
}

.topbar-search{
  display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--rule-2);
  border-radius:10px; padding:8px 12px; flex:0 1 260px; min-width:130px; max-width:260px; margin:0;
}
.topbar-search input{
  border:none; outline:none; font-family:inherit; font-size:12.5px; color:var(--ink);
  background:transparent; width:100%; padding:0;
}
.search-icon{font-size:11px; color:var(--ink-7); flex:none}
.kbd{font-size:9.5px; color:var(--ink-7); background:var(--paper); border-radius:5px; padding:2px 5px; flex:none}

/* head-back chip on the meeting page */
.backchip{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-5);
  background:var(--paper); border-radius:8px; padding:7px 12px; flex:none; text-decoration:none;
}
.backchip:hover{background:var(--sand-2); color:var(--ink); text-decoration:none}
.head-title{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.head-title-t{font-size:19px; letter-spacing:-0.01em; line-height:1.2; color:var(--ink)}
.head-sub{font-size:9.5px; color:var(--ink-7); letter-spacing:0.05em; margin-top:4px}

/* ================================ buttons ================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:inherit; font-size:12.5px; font-weight:400; padding:7px 12px; border-radius:9px;
  border:1px solid var(--rule-2); background:var(--card); color:var(--ink-4);
  cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn:hover{border-color:var(--edge-3); color:var(--ink); text-decoration:none}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); padding:7px 13px}
.btn.primary:hover{background:var(--accent-h); border-color:var(--accent-h); color:var(--on-accent)}
.btn.block{width:100%; padding:10px 13px}
.btn.sm{font-size:11.5px; padding:5px 11px; border-radius:8px}
.btn[disabled],.btn.off{
  background:var(--rule-2); border-color:var(--rule-2); color:var(--ink-7); cursor:not-allowed;
}
.btn[disabled]:hover,.btn.off:hover{background:var(--rule-2); border-color:var(--rule-2); color:var(--ink-7)}
.btnrow{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.btnrow.wrap .skill-pick{display:flex; align-items:center; gap:8px; margin-right:4px}
.btnrow.wrap .skill-pick .field-l{margin-bottom:0; white-space:nowrap}
.btnrow.wrap .skill-pick .field{width:auto; min-width:170px}

/* borderless text button that lives inside a form */
.linkbtn{
  background:none; border:none; padding:0; font:inherit; font-size:11.5px; color:var(--ink-5);
  cursor:pointer; text-decoration:underline; text-decoration-color:var(--dash);
}
.linkbtn:hover{color:var(--ink)}

/* ================================= fields ================================= */
.field-l{font-size:8.5px; letter-spacing:0.1em; color:var(--ink-7); margin-bottom:5px; display:block}
.field-hint{font-size:10.5px; color:var(--ink-7); line-height:1.4; margin-top:4px}
.field{
  width:100%; border:1px solid var(--rule-2); border-radius:8px; padding:8px 10px;
  font-family:inherit; font-size:12.5px; background:var(--soft); color:var(--ink); outline:none;
}
.field:focus{border-color:var(--edge-3)}
select.field{cursor:pointer}
textarea.field{line-height:1.5; resize:vertical}
textarea.field.code{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:11.5px; line-height:1.75; color:var(--ink-3)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:520px){.grid-2{grid-template-columns:1fr}}

/* =============================== cards/panes =============================== */
.card{background:var(--card); border:1px solid var(--rule); border-radius:16px}
.card.lg{border-radius:18px}
.pane{background:var(--card); border:1px solid var(--rule); border-radius:16px;
      display:flex; flex-direction:column; min-width:0; overflow:hidden}
.pane-h{
  flex:none; display:flex; align-items:center; gap:9px; padding:14px 17px;
  border-bottom:1px solid var(--rule-3); flex-wrap:wrap;
}
.pane-h-t{font-size:13.5px; font-weight:600; color:var(--ink)}
.pane-h-n{font-size:9.5px; color:var(--ink-7)}
.pane-body{flex:1; overflow-y:auto; min-height:0; padding:15px 17px 18px}
.pane-body.pad-lg{padding:22px 24px 40px}
.pane-body.flush{padding:0}
.pane-foot{flex:none; padding:13px 16px; border-top:1px solid var(--rule-3); background:var(--soft);
           display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.grow{flex:1}
.min-w-0{min-width:0}

/* section label — the mono all-caps rubric used throughout the mockups */
.lbl{font-size:9px; letter-spacing:0.1em; color:var(--ink-7)}
.lbl.wide{letter-spacing:0.11em}
.lbl-row{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.lbl-rule{flex:1; height:1px; background:var(--rule-3)}

/* ============================== tab pill group ============================== */
.tabs{display:flex; gap:3px; background:var(--paper); border-radius:11px; padding:3px}
.tabs.fill .tab{flex:1; justify-content:center}
.tab{
  display:flex; align-items:center; gap:7px; font-size:12.5px; padding:6px 13px; border-radius:9px;
  color:var(--ink-6); text-decoration:none; cursor:pointer; white-space:nowrap;
  background:none; border:none; font-family:inherit;
}
.tab:hover{color:var(--ink); text-decoration:none}
.tab.on{background:var(--card); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(35,34,30,.07)}
.tab-n{font-size:9.5px; color:var(--ink-7)}

/* segmented tabs used for the result pane (filled, not pill-in-tray) */
.segtab{
  font-size:12px; padding:5px 12px; border-radius:8px; cursor:pointer; white-space:nowrap;
  color:var(--ink-6); border:1px solid var(--rule); background:var(--card); text-decoration:none;
}
.segtab:hover{color:var(--ink); text-decoration:none}
.segtab.on{background:var(--soft-3); color:var(--ink); font-weight:600; border-color:var(--soft-3)}

/* ============================== pills / tags ============================== */
.pill{font-size:10.5px; font-weight:500; padding:3px 9px; border-radius:7px; white-space:nowrap; flex:none;
      background:var(--ok-bg); color:var(--ok); display:inline-block}
.pill.late{background:var(--late-bg); color:var(--late)}
.pill.soon{background:var(--soon-bg); color:var(--soon)}
.pill.ok{background:var(--ok-bg); color:var(--ok)}
.pill.good{background:var(--good-bg); color:var(--good)}
.pill.ink{background:var(--tone-ink-bg); color:var(--tone-ink)}

.tag{font-size:8.5px; letter-spacing:0.09em; padding:3px 7px; border-radius:5px; white-space:nowrap; flex:none;
     background:var(--ok-bg); color:var(--ok); display:inline-block}
.tag.late{background:var(--late-bg); color:var(--late)}
.tag.soon{background:var(--soon-bg); color:var(--soon)}
.tag.ok{background:var(--ok-bg); color:var(--ok)}
.tag.good{background:var(--good-bg); color:var(--good)}
.tag.ink{background:var(--tone-ink-bg); color:var(--tone-ink)}

/* mono due-badge (slightly different metrics from .pill in the mockups) */
.due{font-size:10px; padding:2px 8px; border-radius:6px; white-space:nowrap; flex:none;
     background:var(--ok-bg); color:var(--ok); display:inline-block}
.due.late{background:var(--late-bg); color:var(--late)}
.due.soon{background:var(--soon-bg); color:var(--soon)}
.due.good{background:var(--good-bg); color:var(--good)}
.due.ink{background:var(--tone-ink-bg); color:var(--tone-ink)}

/* department tints — Chronicle's six meeting_type values mapped onto the
   mockups' own department palette (see GOVERNANCE/plan: there is no real
   department field in Graph, meeting_type is the honest stand-in). */
.dept{font-size:10.5px; font-weight:500; padding:3px 9px; border-radius:7px; white-space:nowrap; flex:none;
      display:inline-block; background:var(--ok-bg); color:var(--ok)}
.dept.estimating{background:#F0EFEB; color:#5F5D54}
.dept.project_coordination{background:#EDEEF0; color:#4F5560}
.dept.sales_bd{background:#F3EFE5; color:#7A6A46}
.dept.internal_ops{background:#ECF2ED; color:#4A6E58}
.dept.vendor_supplier{background:#F3EBE8; color:#8C4A38}
.dept.other{background:#EFEDF1; color:#585264}

/* avatars + glyph tiles */
.av{
  width:22px; height:22px; flex:none; border-radius:50%; background:var(--soft-2); color:var(--ink-6);
  display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:600;
}
.av.sm{width:20px; height:20px; font-size:8.5px}
.av.a0{background:#E7E4DB; color:#4A463D}
.av.a1{background:#E8EDE7; color:#4A6E58}
.av.a2{background:#F1E7E3; color:#8C4A38}
.av.a3{background:#F0EADD; color:#7A5E22}
.av.a4{background:#E6E9E8; color:#4A5652}
.av.a5{background:#EFEDE6; color:#6B6449}
.av.a6{background:#E9E7EC; color:#575265}
.av.a7{background:#EDEAE4; color:#5F594E}
.glyph{
  width:22px; height:22px; flex:none; border-radius:7px; background:var(--soft-2); color:var(--ink-5);
  display:flex; align-items:center; justify-content:center; font-size:10px;
}
.glyph.ink{background:var(--soft-3); color:var(--tone-ink)}
.glyph.lg{width:28px; height:28px; border-radius:9px; font-size:14px; background:var(--accent); color:var(--on-accent)}

/* ================================= chips ================================= */
/* scope chips (rounded, dark when active) */
.chip{
  font-size:11.5px; padding:4px 11px; border-radius:15px; cursor:pointer; white-space:nowrap;
  background:var(--soft-2); color:var(--ink-6); border:1px solid transparent;
  text-decoration:none; display:inline-block; font-family:inherit;
}
.chip:hover{color:var(--ink); text-decoration:none}
.chip.on{background:var(--accent); color:var(--wash); border-color:var(--accent)}
.chip.on:hover{color:var(--wash)}
.chip.dash{background:none; border:1px dashed var(--dash); color:var(--ink-7)}

/* suggestion chips (outlined, white) */
.sugg{
  font-size:11.5px; color:var(--ink-5); border:1px solid var(--rule-2); background:var(--card);
  border-radius:16px; padding:5px 12px; cursor:pointer; white-space:nowrap; text-decoration:none;
  font-family:inherit; display:inline-block;
}
.sugg:hover{border-color:var(--edge-3); background:var(--soft); color:var(--ink); text-decoration:none}

/* per-message action chips */
.act{
  font-size:12px; color:var(--ink-4); border:1px solid var(--rule-2); background:var(--card);
  border-radius:8px; padding:6px 12px; cursor:pointer; white-space:nowrap; text-decoration:none;
  font-family:inherit; display:inline-block;
}
.act:hover{border-color:var(--edge-3); background:var(--soft); color:var(--ink); text-decoration:none}

/* citation chips */
.cite{
  font-size:11.5px; color:var(--ink-5); background:var(--soft-2); border-radius:6px; padding:3px 9px;
  white-space:nowrap; text-decoration:none; display:inline-block;
}
.cite:hover{background:var(--rule-2); color:var(--ink); text-decoration:none}
.cite.mono-sm{font-size:10px; padding:3px 8px}

/* small mono meta chip (scope/cadence/format labels) */
.mchip{font-size:9px; color:var(--ink-7); background:var(--paper); border-radius:5px; padding:3px 7px;
       letter-spacing:0.04em; white-space:nowrap; display:inline-block}
.mchip.soft{background:var(--soft-2); color:var(--ink-6); letter-spacing:0.07em}

/* composer affordance hints (@ meeting, # dept, / skill) */
.hint{font-size:9.5px; color:var(--ink-7); background:var(--soft-2); border-radius:6px; padding:3px 8px;
      white-space:nowrap; display:inline-block}

/* toggle chips (Upload extras) */
/* Summary style: opt-in via one switch, pure CSS reveal (no JS needed) — the
   checkbox (.sr, visually hidden but focusable) and its label are SIBLINGS,
   not nested, specifically so ":checked ~" can both style the switch and
   reveal the cards after it with no scripting at all. */
.styles-reveal{display:none}
.style-switch:checked ~ .styles-reveal{display:block}
.toggle-line{display:flex; align-items:flex-start; gap:11px; cursor:pointer; padding:2px 0}
.toggle-box{
  width:34px; height:19px; flex:none; margin-top:1px; border-radius:10px; border:1px solid var(--rule-2);
  background:var(--card); position:relative; transition:background .12s ease;
}
.toggle-box::after{
  content:''; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%;
  background:var(--ink-7); transition:transform .12s ease;
}
.style-switch:checked ~ .toggle-line .toggle-box{background:var(--accent); border-color:var(--accent)}
.style-switch:checked ~ .toggle-line .toggle-box::after{transform:translateX(15px); background:var(--wash)}
.toggle-line-t{display:block; font-size:13px; font-weight:500; color:var(--ink)}
.toggle-line-d{display:block; font-size:11px; color:var(--ink-7); line-height:1.45; margin-top:2px}

.toggle{
  position:relative; font-size:11.5px; border-radius:16px; padding:5px 12px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--rule-2); color:var(--ink-6); background:var(--card);
  font-family:inherit; display:inline-block;
}
.toggle:hover{border-color:var(--edge-3)}
.toggle.on{background:var(--accent); border-color:var(--accent); color:var(--wash)}

/* ============================== notices/states ============================== */
.note{
  border:1px solid var(--rule); background:var(--soft); border-radius:12px; padding:12px 15px;
  font-size:12.5px; color:var(--ink-3); line-height:1.6; max-width:74ch;
}
.note b{color:var(--ink)}
.note.warn{background:var(--soon-bg); border-color:#EDE3CB; color:#5C5236}
.note.warn b{color:#4A3C1A}
.note.bad{background:var(--late-bg); border-color:#EEDBD5; color:#5C2A20}
.note.bad b{color:var(--late)}
.note.good{background:var(--good-bg); border-color:#D9E4DC; color:#33503E}

.empty{
  border:1px dashed var(--dash); border-radius:13px; padding:18px 20px; background:var(--soft);
  font-size:12.5px; color:var(--ink-6); line-height:1.6; max-width:70ch;
}
.empty-h{font-weight:600; color:var(--ink); font-size:13px; margin-bottom:5px}

.spinner{
  display:inline-block; width:11px; height:11px; flex:none; border:2px solid var(--edge);
  border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-1px;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

/* ========================================================================= */
/* HOME                                                                      */
/* ========================================================================= */
.home-scroll{flex:1; min-height:0; overflow-y:auto}
@media (max-width:860px){.home-scroll{overflow:visible}}
.home-shell{
  /* No max-width cap: the list column is minmax(0,1fr), so it already fills
     whatever .main/.home-scroll hands it (that width itself already
     reflows with .side's hover-expand, see the "app shell" comment above) —
     a fixed cap here just left a dead gap on the right on any screen wide
     enough to hit it, which was most of them, making the sidebar's expand/
     contract look like it had no effect on the list at all. */
  display:grid; grid-template-columns:minmax(0,1fr) 344px; grid-template-rows:auto 1fr;
  align-items:start; gap:20px; padding:26px 26px 48px;
}
@media (max-width:1320px){.home-shell{grid-template-columns:minmax(0,1fr) 308px}}
@media (max-width:1150px){
  .home-shell{display:flex; flex-direction:column; align-items:stretch; padding:18px 18px 40px}
}
.home-list{min-width:0; display:flex; flex-direction:column; gap:18px; grid-column:1; grid-row:1 / span 2}
@media (max-width:1150px){.home-list{order:2}}
.home-cal{grid-column:2; grid-row:1; min-width:0; padding:16px 17px 14px}
@media (max-width:1150px){.home-cal{order:1; max-width:460px; width:100%}}
.home-chat{grid-column:2; grid-row:2; min-width:0; min-height:0; height:440px}
@media (max-width:1150px){.home-chat{order:3; max-width:460px; width:100%; height:520px}}

.greet h1{font-size:34px; line-height:1.08; letter-spacing:-0.015em}
.greet p{margin:8px 0 0; font-size:14px; color:var(--ink-6); line-height:1.55; max-width:70ch}

.list-h{
  display:flex; align-items:center; gap:14px; padding:14px 22px;
  border-bottom:1px solid var(--rule-3); flex-wrap:wrap;
}
.list-cap{font-size:9.5px; color:var(--ink-7); letter-spacing:0.06em}
.mrow{
  display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:16px; align-items:flex-start;
  padding:16px 22px; border-bottom:1px solid var(--rule-4); text-decoration:none; color:inherit;
}
.mrow:last-of-type{border-bottom:none}
.mrow:hover{background:var(--soft); text-decoration:none}
.mrow-date{text-align:center; padding-top:2px}
.mrow-mon{font-size:9px; color:var(--ink-7); letter-spacing:0.07em}
.mrow-day{font-size:20px; line-height:1.2; color:var(--ink)}
.mrow-time{font-size:9px; color:var(--ink-7); margin-top:2px}
.mrow-mid{min-width:0}
.mrow-top{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.mrow-t{font-size:13.5px; font-weight:600; letter-spacing:-0.005em; color:var(--ink)}
.mrow-sum{font-size:12.5px; color:var(--ink-6); line-height:1.55; margin-top:5px}
.mrow-foot{display:flex; gap:7px; margin-top:9px; align-items:center; flex-wrap:wrap}
.mrow-chip{font-size:11px; color:var(--ink-6); background:var(--paper); border-radius:6px; padding:3px 8px}
.mrow-stats{font-size:9.5px; color:var(--ink-7); letter-spacing:0.04em}
.mrow-end{display:flex; justify-content:flex-end; padding-top:2px}
.list-foot{padding:13px 22px; text-align:center; font-size:12.5px; color:var(--ink-7); text-decoration:none; display:block}
.list-foot:hover{background:var(--soft); color:var(--ink); text-decoration:none}

/* ============================== calendar ============================== */
.cal-h{display:flex; align-items:center; gap:9px; margin-bottom:14px}
.cal-m{font-size:17px; letter-spacing:-0.01em; color:var(--ink)}
.cal-nav{
  width:24px; height:24px; flex:none; border-radius:7px; background:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--ink-6);
  text-decoration:none;
}
.cal-nav:hover{background:var(--sand-2); color:var(--ink); text-decoration:none}
.cal-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px}
.cal-dow div{text-align:center; font-size:8.5px; letter-spacing:0.06em; color:var(--ink-7); padding-bottom:4px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.cal-cell{
  height:34px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border-radius:9px; text-decoration:none;
}
.cal-cell.has{background:var(--soft)}
.cal-cell:hover{background:var(--sand-2); text-decoration:none}
.cal-cell.sel{background:var(--accent)}
.cal-cell.sel:hover{background:var(--accent)}
.cal-cell.pad{pointer-events:none}
.cal-n{font-size:11.5px; line-height:1; color:var(--ink-7)}
.cal-cell.has .cal-n{color:var(--ink-4)}
.cal-cell.today .cal-n{color:var(--ink); font-weight:700}
.cal-cell.sel .cal-n{color:var(--wash); font-weight:600}
.cal-dots{display:flex; gap:2px; height:4px; align-items:center; justify-content:center}
.cal-dot{width:4px; height:4px; border-radius:50%; background:var(--ink-5)}
.cal-cell.sel .cal-dot{background:var(--wash)}
.cal-legend{
  display:flex; align-items:center; gap:14px; margin-top:13px; padding-top:12px;
  border-top:1px solid var(--rule-3); font-size:11px; color:var(--ink-7); flex-wrap:wrap;
}
.cal-legend span{display:flex; align-items:center; gap:6px}
.cal-legend i{width:5px; height:5px; border-radius:50%; background:var(--ink-5); display:inline-block}
.cal-legend i.sched{background:var(--ink-7)}
.cal-legend i.none{background:#A5837A}

/* ========================================================================= */
/* CHAT (shared: /ask main pane, Home rail, Meeting rail)                    */
/* ========================================================================= */
.chat-scope{
  flex:none; display:flex; align-items:center; gap:6px; padding:10px 17px;
  border-bottom:1px solid var(--rule-3); flex-wrap:wrap;
}
.chat-scope.lg{padding:12px 20px; gap:8px}
.chat-body{flex:1; overflow-y:auto; min-height:0; padding:17px; display:flex; flex-direction:column; gap:20px}
.chat-body.center{padding:24px 20px 30px; align-items:center; gap:0}
.chat-col{width:100%; max-width:760px; display:flex; flex-direction:column; gap:26px}
.msg{display:flex; min-width:0}
.msg.user{justify-content:flex-end}
.bubble{
  background:var(--accent); color:var(--wash); border-radius:14px 14px 5px 14px; padding:10px 14px;
  font-size:12.5px; line-height:1.55; max-width:88%;
}
.chat-col .bubble{border-radius:15px 15px 5px 15px; padding:11px 15px; font-size:13.5px; max-width:80%}
/* max-width, not width:100% — an assistant answer used to stretch the full
   chat pane edge to edge, which read as one side "filling the layout" while
   a user bubble stayed a bounded chip on the other. Bounding it the same way
   (see .bubble's own max-width above) makes the conversation actually read
   as two sides, assistant hugging left and user hugging right, instead of
   one lopsided column. */
.bot{display:flex; gap:13px; max-width:84%; min-width:0}
@media (max-width:640px){.bot{max-width:100%}}
.bot-mark{
  width:24px; height:24px; flex:none; border-radius:8px; background:var(--accent); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center; font-size:10px; margin-top:2px;
}
.bot-in{flex:1; min-width:0}
.bot-text{font-size:13px; line-height:1.65; color:var(--ink-3)}
.chat-col .bot-text{font-size:14px; line-height:1.68}
.bot-text.muted{color:var(--ink-7); font-style:italic}
/* Plain chat prose, paragraph-split on blank lines (see chatParagraphs in
   views.ts) — without this, HTML collapses the model's own newlines and a
   multi-sentence answer reads as one flat, spacing-less block. */
.bot-text p{margin:0 0 10px}
.bot-text p:last-child{margin-bottom:0}

/* Citation cards under a chat answer — the same bordered .thr-r box the
   meeting summary's open-questions/risks use, so "here are the decisions
   this answer is grounded in" reads as the summarization template's box
   points instead of a row of small link chips. */
.cite-thr{margin-top:14px}

/* A meeting-type skill's rendered Markdown (see skillMarkdown.ts) — scoped
   under .skm so none of this leaks into the reset's bare h1-h4 rule or any
   other bot-text answer. */
.bot-text.skm p{margin:0 0 10px}
.bot-text.skm p:last-child{margin-bottom:0}
.bot-text.skm .skm-h1{font-size:16.5px; font-weight:600; color:var(--ink); margin:18px 0 8px}
.bot-text.skm .skm-h1:first-child{margin-top:0}
.bot-text.skm .skm-h2{font-size:14px; font-weight:600; color:var(--ink); margin:14px 0 6px}
.bot-text.skm .skm-h3{font-size:12.5px; font-weight:600; color:var(--ink-2); margin:12px 0 5px}
.bot-text.skm .skm-ul,.bot-text.skm .skm-ol{margin:0 0 10px; padding-left:20px; display:flex; flex-direction:column; gap:4px}
.bot-text.skm .skm-check{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px}
.bot-text.skm .skm-todo{display:flex; align-items:flex-start; gap:8px}
.bot-text.skm .skm-todo.done{color:var(--ink-7); text-decoration:line-through}
.bot-text.skm .skm-box{flex:none; color:var(--edge-3)}
.bot-text.skm .skm-quote{
  margin:0 0 10px; padding:4px 14px; border-left:3px solid var(--edge-3); color:var(--ink-4); font-style:italic;
}
.bot-text.skm .skm-quote p{margin:0 0 4px}
.bot-text.skm .skm-hr{border:none; border-top:1px solid var(--rule); margin:14px 0}
.bot-text.skm .skm-table{border-collapse:collapse; width:100%; margin:0 0 10px; font-size:12px}
.bot-text.skm .skm-table th,.bot-text.skm .skm-table td{border:1px solid var(--rule); padding:6px 9px; text-align:left; vertical-align:top}
.bot-text.skm .skm-table th{background:var(--soft); font-weight:600; color:var(--ink-2)}

/* Evaluator's optional job-description field on its Discover card. */
.sk-jd{width:100%; margin-top:8px; font-size:11.5px; resize:vertical}

/* skill-run banner inside the thread */
.skillrun{
  display:flex; align-items:center; gap:10px; background:var(--soft); border:1px solid var(--rule);
  border-radius:12px; padding:10px 13px; width:100%; flex-wrap:wrap;
}
.skillrun-t{font-size:12.5px; font-weight:600; color:var(--ink)}
.skillrun-m{font-size:9px; color:var(--ink-7); letter-spacing:0.06em}

/* structured rows a bot answer can carry */
.rows{background:var(--card); border:1px solid var(--rule); border-radius:13px; overflow:hidden; margin-top:14px}
.rows-r{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-bottom:1px solid var(--rule-4)}
.rows-r:last-child{border-bottom:none}
.rows-t{font-size:12.5px; line-height:1.55; color:var(--ink-2)}
.rows-src{font-size:9px; color:var(--ink-7); margin-top:5px; letter-spacing:0.04em}

.cites{display:flex; align-items:center; gap:6px; margin-top:14px; flex-wrap:wrap}
.cites-l{font-size:9px; color:var(--ink-7); letter-spacing:0.09em; flex:none}
.acts{display:flex; gap:7px; margin-top:13px; flex-wrap:wrap}
/* A suggested-followup is a real, tiny submittable form (see chatMessages in
   views.ts), not inert text — this just keeps it from taking on a form's
   default block layout/margins inside the flex row above. */
.act-form{margin:0; display:inline-flex}
.act-form .act{font:inherit}

/* pull-quote in a bot answer (meeting page) */
.pq{margin-top:11px; border-left:2px solid var(--edge); padding:2px 0 2px 12px}
.pq-t{font-style:italic; font-size:13.5px; line-height:1.55; color:var(--ink-4)}
.pq-src{font-size:9px; color:var(--ink-7); margin-top:6px; letter-spacing:0.04em}

/* composer */
.composer{flex:none; padding:12px 15px 15px; border-top:1px solid var(--rule-3)}
.composer.lg{padding:14px 20px 18px; display:flex; justify-content:center}
.composer-col{width:100%; max-width:760px}
.composer-box{position:relative; background:var(--soft); border:1px solid var(--rule-2); border-radius:13px; padding:10px 12px}
.composer.lg .composer-box{border-radius:14px; padding:12px 14px}
.composer-box textarea{
  width:100%; border:none; outline:none; font-family:inherit; font-size:12.5px; background:transparent;
  color:var(--ink); resize:none; line-height:1.55; padding:0; display:block;
}
.composer.lg .composer-box textarea{font-size:13.5px}
.composer-r{display:flex; align-items:center; gap:6px; margin-top:10px; flex-wrap:wrap}
/* Hidden until /app.js confirms SpeechRecognition exists in this browser —
   an absent affordance beats a dead click on Firefox/Safari. */
.mic-btn{
  display:none; width:30px; height:30px; flex:none; border-radius:999px; border:1px solid var(--rule-2);
  background:var(--card); font-size:14px; line-height:1; cursor:pointer; color:var(--ink-6);
}
html.js .mic-btn{display:inline-flex; align-items:center; justify-content:center}
.mic-btn:hover{background:var(--soft); color:var(--ink)}
.mic-btn.listening{background:var(--late-bg); border-color:var(--late); color:var(--late); animation:mic-pulse 1.4s ease-in-out infinite}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 var(--late-bg)}50%{box-shadow:0 0 0 6px transparent}}
@media (prefers-reduced-motion:reduce){.mic-btn.listening{animation:none}}
.composer-note{font-size:11px; color:var(--ink-7); margin-top:9px; text-align:center}

/* @mention (meetings) / #mention (skills) menu — see clientScript.ts. Opens
   upward, anchored to the composer box, since the composer sits at the
   bottom of the chat pane and there is rarely room to open downward. */
.mention-menu{
  position:absolute; left:0; right:0; bottom:100%; margin-bottom:8px; max-height:240px; overflow-y:auto;
  background:var(--card); border:1px solid var(--rule-2); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:5px; z-index:5;
}
.mention-item{
  display:flex; align-items:baseline; gap:9px; padding:8px 10px; border-radius:8px; cursor:pointer;
}
.mention-item.hl,.mention-item:hover{background:var(--soft-2)}
.mi-t{font-size:12.5px; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1}
.mi-s{font-size:10px; color:var(--ink-7); flex:none}
.sugg-row{display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap}

/* ========================================================================= */
/* ASK CHRONICLE                                                             */
/* ========================================================================= */
.ask-shell{
  flex:1; min-height:0; display:grid; grid-template-columns:384px minmax(0,1fr);
  gap:14px; padding:18px; overflow:hidden;
}
@media (max-width:1360px){.ask-shell{grid-template-columns:336px minmax(0,1fr)}}
@media (max-width:1000px){
  .ask-shell{display:flex; flex-direction:column; gap:14px; overflow-y:auto}
  .ask-panel{flex:none; order:1; height:430px}
  .ask-chat{flex:none; order:2; height:620px}
}
@media (max-width:760px){.ask-shell{padding:14px}}
.ask-panel{min-height:0}
.ask-chat{min-height:0}
.panel-h{flex:none; padding:14px 16px 12px; border-bottom:1px solid var(--rule-3)}
.panel-search{
  display:flex; align-items:center; gap:9px; background:var(--soft); border:1px solid var(--rule-2);
  border-radius:9px; padding:8px 11px; margin:12px 0 0;
}
.panel-search input{border:none; outline:none; font-family:inherit; font-size:12.5px; background:transparent; width:100%; padding:0}
.panel-body{flex:1; overflow-y:auto; min-height:0; padding:12px 12px 20px}
.panel-body.pad{padding:12px 14px 20px}

/* Discover: collapsible skill groups */
.grp{margin-bottom:8px}
.grp-h{
  display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px;
  font-size:12.5px; font-weight:600; color:var(--ink-4); text-decoration:none; cursor:pointer;
}
.grp-h:hover{background:var(--soft); color:var(--ink); text-decoration:none}
.grp-h.open{background:var(--paper); color:var(--ink)}
.grp-caret{font-size:9px; color:var(--ink-7); flex:none; display:inline-block}
.grp-h.open .grp-caret{transform:rotate(90deg)}
.grp-n{font-size:9.5px; color:var(--ink-7); flex:none}
.grp-items{display:flex; flex-direction:column; gap:5px; padding:7px 0 4px 6px}
.sk{
  background:var(--soft); border:1px solid var(--rule-3); border-radius:11px; padding:11px 12px;
  display:block; text-decoration:none; color:inherit; width:100%; text-align:left;
  font-family:inherit; cursor:pointer;
}
.sk:hover{border-color:var(--edge); text-decoration:none}
.sk-top{display:flex; align-items:center; gap:8px}
.sk-n{font-size:12.5px; font-weight:500; flex:1; min-width:0; color:var(--ink)}
.sk-m{font-size:8.5px; letter-spacing:0.07em; color:var(--ink-7); background:var(--paper);
      border-radius:5px; padding:3px 6px; flex:none}
.sk-d{font-size:11.5px; color:var(--ink-7); line-height:1.5; margin-top:5px}
.grp-blurb{font-size:11px; color:var(--ink-7); line-height:1.45; padding:2px 10px 0}
.sk-form{margin:0}
.sk-run{display:flex; align-items:center; gap:7px; margin-top:9px}
.sk-pick{font-size:11.5px; padding:5px 8px; border-radius:8px; flex:1; min-width:0}
.sk-note{font-size:10.5px; color:var(--soon); margin-top:6px}

/* Skills: create card + owned/shared lists */
.mk{
  display:flex; align-items:center; gap:11px; border:1.5px dashed var(--dash); border-radius:13px;
  padding:13px 14px; margin-bottom:16px; text-decoration:none; color:inherit;
}
.mk:hover{border-color:var(--ink-7); background:var(--soft); text-decoration:none}
.mk-t{font-size:13px; font-weight:600; color:var(--ink)}
.mk-d{font-size:11.5px; color:var(--ink-7); margin-top:3px; line-height:1.45}
.mkform{background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:15px 15px 13px; margin-bottom:18px}
.mkform-h{display:flex; align-items:center; gap:8px; margin-bottom:13px}
.mkform-t{font-size:12.5px; font-weight:600; color:var(--ink)}
.mkform-x{font-size:12px; color:var(--ink-7); text-decoration:none; flex:none}
.mkform-x:hover{color:var(--ink); text-decoration:none}
.mkform-fields{display:flex; flex-direction:column; gap:10px}

.myskills{display:flex; flex-direction:column; gap:9px; margin-bottom:20px}
.msk{background:var(--card); border:1px solid var(--rule); border-radius:13px; padding:13px 14px}
.msk:hover{border-color:var(--edge)}
.msk-top{display:flex; align-items:center; gap:8px}
.msk-n{font-size:12.5px; font-weight:600; flex:1; min-width:0; color:var(--ink);
       overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.msk-d{font-size:11.5px; color:var(--ink-7); line-height:1.5; margin-top:7px}
.msk-foot{display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap}
.shared{display:flex; flex-direction:column; gap:7px}
.shk{
  display:flex; align-items:center; gap:10px; background:var(--soft); border:1px solid var(--rule);
  border-radius:11px; padding:11px 13px;
}
.shk:hover{border-color:var(--edge); background:var(--card)}
.shk-n{font-size:12.5px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.shk-b{font-size:11px; color:var(--ink-7); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ========================================================================= */
/* MEETING DETAIL                                                            */
/* ========================================================================= */
.mtg-shell{
  flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 380px;
  grid-template-rows:minmax(0,1.05fr) minmax(0,1fr); gap:14px; padding:18px; overflow:hidden;
}
@media (max-width:1440px){.mtg-shell{grid-template-columns:minmax(0,1fr) 336px}}
@media (max-width:1120px){
  .mtg-shell{display:flex; flex-direction:column; gap:14px; overflow-y:auto}
  .mtg-mid{flex:none; order:1; height:640px}
  .mtg-rail{flex:none; order:2}
  .mtg-chat{flex:none; order:3; height:520px}
  .mtg-people{flex:none; height:400px}
}
@media (max-width:760px){.mtg-shell{padding:14px}}
.mtg-mid{grid-column:1; grid-row:1 / span 2; min-height:0}
.mtg-rail{grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:14px; min-width:0; min-height:0}
.mtg-people{flex:1 1 auto; min-height:0}
.mtg-chat{grid-column:2; grid-row:2; min-height:0}
.mid-h{
  flex:none; display:flex; align-items:center; gap:12px; padding:13px 20px;
  border-bottom:1px solid var(--rule-3); flex-wrap:wrap;
}
.mid-meta{font-size:9px; color:var(--ink-7); letter-spacing:0.06em}
.blocks{display:flex; flex-direction:column; gap:26px; max-width:78ch}

/* one-paragraph summary lead */
.para{font-size:20px; line-height:1.5; color:var(--ink-2); margin:0}

/* decision cards with the left rule */
.decs{display:flex; flex-direction:column; gap:9px}
.dec{
  display:flex; gap:13px; align-items:flex-start; background:var(--soft); border:1px solid var(--rule);
  border-left:2.5px solid var(--ink-5); border-radius:0 12px 12px 0; padding:13px 15px;
}
.dec.unverified{border-left-color:var(--soon)}
.dec-t{font-size:13.5px; line-height:1.55; color:var(--ink-h); font-weight:500}
.dec-m{display:flex; gap:12px; margin-top:7px; font-size:9.5px; color:var(--ink-7); letter-spacing:0.04em; flex-wrap:wrap}

/* action item rows with checkboxes */
.acts-card{background:var(--card); border:1px solid var(--rule); border-radius:13px; overflow:hidden}
.ai{display:flex; gap:12px; align-items:flex-start; padding:12px 15px; border-bottom:1px solid var(--rule-4)}
.ai:last-child{border-bottom:none}
.ai-box{width:16px; height:16px; border:1.5px solid var(--edge); border-radius:5px; flex:none; margin-top:2px}
.ai-t{font-size:13px; line-height:1.5; color:#2E2C26}
.ai-m{display:flex; align-items:center; gap:9px; margin-top:7px; flex-wrap:wrap}
.ai-owner{font-size:11.5px; color:var(--ink-6)}

/* quote block under a decision/action (grounding evidence) */
.ev{margin-top:8px; border-left:2px solid var(--edge); padding:1px 0 1px 11px}
.ev-q{font-size:12px; font-style:italic; line-height:1.55; color:var(--ink-5)}
.ev-s{font-size:9px; color:var(--ink-7); margin-top:4px; letter-spacing:0.04em}
.ev.unverified{border-left-color:var(--soon)}

/* transcript */
.tr-h{display:flex; align-items:center; gap:9px; margin-bottom:20px; flex-wrap:wrap}
.tr-search{
  display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--rule-2);
  border-radius:9px; padding:7px 11px; flex:1 1 auto; min-width:160px; max-width:280px; margin:0;
}
.tr-search input{border:none; outline:none; font-family:inherit; font-size:12.5px; background:transparent; width:100%; padding:0}
.tr-lines{display:flex; flex-direction:column; gap:18px}
.tl{display:grid; grid-template-columns:46px minmax(0,1fr); gap:14px; align-items:flex-start}
.tl-time{font-size:10px; color:var(--ink-7); padding-top:4px}
.tl-top{display:flex; align-items:center; gap:8px; margin-bottom:4px; flex-wrap:wrap}
.tl-who{font-size:12px; font-weight:600; color:var(--ink-h)}
.tl-text{font-size:13.5px; line-height:1.65; color:var(--ink-4)}
.tl-text.marked{background:var(--soft); border-radius:9px; padding:9px 12px; margin-left:-12px}

/* deep dive */
.dd-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px}
@media (max-width:1360px){.dd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.dd-stats{grid-template-columns:1fr}}
.dd-card{background:var(--soft); border:1px solid var(--rule); border-radius:14px; padding:15px 16px}
.dd-v{font-size:26px; line-height:1; margin-top:9px; letter-spacing:-0.015em; color:var(--ink)}
.dd-v-sub{font-size:15px; color:var(--ink-7); font-weight:400}
.dd-s{font-size:11.5px; color:var(--ink-7); margin-top:7px; line-height:1.45}
.dd-rows{background:var(--card); border:1px solid var(--rule); border-radius:14px; overflow:hidden}
.dd-r{display:flex; gap:13px; align-items:flex-start; padding:13px 16px; border-bottom:1px solid var(--rule-4)}
.dd-r:last-child{border-bottom:none}
.dd-rt{font-size:12.5px; line-height:1.55; color:var(--ink-4)}
.thr{display:flex; flex-direction:column; gap:9px}
.thr-r{display:flex; gap:12px; background:var(--card); border:1px solid var(--rule); border-radius:13px;
       padding:14px 15px; align-items:flex-start}
.thr-t{font-size:13px; line-height:1.55; color:var(--ink-2)}
.thr-s{font-size:9px; color:var(--ink-7); margin-top:6px; letter-spacing:0.04em}

/* decision-evolution timeline */
.tline-r{display:grid; grid-template-columns:74px 20px minmax(0,1fr); gap:10px; align-items:flex-start}
.tline-d{font-size:9.5px; color:var(--ink-7); padding-top:9px; text-align:right}
.tline-rail{display:flex; flex-direction:column; align-items:center; height:100%}
.tline-dot{width:9px; height:9px; border-radius:50%; flex:none; margin-top:9px; background:var(--edge)}
.tline-r.now .tline-dot{background:var(--accent)}
.tline-line{width:1.5px; flex:1; background:var(--rule); margin-top:3px}
.tline-r:last-child .tline-line{display:none}
.tline-b{padding:6px 0 16px}
.tline-t{font-size:12.5px; line-height:1.55; color:var(--ink-2)}
.tline-s{font-size:9px; color:var(--ink-7); margin-top:5px; letter-spacing:0.04em}

/* agenda + topics + participants (right rail) */
.ag{display:flex; flex-direction:column; gap:11px; margin-bottom:22px}
.ag-r{display:flex; gap:10px; align-items:flex-start}
.ag-m{
  width:17px; height:17px; flex:none; margin-top:1px; border-radius:5px; display:flex;
  align-items:center; justify-content:center; font-size:9.5px; background:var(--good-bg); color:var(--good);
}
.ag-r.miss .ag-m{background:var(--soon-bg); color:var(--soon)}
.ag-t{font-size:12.5px; line-height:1.5; color:var(--ink-4)}
.ag-r.miss .ag-t{color:var(--soon)}
.ag-n{font-size:9px; color:var(--ink-7); margin-top:4px; letter-spacing:0.04em}
.tp{display:flex; flex-direction:column; gap:12px}
.tp-r{min-width:0}
.tp-top{display:flex; align-items:baseline; gap:8px; margin-bottom:5px}
.tp-n{font-size:12.5px; color:var(--ink-4); flex:1; min-width:0}
.tp-m{font-size:9.5px; color:var(--ink-7); flex:none}
.tp-track{height:6px; background:var(--soft-2); border-radius:4px; overflow:hidden}
.tp-bar{height:100%; border-radius:4px; background:var(--ink-5)}
.tp-bar.low{background:#C4BFB4}
.tp-note{font-size:11px; color:var(--ink-7); margin-top:5px; line-height:1.45}

.pp{display:flex; gap:11px; align-items:flex-start; padding:12px 17px; border-bottom:1px solid var(--rule-4)}
.pp:last-child{border-bottom:none}
.pp:hover{background:var(--soft)}
.pp-top{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.pp-n{font-size:12.5px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pp-bar-row{display:flex; align-items:center; gap:9px; margin-top:7px}
.pp-track{flex:1; height:4px; background:var(--soft-2); border-radius:3px; overflow:hidden}
/* display:block is load-bearing: .pp-bar is a <span>, and the w-N width
   utility classes (see the "quantized bar widths" block below) have no
   effect on an inline element's width — it silently rendered at 0 width
   regardless of pct, which read as "the bar never fills". */
.pp-bar{display:block; height:100%; border-radius:3px; background:var(--ink-5)}
.pp-bar.mid{background:var(--edge-3)}
.pp-bar.none{background:var(--rule-2)}
.pp-pct{font-size:9.5px; color:var(--ink-7); width:30px; text-align:right; flex:none}

/* ========================================================================= */
/* UPLOAD                                                                    */
/* ========================================================================= */
.up-shell{
  flex:1; min-height:0; display:grid; grid-template-columns:452px minmax(0,1fr);
  gap:14px; padding:18px; overflow:hidden;
}
@media (max-width:1400px){.up-shell{grid-template-columns:400px minmax(0,1fr)}}
@media (max-width:1040px){
  .up-shell{display:flex; flex-direction:column; gap:14px; overflow-y:auto}
  .up-src{flex:none; order:1; height:auto; max-height:none}
  .up-res{flex:none; order:2; min-height:520px}
}
@media (max-width:760px){.up-shell{padding:14px}}
.up-src{min-height:0}
.up-res{min-height:0}
.drop{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  border:1.5px dashed var(--edge-2); background:var(--soft); border-radius:14px;
  padding:26px 20px; cursor:pointer;
}
.drop:hover{border-color:var(--ink-7)}
.drop-i{
  width:40px; height:40px; flex:none; border-radius:13px; background:var(--soft-3); color:var(--tone-ink);
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.drop-t{font-size:13.5px; font-weight:600; margin-top:12px; color:var(--ink)}
.drop-d{font-size:12px; color:var(--ink-7); margin-top:5px; line-height:1.55; max-width:300px}
.drop-fmts{display:flex; gap:5px; margin-top:13px; flex-wrap:wrap; justify-content:center}
.drop input[type=file]{margin-top:12px; font-size:11.5px; max-width:100%; font-family:inherit; color:var(--ink-6)}

.fl{display:flex; flex-direction:column; gap:7px}
.fl-r{
  display:flex; align-items:center; gap:11px; background:var(--soft); border:1px solid var(--rule);
  border-radius:11px; padding:11px 12px;
}
.fl-ext{width:36px; text-align:center; padding:5px 0; font-size:8.5px; letter-spacing:0.09em;
        border-radius:5px; background:var(--soft-3); color:var(--tone-ink); flex:none}
.fl-n{font-size:12.5px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fl-m{font-size:9px; color:var(--ink-7); margin-top:4px; letter-spacing:0.04em}

.up-sec{margin-top:20px; padding-top:18px; border-top:1px solid var(--rule-3)}
.styles{display:flex; flex-direction:column; gap:7px}
.st{
  position:relative; display:flex; gap:11px; align-items:flex-start; border:1px solid var(--sand-3);
  background:var(--card); border-radius:11px; padding:11px 12px; cursor:pointer;
}
.st:hover{border-color:var(--edge)}
.st.on{border-color:var(--edge-2); background:var(--soft)}
.st input{position:absolute; opacity:0; width:0; height:0}
.st-dot{width:13px; height:13px; flex:none; border-radius:50%; margin-top:2px;
        border:1.5px solid var(--edge); background:transparent}
.st.on .st-dot{border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 2.5px var(--card)}
.st-n{font-size:12.5px; font-weight:500; color:var(--ink)}
.st-d{font-size:11.5px; color:var(--ink-7); margin-top:3px; line-height:1.5}
.extras{display:flex; gap:6px; margin-top:12px; flex-wrap:wrap}
.up-ready{flex:1; min-width:0; font-size:11.5px; color:var(--ink-7); line-height:1.45}

/* result pane states */
.res-idle{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 32px; text-align:center;
}
.res-i{
  width:46px; height:46px; flex:none; border-radius:14px; background:var(--soft-2); color:var(--ink-7);
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.res-h{font-size:27px; line-height:1.2; margin-top:16px; letter-spacing:-0.01em; color:var(--ink)}
.res-d{font-size:13px; color:var(--ink-7); margin-top:10px; line-height:1.6; max-width:330px}
.steps{display:flex; flex-direction:column; gap:8px; margin-top:22px; width:100%; max-width:340px}
.step{
  display:flex; align-items:center; gap:11px; background:var(--soft); border:1px solid var(--rule-3);
  border-radius:10px; padding:10px 12px; text-align:left;
}
.step-n{font-size:9px; color:var(--ink-7); width:14px; flex:none}
.step-t{font-size:12px; color:var(--ink-5); line-height:1.45}

.res-work{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 32px}
.work-col{width:100%; max-width:360px}
.track{height:3px; border-radius:3px; background:var(--sand-3); overflow:hidden; margin-bottom:22px}
.sweep{width:30%; height:100%; background:var(--accent); border-radius:3px; animation:chsweep 1.5s ease-in-out infinite}
.pipe{display:flex; flex-direction:column; gap:9px}
.pipe-r{display:flex; align-items:center; gap:11px}
.pipe-dot{
  width:17px; height:17px; flex:none; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:9px; background:var(--soft-2); color:var(--ink-8);
}
.pipe-r.done .pipe-dot{background:#E4EBE5; color:var(--good)}
.pipe-r.live .pipe-dot{background:var(--accent); color:var(--on-accent); animation:chpulse 1.4s ease-in-out infinite}
.pipe-t{font-size:12.5px; color:var(--ink-3)}
.pipe-r.wait .pipe-t{color:var(--ink-8)}
.pipe-time{font-size:9px; color:var(--ink-8)}

.res-h-bar{
  flex:none; display:flex; align-items:center; gap:9px; padding:12px 20px;
  border-bottom:1px solid var(--rule-3); flex-wrap:wrap;
}
.res-dot{width:6px; height:6px; flex:none; border-radius:50%; background:var(--live)}
.res-body{flex:1; overflow-y:auto; min-height:0; display:flex; justify-content:center; padding:24px 20px 28px}
.res-col{width:100%; max-width:720px}
.res-kicker{font-size:9px; letter-spacing:0.1em; color:var(--ink-7)}
.res-title{font-size:31px; line-height:1.15; letter-spacing:-0.015em; margin-top:9px; color:var(--ink)}
.res-narr{font-size:14.5px; line-height:1.7; color:var(--ink-3); margin-top:14px}
.res-stats{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}
.res-stat{flex:1; min-width:130px; background:var(--soft); border:1px solid var(--rule-3);
          border-radius:12px; padding:12px 13px}
.res-stat-v{font-size:25px; line-height:1; color:var(--ink)}
.res-stat-k{font-size:8.5px; letter-spacing:0.09em; color:var(--ink-7); margin-top:6px}
.res-sec{font-size:9px; letter-spacing:0.1em; color:var(--ink-7); margin:24px 0 10px}
.dl-bar{
  flex:none; padding:13px 20px 15px; border-top:1px solid var(--rule-3); background:var(--soft);
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}

/* ================================= sign-in ================================= */
/* Layered, on-brand backdrop instead of the flat paper fill: a soft double
   radial glow (orange, echoing the Viva Railings mark) plus a faint diagonal
   line pattern evoking railing balusters, all pure CSS gradients — no image
   asset, nothing for the CSP to allow beyond what's already same-origin. */
.signin{
  position:relative; overflow:hidden;
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background-color:var(--paper);
  background-image:
    radial-gradient(920px 640px at 6% -12%, rgba(232,135,30,0.26), transparent 62%),
    radial-gradient(680px 540px at 100% 4%, rgba(232,135,30,0.12), transparent 56%),
    radial-gradient(820px 660px at 94% 114%, rgba(46,51,47,0.16), transparent 58%),
    repeating-linear-gradient(115deg, rgba(35,34,30,0.035) 0 2px, transparent 2px 34px);
}
/* A railing silhouette rising from the floor of the page — literal to what
   Viva Railings makes, and a much more distinctive backdrop than a flat
   gradient. Balusters fade upward via the mask so they read as a horizon,
   not a busy foreground; pure CSS, no image asset. */
.signin::before{
  content:''; position:absolute; inset:auto 0 0 0; height:40vh; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to top, rgba(35,34,30,0.14), transparent 88%),
    repeating-linear-gradient(90deg, rgba(35,34,30,0.16) 0 3px, transparent 3px 27px),
    linear-gradient(to top, rgba(232,135,30,0.10), transparent 40%);
  -webkit-mask-image:linear-gradient(to top, black, transparent);
  mask-image:linear-gradient(to top, black, transparent);
}
.signin-card{position:relative; z-index:1; width:100%; max-width:460px; background:var(--card); border:1px solid var(--rule);
             border-radius:18px; overflow:hidden; box-shadow:0 24px 60px -24px rgba(35,34,30,0.28)}
.signin-top{
  padding:34px 28px 26px; border-bottom:1px solid var(--rule-3); background:var(--panel);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px;
}
.signin-name{font-size:22px; line-height:1.15; letter-spacing:-0.015em; margin-top:12px; color:var(--ink)}
.signin-body{padding:22px 28px 28px; display:flex; flex-direction:column; gap:14px}

/* a couple of spacing one-offs that don't earn a component class */
.mt-13{margin-top:13px}

/* "working…" placeholder while a chat turn is in flight — a real spinner
   (the same one Upload/summarize already uses), not just italic text, so a
   several-second Claude call reads as "in progress" rather than "did my
   click even register". */
.chat-pending{
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:12.5px; color:var(--ink-7); font-style:italic; padding:16px 0;
}
/* Same spinner+row outside a chat pane — a Discover/Skills "Run" form has
   nowhere to append a centered chat-style row into, but still needs a
   visible "working on it" state while a real Claude call is in flight. */
.inline-pending{justify-content:flex-start; padding:9px 2px 0; font-style:normal}

/* ============================== share summary ============================== */
.share-sec{display:flex; flex-direction:column; gap:4px}
.share-sec + .share-sec{margin-top:18px; padding-top:16px; border-top:1px solid var(--rule-3)}
.share-t{font-size:13px; font-weight:600; color:var(--ink)}
.share-d{font-size:11.5px; color:var(--ink-7); line-height:1.5; margin-bottom:6px}
.share-sec .field-l{margin-top:6px}
.share-url{word-break:break-all}

/* ================================= modal ==================================== */
/* Generic small-popup pattern: a hidden checkbox (.modal-toggle) drives a
   :checked sibling reveal of the overlay that follows it — no JS required to
   open or close, consistent with every other CSS-only switch in this app
   (see .style-switch). A label for="..." anywhere on the page can toggle it;
   the overlay's own backdrop label closes it the same way. */
.modal-toggle:checked ~ .modal-overlay{display:flex}
.modal-overlay{
  display:none; position:fixed; inset:0; z-index:50; align-items:center; justify-content:center; padding:20px;
}
.modal-backdrop{position:absolute; inset:0; background:rgba(35,34,30,0.45); cursor:pointer}
.modal-card{
  position:relative; width:100%; max-width:420px; max-height:min(600px,86vh); overflow-y:auto;
  background:var(--card); border:1px solid var(--rule); border-radius:16px;
  box-shadow:0 30px 70px -20px rgba(35,34,30,0.35);
}
.modal-head{
  display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--rule-3);
  position:sticky; top:0; background:var(--card);
}
.modal-title{font-size:14.5px; font-weight:600; color:var(--ink); flex:1}
.modal-x{
  cursor:pointer; width:26px; height:26px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; color:var(--ink-7); font-size:13px;
}
.modal-x:hover{background:var(--soft); color:var(--ink)}
.modal-body{padding:16px 18px 20px}

/* standalone page behind a share link — no app shell */
.shared-wrap{min-height:100vh; background:var(--paper); padding:28px 20px 60px; display:flex; justify-content:center}
.shared-card{width:100%; max-width:760px; background:var(--card); border:1px solid var(--rule); border-radius:18px; overflow:hidden}
.shared-head{display:flex; gap:14px; align-items:flex-start; padding:24px 26px 20px; border-bottom:1px solid var(--rule); background:var(--panel)}
.shared-body{padding:24px 26px 30px}

/* ===================== v3 summary (Fireflies-shaped) ===================== */

/* section header + copy button. The button is hidden until /app.js adds .js to
   <html> — writing the clipboard needs JS, so without it this would be dead. */
.sec-head{display:flex; align-items:center; gap:8px}
.copy-btn{
  display:none; background:none; border:1px solid var(--rule-2); border-radius:6px;
  padding:1px 6px; font-family:inherit; font-size:11px; line-height:1.5; color:var(--ink-7);
  cursor:pointer; flex:none;
}
html.js .copy-btn{display:inline-block}
.copy-btn:hover{border-color:var(--edge-3); color:var(--ink); background:var(--soft)}
.copy-btn:disabled{color:var(--good); border-color:var(--good-bg); cursor:default}

/* (3) meeting header block */
.mhead{border-bottom:1px solid var(--rule); padding-bottom:18px}
.mhead-kicker{font-size:9px; letter-spacing:0.1em; color:var(--ink-7)}
.mhead-t{font-size:31px; line-height:1.15; letter-spacing:-0.015em; margin-top:8px; color:var(--ink)}
.mhead-facts{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:9.5px;
             letter-spacing:0.06em; color:var(--ink-7)}
.mhead-people{display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:12px}
.who{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-5)}

/* keywords */
.kw{display:flex; flex-wrap:wrap; gap:6px}
.kw-c{font-size:11.5px; color:var(--ink-5); background:var(--soft-2); border-radius:6px; padding:4px 10px}

/* (4) timestamp jump link */
.stamp{
  font-size:10px; color:var(--ink-6); background:var(--soft-2); border-radius:5px; padding:2px 6px;
  text-decoration:none; white-space:nowrap; flex:none;
}
.stamp:hover{background:var(--rule-2); color:var(--ink); text-decoration:none}

/* (2) outline — timestamped bullet notes */
.outline{display:flex; flex-direction:column; gap:16px}
.ol-sec{min-width:0}
.ol-h{display:flex; align-items:center; gap:9px; margin-bottom:7px}
.ol-t{font-size:13px; font-weight:600; color:var(--ink)}
.ol-pts{margin:0; padding:0 0 0 4px; list-style:none; display:flex; flex-direction:column; gap:7px}
.ol-pts li{display:flex; align-items:flex-start; gap:9px; font-size:12.5px; line-height:1.6; color:var(--ink-4)}
.ol-pts li::before{content:"·"; color:var(--ink-7); flex:none; line-height:1.6}
.ol-p{flex:1; min-width:0}

/* (5) meeting timeline — topics laid out proportionally by real elapsed time */
.mtl{display:flex; gap:2px; height:30px; align-items:stretch}
.mtl-seg{
  display:flex; align-items:center; justify-content:center; overflow:hidden; min-width:0;
  background:var(--soft-2); border-radius:5px; text-decoration:none; padding:0 6px;
}
.mtl-seg:hover{background:var(--rule-2); text-decoration:none}
.mtl-seg span{font-size:10px; color:var(--ink-5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mtl-axis{display:flex; margin-top:5px; font-size:9px; color:var(--ink-7); letter-spacing:0.05em}

/* (7) Department Skill grouped view — decisions/actions/open questions/risks
   nested under one project or topic-part heading */
.grp-block{border:1px solid var(--rule); border-radius:14px; padding:14px 16px; margin-bottom:14px; background:var(--soft)}
.grp-h{margin-bottom:10px}
.grp-t{font-size:16px; color:var(--ink)}
.grp-sub{margin-top:14px}
.grp-sub:first-of-type{margin-top:0}
.grp-sub > .lbl{margin-bottom:7px}

/* (5) tasks grouped by the job they are filed against */
.tgrp{margin-bottom:14px}
.tgrp-h{display:flex; align-items:center; gap:9px; margin-bottom:7px}
.tgrp-n{font-size:9px; letter-spacing:0.09em; color:var(--ink-6); background:var(--soft-3);
        border-radius:5px; padding:3px 8px}
.tgrp-c{font-size:9px; letter-spacing:0.06em; color:var(--ink-7)}
.ai-owner.unowned{color:var(--ink-7); font-style:italic}

/* (5) delivery schedule — one row per task that has a spoken date */
.gantt{display:flex; flex-direction:column; gap:8px}
.gantt-r{display:grid; grid-template-columns:minmax(0,1fr) 140px 74px 22px; gap:11px; align-items:center}
@media (max-width:820px){.gantt-r{grid-template-columns:minmax(0,1fr) 74px 22px} .gantt-track{display:none}}
.gantt-l{font-size:12.5px; color:var(--ink-4); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gantt-track{position:relative; height:6px; background:var(--soft-2); border-radius:4px}
.gantt-fill{display:block; height:100%; background:var(--edge); border-radius:4px}
.gantt-pin{position:absolute; top:-3px; right:-2px; width:11px; height:11px; border-radius:50%;
           background:var(--accent); border:2px solid var(--card)}
.gantt-pin.late{background:var(--late)}
.gantt-d{font-size:10px; color:var(--ink-6); text-align:right}
.gantt-d.late{color:var(--late); font-weight:500}

/* ---- quantized bar widths -------------------------------------------------
   Progress/talk-time bars need a data-driven width, but CSP's style-src 'self'
   blocks inline style attributes (and a custom property set inline is still an
   inline style). So widths are quantized to 5% steps and applied as a class —
   see views.ts's widthClass(). Visually indistinguishable at these bar sizes. */
.w-0{width:0}
.w-5{width:5%}    .w-10{width:10%}  .w-15{width:15%}  .w-20{width:20%}
.w-25{width:25%}  .w-30{width:30%}  .w-35{width:35%}  .w-40{width:40%}
.w-45{width:45%}  .w-50{width:50%}  .w-55{width:55%}  .w-60{width:60%}
.w-65{width:65%}  .w-70{width:70%}  .w-75{width:75%}  .w-80{width:80%}
.w-85{width:85%}  .w-90{width:90%}  .w-95{width:95%}  .w-100{width:100%}

/* Applied-shaping strip on a summary: which Upload options produced it. */
.applied{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.applied-n{font-size:10px; color:var(--ink-7); letter-spacing:0.04em}
/* Narrative style leads with the prose, so it gets display size. */
.para.lead{font-size:17px; line-height:1.62}

/* "Now" flag on a meeting that has started but not finished. It appears under
   Upcoming, so the row has to say why it is there. */
.pill.now{background:var(--good-bg); color:var(--good); display:inline-flex; align-items:center; gap:5px}
.pill.now .live-dot{width:5px; height:5px; background:var(--live)}