/* ============================================================================ TrialCatcher Network — shell + components. Every value is a --net-* token (tokens.css). No hex, no px shadow, no duration literal in here on purpose. ============================================================================ */ @font-face { font-family: "Space Grotesk"; src: url("../fonts/SpaceGrotesk-Variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } html { overflow: hidden; } body { font-family: var(--net-font-body); font-size: var(--net-fs-body); line-height: var(--net-lh-body); color: var(--net-ink); background: var(--net-canvas); -webkit-font-smoothing: antialiased; /* ⭐⭐ THE PAGE IS PINNED BY overflow, NOT BY position:fixed — and the difference is the whole Chrome-for-iOS restored-tab bug (Marcos, iPhone 16, reported 2026-09-03, measured 2026-09-04). THE MEASUREMENT, because four rounds of guessing came from not having one. The 09-04 screenshot was read pixel by pixel against the known 40px tab bar, which fixes the scale exactly (735 image px = 402 CSS px, an iPhone 16): · web content area 684 CSS px tall — which is EXACTLY what ?vhdebug=1 reported · shell height rendered 684 CSS px — the height was never wrong, in any of the four rounds · shell TOP −112 CSS px — the app is painted 112px ABOVE the content area · Chrome's own top chrome 113 CSS px The offset IS Chrome's top toolbar, to the pixel. It is not the app header (56px), it is not header+footer (96px), and it is not a scroll offset. On a restored tab Chrome for iOS anchors the FIXED viewport to the top of the screen instead of the top of the web content area, while still reporting the correct height to every API the page can call. That is why no amount of measuring could see it — and it is why the previous fix, which pinned with position:fixed, handed the entire application to the one coordinate system Chrome was getting wrong. So the pin is done with overflow instead. `overflow: hidden` on is what actually stops iOS scrolling the document (it scrolls the documentElement, so body alone was never enough) — that half was correct and is kept. position:fixed on was belt-and-braces on top of it, and it is the half that has to go: an in-flow body is laid out in the DOCUMENT, whose origin is painted at the top of the content area on a restored tab like it is everywhere else. ⚠ The same reasoning is why every shell-anchored overlay below (drawers, scrim, dialogs, dev bar) is `position: absolute` against this body rather than `position: fixed`. Same box, same geometry, one coordinate system — do not "simplify" any of them back to fixed. ⛔ The page is not SUPPOSED to scroll — .net-col does. Any future rule that wants the window to scroll has to reckon with the shell being exactly viewport-height. */ position: relative; /* the containing block for every shell-anchored overlay */ overflow: hidden; /* the PAGE never scrolls — columns do */ } a { color: var(--net-primary); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; color: inherit; } img { max-width: 100%; display: block; } /* ⭐ :focus is the FALLBACK, :focus-visible is the refinement — in that order, on purpose. The sheet used to style :focus-visible only, so any engine that does not implement it (older Safari/WebKit builds, some embedded webviews) showed NO focus indicator at all: a keyboard user had no idea where they were on the page (WCAG 2.4.7). The :not(:focus-visible) line immediately below takes the ring back off for mouse clicks in every modern browser, so nothing changes visually there. ⚠️ The fallback is OUTLINE-ONLY on purpose. It used to also set box-shadow and border-radius, which meant every mouse click ran :focus (painting a ring, then having box-shadow:none strip the element's OWN design shadow) and re-rounded corners the component had deliberately squared. Outline paints over nothing and rounds nothing, so removing it restores the element exactly. The shadow ring and the radius belong to :focus-visible, where they only ever apply to real keyboard focus. */ :focus { outline: var(--net-focus-width) solid var(--net-focus); outline-offset: var(--net-focus-offset); } :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: var(--net-focus-width) solid var(--net-focus); outline-offset: var(--net-focus-offset); box-shadow: var(--net-focus-ring); border-radius: var(--net-radius-xs); } /* First tab stop on every page (MainLayout). Off-screen until focused, then pinned under the header. */ .skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--net-radius-sm); background: var(--net-primary); color: var(--net-on-primary); font-weight: var(--net-fw-semibold); text-decoration: none; transition: top .12s ease; } .skip-link:focus, .skip-link:focus-visible { top: 8px; text-decoration: none; } #main:focus { outline: none; box-shadow: none; } /* the skip target takes focus programmatically; don't ring the whole column */ h1, h2, h3, h4, p { margin: 0; } h1:focus, h1:focus-visible { outline: none; box-shadow: none; } h1 { font: var(--net-fw-bold) var(--net-fs-h1)/var(--net-lh-h1) var(--net-font-display); letter-spacing: var(--net-ls-h1); } h2 { font: var(--net-fw-semibold) var(--net-fs-h2)/var(--net-lh-h2) var(--net-font-display); letter-spacing: var(--net-ls-h2); } h3 { font: var(--net-fw-semibold) var(--net-fs-h3)/var(--net-lh-h3) var(--net-font-body); } .display { font: var(--net-fw-bold) var(--net-fs-display)/var(--net-lh-display) var(--net-font-display); letter-spacing: var(--net-ls-display); } .eyebrow { font: var(--net-fw-semibold) var(--net-fs-eyebrow)/var(--net-lh-eyebrow) var(--net-font-display); letter-spacing: var(--net-ls-eyebrow); text-transform: uppercase; color: var(--net-ink-3); } .small { font-size: var(--net-fs-small); line-height: var(--net-lh-small); } .muted { color: var(--net-ink-2); } .meta { color: var(--net-ink-3); font-size: var(--net-fs-small); } .num { font-family: var(--net-font-display); font-variant-numeric: tabular-nums; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .clamp-5 { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* ─── SHELL ───────────────────────────────────────────────────────────────── */ .net-shell { display: grid; grid-template-rows: var(--net-header-h) minmax(0, 1fr) var(--net-footer-h); grid-template-columns: var(--net-menu-w) minmax(0, 1fr); grid-template-areas: "header header" "menu cols" "footer footer"; /* Three deep, and the order is the whole point: 100vh for anything ancient, 100dvh for the modern default, then the MEASURED visualViewport height (network.js) which is the only value iOS Safari reports correctly while its toolbars are settling. Without the last one the app renders short and leaves a dead band of page background under the tab bar. */ height: 100vh; height: 100dvh; height: var(--app-vh, 100dvh); transition: grid-template-columns var(--net-dur-slow) var(--net-ease); } .net-shell.menu-collapsed { --net-menu-w: var(--net-menu-w-collapsed); } /* BARE SHELL (BareLayout) — header · body · footer, no menu and no columns. Used by /change-password, which must not offer a way out: see the note at the top of Components/Layout/BareLayout.razor. Same three rows as .net-shell so the header/footer heights and the .auth-body min-height calc that depends on them keep working unchanged. */ .net-bare { display: grid; grid-template-rows: var(--net-header-h) minmax(0, 1fr) var(--net-footer-h); height: 100vh; height: 100dvh; height: var(--app-vh, 100dvh); } /* .net-header/.net-footer are grid-area children of .net-shell; here they are plain rows. */ .net-bare > .net-header { grid-area: auto; display: flex; align-items: center; padding: 0 var(--net-space-4); } .net-bare > .net-footer { grid-area: auto; } .net-bare > .net-bare-work { min-height: 0; min-width: 0; overflow-y: auto; } .net-bare .net-brand { cursor: default; } /* not a link on purpose — nothing here navigates */ /* header */ .net-header { /* A GRID whose tracks mirror the shell (menu + context | work | chat) so .net-lead (brand + search) ends exactly at the context column's right border at every width / collapse state. Keep these track lists in lockstep with .net-shell / .net-cols. */ grid-area: header; display: grid; align-items: center; grid-template-columns: var(--net-menu-w) minmax(230px, 3fr) minmax(0, 8fr) minmax(260px, 3fr); padding: 0; background: var(--net-header-bg); color: var(--net-header-ink); border-bottom: 1px solid var(--net-header-line); z-index: 30; transition: grid-template-columns var(--net-dur-slow) var(--net-ease); } .net-shell.right-none .net-header { grid-template-columns: var(--net-menu-w) minmax(230px, 3fr) minmax(0, 11fr) 0; } .net-header .net-lead { grid-column: 1 / 3; display: flex; align-items: center; gap: var(--net-space-3); min-width: 0; padding-left: var(--net-space-3); } .net-header .net-actions { grid-column: 3 / 5; display: flex; align-items: center; justify-content: flex-end; gap: var(--net-space-3); min-width: 0; padding-right: var(--net-space-4); } .net-brand { display: flex; align-items: center; gap: var(--net-space-2); color: var(--net-header-ink-active); text-decoration: none; min-width: calc(var(--net-menu-w) - var(--net-space-3) * 2); transition: min-width var(--net-dur-slow) var(--net-ease); } /* − lead padding − lead gap, so .net-search starts exactly at the context column border */ .net-brand:hover { text-decoration: none; } .net-brand .logo-wide { height: 40px; width: auto; display: block; background: #fff; padding: 3px 8px; border-radius: var(--net-radius-sm); } .net-brand .logo-compact { height: 36px; width: 36px; flex: 0 0 36px; object-fit: contain; display: none; background: #fff; padding: 2px; border-radius: var(--net-radius-sm); } .menu-collapsed .net-brand .logo-wide { display: none; } .menu-collapsed .net-brand .logo-compact { display: block; } .net-brand .word { font: var(--net-fw-bold) 17px/1 var(--net-font-display); letter-spacing: -.01em; white-space: nowrap; } .net-brand .word b { color: var(--net-secondary); font-weight: inherit; } .menu-collapsed .net-brand .word { display: none; } .net-header .spacer { flex: 1; } .net-search { display: flex; align-items: center; gap: var(--net-space-2); background: var(--net-header-raise); border: 1px solid var(--net-header-line); border-radius: var(--net-radius-sm); padding: 0 var(--net-space-3); height: 36px; flex: 1; min-width: 0; color: var(--net-header-ink-muted); } /* fills .net-lead to the context border */ .net-search input { flex: 1; background: none; border: 0; color: var(--net-header-ink-active); outline: none; font-size: var(--net-fs-small); min-width: 0; } .net-search input::placeholder { color: var(--net-header-ink-muted); } /* Conversation search inside the Smoke Signals panel — same pill, card colours. .col-body is a flex COLUMN, so the header's `flex: 1` (basis 0) squashed it to 19px; it must be a fixed-height row there. Specificity (0,3,0) also beats the header breakpoints (34vw width at 1100, display:none under 860) which this one must ignore. */ .col-body > .net-search.chat-search { display: flex; flex: 0 0 auto; width: 100%; height: 36px; background: var(--net-card); border-color: var(--net-hairline-strong); color: var(--net-ink-3); } .col-body > .net-search.chat-search input { color: var(--net-ink); } .net-header .hbtn { height: 36px; min-width: 36px; padding: 0 var(--net-space-2); display: inline-flex; align-items: center; justify-content: center; gap: var(--net-space-2); background: transparent; border: 0; border-radius: var(--net-radius-sm); color: var(--net-header-ink); cursor: pointer; position: relative; } .net-header .hbtn:hover { background: var(--net-header-raise); color: var(--net-header-ink-active); } .net-header .hbtn .dot { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--net-radius-pill); background: var(--net-primary); color: var(--net-on-primary); font: var(--net-fw-bold) 10px/16px var(--net-font-display); text-align: center; } .net-user { display: inline-flex; align-items: center; gap: var(--net-space-2); padding: 4px 8px 4px 4px; border-radius: var(--net-radius-sm); background: var(--net-header-raise); border: 1px solid var(--net-header-line); color: var(--net-header-ink-active); cursor: pointer; } .net-user .name { font-size: var(--net-fs-small); font-weight: var(--net-fw-medium); white-space: nowrap; } .net-user .role { font-size: var(--net-fs-eyebrow); color: var(--net-header-ink-muted); letter-spacing: .04em; text-transform: uppercase; } .net-user-menu { position: absolute; right: var(--net-space-4); top: calc(var(--net-header-h) - 6px); width: 260px; background: var(--net-card); color: var(--net-ink); border: 1px solid var(--net-hairline); border-radius: var(--net-radius-lg); box-shadow: var(--net-elev-3); padding: var(--net-space-2); z-index: 40; } .net-user-menu .hd { padding: var(--net-space-2) var(--net-space-3); border-bottom: 1px solid var(--net-hairline); margin-bottom: var(--net-space-1); } .net-user-menu a, .net-user-menu button { display: flex; align-items: center; gap: var(--net-space-2); width: 100%; padding: 8px var(--net-space-3); border: 0; background: none; border-radius: var(--net-radius-sm); color: var(--net-ink); text-align: left; cursor: pointer; font-size: var(--net-fs-small); } .net-user-menu a:hover, .net-user-menu button:hover { background: var(--net-sunken); text-decoration: none; } .net-user-menu .sec { padding: 8px var(--net-space-3) 2px; } .hamb { display: none !important; } /* Click-outside closes the user menu (Marcos 2026-08-31). A transparent full-viewport catcher UNDER the menu (39 vs the menu's 40) — not a document listener and not @onfocusout, which would fire on the act-as in the app ══════════════ (Marcos 2026-09-09: "the drop downs look too much native and less theme inspired… apply that style to all dropdowns to be consistent… make sure it is mobile compatible on a phone browser.") ⛔ IT STAYS A NATIVE