/* ==========================================================================
   X-DRAGON Brandbook — UI system (shape v4)

   Loaded after styles.css on every page. Everything the interface is built
   from lives here: shape, rhythm, type scale, semantic colour, states,
   elevation and the components themselves.

   Component classes are prefixed with u- so they never collide with the
   document chrome that styles.css provides.
   ========================================================================== */

:root {
  /* ---- Shape -------------------------------------------------------------
     One gesture for the whole system: three corners rounded by --r, the
     bottom left one replaced by a sharp diagonal of --ca. */
  --ca: 45deg;
  --k: 0.7;
  --r: 5px;
  --angle: 10deg;

  /* The ladder is absolute, not proportional: a 22px checkbox spends 23% of
     its height on the cut, a 260px panel only 7%. xs has a 5px floor because
     below that the gesture stops reading at 1x. */
  --cut-xs: max(5px, calc(5px * var(--k)));
  --cut-sm: calc(8px * var(--k));
  --cut-md: calc(12px * var(--k));
  --cut-lg: calc(18px * var(--k));
  --cut-xl: calc(26px * var(--k));

  /* Below this size only markers live — a tick, a rhombus. They carry no
     shape of their own, because at that scale a chamfer is pixel noise. */
  --shape-min: 12px;

  /* Filled bars are hatched at the chamfer angle, so even the texture of a
     progress bar belongs to the same gesture. */
  --u-stripes: repeating-linear-gradient(var(--ca),
    rgba(13, 16, 17, .16) 0 3px,
    transparent 3px 9px);

  /* ---- Rhythm: 4px base, eight steps, nothing in between ---------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---- Control heights, each bound to one step of the ladder ------------ */
  --h-xs: 28px;   /* cut-sm */
  --h-sm: 36px;   /* cut-sm */
  --h-md: 44px;   /* cut-md — default */
  --h-lg: 52px;   /* cut-md */

  /* ---- Type scale: seven steps ------------------------------------------ */
  --fs-100: 11px; /* mono caps, meta */
  --fs-200: 12px; /* labels, chips */
  --fs-300: 13px; /* secondary text, compact UI */
  --fs-400: 15px; /* base UI text, inputs */
  --fs-500: 17px; /* card titles */
  --fs-600: 20px; /* block titles */
  --fs-700: 26px; /* screen title */

  --lh-tight: 1.2;
  --lh-ui: 1.4;
  --lh-text: 1.6;
  --ls-caps: .1em;

  /* ---- Colour: structural ----------------------------------------------- */
  /* Separators may be quiet, control edges may not: 3:1 is the floor for
     anything that carries the boundary of an interactive element. */
  --color-separator: #3b444b;   /* 1.8:1 — decoration only */
  --color-line: #697680;        /* 3.8:1 on surface — control edges */
  --color-placeholder: #7c868d; /* 5.1:1 on base */

  /* ---- Colour: semantic roles -------------------------------------------
     Each role has three tokens: the pure hue for icons and 1.5px lines, a
     14% tint for backgrounds, and a lightened foreground that clears 4.5:1
     on that tint. The hue itself is never text on its own tint — Ocean on
     Ocean-14% is 4.1:1 and fails. */
  --info: #4389e5;
  --info-fg: #a2c9f6;
  --info-bg: rgba(67, 137, 229, .14);

  --success: #3fbf8f;
  --success-fg: #6fd9b0;
  --success-bg: rgba(63, 191, 143, .14);

  --warning: #fe9b22;
  --warning-fg: #ffc178;
  --warning-bg: rgba(254, 155, 34, .14);

  /* Coral is lifted straight out of the mark: it is the most frequent warm
     stop in the dragon's tail, so the error state stays inside the brand. */
  --danger: #f86570;
  --danger-fg: #fa8b93;
  --danger-bg: rgba(248, 101, 112, .14);

  /* Text on a solid semantic fill is dark, never white: #F1F2F3 on Success
     is 2.1:1, #0D1011 is 8.2:1. */
  --on-solid: #0d1011;

  --focus: #a2c9f6;
  --disabled-opacity: .5;

  /* ---- Elevation ---------------------------------------------------------
     box-shadow is sliced by clip-path, so depth is a drop-shadow filter on
     the parent: it follows the clipped silhouette instead of a rectangle. */
  --shadow-1: drop-shadow(0 2px 6px rgba(0, 0, 0, .4));
  --shadow-2: drop-shadow(0 10px 24px rgba(0, 0, 0, .5));
  --shadow-3: drop-shadow(0 22px 50px rgba(0, 0, 0, .6));

  /* ---- Motion ------------------------------------------------------------ */
  --dur-1: 120ms;  /* colour, opacity */
  --dur-2: 180ms;  /* position, size */
  --dur-3: 260ms;  /* entering surfaces */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   SHAPE PRIMITIVES
   .ch  everything above --shape-min
   .sl  thin elements: the whole left edge leans, a corner cut would eat them
   ========================================================================== */

/* --c is reserved for the cut size: never reuse it for anything else on an
   element that can be shaped, or the clip-path silently breaks.

   Repeated document chrome — notes and navigation items — is folded into the
   selector instead of carrying the class in markup: it appears dozens of
   times per page and always with the same shape. */
.ch,
.note,
.nav__list a {
  --c: var(--cut-md);
  --rr: max(var(--r), .01px);
  --cx: var(--c);
  --cy: calc(var(--c) * tan(var(--ca)));
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cx) 100%, 0 calc(100% - var(--cy)));
}

/* the radius has to stay well below the cut, otherwise the rounded corners
   read as deeper than the chamfer and the gesture disappears */
.ch--xs { --c: var(--cut-xs); --r: 2px; }
.ch--sm { --c: var(--cut-sm); --r: 3px; }
.ch--lg { --c: var(--cut-lg); }
.ch--xl { --c: var(--cut-xl); }

.sl {
  --h: 14px;
  --r: 2px;
  --slant: calc(tan(var(--angle)) * var(--h));
  --rr: max(var(--r), .01px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--slant) 100%);
}

/* The gesture is anchored to the start edge, so RTL mirrors it instead of
   keeping it on the left — otherwise the cut fights the reading direction. */
[dir="rtl"] .ch,
[dir="rtl"] .note,
[dir="rtl"] .nav__list a {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cy)), calc(100% - var(--cx)) 100%, 0 100%);
}

[dir="rtl"] .sl {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}

@supports (clip-path: shape(from 0px 0px, line to 1px 1px)) {

  .ch,
  .note,
  .nav__list a {
    clip-path: shape(
      from var(--rr) 0px,
      line to calc(100% - var(--rr)) 0px,
      arc to 100% var(--rr) of var(--rr) cw,
      line to 100% calc(100% - var(--rr)),
      arc to calc(100% - var(--rr)) 100% of var(--rr) cw,
      line to var(--cx) 100%,
      line to 0px calc(100% - var(--cy)),
      line to 0px var(--rr),
      arc to var(--rr) 0px of var(--rr) cw,
      close
    );
  }

  [dir="rtl"] .ch,
  [dir="rtl"] .note,
  [dir="rtl"] .nav__list a {
    clip-path: shape(
      from var(--rr) 0px,
      line to calc(100% - var(--rr)) 0px,
      arc to 100% var(--rr) of var(--rr) cw,
      line to 100% calc(100% - var(--cy)),
      line to calc(100% - var(--cx)) 100%,
      line to var(--rr) 100%,
      arc to 0px calc(100% - var(--rr)) of var(--rr) cw,
      line to 0px var(--rr),
      arc to var(--rr) 0px of var(--rr) cw,
      close
    );
  }

  /* tangent length differs per corner: t = r / tan(phi / 2). The lean makes
     the top corner 90deg-angle and the bottom one 90deg+angle. */
  .sl {
    --tb: calc(var(--rr) / tan((90deg + var(--angle)) / 2));
    --tt: calc(var(--rr) / tan((90deg - var(--angle)) / 2));
    --tbx: calc(sin(var(--angle)) * var(--tb));
    --tby: calc(cos(var(--angle)) * var(--tb));
    --ttx: calc(sin(var(--angle)) * var(--tt));
    --tty: calc(cos(var(--angle)) * var(--tt));
    clip-path: shape(
      from var(--tt) 0px,
      line to calc(100% - var(--rr)) 0px,
      arc to 100% var(--rr) of var(--rr) cw,
      line to 100% calc(100% - var(--rr)),
      arc to calc(100% - var(--rr)) 100% of var(--rr) cw,
      line to calc(var(--slant) + var(--tb)) 100%,
      arc to calc(var(--slant) - var(--tbx)) calc(100% - var(--tby)) of var(--rr) cw,
      line to var(--ttx) var(--tty),
      arc to var(--tt) 0px of var(--rr) cw,
      close
    );
  }

  /* mirrored across x, so the winding flips with it */
  [dir="rtl"] .sl {
    clip-path: shape(
      from calc(100% - var(--tt)) 0px,
      line to var(--rr) 0px,
      arc to 0px var(--rr) of var(--rr) ccw,
      line to 0px calc(100% - var(--rr)),
      arc to var(--rr) 100% of var(--rr) ccw,
      line to calc(100% - var(--slant) - var(--tb)) 100%,
      arc to calc(100% - var(--slant) + var(--tbx)) calc(100% - var(--tby)) of var(--rr) ccw,
      line to calc(100% - var(--ttx)) var(--tty),
      arc to calc(100% - var(--tt)) 0px of var(--rr) ccw,
      close
    );
  }
}

/* ==========================================================================
   FOCUS
   Not an opt-in class: every interactive element on the page gets a ring.
   outline and box-shadow are cut away by clip-path, so clipped elements use
   a stack of drop-shadows that follows the silhouette.
   ========================================================================== */

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

:is(a, button, input, select, textarea, summary, [tabindex]):is(.ch, .sl):focus-visible,
.nav__list a:focus-visible,
.u-focusable:has(:focus-visible) {
  outline: none;
  border-radius: 0;
  filter:
    drop-shadow(2px 0 0 var(--focus))
    drop-shadow(-2px 0 0 var(--focus))
    drop-shadow(0 2px 0 var(--focus))
    drop-shadow(0 -2px 0 var(--focus));
}

/* ==========================================================================
   DOCUMENT CHROME — the page itself speaks the same language
   ========================================================================== */

/* A clip-path cuts the border off along the diagonal and leaves the corner
   open, so shaped chrome carries no border — the surface step does the work. */
.card,
.card__icon,
.panel,
.note,
.code,
.spec,
.badge,
.dont,
.swatch,
.swatch__box,
.icon-cell,
.gradient-bar,
.showcase img,
.hero__logo img,
.toast,
.skip-link,
code {
  border: 0;
  border-radius: 0;
}

.note {
  --c: var(--cut-xl);
  border-left: 0;
  padding: var(--sp-4) var(--sp-5);
  padding-inline-start: calc(var(--sp-5) + var(--c) / 4);
  background: linear-gradient(to right,
    var(--brand-ocean) 0 calc(var(--c) / 4),
    var(--color-surface) calc(var(--c) / 4));
}

[dir="rtl"] .note {
  background: linear-gradient(to left,
    var(--brand-ocean) 0 calc(var(--c) / 4),
    var(--color-surface) calc(var(--c) / 4));
}

/* A hard rule, not a remark: same plate, coral accent. */
.note--rule {
  background: linear-gradient(to right,
    var(--brand-coral) 0 calc(var(--c) / 4),
    var(--color-surface) calc(var(--c) / 4));
}

[dir="rtl"] .note--rule {
  background: linear-gradient(to left,
    var(--brand-coral) 0 calc(var(--c) / 4),
    var(--color-surface) calc(var(--c) / 4));
}

.panel--do { border-top: 0; }
.panel--dont { border-top: 0; }
.badge { padding: var(--sp-1) var(--sp-3); }

/* NAVIGATION — the same plate as a list row, one step smaller */

.nav__list { gap: var(--sp-1); }

.nav__list a {
  --c: var(--cut-sm);
  --r: 3px;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--h-sm);
  padding: var(--sp-2) var(--sp-3);
  border-left: 0;
  font-size: var(--fs-300);
  line-height: var(--lh-ui);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

.nav__list a:hover { background: var(--color-surface); }

/* The stripe lives inside the padding the row already has, so the label of the
   active item stays on the same vertical line as every other label. */
.nav__list a.is-active {
  background: linear-gradient(to right,
    var(--brand-azure) 0 calc(var(--c) / 2),
    var(--color-surface-2) calc(var(--c) / 2));
}

[dir="rtl"] .nav__list a.is-active {
  background: linear-gradient(to left,
    var(--brand-azure) 0 calc(var(--c) / 2),
    var(--color-surface-2) calc(var(--c) / 2));
}

.nav__list a.is-active .nav__num { color: var(--brand-azure); }

/* single column: this page has no hero illustration */
.ui-page .hero { grid-template-columns: 1fr; }

.nav__back {
  display: inline-block;
  font-size: var(--fs-300);
  color: var(--color-pigeon);
  transition: color var(--dur-1) var(--ease);
}

.nav__back:hover { color: var(--color-text); text-decoration: none; }

/* ==========================================================================
   SPECIMEN HELPERS — layout of the examples, not part of the system
   ========================================================================== */

.u-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--color-surface);
  margin-bottom: var(--sp-3);
}

.u-demo--col {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-4);
}

.u-demo--tight { padding: var(--sp-4); }
.u-demo--base { background: var(--color-base); }

.u-demo__tag {
  flex: 0 0 6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-pigeon);
}

.u-cap {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  line-height: var(--lh-ui);
  color: var(--color-pigeon);
}

.u-cap b { color: var(--brand-azure); font-weight: 400; }

.u-figs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-5);
}

.u-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.u-fig figcaption { font: 400 var(--fs-100)/var(--lh-ui) var(--font-mono); color: var(--color-pigeon); }

.u-plate { background: var(--brand-azure); padding: 1.5px; }
.u-plate__in { width: 100%; height: 100%; background: var(--color-surface); }

.u-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.u-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 720px) {
  .u-grid--2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BUTTON
   ========================================================================== */

.u-btn {
  --btn-h: var(--h-md);
  --pad: var(--sp-5);
  --c: var(--cut-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--btn-h);
  margin: 0;
  padding-inline: var(--pad);
  border: 0;
  background: var(--brand-navy);
  color: var(--color-text);
  font: 500 var(--fs-300)/1 var(--font-body);
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), filter var(--dur-1) var(--ease);
}

.u-btn:hover { filter: brightness(1.14); text-decoration: none; }
.u-btn:active { filter: brightness(.92); }
.u-btn svg { display: block; flex: 0 0 auto; }

.u-btn--grad { background: var(--gradient-brand); }

/* a real border would be sliced by the clip, so it is an underlay */
.u-btn--ghost {
  display: inline-flex;
  align-items: stretch;
  padding: 1.5px;
  background: var(--color-line);
}

.u-btn--ghost:hover { background: var(--brand-azure); filter: none; }

.u-btn--ghost .u-btn__in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding-inline: max(0px, calc(var(--pad) - 1.5px));
  background: var(--color-base);
}

.u-btn--quiet { background: transparent; color: var(--color-pigeon); }
.u-btn--quiet:hover { background: var(--color-surface-2); color: var(--color-text); filter: none; }

.u-btn--danger { background: var(--danger); color: var(--on-solid); }

.u-btn--xs { --btn-h: var(--h-xs); --pad: var(--sp-3); --c: var(--cut-sm); font-size: var(--fs-200); }
.u-btn--sm { --btn-h: var(--h-sm); --pad: var(--sp-4); --c: var(--cut-sm); font-size: var(--fs-200); }
.u-btn--lg { --btn-h: var(--h-lg); --pad: var(--sp-6); font-size: var(--fs-400); }

.u-btn--icon { --pad: 0; width: var(--btn-h); }

.u-btn[disabled],
.u-btn[aria-disabled="true"] {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
  filter: none;
}

.u-btn.is-loading { pointer-events: none; color: transparent; position: relative; }

.u-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(241, 242, 243, .35);
  border-top-color: var(--color-text);
  border-radius: 50%;
  animation: u-spin 700ms linear infinite;
}

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

/* ==========================================================================
   SEGMENTED / TABS — one cut per group, on the leading item
   ========================================================================== */

.u-seg { display: inline-flex; gap: 2px; }

.u-seg__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--h-sm);
  margin: 0;
  padding-inline: var(--sp-4);
  border: 0;
  background: var(--color-surface-2);
  color: var(--color-pigeon);
  font: 500 var(--fs-300)/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.u-seg__item:hover { color: var(--color-text); }
.u-seg__item.is-active { background: var(--brand-navy); color: var(--color-text); }

.u-tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--color-separator);
}

.u-tab {
  height: var(--h-sm);
  padding-inline: var(--sp-4);
  border: 0;
  background: transparent;
  color: var(--color-pigeon);
  font: 500 var(--fs-300)/1 var(--font-body);
  cursor: pointer;
  position: relative;
  transition: color var(--dur-1) var(--ease);
}

.u-tab:hover { color: var(--color-text); }
.u-tab.is-active { color: var(--color-text); }

.u-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand-ocean);
}

/* ==========================================================================
   FIELDS
   ========================================================================== */

.u-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }

.u-label { font-size: var(--fs-200); letter-spacing: .04em; color: var(--color-pigeon); }

.u-inp {
  --inp-h: var(--h-md);
  --c: var(--cut-md);
  position: relative;
  display: block;
  height: var(--inp-h);
  padding: 1.5px;
  background: var(--color-line);
  transition: background var(--dur-1) var(--ease);
}

.u-inp:hover { background: var(--color-pigeon); }
.u-inp:focus-within { background: var(--focus); }

.u-inp__el {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  outline: none;
  background: var(--color-base);
  color: var(--color-text);
  font: 400 var(--fs-400)/var(--lh-ui) var(--font-body);
  padding-inline: var(--sp-3);
  appearance: none;
}

.u-inp__el::placeholder { color: var(--color-placeholder); }

.u-inp--area { --inp-h: 108px; --c: var(--cut-lg); }
.u-inp--area .u-inp__el { padding-block: var(--sp-3); resize: none; }

.u-inp--invalid { background: var(--danger); }

/* the input carries clip-path, which makes it a stacking context painted in
   DOM order — without a z-index it would cover an icon placed before it */
.u-inp__icon,
.u-inp__arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  color: var(--color-pigeon);
  pointer-events: none;
}

.u-inp__icon { inset-inline-start: var(--sp-3); }
.u-inp__arrow { inset-inline-end: var(--sp-3); }
.u-inp--icon .u-inp__el { padding-inline-start: calc(var(--sp-3) + 24px); }
.u-inp--select .u-inp__el { padding-inline-end: calc(var(--sp-3) + 22px); }

.u-help { font-size: var(--fs-200); line-height: var(--lh-ui); color: var(--color-pigeon); }
.u-error { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-200); color: var(--danger-fg); }

/* ==========================================================================
   CHECKBOX / RADIO / SWITCH
   Two markers for the whole system: a sharp tick and a rhombus. No circles.
   ========================================================================== */

.u-check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-300);
  line-height: var(--lh-ui);
}

.u-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.u-box {
  --c: var(--cut-xs);
  --r: 2px;
  flex: 0 0 auto;
  display: block;
  width: 22px;
  height: 22px;
  padding: 1.5px;
  background: var(--color-line);
  transition: background var(--dur-1) var(--ease);
}

.u-check:hover .u-box { background: var(--color-pigeon); }

.u-box__in {
  --c: var(--cut-xs);
  --r: 2px;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--color-base);
  color: var(--color-text);
  transition: background var(--dur-1) var(--ease);
}

.u-box__in svg,
.u-dot { opacity: 0; transition: opacity var(--dur-1) var(--ease); }

.u-check input:checked ~ .u-box { background: var(--brand-ocean); }
.u-check input:checked ~ .u-box .u-box__in { background: var(--brand-navy); }
.u-check input:checked ~ .u-box svg,
.u-check input:checked ~ .u-box .u-dot { opacity: 1; }

.u-check input:disabled ~ * { opacity: var(--disabled-opacity); }
.u-check:has(input:disabled) { cursor: not-allowed; }

/* sharp tick: butt caps, mitre join, both strokes at exactly 45deg */
.u-tick { stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: butt; stroke-linejoin: miter; }

/* rhombus: a square turned 45deg, so every edge is parallel to the chamfer */
.u-dot { width: 8px; height: 8px; background: currentColor; rotate: 45deg; }

.u-switch {
  --c: var(--cut-xs);
  --r: 2px;
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
  padding: 3px;
  background: var(--color-surface-2);
  transition: background var(--dur-2) var(--ease);
}

.u-knob {
  display: block;
  width: 14px;
  height: 14px;
  background: var(--color-pigeon);
  translate: 0 0;
  transition: translate var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

.u-check input:checked ~ .u-switch { background: var(--brand-navy); }
.u-check input:checked ~ .u-switch .u-knob { translate: 16px 0; background: var(--color-text); }

/* ==========================================================================
   CHIPS, LABELS, BADGES
   On a tinted background the text is the light tint of the hue, never the
   hue itself: Ocean on Ocean-14% is 4.1:1 and fails.
   ========================================================================== */

.u-chip {
  --c: var(--cut-sm);
  --r: 3px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: var(--h-xs);
  padding-inline: var(--sp-3);
  background: var(--color-surface-2);
  color: var(--color-text);
  font: 500 var(--fs-200)/1 var(--font-body);
}

.u-chip--info { background: var(--info-bg); color: var(--info-fg); }
.u-chip--success { background: var(--success-bg); color: var(--success-fg); }
.u-chip--warning { background: var(--warning-bg); color: var(--warning-fg); }
.u-chip--danger { background: var(--danger-bg); color: var(--danger-fg); }
.u-chip--solid { background: var(--brand-navy); color: var(--color-text); }

.u-chip__x {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-inline-end: -4px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: .7;
}

.u-chip__x:hover { opacity: 1; }

.u-tag {
  --h: 18px;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding-inline: var(--sp-2);
  background: var(--color-surface-2);
  color: var(--color-pigeon);
  font: 500 var(--fs-100)/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.u-tag--info { background: var(--info-bg); color: var(--info-fg); }
.u-tag--success { background: var(--success-bg); color: var(--success-fg); }
.u-tag--warning { background: var(--warning-bg); color: var(--warning-fg); }
.u-tag--danger { background: var(--danger-bg); color: var(--danger-fg); }

/* ==========================================================================
   PROGRESS, SLIDER, STEPS — thin elements, so they lean instead of being cut
   ========================================================================== */

.u-prog { --h: 10px; height: 10px; background: var(--color-surface-2); }

.u-prog__fill {
  --h: 10px;
  height: 100%;
  background: var(--u-stripes), var(--gradient-brand);
}

.u-prog--slim,
.u-prog--slim .u-prog__fill { --h: 6px; height: 6px; }

.u-prog--success .u-prog__fill { background: var(--u-stripes), var(--success); }
.u-prog--danger .u-prog__fill { background: var(--u-stripes), var(--danger); }

.u-slider { display: flex; align-items: center; gap: var(--sp-3); }

/* the thumb is taller than the track, so it lives outside it: the track
   carries a clip-path and would cut anything nested inside it */
.u-slider__rail {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  height: 20px;
}

.u-slider__track {
  --h: 8px;
  display: block;
  width: 100%;
  height: 8px;
  background: var(--color-surface-2);
}

.u-slider__fill { --h: 8px; display: block; height: 100%; background: var(--brand-ocean); }

.u-slider__thumb {
  --c: 4px;
  --r: 2px;
  position: absolute;
  top: 50%;
  width: 12px;
  height: 20px;
  translate: -50% -50%;
  background: var(--color-text);
}

.u-steps { display: flex; align-items: center; }

.u-step {
  --c: var(--cut-xs);
  --r: 2px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--color-surface-2);
  color: var(--color-pigeon);
  font: 500 var(--fs-200)/1 var(--font-mono);
}

.u-step.is-done { background: var(--brand-navy); color: var(--color-text); }
.u-step.is-active { background: var(--brand-ocean); color: var(--on-solid); }

.u-step__line {
  --h: 4px;
  flex: 1;
  height: 4px;
  min-width: 18px;
  margin-inline: var(--sp-2);
  background: var(--color-surface-2);
}

.u-step__line.is-done { background: var(--brand-navy); }

/* ==========================================================================
   ALERT — accent is a stripe inside the block's own background
   One element, one clip, so the colour cannot leak past the silhouette. The
   stripe is a quarter of the cut and its lower end is the very diagonal the
   block's corner continues.
   ========================================================================== */

.u-alert {
  --c: var(--cut-xl);
  --accent: calc(var(--c) / 4);
  --accent-color: var(--info);
  display: block;
  padding: var(--sp-4) var(--sp-5);
  padding-inline-start: calc(var(--sp-5) + var(--accent));
  background: linear-gradient(to right,
    var(--accent-color) 0 var(--accent),
    var(--color-surface) var(--accent));
}

[dir="rtl"] .u-alert {
  background: linear-gradient(to left,
    var(--accent-color) 0 var(--accent),
    var(--color-surface) var(--accent));
}

.u-alert--success { --accent-color: var(--success); }
.u-alert--warning { --accent-color: var(--warning); }
.u-alert--danger { --accent-color: var(--danger); }

.u-alert__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font: 600 var(--fs-400)/var(--lh-tight) var(--font-heading);
  margin-bottom: var(--sp-1);
}

.u-alert p { margin: 0; font-size: var(--fs-300); line-height: var(--lh-ui); color: var(--color-pigeon); }
.u-alert--success .u-alert__head { color: var(--success-fg); }
.u-alert--warning .u-alert__head { color: var(--warning-fg); }
.u-alert--danger .u-alert__head { color: var(--danger-fg); }

/* ==========================================================================
   SURFACES, LISTS, MENU
   ========================================================================== */

.u-card {
  --c: var(--cut-xl);
  padding: var(--sp-5);
  background: var(--color-surface);
}

.u-card__title { font: 600 var(--fs-500)/var(--lh-tight) var(--font-heading); margin: 0 0 var(--sp-2); }
.u-card p { margin: 0; font-size: var(--fs-300); line-height: var(--lh-ui); color: var(--color-pigeon); }

/* A stack of rows must not turn the left edge into a sawtooth: the cut
   belongs to the container, the rows inside stay square. */
.u-list {
  --c: var(--cut-lg);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  overflow: hidden;
}

.u-row {
  --accent: calc(var(--cut-lg) / 2);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}

.u-row:hover { background: var(--color-surface-2); }

/* The row itself stays square — in a list the cut belongs to the container.
   The accent is the one place the gesture shows up: its own bottom is sliced
   at the chamfer angle, so the stripe ends in a 45deg point. */
/* No extra padding: the stripe sits inside the padding every row already has,
   so the content of the selected row lines up with the rest of the list. */
.u-row.is-active {
  background: var(--color-surface-2);
}

.u-row.is-active::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--accent);
  background: var(--brand-ocean);
  /* the stripe is exactly as wide as the cut is deep, so the diagonal lands
     on its own bottom corner and the bar ends in a point */
  clip-path: polygon(0 0, 100% 0, 100% 100%,
    0 calc(100% - var(--accent) * tan(var(--ca))));
}

[dir="rtl"] .u-row.is-active::before {
  clip-path: polygon(0 0, 100% 0,
    100% calc(100% - var(--accent) * tan(var(--ca))), 0 100%);
}

.u-row__body { flex: 1; min-width: 0; }
.u-row__name { display: block; font-size: var(--fs-300); font-weight: 500; line-height: var(--lh-ui); }
.u-row__text {
  display: block;
  font-size: var(--fs-200);
  line-height: var(--lh-ui);
  color: var(--color-pigeon);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.u-row__meta { flex: 0 0 auto; font: 400 var(--fs-100)/1 var(--font-mono); color: var(--color-pigeon); }

/* Depth: a drop-shadow on the wrapper follows the clipped silhouette, while
   box-shadow on the element itself would be sliced away by the clip. */
.u-raise { filter: var(--shadow-2); }
.u-raise--1 { filter: var(--shadow-1); }
.u-raise--3 { filter: var(--shadow-3); }

.u-menu {
  --c: var(--cut-lg);
  min-width: 220px;
  padding: var(--sp-1);
  background: var(--color-surface-2);
}

.u-menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  height: var(--h-sm);
  padding-inline: var(--sp-3);
  border: 0;
  background: transparent;
  color: var(--color-pigeon);
  font: 400 var(--fs-300)/1 var(--font-body);
  text-align: start;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.u-menu__item:hover { background: var(--color-surface); color: var(--color-text); }
.u-menu__item.is-active { background: var(--brand-navy); color: var(--color-text); }
.u-menu__sep { height: 1px; margin: var(--sp-1) 0; background: var(--color-separator); }

.u-table { width: 100%; border-collapse: collapse; font-size: var(--fs-300); }

.u-table th {
  padding: var(--sp-2) var(--sp-3);
  text-align: start;
  font: 500 var(--fs-100)/1 var(--font-mono);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-pigeon);
  border-bottom: 1px solid var(--color-separator);
}

.u-table td { padding: var(--sp-3); border-bottom: 1px solid var(--color-separator); }
.u-table tr:last-child td { border-bottom: 0; }
.u-table tbody tr { transition: background var(--dur-1) var(--ease); }
.u-table tbody tr:hover { background: var(--color-surface-2); }

.u-pager { display: flex; align-items: center; gap: var(--sp-1); }

.u-page-btn {
  --c: var(--cut-sm);
  --r: 3px;
  display: grid;
  place-items: center;
  width: var(--h-xs);
  height: var(--h-xs);
  border: 0;
  background: var(--color-surface-2);
  color: var(--color-pigeon);
  font: 500 var(--fs-200)/1 var(--font-mono);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.u-page-btn:hover { color: var(--color-text); }
.u-page-btn.is-active { background: var(--brand-navy); color: var(--color-text); }
.u-page-dots { padding-inline: var(--sp-1); color: var(--color-pigeon); font-family: var(--font-mono); font-size: var(--fs-200); }

.u-avatar {
  --c: var(--cut-xs);
  --r: 2px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--gradient-brand);
  color: var(--color-text);
  font: 600 var(--fs-200)/1 var(--font-heading);
  flex: 0 0 auto;
}

.u-avatar--ocean { background: var(--brand-ocean); color: var(--on-solid); }
.u-avatar--flame { background: var(--brand-flame); color: var(--on-solid); }

/* chamfered squares overlap badly, so a group is spaced, not stacked */
.u-avatars { display: flex; gap: var(--sp-1); }

.u-tooltip {
  --c: var(--cut-sm);
  --r: 3px;
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--fs-200);
  line-height: var(--lh-ui);
}

.u-empty {
  --c: var(--cut-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  /* clip-path breaks dashed borders, so the dropzone is a hatch at the
     chamfer angle instead */
  background:
    repeating-linear-gradient(var(--ca),
      rgba(241, 242, 243, .035) 0 1px,
      transparent 1px 7px),
    var(--color-surface);
}

.u-empty__title { font: 600 var(--fs-400)/var(--lh-tight) var(--font-heading); }
.u-empty p { margin: 0; font-size: var(--fs-300); color: var(--color-pigeon); max-width: 40ch; }

/* ==========================================================================
   SCALE SPECIMENS
   ========================================================================== */

/* one grid for the whole scale so the bars line up across rows */
.u-scale {
  display: grid;
  grid-template-columns: 5rem max-content 1fr;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
}

.u-scale__row { display: contents; }

.u-scale__k { font: 400 var(--fs-100)/1 var(--font-mono); color: var(--brand-azure); }
.u-scale__bar { height: 12px; background: var(--brand-navy); }
.u-scale__v { font: 400 var(--fs-100)/1 var(--font-mono); color: var(--color-pigeon); }

.u-type-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--color-separator);
}

.u-type-row:first-child { border-top: 0; }
.u-type-meta { flex: 0 0 auto; font: 400 var(--fs-100)/1 var(--font-mono); color: var(--color-pigeon); white-space: nowrap; }

.u-contrast { width: 100%; border-collapse: collapse; font-size: var(--fs-300); }
.u-contrast th, .u-contrast td { padding: var(--sp-2) var(--sp-3); text-align: start; border-bottom: 1px solid var(--color-separator); }
.u-contrast th { font: 500 var(--fs-100)/1 var(--font-mono); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-pigeon); }
.u-contrast td:last-child, .u-contrast th:last-child { text-align: end; font-family: var(--font-mono); }
.u-contrast .is-pass { color: var(--success-fg); }
.u-contrast .is-fail { color: var(--danger-fg); }

/* ==========================================================================
   MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}