/* The founders' workspace: one look for the tools (tools/) and the CRM page (crm/web/).
   This file is the source. crm/web/ws.css is a byte-for-byte copy; a test in each place fails when they differ
   (tools/shared/ws.test.cjs, crm/infra/test/crm-stack.test.ts). Change it here, then copy it:
     cp tools/shared/ws.css crm/web/ws.css && cp tools/shared/ws.js crm/web/js/ws.js

   What it holds:
   1. The tokens: the ink and cream palette, light and dark (docs/brand.md). The dark set shows only
      under <html data-theme="dark">, which js/ws.js sets from the founder's choice (Light, Dark, or System).
   2. .paper: a document (a quote, a report) stays light in the dark theme, as it prints.
   3. The shell of a tool page: the sidebar, the bar at the top of the page, the phone bar and its drawer.
      The CRM draws the same sidebar from its own markup (crm/web/app.css, "The frame") with these sizes.
   4. The command palette (Cmd+K or Ctrl+K, and "/") of both.

   Brand rules kept (docs/brand.md): the logo and text stay solid; no gradient on small UI; one solid button on each
   screen. Color is kept for meaning only: late, good, caution, and the violet of a status. Space Grotesk for what people read, IBM Plex Mono for
   numbers, money and keys. */

/* ===== 1. Tokens ===== */
:root, .paper {
  color-scheme: light;
  --storm: #0E0D0B;             /* Ink. The names predate the palette */
  --night: #1A1814;
  --ice: #F4EFE6;               /* Cream */

  --ground: #F4EFE6;            /* the page: Cream */
  --side-bg: #ECE6D9;           /* the sidebar */
  --raised: #FBF8F2;            /* a card, a menu, a field: Paper */
  --sunken: #F0EADF;            /* a well inside a card; a lane of the board */
  --tint: #EBE5D8;              /* a quiet fill: a tag, a chosen option */
  --track: #E4DDCF;             /* the track of a segmented control */
  --hover: rgb(14 13 11 / .05);
  --press: rgb(14 13 11 / .09);
  --selected: rgb(14 13 11 / .07);

  --ink: #0E0D0B;
  --ink-2: #4A453E;             /* secondary text: a nav item, a label. Stone */
  --muted: #6B655B;             /* 5:1 on the page */
  --faint: #948D80;             /* a placeholder, a disabled control; never body text */
  --line: #E2DBCD;              /* a hairline: the edge of a card, a divider */
  --line-2: #D6CFC0;            /* a stronger divider */
  --edge: #C9C1B1;              /* the edge of an outline button */
  --field: #FBF8F2;
  --field-edge: #8F887B;        /* the edge of a field or a checkbox */

  --brand: var(--storm);        /* the one solid button */
  --brand-hover: #2B2923;
  --on-brand: #FBF8F2;
  --accent: var(--storm);       /* a link, the focus ring, a chosen tab, a count */
  --accent-hover: #2B2923;
  --accent-soft: rgb(14 13 11 / .06);
  --accent-ring: rgb(14 13 11 / .18);

  --late: #B3261E;  --late-soft: rgb(179 38 30 / .08);
  --good: #0E7A4B;  --good-soft: rgb(14 122 75 / .09);
  --caution: #8A5A00; --caution-soft: rgb(138 90 0 / .1);
  --violet: #5B3FC4;

  --scrim: rgb(0 0 0 / .32);
  --toast: var(--storm);
  --on-toast: var(--ice);
  --toast-act: #FBF8F2;         /* the action of a toast: light and underlined on the ink toast */

  --shadow-xs: 0 1px 2px rgb(0 0 0 / .05);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .04);
  --shadow-md: 0 4px 8px -4px rgb(0 0 0 / .08), 0 12px 28px -8px rgb(0 0 0 / .14);
  --shadow-lg: 0 8px 16px -8px rgb(0 0 0 / .12), 0 28px 56px -16px rgb(0 0 0 / .28);

  --sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  /* The type scale of an app: size/line height. */
  --t-xs: 12px/16px;
  --t-sm: 13px/18px;
  --t-md: 14px/20px;
  --t-body: 14px/21px;
  --t-lg: 16px/24px;
  --t-h3: 16px/22px;
  --t-h2: 20px/28px;
  --t-h1: 28px/34px;

  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --side-w: 248px;              /* the sidebar; 64px as a rail of icons from 760px to 1199px */
  --bar-h: 56px;                /* the bar at the top of a page */
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0E0D0B;
  --side-bg: #0A0908;
  --raised: #1A1814;
  --sunken: #141310;
  --tint: #24211C;
  --track: #24211C;
  --hover: rgb(244 239 230 / .05);
  --press: rgb(244 239 230 / .09);
  --selected: rgb(244 239 230 / .08);

  --ink: #F4EFE6;
  --ink-2: #D6CFC0;
  --muted: #B5AE9F;
  --faint: #7E776B;
  --line: #2A2721;
  --line-2: #34302A;
  --edge: #443F37;
  --field: #141310;
  --field-edge: #6F685C;

  --brand: #F4EFE6;             /* on dark, the solid button is Cream with Ink text */
  --brand-hover: #DDD6C8;
  --on-brand: var(--storm);
  --accent: #F4EFE6;
  --accent-hover: #DDD6C8;
  --accent-soft: rgb(244 239 230 / .1);
  --accent-ring: rgb(244 239 230 / .28);

  --late: #FF8A80;  --late-soft: rgb(255 138 128 / .12);
  --good: #3DD68C;  --good-soft: rgb(61 214 140 / .12);
  --caution: #F5B83D; --caution-soft: rgb(245 184 61 / .12);
  --violet: #B58CFF;

  --scrim: rgb(0 0 0 / .62);
  --toast: var(--ice);
  --on-toast: var(--storm);
  --toast-act: #0E0D0B;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / .35);
  --shadow-md: 0 4px 8px -4px rgb(0 0 0 / .4), 0 12px 28px -8px rgb(0 0 0 / .55);
  --shadow-lg: 0 8px 16px -8px rgb(0 0 0 / .5), 0 28px 56px -16px rgb(0 0 0 / .7);
}
/* A document keeps the light set inside the dark theme: it is a page of paper, and it prints that way. */
:root[data-theme="dark"] .paper { color-scheme: light; }
.paper { color: var(--ink); }

/* ===== 2. Helpers both use ===== */
.ws-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ws-ic { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ws-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 5px;
  background: var(--raised); color: var(--muted); font: 500 11px/1 var(--mono); box-shadow: 0 1px 0 var(--line); }
/* The theme switch: three choices in a row. The chosen one is pressed (aria-pressed), or checked in a menu (aria-checked). */
.ws-theme { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--track); }
.ws-theme button { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 8px; border: 0; border-radius: 6px;
  background: none; color: var(--muted); font: 500 var(--t-xs) var(--sans); cursor: pointer; }
.ws-theme button:hover { color: var(--ink); }
.ws-theme button[aria-pressed="true"], .ws-theme button[aria-checked="true"] { background: var(--raised); color: var(--ink); box-shadow: var(--shadow-xs), 0 0 0 1px var(--line); }
.ws-theme .ws-theme-one { display: none; }   /* the one button of the icon rail (section 3) */

/* ===== 3. The shell of a tool page ===== */
/* <body class="ws"> gets the sidebar from tools/shared/shell.js. The page's own content follows it unchanged. */
body.ws { padding-left: var(--side-w); background: var(--ground); color: var(--ink); }
.ws-side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; display: flex; flex-direction: column; width: var(--side-w);
  padding: 12px 12px 12px; border-right: 1px solid var(--line); background: var(--side-bg); color: var(--ink-2); }
.ws-side-head { display: flex; align-items: center; height: 40px; padding: 0 8px; margin-bottom: 8px; }
.ws-brand { display: flex; align-items: center; height: 36px; border-radius: var(--r-sm); text-decoration: none; }
.ws-brand img { display: block; width: auto; height: 30px; }   /* 160 px wide */
.ws-brand .ws-mark { display: none; height: 26px; }            /* the key O in one color, for the rail */
.ws-brand .on-dark { display: none; }
:root[data-theme="dark"] .ws-brand .on-light { display: none; }
:root[data-theme="dark"] .ws-brand .on-dark:not(.ws-mark) { display: block; }
.ws-search { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; margin: 0 0 12px; padding: 0 6px 0 10px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--raised); color: var(--muted); font: 400 var(--t-md) var(--sans); text-align: left; cursor: pointer; box-shadow: var(--shadow-xs); }
.ws-search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-search:hover { border-color: var(--line-2); color: var(--ink-2); }
.ws-search .ws-kbd { box-shadow: none; }
.ws-nav { display: flex; flex: 1 1 auto; flex-direction: column; gap: 1px; min-height: 0; margin: 0 -4px; padding: 0 4px; overflow-y: auto; }
.ws-group { margin: 16px 0 4px; padding: 0 10px; color: var(--muted); font: 500 var(--t-xs) var(--sans); }
.ws-item { position: relative; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--r-md); color: var(--ink-2);
  font: 400 var(--t-md) var(--sans); text-decoration: none; white-space: nowrap; }
.ws-item .ws-ic { color: var(--muted); }
.ws-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ws-item:hover { background: var(--hover); color: var(--ink); }
.ws-item[aria-current="page"] { background: var(--selected); color: var(--ink); font-weight: 500; }
.ws-item[aria-current="page"] .ws-ic { color: var(--ink); }
.ws-item .ws-num { flex: none; color: var(--muted); font: 500 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; }
.ws-item .ws-num.is-accent { color: var(--accent); }
.ws-item .ws-tag { flex: none; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); font: 500 11px/14px var(--sans); }
.ws-sep { height: 1px; margin: 12px 10px 8px; border: 0; background: var(--line); }
.ws-side-foot { display: grid; gap: 8px; margin: 8px -4px 0; padding: 10px 4px 0; border-top: 1px solid var(--line); }
.ws-side :focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The bar at the top of a tool page: its name on the left, its file actions on the right. It stays in view. */
.ws-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; min-height: var(--bar-h); padding: 10px 32px;
  border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--ground) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.ws-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto; font: 500 var(--t-md) var(--sans); color: var(--ink); }
.ws-crumb .ws-crumb-sep { color: var(--faint); font-weight: 400; }
.ws-crumb .ws-crumb-doc { overflow: hidden; color: var(--muted); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }

/* The phone bar and the drawer: below 760px the sidebar slides in from the left. */
.ws-phonebar { display: none; }
.ws-scrim { display: none; }

/* From 760px to 1199px the sidebar is a rail of icons; each label stays for a screen reader and as a tooltip. */
@media (min-width: 760px) and (max-width: 1199px) {
  :root { --side-w: 64px; }
  .ws-side { align-items: center; padding: 12px 10px; }
  .ws-side-head { justify-content: center; padding: 0; }
  .ws-brand .ws-full { display: none !important; }
  .ws-brand .ws-mark.on-light { display: block; }
  :root[data-theme="dark"] .ws-brand .ws-mark.on-light { display: none; }
  :root[data-theme="dark"] .ws-brand .ws-mark.on-dark { display: block; }
  .ws-search { justify-content: center; width: 40px; padding: 0; }
  .ws-search span, .ws-search .ws-kbd { display: none; }
  .ws-nav { align-self: stretch; }
  .ws-group { height: 1px; margin: 10px 6px; padding: 0; overflow: hidden; background: var(--line); color: transparent; }
  .ws-item { justify-content: center; padding: 0; height: 36px; }
  .ws-item span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ws-sep { margin: 10px 6px; }
  .ws-side-foot { align-self: stretch; }
  /* The theme switch of the rail is one button, the size of an item: it shows the choice and moves to the next one. */
  .ws-side-foot > .ws-theme { padding: 0; background: none; }
  .ws-side-foot > .ws-theme > button[data-choice] { display: none; }
  .ws-side-foot > .ws-theme > .ws-theme-one { display: inline-flex; flex: 1 1 auto; height: 36px; padding: 0; border-radius: var(--r-md); color: var(--muted); }
  .ws-side-foot > .ws-theme > .ws-theme-one:hover { background: var(--hover); color: var(--ink); }
  .ws-bar { padding: 10px 24px; }
}
@media (max-width: 759px) {
  body.ws { padding-left: 0; }
  .ws-phonebar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 8px 0 4px;
    border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--ground) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .ws-phonebar .ws-brand img { height: 30px; }
  .ws-phonebar-title { flex: 1; min-width: 0; overflow: hidden; color: var(--ink); font: 500 var(--t-md) var(--sans); text-overflow: ellipsis; white-space: nowrap; }
  .ws-iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-md); background: none; color: var(--ink-2); cursor: pointer; }
  .ws-iconbtn:hover { background: var(--hover); }
  .ws-side { width: min(300px, 86vw); padding-top: 14px; box-shadow: var(--shadow-lg); transform: translateX(-102%); visibility: hidden; }
  .ws-open .ws-side { transform: none; visibility: visible; }
  .ws-open .ws-scrim { position: fixed; inset: 0; z-index: 19; display: block; background: var(--scrim); }
  .ws-item { height: 44px; font-size: 15px; }
  .ws-bar { position: static; padding: 12px 16px; flex-wrap: wrap; background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ws-bar .ws-crumb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 760px) {
  .ws-phonebar .ws-iconbtn { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .ws-item, .ws-search, .ws-theme button { transition: background-color .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease); }
  .ws-side { transition: transform .22s var(--ease), visibility .22s; }
  /* Visible at once on open, so the focus can move into the drawer; hidden only after it slides out. */
  .ws-open .ws-side { transition: transform .22s var(--ease), visibility 0s; }
}
/* A move between two pages of the workspace (the tools and the CRM page share one address, tools.getorthus.com):
   the browser holds the old page until the new one is drawn, keeps the sidebar and the phone bar in place, and fades the
   rest. A browser with no cross-document view transitions moves at once, as before. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .ws-side { view-transition-name: ws-side; }
  .ws-phonebar { view-transition-name: ws-phonebar; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .16s; animation-timing-function: var(--ease); }
}
@media print {
  .ws-side, .ws-phonebar, .ws-scrim, .ws-bar, .cmdk { display: none !important; }
  body.ws { padding-left: 0; background: #fff; }
  /* Paper is white: a page printed in the dark theme prints with the light set. */
  :root[data-theme="dark"] {
    color-scheme: light; background: #fff;
    --ground: #FFFFFF; --side-bg: #F4F4F4; --raised: #FFFFFF; --sunken: #F5F5F5; --tint: #F2F2F2; --track: #EBEBEB;
    --ink: #0A0A0A; --ink-2: #3A3A3A; --muted: #616161; --faint: #8F8F8F; --line: #E6E6E6; --line-2: #D9D9D9; --edge: #CFCFCF;
    --field: #FFFFFF; --field-edge: #8C8C8C; --brand: var(--storm); --on-brand: #FFFFFF; --accent: var(--storm);
    --accent-soft: rgb(0 0 0 / .06); --late: #B3261E; --good: #0E7A4B; --caution: #8A5A00; --violet: #5B3FC4;
  }
}

/* ===== 4. The command palette ===== */
/* One box to search and to go anywhere: Cmd+K (Ctrl+K), or "/" when the cursor is not in a field. */
.cmdk { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.cmdk[hidden] { display: none; }
.cmdk-scrim { position: absolute; inset: 0; background: var(--scrim); }
.cmdk-panel { position: relative; display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(560px, 76vh); overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; background: var(--raised); color: var(--ink); box-shadow: var(--shadow-lg); }
.cmdk-field { display: flex; flex: none; align-items: center; gap: 12px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.cmdk-input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 400 var(--t-lg) var(--sans); }
.cmdk-input::placeholder { color: var(--faint); }
.cmdk-input::-webkit-search-cancel-button { display: none; }
.cmdk-esc { height: 22px; cursor: pointer; }
.cmdk-esc:hover { color: var(--ink); }
.cmdk-esc-t { display: none; }
.cmdk-list { flex: 1 1 auto; min-height: 0; padding: 6px 8px 8px; overflow-y: auto; overscroll-behavior: contain; }
.cmdk-group { padding: 10px 10px 6px; color: var(--muted); font: 500 var(--t-xs) var(--sans); }
.cmdk-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px;
  border: 0; border-radius: var(--r-md); background: none; color: var(--ink); font: 400 var(--t-md) var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.cmdk-row[aria-selected="true"] { background: var(--selected); }
.cmdk-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--tint); color: var(--ink-2); }
.cmdk-main { display: grid; gap: 1px; min-width: 0; }
.cmdk-main b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-main span { overflow: hidden; color: var(--muted); font: 400 var(--t-sm) var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.cmdk-main .is-late { color: var(--late); }
.cmdk-main mark { background: none; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.cmdk-meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font: 400 var(--t-xs) var(--sans); white-space: nowrap; }
.cmdk-empty { padding: 28px 16px; color: var(--muted); font: 400 var(--t-md) var(--sans); text-align: center; }
.cmdk-empty b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; }
.cmdk-foot { display: flex; flex: none; align-items: center; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--sunken); color: var(--muted); font: 400 var(--t-xs) var(--sans); }
.cmdk-foot .ws-kbd + span { margin-right: 10px; }
.cmdk-foot .cmdk-count { margin-left: auto; }
@media (max-width: 759px) {
  .cmdk { padding: 0; align-items: stretch; }
  .cmdk-panel { width: 100%; max-height: none; border: 0; border-radius: 0; }
  .cmdk-input { font-size: 16px; }
  .cmdk-row { min-height: 52px; }
}
/* On a phone or a touch screen the keys are not there to press: no key hints, and the Esc chip is a Cancel button. */
@media (max-width: 759px), (pointer: coarse) {
  .cmdk-esc { height: 36px; padding: 0 12px; border: 0; background: none; box-shadow: none; color: var(--accent); font: 500 var(--t-md) var(--sans); }
  .cmdk-esc-k { display: none; }
  .cmdk-esc-t { display: inline; }
  .cmdk-foot { display: none; }
}
@media (pointer: coarse) {
  .ws-kbd:not(.cmdk-esc) { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .cmdk:not([hidden]) .cmdk-panel { animation: cmdk-in .16s var(--ease); }
  .cmdk:not([hidden]) .cmdk-scrim { animation: cmdk-fade .16s ease-out; }
}
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
@keyframes cmdk-fade { from { opacity: 0; } }