/* Developer 3 page styles: dashboard (/app/), money in (/app/income/), /how-it-works/, /reminders/.
   Layout only, built from tokens.css values. No new colours, fonts, radii or motion: the fold is the only motion. */

/* ---------- Member screens ---------- */
.d3-block { margin-top: clamp(32px, 4vw, 48px); }
.d3-block > .h-section { margin-bottom: 16px; }
.d3-cols { display: grid; gap: clamp(32px, 4vw, 48px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .d3-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.d3-cols > .d3-block { margin-top: 0; }
.d3-cols-wrap { margin-top: clamp(32px, 4vw, 48px); }

.d3-loading .tile__value { color: var(--ink-soft); }
.d3-run { margin: -8px 0 24px; }

.d3-needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.d3-needs li { background: var(--white); border: var(--rule-strong) solid var(--ink); padding: 16px; display: grid; gap: 12px; }
.d3-needs p { margin: 0; font-weight: var(--w-label); }
.d3-calm { margin-bottom: 32px; }
.d3-quiet-line { margin: 0; padding: 16px; background: var(--white); border: var(--rule) solid var(--ink); font-weight: var(--w-label); }

.d3-activity { background: var(--white); border: var(--rule) solid var(--ink); padding: 20px 16px 2px; }
.d3-activity .timeline__item { grid-template-columns: 7.5em minmax(0, 1fr); }
.d3-activity .timeline__what { overflow-wrap: anywhere; }
@media (max-width: 480px) { .d3-activity .timeline__item { grid-template-columns: 1fr; } }
.d3-more { margin-top: 12px; }
.d3-art-small .empty__art { max-width: 240px; }

/* Money in */
.d3-income-top { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .d3-income-top { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); } }
.d3-income-top .tiles { margin-bottom: 0; grid-template-columns: 1fr; }
.d3-csv { display: grid; gap: 8px; justify-items: start; }
.d3-csv p { margin: 0; max-width: 34ch; }
.tile__value.is-text { font-size: var(--t-xl); }

.chart__bars--pick { height: 200px; }
.chart__col { all: unset; box-sizing: border-box; display: flex; align-items: flex-end; height: 100%; cursor: pointer; position: relative; }
.chart__col .chart__bar { width: 100%; }
.chart__col:hover .chart__bar { background: var(--ink-soft); }
.chart__col[aria-pressed="true"] .chart__bar { background: var(--yellow); box-shadow: inset 0 0 0 3px var(--ink); }
.chart__col:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.chart__labels .is-now { font-weight: var(--w-display); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.chart__labels .is-picked { font-weight: var(--w-strong); }
.d3-picked { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-top: 14px; font-weight: var(--w-label); }
.d3-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.d3-picker .field__label { margin: 0; }
.d3-picker .select { width: auto; min-width: 12em; }
@media (max-width: 480px) { .chart__bars--pick { height: 150px; } .chart { padding: 16px 12px 12px; } }

/* ---------- Public pages ---------- */
.d3-hero .split { align-items: center; }
.d3-hero .h-hero { max-width: 18ch; }
.d3-under { margin-top: 12px; font-weight: var(--w-label); }
.d3-scene { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }

.d3-loop { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.d3-loop img { display: block; width: 100%; height: auto; }

.d3-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(48px, 7vw, 96px); }
.d3-step .split { align-items: start; }
.d3-step__n { margin: 0 0 10px; }
.d3-step p { max-width: 46ch; }

/* coded product screens (not forms: nothing here is sent) */
.d3-screen { background: var(--white); border: var(--rule-strong) solid var(--ink); box-shadow: 10px 11px 0 var(--floor); padding: 22px 22px 18px; max-width: 520px; width: 100%; }
.stage--paper .d3-screen { box-shadow: 10px 11px 0 var(--fold-2); }
.d3-screen__title { font-size: var(--t-l); font-weight: var(--w-strong); margin: 0 0 16px; }
.d3-fake-field { margin-bottom: 14px; }
.d3-fake-field .field__label { font-size: var(--t-s); }
.d3-fake-field .input { display: flex; align-items: center; min-height: 44px; }
.d3-fake-line { margin: 4px 0 0; padding: 12px 14px; background: var(--fold-1); font-weight: var(--w-strong); }
.d3-fake-tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.d3-fake-tiles .tile { min-height: 120px; padding: 16px; }
.d3-fake-tiles .tile__value { font-size: var(--t-xl); }
@media (max-width: 420px) { .d3-fake-tiles { grid-template-columns: 1fr; } .d3-screen { padding: 18px 14px 14px; } }

.d3-table { width: 100%; max-width: 520px; border-collapse: collapse; background: var(--white); border: var(--rule) solid var(--ink); margin: 20px 0; }
.d3-table th, .d3-table td { text-align: left; padding: 12px 16px; border-bottom: var(--rule) solid var(--fold-2); }
.d3-table th { background: var(--fold-1); font-size: var(--t-s); font-weight: var(--w-strong); border-bottom: var(--rule-strong) solid var(--ink); }
.d3-list { padding-left: 1.2em; max-width: 52ch; }
.d3-list li { margin-bottom: .45em; }

/* Schedule strip (how it works motion moment): drag a step, the readouts update, the step folds up while held */
.d3-strip { margin-top: 28px; background: var(--white); border: var(--rule-strong) solid var(--ink); padding: 20px clamp(14px, 3vw, 28px) 24px; }
.d3-strip__label { font-weight: var(--w-strong); margin: 0 0 8px; }
.d3-strip__track { position: relative; height: 112px; margin: 0 22px; touch-action: none; }
.d3-strip__line { position: absolute; left: 0; right: 0; top: 70px; height: 0; border-top: var(--rule-strong) solid var(--ink); }
.d3-strip__tick { position: absolute; top: 64px; width: 2px; height: 14px; margin-left: -1px; background: var(--fold-3); }
.d3-strip__due { position: absolute; top: 48px; bottom: 0; width: 0; border-left: 3px solid var(--ink); }
.d3-strip__due span { position: absolute; left: 6px; bottom: 0; font-size: var(--t-xs); font-weight: var(--w-strong); white-space: nowrap; }
.d3-knob { position: absolute; top: 4px; width: 44px; height: 56px; margin-left: -22px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; transform-origin: 50% 100%; transition: transform var(--fold-time) var(--fold-ease); }
.d3-knob__env { position: absolute; left: 4px; right: 4px; top: 6px; height: 30px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.d3-knob__env::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: var(--fold-2); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.d3-knob__n { position: absolute; left: 0; right: 0; top: 38px; font-size: var(--t-xs); font-weight: var(--w-strong); text-align: center; }
.d3-knob::after { content: ""; position: absolute; left: 50%; top: 58px; width: 2px; height: 10px; margin-left: -1px; background: var(--ink); }
.d3-knob:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.d3-knob.is-held { cursor: grabbing; transform: perspective(500px) rotateX(38deg); z-index: 2; }
.d3-knob.is-held .d3-knob__env { background: var(--yellow); }
.d3-readout { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.d3-readout li { display: grid; gap: 2px; padding: 10px 12px; background: var(--paper); border: var(--rule) solid var(--fold-2); }
.d3-readout .tone { font-weight: var(--w-strong); }
.d3-readout .when { font-size: var(--t-s); }
.d3-readout .when.fold-in { display: block; }

/* Reminder letters: the four emails as a stack; picking a tone folds that letter to the front */
.d3-tones { margin: 28px 0 20px; }
.d3-stack { display: grid; }
.d3-stack > .d3-letter { grid-area: 1 / 1; }
.d3-letter .letter { max-width: none; }
.d3-letter__head { margin: 0 0 12px; }
.js .d3-stack { padding-top: 42px; max-width: 680px; }
.js .d3-stack > .d3-letter { width: calc(100% - 30px); transform: translate(calc(var(--back, 0) * 10px), calc(var(--back, 0) * -14px)); z-index: calc(10 - var(--back, 0)); }
.d3-stack--live > .d3-letter .d3-letter__head { display: none; }
.d3-stack__head { margin: 0 0 8px; }
.js .d3-stack > .d3-letter:not(.is-front) .letter { box-shadow: 4px 4px 0 var(--fold-3); }
.js .d3-stack > .d3-letter:not(.is-front) .letter__body,
.js .d3-stack > .d3-letter:not(.is-front) .letter__subject,
.js .d3-stack > .d3-letter:not(.is-front) .letter__meta { visibility: hidden; }
.js .d3-stack > .d3-letter.is-front { z-index: 20; }
.js .d3-stack > .d3-letter.is-front .letter { transform-origin: 50% 0; }
.d3-stack:not(.d3-stack--live) > .d3-letter + .d3-letter { margin-top: 40px; }
.js .d3-stack.d3-stack--live > .d3-letter + .d3-letter { margin-top: 0; }
.d3-letter .letter__body { white-space: pre-line; }
.d3-thanks { max-width: 680px; }

/* Dashboard tiles hold long amounts like €20,670.00: keep them on one line inside four tiles. */
.d3-tiles .tile__value, .d3-tiles-wrap .tile__value { font-size: clamp(1.75rem, 1rem + 2vw, 3rem); white-space: nowrap; }
.d3-nowrap { white-space: nowrap; }
.d3-csv .btn { white-space: normal; text-align: left; line-height: 1.2; padding-top: 10px; padding-bottom: 10px; max-width: 100%; }