/* =====================================================================
   Paper and Ink · essays/yesterdays-answer-can-change.css
   "Yesterday's Answer Can Change": 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 cancellation form carrying two dates, with margin notes (Figure 1), and a small
   ruled ledger of one account's status history beside a two-question control (Figure 2).
   Gold = when the fact was true; blue = when the system recorded it; graphite = notes. */

.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); }
.prose code { font-family: var(--mono); font-size: .86em; }

/* ---- Figure 1: the form with two dates ---------------------------------- */
.fig1 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 44px; align-items: start; }
.form {
  position: relative; padding: 1.3rem 1.4rem 1.2rem; font-family: var(--sans); font-size: .8rem;
  background:
    var(--noise),
    var(--slip);
  transform: rotate(-1.2deg); animation: fade .6s ease both;
}
.form .fh { margin: 0 0 1.1rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; opacity: .85; }
.form .frow { display: flex; align-items: baseline; gap: .8rem; margin: 0 0 .85rem; animation: fade .5s ease both; }
.form .frow:nth-of-type(3) { animation-delay: .25s; }
.form .frow:nth-of-type(4) { animation-delay: .45s; }
.form .frow:nth-of-type(5) { animation-delay: .65s; }
.form .fl { flex: none; width: 7.4rem; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.form .fv { flex: 1; min-width: 0; font-size: 1.15rem; padding: 0 .2rem .1rem; border-bottom: 1px solid color-mix(in srgb, var(--slip-ink) 35%, transparent); }
.form .eff .fv b { font-weight: 500; color: var(--slip-once); background: linear-gradient(var(--once-soft), var(--once-soft)) 0 88% / 100% .45em no-repeat; animation: fade .6s ease 1s both; }
.form .sig { font-size: 1.3rem; letter-spacing: .02em; }
.form .s-recv {
  position: absolute; top: .9rem; right: 1rem; color: var(--slip-life); text-align: center; line-height: 1.25;
  transform: rotate(6deg); font-size: .7rem; animation-delay: 2.6s;
}
.form .s-recv .sd { font-family: var(--mono); font-weight: 500; letter-spacing: .08em; }
.form .entered { margin: .4rem 0 0; text-align: right; color: var(--slip-life); font-size: 1rem; animation: fade .6s ease 3.3s both; }

.side { display: grid; gap: 5.6rem; padding-top: 4.4rem; }
.side .mnote p { max-width: 22ch; }
.m1 p { animation: fade .7s ease 1.3s both; }
.m2 p { animation: fade .7s ease 3.1s both; }
.side .a1 path { animation-delay: 1.1s; }
.side .a2 path { animation-delay: 2.9s; }
.again { margin-top: 1rem; }

/* ---- Figure 2: the ledger and the two questions -------------------------- */
.fig2 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr); gap: 34px; align-items: start; }
.ledger {
  position: relative; padding: 1rem 1.1rem 1rem; font-family: var(--mono); font-size: .74rem;
  background:
    var(--noise),
    linear-gradient(90deg, transparent 2.1rem, color-mix(in srgb, var(--slip-life) 30%, transparent) 2.1rem, transparent calc(2.1rem + 1px)),
    var(--sheet);
  transform: rotate(.6deg); animation: fade .6s ease .2s both;
}
.ledger .lh { margin: 0 0 .6rem; font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; opacity: .85; padding-left: 1.6rem; }
.lrow {
  display: grid; grid-template-columns: 1.6rem 5.4rem minmax(0, 1fr) minmax(0, 1fr); gap: .5rem;
  align-items: baseline; padding: .5rem .3rem .5rem 0; margin: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--slip-ink) 18%, transparent);
  transition: opacity .3s ease;
}
.lrow.hd { font-family: var(--sans); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding-top: .2rem; }
.lrow .c1 { text-align: center; opacity: .65; }
.lrow .c2 { font-weight: 500; }
.lrow .once { color: var(--slip-once); }
.lrow .life { color: var(--slip-life); }
.lrow .ph { display: none; }
.lrow[data-row] { animation: fade .5s ease both; }
.lrow[data-row="1"] { animation-delay: .5s; }
.lrow[data-row="2"] { animation-delay: .9s; }
.lrow[data-row="3"] { animation-delay: 1.2s; }
.ledger .lnote { margin: .7rem 0 0; font-size: 1rem; color: var(--graphite); padding-left: 1.6rem; animation: fade .6s ease 1.6s both; }
/* the chosen question's rows are underscored in its clock's ink; the rest go faint */
.ledger.pick-a .lrow[data-row]:not(.on), .ledger.pick-b .lrow[data-row]:not(.on) { opacity: .38; }
.ledger.pick-a .lrow.on .c4, .ledger.pick-b .lrow.on .c4, .ledger.pick-b .lrow[data-row="3"].on .c3 { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ledger.pick-b .lrow[data-row="3"].on .c2, .ledger.pick-a .lrow.on .c2, .ledger.pick-a .lrow.on .c3 { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

.ask { font-family: var(--sans); }
.ask .ah { margin: 0 0 .6rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.q {
  display: block; width: 100%; text-align: left; margin: 0 0 .55rem; padding: .55rem .7rem;
  font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.3; color: var(--ink);
  background: none; border: 1px solid var(--rule); cursor: pointer;
}
.q:hover { border-color: var(--muted); }
.q:focus-visible { outline: 2px solid var(--life); outline-offset: 2px; }
.qa[aria-pressed="true"] { border-color: var(--life); box-shadow: inset 0 -2px 0 var(--life); }
.qb[aria-pressed="true"] { border-color: var(--once); box-shadow: inset 0 -2px 0 var(--once); }
.ans { margin-top: .9rem; min-height: 9.5em; }
.ans .ahd { margin: 0 0 .35rem; font-family: var(--mono); font-size: .8rem; font-weight: 500; }
.ans .ahd.life { color: var(--life); }
.ans .ahd.once { color: var(--once); }
.ans .abody { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.45; color: var(--muted); }

@media (max-width: 760px) {
  .fig1 { grid-template-columns: 1fr; gap: 22px; }
  .side { gap: 14px; padding-top: 0; }
  .side .pen { display: none; }
  .fig2 { grid-template-columns: 1fr; gap: 22px; }
  .ans { min-height: 0; }
}
/* Phone mode: the form's labels stack above their fields, and each ledger row stacks
   its two dates under the fact, each prefixed with its clock's name. */
@media (max-width: 560px) {
  .form { padding: 1.1rem 1rem 1rem; }
  .form .fh { padding-right: 6.6rem; }
  .form .frow { flex-direction: column; gap: .15rem; align-items: stretch; margin-bottom: .7rem; }
  .form .fl { width: auto; }
  .form .s-recv { top: .7rem; right: .7rem; font-size: .64rem; }
  .ledger { padding: .9rem .8rem .9rem; font-size: .74rem; background: var(--noise), var(--sheet); }
  .ledger .lh, .ledger .lnote { padding-left: 0; }
  .lrow.hd { display: none; }
  .lrow { grid-template-columns: 1.4rem minmax(0, 1fr); gap: .15rem .4rem; }
  .lrow .c3, .lrow .c4 { grid-column: 2; }
  .lrow .ph { display: inline; font-style: normal; font-family: var(--sans); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; margin-right: .3rem; }
}