/* Planner fit, AL 13/09/2026, extended 16/09/2026. The planner pages of /backdata/content-system show grids only: the explanatory text sits in the closed "For Claude" block at the bottom of each page (moved there, never deleted). No horizontal scroll anywhere, inside the grids included: the seven day columns shrink (minmax(0,1fr)) and labels wrap. Opt-in: (the ten one-screen pages, companion JS lowers the zoom when the screen is short) or (Shorts: five grids, same layout, no one-screen zoom). Under 900px the grid stacks: band label on its own line, cells two per line, each cell prefixed with its day (data-day, written by planner-fit.js). Body zoom 1.25 of intranet.css is kept. */ @media (min-width: 900px) { body:is([data-planner-fit],[data-planner-grid]) { position: relative; } body:is([data-planner-fit],[data-planner-grid]) .page-stamp-bar { position: absolute; top: 9px; right: calc(3% + 104px); padding: 0; z-index: 31; } body:is([data-planner-fit],[data-planner-grid]) .wrap { max-width: none; padding: 0 3% 6px; position: relative; } body:is([data-planner-fit],[data-planner-grid]) .themebar { position: absolute; top: 4px; right: 3%; padding: 0; margin: 0; border: 0; background: none; z-index: 30; } body:is([data-planner-fit],[data-planner-grid]) .themebar button { padding: 3px 9px; font-size: 10.5px; } body:is([data-planner-fit],[data-planner-grid]) .crumb { margin: 0 0 2px; padding-top: 8px; font-size: 10.5px; } body:is([data-planner-fit],[data-planner-grid]) .wrap h1 { font-size: 20px; line-height: 1.15; margin: 0 0 4px; gap: 9px; } body:is([data-planner-fit],[data-planner-grid]) .plogo { width: 20px; height: 20px; } body:is([data-planner-fit],[data-planner-grid]) .wrap > details.fold { margin: 3px 0; } body:is([data-planner-fit],[data-planner-grid]) details.fold > summary { padding: 4px 12px; font-size: 12px; } body:is([data-planner-fit],[data-planner-grid]) .stampline { margin: 4px 0 6px; gap: 5px; } body:is([data-planner-fit],[data-planner-grid]) .stamp { padding: 1px 6px; font-size: 9.5px; } body:is([data-planner-fit],[data-planner-grid]) .wrap > h2 { font-size: 14px; margin: 6px 0 4px; } body:is([data-planner-fit],[data-planner-grid]) .wrap > h2.tier { font-size: 13px; margin: 6px 0 4px; gap: 8px; } body:is([data-planner-fit],[data-planner-grid]) .wrap > .scroller { overflow: visible; } body:is([data-planner-fit],[data-planner-grid]) .wrap > .scroller .cal { min-width: 0; grid-template-columns: 104px repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; } body:is([data-planner-fit],[data-planner-grid]) .dayhd { padding: 4px 8px; } body:is([data-planner-fit],[data-planner-grid]) .dayhd b { display: inline; font-size: 12.5px; margin-right: 6px; } body:is([data-planner-fit],[data-planner-grid]) .dayhd i { font-size: 10px; } body:is([data-planner-fit],[data-planner-grid]) .tcell { padding-right: 8px; } body:is([data-planner-fit],[data-planner-grid]) .tcell span { font-size: 11px; line-height: 1.2; } body:is([data-planner-fit],[data-planner-grid]) .tcell em { font-size: 9.5px; } body:is([data-planner-fit],[data-planner-grid]) .cell { min-height: 30px; padding: 4px 7px; gap: 2px; } body:is([data-planner-fit],[data-planner-grid]) .cell .f { font-size: 11.5px; line-height: 1.22; } body:is([data-planner-fit],[data-planner-grid]) .cell .tag { font-size: 8.5px; letter-spacing: .7px; } body:is([data-planner-fit],[data-planner-grid]) .wrap > .legend { margin-top: 6px; gap: 12px; font-size: 11px; } body:is([data-planner-fit],[data-planner-grid]) .wrap > .legend i { width: 16px; height: 10px; } body:is([data-planner-fit],[data-planner-grid]) details.pf-notes { margin: 6px 0 0; } } /* Body zoom 1.25 turns a 100vh minimum height into 125 % of the screen: 25 % of forced scroll on every page (measured 13/09/2026). */ @media (min-width: 900px) { html:has(body:is([data-planner-fit],[data-planner-grid])), body:is([data-planner-fit],[data-planner-grid]) { min-height: 0 !important; height: auto !important; } } @media (min-width: 900px) { body:is([data-planner-fit],[data-planner-grid]) { padding-top: 0 !important; padding-bottom: 0 !important; } } /* Long labels wrap inside their column, never push it wider (AL 16/09/2026). */ body:is([data-planner-fit],[data-planner-grid]) .cal > * { min-width: 0; } body:is([data-planner-fit],[data-planner-grid]) .cal .f, body:is([data-planner-fit],[data-planner-grid]) .cal .tcell span, body:is([data-planner-fit],[data-planner-grid]) .dayhd { overflow-wrap: break-word; } /* Mobile: no inner horizontal scroller, the grid stacks (AL 16/09/2026). */ @media (max-width: 899.98px) { body:is([data-planner-fit],[data-planner-grid]) .wrap > .scroller { overflow: visible; } body:is([data-planner-fit],[data-planner-grid]) .wrap > .scroller .cal { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-bottom: 5px; } body:is([data-planner-fit],[data-planner-grid]) .wrap > .scroller .cal > .tcell { grid-column: 1 / -1; justify-content: flex-start; padding: 8px 0 0; } body:is([data-planner-fit],[data-planner-grid]) .wrap > .scroller .cal > .tcell span { text-align: left; } body:is([data-planner-fit],[data-planner-grid]) .wrap > .scroller .cal > .tcell.hd { display: none; } body:is([data-planner-fit],[data-planner-grid]) .wrap > .scroller .cal:has(> .tcell.hd):not(:has(.dayhd i)) { display: none; } body:is([data-planner-fit],[data-planner-grid]) .wrap > .scroller .dayhd { padding: 5px 8px; } body:is([data-planner-fit],[data-planner-grid]) .wrap > .scroller .dayhd b { display: inline; margin-right: 6px; } body:is([data-planner-fit],[data-planner-grid]) .wrap > .scroller .cell { min-height: 0; padding: 6px 8px; gap: 2px; } body:is([data-planner-fit],[data-planner-grid]) .wrap > .scroller .cell[data-day]::before { content: attr(data-day); font-size: 9.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--mut, var(--text-muted)); } body:is([data-planner-fit],[data-planner-grid]) .wrap > .scroller .cell.empty[data-day]::before { opacity: .6; } } /* Render size, AL 16/09/2026: the one-screen planners render at the size AL sees with the browser at 135 %, by default. Base body zoom 1.35 instead of 1.25 (Shorts, data-planner-grid, keeps 1.25); planner-fit.js still steps it down when a short screen would scroll. Desktop only. */ @media (min-width: 900px) { body[data-planner-fit] { zoom: 1.35; } } /* This week in Notion, AL 17/09/2026: compact grid written by /assets/planner-week.js under a planner grid. Chips = real planner rows (code and time), colour = tracker status. */ body:is([data-planner-fit],[data-planner-grid]) .scroller.wk .cell.wk-cell { min-height: 0; padding: 3px 4px; gap: 2px; display: flex; flex-wrap: wrap; align-content: flex-start; } body:is([data-planner-fit],[data-planner-grid]) .scroller.wk .tcell span { font-size: 10px; } body:is([data-planner-fit],[data-planner-grid]) .scroller.wk .tcell em, body:is([data-planner-fit],[data-planner-grid]) .scroller.wk .tcell i { display: none; } body:is([data-planner-fit],[data-planner-grid]) .scroller.wk .dayhd.wk-today { outline: 1px solid var(--gold, #b8955a); } .wk-chip { display: inline-block; max-width: 100%; padding: 0 4px; border-radius: 3px; font-size: 10px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid currentColor; cursor: default; } .wk-chip.planned { color: var(--c-amber, #a8802f); } .wk-chip.scheduled { color: var(--c-blue, #4a74b0); } .wk-chip.posted { color: var(--c-green, #3c8a6a); } .wk-chip.backup { color: var(--n-grey-3, #999); text-decoration: line-through; border-style: dashed; } h2.tier.wk-title .stamp { font-weight: 400; } @media (min-width: 900px) { body:is([data-planner-fit],[data-planner-grid]) .wrap > h2.tier.wk-title { margin-top: 10px; } } @media (max-width: 899.98px) { body:is([data-planner-fit],[data-planner-grid]) .wrap > .scroller.wk .cal:first-child { display: none; } body:is([data-planner-fit],[data-planner-grid]) .wrap > .scroller.wk .cell.wk-cell.empty { display: none; } } /* Week arrows, AL 18/09/2026: in the week table title, previous week, This week (reset), next week. In the title line, so the page height does not move; every week table of the page moves together. */ h2.tier.wk-title { flex-wrap: wrap; min-width: 0; } h2.tier.wk-title .wk-nav { display: inline-flex; gap: 3px; margin-left: auto; } h2.tier.wk-title .wk-nav button { font: inherit; font-size: 10px; line-height: 1.4; padding: 1px 7px; border: 1px solid var(--bd, var(--border, #ccc)); border-radius: 3px; background: none; color: inherit; cursor: pointer; letter-spacing: .3px; } h2.tier.wk-title .wk-nav button:hover { border-color: var(--gold, #b8955a); color: var(--gold, #b8955a); } /* For Claude block, AL rule 3 (no horizontal scroll, ever, 25/09/2026): long ids, paths and the reference tables wrap inside the block once it is opened, on a phone too. Measured before: newsletter 61 px of page scroll at 390 px (a Notion page id), Pinterest reference tables scrolling inside their box (min-width 640 px). */ body:is([data-planner-fit],[data-planner-grid]) details.for-claude { overflow-wrap: anywhere; } body:is([data-planner-fit],[data-planner-grid]) details.for-claude table { min-width: 0; } @media (max-width: 899.98px) { body:is([data-planner-fit],[data-planner-grid]) details.for-claude td.num { white-space: normal; } body:is([data-planner-fit],[data-planner-grid]) details.for-claude th, body:is([data-planner-fit],[data-planner-grid]) details.for-claude td { padding: 6px 5px; } body:is([data-planner-fit],[data-planner-grid]) details.for-claude .dbody { padding: 8px 4px 10px; } body:is([data-planner-fit],[data-planner-grid]) details.for-claude .card { padding: 10px 8px; } }