/* 2026-10-09 22:20 | y6y.io drop_zone v1.07 | themes: neobrutalist (default) and terminalism
   Components are written once against semantic tokens (--ui-*). Each theme only sets token values:
   neobrutalist = cream page, white panels, thick black outlines, hard offset shadows, square corners, colour blocks.
   terminalism  = dark grey page, slightly lighter panels, thin grey outlines, rounded corners, no shadows,
                  pale text with a soft white glow, monochrome controls, lowercase interface labels.
   <html data-theme="terminalism"> selects terminalism (set by js/theme_boot.js before first paint).
   Reference values: design/theme_tokens.json */

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains_mono_variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- neobrutalist (default) ---------- */
:root {
  color-scheme: light;

  /* base colour */
  --ui-bg: #FFF0DC;
  --ui-surface: #FFFFFF;
  --ui-tint: #FFF7EC;
  --ui-ink: #111111;
  --ui-muted: #4A4A4A;
  --ui-line-color: #111111;

  /* roles */
  --ui-primary-bg: #E8601C;
  --ui-primary-ink: #111111;
  --ui-primary-line: #111111;
  --ui-accent-bg: #FFD23F;
  --ui-accent-ink: #111111;
  --ui-danger-bg: #7A1F2E;
  --ui-danger-ink: #FFFFFF;
  --ui-danger-line: #111111;
  --ui-done: #1F3A6B;
  --ui-active: #E8601C;
  --ui-failed: #7A1F2E;
  --ui-invert-bg: #111111;
  --ui-invert-ink: #FFFFFF;
  --ui-highlight-bg: #FFD23F;
  --ui-highlight-ink: #111111;
  --ui-thumb-bg: #1F3A6B;
  --ui-thumb-ink: #FFFFFF;
  --ui-brand-bg: #E8601C;
  --ui-brand-ink: #111111;
  --ui-focus: #E8601C;
  --ui-badge-ink: #111111;     /* text on the active-colour badge, dark in both themes */
  --ui-accent: var(--ui-active);   /* progress fill; overridden per state */

  /* tags */
  --ui-tag-bg: #111111;
  --ui-tag-ink: #FFFFFF;
  --ui-tag-outline-bg: #FFFFFF;
  --ui-tag-outline-ink: #111111;
  --ui-tag-yellow-bg: #FFD23F;
  --ui-tag-yellow-ink: #111111;
  --ui-tag-orange-bg: #E8601C;
  --ui-tag-orange-ink: #111111;
  --ui-tag-maroon-bg: #7A1F2E;
  --ui-tag-maroon-ink: #FFFFFF;

  /* add button (small dial) */
  --ui-adder-ring: #FFD23F;
  --ui-adder-hub: #E8601C;
  --ui-adder-ink: #111111;

  /* switch */
  --ui-switch-track-on: #E8601C;
  --ui-switch-knob: #111111;
  --ui-switch-knob-on: #111111;

  /* overlays */
  --ui-scrim: rgba(17, 17, 17, 0.45);
  --ui-selection: rgba(255, 210, 63, 0.6);
  --ui-drop-overlay: rgba(255, 210, 63, 0.92);

  /* line, depth, shape */
  --ui-line: 2px solid var(--ui-line-color);
  --ui-line-thick: 3px solid var(--ui-line-color);
  --ui-line-dashed: 2px dashed var(--ui-line-color);
  --ui-shadow: 6px 6px 0 #111111;
  --ui-shadow-sm: 3px 3px 0 #111111;
  --ui-press: translate(3px, 3px);
  --ui-r-panel: 0;
  --ui-r-control: 0;
  --ui-r-tag: 0;

  /* text */
  --ui-glow: none;
  --ui-chrome-case: none;      /* text-transform for interface labels (never user content) */
  --ui-heading-bg: #FFD23F;
  --ui-heading-line: 2px solid #111111;
  --ui-heading-pad: 2px 8px;
  --ui-strong-weight: 800;
  --ui-content-weight: 700;    /* item text and file names in the list */

  /* type */
  --ui-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ui-fs-display: 32px;
  --ui-fs-title: 20px;
  --ui-fs-body: 14px;
  --ui-fs-label: 13px;
  --ui-fs-meta: 11px;

  /* size */
  --ui-control: 40px;
  --ui-control-sm: 34px;
}

/* ---------- terminalism ---------- */
:root[data-theme="terminalism"] {
  color-scheme: dark;

  --ui-bg: #1C1E22;
  --ui-surface: #23252A;
  --ui-tint: #1C1E22;
  --ui-ink: #ECEEF1;
  --ui-muted: #8B9099;
  --ui-line-color: #3A3D44;

  --ui-primary-bg: transparent;
  --ui-primary-ink: #FFFFFF;
  --ui-primary-line: #D8DCE1;
  --ui-accent-bg: transparent;
  --ui-accent-ink: #ECEEF1;
  --ui-danger-bg: transparent;
  --ui-danger-ink: #FF7A85;
  --ui-danger-line: rgba(255, 122, 133, 0.55);
  --ui-done: #DCE2E8;
  --ui-active: #FFC56B;
  --ui-failed: #FF6B7A;
  --ui-invert-bg: #34373E;
  --ui-invert-ink: #FFFFFF;
  --ui-highlight-bg: #2D3036;
  --ui-highlight-ink: #FFFFFF;
  --ui-thumb-bg: #2D3036;
  --ui-thumb-ink: #ECEEF1;
  --ui-brand-bg: transparent;
  --ui-brand-ink: #ECEEF1;
  --ui-focus: #FFFFFF;

  --ui-tag-bg: #2D3036;
  --ui-tag-ink: #ECEEF1;
  --ui-tag-outline-bg: transparent;
  --ui-tag-outline-ink: #A9AEB6;
  --ui-tag-yellow-bg: transparent;
  --ui-tag-yellow-ink: #FFFFFF;
  --ui-tag-orange-bg: transparent;
  --ui-tag-orange-ink: #FFC56B;
  --ui-tag-maroon-bg: transparent;
  --ui-tag-maroon-ink: #FF7A85;

  --ui-adder-ring: transparent;
  --ui-adder-hub: #2D3036;
  --ui-adder-ink: #FFFFFF;

  --ui-switch-track-on: #34373E;
  --ui-switch-knob: #6B7079;
  --ui-switch-knob-on: #FFFFFF;

  --ui-scrim: rgba(0, 0, 0, 0.6);
  --ui-selection: rgba(255, 255, 255, 0.22);
  --ui-drop-overlay: rgba(28, 30, 34, 0.94);

  --ui-line: 1px solid var(--ui-line-color);
  --ui-line-thick: 1px solid var(--ui-line-color);
  --ui-line-dashed: 1px dashed #6B7079;
  --ui-shadow: none;
  --ui-shadow-sm: none;
  --ui-press: translateY(1px);
  --ui-r-panel: 20px;
  --ui-r-control: 12px;
  --ui-r-tag: 6px;

  --ui-glow: 0 0 8px rgba(255, 255, 255, 0.35);
  --ui-chrome-case: lowercase;
  --ui-heading-bg: transparent;
  --ui-heading-line: 0;
  --ui-heading-pad: 0;
  --ui-strong-weight: 600;
  --ui-content-weight: 500;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ui-bg);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-size: var(--ui-fs-body);
  line-height: 1.45;
  text-shadow: var(--ui-glow);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font-family: inherit; color: inherit; font-size: inherit; text-shadow: inherit; }
a { color: var(--ui-ink); }
:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
::selection { background: var(--ui-selection); }

/* ---------- text ---------- */
.ui-display { font-size: var(--ui-fs-display); font-weight: var(--ui-strong-weight); letter-spacing: -0.03em; line-height: 1.1; margin: 0; }
.ui-title { font-size: var(--ui-fs-title); font-weight: var(--ui-strong-weight); letter-spacing: -0.02em; margin: 0; text-transform: var(--ui-chrome-case); }
.ui-label { font-size: var(--ui-fs-label); font-weight: 600; }
.ui-meta { font-size: var(--ui-fs-meta); color: var(--ui-muted); }
.ui-readout, .ui-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 6px;
  font-size: var(--ui-fs-meta); font-weight: 700; line-height: 18px; white-space: nowrap;
  background: var(--ui-tag-bg); color: var(--ui-tag-ink); border: var(--ui-line); border-radius: var(--ui-r-tag);
}
.ui-tag--outline { background: var(--ui-tag-outline-bg); color: var(--ui-tag-outline-ink); }
.ui-tag--yellow { background: var(--ui-tag-yellow-bg); color: var(--ui-tag-yellow-ink); }
.ui-tag--orange { background: var(--ui-tag-orange-bg); color: var(--ui-tag-orange-ink); }
.ui-tag--maroon { background: var(--ui-tag-maroon-bg); color: var(--ui-tag-maroon-ink); }

/* ---------- surfaces ---------- */
.ui-card { background: var(--ui-surface); border: var(--ui-line-thick); border-radius: var(--ui-r-panel); box-shadow: var(--ui-shadow); padding: 20px; }
.ui-well { background: var(--ui-surface); border: var(--ui-line-thick); border-radius: var(--ui-r-panel); box-shadow: var(--ui-shadow); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ui-raised-sm { background: var(--ui-surface); border: var(--ui-line); border-radius: var(--ui-r-control); box-shadow: var(--ui-shadow-sm); }
.ui-pressed { background: var(--ui-tint); border: var(--ui-line); border-radius: var(--ui-r-control); }

/* ---------- buttons ---------- */
.ui-btn {
  border: var(--ui-line);
  min-height: var(--ui-control);
  padding: 8px 16px;
  border-radius: var(--ui-r-control);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-size: var(--ui-fs-label);
  font-weight: 700;
  text-transform: var(--ui-chrome-case);
  text-decoration: none;
  box-shadow: var(--ui-shadow-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: transform 80ms ease, box-shadow 80ms ease, border-color 80ms ease;
}
.ui-btn:hover { background: var(--ui-tint); }
.ui-btn:active, .ui-btn[aria-pressed="true"] { transform: var(--ui-press); box-shadow: none; }
.ui-btn[aria-pressed="true"] { background: var(--ui-highlight-bg); color: var(--ui-highlight-ink); }
.ui-btn:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: var(--ui-shadow-sm); }
.ui-btn--sm { min-height: var(--ui-control-sm); padding: 5px 12px; font-size: 12px; }
.ui-btn--primary, .ui-btn--primary:hover { background: var(--ui-primary-bg); color: var(--ui-primary-ink); border-color: var(--ui-primary-line); }
.ui-btn--accent, .ui-btn--accent:hover { background: var(--ui-accent-bg); color: var(--ui-accent-ink); }
.ui-btn--danger, .ui-btn--danger:hover { background: var(--ui-danger-bg); color: var(--ui-danger-ink); border-color: var(--ui-danger-line); }

.ui-knob {
  width: var(--ui-control); height: var(--ui-control); padding: 0;
  border: var(--ui-line); border-radius: var(--ui-r-control);
  background: var(--ui-surface); color: var(--ui-ink);
  box-shadow: var(--ui-shadow-sm);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; flex: none;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.ui-knob:active, .ui-knob[aria-pressed="true"] { transform: var(--ui-press); box-shadow: none; }
.ui-knob--accent { background: var(--ui-accent-bg); color: var(--ui-accent-ink); }
.ui-knob svg { filter: drop-shadow(var(--ui-glow)); }

/* ---------- fields ---------- */
.ui-field {
  width: 100%; min-height: var(--ui-control);
  padding: 8px 12px;
  border: var(--ui-line); border-radius: var(--ui-r-control); outline: none;
  background: var(--ui-tint);
  color: var(--ui-ink);
}
.ui-field::placeholder { color: var(--ui-muted); text-shadow: none; }
.ui-field:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 0; background: var(--ui-surface); }
select.ui-field {
  appearance: none;
  padding-right: 34px;
  background-color: var(--ui-surface);
  background-image: linear-gradient(45deg, transparent 50%, var(--ui-ink) 50%), linear-gradient(135deg, var(--ui-ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  font-weight: 700;
  cursor: pointer;
}
select.ui-field option { background: var(--ui-surface); color: var(--ui-ink); }

/* ---------- segmented control ---------- */
.ui-segment { display: flex; border: var(--ui-line); border-radius: var(--ui-r-control); overflow: hidden; background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); }
.ui-segment > button {
  flex: 1 0 auto; min-height: var(--ui-control-sm); padding: 0 12px; border: 0; border-left: var(--ui-line); border-radius: 0;
  background: transparent; color: var(--ui-ink); font-size: var(--ui-fs-label); font-weight: 600; cursor: pointer; white-space: nowrap;
  text-transform: var(--ui-chrome-case);
}
.ui-segment > button:first-child { border-left: 0; }
.ui-segment > button:hover { background: var(--ui-tint); }
.ui-segment > button[aria-pressed="true"] { background: var(--ui-invert-bg); color: var(--ui-invert-ink); font-weight: 800; }

/* ---------- switch ---------- */
.ui-switch {
  width: 52px; height: 28px; padding: 3px; border: var(--ui-line); border-radius: var(--ui-r-control); flex: none;
  background: var(--ui-surface); box-shadow: var(--ui-shadow-sm);
  display: flex; justify-content: flex-start; cursor: pointer;
}
.ui-switch::after { content: ""; width: 18px; height: 18px; border-radius: calc(var(--ui-r-control) - 4px); background: var(--ui-switch-knob); }
.ui-switch[aria-checked="true"] { justify-content: flex-end; background: var(--ui-switch-track-on); }
.ui-switch[aria-checked="true"]::after { background: var(--ui-switch-knob-on); box-shadow: var(--ui-glow); }
.ui-switch:disabled { opacity: 0.45; cursor: default; }

/* ---------- progress ---------- */
.ui-progress { height: 12px; border: var(--ui-line); border-radius: var(--ui-r-tag); overflow: hidden; background: var(--ui-surface); position: relative; }
.ui-progress__fill { height: 100%; width: 0; background: var(--ui-accent); transition: width 200ms ease; }

/* ---------- status dots ---------- */
.ui-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; border: var(--ui-line); background: var(--ui-surface); }
.ui-dot--done { background: var(--ui-done); }
.ui-dot--active { background: var(--ui-active); }
.ui-dot--failed { background: var(--ui-failed); }
.ui-dot--idle { background: var(--ui-surface); }

/* ---------- rows ---------- */
.ui-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--ui-tint); border: var(--ui-line); border-radius: var(--ui-r-control); }
.ui-row__name { font-weight: var(--ui-content-weight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- utilities ---------- */
.ui-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}