/* =====================================================================
   Paper and Ink · essays/when-good-becomes-cheap.css
   "When Good Becomes Cheap": 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 paper objects break out to 860px:
   a taped sheet of graph paper (Figure 1) and a pair of ruled index cards (Figure 2).
   Gold = capability anyone can now buy (good); blue = the judgment that makes a difference (great).
   Promotion candidate: the ruled index card (.icard) is the third card-like object on the site
   (not-a-toaster has .card, say-it-once has its own); worth moving into paper.css. */

:root { --icard: #fdfcf7; --icard-rule: #3b7bb026; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --icard: #e6e3da; } }
:root[data-theme="dark"] { --icard: #e6e3da; }

/* ---- 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 floor chart on graph paper ---------------------------- */
#sheet1 { -webkit-user-select: none; user-select: none; }
.fchart text { fill: var(--slip-ink); }
.fchart .pencil { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.fchart .pen { fill: none; stroke: var(--slip-ink); stroke-width: 1.3; stroke-linecap: round; opacity: .8; }
.fchart .tk { stroke: var(--slip-ink); stroke-width: 1; opacity: .55; }
.fchart .tk.major { opacity: .9; stroke-width: 1.3; }
.fchart .rowlab { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--graphite); }
.fchart .svgnote.sm { font-size: 13px; }
.fchart .tally { stroke: var(--slip-life); stroke-width: 1.8; stroke-linecap: round; }
.fchart .stub { fill: var(--slip-once); opacity: .85; }
.fchart .cursor { stroke: var(--slip-ink); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .7; }
.fchart .tagbox { fill: var(--slip); stroke: var(--slip-ink); stroke-width: 1; }
.fchart .dot-once { fill: var(--slip-once); }
.fchart .dot-life { fill: var(--slip-life); }
.fchart .dot-lead { fill: var(--graphite); }

/* ---- Figure 2: two flywheels on ruled index cards ------------------------ */
.wheels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding: 10px 6px 4px; }
.icard {
  position: relative; background-color: var(--icard); color: var(--slip-ink);
  background-image: var(--noise), repeating-linear-gradient(transparent 0 27px, var(--icard-rule) 27px 28px);
  background-size: 180px, 100% 28px; background-position: 0 0, 0 66px;
  padding: 16px 20px 20px; border-top: 4px solid var(--edge);
  box-shadow: 0 1px 1px var(--shadow), 0 10px 24px -12px var(--shadow-deep);
}
.icard.a { --edge: var(--slip-once); transform: rotate(-1.3deg); }
.icard.b { --edge: var(--slip-life); transform: rotate(1deg); }
.icard .no { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; opacity: .7; display: flex; justify-content: space-between; gap: 10px; }
.icard h3 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.2; margin: 6px 0 2px; color: var(--edge); }
.icard .cnote { font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.35; margin: 4px 0 0; max-width: 30ch; }
.wheel { display: block; width: 100%; height: auto; overflow: visible; }
.wheel text { fill: var(--slip-ink); }
.wheel .lab { font-family: var(--serif); font-style: italic; font-size: 15.5px; }
.wheel .head { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wheel .spoke { stroke: var(--slip-ink); stroke-width: 1.3; stroke-linecap: round; opacity: .55; }
.wheel .hub { fill: var(--slip-ink); }
/* same push, different direction: the gold wheel spins three turns, the blue wheel one, then both rest */
.wheel .spokes { transform-box: view-box; transform-origin: 170px 150px; animation: spin1 2.6s cubic-bezier(.2, .6, .3, 1) .6s both; }
.icard.a .wheel .spokes { animation-name: spin3; }
@keyframes spin3 { from { transform: rotate(-1080deg); } }
@keyframes spin1 { from { transform: rotate(-360deg); } }
.icard .stamp { display: table; margin: 2px 6px 12px auto; }
.icard.a .stamp { color: var(--slip-once); transform: rotate(-7deg); animation-delay: 3.2s; }
.icard.b .stamp { color: var(--slip-life); transform: rotate(5deg); animation-delay: 3.7s; }
.wheel-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 18px; }
.wheel-notes p { margin: 0; display: flex; gap: 10px; align-items: flex-start; color: var(--ink); max-width: 30ch; }
.wheel-notes .pen { width: 48px; height: 30px; }
.wheel-notes p:nth-child(1) .pen path { animation-delay: 3.4s; }
.wheel-notes p:nth-child(2) .pen path { animation-delay: 3.9s; }
#fig2 figcaption .btn { margin-left: 4px; }

@media (max-width: 640px) {
  .wheels, .wheel-notes { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .wheel-notes { gap: 12px; }
  .wheel-notes .pen { display: none; }
}

/* Phone mode: Figure 1 is redrawn by the page script as a narrower, taller sheet (viewBox 400 x 500), so it fits
   the column with no sideways scroll; SVG text is raised so labels render at 11px or more. The index cards stack. */
@media (max-width: 560px) {
  .sheet-scroll { overflow-x: clip; }
  .sheet { min-width: 0; padding: 24px 8px 10px; }
  .fchart .svgnote { font-size: 15.5px; }
  .fchart .svgnote.sm { font-size: 14px; }
  .fchart .svglab { font-size: 18px; }
  .fchart .tick { font-size: 14px; }
  .fchart .rowlab { font-size: 13.5px; }
  .fchart .tagtext { font-size: 15px; }
  .wheels { padding-inline: 2px; }
  .icard { padding: 14px 14px 18px; }
  .icard .no { font-size: .64rem; letter-spacing: .1em; }
  .wheel .lab { font-size: 16px; }
}