/* Served at tools.yalldigital.com/shell/ydt.css.
 * Built by scripts/build-shell-css.mjs from shell-css/. Do not edit by hand. */

/* Yall Digital Tools: the shared look.
 *
 * Source for public/shell/ydt.css (tools.yalldigital.com/shell/ydt.css) and, per tool,
 * public/shell/tools/<key>.css. Design spec: "2026-10-23 - Yall Digital Tools - Shared Look -
 * Design Spec" (agency-turbo / product-suite / spec); section numbers below point at it.
 *
 *  - Every rule starts html[data-yd] (or :where(html[data-yd]) for zero-weight defaults), so the
 *    look switches on only where a page opted in, and it outranks a tool's own single-class rule
 *    without !important.
 *  - A role slot (two @ signs, the role name, two @ signs) is a selector list. In ydt.css it expands to the
 *    shared names (the yd-* classes plus the app's .btn, .card and friends). In a tool's file the
 *    same rule is emitted again with that tool's own class names for the role, so a tool's source
 *    holds selectors, never a second copy of the declarations.
 *  - One theme only: light. A white canvas, ink navy text, Yall blue for action, Yall red for danger and the one brand rule beside
 *    the page title (spec section 17, the yalldigital.com palette). The left menu is a separate navy surface with its own tokens.
 */

/* ---- font (3.3): one variable file, same origin as this sheet ---- */

@font-face {
  font-family: "Montserrat YDT";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-latin-var.woff2") format("woff2");
}

/* ---- tokens (17.2): the whole palette. Values are the yalldigital.com system (v3.css) unless the spec says a shade was changed. ---- */

html[data-yd] {
  --yd-canvas: #FFFFFF;
  --yd-surface: #FFFFFF;
  --yd-surface-2: #F3F4F7;
  --yd-surface-3: #E6E9F0;
  --yd-hover: rgba(11, 23, 83, 0.04);
  --yd-hover-solid: #F5F6F8;
  --yd-line: #D9DCE5;
  --yd-line-strong: #B8BECE;
  --yd-field-border: #767E98;
  --yd-field-border-hover: #545B73;
  --yd-scrim: rgba(11, 23, 83, 0.5);
  --yd-shadow: 0 8px 24px rgba(11, 23, 83, 0.16);

  --yd-text-strong: #0B1753;
  --yd-text: #0B1753;
  --yd-text-dim: #545B73;
  --yd-link: #1F63F0;
  --yd-link-hover: #1749B3;

  --yd-brand: #1F63F0;
  --yd-brand-hover: #1749B3;
  --yd-brand-press: #123A94;
  --yd-on-brand: #FFFFFF;
  --yd-ring: #1F63F0;
  --yd-selected: rgba(31, 99, 240, 0.08);
  --yd-card-hover-edge: rgba(31, 99, 240, 0.45);

  --yd-success: #1B7A3E;
  --yd-success-text: #1B7A3E;
  --yd-warning: #B86E00;
  --yd-warning-text: #8A5300;
  --yd-danger: #E3242B;
  --yd-danger-text: #C41E25;
  --yd-info: #1F63F0;
  --yd-info-text: #1F63F0;
  --yd-success-tint: #EDF4F0;
  --yd-warning-tint: #F9F3EB;
  --yd-danger-tint: #FDEDEE;
  --yd-info-tint: #EDF3FE;
  --yd-danger-press-fill: rgba(227, 36, 43, 0.14);
  --yd-danger-solid: #E3242B;
  --yd-danger-solid-hover: #BF1B22;
  --yd-danger-solid-press: #A3151B;
  --yd-success-solid: #1B7A3E;
  --yd-success-solid-hover: #15632F;

  /* The navy side (17.2.8): the menu's own colours, used for toasts and tooltips only. */
  --yd-navy: #0B1753;
  --yd-navy-line: #3A4A8C;
  --yd-on-navy: #FFFFFF;
  --yd-on-navy-dim: #A8B6E6;
  --yd-on-navy-link: #7FA6FF;

  /* Documents (17.4): aliases of canvas, ink and blue, written out so a tool file keeps its fallback. */
  --yd-paper: #FFFFFF;
  --yd-paper-text: #0B1753;
  --yd-paper-link: #1F63F0;

  --yd-font: "Montserrat YDT", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --yd-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --yd-sp-1: 4px; --yd-sp-2: 8px; --yd-sp-3: 12px; --yd-sp-4: 16px; --yd-sp-5: 20px;
  --yd-sp-6: 24px; --yd-sp-8: 32px; --yd-sp-10: 40px; --yd-sp-12: 48px;
  --yd-r-control: 4px;
  --yd-r-card: 8px;
  --yd-h-lg: 44px;
  --yd-h-md: 36px;
  --yd-h-xs: 28px;
  --yd-container: 1280px;

  /* First rule of the sheet (17.6): the canvas is white from the first pixel, and native selects, date pickers,
     scrollbars and autofill render light. */
  background: var(--yd-canvas);
  color: var(--yd-text);
  color-scheme: light;
  font-family: var(--yd-font);
}

/* ---- first paint (17.6): the menu's navy footprint ----
   The menu is injected after first paint, so a white page would show an empty gap where it is about to land. Until the menu
   mounts (it adds .ydt-on to <html>) the footprint is painted navy and the page is offset by the same amount, using the
   widths menu.js uses: 256 from 1280 up, the 64 strip from 768, the 56 bar on a phone. The menu covers it when it mounts.
   Not on the app itself (data-yd="app"): its login screen has no menu. */

html[data-yd]:not([data-yd="app"]):not(.ydt-on):not(.ydt-off) { margin-left: 256px; }

html[data-yd]:not([data-yd="app"]):not(.ydt-on):not(.ydt-off)::before {
  content: ""; position: fixed; z-index: 90; top: 0; left: 0; bottom: 0; width: 256px; background: var(--yd-navy); pointer-events: none;
}

@media (max-width: 1279px) {
  html[data-yd]:not([data-yd="app"]):not(.ydt-on):not(.ydt-off) { margin-left: 64px; }
  html[data-yd]:not([data-yd="app"]):not(.ydt-on):not(.ydt-off)::before { width: 64px; }
}

@media (max-width: 767px) {
  html[data-yd]:not([data-yd="app"]):not(.ydt-on):not(.ydt-off) { margin-left: 0; padding-top: 56px; }
  html[data-yd]:not([data-yd="app"]):not(.ydt-on):not(.ydt-off)::before { right: 0; bottom: auto; width: auto; height: 56px; }
}

@media print {
  html[data-yd]:not([data-yd="app"]):not(.ydt-on):not(.ydt-off) { margin-left: 0; padding-top: 0; }
  html[data-yd]:not([data-yd="app"]):not(.ydt-on):not(.ydt-off)::before { display: none; }
}

/* ---- base elements (zero weight, 8): defaults for markup with no opinion ---- */

/* Layered, so that a tool built on Tailwind 4 (whose utilities are layered too) keeps its own classes: an unlayered
   rule would beat every utility, and these defaults are only meant for markup that has no opinion. Tools that are not
   layered (Tailwind 3, plain CSS) see no change: any rule of their own already wins over a zero-weight default. */

@layer yd-defaults {
  :where(html[data-yd] body) {
    margin: 0;
    background: var(--yd-canvas);
    color: var(--yd-text);
    font-family: var(--yd-font);
    font-size: 15px;
    line-height: 22px;
  }
  :where(html[data-yd] :is(button, input, select, textarea, optgroup)) { font: inherit; }
  :where(html[data-yd] h1) {
    font-family: var(--yd-font); font-size: 28px; line-height: 32px; font-weight: 750;
    letter-spacing: -0.03em; text-transform: none; color: var(--yd-text-strong); margin: 0 0 4px;
  }
  :where(html[data-yd] h2) {
    font-family: var(--yd-font); font-size: 20px; line-height: 26px; font-weight: 700;
    letter-spacing: -0.02em; text-transform: none; color: var(--yd-text-strong); margin: 32px 0 12px;
  }
  :where(html[data-yd] h3) {
    font-family: var(--yd-font); font-size: 16px; line-height: 22px; font-weight: 700;
    letter-spacing: -0.01em; text-transform: none; color: var(--yd-text-strong); margin: 24px 0 8px;
  }
  @media (max-width: 767px) {
    :where(html[data-yd] h1) { font-size: 24px; line-height: 28px; }
  }
  :where(html[data-yd] :is(code, kbd, samp, pre)) { font-family: var(--yd-mono); font-size: 13px; line-height: 20px; }
  :where(html[data-yd] a) { color: var(--yd-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
  :where(html[data-yd] a:hover) { color: var(--yd-link-hover); text-decoration-thickness: 2px; }
  :where(html[data-yd] a:visited) { color: var(--yd-link); }
  :where(html[data-yd]) ::placeholder { color: var(--yd-text-dim); opacity: 1; }
  :where(html[data-yd] hr) { border: 0; border-top: 1px solid var(--yd-line); }
  :where(html[data-yd]) ::selection { background: rgba(31, 99, 240, 0.2); color: var(--yd-text-strong); }
}

/* Links (6.1): the shared class, for a link inside prose or a table. */

html[data-yd] .yd-link { color: var(--yd-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer; }

html[data-yd] .yd-link:hover { color: var(--yd-link-hover); text-decoration-thickness: 2px; }

html[data-yd] .yd-link:visited { color: var(--yd-link); }

/* Focus (4.3): one ring on every control, never removed. */

html[data-yd] :is(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--yd-ring);
  outline-offset: 2px;
}

/* Type roles (5.1) */

/* Page title (17.5): the heavy part names the view (750); an optional thin part, blue, on its own line, carries the client or record.
   One h1 per page. The thin weight is for this 28px title only, never below 24px and never in UI text. */

html[data-yd] .yd-title { font-size: 28px; line-height: 32px; font-weight: 750; letter-spacing: -0.03em; color: var(--yd-text-strong); margin: 0 0 4px; text-transform: none; }

html[data-yd] :is(h1, .yd-title) .yd-thin { display: block; font-weight: 250; letter-spacing: -0.03em; color: var(--yd-link); }

@media (max-width: 767px) { html[data-yd] .yd-title { font-size: 24px; line-height: 28px; } }

html[data-yd] .yd-sub { font-size: 14px; line-height: 21px; font-weight: 400; color: var(--yd-text-dim); max-width: 72ch; margin: 0; }

html[data-yd] .yd-small { font-size: 13px; line-height: 18px; color: var(--yd-text-dim); }

html[data-yd] .yd-label {
  font-size: 12px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--yd-text-dim);
}

html[data-yd] .yd-mono { font-family: var(--yd-mono); font-size: 13px; line-height: 20px; font-weight: 400; }

html[data-yd] .yd-num { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; color: var(--yd-text-strong); }

html[data-yd] .yd-num.yd-zero { color: var(--yd-text-dim); }

html[data-yd] .yd-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- layout (5.2) ---- */

html[data-yd] .yd-page { box-sizing: border-box; max-width: var(--yd-container); margin: 0 auto; padding: 32px 24px; }

/* border-box: the client banner's inner box is the same width, so the two start at the same x on a wide screen */

html[data-yd] .yd-page.yd-wide { max-width: 1600px; }

html[data-yd] .yd-page-header {
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin: 0 0 24px;
}

html[data-yd] .yd-page-header > :first-child { min-width: 0; flex: 1 1 320px; }

/* The one brand use of red (17.2.4): a 3px rule on the left of the title block (the h1 and its sub line), 16px gap. Decoration only. */

html[data-yd] :is(.yd-page-header > :first-child, :is(.yd-title-block)) { border-left: 3px solid var(--yd-danger); padding-left: 16px; }

html[data-yd] .yd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

html[data-yd] .yd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

html[data-yd] .yd-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }

html[data-yd] .yd-stack { display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 1024px) {
  html[data-yd] .yd-page { padding: 24px 16px; }
  html[data-yd] .yd-form-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  html[data-yd] .yd-page-header { flex-direction: column; }
  /* in a column the 320px basis would be a height */
  html[data-yd] .yd-page-header > :first-child { flex: none; }
  html[data-yd] .yd-page-header .yd-actions { width: 100%; }
}

/* ---- cards (6.3) ---- */

html[data-yd] :is(.yd-card, .card) {
  background: var(--yd-surface);
  border: 1px solid var(--yd-line);
  border-radius: var(--yd-r-card);
  box-shadow: none;
  color: var(--yd-text);
}

html[data-yd] .yd-card { padding: 24px; }

html[data-yd] .yd-card.yd-card-compact { padding: 16px; }

html[data-yd] :is(.yd-card-header) {
  background: var(--yd-surface-2);
  border: 0;
  border-bottom: 1px solid var(--yd-line);
  border-radius: var(--yd-r-card) var(--yd-r-card) 0 0;
  padding: 12px 24px;
  font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--yd-text-strong);
}

html[data-yd] :is(.yd-card-clickable, .card-clickable) { cursor: pointer; text-decoration: none; transition: border-color 150ms ease-out; }

html[data-yd] :is(.yd-card-clickable, .card-clickable):hover { border-color: var(--yd-card-hover-edge); transform: none; }

html[data-yd] :is(.yd-card-selected) { background: var(--yd-selected); box-shadow: inset 3px 0 0 var(--yd-brand); }

html[data-yd] .yd-counter { background: var(--yd-surface-2); border-radius: var(--yd-r-control); padding: 8px; text-align: center; }

html[data-yd] .yd-counter strong { display: block; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--yd-text-strong); }

html[data-yd] .yd-counter span { display: block; font-size: 12px; line-height: 16px; color: var(--yd-text-dim); }

/* ---- tables (6.4) ---- */

html[data-yd] :is(.yd-table-wrap) {
  overflow-x: auto; max-width: 100%;
  background-color: var(--yd-surface); border: 1px solid var(--yd-line); border-radius: var(--yd-r-card);
  /* An 8px edge cue on whichever side still has more to scroll to (never clip without saying so). */
  background-image:
    linear-gradient(to right, var(--yd-surface) 30%, transparent),
    linear-gradient(to left, var(--yd-surface) 30%, transparent),
    linear-gradient(to right, rgba(11, 23, 83, 0.14), transparent),
    linear-gradient(to left, rgba(11, 23, 83, 0.14), transparent);
  background-position: left center, right center, left center, right center;
  background-size: 24px 100%, 24px 100%, 8px 100%, 8px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

html[data-yd] :is(.yd-table, .data-table) { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; color: var(--yd-text); }

html[data-yd] :is(.yd-table, .data-table) thead th {
  background: var(--yd-surface-2); text-align: left;
  font-size: 12px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--yd-text-dim);
  padding: 12px 16px; border-bottom: 1px solid var(--yd-line);
}

html[data-yd] :is(.yd-table, .data-table) tbody td { padding: 12px 16px; border-bottom: 1px solid var(--yd-line); vertical-align: top; height: 48px; color: var(--yd-text); }

html[data-yd] :is(.yd-table, .data-table) tbody tr:last-child td { border-bottom: 0; }

html[data-yd] :is(.yd-table, .data-table) tbody tr:hover { background: var(--yd-hover); }

html[data-yd] :is(.yd-table, .data-table) tbody td:first-child { font-weight: 500; color: var(--yd-text-strong); }

/* Selected row (17.3): the quiet tint, a 3px blue bar on the left and a checked checkbox. */

html[data-yd] :is(.yd-table, .data-table) tbody tr:is([aria-selected="true"], .yd-selected) { background: var(--yd-selected); }

html[data-yd] :is(.yd-table, .data-table) tbody tr:is([aria-selected="true"], .yd-selected) td:first-child { box-shadow: inset 3px 0 0 var(--yd-brand); }

html[data-yd] :is(.yd-table, .data-table) td.yd-num, html[data-yd] :is(.yd-table, .data-table) th.yd-num { text-align: right; }

html[data-yd] :is(.yd-table-sticky) thead th:first-child,
html[data-yd] :is(.yd-table-sticky) tbody td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--yd-surface); box-shadow: inset -1px 0 0 var(--yd-line);
}

html[data-yd] :is(.yd-table-sticky) thead th:first-child { background: var(--yd-surface-2); z-index: 2; }

html[data-yd] :is(.yd-table-sticky) tbody tr:hover td:first-child { background: var(--yd-hover-solid); }

html[data-yd] .yd-table-compact tbody td { padding-top: 8px; padding-bottom: 8px; }

html[data-yd] .yd-table-stickyhead thead th { position: sticky; top: calc(var(--ydt-bar-h, 0px) + var(--yd-sticky-1-h, 0px)); z-index: 3; }

html[data-yd] .yd-empty {
  text-align: center; padding: 48px 24px; color: var(--yd-text); font-size: 14px; line-height: 20px;
  background: var(--yd-surface); border: 1px solid var(--yd-line); border-radius: var(--yd-r-card);
}

html[data-yd] .yd-empty.yd-dropzone { border: 1px dashed var(--yd-line-strong); background: transparent; }

@media (pointer: coarse) { html[data-yd] :is(.yd-table, .data-table) tbody td { padding-top: 14px; padding-bottom: 14px; } }

/* ---- buttons (6.5) ---- */

html[data-yd] :is(.yd-btn, .btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--yd-h-lg); min-height: var(--yd-h-lg); padding: 0 24px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--yd-r-control); cursor: pointer;
  font-family: var(--yd-font); font-size: 14px; line-height: 16px; font-weight: 600; text-transform: none; letter-spacing: 0.01em;
  white-space: nowrap; text-decoration: none; margin: 0;
  background: transparent; color: var(--yd-text-strong);
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

html[data-yd] :is(.yd-btn, .btn):hover { text-decoration: none; }

html[data-yd] :is(.yd-btn-sm, .btn-sm) { height: var(--yd-h-md); min-height: var(--yd-h-md); padding: 0 16px; font-size: 13px; }

html[data-yd] :is(.yd-btn-xs, .btn-xs) { height: var(--yd-h-xs); min-height: var(--yd-h-xs); padding: 0 12px; font-size: 12px; }

@media (pointer: coarse) {
  html[data-yd] :is(.yd-btn-sm, .btn-sm), html[data-yd] :is(.yd-btn-xs, .btn-xs) { height: var(--yd-h-lg); min-height: var(--yd-h-lg); }
}

@media (max-width: 480px) {
  /* A long label wraps inside the button on a phone instead of pushing the page wide. */
  html[data-yd] :is(.yd-btn, .btn) { max-width: 100%; white-space: normal; height: auto; padding-top: 8px; padding-bottom: 8px; line-height: 1.3; text-align: center; }
}

html[data-yd] :is(.yd-btn-primary, .btn-primary) { background: var(--yd-brand); border-color: var(--yd-brand); color: var(--yd-on-brand); }

html[data-yd] :is(.yd-btn-primary, .btn-primary):hover:not(:disabled) { background: var(--yd-brand-hover); border-color: var(--yd-brand-hover); color: var(--yd-on-brand); }

html[data-yd] :is(.yd-btn-primary, .btn-primary):active:not(:disabled) { background: var(--yd-brand-press); border-color: var(--yd-brand-press); }

html[data-yd] :is(.yd-btn-secondary, .btn-secondary) { background: transparent; border-color: var(--yd-field-border); color: var(--yd-text-strong); }

html[data-yd] :is(.yd-btn-secondary, .btn-secondary):hover:not(:disabled) { background: var(--yd-surface-3); border-color: var(--yd-field-border-hover); color: var(--yd-text-strong); }

html[data-yd] :is(.yd-btn-secondary, .btn-secondary):active:not(:disabled) { background: var(--yd-surface-2); }

html[data-yd] :is(.yd-btn-danger, .btn-danger, .btn-destructive) { background: transparent; border-color: var(--yd-danger); color: var(--yd-danger-text); }

html[data-yd] :is(.yd-btn-danger, .btn-danger, .btn-destructive):hover:not(:disabled) { background: var(--yd-danger-tint); border-color: var(--yd-danger); color: var(--yd-danger-text); }

html[data-yd] :is(.yd-btn-danger, .btn-danger, .btn-destructive):active:not(:disabled) { background: var(--yd-danger-press-fill); }

html[data-yd] :is(.yd-btn-danger-solid, .btn-danger-solid) { background: var(--yd-danger-solid); border-color: var(--yd-danger-solid); color: #FFFFFF; }

html[data-yd] :is(.yd-btn-danger-solid, .btn-danger-solid):hover:not(:disabled) { background: var(--yd-danger-solid-hover); border-color: var(--yd-danger-solid-hover); color: #FFFFFF; }

html[data-yd] :is(.yd-btn-danger-solid, .btn-danger-solid):active:not(:disabled) { background: var(--yd-danger-solid-press); border-color: var(--yd-danger-solid-press); }

html[data-yd] :is(.yd-btn-success) { background: var(--yd-success-solid); border-color: var(--yd-success-solid); color: #FFFFFF; }

html[data-yd] :is(.yd-btn-success):hover:not(:disabled) { background: var(--yd-success-solid-hover); border-color: var(--yd-success-solid-hover); color: #FFFFFF; }

html[data-yd] :is(.yd-btn-ghost, .btn-ghost) { background: transparent; border-color: transparent; color: var(--yd-link); }

html[data-yd] :is(.yd-btn-ghost, .btn-ghost):hover:not(:disabled) { background: var(--yd-surface-3); color: var(--yd-link-hover); text-decoration: none; }

html[data-yd] :is(.yd-btn-ghost, .btn-ghost):active:not(:disabled) { background: var(--yd-surface-2); }

html[data-yd] :is(.yd-btn, .btn):focus-visible { outline: 2px solid var(--yd-ring); outline-offset: 2px; }

html[data-yd] :is(.yd-btn, .btn):disabled,
html[data-yd] :is(.yd-btn, .btn)[aria-disabled="true"] {
  background: var(--yd-surface-3); border-color: var(--yd-surface-3); color: var(--yd-text-dim); cursor: not-allowed; opacity: 1;
}

html[data-yd] :is(.yd-btn-secondary, .btn-secondary):disabled, html[data-yd] :is(.yd-btn-danger, .btn-danger, .btn-destructive):disabled { background: transparent; border-color: var(--yd-line); }

html[data-yd] :is(.yd-btn-ghost, .btn-ghost):disabled { background: transparent; border-color: transparent; }

html[data-yd] :is(.yd-btn, .btn)[aria-busy="true"] { cursor: progress; }

html[data-yd] .btn-block { width: 100%; }

html[data-yd] :is(.btn-icon) {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0;
  background: transparent; color: var(--yd-text-strong); border: 1px solid var(--yd-field-border); border-radius: var(--yd-r-control); cursor: pointer;
}

html[data-yd] :is(.btn-icon):hover { background: var(--yd-surface-3); }

html[data-yd] :is(.btn-icon):focus-visible { outline: 2px solid var(--yd-ring); outline-offset: 2px; }

@media (pointer: coarse) { html[data-yd] :is(.btn-icon) { width: 44px; height: 44px; } }

/* ---- inputs (6.6) ---- */

html[data-yd] :is(.yd-input, .yd-select, .yd-textarea) { display: block; width: 100%; }

html[data-yd] :is(.yd-input, .yd-select, .yd-textarea) {
  box-sizing: border-box; height: var(--yd-h-lg); min-height: var(--yd-h-lg); padding: 0 12px;
  background: var(--yd-surface); color: var(--yd-text-strong);
  border: 1px solid var(--yd-field-border); border-radius: var(--yd-r-control);
  font-family: var(--yd-font); font-size: 15px; line-height: 22px; box-shadow: none;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

html[data-yd] :is(.yd-control-sm) { height: var(--yd-h-md); min-height: var(--yd-h-md); font-size: 14px; line-height: 20px; }

html[data-yd] :is(.yd-input, .yd-select, .yd-textarea):hover:not(:disabled):not(:focus) { border-color: var(--yd-field-border-hover); }

html[data-yd] :is(.yd-input, .yd-select, .yd-textarea):focus { outline: 2px solid var(--yd-ring); outline-offset: 1px; border-color: var(--yd-ring); box-shadow: none; background: var(--yd-surface); }

html[data-yd] :is(.yd-input, .yd-select, .yd-textarea):disabled { background: var(--yd-surface-2); color: var(--yd-text-dim); border-color: var(--yd-line); cursor: not-allowed; }

html[data-yd] :is(.yd-input, .yd-select, .yd-textarea)[readonly] { border-color: transparent; background: transparent; color: var(--yd-text); }

html[data-yd] :is(.yd-input, .yd-select, .yd-textarea)[aria-invalid="true"] { border-color: var(--yd-danger); }

html[data-yd] :is(.yd-select) {
  appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23545B73' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
}

html[data-yd] :is(.yd-textarea) { height: auto; min-height: 96px; padding: 12px; resize: vertical; }

html[data-yd] :is(.yd-mono-field) { font-family: var(--yd-mono); font-size: 13px; line-height: 20px; tab-size: 2; }

html[data-yd] :is(.yd-field-label) {
  display: block; font-size: 12px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--yd-text-dim); margin-bottom: 4px;
}

html[data-yd] :is(.yd-field-help) { font-size: 13px; line-height: 18px; color: var(--yd-text-dim); }

html[data-yd] :is(.yd-field-error) { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 18px; color: var(--yd-danger-text); }

html[data-yd] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--yd-brand); width: 18px; height: 18px; }

html[data-yd] .yd-toggle {
  position: relative; width: 40px; height: 22px; flex: none; border-radius: 999px; cursor: pointer;
  background: var(--yd-surface-3); border: 1px solid var(--yd-field-border); transition: background-color 150ms ease-out;
}

html[data-yd] .yd-toggle[aria-checked="true"] { background: var(--yd-brand); border-color: var(--yd-brand); }

html[data-yd] .yd-toggle::after {
  content: ""; position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(11, 23, 83, 0.25); transition: transform 150ms ease-out;
}

html[data-yd] .yd-toggle[aria-checked="true"]::after { transform: translateX(18px); }

@media (max-width: 767px) {
  html[data-yd] :is(.yd-input, .yd-select, .yd-textarea) { font-size: 16px; }
}

/* ---- pills (17.3): one recipe, flat fill so contrast does not depend on placement; the word is always there ---- */

html[data-yd] :is(.yd-pill, .pill, .badge) {
  display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box;
  background: var(--yd-surface-2); border: 1px solid var(--yd-field-border); border-radius: var(--yd-r-control);
  padding: 4px 10px; font-family: var(--yd-font); font-size: 12px; line-height: 16px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; color: var(--yd-text-dim);
  --yd-pill-dot: var(--yd-field-border);
}

html[data-yd] :is(.yd-pill, .badge)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yd-pill-dot, currentColor); flex: none; }

html[data-yd] .pill-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

html[data-yd] :is(.yd-pill-success, .pill-success) { color: var(--yd-success-text); border-color: var(--yd-success); background: var(--yd-success-tint); --yd-pill-dot: var(--yd-success); }

html[data-yd] :is(.yd-pill-warning, .pill-warning) { color: var(--yd-warning-text); border-color: var(--yd-warning); background: var(--yd-warning-tint); --yd-pill-dot: var(--yd-warning); }

html[data-yd] :is(.yd-pill-danger, .pill-danger) { color: var(--yd-danger-text); border-color: var(--yd-danger); background: var(--yd-danger-tint); --yd-pill-dot: var(--yd-danger); }

html[data-yd] :is(.yd-pill-info) { color: var(--yd-info-text); border-color: var(--yd-info); background: var(--yd-info-tint); --yd-pill-dot: var(--yd-info); }

html[data-yd] :is(.yd-pill-neutral, .pill-neutral) { color: var(--yd-text-dim); border-color: var(--yd-field-border); background: var(--yd-surface-2); --yd-pill-dot: var(--yd-field-border); }

html[data-yd] .pill-success .pill-dot { background: var(--yd-success); }

html[data-yd] .pill-warning .pill-dot { background: var(--yd-warning); }

html[data-yd] .pill-danger .pill-dot { background: var(--yd-danger); }

html[data-yd] .pill-neutral .pill-dot { background: var(--yd-field-border); }

html[data-yd] :is(.yd-chip-count) {
  display: inline-flex; align-items: center; box-sizing: border-box; background: var(--yd-surface-2); border: 1px solid var(--yd-field-border);
  border-radius: var(--yd-r-control); padding: 2px 8px; font-size: 12px; line-height: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--yd-text-dim);
}

html[data-yd] :is(.yd-chip-count)::before { content: none; }

html[data-yd] .yd-chip-tag {
  display: inline-block; box-sizing: border-box; font-family: var(--yd-mono); font-size: 12px; line-height: 16px; font-weight: 500; text-transform: none; letter-spacing: 0;
  background: var(--yd-surface-2); border: 1px solid var(--yd-field-border); border-radius: var(--yd-r-control); padding: 2px 8px; color: var(--yd-text-dim); white-space: nowrap;
}

/* ---- tabs (6.8): the one navigation pattern ---- */

html[data-yd] .yd-tabs {
  display: flex; gap: 0; margin: 0 0 24px; padding: 0; overflow-x: auto; border-bottom: 1px solid var(--yd-line); flex-wrap: nowrap;
  /* An 8px fade at whichever edge still has more to scroll to (never clip without saying so). The row sits on the canvas. */
  background-image:
    linear-gradient(to right, var(--yd-canvas) 30%, transparent),
    linear-gradient(to left, var(--yd-canvas) 30%, transparent),
    linear-gradient(to right, rgba(11, 23, 83, 0.14), transparent),
    linear-gradient(to left, rgba(11, 23, 83, 0.14), transparent);
  background-position: left center, right center, left center, right center;
  background-size: 24px 100%, 24px 100%, 8px 100%, 8px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

html[data-yd] .yd-tab {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; box-sizing: border-box;
  font-size: 14px; line-height: 20px; font-weight: 600; color: var(--yd-text-dim); text-decoration: none; white-space: nowrap; background: transparent; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}

html[data-yd] .yd-tab:hover { color: var(--yd-text-strong); text-decoration: none; }

html[data-yd] .yd-tab:is([aria-current="page"], [aria-selected="true"], .active) { color: var(--yd-text-strong); border-bottom-color: var(--yd-brand); }

html[data-yd] .yd-tab:focus-visible { outline: 2px solid var(--yd-ring); outline-offset: -2px; }

@media (pointer: coarse) { html[data-yd] .yd-tab { height: 44px; } }

/* ---- segmented control (view flip only) ---- */

html[data-yd] .yd-segmented {
  display: inline-flex; max-width: 100%; overflow-x: auto; padding: 2px; background: var(--yd-surface-2); border: 1px solid var(--yd-line); border-radius: var(--yd-r-control);
}

html[data-yd] .yd-segmented > * {
  flex: none; height: 36px; padding: 0 16px; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--yd-text-dim); background: transparent;
  border: 1px solid transparent; border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none;
}

@media (pointer: coarse) { html[data-yd] .yd-segmented > * { height: 44px; } }

html[data-yd] .yd-segmented > :is([aria-checked="true"], [aria-current="page"], [aria-pressed="true"]) { color: var(--yd-text-strong); background: var(--yd-surface); border-color: var(--yd-line); }

/* ---- banners (6.9) ---- */

html[data-yd] :is(.yd-banner) {
  display: flex; align-items: flex-start; gap: 8px; box-sizing: border-box; margin: 0 0 16px; padding: 12px 16px;
  background: var(--yd-surface-2); border: 1px solid var(--yd-line); border-left-width: 4px; border-radius: var(--yd-r-card);
  font-size: 14px; line-height: 20px; font-weight: 400; color: var(--yd-text);
}

html[data-yd] :is(.yd-banner-success) { background: var(--yd-success-tint); border-color: var(--yd-success); color: var(--yd-text-strong); }

html[data-yd] :is(.yd-banner-warning) { background: var(--yd-warning-tint); border-color: var(--yd-warning); color: var(--yd-text-strong); }

html[data-yd] :is(.yd-banner-danger) { background: var(--yd-danger-tint); border-color: var(--yd-danger); color: var(--yd-text-strong); }

html[data-yd] :is(.yd-banner-info) { background: var(--yd-info-tint); border-color: var(--yd-info); color: var(--yd-text-strong); }

html[data-yd] :is(.yd-banner) a { color: var(--yd-link); }

/* ---- modal (6.10) and toast (6.11): classes ready for the tools that need them ---- */

html[data-yd] .yd-modal-backdrop { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: var(--yd-scrim); }

html[data-yd] .yd-modal {
  box-sizing: border-box; width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px;
  background: var(--yd-surface); border: 1px solid var(--yd-line); border-radius: var(--yd-r-card); box-shadow: var(--yd-shadow); color: var(--yd-text);
  animation: yd-pop 200ms ease-out;
}

html[data-yd] .yd-modal.yd-modal-wide { width: min(640px, calc(100% - 32px)); }

html[data-yd] .yd-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }

@media (max-width: 767px) { html[data-yd] .yd-modal-actions { flex-direction: column-reverse; } html[data-yd] .yd-modal-actions > * { width: 100%; } }

html[data-yd] .yd-toast {
  position: fixed; z-index: 400; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 8px; max-width: 420px; box-sizing: border-box; padding: 12px 16px;
  background: var(--yd-navy); border: 1px solid var(--yd-navy-line); border-left: 3px solid var(--yd-on-navy-link); border-radius: var(--yd-r-card); box-shadow: 0 8px 24px rgba(11, 23, 83, 0.25);
  font-size: 14px; line-height: 20px; color: var(--yd-on-navy); animation: yd-slide 200ms ease-out;
}

html[data-yd] .yd-toast a, html[data-yd] .yd-tooltip a { color: var(--yd-on-navy-link); }

html[data-yd] .yd-toast .yd-small, html[data-yd] .yd-tooltip .yd-small { color: var(--yd-on-navy-dim); }

html[data-yd] .yd-toast.yd-success { border-left-color: #4ADE80; }

html[data-yd] .yd-toast.yd-warning { border-left-color: #FBBF24; }

html[data-yd] .yd-toast.yd-danger { border-left-color: #FF8A8D; }

/* Tooltips (17.7): the same navy inverse as a toast. */

html[data-yd] .yd-tooltip {
  box-sizing: border-box; max-width: 260px; padding: 6px 10px; background: var(--yd-navy); border: 1px solid var(--yd-navy-line); border-radius: var(--yd-r-control);
  box-shadow: 0 8px 24px rgba(11, 23, 83, 0.25); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--yd-on-navy);
}

@media (max-width: 767px) { html[data-yd] .yd-toast { left: 16px; right: 16px; max-width: none; } }

@keyframes yd-pop { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }

@keyframes yd-slide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- progress, skeleton, spinner (6.14) ---- */

html[data-yd] .yd-progress { height: 6px; border-radius: 3px; background: var(--yd-surface-3); overflow: hidden; }

html[data-yd] .yd-progress > span { display: block; height: 100%; background: var(--yd-brand); }

html[data-yd] .yd-skeleton { display: block; height: 16px; border-radius: var(--yd-r-control); background: var(--yd-surface-3); }

html[data-yd] .yd-spinner { width: 16px; height: 16px; border: 2px solid rgba(31, 99, 240, 0.25); border-top-color: var(--yd-brand); border-radius: 50%; animation: yd-spin 700ms linear infinite; display: inline-block; }

html[data-yd] :is(:is(.yd-btn-primary, .btn-primary), :is(.yd-btn-danger-solid, .btn-danger-solid), :is(.yd-btn-success)) .yd-spinner { border-color: rgba(255, 255, 255, 0.35); border-top-color: #FFFFFF; }

@keyframes yd-spin { to { transform: rotate(360deg); } }

/* ---- document surfaces (17.4): pasted and client HTML carries its own colours, so it keeps an isolating wrapper; on a white page
   it is told apart by an edge, not a fill. Nothing inside is themed. ---- */

html[data-yd] .yd-document {
  background: var(--yd-paper); color: var(--yd-paper-text); border: 1px solid var(--yd-line-strong); border-radius: var(--yd-r-card); padding: 24px 32px; margin: 24px 0;
  color-scheme: light;
}

html[data-yd] .yd-document:focus-within { border-color: var(--yd-brand); box-shadow: 0 0 0 1px var(--yd-brand); }

html[data-yd] .yd-document a { color: var(--yd-paper-link); text-decoration: underline; }

/* a document is not themed: the shared heading and link defaults must not reach into it */

/* zero weight, so a document's own classes (a table head, a coloured note) keep their colour */

:where(html[data-yd] .yd-document) :where(h1, h2, h3, h4, h5, h6, p, li, td, th, blockquote, strong, em) { color: inherit; }

/* The editor toolbar sits in a mist band directly above the document (no gap between them). */

html[data-yd] .yd-doc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; background: var(--yd-surface-2); border: 1px solid var(--yd-line); border-bottom: 0; border-radius: var(--yd-r-card) var(--yd-r-card) 0 0; padding: 4px 8px; }

html[data-yd] .yd-doc-toolbar + .yd-document { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

html[data-yd] .yd-plate { background: var(--yd-paper); border: 1px solid var(--yd-line); border-radius: var(--yd-r-control); padding: 8px; display: inline-flex; }

/* A logo that is white on transparent needs a dark plate on a white page. */

html[data-yd] .yd-plate-dark { background: var(--yd-navy); border-radius: var(--yd-r-control); padding: 8px; display: inline-flex; }

/* ---- sticky and fixed (7): never top:0 or 100vw on a viewport-pinned layer ---- */

html[data-yd] .yd-sticky { position: sticky; top: var(--ydt-bar-h, 0px); z-index: 20; }

/* ---- motion, forced colours, print ---- */

@media (prefers-reduced-motion: reduce) {
  html[data-yd] *, html[data-yd] *::before, html[data-yd] *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

@media (forced-colors: active) {
  html[data-yd] :is(.yd-btn, .btn), html[data-yd] :is(.yd-input, .yd-select, .yd-textarea), html[data-yd] :is(.yd-pill, .pill, .badge) { border-color: CanvasText; }
  html[data-yd] .yd-tab:is([aria-current="page"], [aria-selected="true"], .active) { border-bottom-color: Highlight; }
}

@media print {
  html[data-yd] { background: #FFFFFF; color: #000000; --ydt-menu-w: 0px; --ydt-bar-h: 0px; }
  html[data-yd] body { background: #FFFFFF; color: #000000; }
}