/* ==========================================================================
   PLATFORM · chapter 03 "Run the network" — owned by Agent NETWORK.
   Phase B (2026-10-23): results + inbox are product clips; the one diagram left is
   Workspaces (a shared space split into one workspace per client).
   Round 2 (2026-10-27): A | wide B | mirrored C, so the inbox recording runs the content width.
   Ink on paper, brand blue as the live material, status colours for states only.
   Everything is scoped under .platform.
   ========================================================================== */

.platform {
  --pf-sw: 0.1562rem;                                             /* diagram stroke */
  --pf-posted: var(--ok);
  --pf-quiet: color-mix(in srgb, var(--fg) 22%, var(--surface));
  --pf-attention: var(--warn-fill);
  --pf-failed: var(--err);
  --pf-tile-w: 1.625rem;
  --pf-tile-h: 3.5rem;
  --pf-tile-r: 0.4375rem;
  /* Same field as chapter 02 above, so the chapter starts close to it. */
  padding-top: clamp(1.75rem, 3.6vw, 3.5rem);
}

/* ---------- Opener ---------- */

.platform .pf-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: clamp(1.25rem, 2.4vw, 2rem);
  align-items: end;
}
.platform .pf-head .t-eyebrow { grid-column: 1 / -1; justify-self: start; }
.platform .pf-title { grid-column: 1 / span 8; }
.platform .pf-lead { grid-column: 9 / -1; padding-bottom: 0.45em; }

/* ---------- Blocks ---------- */

.platform .pf-block { margin-top: clamp(4.5rem, 9vw, 8.5rem); }
.platform .pf-head + .pf-block { margin-top: clamp(3.5rem, 6.4vw, 6rem); }

.platform .pf-block-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 1rem;
  align-items: end;
  margin-bottom: clamp(1.625rem, 3vw, 2.75rem);
}
.platform .pf-block-title { grid-column: 1 / span 7; display: grid; gap: 1rem; justify-items: start; }
.platform .pf-block-p { grid-column: 9 / -1; padding-bottom: 0.3em; }

.platform .pf-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: clamp(1.625rem, 3vw, 2.75rem);
  align-items: center;
}
.platform .pf-split-text {
  grid-column: 1 / span 4;
  grid-row: 1;
  display: grid;
  gap: 1.125rem;
  justify-items: start;
  align-content: start;
}
.platform .pf-split > .pf-fig { grid-column: 5 / -1; grid-row: 1; }
.platform .pf-split--rev .pf-split-text { grid-column: 9 / -1; }
.platform .pf-split--rev > .pf-fig { grid-column: 1 / span 8; }

/* Phase B, round 2 (2026-10-27): one rhythm for the three parts. A (results) and C (workspaces)
   are mirrored splits, copy in four columns and the picture in eight. B (the inbox) is the wide
   beat between them: its copy on one row, then the recording across the content width, so the
   UI text stays legible. On short screens the whole row narrows so the recording (16:10) fits
   one screen under the nav; the content width never exceeds its 1600 px source. */
.platform .pf-split > .pf-clip { grid-column: 5 / -1; grid-row: 1; }
.platform .pf-split-text .t-body { max-width: 30em; }

.platform .pf-split--wide {
  max-width: max(40rem, (100vh - var(--nav-h) - 5.5rem) * 1.6);
  max-width: max(40rem, (100svh - var(--nav-h) - 5.5rem) * 1.6);
}
.platform .pf-split--wide .pf-split-text {
  grid-column: 1 / -1;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.125rem 1.5rem;
  align-items: baseline;
  justify-items: stretch;
}
/* The sentence starts on column 9, under the chapter lead and beside C's copy. */
.platform .pf-split--wide .pf-split-text > .t-h3 { grid-column: 1 / span 7; }
.platform .pf-split--wide .pf-split-text > .t-body { grid-column: 9 / -1; }
.platform .pf-split--wide > .pf-clip { grid-column: 1 / -1; grid-row: 2; }

.platform .pf-facts { display: grid; gap: 0.375rem; }
.platform .pf-facts li {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 560;
  line-height: 1.35;
  color: var(--fg);
}
.platform .pf-facts .tile { font-size: 0.6875rem; transform: translateY(1px); }

/* ---------- Shared diagram parts ---------- */

.platform .pf-fig {
  margin: 0;
  color: var(--fg-2);
  min-width: 0;
}
.platform .pf-wires,
.platform .pf-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.platform .pf-wires { z-index: 1; }
.platform .pf-fx { z-index: 4; }

.platform .pf-w {
  fill: none;
  stroke: var(--fg);
  stroke-width: var(--pf-sw);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.platform .pf-w--live {
  stroke: var(--accent);
  stroke-width: 0.1875rem;
  stroke-dasharray: 5 9;
  animation: pf-march 0.8s linear infinite;
  opacity: 0;
}
.platform .pf-w--ctl { stroke-width: 0.1875rem; stroke-dasharray: 0.1 8; transition: stroke var(--dur-2) ease; }
.platform .pf-w--stub { stroke: var(--fg-2); stroke-dasharray: 7 7; }
.platform .pf-w--lit { stroke: var(--accent); }
.platform .pf-lit { opacity: 0; transition: opacity var(--dur-2) ease; }
.platform .pf-lit.is-on { opacity: 1; }
.platform .pf-lit-mask { fill: none; stroke: var(--surface); stroke-width: 0.5rem; stroke-linecap: round; stroke-linejoin: round; }
.platform .is-paused .pf-w--live { animation-play-state: paused; }
@keyframes pf-march { to { stroke-dashoffset: -28; } }

.platform .pf-fig.figure--grid { background-image: radial-gradient(circle, color-mix(in srgb, var(--fg) 15%, transparent) 1px, transparent 1.4px); }

.platform .pf-pk { fill: var(--accent); }
.platform .pf-pk--reply { fill: var(--surface); stroke: var(--accent); stroke-width: 0.1562rem; }
.platform .pf-pk--deny { fill: var(--surface); stroke: var(--fg-3); stroke-width: 0.1562rem; }
.platform .pf-token { fill: var(--accent); stroke: var(--surface); stroke-width: 2px; }
.platform .pf-door { fill: var(--fg); stroke: var(--surface); stroke-width: 0.1562rem; }
.platform .pf-x circle { fill: var(--surface); stroke: var(--err); stroke-width: 0.1562rem; }
.platform .pf-x path { fill: none; stroke: var(--err); stroke-width: 0.1562rem; stroke-linecap: round; }

/* The phone tile: an account's device. */
.platform .pf-phone {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--pf-tile-w);
  height: var(--pf-tile-h);
  border-radius: var(--pf-tile-r);
  background: var(--accent);
  color: var(--white);
}
.platform .pf-phone .g { width: 0.8125rem; height: 0.8125rem; }

/* Labels inside figures are ink, never small grey. */
.platform .pf-org-tag {
  font-size: 0.9375rem;
  font-weight: 640;
  line-height: 1.2;
  color: var(--fg);
  white-space: nowrap;
}
.platform .pf-zone {
  font-size: 1rem;
  font-weight: 640;
  line-height: 1.2;
  color: var(--fg);
  white-space: nowrap;
}
.platform .pf-fig .t-mono { font-size: 0.8438rem; }

.platform .pf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.375rem;
  font-size: 0.9062rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg);
}
.platform .pf-legend li { display: inline-flex; align-items: center; gap: 0.5rem; }
.platform .pf-legend li > i:not(.pf-k) {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--c);
}
.platform .pf-k { position: relative; display: inline-block; flex: none; }
.platform .pf-k--dm { width: 0.6875rem; height: 0.6875rem; border-radius: 0.1562rem; background: var(--accent); }
.platform .pf-k--reply { width: 0.6875rem; height: 0.6875rem; border-radius: 0.1562rem; box-shadow: inset 0 0 0 0.1562rem var(--accent); }
.platform .pf-k--ctl { width: 1.5rem; height: 0; border-top: 0.1562rem dotted var(--fg); }
.platform .pf-k--line { width: 1.5rem; height: 0; border-top: 0.1562rem solid var(--fg); border-radius: 2px; }
.platform .pf-k--tile { width: 0.4375rem; height: 0.9375rem; border-radius: 2px; background: var(--accent); }
.platform .pf-k--block { width: 1.125rem; height: 0; border-top: 0.1562rem dashed var(--fg-3); margin-right: 0.75rem; }
.platform .pf-k--block::after {
  content: "";
  position: absolute;
  left: 100%;
  top: -0.4688rem;
  width: 0.75rem;
  height: 0.75rem;
  background:
    linear-gradient(45deg, transparent 42%, var(--err) 42% 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--err) 42% 58%, transparent 58%);
}

/* ==========================================================================
   TEAMS
   ========================================================================== */

.platform .pf-fig--teams {
  --pf-flow: row;
  --pf-tile-w: 1.5rem;
  --pf-tile-h: 3.25rem;
  --pf-tile-r: 0.4062rem;
  display: grid;
  justify-items: center;
  padding: clamp(1.375rem, 2.4vw, 2.125rem);
}
.platform .pf-idp {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 3.875rem;
  padding: 0.5625rem 0.625rem 0.5625rem 0.9375rem;
  border: var(--pf-sw) solid var(--fg);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 1.0312rem;
  font-weight: 640;
  line-height: 1.2;
  color: var(--fg);
  white-space: nowrap;
}
.platform .pf-idp .i { width: 1.25rem; height: 1.25rem; stroke-width: 2.25; }
.platform .pf-idp em {
  margin-left: 0.1875rem;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--r-pill);
  background: var(--fg);
  color: var(--surface);
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 660;
  line-height: 1;
}

.platform .pf-orgs {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.platform .pf-org {
  --pf-org-pad: 1rem;
  position: relative;
  min-width: 0;
  padding: 0 var(--pf-org-pad) 1.625rem;
  border-radius: var(--r-3);
  background: var(--surface);
}
.platform .pf-org-frame {
  position: absolute;
  inset: 0;
  border: var(--pf-sw) solid var(--fg);
  border-radius: inherit;
  pointer-events: none;
}
/* The org's header: a logo slot and its name. The white-label skin is a second header laid over it. */
.platform .pf-org-head,
.platform .pf-org-skin {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 3.5rem;
  font-size: 0.9688rem;
  font-weight: 640;
  line-height: 1.2;
  color: var(--fg);
  white-space: nowrap;
}
.platform .pf-org-head { margin-bottom: 0.625rem; }
.platform .pf-org-skin {
  position: absolute;
  inset: 0 0 auto 0;
  padding: 0 var(--pf-org-pad);
  border-radius: var(--r-3) var(--r-3) 0 0;
  background: var(--fg);
  color: var(--surface);
}
.platform .pf-logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.platform .pf-logo img { width: 1.125rem; height: 1.125rem; }
.platform .pf-logo--own {
  border-radius: 50%;
  background: var(--surface);
  box-shadow: none;
  color: var(--fg);
  font-size: 0.9375rem;
  font-weight: 740;
  font-stretch: 125%;
  line-height: 1;
}
.platform .pf-org-body { display: grid; row-gap: 1.75rem; justify-items: start; }

.platform .pf-org-tiles {
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(6, var(--pf-tile-w));
  grid-auto-rows: var(--pf-tile-h);
  justify-content: space-between;
  justify-self: stretch;
  max-width: 17.75rem;
  height: var(--pf-tile-h);
}

/* Role tree: Owner → Admin → Operator → Viewer */
.platform .pf-roles { grid-row: 2; display: grid; gap: 0.5rem; justify-items: start; }
.platform .pf-roles li {
  position: relative;
  margin-left: calc(var(--i, 0) * var(--pf-step, 0.75rem));
  padding: 0.375rem 0.6875rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 2px var(--fg);
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 640;
  line-height: 1;
  color: var(--fg);
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.platform .pf-roles li:nth-child(2) { --i: 1; }
.platform .pf-roles li:nth-child(3) { --i: 2; }
.platform .pf-roles li:nth-child(4) { --i: 3; }
.platform .pf-roles li + li::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: -0.5rem;
  width: 0.5rem;
  height: 1.3125rem;
  border-left: 2px solid var(--fg);
  border-bottom: 2px solid var(--fg);
  border-bottom-left-radius: 0.4375rem;
}
.platform .pf-roles li.is-lit { background: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-fg); }

.platform .pf-wl {
  position: absolute;
  left: 50%;
  bottom: -0.875rem;
  z-index: 2;
  transform: translateX(-50%);
  padding: 0.4375rem 0.75rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 2px var(--fg);
  background: var(--surface);
  font-size: 0.8438rem;
  font-weight: 640;
  line-height: 1;
  color: var(--fg);
  white-space: nowrap;
}

/* "Before": one shared space. Only shown by script, before the split. */
.platform .pf-shared {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  border: var(--pf-sw) dashed var(--fg);
  border-radius: var(--r-3);
  background: var(--surface);
  visibility: hidden;
}
.platform .pf-shared-tag {
  position: absolute;
  left: 1.125rem;
  top: 1rem;
  font-size: 0.9688rem;
  font-weight: 640;
  line-height: 1.2;
  color: var(--fg);
}
.platform .pf-shared-grid {
  display: grid;
  grid-template-columns: repeat(9, var(--pf-tile-w));
  grid-auto-rows: var(--pf-tile-h);
  gap: 0.875rem 1.125rem;
  margin-top: 1.375rem;
}

.platform .pf-tm-legend { position: relative; z-index: 2; justify-self: start; margin-top: 2.25rem; }

/* No script: plain connectors stand in for the computed ones. */
html:not(.js) .platform .pf-idp::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0;
  height: 1.9375rem;
  border-left: var(--pf-sw) solid var(--fg);
}
html:not(.js) .platform .pf-orgs::before {
  content: "";
  position: absolute;
  left: calc((100% - 2rem) / 6);
  right: calc((100% - 2rem) / 6);
  top: -1.9375rem;
  border-top: var(--pf-sw) solid var(--fg);
}
html:not(.js) .platform .pf-org::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1.9375rem;
  height: 1.9375rem;
  margin-left: -1.25px;
  border-left: var(--pf-sw) solid var(--fg);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .platform .pf-title { grid-column: 1 / -1; }
  .platform .pf-lead { grid-column: 1 / span 9; padding-bottom: 0; }
  .platform .pf-block-title { grid-column: 1 / -1; }
  .platform .pf-block-p { grid-column: 1 / span 9; padding-bottom: 0; }
  .platform .pf-split { align-items: start; }
  .platform .pf-split-text,
  .platform .pf-split--rev .pf-split-text { grid-column: 1 / span 9; grid-row: 1; }
  .platform .pf-split > .pf-fig,
  .platform .pf-split > .pf-clip,
  .platform .pf-split--rev > .pf-fig { grid-column: 1 / -1; grid-row: 2; }
}
/* Tablet landscape: A and C stay side by side (5 | 7, mirrored); C shows two clients. */
@media (min-width: 861px) and (max-width: 1100px) {
  .platform .pf-measure .pf-split,
  .platform .pf-teams .pf-split { align-items: center; }
  .platform .pf-measure .pf-split-text { grid-column: 1 / span 5; }
  .platform .pf-measure .pf-split > .pf-clip { grid-column: 6 / -1; grid-row: 1; }
  .platform .pf-teams .pf-split-text { grid-column: 8 / -1; }
  .platform .pf-teams .pf-split > .pf-fig { grid-column: 1 / span 7; grid-row: 1; }
  .platform .pf-split--wide .pf-split-text > .t-body { grid-column: 8 / -1; }
  .platform .pf-wide-only { display: none !important; }
  .platform .pf-orgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform .pf-shared-grid { grid-template-columns: repeat(6, var(--pf-tile-w)); }
  .platform .pf-fig--teams { padding: clamp(1.125rem, 2vw, 1.75rem); }
  .platform .pf-idp { margin-bottom: 2.25rem; }
  .platform .pf-org-body { row-gap: 1.25rem; }
  .platform .pf-tm-legend { margin-top: 1.375rem; }
  html:not(.js) .platform .pf-orgs::before { left: calc((100% - 1rem) / 4); right: calc((100% - 1rem) / 4); }
}

/* Narrow: each figure is redrawn for a column, not scaled down. */
@media (max-width: 860px) {
  .platform .pf-lead,
  .platform .pf-block-p,
  .platform .pf-split-text,
  .platform .pf-split--rev .pf-split-text { grid-column: 1 / -1; }
  .platform .pf-wide-only { display: none !important; }
  .platform .pf-split--wide .pf-split-text { grid-template-columns: minmax(0, 1fr); }
  .platform .pf-split--wide .pf-split-text > .t-h3,
  .platform .pf-split--wide .pf-split-text > .t-body { grid-column: 1 / -1; }

  /* Teams: two orgs side by side on tablets; stacked on phones (see below). */
  .platform .pf-orgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform .pf-shared-grid { grid-template-columns: repeat(6, var(--pf-tile-w)); }
  .platform .pf-fig--teams { padding: 1.25rem 1rem; }
  .platform .pf-tm-legend { margin-top: 2.125rem; gap: 0.5rem 1rem; }
  html:not(.js) .platform .pf-orgs::before { left: calc((100% - 1rem) / 4); right: calc((100% - 1rem) / 4); }
}

@media (max-width: 620px) {
  /* Teams: two orgs stacked, sign-in line runs down the left edge. */
  .platform .pf-fig--teams { --pf-flow: col; justify-items: stretch; }
  .platform .pf-idp { justify-self: start; margin-bottom: 1.75rem; font-size: 1rem; }
  .platform .pf-orgs { grid-template-columns: minmax(0, 1fr); gap: 2.125rem; padding-left: 1.75rem; }
  .platform .pf-shared { left: 1.75rem; }
  html:not(.js) .platform .pf-idp::after { left: 0.9375rem; height: 1.75rem; }
  html:not(.js) .platform .pf-orgs::before,
  html:not(.js) .platform .pf-org::before { content: none; }
}

@media (max-width: 380px) {
  .platform .pf-fig--teams { --pf-tile-w: 1.375rem; --pf-tile-h: 3rem; }
  .platform .pf-roles { --pf-step: 0.5625rem; }
}