/* Experiment 02: notebook paper recovered from the optimizer's bin. */
.discovery-bin { --db-paper: #FAF6EC; --db-fold: #E5DFD1; --db-bright: #FFFDF5; --db-shadow: #C9C1B1; max-width: 1040px; margin-top: 18px; }
.db-intro { margin-top: 12px; max-width: 36em; }

/* The optimizer's log beside the bin it fills. */
.db-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 32px; }
.db-log { --r: -.4deg; max-width: 470px; padding: 24px 24px 16px; scroll-margin-top: 24px; }
.db-log .db-tape { left: 26px; }
.db-log-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.db-log-head .db-meta { margin: 0; }
.db-log-replay { min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: var(--pencil); font: 500 22px var(--font-hand); white-space: nowrap; cursor: pointer; }
.db-log-replay:hover { color: var(--red); }
.db-rule { margin: 2px 0 14px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.db-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-light); }
.db-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 46px; padding: 6px 0; border-bottom: 1px solid var(--rule-light); }
.db-row-goal { font-size: 16px; line-height: 1.3; }
.db-row-verdict { padding: 2px 7px; border: 2px solid var(--red); border-radius: 3px; color: var(--red); font: 500 12px/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transform: rotate(-4deg); }
.db-row--end { display: flex; align-items: center; border-bottom: 0; color: var(--red); font: 500 22px/1.2 var(--font-hand); }
.db-log-toggle { display: none; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--pencil); font: 600 15px var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.db-log-toggle:hover { color: var(--red); }

/* The bin: older discards inside, the six labeled reports heaped on top. */
.db-basket { position: relative; width: 100%; max-width: 480px; height: 438px; margin: 0 auto; }
.db-wire { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.db-wire-back { z-index: 1; }
.db-wire-front { z-index: 8; }
.db-ball { position: absolute; width: clamp(72px, 20%, 96px); height: auto; aspect-ratio: 1; padding: 0; border: 0; background: transparent; color: var(--red); transform: translate(-50%, -50%) rotate(var(--turn)); z-index: 4; cursor: pointer; transition: transform 240ms ease; }
.db-ball:not(.db-ball--front) { width: clamp(64px, 17.5%, 84px); }
.db-ball--front { z-index: 5; }
.db-ball:hover { transform: translate(-50%, -59%) rotate(calc(var(--turn) - 5deg)); z-index: 9; }
.db-ball:focus-visible { z-index: 9; }
.db-ball.is-pending { pointer-events: none; }
.db-ball svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 5px 3px rgba(29,39,51,.19)); }
.db-ball-label { position: absolute; top: 50%; left: 14%; right: 14%; text-align: center; font: 500 12px/1.1 var(--font-mono); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 0 2px var(--db-bright), 0 0 5px var(--db-bright); transform: translateY(-50%) rotate(calc(var(--turn) * -0.7)); pointer-events: none; }
.db-invitation { margin: -2px 0 0; text-align: center; font: 500 28px/1.2 var(--font-hand); color: var(--red); }
.db-note { margin-top: 24px; max-width: 48em; font-size: 12px; line-height: 1.5; }

/* A recovered report. */
.db-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0 22px; }
.db-back, .db-replay { min-height: 44px; padding: 4px 0; border: 0; background: transparent; cursor: pointer; }
.db-back { color: var(--ink); font: 700 16px var(--font-body); }
.db-replay { color: var(--pencil); font: 500 24px var(--font-hand); white-space: nowrap; }
.db-back:hover, .db-replay:hover { color: var(--red); }
.db-replay:disabled { opacity: .4; cursor: default; }
.db-report-label { flex: 1; color: var(--pencil); font: 400 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.db-sheet { --r: -.15deg; padding: clamp(18px, 3vw, 32px); isolation: isolate; min-width: 0; }
.db-sheet::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(157deg,transparent 48%,rgba(169,159,135,.065) 49%,rgba(255,255,255,.6) 49.2%,transparent 50%),linear-gradient(32deg,transparent 53%,rgba(169,159,135,.07) 53.4%,rgba(255,255,255,.45) 53.6%,transparent 54%),linear-gradient(89deg,transparent 37%,rgba(177,169,147,.075) 37.2%,transparent 38%); }
.db-tape { position: absolute; top: -12px; left: 34px; width: 98px; height: 25px; background: var(--tape); transform: rotate(-4deg); clip-path: polygon(0 2%,98% 0,100% 94%,2% 100%); }
.db-meta { margin: 0 0 8px; color: var(--pencil); font: 400 11px/1.5 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.db-goal { margin: 0 0 12px; font-size: clamp(25px, 3.6vw, 37px); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; }
.db-stamp { display: inline-block; padding: 6px 11px; margin: 2px 0 6px; border: 3px solid var(--red); border-radius: 3px; transform: rotate(-5deg); color: var(--red); font: 500 clamp(13px, 2vw, 17px)/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.db-question { min-height: 1.25em; margin: 14px 0 0; color: var(--red); font: 500 clamp(25px, 3vw, 32px)/1.2 var(--font-hand); }
.db-experiment { margin: 0; }
.db-scene { width: 100%; max-width: 760px; height: clamp(230px, 28vw, 260px); margin: 0 auto; }
.db-scene svg { display: block; width: 100%; height: 100%; }
.db-scene text { font-family: var(--font-body); }
.db-caption { min-height: 2.7em; margin: 4px 0 0; font-size: clamp(18px, 2.5vw, 23px); font-weight: 700; line-height: 1.35; text-wrap: pretty; }
.db-continue { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; border: 0; background: transparent; color: var(--red); font: 500 25px/1.2 var(--font-hand); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* The ending: the goal's score beside what the result opened. */
.db-outcome { margin-top: 16px; padding-top: 20px; border-top: 1px dashed var(--rule); scroll-margin-top: 20px; }
.db-ledger { display: grid; gap: 16px; margin: 0; }
.db-ledger > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: baseline; gap: 4px 20px; }
.db-ledger dt { color: var(--pencil); font: 400 11px/1.5 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.db-ledger dd { margin: 0; }
.db-score { color: var(--red); font-size: clamp(19px, 2.4vw, 23px); font-weight: 700; line-height: 1.3; }
.db-opened { font-size: clamp(25px, 3.4vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; text-wrap: pretty; }
.db-mark { padding: 0 3px; color: inherit; background: linear-gradient(var(--highlight), var(--highlight)) no-repeat 0 60% / 100% 80%; }
.db-opened-rest { font-weight: 500; color: var(--ink-2); }
.db-attribution { margin: 16px 0 0; color: var(--pencil); font: 400 12px/1.5 var(--font-mono); }
.db-history { margin-top: 14px; }
.db-history > summary { color: var(--pencil); font-size: 15px; font-weight: 600; }

@media (min-width: 640px) {
  .db-goal { padding-right: 220px; }
  .db-stamp { position: absolute; right: 32px; top: 49px; }
}
@media (max-width: 860px) {
  .db-stage { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .db-log { max-width: none; }
  /* A one-line ticker: every row shares one cell and only the current one shows. */
  .db-log:not([data-expanded]) .db-rows { display: grid; }
  .db-log:not([data-expanded]) .db-row { grid-area: 1 / 1; visibility: hidden; }
  .db-log:not([data-expanded]) .db-row.is-current { visibility: visible; }
  .db-log:not([data-expanded]) .db-row--end { border-bottom: 1px solid var(--rule-light); }
  .db-log-toggle { display: inline-flex; align-items: center; }
}
@media (max-width: 600px) {
  .db-log { padding: 20px 14px 10px; }
  .db-row { min-height: 40px; padding: 5px 0; }
  .db-row-goal { font-size: 15px; }
  .db-toolbar { gap: 6px 12px; }
  .db-back { font-size: 14px; }
  .db-report-label { display: none; }
  .db-replay { margin-left: auto; }
  .db-sheet { padding: 18px 12px; }
  .db-caption { min-height: 4em; }
  .db-ledger > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) and (max-height: 740px) {
  .db-scene { height: 190px; }
  .db-caption { min-height: 3em; }
}

/* Motion: rows, balls and the invitation wait unseen until the log plays (set by discovery-bin.js). */
@media screen and (prefers-reduced-motion: no-preference) {
  .discovery-bin[data-toss="waiting"] :is(.db-row, .db-ball, .db-invitation) { opacity: 0; }
  .db-outcome:not([hidden]) { animation: nb-rise 500ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
  .db-outcome:not([hidden]) .db-mark { animation: nb-hl 800ms cubic-bezier(0.5, 0, 0.25, 1) 350ms both; }
}
@media (prefers-reduced-motion: reduce) { .db-ball { transition: none; } }