:root{--bg:#08111f;--panel:#111d31;--panel2:#17263f;--ink:#f7efe1;--muted:#aeb9c9;--line:#2e405d;--amber:#f0a63b;--green:#68d391;--red:#fc8181;--blue:#6db7ff}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}body{max-width:520px;margin:0 auto;border-left:1px solid #1b2b43;border-right:1px solid #1b2b43}button{font:inherit;color:inherit}#app{min-height:100vh;padding-bottom:180px}.screen{padding:18px}.start{min-height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.skyline{position:absolute;inset:auto 0 0;height:190px;opacity:.22;background:linear-gradient(#14243d,#07101d)}.skyline i{position:absolute;bottom:0;width:19%;background:#233b5d;border-top:4px solid #f0a63b}.skyline i:nth-child(1){left:3%;height:70px}.skyline i:nth-child(2){left:25%;height:120px}.skyline i:nth-child(3){left:50%;height:90px}.skyline i:nth-child(4){left:74%;height:145px}.start>*:not(.skyline){position:relative}h1{font-size:34px;line-height:1;margin:8px 0 10px;letter-spacing:-.04em}h2{margin:0 0 6px;font-size:18px}.lede{color:var(--muted);font-size:16px;line-height:1.45}.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--amber);font-weight:800;font-size:11px;margin:0 0 8px}.background-grid{display:grid;gap:10px;margin-top:20px}.background-card,.action-card,.goal-card{border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),#0d1829);border-radius:20px;padding:16px;box-shadow:0 12px 32px #0005}.background-card{text-align:left;display:grid;gap:7px;cursor:pointer}.background-card b{font-size:18px}.background-card span,.background-card small,.action-card p,.goal-card p{color:var(--muted);line-height:1.4}.background-card em{color:#ffd08a;font-style:normal}.topbar{position:sticky;top:0;z-index:20;background:#08111fee;backdrop-filter:blur(12px);padding:12px 14px;border-bottom:1px solid var(--line)}.brand{font-weight:900;letter-spacing:-.03em;margin-bottom:9px}.brand b{color:var(--amber)}.stats{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}.stat{white-space:nowrap;background:#132138;border:1px solid #2c405e;border-radius:999px;padding:7px 10px;font-size:12px;color:var(--muted)}.stat .num{color:var(--ink);font-weight:800}.day-pill small{margin-left:5px}.num{cursor:pointer;border-bottom:1px dotted #f0a63b}.num.big{font-size:34px;font-weight:900}.street-art{height:190px;border:1px solid #263b59;border-radius:28px;position:relative;overflow:hidden;background:linear-gradient(#172d4a 0%,#0e1b30 58%,#1c1a20 58%,#26222a 100%);margin-bottom:12px}.sun{position:absolute;right:28px;top:24px;width:46px;height:46px;border-radius:50%;background:#f0a63b;box-shadow:0 0 40px #f0a63b88}.shop{position:absolute;bottom:34px;background:#253e60;border:2px solid #3a5477}.shop.one{left:30px;width:90px;height:78px}.shop.two{right:42px;width:120px;height:98px}.shop:before{content:"";position:absolute;inset:12px 10px auto;height:16px;background:#f0a63b}.person{position:absolute;left:47%;bottom:20px;width:14px;height:38px;background:#f7efe1;border-radius:8px 8px 3px 3px;box-shadow:0 -10px 0 2px #d48b55}.street-copy{color:#ffd08a;margin:12px 2px}.goal-card{margin:12px 0;border-color:#6b4d22;background:linear-gradient(135deg,#241b11,#111d31)}.goal-progress{margin-top:10px;color:var(--ink);font-weight:700}.tap-stage{text-align:center;margin:16px 0}.tap-stage p{color:var(--muted);font-size:13px}.tap-earn{width:100%;min-height:116px;border:0;border-radius:28px;background:linear-gradient(135deg,#f0a63b,#d96f24);color:#1d1207;display:grid;place-items:center;font-size:20px;font-weight:900;box-shadow:0 16px 42px #d96f2455;touch-action:manipulation}.tap-earn b{font-size:28px}.quick-row{display:flex;gap:10px;flex-wrap:wrap}.quick-row>button,.run,.primary{flex:1;min-height:48px;border-radius:14px;border:1px solid #3c587c;background:#1b2c47;font-weight:800}.primary-action,.primary{background:var(--amber)!important;border-color:var(--amber)!important;color:#1d1207!important}button:disabled{opacity:.42;cursor:not-allowed}.cards{display:grid;gap:12px}.action-card small{display:block;color:#8798ad;margin-top:10px}.action-card.wide{grid-column:1/-1}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.chips>span{border:1px solid #344b6d;background:#101d32;border-radius:999px;padding:7px 9px;color:var(--muted);font-size:12px}.locked{filter:saturate(.65)}.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(520px,100%);z-index:30;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;background:#08111fee;border-top:1px solid var(--line);padding:6px;backdrop-filter:blur(14px)}.bottom-nav button{min-height:42px;border:0;border-radius:12px;background:#142239;color:var(--muted);font-size:11px;font-weight:800;min-width:0;padding:0 2px;overflow:hidden;text-overflow:ellipsis}.bottom-nav button.on{background:var(--amber);color:#1d1207}.ledger-table{display:grid;gap:7px}.ledger-row,.log-row{display:grid;grid-template-columns:70px 1fr auto;gap:8px;align-items:center;background:#101d32;border:1px solid #2a405f;border-radius:12px;padding:10px}.log-row{grid-template-columns:1fr auto;margin-bottom:7px}.log-row span,.ledger-row span{color:var(--muted);font-size:12px}#toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%) translateY(20px);opacity:0;background:#f7efe1;color:#111d31;padding:10px 14px;border-radius:999px;font-weight:900;z-index:60;transition:.2s;pointer-events:none;max-width:90%;text-align:center}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}dialog{border:0;border-radius:24px;background:var(--panel);color:var(--ink);width:min(440px,calc(100vw - 28px));padding:0}dialog::backdrop{background:#000b}.explain-card{padding:20px}.explain-total{margin:10px 0}.parts{display:grid;gap:8px;margin:12px 0}.parts div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #2a405f;padding-bottom:8px}.parts span{color:var(--muted)}.formula{background:#0c1728;border-left:3px solid var(--amber);padding:9px;color:#ffd08a}@media(min-width:700px){body{max-width:720px}.cards{grid-template-columns:repeat(2,1fr)}.bottom-nav{width:720px}.background-grid{grid-template-columns:repeat(2,1fr)}}
.briefing-card{border:1px solid #27405f;background:#0d1a2d;border-radius:18px;padding:12px;margin:10px 0}.briefing-card p{margin:0;color:var(--muted)}.briefing-card p+p{margin-top:6px}.briefing-card p b{color:var(--cream)}.brief-scene{margin-top:10px;padding:10px;border-left:3px solid #ffd08a;background:#ffffff08;border-radius:10px}.brief-scene h3{margin:2px 0 6px;font-size:16px;color:var(--cream)}.brief-warning{color:#ffb4a4!important}.close-preview{margin-top:10px;border-top:1px solid #27405f;padding-top:10px;display:grid;gap:5px}.close-preview span{color:var(--muted)}
.event-card{border:1px solid #7a3e3e;background:linear-gradient(135deg,#2a1619,#111d31);border-radius:18px;padding:14px;margin:10px 0}.event-card p{color:#f1c7c7}

/* v43 visual continuity: illustrated scenes, warm paper panels, teal chrome. */
:root{--bg:#0c1d29;--panel:#183446;--panel2:#142b3c;--ink:#fff4dd;--muted:#b3c7cb;--line:#ffffff22;--amber:#edbc65;--cream:#fff4dd;--teal:#244a61;--green:#a1d5b3;--red:#ffb9a9}
body{background:var(--bg);border-color:#ffffff18;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
h1,h2{font-family:Georgia,serif;font-weight:500;letter-spacing:0;line-height:1.12}
h1{font-size:31px}.topbar{background:#142b3cf5;border-bottom-color:#ffffff20}.brand{font-family:Georgia,serif;font-size:19px;font-weight:500}.stat{background:#183446;border-color:#ffffff22;color:var(--muted)}.stat .num{color:var(--cream)}
.start{justify-content:flex-end;background:#0c1d29;padding:0 0 18px}.start-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;opacity:.78}.start:before{content:"";position:absolute;inset:0;background:linear-gradient(#0c1d2940,#0c1d29 72%);z-index:0}.start>*:not(.start-art){z-index:1;margin-left:18px;margin-right:18px}.start .eyebrow{text-shadow:0 2px 12px #000}.start h1{text-shadow:0 3px 16px #000}.start .lede{color:#f2eadb;text-shadow:0 2px 12px #000}
.scene-hero{position:relative;height:220px;margin:-18px -18px 14px;overflow:hidden;background:#243e48}.scene-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 44%;display:block}.scene-hero.city img{object-position:center;filter:saturate(.92)}.scene-hero:after{content:"";position:absolute;inset:38% 0 0;background:linear-gradient(transparent,#102534ee);pointer-events:none}.scene-copy{position:absolute;z-index:2;left:16px;right:16px;bottom:14px;text-shadow:0 2px 14px #000}.scene-copy h1{margin:4px 0 6px}.scene-copy p:not(.eyebrow){color:#f2eadb;font-size:13px;line-height:1.35;max-width:360px}
.background-card,.action-card,.goal-card,.briefing-card,.event-card{background:var(--cream);color:#142b3c;border:1px solid #ffffff28;border-radius:18px;box-shadow:0 10px 28px #0005}.background-card:nth-child(even),.action-card:nth-child(even),.briefing-card,.event-card{background:#183446;color:var(--cream)}.background-card span,.background-card small,.action-card p,.goal-card p{color:#4a6170}.background-card:nth-child(even) span,.background-card:nth-child(even) small,.action-card:nth-child(even) p,.briefing-card p,.event-card p{color:var(--muted)}.background-card em{color:#9a6225}.background-card:nth-child(even) em{color:#ffd08a}.action-card small{color:#607481}.action-card:nth-child(even) small{color:var(--muted)}.chips>span{background:#142b3c12;border-color:#142b3c22;color:#365061}.action-card:nth-child(even) .chips>span,.briefing-card .chips>span{background:#ffffff10;border-color:#ffffff20;color:var(--muted)}.goal-card{background:linear-gradient(135deg,#fff4dd,#edbc65);color:#142b3c}.goal-progress{color:#142b3c}
button,.quick-row>button,.run{background:var(--teal);border:1px solid #ffffff25;border-radius:12px;min-height:46px}.primary-action,.primary,.tap-earn{background:var(--amber)!important;border-color:transparent!important;color:#142b3c!important}.tap-earn{border-radius:20px;box-shadow:0 14px 34px #0007}.street-copy{color:#ffd08a}.bottom-nav{background:#142b3cf5;border-top-color:#ffffff20}.bottom-nav button{background:#183446;color:var(--muted)}.bottom-nav button.on{background:var(--amber);color:#142b3c}.ledger-row,.log-row{background:#183446;border-color:#ffffff1c;color:var(--cream)}dialog{background:#183446}.formula{background:#102534;color:#ffd08a}
@media(min-width:700px){.scene-hero{margin-left:-24px;margin-right:-24px;height:260px}.start-art{object-position:center 22%}}
.screen,.cards,.action-card,.quick-row,.quick-row>button{min-width:0}.action-card{overflow:hidden;overflow-wrap:anywhere}html,body{overflow-x:hidden}
.bank-actions{display:grid;grid-template-columns:repeat(2,1fr)}
.order-card{background:#f7efe1;color:#142b3c;border:1px solid #142b3c22;border-radius:16px;padding:14px}.order-card p{color:#4a6170;line-height:1.4}.order-card .chips>span{background:#142b3c12;border-color:#142b3c22;color:#365061}

.order-card p,.order-card .chips>span{color:#142b3c}.order-card .chips>span{border-color:#142b3c44;background:#ffffff66}
.action-card .order-card p,.action-card .order-card .chips>span{color:#142b3c}.action-card .order-card .chips>span{border-color:#142b3c44;background:#ffffff66}

.event-options{display:grid;gap:10px;margin-top:12px}.event-option{display:grid;gap:7px}.event-option small{color:#4a6170;line-height:1.35}
.event-card .event-option small{color:#b7c2cf}

.valuation-inputs{display:grid;gap:10px;margin:12px 0}.valuation-line{border-top:1px solid #142b3c22;padding-top:12px}.valuation-line h3{margin:0 0 5px;font-size:15px}.valuation-line p{margin:0;color:#4a6170;line-height:1.4}.action-card:nth-child(even) .valuation-line{border-top-color:#ffffff22}.action-card:nth-child(even) .valuation-line p{color:var(--muted)}.valuation-line .chips{margin:10px 0 0}

/* v0.48 time signals: day-part tones, warnings rail, rollover card */
.topbar.daypart-evening .day-pill, .day-pill.daypart-evening { background: #2b2140; }
.topbar.daypart-night .day-pill, .day-pill.daypart-night { background: #1a1f33; }
.day-pill small { opacity: 0.85; }
.warnings-rail { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.warning-line { text-align: left; border-radius: 8px; padding: 8px 10px; border: 1px solid #6b5b2a; background: #33290f; color: #f0d489; font-size: 13px; list-style: none; }
.warning-line.due-soon { border-color: #8a6d2f; background: #3d2f10; font-weight: 600; }
.warning-line.at-risk { border-color: #a33; background: #3d1212; color: #ffb3b3; font-weight: 700; }
li.warning-line { display: block; }
.rollover-card h2 { margin: 0 0 4px; }
.rollover-sub { opacity: 0.8; margin: 0 0 10px; }
.rollover-lines { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 4px; }
.rollover-lines li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 4px 0; }
.rollover-lines b.pos { color: #8fd48f; }
.rollover-lines b.neg { color: #e8a0a0; }
.warning-go { flex: 0 0 auto; min-width: 28px; border: 0; background: transparent; color: inherit; font-size: 16px; font-weight: 900; cursor: pointer; }
.chips>span.chip-warn{border-color:#edbc6588;color:#edbc65}
.chips>span.chip-bad{border-color:#ffb9a988;color:#ffb9a9}
.care-row{margin-top:8px}
.care-row>button{min-height:40px;font-size:12px}

/* v0.50b: keep button labels on word boundaries (Promote was breaking mid-word on 390px) */
.quick-row>button{overflow-wrap:normal;word-break:normal;font-size:14px}

/* v0.52 compaction + info buttons (Apologia-inspired, painterly kept) */
.sdc{color:var(--muted);line-height:1.4}
.info-marker{display:inline-grid;place-items:center;vertical-align:middle;margin-left:6px;padding:0;width:28px;min-width:28px;height:28px;min-height:28px;border:1px solid var(--line);background:#101d32;color:var(--amber);border-radius:8px;font-size:13px;font-weight:800;font-style:italic}
@media(max-width:600px){
.screen{padding:12px}
.action-card,.background-card,.goal-card{padding:12px;border-radius:16px}
.chips{gap:6px;margin:8px 0}
.chips>span{padding:5px 8px}
.action-card p{margin:6px 0}
}
.stage-chip { opacity: 0.55; }
.stage-chip.done { opacity: 0.85; text-decoration: line-through; }
.stage-chip.current { opacity: 1; font-weight: 700; border-color: #d9a441; }
.log-detail{grid-column:1/-1;margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.45;border-top:1px solid #ffffff14;padding-top:8px}

.venture-bar{height:8px;border-radius:999px;background:#101d32;border:1px solid #344b6d;margin:10px 0;overflow:hidden}.venture-bar i{display:block;height:100%;background:linear-gradient(90deg,#f0a63b,#ffd08a)}.venture-card.zone-thrive{border-color:#3f7d4e}.venture-card.zone-stall{border-color:#8a6d2f}.venture-card.zone-fail{border-color:#8a3a2f}

.decision-card{margin-top:10px;border-top:1px dashed #344b6d;padding-top:10px}.decision-card h3{margin:0 0 6px;font-size:14px}
.action-card:not(:nth-child(even)) .quick-row>button,.action-card:not(:nth-child(even)) .actions>button,.decision-card .quick-row>button{color:#f7efe1}
.action-card:not(:nth-child(even)) p{color:#3d5566}.action-card:not(:nth-child(even)) small{color:#4a6170}.action-card:not(:nth-child(even)) .chips>span{color:#2c4356;border-color:#142b3c44}

/* v0.51 M2 overnight layout sprint (2026-10-18): phone-width fixes; staging-first */
html,body{overflow-x:clip}
#app{padding-bottom:calc(116px + env(safe-area-inset-bottom,0px))}
.quick-row>button{flex:1 1 30%}
@media(max-width:600px){
.scene-hero{margin:-12px -12px 14px}
.stats{gap:5px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.stat{padding:6px 8px;font-size:11px}
}
@media(max-width:600px){
.day-pill small{display:block;margin:1px 0 0;font-size:10px}
.stat{font-size:10.5px;padding:5px 7px}
.stats{gap:4px}
}
.heat-board{display:grid;gap:6px;margin:10px 0}.heat-row{display:grid;grid-template-columns:110px 1fr 40px;gap:8px;align-items:center;font-size:12px;color:#4a6170}.action-card:nth-child(even) .heat-row{color:var(--muted)}.heat-row b{color:#9a6225;font-weight:800}.action-card:nth-child(even) .heat-row b{color:#ffd08a}.heat-track{height:8px;border-radius:999px;background:#142b3c12;overflow:hidden}.action-card:nth-child(even) .heat-track{background:#ffffff12}.heat-fill{display:block;height:100%;border-radius:999px}.heat-fill.hot{background:#d96f24}.heat-fill.cold{background:#4a7ca8}.heat-num{text-align:right;font-weight:800}
/* Spec 15.2: day clock dots, cost-of-time hints */
.block-pill { display: inline-flex; align-items: center; gap: 7px; }
.block-dots { display: inline-flex; gap: 3px; align-items: center; }
.block-dots i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-block; opacity: 0.9; }
.block-dots i.used { background: currentColor; }
.block-dots i.part { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.btn-cost { display: block; font-size: 10px; font-weight: 500; opacity: 0.85; letter-spacing: 0.02em; margin-top: 2px; }
.stepper{flex:0 0 46px;min-height:32px;border-radius:10px}

/* ---- phone pass: five tabs + More sheet (Phase 5) ---- */
.bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:7px 6px;padding-bottom:max(7px,env(safe-area-inset-bottom))}
.bottom-nav button{min-height:48px;font-size:12px;letter-spacing:.01em;overflow:visible;text-overflow:clip;white-space:nowrap;padding:0 4px}
#app{padding-bottom:104px}
#toast{bottom:96px}
.nav-sheet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}
.nav-sheet-grid button{min-height:48px;border-radius:12px;border:1px solid #3c587c;background:#1b2c47;font-weight:800;font-size:14px;color:var(--ink)}
.nav-sheet-grid button.on{background:var(--amber);border-color:transparent;color:#142b3c}

/* ---- phone pass 2: the decision above the fold (Phase 5) ----
   Measured at 320x568: the sticky topbar was ~101 px and the scene hero 220 px, so the
   first real action on Today sat at y=659 — 91 px under the fold. The hero is now a
   header band instead of a billboard, the topbar is one tight row, and the primary
   action on each screen comes before the flavour text. */
.topbar{padding:8px 12px}
.brand{font-size:13px;margin-bottom:5px}
.stat{padding:5px 9px;font-size:11px}
.scene-hero{height:120px;margin:-10px -10px 10px}
.scene-copy{left:12px;right:12px;bottom:9px}
.scene-copy .eyebrow{margin:0 0 2px;font-size:10px}
.scene-copy h1{font-size:20px;margin:0;letter-spacing:-.02em}
.scene-copy p:not(.eyebrow){display:none}
.screen{padding:12px}
@media(min-width:700px){
  .topbar{padding:12px 14px}
  .brand{font-size:16px;margin-bottom:9px}
  .stat{padding:7px 10px;font-size:12px}
  .screen{padding:18px}
  .scene-hero{height:170px;margin:-14px -14px 12px}
  .scene-copy h1{font-size:28px}
  .scene-copy p:not(.eyebrow){display:block;font-size:13px}
}

/* Collapsible desks: the long market/portfolio shelves live behind one tap so the
   screen opens on the summary and the next decision. Content stays in the DOM, so
   every action is still reachable and the contract tests still see it. */
.drawer{border:1px solid #2c405e;background:#0d1a2d;border-radius:18px;padding:2px 14px 10px;margin:12px 0}
.drawer>summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;cursor:pointer;list-style:none}
.drawer>summary::-webkit-details-marker{display:none}
.drawer>summary:after{content:"+";color:var(--amber);font-weight:900;font-size:18px}
.drawer[open]>summary:after{content:"-"}
.drawer>summary small{color:var(--muted);font-weight:600;font-size:11px}

/* GDD 3.4: the shelf - one row per supply line, stock, price, and an order button */
.supply-strip{display:grid;gap:8px;margin-top:10px;border-top:1px dashed #344b6d;padding-top:10px}
.supply-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;font-size:12px;color:var(--muted)}
.supply-row>span{border:1px solid #344b6d;background:#101d32;border-radius:999px;padding:5px 8px;min-width:0;overflow-wrap:anywhere}
.supply-row>span.chip-bad{border-color:#ffb9a988;color:#ffb9a9}
.supply-row>span.chip-warn{border-color:#edbc6588;color:#edbc65}
.supply-row>button{flex:0 0 auto;min-height:40px;font-size:12px;padding:0 12px}

/* Phase 6c.1 - income you own: a rate, a bar and a date, no prose required */
.income-card .income-total{display:flex;align-items:baseline;gap:8px;margin:0 0 8px}
.income-card .income-total b{font-size:26px;font-weight:900;color:var(--cream);letter-spacing:-.02em}
.income-card .income-total span{font-size:12px;color:var(--muted)}
.income-rows{display:grid;gap:7px}
.income-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto auto;align-items:center;gap:8px;font-size:12px;min-width:0}
.income-name{display:grid;min-width:0;overflow-wrap:anywhere;color:var(--cream);font-weight:700}
.income-name small{color:var(--muted);font-weight:400;font-size:10px;margin-top:1px}
.income-bar{display:block;height:8px;border-radius:999px;background:#ffffff14;overflow:hidden;min-width:24px}
.income-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f0a63b,#d96f24)}
.income-rate{color:var(--cream);white-space:nowrap}
.income-day{color:var(--muted);white-space:nowrap;font-size:11px}
.income-empty{border:1px dashed #344b6d;border-radius:12px;padding:12px;color:var(--muted);font-size:13px}
.income-foot{display:block;margin-top:8px;color:#8798ad;font-size:11px;line-height:1.35}
@media(max-width:360px){.income-row{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) auto}.income-day{grid-column:1/-1;font-size:10px}}

/* Phase 6c.2 - the four dials as bars, above the decisions that move them */
.meter-strip{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.meter{border:1px solid #27405f;background:#0d1a2d;border-radius:14px;padding:9px;min-width:0}
.meter-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8798ad;font-weight:800}
.meter-head b{color:var(--cream);font-size:14px;letter-spacing:-.01em;text-transform:none;white-space:nowrap}
.meter-track{height:7px;border-radius:999px;background:#ffffff12;margin:7px 0 4px;overflow:hidden}
.meter-track i{display:block;height:100%;border-radius:999px;background:#4f9d69;transition:width .25s ease}
.meter.warn .meter-track i{background:#edbc65}
.meter.bad .meter-track i{background:#e0705f}
.meter small{display:block;font-size:10px;line-height:1.25;color:#8798ad}
@media(max-width:360px){.meter-strip{grid-template-columns:1fr 1fr;gap:6px}.meter{padding:8px}}

/* Phase 7.1 - the payoff ribbon: what the last job paid and cost, where it happened */
.payoff-ribbon{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0;padding:10px 12px;border-radius:14px;border:1px solid #3c587c;background:#101d32;color:var(--muted);font-size:12px;animation:payoff-in .28s ease-out}
.payoff-ribbon b{color:#8fd9a8;font-size:16px}
.payoff-ribbon.bad b{color:#ff9c8c}
.payoff-ribbon.bad{border-color:#8c3f36}
.payoff-ribbon.good{border-color:#3f7a55}
.payoff-label{color:var(--cream);font-weight:800;min-width:0;overflow-wrap:anywhere}
.payoff-energy{color:#ffd08a}
.payoff-review{margin-left:auto;border:1px solid #ffffff22;border-radius:999px;padding:2px 8px;color:var(--cream)}
@keyframes payoff-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.payoff-ribbon{animation:none}}
/* Phase 7.2 - the refusal ribbon: red, named, and retired at the clock edge */
.failure-ribbon{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0;padding:10px 12px;border-radius:14px;border:1px solid #a8443a;background:#2a1517;color:#ffd9d2;font-size:12px;animation:payoff-in .28s ease-out}
.failure-ribbon .failure-mark{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#a8443a;color:#1b0e0e;font-weight:900;font-size:11px;flex:0 0 auto}
.failure-ribbon .failure-label{color:var(--cream);font-weight:800;overflow-wrap:anywhere}
.failure-ribbon .failure-reason{flex:1 1 100%;color:#ffb4a4;line-height:1.3}
.action-card.refused{border-color:#a8443a!important;box-shadow:0 0 0 1px #a8443a55,0 10px 28px #0005}
.refusal-line{margin:8px 0 2px;padding:8px 10px;border-radius:10px;border-left:3px solid #a8443a;background:#a8443a1a;color:#8c2f24;font-size:12px;line-height:1.3}
.action-card:nth-child(even) .refusal-line{color:#ffb4a4}
.refusal-line b{color:#c0392b}
.action-card:nth-child(even) .refusal-line b{color:#ff9c8c}
button.refuse-probe{background:#22303f;border-color:#a8443a66;color:#ffb4a4}
button.refuse-probe:active{background:#2a2028}
@media(prefers-reduced-motion:reduce){.failure-ribbon{animation:none}}
/* Phase 7.3 - the weekly close banner: gold, one morning only */
.week-banner{margin:0 0 10px;padding:12px 14px;border-radius:16px;border:1px solid #b58b2a;background:linear-gradient(135deg,#2d2410,#111d31);color:#f3e6c8;animation:payoff-in .28s ease-out}
.week-banner.down{border-color:#8c3f36;background:linear-gradient(135deg,#2a1619,#111d31);color:#f7ded6}
.week-head{display:flex;align-items:baseline;gap:10px;justify-content:space-between}
.week-head .eyebrow{letter-spacing:.12em;text-transform:uppercase;font-size:10px;color:#e2c684}
.week-banner.down .week-head .eyebrow{color:#ffb4a4}
.week-head b{font-family:Georgia,serif;font-size:26px;line-height:1;color:#ffd98a}
.week-banner.down .week-head b{color:#ff9c8c}
.week-rows{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 4px;font-size:12px;color:#d8cdb4}
.week-banner.down .week-rows{color:#e7c9c2}
.week-rows span{white-space:nowrap}
.week-rows b{color:var(--cream)}
.week-banner small{display:block;font-size:11px;line-height:1.3;color:#b9ad93}
.week-banner.down small{color:#c9a9a2}
@media(max-width:360px){.week-head b{font-size:22px}.week-rows{gap:4px 10px}}
@media(prefers-reduced-motion:reduce){.week-banner{animation:none}}
/* Phase 10.2 - resume strip: one line, above everything on Today */
.resume-strip{display:flex;align-items:center;gap:8px;margin:6px 0 8px;padding:8px 10px;border-radius:10px;border:1px solid #2b4152;background:#101a24;color:#c8d6d4;font-size:12px;line-height:1.3}
.resume-strip span:last-child{overflow-wrap:anywhere}
.resume-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#5fc7a4}
.resume-strip.down .resume-dot{background:#e0a34a}
.resume-strip.late{border-color:#8c3f36;background:#241417}
.resume-strip.late .resume-dot{background:#e0705d}
/* Phase 10.1 - first steps: one line collapsed, full list on demand */
.first-run{position:relative;margin:8px 0 10px;padding:0 44px 0 10px;border-radius:12px;border:1px solid #2f5f66;background:linear-gradient(135deg,#10232b,#0e1a26)}
.first-run details{padding:0}
.first-run summary{display:flex;align-items:center;gap:7px;list-style:none;padding:10px 0;min-height:44px;font-size:12px;cursor:pointer}
.first-run summary::-webkit-details-marker{display:none}
.first-run summary b{color:#a9f0e2;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.first-run-count{flex:0 0 auto;font-size:11px;color:#b9d8d2;font-variant-numeric:tabular-nums}
.first-run-open{flex:0 0 auto;margin-left:auto;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#7fa8a2}
.first-run-dismiss{position:absolute;top:6px;right:6px;width:32px;height:32px;min-height:32px;padding:0;border-radius:50%;background:transparent;border:1px solid #3d5a60;color:#cfe6e2;font-size:16px;line-height:1}
.first-run ol{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:5px}
.first-run li{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:#c7d4d2}
.first-run li b{display:block;font-size:12px;color:var(--cream);font-weight:700}
.first-run li small{display:block;font-size:11px;color:#9fb3b0;line-height:1.25}
.first-run-tick{flex:0 0 auto;width:16px;color:#5f7d7a;font-size:13px;line-height:1.2;text-align:center}
.first-run li.next .first-run-tick{color:#7fe0cd}
.first-run li.next b{color:#a9f0e2}
.first-run li.done{opacity:.72}
.first-run li.done .first-run-tick{color:#59c79f}
.first-run li.done b{text-decoration:line-through;text-decoration-color:#3f6b62}
/* Phase 9.1 - save durability notices: recovery (amber) and write failure (red) */
.save-issue{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin:8px 0;padding:10px 12px;border-radius:14px;border:1px solid #b58b2a;background:#241d0f;color:#f3e6c8;font-size:12px;line-height:1.35}
.save-issue b{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#ffd98a;flex:0 0 auto}
.save-issue span{flex:1 1 100%;color:#e6d9b8;overflow-wrap:anywhere}
.save-issue.quota,.save-issue.unreadable{border-color:#a8443a;background:#2a1517;color:#ffd9d2}
.save-issue.quota b,.save-issue.unreadable b{color:#ff9c8c}
.save-issue.quota span,.save-issue.unreadable span{color:#ffc4b8}
.save-issue-actions{display:flex;gap:8px;flex:1 1 100%;margin-top:4px}
.save-issue-actions button{font-size:12px;padding:8px 12px;min-height:40px}
.save-issue-actions .ghost{background:transparent;border:1px solid #7d5a52;color:#e7c9c2}

/* ---- Phase 11.1: touch targets ----
   Measured in the browser at 390x844: every real control was >=44 px except the
   info marker (28), the first-run dismiss (32), the carer/row and supply-row
   buttons (40), the stepper (32) and the warning chevron (28). The visual size is
   unchanged where a bigger box would reflow a heading: the hit box grows through
   padding and the layout is pulled back with a matching negative margin.
   Inline explain numbers (`.num`) are text, not controls: they get 24 px of
   vertical hit area, the WCAG 2.5.8 AA minimum, and are listed separately. */
.info-marker{width:44px;min-width:44px;height:44px;min-height:44px;padding:8px;margin:-8px 0 -8px 6px}
.care-row>button{min-height:44px}
.stepper{min-height:44px}
.supply-row>button{min-height:44px}
.save-issue-actions button{min-height:44px}
.first-run{padding-right:56px}
.first-run-dismiss{width:44px;height:44px;min-height:44px;top:0;right:0}
.warning-go{min-width:44px;min-height:44px;margin:-8px -8px -8px 0}
.num{display:inline-block;min-width:24px;text-align:center;padding:4px 2px;margin:-4px -2px}

/* ---- Phase 11.2: a visible focus ring on every control ----
   Before this the tree had no :focus-visible rule at all, so the ring was whatever
   the browser defaulted to (1 px auto, near-invisible on #0b1a2b panels). The ring
   is mint (#7fe0cd) against dark panels and near-black (#0b1a2b) against the amber
   primary buttons, where mint on amber would only reach ~1.5:1. Measured, not eyeballed. */
:focus-visible{outline:3px solid #7fe0cd;outline-offset:2px;border-radius:6px}
.primary-action:focus-visible,.primary:focus-visible,.tap-earn:focus-visible,
.bottom-nav button.on:focus-visible,.nav-sheet-grid button.on:focus-visible,
.next-step button:focus-visible{
  outline:3px solid #0b1a2b;outline-offset:2px;box-shadow:0 0 0 6px #7fe0cd;border-radius:12px;
}
.num:focus-visible{outline:2px solid #7fe0cd;outline-offset:1px;border-radius:4px}

/* ---- Phase 11.3: contrast ----
   Measured WCAG ratios for every text node against the background actually behind
   it. Three real offenders, all the same cause: a card alternates light (#fff4dd)
   and dark (#183446) and dark sub-panels inside a light card inherited the light
   card's dark ink. The teal button (#244a61) inherited #142b3c from light cards and
   sat at 1.55:1; the dark .drawer (65 of them) carried dark ink onto #0d1a2d at
   1.2-1.7:1; .parts spans were muted-on-cream at 1.61:1. Each control and dark
   sub-panel now declares its own ink instead of inheriting it. */
button,.run{color:#fff4dd}
.btn-cost{opacity:1;color:#dce9ec}
.parts span{color:#b3c7cb}
.action-card:not(:nth-child(even)) .parts span{color:#4a6170}
.drawer{color:#fff4dd}
.drawer .chips>span,.drawer small,.drawer p{color:#b3c7cb}
.drawer .chips>span b{color:inherit}
/* A light card can hold a dark drawer, and a dark drawer can hold the light listing
   cards of the property market - so the ink has to follow the chip, not the drawer. */
.action-card:not(:nth-child(even)) .drawer small,
.action-card:not(:nth-child(even)) .drawer .chips>span{color:#b3c7cb}
.action-card:not(:nth-child(even)) .drawer .chips>span b{color:inherit}

/* ---- Phase 12.1: the market as a list, not 66 open cards ----
   Measured at 390: the market drawer was 57,181 px with 66 full listing cards.
   One 56 px row per listing, and the card opens on top of the row. The row keeps
   the three numbers the choice turns on: cash to close, rent, condition. */
.listing-row{background:#142b3c;border:1px solid #ffffff22;border-radius:14px;overflow:hidden;min-width:0}
.listing-row>summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto 16px;gap:10px;align-items:center;min-height:56px;padding:8px 12px;cursor:pointer;color:#fff4dd}
.listing-row>summary::-webkit-details-marker{display:none}
.listing-row>summary:focus-visible{outline:3px solid #7fe0cd;outline-offset:-3px;border-radius:14px}
.lr-head{display:grid;min-width:0}
.lr-head b{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-head small{color:#b3c7cb;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-meta{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:152px}
.lr-meta span{font-size:11px;color:#b3c7cb;border:1px solid #ffffff22;border-radius:999px;padding:3px 7px;white-space:nowrap}
.lr-go{color:#edbc65;font-weight:900;font-size:16px;line-height:1;text-align:center;transition:transform .12s}
.listing-row[open] .lr-go{transform:rotate(45deg)}
.listing-row>.action-card{margin:0 10px 10px;border-radius:14px}
/* Phase 12.2: the market renders 12 rows, then this button. Same 56 px box as a
   row so the list reads as one column and the tap target clears 44 px. */
.market-more{width:100%;min-height:56px;border-radius:14px;border:1px dashed #4a6a90;background:#0f2237;color:#ffd08a;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;touch-action:manipulation}
.market-more small{color:#b3c7cb;font-weight:600;font-size:12px}
.market-more:focus-visible{outline:3px solid #7fe0cd;outline-offset:-3px}
.market-pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.market-pager .market-more{flex:1 1 140px;width:auto}
.market-range{flex:1 1 100%;text-align:center;color:#b3c7cb;font-size:12px}
@media(max-width:360px){.lr-meta{max-width:104px}.lr-meta span{font-size:10px;padding:2px 5px}}
/* Phase 15.3 - overdrawn: the one state above zero that must never be quiet */
.overdraft-strip{display:flex;align-items:center;gap:8px;margin:6px 0 8px;padding:8px 10px;border-radius:10px;border:1px solid #8c3f36;background:#2a1418;color:#f3d9d4;font-size:12px;font-weight:600;line-height:1.3}
.overdraft-strip .overdraft-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#e0705d;box-shadow:0 0 0 3px rgba(224,112,93,.18)}