/* RIVET — GTM/Revenue Agents page · dark OS surface · builds on os-dark.css + os-overview.css */

/* ---- Hero figure: the agent field (count the nodes) ---- */
.afield{ display:flex; flex-direction:column; gap:12px; width:100%; max-width:920px; margin:clamp(30px,4vw,48px) auto 0; text-align:left; }
.alanes{ display:flex; flex-direction:column; gap:10px; }
.alane{ display:grid; grid-template-columns:minmax(150px,210px) 1fr auto; align-items:center; gap:16px; padding:14px 18px; border:1px solid var(--line); border-radius:14px; background:var(--card-bg); outline:0; transition:border-color .2s, opacity .25s; }
.alane__k{ display:flex; flex-direction:column; gap:3px; font-weight:600; font-size:.95rem; color:var(--fg); }
.alane__k em{ font-style:normal; font-weight:400; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-mute); }
.alane__dots{ display:flex; flex-wrap:wrap; gap:7px; }
.alane__dots i{ width:12px; height:12px; border-radius:50%; border:1.5px solid var(--gc); background:color-mix(in oklab,var(--gc) 20%,transparent); transition:background .2s, box-shadow .2s; }
.alane__n{ font-family:var(--font-mono); font-size:1.5rem; line-height:1; color:var(--fg); font-variant-numeric:tabular-nums; min-width:2ch; text-align:right; }
.alane:hover, .alane:focus-visible, .alane.is-on{ border-color:color-mix(in oklab,var(--gc) 60%,var(--line)); }
.alane:hover .alane__dots i, .alane:focus-visible .alane__dots i, .alane.is-on .alane__dots i{ background:var(--gc); box-shadow:0 0 9px color-mix(in oklab,var(--gc) 70%,transparent); }
.afield.is-lane .alane:not(.is-on){ opacity:.42; }
.afield.is-spine .alane__dots i{ background:var(--fg); border-color:var(--fg); }

.aspine{ position:relative; border:1px solid color-mix(in oklab,var(--magenta) 38%,var(--line)); border-radius:14px; padding:16px 18px 18px; background:linear-gradient(180deg,rgba(255,0,212,.07),transparent 72%),var(--card-bg); outline:0; transition:border-color .2s, opacity .25s; }
.aspine:hover, .aspine:focus-visible, .aspine.is-on{ border-color:color-mix(in oklab,var(--magenta) 70%,var(--line)); }
.afield.is-lane .aspine{ opacity:.55; }
.aspine__k{ display:block; margin-bottom:12px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-soft); }
.aspine__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.aspine__list li{ padding:9px 11px; border:1px solid var(--line-strong); border-radius:9px; font-size:.8rem; line-height:1.3; color:var(--fg); background:rgba(255,255,255,.02); }
.afield__read{ min-height:3.1em; margin:4px 0 0; text-align:center; font-family:var(--font-mono); font-size:.78rem; line-height:1.55; color:var(--fg-soft); text-wrap:balance; }
.afield__read b{ color:var(--cyan); font-weight:500; }
@media (max-width:760px){
  .alane{ grid-template-columns:1fr auto; }
  .alane__dots{ grid-column:1 / -1; order:3; }
  .aspine__list{ grid-template-columns:1fr 1fr; }
}

/* ---- Ceilings: an agent runs at the lowest of three ---- */
.ceil{ border:1px solid var(--line); border-radius:16px; background:var(--card-bg); padding:clamp(18px,2.4vw,28px); display:flex; flex-direction:column; gap:20px; width:100%; }
.ceil__row{ display:grid; gap:8px; }
.ceil__top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.ceil__k{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); }
.ceil__v{ font-family:var(--font-mono); font-size:.8rem; color:var(--fg); }
.ceil__row.is-bind .ceil__k{ color:var(--amber); }
.ceil__row.is-bind .ceil__v{ color:var(--amber); }
.ceil input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:44px; margin:0; background:transparent; cursor:pointer; }
.ceil input[type=range]::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:linear-gradient(90deg,var(--cyan) var(--p,50%),var(--line-strong) var(--p,50%)); }
.ceil input[type=range]::-moz-range-track{ height:6px; border-radius:3px; background:linear-gradient(90deg,var(--cyan) var(--p,50%),var(--line-strong) var(--p,50%)); }
.ceil input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; margin-top:-8px; border-radius:50%; background:#fff; border:3px solid var(--cyan); box-shadow:0 0 0 4px rgba(76,243,254,.14); }
.ceil input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--cyan); }
.ceil__row.is-bind input[type=range]::-webkit-slider-runnable-track{ background:linear-gradient(90deg,var(--amber) var(--p,50%),var(--line-strong) var(--p,50%)); }
.ceil__row.is-bind input[type=range]::-moz-range-track{ background:linear-gradient(90deg,var(--amber) var(--p,50%),var(--line-strong) var(--p,50%)); }
.ceil__row.is-bind input[type=range]::-webkit-slider-thumb{ border-color:var(--amber); box-shadow:0 0 0 4px rgba(245,194,75,.16); }
.ceil input[type=range]:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; border-radius:8px; }
.ceil__out{ border-top:1px solid var(--line); padding-top:18px; display:grid; gap:10px; }
.ceil__outk{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); }
.ceil__lvl{ font-size:var(--step-3,1.9rem); font-weight:600; letter-spacing:-.02em; line-height:1.05; color:var(--fg); }
.ceil__rungs{ display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.ceil__rungs i{ height:6px; border-radius:3px; background:var(--line-strong); transition:background .25s; }
.ceil__rungs i.is-on{ background:var(--cyan); }
.ceil__who{ margin:0; color:var(--fg-soft); font-size:.9rem; line-height:1.55; }
.ceil__who b{ color:var(--fg); font-weight:600; }
.ceil__why{ margin:0; font-family:var(--font-mono); font-size:.74rem; color:var(--amber); }

/* ---- Human-only gates ---- */
.agate{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,18px); }
.agate li{ border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--card-bg); display:flex; flex-direction:column; gap:10px; }
.agate li span{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute); }
.agate li b{ font-size:var(--step-1); font-weight:600; letter-spacing:-.01em; line-height:1.2; color:var(--fg); }
.agate__cap{ margin:18px 0 0; text-align:center; font-family:var(--font-mono); font-size:.78rem; color:var(--fg-soft); }
.agate__cap b{ color:var(--cyan); font-weight:500; }
@media (max-width:900px){ .agate{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .agate{ grid-template-columns:1fr; } }

/* ---- Relay: one output in, one output out ---- */
.relay{ list-style:none; counter-reset:r; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,26px); }
.rnode{ position:relative; counter-increment:r; display:flex; flex-direction:column; gap:7px; padding:18px 16px 16px; border:1px solid var(--line); border-radius:14px; background:var(--card-bg); outline:0; transition:border-color .2s, background .2s; }
.rnode::before{ content:counter(r,decimal-leading-zero); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; color:var(--fg-mute); }
.rnode__cr{ position:absolute; top:14px; right:14px; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; color:var(--cyan); border:1px solid color-mix(in oklab,var(--cyan) 38%,var(--line)); border-radius:5px; padding:1px 6px; }
.rnode b{ font-size:var(--step-0); font-weight:600; letter-spacing:-.01em; color:var(--fg); }
.rnode p{ margin:0; color:var(--fg-soft); font-size:.84rem; line-height:1.5; }
.rnode__out{ margin-top:auto; padding-top:8px; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.02em; line-height:1.4; color:var(--cyan); }
.rnode__gate{ align-self:flex-start; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); border:1px solid color-mix(in oklab,var(--amber) 40%,var(--line)); border-radius:5px; padding:2px 7px; }
.rnode:not(:nth-child(4n))::after{ content:"→"; position:absolute; right:calc(-1 * clamp(14px,2vw,26px) / 2 - 7px); top:50%; width:14px; text-align:center; transform:translateY(-50%); color:var(--cyan); font-size:.95rem; line-height:1; z-index:2; }
.rnode:hover, .rnode:focus-visible{ border-color:color-mix(in oklab,var(--cyan) 55%,var(--line)); }
.rnode:hover + .rnode, .rnode:focus-visible + .rnode{ border-color:var(--cyan); background:color-mix(in oklab,var(--cyan) 7%,var(--card-bg)); }
.rnode--end{ border-style:dashed; border-color:var(--line-strong); background:transparent; }
.rnode--end .rnode__cr{ color:var(--amber); border-color:color-mix(in oklab,var(--amber) 40%,var(--line)); }
@media (max-width:980px){
  .relay{ grid-template-columns:1fr 1fr; }
  .rnode:not(:nth-child(4n))::after{ content:"→"; }
  .rnode:nth-child(2n)::after{ content:none; }
}
@media (max-width:560px){
  .relay{ grid-template-columns:1fr; }
  .rnode:not(:last-child)::after, .rnode:nth-child(2n)::after{ content:"↓"; right:auto; left:50%; top:auto; bottom:calc(-1 * clamp(14px,2vw,26px) / 2 - 9px); transform:translateX(-50%); }
  .rnode:last-child::after{ content:none; }
}
.relay__note{ margin:18px 0 0; text-align:center; font-family:var(--font-mono); font-size:.76rem; color:var(--fg-mute); }

/* ---- Prereq line ---- */
.ovcta__prereq{ margin:14px 0 0; font-family:var(--font-mono); font-size:.74rem; line-height:1.55; color:var(--fg-soft); max-width:56ch; }
.ovcta__prereq b{ color:var(--fg); font-weight:500; }

@media (prefers-reduced-motion:reduce){
  .alane, .aspine, .alane__dots i, .rnode, .ceil__rungs i{ transition:none; }
}