/* The workspace's design tokens and the bare elements they dress. brand.css
 * holds identity (palette, wordmark, Aeonik) and the one dark palette, which
 * darkens these tokens too; this file restates the workspace surface/density
 * tokens exactly as the product's 2026-09-25 work-shell revamp set them
 * (sharepi web/workspace.css): chrome reads at 14px with 13px metadata, the
 * transcript keeps the 16px reading size, and hierarchy comes from weight and
 * ink before size. Soft neutral grounds, 8/12px radii, a muted working green. */

:root {
  --pulse: 1.6s;
  --ping: 2.6s;

  /* Workspace overrides of the brand roles (same values as v1's work shell). */
  --sv-surface: #ffffff;
  --sv-surface-raised: #fafafa;
  --sv-surface-sunken: #f3f3f3;
  --sv-surface-dim: #e8e8e8;
  --sv-hairline: #dedede;
  --sv-hairline-strong: #a0a0a0;
  --sv-ink-secondary: #4f4f4f;
  --sv-ink-tertiary: #6e6e6e;
  --sv-radius: 8px;
  --sv-rail: 17.5rem;
  --sv-panel: 32rem; /* wide enough for every Details tab's word */
  --sv-dur-fast: 160ms;
  --sv-dur-base: 240ms;

  --ws-sidebar: #f5f5f5;
  --ws-hover: #ededed;
  --ws-selected: #e5e5e5;
  --ws-working: #218547;
  --ws-working-ink: #1a743e;
  --sv-attention: #9c6042;
  --pop-shadow: 0 8px 32px rgb(0 0 0 / 0.12); /* popovers (app.css) */
  /* Floating glass notes (toast.css): a contact line and a soft lift. */
  --sv-glass-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px -6px rgb(0 0 0 / 0.18);

  --ui-text: 0.875rem;   /* chrome */
  --ui-meta: 0.8125rem;  /* timestamps, receipts, counters */
  --reading: 52rem;      /* the transcript's measure */
}
/* Dark: the same lift needs a deeper cast to read on a dark surface
 * (:root.theme-dark outranks :root, as brand.css's dark palette does). */
:root.theme-dark {
  --sv-glass-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 28px -6px rgb(0 0 0 / 0.6);
}

* { box-sizing: border-box; }
/* Author display rules must never defeat the hidden attribute. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--sv-surface);
  color: var(--sv-ink);
  font-size: var(--sv-text-body);
  line-height: var(--sv-leading-body);
}

button { cursor: pointer; font: 500 var(--ui-text) / 1 var(--sv-font-sans); color: var(--sv-ink); }
button.primary {
  background: var(--sv-ink);
  color: var(--sv-surface);
  border: 0;
  border-radius: var(--sv-radius);
  min-height: 36px;
  padding: 0 var(--sv-space-4);
  transition: opacity var(--sv-dur-instant) var(--sv-ease-out);
}
button.primary:hover:not(:disabled) { opacity: 0.85; }
button.ghost, a.ghost {
  background: none;
  color: var(--sv-ink-secondary);
  border: 0;
  border-radius: var(--sv-radius);
  min-height: 28px;
  padding: 0 var(--sv-space-2);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font: 500 var(--ui-text) / 1 var(--sv-font-sans);
  transition: color var(--sv-dur-instant) var(--sv-ease-out), background var(--sv-dur-instant) var(--sv-ease-out);
}
button.ghost:hover, a.ghost:hover { color: var(--sv-ink); background: var(--ws-hover); }
button:disabled { opacity: 0.5; cursor: default; }
:is(button, a, summary, input, select, textarea):focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }

/* Stroke icons from the sprite: 16px, inherit colour, sit beside words. */
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
button:not(.primary, .ghost) .icon + *, button:not(.primary, .ghost) * + .icon { margin-left: 6px; }
button.primary .icon, button.ghost .icon, a.ghost .icon { opacity: 0.85; }
/* gap, not margins: a bare text node ("Stop", "Attach") gets the space too. */
button.primary, button.ghost, a.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

input, select, textarea {
  background: var(--sv-surface);
  color: var(--sv-ink);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  padding: var(--sv-space-2) var(--sv-space-3);
  font-family: var(--sv-font-sans);
  font-size: var(--sv-text-body);
}