/* Hallmark · component: prowl-shell · genre: operate · theme: crm · pre-emit critique: P4 H4 E4 S4 R4 V3 */
/* PROWL — the shell (js/prowl.js): the head with its five tabs, the panes,
   a tab's title bar, the one-time "it moved" notes, the loading and failed
   states, and the floats every tab shares (dialog, project list, the toast's
   extra buttons, the menu's extras).

   The design system is the CRM's (css/page-crm.css): .prowl-root, the
   dialog's scrim and the project list are granted its --crm-* tokens there,
   and the tabs reuse its parts — .crm-tab pills, .crm-title, .crm-btn and
   .crm-btn-primary, the .crm-pop menu, the .crm-toast. This file adds only
   what the CRM lacks, in tokens: never a raw colour. Gold TEXT is
   --gold-ink (it clears AA in both themes); the focus ring is 2px of it,
   and it never animates. Motion is opacity and transform, 140–200ms, and
   none of it survives prefers-reduced-motion. The phone is ≤640px, where
   the shell's own top bar carries the bell.

   A tab's title bar, for the tab files:
     <div class="prowl-page">            max 1280px, the pane's padding
       <div class="prowl-titlebar">
         <div class="prowl-titlebar-text"><h1 class="crm-title">My Work</h1>
           <p class="prowl-meta">…one line…</p></div>
         <button class="crm-btn crm-btn-primary"><svg…/>Add task</button>
       </div> … </div> */

/* ── The screen and its frame ─────────────────────────────────────────────── */
/* Each pane scrolls on its own, so a tab keeps its place when you come back. */
#prowlScreen { overflow: hidden; }
.prowl-root {
  /* The token grant brings the board's frame (width cap, auto margins,
     padding) along with the tokens; Prowl draws its own. */
  max-width: none; margin: 0; padding: 0;
  height: 100%;
  display: flex; flex-direction: column;
  overflow-x: clip;
  font-family: var(--font-sans);
  caret-color: var(--gold-ink);
}
/* Native controls — a select's list, a date picker, a bare textarea, the
   scrollbars — follow the theme too. */
.prowl-root, .prowl-scrim, .prowl-listbox { color-scheme: light; }
[data-theme="dark"] .prowl-root, [data-theme="dark"] .prowl-scrim, [data-theme="dark"] .prowl-listbox { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prowl-root,
  :root:not([data-theme="light"]) .prowl-scrim,
  :root:not([data-theme="light"]) .prowl-listbox { color-scheme: dark; }
}
.prowl-root ::selection { background: var(--crm-gold-pale); color: var(--crm-head); }
.prowl-root a { text-underline-offset: 3px; }
.prowl-root, .prowl-root * { scrollbar-width: thin; scrollbar-color: var(--crm-rule-firm) transparent; }
.prowl-root ::-webkit-scrollbar { width: 10px; height: 10px; }
.prowl-root ::-webkit-scrollbar-track { background: transparent; }
.prowl-root ::-webkit-scrollbar-thumb {
  background: var(--crm-rule-firm); background-clip: padding-box;
  border: 3px solid transparent; border-radius: 999px;
}
.prowl-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── The head: the mark, a hairline, the five tabs, the search ───────────────
   Its row is the shell's bell's band (css/design-system.css, THE BELL'S
   LINE), where the CRM's tab row sits too, so moving between the two the
   tabs do not jump and the head's row and the bell share one centre line;
   its right end stops the bell's clearance short of the window's edge. */
.prowl-head {
  flex: none; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  box-sizing: border-box;
  /* One height whether or not the tab searches, so nothing below shifts
     between tabs: the bell's band, and 14px under it. */
  min-height: calc(var(--bell-top) + var(--bell-size) + 14px);
  padding: var(--bell-top) var(--bell-clear) 14px 24px;
  background: var(--crm-paper);
  border-bottom: 1px solid var(--crm-rule);
}
.prowl-mark {
  flex: none;
  font-family: var(--font-serif); font-size: 18px; font-weight: 600;
  line-height: 1; letter-spacing: -0.01em; color: var(--crm-head);
}
.prowl-hair { flex: none; width: 1px; height: 22px; background: var(--crm-rule-firm); }
/* The strip scrolls sideways, which clips; its 4px of padding (given back by
   the margin) is the room a tab's focus ring needs. */
.prowl-tabs {
  --prowl-tab-gap: 4px; --prowl-tab-pad: 11px;
  position: relative; min-width: 0;
  display: flex; align-items: center; gap: var(--prowl-tab-gap);
  padding: 4px; margin: -4px 0 -4px -4px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  /* = STRIP_FADE in js/prowl.js: a tab snaps to its start just inside the
     left fade. */
  scroll-padding-inline-start: 32px;
}
.prowl-tabs::-webkit-scrollbar { display: none; }
/* The strip's tail, which js/prowl.js sizes: the room after the last pill
   that lets the strip's last stop rest on a whole tab, as every other stop
   does. A spacer, because Safari has left inline-end padding out of a flex
   box's scroll range; with its gap it is also the last pill's focus ring's
   room. Only a strip that scrolls has one. */
.prowl-tabs::after { content: ""; flex: none; width: var(--prowl-tail, 0px); height: 1px; }
.prowl-tabs:not([data-overflow])::after { display: none; }
/* The CRM's pill (.crm-tab: 11px either side), drawn as a link. */
.prowl-tab {
  flex: none; position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; box-sizing: border-box; padding: 0 var(--prowl-tab-pad);
  line-height: 1; white-space: nowrap; text-decoration: none;
}
.prowl-tab[hidden] { display: none; }
/* The active pill keeps its gold on hover (the CRM's hover would grey it). */
.prowl-tab.crm-tab-active:hover { background: var(--crm-gold-faint); color: var(--crm-head); }
.prowl-tab-n { font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.prowl-tab-n[hidden] { display: none; }

/* Where the five tabs run past their room (a phone, a window under 700px, a
   count grown long), the strip shows whole tabs only. It snaps a tab's start
   to just inside its left fade, and js/prowl.js lays the two fades on the
   tabs' own edges: past the last tab shown whole, 32px of the next one fade
   out and the rest of it is hidden, and the same before the first. Each fade
   is down to --prowl-peek where the cut tab's words begin (or end), so all
   that shows of it is the faint edge of a letter, too faint to read (about
   1.4:1), enough to say there is more. So no half word sits at either edge,
   the fades start after the mark's hairline, and the active pill, always
   one of the whole ones, is never under one. */
.prowl-tabs[data-overflow] {
  --prowl-peek: 20%;
  --prowl-l: var(--prowl-cut-l, 0px);
  --prowl-l1: calc(var(--prowl-l) + var(--prowl-fade-l, 0px));
  --prowl-r: calc(100% - var(--prowl-cut-r, 0px));
  --prowl-r1: calc(var(--prowl-r) - var(--prowl-fade-r, 0px));
  scroll-snap-type: x mandatory;
  mask-image: linear-gradient(to right,
    transparent var(--prowl-l),
    color-mix(in srgb, var(--crm-ink) var(--prowl-peek), transparent) calc(var(--prowl-l1) - var(--prowl-tab-gap) - var(--prowl-tab-pad)),
    var(--crm-ink) var(--prowl-l1),
    var(--crm-ink) var(--prowl-r1),
    color-mix(in srgb, var(--crm-ink) var(--prowl-peek), transparent) calc(var(--prowl-r1) + var(--prowl-tab-gap) + var(--prowl-tab-pad)),
    transparent var(--prowl-r));
}
.prowl-tabs[data-overflow] > .prowl-tab { scroll-snap-align: start; }

/* The search box shows for a tab that searches (Prowl.registerTab onSearch).
   Wide windows keep it open in the head; narrower ones fold it to a button
   that opens it across the head's row, with Done to fold it again. */
.prowl-search { flex: none; margin-left: auto; display: flex; align-items: center; }
.prowl-search[hidden] { display: none; }
.prowl-search-field { position: relative; display: flex; align-items: center; gap: 8px; }
.prowl-search-icon {
  position: absolute; left: 12px; top: 50%; margin-top: -7px;
  width: 14px; height: 14px; color: var(--crm-ink-2); pointer-events: none;
}
.prowl-search-input {
  box-sizing: border-box; width: 220px; height: 34px; padding: 0 12px 0 32px;
  border: 1px solid var(--crm-rule-firm); border-radius: 999px;
  background: var(--crm-paper); color: var(--crm-ink);
  font: inherit; font-size: 13px;
}
.prowl-search-input::placeholder { color: var(--crm-ink-2); }
.prowl-search-input:hover { background: var(--crm-panel); }
.prowl-search .prowl-search-toggle, .prowl-search .prowl-search-done { display: none; }
.prowl-search-done { height: 34px; padding: 0 12px; border-radius: 7px; white-space: nowrap; }
.prowl-search-on .prowl-search-toggle { color: var(--gold-ink); background: var(--crm-gold-faint); }
@media (max-width: 1280px) {
  .prowl-search .prowl-search-toggle { display: inline-flex; }
  .prowl-search-field { display: none; }
  .prowl-head[data-searching] .prowl-search-field {
    display: flex; position: absolute; inset: var(--bell-top) var(--bell-clear) 14px 24px; z-index: 1;
    background: var(--crm-paper);
  }
  .prowl-head[data-searching] .prowl-search-input { flex: 1 1 auto; width: auto; min-width: 0; }
  .prowl-head[data-searching] .prowl-search-done { display: inline-flex; align-items: center; }
}

/* Tablets, to 959px: the five tabs need the head's whole width, so the head
   takes two rows, the way the CRM's own head wraps its tabs under its title:
   the mark and the folded search on the bell's row — the bell's band, so
   they centre on the bell's line — the tabs under both, out of the bell's
   way and whole from 700px up — with two-digit counts too, so the pills sit
   a little closer here. An open search covers the top row only. */
@media (min-width: 641px) and (max-width: 959px) {
  .prowl-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--bell-size) auto;
    gap: 8px 14px; min-height: 0; padding: var(--bell-top) 20px 10px;
  }
  .prowl-mark { grid-area: 1 / 1; justify-self: start; }
  .prowl-hair { display: none; }
  /* the bell's clearance, less the head's own 20 */
  .prowl-search { grid-area: 1 / 2; margin-right: calc(var(--bell-clear) - 20px); }
  .prowl-tabs { --prowl-tab-gap: 2px; --prowl-tab-pad: 10px; grid-area: 2 / 1 / auto / -1; margin: -4px; }
  .prowl-head[data-searching] .prowl-search-field { inset: var(--bell-top) var(--bell-clear) auto 20px; height: var(--bell-size); }
}

/* A button that is only an icon (the dialog's ✕, the folded search). */
.prowl-icon-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--crm-ink-2); cursor: pointer;
}
.prowl-icon-btn:hover { background: var(--crm-panel); color: var(--crm-head); }
.prowl-icon-btn:active { background: var(--crm-panel-2); }

/* ── The panes ──────────────────────────────────────────────────────────── */
.prowl-panes { position: relative; flex: 1 1 auto; min-height: 0; }
.prowl-pane { position: absolute; inset: 0; overflow-y: auto; overflow-x: clip; overscroll-behavior: contain; }
.prowl-pane[hidden] { display: none; }
/* Until a tab is ready, its skeleton (or its failure) is all the pane shows —
   the moved panels and anything a tab has half-drawn wait behind it. */
.prowl-pane[data-state="skeleton"] > :not(.prowl-pane-state):not(.prowl-note-row),
.prowl-pane[data-state="error"] > :not(.prowl-pane-state):not(.prowl-note-row) { display: none !important; }
.prowl-pane[data-state="ready"] > .prowl-pane-state { display: none; }

/* A tab's page: the prototype's column. Its bottom room is Ask Leo's: the
   summon floats over the bottom right of every pane, so a page ends far
   enough below its last line for that line to scroll clear of it.
   The summon (css/leo.css) is a 45px pill 22px off the bottom — the
   prototype's 140px clears it; from 720px down it is a 43px circle 76px off
   the bottom, above the home indicator — its top plus 24px. Every tab's last
   line sits in a .prowl-page (My Work's inside its own scroller, which sits
   over the pane), so the room goes here, not on the pane. Leo's own page
   has no summon: its pages end plainly (css/prowl-leo.css). */
.prowl-root { --prowl-end-room: 140px; }
@media (max-width: 720px) {
  .prowl-root { --prowl-end-room: calc(144px + env(safe-area-inset-bottom)); }
}
.prowl-page {
  box-sizing: border-box; max-width: 1280px; margin: 0 auto;
  padding: 22px 28px var(--prowl-end-room);
  display: flex; flex-direction: column; gap: 16px;
}

/* ── A tab's title bar: the title, one line of meta, the one primary button ── */
.prowl-titlebar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.prowl-titlebar-text { min-width: 0; }
.prowl-titlebar .crm-title { font-size: 25px; line-height: 1.2; overflow-wrap: anywhere; }
.prowl-meta { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--crm-ink-2); font-variant-numeric: tabular-nums; }
.prowl-titlebar .crm-btn-primary {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 13px 0 11px; border-radius: 7px;
  font-size: 13px; white-space: nowrap;
}
.prowl-titlebar .crm-btn-primary svg { flex: none; width: 14px; height: 14px; }
/* Pressed: the CRM's buttons have no pressed state of their own. */
.prowl-root .crm-btn:not(.crm-btn-primary):not([disabled]):active,
.prowl-scrim .crm-btn:not(.crm-btn-primary):not([disabled]):active { background: var(--crm-panel); }

/* ── The one-time notes an old Leo link brings ─────────────────────────────
   "Scheduled tasks moved here…", "Installer communication moved…" sit at the
   top of their pane as a card. Got it remembers it for this browser. */
.prowl-note-row { box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 22px 28px 0; }
.prowl-note-row[hidden] { display: none; }
.prowl-moved {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 16px; border: 1px solid var(--crm-gold-pale); border-radius: 10px;
  background: var(--crm-gold-faint); color: var(--crm-ink-mid);
  font-size: 13.5px; line-height: 1.5;
}
.prowl-moved-icon { flex: none; margin-top: 1px; color: var(--gold-ink); }
.prowl-moved-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.prowl-moved-text b { font-weight: 600; color: var(--crm-head); }
.prowl-moved .crm-btn { flex: none; height: 30px; padding: 0 11px; border-radius: 7px; font-size: 12.5px; white-space: nowrap; }

/* ── Loading: a quiet skeleton, static bars, no spinner ──────────────────── */
.prowl-bar { display: block; height: 12px; border-radius: 4px; background: var(--crm-panel-2); }
.prowl-skel { pointer-events: none; }
.prowl-skel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.prowl-skel-titles { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.prowl-bar-title { width: 180px; height: 22px; border-radius: 6px; }
.prowl-bar-meta { width: 320px; max-width: 60vw; }
.prowl-bar-btn { flex: none; width: 104px; height: 34px; border-radius: 7px; }
.prowl-skel-card { display: block; border: 1px solid var(--crm-grid-strong); border-radius: 10px; background: var(--crm-paper); overflow: hidden; }
.prowl-skel-views { display: flex; gap: 22px; padding: 15px 16px 13px; border-bottom: 1px solid var(--crm-grid); }
.prowl-skel-views .prowl-bar { width: 64px; }
.prowl-skel-tools { display: flex; gap: 8px; padding: 8px; }
.prowl-skel-tools .prowl-bar { width: 84px; height: 30px; border-radius: 7px; }
.prowl-bar-group { width: 150px; height: 18px; border-radius: 5px; margin-top: 6px; }
.prowl-skel-row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) 150px 96px; align-items: center; gap: 16px;
  height: 54px; padding: 0 16px; border-bottom: 1px solid var(--crm-grid);
}
.prowl-skel-row:last-child { border-bottom: 0; }
.prowl-bar-dot { width: 18px; height: 18px; border-radius: 50%; }
.prowl-skel-row:nth-child(1) .prowl-bar:nth-child(2) { width: 64%; }
.prowl-skel-row:nth-child(2) .prowl-bar:nth-child(2) { width: 48%; }
.prowl-skel-row:nth-child(3) .prowl-bar:nth-child(2) { width: 72%; }
.prowl-skel-row:nth-child(4) .prowl-bar:nth-child(2) { width: 56%; }
.prowl-skel-chat { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: 100%; min-height: 360px; }
.prowl-skel-hist { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-right: 1px solid var(--crm-rule); background: var(--crm-paper); }
.prowl-bar-field { height: 34px; border-radius: 999px; }
.prowl-skel-line { display: flex; flex-direction: column; gap: 7px; }
.prowl-skel-line .prowl-bar:first-child { width: 78%; }
.prowl-skel-line .prowl-bar:last-child { width: 46%; height: 10px; }
.prowl-skel-thread { display: flex; flex-direction: column; gap: 20px; padding: 22px 28px; background: var(--crm-paper); }
.prowl-skel-msgs { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; }
.prowl-bar-msg { width: 62%; height: 44px; border-radius: 12px; }
.prowl-bar-msg:nth-child(2) { align-self: flex-end; width: 40%; }
.prowl-bar-msg:nth-child(3) { width: 70%; height: 72px; }
.prowl-bar-composer { height: 56px; border-radius: 14px; }

/* ── A tab that failed to start ───────────────────────────────────────────── */
.prowl-pane-error {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 20px 22px; border: 1px solid var(--crm-grid-strong); border-radius: 10px;
  background: var(--crm-paper);
}
.prowl-pane-error-title { font-size: 15px; font-weight: 600; color: var(--crm-head); }
.prowl-pane-error p { margin: 0; max-width: 68ch; font-size: 13.5px; line-height: 1.55; color: var(--crm-ink-mid); }
.prowl-pane-error .crm-btn { height: 32px; padding: 0 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--crm-head); }

/* ── Focus: 2px of gold ink, at once, on everything you can reach ────────────
   Never on a box you talk to Leo through (css/leo.css lights its pool
   instead). On the navy toast the ring is the brighter gold. */
.prowl-root :is(a, button, input, select, textarea, summary, [tabindex]):not(.leo-editor):not(.leo-composer-input):focus-visible,
.prowl-scrim :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.prowl-menu .crm-pop-opt:focus-visible {
  outline: 2px solid var(--gold-ink); outline-offset: 2px; box-shadow: none;
}
.prowl-menu .crm-pop-opt:focus-visible { outline-offset: -2px; background: var(--crm-panel); }
.prowl-toast button:focus-visible { outline: 2px solid var(--crm-gold); outline-offset: 2px; }

/* ── Menus: the CRM's popover, in the prototype's sentence case ──────────── */
.prowl-menu { min-width: 220px; }
.prowl-menu .crm-pop-head { padding: 8px 8px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.prowl-menu .crm-pop-opt { min-height: 32px; }
.prowl-menu .crm-pop-tick { flex: none; display: inline-flex; width: 14px; }
.prowl-menu .crm-pop-opt[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.prowl-menu-danger { color: var(--crm-blocked); }
.prowl-menu-hint { flex: none; margin-left: auto; padding-left: 10px; font-size: 12px; color: var(--crm-ink-2); }
.prowl-menu-sep { height: 1px; margin: 5px 4px; background: var(--crm-rule); }

/* ── Dialogs ───────────────────────────────────────────────────────────────── */
.prowl-scrim {
  position: fixed; inset: 0; z-index: var(--crm-z-modal);
  max-width: none; margin: 0; box-sizing: border-box; padding: 24px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--crm-navy) 36%, transparent);
  animation: prowl-fade 0.16s ease-out;
}
[data-theme="dark"] .prowl-scrim { background: color-mix(in srgb, var(--sidebar-deep) 72%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prowl-scrim { background: color-mix(in srgb, var(--sidebar-deep) 72%, transparent); }
}
.prowl-dialog {
  position: relative; box-sizing: border-box;
  width: min(500px, 100%); max-height: min(86dvh, 760px);
  display: flex; flex-direction: column;
  background: var(--crm-paper); color: var(--crm-ink);
  border: 1px solid var(--crm-grid-strong); border-radius: 14px;
  box-shadow: 0 18px 50px -12px color-mix(in srgb, var(--crm-navy) 40%, transparent),
              0 2px 8px color-mix(in srgb, var(--crm-navy) 10%, transparent);
  font-family: var(--font-sans);
  animation: prowl-rise 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.prowl-dialog-wide { width: min(640px, 100%); }
.prowl-dialog-head { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 16px 14px 0 22px; }
.prowl-dialog-title {
  flex: 1 1 auto; min-width: 0; margin: 4px 0 0;
  font-family: var(--font-serif); font-size: 19px; font-weight: 500; line-height: 1.3;
  color: var(--crm-head); overflow-wrap: anywhere;
}
.prowl-dialog-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 10px 22px 4px; font-size: 13.5px; line-height: 1.55; color: var(--crm-ink-mid);
}
.prowl-dialog-body > p { margin: 0 0 10px; max-width: 68ch; }
.prowl-dialog-err { flex: none; display: flex; align-items: flex-start; gap: 8px; margin: 8px 22px 0; font-size: 13px; line-height: 1.45; color: var(--crm-blocked); }
.prowl-dialog-err[hidden] { display: none; }
.prowl-dialog-err-mark { flex: none; display: inline-flex; margin-top: 1px; }
.prowl-dialog-acts { flex: none; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 22px 20px; }
.prowl-dialog-acts .crm-btn { height: 36px; padding: 0 14px; border-radius: 7px; white-space: nowrap; }
.prowl-dialog-acts .crm-btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }

/* A select the person picker makes when it is handed a container. */
.prowl-select {
  box-sizing: border-box; height: 34px; max-width: 100%; padding: 0 28px 0 10px;
  border: 1px solid var(--crm-rule-firm); border-radius: 7px;
  background-color: var(--crm-paper); color: var(--crm-head);
  font: inherit; font-size: 13px;
}
.prowl-select:hover { background-color: var(--crm-panel); }

/* ── The project list under a project field ─────────────────────────────── */
.prowl-listbox {
  position: fixed; z-index: var(--crm-z-menu);
  max-width: none; margin: 0; box-sizing: border-box; padding: 6px;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--crm-paper); color: var(--crm-ink);
  border: 1px solid var(--crm-rule-firm); border-radius: 10px;
  box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--crm-navy) 24%, transparent);
  font-family: var(--font-sans); font-size: 13px;
}
.prowl-listbox[hidden] { display: none; }
.prowl-listbox-head { padding: 6px 8px 4px; font-size: 11.5px; font-weight: 600; color: var(--crm-ink-2); }
.prowl-listbox-opt { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.prowl-listbox-opt:hover, .prowl-listbox-on { background: var(--crm-gold-faint); }
.prowl-listbox-on { box-shadow: inset 0 0 0 1px var(--crm-gold-pale); }
.prowl-listbox-name, .prowl-listbox-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prowl-listbox-name { font-weight: 500; color: var(--crm-head); }
.prowl-listbox-sub { font-size: 12px; color: var(--crm-ink-2); }
.prowl-listbox-note { padding: 10px 8px; font-size: 12.5px; line-height: 1.45; color: var(--crm-ink-mid); }

/* ── The toast: the CRM's, with room for Undo, an action and ✕ ──────────── */
.prowl-toast {
  display: flex; align-items: center; gap: 12px;
  box-sizing: border-box; max-width: min(620px, calc(100vw - 32px));
  padding: 8px 8px 8px 16px; border-radius: 12px; line-height: 1.45;
  font-family: var(--font-sans);
}
.prowl-toast.crm-toast-show { pointer-events: auto; }
.prowl-toast-text { flex: 1 1 auto; min-width: 0; }
.prowl-toast-mark { flex: none; display: inline-flex; color: var(--crm-gold); }
.prowl-toast .crm-toast-undo { flex: none; margin-left: 0; padding: 6px 8px; border-radius: 7px; white-space: nowrap; }
.prowl-toast-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: inherit; cursor: pointer; opacity: 0.8;
}
.prowl-toast-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
/* The CRM's toast is navy in both themes; on the dark ground it needs an edge. */
[data-theme="dark"] .prowl-toast { border: 1px solid var(--crm-grid-strong); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prowl-toast { border: 1px solid var(--crm-grid-strong); }
}

@keyframes prowl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes prowl-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── On a phone ─────────────────────────────────────────────────────────────
   The shell's top bar holds the bell, so the head needs no room for it and
   stays one row: the mark, then the tabs scrolling sideways at a thumb's
   height (40px drawn, 44px to touch). Pages tighten; dialogs become full
   sheets; fields are 16px so iOS never zooms. */
@media (max-width: 640px) {
  .prowl-head { gap: 10px; min-height: 57px; padding: 6px 4px 6px 12px; }
  .prowl-mark { font-size: 16px; }
  .prowl-hair { height: 20px; }
  .prowl-tabs { --prowl-tab-gap: 6px; --prowl-tab-pad: 14px; }
  .prowl-tab { height: 40px; font-size: 14.5px; }
  .prowl-tab::after { content: ""; position: absolute; inset: -2px 0; }
  .prowl-icon-btn { width: 44px; height: 44px; }
  .prowl-head[data-searching] .prowl-search-field { inset: 6px 4px 6px 12px; }
  .prowl-search-input { height: 44px; font-size: 16px; }
  .prowl-search-done { height: 44px; }
  .prowl-page { padding: 14px 12px var(--prowl-end-room); gap: 12px; }
  .prowl-note-row { padding: 14px 12px 0; }
  .prowl-moved { flex-wrap: wrap; font-size: 14px; }
  .prowl-moved .crm-btn { height: 44px; margin-left: 30px; }
  /* The title and its button share the first line; the meta takes the
     full width under them instead of wrapping beside the button. */
  .prowl-titlebar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; }
  .prowl-titlebar-text { display: contents; }
  .prowl-titlebar .crm-title { grid-column: 1; grid-row: 1; font-size: 23px; }
  .prowl-titlebar > :not(.prowl-titlebar-text) { grid-column: 2; grid-row: 1; }
  .prowl-titlebar .prowl-meta { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 13.5px; }
  .prowl-titlebar .crm-btn-primary { height: 44px; }
  .prowl-pane-error .crm-btn { height: 44px; }
  .prowl-skel-row { grid-template-columns: 18px minmax(0, 1fr); height: 64px; }
  .prowl-skel-row .prowl-bar:nth-child(n + 3) { display: none; }
  .prowl-skel-tools .prowl-bar:nth-child(n + 3) { display: none; }
  .prowl-skel-chat { grid-template-columns: minmax(0, 1fr); }
  .prowl-skel-hist { border-right: 0; }
  .prowl-skel-thread { display: none; }

  .prowl-scrim { padding: 0; place-items: stretch; }
  .prowl-dialog, .prowl-dialog-wide { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
  .prowl-dialog-head { padding: calc(8px + env(safe-area-inset-top)) 4px 0 16px; }
  .prowl-dialog-title { margin-top: 11px; }
  .prowl-dialog-body { padding: 8px 16px; font-size: 15px; }
  .prowl-dialog-err { margin: 8px 16px 0; font-size: 14px; }
  .prowl-dialog-acts { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--crm-rule); }
  .prowl-dialog-acts .crm-btn { flex: 1 1 0; height: 44px; }
  .prowl-scrim :is(input, select, textarea), .prowl-root :is(input, select, textarea), .prowl-select { font-size: 16px; }
  .prowl-select { height: 44px; }
  .prowl-listbox { font-size: 15px; }
  .prowl-listbox-opt { min-height: 44px; justify-content: center; }

  .prowl-toast {
    left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom));
    max-width: none; transform: translateY(16px);
  }
  .prowl-toast.crm-toast-show { transform: none; }
  .prowl-toast-x { width: 44px; height: 44px; }
  .prowl-toast .crm-toast-undo { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .prowl-scrim, .prowl-dialog { animation: none; }
  .prowl-toast { transition: none; }
}

/* The tab files style their own parts in css/prowl-work.css,
   css/prowl-inbox.css and css/prowl-leo.css. */