/* =====================================================================
   Paper and Ink · essays/the-org-chart-ships-with-the-system.css
   "The org chart ships with the system.": the figures only this essay uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; two figures break out to 860px:
   Conway's compiler story on drafting paper (Figure 1) and six matched pairs of
   propagation cost hand-inked on graph paper (Figure 2).
   Gold = the system's structure; blue = the organization's communication structure. */

/* ---- footnote markers -------------------------------------------------- */
sup.ref { font-family: var(--sans); font-size: .62em; line-height: 0; margin-left: 1px; }
sup.ref a { text-decoration: none; color: var(--life); padding: 0 1px; }
sup.ref a:hover { text-decoration: underline; }
.sources li:target { color: var(--ink); background: var(--life-soft); }

/* ---- Figure 1: the staffing sheet and the two compilers ------------------ */
.sheet.compiler { cursor: default; }
#cfig { fill: var(--slip-ink); }
#cfig .head { fill: var(--sheet); stroke: var(--slip-life); stroke-width: 2.2; }
#cfig .num { font-family: var(--mono); font-size: 13px; fill: var(--slip-once); }
#cfig .lab-once { fill: var(--slip-once); }
#cfig .lab-life { fill: var(--slip-life); }
#cfig .pen-g { fill: var(--slip-ink); }
#cfig .plate { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
#cfig .pencil-arrow { fill: none; stroke: var(--graphite); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 3 5; }
/* redraws after the breakpoint changes appear at once, without replaying the load sequence */
#cfig.still .ink path, #cfig.still .fade { animation: none; }

/* ---- Figure 2: six matched pairs, on graph paper -------------------------- */
#chart { cursor: ew-resize; fill: var(--slip-ink); }
#chart .svglab { font-size: 17px; }
#chart .svgnote { font-size: 15px; }
#chart .lab-once, #chart .val-once { fill: var(--slip-once); }
#chart .lab-life { fill: var(--slip-life); }
#chart .pen-g { fill: var(--slip-ink); }
#chart .ring { fill: var(--sheet); stroke: var(--slip-once); stroke-width: 2.4; }
#chart .pencil { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2 6; }
#chart .penline { fill: none; stroke: var(--slip-ink); stroke-width: 1.3; stroke-linecap: round; }
#chart .band { opacity: .7; }
#chart .sel { fill: none; stroke: var(--slip-ink); stroke-width: 1.4; }
#chart .rule-l { stroke: var(--slip-ink); stroke-width: 1; }
#chart .tick { font-size: 11px; }
#chart .mon { font-size: 11.5px; letter-spacing: .1em; }
#chart .rowlab { font-family: var(--sans); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; fill: var(--graphite); }
#chart .cursor { stroke: var(--slip-ink); stroke-width: 1.2; stroke-dasharray: 3 4; }
#chart .tagtext { font-size: 12px; white-space: pre; }

/* Phone mode: both figures are redrawn by the page script as narrower, taller sheets
   (Figure 1 stacked at 400 x 600, Figure 2 at 400 x 600 with the labels moved below the chart);
   svg text sizes rise so every label renders at 11px or more. */
@media (max-width: 560px) {
  .sheet-scroll { overflow-x: clip; }
  .sheet { min-width: 0; padding: 24px 8px 10px; -webkit-user-select: none; user-select: none; }
  #cfig .svgnote { font-size: 17px; }
  #cfig .num { font-size: 15px; }
  #cfig .plate { font-size: 13px; letter-spacing: .12em; }
  #chart .svglab { font-size: 18px; }
  #chart .svgnote { font-size: 16px; }
  #chart .tick { font-size: 14px; }
  #chart .mon { font-size: 14px; }
  #chart .rowlab { font-size: 12.5px; }
  #chart .tagtext { font-size: 14px; }
}