/* Desktop pass — ≥1100px layouts: use the width, kill the dead gutters (owned by desktop-pass agent) */ /* ===================================================================== DESKTOP PASS (Jul 2 2026). Nick: "looks much better on mobile than desktop — lots of negative space on the sides of each view, just kind of boring." Loads LAST in (after styles/reskin-family/reskin-dash/pop/ mobile-audit) so equal-specificity selectors here win all ties. CSS ONLY. Everything is scoped ≥1100px ("wide"); the existing ≥900px rail + mid-step rules in styles.css are untouched, and NOTHING below 900px changes. No behavior changes: [hidden] panels stay hidden, no interactive reordering — grids live on static containers only (index.html children verified static per selector; JS-generated content arrives INSIDE those containers). ===================================================================== */ @media (min-width:1100px){ :root{ --dw:1200px; } /* effective content max (rail excluded) */ /* HIDDEN GUARD — this pass puts display:grid on several id-selected panels (#bp-*, #hp-nick, #fin-snapshot-panel). An id rule out-ranks styles.css's .hp-panel[hidden]{display:none}, which would leave app.js-hidden panels visible — so re-assert [hidden] at id specificity FIRST. Hidden must always stay hidden. */ #bp-overview[hidden],#bp-finance[hidden],#bp-clients[hidden],#bp-sidekicks[hidden], #hp-nick[hidden],#fin-snapshot-panel[hidden]{display:none;} /* ------------------------------------------------------------------- 1 · CANVAS — the app frame dissolves into a full-bleed cream canvas. styles.css ≥900 paints body cream-2 with a 1180px cream .app island (= the giant dead gutters Nick flagged). At wide, the whole canvas is cream and the content column centers itself in it. ------------------------------------------------------------------- */ body{background:var(--cream);} .app{max-width:none;background:transparent;} /* Ambient organic shapes in the gutters — very subtle, fixed, behind everything (z-index:-1 child of body paints above the body/canvas background but below all content), pointer-events off, inset:0 so they can never create scrollbars. body::before/::after verified unused by every earlier stylesheet (grepped Jul 2 2026). */ body::before,body::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; } body::before{ /* left gutter: lilac high, sage low */ background: radial-gradient(circle 480px at -120px 16%, rgba(233,221,241,0.5), transparent 62%), radial-gradient(circle 380px at 6% 102%, rgba(226,232,210,0.45), transparent 65%); } body::after{ /* right gutter: gold high, lilac low */ background: radial-gradient(circle 560px at calc(100% + 150px) 8%, rgba(217,154,58,0.10), transparent 62%), radial-gradient(circle 340px at 98% 74%, rgba(233,221,241,0.38), transparent 65%); } /* ------------------------------------------------------------------- 2 · CONTENT WIDTH — raise the column to ~1200px and center it in the canvas (the .app no longer centers content since it's now full-bleed; padding-left:104px = the ink rail, inherited from styles.css ≥900). Per-view id selectors repeat the generic rule to out-rank reskin-family's 760px caps + pop.css's pp-mount caps. ------------------------------------------------------------------- */ .page,.topbar,.hero{ max-width:var(--dw);margin-left:auto;margin-right:auto; } .view[data-view="health"] .page, .view[data-view="business"] .page, #view-todo .page,#view-calendar .page,#view-shopping .page,#view-finances .page, #view-todo .topbar,#view-calendar .topbar,#view-shopping .topbar,#view-finances .topbar{ max-width:var(--dw);margin-left:auto;margin-right:auto; } .segmented, #view-todo .segmented,#view-shopping .segmented,#view-finances .segmented{ max-width:var(--dw);margin-left:auto;margin-right:auto;padding:0 36px; } .hp-switcher{max-width:var(--dw);margin-left:auto;margin-right:auto;padding:0 36px;} .pp-mount, #view-todo .pp-mount,#view-shopping .pp-mount,#view-finances .pp-mount{ max-width:var(--dw);margin-left:auto;margin-right:auto;padding:0 36px; } /* Calendar's mounts live INSIDE main.page (already padded + capped) */ #view-calendar .pp-mount{max-width:none;padding:0;margin-left:0;margin-right:0;} /* ------------------------------------------------------------------- 3 · TYPE SCALE — the wider canvas must not make elements feel small. ------------------------------------------------------------------- */ .topbar h1{font-size:34px;} .hm-greet1{font-size:28px;} .hm-greet2{font-size:34px;} #view-home .skippy-text.hm-affirm{font-size:14px;} .hm-stat-num{font-size:40px;} .pp-stat{font-size:64px;} .pp-hero{padding:24px 28px;} .pp-hero::before{width:210px;height:210px;top:-80px;right:-56px;} .pp-hero::after{width:116px;height:116px;top:34px;right:-40px;} .pp-cal-day{font-size:40px;} .pp-cal-num{font-size:44px;} .pp-up-title{font-size:24px;} /* ------------------------------------------------------------------- 4 · HOME (#view-home) — denser 3-col bento: UP NEXT spans 2, the H&S butter bar and the plum Skippy tile share the last row. (Same static .hm-grid areas styles.css already re-maps at ≥900.) ------------------------------------------------------------------- */ .hm-grid{ gap:14px; grid-template-columns:repeat(3,1fr); grid-template-areas: "upnext upnext todo" "today shop fin" "biz biz kids"; } .hm-upnext{padding:20px 22px;} .hm-biz{padding:18px 22px;} .hm-biz-num{font-size:30px;} /* ------------------------------------------------------------------- 5 · TO-DO (#view-todo) — hero already spans the full column; the segmented control shows ONE .todo-panel at a time (app.js toggles [hidden]), so the zero-behavior-change move is a 2-col grid of the visible panel's task cards. .td-list is the stable app.js-rendered container; children arrive at runtime and auto-place. ------------------------------------------------------------------- */ #view-todo .td-list{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px;align-items:stretch; } #view-todo .td-list > *{min-width:0;} #view-todo .td-list .hc-empty{grid-column:1 / -1;} /* ------------------------------------------------------------------- 6 · CALENDAR (#view-calendar) — editorial 2-col: date hero + week strip + UP NEXT banner + Today timeline stack left (~58%); the Upcoming agenda card sits right (~42%), sticky. The .page has exactly 5 static children (verified index.html:1456-1480); the agenda card is identified by its frozen #agenda-list hook. ------------------------------------------------------------------- */ #view-calendar .page{ display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); column-gap:22px;row-gap:0;align-items:start; } #view-calendar .page > *{grid-column:1;min-width:0;} #view-calendar .page > .card:has(#agenda-list){ /* span 30 (not 4): a spanning item's extra height distributes EQUALLY across all spanned auto rows — over 4 rows that inflates visible gaps between the left column's cards; over 30 rows (26 of them empty, 0-height) the share per real row is negligible. */ grid-column:2;grid-row:1 / span 30; position:sticky;top:20px; max-height:calc(100vh - 40px);overflow-y:auto; } /* ------------------------------------------------------------------- 7 · SHOPPING (#view-shopping) — hero + add-bar full width; each store panel's item list flows 2-col. The single-column hairline dividers (reskin-family: .td-prio + .td-prio) would strike through the first visual row in a 2-col grid, so rows 2+ get them instead. ------------------------------------------------------------------- */ #view-shopping .shop-list{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:10px;row-gap:0;align-items:stretch; } #view-shopping .shop-list > *{min-width:0;} #view-shopping .td-prio + .td-prio{border-top:none;} #view-shopping .shop-list .td-prio:nth-child(n+3){ border-top:1px solid rgba(110,48,24,0.15); } #view-shopping .shop-list .hc-empty{grid-column:1 / -1;} /* ------------------------------------------------------------------- 8 · FINANCES (#view-finances) — snapshot goes 2-col: decisions + insights + averages left (~58%); the long "By category" card right (~42%). Children are JS-generated in a variable set (era card and insights may be absent), so nth-child is unsafe — the category card is the only one containing .fin-group-h group headers (:has()). Row-gap stays 0; the cards' own margin-top provides rhythm, and the right card's 40-row span parks its overflow in empty 0-height rows. ------------------------------------------------------------------- */ #fin-snapshot-panel{ display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); column-gap:22px;row-gap:0;align-items:start; } #fin-snapshot-panel > *{grid-column:1;min-width:0;} #fin-snapshot-panel > .card:has(.fin-group-h){grid-column:2;grid-row:1 / span 40;} /* placeholder / not-wired state = a single card → let it span */ #fin-snapshot-panel > .card:only-child{grid-column:1 / -1;} /* Target Planner is a label+input ledger — cap it at a readable width */ #fin-plan-root{max-width:820px;margin-left:auto;margin-right:auto;} /* ------------------------------------------------------------------- 9 · HEALTH (#view-health, Nick panel) — reps hero + protocol + experiments left (~55%); priorities right (~45%); everything from Insights down stays full-width (marker grids already go 4-up at ≥900 / 5-up at ≥1200 via styles.css). #hp-nick's direct children are STATIC markup (app.js writes inside them), verified Jul 2 2026: 1 .hc-hero · 2 title · 3 details(protocol) · 4 title · 5 .card(priorities) · 6 title · 7 .card(experiments) · 8 p.note · 9+ full-width flow. ------------------------------------------------------------------- */ #hp-nick{ display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); column-gap:24px;row-gap:0;align-items:start; } #hp-nick > *{grid-column:1 / -1;min-width:0;} #hp-nick > :nth-child(1){grid-column:1;grid-row:1;} /* reps hero */ #hp-nick > :nth-child(2){grid-column:1;grid-row:2;} /* protocol title */ #hp-nick > :nth-child(3){grid-column:1;grid-row:3;} /* protocol details */ #hp-nick > :nth-child(6){grid-column:1;grid-row:4;} /* experiments title */ #hp-nick > :nth-child(7){grid-column:1;grid-row:5;} /* experiments card */ #hp-nick > :nth-child(8){grid-column:1;grid-row:6;} /* experiments note */ /* Priorities title + card share row 1 with the reps hero so the right column starts level with it (title stacks above the card via a margin offset — two items may share a grid area). Card spans 41 rows: a spanning item's extra height distributes equally across ALL spanned auto rows, so a short span would inflate visible gaps between the left column's titles and cards (seen in the first screenshot pass); rows 7-41 are empty 0-height absorbers and the full-width flow (child 9+) auto-places after them. */ #hp-nick > :nth-child(4){grid-column:2;grid-row:1;align-self:start;} /* priorities title */ #hp-nick > :nth-child(5){grid-column:2;grid-row:1 / span 41;margin-top:56px;} /* priorities card */ /* Oura gauges + derived cards use the width instead of 2-up */ #view-health .dc-gauges{grid-template-columns:repeat(4,1fr);} #view-health .dc-dgrid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));} #view-health .cyc-protogrid{grid-template-columns:repeat(4,1fr);} /* ------------------------------------------------------------------- 10 · BUSINESS (#view-business) — widen + let the density breathe. Finance-tab KPI row goes 6-up (6 static tiles = one clean row); chart cards pair 2-up. Static children per panel verified Jul 2: #bp-finance: 1 note · 2 flags · 3 kpis · 4t/5 waterfall · 6t/7 revChart · 8t/9 loanChart · 10t/11 ratios · 12+ full. #bp-overview: 1 kpis · 2t/3 flags · 4t/5 watch · 6t/7 week · 8t/9 tasks · 10 note. #bp-clients: 1t/2 statusChart · 3t/4 newClientChart · 5t/6 roster. #bp-sidekicks: 1 kpis · 2t/3 skChart · 4t/5 topClientChart · 6t/7 table. Paired cards stretch to equal height per row (default align). ------------------------------------------------------------------- */ #view-business #biz-fkpis{grid-template-columns:repeat(6,1fr);} /* Overview — judgment|watch, then work|on-deck */ #bp-overview{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px;row-gap:0; } #bp-overview > *{grid-column:1 / -1;min-width:0;} #bp-overview > :nth-child(2){grid-column:1;grid-row:2;} #bp-overview > :nth-child(3){grid-column:1;grid-row:3;} #bp-overview > :nth-child(4){grid-column:2;grid-row:2;} #bp-overview > :nth-child(5){grid-column:2;grid-row:3;} #bp-overview > :nth-child(6){grid-column:1;grid-row:4;} #bp-overview > :nth-child(7){grid-column:1;grid-row:5;} #bp-overview > :nth-child(8){grid-column:2;grid-row:4;} #bp-overview > :nth-child(9){grid-column:2;grid-row:5;} /* Finance — waterfall|ratios, revenue|loan */ #bp-finance{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px;row-gap:0; } #bp-finance > *{grid-column:1 / -1;min-width:0;} #bp-finance > :nth-child(4){grid-column:1;grid-row:4;} #bp-finance > :nth-child(5){grid-column:1;grid-row:5;} #bp-finance > :nth-child(10){grid-column:2;grid-row:4;} #bp-finance > :nth-child(11){grid-column:2;grid-row:5;} #bp-finance > :nth-child(6){grid-column:1;grid-row:6;} #bp-finance > :nth-child(7){grid-column:1;grid-row:7;} #bp-finance > :nth-child(8){grid-column:2;grid-row:6;} #bp-finance > :nth-child(9){grid-column:2;grid-row:7;} /* Clients — the two charts side by side, roster full width */ #bp-clients{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px;row-gap:0; } #bp-clients > *{grid-column:1 / -1;min-width:0;} #bp-clients > :nth-child(1){grid-column:1;grid-row:1;} #bp-clients > :nth-child(2){grid-column:1;grid-row:2;} #bp-clients > :nth-child(3){grid-column:2;grid-row:1;} #bp-clients > :nth-child(4){grid-column:2;grid-row:2;} /* Sidekicks — status chart | top-clients chart, workforce full width */ #bp-sidekicks{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px;row-gap:0; } #bp-sidekicks > *{grid-column:1 / -1;min-width:0;} #bp-sidekicks > :nth-child(2){grid-column:1;grid-row:2;} #bp-sidekicks > :nth-child(3){grid-column:1;grid-row:3;} #bp-sidekicks > :nth-child(4){grid-column:2;grid-row:2;} #bp-sidekicks > :nth-child(5){grid-column:2;grid-row:3;} }/* end ≥1100 */ /* ===================================================================== ≥1400 — one extra density step: the 12-tile Overview KPI wall goes 6-up (two clean rows instead of three). ===================================================================== */ @media (min-width:1400px){ #view-business #biz-ovkpis{grid-template-columns:repeat(6,1fr);} } /* ===================================================================== HOVER (desktop pointers only) — cards lift 2px with a slightly deeper shadow, chips darken. Scoped ≥1100 so nothing below 900 changes. ===================================================================== */ @media (min-width:1100px) and (hover:hover){ .card,.dc-m,.dc-gz,.biz-kpi, .hm-upnext,.hm-stat,.hm-biz,.hm-small,.hm-kids, #view-todo .td-prio,.pp-upnext,.sk-kidcard,.sk-hub-card{ transition:transform .15s ease, box-shadow .15s ease; } .card:hover,.dc-m:hover,.dc-gz:hover,.biz-kpi:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(36,27,38,0.10), var(--hairline); } .hm-upnext:hover,.hm-small-fin:hover,#view-todo .td-prio:hover, .sk-kidcard:hover,.sk-hub-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(36,27,38,0.10); } /* flat pastel/plum/clay tiles: lift with a softer shadow */ .hm-stat:hover,.hm-biz:hover,.hm-kids:hover,.hm-small-shop:hover,.pp-upnext:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(36,27,38,0.08); } /* chips darken */ .seg-btn:hover:not(.is-active),.hp-btn:hover:not(.is-active){ background:#e4d6bf;color:#6a5b46; } .oor-toggle:not(.on):hover{background:rgba(143,157,111,0.22);} } /* Respect reduced motion: keep the shadows, kill the movement. */ @media (min-width:1100px) and (prefers-reduced-motion:reduce){ .card:hover,.dc-m:hover,.dc-gz:hover,.biz-kpi:hover, .hm-upnext:hover,.hm-stat:hover,.hm-biz:hover,.hm-small:hover,.hm-kids:hover, #view-todo .td-prio:hover,.pp-upnext:hover,.sk-kidcard:hover,.sk-hub-card:hover{ transform:none; } }