/*
  Dokimos components.

  Loaded after echelon-foundry.css, the unmodified Echelon Foundry stylesheet,
  which owns the palette, typography, background grid, header, navigation,
  buttons, section headings, page intros, and footer. This file only adds the
  evidence components Echelon Foundry does not have, using its tokens.
*/

:root {
  /* Dokimos additions (contrast verified in site/test/contrast.test.mjs) */
  --dk-surface-raised: #faf8f3;
  --dk-border-decorative: #cfcabd;
  --dk-verdigris-deep: #2f5a50;
  --dk-bronze-deep: #7d4722;
  --dk-ochre: #735512;
  --dk-graphite-deep: #555a55;
  --dk-verdigris-light: #8fbfb3;
  --dk-bronze-light: #e0a57c;
  --dk-stone-on-dark: #c9c5ba;

  /* Status tones: always paired with a word and a glyph */
  --dk-tone-good: var(--dk-verdigris-deep);
  --dk-tone-bad: var(--dk-bronze-deep);
  --dk-tone-warn: var(--dk-ochre);
  --dk-tone-unknown: var(--dk-graphite-deep);
  --dk-tone-neutral: var(--ef-forged-iron);

  --dk-measure: 68ch;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
main:focus { outline: none; }
code, .mono { font-family: var(--mono); font-size: .88em; }
code { overflow-wrap: anywhere; }
nav a[aria-current="page"]:not(.pill-link) { border-color: var(--ef-text-primary); }
.brand-link[aria-current="page"] { text-decoration: none; }

/* Shared prose helpers --------------------------------------------------- */

.prose-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem clamp(2rem, 5vw, 5rem); max-width: 1100px; margin-bottom: 2rem; }
.section-foot { max-width: var(--dk-measure); margin-top: 1.75rem; }
.band { padding: clamp(2rem, 4vw, 3.5rem) 0; border-top: 1px solid var(--ef-border-functional); border-bottom: 1px solid var(--ef-border-functional); }
.closing { max-width: 60rem; }
.closing h2 { margin: .7rem 0 1.5rem; }
.nowrap, .path { white-space: nowrap; }

/* Hero readout ----------------------------------------------------------- */

.hero-readout { padding: 1.5rem; background: var(--ef-surface-inverse); color: var(--ef-text-inverse); }
.hero-readout .eyebrow { color: var(--dk-verdigris-light); }
.hero-readout p { color: var(--ef-text-inverse); }
.readout-list { margin: 0; border-top: 1px solid var(--ef-forged-iron); }
.readout-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--ef-forged-iron); }
.readout-list dt { color: var(--dk-stone-on-dark); font-size: .88rem; }
.readout-list dd { margin: 0; font-family: var(--display); font-size: 2rem; line-height: 1; }
.readout-list .is-current dt, .readout-list .is-current dd { color: var(--ef-text-inverse); font-weight: 650; }
.readout-list .is-current dd::before { content: "▲ "; font-size: .9rem; color: var(--dk-bronze-light); vertical-align: middle; }
.hero-readout .readout-verdict { margin: 1.1rem 0 .8rem; font-family: var(--display); font-size: 1.35rem; line-height: 1.25; }
.hero-readout .readout-note { margin: 0; color: var(--dk-stone-on-dark); font-size: .82rem; }
.hero-readout a { color: var(--dk-verdigris-light); }

/* Provenance labels ------------------------------------------------------ */

.provenance-label {
  max-width: var(--dk-measure); margin: 0 0 1.75rem; padding: .7rem 1rem;
  border: 1px dashed var(--ef-border-functional); background: var(--ef-surface-primary); color: var(--ef-text-primary); font-size: .88rem;
}
.provenance-label.is-real { border-style: solid; border-left: 5px solid var(--dk-verdigris-deep); }
.provenance-label.is-demo strong::before { content: "◇ "; }
.provenance-label.is-real strong::before { content: "◆ "; }

/* States and statuses ---------------------------------------------------- */

.state, .status {
  display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .5rem; border: 1px solid currentColor;
  background: var(--dk-surface-raised); font-family: var(--mono); font-size: .76rem; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.state-glyph { font-weight: 700; }
.tone-good { color: var(--dk-tone-good); }
.tone-bad { color: var(--dk-tone-bad); border-width: 2px; }
.tone-warn { color: var(--dk-tone-warn); border-width: 2px; }
.tone-unknown { color: var(--dk-tone-unknown); border-style: dashed; }
.tone-neutral { color: var(--dk-tone-neutral); }
.status-implemented { color: var(--dk-tone-good); }
.status-experimental { color: var(--dk-tone-warn); border-style: dotted; border-width: 2px; }
.status-planned { color: var(--dk-tone-unknown); border-style: dashed; }

/* Tables ----------------------------------------------------------------- */

.table-scroll { position: relative; max-width: 100%; overflow-x: auto; border: 1px solid var(--dk-border-decorative); background: var(--dk-surface-raised); }
.table-scroll table { width: 100%; min-width: 46rem; border-collapse: collapse; }
.table-scroll .mono { white-space: nowrap; }
caption { padding: .8rem 1rem; text-align: left; color: var(--ef-text-secondary); font-size: .86rem; caption-side: top; }
th, td { padding: .7rem 1rem; border-top: 1px solid var(--dk-border-decorative); text-align: left; vertical-align: top; }
td { color: var(--ef-text-primary); }
thead th { border-top: 1px solid var(--ef-border-functional); color: var(--ef-text-secondary); font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
tbody th { font-weight: 600; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.is-current { background: var(--ef-surface-secondary); }
tr.is-current th::after { content: " (current)"; font-weight: 400; }
.compare-table td:nth-child(3) { background: rgb(71 117 107 / .07); }
.metric-id { font-weight: 600; white-space: nowrap; }
.metric-table td:nth-child(2) { min-width: 20rem; }
.filter-note { color: var(--ef-text-secondary); font-size: .9rem; }
.data-disclosure { margin-top: 1.25rem; }
.data-disclosure > summary { cursor: pointer; margin-bottom: .75rem; font-weight: 700; }

/* Dimensions ------------------------------------------------------------- */

.dimension-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ef-border-decorative); border-left: 1px solid var(--ef-border-decorative);
}
.dimension-list li + li { margin-top: 0; }
.dimension { padding: 1.2rem 1.25rem; border-right: 1px solid var(--ef-border-decorative); border-bottom: 1px solid var(--ef-border-decorative); background: var(--dk-surface-raised); }
.dimension-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .5rem; }
.dimension h3 { margin: 0; font-size: 1.02rem; }
.dimension p { margin: 0; font-size: .92rem; }

/* Readouts --------------------------------------------------------------- */

.readouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); margin: 0 0 2rem; padding: 0; list-style: none; border-top: 1px solid var(--ef-border-functional); }
.readouts > li + li { margin-top: 0; }
.readout { padding: 1rem 1.25rem 1rem 0; border-bottom: 1px solid var(--ef-border-decorative); }
.readout p { margin: 0; font-size: .88rem; }
.readout .readout-label { color: var(--ef-text-primary); font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.readout .readout-value { margin: .2rem 0 .35rem; color: var(--ef-text-heading); font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.1rem); line-height: 1; font-variant-numeric: tabular-nums; }

/* Charts ----------------------------------------------------------------- */

.chart-figure { margin: 0; }
.chart-scroll { position: relative; max-width: 980px; overflow-x: auto; }
.chart { display: block; width: 100%; min-width: 600px; height: auto; background: var(--dk-surface-raised); border: 1px solid var(--dk-border-decorative); font-family: var(--mono); }
.chart-figure figcaption { max-width: var(--dk-measure); margin-top: .75rem; color: var(--ef-text-secondary); font-size: .88rem; }
.chart text { fill: var(--ef-text-primary); font-size: 12px; }
.chart .chart-tick, .chart .chart-axis-sub { fill: var(--ef-text-secondary); font-size: 11px; }
.chart .chart-axis-label { font-size: 13px; font-weight: 500; }
.chart .chart-axis-title { fill: var(--ef-text-secondary); font-size: 11px; letter-spacing: .04em; }
.chart-grid line { stroke: var(--dk-border-decorative); stroke-width: 1; }
.chart-axis { stroke: var(--ef-border-functional); }
.chart-series { fill: none; stroke: var(--ef-text-primary); stroke-width: 2.5; stroke-linejoin: round; }
.chart-point circle { fill: var(--dk-surface-raised); stroke: var(--ef-text-primary); stroke-width: 2.5; }
.chart-point.is-current circle { fill: var(--dk-tone-bad); stroke: var(--dk-tone-bad); }
.chart-point text { font-weight: 500; }
.chart-reference line { stroke-width: 1.5; }
.chart-reference.is-threshold line { stroke: var(--dk-tone-warn); stroke-dasharray: 2 4; }
.chart-reference.is-threshold text { fill: var(--dk-tone-warn); }
.chart-reference.is-baseline line { stroke: var(--ef-text-secondary); stroke-dasharray: 8 5; }
.chart-reference.is-baseline text { fill: var(--ef-text-secondary); }
.chart-reference.is-best line { stroke: var(--dk-tone-good); }
.chart-reference.is-best text { fill: var(--dk-tone-good); font-weight: 500; }
.chart-gap line { stroke: var(--dk-tone-bad); stroke-width: 4; }
.chart-gap text { fill: var(--dk-tone-bad); font-weight: 500; }
.chart-missing line { stroke: var(--dk-tone-unknown); stroke-dasharray: 3 4; }
.chart-missing text { fill: var(--dk-tone-unknown); }
.quadrant.is-hotspot { fill: rgb(125 71 34 / .08); }
.quadrant-rule { stroke: var(--ef-border-functional); stroke-dasharray: 6 4; }
.quadrant-label { fill: var(--ef-text-secondary); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.hotspot-point circle, .hotspot-point rect { fill: var(--dk-surface-raised); stroke: var(--ef-text-primary); stroke-width: 2; }
.hotspot-point.is-hotspot rect { fill: var(--dk-tone-bad); stroke: var(--dk-tone-bad); }
.hotspot-point.is-hotspot text { fill: var(--dk-tone-bad); font-weight: 500; }
.hotspot-point .region-ring { fill: none; stroke: var(--dk-tone-bad); stroke-width: 1.5; stroke-dasharray: 3 2; }

/* Ratchet ---------------------------------------------------------------- */

.ratchet { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 1fr); gap: 2rem clamp(2rem, 5vw, 5rem); margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--ef-border-functional); }
.ratchet h3 { max-width: 28ch; font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; line-height: 1.15; }
.ratchet p { max-width: var(--dk-measure); }
.gate-list { margin: 0; border-top: 1px solid var(--dk-border-decorative); }
.gate-list > div { padding: 1rem 0; border-bottom: 1px solid var(--dk-border-decorative); }
.gate-list dt { margin-bottom: .5rem; font-weight: 600; }
.gate-list dd { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0; font-family: var(--mono); font-size: .88rem; }

/* Pipeline and triad ----------------------------------------------------- */

.pipeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 3rem; padding: 0; list-style: none; counter-reset: step; }
.pipeline li { position: relative; margin: 0; padding: 1.25rem 1.25rem 1.25rem 0; border-top: 3px solid var(--ef-text-primary); counter-increment: step; }
.pipeline li + li { margin-top: 0; }
.pipeline li:not(:last-child)::after { content: "→"; position: absolute; top: .9rem; right: .6rem; color: var(--ef-text-secondary); font-family: var(--mono); }
.pipeline-step { display: block; margin-bottom: .5rem; color: var(--ef-text-heading); font-family: var(--display); font-size: 1.35rem; }
.pipeline-step::before { content: counter(step, decimal-leading-zero) " "; color: var(--ef-accent-secondary); font-family: var(--mono); font-size: .75rem; vertical-align: middle; }
.pipeline p { margin: 0; font-size: .92rem; }

.triad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ef-border-decorative); border-left: 1px solid var(--ef-border-decorative); }
.triad-item { padding: 1.5rem; border-right: 1px solid var(--ef-border-decorative); border-bottom: 1px solid var(--ef-border-decorative); background: var(--dk-surface-raised); }
.triad-item h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 500; margin-bottom: .5rem; }
.triad-item ul { margin: 0; font-family: var(--mono); font-size: .82rem; }
.triad-item:nth-child(1) { border-top: 4px solid var(--ef-text-primary); }
.triad-item:nth-child(2) { border-top: 4px double var(--ef-text-primary); }
.triad-item:nth-child(3) { border-top: 4px dashed var(--ef-text-primary); }

/* Lifecycle -------------------------------------------------------------- */

.lifecycle { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ef-border-functional); }
.lifecycle-step { margin: 0; padding: 1rem .75rem 1rem 0; border-bottom: 1px solid var(--dk-border-decorative); }
.lifecycle li + li { margin-top: 0; }
.lifecycle-step p { margin: 0 0 .5rem; }
.lifecycle-commit { font-size: .78rem; }
.lifecycle-evidence { font-size: .84rem; }

/* Explainability drill-down --------------------------------------------- */

.drill { border: 1px solid var(--dk-border-decorative); background: var(--dk-surface-raised); }
.drill .drill { margin-top: 1rem; }
.drill > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .9rem 1rem; cursor: pointer; font-weight: 600; list-style: none; }
.drill > summary::-webkit-details-marker { display: none; }
.drill > summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 1px solid var(--ef-border-functional); font-family: var(--mono); }
.drill[open] > summary::before { content: "−"; }
.drill-level { color: var(--ef-accent-secondary); font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.drill-body { margin-left: 1.65rem; padding: 0 1rem 1rem; border-left: 3px solid var(--dk-border-decorative); }
.drill-body > p { max-width: var(--dk-measure); color: var(--ef-text-primary); }

/* Boundaries ------------------------------------------------------------- */

.boundary-list { margin: 0; border-top: 1px solid var(--ef-border-functional); }
.boundary-list > div { display: grid; grid-template-columns: minmax(9rem, .28fr) minmax(0, 1fr); gap: 1rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--dk-border-decorative); }
.boundary-list dt { color: var(--ef-text-heading); font-family: var(--display); font-size: 1.4rem; line-height: 1.2; }
.boundary-list dd { max-width: var(--dk-measure); margin: 0; }
.boundary-list .is-self dt::after { content: " ◆"; color: var(--ef-accent-secondary); font-size: .9rem; }

/* Code ------------------------------------------------------------------- */

.code-block {
  max-width: 100%; margin: 1.5rem 0; padding: 1.25rem; overflow-x: auto;
  background: var(--ef-surface-inverse); color: var(--ef-text-inverse); font-family: var(--mono); font-size: .84rem; line-height: 1.6;
}
.code-block code { font-size: inherit; overflow-wrap: normal; }

/* Definition grids and step lists --------------------------------------- */

.definition-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin: 0; border-top: 1px solid var(--ef-border-decorative); border-left: 1px solid var(--ef-border-decorative); }
.definition-grid > * { padding: 1.25rem; border-right: 1px solid var(--ef-border-decorative); border-bottom: 1px solid var(--ef-border-decorative); background: var(--dk-surface-raised); }
.definition-grid h3 { margin-bottom: .5rem; }
.definition-grid p { margin: 0; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; border-top: 1px solid var(--ef-border-functional); }
.steps > li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; margin: 0; padding: 1.5rem 0; border-bottom: 1px solid var(--dk-border-decorative); counter-increment: step; }
.steps > li::before { content: counter(step, decimal-leading-zero); padding-top: .35rem; color: var(--ef-accent-secondary); font-family: var(--mono); font-size: .9rem; }
.steps h3 { margin-bottom: .4rem; font-family: var(--display); font-size: 1.55rem; font-weight: 500; }
.steps p { max-width: var(--dk-measure); }

/* Responsive recomposition ---------------------------------------------- */

@media (max-width: 1100px) {
  .pipeline { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 1.5rem; }
  .pipeline li:not(:last-child)::after { content: none; }
  .lifecycle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ratchet, .prose-columns, .triad { grid-template-columns: minmax(0, 1fr); }
  .boundary-list > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}
@media (max-width: 680px) {
  .lifecycle { grid-template-columns: minmax(0, 1fr); }
  .lifecycle-step { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .25rem 1rem; }
  .lifecycle-step .lifecycle-evidence { grid-column: 2; }
  .steps > li { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .readout-list dd { font-size: 1.6rem; }
}

@media (forced-colors: active) {
  .state, .status, .hero-readout, .provenance-label, .drill, .table-scroll, .chart { border-color: CanvasText; }
  .chart text { fill: CanvasText; }
  .chart line, .chart polyline, .chart circle, .chart rect { stroke: CanvasText; }
  .chart-point.is-current circle, .hotspot-point.is-hotspot rect { fill: CanvasText; }
  .quadrant.is-hotspot { fill: Canvas; }
}

@media print {
  .site-header, .skip-link, .actions { display: none; }
  body::before { display: none; }
}