/* CatchMailNot design tokens — GENERATED bundle. */

:root {
  /* color */
  --oi-color-paper-0:      #FFFFFF;
  --oi-color-paper-50:     #F7F6F0;
  --oi-color-paper-100:    #EFEEE6;
  --oi-color-paper-200:    #DDDCD3;
  --oi-color-paper-300:    #C9C8BE;
  --oi-color-sage-200:     #D3D6CC;
  --oi-color-sage-300:     #BFC2B8;
  --oi-color-sage-500:     #8F9287;
  --oi-color-sage-700:     #565A50;
  --oi-color-graphite-100: #B4B4AF;
  --oi-color-graphite-200: #9C9C96;
  --oi-color-graphite-300: #838280;
  --oi-color-graphite-400: #6D6D66;
  --oi-color-graphite-500: #55554F;
  --oi-color-graphite-600: #3A3A36;
  --oi-color-graphite-700: #232320;
  --oi-color-graphite-800: #090909;
  --oi-color-graphite-900: #000000;
  --oi-color-rust-300:     #C68A6E;
  --oi-color-rust-500:     #8A4C33;
  --oi-color-rust-600:     #6F3E2B;
  --oi-color-rust-700:     #57301F;
  --oi-color-white:        #FFFFFF;

  /* surface */
  --oi-surface-page:       #F7F6F0;
  --oi-surface-card:       #FFFFFF;
  --oi-surface-sunken:     #EFEEE6;
  --oi-surface-panel:      #000000;
  --oi-surface-dark:       #090909;
  --oi-surface-annotation: rgba(9, 9, 9, 0.8);

  /* text */
  --oi-text-primary:           #090909;
  --oi-text-body:              #3A3A36;
  --oi-text-secondary:         #6D6D66;
  --oi-text-disabled:          #9C9C96;
  --oi-text-inverse:           #FFFFFF;
  --oi-text-inverse-secondary: #B4B4AF;
  --oi-text-inverse-tertiary:  #838280;
  --oi-text-accent:            #6F3E2B;
  --oi-text-accent-on-dark:    #C68A6E;

  /* border */
  --oi-border-grid:          #DDDCD3;
  --oi-border-default:       #C9C8BE;
  --oi-border-strong:        #090909;
  --oi-border-on-dark:       rgba(255, 255, 255, 0.90);
  --oi-border-on-dark-faint: rgba(255, 255, 255, 0.16);
  --oi-border-on-dark-muted: rgba(255, 255, 255, 0.30);

  /* radius */
  --oi-radius-none: 0;
  --oi-radius-xs:   2px;
  --oi-radius-pill: 999px;

  /* space */
  --oi-space-0:  0;
  --oi-space-1:  4px;
  --oi-space-2:  8px;
  --oi-space-3:  12px;
  --oi-space-4:  16px;
  --oi-space-5:  20px;
  --oi-space-6:  24px;
  --oi-space-7:  32px;
  --oi-space-8:  40px;
  --oi-space-9:  48px;
  --oi-space-10: 64px;
  --oi-space-11: 80px;
  --oi-space-12: 96px;
  --oi-space-13: 128px;

  /* size */
  --oi-size-control-sm:   32px;
  --oi-size-control-md:   40px;
  --oi-size-control-lg:   48px;
  --oi-size-nav:          72px;
  --oi-size-sidebar:      232px;
  --oi-size-icon-sm:      16px;
  --oi-size-icon-md:      20px;
  --oi-size-icon-lg:      24px;
  --oi-size-container-sm: 640px;
  --oi-size-container-md: 900px;
  --oi-size-container-lg: 1232px;
  --oi-size-grid-unit:    64px;

  /* font */
  --oi-font-family-display:  'Space Mono', 'Courier New', monospace;
  --oi-font-family-text:     'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --oi-font-family-mono:     'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --oi-font-weight-regular:  400;
  --oi-font-weight-medium:   500;
  --oi-font-weight-semibold: 600;
  --oi-font-weight-bold:     700;

  /* typeStyle */
  --oi-type-style-display-xl-size:        64px;
  --oi-type-style-display-xl-line-height: 1.05;
  --oi-type-style-display-xl-weight:      700;
  --oi-type-style-display-xl-tracking:    -0.01em;
  --oi-type-style-display-lg-size:        48px;
  --oi-type-style-display-lg-line-height: 1.08;
  --oi-type-style-display-lg-weight:      700;
  --oi-type-style-display-lg-tracking:    -0.01em;
  --oi-type-style-display-md-size:        40px;
  --oi-type-style-display-md-line-height: 1.1;
  --oi-type-style-display-md-weight:      700;
  --oi-type-style-display-md-tracking:    -0.01em;
  --oi-type-style-h1-size:                32px;
  --oi-type-style-h1-line-height:         1.15;
  --oi-type-style-h1-weight:              700;
  --oi-type-style-h1-tracking:            -0.01em;
  --oi-type-style-h2-size:                24px;
  --oi-type-style-h2-line-height:         1.25;
  --oi-type-style-h2-weight:              600;
  --oi-type-style-h2-tracking:            -0.01em;
  --oi-type-style-h3-size:                20px;
  --oi-type-style-h3-line-height:         1.3;
  --oi-type-style-h3-weight:              600;
  --oi-type-style-h3-tracking:            -0.005em;
  --oi-type-style-h4-size:                17px;
  --oi-type-style-h4-line-height:         1.35;
  --oi-type-style-h4-weight:              600;
  --oi-type-style-h4-tracking:            0;
  --oi-type-style-body-lg-size:           18px;
  --oi-type-style-body-lg-line-height:    1.55;
  --oi-type-style-body-lg-weight:         400;
  --oi-type-style-body-lg-tracking:       0;
  --oi-type-style-body-size:              16px;
  --oi-type-style-body-line-height:       1.6;
  --oi-type-style-body-weight:            400;
  --oi-type-style-body-tracking:          0;
  --oi-type-style-body-sm-size:           14px;
  --oi-type-style-body-sm-line-height:    1.55;
  --oi-type-style-body-sm-weight:         400;
  --oi-type-style-body-sm-tracking:       0;
  --oi-type-style-caption-size:           13px;
  --oi-type-style-caption-line-height:    1.5;
  --oi-type-style-caption-weight:         400;
  --oi-type-style-caption-tracking:       0;
  --oi-type-style-label-size:             14px;
  --oi-type-style-label-line-height:      1.3;
  --oi-type-style-label-weight:           600;
  --oi-type-style-label-tracking:         0;
  --oi-type-style-eyebrow-size:           12px;
  --oi-type-style-eyebrow-line-height:    1.3;
  --oi-type-style-eyebrow-weight:         500;
  --oi-type-style-eyebrow-tracking:       0.14em;
  --oi-type-style-mono-size:              13px;
  --oi-type-style-mono-line-height:       1.5;
  --oi-type-style-mono-weight:            400;
  --oi-type-style-mono-tracking:          0;
  --oi-type-style-metric-size:            30px;
  --oi-type-style-metric-line-height:     1.1;
  --oi-type-style-metric-weight:          700;
  --oi-type-style-metric-tracking:        0;
  --oi-type-style-kv-size:                24px;
  --oi-type-style-kv-line-height:         1.1;
  --oi-type-style-kv-weight:              700;
  --oi-type-style-kv-tracking:            0;

  /* shadow */
  --oi-shadow-none:      none;
  --oi-shadow-card:      0 1px 0 rgba(9, 9, 9, 0.05);
  --oi-shadow-lift:      4px 4px 0 rgba(9, 9, 9, 0.16);
  --oi-shadow-lift-dark: 4px 4px 0 rgba(0, 0, 0, 0.55);
  --oi-shadow-focus:     0 0 0 2px #F7F6F0, 0 0 0 4px #6F3E2B;

  /* motion */
  --oi-motion-duration-instant: 60ms;
  --oi-motion-duration-fast:    120ms;
  --oi-motion-duration-base:    200ms;
  --oi-motion-duration-slow:    320ms;
  --oi-motion-easing-standard:  cubic-bezier(0.2, 0, 0, 1);
  --oi-motion-easing-entrance:  cubic-bezier(0, 0, 0.2, 1);
  --oi-motion-easing-exit:      cubic-bezier(0.4, 0, 1, 1);
  --oi-motion-easing-step:      steps(2, end);

  /* zIndex */
  --oi-z-index-base:    0;
  --oi-z-index-raised:  10;
  --oi-z-index-sticky:  100;
  --oi-z-index-overlay: 500;
  --oi-z-index-modal:   1000;
  --oi-z-index-toast:   1500;
}

/* CMN base layer: reset, paper canvas, type scale utilities */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--oi-font-family-text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--oi-text-body);
  background: var(--oi-surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--oi-text-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--oi-shadow-focus);
  border-radius: var(--oi-radius-xs);
}

::selection { background: var(--oi-color-graphite-800); color: var(--oi-color-paper-50); }

/* --- the ruled paper canvas ---------------------------------------------- */

/* The page is graph paper: 64px squares ruled in paper-200. Sections that
   need plain paper (the nav, the logo strip) set a solid background on top. */
.oi-grid-paper {
  background-color: var(--oi-surface-page);
  background-image:
    linear-gradient(to right, var(--oi-border-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--oi-border-grid) 1px, transparent 1px);
  background-size: var(--oi-size-grid-unit) var(--oi-size-grid-unit);
}

.oi-container {
  width: 100%;
  max-width: var(--oi-size-container-lg);
  margin-inline: auto;
  padding-inline: var(--oi-space-6);
}
.oi-container--md { max-width: var(--oi-size-container-md); }
.oi-container--sm { max-width: var(--oi-size-container-sm); }

.oi-stack > * + * { margin-top: var(--oi-space-4); }
.oi-row {
  display: flex;
  align-items: center;
  gap: var(--oi-space-3);
}
.oi-row--between { justify-content: space-between; }

/* --- type ---------------------------------------------------------------- */

/* Space Mono carries the blunt statement (display sizes);
   IBM Plex Sans carries the interface (h2 down). */
.oi-display-xl,
.oi-display-lg,
.oi-display-md,
.oi-h1 {
  font-family: var(--oi-font-family-display);
  color: var(--oi-text-primary);
  margin: 0;
}
.oi-h2, .oi-h3, .oi-h4 {
  font-family: var(--oi-font-family-text);
  color: var(--oi-text-primary);
  margin: 0;
}

.oi-display-xl { font-size: var(--oi-type-style-display-xl-size); line-height: var(--oi-type-style-display-xl-line-height); font-weight: var(--oi-type-style-display-xl-weight); letter-spacing: var(--oi-type-style-display-xl-tracking); }
.oi-display-lg { font-size: var(--oi-type-style-display-lg-size); line-height: var(--oi-type-style-display-lg-line-height); font-weight: var(--oi-type-style-display-lg-weight); letter-spacing: var(--oi-type-style-display-lg-tracking); }
.oi-display-md { font-size: var(--oi-type-style-display-md-size); line-height: var(--oi-type-style-display-md-line-height); font-weight: var(--oi-type-style-display-md-weight); letter-spacing: var(--oi-type-style-display-md-tracking); }
.oi-h1 { font-size: var(--oi-type-style-h1-size); line-height: var(--oi-type-style-h1-line-height); font-weight: var(--oi-type-style-h1-weight); letter-spacing: var(--oi-type-style-h1-tracking); }
.oi-h2 { font-size: var(--oi-type-style-h2-size); line-height: var(--oi-type-style-h2-line-height); font-weight: var(--oi-type-style-h2-weight); letter-spacing: var(--oi-type-style-h2-tracking); }
.oi-h3 { font-size: var(--oi-type-style-h3-size); line-height: var(--oi-type-style-h3-line-height); font-weight: var(--oi-type-style-h3-weight); letter-spacing: var(--oi-type-style-h3-tracking); }
.oi-h4 { font-size: var(--oi-type-style-h4-size); line-height: var(--oi-type-style-h4-line-height); font-weight: var(--oi-type-style-h4-weight); letter-spacing: var(--oi-type-style-h4-tracking); }

.oi-body-lg { font-size: var(--oi-type-style-body-lg-size); line-height: var(--oi-type-style-body-lg-line-height); }
.oi-body    { font-size: var(--oi-type-style-body-size); line-height: var(--oi-type-style-body-line-height); }
.oi-body-sm { font-size: var(--oi-type-style-body-sm-size); line-height: var(--oi-type-style-body-sm-line-height); }
.oi-caption { font-size: var(--oi-type-style-caption-size); line-height: var(--oi-type-style-caption-line-height); color: var(--oi-text-secondary); }

.oi-muted { color: var(--oi-text-secondary); }
.oi-lead {
  font-size: var(--oi-type-style-body-lg-size);
  line-height: var(--oi-type-style-body-lg-line-height);
  color: var(--oi-text-secondary);
  margin: 0;
}

/* uppercase mono section marker */
.oi-eyebrow {
  display: inline-block;
  font-family: var(--oi-font-family-mono);
  font-size: var(--oi-type-style-eyebrow-size);
  line-height: var(--oi-type-style-eyebrow-line-height);
  font-weight: var(--oi-type-style-eyebrow-weight);
  letter-spacing: var(--oi-type-style-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--oi-text-secondary);
}

/* form labels and other short bold sans labels */
.oi-label {
  font-size: var(--oi-type-style-label-size);
  line-height: var(--oi-type-style-label-line-height);
  font-weight: var(--oi-type-style-label-weight);
  color: var(--oi-text-primary);
}

/* IBM Plex Mono records the operational value */
.oi-mono {
  font-family: var(--oi-font-family-mono);
  font-size: var(--oi-type-style-mono-size);
  line-height: var(--oi-type-style-mono-line-height);
  font-variant-numeric: tabular-nums;
}

.oi-tnum { font-variant-numeric: tabular-nums; }

/* Space Mono metric — the stat band numbers */
.oi-metric {
  font-family: var(--oi-font-family-display);
  font-size: var(--oi-type-style-metric-size);
  line-height: var(--oi-type-style-metric-line-height);
  font-weight: var(--oi-type-style-metric-weight);
  font-variant-numeric: tabular-nums;
}

/* --- dark context --------------------------------------------------------- */

/* Anything inside .oi-dark flips to the observation palette. Components that
   need dark-specific treatment hook this class in components.css. */
.oi-dark {
  background: var(--oi-surface-dark);
  color: var(--oi-text-inverse-secondary);
}
.oi-dark :is(.oi-display-xl, .oi-display-lg, .oi-display-md, .oi-h1, .oi-h2, .oi-h3, .oi-h4, .oi-label) { color: var(--oi-text-inverse); }
.oi-dark .oi-lead, .oi-dark .oi-muted, .oi-dark .oi-caption { color: var(--oi-text-inverse-secondary); }
.oi-dark .oi-eyebrow { color: var(--oi-text-inverse-tertiary); }
.oi-dark a { color: var(--oi-text-accent-on-dark); }

/* CMN component layer.
   Every value here comes from a token. If you need a number that is not a
   token, add it to the token source file instead of hard-coding it.
   Everything is square: radius appears only on the checkbox (2px) and the
   logo dot (pill). If a corner looks rounded, it is a bug. */

/* ==========================================================================
   Button
   ========================================================================== */

.oi-btn {
  --_h: var(--oi-size-control-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oi-space-2);
  height: var(--_h);
  padding-inline: var(--oi-space-6);
  border: 1px solid transparent;
  border-radius: var(--oi-radius-none);
  font-family: var(--oi-font-family-text);
  font-size: var(--oi-type-style-body-sm-size);
  font-weight: var(--oi-font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--oi-motion-duration-fast) var(--oi-motion-easing-standard),
    border-color var(--oi-motion-duration-fast) var(--oi-motion-easing-standard),
    box-shadow var(--oi-motion-duration-fast) var(--oi-motion-easing-standard),
    transform var(--oi-motion-duration-instant) var(--oi-motion-easing-standard);
}
.oi-btn:hover { text-decoration: none; }
.oi-btn:active { transform: translate(1px, 1px); }
.oi-btn[disabled],
.oi-btn[aria-disabled='true'] {
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.oi-btn--sm { --_h: var(--oi-size-control-sm); padding-inline: var(--oi-space-4); font-size: var(--oi-type-style-caption-size); }
.oi-btn--md { --_h: var(--oi-size-control-md); padding-inline: var(--oi-space-5); }
.oi-btn--block { display: flex; width: 100%; }

/* primary — the solid ink block: Request audit, Run check */
.oi-btn--primary {
  background: var(--oi-color-graphite-800);
  color: var(--oi-text-inverse);
}
.oi-btn--primary:hover { background: var(--oi-color-graphite-700); box-shadow: var(--oi-shadow-lift); }
.oi-btn--primary[disabled] { background: var(--oi-color-graphite-200); color: var(--oi-color-paper-0); }

/* paper — the light block that sits on black: Inspect workflow */
.oi-btn--paper {
  background: var(--oi-color-paper-50);
  color: var(--oi-text-primary);
}
.oi-btn--paper:hover { background: var(--oi-color-paper-0); box-shadow: var(--oi-shadow-lift-dark); }
/* .oi-dark colours links rust; buttons that happen to be <a> must not inherit that */
.oi-dark .oi-btn--paper { color: var(--oi-text-primary); }
.oi-dark .oi-btn--primary { color: var(--oi-text-inverse); }
.oi-dark .oi-btn--ghost { color: var(--oi-text-inverse); }

/* outline — 1px rule, no fill: View components, Open audit request.
   On paper the rule is ink; inside .oi-dark it flips to white. */
.oi-btn--outline {
  background: transparent;
  color: var(--oi-text-primary);
  border-color: var(--oi-border-strong);
}
.oi-btn--outline:hover { background: var(--oi-color-graphite-800); color: var(--oi-text-inverse); }
.oi-dark .oi-btn--outline {
  color: var(--oi-text-inverse);
  border-color: var(--oi-border-on-dark);
}
.oi-dark .oi-btn--outline:hover { background: var(--oi-color-paper-50); color: var(--oi-text-primary); }
.oi-btn--outline[disabled] {
  background: transparent;
  border-color: var(--oi-color-paper-300);
  color: var(--oi-text-disabled);
}
.oi-dark .oi-btn--outline[disabled] {
  border-color: var(--oi-border-on-dark-muted);
  color: var(--oi-text-inverse-tertiary);
}

/* quiet — text-only, keeps the grid quiet */
.oi-btn--ghost {
  background: transparent;
  color: var(--oi-text-primary);
}
.oi-btn--ghost:hover { background: var(--oi-color-paper-100); }

.oi-btn__icon { width: var(--oi-size-icon-sm); height: var(--oi-size-icon-sm); flex: none; }

/* ==========================================================================
   Logo mark — black dot, white spiral fan
   ========================================================================== */

.oi-mark {
  display: inline-grid;
  place-items: center;
  width: var(--oi-size-icon-lg);
  height: var(--oi-size-icon-lg);
  flex: none;
  border-radius: var(--oi-radius-pill);
  background: var(--oi-color-graphite-800);
  color: var(--oi-color-paper-0);
  overflow: hidden;
}
.oi-mark--lg { width: var(--oi-space-8); height: var(--oi-space-8); }
.oi-dark .oi-mark { background: var(--oi-color-paper-0); color: var(--oi-color-graphite-900); }

/* ==========================================================================
   Navigation — plain paper bar with a single bottom rule
   ========================================================================== */

.oi-nav {
  display: flex;
  align-items: center;
  gap: var(--oi-space-7);
  height: var(--oi-size-nav);
  background: var(--oi-surface-page);
  border-bottom: 1px solid var(--oi-border-grid);
}

.oi-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--oi-space-3);
  font-family: var(--oi-font-family-text);
  font-size: var(--oi-type-style-h4-size);
  font-weight: var(--oi-font-weight-bold);
  color: var(--oi-text-primary);
  text-decoration: none;
}
.oi-nav__brand:hover { text-decoration: none; }

.oi-nav__links {
  display: flex;
  align-items: center;
  gap: var(--oi-space-7);
  margin-left: auto;
  list-style: none;
  padding: 0;
  margin-block: 0;
}
.oi-nav__link {
  color: var(--oi-text-body);
  font-size: var(--oi-type-style-body-sm-size);
  font-weight: var(--oi-font-weight-semibold);
  text-decoration: none;
  padding: var(--oi-space-2) 0;
  position: relative;
}
.oi-nav__link:hover { text-decoration: none; color: var(--oi-text-primary); }
.oi-nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--oi-color-graphite-800);
}

/* ==========================================================================
   Surfaces — card, ruled card, panel, annotation
   ========================================================================== */

.oi-card {
  background: var(--oi-surface-card);
  border: 1px solid var(--oi-border-default);
  border-radius: var(--oi-radius-none);
  box-shadow: var(--oi-shadow-card);
  padding: var(--oi-space-6);
}
.oi-card--flush { padding: 0; overflow: hidden; }
.oi-card--tight { padding: var(--oi-space-4); }
.oi-card--roomy { padding: var(--oi-space-8); }
/* float cards sit on the black panel: no border, the white edge is enough */
.oi-card--float { border-color: transparent; box-shadow: var(--oi-shadow-none); }

.oi-card--interactive {
  cursor: pointer;
  transition:
    transform var(--oi-motion-duration-fast) var(--oi-motion-easing-standard),
    box-shadow var(--oi-motion-duration-fast) var(--oi-motion-easing-standard);
}
.oi-card--interactive:hover { transform: translate(-2px, -2px); box-shadow: var(--oi-shadow-lift); }

.oi-card__head {
  display: flex;
  align-items: center;
  gap: var(--oi-space-3);
  margin-bottom: var(--oi-space-2);
}
.oi-card__title {
  font-family: var(--oi-font-family-text);
  font-size: var(--oi-type-style-h3-size);
  font-weight: var(--oi-type-style-h3-weight);
  letter-spacing: var(--oi-type-style-h3-tracking);
  color: var(--oi-text-primary);
  margin: 0;
}
.oi-card__body { color: var(--oi-text-secondary); font-size: var(--oi-type-style-body-size); line-height: var(--oi-type-style-body-line-height); margin: 0; }

/* line-drawn icon in front of a card title */
.oi-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--oi-size-icon-lg);
  height: var(--oi-size-icon-lg);
  flex: none;
  color: var(--oi-text-primary);
}

/* ruled card — the body copy sits on ruled lines, like the paper it names */
.oi-ruled {
  background: var(--oi-surface-card);
  border: 1px solid var(--oi-border-default);
  padding: var(--oi-space-5) var(--oi-space-5) var(--oi-space-6);
}
.oi-ruled .oi-card__body {
  background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--oi-border-grid) calc(100% - 1px));
  background-size: 100% calc(var(--oi-type-style-body-size) * var(--oi-type-style-body-line-height));
  background-origin: content-box;
}

/* the black observation panel */
.oi-panel {
  position: relative;
  background: var(--oi-surface-panel);
  color: var(--oi-text-inverse);
  border-radius: var(--oi-radius-none);
  overflow: hidden;
}
/* faint half-unit grid over the black, as in the shot's dot-matrix regions */
.oi-panel--grid {
  background-image:
    linear-gradient(to right, var(--oi-border-on-dark-faint) 1px, transparent 1px),
    linear-gradient(to bottom, var(--oi-border-on-dark-faint) 1px, transparent 1px);
  background-size: calc(var(--oi-size-grid-unit) / 2) calc(var(--oi-size-grid-unit) / 2);
}
.oi-panel__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* translucent caption pinned over panel art */
.oi-annotation {
  background: var(--oi-surface-annotation);
  border: 1px solid var(--oi-border-on-dark-faint);
  color: var(--oi-text-inverse-secondary);
  padding: var(--oi-space-4);
  font-size: var(--oi-type-style-body-sm-size);
  line-height: var(--oi-type-style-body-sm-line-height);
  max-width: 28ch;
}

/* ==========================================================================
   Stat band — the metrics strip along the panel's bottom edge
   ========================================================================== */

.oi-statband {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--oi-surface-panel);
  color: var(--oi-text-inverse);
}
.oi-statband__cell {
  padding: var(--oi-space-5) var(--oi-space-6);
  border-left: 1px solid var(--oi-border-on-dark-faint);
}
.oi-statband__cell:first-child { border-left: 0; }
.oi-statband__value {
  font-family: var(--oi-font-family-display);
  font-size: var(--oi-type-style-metric-size);
  line-height: var(--oi-type-style-metric-line-height);
  font-weight: var(--oi-type-style-metric-weight);
  font-variant-numeric: tabular-nums;
}
.oi-statband__label {
  margin-top: var(--oi-space-1);
  font-size: var(--oi-type-style-caption-size);
  color: var(--oi-text-inverse-tertiary);
}

/* ==========================================================================
   Logo strip — bordered cells of client names
   ========================================================================== */

.oi-logostrip {
  display: flex;
  background: var(--oi-surface-page);
  border-block: 1px solid var(--oi-border-grid);
}
.oi-logostrip__cell {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: var(--oi-size-nav);
  padding: var(--oi-space-4);
  border-left: 1px solid var(--oi-border-grid);
  font-size: var(--oi-type-style-h4-size);
  font-weight: var(--oi-font-weight-semibold);
  color: var(--oi-text-secondary);
  white-space: nowrap;
}
.oi-logostrip__cell:first-child { border-left: 0; }

/* ==========================================================================
   Tabs — Generate / Validate / Export
   ========================================================================== */

.oi-tabs {
  display: flex;
  gap: var(--oi-space-2);
  border-bottom: 1px solid var(--oi-border-default);
}
.oi-tabs__tab {
  height: var(--oi-size-control-md);
  padding-inline: var(--oi-space-5);
  margin-bottom: -1px;
  border: 1px solid var(--oi-border-default);
  border-bottom-color: transparent;
  background: var(--oi-surface-card);
  color: var(--oi-text-body);
  font-size: var(--oi-type-style-body-sm-size);
  font-weight: var(--oi-font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--oi-motion-duration-fast) var(--oi-motion-easing-standard);
}
.oi-tabs__tab:hover { background: var(--oi-color-paper-100); }
.oi-tabs__tab[aria-selected='true'] {
  background: var(--oi-color-graphite-800);
  border-color: var(--oi-color-graphite-800);
  color: var(--oi-text-inverse);
}

/* ==========================================================================
   Fields
   ========================================================================== */

.oi-field { display: flex; flex-direction: column; gap: var(--oi-space-2); }
.oi-field__label {
  font-size: var(--oi-type-style-label-size);
  font-weight: var(--oi-type-style-label-weight);
  color: var(--oi-text-primary);
}
.oi-input {
  height: var(--oi-size-control-lg);
  padding-inline: var(--oi-space-4);
  border: 1px solid var(--oi-border-default);
  border-radius: var(--oi-radius-none);
  background: var(--oi-surface-card);
  color: var(--oi-text-primary);
  font-size: var(--oi-type-style-body-size);
  transition: border-color var(--oi-motion-duration-fast) var(--oi-motion-easing-standard);
}
.oi-input::placeholder { color: var(--oi-text-secondary); }
.oi-input:hover { border-color: var(--oi-color-graphite-400); }
.oi-input:focus { outline: none; border-color: var(--oi-color-graphite-800); box-shadow: var(--oi-shadow-focus); }
.oi-input[aria-invalid='true'] { border-color: var(--oi-color-rust-600); }

/* input and button fused on one row: Dataset name + Run check */
.oi-inputrow { display: flex; gap: var(--oi-space-3); }
.oi-inputrow .oi-input { flex: 1; min-width: 0; }

/* square checkbox — ink block with a white check */
.oi-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--oi-space-3);
  font-size: var(--oi-type-style-body-size);
  color: var(--oi-text-body);
  cursor: pointer;
  user-select: none;
}
.oi-checkbox input {
  appearance: none;
  width: var(--oi-size-icon-md);
  height: var(--oi-size-icon-md);
  flex: none;
  margin: 0;
  border: 1px solid var(--oi-border-default);
  border-radius: var(--oi-radius-xs);
  background: var(--oi-surface-card);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background-color var(--oi-motion-duration-instant) var(--oi-motion-easing-step);
}
.oi-checkbox input:checked {
  background: var(--oi-color-graphite-800);
  border-color: var(--oi-color-graphite-800);
}
.oi-checkbox input:checked::after {
  content: '';
  width: 10px;
  height: 6px;
  margin-top: -2px;
  border-left: 2px solid var(--oi-color-paper-0);
  border-bottom: 2px solid var(--oi-color-paper-0);
  transform: rotate(-45deg);
}
.oi-checkbox input:focus-visible { outline: none; box-shadow: var(--oi-shadow-focus); }

/* ==========================================================================
   Table — the run record
   ========================================================================== */

.oi-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--oi-border-default);
  font-size: var(--oi-type-style-body-sm-size);
  background: var(--oi-surface-card);
}
.oi-table th {
  padding: var(--oi-space-4) var(--oi-space-5);
  text-align: left;
  font-size: var(--oi-type-style-body-sm-size);
  font-weight: var(--oi-font-weight-semibold);
  color: var(--oi-text-primary);
  border-bottom: 1px solid var(--oi-border-default);
}
.oi-table td {
  padding: var(--oi-space-4) var(--oi-space-5);
  color: var(--oi-text-body);
  border-bottom: 1px solid var(--oi-border-grid);
}
.oi-table tr:last-child td { border-bottom: 0; }
.oi-table__mono {
  font-family: var(--oi-font-family-mono);
  font-size: var(--oi-type-style-mono-size);
  font-variant-numeric: tabular-nums;
}

/* status words in the State column — text, never a pill */
.oi-status { font-weight: var(--oi-font-weight-regular); color: var(--oi-text-body); }
.oi-status--muted { color: var(--oi-text-secondary); }
.oi-status--alert { color: var(--oi-text-accent); }
a.oi-status--alert:hover { color: var(--oi-color-rust-500); }

/* ==========================================================================
   KV proof rows — schema.integrity 99.6%
   ========================================================================== */

.oi-kv { display: grid; gap: var(--oi-space-3); }
.oi-kv__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oi-space-6);
  background: var(--oi-surface-card);
  padding: var(--oi-space-4) var(--oi-space-5);
}
.oi-kv__key {
  font-family: var(--oi-font-family-mono);
  font-size: var(--oi-type-style-mono-size);
  color: var(--oi-text-body);
}
.oi-kv__value {
  font-family: var(--oi-font-family-display);
  font-size: var(--oi-type-style-kv-size);
  line-height: var(--oi-type-style-kv-line-height);
  font-weight: var(--oi-type-style-kv-weight);
  color: var(--oi-text-primary);
  font-variant-numeric: tabular-nums;
}
.oi-kv__row--alert .oi-kv__value { color: var(--oi-text-accent); }

/* ==========================================================================
   Notice — the one rust sentence
   ========================================================================== */

.oi-notice {
  color: var(--oi-text-accent);
  font-size: var(--oi-type-style-body-sm-size);
  line-height: var(--oi-type-style-body-sm-line-height);
  margin: 0;
}
.oi-dark .oi-notice { color: var(--oi-text-accent-on-dark); }

/* ==========================================================================
   Badge — small square mono tag
   ========================================================================== */

.oi-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--oi-space-1);
  height: var(--oi-size-icon-lg);
  padding-inline: var(--oi-space-2);
  border: 1px solid var(--oi-border-default);
  border-radius: var(--oi-radius-none);
  background: var(--oi-surface-card);
  font-family: var(--oi-font-family-mono);
  font-size: var(--oi-type-style-eyebrow-size);
  font-weight: var(--oi-font-weight-medium);
  letter-spacing: 0.04em;
  color: var(--oi-text-body);
  white-space: nowrap;
}
.oi-badge--solid { background: var(--oi-color-graphite-800); border-color: var(--oi-color-graphite-800); color: var(--oi-text-inverse); }
.oi-badge--alert { border-color: var(--oi-color-rust-600); color: var(--oi-text-accent); }
.oi-badge--sage  { background: var(--oi-color-sage-300); border-color: var(--oi-color-sage-300); color: var(--oi-color-graphite-800); }

/* ==========================================================================
   Rules
   ========================================================================== */

.oi-rule { border: 0; border-top: 1px solid var(--oi-border-grid); margin: var(--oi-space-5) 0; }
.oi-rule--strong { border-top-color: var(--oi-color-graphite-800); }
.oi-dark .oi-rule { border-top-color: var(--oi-border-on-dark-faint); }

/* ==========================================================================
   Grid — 12 columns on the ruled paper
   ========================================================================== */

.oi-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--oi-space-5);
}
.oi-grid > .oi-span-3  { grid-column: span 3; }
.oi-grid > .oi-span-4  { grid-column: span 4; }
.oi-grid > .oi-span-5  { grid-column: span 5; }
.oi-grid > .oi-span-6  { grid-column: span 6; }
.oi-grid > .oi-span-7  { grid-column: span 7; }
.oi-grid > .oi-span-8  { grid-column: span 8; }
.oi-grid > .oi-span-12 { grid-column: span 12; }

@media (max-width: 900px) {
  .oi-grid > [class*='oi-span-'] { grid-column: span 12; }
}

/* ==========================================================================
   Sidebar — the console rail
   ========================================================================== */

.oi-sidebar {
  display: flex;
  flex-direction: column;
  width: var(--oi-size-sidebar);
  background: var(--oi-surface-dark);
  color: var(--oi-text-inverse-secondary);
}
.oi-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--oi-space-3);
  height: var(--oi-size-nav);
  padding-inline: var(--oi-space-5);
  border-bottom: 1px solid var(--oi-border-on-dark-faint);
  color: var(--oi-text-inverse);
  font-weight: var(--oi-font-weight-bold);
  font-size: var(--oi-type-style-h4-size);
  text-decoration: none;
}
.oi-sidebar__brand:hover { text-decoration: none; }
.oi-sidebar__section {
  padding: var(--oi-space-6) var(--oi-space-5) var(--oi-space-2);
  font-family: var(--oi-font-family-mono);
  font-size: var(--oi-type-style-eyebrow-size);
  font-weight: var(--oi-type-style-eyebrow-weight);
  letter-spacing: var(--oi-type-style-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--oi-text-inverse-tertiary);
}
.oi-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--oi-space-3);
  padding: var(--oi-space-3) var(--oi-space-5);
  border-left: 2px solid transparent;
  font-family: var(--oi-font-family-mono);
  font-size: var(--oi-type-style-mono-size);
  color: var(--oi-text-inverse-secondary);
  text-decoration: none;
  transition: background-color var(--oi-motion-duration-instant) var(--oi-motion-easing-step);
}
.oi-sidebar__item:hover { text-decoration: none; background: var(--oi-color-graphite-700); color: var(--oi-text-inverse); }
.oi-sidebar__item[aria-current='page'] {
  background: var(--oi-color-graphite-700);
  border-left-color: var(--oi-color-paper-0);
  color: var(--oi-text-inverse);
}
.oi-sidebar__foot {
  margin-top: auto;
  padding: var(--oi-space-4) var(--oi-space-5);
  border-top: 1px solid var(--oi-border-on-dark-faint);
  font-family: var(--oi-font-family-mono);
  font-size: var(--oi-type-style-eyebrow-size);
  color: var(--oi-text-inverse-tertiary);
}

/* ==========================================================================
   Tile — the dashboard's hero numbers
   ========================================================================== */

.oi-tile {
  position: relative;
  overflow: hidden;
  background: var(--oi-surface-card);
  border: 1px solid var(--oi-border-default);
  padding: var(--oi-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--oi-space-2);
}
.oi-tile__label { font-size: var(--oi-type-style-caption-size); color: var(--oi-text-secondary); }
.oi-tile__value {
  font-family: var(--oi-font-family-display);
  font-size: var(--oi-type-style-metric-size);
  line-height: var(--oi-type-style-metric-line-height);
  font-weight: var(--oi-type-style-metric-weight);
  color: var(--oi-text-primary);
  font-variant-numeric: tabular-nums;
}
.oi-tile--dark {
  background: var(--oi-surface-panel);
  border-color: var(--oi-surface-panel);
}
.oi-tile--dark .oi-tile__label { color: var(--oi-text-inverse-tertiary); }
.oi-tile--dark .oi-tile__value { color: var(--oi-text-inverse); }
.oi-tile__art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.oi-tile > :not(.oi-tile__art) { position: relative; }

/* movement since the last run — a word and a glyph, never colour alone */
.oi-delta {
  font-family: var(--oi-font-family-mono);
  font-size: var(--oi-type-style-eyebrow-size);
  color: var(--oi-text-secondary);
}
.oi-delta--alert { color: var(--oi-text-accent); }
.oi-tile--dark .oi-delta { color: var(--oi-text-inverse-tertiary); }
.oi-tile--dark .oi-delta--alert { color: var(--oi-text-accent-on-dark); }

/* ==========================================================================
   Meter — progress as square segments, filled left to right
   ========================================================================== */

.oi-meter { display: inline-flex; gap: var(--oi-space-1); }
.oi-meter__seg {
  width: var(--oi-space-3);
  height: var(--oi-space-3);
  background: var(--oi-color-paper-100);
  border: 1px solid var(--oi-border-default);
}
.oi-meter__seg--on { background: var(--oi-color-graphite-800); border-color: var(--oi-color-graphite-800); }
.oi-meter__seg--alert { background: var(--oi-color-rust-600); border-color: var(--oi-color-rust-600); }

/* ==========================================================================
   Log — the operational record, one mono line per event
   ========================================================================== */

.oi-log { display: flex; flex-direction: column; }
.oi-log__row {
  display: flex;
  align-items: baseline;
  gap: var(--oi-space-4);
  padding-block: var(--oi-space-3);
  border-bottom: 1px solid var(--oi-border-grid);
  font-family: var(--oi-font-family-mono);
  font-size: var(--oi-type-style-mono-size);
  color: var(--oi-text-body);
}
.oi-log__row:last-child { border-bottom: 0; }
.oi-log__time { color: var(--oi-text-secondary); flex: none; font-variant-numeric: tabular-nums; }
.oi-log__msg { flex: 1; min-width: 0; }
.oi-log__state { flex: none; }

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