/* DomainRE site. Tokens from DESIGN.md and domainre/workbench_assets/workbench.css. */
:root {
  color-scheme: light;
  --paper: #f4f3f0;
  --surface: #fdfcf8;
  --ink: #22231f;
  --ink-hover: #3c3d35;
  --ink-press: #11120f;
  --muted: #5b5d51;
  --line: #c9c6b9;
  --control: #817f71;
  --hold: #8a3529;
  --pending: #635327;
  --verified: #285747;
  --keyboard: #325f51;
  --select: #e6e2d4;
  --gutter: clamp(1rem, 4vw, 3rem);
  --serif: Georgia, "Noto Serif CJK KR", AppleMyungjo, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font: 1rem/1.6 system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); margin: 0; min-width: 0; overflow-wrap: anywhere; }
::selection { background: var(--select); color: var(--ink); }
a { color: var(--verified); text-underline-offset: .2em; }
a:hover { color: var(--ink); }
a:visited { color: #4b4f3f; }
:focus-visible { outline: 2px solid var(--keyboard); outline-offset: 3px; }
[hidden] { display: none !important; }
code, pre { font-family: var(--mono); font-size: .9em; }
h1, h2, h3, p, dl, dd, ul, ol { margin: 0; }

/* Masthead */
.mast { border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.mast-inner, main, .foot-inner {
  margin: auto;
  max-width: 64rem;
  width: calc(100% - 2 * var(--gutter) - env(safe-area-inset-left) - env(safe-area-inset-right));
}
.mast-inner { align-items: center; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; justify-content: space-between; padding-block: .25rem; }
.brand { align-items: center; color: var(--ink); display: inline-flex; font-size: .95rem; font-weight: 750; letter-spacing: -.01em; min-height: 2.75rem; text-decoration: none; }
.brand:visited { color: var(--ink); }
.mast nav { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.mast nav a { align-items: center; color: var(--ink); display: inline-flex; font-size: .9rem; min-height: 2.75rem; }
.mast nav a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 2px; }

main { padding: clamp(2rem, 6vw, 4.5rem) 0 4rem; }
h1 {
  font-family: var(--serif);
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.14;
  text-wrap: balance;
  word-break: keep-all;
}
h2 { font-size: 1.15rem; line-height: 1.35; text-wrap: balance; }
h3 { font-size: 1rem; line-height: 1.4; }
.intro, .lead { color: var(--muted); max-width: 64ch; word-break: keep-all; }
.intro { margin-top: .85rem; }

/* Form */
.query {
  align-items: end;
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(12rem, 1fr) minmax(8.25rem, .36fr) max-content;
  margin-top: 2rem;
  max-width: 52rem;
}
.field { min-width: 0; }
label { display: block; font-size: .91rem; font-weight: 650; margin-bottom: .45rem; }
label span { color: var(--muted); font-size: .8rem; font-weight: 400; margin-left: .35rem; }
input, select, button { border: 1px solid var(--control); border-radius: .28rem; font: inherit; font-size: 1rem; min-height: 3.1rem; }
input, select { background: var(--surface); color: var(--ink); max-width: 100%; padding: .62rem .8rem; width: 100%; caret-color: var(--ink); }
input:hover, select:hover { border-color: var(--ink); }
input[aria-invalid="true"] { border-color: var(--hold); }
button {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
  cursor: pointer;
  font-size: .95rem;
  font-weight: 700;
  padding: .62rem 1.1rem;
}
button:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
button:active { background: var(--ink-press); border-color: var(--ink-press); }
button.secondary, .chip { background: var(--surface); border-color: var(--control); color: var(--ink); font-weight: 650; }
button.secondary:hover, .chip:hover { background: var(--select); border-color: var(--ink); }
button.secondary:active, .chip:active { background: #d9d4c2; }
button:disabled, button:disabled:hover { background: #d8d5ca; border-color: #b6b3a6; color: var(--muted); cursor: not-allowed; }

.examples { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: .88rem; gap: .5rem; margin-top: .9rem; }
.examples span { margin-right: .25rem; }
.chip { font-size: .9rem; min-height: 2.75rem; padding: .35rem .8rem; }

.engine { align-items: baseline; color: var(--muted); display: flex; flex-wrap: wrap; font-size: .86rem; gap: .35rem .6rem; margin-top: 1.25rem; }
.engine #engine-text { font-variant-numeric: tabular-nums; }

/* Status badges always spell out the state; colour is the second signal. */
.badge {
  border: 1px solid currentColor;
  border-radius: .2rem;
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.4;
  padding: .05rem .4rem;
  white-space: nowrap;
}
.badge[data-tone="pending"] { color: var(--pending); }
.badge[data-tone="verified"] { color: var(--verified); }
.badge[data-tone="hold"] { color: var(--hold); }

/* Result panel */
.panel { border-top: 1px solid var(--line); margin-top: clamp(2.2rem, 5vw, 3.4rem); padding-top: 1.25rem; }
.panel-title { font-size: 1.35rem; }
.panel-title:focus { outline: none; }
.panel-title:focus-visible { outline: 2px solid var(--keyboard); }
.panel .lead { margin-top: .55rem; }
.run-meta { color: var(--muted); font-size: .84rem; font-variant-numeric: tabular-nums; margin-top: .3rem; }

.stages { counter-reset: stage; list-style: none; margin-top: 1.1rem; max-width: 36rem; padding: 0; }
.stage { align-items: center; border-top: 1px solid var(--line); counter-increment: stage; display: flex; gap: 1rem; justify-content: space-between; min-height: 2.9rem; }
.stage:last-child { border-bottom: 1px solid var(--line); }
.stage-label::before { color: var(--muted); content: counter(stage) ". "; font-variant-numeric: tabular-nums; }
.stage-status { color: var(--muted); font-size: .84rem; }
.stage[data-state="current"] .stage-label { font-weight: 700; }
.stage[data-state="current"] .stage-status { border: 1px solid currentColor; border-radius: .2rem; color: var(--pending); font-weight: 700; padding: 0 .4rem; }
.stage[data-state="done"] .stage-status { color: var(--verified); }
.host-block { margin-top: 1.1rem; }
.host-block h3 { color: var(--muted); font-size: .86rem; font-weight: 650; }
.hosts { font-family: var(--mono); font-size: .85rem; list-style: none; margin-top: .3rem; padding: 0; }
.hosts li { padding-block: .1rem; }

.candidates { list-style: none; margin: 1.2rem 0 0; max-width: 54rem; padding: 0; }
.candidate { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; padding-block: .95rem; }
.candidate:last-child { border-bottom: 1px solid var(--line); }
.candidate-text { min-width: 0; }
.candidate-text p { color: var(--muted); font-size: .9rem; margin-top: .2rem; }
.candidate-text .facts { color: var(--ink); }
.candidate-text .source a { align-items: center; display: inline-flex; min-height: 2.75rem; }
.candidate button { flex: none; }

.details { margin-top: 1rem; max-width: 60ch; }
.details h3 { font-size: .9rem; }
.details ul { color: var(--muted); font-size: .9rem; margin-top: .3rem; padding-left: 1.2rem; }
.next { margin-top: 1rem; max-width: 60ch; }
.actions, .toolbar { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.feedback { color: var(--muted); display: block; font-size: .86rem; margin-top: .5rem; min-height: 1.4em; }

.summary { display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin-top: .8rem; }
.summary dt, .totals dt { color: var(--muted); font-size: .8rem; }
.summary dd { font-weight: 650; }
.totals { border-block: 1px solid var(--line); display: grid; gap: .4rem 1rem; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 1rem; padding-block: .7rem; }
.totals dd { font-size: 1.25rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.warnings { color: var(--muted); font-size: .9rem; margin-top: .8rem; }
.warnings summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; }
.warnings ul { padding-left: 1.2rem; }

.report {
  background: var(--paper);
  border: 1px solid var(--line);
  display: block;
  height: calc(100vh - 2rem);
  height: calc(100dvh - 2rem);
  margin-top: .6rem;
  min-height: 30rem;
  width: 100%;
}

/* Guide */
.dimensions { border-top: 1px solid var(--line); margin-top: clamp(2.8rem, 6vw, 4.5rem); padding-top: 1.1rem; }
.dimensions h2 { font-size: 1.07rem; margin-bottom: .9rem; }
.dimensions dl { column-gap: 1.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1rem; }
.dimensions dt { font-size: .92rem; font-weight: 700; }
.dimensions dd { color: var(--muted); font-size: .88rem; line-height: 1.45; margin-top: .2rem; }
.note { color: var(--muted); font-size: .86rem; margin-top: 1.4rem; max-width: 64ch; }

.unsupported { border-top: 1px solid var(--line); margin-top: 2.5rem; max-width: 64ch; padding-top: 1.1rem; }
.unsupported p { margin-top: .6rem; }
pre { background: var(--surface); border: 1px solid var(--line); margin: .8rem 0 0; overflow-x: auto; padding: .7rem .85rem; }

/* Reading pages */
.prose { max-width: 68ch; }
.prose h2 { border-top: 1px solid var(--line); font-size: 1.15rem; margin-top: 2.4rem; padding-top: 1rem; }
.prose h3 { margin-top: 1.3rem; }
.prose p, .prose ul, .prose ol, .prose table, .prose pre { margin-top: .7rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: .25rem; }
.prose table { border-collapse: collapse; display: block; font-size: .92rem; overflow-x: auto; width: 100%; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: .45rem .7rem .45rem 0; text-align: left; vertical-align: top; }
.prose th { font-weight: 700; white-space: nowrap; }
.prose code { overflow-wrap: anywhere; }
.toc { color: var(--muted); font-size: .9rem; margin-top: 1rem; }
.toc a { display: inline-flex; min-height: 2.75rem; align-items: center; margin-right: .9rem; }
.listing { list-style: none; margin-top: 1.4rem; max-width: 64ch; padding: 0; }
.listing li { border-top: 1px solid var(--line); padding-block: 1rem; }
.listing li:last-child { border-bottom: 1px solid var(--line); }
.listing h2 { font-size: 1.07rem; }
.listing p { color: var(--muted); margin-top: .3rem; }

.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: .84rem; padding-bottom: env(safe-area-inset-bottom); }
.foot-inner { padding-block: 1.2rem 2rem; }

@media (max-width: 42rem) {
  h1 { font-size: 2.15rem; }
  .query { grid-template-columns: 1fr; }
  .query button { margin-top: .2rem; width: 100%; }
  .dimensions dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report { min-height: 26rem; }
}

@media (max-width: 26rem) {
  .candidate { align-items: stretch; flex-direction: column; gap: .6rem; }
  .toolbar button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

@media print {
  .mast nav, .query, .examples, .engine, .toolbar, .actions, .foot { display: none; }
  .report { height: auto; min-height: 0; }
}