/* site-v2 · /architecture ("How it works"): the page's own compositions. Shared system: site.css. */

/* hero: the rings plate and its parts list */
.arch-hero { padding-bottom: 8vh; }
.rings { position: relative; margin: 0; }
.rings__stage { position: relative; height: 560px; }
.rings__cv { position: absolute; left: 0; top: 0; }
.rings__svg { position: absolute; left: 0; top: 0; overflow: visible; }
.rings__svg .fr { fill: none; stroke: rgb(var(--ink-rgb) / .3); stroke-width: 1; shape-rendering: crispEdges; }
.rings__svg .reg { stroke: rgb(var(--ink-rgb) / .7); stroke-width: 1; shape-rendering: crispEdges; }
.rings__svg .ol { fill: none; stroke: rgb(var(--ink-rgb) / .7); stroke-width: 1; shape-rendering: crispEdges; }
.rings__svg .core { fill: none; stroke: var(--ink); stroke-width: 1; shape-rendering: crispEdges; }
.rings__svg .ld { stroke: rgb(var(--ink-rgb) / .5); stroke-width: 1; shape-rendering: crispEdges; }
.rings__svg .port { fill: var(--node); stroke: var(--ink); stroke-width: 1; shape-rendering: crispEdges; }
.rings__svg .fan { fill: none; stroke: rgb(var(--ink-rgb) / .42); stroke-width: 1; }
.rings__tag, .rings__lab { position: absolute; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; line-height: 14px; color: var(--ink); white-space: nowrap; pointer-events: none; }
.rings__tag i { display: block; margin-top: 3px; font-style: normal; letter-spacing: .02em; text-transform: none; font-size: 11px; color: var(--stone); }
.rings__tag--machine { color: var(--stone); }
.rings__lab b { margin-right: 8px; font-family: var(--pixel); font-weight: 800; font-size: 13px; letter-spacing: .04em; color: var(--stone); }
.rings__lab--port { letter-spacing: .16em; }
.rings__layers { position: relative; display: grid; gap: 0; margin-top: var(--s4); border-top: 1px solid var(--ink); }
.rings__layers li { display: grid; grid-template-columns: 200px minmax(0, 1fr) 190px; column-gap: var(--s4); padding: 14px 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .22); }
.rings__n { font-family: var(--display); font-weight: 440; font-stretch: 104%; font-size: 17px; line-height: 1.3; }
.rings__n b { display: inline-block; width: 26px; font-family: var(--pixel); font-weight: 800; font-size: 14px; color: var(--stone); }
.rings__p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.rings__pkg { font-family: var(--mono); font-size: 10.5px; line-height: 1.6; color: var(--stone); text-align: right; }

/* 01 · the capabilities table */
.caps td:nth-child(2) { width: 25%; }
.caps td:nth-child(3) { width: 33%; }
.caps td:nth-child(2) p:not(.t) { font-size: 14.5px; }
.caps td .link { margin-left: 4px; }

/* 02 · chokepoints, each with its span across a run */
.chokes td.k { width: 22%; }
.chokes td:nth-child(2) { width: 14%; white-space: nowrap; }
.chokes td:nth-child(3) { width: 30%; }
.chokes__axis { position: relative; }
.chokes__axis span { position: absolute; bottom: 16px; font-size: 9.5px; letter-spacing: .14em; white-space: nowrap; }
.chokes__axis span:nth-child(1) { left: 0; }
.chokes__axis span:nth-child(2) { left: 20%; }
.chokes__axis span:nth-child(3) { right: 0; text-transform: none; letter-spacing: .02em; }
.chokes__lane { position: relative; }
.chokes__lane canvas { position: absolute; left: 0; top: var(--s4); }
.chokes__note { margin-top: var(--s5); max-width: 640px; }

/* 03 · the isolation floor */
.floor__caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.floor__caps legend { margin-bottom: var(--s3); padding: 0; }
.floor__caps .tog code { font-size: 12.5px; }
.floor__plate { position: relative; margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--ink); }
.floor__cv { display: block; }
.floor__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.floor__steps span.is-floor { color: var(--ink); }
.floor__steps span.is-decl { text-decoration: underline; text-underline-offset: 4px; color: var(--ink); }
.floor__steps span.is-bad { background: var(--ink); color: var(--paper); justify-self: start; padding: 0 4px; }
.floor__decl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: var(--s5); }
.floor__decl .mono-l { color: var(--ink); }
.floor__decl .mono-l code { text-transform: none; letter-spacing: 0; }
.floor__out { margin-top: var(--s4); min-height: 66px; padding: 12px 14px; border: 1px solid rgb(var(--ink-rgb) / .4); font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }
.floor__out .err { background: var(--ink); color: var(--paper); }
.floor__out .mut { color: var(--stone); }

/* 04 · backends: the split is the comparison */
.be__head { max-width: 560px; margin-bottom: var(--s7); }
.be__t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.be__t col:first-child { width: 150px; }
.be__t th, .be__t td { padding: 18px 0; vertical-align: top; text-align: left; font-size: 15px; line-height: 1.55; }
.be__t thead th { padding-bottom: 14px; font-family: var(--display); font-weight: 400; font-stretch: 104%; font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -0.03em; line-height: 1; border-bottom: 1px solid var(--ink); }
.be__t thead th:nth-child(1) { width: 150px; border-bottom-color: var(--ink); }
.be__t thead th:nth-child(2) { width: calc(50% - 150px); padding-right: 48px; }
.be__t thead th:nth-child(3) { padding-left: 48px; color: var(--paper); border-bottom-color: var(--paper); }
.be__t tbody th { font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); padding-top: 22px; border-bottom: 1px solid rgb(var(--ink-rgb) / .22); }
.be__t tbody td:nth-child(2) { padding-right: 48px; color: var(--ink-2); border-bottom: 1px solid rgb(var(--ink-rgb) / .22); }
.be__t tbody td:nth-child(3) { padding-left: 48px; color: rgba(236, 232, 224, .78); border-bottom: 1px solid rgba(236, 232, 224, .2); }
.be__t tbody td:nth-child(3) code { color: var(--paper); }
.be__note { max-width: 520px; margin-top: var(--s5); }

/* 05 · the tool call: steps left, the path drawn right (sticky) */
.tc { margin-top: var(--s6); }
.tc li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: var(--s4) 0 calc(var(--s7) + 6vh); border-top: 1px solid rgb(var(--ink-rgb) / .22); opacity: .42; transition: opacity .3s; }
.tc li.is-on { opacity: 1; }
.tc__n { grid-row: 1 / span 2; font-family: var(--pixel); font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--ink); }
.tc__h { font-family: var(--display); font-weight: 420; font-stretch: 104%; font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; }
.tc__p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 440px; }
.tc__plate { position: relative; }
.path { position: sticky; top: calc(58px + 6vh); margin: 0; height: min(78vh, 700px); }
.path__cv, .path__svg { position: absolute; left: 0; top: 0; }
.path__svg { overflow: visible; }
.path__svg .ln { fill: none; stroke: rgb(var(--ink-rgb) / .35); stroke-width: 1; shape-rendering: crispEdges; }
.path__svg .ln.dot { stroke-dasharray: 1 4; }
.path__svg .ln.on { stroke: var(--ink); }
.path__svg .bx { fill: none; stroke: rgb(var(--ink-rgb) / .65); stroke-width: 1; shape-rendering: crispEdges; }
.path__svg .wall { stroke: var(--ink); stroke-width: 1; shape-rendering: crispEdges; }
.path__svg .nd { fill: var(--node); stroke: var(--ink); stroke-width: 1; shape-rendering: crispEdges; transition: fill .2s; }
.path__svg .nd.on { fill: var(--ink); }
.path__labels span { position: absolute; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; line-height: 14px; color: var(--ink-2); white-space: nowrap; padding: 0 3px; transition: background .2s, color .2s; }
.path__labels span.on { background: var(--ink); color: var(--paper); }
.path__labels span.tag { color: var(--stone); letter-spacing: .2em; }
.path__labels span.tag i { display: block; font-style: normal; text-transform: none; letter-spacing: 0; font-size: 11px; }

/* 06 · the Agentfile */
.af__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); margin-bottom: var(--s4); color: var(--paper); }
.af__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.af__legend .lbl { margin-left: 8px; }
.af__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s6); align-items: start; }
.af__code { margin-top: 0; }
.af__lines { padding: 10px 0 14px; font-family: var(--mono); font-size: 13px; line-height: 1.62; }
.afl { display: grid; grid-template-columns: 34px 22px minmax(0, 1fr); align-items: center; width: 100%; padding: 0 14px 0 0; text-align: left; color: rgba(236, 232, 224, .82); white-space: pre; }
button.afl:hover, button.afl.sel { background: rgba(236, 232, 224, .08); }
button.afl.sel { box-shadow: inset 2px 0 0 var(--paper); }
.afl.dim { opacity: .28; }
.afl .n { text-align: right; padding-right: 12px; color: rgba(236, 232, 224, .62); font-size: 11px; }
.afl .t { overflow: hidden; text-overflow: ellipsis; }
.afl .t i { font-style: normal; }
.afl .t .k { color: var(--paper); }
.afl .t .c { color: rgba(236, 232, 224, .62); }
.lbl { display: inline-block; width: 11px; height: 11px; font-size: 0; color: transparent; vertical-align: -1px; }
.lbl-E { background: var(--paper); }
.lbl-V { background: repeating-conic-gradient(var(--paper) 0 25%, transparent 0 50%) 0 0 / 2px 2px; }
.lbl-D { background: radial-gradient(var(--paper) 0 .55px, transparent .6px) 0 0 / 3px 3px; box-shadow: inset 0 0 0 1px rgba(236, 232, 224, .35); }
.lbl-I { box-shadow: inset 0 0 0 1px var(--paper); }
.af__note { position: sticky; top: calc(58px + 8vh); padding-top: var(--s4); border-top: 1px solid var(--paper); }
.af__lab { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper); }
.af__lab .lbl { width: auto; height: auto; font-size: 10.5px; color: var(--ink); background: var(--paper); padding: 2px 6px; box-shadow: none; }
.af__key { margin-top: var(--s4); font-family: var(--display); font-size: 22px; }
.af__key code { font-size: 17px; color: var(--paper); }
.af__txt { margin-top: var(--s3); font-size: 15.5px; line-height: 1.62; color: rgba(236, 232, 224, .76); }
.af__txt code { color: var(--paper); }
.af .links { margin-top: var(--s5); }

/* 07 · host-only */
.host { display: grid; border-top: 1px solid var(--ink); }
.host > div { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--s4); padding: 18px 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .22); }
.host dt code { font-size: 13px; color: var(--ink); }
.host dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

@media (max-width: 1180px) and (min-width: 760px) {
  .phero.arch-hero { grid-template-columns: minmax(0, 1fr); }
  .rings { margin-top: var(--s6); }
  .af__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .rings { margin-top: var(--s6); }
  .rings__stage { height: 360px; }
  .rings__layers li { grid-template-columns: 1fr; row-gap: 6px; }
  .rings__pkg { text-align: left; }
  .chokes__axis { display: none; }
  .caps td { width: 100% !important; }
  .chokes td.k, .chokes td:nth-child(2), .chokes td:nth-child(3) { width: 100%; white-space: normal; }
  .chokes__lane { height: 44px; }
  .chokes__lane canvas { top: 6px; }
  .floor__caps { grid-template-columns: 1fr; }
  .plate--halves { background: var(--paper); }
  .be__t, .be__t tbody, .be__t tr, .be__t td, .be__t th { display: block; width: 100% !important; }
  .be__t thead { display: none; }
  .be__t tbody tr { padding: 14px 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .22); }
  .be__t tbody th, .be__t tbody td { border: 0 !important; padding: 2px 0 !important; color: var(--ink-2) !important; }
  .be__t tbody td code { color: var(--ink) !important; }
  .be__t tbody td::before { display: block; margin-top: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }
  .be__t tbody td:nth-child(2)::before { content: 'Docker'; }
  .be__t tbody td:nth-child(3)::before { content: 'Firecracker'; }
  .tc li { padding-bottom: var(--s5); opacity: 1; }
  .tc__plate { display: none; }
  .af__grid { grid-template-columns: minmax(0, 1fr); }
  .af__note { position: static; }
  .afl { font-size: 11px; grid-template-columns: 28px 18px minmax(0, 1fr); }
  .af__lines { font-size: 11px; }
  .host > div { grid-template-columns: 1fr; gap: 6px; }
}

/* phones (site-v5-live): /architecture (and the parts the landing pages borrow). Labels at 11px, 44px targets. */
@media (max-width: 759px) {
  .rings__tag, .rings__lab, .rings__pkg { font-size: 11px; }
  .af__lab .lbl { font-size: 11px; }
  .be__t tbody th { font-size: 11px; }
  .floor__caps .tog { min-height: 44px; }
  .floor__caps .tog span { font-size: 11px; }
  .seg button { min-height: 44px; }
  .afl { min-height: 30px; }
  button.afl { min-height: 44px; }   /* the lines you can tap; the rest stay at a code line's height */
}

/* ==========================================================================
   phone-design, Round 2: /architecture on a phone (≤ 759px). Every rule is inside the phone query.
   ========================================================================== */
@media (max-width: 759px) {
  /* hero: the headline, the rings as a band under it, the lede, the three layers, then the contents */
  .phero.arch-hero { display: flex; flex-direction: column; padding-bottom: 72px; }
  .arch-hero .phero__text, .arch-hero .rings { display: contents; }
  .arch-hero .kicker { order: 1; }
  .arch-hero .h1p { order: 2; }
  .arch-hero .rings__stage { order: 3; height: 340px; margin-top: 32px; }
  .arch-hero .lede { order: 4; margin-top: 28px; }
  .arch-hero .rings__layers { order: 5; margin-top: 28px; }
  .arch-hero .toc { order: 6; }

  /* 01 · the eight capabilities, one to a screen (js/phone.js: the strip and its pager) */
  .caps tbody[data-strip] { margin-top: 8px; }
  .caps tbody[data-strip] > tr { padding: 26px 0 8px; border-bottom: 0; }
  .caps tbody[data-strip] td { padding: 0; }
  .caps td.n { margin-bottom: 18px; font-size: 40px; line-height: .9; color: var(--ink); }
  .caps .t { font-size: 25px; line-height: 1.08; }
  .caps td:nth-child(2) p:not(.t) { margin-top: 10px; font-size: 15.5px; color: var(--ink-2); }
  .caps td[data-l]::before { margin: 22px 0 6px; }
  .caps td .link { margin-left: 0; }

  /* 02 · chokepoints: the run's axis over the lanes, each lane above its chokepoint */
  .chokes thead { display: block; margin-top: 8px; }
  .chokes thead tr { display: block; }
  .chokes thead th { display: none; }
  .chokes thead th.chokes__axis { display: block; height: 30px; padding: 0; border-bottom: 1px solid rgba(236, 232, 224, .3); }
  .chokes__axis span { bottom: 8px; font-size: 11px; }
  .chokes tbody tr { display: flex; flex-direction: column; }
  .chokes .chokes__lane { order: -1; height: 40px; }

  /* 03 · the floor: "Try it." and then the toggles; what capabilities is not, after them */
  #isolation { display: flex; flex-direction: column; }
  #isolation .chap__head { display: contents; }
  #isolation .kicker { order: 1; }
  #isolation .h2 { order: 2; }
  #isolation .chap__head > .body { order: 3; }
  #isolation .floor { order: 4; }
  #isolation .callout { order: 5; margin-top: var(--s6); }

  /* 04 · backends: Docker or Firecracker, one at a time; Firecracker on ink, as on the desktop's right half */
  .be__head { margin-bottom: var(--s5); }
  .be__t thead { display: block; }
  .be__t thead tr { display: flex; gap: 28px; border-bottom: 1px solid var(--ink); }
  .be__t thead th { display: flex; align-items: flex-end; width: auto !important; min-height: 44px; padding: 0 0 12px !important; border: 0 !important; font-size: 30px; color: rgb(var(--ink-rgb) / .38) !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .be__t thead th:first-child { display: none; }
  .be__t thead th[aria-pressed="true"] { color: var(--ink) !important; box-shadow: inset 0 -2px 0 var(--ink); }
  .be__t[data-sel="docker"] tbody td:nth-child(3), .be__t[data-sel="firecracker"] tbody td:nth-child(2) { display: none; }
  .be__t[data-sel] tbody td::before { content: none; }
  .be__t[data-sel] tbody th { margin-bottom: 4px; }
  .be__t[data-sel="firecracker"] tbody { margin: 0 -20px; padding: 4px 20px 12px; background: var(--raised); }
  .be__t[data-sel="firecracker"] tbody tr { border-bottom-color: rgba(236, 232, 224, .16); }
  .be__t[data-sel="firecracker"] tbody th { color: rgba(236, 232, 224, .62) !important; }
  .be__t[data-sel="firecracker"] tbody td { color: rgba(236, 232, 224, .8) !important; }
  .be__t[data-sel="firecracker"] tbody td code { color: #F3F0E8 !important; }

  /* 05 · a tool call: the drawing (the step's station lit), then the six steps, one to a screen */
  #toolcall { display: flex; flex-direction: column; }
  #toolcall .tc__steps { display: contents; }
  #toolcall .kicker { order: 1; }
  #toolcall .h2 { order: 2; }
  .tc__plate { display: block; }
  #toolcall .tc__plate { order: 3; margin-top: 28px; }
  #toolcall .tc { order: 4; margin-top: 24px; }
  #toolcall [data-pager="tc"] { order: 5; }
  .path { position: relative; top: auto; height: 400px; }
  .path__labels span { font-size: 11px; }
  .path__labels span.tag--r { text-align: right; }
  .path__labels code { font-size: 1em; }   /* no label under 11px */
  .tc[data-strip] li { display: block; padding: 24px 0 8px; opacity: 1; }
  .tc[data-strip] .tc__n { margin-bottom: 16px; font-size: 40px; line-height: .9; }
  .tc[data-strip] .tc__h { font-size: 24px; }

  /* 06 · the Agentfile: the note on the line you tapped stays at the foot of the screen while you read the file */
  .af__note { position: sticky; bottom: 0; z-index: 2; margin: var(--s4) -20px 0; padding: 14px 76px 16px 20px; background: var(--ink); border-top: 1px solid var(--paper); }
  .af__key { margin-top: 10px; }
  .af__txt { margin-top: 8px; font-size: 15px; line-height: 1.55; }
}