/* ==========================================================================
   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); }
}

/* ---- 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); }
.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); }
.os-apps[data-tab="mine"] .os-appcard.is-locked { display: none; }
/* Coming-soon apps are a preview, so they stay in My apps too. */
.os-apps[data-tab="mine"] .os-appcard.is-locked.is-soon,
.os-apps[data-tab="mine"] .os-appcard.is-locked.is-applocked { display: flex; }
/* 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; }