/* theracalc-nav.css | TheraCALC shared top ribbon + Menu dropdown | v1.7 · 2026-08-12 v1.7: tightened only the narrow-screen Menu button's horizontal padding and icon gap, preserving its visible label while giving the longest shared page title a cross-platform safety margin. v1.6: enlarged and strengthened page titles; tightened only the surrounding mobile spacing so the complete title remains visible rather than merely avoiding overlap. v1.5: REVERTED the v1.4 @view-transition rule (BL-025). On iOS/WKWebView it made the flicker WORSE — a near DOUBLE flash: the cross-fade ADDED an event instead of removing the blank window. And on the already-smooth web (the browser holds the outgoing paint implicitly) it added an unwanted cross-fade where there was an instant swap — NET-NEGATIVE on BOTH surfaces, the clearest case for reverting not tuning. The blank-navigation flicker is left UNFIXED and PARKED; do NOT re-try view transitions here without a fresh device result. (BL-025 records the full bisect: not the webview bg colour, not fetch overhead, not view transitions; untested = deferring the 25KB synchronous theme.js.) v1.4 (SUPERSEDED by the v1.5 revert): added `@view-transition { navigation: auto }` — cross-document view transitions; intended to hold the outgoing frame + cross-fade so there'd be no blank window. v1.3: added .tc-menu-item.tc-soon + .tc-soon-tag (coming-soon menu items — non-clickable, dimmed, "soon" pill; matches the homepage .tile.soon). Used to gate the AG + opioid menu links across the 14 tc-menu-item pages. Drop into of any page, then use the standard .appbar markup (see template snippet). Themeable: .appbar background/border are overridden by theracalc-theme.js via --appbar-bg / --appbar-border. Keeps #tc-theme-btn and #tc-feedback-btn IDs. ------------------------------------------------------------------ */ /* ── APP BAR (shared ribbon) ── */ .appbar{ background:var(--navy,#1a3358); display:flex; align-items:center; gap:10px; padding:calc(env(safe-area-inset-top) + 8px) 12px 8px; min-height:52px; border-bottom:3px solid var(--gold,#D4A017); position:sticky; top:0; z-index:1000; } /* brand block: cross logo + EKG capsule + THERACALC */ .tc-brand{ display:flex; align-items:center; gap:0; text-decoration:none; flex-shrink:0; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); border-radius:10px; padding:3px 10px 3px 6px; } .tc-brand .tc-cross{flex-shrink:0; display:block; margin-right:8px} .tc-brand .tc-divider{width:1px; height:28px; background:rgba(255,255,255,.2); margin-right:8px; flex-shrink:0} .tc-brand .tc-mark{display:inline-flex; flex-direction:column; align-items:center; gap:2px} .tc-brand .tc-capsule{ height:24px; width:70px; border:2.5px solid var(--gold,#D4A017); border-radius:12px; position:relative; overflow:hidden; flex-shrink:0; } .tc-brand .tc-capsule .tc-cap-fill{position:absolute; left:0; top:0; width:50%; height:100%; background:var(--gold,#D4A017); opacity:.22} .tc-brand .tc-capsule .tc-cap-div{position:absolute; left:50%; top:0; width:1.5px; height:100%; background:var(--gold,#D4A017); opacity:.6} .tc-brand .tc-capsule svg{position:absolute; top:0; left:0} .tc-brand .tc-word{ display:flex; align-items:center; justify-content:center; font-family:'Nunito',Arial,sans-serif; font-size:.74rem; font-weight:900; letter-spacing:1px; color:#fff; white-space:nowrap; line-height:1; } .tc-brand .tc-word span{color:var(--gold,#D4A017)} /* optional page badge (e.g. RENAL DOSING) — single line */ .tc-pagebadge{ display:flex; align-items:center; padding-left:9px; margin-left:2px; flex-shrink:1; min-width:0; border-left:1px solid rgba(255,255,255,.28); } .tc-pagebadge span{ font-size:11px; font-weight:900; color:rgba(255,255,255,.94); letter-spacing:1.1px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media(max-width:520px){ .appbar{gap:6px;padding-left:6px;padding-right:6px} .tc-brand{padding-right:6px} .tc-pagebadge{padding-left:6px;margin-left:0} .tc-pagebadge span{font-size:10px;letter-spacing:.75px} .tc-menu-wrap .tc-menu-btn{gap:3px;padding-left:4px;padding-right:4px} } /* ── MENU dropdown ── */ .tc-menu-wrap{margin-left:auto; position:relative; flex-shrink:0} .tc-menu-btn{ display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); border-radius:9px; padding:9px 13px; color:#fff; font-family:inherit; font-weight:900; font-size:.66rem; letter-spacing:.5px; text-transform:uppercase; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .16s, border-color .16s; } /* active look while the dropdown is open — ties button to panel */ .tc-menu-toggle:checked ~ .tc-menu-btn{ background:var(--gold,#D4A017); border-color:var(--gold,#D4A017); color:var(--navy,#1a3358); } .tc-menu-btn svg{display:block} .tc-menu-toggle{position:absolute; opacity:0; width:0; height:0} .tc-menu-panel{ position:absolute; top:calc(100% + 7px); right:0; width:236px; background:#fff; border:1px solid var(--line,#ccd6e4); border-radius:12px; box-shadow:0 12px 36px rgba(14,30,46,.22); /* The menu (~20 items) can exceed a short viewport — cap its height and scroll WITHIN the panel so the last item (Feedback) stays reachable, and contain the scroll so it doesn't chain to the page underneath. Shared here → fixes all menu-bearing pages at once. */ overflow-x:hidden; overflow-y:auto; max-height:calc(100vh - 80px); overscroll-behavior:contain; -webkit-overflow-scrolling:touch; opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .16s; z-index:1020; } /* pointer arrow aimed up at the Menu button (sits on the wrap, above the panel) */ .tc-menu-wrap::after{ content:''; position:absolute; top:calc(100% + 1px); right:20px; width:13px; height:13px; background:#fff; border-left:1px solid var(--line,#ccd6e4); border-top:1px solid var(--line,#ccd6e4); transform:rotate(45deg); border-top-left-radius:3px; opacity:0; visibility:hidden; transition:opacity .16s; z-index:1021; } .tc-menu-wrap:has(.tc-menu-toggle:checked)::after{opacity:1; visibility:visible} .tc-menu-toggle:checked ~ .tc-menu-panel{opacity:1; visibility:visible; transform:translateY(0)} .tc-menu-sec{font-size:.56rem; font-weight:900; letter-spacing:1px; text-transform:uppercase; color:var(--muted,#506070); padding:11px 14px 5px} .tc-menu-item{ display:flex; align-items:center; gap:10px; padding:8px 14px; text-decoration:none; color:var(--ink,#0e1e2e); font-size:.82rem; font-weight:600; background:none; border:none; width:100%; text-align:left; font-family:inherit; cursor:pointer; } .tc-menu-item:hover{background:#f4f7fc} .tc-menu-item.tc-current{background:#eef3fb; font-weight:800} .tc-menu-item .tc-mi{width:24px; height:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0} .tc-menu-item .tc-mi svg{display:block} /* Coming-soon menu items: non-clickable, dimmed, "soon" pill (matches the homepage .tile.soon treatment). */ .tc-menu-item.tc-soon{opacity:.55; pointer-events:none; cursor:default} .tc-menu-item .tc-soon-tag{margin-left:auto; font-size:.5rem; font-weight:900; letter-spacing:.4px; background:#8a9bb0; color:#fff; border-radius:3px; padding:1px 5px} .tc-menu-div{height:1px; background:var(--line,#ccd6e4); margin:5px 0} /* gold rule beneath bar is now the border-bottom; keep .gold-rule as no-op if present */ .gold-rule{display:none} /* v-next: iOS invariant — overflow-x:hidden breaks position:sticky on .appbar in Capacitor (it turns the element into a scroll container, which traps sticky so the safe-area-inset-top padding above can no longer seat the bar below the status bar). This applies to ANY ancestor of .appbar, not just html/body: keep .appbar a top-level child of , and never put overflow-x:hidden on a wrapper around it — use clip. clip everywhere, single source of truth. */ html,body{overflow-x:clip !important} /* Sticky-content clearance is single-sourced with anchored/programmatic scroll clearance. Page-local sticky panels may inherit --tc-appbar-clearance; they must not restate this offset. */ html{--tc-appbar-clearance:calc(env(safe-area-inset-top) + 70px);scroll-padding-top:var(--tc-appbar-clearance)}