/* ============================================================
   Components - editorial systems publication
   ============================================================ */

/* ---------- metrics: editorial evidence, not dashboard cards ---------- */
.metrics{
  display:grid;gap:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
}
.metric{border-top:2px solid var(--ink);padding-top:.9rem}
.metric .value{
  font-family:var(--serif);font-size:var(--step-3);line-height:1;
  letter-spacing:-.02em;display:block;font-variant-numeric:tabular-nums;
}
.metric .value em{font-style:normal;color:var(--accent)}
.metric .label{font-family:var(--mono);font-size:var(--step--1);color:var(--ink);margin-top:.55rem;display:block}
.metric .context{font-size:var(--step--1);color:var(--ink-faint);margin-top:.45rem;max-width:30ch;line-height:1.5}

/* comparison figure (legacy vs new platform) */
.comparison{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
  max-width:46rem;
}
.comparison > div{padding:1.6rem 1.4rem}
.comparison > div + div{border-left:1px solid var(--rule);background:var(--accent-soft)}
.comparison .mono{display:block;margin-bottom:.9rem}
.comparison .big{font-family:var(--serif);font-size:var(--step-2);line-height:1.05;font-variant-numeric:tabular-nums}
.comparison .sub{font-size:var(--step--1);color:var(--ink-soft);margin-top:.6rem;line-height:1.5}
@media (max-width:34rem){
  .comparison{grid-template-columns:1fr}
  .comparison > div + div{border-left:none;border-top:1px solid var(--rule)}
}

/* ============================================================
   Diagram grammar - one visual language for every system diagram
   n-input   dashed          → inputs / data sources
   n-agent   left accent bar → specialist agents
   n-orch    2px border      → orchestration
   n-gate    accent border   → governance / quality gates
   n-human   filled ink      → human judgment
   n-auto    filled accent   → autonomous execution
   n-output  bottom rule     → outputs / artifacts
   ============================================================ */
.diagram{margin:2.4rem 0;max-width:var(--wide)}
.diagram figcaption{margin-top:1.1rem;font-size:var(--step--1);color:var(--ink-soft);max-width:56ch;line-height:1.55}
.diagram figcaption a{color:var(--accent)}

.dg{display:flex;flex-direction:column;align-items:center}
.dg .node{
  border:1px solid var(--ink);background:var(--paper);
  padding:.65rem 1.15rem;text-align:center;
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.03em;
  max-width:24rem;width:100%;color:var(--ink);
}
.dg .node small{display:block;color:var(--ink-faint);font-size:.72rem;margin-top:.25rem;letter-spacing:.02em}
.dg .node--wide{max-width:36rem}
.dg .n-input{border-style:dashed;color:var(--ink-soft)}
.dg .n-agent{border-left:3px solid var(--accent);text-align:left}
.dg .n-orch{border-width:2px}
.dg .n-gate{border-color:var(--accent);color:var(--accent)}
.dg .n-human{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dg .n-human small{color:var(--rule)}
.dg .n-auto{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.dg .n-auto small{color:rgba(247,245,240,.75)}
.dg .n-output{border:none;border-bottom:2px solid var(--ink);padding-bottom:.45rem}
.dg .connector{width:1px;height:1.9rem;background:var(--dg-line);position:relative;flex-shrink:0}
.dg .connector::after{
  content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--dg-line);
}
.dg .connector--label{height:auto;padding:.35rem 0}
.dg .connector--label::after{display:none}
.dg .connector--label span{
  font-family:var(--mono);font-size:.72rem;color:var(--ink-faint);
  background:var(--paper);padding:0 .6rem;letter-spacing:.03em;
}
.dg .branch{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.8rem;width:100%;max-width:46rem}
.dg .branch .node{max-width:none}
.dg .join{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;width:100%;max-width:46rem}
.dg .join--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:34rem){.dg .join,.dg .join--3{grid-template-columns:1fr}}

/* diagram legend */
.dg-legend{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;list-style:none;
  margin-top:1.2rem;font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);
}
.dg-legend li{display:flex;align-items:center;gap:.45rem}
.dg-legend .sw{width:.85rem;height:.85rem;border:1px solid var(--ink);flex-shrink:0}
.dg-legend .sw--input{border-style:dashed}
.dg-legend .sw--agent{border-left:3px solid var(--accent)}
.dg-legend .sw--orch{border-width:2px}
.dg-legend .sw--gate{border-color:var(--accent)}
.dg-legend .sw--human{background:var(--ink)}
.dg-legend .sw--auto{background:var(--accent);border-color:var(--accent)}
.dg-legend .sw--output{border:none;border-bottom:2px solid var(--ink)}

/* legacy flow aliases (kept for older markup) */
.flow{display:flex;flex-direction:column;align-items:center;gap:0}
.flow .node{border:1px solid var(--ink);background:var(--paper);padding:.7rem 1.2rem;text-align:center;font-family:var(--mono);font-size:var(--step--1);letter-spacing:.03em;max-width:22rem;width:100%}
.flow .node--accent{border-color:var(--accent);color:var(--accent)}
.flow .node--wide{max-width:34rem}
.flow .connector{width:1px;height:2rem;background:var(--ink);position:relative}
.flow .connector::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink)}
.flow .branch{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1rem;width:100%;max-width:44rem}
.flow .branch .node{max-width:none}
.flow .bar{width:100%;max-width:44rem;height:1px;background:var(--ink);margin:.5rem 0}
.flow .join{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;max-width:44rem}
@media (max-width:34rem){.flow .join{grid-template-columns:1fr}}

/* tree diagram (semantic architecture) */
.tree{
  font-family:var(--mono);font-size:var(--step--1);line-height:2.1;color:var(--ink-soft);
  background:var(--paper-2);padding:1.4rem 1.6rem;overflow-x:auto;
}
.tree b{color:var(--ink);font-weight:600}
.tree .accent{color:var(--accent)}

/* ============================================================
   Relationship map - Work ↔ Systems matrix
   A real table: relationships readable without JS.
   ============================================================ */
.relmap{overflow-x:auto;border-top:2px solid var(--ink)}
.relmap table{border-collapse:collapse;width:100%;min-width:46rem}
.relmap caption{text-align:left;font-size:var(--step--1);color:var(--ink-faint);padding:.8rem 0;caption-side:bottom;max-width:56ch}
.relmap th,.relmap td{padding:1rem .9rem;border-bottom:1px solid var(--rule);vertical-align:top}
.relmap thead th{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--ink-soft);
  font-weight:400;text-align:left;max-width:9rem;
}
.relmap thead a{color:var(--ink)}
.relmap thead a:hover{color:var(--accent)}
.relmap tbody th{
  text-align:left;font-family:var(--serif);font-weight:400;
  font-size:var(--step-1);line-height:1.25;max-width:13rem;
}
.relmap tbody th .num{font-family:var(--mono);font-size:.72rem;color:var(--accent);display:block;margin-bottom:.35rem}
.relmap tbody th a:hover{color:var(--accent)}
.relmap td{text-align:center}
.relmap .dot{
  display:inline-block;width:1.05rem;height:1.05rem;border-radius:50%;
  background:var(--ink);position:relative;
}
.relmap .dot--shared{background:var(--accent)}
.relmap .dot::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--paper);
  transform:scale(0);transition:transform .2s ease;
}
.relmap tr:hover .dot::after,.relmap a:focus .dot::after{transform:scale(.35)}
.relmap tr:hover{background:var(--paper-2)}
.relmap td a{display:inline-block;padding:.4rem}
@media (max-width:52rem){
  .relmap{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
}

/* ============================================================
   Work compositions
   ============================================================ */

/* homepage: asymmetric editorial work index */
.work-ed{list-style:none;counter-reset:work}
.work-ed li{
  display:grid;gap:.8rem;align-items:start;
  padding:2.6rem 0;border-bottom:1px solid var(--rule);
}
.work-ed li:first-child{border-top:1px solid var(--ink)}
@media(min-width:56rem){
  .work-ed li{grid-template-columns:5rem 1.15fr 1.35fr;gap:2.5rem}
  .work-ed li:nth-child(even) .work-ed-main{order:3}
  .work-ed li:nth-child(even) .work-ed-side{order:2}
  .work-ed li:nth-child(even) .work-ed-idx{order:1}
}
.work-ed-idx{
  font-family:var(--serif);font-size:var(--step-3);line-height:1;color:var(--rule);
  font-variant-numeric:tabular-nums;
}
.work-ed li:hover .work-ed-idx{color:var(--accent)}
.work-ed-main h3{font-size:var(--step-2);margin-bottom:.5rem}
.work-ed-main h3 a:hover{color:var(--accent)}
.work-ed-main .consequence{color:var(--ink-soft);max-width:38ch}
.work-ed-side{display:grid;gap:1rem;align-content:start}
.work-ed-side .fact{
  font-family:var(--serif);font-size:var(--step-1);color:var(--ink);line-height:1.3;
}
.work-ed-side .fact span{font-family:var(--mono);font-size:.72rem;color:var(--ink-faint);display:block;margin-bottom:.3rem}
.work-ed-side .fact a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.work-ed-side .fact a:hover{color:var(--accent)}
.work-ed-side .sys{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;list-style:none;border-top:1px solid var(--rule);padding-top:.8rem}
.work-ed-side .sys a{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft)}
.work-ed-side .sys a:hover{color:var(--accent)}

/* work overview: quick-select list */
.work-select{list-style:none;display:grid}
.work-select li{border-bottom:1px solid var(--rule)}
.work-select a{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:baseline;
  padding:1.5rem 0;
}
.work-select .idx{font-family:var(--mono);font-size:var(--step--1);color:var(--accent)}
.work-select .name{font-family:var(--serif);font-size:var(--step-2);line-height:1.1}
.work-select .result{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-faint);text-align:right}
.work-select a:hover .name{color:var(--accent)}
@media (max-width:40rem){.work-select a{grid-template-columns:auto 1fr}.work-select .result{display:none}}

/* ============================================================
   Ownership - allocation made visible
   ============================================================ */
.ownership{
  display:grid;gap:1px;background:var(--rule);
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
  margin:2.2rem 0;
}
.ownership--2{grid-template-columns:1fr}
.ownership--3{grid-template-columns:1fr}
.ownership--4{grid-template-columns:1fr}
@media(min-width:44rem){
  .ownership--2{grid-template-columns:1fr 1fr}
  .ownership--3{grid-template-columns:1fr 1fr 1fr}
  .ownership--4{grid-template-columns:1fr 1fr}
}
@media(min-width:64rem){.ownership--4{grid-template-columns:repeat(4,1fr)}}
.ownership>div{background:var(--paper);padding:1.4rem}
.ownership h3{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:1rem;display:flex;align-items:center;gap:.6rem;
}
.ownership h3::before{content:"";width:.8rem;height:.8rem;flex-shrink:0;border:1px solid var(--ink)}
.ownership .own-self h3::before{background:var(--ink)}
.ownership .own-team h3::before{border-left:3px solid var(--accent)}
.ownership .own-ext h3::before{border-style:dashed}
.ownership .own-ai h3::before{background:var(--accent);border-color:var(--accent)}
.ownership ul{list-style:none;font-size:var(--step--1);color:var(--ink-soft)}
.ownership li{padding:.4rem 0;border-bottom:1px dotted var(--rule);line-height:1.5}
.ownership li:last-child{border-bottom:none}

/* ---------- status / labels ---------- */
.status{
  display:inline-block;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;
  border:1px solid currentColor;padding:.25rem .65rem;vertical-align:middle;
}
.status--progress{color:var(--accent)}
.status--live{color:var(--ink-soft)}

/* ---------- related content ---------- */
.related{border-top:2px solid var(--ink);padding-top:1.5rem;margin-top:3rem}
.related ul{list-style:none;display:grid;gap:1rem;margin-top:1.2rem}
@media(min-width:48rem){.related ul{grid-template-columns:1fr 1fr 1fr}}
.related a{font-family:var(--serif);font-size:var(--step-1);line-height:1.25;display:block}
.related a:hover{color:var(--accent)}
.related .kind{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-faint);display:block;margin-bottom:.35rem}

/* ---------- systems index ---------- */
.sys-index-group{margin-bottom:4rem}
.sys-index-group>h2{border-bottom:1px solid var(--ink);padding-bottom:.7rem;margin-bottom:0}
.sys-row{
  display:grid;grid-template-columns:1fr;gap:.5rem;
  padding:1.8rem 0;border-bottom:1px solid var(--rule);
}
@media(min-width:52rem){.sys-row{grid-template-columns:3.5rem 1.25fr 1.6fr 11rem;gap:1.8rem;align-items:baseline}}
.sys-row .idx{font-family:var(--mono);color:var(--accent);font-size:var(--step--1)}
.sys-row h3 a:hover{color:var(--accent)}
.sys-row p{font-size:var(--step--1);color:var(--ink-soft);line-height:1.6}
.sys-row .meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--ink-faint);line-height:1.7}
.sys-row .meta b{color:var(--accent);font-weight:400}
.sys-row .meta a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.sys-row .meta a:hover{color:var(--accent)}

/* ---------- notes ---------- */
.note-list{list-style:none}
.note-list li{
  padding:2.4rem 0;border-bottom:1px solid var(--rule);
  display:grid;gap:.6rem;
}
.note-list li:first-child{border-top:1px solid var(--ink)}
@media(min-width:56rem){.note-list li{grid-template-columns:9rem 1fr;gap:2.5rem}}
.note-list .mono{padding-top:.5rem}
.note-list h2,.note-list h3{font-size:var(--step-2);max-width:22ch}
.note-list h2 a:hover,.note-list h3 a:hover{color:var(--accent)}
.note-list p{color:var(--ink-soft);max-width:52ch}
.note-head{border-bottom:2px solid var(--ink);padding-bottom:2.2rem;margin-bottom:2.8rem}
.note-head h1{margin:.5rem 0 1.1rem;max-width:16ch}
.dossier-dl{margin-top:2.4rem}
.dossier-dl a{font-family:var(--serif);font-size:var(--step-1)}

/* ---------- timeline (about) ---------- */
.timeline{list-style:none;border-left:1px solid var(--ink);margin:2.2rem 0 2.2rem .4rem}
.timeline li{position:relative;padding:0 0 2.2rem 1.9rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:-5px;top:.45rem;width:9px;height:9px;
  background:var(--paper);border:1px solid var(--accent);border-radius:50%;
}
.timeline .mono{display:block;margin-bottom:.25rem;color:var(--accent)}
.timeline strong{font-family:var(--serif);font-weight:400;font-size:var(--step-1);display:block;margin-bottom:.3rem}
.timeline p{color:var(--ink-soft);font-size:var(--step--1);max-width:52ch;line-height:1.6}
.timeline a{color:var(--accent)}

/* ---------- capability groups ---------- */
.cap-grid{display:grid;gap:1px;background:var(--rule);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
@media(min-width:40rem){.cap-grid{grid-template-columns:1fr 1fr}}
@media(min-width:64rem){.cap-grid{grid-template-columns:repeat(3,1fr)}}
.cap-grid>div{background:var(--paper);padding:1.5rem}
.cap-grid h3{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.8rem;color:var(--accent)}
.cap-grid p{font-size:var(--step--1);color:var(--ink-soft);line-height:1.6}
.cap-grid a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.cap-grid a:hover{color:var(--accent)}

/* ---------- contact block ---------- */
.contact-block{
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
  padding:clamp(1.8rem,5vw,3.5rem) 0;max-width:56rem;
}
.contact-block h2{margin:.6rem 0 1.2rem;max-width:36rem}
.contact-block .note{color:var(--ink-soft);max-width:42rem;margin:0 0 1.3rem;line-height:1.55}
.contact-block .mono a{color:var(--accent)}