:root {
  --dial-amber: oklch(84% 0.11 90);
  --dial-blue: oklch(80% 0.07 235);
  --dial-line: oklch(93% 0.008 120 / 0.14);
  --dial-line-strong: oklch(93% 0.008 120 / 0.24);
  --dial-mono: "IBM Plex Mono", ui-monospace, monospace;
  --shape-discovery: oklch(78% 0.09 300);
  --shape-codesign: oklch(80% 0.07 235);
  --shape-direct: oklch(78% 0.1 155);
  --shape-workflow: oklch(84% 0.11 90);
  --shape-assurance: oklch(74% 0.13 25);
}

html { color-scheme: dark; }
body { background: var(--color-bg); }
button { font-family: inherit; }
button, input, textarea { accent-color: var(--dial-amber); }

.skip-link { visibility: hidden; }
.skip-link:focus { visibility: hidden; transform: translateY(-200%); }
.skip-link:focus-visible { visibility: visible; transform: none; }

.dial-shell {
  width: min(72rem, calc(100% - 2.5rem));
  margin: 0 auto;
}

/* Compact hero: title and principle side by side so the instrument stays near the fold */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr);
  gap: 2rem 4rem;
  align-items: end;
  padding: clamp(2.5rem, 6vh, 4rem) 0 clamp(1.8rem, 4vh, 2.5rem);
}

.eyebrow,
.panel-label,
.result-meta,
.range-labels,
.action-status {
  font-family: var(--dial-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow { margin: 0 0 0.9rem; color: var(--dial-blue); }

.hero h1 {
  margin: 0 0 0.9rem;
  font-size: clamp(2.3rem, 4.5vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
}

.hero-copy {
  max-width: 52ch;
  margin: 0;
  color: var(--color-muted);
  font-size: 1.08rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.principle { padding-bottom: 0.35rem; }
.ten-eighty-track {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 0.7rem;
}
.ten-eighty-track .seg { display: block; }
.seg-human {
  flex: 0 0 10%;
  height: 100%;
  background: var(--dial-amber);
}
.seg-agent {
  flex: 1 1 auto;
  height: 3px;
  background: var(--dial-blue);
}
.principle-legend {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.6rem;
}
.legend-item { display: flex; align-items: baseline; gap: 0.4rem; }
.legend-item strong {
  font-family: var(--dial-mono);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
}
.legend-human strong { color: var(--dial-amber); }
.legend-agent strong { color: var(--dial-blue); }
.legend-item span { color: var(--color-muted); font-size: 0.85rem; white-space: nowrap; }

/* The instrument: controls left, live contract right */
.instrument {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0 clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(1.6rem, 4vh, 2.6rem) 0 clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--dial-line-strong);
}

.control-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.task-label { margin: 0 0 0.6rem; font-size: 1.05rem; }
.text-button {
  min-height: 2.4rem;
  padding: 0.3rem 0;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-family: var(--dial-mono);
  font-size: 0.72rem;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
.text-button:hover { color: var(--dial-amber); }

#task-input {
  min-height: 4.6rem;
  padding: 0.8rem 0.95rem;
  border-color: var(--dial-line-strong);
  background: color-mix(in oklch, var(--color-surface) 74%, transparent);
  font-size: 1.02rem;
  line-height: 1.5;
}
#task-input:focus { border-color: var(--dial-amber); outline: 1px solid var(--dial-amber); }

.examples {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  margin-top: 0.55rem;
  color: var(--color-muted);
  font-size: 0.85rem;
}
.examples > span { font-family: var(--dial-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; }
.examples button {
  min-height: 2.1rem;
  padding: 0.15rem 0;
  border: 0;
  border-bottom: 1px solid var(--dial-line-strong);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  font-size: 0.85rem;
}
.examples button:hover { color: var(--dial-amber); border-color: var(--dial-amber); }

.variables { margin-top: 1.4rem; border-top: 1px solid var(--dial-line); }
.variable { padding: 0.85rem 0 0.9rem; border-bottom: 1px solid var(--dial-line); }
.variable-copy { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.variable label { margin: 0; font-size: 1rem; font-weight: 500; }
.variable output { color: var(--dial-amber); font-family: var(--dial-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }
.variable p { margin: 0.2rem 0 0.45rem; color: var(--color-muted); font-size: 0.84rem; line-height: 1.45; }
.variable input[type="range"] {
  width: 100%;
  min-height: 1.7rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.range-labels { display: flex; justify-content: space-between; gap: 1rem; color: var(--color-muted); font-size: 0.6rem; }

/* Live verdict panel */
.verdict {
  --shape-color: var(--shape-workflow);
  position: sticky;
  top: 1.25rem;
  padding: 1.4rem 1.5rem 1.5rem;
  border: 1px solid var(--dial-line-strong);
  background: color-mix(in oklch, var(--color-surface) 55%, transparent);
}
.result-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.8rem;
  color: var(--color-muted);
}
#result-code { color: var(--shape-color); transition: color 200ms ease-out; }
.verdict-title-row { display: flex; align-items: center; gap: 0.75rem; }
.shape-mark {
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  background: var(--shape-color);
  transition: border-radius 200ms ease-out, transform 200ms ease-out, background 200ms ease-out;
}
.verdict h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}
#result-summary { margin: 0.65rem 0 0; color: var(--color-muted); font-size: 0.95rem; line-height: 1.5; text-wrap: pretty; }
.result-why {
  margin: 0.7rem 0 0;
  color: var(--shape-color);
  font-family: var(--dial-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 200ms ease-out;
}

/* Shape diagram: amber humans, blue agents, diamond gates */
.shape-diagram { margin: 1.3rem 0 0; }
.shape-diagram svg { display: block; width: 100%; height: auto; font-family: var(--dial-mono); }
.shape-diagram .n-h { fill: none; stroke: var(--dial-amber); stroke-width: 1.5; }
.shape-diagram .n-a { fill: none; stroke: var(--dial-blue); stroke-width: 1.5; }
.shape-diagram .n-x { fill: none; stroke: var(--shape-assurance); stroke-width: 1.5; }
.shape-diagram .flow { fill: none; stroke: var(--color-muted); stroke-width: 1.2; opacity: 0.55; }
.shape-diagram .flow-anim { stroke-dasharray: 3 5; }
.shape-diagram .lbl { fill: var(--color-muted); font-size: 11px; letter-spacing: 0.04em; text-anchor: middle; }
.shape-diagram .lbl-a { fill: var(--dial-blue); }
.shape-diagram .lbl-x { fill: var(--shape-assurance); }

/* 10-80-10 stepper: the tabs are the track */
.stage-tabs { display: flex; gap: 3px; margin-top: 1.2rem; }
.stage-tab {
  flex: 1 1 0;
  padding: 0.5rem 0.6rem 0.55rem;
  border: 0;
  border-top: 2px solid var(--dial-line);
  background: var(--color-wash);
  cursor: pointer;
  text-align: left;
}
.stage-tab:nth-child(2) { flex: 3 1 0; }
.stage-human { color: var(--dial-amber); }
.stage-agent { color: var(--dial-blue); }
.stage-tab span { display: block; font-family: var(--dial-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: inherit; }
.stage-tab strong { display: block; margin-top: 0.15rem; color: var(--color-muted); font-size: 0.88rem; font-weight: 500; }
.stage-tab:hover strong { color: var(--color-ink); }
.stage-tab[aria-pressed="true"] { border-top-color: currentColor; background: color-mix(in oklch, var(--color-wash) 40%, var(--color-surface)); }
.stage-tab[aria-pressed="true"] strong { color: var(--color-ink); }

.stage-panel { min-height: 6.6rem; padding: 0.85rem 0.1rem 0; }
#stage-list { margin: 0; padding-left: 1.1rem; color: var(--color-ink); font-size: 0.95rem; line-height: 1.5; }
#stage-list li { margin: 0.32rem 0; }
#stage-list li::marker { color: var(--color-muted); }
#stage-next { margin-top: 0.35rem; }
#stage-next[hidden] { display: none; }

/* The one call to action */
.verdict-cta { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--dial-line); }
.verdict-cta .primary-button { width: 100%; padding: 0.95rem 1.1rem; font-size: 0.84rem; }
.verdict-cta p { margin: 0.6rem 0 0; color: var(--color-muted); font-size: 0.8rem; line-height: 1.5; }
.verdict-cta .action-status { margin: 0.4rem 0 0; min-height: 1.1rem; }

/* Detail band under the instrument */
.result-detail,
.agent-entry,
.share-build,
.return-loop,
.notes {
  padding: clamp(2rem, 5vw, 3.2rem) 0;
  border-top: 1px solid var(--dial-line-strong);
}

.detail-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 3rem;
}
.detail-block { padding: 0 0 1.5rem; }
.detail-block .panel-label { margin: 0 0 0.75rem; font-weight: 400; color: var(--color-muted); }
.tool-title { margin: 0 0 0.35rem; color: var(--color-ink); font-size: 1.2rem; font-weight: 500; }
#tool-copy { max-width: 62ch; margin: 0; color: var(--color-muted); font-size: 0.95rem; }
.resource-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.65rem 1.4rem; margin-top: 0.9rem; }
.resource-actions a { font-size: 0.92rem; }
.catalogue-link { color: var(--color-muted); }
.catalogue-link:hover { color: var(--dial-amber); opacity: 1; }
.resource-actions .secondary-button { min-height: 2.55rem; }
#tool-use-command { display: block; max-width: 100%; margin-top: 0.8rem; padding: 0.65rem; overflow-wrap: anywhere; background: var(--color-surface); color: var(--color-muted); font-family: var(--dial-mono); font-size: 0.72rem; }
#tool-use-command[hidden] { display: none; }

.primary-button,
.secondary-button {
  min-height: 2.8rem;
  border: 1px solid var(--dial-line-strong);
  cursor: pointer;
  font-family: var(--dial-mono);
  font-size: 0.78rem;
}
.primary-button {
  padding: 0.7rem 1.1rem;
  border-color: var(--dial-amber);
  background: var(--dial-amber);
  color: var(--color-bg);
  font-weight: 500;
}
.primary-button:hover { filter: brightness(1.08); }
.secondary-button { padding: 0.7rem 0.9rem; background: transparent; color: var(--color-ink); }
.secondary-button:hover { border-color: var(--dial-amber); color: var(--dial-amber); }
.compact-button { width: auto; margin-top: 0; }

.brief-panel { padding: 0.9rem 1.35rem; background: var(--color-wash); }
.brief-panel summary { cursor: pointer; color: var(--color-muted); font-family: var(--dial-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.brief-panel summary:hover { color: var(--dial-amber); }
.brief-panel pre {
  max-height: 20rem;
  margin: 1.1rem 0 0;
  padding: 1rem;
  overflow: auto;
  border: 1px solid var(--dial-line);
  background: color-mix(in oklch, var(--color-bg) 72%, black);
  color: var(--color-muted);
  font-family: var(--dial-mono);
  font-size: 0.74rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

.result-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

.calibration {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  margin-top: 2rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--dial-line);
}
.calibration h3 { margin: 0 0 0.25rem; font-size: 1.2rem; font-weight: 500; }
.calibration p { max-width: 56ch; margin: 0; color: var(--color-muted); font-size: 0.9rem; }
.calibration-options { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.calibration-options button {
  min-height: 2.65rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--dial-line-strong);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--dial-mono);
  font-size: 0.7rem;
}
.calibration-options button:hover,
.calibration-options button[data-selected="true"] { border-color: var(--dial-amber); color: var(--dial-amber); }
.action-status { min-height: 1.2rem; margin: 0.6rem 0 0; color: var(--dial-amber); }

.agent-entry h2,
.share-build h2,
.section-heading h2,
.notes h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;
}
.agent-entry > p:not(.action-status) {
  max-width: 62ch;
  margin: 0 0 0.9rem;
  color: var(--color-muted);
  font-size: 1.02rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.agent-entry-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.agent-entry-actions > code {
  display: inline-flex;
  align-items: center;
  min-height: 2.8rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--dial-line-strong);
  color: var(--dial-blue);
  font-family: var(--dial-mono);
  font-size: 0.85rem;
}
.agent-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 0.5rem; }
.agent-links a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--color-muted); font-family: var(--dial-mono); font-size: 0.72rem; }

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.share-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.share-heading h2 { margin: 0; }
.reward-pill { padding: 0.45rem 0.65rem; border: 1px solid var(--dial-amber); color: var(--dial-amber); font-family: var(--dial-mono); font-size: 0.7rem; text-transform: uppercase; white-space: nowrap; }
.share-intro { max-width: 62ch; margin: 0.9rem 0 0; color: var(--color-muted); font-size: 1.02rem; line-height: 1.55; text-wrap: pretty; }
.share-reward { max-width: 62ch; margin: 0.75rem 0 0; color: var(--color-ink); font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.share-steps {
  max-width: 62ch;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  counter-reset: share-step;
}
.share-steps li { position: relative; padding: 0.7rem 0 0.7rem 2.5rem; counter-increment: share-step; }
.share-steps li + li { border-top: 1px solid var(--dial-line); }
.share-steps li::before {
  content: counter(share-step);
  position: absolute;
  top: 0.8rem;
  left: 0.15rem;
  color: var(--dial-amber);
  font-family: var(--dial-mono);
  font-size: 0.9rem;
}
.share-steps span { color: var(--color-ink); font-weight: 500; }
.share-steps p { margin: 0.25rem 0 0; color: var(--color-muted); font-size: 0.92rem; line-height: 1.5; }
.share-reasons { max-width: 62ch; margin: 1.25rem 0; padding-left: 1.35rem; color: var(--color-muted); }
.share-reasons[hidden] { display: none; }
.share-reasons li { margin: 0.35rem 0; padding-left: 0.25rem; }
.share-eligibility { max-width: 66ch; margin: 0.75rem 0 0; color: var(--color-muted); font-size: 0.9rem; line-height: 1.5; }
.share-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.2rem; }
.share-action-note { max-width: 66ch; margin: 0.75rem 0 0; color: var(--color-muted); font-size: 0.82rem; line-height: 1.5; }
.secondary-link { display: inline-flex; min-height: 2.8rem; align-items: center; padding: 0.7rem 0.9rem; border: 1px solid var(--dial-line-strong); color: var(--color-ink); font-family: var(--dial-mono); font-size: 0.78rem; text-decoration: none; }
.secondary-link:hover { border-color: var(--dial-amber); color: var(--dial-amber); }
.share-build details { max-width: 100%; margin-top: 1.2rem; border-top: 1px solid var(--dial-line); padding-top: 0.8rem; }
.share-build summary { cursor: pointer; color: var(--color-muted); font-family: var(--dial-mono); font-size: 0.72rem; text-transform: uppercase; }
.share-build pre { max-height: 22rem; padding: 1rem; overflow: auto; background: var(--color-wash); color: var(--color-muted); font-family: var(--dial-mono); font-size: 0.74rem; line-height: 1.6; white-space: pre-wrap; }

.return-loop > p { max-width: 60ch; color: var(--color-muted); }
.history-list { margin-top: 1.2rem; border-top: 1px solid var(--dial-line); }
.history-item { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--dial-line); }
.history-shape { color: var(--dial-amber); font-family: var(--dial-mono); font-size: 0.7rem; text-transform: uppercase; }
.history-task { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item button { border: 0; background: transparent; color: var(--color-muted); cursor: pointer; font-family: var(--dial-mono); font-size: 0.7rem; text-decoration: underline; }

.notes h2 { max-width: 28ch; }
.notes p { max-width: 62ch; color: var(--color-muted); font-size: 1.05rem; }
.site-footer a { color: var(--color-muted); }

@media (prefers-reduced-motion: no-preference) {
  .hero { animation: dial-settle 700ms cubic-bezier(0.16, 1, 0.3, 1) 90ms both; }
  .instrument { animation: dial-settle 700ms cubic-bezier(0.16, 1, 0.3, 1) 170ms both; }
  .hero .seg { transform-origin: left center; animation: dial-draw 700ms cubic-bezier(0.22, 1, 0.36, 1) 250ms both; }
  .hero .seg-agent { animation-delay: 420ms; }
  .hero .seg-human:last-of-type { animation-delay: 620ms; }
  .verdict.shape-changed .verdict-title-row,
  .verdict.shape-changed .shape-diagram { animation: shape-pulse 320ms cubic-bezier(0.16, 1, 0.3, 1); }
  .shape-diagram .flow-anim { animation: flow-dash 1.3s linear infinite; }
  @keyframes dial-settle { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
  @keyframes dial-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes shape-pulse { from { opacity: 0.35; transform: translateY(0.2rem); } to { opacity: 1; transform: none; } }
  @keyframes flow-dash { to { stroke-dashoffset: -8; } }
}

@media (max-width: 62rem) {
  .hero { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
  .principle { max-width: 34rem; }
  .instrument { grid-template-columns: 1fr; gap: 2rem 0; }
  .verdict { position: static; }
  .contract { grid-template-columns: 1fr; }
}

@media (max-width: 38rem) {
  .dial-shell { width: min(100% - 1.5rem, 72rem); }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .principle-legend { flex-wrap: wrap; justify-content: flex-start; gap: 0.4rem 1.1rem; }
  .section-heading { flex-direction: column; gap: 0.5rem; }
  .verdict { padding: 1.1rem 1rem 1.2rem; }
  .calibration { grid-template-columns: 1fr; gap: 1rem; align-items: start; }
  .calibration-options { display: grid; grid-template-columns: repeat(3, 1fr); }
  .calibration-options button { padding-inline: 0.35rem; }
  .history-item { grid-template-columns: 1fr auto; }
  .history-shape { grid-column: 1 / -1; }
  .history-task { white-space: normal; }
}

@media print {
  .site-header,
  .site-footer,
  .controls,
  .return-loop,
  .notes,
  .agent-entry,
  .result-actions,
  .calibration,
  .share-build,
  .brief-heading button { display: none !important; }
  .dial-shell { width: 100%; }
  .hero { padding: 0 0 1rem; }
  .instrument { display: block; border-top: 1px solid #777; }
  .verdict { position: static; border: 0; padding: 0; background: none; }
  .stage-tabs, .stage-panel, .verdict-cta { display: none !important; }
  .seg-human { background: #b58900; }
  .seg-agent { background: #268bd2; }
  .brief-panel { border: 1px solid #aaa; background: #f4f4f4; }
}