/* ==========================================================================
   about.css: Operator (WS-4). Sections: #operator, #edge, #route, #mentor,
   #notes, #next. Shared pieces (and the .next ticket) live in base.css.
   Order: Sections, then Media queries (mobile first).
   ========================================================================== */

/* ----- #operator: the profile text and the ID card --------------------------- */
.op-text { display: grid; align-content: start; gap: var(--sp-5); }
.id-body { display: grid; align-content: start; gap: var(--sp-5); }
.id-photo { display: grid; align-content: start; justify-items: start; gap: var(--sp-3); }

/* Portrait (S7). Without JS the photo shows in grayscale under scanlines.
   about.js adds .is-dither (the canvas covers the photo) and .is-photo (the real photo). */
.portrait {
  position: relative;
  width: min(100%, 25rem);
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
}
.portrait img { width: 100%; height: 100%; filter: grayscale(1) contrast(1.15); }
/* --w is the even pixel width from about.js, so every dither dot covers whole pixels */
.portrait canvas { position: absolute; inset: 0 auto auto 0; width: var(--w, 100%); height: var(--w, 100%); image-rendering: pixelated; }
.portrait::after { content: ""; position: absolute; inset: 0; background: var(--scanlines); pointer-events: none; }
.portrait.is-dither img { opacity: 0; }
.portrait.is-photo img { filter: none; }
.portrait.is-photo::after { content: none; }
.photo-toggle[aria-pressed="true"] { border-color: var(--c-amber); color: var(--c-amber); }

/* The four-segment load meter in the panel head: one segment per pass */
.meter { display: flex; gap: 2px; }
.meter i { width: 0.375rem; height: 0.5rem; background: var(--c-line-2); }
.meter .on { background: var(--c-amber); }
.meter-label { display: inline-block; }
/* The HTML ships the final state (RESOLVED) for the no-JS page. With JS the meter waits until about.js
   decides (.is-armed), so it never reads RESOLVED over an empty frame. Failsafe: it shows after 2.5 s. */
.js .id-card:not(.is-armed) :is(.meter, .meter-label) { visibility: hidden; animation: meter-show 0s 2.5s forwards; }
@keyframes meter-show { to { visibility: visible; } }

.readout > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-3);
  padding-block: var(--sp-2);
  border-top: 1px solid var(--c-line);
}
.readout dt {
  padding-top: 0.2em;
  color: var(--c-text-3);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.readout-live { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-bull); }

/* In a card of 36rem or more the readout stands beside the portrait, label above value */
.id-card { container-type: inline-size; }
@container (min-width: 36rem) {
  .id-body { grid-template-columns: minmax(0, 25rem) minmax(12rem, 1fr); column-gap: var(--sp-6); }
  .id-card .readout > div { grid-template-columns: minmax(0, 1fr); }
  .id-card .readout > div:first-child { padding-top: 0; border-top: 0; }
}

/* ----- #edge: the pull quote and two receipts --------------------------------- */
.pull-box { display: grid; align-content: center; gap: var(--sp-5); }
.pull {
  font-size: var(--fs-pull);
  font-style: italic;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}
.pull p::before { content: "\201C"; }
.pull p::after { content: "\201D"; }
.receipts { display: grid; gap: var(--sp-5); }
.receipts .fill-line { padding-left: var(--sp-4); border-left: 2px solid var(--c-amber); }

/* ----- #route: two nodes, one arc ------------------------------------------------ */
.route-body { display: grid; align-content: center; }
.route { position: relative; }
.route svg { width: 100%; height: auto; overflow: visible; }
.route path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.route-base { stroke: var(--c-line-2); stroke-dasharray: 0.006 0.012; }
.route-arc { stroke: var(--c-amber); stroke-dasharray: 1; }
.route-node { fill: var(--c-panel); stroke: var(--c-text-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.route-node--base { fill: var(--c-amber); stroke: var(--c-amber); }
/* The labels are HTML over the drawing, so their type never scales with the viewBox */
.route-tag { position: absolute; display: grid; justify-items: center; gap: var(--sp-1); transform: translateX(-50%); }
.route-tag b { font-family: var(--f-mono-112); font-stretch: 112.5%; font-size: var(--fs-h3); font-weight: 700; }
.route-tag--de { left: 16%; top: 38%; }
.route-tag--eg { left: 84%; top: 69%; }

/* ----- #mentor ------------------------------------------------------------------- */
.mentor-lede { color: var(--c-text); }

/* ----- #notes: the wire ------------------------------------------------------------ */
.wire { list-style: none; }
.wire-row { display: grid; gap: var(--sp-3); padding: var(--sp-5) var(--pad-panel); border-top: 1px solid var(--c-line); }
.wire-row:first-child { border-top: 0; }
.wire-title {
  font-family: var(--f-serif);
  font-stretch: normal;
  font-size: var(--fs-lede);
  font-weight: 400;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.wire-meta { display: flex; align-items: center; gap: var(--sp-3); }

/* ----- Media queries ----------------------------------------------------------------- */
@media (min-width: 48em) {
  .pull p::before { margin-left: -0.42em; } /* hanging opening quote */
  .receipts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .readout--wide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
  .readout--wide > div { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 64em) {
  #operator { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .edge-receipts { grid-column: 1 / -1; }
  .split > .panel > .panel-body { padding-block: var(--sp-6); }
  .pull-box { padding-left: var(--sp-7); }

  .wire-row { grid-template-columns: 5rem minmax(0, 1fr) auto; column-gap: var(--sp-5); align-items: baseline; }
}

/* Short laptop screens (1366 x 657): a smaller portrait and tighter rows keep the STATUS row above the tape */
@media (min-width: 64em) and (max-height: 45em) {
  .portrait { width: min(100%, 20rem); }
  .readout > div { padding-block: var(--sp-1); }
  @container (min-width: 36rem) {
    .id-body { grid-template-columns: minmax(0, 20rem) minmax(12rem, 1fr); }
  }
}