/* The last CSS living outside Claude Design. Loaded from every page's . Same 719px breakpoint and same [style*=...] technique the pages use for their own inline-style overrides, so a re-export can't silently drop them. See FIXES-APPLIED.md. */ @media (max-width: 719px) { /* NOTE 2026-09-12: a previous version of this file clipped #stuck and #center here, on the belief that they contained no sticky descendants. That was wrong - both hold a `position:sticky;top:0;height:100dvh` stage, which is the corridor itself. Clipping a sticky element's parent turns it into a scroll container on iOS Safari and the stage stops pinning. Do not re-add. The stage already carries its own `overflow:hidden`, so the rings are clipped at the right level anyway. */ /* Ideas: the topic rails ("01 Boundaries", "02 Hard conversations"...) are sticky side columns on desktop. In one-column layout they stick over the article list with no background, printing on top of the titles. Full-height stages are excluded: the Home and About corridors are also `section[id] > div` with inline sticky, and un-sticking them breaks the scroll animation. */ section[id] > div[style*="sticky"]:not([style*="100dvh"]):not([style*="100vh"]) { position: static !important; top: auto !important; } /* Resources: the "Start here" cards keep a 38% / 62% split on a phone, leaving the body text in a ~160px column and clipping the title in the colour panel. Stack them instead. */ article[style*="minmax(120px"] { grid-template-columns: 1fr !important; } article[style*="minmax(120px"] > div:first-child { min-height: 150px !important; } /* /profile: the source gives this page a fluid screen layout below 900px, but two things still refuse to shrink, so the letter sheet stayed 586px wide inside a 390px screen and the layout viewport expanded to fit it. Both are screen-only; @media print is untouched, so the PDF and the printed sheet are exactly as designed. 1. The running header is white-space:nowrap ("HUMAN CREATIVE COACHING · CORE SNAPSHOT · "), a 542px min-content line. Let it wrap. 2. The score rows are `150px 1fr 56px`, which leaves no room for the bar. Pair the capacity name with its number on one line and run the bar full width underneath. */ section.page header { white-space: normal !important; flex-wrap: wrap !important; gap: 2px 14px !important; } section.page [style*="grid-template-columns:150px"], section.page [style*="grid-template-columns: 150px"] { grid-template-columns: 1fr auto !important; gap: 10px 14px !important; align-items: baseline !important; } section.page [style*="grid-template-columns:150px"] > *:nth-child(2), section.page [style*="grid-template-columns: 150px"] > *:nth-child(2) { grid-column: 1 / -1 !important; grid-row: 2 !important; } section.page [style*="grid-template-columns:150px"] > *:nth-child(3), section.page [style*="grid-template-columns: 150px"] > *:nth-child(3) { grid-column: 2 !important; grid-row: 1 !important; } /* ---------------------------------------------------------------- horizontal strips Sections that scroll sideways on a phone ("Start with yourself" and its siblings) gave no sign that anything sat off the right edge, so nobody swiped. The source sets each card to 84% of the width, which leaves a peek too thin to read as a peek. Narrowing it so the next card is clearly cut by the edge is the signal people actually respond to: a partial card is obviously a partial card. A tinted rail is drawn underneath as well, for the browsers that honour scrollbar styling (iOS uses overlay scrollbars and ignores it, which is why the peek has to carry the message). No mask or fade here: a fade over the right edge hides the very sliver that does the work. */ [data-strip] > * { flex: 0 0 78% !important; } [data-strip] { padding-bottom: 10px !important; scrollbar-width: thin; scrollbar-color: rgba(26,25,25,.3) rgba(26,25,25,.08); } [data-strip]::-webkit-scrollbar { display: block !important; height: 3px; } [data-strip]::-webkit-scrollbar-thumb { background: rgba(26,25,25,.3); border-radius: 3px; } [data-strip]::-webkit-scrollbar-track { background: rgba(26,25,25,.08); border-radius: 3px; } [data-dark] [data-strip] { scrollbar-color: rgba(248,244,235,.36) rgba(248,244,235,.12); } [data-dark] [data-strip]::-webkit-scrollbar-thumb { background: rgba(248,244,235,.36); } [data-dark] [data-strip]::-webkit-scrollbar-track { background: rgba(248,244,235,.12); } /* ---------------------------------------------------------------- CORE position tabs Naming / Building / Widening / Spending is a flex row with row-gap 0, so on a phone it wraps to three plus an orphan and the active underline detaches from the row it belongs to. A 2x2 grid keeps each tab with its own underline and gives the pairs equal weight. */ [role="tablist"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; column-gap: 18px !important; } [role="tablist"] > [role="tab"] { padding: 10px 0 10px !important; text-align: left; } /* ---------------------------------------------------------------- cards that hug the right edge The Ideas featured card is a two-column grid on desktop with the photo set `justify-self: end`. At one column that leaves the picture pinned right with a dead band of card colour beside it, which is what reads as "spaced out weirdly". Nothing should hug an edge at one column. */ [style*="justify-self: end"], [style*="justify-self:end"] { justify-self: stretch !important; width: 100% !important; } }