/* =====================================================================
   Paper and Ink · essays/redraw-the-floor-before-you-pave-the-path.css
   "Redraw the floor before you pave the path.": 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:
   the same machine shop drawn twice on drafting paper (Figure 1), and six request cards
   filed into two paper trays (Figure 2).
   Gold = paving the path; blue = redrawing the floor. */

/* ---- 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 same shop, drawn twice ------------------------------- */
.sheet.plans { cursor: default; }
.plans .wall { stroke: var(--slip-ink); }
.plans .gd { stroke: var(--slip-once); }
.plans .bl { stroke: var(--slip-life); }
.plans .mach { stroke: var(--slip-ink); }
.plans .belt { stroke: var(--slip-once); }
.plans .belt.faint { stroke: var(--graphite); }
.plans .walk { fill: none; stroke: var(--graphite); stroke-width: 1.4; stroke-dasharray: 2 5; stroke-linecap: round; }
.plans .lab-once { fill: var(--slip-once); }
.plans .lab-life { fill: var(--slip-life); }
.plans .pen-g { fill: var(--slip-ink); }
.plans .plate { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
/* redraws after the breakpoint changes appear at once, without replaying the load sequence */
.plans .still .ink path, .plans .still .fade, .plans svg.still .ink path, .plans svg.still .fade { animation: none; }

/* ---- Figure 2: request cards and two paper trays ------------------------ */
.sortfig { padding: 6px 4px 0; overflow-x: clip; overflow-clip-margin: 14px; }
.trays { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.tray {
  box-sizing: border-box; min-height: 150px; padding: 16px 16px 18px;
  background: var(--noise), var(--sheet);
}
.tray-once { transform: rotate(-.6deg); }
.tray-life { transform: rotate(.7deg); }
.tray .th { margin: 0; font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.tray-once .th { color: var(--slip-once); }
.tray-life .th { color: var(--slip-life); }
.tray .ts { margin: 2px 0 12px; font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--slip-ink); }
.tray .slot { display: grid; gap: 10px; }

.deck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.pcard {
  display: block; box-sizing: border-box; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 14px 12px; border: 0; border-top: 1px solid var(--grid-major);
  background: var(--noise), var(--slip); color: var(--slip-ink); font: inherit;
  animation: fade .6s ease both;
}
.deck .pcard:nth-child(odd) { transform: rotate(-1deg); }
.deck .pcard:nth-child(even) { transform: rotate(.9deg); }
.pcard .pn { display: block; font-family: var(--mono); font-size: .8rem; font-weight: 500; letter-spacing: .04em; }
.pcard .pd { display: block; margin-top: 4px; font-family: var(--serif); font-size: 1rem; line-height: 1.35; }
.pcard .pw { display: none; margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: .98rem; line-height: 1.35; color: var(--slip-ink); }
.pcard:focus-visible { outline: 2px solid var(--slip-life); outline-offset: 3px; }
.pcard.filed { cursor: default; }
.pcard.filed .pw { display: block; }
.pcard.k-once .pn { color: var(--slip-once); }
.pcard.k-life .pn { color: var(--slip-life); }
.slot .pcard { transform: rotate(.4deg); animation: fade .5s ease both; }
.slot .pcard:nth-child(even) { transform: rotate(-.5deg); }
.deck:empty { display: none; }
.sortbar { margin: 24px 0 0; font-family: var(--sans); display: flex; gap: 20px; }
.sortfig:not(.live) .sortbar { display: none; }

/* Phone mode: the floor plans are redrawn stacked by the page script, and their labels grow;
   the trays and the cards stack in one column. */
@media (max-width: 560px) {
  .sheet.plans { min-width: 0; user-select: none; }
  .sheet-scroll:has(.plans) { overflow-x: clip; }
  .plans .svgnote { font-size: 15.5px; }
  .plans .svglab { font-size: 18px; }
  .plans .plate { font-size: 13px; letter-spacing: .12em; }
  .trays { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .deck { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}