/* css/ds-results.css: owned by P4 (results, Story voice, daylight activity screens, clearing sheet). Package-local rules; the core pieces (.ds-result, .ds-delta, .ds-found, .ds-ledger, .ds-frames,
   .ds-pile ...) are in core.css. Where a rule here changes a core component for the tray or a sheet it says so. */

/* ---- the result card in the tray (result_card.js) ---- */
/* The card stands where the last-action line and the situation were (they are not drawn while it is up): the body may use their 72px, and is held to the tray budget (216px). */
.ds-tray.with-result .tray-body { max-height: 216px; padding-top: 0; }
.ds-tray.with-result .ds-result { padding: 0; }
/* local override of core .ds-result: tighter inside the tray so a 3-line headline plus a Found box fit the budget */
.ds-tray.with-result .ds-result .top { min-height: 32px; }
.ds-tray.with-result .ds-result .headline { font-size: calc(20px * var(--ts, 1)); line-height: 1.2; margin: 0 0 8px; }
.ds-tray.with-result .ds-result .ds-deltas { margin-bottom: 8px; }
.ds-tray.with-result .ds-result .ds-found { margin-bottom: 6px; padding: 8px 12px; min-height: 56px; }
.ds-tray.with-result .ds-result .ds-found .l { font-size: calc(14px * var(--ts, 1)); line-height: 1.2; }

/* ---- the Day Result and its overview (results.js, dayresult.js; mockup 02 c3) ---- lifted from mockups/ds.css "@package P4" */
.ds-dayres h3 { margin: 12px 0 6px; font: 600 calc(12px * var(--ts, 1))/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ds-dayres .headline { margin: 6px 0 12px; text-wrap: balance; }
.ds-dayres .line { display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid var(--line-1); font: 400 calc(17px * var(--ts, 1))/1.3 var(--font-voice); }
.ds-dayres .line .k { flex: none; width: 64px; font: 600 calc(12px * var(--ts, 1))/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ds-dayres .line .ds-counter { flex: none; width: 36px; height: 36px; display: grid; place-items: center; }
.ds-dayres .line .ds-counter img { width: 100%; height: 100%; object-fit: contain; }
.ds-dayres .line .ds-counter .ds-i { width: 22px; height: 22px; color: var(--danger); }
.ds-dayres .line .what { min-width: 0; }
.ds-dayres .ds-frames { margin-top: 20px; }
.ds-frame.void .v { color: var(--ink-3); opacity: .8; }
/* the overview: a phase line with the round boxes under it */
.ds-dayres.overview .repstep { margin: 0; border-top: 1px solid var(--line-1); }
.ds-dayres.overview .repstep > summary, .ds-dayres.overview p.repstep { display: flex; gap: 10px; align-items: baseline; min-height: 44px; padding: 10px 0; font: 400 calc(17px * var(--ts, 1))/1.35 var(--font-voice); list-style: none; cursor: pointer; }
.ds-dayres.overview .repstep > summary::-webkit-details-marker { display: none; }
.ds-dayres.overview .ph { flex: none; width: 22px; font: 700 calc(13px * var(--ts, 1))/calc(22px * var(--ts, 1)) var(--font-ui); color: var(--ink-3); text-align: center; }
.ds-dayres.overview .repstep[open] > summary { color: var(--gold-hi); }
.ds-dayres.overview .repstep p { margin: 0 0 8px 32px; font: 400 calc(16px * var(--ts, 1))/1.35 var(--font-voice); color: var(--ink-2); }
.ds-dayres.overview .roundbox { margin: 4px 0 8px 32px; padding: 6px 12px 4px; border-left: 2px solid var(--gold-lo); background: var(--surface-3); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ds-dayres.overview .roundbox p { margin: 0 0 6px; }
.ds-dayres.overview .roundmark { font: 600 calc(12px * var(--ts, 1))/1.6 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.dayres-foot { display: flex; align-items: center; gap: 12px; }
.dayres-foot .ds-btn { white-space: nowrap; flex: 0 0 auto; }
.dayres-foot .ds-btn.primary { flex: 0 1 62%; margin-left: auto; }

/* ---- Turn's end (phases.js turnEndSheet): who you are tonight and why, then what the evening brings ---- */
.turnend .te-status { margin: 0 0 6px; }
.turnend .te-status.hidden { border-left-color: var(--success); background: var(--success-wash); }
.turnend .te-status.seen { border-left-color: var(--warn); background: rgba(224, 168, 90, .12); }
.turnend .te-status b { font: 700 calc(19px * var(--ts, 1))/1.2 var(--font-ui); }
.turnend .ds-list, .turnend .te-row { margin-bottom: 8px; }
.te-row { min-height: 56px; }
.te-row .chitwrap { flex: none; display: grid; place-items: center; min-width: 44px; }
.te-row .main .one { font: 400 calc(17px * var(--ts, 1))/1.3 var(--font-voice); color: var(--ink); }
.te-row .te-who { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.te-row .te-who .who { display: inline-flex; align-items: center; gap: 6px; }
.te-row .te-who .ico { width: 28px; height: 28px; object-fit: contain; }
.te-row .te-who b { font: 700 calc(15px * var(--ts, 1))/1.2 var(--font-ui); color: var(--ink); }
.turnend .te-quiet, .turnend .te-lost { margin: 6px 0 8px; font: 400 calc(15px * var(--ts, 1))/1.35 var(--font-voice); color: var(--ink-2); }
.turnend .te-row.mon { border-left: 3px solid var(--danger); } .turnend .te-row.nat { border-left: 3px solid var(--info); }

/* ---- how a game ends (endscreen.js; mockup 08 j1 death, j2 victory): a full screen over the shell. Lifted from mockups/ds.css "@package P4" (.ds-death, .ds-goal -> .ds-egoal: the name .ds-goal is the front door's) ---- */
.ds-end { position: fixed; inset: 0; z-index: 30; width: min(100%, 520px); margin-inline: auto; display: flex; flex-direction: column; overflow: hidden; padding: var(--safe-t) 0 0; color: var(--ink); font-family: var(--font-ui);
    background: radial-gradient(100% 50% at 50% 0%, #1a2034 0%, var(--surface-1) 70%); }
.ds-end.dead { background: radial-gradient(100% 50% at 50% 0%, #2a1316 0%, var(--surface-1) 70%); }
.ds-end.won { background: radial-gradient(100% 50% at 50% 0%, #2a2412 0%, var(--surface-1) 70%); }
.ds-end.ds-screen { flex: none; padding-left: 0; padding-right: 0; }
.ds-end .end-scroll { padding: var(--gutter) var(--gutter) 16px; }
.ds-end .ds-foot { padding-bottom: calc(12px + var(--safe-b)); }
.ds-end .ds-foot .ds-btn.quiet { min-width: 88px; }
.ds-death { text-align: center; padding: 8px 0 0; } .ds-death .skull { width: 72px; height: 72px; margin: 0 auto 6px; color: var(--danger); }
.ds-death .skull .ds-i { width: 72px; height: 72px; stroke-width: 1.4; }
.ds-death h1 { margin: 0; font: 700 calc(34px * var(--ts, 1))/1.05 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--danger); text-wrap: balance; }
.ds-death .ds-eyebrow { margin-bottom: 6px; }
.ds-death .ds-voice { margin: 10px 0 4px; text-wrap: balance; }
.ds-end .vsw { margin: 10px 0 0; display: flex; justify-content: center; }
.ds-end .end-hero { text-align: center; }
.ds-end .end-mark { width: 64px; height: 64px; margin: 0 auto 4px; } .ds-end .end-mark .ds-i { width: 64px; height: 64px; stroke-width: 1.4; }
.ds-end .end-mark.win { color: var(--gold); } .ds-end .end-mark.lose { color: var(--ink-3); }
.ds-end .end-hero h1 { margin: 6px 0 8px; font-size: calc(30px * var(--ts, 1)); line-height: 1.1; text-wrap: balance; } .ds-end.won .end-hero h1 { color: var(--gold-hi); }
.ds-end .end-hero .ds-voice { margin: 0; text-wrap: balance; }
.ds-end .end-final { text-align: center; margin: 18px 0 6px; } .ds-end .end-final .ds-num { font-size: calc(56px * var(--ts, 1)); line-height: 1.1; }
.ds-end.dead .end-final .ds-num { font-size: calc(44px * var(--ts, 1)); } .ds-end .end-final .ds-num.pos { color: var(--success); } .ds-end .end-final .ds-num.neg { color: var(--danger); }
.ds-end .end-final .ds-meta { margin: 4px 0 0; }
.ds-end .ds-frames { margin-top: 14px; }
.ds-end .ds-list { margin-bottom: 6px; }
.ds-end .ds-egoal { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 64px; border-radius: var(--r-md); border: 1px solid var(--line-1); background: var(--surface-3); }
.ds-egoal .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ds-egoal .top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ds-egoal .top b { font: 700 calc(17px * var(--ts, 1))/1.2 var(--font-ui); color: var(--frame); } .ds-egoal .top .of { font: 500 calc(14px * var(--ts, 1))/1.2 var(--font-ui); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ds-egoal .bar { height: 6px; border-radius: 3px; background: var(--line-1); overflow: hidden; margin-top: 6px; } .ds-egoal .bar i { display: block; height: 100%; background: var(--frame, var(--gold)); }
.ds-egoal .egn { margin-top: 5px; font: 400 calc(14px * var(--ts, 1))/1.25 var(--font-voice); color: var(--ink-3); }
.ds-egoal.short .egn { color: var(--ink-2); }
.ds-egoal .worth { flex: none; min-width: 44px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.ds-egoal .worth b { font: 700 calc(22px * var(--ts, 1))/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; } .ds-egoal .worth small { font: 600 calc(12px * var(--ts, 1))/1.2 var(--font-ui); letter-spacing: .08em; color: var(--ink-3); margin-top: 3px; }
.ds-egoal .worth.pos b { color: var(--success); } .ds-egoal .worth.neg b { color: var(--danger); }
.ds-end .end-idle { margin: 8px 0 0; } .ds-end .end-idle summary { min-height: 44px; display: flex; align-items: center; color: var(--ink-2); font: 500 calc(15px * var(--ts, 1))/1.2 var(--font-ui); cursor: pointer; }
.ds-end .end-sale { margin: 14px 0 0; text-align: center; }
.ds-end .end-run { margin-top: 4px; } .ds-end .end-run .ds-voice { margin: 0; font-size: calc(18px * var(--ts, 1)); line-height: 1.4; }
.ds-end .end-title { margin-top: 12px; display: flex; gap: 12px; justify-content: center; }
/* a sheet over the end screen (the restart question) stands above it */
.ds-end ~ .ds-scrim { z-index: 40; } .ds-end ~ .ds-sheet { z-index: 41; }

/* ---- the clearing sheet, the site blocks and the pile (sheet_clearing.js; mockup 02 d1) and the choice sheets (phases.js; mockup 01 b2) ---- lifted from mockups/ds.css "@package P4" ---- */
.ds-site { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin-bottom: 8px; border-radius: var(--r-md); border: 1px solid var(--line-1); background: var(--surface-3); }
.ds-site.found { border-color: var(--line-gold); } .ds-site.fresh { border: 1.5px solid var(--gold); background: var(--gold-wash); }
.ds-site .head { display: flex; gap: 12px; align-items: center; }
.ds-site .head .ds-counter { flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.ds-site .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-site .main b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 calc(17px * var(--ts, 1))/1.2 var(--font-ui); }
.ds-site .ds-dim { font: 400 calc(15px * var(--ts, 1))/1.3 var(--font-voice); color: var(--ink-2); }
.ds-site .ds-meta, .ds-site .ds-more { margin: 0; }
.ds-site .ds-more summary { min-height: 44px; display: flex; align-items: center; color: var(--ink-3); font: 500 calc(14px * var(--ts, 1))/1.2 var(--font-ui); cursor: pointer; }
.ds-site .setupline.card { padding: 6px 8px; border-left: 3px solid var(--arcane, #6c5aa8); background: rgba(108, 90, 168, .12); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink-2); font: 400 calc(14px * var(--ts, 1))/1.35 var(--font-ui); }
.ds-twt { display: flex; flex-direction: column; gap: 4px; }
.ds-twt .twtrow { display: flex; gap: 12px; align-items: baseline; padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface-2); font: 400 calc(15px * var(--ts, 1))/1.3 var(--font-voice); }
.ds-twt .twtrow b { min-width: 1.2em; font: 700 calc(15px * var(--ts, 1))/1.3 var(--font-ui); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.ds-pile { display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; padding: 18px 2px 6px; scrollbar-width: none; }
.ds-card { position: relative; flex: none; border-radius: 6px; background: repeating-linear-gradient(135deg, #2a3350, #2a3350 6px, #323c5e 6px, #323c5e 12px); border: 1.5px solid var(--line-2); display: grid; place-items: center; color: var(--ink-2); font: 700 calc(15px * var(--ts, 1))/1 var(--font-ui); }
.ds-card.small { width: 40px; height: 54px; } .ds-card.large { width: 48px; height: 68px; }
.ds-card .t { position: absolute; left: 0; right: 0; top: -15px; text-align: center; font: 600 calc(12px * var(--ts, 1))/1 var(--font-ui); letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.ds-card.reach { border-color: var(--gold); color: var(--gold-hi); box-shadow: 0 0 0 2px rgba(181, 227, 156, .18); }
.ds-card.deep { opacity: .45; border-style: dashed; }
.ds-pile-key { display: flex; justify-content: space-between; gap: 8px; font: 400 calc(13px * var(--ts, 1))/1.3 var(--font-ui); color: var(--ink-3); }
.ds-pile-key span:nth-child(n+2) { flex: 1; text-align: right; }
.ds-spellsapart { margin: 6px 0 0; }
.ds-clearing .ds-roads { margin-top: 14px; } .ds-clearing .ds-roads > summary { min-height: 44px; display: flex; align-items: center; color: var(--ink-2); font: 500 calc(15px * var(--ts, 1))/1.2 var(--font-ui); cursor: pointer; }
.ds-clearing .ds-roads .ds-row { margin-top: 6px; min-height: 48px; }
.ds-clearing .ds-row.meetwith { color: inherit; }
.ds-clearing .ds-row .art img { max-width: 80%; max-height: 80%; }
.ds-clearing .ds-row.off { opacity: .8; border-style: dashed; }          /* a road not found yet: dashed and a little fainter, its words still readable (60% left them at 3.9:1) */
.ds-clearing .ds-row .ds-tag { flex: none; }
/* a sign (note 94): the chit as printed, its own 62px column (it used to hang out of the 44px picture box), then what it can call on this tile, one line a Monster Roll */
.ds-clearing .ds-row.sign { align-items: flex-start; padding: 10px 12px; }
.ds-clearing .ds-row.sign .art2 { flex: none; width: 62px; min-width: 62px; justify-content: center; }
.ds-clearing .ds-calls { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.ds-clearing .ds-calls .calls-lead, .ds-clearing .calls-none { font: 400 calc(14px * var(--ts, 1))/1.3 var(--font-voice); color: var(--ink-2); }
.ds-clearing .callrow { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; border-top: 1px solid var(--line-1); }
.ds-clearing .callrow .roll { display: flex; align-items: baseline; gap: 8px; font: 700 calc(13px * var(--ts, 1))/1.2 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.ds-clearing .callrow.today .roll { color: var(--gold-hi); }
.ds-clearing .callrow .roll small { font: 600 calc(12px * var(--ts, 1))/1 var(--font-ui); letter-spacing: .04em; color: var(--gold-hi); }
.ds-clearing .callrow .who { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 600 calc(15px * var(--ts, 1))/1.25 var(--font-ui); color: var(--ink); }
.ds-clearing .callmon { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font: 600 calc(15px * var(--ts, 1))/1.25 var(--font-ui); color: var(--ink); }
.ds-clearing .callmon img { flex: none; width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: var(--counter-face); box-shadow: inset 0 0 0 1.5px var(--counter-edge); }
.clearing-sheet .ds-sheet-body { padding-bottom: 18px; }
/* the choice sheets: select then commit */
.pick-sheet .ds-opts { gap: 8px; }
.ds-opt { cursor: pointer; }
.ds-opt .main span { font: 400 calc(15px * var(--ts, 1))/1.3 var(--font-voice); }
.ds-opt.quiet { border-style: dashed; } .ds-opt.quiet .main b { color: var(--ink-2); }
.ds-optgroup { display: flex; flex-direction: column; gap: 6px; }
.ds-optgroup > .ds-site { margin: 0 0 4px 12px; }
.ds-opt-foot { display: flex; align-items: center; gap: 12px; }
.ds-opt-foot .lead { flex: 1; min-width: 0; }
.ds-opt-foot .ds-btn.primary { flex: 0 1 62%; margin-left: auto; }

.ds-foot-pair > .peek-foot { display: none; } .ds-foot-pair { padding: 0 !important; border: 0 !important; }
.ds-sheet[data-detent="peek"] .ds-foot-pair > .ds-opt-foot { display: none; } .ds-sheet[data-detent="peek"] .ds-foot-pair > .peek-foot { display: flex; }
.ds-foot-pair > .ds-opt-foot { padding: 10px var(--gutter) 12px; border-top: 1px solid var(--line-1); }

/* ---- chits in the Rest and effort sheets (phases.js chitTile): the .ds-chit tile, usable ones first and lit ---- */
.chit-sheet .restsheet { display: flex; flex-direction: column; gap: 10px; }
.ds-chitgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ds-chitgrid .ds-chit { width: 100%; height: 64px; }
.ds-chitgrid .ds-chit.pick { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(181, 227, 156, .22); }
.ds-chitgrid .ds-chit.dim { opacity: .72; border-style: dashed; }          /* a chit that cannot pay: dashed and fainter, its Move/Fight word still readable (50% was 2.5:1) */
.ds-chitgrid .ds-chit.pick { opacity: 1; }

/* Prophecy's picker in the tray (tray.js phase-pick): eight actions in two rows of four, icon over word, so the chips, the hint and the pips fit the tray budget without scrolling */
.ds-tray .pickacts { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ds-tray .pickacts .ds-act { flex-direction: column; justify-content: center; gap: 2px; min-height: 54px; padding: 2px; font-size: calc(14px * var(--ts, 1)); text-align: center; }
.ds-tray .pickacts .ds-act img { width: 24px; height: 24px; }
.ds-tray .pickacts .ds-act.on { border: 2px solid var(--gold); background: var(--gold-wash-2); }

/* ---- G1 (fix wave 2) ---- */
/* QA-101: a choice sheet grows to what it holds (the pile, all the readings), up to 70% (the map keeps 25% above it, the hero in view), and then scrolls under its foot; DR-27: the fade at the foot of the scroll is 28px and the rows snap, so a row is never cut mid-line */
.ds-sheet.decision.pick-sheet[data-detent="hug"], .ds-sheet.decision.chit-sheet[data-detent="hug"] { max-height: 70%; }
.pick-sheet .ds-sheet-body, .chit-sheet .ds-sheet-body { -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); padding-bottom: 30px; scroll-snap-type: y proximity; scroll-padding: 4px 0 30px; }
.pick-sheet .ds-ask, .pick-sheet .ds-opt, .pick-sheet .ds-optgroup { scroll-snap-align: start; }
/* QA-110: the Rest sheet's chits are picked, then the foot does it; the folded list of ready chits */
.chit-sheet .rest-ready { margin: 0; } .chit-sheet .rest-ready > summary { color: var(--ink-2); font: 500 calc(15px * var(--ts, 1))/1.2 var(--font-ui); }
.chit-sheet .rest-ready .ds-chitgrid { margin-top: 4px; }
.ds-chitgrid .ds-chit.on { border-color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(181, 227, 156, .38); background: var(--gold-wash-2); }
.ds-opt-foot > .ds-btn.quiet { flex: 0 0 auto; }
/* QA-102: the restart sheet's goals are ds-rows with a stepper; the foot carries the one primary */
.restart-goals { display: flex; flex-direction: column; gap: 8px; }
.restart-goals .ds-row.vprow { margin: 0; padding: 6px 10px 6px 12px; min-height: 60px; border: 1px solid var(--line-1); background: var(--surface-3); border-radius: var(--r-md); justify-content: space-between; }
.restart-goals .vprow .main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.restart-goals .vprow .main b { font: 700 calc(17px * var(--ts, 1))/1.2 var(--font-ui); } .restart-goals .vprow .main span { font: 400 calc(14px * var(--ts, 1))/1.25 var(--font-voice); color: var(--ink-2); }
.restart-goals .vprow .stepper { width: 150px; flex: none; }
.restart-goals .vprow .step-btn { width: 44px; height: 44px; border-radius: var(--r-md); font-size: calc(26px * var(--ts, 1)); }
.restart-goals .vprow .step-val b { font-size: calc(22px * var(--ts, 1)); }
.ds-opt-foot .lead.bad { color: var(--warn); }
.ds-opt-foot .ds-btn.primary[disabled] { flex: 0 1 62%; }

/* QA-109 / QA-117: a win is VICTORY (big, gold, the trophy glowing); a loss is quiet and cold ("Short of your goals"); every goal that moved the score is a visible row and the rows add up to the total */
.ds-end.won .end-hero h1 { font-size: calc(40px * var(--ts, 1)); letter-spacing: .16em; line-height: 1.05; margin: 8px 0 10px; text-shadow: 0 0 26px rgba(181, 227, 156, .35); }
.ds-end.won .end-mark.win { filter: drop-shadow(0 0 14px rgba(181, 227, 156, .55)); }
.ds-end.lost .end-hero h1 { font-size: calc(26px * var(--ts, 1)); color: var(--ink-2); letter-spacing: .08em; }
.ds-end .end-deed { margin: 10px 0 0; font: italic 400 calc(16px * var(--ts, 1))/1.3 var(--font-voice); color: var(--ink-2); text-wrap: balance; }
.ds-end .ds-egoal.idle { min-height: 56px; border-style: dashed; }
.ds-end .ds-egoal.idle .top b { color: var(--ink-2); }
.ds-dayres .dayres-score { margin: 14px 0 0; text-align: center; font: 400 calc(15px * var(--ts, 1))/1.35 var(--font-voice); color: var(--ink-2); text-wrap: balance; }
.clearing-sheet .none-known { margin: 10px 0 4px; color: var(--ink-2); }

/* The Day Result is a small card (Mike, 2026-11-02): the ledger folds under the foot's Details button; the card grows only when it is open, and then it scrolls inside itself. */
.dayres-details > summary { display: none; }
.dayres-details[open] { margin-top: 10px; max-height: 38vh; overflow-y: auto; border-top: 1px solid var(--line-1); padding-top: 8px; }
.ds-card.known { background: linear-gradient(160deg, #3a4a2c, #2c3a22); border-style: solid; }
.ds-card.known .t { color: var(--gold-hi); }
.ds-pile-known { margin: 2px 0 0; }