/* =============================================================================
   convert — stylesheet
   -----------------------------------------------------------------------------
   Design rules encoded here, so they are mechanical rather than a matter of taste:

   · Two font stacks. The interface is sans-serif; monospace is kept only where
     character-by-character accuracy is the point — file names, format ids, hashes
     and preformatted output. In `l1.pdf` and `I1.pdf` the glyphs differ, and telling
     them apart is a correctness property, not a style choice.
   · One accent colour, three neutral surface layers, and elevation earned by state
     rather than decoration. The single card on the page is the work area; the two
     rails are service zones separated by a hairline.
   · No gradients, no glass, no emoji, no web fonts, no inline styles. Everything
     the page needs is served from this origin, which is what lets the CSP stay at
     default-src 'self'.
   · Motion never exceeds 120 ms and only touches colour, opacity and a 4 px shift.
   ========================================================================== */

/* ------------------------------------------------------------------- tokens */

:root {
  /* Type. The interface stack is sans-serif; the content stack is monospace. */
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
             "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans",
             Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono",
               Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;

  --t-2xs: 0.6875rem;  /* 11px — eyebrows, badges, machine ids */
  --t-xs:  0.75rem;    /* 12px — field labels, meta */
  --t-sm:  0.8125rem;  /* 13px — monospace content, table rows */
  --t-base:0.875rem;   /* 14px — body, buttons, status */
  --t-md:  1rem;       /* 16px — region headings */
  --t-lg:  1.25rem;    /* 20px — result heading, wordmark */
  --t-xl:  1.75rem;    /* 28px — the single display element: the operation name */

  /* Spacing: 4px base */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s8: 3rem;

  --r-1: 4px;   /* controls */
  --r-2: 6px;   /* rows, preview */
  --r-3: 10px;  /* cards, dropzone, palette */

  --dur-fast: 80ms;
  --dur-base: 100ms;
  --dur-in:   120ms;
  --ease: cubic-bezier(.2, .6, .2, 1);

  --tap-min: 44px;          /* minimum touch target */
  --preview-max: 22rem;
  --row-pad: 10px;
  --card-pad: var(--s5);
}

/* Dark is the default. Declared once for "system" and once for the explicit choice, so no
   script has to inject a style and the CSP stays free of inline exceptions. */
:root,
:root[data-theme="system"],
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:           #0a0a0b;
  --surface:      #111113;
  --surface-2:    #17171a;
  --surface-3:    #1e1e21;

  --line:         #232327;   /* decorative separators only */
  --line-soft:    #34343a;   /* card outlines, recognised by their fill */
  --control-line: #6b6b76;   /* outlines of interactive controls: >= 3:1 */

  --text:       #ededf0;
  --text-muted: #9c9ca6;
  --text-faint: #7c7c86;

  --accent:     #ff5a1f;
  --accent-hi:  #ff7a45;
  --accent-dim: #7a2f11;
  --on-accent:  #140800;

  --ok:   #3fb950;
  --warn: #d29922;
  --err:  #f85149;

  --edge:  inset 0 1px 0 0 rgb(255 255 255 / .045);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .45), 0 12px 32px -16px rgb(0 0 0 / .55);
  --shadow-sticky: 0 -8px 16px -12px rgb(0 0 0 / .55);
  --halo: 0 0 0 4px rgb(0 0 0 / .55);
}

:root[data-theme="system"] {
  /* Overridden wholesale below when the OS prefers light. */
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --bg:           #f7f7f8;
    --surface:      #ffffff;
    --surface-2:    #f1f1f3;
    --surface-3:    #ffffff;
    --line:         #e4e4e8;
    --line-soft:    #d9d9df;
    --control-line: #82828c;
    --text:       #141416;
    --text-muted: #55555f;
    --text-faint: #74747f;
    --accent:     #d63a06;
    --accent-hi:  #b32d02;
    --accent-dim: #f3c4ae;
    --on-accent:  #ffffff;
    --ok:   #1a7f37;
    --warn: #9a6700;
    --err:  #cf222e;
    --edge:  inset 0 1px 0 0 rgb(255 255 255 / 1);
    --shadow-1: 0 1px 2px rgb(16 16 20 / .06), 0 10px 28px -14px rgb(16 16 20 / .16);
    --shadow-sticky: 0 -8px 16px -14px rgb(16 16 20 / .12);
    --halo: 0 0 0 4px rgb(255 255 255 / .9);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:           #f7f7f8;
  --surface:      #ffffff;
  --surface-2:    #f1f1f3;
  --surface-3:    #ffffff;
  --line:         #e4e4e8;
  --line-soft:    #d9d9df;
  --control-line: #82828c;
  --text:       #141416;
  --text-muted: #55555f;
  --text-faint: #74747f;
  --accent:     #d63a06;
  --accent-hi:  #b32d02;
  --accent-dim: #f3c4ae;
  --on-accent:  #ffffff;
  --ok:   #1a7f37;
  --warn: #9a6700;
  --err:  #cf222e;
  --edge:  inset 0 1px 0 0 rgb(255 255 255 / 1);
  --shadow-1: 0 1px 2px rgb(16 16 20 / .06), 0 10px 28px -14px rgb(16 16 20 / .16);
  --shadow-sticky: 0 -8px 16px -14px rgb(16 16 20 / .12);
  --halo: 0 0 0 4px rgb(255 255 255 / .9);
}

/* Density touches padding, row size and preview height — nothing else. */
:root[data-density="compact"] {
  --row-pad: 6px;
  --card-pad: var(--s4);
  --preview-max: 16rem;
}

/* -------------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
h1, h2, p, ul, ol, dl, dd, pre { margin: 0; padding: 0; }
li { list-style: none; }
img, svg { display: block; max-width: 100%; }

*:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 2px;
  /* A dark halo keeps the ring readable both on an accent-filled button and on the
     page background. */
  box-shadow: var(--halo);
  border-radius: inherit;
}
:focus:not(:focus-visible) { outline: none; box-shadow: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s2); top: -4rem; z-index: 10;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-1);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--t-sm); text-decoration: none;
}
.skip-link:focus { top: var(--s2); }

/* Eyebrow: the one place uppercase survives, because it marks a machine-level label. */
.eyebrow {
  margin: 0 0 var(--s2);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

kbd {
  display: inline-block;
  padding: 0 5px;
  border: var(--line-w, 1px) solid var(--control-line);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------- topbar */

.topbar { border-bottom: 1px solid var(--line); background: var(--surface); }
.topbar__inner {
  max-width: 1240px; margin-inline: auto;
  padding: var(--s3) var(--s5);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; gap: var(--s2); }
.brand__mark { font-family: var(--font-mono); font-weight: 700; color: var(--accent); letter-spacing: -.06em; }
.brand__name { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.02em; }
.brand__tagline { color: var(--text-faint); font-size: var(--t-sm); }
.topbar__note { display: flex; gap: var(--s2); }

.chip, .badge {
  display: inline-block; padding: 2px var(--s2);
  border: 1px solid var(--control-line);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.badge[data-engine="local"]  { border-color: var(--accent-dim); color: var(--accent); }
.badge[data-engine="server"] { border-color: var(--control-line); color: var(--text-muted); }

/* ------------------------------------------------------------------- layout */

.shell {
  flex: 1;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding: var(--s5);
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 360px;
  grid-template-areas: "catalog work result";
  align-items: start;
}

/* Rails are not cards. A hairline separates them, and the result rail only becomes a
   surface once there is a result to show. */
.rail {
  position: sticky; top: var(--s5);
  max-height: calc(100dvh - var(--s8));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-soft) transparent;
  padding: var(--s4) var(--s3);
  border-inline: 1px solid var(--line);
  border-radius: var(--r-3);
}
.catalog { grid-area: catalog; }
.work    { grid-area: work; padding-inline: var(--s4); min-width: 0; }
.result  { grid-area: result; }

/* The only card on the page. */
.work__card {
  position: relative;
  overflow: clip;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
  box-shadow: var(--edge);
  padding: var(--card-pad);
}

@media (max-width: 1199px) {
  .shell {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas: "catalog catalog" "work result";
    max-width: 980px;
  }
  .catalog {
    position: static; max-height: none; overflow: visible;
    border-inline: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; padding: 0 0 var(--s4); margin-bottom: var(--s5);
  }
  .catalog__groups, .listbox { display: flex; gap: 6px; overflow-x: auto; padding-bottom: var(--s3); scrollbar-width: thin; }
  .catalog__group, .listbox__item { flex: 0 0 auto; scroll-snap-align: start; }
  .listbox__item { max-width: 240px; border: 1px solid var(--line-soft); border-radius: var(--r-1); }
  .work { padding-inline: var(--s4) 0; }
}

@media (max-width: 899px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "catalog" "work" "result";
    padding: var(--s3);
    gap: var(--s4);
    max-width: 100%;
  }
  .catalog { margin-bottom: 0; padding-bottom: var(--s3); }
  .result {
    position: static; max-height: none; overflow: visible;
    border-inline: 0; border-top: 1px solid var(--line);
    border-radius: 0; padding: var(--s4) 0 0;
  }
  .work { padding-inline: 0; }
  .work__card { padding: var(--s4); }
  .button { min-height: var(--tap-min); }
}

@media (max-width: 639px) {
  .shell { padding: var(--s2); gap: var(--s3); }
  .brand__tagline, .topbar__note { display: none; }
  .actions--work { flex-direction: column-reverse; align-items: stretch; }
  .actions--work .button { width: 100%; }
}

/* ----------------------------------------------------------------- catalogue */

.catalog__groups { display: grid; gap: 2px; margin-bottom: var(--s4); }
.catalog__list-label { margin-bottom: var(--s1); }

.catalog__group {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  width: 100%; padding: 6px var(--s2);
  border: 1px solid transparent; border-radius: var(--r-1);
  background: transparent; color: var(--text-muted);
  font: 500 var(--t-xs)/1.45 var(--font-ui); text-align: left; cursor: pointer;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.catalog__group:hover { background: var(--surface-2); color: var(--text); }
.catalog__group[aria-checked="true"] {
  background: var(--surface-2); color: var(--text); border-color: var(--line-soft);
}
.catalog__count {
  font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.listbox { display: grid; gap: 1px; }

/* Five signals for the selected row, not one: inset bar, fill, weight, a brighter index
   and a monospace accept hint. Any single one alone would be too weak on a dark ground. */
.listbox__item {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s2);
  align-items: baseline; width: 100%;
  padding: var(--row-pad) var(--s2) var(--row-pad) 0;
  border: 0; border-radius: var(--r-1);
  background: transparent; color: var(--text-muted);
  font: 400 var(--t-xs)/1.45 var(--font-ui); text-align: left; cursor: pointer;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.listbox__index {
  font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--text-faint);
  font-variant-numeric: tabular-nums; text-align: right;
}
.listbox__item:hover { background: var(--surface-2); color: var(--text); }
.listbox__item[aria-checked="true"] {
  background: var(--surface-2); color: var(--text); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
.listbox__item[aria-checked="true"] .listbox__index { color: var(--accent); }
/* One line, always. The full format list wrapped to three lines in a 248 px rail and pushed
   the operations below the fold, so the list stopped reading as a list. */
.listbox__accept {
  display: block;
  font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 400;
  color: var(--text-faint); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.catalog__hint { margin-top: var(--s4); color: var(--text-faint); font-size: var(--t-2xs); }

/* --------------------------------------------------------------- work header */

.work__head { margin-bottom: var(--s4); }
.work__title {
  font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
}
.work__title[data-empty="true"] { color: var(--text-faint); }
.work__meta { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.work__accept { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--text-faint); }
.work__desc { margin-top: var(--s2); color: var(--text-muted); font-size: var(--t-sm); }

.steps { display: grid; gap: var(--s2); margin-top: var(--s4); }
.steps li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s2); color: var(--text-muted); font-size: var(--t-base); }
.steps__n { font-family: var(--font-mono); font-weight: 700; color: var(--accent); }

/* Progress: a 2 px line on the top edge of the card. It animates opacity only; the fill is
   driven by a scale factor written from rAF, so no transition competes with it. */
.progress {
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--line);
}
.progress__bar {
  display: block; height: 100%;
  background: var(--accent);
  transform: scaleX(var(--p, 0)); transform-origin: left center;
}
.progress[data-indeterminate="true"] .progress__bar {
  width: 34%; animation: pulse 1400ms ease-in-out infinite alternate;
}
@keyframes pulse { from { opacity: .35; } to { opacity: 1; } }

/* ------------------------------------------------------------------- dropzone */

.dropzone {
  border: 1px dashed var(--control-line);
  border-radius: var(--r-3);
  background: var(--bg);
  padding: var(--s6) var(--s4);
  text-align: center; cursor: pointer;
  transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.dropzone:hover { border-color: var(--accent-dim); }
.dropzone__lead { font-size: var(--t-md); }
.dropzone__hint { margin-top: var(--s1); color: var(--text-muted); font-size: var(--t-sm); }
.dropzone__link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Drag state is signalled three ways plus text, never by colour alone. */
.dropzone[data-dragging="true"] {
  border-style: solid; border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.dropzone[data-dragging="true"] .dropzone__lead::after { content: " — laat los"; }

/* Compact state once a file is chosen: no layout jump. */
.dropzone[data-compact="true"] { padding: var(--s3) var(--s4); }
.dropzone[data-compact="true"] .dropzone__lead { font-size: var(--t-base); }
.dropzone[data-compact="true"] .dropzone__hint { display: none; }

/* ------------------------------------------------------------------- file list */

.filelist { margin-top: var(--s3); display: grid; gap: var(--s2); }
.filelist__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--s2);
  padding: var(--row-pad) var(--s3);
  border: 1px solid var(--line-soft); border-radius: var(--r-1);
  background: var(--surface-2);
}
/* File names stay monospace: ellipsis truncation is predictable when every glyph is the
   same width, and `l`/`1`/`I` must not be confused. */
.filelist__name {
  font-family: var(--font-mono); font-size: var(--t-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filelist__size { color: var(--text-faint); font-size: var(--t-2xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.filelist__note { color: var(--text-faint); font-size: var(--t-2xs); padding-inline: var(--s3); }

/* ------------------------------------------------------------------- options */

.options { margin-top: var(--s5); }
.options__grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.option { display: grid; gap: 2px; align-content: start; }
.option__label { font-size: var(--t-xs); font-weight: 500; color: var(--text-muted); }

/* A boolean is a checkbox. The previous version rendered it as a text field prefilled with
   "false", which asked the user to type a programming literal to say "no". */
.option--check {
  display: flex; align-items: center; gap: var(--s2);
  padding: 2px 0;
  /* 18 px box inside a 44 px row: the box keeps its native size so it renders identically
     everywhere, and the row provides the touch target. */
  min-height: var(--tap-min);
}
.field__check {
  width: 18px; height: 18px; margin: 0; flex: 0 0 auto;
  padding: 0; border: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.field__checklabel { font-size: var(--t-sm); color: var(--text-muted); cursor: pointer; }

.field__control, .palette__input {
  width: 100%;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--control-line); border-radius: var(--r-1);
  background: var(--bg); color: var(--text);
  font: inherit; font-size: var(--t-sm);
}
.field__control:hover { border-color: var(--text-faint); }
select.field__control {
  appearance: none;
  padding-right: var(--s5);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right var(--s3) top 55%, right calc(var(--s3) - 4px) top 55%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------------- buttons */

.actions { margin-top: var(--s4); display: flex; gap: var(--s2); flex-wrap: wrap; }

.button {
  padding: var(--s2) var(--s4);
  border: 1px solid var(--control-line); border-radius: var(--r-1);
  background: transparent; color: var(--text);
  font: inherit; font-size: var(--t-base); letter-spacing: .01em;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
}
.button:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text-faint); color: var(--text); }
.button:disabled { color: var(--text-faint); border-color: var(--line); cursor: not-allowed; }
.button--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
/* Hover makes it lighter, not darker: a fill that dims reads as a defect. */
.button--primary:hover:not(:disabled) { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--on-accent); }
.button--primary:disabled { background: transparent; border-color: var(--line); color: var(--text-faint); }
.button[data-busy="true"] { color: var(--text-faint); border-color: var(--control-line); }

/* --------------------------------------------------------------------- status */

.status {
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-left: 3px solid var(--control-line);
  border-radius: var(--r-1);
  background: var(--bg); color: var(--text-muted); font-size: var(--t-base);
}
.status[data-tone="busy"]  { border-left-color: var(--accent); color: var(--text); }
.status[data-tone="ok"]    { border-left-color: var(--ok); color: var(--text); }
.status[data-tone="warn"]  { border-left-color: var(--warn); color: var(--text); }
.status[data-tone="error"] { border-left-color: var(--err); color: var(--text); }
.status__code {
  display: block; margin-top: var(--s1);
  font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--text-faint);
}

/* --------------------------------------------------------------------- result */

.result { margin-top: var(--s3); }
.result__meta {
  font-size: var(--t-2xs); color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.preview {
  margin-top: var(--s2);
  max-height: var(--preview-max); overflow: auto;
  padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--bg); color: var(--text);
  font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.55;
  white-space: pre; tab-size: 2;
}
.partlist {
  display: grid; gap: var(--s1);
  max-height: calc(var(--preview-max) * .9); overflow-y: auto;
  margin-top: var(--s2);
}
.partlist__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2);
  align-items: center; padding: var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-1); background: var(--bg);
}
.partlist__path { font-family: var(--font-mono); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; }
.partlist__meta { font-size: var(--t-2xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* The rail becomes a surface only when it has something to show. */
.result[data-state="ready"] {
  background: var(--surface); border-color: var(--line-soft); box-shadow: var(--edge);
}
.result__empty { display: grid; place-items: center; padding: var(--s6) var(--s2); color: var(--text-faint); }
/* line-soft, not the faintest grey: the diagram is a picture, and at 60 % contrast it was
   an undifferentiated smudge in the rail. */
.result__empty svg { color: var(--control-line); }

/* --------------------------------------------------------------------- footer */

.footer { border-top: 1px solid var(--line); background: var(--surface); }
.footer__inner { max-width: 1240px; margin-inline: auto; padding: var(--s4) var(--s5); }
.footer__line { color: var(--text-muted); font-size: var(--t-xs); line-height: 1.6; max-width: 70ch; }
.footer__line strong { color: var(--text); font-weight: 600; }

.footer__prefs {
  display: flex; align-items: flex-end; gap: var(--s5); flex-wrap: wrap;
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.pref { display: grid; gap: var(--s1); }
.seg { display: inline-flex; border: 1px solid var(--control-line); border-radius: var(--r-1); overflow: hidden; }
.seg__item {
  padding: var(--s1) var(--s3); border: 0; border-left: 1px solid var(--control-line);
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: var(--t-xs); cursor: pointer;
}
.seg__item:first-child { border-left: 0; }
.seg__item:hover { background: var(--surface-2); color: var(--text); }
.seg__item[aria-checked="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.footer__keys { color: var(--text-faint); font-size: var(--t-2xs); display: flex; gap: var(--s1); align-items: center; flex-wrap: wrap; }

.noscript {
  max-width: 1240px; margin: var(--s4) auto; padding: var(--s3);
  border: 1px solid var(--warn); border-radius: var(--r-1); color: var(--text); font-size: var(--t-sm);
}

/* -------------------------------------------------------------------- palette */

.palette {
  width: min(620px, calc(100vw - 32px));
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid var(--control-line); border-radius: var(--r-3);
  background: var(--surface-3); color: var(--text);
  box-shadow: var(--shadow-1);
  animation: palette-in var(--dur-in) var(--ease);
}
.palette::backdrop { background: rgb(0 0 0 / .62); }
@keyframes palette-in { from { opacity: 0; transform: translateY(-4px); } }

.palette__input {
  border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r-3) var(--r-3) 0 0;
  padding: var(--s3) var(--s4); background: transparent;
  font-size: var(--t-md);
}
.palette__input:focus-visible { outline-offset: -2px; }
.palette__list { list-style: none; max-height: 46vh; overflow-y: auto; padding: var(--s2); }
.palette__opt {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: baseline;
  padding: var(--s2) var(--s3); border-radius: var(--r-1); cursor: pointer;
}
.palette__opt[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.palette__opt b { font-weight: 600; }
.palette__group { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--text-faint); }
.palette__foot {
  display: flex; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s2) var(--s4);
  border-top: 1px solid var(--line);
  font-size: var(--t-2xs); color: var(--text-faint);
}

/* ----------------------------------------------------------- forced colours */

@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  .button, .field__control, .seg, .chip, .badge, kbd { border-color: CanvasText; }
  .work__card, .listbox__item, .partlist__row, .dropzone { border-color: CanvasText; }
  /* Selection is an outline, not a fill: a fill would be replaced by the system palette. */
  .listbox__item[aria-checked="true"],
  .palette__opt[aria-selected="true"],
  .catalog__group[aria-checked="true"],
  .seg__item[aria-checked="true"] {
    outline: 2px solid Highlight; outline-offset: -2px; background: Canvas;
  }
  .status { border-left: 4px solid CanvasText; }
  /* A progress bar is data visualisation: it must not be handed to the system palette. */
  .progress { forced-color-adjust: none; background: Canvas; }
  .progress__bar { forced-color-adjust: none; background: Highlight; }
  .palette { border-color: CanvasText; }
}

@media (prefers-contrast: more) {
  :root {
    --line: var(--line-soft);
    --text-muted: var(--text);
    --control-line: #8a8a96;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .palette { animation: none; }
  /* The pulse disappears but the state stays legible: a solid line plus the counter. */
  .progress[data-indeterminate="true"] .progress__bar { animation: none; opacity: 1; width: 100%; }
}