/*
 * White Room design tokens. This is the only file allowed to hold color values and raw sizes;
 * `pnpm lint` rejects them in other component styles (see README.md).
 */
:root {
  color-scheme: dark;

  --wr-color-bg-app: #1c1c1c;
  --wr-color-bg-panel: #262626;
  --wr-color-bg-toolbar: #242424;
  --wr-color-bg-header: #2c2c2c;
  --wr-color-bg-drawer: #2a2a2a;
  --wr-color-bg-input: #1f1f1f;
  --wr-color-bg-control: #333333;
  --wr-color-bg-control-hover: #3d3d3d;
  --wr-color-bg-selected: #3a3a3a;
  --wr-color-bg-active: #4d4d4d;
  /* UI-17 changes the canvas background without changing the rest of the app. */
  --wr-color-canvas: var(--wr-color-bg-app);
  --wr-color-track: #141414;
  --wr-color-track-fill: #7a7a7a;
  --wr-color-thumb: #dcdcdc;
  --wr-color-backdrop: rgb(0 0 0 / 60%);

  --wr-color-border-zone: #111111;
  --wr-color-border-section: #1a1a1a;
  --wr-color-border-subtle: #333333;
  --wr-color-border-control: #3a3a3a;
  --wr-color-border-button: #444444;

  --wr-color-text-strong: #ececec;
  --wr-color-text-primary: #e6e6e6;
  --wr-color-text-control: #dcdcdc;
  --wr-color-text-body: #c9c9c9;
  --wr-color-text-label: #bdbdbd;
  --wr-color-text-secondary: #9a9a9a;
  --wr-color-text-menu: #a8a8a8;
  /* Muted and dim text keep 4.5:1 on every panel, drawer and header background (MVP-039 S5). */
  --wr-color-text-muted: #969696;
  --wr-color-text-dim: #8f8f8f;
  --wr-color-text-disabled: #6d6d6d;
  --wr-color-text-on-accent: #ffffff;

  --wr-color-accent: #4fb0c6;
  --wr-color-accent-bg: #2f4a51;
  --wr-color-focus: var(--wr-color-accent);
  --wr-color-ok: #5aa25c;
  --wr-color-warn: #e0a34a;
  --wr-color-error: #c8443e;
  /* Error text: --wr-color-error keeps 3:1 for marks and borders, text needs 4.5:1 (MVP-039 S5). */
  --wr-color-text-error: #ee7068;

  /* Histogram (docs/alpha-2/REFERENCE.md): the channels lighten each other on black, so two give
     yellow, cyan or magenta and all three gray. */
  --wr-color-histogram-bg: #000000;
  --wr-color-histogram-red: #aa0000;
  --wr-color-histogram-green: #00aa00;
  --wr-color-histogram-blue: #0000aa;
  --wr-color-histogram-zone: rgb(255 255 255 / 10%);
  /* A lit clipping triangle mixes the channels that clip; all three give white. */
  --wr-color-clip-red: #ff0000;
  --wr-color-clip-green: #00ff00;
  --wr-color-clip-blue: #0000ff;
  --wr-color-clip-yellow: #ffff00;
  --wr-color-clip-magenta: #ff00ff;
  --wr-color-clip-cyan: #00ffff;
  --wr-color-clip-white: #ffffff;
  /* Tone Curve (docs/alpha-2/REFERENCE.md): the RGB curve light gray, each channel its own color,
     bright enough for 3:1 on the graph background. */
  --wr-color-curve-rgb: #bdbdbd;
  --wr-color-curve-red: #e0605a;
  --wr-color-curve-green: #5cc25c;
  --wr-color-curve-blue: #7c97ea;
  --wr-color-curve-grid: #3a3a3a;
  /* Color Mixer swatches: the sRGB hue at the center of each band (0, 30, 60, 120, 180, 240, 270
     and 300 degrees), bright enough for 3:1 on the panel background. */
  --wr-color-band-red: #e0453a;
  --wr-color-band-orange: #e88a2e;
  --wr-color-band-yellow: #d9c62b;
  --wr-color-band-green: #4cad4c;
  --wr-color-band-aqua: #3bb0b0;
  --wr-color-band-blue: #6b6bf0;
  --wr-color-band-purple: #9a6be0;
  --wr-color-band-magenta: #d652d6;
  /* Color Grading wheels (docs/alpha-2/REFERENCE.md): Hue 0° to the right and growing
     counterclockwise, so the hues of the conic gradient, which runs clockwise, go down; gray at
     the center, where Saturation is 0. */
  --wr-gradient-wheel:
    radial-gradient(circle closest-side, #808080, transparent),
    conic-gradient(from 90deg, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000);
  --wr-color-wheel-handle: #ffffff;
  --wr-color-wheel-handle-edge: #1c1c1c;

  --wr-space-1: 2px;
  --wr-space-2: 4px;
  --wr-space-3: 6px;
  --wr-space-4: 8px;
  --wr-space-5: 10px;
  --wr-space-6: 14px;
  --wr-space-7: 20px;
  --wr-space-button-x: 12px;
  --wr-space-gutter-phone: 16px;
  --wr-space-topbar-tasks: 40px;
  --wr-space-topbar-status: 28px;
  --wr-space-topbar-tabs: 22px;

  --wr-font-family: 'IBM Plex Sans', system-ui, sans-serif;
  --wr-font-size-identity: 17px;
  --wr-font-size-title: 15px;
  --wr-font-size-base: 12px;
  --wr-font-size-control: 11.5px;
  --wr-font-size-secondary: 11px;
  --wr-font-size-caption: 10.5px;
  --wr-font-size-micro: 10px;
  --wr-font-weight-regular: 400;
  --wr-font-weight-strong: 600;
  --wr-line-height-text: 1.5;
  --wr-letter-spacing-identity: 0.02em;

  --wr-radius-control: 2px;
  --wr-radius-panel: 0;
  --wr-radius-round: 50%;

  --wr-focus-ring-width: 2px;
  --wr-focus-ring-offset: 1px;

  --wr-z-raised: 10;
  --wr-z-overlay: 100;
  --wr-z-popover: 200;
  --wr-z-modal: 300;

  /* Touch hit area (SPECIFICATION §4); the visible control may be smaller. */
  --wr-hit-min: 44px;

  --wr-size-menubar: 22px;
  --wr-size-topbar: 46px;
  --wr-size-toolbar: 30px;
  --wr-size-panel-footer: 34px;
  --wr-size-panel-left: 250px;
  --wr-size-panel-right: 300px;
  --wr-size-panel-min: 200px;
  --wr-size-panel-max: 420px;
  --wr-size-phone-panel-max: 40dvh;
  --wr-size-filmstrip-header: 24px;
  --wr-size-filmstrip-strip: 84px;
  --wr-size-filmstrip-item: 72px;
  --wr-size-tool-strip: 36px;
  --wr-size-tool-button-width: 32px;
  --wr-size-tool-button-height: 26px;
  --wr-size-button: 22px;
  --wr-size-icon: 16px;
  --wr-size-brand-mark: 28px;
  --wr-size-status-dot: 7px;
  --wr-size-progress: 3px;
  --wr-size-tab-underline: 2px;
  --wr-size-task-list: 250px;
  --wr-size-empty-state: 360px;
  --wr-size-menu-min: 180px;
  --wr-size-dialog: 560px;
  /* A label beside its field in a dialog, and the widest such field (ALPHA3-009 Export). */
  --wr-size-dialog-label: 128px;
  --wr-size-dialog-field: 256px;
  /* The file list of an export report, which scrolls past about ten files (ALPHA3-011). */
  --wr-size-dialog-list: 240px;
  --wr-size-panel-header: 26px;
  --wr-size-curve-point: 8px;
  --wr-size-curve-hit: 16px;
  --wr-size-curve-field: 40px;
  --wr-size-wheel: 132px;
  --wr-size-wheel-large: 184px;
  --wr-size-wheel-handle: 12px;
  --wr-size-wheel-handle-border: 2px;
  --wr-size-wheel-marker: 6px;
  --wr-size-slider-row: 22px;
  --wr-size-slider-label: 64px;
  /* Detail names a slider Smoothness, longer than any slider name of alpha 1. */
  --wr-size-slider-label-wide: 76px;
  --wr-size-slider-field: 48px;
  --wr-size-slider-field-height: 18px;
  --wr-size-slider-track: 3px;
  --wr-size-slider-thumb: 10px;
  --wr-size-histogram: 112px;
  --wr-size-histogram-triangle: 20px;
  --wr-size-histogram-icon: 12px;
  /* The line of a split Before/After view; its handle is --wr-hit-min wide (ALPHA3-014). */
  --wr-size-compare-divider: 2px;

  /* Public site pages (ADR-0015): reading text on a phone or a desktop, not the dense editor UI. */
  --wr-font-size-page: 17px;
  --wr-font-size-page-small: 15px;
  --wr-font-size-page-h1: 34px;
  --wr-font-size-page-h2: 24px;
  --wr-font-size-page-h3: 19px;
  --wr-line-height-page: 1.6;
  --wr-line-height-heading: 1.25;
  --wr-size-page-content: 720px;
  --wr-size-page-wide: 1080px;
  --wr-space-page-gutter: 20px;
  --wr-space-page-block: 16px;
  --wr-space-page-section: 40px;
  --wr-radius-page-button: 4px;

  --wr-motion-duration: 150ms;
  /* A stale cue waits this long, so a result that comes a frame later never flickers; it is not
     motion, so reduced motion keeps it. */
  --wr-delay-stale: 150ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wr-motion-duration: 0ms;
  }
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/ibm-plex-sans-latin-400-normal.3b646991d3.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/ibm-plex-sans-latin-600-normal.8960851d69.woff2) format('woff2');
}
/*
 * Public site pages and the editor's offline legal copies (ADR-0015). Every size and color is a
 * token of packages/ui/src/tokens.css, which the build puts before this file.
 */

body {
  margin: 0;
  background: var(--wr-color-bg-app);
  color: var(--wr-color-text-body);
  font-family: var(--wr-font-family);
  font-size: var(--wr-font-size-page);
  line-height: var(--wr-line-height-page);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--wr-color-accent);
  text-underline-offset: var(--wr-space-1);
}

:focus-visible {
  outline: var(--wr-focus-ring-width) solid var(--wr-color-focus);
  outline-offset: var(--wr-focus-ring-offset);
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  color: var(--wr-color-text-strong);
  font-weight: var(--wr-font-weight-strong);
  line-height: var(--wr-line-height-heading);
}

h1 {
  margin: var(--wr-space-page-section) 0 var(--wr-space-page-block);
  font-size: var(--wr-font-size-page-h1);
}

h2 {
  margin: var(--wr-space-page-section) 0 var(--wr-space-page-block);
  font-size: var(--wr-font-size-page-h2);
}

h3 {
  margin: var(--wr-space-page-block) 0 var(--wr-space-4);
  font-size: var(--wr-font-size-page-h3);
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--wr-space-page-block);
}

li + li {
  margin-top: var(--wr-space-2);
}

strong {
  color: var(--wr-color-text-primary);
}

kbd {
  padding: 0 var(--wr-space-2);
  border: 1px solid var(--wr-color-border-button);
  border-radius: var(--wr-radius-control);
  background: var(--wr-color-bg-control);
  color: var(--wr-color-text-control);
  font-family: inherit;
  font-size: var(--wr-font-size-page-small);
}

.skip-link {
  position: absolute;
  left: var(--wr-space-page-gutter);
  top: var(--wr-space-4);
  z-index: var(--wr-z-overlay);
  padding: var(--wr-space-4) var(--wr-space-button-x);
  background: var(--wr-color-bg-panel);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.site-header {
  border-bottom: 1px solid var(--wr-color-border-subtle);
  background: var(--wr-color-bg-header);
}

.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wr-space-4) var(--wr-space-7);
  max-width: var(--wr-size-page-wide);
  margin: 0 auto;
  padding: var(--wr-space-4) var(--wr-space-page-gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--wr-space-4);
  min-height: var(--wr-hit-min);
  color: var(--wr-color-text-strong);
  font-weight: var(--wr-font-weight-strong);
  letter-spacing: var(--wr-letter-spacing-identity);
  text-decoration: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--wr-space-6);
  margin-right: auto;
}

.site-nav a,
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--wr-hit-min);
  color: var(--wr-color-text-primary);
  text-decoration: none;
}

.site-nav a[aria-current='page'],
.site-footer a[aria-current='page'] {
  color: var(--wr-color-text-strong);
  text-decoration: underline;
}

.site-nav a:hover,
.site-footer a:hover {
  color: var(--wr-color-text-strong);
  text-decoration: underline;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: var(--wr-hit-min);
  padding: 0 var(--wr-space-page-block);
  border-radius: var(--wr-radius-page-button);
  background: var(--wr-color-accent-bg);
  color: var(--wr-color-text-strong);
  font-weight: var(--wr-font-weight-strong);
  text-decoration: none;
}

.button:hover {
  background: var(--wr-color-bg-active);
}

.page {
  max-width: var(--wr-size-page-content);
  margin: 0 auto;
  padding: 0 var(--wr-space-page-gutter) var(--wr-space-page-section);
}

.lead {
  color: var(--wr-color-text-primary);
  font-size: var(--wr-font-size-page-h3);
}

.notice {
  padding: var(--wr-space-page-block);
  border-left: var(--wr-size-tab-underline) solid var(--wr-color-accent);
  background: var(--wr-color-bg-panel);
}

.meta {
  color: var(--wr-color-text-secondary);
  font-size: var(--wr-font-size-page-small);
}

.table-scroll {
  overflow-x: auto;
  margin: 0 0 var(--wr-space-page-block);
}

table {
  border-collapse: collapse;
  font-size: var(--wr-font-size-page-small);
}

th,
td {
  padding: var(--wr-space-4);
  border: 1px solid var(--wr-color-border-subtle);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--wr-color-text-strong);
}

.site-footer {
  max-width: var(--wr-size-page-wide);
  margin: 0 auto;
  padding: var(--wr-space-page-block) var(--wr-space-page-gutter) var(--wr-space-page-section);
  border-top: 1px solid var(--wr-color-border-subtle);
  color: var(--wr-color-text-secondary);
  font-size: var(--wr-font-size-page-small);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--wr-space-6);
}