/* Overview: three pillar cards (artifact, workflow, benchmark) joined by labelled flow lines (overview.js),
 * each with a small code-drawn illustration, then the headline stats row. Without JS the cards form a plain grid. */

#overview .ov-pillars {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
}
#overview .ov-pillars.flow-on { padding: 80px 0 104px; }

/* ------------------------------------------------------------------ card */
#overview .ov-card {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  padding: 22px 22px 20px;
  border-radius: var(--rad-lg); background: var(--bg); border: 1px solid var(--line);
  transition: transform .6s var(--ease-out), border-color .35s var(--ease), box-shadow .45s var(--ease-out);
}
#overview .ov-card:hover, #overview .ov-card:focus-within { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-md); }
#overview .ov-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#overview .ov-top .nb { width: auto; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; letter-spacing: .02em; }
#overview .ov-kicker { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
#overview .ov-title { font-size: 24px; font-weight: 560; letter-spacing: -.024em; margin: 0; }

#overview .ov-visual {
  position: relative; margin: 16px 0 18px; border-radius: var(--rad); background-color: var(--panel);
  background-image: radial-gradient(var(--dot) .9px, transparent 1.2px); background-size: 12px 12px; background-position: 6px 6px;
  aspect-ratio: 260 / 150; overflow: hidden;
}
#overview .ov-visual { transition: background-color .45s var(--ease); }
#overview .ov-card:hover .ov-visual, #overview .ov-card:focus-within .ov-visual { background-color: color-mix(in srgb, var(--rra-tint) 55%, var(--panel)); }
#overview .ov-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#overview .ov-copy { flex: 1 1 auto; margin: 0 0 16px; font-size: 15.5px; line-height: 1.58; color: var(--ink-2); }
#overview .ov-foot {
  margin: 0 0 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--ink-3); font-variant-numeric: tabular-nums; text-wrap: balance;
}
#overview .ov-foot b { font-weight: 600; color: var(--ink); }
#overview .ov-foot .nw { white-space: nowrap; }
/* the link stretches over the whole card, so the card is one target */
#overview .ov-link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 550; color: var(--rra-ink); text-decoration: none;
}
#overview .ov-link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
#overview .ov-link span { display: inline-block; transition: transform .35s var(--ease-out); }
#overview .ov-card:hover .ov-link span, #overview .ov-link:focus-visible span { transform: translateX(4px); }
#overview .ov-card:hover .ov-link { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--rra) 45%, transparent); }
#overview .ov-link:focus-visible { outline: none; }
#overview .ov-link:focus-visible::after { outline: 2px solid var(--rra); outline-offset: 4px; border-radius: calc(var(--rad-lg) + 4px); }

/* side by side, the cards share row tracks so titles, illustrations, copy and foot lines line up */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1001px) {
    #overview .ov-pillars { grid-template-rows: repeat(6, auto); row-gap: 0; }
    #overview .ov-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
    #overview .ov-card > .ov-title { align-self: start; }
    #overview .ov-card > .ov-link { align-self: end; }
  }
}

/* ------------------------------------------------------------------ mini illustrations */
#overview .ov-visual text { font-family: var(--mono); font-variant-numeric: tabular-nums; }
#overview .m-cap { font-size: 9px; font-weight: 500; letter-spacing: .03em; fill: var(--ink-3); }
#overview .m-cap-rra { fill: var(--rra-ink); font-weight: 600; }
#overview .m-cap-rev { fill: var(--violet-ink); font-weight: 600; letter-spacing: .05em; }

/* 01 artifact: the RRA frame with four component tiles */
#overview .m-frame { fill: color-mix(in srgb, var(--rra-tint) 70%, var(--bg)); stroke: color-mix(in srgb, var(--rra) 42%, transparent); stroke-width: 1; }
#overview .m-band { fill: var(--rra-tint); }
#overview .m-tile { --c: var(--c-code); --t: var(--c-code-tint); }
#overview .m-tile.c-env { --c: var(--c-env); --t: var(--c-env-tint); }
#overview .m-tile.c-launch { --c: var(--c-launch); --t: var(--c-launch-tint); }
#overview .m-tile.c-guide { --c: var(--c-guide); --t: var(--c-guide-tint); }
#overview .m-tile > rect { fill: var(--bg); stroke: color-mix(in srgb, var(--c) 55%, transparent); stroke-width: 1; }
#overview .m-tband { fill: var(--t); }
#overview .m-ic { fill: none; stroke: var(--c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#overview .m-tl { font-size: 8.5px; font-weight: 600; fill: var(--ink-2); }

/* 02 workflow: three stage chips over a dashed reviewer bar */
#overview .m-stage { --c: var(--st-specify); }
#overview .m-stage.s-2 { --c: var(--st-execute); }
#overview .m-stage.s-3 { --c: var(--st-preserve); }
#overview .m-stage rect { fill: color-mix(in srgb, var(--c) 11%, var(--bg)); stroke: color-mix(in srgb, var(--c) 45%, transparent); stroke-width: 1; }
#overview .m-stage circle { fill: var(--c); }
#overview .m-stage .m-role { fill: color-mix(in srgb, var(--c) 55%, transparent); }
#overview .m-num { font-size: 9.5px; font-weight: 700; fill: #fff; }
:root[data-theme="dark"] #overview .m-num { fill: var(--bg); }
#overview .ov-visual .m-sl { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: -.005em; fill: var(--ink); }
#overview .m-arrow { fill: none; stroke: var(--ink-3); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#overview .m-link { fill: none; stroke: var(--violet); stroke-width: 1.2; stroke-dasharray: 2 2.2; }
#overview .m-link-tip { fill: none; stroke: var(--violet); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
#overview .m-rev { fill: var(--violet-tint); stroke: var(--violet); stroke-width: 1.1; stroke-dasharray: 3.5 2.5; }
#overview .m-shield { fill: var(--bg); stroke: var(--violet); stroke-width: 1.3; stroke-linejoin: round; }
#overview .m-shield-ck { fill: none; stroke: var(--violet); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* 03 benchmark: five references, the interval, a filled RRA dot inside and a hollow Raw ring outside */
#overview .m-band-int { fill: var(--rra-tint); stroke: color-mix(in srgb, var(--rra) 50%, transparent); stroke-width: 1; }
#overview .m-mean { stroke: color-mix(in srgb, var(--rra) 55%, transparent); stroke-width: 1; stroke-dasharray: 2 2.5; }
#overview .m-drop { stroke: color-mix(in srgb, var(--rra) 45%, transparent); stroke-width: 1; stroke-dasharray: 2 2.5; }
#overview .m-axis { stroke: var(--line-2); stroke-width: 1.2; stroke-linecap: round; }
#overview .m-ref { fill: var(--ink-2); stroke: var(--panel); stroke-width: 1.2; }
#overview .m-rra { fill: var(--rra); stroke: var(--bg); stroke-width: 1.5; }
#overview .m-raw { fill: var(--bg); stroke: var(--raw); stroke-width: 2.2; }
#overview .ov-card[data-k="bench"] .m-shield { stroke: var(--ink-3); }
#overview .ov-card[data-k="bench"] .m-ck-rra { stroke: var(--rra); stroke-width: 1.5; }

/* ------------------------------------------------------------------ flow lines (overview.js) */
#overview .ov-flow { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#overview .fl { --c: var(--ink-4); --t: var(--ink-3); }
#overview .fl.raw { --c: var(--raw); --t: var(--raw-ink); }
#overview .fl.rra { --c: var(--rra); --t: var(--rra-ink); }
#overview .fl.cut { --c: var(--ink-4); --t: var(--ink-3); }
#overview .fl-path {
  fill: none; stroke: color-mix(in srgb, var(--c) 62%, transparent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 0;
  transition: stroke .35s var(--ease), stroke-width .35s var(--ease), stroke-dashoffset 1.3s var(--ease-out) var(--fd, .35s);
}
#overview .fl.cut .fl-path { stroke-dasharray: 3 4; stroke: var(--ink-4); transition: stroke .35s var(--ease), opacity .8s var(--ease) var(--fd, .35s); }
#overview .fl-tip { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s var(--ease); }
#overview .fl-port { fill: var(--bg); stroke: var(--c); stroke-width: 1.4; }
#overview .fl-port.solid { fill: var(--c); stroke: var(--bg); stroke-width: 1.4; }
#overview .fl-plate { fill: var(--bg); }
#overview .fl-label {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .01em; fill: var(--t);
  dominant-baseline: central; transition: fill .35s var(--ease);
}
#overview .fl-label.src { fill: var(--ink-3); }
#overview .fl-no circle { fill: var(--bg); stroke: var(--ink-3); stroke-width: 1.2; }
#overview .fl-no path { stroke: var(--ink-3); stroke-width: 1.2; stroke-linecap: round; }
/* a card in focus warms its own lines */
#overview .fl.hot .fl-path { stroke: var(--c); stroke-width: 1.7; }
#overview .fl.cut.hot .fl-path { stroke: var(--ink-3); }
#overview .fl.hot .fl-label { font-weight: 600; }

/* entrance: cards rise in turn, then the lines draw in (base.css removes all of this under reduced motion) */
@keyframes ov-rise { from { opacity: 0; transform: translateY(22px); } }
html.js #overview .ov-pillars[data-reveal]:not(.in) .ov-card { opacity: 0; }
html.js #overview .ov-pillars[data-reveal].in .ov-card { animation: ov-rise .95s var(--ease-out) var(--d, 0s) backwards; }
html.js #overview .ov-pillars[data-reveal]:not(.in) .fl-path { stroke-dashoffset: 1; }
html.js #overview .ov-pillars[data-reveal]:not(.in) .fl.cut .fl-path { opacity: 0; }
html.js #overview .ov-pillars[data-reveal] .fl-tip, html.js #overview .ov-pillars[data-reveal] .fl-port, html.js #overview .ov-pillars[data-reveal] .fl-label,
html.js #overview .ov-pillars[data-reveal] .fl-plate, html.js #overview .ov-pillars[data-reveal] .fl-no { opacity: 0; transition: opacity .6s var(--ease) 1.15s; }
html.js #overview .ov-pillars[data-reveal].in .fl-tip, html.js #overview .ov-pillars[data-reveal].in .fl-port, html.js #overview .ov-pillars[data-reveal].in .fl-label,
html.js #overview .ov-pillars[data-reveal].in .fl-plate, html.js #overview .ov-pillars[data-reveal].in .fl-no { opacity: 1; }
/* after the entrance, line colour changes are immediate-feeling */
#overview .ov-pillars.settled .fl-path { transition: stroke .3s var(--ease), stroke-width .3s var(--ease); }

#overview .ov-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
#overview .ov-pillars:not(.flow-on) + .ov-note { margin-top: 20px; }

/* ------------------------------------------------------------------ stats */
#overview .ov-stats { margin-top: 64px; }
#overview .ov-stats .stat { display: flex; flex-direction: column; align-items: flex-start; }
#overview .ov-stats .l { flex: 1 1 auto; text-wrap: pretty; }
#overview .ov-stats .n small { margin: 0 8px 0 4px; }
#overview .ov-rec { color: var(--rra-ink); }
#overview .ov-rev { color: var(--red-ink); }

/* ------------------------------------------------------------------ responsive: stacked cards, lines run through the gaps */
@media (max-width: 1120px) {
  #overview .ov-pillars { gap: 28px; }
  #overview .ov-card { padding: 20px 18px 18px; }
  #overview .ov-title { font-size: 22px; }
  #overview .ov-copy { font-size: 15px; }
  #overview .ov-foot { font-size: 11.5px; }
}
@media (max-width: 1000px) {
  #overview .ov-pillars { grid-template-columns: minmax(0, 580px); justify-content: center; gap: 28px; }
  #overview .ov-pillars.flow-on { gap: 84px; padding: 0 0 8px; }
  #overview .ov-card { padding: 22px 22px 20px; }
  #overview .ov-visual { max-height: 230px; }
  #overview .ov-foot { font-size: 12.5px; }
  #overview .ov-note { justify-content: center; text-align: center; }
}
@media (max-width: 760px) {
  #overview .ov-title { font-size: 22px; }
  #overview .ov-stats .stat { padding: 22px 14px 20px; }
  #overview .ov-stats .stat:nth-child(2n+1) { padding-left: 0; }
  #overview .ov-stats .n { font-size: 30px; white-space: nowrap; }
  #overview .ov-stats .n .from { margin-right: 4px; }
  #overview .ov-stats .n small { margin: 0 5px 0 3px; }
  #overview .ov-pillars.flow-on { gap: 92px; }
  #overview .ov-stats { margin-top: 48px; }
  #overview .ov-note { justify-content: flex-start; text-align: left; }
}

@media (max-width: 400px) {
  #overview .ov-stats .n { font-size: 26px; }
}

@media print {
  #overview .ov-flow { display: none; }
  #overview .ov-pillars.flow-on { padding: 0; gap: 24px; }
  #overview .ov-pillars .ov-card { opacity: 1 !important; animation: none !important; }
}