/* ==========================================================================
   Lexlegis OS shell — system bar, app launcher, context rail, palette, timer, Home
   and matter workspace pages. Built on the app.css tokens (colours, radii,
   fonts, dark theme) so everything follows the existing design system.
   Loaded globally from base.html (hx-boost never re-injects <head>).

   Suite layout (design system v2): the bar and rail sit on the mist canvas
   (--bg); rail pages put their content in a white rounded panel. Pages that
   need the full bleed opt out with .os-shell--fullbleed (see base_app.html).
   ========================================================================== */

:root {
  --os-rail-w: 244px;
}

/* ---- Shell layout -------------------------------------------------------- */
.os-shell {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  /* Legacy page CSS positions full-bleed stages from the sidebar width
     (e.g. .ask-stage::before). Inside the OS shell that edge is the rail. */
  --sidebar-w: 0px;
  --sidebar-w-collapsed: 0px;
}
.os-shell--has-rail { --sidebar-w: var(--os-rail-w); --sidebar-w-collapsed: var(--os-rail-w); }
.os-body { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.os-shell--has-rail .os-body { grid-template-columns: var(--os-rail-w) minmax(0, 1fr); }
/* .main is a grid item: app.css's `margin-inline: auto` would stop it
   stretching (auto margins make a grid item shrink-to-fit), so it came out as
   wide as its content. Rail pages (matter workspace, apps) use the whole
   column; Home's desk keeps a reading width inside the panel. */
.os-shell .main {
  min-width: 0;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-bottom: calc(2rem + var(--statusbar-h, 30px));
}
/* Home without a rail (no org yet) keeps a centred reading width. */
.os-shell--home:not(.os-shell--has-rail) .main { max-width: 1440px; margin-inline: auto; }
/* The content panel (Drive / Gmail style): white, rounded, floating on the
   canvas beside the rail. Min-height fills the viewport under the bar so
   short pages still read as one sheet. */
@media (min-width: 992px) {
  .os-shell--has-rail:not(.os-shell--fullbleed) .main {
    background: var(--bg-elev);
    border-radius: var(--radius-lg);
    margin: 0 16px calc(var(--statusbar-h, 30px) + 12px) 0;
    min-height: calc(100dvh - var(--os-bar-h, var(--topbar-h)) - var(--statusbar-h, 30px) - 12px);
    padding-bottom: 3rem;
    overflow-x: clip;
    /* Own stacking context, so fixed z-index:-1 washes (.ask-stage::before)
       paint above the panel's white fill instead of behind it. */
    position: relative; isolation: isolate;
  }
  [data-theme="dark"] .os-shell--has-rail:not(.os-shell--fullbleed) .main { background: var(--bg-elev); }
}

/* Viewport-fit pages: run pages (.focus-shell — Ask / Interact / Draft / MIRA
   runs) and the Extract-to-Table grid (.xt) own their scrolling. They used to
   size themselves from 100vh, which ignored the top bar, the crumbs and the
   panel's padding, so the page always ran on under the fixed status bar and
   the WINDOW scrolled. Here the shell stops at the status bar and the page
   takes exactly the space left; only its inner pane scrolls. */
.os-shell:has(> .os-body > .main > :is(.focus-shell, .xt)) {
  height: calc(100dvh - var(--statusbar-h, 30px)); min-height: 0;
}
.os-shell:has(> .os-body > .main > :is(.focus-shell, .xt)) > .os-body {
  min-height: 0; grid-template-rows: minmax(0, 1fr);
}
.os-shell .main:has(> :is(.focus-shell, .xt)) {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  padding-bottom: 0;
}
.os-shell .main > :is(.focus-shell, .xt) { flex: 1 1 auto; min-height: 0; height: auto; }
@media (min-width: 992px) {
  .os-shell--has-rail:not(.os-shell--fullbleed) .main:has(> :is(.focus-shell, .xt)) {
    margin-bottom: 12px; min-height: 0; padding-bottom: 0;
  }
  /* The panel's isolation traps every z-index inside it, so the table's
     fixed drawers, source canvas and full-screen view painted UNDER the
     status bar and the floating Notes/Chat button. The table has no
     z-index:-1 wash to protect, so let them out. */
  .os-shell--has-rail:not(.os-shell--fullbleed) .main:has(> .xt) { isolation: auto; position: static; }
}

/* ---- System bar additions (on top of .topbar) ----------------------------- */
.os-shell .topbar__cluster--left { flex: 1 1 0; margin-right: 0; gap: .4rem; }
.os-shell .topbar__cluster--right { flex: 1 1 0; justify-content: flex-end; }
.os-back {
  display: inline-flex; align-items: center; gap: .3rem;
  height: 36px; padding: 0 .85rem 0 .6rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--text); font-size: .86rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.os-back:hover { background: var(--state-hover); color: var(--text); }
.os-context {
  display: inline-flex; align-items: center; gap: .6rem; min-width: 0;
  height: 40px; padding: 0 .75rem 0 .4rem; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: transparent;
  color: var(--text); font: 400 1.2rem/1 var(--font-display); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
}
.os-context:hover { background: var(--state-hover); color: var(--text); }
.os-context__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---- Breadcrumb at the top of the main area (_crumbs.html) -----------------
   Company / Team / Matter as plain, minimal text: small, muted, no icons,
   marks or chips; tight to the top with room underneath. It sits inside .main and takes --os-crumbs-h,
   so descendants of .main see a --topbar-h that includes it — every
   `100dvh - var(--topbar-h)` layout inside a page (chat, tables, panels)
   still fits the viewport. Team and Matter open the team & matter switcher. */
.os-shell { --os-bar-h: 64px; --os-crumbs-h: 30px; }
.os-shell .main:has(> .os-crumbs) { --topbar-h: calc(var(--os-bar-h) + var(--os-crumbs-h)); }
.os-crumbs {
  box-sizing: border-box; height: var(--os-crumbs-h); min-width: 0;
  padding: .3rem 1rem .5rem; display: flex; align-items: flex-start;
  position: relative; z-index: 2; /* above full-bleed stage washes */
}
@media (min-width: 992px) { .os-shell--has-rail .os-crumbs { padding-inline: 1.25rem; } }
.os-crumbs__list {
  display: flex; align-items: center; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0;
  list-style: none; margin: 0; padding: 0;
  font-size: .75rem; line-height: 1.2; color: var(--text-subtle);
}
.os-crumbs__item { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
.os-crumbs__item + .os-crumbs__item::before { content: "/"; flex: none; padding: 0 .45rem; opacity: .55; }
.os-crumbs__link {
  min-width: 0; max-width: 20rem; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-decoration: none; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.os-crumbs__link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.os-crumbs__link:focus-visible { outline: 1px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
.os-crumbs__link.is-current, .os-crumbs__link.is-selected { color: var(--text-muted); }
/* Google-style search: a big filled pill in the centre of the bar. */
.os-search {
  flex: 0 1 720px; min-width: 0;
  display: flex; align-items: center; gap: .85rem;
  height: 48px; padding: 0 .9rem 0 1.15rem;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  background: var(--bg-tint); color: var(--text-muted);
  font: inherit; font-size: .95rem; cursor: text; text-align: left;
  transition: background-color .15s, box-shadow .15s;
}
[data-theme="dark"] .os-search { background: var(--bg-elev-2); }
.os-search svg { width: 20px; height: 20px; flex: none; }
.os-search span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-search kbd {
  font: 500 .7rem var(--font-mono); color: var(--text-subtle);
  background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: .1rem .4rem; box-shadow: none;
}
.os-search:hover { background: var(--bg-elev); box-shadow: var(--shadow-sm); }
.os-search:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.os-railtoggle {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 0; background: transparent; color: var(--text-muted); border-radius: 50%;
}
.os-railtoggle:hover { background: var(--state-hover); color: var(--text); }

/* ---- Tiles: app icons and matter monograms -------------------------------- */
.os-appicon {
  --app: var(--brand);
  width: 34px; height: 34px; flex: none;
  display: inline-grid; place-items: center;
  /* Soft tint of the app colour with the glyph in a toned-down version of it.
     Full-strength fills with white glyphs were too loud in a grid of 20+. */
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--app) 11%, var(--bg-elev));
  color: color-mix(in srgb, var(--app) 82%, var(--text));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app) 16%, transparent);
}
[data-theme="dark"] .os-appicon {
  background: color-mix(in srgb, var(--app) 20%, var(--bg-elev));
  color: color-mix(in srgb, var(--app) 55%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app) 28%, transparent);
}
.os-appicon svg { width: 17px; height: 17px; }
.os-appicon--sm { width: 28px; height: 28px; border-radius: 50%; box-shadow: none; }
.os-appicon--sm svg { width: 15px; height: 15px; }
.os-appicon--lg { width: 40px; height: 40px; border-radius: var(--radius-lg); }
.os-appicon--lg svg { width: 20px; height: 20px; }
.os-mono {
  --mono: var(--brand);
  width: 24px; height: 24px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-sm); background: var(--mono); color: #fff;
  font: 600 .66rem/1 var(--font-sans); letter-spacing: .02em;
}
.os-mono--lg { width: 38px; height: 38px; border-radius: var(--radius); font-size: .8rem; }

/* ---- Context rail --------------------------------------------------------- */
.os-rail {
  position: sticky; top: var(--topbar-h);
  height: calc(100dvh - var(--topbar-h) - var(--statusbar-h, 30px));
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: .5rem .75rem 1.25rem .75rem;
  background: var(--bg);
  border-right: 0;
}
.os-rail__head { display: flex; align-items: center; gap: .65rem; padding: 0 .35rem .9rem; }
.os-rail__title { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.os-rail__title b { font: 500 1.05rem/1.25 var(--font-serif); letter-spacing: -.005em; overflow-wrap: anywhere; }
.os-rail__title small { font-size: .74rem; color: var(--text-subtle); line-height: 1.35; }
.os-rail__close {
  margin-left: auto; border: 0; background: transparent; color: var(--text-muted);
  font-size: 1.4rem; line-height: 1; padding: 0 .25rem;
}
.os-rail__note {
  margin: 0 .35rem .6rem; padding: .35rem .75rem; border-radius: var(--radius-sm);
  background: var(--gold-50); color: var(--gold-600);
  font-size: .74rem; font-weight: 600;
}
.os-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.os-rail__divider { height: 1px; background: var(--border); margin: .45rem .35rem; }
/* Grouped rails (Tenders): a section heading, the open record's name, and
   indented rows beneath them. */
.os-rail__heading {
  padding: .75rem 1rem .3rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .01em; color: var(--text-subtle);
}
.os-rail__subheading {
  margin: .35rem .35rem .1rem 1.1rem; padding: .1rem .5rem; border-left: 2px solid var(--brand);
  font-size: .78rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.os-rail__sub .os-rail__link { margin-left: 1.1rem; padding-block: .38rem; font-size: .86rem; }
/* Google nav drawer item: full pill, state-layer hover, tonal active. */
.os-rail__link {
  display: flex; align-items: center; gap: .85rem;
  min-height: 40px; padding: .45rem 1rem; border-radius: var(--radius-pill);
  color: var(--text); text-decoration: none; font-size: .9rem;
  transition: background-color .12s, color .12s;
}
.os-rail__link .os-rail__icon { color: var(--text-muted); }
.os-rail__link:hover { background: var(--state-hover); color: var(--text); }
.os-rail__link.is-active { background: var(--brand-container); color: var(--on-brand-container); font-weight: 600; }
.os-rail__link.is-active .os-rail__icon { color: var(--on-brand-container); }
.os-rail__link.is-locked { opacity: .55; }
.os-rail__icon { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; }
.os-rail__icon svg { width: 19px; height: 19px; }
.os-rail__label { flex: 1; min-width: 0; line-height: 1.3; }
.os-rail__label b { font-weight: inherit; }
.os-rail__label .sidebar__sub { display: block; font-size: .72rem; color: var(--text-subtle); font-weight: 400; }
.os-rail__count {
  min-width: 1.35rem; padding: .08rem .3rem; border-radius: 999px; text-align: right;
  background: transparent; border: 0;
  font: 600 .75rem/1.35 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.os-rail__link.is-active .os-rail__count { color: var(--on-brand-container); }
.os-rail__badge {
  font-size: .64rem; font-weight: 600; letter-spacing: .02em;
  padding: .1rem .4rem; border-radius: 999px; background: var(--brand-50); color: var(--brand);
}
.os-rail__lock svg { width: 13px; height: 13px; }
.os-rail__foot { margin-top: auto; padding: 1rem .5rem 0; font-size: .74rem; color: var(--text-subtle); line-height: 1.4; }
.os-rail__icon--initial { font: 600 .78rem/1 var(--font-sans); text-transform: uppercase; }
.os-rail__toggle {
  place-items: center; flex: none; margin-left: auto; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-subtle); cursor: pointer;
}
.os-rail__toggle:hover { background: var(--state-hover); color: var(--text); }
.os-rail__toggle-arrow { transition: transform .15s; transform-origin: 14.5px 12px; }
.os-rail-backdrop { display: none; }

/* Collapsed (desktop): an icon strip. The class lives on <html> — see _rail.html. */
@media (min-width: 992px) {
  html.lex-os-rail-collapsed .os-shell--has-rail { --os-rail-w: 60px; }
  html.lex-os-rail-collapsed .os-rail { padding-inline: .5rem; overflow-x: hidden; }
  html.lex-os-rail-collapsed .os-rail__head { flex-direction: column; align-items: center; gap: .5rem; padding-inline: 0; }
  html.lex-os-rail-collapsed .os-rail__toggle { margin-left: 0; }
  html.lex-os-rail-collapsed .os-rail__toggle-arrow { transform: scaleX(-1); }
  html.lex-os-rail-collapsed .os-rail__title,
  html.lex-os-rail-collapsed .os-rail__note,
  html.lex-os-rail-collapsed .os-rail__label,
  html.lex-os-rail-collapsed .os-rail__badge,
  html.lex-os-rail-collapsed .os-rail__lock,
  html.lex-os-rail-collapsed .os-rail__foot { display: none; }
  html.lex-os-rail-collapsed .os-rail__head .os-appicon--lg,
  html.lex-os-rail-collapsed .os-rail__head .os-mono--lg { width: 34px; height: 34px; }
  html.lex-os-rail-collapsed .os-rail__link { position: relative; justify-content: center; padding-inline: 0; }
  /* The count stays visible as a small chip on the icon's corner. */
  html.lex-os-rail-collapsed .os-rail__count {
    position: absolute; top: 1px; right: 1px; min-width: 0;
    padding: 0 .25rem; font-size: .58rem; line-height: 1.4;
  }
  html.lex-os-rail-collapsed .os-rail__divider { margin-inline: .2rem; }
  html.lex-os-rail-collapsed .os-rail__heading,
  html.lex-os-rail-collapsed .os-rail__subheading { display: none; }
  html.lex-os-rail-collapsed .os-rail__sub .os-rail__link { margin-left: 0; }
}

/* ---- App launcher (9 dots, system bar) ------------------------------------ */
.os-launcher { position: relative; }
.os-launcher__btn[aria-expanded="true"] { background: var(--state-press); }
/* Google app grid: tinted shell, white rounded sheet holding the tiles. */
.os-launcher__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 360px; max-width: calc(100vw - 24px);
  background: var(--bg-tint); border: 0; border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg); padding: .6rem;
  /* Header and footer stay put; only the grid scrolls. */
  max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px);
  flex-direction: column;
}
.os-launcher__panel:not([hidden]) { display: flex; }
.os-launcher__head, .os-launcher__foot { flex: none; }
.os-launcher__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .15rem; align-content: start;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-elev); border-radius: var(--radius-xl); padding: .75rem .6rem;
}
[data-theme="dark"] .os-launcher__panel { background: var(--bg-elev-2); }
.os-launcher__app {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: .75rem .3rem .65rem; border-radius: var(--radius-lg); border: 0;
  color: var(--text); text-decoration: none; text-align: center;
}
.os-launcher__app:hover { background: var(--state-hover); color: var(--text); }
.os-launcher__app.is-current { background: var(--brand-container); color: var(--on-brand-container); }
.os-launcher__app .os-appicon { width: 44px; height: 44px; border-radius: var(--radius-lg); }
.os-launcher__app .os-appicon svg { width: 21px; height: 21px; }
.os-launcher__name { font-size: .8rem; font-weight: 400; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-launcher__badge {
  position: absolute; top: .35rem; right: .9rem; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius); background: var(--err); color: #fff; font: 600 .66rem/18px var(--font-sans); text-align: center;
}
.os-launcher__run { position: absolute; top: .55rem; right: 1.1rem; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.os-launcher__head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .35rem .75rem .65rem; margin-bottom: 0; border-bottom: 0;
  font-size: .9rem; font-weight: 500;
}
/* "Sort by" — Home apps header and the launcher panel */
.os-sort { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 0 auto; color: var(--text-subtle); font-size: .8rem; }
.os-sort select {
  font: inherit; font-size: .82rem; color: var(--text); background: var(--bg-elev);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: .22rem 1.6rem .22rem .75rem; cursor: pointer;
}
.os-sort select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Sort by: Category — a quiet group label spanning the row */
.os-appcat {
  grid-column: 1 / -1; margin: .6rem 0 -.25rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-subtle); font-size: .8rem; font-weight: 600; letter-spacing: .01em;
}
.os-appcat:first-child { margin-top: 0; }
.os-appcat[hidden] { display: none; }
.os-launcher__grid .os-appcat { margin: .45rem .35rem 0; padding-bottom: .2rem; font-size: .66rem; border-bottom: 0; }
.os-launcher__grid .os-appcat:first-child { margin-top: 0; }
.os-sort--sm select { font-size: .76rem; font-weight: 400; padding: .15rem 1.4rem .15rem .45rem; }
.os-launcher__foot {
  display: flex; justify-content: space-between; gap: .5rem; margin-top: .6rem; padding: 0 .25rem .15rem;
  border-top: 0; font-size: .84rem;
}
.os-launcher__foot a {
  color: var(--brand); text-decoration: none; font-weight: 500;
  padding: .45rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-elev);
}
.os-launcher__foot a:hover { background: var(--brand-50); }
.os-launcher__empty { grid-column: 1 / -1; margin: .5rem; color: var(--text-subtle); font-size: .85rem; }

/* ---- Timer pill ----------------------------------------------------------- */
.os-timer { position: relative; margin-right: .35rem; }
.os-timer__pill {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 36px; padding: 0 .85rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--err) 35%, transparent);
  background: var(--err-50); color: var(--err);
  font: 500 .82rem var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; max-width: 320px;
}
.os-timer__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--err); flex: none; }
.os-timer:not(.is-paused) .os-timer__dot { animation: os-pulse 1.6s ease-in-out infinite; }
.os-timer.is-paused .os-timer__pill { background: var(--bg-elev-2); color: var(--text-muted); border-color: var(--border-strong); }
.os-timer.is-paused .os-timer__dot { background: var(--text-subtle); }
.os-timer__what { font-family: var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes os-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .os-timer__dot { animation: none !important; } }
.os-timer__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 240px;
  background: var(--bg-elev); border: 0; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .5rem 0; display: flex; flex-direction: column;
}
.os-timer__menu-head { padding: .45rem 1rem .6rem; display: flex; flex-direction: column; border-bottom: 1px solid var(--border); margin-bottom: .35rem; }
.os-timer__menu-head span { font-size: .78rem; color: var(--text-subtle); }
.os-timer__menu-item {
  display: block; width: 100%; text-align: left;
  padding: .6rem 1rem; border: 0; border-radius: 0; background: transparent;
  color: var(--text); font: inherit; font-size: .88rem; text-decoration: none; cursor: pointer;
}
.os-timer__menu-item:hover { background: var(--state-hover); color: var(--text); }
.os-timer [data-when-paused] { display: none; }
.os-timer.is-paused [data-when-paused] { display: inline; }
.os-timer.is-paused [data-when-running] { display: none; }

/* ---- Command palette ------------------------------------------------------ */
.os-palette { position: fixed; inset: 0; z-index: 1060; display: flex; justify-content: center; align-items: flex-start; padding: 9vh 16px 0; }
.os-palette[hidden] { display: none; }
.os-palette__scrim { position: absolute; inset: 0; background: rgba(27,29,34,.32); }
.os-palette__panel {
  position: relative; width: min(680px, 100%);
  background: var(--bg-elev); border: 0; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column; max-height: 72vh;
}
[data-theme="dark"] .os-palette__panel { background: var(--bg-elev-2); }
.os-palette__input { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.os-palette__input svg { width: 20px; height: 20px; color: var(--text-muted); flex: none; }
.os-palette__input input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 1.1rem; min-width: 0; }
.os-palette__input kbd { font: 500 .7rem var(--font-mono); color: var(--text-subtle); background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .05rem .35rem; box-shadow: none; }
.os-palette__results { overflow-y: auto; padding: .35rem 0 .5rem; }
.os-palette__group { padding: .75rem 1.25rem .3rem; font: 600 .78rem var(--font-sans); letter-spacing: .01em; color: var(--text-subtle); }
.os-palette__item { display: flex; align-items: center; gap: .85rem; padding: .55rem 1.25rem; color: var(--text); text-decoration: none; cursor: pointer; }
.os-palette__item:hover { background: var(--state-hover); color: var(--text); }
.os-palette__item.is-sel { background: var(--brand-container); color: var(--on-brand-container); }
.os-palette__item.is-sel small { color: color-mix(in srgb, var(--on-brand-container) 70%, transparent); }
.os-palette__item .os-appicon { width: 32px; height: 32px; border-radius: 50%; box-shadow: none; }
.os-palette__item .os-appicon svg { width: 16px; height: 16px; }
.os-palette__glyph { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--bg-tint); color: var(--text-muted); flex: none; }
.os-palette__glyph svg { width: 15px; height: 15px; }
.os-palette__text { display: flex; flex-direction: column; min-width: 0; }
.os-palette__text b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-palette__text small { color: var(--text-subtle); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-palette__empty { padding: 1.2rem 1rem; color: var(--text-subtle); font-size: .9rem; }
.os-palette__foot { padding: .6rem 1.25rem; border-top: 1px solid var(--border); font: .75rem var(--font-sans); color: var(--text-subtle); }

/* ---- Home (the desktop) --------------------------------------------------- */
/* Home sits flat on the canvas (no glow) — the cards carry the colour. */
.os-shell--home { background-image: none; }
.os-desk { display: flex; flex-direction: column; gap: 2.25rem; }
.os-desk__hello { display: flex; flex-direction: column; gap: .35rem; }
.os-desk__date { font: 500 .85rem var(--font-sans); letter-spacing: 0; color: var(--text-muted); }
.os-desk__hello h1 { font: 400 2.25rem/1.15 var(--font-serif); letter-spacing: -.015em; margin: 0; }
.os-desk__hello h1 em { font-style: normal; color: var(--brand); }
.os-block { display: flex; flex-direction: column; gap: .85rem; scroll-margin-top: calc(var(--topbar-h) + 1rem); }
.os-block__head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.os-block__head h2 { font: 500 1.25rem var(--font-serif); letter-spacing: -.005em; margin: 0; }
.os-block__acts { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.os-link { color: var(--brand); font-weight: 500; font-size: .88rem; text-decoration: none; }
.os-link:hover { text-decoration: underline; }
.os-tabs { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 3px; background: var(--bg-elev); }
.os-tabs button { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: .82rem; font-weight: 500; padding: .3rem .95rem; border-radius: var(--radius-pill); cursor: pointer; }
.os-tabs button:hover { background: var(--state-hover); color: var(--text); }
.os-tabs button[aria-selected="true"] { background: var(--brand-container); color: var(--on-brand-container); font-weight: 600; }
.os-tabs em { font-style: normal; color: var(--text-subtle); font-weight: 400; margin-left: .25rem; }
.os-hint { color: var(--text-subtle); font-size: .8rem; }

.os-spaces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1199.98px) { .os-spaces { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 859.98px)  { .os-spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519.98px)  { .os-spaces { grid-template-columns: minmax(0, 1fr); } }
.os-space {
  display: flex; flex-direction: column; gap: .35rem; min-width: 0;
  padding: 1rem 1.1rem; border-radius: var(--radius);
  background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.os-space:hover { border-color: transparent; box-shadow: var(--shadow); color: var(--text); }
.os-space__top { display: flex; align-items: center; gap: .5rem; }
.os-space__top .os-mono { width: 30px; height: 30px; border-radius: var(--radius); font-size: .7rem; }
.os-space__tag { margin-left: auto; font: 600 .72rem var(--font-sans); letter-spacing: .01em; color: var(--brand); }
.os-space__tag--muted { color: var(--text-subtle); }
.os-space__title { font-size: .98rem; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-space__client { font-size: .82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -.25rem; }
.os-space__next { font-size: .78rem; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-space__next.is-urgent { color: var(--warn); font-weight: 600; }
.os-empty {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 1.4rem;
  text-align: center; color: var(--text-muted); display: flex; flex-direction: column; gap: .5rem; align-items: center;
}

/* App grid: fluid 4 → 3 → 2 → 1 across, so twelve apps sit as 3 rows of 4
   on a wide screen and reflow cleanly as the window narrows. */
.os-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1199.98px) { .os-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 859.98px)  { .os-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519.98px)  { .os-apps { grid-template-columns: minmax(0, 1fr); } }
.os-appcard {
  position: relative; display: flex; flex-direction: column; gap: .7rem; min-width: 0;
  padding: 1.15rem 1.2rem 1rem; border-radius: var(--radius-lg); text-align: left;
  background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; font: inherit; cursor: pointer;
  min-height: 176px;
  transition: border-color .15s, box-shadow .15s;
}
.os-appcard:hover { border-color: transparent; box-shadow: var(--shadow); color: var(--text); }
.os-appcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.os-appcard .os-appicon { width: 46px; height: 46px; border-radius: var(--radius-lg); }
.os-appcard .os-appicon svg { width: 22px; height: 22px; }
.os-appcard__text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.os-appcard__title { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; min-width: 0; }
.os-appcard__title b { font: 500 1.1rem/1.25 var(--font-display); letter-spacing: -.005em; }
.os-appcard__desc {
  font-size: .84rem; color: var(--text-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* The quiet live figure, pinned to the card's foot. */
.os-appcard__stat {
  margin-top: auto; padding-top: .65rem; border-top: 1px solid var(--border);
  font-size: .78rem; color: var(--text-subtle); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.os-appcard__badge {
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: var(--radius); background: var(--err); color: #fff; font: 600 .72rem/22px var(--font-sans); text-align: center;
}
.os-appcard__run { display: inline-flex; align-items: center; gap: .3rem; font: 600 .75rem var(--font-sans); color: var(--ok); }
.os-appcard__run i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.os-appcard.is-locked { background: var(--bg-elev-2); }
.os-appcard.is-locked .os-appicon { filter: grayscale(1); opacity: .6; }
.os-appcard.is-locked b, .os-appcard.is-locked .os-appcard__desc { color: var(--text-subtle); }
/* Coming soon is a preview, not a refusal: keep it legible and branded. */
.os-appcard.is-soon { background: var(--bg-elev); border-style: dashed; }
.os-appcard.is-soon .os-appicon { filter: saturate(.55); opacity: .85; }
.os-appcard.is-soon b { color: var(--text); }
.os-appcard.is-soon .os-appcard__desc { color: var(--text-muted); }
/* Locked by release status: full colour, the card is a "Request access" button. */
.os-appcard.is-applocked { background: var(--bg-elev); }
.os-appcard.is-applocked .os-appicon { filter: none; opacity: 1; }
.os-appcard.is-applocked b { color: var(--text); }
.os-appcard.is-applocked .os-appcard__desc { color: var(--text-muted); }
/* Top-right corner of a card you can't open: lock (+ "Coming soon" pill). */
.os-appcard__corner { display: inline-flex; align-items: center; gap: .4rem; flex: none; }
.os-appcard__lock {
  width: 28px; height: 28px; display: grid; place-items: center; flex: none;
  border-radius: 50%; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text-muted);
}
.os-appcard__lock svg { width: 14px; height: 14px; }
.os-appcard.is-soon .os-appcard__lock,
.os-appcard.is-applocked .os-appcard__lock { background: var(--brand-50); color: var(--brand); border-color: transparent; }
.os-appcard__why { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
.os-appcard__why svg { width: 12px; height: 12px; flex: none; }
.os-appcard__why--role { color: var(--warn); }
.os-appcard__why--firm { color: var(--text-muted); }
.os-appcard__why--soon { color: var(--brand); }
.os-appcard__why--request { color: var(--brand); }
/* My apps = apps you can open; locked / off / coming-soon live under All apps. */
.os-apps[data-tab="mine"] .os-appcard.is-locked { display: none; }
/* Release-status tags (core.os_apps: beta / coming soon) */
.os-status {
  display: inline-flex; align-items: center; flex: none; gap: .3rem; vertical-align: middle;
  height: 20px; padding: 0 .5rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  font: 600 .66rem/1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase;
}
.os-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.os-status--beta { background: var(--info-50); color: var(--info); }
.os-status--soon { background: var(--brand-50); color: var(--brand); }
.os-launcher__beta { height: 16px; padding: 0 .35rem; gap: .2rem; font-size: .54rem; }
.os-launcher__beta::before { display: none; }
/* Favourites: a usable card sits in a cell with its star, which can't live
   inside the card's <a>. */
.os-apps[data-tab="fav"] .os-appcard.is-locked,
.os-apps[data-tab="fav"] .os-appcell:not(.is-fav) { display: none; }
.os-appcell { position: relative; display: flex; min-width: 0; }
.os-appcell > .os-appcard { flex: 1; }
.os-appcell .os-appcard__top { padding-right: 1.75rem; }
.os-appstar {
  position: absolute; top: .7rem; right: .7rem; z-index: 1;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer;
  color: var(--text-subtle); opacity: .45;
  transition: opacity .15s, color .15s, background .15s, transform .15s;
}
.os-appstar svg { fill: none; }
.os-appcell:hover .os-appstar, .os-appstar:focus-visible { opacity: 1; }
.os-appstar:hover { background: var(--bg-elev-2); color: var(--text); }
.os-appcell.is-fav .os-appstar { opacity: 1; color: #f59e0b; }
.os-appcell.is-fav .os-appstar svg { fill: currentColor; }
.os-appcell:hover > .os-appcard { border-color: transparent; box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) {
  .os-space, .os-appcard, .os-appstar { transition: none; }
  .os-space:hover, .os-appcard:hover, .os-appcell:hover > .os-appcard, .os-appcell:hover .os-appstar { transform: none; }
}

/* Locked-app dialog */
.os-dialog { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 16px; }
.os-dialog[hidden] { display: none; }
.os-dialog__scrim { position: absolute; inset: 0; background: rgba(6,8,16,.42); }
.os-dialog__panel {
  position: relative; width: min(460px, 100%);
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,.3); padding: 1.35rem; display: flex; flex-direction: column; gap: .75rem;
}
.os-dialog__head { display: flex; align-items: center; gap: .75rem; }
.os-dialog__head h2 { font: 600 1.15rem var(--font-serif); margin: 0; }
.os-dialog__panel p { margin: 0; color: var(--text-muted); font-size: .9rem; }
.os-dialog__foot { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .25rem; flex-wrap: wrap; }
.os-dialog__ok { color: var(--ok); font-weight: 600; }

/* ---- Matter workspace pages ----------------------------------------------- */
.ws-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.ws-head h1 { font: 400 var(--title-size)/1.2 var(--font-display); letter-spacing: -.01em; margin: 0; }
.ws-head__sub { color: var(--text-muted); margin-top: .3rem; font-size: .9rem; }
.ws-head__acts { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.ws-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ws-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (max-width: 991.98px) { .ws-grid { grid-template-columns: 1fr; } }
.ws-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.ws-card__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ws-card__head h2 { font-size: .95rem; font-weight: 600; margin: 0; }
.ws-card--attn { border-color: var(--gold); background: var(--gold-50); }
.ws-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ws-list li { display: flex; gap: .75rem; align-items: flex-start; padding: .55rem 0; border-top: 1px solid var(--border); }
.ws-list li:first-child { border-top: 0; padding-top: 0; }
.ws-list__when { font: 500 .8rem var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text-subtle); min-width: 54px; padding-top: .1rem; }
.ws-list__when.is-late { color: var(--err); }
.ws-list__body { flex: 1; min-width: 0; }
.ws-list__body b { font-weight: 600; font-size: .9rem; }
.ws-list__body div { color: var(--text-muted); font-size: .8rem; }
.ws-list__body a { color: inherit; }
.ws-kv { display: flex; justify-content: space-between; gap: .75rem; padding: .4rem 0; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; font-size: .9rem; }
.ws-kv:first-of-type { border-top: 0; }
.ws-kv span { color: var(--text-muted); }
.ws-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.ws-kpi { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .85rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.ws-kpi span { font-size: .8rem; color: var(--text-muted); }
.ws-kpi b { font: 600 1.35rem/1.2 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ws-kpi small { font-size: .75rem; color: var(--text-subtle); }
.ws-muted { color: var(--text-subtle); font-size: .85rem; }
.ws-linkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; }
.ws-linkcard { display: flex; gap: .7rem; align-items: flex-start; padding: .9rem; border-radius: var(--radius-lg); background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); text-decoration: none; min-width: 0; }
.ws-linkcard:hover { border-color: var(--brand); color: var(--text); }
.ws-linkcard b { display: block; font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.ws-linkcard small { color: var(--text-subtle); font-size: .78rem; }
.ws-linkcard--hidden { border-style: dashed; background: transparent; color: var(--text-muted); }
.ws-people { display: flex; flex-wrap: wrap; gap: .35rem; }
.ws-lock { max-width: 520px; margin: 3rem auto; text-align: center; display: flex; flex-direction: column; gap: .8rem; align-items: center; }
.ws-lock h1 { font: 500 1.7rem/1.2 var(--font-serif); margin: 0; }
.ws-lock p { color: var(--text-muted); margin: 0; }

/* ---- Mobile / tablet ------------------------------------------------------ */
@media (max-width: 991.98px) {
  .os-shell--has-rail .os-body { grid-template-columns: minmax(0, 1fr); }
  .os-shell--has-rail { --sidebar-w: 0px; --sidebar-w-collapsed: 0px; }
  .os-rail {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000;
    width: min(300px, 86vw); height: 100dvh;
    transform: translateX(-100%); transition: transform .2s ease;
    background: var(--bg-elev); border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    box-shadow: var(--shadow-lg);
  }
  .os-shell.is-rail-open .os-rail { transform: none; }
  .os-shell.is-rail-open .os-rail-backdrop { display: block; position: fixed; inset: 0; z-index: 999; background: rgba(27,29,34,.32); }
  .os-search span, .os-search kbd { display: none; }
  .os-search { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; justify-content: center; background: transparent; }
  .os-search:hover { background: var(--state-hover); box-shadow: none; }
  .os-crumbs__link { max-width: 14rem; }
  .os-timer__what { display: none; }
  .os-desk__hello h1 { font-size: 1.7rem; }
}
@media (max-width: 575.98px) {
  .os-context__name { max-width: 34vw; }
  .os-back span { display: none; }
  /* Phones: drop the company; team and matter share the width. */
  .os-crumbs__item:first-child { display: none; }
  .os-crumbs__item:nth-child(2)::before { content: none; }
  .os-crumbs__link { max-width: 42vw; }
}

/* ---- An app's History page (shell/app_history.html) ----------------------- */
.app-history { max-width: 960px; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }
.app-history__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.app-history__title { font: 400 var(--title-size)/1.2 var(--font-display); letter-spacing: -.01em; margin: 0; }
.app-history__lede { margin: .3rem 0 0; font-size: .9rem; color: var(--text-subtle); }
.app-history__section + .app-history__section { margin-top: 2rem; }
.app-history__sectitle {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .01em; text-transform: none; color: var(--text-subtle);
}
.app-history__count {
  padding: .04rem .45rem; border-radius: 999px; background: var(--bg-elev-2); border: 1px solid var(--border);
  font: 600 .72rem/1.35 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.app-history__more { margin-top: .6rem; font-size: .84rem; }
.app-history__more a { color: var(--brand); font-weight: 600; text-decoration: none; }
.app-history__more a:hover { text-decoration: underline; }

/* ---- AI composers: filing a thread to a matter ---------------------------- */
/* Sits under the question on the Ask run page (an unfiled thread only). */
.ask-file { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; }
.ask-file__label { font-size: .78rem; color: var(--text-subtle); white-space: nowrap; }
.ask-file .form-select { max-width: 280px; }

/* ---- Home: "Pending for you" (shell/_home_pending.html) -------------------- */
.os-pend__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 859.98px) { .os-pend__list { grid-template-columns: minmax(0, 1fr); } }
.os-pend__row {
  display: flex; align-items: center; gap: .4rem; min-width: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-elev); border: 1px solid var(--border);
  transition: border-color .15s, box-shadow .15s;
}
.os-pend__row:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.os-pend__row--urgent { border-left: 3px solid var(--err); }
.os-pend__row--due { border-left: 3px solid var(--warn); }
/* The link carries the row's padding so the whole card is the click target. */
.os-pend__link { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: .65rem;
  padding: .55rem .7rem; border-radius: inherit; color: var(--text); text-decoration: none; }
.os-pend__link:hover { color: var(--text); }
.os-pend__icon { flex: none; width: 32px; height: 32px; border-radius: var(--radius); display: inline-grid; place-items: center;
  background: var(--brand-50); color: var(--brand); }
.os-pend__row--urgent .os-pend__icon { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }
.os-pend__row--due .os-pend__icon { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.os-pend__icon svg { width: 16px; height: 16px; }
.os-pend__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.os-pend__text b { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-pend__text small { font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-pend__due { font: 500 .78rem var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text-subtle); white-space: nowrap; }
.os-pend__count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius); background: var(--brand); color: #fff;
  font: 600 .72rem/22px var(--font-sans); text-align: center; }
.os-pend__act { margin: 0 .7rem 0 0; flex: none; }
.os-pend__btn { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: .74rem;
  border-radius: 999px; padding: .15rem .6rem; cursor: pointer; white-space: nowrap; }
.os-pend__btn:hover { color: var(--text); border-color: var(--border-strong); }

/* ---- Home sections + dashboard (shell.home / shell.dashboard) -------------- */
/* Home has a rail now: the page sits in the content panel like any app, and
   the desk keeps a comfortable reading width inside it. */
.os-shell--home .os-desk { max-width: 1400px; margin-inline: auto; width: 100%; }
.os-page { gap: 1.75rem; }
.os-page__head { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; }
.os-page__head h1 { font: 400 var(--title-size, 1.75rem)/1.2 var(--font-display); margin: 0; }
.os-page__head .os-hint { flex-basis: 100%; order: 3; margin: 0; font-size: .88rem; }
.os-page__head .os-block__acts { margin-left: auto; }
.os-page__head .os-tabs { margin-left: auto; }
.os-page__head .os-tabs a { display: inline-block; color: var(--text-muted); font-size: .82rem; font-weight: 500; padding: .3rem .95rem; border-radius: var(--radius-pill); text-decoration: none; }
.os-page__head .os-tabs a:hover { background: var(--state-hover); color: var(--text); }
.os-page__head .os-tabs a[aria-selected="true"] { background: var(--brand-container); color: var(--on-brand-container); font-weight: 600; }

.os-dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 991.98px) { .os-dash { grid-template-columns: minmax(0, 1fr); } }
.os-dash__card {
  min-width: 0; display: flex; flex-direction: column; gap: .85rem;
  padding: 1.1rem 1.2rem 1.2rem; border-radius: var(--radius-lg);
  background: var(--bg-elev); border: 1px solid var(--border);
}
.os-dash__card--full { grid-column: 1 / -1; }
/* Reserve roughly a filled card's height so cards arriving don't shove the page about. */
.os-dash__card.is-loading { min-height: 9.5rem; }
.os-dash__head { display: flex; align-items: center; gap: .75rem; min-height: 28px; }
.os-dash__head h2 { font: 500 1.08rem var(--font-serif); margin: 0; }
.os-dash__acts { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.os-dash__skel { display: flex; flex-direction: column; gap: .55rem; }
.os-dash__skel span { height: 14px; border-radius: 6px; background: var(--state-hover); animation: os-dash-pulse 1.4s ease-in-out infinite; }
.os-dash__skel span:nth-child(2) { width: 80%; }
.os-dash__skel span:nth-child(3) { width: 55%; }
@keyframes os-dash-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .os-dash__skel span { animation: none; } }
.os-dash__empty, .os-dash__none { margin: 0; color: var(--text-subtle); font-size: .88rem; }
.os-dash__clear { margin: 0; display: flex; align-items: center; gap: .6rem; color: var(--text-muted); font-size: .92rem; }
.os-dash__clear svg { width: 18px; height: 18px; color: var(--ok); flex: none; }
.os-dash__sub { margin: 0; color: var(--text-muted); font-size: .82rem; }
.os-dash__h3 { font: 600 .82rem var(--font-sans); color: var(--text-muted); margin: .4rem 0 0; }

/* Recent matters / apps: four tiles, then a "more" tile to the full page. */
.os-dash__strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(120px, .65fr); gap: .85rem; }
@media (max-width: 1199.98px) { .os-dash__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 859.98px)  { .os-dash__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519.98px)  { .os-dash__strip { grid-template-columns: minmax(0, 1fr); } }
.os-dash__apptile { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .85rem 1rem;
  border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.os-dash__apptile:hover { border-color: transparent; box-shadow: var(--shadow); color: var(--text); }
.os-dash__apptile .os-appicon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-lg); }
.os-dash__apptile .os-appicon svg { width: 20px; height: 20px; }
.os-dash__moretile { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .2rem;
  padding: .85rem 1rem; border-radius: var(--radius); border: 1px dashed var(--border-strong);
  color: var(--brand); text-decoration: none; text-align: center; font-size: .86rem; font-weight: 500; }
.os-dash__moretile:hover { background: var(--state-hover); color: var(--brand); }
.os-dash__moretile b { font: 500 1.2rem var(--font-display); color: var(--text); }

/* Stat tiles: the number is the headline, the label sits under it. */
.os-dash__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.os-dash__stats--wide { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.os-dash__stat { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .85rem; border-radius: var(--radius);
  background: var(--bg); color: var(--text); text-decoration: none; min-width: 0; }
a.os-dash__stat:hover { background: var(--state-hover); color: var(--text); }
.os-dash__stat b { font: 500 1.55rem/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.os-dash__stat span { font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-dash__stat.is-bad b { color: var(--err); }

/* Compact lists (today, tasks, agenda, recent, requests). */
.os-dash__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.os-dash__list a { display: flex; align-items: center; gap: .75rem; padding: .5rem .4rem; border-radius: var(--radius);
  color: var(--text); text-decoration: none; min-width: 0; }
.os-dash__list a:hover { background: var(--state-hover); color: var(--text); }
.os-dash__time { flex: none; min-width: 3.6rem; font: 500 .78rem var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text-subtle); }
.os-dash__time.is-bad { color: var(--err); }
.os-dash__what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.os-dash__what b { font-size: .9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-dash__what small { font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-dash__more { font-size: .8rem; color: var(--brand); padding-left: .4rem; text-decoration: none; }
.os-dash__days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 1199.98px) { .os-dash__card--half .os-dash__days { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575.98px) { .os-dash__days { grid-template-columns: minmax(0, 1fr); } }
.os-dash__day h3 { font: 600 .82rem var(--font-sans); margin: 0 0 .25rem; }
.os-dash__day h3 small { font-weight: 400; color: var(--text-subtle); margin-left: .25rem; }
.os-dash__day .os-dash__none { padding: .35rem .4rem; }
.os-dash__kv { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-direction: column; }
.os-dash__kv li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.os-dash__kv li:last-child { border-bottom: 0; }
.os-dash__kv b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.os-dash__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
@media (max-width: 767.98px) { .os-dash__split { grid-template-columns: minmax(0, 1fr); } }
.os-dash__split > div { display: flex; flex-direction: column; gap: .65rem; min-width: 0; }

/* Charts: one series, one hue (the brand); every number is printed as text,
   the bar only shows proportion. Hover titles name each mark. */
.os-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.os-bars__row { display: grid; grid-template-columns: minmax(6rem, 34%) minmax(0, 1fr) auto; align-items: center; gap: .75rem; font-size: .84rem; }
.os-bars__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.os-bars__track { height: 10px; border-radius: 999px; background: var(--state-hover); overflow: hidden; }
.os-bars__fill { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.os-bars__val { font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.os-bars__val em { font-style: normal; color: var(--text-subtle); }
.os-bars__val em.is-bad { color: var(--err); font-weight: 600; }
.os-bars__val em.is-warn { color: var(--warn); font-weight: 600; }
.os-bars__row--warning .os-bars__fill { background: var(--warn); }
.os-bars__row--breached .os-bars__fill { background: var(--err); }
.os-cols { display: flex; align-items: stretch; gap: 6px; height: 120px; }
.os-cols--dense { gap: 2px; height: 90px; }
.os-cols__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.os-cols__plot { flex: 1; display: flex; align-items: flex-end; border-bottom: 1px solid var(--border); }
.os-cols__bar { display: block; width: 100%; background: var(--brand); border-radius: 4px 4px 0 0; }
.os-cols__col:hover .os-cols__bar { filter: brightness(1.15); }
.os-cols__x { font-size: .68rem; color: var(--text-subtle); text-align: center; white-space: nowrap; overflow: hidden; }
.os-cols__axis { display: flex; justify-content: space-between; font-size: .7rem; color: var(--text-subtle); margin-top: -.4rem; }

/* Agenda + Recent + Firm */
.os-agenda__day { display: flex; flex-direction: column; gap: .25rem; }
.os-agenda__date { display: flex; align-items: baseline; gap: .5rem; font: 500 1rem var(--font-sans); margin: 0; padding-bottom: .35rem; border-bottom: 1px solid var(--border); }
.os-agenda__date span { color: var(--text-subtle); font-size: .85rem; font-weight: 400; }
.os-agenda__day.is-today .os-agenda__date b { color: var(--brand); }
.os-agenda__icon { flex: none; width: 30px; height: 30px; border-radius: var(--radius); display: inline-grid; place-items: center;
  background: var(--brand-container); color: var(--on-brand-container); }
.os-agenda__icon svg { width: 15px; height: 15px; }
.os-recent .os-dash__time { min-width: 0; text-align: right; }
.os-firm__teams li > span { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
.os-firm__teams b { font-weight: 400; color: var(--text-muted); font-size: .84rem; }
.os-mono--sm { width: 26px; height: 26px; border-radius: var(--radius); font-size: .65rem; }