/* css/chrome.css — P1-03. THE APP CHROME ONLY. Owned by P1-03. Do not add feature styling here; other modules own css/.css. Tokens come from styles.css (P1-01) — never redefine a palette value, reuse the custom property. Loaded at runtime by js/chrome.js, which injects a into because index.html links no css/*.css yet. P1-12 is asked to replace that injection with a static . */ /* The wrapper P1-03 owns. .chrome (styles.css) is a single flex ROW, so the wrapper fills it and stacks the two rows inside itself. */ #atlas-chrome, .chrome-rows { flex: 1 1 auto; min-width: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; } .chrome-row { display: flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; /* 44px — the tap-target floor */ min-width: 0; } /* Row 2 gets a full-bleed hairline so the two rows read as two rows. */ .chrome-row--lens { margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); border-top: 1px solid var(--line); } .chrome-tabs { display: flex; align-items: center; gap: 0.25rem; min-width: 0; } /* ---- tabs ---------------------------------------------------------- */ .chrome-tab { --tab-accent: var(--accent); /* hike */ appearance: none; -webkit-appearance: none; margin: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--text-dim); font-family: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1; min-height: 2.75rem; /* 44px */ min-width: 2.75rem; padding: 0 0.625rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.12s ease, color 0.12s ease; } .chrome-tab--dive { --tab-accent: var(--accent-2); } .chrome-tab__icon { font-size: 1.0625rem; line-height: 1; } .chrome-tab:hover:not(.is-disabled):not(.is-active) { color: var(--text); background: rgba(232, 238, 241, 0.06); } /* Active state never relies on colour alone: weight + background + underline. */ .chrome-tab.is-active { color: var(--tab-accent); background: var(--bg); font-weight: 700; box-shadow: inset 0 -2px 0 0 var(--tab-accent); } /* Dive in Phase 1: renders, reads as unavailable, does nothing. */ .chrome-tab.is-disabled { opacity: 0.42; cursor: not-allowed; filter: grayscale(0.6); } /* Visible keyboard focus. Never removed, only scoped to :focus-visible where the browser supports it. */ .chrome-tab:focus { outline: 2px solid var(--text); outline-offset: -2px; } .chrome-tab:focus:not(:focus-visible) { outline: none; } .chrome-tab:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; } /* ---- score readout ------------------------------------------------- */ .chrome-score { margin-left: auto; /* right-aligned on row 1 */ display: inline-flex; align-items: center; gap: 0.3rem; padding: 0 0.125rem; font-family: var(--mono); font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); user-select: none; } .chrome-score__bolt { font-size: 1em; line-height: 1; } .chrome-score.is-empty { color: var(--text-dim); } .chrome-score.is-empty .chrome-score__bolt { opacity: 0.45; } .chrome-score.is-empty .chrome-score__value { opacity: 0.7; } /* ---- utilities ----------------------------------------------------- */ .chrome-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---- narrow phones (320px must not scroll sideways) ---------------- */ @media (max-width: 23.5rem) { .chrome-row { gap: 0.125rem; } .chrome-tabs { gap: 0.125rem; } .chrome-tab { font-size: 0.75rem; padding: 0 0.4375rem; gap: 0.25rem; letter-spacing: 0; } .chrome-tab__icon { font-size: 0.9375rem; } .chrome-score { font-size: 0.875rem; } } /* ---- pointer-coarse gets the same 44px floor; wide screens can breathe */ @media (min-width: 48rem) { .chrome-tab { font-size: 0.875rem; padding: 0 0.875rem; } .chrome-score { font-size: 1rem; } }