/* ==========================================================================
   Micdrop UX wireframe kit
   Shared styles for the static feature-gap wireframe pages under
   /wireframes/. Token values mirror @getmicdrop/svelte-components
   dist/tokens/generated/tokens.css so mocks read as native Micdrop UI.
   Verified against that file 2026-08-11 (MIC-2376) — if mocks stop matching
   the real app, re-diff the :root and [data-theme='dark'] blocks against it.

   Two class families:
     .md-*  — fake Micdrop product UI (buttons, cards, tables, shell…)
     .wf-*  — wireframe chrome AROUND the mocks (frames, callouts, notes)
   ========================================================================== */

:root {
  --bg-primary: 0 0% 100%;
  --bg-secondary: 220 7% 97%;
  --bg-tertiary: 220 7% 94%;
  --text-primary: 221 39% 14%;
  --text-secondary: 221 14% 40%;
  --text-tertiary: 221 10% 56%;
  --brand-primary: 209 99% 50%;
  --brand-primary-foreground: 0 0% 100%;
  --accent-warning: 28 100% 59%;
  --accent-danger: 0 100% 70%;
  --accent-success: 131 77% 35%;
  --border: 220 13% 91%;
  --card: 0 0% 100%;
  --muted: 220 14.3% 95.9%;
  --muted-foreground: 221 10% 52%;
  --hover-primary: 210 20% 96%;
  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 220 20% 18%;
  --sidebar-border: 220 13% 91%;
  --status-success-bg: 138 76% 97%;
  --status-success-text: 142 72% 29%;
  --status-success-border: 141 79% 85%;
  --status-error-bg: 0 86% 97%;
  --status-error-text: 0 74% 42%;
  --status-error-border: 0 96% 89%;
  --status-warning-bg: 48 96% 89%;
  --status-warning-text: 46 97% 35%;
  --status-warning-border: 48 97% 77%;
  --status-info-bg: 214 100% 97%;
  --status-info-text: 221 83% 53%;
  --status-info-border: 214 95% 87%;
  --focus-ring: 221 39% 14%;

  /* wireframe-chrome-only tokens */
  --wf-page-bg: 222 18% 11%;
  --wf-page-text: 220 14% 92%;
  --wf-callout: 262 83% 58%;
  --radius: 8px;
  --radius-sm: 6px;
}

[data-theme='dark'] {
  --bg-primary: 220 20% 18%;
  --bg-secondary: 221 50% 10%;
  --bg-tertiary: 221 50% 6%;
  --text-primary: 220 14% 96%;
  --text-secondary: 220 10% 76%;
  --text-tertiary: 220 9% 58%;
  --brand-primary: 220 89% 63%;
  --brand-primary-foreground: 0 0% 100%;
  --accent-warning: 30 100% 70%;
  --accent-danger: 0 100% 70%;
  --accent-success: 142 71% 45%;
  --border: 215 27.9% 16.9%;
  --card: 224 20% 10%;
  --muted: 215 27.9% 16.9%;
  --muted-foreground: 220 9% 60%;
  --hover-primary: 222 10% 39%;
  --sidebar-background: 220 20% 18%;
  --sidebar-foreground: 220 7% 94%;
  --sidebar-border: 215 20% 20%;
  --status-success-bg: 142 40% 16%;
  --status-success-text: 142 71% 45%;
  --status-success-border: 142 40% 25%;
  --status-error-bg: 0 40% 16%;
  --status-error-text: 0 100% 70%;
  --status-error-border: 0 40% 25%;
  --status-warning-bg: 38 40% 16%;
  --status-warning-text: 30 100% 70%;
  --status-warning-border: 38 40% 25%;
  --status-info-bg: 220 40% 16%;
  --status-info-text: 220 89% 63%;
  --status-info-border: 220 40% 25%;
  --focus-ring: 0 0% 100%;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: hsl(var(--wf-page-bg));
  color: hsl(var(--wf-page-text));
  line-height: 1.5;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   WIREFRAME CHROME
   ========================================================================== */

.wf-header {
  position: sticky; top: 0; z-index: 50;
  background: hsl(222 18% 13% / 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid hsl(220 14% 25%);
  padding: 14px 28px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.wf-header .wf-back {
  color: hsl(220 10% 65%); text-decoration: none; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.wf-header .wf-back:hover { color: hsl(220 14% 92%); }
.wf-header h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.wf-header .wf-header-badges { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.wf-badge {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  border: 1px solid hsl(220 14% 30%); color: hsl(220 10% 75%);
  white-space: nowrap;
}
.wf-badge.status-not_started { border-color: hsl(0 60% 45%); color: hsl(0 80% 75%); }
.wf-badge.status-in_progress { border-color: hsl(40 70% 45%); color: hsl(42 90% 70%); }
.wf-badge.category { border-color: hsl(262 50% 50%); color: hsl(262 80% 80%); }

.wf-main { max-width: 1200px; margin: 0 auto; padding: 32px 28px 120px; }

.wf-intro {
  background: hsl(222 18% 15%);
  border: 1px solid hsl(220 14% 24%);
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 28px;
}
.wf-intro h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(220 10% 60%); margin-bottom: 8px; }
.wf-intro p { color: hsl(220 12% 82%); font-size: 14.5px; max-width: 78ch; }
.wf-intro p + p { margin-top: 8px; }
.wf-intro .wf-competitors { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wf-intro .wf-competitors .label { font-size: 12px; color: hsl(220 10% 58%); font-weight: 600; }
.wf-chip {
  font-size: 12px; padding: 2px 10px; border-radius: 999px;
  background: hsl(222 18% 22%); color: hsl(220 12% 80%);
  border: 1px solid hsl(220 14% 30%);
}

/* Grounding block — the REAL existing repo surfaces a feature impacts.
   Each .wf-surface row: a repo route/page + a status pill (today/extend/new). */
.wf-grounding {
  background: hsl(222 18% 14%); border: 1px solid hsl(220 14% 24%);
  border-left: 3px solid hsl(209 90% 55%);
  border-radius: 10px; padding: 16px 20px; margin-top: 18px;
}
.wf-grounding h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(220 10% 60%); margin-bottom: 4px; }
.wf-grounding .gsub { font-size: 12.5px; color: hsl(220 10% 62%); margin-bottom: 12px; }
.wf-grounding ul { list-style: none; display: grid; gap: 7px; }
.wf-grounding li { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: hsl(220 12% 82%); flex-wrap: wrap; }
.wf-grounding code {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  background: hsl(221 40% 10%); border: 1px solid hsl(220 14% 26%);
  border-radius: 5px; padding: 1px 7px; color: hsl(209 90% 74%); white-space: nowrap;
}
.wf-grounding .repo { font-size: 11px; color: hsl(220 10% 55%); font-weight: 600; }
.wf-grounding .desc { color: hsl(220 10% 66%); }

/* Status pills for surfaces + section headings: exists today / extended / net-new */
.wf-stat {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 5px; white-space: nowrap; vertical-align: middle;
}
.wf-stat.today  { background: hsl(142 45% 16%); color: hsl(142 70% 68%); border: 1px solid hsl(142 40% 28%); }
.wf-stat.extend { background: hsl(38 45% 16%); color: hsl(38 90% 68%); border: 1px solid hsl(38 45% 30%); }
.wf-stat.new    { background: hsl(262 45% 22%); color: hsl(262 85% 80%); border: 1px solid hsl(262 45% 38%); }
.wf-stat.progress { background: hsl(214 50% 18%); color: hsl(209 90% 74%); border: 1px solid hsl(214 45% 34%); }

/* Section per screen/flow-step */
.wf-section { margin: 44px 0; }
.wf-section > h2 {
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px;
  display: flex; align-items: center; gap: 10px;
}
.wf-section > .wf-caption { color: hsl(220 10% 65%); font-size: 14px; margin-bottom: 18px; max-width: 82ch; }

.wf-surface-tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 5px; vertical-align: middle;
}
.wf-surface-tag.operator { background: hsl(209 80% 22%); color: hsl(209 95% 78%); }
.wf-surface-tag.performer { background: hsl(262 55% 24%); color: hsl(262 90% 82%); }
.wf-surface-tag.buyer { background: hsl(142 45% 18%); color: hsl(142 70% 70%); }
.wf-surface-tag.email { background: hsl(28 60% 22%); color: hsl(32 95% 72%); }

/* Flow strip: 1 → 2 → 3 */
.wf-flow {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin: 18px 0 26px;
}
.wf-flow .step {
  background: hsl(222 18% 16%); border: 1px solid hsl(220 14% 26%);
  border-radius: 8px; padding: 8px 14px; font-size: 13px; color: hsl(220 12% 82%);
  display: flex; align-items: center; gap: 8px;
}
.wf-flow .step b { color: hsl(209 95% 70%); font-weight: 700; }
.wf-flow .arrow { color: hsl(220 10% 45%); font-size: 15px; }

/* Screen frames */
.wf-screen {
  border-radius: 12px; overflow: hidden;
  border: 1px solid hsl(220 14% 28%);
  box-shadow: 0 18px 50px hsl(0 0% 0% / 0.45);
  margin-bottom: 14px;
}
.wf-browser-bar {
  background: hsl(222 15% 20%); padding: 9px 14px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid hsl(220 14% 28%);
}
.wf-browser-bar .dots { display: flex; gap: 5px; }
.wf-browser-bar .dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.wf-browser-bar .dots i:nth-child(1) { background: #f66; }
.wf-browser-bar .dots i:nth-child(2) { background: #fb4; }
.wf-browser-bar .dots i:nth-child(3) { background: #5c5; }
.wf-browser-bar .url {
  flex: 1; max-width: 520px; background: hsl(222 15% 14%); color: hsl(220 10% 66%);
  border-radius: 6px; font-size: 12px; padding: 4px 12px;
  font-family: ui-monospace, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-viewport { background: hsl(var(--bg-secondary)); color: hsl(var(--text-primary)); position: relative; }

/* Phone frame (performer portal / buyer mobile) */
.wf-phone {
  width: 390px; max-width: 100%; margin: 0 auto 14px;
  border-radius: 34px; border: 8px solid hsl(222 15% 22%);
  overflow: hidden; box-shadow: 0 18px 50px hsl(0 0% 0% / 0.45);
  background: hsl(var(--bg-secondary)); color: hsl(var(--text-primary));
  position: relative;
}
.wf-phone .statusbar {
  display: flex; justify-content: space-between; padding: 8px 18px 4px;
  font-size: 11px; font-weight: 600; color: hsl(var(--text-secondary));
  background: hsl(var(--bg-primary));
}
.wf-screen-row { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.wf-screen-row > .wf-phone { margin: 0 0 14px; }
.wf-screen-row > * { flex: 1 1 340px; min-width: 320px; }
.wf-screen-row > .wf-phone { flex: 0 0 390px; }

/* Numbered callout dots — place inside .wf-viewport / .wf-phone */
.wf-dot {
  position: absolute; z-index: 30;
  width: 22px; height: 22px; border-radius: 50%;
  background: hsl(var(--wf-callout)); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
  box-shadow: 0 0 0 3px hsl(var(--wf-callout) / 0.3), 0 2px 6px hsl(0 0% 0% / 0.4);
  cursor: default;
}
/* The dot draws its own number, the same way the annotation list does. Without
   this the dots are blank circles and the only way to tell 1 from 3 is to hover
   — which does not survive a screenshot, which is how these pages are read. */
.wf-dot::after { content: attr(data-n); }
.wf-annotations {
  background: hsl(222 18% 15%); border: 1px solid hsl(220 14% 24%);
  border-left: 3px solid hsl(var(--wf-callout));
  border-radius: 10px; padding: 16px 20px; margin-bottom: 10px;
}
.wf-annotations h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(220 10% 60%); margin-bottom: 10px; }
.wf-annotations ol { list-style: none; display: grid; gap: 8px; }
/* NOT flex. A flex li turns every inline tag in the sentence — <b>, <code>,
   <i> — into a flex ITEM, so a bolded word breaks onto its own baseline with a
   gap either side and the sentence comes apart. Every annotation on every page
   uses inline emphasis, so the number hangs in the margin instead and the text
   flows as ordinary prose. */
.wf-annotations li {
  position: relative; padding-left: 30px;
  font-size: 13.5px; line-height: 1.55; color: hsl(220 12% 82%);
}
.wf-annotations li::before {
  content: attr(data-n);
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: hsl(var(--wf-callout)); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}

/* Open questions + notes */
.wf-questions {
  background: hsl(38 45% 12%); border: 1px solid hsl(38 50% 25%);
  border-radius: 12px; padding: 20px 26px; margin-top: 48px;
}
.wf-questions h2 { font-size: 15px; color: hsl(42 90% 70%); margin-bottom: 10px; }
.wf-questions ul { list-style: none; display: grid; gap: 8px; }
.wf-questions li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.55; color: hsl(40 25% 85%); }
.wf-questions li::before { content: '?'; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 4px; background: hsl(42 90% 45%); color: hsl(38 45% 12%); font-weight: 800; font-size: 12px; text-align: center; line-height: 18px; }

.wf-note { font-size: 12.5px; color: hsl(220 10% 58%); margin: 8px 0 0; font-style: italic; }

/* Theme toggle for the MOCKS (kit.js wires it) */
.wf-theme-toggle {
  background: hsl(222 18% 22%); border: 1px solid hsl(220 14% 32%);
  color: hsl(220 12% 82%); font-size: 12px; padding: 5px 12px;
  border-radius: 999px; cursor: pointer;
}
.wf-theme-toggle:hover { background: hsl(222 18% 27%); }

/* Screen switcher buttons (paired with .wf-panel, wired by kit.js) */
.wf-switch { display: inline-flex; gap: 4px; background: hsl(222 18% 16%); border: 1px solid hsl(220 14% 26%); border-radius: 9px; padding: 3px; margin: 0 0 16px; }
.wf-switch button {
  border: none; background: transparent; color: hsl(220 10% 65%);
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 14px;
  border-radius: 6px; cursor: pointer;
}
.wf-switch button:hover { color: hsl(220 14% 90%); }
.wf-switch button.active { background: hsl(262 60% 40%); color: #fff; }

/* Footer nav between wireframes */
.wf-footer {
  margin-top: 60px; padding-top: 20px; border-top: 1px solid hsl(220 14% 24%);
  display: flex; justify-content: space-between; gap: 12px; font-size: 13px;
}
.wf-footer a { color: hsl(209 95% 70%); text-decoration: none; }
.wf-footer a:hover { text-decoration: underline; }

/* ==========================================================================
   MOCK MICDROP UI (.md-*) — used INSIDE .wf-viewport / .wf-phone
   ========================================================================== */

.md-app { display: flex; min-height: 560px; background: hsl(var(--bg-secondary)); font-size: 13.5px; }

/* Top header bar (operator admin — 64px, logo left, org switcher + avatar right) */
.md-topbar {
  height: 56px; background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border));
  display: flex; align-items: center; gap: 14px; padding: 0 18px;
}
.md-topbar .brand {
  font-family: Poppins, Inter, sans-serif; font-weight: 800; font-size: 17px;
  color: hsl(var(--text-primary)); letter-spacing: -0.02em;
}
.md-topbar .brand span { color: hsl(var(--brand-primary)); }
.md-topbar .spacer { flex: 1; }
.md-topbar .org-switcher {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: hsl(var(--text-primary)); background: hsl(var(--bg-secondary));
  border: 1px solid hsl(var(--stroke-primary, var(--border))); border-radius: 8px; padding: 5px 12px;
}

/* Sidebar (operator admin) */
.md-sidebar {
  width: 224px; flex: 0 0 224px;
  background: hsl(var(--sidebar-background));
  border-right: 1px solid hsl(var(--sidebar-border));
  padding: 14px 10px; display: flex; flex-direction: column; gap: 2px;
}
.md-sidebar .brand {
  font-family: Poppins, Inter, sans-serif; font-weight: 800; font-size: 17px;
  color: hsl(var(--text-primary)); padding: 4px 10px 14px; letter-spacing: -0.02em;
}
.md-sidebar .brand span { color: hsl(var(--brand-primary)); }
.md-sidebar .section {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: hsl(var(--text-tertiary)); padding: 12px 10px 4px;
}
.md-sidebar a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 7px; text-decoration: none;
  color: hsl(var(--text-secondary)); font-weight: 500; font-size: 13px;
}
.md-sidebar a .ico { width: 16px; text-align: center; opacity: 0.85; }
.md-sidebar a:hover { background: hsl(var(--hover-primary)); color: hsl(var(--text-primary)); }
.md-sidebar a.active { background: hsl(var(--status-info-bg)); color: hsl(var(--brand-primary)); font-weight: 600; }

.md-content { flex: 1; padding: 22px 26px; min-width: 0; }

/* Page header */
.md-page-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.md-page-head h1 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: hsl(var(--text-primary)); }
.md-page-head .sub { font-size: 13px; color: hsl(var(--text-secondary)); margin-top: 2px; }
.md-page-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Buttons — the shipped `Button` primitive's real sizes, measured out of
   svelte-components (tokens/sizing.ts `buttonSizes` + the base's
   `textWeight.emphasis`), not eyeballed. Every one of these is a canonical
   type pair:

     sm   h-9  px-3  type-caption          12 / 500
     md   h-10 px-4  type-body             14 / 500   ← the default
     lg   h-11 px-5  type-bodyLarge 600    16 / 600   ← primary page actions

   The lab drew all three as 13/500 at 36px, which is a size the product does
   not have. It matters most on the booking page: the shipped answer row is two
   `size="full"` buttons, which is the 16/600 rung. */
.md-btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  font-size: 0.875rem; font-weight: 500; border-radius: 8px; line-height: 1;
  height: 40px; padding: 0 16px; cursor: pointer; border: 1px solid transparent;
  background: hsl(var(--brand-primary)); color: hsl(var(--brand-primary-foreground));
  text-decoration: none; white-space: nowrap;
}
.md-btn:hover { filter: brightness(1.06); }
.md-btn.alt {
  background: hsl(var(--card)); color: hsl(var(--text-primary));
  border-color: hsl(var(--border));
}
.md-btn.alt:hover { background: hsl(var(--hover-primary)); filter: none; }
.md-btn.ghost { background: transparent; color: hsl(var(--brand-primary)); }
.md-btn.danger { background: hsl(var(--status-error-text)); color: #fff; }
.md-btn.success { background: hsl(var(--accent-success)); color: #fff; }
.md-btn.sm { font-size: 0.75rem; height: 36px; padding: 0 12px; }
.md-btn.lg { font-size: 1rem; font-weight: 600; height: 44px; padding: 0 20px; width: 100%; }
.md-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Inputs */
.md-field { display: grid; gap: 5px; margin-bottom: 12px; }
.md-field > label { font-size: 12.5px; font-weight: 600; color: hsl(var(--text-primary)); }
.md-field .help { font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.md-input, .md-select, .md-textarea {
  width: 100%; font-size: 13px !important; font-weight: 500; font-family: inherit;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid hsl(216 6% 84%);
  background: hsl(var(--bg-secondary)); color: hsl(var(--text-primary));
}
[data-theme='dark'] .md-input, [data-theme='dark'] .md-select, [data-theme='dark'] .md-textarea {
  border-color: hsl(220 20% 28%);
}
.md-input::placeholder { color: hsl(var(--text-tertiary)); }
.md-textarea { min-height: 64px; resize: vertical; }
.md-input:focus, .md-select:focus, .md-textarea:focus { outline: 2px solid hsl(var(--focus-ring) / 0.6); outline-offset: 1px; }
.md-input.sm { padding: 5px 9px; font-size: 12px !important; }

/* Checkbox / radio / toggle (visual-only) */
.md-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: hsl(var(--text-primary)); cursor: pointer; }
.md-check .box {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid hsl(var(--border));
  background: hsl(var(--card)); display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: hsl(var(--brand-primary-foreground)); flex: 0 0 16px;
}
.md-check.on .box { background: hsl(var(--brand-primary)); border-color: hsl(var(--brand-primary)); }
.md-check.on .box::after { content: '✓'; }
.md-radio .box { border-radius: 50%; }
.md-radio.on .box::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--brand-primary-foreground)); }

.md-toggle {
  width: 34px; height: 19px; border-radius: 999px; background: hsl(var(--muted));
  border: 1px solid hsl(var(--border)); position: relative; display: inline-block; flex: 0 0 34px;
  vertical-align: middle; cursor: pointer;
}
.md-toggle::after {
  content: ''; position: absolute; top: 1.5px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: hsl(var(--card)); box-shadow: 0 1px 2px hsl(0 0% 0% / 0.25);
  transition: left 0.15s;
}
.md-toggle.on { background: hsl(var(--brand-primary)); border-color: hsl(var(--brand-primary)); }
.md-toggle.on::after { left: 16px; background: #fff; }

/* Card */
.md-card {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: 8px; padding: 16px 18px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.06);
}
.md-card + .md-card { margin-top: 14px; }
.md-card h3 { font-size: 14.5px; font-weight: 700; color: hsl(var(--text-primary)); margin-bottom: 4px; }
.md-card .card-sub { font-size: 12.5px; color: hsl(var(--text-secondary)); margin-bottom: 12px; }
.md-card.flat { padding: 0; overflow: hidden; }
.md-card.flat > .card-pad { padding: 14px 18px; }

/* Stat tiles */
.md-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 16px; }
.md-stat { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 12px 14px; }
.md-stat .label { font-size: 12.5px; font-weight: 500; color: hsl(var(--text-secondary)); }
.md-stat .value { font-size: 21px; font-weight: 700; color: hsl(var(--text-primary)); margin-top: 2px; letter-spacing: -0.02em; }
.md-stat .delta { font-size: 11.5px; font-weight: 600; }
.md-stat .delta.up { color: hsl(var(--status-success-text)); }
.md-stat .delta.down { color: hsl(var(--status-error-text)); }

/* Badges */
/* The shipped Badge: `badgeSizes.md` = type-caption + font-medium, i.e.
   12 / 500 — not the 11px the lab had. */
.md-badge {
  display: inline-block; font-size: 0.75rem; font-weight: 500; padding: 2px 9px;
  border-radius: 4px; border: 1px solid transparent; white-space: nowrap;
}
.md-badge.pill { border-radius: 999px; }
.md-badge.success { background: hsl(var(--status-success-bg)); color: hsl(var(--status-success-text)); border-color: hsl(var(--status-success-border)); }
.md-badge.error { background: hsl(var(--status-error-bg)); color: hsl(var(--status-error-text)); border-color: hsl(var(--status-error-border)); }
.md-badge.warning { background: hsl(var(--status-warning-bg)); color: hsl(var(--status-warning-text)); border-color: hsl(var(--status-warning-border)); }
.md-badge.info { background: hsl(var(--status-info-bg)); color: hsl(var(--status-info-text)); border-color: hsl(var(--status-info-border)); }
.md-badge.neutral { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); }

/* Tabs */
.md-tabs { display: flex; gap: 2px; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 16px; overflow-x: auto; }
.md-tabs a {
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: hsl(var(--text-secondary));
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.md-tabs a.active { color: hsl(var(--brand-primary)); border-bottom-color: hsl(var(--brand-primary)); }
.md-tabs a:hover:not(.active) { color: hsl(var(--text-primary)); }

/* Pills / segmented control */
.md-seg { display: inline-flex; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: 8px; padding: 2px; gap: 2px; }
.md-seg a { padding: 5px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: hsl(var(--text-secondary)); text-decoration: none; }
.md-seg a.active { background: hsl(var(--card)); color: hsl(var(--text-primary)); box-shadow: 0 1px 2px hsl(0 0% 0% / 0.1); }

/* Table */
.md-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.md-table th {
  text-align: left; font-size: 12px; font-weight: 600;
  color: hsl(var(--muted-foreground)); background: hsl(var(--bg-secondary));
  padding: 10px 14px; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap;
}
.md-table td { padding: 10px 14px; border-bottom: 1px solid hsl(var(--border)); color: hsl(var(--text-primary)); vertical-align: middle; }
.md-table tr:hover td { background: hsl(var(--hover-primary)); }
.md-table td.num, .md-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.md-table .row-sub { font-size: 11.5px; color: hsl(var(--text-secondary)); }

/* Filter bar above tables */
.md-filterbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid hsl(var(--border)); }

/* Avatar — a person is a rounded SQUARE, never a circle (SC Avatar:
   radiusAliases.avatar; Peet 2026-08-11) */
.md-avatar {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px;
  background: linear-gradient(135deg, hsl(var(--brand-primary)), hsl(262 83% 58%));
  color: #fff; font-size: 0.75rem; font-weight: 400;
  display: inline-flex; align-items: center; justify-content: center;
}
/* The shipped Avatar sizes its initials by a type role: xs/sm are type-caption
   (12/400), md is type-body (14/400), lg is type-bodyLarge (16/400). */
.md-avatar.lg { width: 44px; height: 44px; flex-basis: 44px; font-size: 1rem; font-weight: 400; border-radius: 12px; }

/* Modal (rendered inline, statically "open") */
.md-modal-overlay {
  position: absolute; inset: 0; background: hsl(0 0% 0% / 0.45);
  display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 20;
}
.md-modal {
  background: hsl(var(--card)); border-radius: 12px; border: 1px solid hsl(var(--border));
  width: 480px; max-width: 100%; box-shadow: 0 24px 60px hsl(0 0% 0% / 0.35);
}
.md-modal .modal-head { padding: 16px 20px 0; display: flex; justify-content: space-between; align-items: center; }
.md-modal .modal-head h3 { font-size: 16px; font-weight: 700; color: hsl(var(--text-primary)); }
.md-modal .modal-head .x { color: hsl(var(--text-tertiary)); font-size: 18px; cursor: pointer; }
.md-modal .modal-body { padding: 14px 20px; }
.md-modal .modal-foot { padding: 12px 20px 18px; display: flex; justify-content: flex-end; gap: 8px; }

/* Drawer (right side, statically open) */
.md-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 400px; max-width: 86%;
  background: hsl(var(--card)); border-left: 1px solid hsl(var(--border));
  box-shadow: -16px 0 40px hsl(0 0% 0% / 0.25); z-index: 20; padding: 20px; overflow: auto;
}

/* Empty state */
.md-empty { text-align: center; padding: 42px 20px; color: hsl(var(--text-secondary)); }
.md-empty .glyph { font-size: 34px; margin-bottom: 8px; }
.md-empty h4 { font-size: 15px; color: hsl(var(--text-primary)); margin-bottom: 4px; }
.md-empty p { font-size: 13px; max-width: 46ch; margin: 0 auto 14px; }

/* Banner / inline alert */
.md-alert { display: flex; gap: 10px; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13px; border: 1px solid; margin-bottom: 14px; }
.md-alert.info { background: hsl(var(--status-info-bg)); color: hsl(var(--status-info-text)); border-color: hsl(var(--status-info-border)); }
.md-alert.warning { background: hsl(var(--status-warning-bg)); color: hsl(var(--status-warning-text)); border-color: hsl(var(--status-warning-border)); }
.md-alert.success { background: hsl(var(--status-success-bg)); color: hsl(var(--status-success-text)); border-color: hsl(var(--status-success-border)); }
.md-alert.error { background: hsl(var(--status-error-bg)); color: hsl(var(--status-error-text)); border-color: hsl(var(--status-error-border)); }

/* Progress bar */
.md-progress { height: 7px; border-radius: 999px; background: hsl(var(--muted)); overflow: hidden; }
.md-progress > i { display: block; height: 100%; background: hsl(var(--brand-primary)); border-radius: 999px; }
.md-progress.success > i { background: hsl(var(--accent-success)); }
.md-progress.warning > i { background: hsl(var(--accent-warning)); }

/* Divider with label */
.md-divider { display: flex; align-items: center; gap: 10px; color: hsl(var(--text-tertiary)); font-size: 12px; margin: 14px 0; }
.md-divider::before, .md-divider::after { content: ''; flex: 1; height: 1px; background: hsl(var(--border)); }

/* Simple two-col form layout */
.md-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.md-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .md-grid2, .md-grid3 { grid-template-columns: 1fr; } }

/* Kbd / code */
.md-code {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  background: hsl(var(--bg-tertiary)); border: 1px solid hsl(var(--border));
  border-radius: 5px; padding: 1px 6px; color: hsl(var(--text-primary));
}
.md-codeblock {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.55;
  background: hsl(221 50% 8%); color: hsl(210 30% 85%);
  border-radius: 8px; padding: 14px 16px; overflow-x: auto; white-space: pre;
}

/* ==========================================================================
   PUBLIC BUYER SURFACE (venue calendar / checkout) — brand-themed
   The venue's brand color is a CSS var so mocks can demo per-venue theming.
   ========================================================================== */

.vc-root { --vc-brand: 262 83% 58%; background: hsl(var(--bg-primary)); color: hsl(var(--text-primary)); }
.vc-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid hsl(var(--border)); }
.vc-header .venue-logo { width: 34px; height: 34px; border-radius: 8px; background: hsl(var(--vc-brand)); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.vc-header .venue-name { font-weight: 700; font-size: 15px; }
.vc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: hsl(var(--vc-brand)); color: #fff; font-weight: 700; font-size: 14px;
  border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer; text-decoration: none;
}
.vc-btn.block { width: 100%; }
.vc-btn.outline { background: transparent; color: hsl(var(--vc-brand)); border: 1.5px solid hsl(var(--vc-brand)); }
.vc-hero { position: relative; aspect-ratio: 21/8; background: linear-gradient(135deg, hsl(262 50% 30%), hsl(222 60% 20%)); display: flex; align-items: flex-end; padding: 18px 20px; }
.vc-hero h2 { color: #fff; font-size: 22px; font-weight: 800; text-shadow: 0 2px 8px rgb(0 0 0 / 0.5); }
.vc-ticket-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border: 1px solid hsl(var(--border)); border-radius: 10px; margin-bottom: 10px;
  background: hsl(var(--card));
}
.vc-ticket-row .t-name { font-weight: 600; font-size: 14px; }
.vc-ticket-row .t-sub { font-size: 12px; color: hsl(var(--text-secondary)); }
.vc-ticket-row .t-price { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.vc-qty { display: inline-flex; align-items: center; border: 1px solid hsl(var(--border)); border-radius: 8px; overflow: hidden; }
.vc-qty b { width: 32px; text-align: center; font-size: 14px; }
.vc-qty button { width: 30px; height: 30px; border: none; background: hsl(var(--muted)); color: hsl(var(--text-primary)); font-size: 15px; cursor: pointer; }
.vc-summary-row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 4px 0; color: hsl(var(--text-secondary)); }
.vc-summary-row.total { font-weight: 800; font-size: 15px; color: hsl(var(--text-primary)); border-top: 1px solid hsl(var(--border)); margin-top: 6px; padding-top: 10px; }
.vc-mobile-cta {
  position: sticky; bottom: 0; background: hsl(var(--card)); border-top: 1px solid hsl(var(--border));
  padding: 12px 16px; display: flex; align-items: center; gap: 12px;
}
.vc-mobile-cta .price { font-weight: 800; font-size: 16px; }
.vc-mobile-cta .vc-btn { margin-left: auto; }

/* Email mock (for marketing/lifecycle emails) */
.wf-email {
  max-width: 480px; margin: 0 auto 14px; border-radius: 12px; overflow: hidden;
  border: 1px solid hsl(220 14% 28%); background: #f4f5f7; color: #1a2030;
  box-shadow: 0 18px 50px hsl(0 0% 0% / 0.45);
}
.wf-email .mail-head { background: #fff; padding: 12px 18px; border-bottom: 1px solid #e3e5ea; font-size: 12.5px; color: #555; }
.wf-email .mail-head b { color: #111; }
.wf-email .mail-body { background: #fff; margin: 16px; border-radius: 10px; padding: 22px; font-size: 14px; }

/* SMS mock */
.wf-sms { max-width: 340px; margin: 0 auto 14px; }
.wf-sms .bubble {
  background: #e9e9eb; color: #111; font-size: 13.5px; border-radius: 18px;
  padding: 10px 14px; margin-bottom: 6px; width: fit-content; max-width: 92%;
}
[data-theme='dark'] .wf-sms .bubble { background: #3a3a3c; color: #fff; }

/* ==========================================================================
   SHARED SHELL (.mds-*) — the real app frame, drawn by shell.js.
   Mirrors micdrop-frontend MainLayout geometry exactly (Header.svelte h-16,
   SidebarShell w-56/w-16 fixed top-16, main pt-16 bg-bg-secondary), scoped to
   a positioned container so it works inside .wf-viewport frames AND standalone.
   The older .md-topbar/.md-sidebar mockup classes are untouched — the 44
   existing wireframes keep rendering as before; new prototypes use the shell.
   ========================================================================== */

.mds-app {
  position: relative; overflow: hidden;
  height: 640px;
  background: hsl(var(--bg-secondary)); color: hsl(var(--text-primary));
  font-size: 14px;
}

/* Header — h-16 bg-card border-b border-border, z above the rail */
.mds-header {
  position: absolute; top: 0; left: 0; right: 0; height: 64px; z-index: 40;
  background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border));
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
}
.mds-header .brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.mds-header .brand img { display: block; }
[data-theme='dark'] .mds-header .brand img { filter: invert(1); }
/* The real header avatar: SC Avatar sm — 32px rounded square, never a circle */
.mds-avatar {
  width: 32px; height: 32px; border-radius: 8px; flex: 0 0 32px;
  background: linear-gradient(135deg, hsl(var(--brand-primary)), hsl(262 83% 58%));
  color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.mds-search { position: relative; width: 384px; max-width: 40%; }
.mds-search .mds-ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: hsl(var(--text-tertiary));
}
.mds-search input {
  width: 100%; font: inherit; font-size: 13px; color: hsl(var(--text-primary));
  background: hsl(var(--bg-secondary)); border: 1px solid hsl(var(--stroke-primary, var(--border)));
  border-radius: 8px; padding: 8px 12px 8px 32px;
}
.mds-search input:focus { outline: 2px solid hsl(var(--focus-ring) / 0.6); outline-offset: 1px; }
.mds-header .spacer { flex: 1; }
.mds-iconbtn {
  width: 36px; height: 36px; border-radius: 8px; border: none; cursor: pointer;
  background: transparent; color: hsl(var(--text-secondary));
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px;
}
.mds-iconbtn:hover { background: hsl(var(--hover-primary)); color: hsl(var(--text-primary)); }
.mds-iconbtn .mds-ico { width: 20px; height: 20px; }
.mds-theme .when-dark { display: none; }
[data-theme='dark'] .mds-theme .when-light { display: none; }
[data-theme='dark'] .mds-theme .when-dark { display: inline-block; }
.mds-nav.grow { flex: 1; }

/* Rail frame — w-56 fixed top-16 bottom-0, bg-card border-r shadow */
.mds-rail {
  position: absolute; top: 64px; bottom: 0; left: 0; width: 224px; z-index: 30;
  background: hsl(var(--card)); border-right: 1px solid hsl(var(--border));
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
  transition: width 0.3s ease;
  scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent;
}
.rail-collapsed .mds-rail { width: 64px; }
/* The rail's SECOND declared width — a takeover holding the controls of what
   the body is drawing (widgets, brand, the deal builder). Their contents nest,
   and a nav width starves them. Editor rails never collapse. */
.mds-rail.editor { width: 320px; }

/* Collapse toggle — SidebarEdgeToggle: a pill straddling the rail's right
   border, 16px below the header, tracking the edge as it moves. Always visible;
   it costs no layout space, so nothing below it shifts. The glyph is a frame
   with a left pane and never rotates — folding the rail is not leaving. */
.mds-edge-toggle {
  position: absolute; top: 80px; left: 224px; z-index: 41;
  transform: translateX(-50%);
  width: 24px; height: 28px; border-radius: 8px; cursor: pointer;
  background: hsl(var(--status-info-bg)); color: hsl(var(--text-primary));
  border: 1px solid hsl(var(--status-info-border, var(--border)));
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  display: inline-flex; align-items: center; justify-content: center;
  transition: left 0.3s ease, background-color 0.15s;
}
.mds-edge-toggle:hover { background: hsl(var(--status-info-bg) / 0.8); }
.mds-edge-toggle .mds-ico { width: 16px; height: 16px; }
.rail-collapsed .mds-edge-toggle { left: 64px; }

/* Nav rows — NavItem.svelte: rounded-lg py-1.5 px-3, hover:bg-muted,
   active = status-info-bg tint + brand text, icons ALWAYS solid weight */
.mds-nav { padding: 8px; display: flex; flex-direction: column; }
.mds-section.pin { margin-top: auto; }
.mds-divider { margin: 8px 12px; border-top: 1px solid hsl(var(--border)); }
.mds-item {
  display: flex; align-items: center; width: 100%;
  border: none; background: transparent; font: inherit; text-align: left;
  padding: 6px 12px; border-radius: 8px; cursor: pointer; text-decoration: none;
  color: hsl(var(--text-primary)); font-size: 14px; font-weight: 500;
  transition: background-color 0.15s; white-space: nowrap;
}
.mds-item:hover { background: hsl(var(--muted)); }
.mds-item.active { background: hsl(var(--status-info-bg)); color: hsl(var(--brand-primary)); }
.mds-item .mds-ico { width: 20px; height: 20px; flex: 0 0 20px; }
.mds-item.active .mds-ico { color: hsl(var(--brand-primary)); }
.mds-label {
  margin-left: 12px; max-width: 192px; overflow: hidden;
  transition: opacity 0.2s, max-width 0.3s, margin-left 0.3s;
}
.rail-collapsed .mds-label { opacity: 0; max-width: 0; margin-left: 0; }
.mds-caret {
  width: 16px; height: 16px; margin-left: auto; flex: 0 0 16px;
  color: hsl(var(--text-secondary)); transition: transform 0.3s;
}
.mds-item[aria-expanded='true'] .mds-caret { transform: rotate(180deg); }
.rail-collapsed .mds-caret { display: none; }
/* Submenu children — no icons, indented to the label line (matches live) */
.mds-sub { display: none; flex-direction: column; }
.mds-sub.open { display: flex; }
.mds-sub .mds-item { padding-left: 44px; font-weight: 400; }
.rail-collapsed .mds-sub { display: none; }

/* Entity rail header — SidebarHeader: back link, poster, title, sub, badge */
.mds-back {
  display: flex; align-items: center; gap: 6px; padding: 10px 12px 2px;
  font-size: 13px; color: hsl(var(--text-secondary)); text-decoration: none;
}
.mds-back:hover { color: hsl(var(--text-primary)); }
.mds-back .mds-ico { width: 14px; height: 14px; }
.rail-collapsed .mds-rail-head .mds-poster { height: 40px; width: 40px; }
.mds-rail-head { padding: 8px 12px 4px; }
.mds-poster {
  aspect-ratio: 16/9; border-radius: 8px; width: 100%;
  background: linear-gradient(135deg, hsl(262 60% 38%), hsl(209 90% 35%));
  transition: width 0.3s, height 0.3s;
}
.mds-rail-head .title { font-size: 14px; font-weight: 700; margin-top: 8px; }
.mds-rail-head .sub { font-size: 12px; color: hsl(var(--text-secondary)); margin-top: 1px; }
.mds-rail-head .md-badge { margin-top: 6px; }
.rail-collapsed .mds-rail-head .title,
.rail-collapsed .mds-rail-head .sub,
.rail-collapsed .mds-rail-head .md-badge { display: none; }

/* Create-wizard step indicators — check circles like NavCreateRail:
   solid green when complete, muted outline when pending */
.mds-step { display: inline-flex; color: hsl(var(--text-tertiary)); }
.mds-step .mds-ico { width: 20px; height: 20px; }
.mds-step.done { color: hsl(var(--accent-success)); }

/* Reports rail — page list + sticky "+ New page" footer (NavReportsRail) */
.mds-rail.has-footer { overflow: hidden; }
.mds-rail.has-footer .mds-rail-scroll { flex: 1; overflow-y: auto; padding-bottom: 68px; }
.mds-rail-footer {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 12px;
  background: hsl(var(--card)); border-top: 1px solid hsl(var(--border));
}
.mds-rail-footer .md-btn { width: 100%; }
.mds-sparkle { margin-left: auto; color: hsl(var(--brand-primary)); font-size: 12px; }
.mds-rail-pad { padding: 12px; }
.mds-rail-heading {
  padding: 16px 20px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: hsl(var(--text-secondary));
}
.mds-rail-heading.plain {
  padding: 0 0 12px; text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 600;
}
.mds-divider.inset { margin: 0 12px; }
.mds-back-caret { color: hsl(var(--text-secondary)); margin-right: 4px; }

/* Reports BUILD body — the Library picker: a segmented toggle, search, category
   chips and recipe rows, in the same frame at the same width as the page list. */
.mds-seg2 {
  display: flex; margin: 4px 12px 0; padding: 3px; border-radius: 9px;
  background: hsl(var(--bg-secondary)); border: 1px solid hsl(var(--border));
}
.mds-seg2 button {
  flex: 1; padding: 6px; border: none; border-radius: 6px; cursor: pointer;
  background: none; font: inherit; font-size: 12px; font-weight: 600;
  color: hsl(var(--text-secondary));
}
.mds-seg2 button.on { background: hsl(var(--brand-primary)); color: #fff; }
.mds-chips { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 12px 10px; }
.mds-chip {
  padding: 2px 9px; border-radius: 999px; cursor: pointer; background: none;
  border: 1px solid hsl(var(--border)); font: inherit; font-size: 11px;
  color: hsl(var(--text-secondary));
}
.mds-chip.on { background: hsl(var(--brand-primary)); color: #fff; border-color: transparent; }
.mds-recipes { display: flex; flex-direction: column; gap: 6px; padding: 0 12px; }
.mds-recipe {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 8px 10px; border-radius: 10px; cursor: pointer; text-align: left;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); font: inherit;
}
.mds-recipe:hover { background: hsl(var(--muted)); }
.mds-recipe.on { border-color: hsl(var(--brand-primary)); background: hsl(var(--status-info-bg)); }
.mds-recipe .t { font-size: 12.5px; font-weight: 600; color: hsl(var(--text-primary)); }
.mds-recipe .d { font-size: 11.5px; color: hsl(var(--text-secondary)); }
.mds-build .md-field + .md-field { margin-top: 12px; }

/* Deal builder rail — an editor rail (NavDealRail). The Deal is always open,
   because picking how they get paid IS the job; the three core shapes are ticks
   with a hairline between, so a guarantee's fields never run into the next
   tick. Everything below arrives closed, each showing how many rows it holds. */
/* The deal footer carries a figure above its button, so it stands taller than
   the reports one — the scroll region has to clear it or the last field sits
   under the Save bar and cannot be clicked. */
.mds-rail.editor.has-footer .mds-rail-scroll { padding-bottom: 100px; }
.mds-deal-head .md-field + .md-field { margin-top: 16px; }
.mds-deal-core { padding: 12px; border-bottom: 1px solid hsl(var(--border)); }
.mds-ticks { display: flex; flex-direction: column; }
.mds-tick { padding: 12px 0; border-top: 1px solid hsl(var(--border)); }
.mds-tick:first-child { border-top: none; padding-top: 0; }
.mds-tick:last-child { padding-bottom: 0; }
.mds-tick-body { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.mds-deal-combine { margin-top: 16px; }
.mds-deal-combine .cap {
  display: block; margin-bottom: 4px; font-size: 11.5px; color: hsl(var(--text-secondary));
}
.mds-deal-combine .md-seg { width: 100%; }
.mds-deal-combine .md-seg a { flex: 1; text-align: center; }
.mds-addon {
  margin-top: 16px; padding: 8px; border-radius: 10px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card));
}
.mds-addon .head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 8px; font-size: 12.5px; font-weight: 600;
}
.mds-addon .x {
  border: none; background: none; cursor: pointer; font: inherit; font-size: 15px;
  line-height: 1; color: hsl(var(--text-secondary)); padding: 0 2px;
}
.mds-addon .md-field + .md-field { margin-top: 8px; }
.mds-deal-adds { margin-top: 16px; display: flex; gap: 8px; }
.mds-deal-adds .md-btn { flex: 1; }
.mds-acc {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 14px 12px; border: none; border-bottom: 1px solid hsl(var(--border));
  background: none; font: inherit; cursor: pointer; text-align: left;
  color: hsl(var(--text-primary));
}
.mds-acc:hover { background: hsl(var(--muted)); }
.mds-acc .t { font-size: 13px; font-weight: 600; }
.mds-acc .n { margin-left: auto; font-size: 12px; color: hsl(var(--text-secondary)); }
.mds-acc-caret {
  width: 12px; height: 12px; color: hsl(var(--text-secondary)); transition: transform 0.2s;
}
.mds-acc.open .mds-acc-caret { transform: rotate(180deg); }
.mds-deal-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 8px; font-size: 12px; color: hsl(var(--text-secondary));
}
.mds-deal-total b { font-size: 13.5px; font-weight: 700; color: hsl(var(--text-primary)); }

/* Main content — pt-16 ml-56 bg-bg-secondary; prototypes fill this */
.mds-main {
  position: absolute; top: 64px; left: 224px; right: 0; bottom: 0;
  overflow: auto; background: hsl(var(--bg-secondary)); padding: 24px;
  transition: left 0.3s ease;
}
.rail-collapsed .mds-main { left: 64px; }
.mds-app.editor-rail .mds-main { left: 320px; }
.mds-app.no-rail .mds-main { left: 0; }

/* ----- Mobile shell — inside a .wf-phone (or data-mobile) -----------------
   Compact header, context strip for entity pages (MobileContextHeader),
   bottom tab bar + More sheet (SidebarBottomNav + NavBottomSheet). */
.mds-app.mobile { height: 100%; min-height: 640px; }
.wf-phone .mds-app { height: 700px; }
.mds-app.mobile .mds-header { padding: 0 12px; gap: 10px; }
.mds-app.mobile .mds-search { flex: 1; width: auto; max-width: none; }
.mds-app.mobile .mds-main { left: 0; bottom: 64px; padding: 16px; }
.mds-app.mobile.has-ctx .mds-main { top: 112px; }

/* Context strip — fixed under the header on entity pages */
.mds-ctx {
  position: absolute; top: 64px; left: 0; right: 0; min-height: 48px; z-index: 35;
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border));
}
.mds-ctx-back {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px;
  background: hsl(var(--status-info-bg)); color: hsl(var(--brand-primary));
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.mds-ctx-back .mds-ico { width: 20px; height: 20px; }
.mds-ctx .title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 600;
}

/* Bottom tab bar */
.mds-bottombar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 64px; z-index: 40;
  background: hsl(var(--card)); border-top: 1px solid hsl(var(--border));
  display: flex; align-items: stretch; justify-content: space-around; padding-top: 6px;
}
.mds-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: none; background: transparent; cursor: pointer; text-decoration: none;
  color: hsl(var(--text-primary)); font: inherit; font-size: 11px; padding: 4px 0;
}
.mds-tab .mds-ico { width: 22px; height: 22px; }
.mds-tab span { color: hsl(var(--text-tertiary)); }
.mds-tab.active, .mds-tab.active span { color: hsl(var(--brand-primary)); }

/* More sheet */
.mds-sheet-overlay {
  position: absolute; inset: 0; z-index: 50; display: none;
  background: hsl(var(--overlay-bg, 0 0% 0%) / 0.45);
}
.mds-sheet-overlay.open { display: block; }
.mds-sheet {
  position: absolute; bottom: 0; left: 0; right: 0; max-height: 78%;
  overflow-y: auto; background: hsl(var(--card));
  border-radius: 16px 16px 0 0; padding: 14px 16px 20px;
}
.mds-sheet-title { font-size: 15px; font-weight: 700; padding: 2px 4px 10px; }
.mds-sheet-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground)); padding: 8px 4px 4px;
}
.mds-sheet-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 8px;
  border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500;
  color: hsl(var(--text-primary));
}
.mds-sheet-row .mds-ico { width: 20px; height: 20px; color: hsl(var(--muted-foreground)); }
.mds-sheet-row:hover { background: hsl(var(--bg-secondary)); }
.mds-sheet-row.active { background: hsl(var(--status-info-bg)); color: hsl(var(--brand-primary)); }
.mds-sheet-row.active .mds-ico { color: hsl(var(--brand-primary)); }
.mds-sheet-row.no-ico { padding-left: 40px; }
.mds-sheet .mds-divider { margin: 8px 0; }

@media print {
  body { background: #fff; color: #111; }
  .wf-header { position: static; }
}

/* ---------------------------------------------------------------------------
   THE CANONICAL TYPE ROLES — transcribed VERBATIM from svelte-components
   src/lib/tokens/typography-roles.css, which opens with the rule that matters:

     "The CLOSED set of text roles. One named role per text style; size, weight,
      line-height and letter-spacing are intrinsic to the role and must never be
      set by hand. Tone (color) is the orthogonal axis."

   The lab had none of these and every prototype was hand-setting px and weights
   — which is how a booking page ended up with a 15/650 title and a 46%-grey
   nobody had ever shipped. Peet, 2026-08-17: "are these all using the canonical
   micdrop svelte components text sizes and weights? they should. look them up
   and only use them."

   Fluid roles are drawn at their upper clamp here: the lab has no
   container-type context and a prototype that resizes with its column is not
   showing you the product. Everything else is exact.

   THE TONE SET IS CLOSED TOO — three neutrals, and that is all there is. */
.type-display    { font-size: 4rem;      font-weight: 800; line-height: 1.05; letter-spacing: -0.028em; }
.type-metric     { font-size: 2.5rem;    font-weight: 700; line-height: 1.1;  letter-spacing: -0.024em; font-variant-numeric: tabular-nums; }
.type-title      { font-size: 1.75rem;   font-weight: 700; line-height: 1.18; letter-spacing: -0.018em; }
.type-heading    { font-size: 1.375rem;  font-weight: 600; line-height: 1.27; letter-spacing: -0.011em; }
.type-subheading { font-size: 1.125rem;  font-weight: 600; line-height: 1.33; letter-spacing: -0.006em; }
.type-bodyLarger { font-size: 1.125rem;  font-weight: 400; line-height: 1.5; }
.type-bodyLarge  { font-size: 1rem;      font-weight: 400; line-height: 1.5; }
.type-body       { font-size: 0.875rem;  font-weight: 400; line-height: 1.43; }
.type-label      { font-size: 0.875rem;  font-weight: 500; line-height: 1.43; letter-spacing: 0.004em; }
.type-eyebrow    { font-size: 0.75rem;   font-weight: 600; line-height: 1.33; letter-spacing: 0.04em; }
.type-caption    { font-size: 0.75rem;   font-weight: 400; line-height: 1.33; letter-spacing: 0.003em; }
.type-micro      { font-size: 0.625rem;  font-weight: 500; line-height: 1.4;  letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }

.tone-primary   { color: hsl(var(--text-primary)); }
.tone-secondary { color: hsl(var(--text-secondary)); }
.tone-muted     { color: hsl(var(--muted-foreground)); }
.tone-brand     { color: hsl(var(--brand-primary)); }
.tone-success   { color: hsl(var(--accent-success)); }
.tone-warning   { color: hsl(var(--accent-warning)); }
.tone-danger    { color: hsl(var(--accent-danger)); }