/* =====================================================================
   Paper and Ink · essays/the-dashboard-is-part-of-the-machine.css
   "The Dashboard Is Part of the Machine": 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 printed scorecard with a customer's note tucked beneath it (Figure 1), and a case ruler
   on taped graph paper with a reconciliation ledger (Figure 2).
   Gold = the reported measure (cases marked closed); blue = the intended outcome (problems
   resolved); graphite = closed but unresolved, not closed, and the target. */

.dek { max-width: 44ch; }

/* ---- 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 scorecard and the follow-up note ---------------------- */
.fig1 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: 40px; align-items: start; }
.stack { position: relative; padding-bottom: 6px; }
.card {
  position: relative; z-index: 1; background: var(--noise), var(--sheet);
  padding: 1.1rem 1.3rem 1.3rem; font-family: var(--mono); font-size: .76rem; line-height: 1.55;
  transform: rotate(-.8deg); animation: fade .6s ease both;
}
.ch, .nh { font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .8rem; opacity: .8; }
.crow {
  position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--slip-ink) 22%, transparent); padding: .3rem 0;
}
.crow span { opacity: .75; }
.crow b { font-weight: 500; text-align: right; }
.crow.head { border-bottom: 1.5px solid var(--slip-once); padding: .55rem 2.6rem .45rem 0; color: var(--slip-once); }
.crow.head span { opacity: 1; }
.crow.head b { font-family: var(--serif); font-size: 2rem; font-weight: 400; line-height: 1; animation: fade .6s ease .4s both; }
.crow.head small { font-family: var(--mono); font-size: .72rem; }
.tickmark { position: absolute; right: -2px; top: 50%; width: 36px; height: 28px; margin-top: -18px; overflow: visible; }
.tickmark path {
  fill: none; stroke: var(--graphite); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 120; stroke-dashoffset: 0; animation: draw .5s ease 1s both;
}
.card .s-met { display: table; margin: .9rem 0 0 auto; color: var(--slip-once); transform: rotate(-5deg); font-size: .66rem; animation-delay: 1.4s; }
.ask { color: var(--slip-life); margin: 1rem 0 0; font-size: 1.15rem; animation: fade .7s ease 2.6s both; }
.ask b { color: var(--slip-life); }
.note {
  position: relative; z-index: 0; width: min(76%, 330px); margin: -1.6rem 0 0 auto;
  background: var(--noise), var(--slip); padding: 2.2rem 1.1rem 1rem;
  transform: rotate(2.2deg); animation: fade .8s ease 1.9s both;
}
.note .nh { margin-bottom: .4rem; }
.note .hand { margin: 0; font-size: 1.1rem; }
.side { display: grid; gap: 7rem; padding-top: 3.2rem; }
.side .mnote p { max-width: 24ch; }
.m1 p { animation: fade .7s ease 1.3s both; }
.m2 p { animation: fade .7s ease 3s both; }
.side .a1 path { animation-delay: 1.1s; }
.side .a2 path { animation-delay: 2.8s; }
.again { margin-top: 1rem; }

/* ---- Figure 2: one headline, two realities ------------------------------ */
.chart2 { cursor: auto; touch-action: auto; padding: 30px 20px 20px; color: var(--slip-ink); }
.pick { border: 0; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.pick label { font-family: var(--sans); font-size: .85rem; color: var(--graphite); cursor: pointer; padding: .2rem 0; border-bottom: 2px solid transparent; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick label:has(input:checked) { color: var(--slip-ink); border-bottom-color: var(--slip-ink); }
.pick label:has(input:focus-visible) { outline: 2px solid var(--life); outline-offset: 3px; }
.rchart text { fill: var(--slip-ink); }
.rchart .val { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.rchart .svgnote.sm { font-size: 13px; }
.rchart .pencil { stroke: var(--graphite); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.rchart .target { stroke: var(--graphite); stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .8; }
.rchart .tk { stroke: var(--slip-ink); stroke-width: 1; opacity: .55; }
.rchart .tk.major { opacity: .9; stroke-width: 1.3; }
.rchart .tagbox { fill: var(--slip); stroke: var(--slip-ink); stroke-width: 1; }
.rchart .tagtext { white-space: pre; }
.rchart .rowlab { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--graphite); }
.ledger {
  margin: 1rem 0 0; max-width: 470px; background: var(--noise), var(--slip); padding: .7rem .9rem .6rem;
  box-shadow: 0 1px 1px var(--shadow); font-family: var(--mono); font-size: .76rem; transform: rotate(-.4deg);
}
.ledger .lrow { display: flex; align-items: baseline; gap: 6px; margin: 0; padding: .12rem 0; line-height: 1.45; }
.lrow span { flex: 0 1 auto; }
.lrow i { flex: 1; min-width: 12px; border-bottom: 1px dotted currentColor; opacity: .4; transform: translateY(-.45em); }
.lrow b { flex: none; white-space: nowrap; font-weight: 500; font-variant-numeric: tabular-nums; }
.lrow.sub { padding-left: 1.2rem; }
.lrow.once { color: var(--slip-once); }
.lrow.life { color: var(--slip-life); }
.lrow.gr { color: var(--graphite); }
.lrow.sum { border-bottom: 1px solid color-mix(in srgb, var(--slip-ink) 30%, transparent); padding-bottom: .35rem; margin-bottom: .3rem; }

@media (max-width: 700px) {
  .fig1 { grid-template-columns: 1fr; gap: 22px; }
  .side { gap: 14px; padding-top: 0; }
  .side .pen { display: none; }
}
/* Phone mode: the scorecard's labels grow to stay readable, the note tucks under at full width,
   the chart is redrawn on a 400-wide sheet (by the page script), and its text is enlarged. */
@media (max-width: 560px) {
  .card { padding: 1rem .9rem 1.1rem; }
  .ch, .nh { font-size: .7rem; letter-spacing: .06em; }
  .crow.head { flex-wrap: wrap; row-gap: .2rem; padding-right: 2.4rem; }
  .crow.head b { white-space: nowrap; margin-left: auto; }
  .crow.head b { font-size: 1.7rem; }
  .card .s-met { font-size: .7rem; }
  .ask { margin-top: 1.4rem; }
  .note { width: 88%; }
  .sheet { min-width: 0; }
  .sheet-scroll { overflow-x: clip; }
  .chart2 { padding: 28px 12px 14px; }
  .pick { display: grid; grid-template-columns: 1fr; gap: .1rem; }
  .rchart .svglab { font-size: 19px; }
  .rchart .svgnote { font-size: 17px; }
  .rchart .val { font-size: 16px; }
  .rchart .tick { font-size: 16px; }
  .rchart .tagtext { font-size: 16px; }
  .rchart .tagtext { white-space: pre; }
.rchart .rowlab { font-size: 15.5px; }
  .ledger { font-size: .72rem; }
  .lrow.sub { padding-left: .6rem; }
}