. */
@keyframes ostFocusFlash {
0% { background-color: rgba(249, 226, 175, 0.45); }
100% { background-color: rgba(249, 226, 175, 0.12); }
}
.ost-focus-row {
background-color: rgba(249, 226, 175, 0.12) !important;
animation: ostFocusFlash 1.8s ease-out 1;
}
/* The ONE keyword a notification / edit-log row is about, inside the topic
modal's keyword list (?mark=). Same flash language as the focused row so
"here is the thing that changed" reads the same everywhere. */
.v2-kw-marked {
background-color: rgba(249, 226, 175, 0.14) !important;
box-shadow: inset 2px 0 0 var(--ctp-yellow);
animation: ostFocusFlash 1.8s ease-out 1;
}
/* --- Modal Overlay --- */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.modal-panel {
background: var(--ctp-surface0);
border: 1px solid var(--ctp-surface1);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
max-width: 640px;
width: calc(100% - 32px);
max-height: calc(100vh - 64px);
overflow-y: auto;
padding: 24px;
}
.modal-panel-lg { max-width: 900px; }
.modal-panel-xl { max-width: 1200px; }
/* --- Toast Container --- */
/* ── "Oasis is updating" banner ─────────────────────────────────────────────
Top-centre, above every panel, so the answer to "is it broken?" is the first
thing on screen during a deploy. Sits clear of the mobile tab bar by being at
the top, and never blocks a click: it is one line with one button. */
.upd-bar {
position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
z-index: 400; display: flex; align-items: center; gap: 9px;
/* left:50% makes the available width for shrink-to-fit half the viewport, so
a phone squeezed this to 195px and stacked the sentence four lines high.
max-content + max-width sizes it to the text, then clamps. */
width: max-content; max-width: min(560px, calc(100vw - 20px));
padding: 9px 14px; border-radius: var(--radius-md);
background: var(--ctp-surface0); border: 1px solid var(--ctp-peach);
box-shadow: var(--shadow-lg); font-size: 12.5px; font-weight: 600;
color: var(--ctp-text);
}
.upd-bar-back { border-color: var(--ctp-green); color: var(--ctp-green); }
.upd-msg { min-width: 0; }
.upd-btn { flex-shrink: 0; padding: 3px 10px; border-radius: 6px; cursor: pointer;
font-size: 11px; font-weight: 800; color: var(--ctp-base); background: var(--ctp-green); }
.upd-spin { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--ctp-peach) 30%, transparent);
border-top-color: var(--ctp-peach); animation: upd-spin .8s linear infinite; }
@keyframes upd-spin { to { transform: rotate(360deg); } }
.upd-enter-active, .upd-leave-active { transition: opacity .18s, transform .18s; }
.upd-enter-from, .upd-leave-to { opacity: 0; transform: translate(-50%, -8px); }
@media (max-width: 768px) {
.upd-bar { top: 8px; font-size: 12px; padding: 8px 12px; }
}
.toast-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 200;
display: flex;
flex-direction: column-reverse;
gap: 8px;
pointer-events: none;
}
.toast {
pointer-events: auto;
background: var(--ctp-surface0);
border: 1px solid var(--ctp-surface1);
border-radius: var(--radius-md);
padding: 12px 16px;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: 10px;
font-size: var(--text-sm);
font-family: var(--font-display);
min-width: 300px;
max-width: 420px;
position: relative;
overflow: hidden;
}
.toast::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: var(--ctp-blue);
animation: toastProgress linear forwards;
}
@keyframes toastProgress {
from { width: 100%; }
to { width: 0%; }
}
.toast-success { border-left: 3px solid var(--ctp-green); }
.toast-error { border-left: 3px solid var(--ctp-red); }
.toast-info { border-left: 3px solid var(--ctp-blue); }
.toast-warning { border-left: 3px solid var(--ctp-yellow); }
/* --- Input/Select polish --- */
.input {
background: var(--ctp-surface0);
border: 1px solid var(--ctp-surface1);
border-radius: var(--radius-md);
padding: 7px 12px;
font-size: var(--text-sm);
color: var(--ctp-text);
transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
outline: none;
width: 100%;
}
.input:focus {
border-color: var(--ctp-blue);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctp-blue) 15%, transparent);
}
.input::placeholder { color: var(--ctp-overlay0); }
/* --- Progress Bar --- */
.progress-bar {
height: 4px;
background: var(--ctp-surface1);
border-radius: 2px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--ctp-blue), var(--ctp-teal));
border-radius: 2px;
transition: width var(--duration-normal) var(--ease-out-expo);
}
/* --- Sort Arrow --- */
.sort-arrow {
display: inline-block;
width: 0;
height: 0;
margin-left: 4px;
vertical-align: middle;
transition: transform var(--duration-fast);
}
.sort-arrow-asc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 5px solid currentColor;
}
.sort-arrow-desc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
}
/* --- Focus Ring (accessibility) --- */
.focus-ring:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--ctp-base), 0 0 0 4px var(--ctp-blue);
}
/* --- Scrollbar (thin variant for panels) --- */
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { border-radius: 3px; }
/* --- Empty State --- */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
color: var(--ctp-overlay1);
}
.empty-state svg {
width: 48px;
height: 48px;
margin-bottom: 16px;
opacity: 0.4;
}
.empty-state p {
font-family: var(--font-display);
font-size: var(--text-sm);
max-width: 320px;
}
/* --- Action Pills (compact action bar buttons) --- */
.action-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 500;
font-family: var(--font-display);
letter-spacing: 0.01em;
color: var(--ctp-overlay1);
background: var(--ctp-surface0);
border: 1px solid var(--ctp-surface2);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out-expo);
white-space: nowrap;
}
.action-pill:hover:not(:disabled) {
color: var(--ctp-text);
background: var(--ctp-surface1);
border-color: var(--ctp-overlay0);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.action-pill:active:not(:disabled) {
transform: scale(0.97);
}
.action-pill:disabled, .action-pill-disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.action-pill-active {
font-weight: 600;
}
.action-pill-active.action-pill-yellow {
color: var(--ctp-yellow);
background: color-mix(in srgb, var(--ctp-yellow) 12%, var(--ctp-surface0));
border-color: color-mix(in srgb, var(--ctp-yellow) 35%, transparent);
box-shadow: 0 0 8px color-mix(in srgb, var(--ctp-yellow) 15%, transparent);
}
.action-pill-active.action-pill-sky {
color: var(--ctp-sky);
background: color-mix(in srgb, var(--ctp-sky) 12%, var(--ctp-surface0));
border-color: color-mix(in srgb, var(--ctp-sky) 35%, transparent);
box-shadow: 0 0 8px color-mix(in srgb, var(--ctp-sky) 15%, transparent);
animation: pulse 2s ease-in-out infinite;
}
.action-pill-active.action-pill-peach {
color: var(--ctp-peach);
background: color-mix(in srgb, var(--ctp-peach) 12%, var(--ctp-surface0));
border-color: color-mix(in srgb, var(--ctp-peach) 35%, transparent);
box-shadow: 0 0 8px color-mix(in srgb, var(--ctp-peach) 15%, transparent);
animation: pulse 2s ease-in-out infinite;
}
.action-pill-active.action-pill-mauve {
color: var(--ctp-mauve);
background: color-mix(in srgb, var(--ctp-mauve) 12%, var(--ctp-surface0));
border-color: color-mix(in srgb, var(--ctp-mauve) 35%, transparent);
box-shadow: 0 0 8px color-mix(in srgb, var(--ctp-mauve) 15%, transparent);
animation: pulse 2s ease-in-out infinite;
}
.action-pill-active.action-pill-teal {
color: var(--ctp-teal);
background: color-mix(in srgb, var(--ctp-teal) 12%, var(--ctp-surface0));
border-color: color-mix(in srgb, var(--ctp-teal) 35%, transparent);
box-shadow: 0 0 8px color-mix(in srgb, var(--ctp-teal) 15%, transparent);
animation: pulse 2s ease-in-out infinite;
}
/* ===== Mobile Responsive ===== */
/* --- Mobile Menu Toggle Button --- */
.mobile-menu-btn {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: transparent;
color: var(--ctp-subtext0);
border: none;
cursor: pointer;
transition: all var(--duration-fast);
flex-shrink: 0;
}
.mobile-menu-btn:hover {
background: var(--surface-hover);
color: var(--ctp-text);
}
/* --- Mobile Sidebar Overlay --- */
.mobile-sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 60;
}
.mobile-sidebar-overlay.active { display: block; }
/* --- Mobile Sidebar Toggle Button --- */
.mobile-sidebar-toggle {
display: none;
align-items: center;
gap: 6px;
white-space: nowrap;
flex-shrink: 0;
padding: 8px 14px;
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-family: var(--font-display);
font-weight: 500;
color: var(--ctp-teal);
background: color-mix(in srgb, var(--ctp-teal) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--ctp-teal) 20%, transparent);
cursor: pointer;
transition: all var(--duration-fast);
}
.mobile-sidebar-toggle:hover {
background: color-mix(in srgb, var(--ctp-teal) 15%, transparent);
}
/* Phone-only chrome: scrim + bottom tab bar exist only under 768px */
.nav-scrim { display: none; }
.mobile-tabbar { display: none; }
/* "New build available" banner — must ALWAYS be fully visible, never clipped
by the left sidebar (z-50) or the mobile tab bar (z-70). Hand-written (not
Tailwind utilities) because Tailwind here is precompiled and arbitrary
position/calc classes wouldn't exist at runtime. */
.update-banner {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 300;
display: flex;
align-items: center;
gap: 12px;
max-width: calc(100vw - 32px);
}
@media (max-width: 768px) {
/* Phone: full-width bar lifted clear of the bottom tab bar. */
.update-banner {
left: 16px;
right: 16px;
bottom: calc(76px + env(safe-area-inset-bottom));
justify-content: space-between;
}
}
@media (max-width: 768px) {
/* --- Header --- */
.mobile-menu-btn { display: flex; }
.header-stats,
.header-actions-desktop {
display: none !important;
}
.header-actions-mobile {
display: flex !important;
}
/* Mobile dropdown menu */
.mobile-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 60;
background: var(--ctp-surface0);
border: 1px solid var(--ctp-surface1);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: 8px;
min-width: 200px;
display: flex;
flex-direction: column;
gap: 2px;
}
.mobile-dropdown-menu .btn {
width: 100%;
justify-content: flex-start;
}
/* --- Navigation Tabs --- */
.nav-tab {
padding: 8px 14px;
font-size: var(--text-sm);
min-height: 44px;
}
.nav-tab svg { width: 16px; height: 16px; }
/* --- Main Content --- */
.main-content {
padding-left: 12px !important;
padding-right: 12px !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
/* --- Topics List Sidebar --- */
.mobile-sidebar-toggle { display: flex; }
.tl-layout {
flex-direction: column !important;
gap: 0 !important;
}
.tl-sidebar {
width: 100% !important;
flex-shrink: 1 !important;
position: fixed;
top: 0;
left: -100%;
bottom: 0;
width: 280px !important;
z-index: 70;
background: var(--ctp-base);
padding: 16px;
overflow-y: auto;
transition: left 0.25s var(--ease-out-expo);
}
.tl-sidebar.mobile-open {
left: 0;
}
.tl-sidebar .sticky { position: static !important; }
/* --- Cards --- */
.card { padding: 14px; }
.stat-card { padding: 12px 14px; }
/* --- Tables --- */
.data-table { font-size: var(--text-xs); }
.data-table thead th { padding: 8px 10px; }
.data-table tbody td { padding: 8px 10px; }
/* --- Modal --- */
.modal-panel {
width: calc(100% - 16px);
max-height: calc(100vh - 32px);
padding: 16px;
border-radius: var(--radius-lg);
}
.modal-panel-lg { max-width: 100%; }
.modal-panel-xl { max-width: 100%; }
/* --- Buttons: touch-friendly --- */
.btn { min-height: 44px; padding: 10px 16px; }
.btn-sm { min-height: 36px; padding: 8px 12px; }
.btn-xs { min-height: 32px; padding: 6px 10px; }
/* --- Inputs: touch-friendly --- */
.input { min-height: 44px; padding: 10px 12px; font-size: 16px; }
select.input { font-size: 16px; }
/* --- Nav tab pills: touch-friendly --- */
.action-pill { min-height: 36px; padding: 8px 14px; }
/* --- Toast on mobile --- */
.toast-container {
left: 12px;
right: 12px;
bottom: 12px;
}
.toast {
min-width: auto;
max-width: 100%;
}
/* --- Prevent horizontal overflow --- */
.max-w-7xl { max-width: 100% !important; }
/* --- Fix fixed-width elements --- */
img, video, canvas, svg.chart { max-width: 100%; height: auto; }
/* --- Geo dropdown mobile --- */
[class*="w-64"],
[class*="w-72"],
[class*="w-80"],
[class*="w-96"] {
max-width: calc(100vw - 32px);
}
/* Body overflow is handled once, further down this same 768px block:
`html { overflow-x: clip }` + `body { overflow: visible !important }`.
A rule here setting overflow-x on BODY used to fight it — overflow-x on
body computes overflow-y to auto, making body a scroll container and
silently killing every position:sticky descendant. It only ever appeared
harmless because the later rule overrode it. Removed 2026-07-31; do not
reintroduce, put body-overflow rules in one place. */
/* --- Flex containers stack on mobile --- */
.flex-row-mobile-col { flex-direction: column !important; }
.gap-5, .gap-6, .gap-8 { gap: 12px !important; }
/* --- Font size adjustments for readability --- */
.text-2xl { font-size: 1.25rem !important; }
.text-3xl { font-size: 1.5rem !important; }
.text-4xl { font-size: 1.75rem !important; }
/* --- Ensure all overflow-x containers are scrollable --- */
.overflow-x-auto { -webkit-overflow-scrolling: touch; }
/* --- Fixed-width elements should not exceed viewport --- */
pre, code, .font-mono { max-width: 100%; overflow-x: auto; word-break: break-word; }
/* .font-mono is also tabular numbers inside tables — the code-block guard
above must never apply there: overflow-x:auto turns each cell into its own
scroll container (min-content ≈ 0) and the whole table letter-crushes
(the "E S T . C L I C K S" bug). Tables already scroll via their wrapper
or the .main-content table fallback below. */
table .font-mono, th.font-mono, td.font-mono {
overflow-x: visible; word-break: normal; max-width: none;
}
/* --- Modal improvements --- */
.modal-panel h2, .modal-panel h3 { font-size: 1rem; }
.modal-panel .text-sm { font-size: 0.8125rem; }
/* --- Phone nav = fixed bottom bar (5 shortcuts) + the REAL sidebar as a
slide-in drawer behind the ☰ cell.
(Mark's design 2026-07-08: main sections in a bar at the bottom of the
phone screen. Round 5, 2026-07-26: the drawer is the actual
`aside.oasis-sidebar`, not a hand-copied menu — the old .mobile-more-sheet
duplicate silently lost Feedback / Intake / Brand when they were added to
the sidebar. One menu, one source of truth, nothing can go missing.)
Drawer open == !navCollapsed on phones (app.js forces collapsed at boot
and on every navigation), so the existing .nav-scrim + auto-close watcher
drive it with no extra state. --- */
.oasis-sidebar {
display: flex !important;
position: fixed !important;
top: 0;
left: 0;
/* Stops ABOVE the bottom bar so the ☰ cell (which becomes ✕) stays
tappable — a drawer covering its own close button is a trap.
Stated as an explicit HEIGHT, not `bottom`: the aside already carries a
`height` (100vh, plus Tailwind's h-screen), and top+bottom+height is
over-constrained — the browser then ignores `bottom` and the drawer ran
down over the bar. `dvh` so the iOS URL bar collapsing can't shift it. */
height: calc(100vh - var(--mobile-tabbar-h, 58px)) !important;
height: calc(100dvh - var(--mobile-tabbar-h, 58px)) !important;
max-height: none !important;
width: min(310px, 86vw) !important;
max-width: 86vw;
/* !important beats the aside's Tailwind z-50 / .glass background whatever
order the stylesheets land in. */
z-index: 80 !important;
background: var(--ctp-base) !important;
backdrop-filter: none;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
transition: transform 0.25s var(--ease-out-expo);
box-shadow: 12px 0 40px rgba(0, 0, 0, 0.28);
}
/* Closed = parked off-canvas (transform, not `left`: it never reflows the
page and cannot widen the document). */
.oasis-sidebar:not(.mobile-open) {
transform: translateX(-102%);
box-shadow: none;
pointer-events: none;
}
.oasis-sidebar.mobile-open { transform: none; }
/* The drag-resize handle is mouse-only chrome — on a phone it just eats
swipes at the drawer's edge. */
.oasis-sidebar .cursor-col-resize { display: none; }
/* Tap-outside scrim (markup already exists, desktop-hidden). Stops above the
bottom bar too, so the nav stays live while the drawer is open. */
.nav-scrim {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
height: calc(100vh - var(--mobile-tabbar-h, 58px));
height: calc(100dvh - var(--mobile-tabbar-h, 58px));
z-index: 79;
background: rgba(0, 0, 0, 0.45);
}
.mobile-tabbar {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 70;
gap: 2px;
padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
background: var(--ctp-mantle);
border-top: 1px solid var(--ctp-surface1);
}
/* Equal cells, no sidescroll (Mark: "the sidescroll is weird") — icon over
a small label, native tab-bar style. Everything else lives in the drawer. */
.mobile-tabbar-item {
flex: 1 1 0;
min-width: 0;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 5px 2px;
border-radius: 12px;
font-size: 10px;
font-weight: 700;
font-family: var(--font-display);
color: var(--ctp-overlay1);
white-space: nowrap;
background: transparent;
border: 1px solid transparent;
min-height: 46px;
}
.mobile-tabbar-item.active {
color: var(--ctp-blue);
background: color-mix(in srgb, var(--ctp-blue) 10%, transparent);
border-color: color-mix(in srgb, var(--ctp-blue) 20%, transparent);
}
.mobile-tabbar-item .nav-ico { width: 20px; height: 20px; flex-shrink: 0; }
/* content must clear the fixed bar */
.main-content { padding-bottom: 92px !important; }
/* --- Tables: any bespoke table without a scroll wrapper scrolls itself
instead of blowing out the page width (body overflow-x is hidden);
the first column stays pinned so rows keep their identity mid-scroll. --- */
.main-content table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* THE letter-crush fix (2026-07-27). `display: block` makes the table its
own scrollport, but its internal table layout then gets the block's
content width — i.e. the viewport — so every column is squeezed toward
min-content and long labels break one character per line ("E S T .
C L I C K S", "T O P I C · G B", a "Keyword" header 11px wide and 110px
tall). min-content: max-content lets the columns keep their natural
width and the table scroll instead, which is what the wrapper was for.
Applies to every bespoke table on every tab, so this class of bug can't
come back one screen at a time. */
min-width: max-content;
}
/* …except the Blacklist, which answers narrowness by FOLDING columns into the
keyword's second line rather than by scrolling. `display: block` also drops
table-layout:fixed, so the declared widths stopped applying and a 56px
un-block column rendered 346px wide while the table kept a 473px
max-content floor — a sideways scroll on every phone (Mark 2026-07-29:
"its not responsive?"). Opting out restores real table layout. */
.main-content table.bl-table {
display: table; min-width: 0; overflow-x: visible;
}
.main-content table thead th:first-child,
.main-content table tbody td:first-child {
position: sticky;
left: 0;
z-index: 2;
background: var(--ctp-mantle);
}
/* Pinning the first column is for tables that scroll; this one doesn't, and
the hard mantle background would paint over the green on a just-added row. */
.main-content table.bl-table thead th:first-child,
.main-content table.bl-table tbody td:first-child {
position: static; background: inherit;
}
}
/* Small mobile (< 480px) */
@media (max-width: 480px) {
.nav-tab span:not(.badge):not([class*="px-"]) {
/* Hide tab text labels, show icons only on very small screens */
}
.stat-card .stat-value { font-size: var(--text-xl); }
.stat-card .stat-label { font-size: 11.5px; }
/* Stack 2-col grids on very small screens where appropriate */
.grid-cols-2:not(.gap-x-2) { grid-template-columns: 1fr !important; }
}
/* --- Article Prose (rendered markdown) --- */
.tl-article-prose {
font-size: 0.875rem;
line-height: 1.7;
color: var(--ctp-text);
}
.tl-article-prose h1 {
font-size: 1.35rem;
font-weight: 700;
color: var(--ctp-teal);
margin: 0 0 0.75rem;
line-height: 1.3;
}
.tl-article-prose h2 {
font-size: 1.1rem;
font-weight: 600;
color: var(--ctp-blue);
margin: 1.5rem 0 0.5rem;
line-height: 1.3;
}
.tl-article-prose h3 {
font-size: 0.95rem;
font-weight: 600;
color: var(--ctp-mauve);
margin: 1.25rem 0 0.4rem;
}
.tl-article-prose h4 {
font-size: 0.875rem;
font-weight: 600;
color: var(--ctp-peach);
margin: 1rem 0 0.3rem;
}
.tl-article-prose p {
margin: 0 0 0.75rem;
}
.tl-article-prose ul, .tl-article-prose ol {
margin: 0 0 0.75rem;
padding-left: 1.5rem;
}
.tl-article-prose ul { list-style-type: disc; }
.tl-article-prose ol { list-style-type: decimal; }
.tl-article-prose li {
margin-bottom: 0.25rem;
}
.tl-article-prose li > ul, .tl-article-prose li > ol {
margin-top: 0.25rem;
margin-bottom: 0;
}
.tl-article-prose strong {
font-weight: 600;
color: var(--ctp-text);
}
.tl-article-prose em {
font-style: italic;
}
.tl-article-prose a {
color: var(--ctp-blue);
text-decoration: underline;
text-underline-offset: 2px;
}
.tl-article-prose a:hover {
color: var(--ctp-teal);
}
.tl-article-prose blockquote {
border-left: 3px solid var(--ctp-surface2);
padding: 0.5rem 1rem;
margin: 0.75rem 0;
color: var(--ctp-subtext0);
background: var(--ctp-surface0);
border-radius: 0 0.375rem 0.375rem 0;
}
.tl-article-prose table {
width: 100%;
border-collapse: collapse;
margin: 0.75rem 0;
font-size: 0.8125rem;
}
.tl-article-prose th {
text-align: left;
font-weight: 600;
padding: 0.5rem 0.75rem;
border-bottom: 2px solid var(--ctp-surface2);
color: var(--ctp-subtext1);
background: var(--ctp-surface0);
}
.tl-article-prose td {
padding: 0.4rem 0.75rem;
border-bottom: 1px solid var(--ctp-surface1);
}
.tl-article-prose tr:hover td {
background: var(--ctp-surface0);
}
.tl-article-prose code {
font-size: 0.8125rem;
background: var(--ctp-surface1);
padding: 0.15rem 0.35rem;
border-radius: 0.25rem;
}
.tl-article-prose hr {
border: none;
border-top: 1px solid var(--ctp-surface2);
margin: 1.25rem 0;
}
.tl-article-prose img {
max-width: 100%;
border-radius: 0.5rem;
}
/* Parent-topic chips — colored via inline --accent CSS var so dynamic
* parents tint correctly without depending on Tailwind opacity utilities
* (which silently no-op when the underlying color is a full var()). */
.parent-chip {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.parent-chip-soft {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
/* Topics V2 — Parent row V10 polish (volume bar, geo-grid, top-3 peek,
* accent swim-lane stripe, expand-time lede). Loaded via ported polish
* Topics V2 design pass (V10).
*
* Stripe uses box-shadow inset on the first
rather than a ::before
* pseudo on the
— pseudos on table-row display are unreliable. */
.ost-prow > td:first-child {
box-shadow: inset 4px 0 0 var(--accent);
}
/* Parent rollup header — laid out as real table cells (geo+parent+topic merged
* via colspan, then priority/kws/vol/star) so the rollup counts line up exactly
* above the per-topic KWS / VOL columns below. */
.ost-prow-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ost-prow-tcount { flex: none; font: 600 11px/1 var(--font-data); color: var(--ctp-overlay1); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Priority pills — one compact pill per non-empty P0–P5 tier, left-packed.
No stretched bar, no inline legend, nothing to overlap in multi-geo. */
.ost-pills { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.ost-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px; border-radius: 99px;
font: 700 10px/1.4 var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ost-pill > i { width: 7px; height: 7px; border-radius: 99px; display: inline-block; flex: none; }
.ost-pill-p0 { background: color-mix(in srgb, var(--ctp-red) 14%, transparent); color: var(--ctp-red); }
.ost-pill-p0 > i { background: var(--ctp-red); }
.ost-pill-p1 { background: color-mix(in srgb, var(--ctp-peach) 14%, transparent); color: var(--ctp-peach); }
.ost-pill-p1 > i { background: var(--ctp-peach); }
.ost-pill-p2 { background: color-mix(in srgb, var(--ctp-yellow) 16%, transparent); color: var(--ctp-yellow); }
.ost-pill-p2 > i { background: var(--ctp-yellow); }
.ost-pill-p3 { background: color-mix(in srgb, var(--ctp-green) 14%, transparent); color: var(--ctp-green); }
.ost-pill-p3 > i { background: var(--ctp-green); }
.ost-pill-p4 { background: color-mix(in srgb, var(--ctp-teal) 14%, transparent); color: var(--ctp-teal); }
.ost-pill-p4 > i { background: var(--ctp-teal); }
.ost-pill-p5 { background: color-mix(in srgb, var(--ctp-overlay0) 18%, transparent); color: var(--ctp-overlay1); }
.ost-pill-p5 > i { background: var(--ctp-overlay0); }
/* Rollup count cell — number over a tiny label, right-aligned to its column */
.ost-rollup { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.1; }
.ost-rollup > b { font: 700 13px/1.1 var(--font-data); font-variant-numeric: tabular-nums; color: var(--ctp-text); }
.ost-rollup > em { font: 600 9px/1 var(--font-data); font-style: normal; text-transform: uppercase; letter-spacing: .05em; color: var(--ctp-overlay1); }
.ost-star { font: 700 12px/1 var(--font-data); color: var(--ctp-yellow); white-space: nowrap; }
/* Topic rows are click-to-expand. Hover = clear lavender wash + accent edge;
element+class selector outranks the zebra utility so it wins regardless of
source order. Open rows keep a faint wash so you can see which is expanded. */
tr.ost-kw-toggle:hover { background: color-mix(in srgb, var(--ctp-lavender) 13%, transparent); }
tr.ost-kw-toggle:hover > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
tr.ost-kw-open { background: color-mix(in srgb, var(--ctp-lavender) 7%, transparent); }
tr.ost-kw-open > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.ost-vol-bar {
display: block;
height: 6px;
background: color-mix(in srgb, var(--accent) 12%, transparent);
border-radius: 3px;
overflow: hidden;
max-width: 420px;
}
.ost-vol-bar > i {
display: block;
height: 100%;
background: var(--accent);
}
.ost-top3 {
font: 500 11px/1.4 var(--font-ui);
color: var(--ctp-overlay1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.ost-top3 b {
color: var(--ctp-subtext1);
font-weight: 600;
}
.ost-top3 .sep {
color: var(--ctp-overlay0);
margin: 0 5px;
}
.ost-top3 b {
color: var(--ctp-subtext1);
font-weight: 500;
}
.ost-top3 .sep {
color: var(--ctp-overlay0);
margin: 0 5px;
}
.ost-geo-grid {
display: grid;
grid-template-columns: repeat(22, 5px);
grid-auto-rows: 5px;
gap: 1px;
min-width: 0;
position: relative;
}
.ost-geo-grid > i {
display: block;
width: 5px;
height: 5px;
background: color-mix(in srgb, var(--accent) 18%, transparent);
border-radius: 1px;
cursor: pointer;
position: relative;
transition: transform 100ms ease, box-shadow 100ms ease;
}
.ost-geo-grid > i.lit {
background: var(--accent);
}
.ost-geo-grid > i:hover {
transform: scale(2.4);
box-shadow: 0 0 0 1px var(--ctp-text);
z-index: 5;
}
/* Custom hover label — pops out a small chip with the geo code + state
* so users see WHICH geo each square represents on hover. */
.ost-geo-grid > i[data-label]:hover::after {
content: attr(data-label);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%) scale(0.55);
transform-origin: bottom center;
padding: 3px 7px;
background: var(--ctp-crust);
border: 1px solid var(--ctp-surface1);
color: var(--ctp-text);
font: 600 11px/1 var(--font-data);
font-variant-numeric: tabular-nums;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
z-index: 10;
}
/* Star/shortlist toggle for keywords + topics in Topics V2. Empty stars are
always visible in muted grey; hover/focus brightens them. Filled stars are lit. */
.tl-star {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 4px;
border: none;
background: transparent;
color: var(--ctp-overlay0);
cursor: pointer;
line-height: 1;
transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.tl-star:hover { background: color-mix(in oklab, var(--ctp-yellow) 12%, transparent); color: var(--ctp-yellow); }
.tl-star.empty { opacity: 1; color: var(--ctp-surface2); }
.tl-star.empty:hover { color: var(--ctp-yellow); }
.tl-star.empty:focus-visible { outline: 1px solid var(--ctp-blue); }
.tl-star.filled { color: var(--ctp-yellow); opacity: 1; }
.tl-star.filled:hover { color: var(--ctp-peach); }
/* Planned = saved to the framed site's Content Plan: green star + green row.
Dedicated classes because (a) .tl-star.filled outranks the text-ctp-green
utility, (b) ctp-palette /opacity variants (bg-ctp-green/10) don't compile. */
.tl-star.filled.planned { color: var(--ctp-green); }
.tl-star.filled.planned:hover { color: var(--ctp-teal); }
.ost-row-planned,
.ost-row-planned:hover { background: color-mix(in oklab, var(--ctp-green) 11%, transparent) !important; }
.ost-row-planned > td:first-child { box-shadow: inset 2px 0 0 var(--ctp-green); }
.ost-lede {
position: relative;
padding: 12px 18px 12px 22px;
background: color-mix(in srgb, var(--accent) 10%, var(--ctp-base));
border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
color: var(--ctp-subtext1);
font: 500 12px/1.55 var(--font-ui);
}
.ost-lede::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--accent);
opacity: 0.55;
}
.ost-lede .ost-lede-tag {
color: var(--accent);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 11.5px;
margin-right: 8px;
}
.ost-child > td:first-child {
box-shadow: inset 4px 0 0 color-mix(in srgb, var(--accent) 65%, transparent);
}
/* ──────────────────────────────────────────────────────────────────────
Content Gap — live progress timeline
--------------------------------------------------------------------
Ported from the deleted Action Loop tab's al-timeline. Compact log of
phase events appended by the backend during a run: publisher resolve →
ClickUp fetch → URL probes → topic load → task mapping → bucket compute
→ BigQuery enrichment → gap derivation. Newest event on top so the
most recent activity is always visible without scrolling.
────────────────────────────────────────────────────────────────────── */
.cg-timeline {
background: var(--ctp-mantle);
border: 1px solid var(--ctp-surface1);
border-radius: 8px;
overflow: hidden;
font-family: var(--font-data);
font-size: 11.5px;
}
.cg-timeline-head {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-bottom: 1px solid var(--ctp-surface1);
background: var(--ctp-crust);
}
.cg-timeline-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ctp-mauve);
animation: cg-timeline-pulse 1.4s ease-in-out infinite;
flex-shrink: 0;
}
.cg-timeline-dot.done { background: var(--ctp-green); animation: none; }
.cg-timeline-dot.failed { background: var(--ctp-red); animation: none; }
@keyframes cg-timeline-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
.cg-timeline-title {
color: var(--ctp-text);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 11.5px;
}
.cg-timeline-elapsed {
margin-left: auto;
color: var(--ctp-overlay1);
font-size: 11.5px;
font-variant-numeric: tabular-nums;
}
.cg-timeline-body {
max-height: 280px;
overflow-y: auto;
padding: 6px 12px 8px;
display: flex;
flex-direction: column-reverse; /* newest on top */
}
.cg-timeline-row {
display: grid;
grid-template-columns: 56px 96px 1fr;
gap: 10px;
padding: 3px 0;
color: var(--ctp-subtext0);
line-height: 1.45;
border-bottom: 1px dotted color-mix(in srgb, var(--ctp-surface1) 60%, transparent);
}
.cg-timeline-row:last-child { border-bottom: none; }
.cg-timeline-time {
color: var(--ctp-overlay1);
font-variant-numeric: tabular-nums;
}
.cg-timeline-scope {
display: inline-block;
padding: 1px 6px;
border-radius: 3px;
background: var(--ctp-surface1);
color: var(--ctp-text);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-align: center;
align-self: center;
text-transform: uppercase;
}
.cg-timeline-msg { color: var(--ctp-text); word-break: break-word; }
.cg-timeline-empty { opacity: 0.55; font-style: italic; }
/* Phase chip colors — same hue family as the existing CG geo + bucket
colors so the eye doesn't reroute when switching from the timeline
to the results below. */
.cg-timeline-scope.scope-orchestrator { background: rgba(203, 166, 247, 0.22); color: var(--ctp-mauve); } /* lifecycle */
.cg-timeline-scope.scope-publisher { background: rgba(116, 199, 236, 0.22); color: var(--ctp-sapphire); } /* ClickUp publisher resolve */
.cg-timeline-scope.scope-clickup { background: rgba(137, 220, 235, 0.22); color: var(--ctp-sky); } /* ClickUp tasks */
.cg-timeline-scope.scope-probe { background: rgba(250, 179, 135, 0.22); color: var(--ctp-peach); } /* live URL probes */
.cg-timeline-scope.scope-topics { background: rgba(245, 194, 231, 0.22); color: var(--ctp-pink); } /* topic snapshot */
.cg-timeline-scope.scope-mapping { background: rgba(249, 226, 175, 0.22); color: var(--ctp-yellow); } /* task → topic */
.cg-timeline-scope.scope-buckets { background: rgba(166, 227, 161, 0.22); color: var(--ctp-green); } /* covered/claimed/lost */
.cg-timeline-scope.scope-bigquery { background: rgba(148, 226, 213, 0.22); color: var(--ctp-teal); } /* BQ FTD enrichment */
.cg-timeline-scope.scope-gaps { background: rgba(203, 166, 247, 0.22); color: var(--ctp-mauve); } /* gap derivation */
.cg-timeline-scope.scope-default { background: var(--ctp-surface1); color: var(--ctp-subtext0); }
/* ──────────────────────────────────────────────────────────────────────
Content Gap — polished section + KPI card chrome
--------------------------------------------------------------------
Each section is a surface0 card with a 3px colored left bar that
identifies its meaning at a glance. Inside, the dashboard KPI tiles
drop into a slightly-darker mantle "well" with proper card chrome
(border + bg + padding) so values pop instead of floating as bare
text on flat surface. Mono-numeric values lend a data-instrument feel.
────────────────────────────────────────────────────────────────────── */
.cg-section {
position: relative;
}
.cg-section::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--cg-accent, var(--ctp-overlay0));
}
.cg-section--teal { --cg-accent: var(--ctp-teal); }
.cg-section--peach { --cg-accent: var(--ctp-peach); }
.cg-section--peach-dim { --cg-accent: color-mix(in srgb, var(--ctp-peach) 65%, var(--ctp-overlay0)); }
.cg-section--mauve { --cg-accent: var(--ctp-mauve); }
.cg-section--blue { --cg-accent: var(--ctp-blue); }
.cg-section--red { --cg-accent: var(--ctp-red); }
.cg-section--yellow { --cg-accent: var(--ctp-yellow); }
.cg-section-head {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px 12px 18px;
border-bottom: 1px solid var(--ctp-surface1);
background: color-mix(in srgb, var(--cg-accent) 4%, var(--ctp-surface0));
}
.cg-section-title {
font-size: 14px;
font-weight: 700;
color: var(--cg-accent);
letter-spacing: 0.005em;
}
.cg-section-count {
font-family: var(--font-data);
font-size: 12.5px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--cg-accent) 14%, transparent);
color: var(--cg-accent);
font-variant-numeric: tabular-nums;
}
.cg-count-teal { background: color-mix(in srgb, var(--ctp-teal) 14%, transparent); color: var(--ctp-teal); }
.cg-count-peach { background: color-mix(in srgb, var(--ctp-peach) 14%, transparent); color: var(--ctp-peach); }
.cg-count-mauve { background: color-mix(in srgb, var(--ctp-mauve) 14%, transparent); color: var(--ctp-mauve); }
.cg-count-blue { background: color-mix(in srgb, var(--ctp-blue) 14%, transparent); color: var(--ctp-blue); }
.cg-count-red { background: color-mix(in srgb, var(--ctp-red) 14%, transparent); color: var(--ctp-red); }
.cg-count-yellow { background: color-mix(in srgb, var(--ctp-yellow) 14%, transparent); color: var(--ctp-yellow); }
.cg-section-chip {
font-size: 11.5px;
color: var(--ctp-subtext0);
background: var(--ctp-mantle);
border: 1px solid var(--ctp-surface1);
padding: 3px 8px;
border-radius: 4px;
font-weight: 500;
}
.cg-section-toggle {
margin-left: auto;
font-size: 11.5px;
font-weight: 600;
color: var(--ctp-subtext0);
background: transparent;
border: 1px solid var(--ctp-surface1);
border-radius: 6px;
padding: 4px 10px;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: background 120ms, color 120ms, border-color 120ms;
letter-spacing: 0.02em;
}
.cg-section-toggle:hover:not(:disabled) {
color: var(--ctp-text);
background: var(--ctp-mantle);
border-color: var(--ctp-surface2);
}
.cg-section-toggle:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.cg-toggle-caret {
display: inline-block;
font-size: 11.5px;
transition: transform 150ms ease-out;
color: inherit;
}
.cg-toggle-caret.is-open { transform: rotate(90deg); }
/* KPI tile grid — sits in a darker well so each tile pops as its own card */
.cg-kpi-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
padding: 14px 16px;
background: var(--ctp-mantle);
}
.cg-kpi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cg-kpi-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 768px, not 720px: phone layout starts at 768px everywhere else, so a 720
cutoff left 721-768px showing five letter-crushed KPI tiles. */
@media (max-width: 768px) {
.cg-kpi-grid,
.cg-kpi-grid--3,
.cg-kpi-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cg-kpi {
background: var(--ctp-surface0);
border: 1px solid var(--ctp-surface1);
border-radius: 8px;
padding: 10px 12px 11px;
display: flex;
flex-direction: column;
gap: 6px;
min-height: 64px;
transition: border-color 120ms, box-shadow 120ms;
}
.cg-kpi:hover {
border-color: var(--ctp-surface2);
box-shadow: 0 1px 0 var(--ctp-surface1);
}
.cg-kpi--primary {
border-color: color-mix(in srgb, var(--cg-accent) 35%, var(--ctp-surface1));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cg-accent) 12%, transparent);
}
.cg-kpi-label {
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ctp-subtext0);
font-weight: 600;
display: flex;
align-items: baseline;
gap: 6px;
}
.cg-kpi-window {
text-transform: none;
letter-spacing: 0;
font-size: 10.5px;
color: var(--ctp-overlay1);
font-weight: 500;
}
.cg-kpi-value {
font-family: var(--font-data);
font-size: 22px;
font-weight: 700;
color: var(--ctp-text);
line-height: 1.05;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
display: flex;
align-items: baseline;
gap: 8px;
}
.cg-kpi-aside {
font-family: var(--font-ui);
font-size: 11.5px;
font-weight: 500;
color: var(--ctp-overlay1);
text-transform: none;
letter-spacing: 0;
}
.cg-value-teal { color: var(--ctp-teal); }
.cg-value-peach { color: var(--ctp-peach); }
.cg-value-mauve { color: var(--ctp-mauve); }
.cg-value-blue { color: var(--ctp-blue); }
.cg-value-red { color: var(--ctp-red); }
.cg-value-yellow { color: var(--ctp-yellow); }
.cg-value-green { color: var(--ctp-green); }
/* ── Top summary block — same visual language as the section cards ── */
.cg-summary {
background: var(--ctp-surface0);
border: 1px solid var(--ctp-surface1);
border-radius: 12px;
overflow: hidden;
}
.cg-summary-head {
display: flex;
align-items: baseline;
gap: 10px;
padding: 12px 18px;
background: var(--ctp-mantle);
border-bottom: 1px solid var(--ctp-surface1);
font-size: 12.5px;
}
.cg-summary-label {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 11.5px;
font-weight: 600;
color: var(--ctp-overlay1);
}
.cg-summary-value {
font-family: var(--font-data);
font-size: 12.5px;
color: var(--ctp-text);
font-weight: 600;
}
.cg-summary-sep { color: var(--ctp-overlay0); }
.cg-summary-grid {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 0;
}
@media (max-width: 1100px) {
.cg-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.cg-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cg-summary-tile {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
border-right: 1px solid var(--ctp-surface1);
border-bottom: 1px solid var(--ctp-surface1);
background: var(--ctp-surface0);
}
.cg-summary-tile:hover { background: var(--ctp-mantle); }
.cg-summary-tile:last-child { border-right: none; }
.cg-summary-grid > .cg-summary-tile:nth-last-child(-n+1) { border-bottom: none; }
@media (max-width: 1100px) {
.cg-summary-tile:nth-child(4n) { border-right: none; }
.cg-summary-grid > .cg-summary-tile:nth-last-child(-n+4) { border-bottom: none; }
}
@media (max-width: 640px) {
.cg-summary-tile:nth-child(2n) { border-right: none; }
.cg-summary-grid > .cg-summary-tile:nth-last-child(-n+2) { border-bottom: none; }
}
.cg-summary-name {
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--ctp-subtext0);
}
.cg-summary-num {
font-family: var(--font-data);
font-size: 24px;
font-weight: 700;
color: var(--ctp-text);
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.cg-summary-meta {
font-size: 11.5px;
color: var(--ctp-subtext0);
padding: 10px 18px;
border-top: 1px solid var(--ctp-surface1);
background: color-mix(in srgb, var(--ctp-mantle) 50%, var(--ctp-surface0));
}
.cg-summary-meta strong {
font-family: var(--font-data);
color: var(--ctp-text);
font-weight: 700;
}
.cg-summary-warn { color: var(--ctp-red); font-weight: 600; }
.cg-summary-warnings {
padding: 8px 18px 12px;
font-size: 11.5px;
color: var(--ctp-yellow);
background: color-mix(in srgb, var(--ctp-yellow) 6%, var(--ctp-surface0));
border-top: 1px solid color-mix(in srgb, var(--ctp-yellow) 20%, var(--ctp-surface1));
}
.cg-summary-warnings > div { line-height: 1.5; }
/* --- Left vertical sidebar (nav moved off the top bar) --- */
.oasis-sidebar {
height: 100vh;
max-height: 100vh;
align-self: flex-start;
}
.oasis-sidebar .nav-tab {
display: flex;
width: 100%;
justify-content: flex-start;
padding: 8px 12px;
font-size: var(--text-sm);
}
.oasis-sidebar .nav-tab svg { flex-shrink: 0; }
/* Right-side drawer + backdrop transitions (Competitors company-details panel) */
.slide-right-enter-active, .slide-right-leave-active { transition: transform 0.24s ease; }
.slide-right-enter-from, .slide-right-leave-to { transform: translateX(100%); }
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
/* --- Geo flags — ONE fixed size everywhere ---------------------------------
Every flag (country + US state) renders in the same fixed box so the geo
column reads as a clean, aligned grid. object-fit:cover fills the box no
matter each flag's native aspect ratio, so a wide flag (IE 2:1) and a tall
one (CH 1:1) end up identical in size. Used app-wide. */
.geo-flag {
display: inline-block;
width: 20px;
height: 14px;
object-fit: cover;
border-radius: 2px;
flex-shrink: 0;
vertical-align: middle;
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25);
}
/* Compact flag for inside chips/tight table cells (geo code badges, Markets
columns) where the full 20x14 flag would overpower the 10px text beside it. */
.geo-flag-sm {
width: 14px;
height: 10px;
}
/* Domain/platform favicon (Google favicon service, 64px source rendered at
14px). Slight rounding so white-background icons don't read as raw squares. */
.domain-favicon {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 3px;
flex-shrink: 0;
vertical-align: middle;
}
/* Even smaller variant for inside 10px-text chips (company Top-sites badges). */
.domain-favicon-xs {
width: 12px;
height: 12px;
}
/* Region buckets (LATAM / Global) have no flag image — the globe emoji sits in
the same-width slot so it lines up with the flag column. */
.geo-flag-emoji {
display: inline-block;
width: 20px;
text-align: center;
font-size: 14px;
line-height: 14px;
flex-shrink: 0;
vertical-align: middle;
}
/* Collapsed sidebar icon-rail (2026-07-07): uniform centered 32px chips so
the rail reads as a tidy column instead of stretched full-width pills. */
.nav-rail .nav-tab,
.nav-rail .btn-ghost {
width: 32px;
height: 32px;
min-height: 32px;
padding: 0;
margin-left: auto;
margin-right: auto;
justify-content: center;
}
/* Collapsed rail: hard-center every column so no item hugs the left edge */
.nav-rail nav,
.nav-rail nav + div,
.nav-rail > div:first-child {
align-items: center;
}
/* ── Sticky section chrome (2026-07-08) ─────────────────────────────────
The lane sub-tab bar pins to the viewport top; each section's primary
filter toolbar pins just below it; the browse rails pin and scroll their
own (long) lists internally. The body is the scroll container — same
trick the app sidebar already uses. Disabled on phones: sticky chrome
eats too much of a small viewport and the rails become drawers there. */
:root { --lane-tabbar-h: 52px; --section-sticky-h: 96px; --scope-bar-h: 0px; --brand-header-h: 77px; --hero-h: 0px; --mode-sticky-h: 0px; }
/* The app frame NEVER scrolls sideways (Mark 2026-07-16: sidebar + browse
rail + top bar must ALWAYS stay pinned). overflow-x: clip kills horizontal
viewport scroll WITHOUT creating a scroll container — overflow-x: hidden
here would silently break every position:sticky descendant. Anything wider
than the page must own its scroll (.wide-table-scroll, .platform-table-scroll,
overflow-x-auto wrappers). */
html { overflow-x: clip; }
/* No elastic bounce (Mark 2026-07-23 recording): macOS rubber-band drags the
WHOLE document — pinned bars, sidebar, hero all lurch while the fixed
.header-divider-line stays put and slices across the moving content.
Killing overscroll on the root stops the page ever visually moving at its
scroll boundaries; inner scrollers keep their own contained behavior. */
html, body { overscroll-behavior-y: none; }
/* Lane tab bar = the app header strip (2026-07-15, Mark): full-bleed outside
, flush against the sidebar, min-height mirrors the measured sidebar
.brand-header (+1px divider) so the tabs sit vertically centered on the
logo and the bottom hairline continues the sidebar's divider line. */
/* Same glass recipe as the sidebar (Mark 2026-07-16: "header and sidebar is
1") — identical background + blur so the logo block and the tab bar read
as one continuous header piece. */
.lane-tabbar-sticky { position: sticky; top: 0; z-index: 40;
/* OPAQUE twin of the sidebar's glass (white 70% composited over the page
bg): identical color so header+sidebar stay "1", but table rows can
never ghost through while scrolling (Mark's recording, 2026-07-16 —
translucent glass + content scrolling beneath read as a glitch). */
background: color-mix(in srgb, #fff 70%, var(--ctp-base));
min-height: var(--brand-header-h); align-content: center;
padding: 6px 16px 6px 14px;
box-shadow: 0 8px 12px -12px rgba(0,0,0,.35); }
/* THE header divider — one fixed full-width line under the logo/tab-bar row
(a single element can't misalign with itself; replaced the two-segment
sidebar+bar lines that kept drifting, Mark 2026-07-16). */
.header-divider-line { position: fixed; left: 0; right: 0; z-index: 51; height: 1px; /* above the z-50 sidebar — it must paint across it */
top: calc(var(--brand-header-h, 77px) - 1px);
background: linear-gradient(90deg, var(--ctp-blue), var(--ctp-mauve) var(--nav-w, 270px), var(--ctp-surface1) 60%); }
@media (max-width: 768px) { .header-divider-line { display: none; } }
/* Apron: the hero pins 24px below the bar (Mark 2026-07-16: "always this
spacing") — this opaque strip fills that gap so the table never shows
through the slit while scrolling. */
.lane-tabbar-sticky::after { content: ''; position: absolute; left: 0; right: 0;
top: 100%; height: 24px; background: var(--ctp-base); }
/* Universal header search — "gradient hairline" (Mark 2026-07-16): the header
divider's blue→lavender gradient worn as the pill's border. Two stacked
gradients: opaque fill clipped to padding-box, gradient clipped to
border-box, so the transparent border reveals only the gradient.
Rest = quiet 1px hairline, NO shadow (matches the site pill's weight —
Mark 2026-07-16: it read as permanently focused); glow only on focus. */
.uni-search { height: 36px;
background: linear-gradient(var(--ctp-surface0), var(--ctp-surface0)) padding-box,
linear-gradient(90deg, rgb(var(--ctp-blue-rgb) / .55), rgb(var(--ctp-lavender-rgb) / .55)) border-box;
border: 1px solid transparent; border-radius: 999px;
transition: box-shadow .15s, background .15s; }
.uni-search:focus-within {
background: linear-gradient(var(--ctp-surface0), var(--ctp-surface0)) padding-box,
linear-gradient(90deg, var(--ctp-blue), var(--ctp-lavender)) border-box;
box-shadow: 0 0 0 3px rgb(var(--ctp-lavender-rgb) / .18), 0 2px 6px rgb(var(--ctp-lavender-rgb) / .18); }
.uni-search-ico { color: var(--ctp-lavender); }
.uni-kbd { display: inline-flex; align-items: center; flex-shrink: 0;
font-size: 10px; font-weight: 700; color: var(--ctp-overlay1);
background: var(--ctp-mantle); border: 1px solid var(--ctp-surface1);
border-bottom-width: 2px; border-radius: 5px; padding: 2px 6px; }
/* +12px per preceding row = the space-y-3 gaps, which the measured heights
don't include — without them the pinned rows overlap (Mark: "fix the
spacing… they looked bad before too"). */
.section-sticky { position: sticky; top: calc(var(--lane-tabbar-h) + var(--hero-h) + 12px); z-index: 30; background: var(--ctp-base); box-shadow: 0 10px 14px -14px rgba(0,0,0,.3); }
/* -b offset uses the MEASURED section-sticky height (app.js publishes
--section-sticky-h) — the Explorer header wraps to two rows on narrow
windows, so a hardcoded 96px would slide this bar under the header. */
.section-sticky-b { position: sticky; top: calc(var(--lane-tabbar-h) + var(--hero-h) + var(--section-sticky-h)); z-index: 29; background: var(--ctp-base); }
/* Explorer main-table chrome stack (2026-07-15): toolbar (.section-sticky) →
VIEWING scope bar → Table|Map + Mode row, each pinned under the last with
MEASURED heights (app.js publishes --scope-bar-h; 0 when no scope chips).
z order descends so toolbar dropdowns overlay the bars below them. */
.scope-sticky { position: sticky; top: calc(var(--lane-tabbar-h) + var(--hero-h) + var(--section-sticky-h) + 24px); z-index: 28; background: var(--ctp-base); }
/* "Topic not found · ClickUp decisions" card (2026-08-04, Mark: "fix the spacing
between these 2 and make this sticky pls till they are fixed ie decided").
Spacing: the card is a child of a .space-y-3 column, and Tailwind's
`.space-y-3 > :not([hidden]) ~ :not([hidden])` is a 3-class selector, so a
plain .mt-3 utility LOSES to it and the card kept sitting flush against the
mode row. Hence !important here — it is beating a utility, not a hand rule.
Sticky: it pins directly under the mode row, so it stays on screen while you
scroll the table and only leaves when the list empties (the card is rendered
v-if on v2TopicNotFound.length, so "till they are decided" needs no extra
state — deciding a task drops it from the overlay payload).
z-index 14 is deliberately BELOW the sticky table header (tr.ost-head-sticky
> th is 15) and above the table rows. Any residual page scroll slides the
table up under this card, and when the two meet exactly one can win: the
column header has to, because you read every row against it, whereas losing
10-20px off this card's bottom edge costs nothing. Getting this backwards is
what hid the header entirely. */
/* FROZEN leading columns (2026-08-04, Mark's screen recording: scrolling the
table sideways left "rows of numbers and tags with no idea which topic each
is" — the checkbox AND the topic name both scrolled away, so the new select
column was useless exactly when you needed it). Checkbox + Topic now pin to
the left edge while the rest of the columns scroll under them.
Opaque background is mandatory: without it the scrolling cells show straight
through the pinned ones. The row-STATE tint is re-applied as a background
IMAGE layer on top of that opaque base, because the tints live on the
as
semi-transparent !important colours and a sticky
cannot inherit them. */
.v2-freeze { position: sticky; z-index: 12; background-color: var(--ctp-base); }
/* `left` is an INLINE style now, summed from the live column widths
(v2ColFreezeLeft). The old .v2-freeze-sel/.v2-freeze-topic pair hard-coded
left:0 and left:34px, so resizing or hiding the checkbox column parked Topic
in the wrong place — and only those two columns could ever be frozen. The
boundary is a user setting (the pin in the Columns panel) as of 2026-08-04. */
/* The seam: the last frozen column shows where the scroll starts. */
.v2-freeze-edge { box-shadow: 1px 0 0 0 var(--ctp-surface1), 6px 0 8px -6px rgb(0 0 0 / .18); }
/* Pin in the Columns panel — quiet until it means something. */
.v2-freeze-pin { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
border-radius: 4px; color: var(--ctp-overlay0); flex-shrink: 0; transition: color .12s, background-color .12s; }
.v2-freeze-pin svg { width: 12px; height: 12px; }
.v2-freeze-pin:hover { color: var(--ctp-text); background-color: rgb(var(--ctp-lavender-rgb) / .12); }
.v2-freeze-pin-on { color: var(--ctp-lavender); }
.v2-freeze-pin-edge { color: var(--ctp-lavender); background-color: rgb(var(--ctp-lavender-rgb) / .16); }
tr.ost-head-sticky > th.v2-freeze { z-index: 18; background-color: color-mix(in oklab, var(--ctp-surface0) 40%, var(--ctp-base)); }
/* Frozen cells must MIRROR every row background state (Mark's 2nd recording:
hovering a row highlighted it from STATUS rightwards while the pinned checkbox
and Topic cells stayed white — the highlight visibly stopped at the freeze).
Cause: the row tints live on the
as SEMI-TRANSPARENT colours, and a
pinned cell needs an OPAQUE background or the scrolling cells show through it,
so it cannot simply inherit them. Each state is therefore re-declared as the
same mix over an opaque base.
ADD NEW ROW STATES HERE TOO or they will stop at the frozen columns. */
tr.ost-kw-toggle:hover > td.v2-freeze { background-color: color-mix(in srgb, var(--ctp-lavender) 13%, var(--ctp-base)); }
tr.ost-kw-open > td.v2-freeze { background-color: color-mix(in srgb, var(--ctp-lavender) 7%, var(--ctp-base)); }
tr.ost-row-written > td.v2-freeze { background-color: color-mix(in oklab, var(--ctp-green) 10%, var(--ctp-base)); }
tr.ost-row-written:hover > td.v2-freeze { background-color: color-mix(in oklab, var(--ctp-green) 16%, var(--ctp-base)); }
tr.ost-row-planned:hover > td.v2-freeze { background-color: color-mix(in oklab, var(--ctp-surface0) 40%, var(--ctp-base)); }
tr.ost-focus-row > td.v2-freeze { background-color: color-mix(in srgb, rgb(249 226 175) 12%, var(--ctp-base)); }
.notfound-sticky { position: sticky;
/* +10px: once BOTH this card and the mode row are pinned, their pinned
positions come from `top`, not from margins — margin-top produced a gap of
exactly 0 because the two offsets were adjacent. The gap has to live here. */
top: calc(var(--lane-tabbar-h) + var(--hero-h) + var(--section-sticky-h) + var(--scope-bar-h) + 36px + var(--mode-sticky-h) + 10px);
z-index: 14;
margin-top: 10px !important; margin-bottom: 10px !important;
background: color-mix(in oklab, var(--ctp-red) 5%, var(--ctp-base));
box-shadow: 0 8px 12px -10px rgb(0 0 0 / .35); }
.mode-sticky { position: sticky; top: calc(var(--lane-tabbar-h) + var(--hero-h) + var(--section-sticky-h) + var(--scope-bar-h) + 36px); z-index: 27; background: var(--ctp-base); padding: 6px 0; margin-top: -6px; }
/* NO --hero-h here: the browse rail sits BESIDE the hero (own column), so
adding the hero height displaces the rail ~200px down even at scroll 0
(sticky clamps to `top` immediately) — the "giant gap above BROWSE
OPPORTUNITIES" bug, 2026-07-16. */
/* -48px, not -24px (2026-08-04): the 24px accounted for .main-content's TOP
padding but not its equal bottom padding, so the rail ended exactly ON the
viewport edge and the page stayed scrollable. A scrollable page is what let
the table slide under the sticky Topic-not-found card and hide the column
header behind it. The geo list inside already scrolls on its own, so the rail
losing 24px costs nothing. */
.rail-sticky-panel { position: sticky; top: calc(var(--lane-tabbar-h) + 8px); max-height: calc(100vh - var(--lane-tabbar-h) - 48px); overflow-y: auto; overscroll-behavior: contain; }
/* Rail head level with the toolbar across the gap (2026-08-04, Mark: "make them
start on the same line and centred to eachother"). Both columns are flex
siblings, so they already START level — an 11px label just sits near the TOP of
its line while the toolbar centres a 36px control row, leaving the heading
reading ~12px high. Giving the heading the same 36px box and centring in it puts
the two centres within a pixel (measured: 87.4 vs 88.0). The card's own 16px top
padding is deliberately KEPT — zeroing it overshot the other way by 15.6px,
because the toolbar's -my-1.5 already pulls its border box up 6px. The drawer
inherits this happily: on a phone the rail is an overlay with nothing to line
up against, and a 36px header there is just a normal card header. */
.rail-head-row { min-height: 36px; display: flex; align-items: center; }
@media (max-width: 768px) {
.lane-tabbar-sticky, .section-sticky, .section-sticky-b, .scope-sticky, .mode-sticky { position: static; box-shadow: none; }
.rail-sticky-panel { position: static; max-height: none; overflow: visible; }
}
/* Pinned table column headers — page-level leaderboards keep their column
labels visible under the lane tab bar. Requires the table's wrapper NOT to
be a scroll container (xl:overflow-x-visible on the two wide ones). */
.thead-sticky { position: sticky; top: calc(var(--lane-tabbar-h) + var(--hero-h)); z-index: 20; background: var(--ctp-surface0); }
@media (max-width: 768px) { .thead-sticky { position: static; } }
/* SERP Intel keywords card: clip its rounded corners WITHOUT overflow:hidden —
a hidden ancestor becomes the thead's scrollport, which breaks .thead-sticky
into the floating mid-table header (the pre-redesign SERP Intel bug). */
.serp-card-clip { overflow: clip; }
/* Seasonal section chrome — the fixtures panel header + its column row pin
under the Explorer toolbar while you scroll THROUGH that section (sticky
releases once the section passes); each event card's header does the same
below the compact toolbar. Offsets stack measured heights (app.js):
--section-sticky-h (Explorer header), --fixtures-head-h (fixtures title
bar), --section-sticky-b-h (compact toolbar). Their containers must stay
overflow-visible — an overflow-hidden ancestor disables position:sticky. */
.fixtures-head-sticky { position: sticky; top: calc(var(--lane-tabbar-h) + var(--hero-h) + var(--section-sticky-h)); z-index: 24;
background: linear-gradient(rgb(var(--ctp-surface0-rgb) / 0.4), rgb(var(--ctp-surface0-rgb) / 0.4)), var(--ctp-base); }
.fixtures-thead-sticky { position: sticky; top: calc(var(--lane-tabbar-h) + var(--hero-h) + var(--section-sticky-h) + var(--fixtures-head-h, 36px)); z-index: 23; background: var(--ctp-base); }
/* Tint rides in --evtint (inline style per event status) composited over the
opaque base — a translucent tailwind bg-* here would go see-through the
moment rows scroll beneath the pinned header. */
.event-head-sticky { position: sticky; top: calc(var(--lane-tabbar-h) + var(--hero-h) + var(--section-sticky-h) + var(--section-sticky-b-h, 34px)); z-index: 22;
background: linear-gradient(var(--evtint, transparent), var(--evtint, transparent)), var(--ctp-base); }
@media (max-width: 768px) {
.fixtures-head-sticky, .fixtures-thead-sticky, .event-head-sticky { position: static; }
}
/* ── Tab hero banners (Option B: gradient hero, Mark picked 2026-07-09) ──
Wrap a tab's title row in .tab-hero and set the section hue inline via
--hero-ac. Watermark svg (.tab-hero-wm) must stay the FIRST child; every
other child is lifted above it so the oversized icon never sits on text. */
.tab-hero { position: sticky; top: calc(var(--lane-tabbar-h) + 24px); z-index: 35; overflow: hidden; border-radius: 12px;
border: 1px solid var(--ctp-surface1); padding: 12px 16px;
background: linear-gradient(100deg,
color-mix(in oklab, var(--hero-ac, var(--ctp-teal)) 15%, var(--ctp-surface0)) 0%,
color-mix(in oklab, var(--hero-ac, var(--ctp-teal)) 4%, var(--ctp-surface0)) 55%,
var(--ctp-surface0) 100%); }
.tab-hero > :not(.tab-hero-wm):not(.v2-flag-backdrop):not(.v2-flag-strip) { position: relative; z-index: 1; }
/* Uniform banner sizing (Mark 2026-07-19): every .tab-hero reads the same —
a min-height floor, content vertically centered, and the description clamped
so a long blurb can't balloon the banner past its neighbours. Two markup
families coexist: heroes with `flex` set directly on .tab-hero (content +
action side by side) and plain-block heroes (an inner flex row). */
.tab-hero { min-height: 104px; }
/* Opt-out for the Explorer banner only (2026-08-04, Mark: "push Topics Explorer
up"). It lost its eyebrow and its stat trio shrank, so the 104px floor was
padding empty air. Every OTHER hero keeps the uniform height. */
.tab-hero--slim { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
/* Bare hero = JUST the breadcrumb line (2026-08-04, Mark: "we dont need these
green banners anymore, we just need the breadcrumb"). Drops the box, not the
content: no gradient, no border, no rounding, and the decorative watermark /
flag backdrop go with it since they only ever existed to fill the banner.
It stays STICKY, so it keeps an OPAQUE page-coloured background — a
transparent sticky row lets table rows scroll through the breadcrumb, which
is the exact ghosting the header bar was fixed for on 2026-07-16.
Explorer only for now; every other tab keeps its banner. */
.tab-hero--bare { border: 0; border-radius: 0; padding: 6px 2px;
background: var(--ctp-base); min-height: 0; }
.tab-hero--bare .tab-hero-wm,
.tab-hero--bare .v2-flag-backdrop,
.tab-hero--bare .v2-flag-strip,
.tab-hero--bare .tab-hero-ghost { display: none; }
.tab-hero:not(.flex) { display: flex; flex-direction: column; justify-content: center; }
.tab-hero.flex { align-items: center; }
.tab-hero p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Multi-market scope: a fading row of the selected countries' flags. */
.v2-flag-strip { position: absolute; right: 16px; top: 0; height: 100%; display: flex; align-items: center; gap: 10px;
opacity: .30; pointer-events: none;
-webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%); mask-image: linear-gradient(to left, #000 55%, transparent 100%); }
.v2-flag-strip img { height: 34px; width: auto; border-radius: 3px; object-fit: cover; }
.tab-hero-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--hero-ac, var(--ctp-teal)); margin-bottom: 3px; }
.tab-hero-wm { position: absolute; right: -16px; bottom: -24px; width: 120px; height: 120px;
opacity: .09; pointer-events: none; }
/* Hero "what is this page" icon (2026-08-04) — the description moved out of the
banner and behind a hint. Quiet by default so it never competes with the
title; 24px tap target on touch, which is why the padding is on the span and
not the svg. */
.hero-info { display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; margin-left: 1px; flex-shrink: 0; cursor: help;
color: var(--ctp-overlay0); opacity: .75; transition: opacity .15s, color .15s; }
.hero-info svg { width: 15px; height: 15px; }
.hero-info:hover { opacity: 1; color: var(--hero-ac, var(--ctp-teal)); }
@media (hover: none) { .hero-info { width: 26px; height: 26px; opacity: .9; } }
/* Hero breadcrumbs (2026-08-04) — the trail replaces the bare tab title. The
LEAF inherits the h2's size/weight/accent so the hero reads exactly as loud as
before; parents step down to a quiet 13px so they recede into chrome. Phones
drop the root crumb (and the separator that follows it) rather than wrapping a
four-level trail onto two lines. */
/* CENTRED, not baseline-aligned (Mark 2026-08-04: "allign pls"). On a shared
baseline the 13px parents hang off the bottom of the 20px leaf and read as
dropped; optical centring is what makes the trail sit as one line. */
.hero-crumbs { display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex-wrap: wrap; }
.hero-crumb { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ctp-overlay1);
background: none; border: 0; padding: 0; font-family: inherit; letter-spacing: 0;
transition: color .15s; }
button.hero-crumb { cursor: pointer; }
button.hero-crumb:hover { color: var(--hero-ac, var(--ctp-teal)); text-decoration: underline;
text-underline-offset: 2px; }
.hero-crumb-sep { font-size: 13px; font-weight: 400; color: var(--ctp-overlay0); }
.hero-crumb-cur { min-width: 0; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 8px; }
/* Bigger than the standard 20x14 .geo-flag because it sits beside a 20px title. */
.hero-crumb-flag { width: 26px; height: 18px; flex-shrink: 0; }
@media (max-width: 640px) {
.hero-crumb-root { display: none; }
.hero-crumb-flag { width: 21px; height: 15px; }
}
/* One-line Explorer chrome (2026-08-04, Mark's mock) — the crumb trail shares the
filter row instead of owning a banner row above it, so the leaf can't keep the
old h2's 20px: at that size the trail alone pushed the filters into wrapping.
14px leaf / 13px root sits level with the h-8 filter pills. The root is the
teal one here (the leaf is the plain-text end of the trail) which inverts the
banner version on purpose: on a busy row the ACCENT belongs on the thing you
can click, and the leaf is already carried by its flag. */
.v2-crumbline { flex-shrink: 0; }
.v2-crumbline .hero-crumbs { flex-wrap: nowrap; }
.v2-crumbline .hero-crumb { font-size: 13px; color: var(--ctp-teal); font-weight: 700; }
.v2-crumbline button.hero-crumb:hover { color: var(--ctp-sapphire); }
.v2-crumbline .hero-crumb-sep { color: var(--ctp-overlay0); font-size: 14px; }
.v2-crumb-leaf { font-size: 14px; font-weight: 700; color: var(--ctp-text); white-space: nowrap; }
.v2-crumbline .hero-crumb-flag { width: 22px; height: 15px; }
/* Content Plan wears the same trail in the tab's own GREEN (Mark 2026-08-04:
"make the breadcrumb for this like on topic explorer"). Its root is plain text,
not a link — there is nothing above the page to climb to — so it takes the
accent without a hover state. The leaf carries the site favicon, the job the
flag does on the Explorer trail. */
.scp-crumbline { --hero-ac: var(--ctp-green); }
.scp-crumbline .hero-crumb { color: var(--ctp-green); }
.hero-crumb-favicon { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0;
object-fit: contain; }
/* When the filter strip absorbs a squeeze it must move WHOLE controls to its
second internal line, never break one up: unconstrained, the P0-P5 block split
(P2-P4 on one line, P5 alone on the next) and "Saved to plan" stacked into three
words. Both are legible-looking bugs, so they went unnoticed until the crumb
trail and Add Topic joined the row and made the squeeze routine. */
.section-sticky [data-tour="filters"] .v2-pf { flex-wrap: nowrap; }
.section-sticky [data-tour="filters"] button { white-space: nowrap; }
/* Vertical-mode badge — the banner's eyebrow ("Sports mode") had a row to itself;
inline it has to be a chip or it reads as another crumb. */
.v2-crumb-mode { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--ctp-teal); background: rgb(var(--ctp-teal-rgb) / .12); border-radius: 4px;
padding: 2px 5px; flex-shrink: 0; }
/* Under ~1200px the row can't seat the words "Topics Explorer" as well as the
filters, the chips and Add Topic, so the root crumb goes — but ONLY when a leaf
is there to say where you are. Without that `:has` guard a multi-market or niche
scope (which has no leaf, its scope is on the Viewing chips) collapsed the whole
trail to a lone ⓘ floating on the row. The second rule undoes the blanket 640px
`.hero-crumb-root` hide above for the same case. */
@media (max-width: 1200px) {
.v2-crumbline .hero-crumbs:has(.v2-crumb-leaf) .hero-crumb-root { display: none; }
/* Content Plan's toolbar is nowhere near as crowded as the Explorer's, and
dropping its root leaves a bare domain with no page name attached — so it
keeps "Content Plan" all the way down to the phone breakpoint. */
.scp-crumbline .hero-crumbs:has(.v2-crumb-leaf) .hero-crumb-root { display: inline-block; }
}
@media (max-width: 640px) {
.v2-crumbline .hero-crumbs:not(:has(.v2-crumb-leaf)) .hero-crumb-root { display: inline-block; }
}
@media (max-width: 768px) {
/* The filter strip owns the phone line, so the trail keeps only its leaf. */
.v2-crumbline { gap: 6px !important; }
.v2-crumbline > svg { display: none; }
.v2-crumb-leaf { font-size: 13px; }
}
/* ── oa-toolbar — the house ONE-LINE control bar ────────────────────────────
Mark 2026-08-04: "should always be in line no matter which sidebar is
selected/resize of it. You must make it responsive and amend the
fonts/buttons", and "this is something you should take into account for the
whole site too".
What it replaces: the row only stopped wrapping when Viewing chips happened to
be present (`.section-sticky:has(> .v2-scope-inline)`), so with no market
selected Add Topic dropped onto a second line. A toolbar's line count must not
depend on whether an optional chip is there. Width alone was also being fought
one hardcoded pixel at a time (search 112px → 144px at 1600px), which fixes one
viewport and breaks the next.
Three layers, in the order things give way:
1. The row NEVER wraps on desktop. One line is the contract.
2. Controls SCALE — heights, font sizes, padding, the search field and the
crumb text all clamp() with the viewport, so 320px of sidebar plus the
Niches-mode Geos dropdown still fits without wrapping.
3. If a genuinely narrow window still runs out, the FILTER GROUP scrolls
sideways (the same trick the phone strip uses) rather than overflowing the
row or shoving the primary action off-screen. The page identity on the left
and the CTA on the right never move.
Reusable on ANY tab: put `oa-toolbar` on the `.section-sticky` row, then
`oa-tb-btn` (text control) / `oa-tb-icon` (square icon) / `oa-tb-cta` (the one
primary action) on its children, and give the scrollable middle group
`data-tour="filters"`. Listed on /brand. Phones (<769px) keep their own
scrolling-strip rules below, untouched. */
.v2-filter-search { width: 112px; }
.oa-toolbar {
--tb-h: clamp(26px, 0.85vw + 15px, 32px);
--tb-fs: clamp(10.5px, 0.2vw + 8.5px, 12px);
--tb-px: clamp(6px, 0.45vw + 1px, 12px);
--tb-gap: clamp(3px, 0.28vw, 6px);
}
@media (min-width: 769px) {
.oa-toolbar { flex-wrap: nowrap; }
.oa-toolbar > [data-tour="filters"] {
flex-wrap: nowrap; min-width: 0; gap: var(--tb-gap);
overflow-x: auto; scrollbar-width: none;
}
.oa-toolbar > [data-tour="filters"]::-webkit-scrollbar { display: none; }
.oa-toolbar > [data-tour="filters"] > * { flex-shrink: 0; }
.oa-toolbar .oa-tb-btn { height: var(--tb-h); padding-inline: var(--tb-px); font-size: var(--tb-fs); }
.oa-toolbar .oa-tb-icon { height: var(--tb-h); width: var(--tb-h); }
/* The CTA stays a notch taller than the filters — it is the one create action
on the row, not another filter. */
.oa-toolbar .oa-tb-cta {
height: calc(var(--tb-h) + 4px);
padding-inline: clamp(9px, 0.6vw + 3px, 14px);
font-size: clamp(11.5px, 0.2vw + 9.5px, 14px);
}
.oa-toolbar .v2-pf-btn {
height: var(--tb-h); min-height: 0; font-size: var(--tb-fs);
min-width: clamp(27px, 1.7vw + 6px, 38px);
padding-inline: clamp(4px, 0.35vw + 1px, 10px);
}
.oa-toolbar .v2-filter-search {
height: var(--tb-h); font-size: var(--tb-fs);
width: clamp(76px, 6vw + 10px, 144px);
}
.oa-toolbar .v2-crumb-leaf { font-size: clamp(12px, 0.2vw + 10px, 14px); }
.oa-toolbar .hero-crumb { font-size: clamp(11px, 0.18vw + 9.3px, 13px); }
/* Chips hold their size — the scrollable filter group is the pressure valve. */
.oa-toolbar .v2-scope-inline { flex-shrink: 0; align-self: center; }
.oa-toolbar .v2-scope-inline button {
font-size: clamp(10px, 0.15vw + 8.6px, 11px);
padding-inline: clamp(6px, 0.35vw + 2px, 10px);
}
}
/* Heroes pin under the lane tab bar on every page (2026-07-15, Mark: "banners
+ top parts always sticky"); app.js measures the visible hero into --hero-h
so the toolbar/scope/mode/thead tiers stack below it. Static on phones like
the rest of the sticky chrome (this reset must FOLLOW the base rule —
source order, the earlier 768px block would lose to it). */
@media (max-width: 768px) { .tab-hero { position: static; } }
@media (max-width: 640px) {
.tab-hero { padding: 13px 14px; }
.tab-hero-wm { width: 88px; height: 88px; right: -12px; bottom: -18px; }
}
/* Info tooltip on the geo sidebar "All" row (select-all states/regions).
Custom CSS rather than Tailwind utilities: tailwind.css is precompiled and
new variant classes (hover-reveal) would silently not exist at runtime. */
.geo-all-tip { position: relative; }
.geo-all-tip .geo-all-tip-box {
display: none; position: absolute; left: -64px; top: calc(100% + 8px); z-index: 60;
width: 190px; padding: 9px 11px;
background: var(--ctp-mantle); color: var(--ctp-subtext1);
border: 1px solid var(--ctp-surface1); border-radius: 10px;
font-size: 11px; font-weight: 500; line-height: 1.5;
text-align: left; white-space: normal; text-transform: none; letter-spacing: normal;
box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
pointer-events: none;
}
.geo-all-tip:hover .geo-all-tip-box { display: block; }
/* Faint mode word in the Topics Explorer hero (Sports / Casino modes).
Sits behind the watermark icon; --hero-ac drives the tint. */
.tab-hero-ghost {
font-family: var(--font-display, inherit); font-weight: 800;
font-size: 34px; letter-spacing: .2em; line-height: 1; white-space: nowrap;
background: linear-gradient(100deg, var(--hero-ac) 0%, #9fd4d6 55%, var(--hero-ac) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
opacity: .34; pointer-events: none; user-select: none;
border-bottom: 3px solid color-mix(in srgb, var(--hero-ac) 30%, transparent);
padding-bottom: 4px;
}
@media (max-width: 640px) { .tab-hero-ghost { display: none; } }
/* Column gridlines on EVERY table (Mark 2026-07-16: "table lines on ALL
tables on oasis"). Soft alpha so they read as structure, not a cage;
.pp-fixed's stronger spreadsheet lines win on specificity. */
table th, table td { border-right: 1px solid rgb(var(--ctp-surface1-rgb) / 0.45); }
table th:last-child, table td:last-child { border-right: none; }
/* Platform pages table — contained scroll. position:sticky cannot escape an
overflow-x ancestor (it silently stops sticking and rows slid under the
translucent lane bar — Mark's "can't see row #1", Jul 15). Giving the
wrapper its own vertical scrollport makes the thead pin for real. */
/* Fallback for pre-JS paint — syncStickyChrome measures the real leftover
viewport into a per-element --wide-table-h (same treatment as
.wide-table-scroll; the static guess double-scrolled under tall chrome). */
.platform-table-scroll { max-height: var(--wide-table-h, calc(100vh - 140px)); }
.platform-table-scroll .thead-sticky { top: 0; }
/* Competitors SoV leaderboard — contained scroll (2026-07-16, Mark: NOTHING
on the page moves, "the scroll only happens on the table"). app.js
measures the wrapper's natural viewport offset into --wide-table-h so the
table exactly fills the leftover screen — the page then has nothing to
scroll, and hero/search/chips hold still. Fallback keeps it sane pre-JS. */
.wide-table-scroll { max-height: var(--wide-table-h, calc(100vh - var(--lane-tabbar-h) - var(--hero-h) - var(--section-sticky-h) - 40px)); }
.wide-table-scroll .thead-sticky { top: 0; }
/* Company/site comparisons stay dense; prose belongs on hover or in details.
A contained scrollport prevents narrow screens from wrapping every cell. */
.co-compact-scroll {
width: 100%; max-width: 100%; min-width: 0;
overflow: auto;
max-height: var(--wide-table-h, 70vh);
}
.co-compact-scroll > table.co-compact-table {
display: table; width: max-content; min-width: 100%; max-width: none;
table-layout: auto; border-collapse: collapse; overflow: visible;
}
.co-compact-table .thead-sticky { top: 0; }
.co-compact-table > thead > tr,
.co-compact-table > tbody > tr { height: 36px; }
.co-compact-table > thead > tr > th,
.co-compact-table > tbody > tr > td {
box-sizing: border-box; height: 36px; padding: 0 10px;
line-height: 18px; white-space: nowrap; vertical-align: middle;
overflow: hidden; text-overflow: ellipsis; max-width: 360px;
}
.co-compact-table > thead > tr > th { font-size: 10px; }
.co-compact-table > tbody > tr > td { font-size: 12px; }
.co-compact-table > tbody > tr > td > * {
max-height: 24px; white-space: nowrap; vertical-align: middle;
}
.co-compact-table td .block { display: inline !important; }
.co-compact-table td .flex-col { flex-direction: row !important; gap: 4px; align-items: center !important; }
.co-compact-table td .flex-wrap { flex-wrap: nowrap !important; }
.co-compact-table td .break-all { word-break: normal; }
.co-compact-table td .inline-flex { flex-shrink: 0; }
.co-compact-table td > .inline-flex { max-width: 340px; overflow: hidden; }
.co-compact-table .co-cell-detail { display: none !important; }
/* Wide-table scroll affordance (2026-07-20, Mark: wide tables "look cut
off", zero hint that more columns exist). .pt-clip wraps each contained
scroller; while the table can still travel right (.has-more-right, toggled
by syncMoreRight in app.js) a right-edge fade + "more →" pill signal the
hidden columns, and the scrollbar is always painted instead of macOS's
hide-until-hover overlay. Desktop only — phones h-scroll naturally and an
overlay would cover content. */
@media (min-width: 769px) {
.pt-clip { position: relative; }
.pt-clip::after { content: ''; position: absolute; top: 0; right: 0; bottom: 12px; width: 56px;
pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 21;
background: linear-gradient(90deg, transparent, var(--ctp-surface0)); }
.pt-clip.has-more-right::after { opacity: 1; }
.pt-more-pill { display: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
z-index: 22; pointer-events: none; align-items: center; padding: 4px 10px; border-radius: 999px;
font-size: 10.5px; font-weight: 700; color: var(--ctp-base); white-space: nowrap;
background: linear-gradient(90deg, var(--ctp-blue), var(--ctp-lavender));
box-shadow: 0 2px 8px rgb(var(--ctp-lavender-rgb) / .4); }
.pt-clip.has-more-right .pt-more-pill { display: inline-flex; }
.wide-table-scroll::-webkit-scrollbar, .platform-table-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
.wide-table-scroll::-webkit-scrollbar-track, .platform-table-scroll::-webkit-scrollbar-track { background: var(--ctp-mantle); border-radius: 6px; }
.wide-table-scroll::-webkit-scrollbar-thumb, .platform-table-scroll::-webkit-scrollbar-thumb { background: rgb(var(--ctp-lavender-rgb) / .5); border-radius: 6px; border: 2px solid var(--ctp-mantle); }
.wide-table-scroll::-webkit-scrollbar-thumb:hover, .platform-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--ctp-lavender); }
.wide-table-scroll::-webkit-scrollbar-corner, .platform-table-scroll::-webkit-scrollbar-corner { background: var(--ctp-mantle); }
}
@media (max-width: 768px) { .pt-more-pill { display: none !important; } }
/* Explorer column header row — pins at the top of the contained box.
Sticky lives on the CELLS (Chrome ignores position:sticky on
);
opaque composite bg so rows never ghost through. */
tr.ost-head-sticky > th { position: sticky; top: 0; z-index: 15;
background: linear-gradient(rgb(var(--ctp-surface0-rgb) / 0.55), rgb(var(--ctp-surface0-rgb) / 0.55)), var(--ctp-base); }
/* Platforms pages table — spreadsheet mode. Fixed layout makes the header
width the column width (so the resize grips actually reveal content);
cells clip instead of stretching the row. */
.pp-fixed { table-layout: fixed; }
.pp-fixed td { overflow: hidden; text-overflow: ellipsis; }
.pp-th-resize { position: absolute; right: -4px; top: 0; height: 100%; width: 9px; cursor: col-resize; z-index: 5; }
.pp-th-resize:hover { background: rgb(var(--ctp-sapphire-rgb) / 0.35); }
/* Spreadsheet chrome: vertical gridlines + drag feedback. The insertion line
paints the LEFT edge of the header you're hovering — that's where the
dragged column lands; the dragged column itself dims. */
.pp-fixed th, .pp-fixed td { border-right: 1px solid rgb(var(--ctp-surface1-rgb) / 0.6); }
.pp-fixed th:last-child, .pp-fixed td:last-child { border-right: none; }
.pp-dragging { opacity: 0.35; }
th.pp-drop-target { box-shadow: inset 3px 0 0 var(--ctp-sapphire); background: rgb(var(--ctp-sapphire-rgb) / 0.08); }
div.pp-drop-target { box-shadow: inset 0 2px 0 var(--ctp-sapphire); }
/* Header info boxes — hover a column header for a styled explainer. Replaces
the native title tooltips (which can't be styled). Right-aligned for the
last few columns so the box never overflows the scrollport. */
.pp-th-tip { display: none; position: absolute; left: 0; top: 100%; margin-top: 6px; width: 250px; z-index: 40;
background: var(--ctp-mantle); border: 1px solid rgb(var(--ctp-sapphire-rgb) / 0.35); border-radius: 8px;
padding: 8px 10px; color: var(--ctp-subtext0); font-size: 11px; line-height: 1.5; font-weight: 400;
text-transform: none; letter-spacing: normal; white-space: normal; text-align: left;
box-shadow: 0 10px 28px rgb(0 0 0 / 0.28); pointer-events: none; }
.pp-fixed thead th:hover .pp-th-tip { display: block; }
.pp-fixed thead th:nth-last-child(-n+5) .pp-th-tip { left: auto; right: 0; }
.pp-th-tip b { display: block; color: var(--ctp-text); margin-bottom: 3px; font-size: 12px; }
.pp-th-tip i { display: block; margin-top: 6px; color: var(--ctp-overlay1); font-style: normal; font-size: 10px; border-top: 1px solid rgb(var(--ctp-surface1-rgb) / 0.6); padding-top: 5px; }
/* Generic styled info tip — any control with class pp-tip-host + data-tip
shows the same explainer box as the table headers on hover. pp-tip-right
anchors it to the right edge (controls near the viewport edge). */
.pp-tip-host { position: relative; }
.pp-tip-host:hover::after { content: attr(data-oasistip); position: absolute; left: 0; top: 100%; margin-top: 6px; width: 240px; z-index: 60;
background: var(--ctp-mantle); border: 1px solid rgb(var(--ctp-sapphire-rgb) / 0.35); border-radius: 8px;
padding: 8px 10px; color: var(--ctp-subtext0); font-size: 11px; line-height: 1.5; font-weight: 400;
letter-spacing: normal; text-transform: none; white-space: normal; text-align: left;
box-shadow: 0 10px 28px rgb(0 0 0 / 0.28); pointer-events: none; }
.pp-tip-host.pp-tip-right:hover::after { left: auto; right: 0; }
/* ══════════════════════════════════════════════════════════════════════
Explorer "Quiet Grid" revamp (2026-07-18 — Mark's pick: option-1 calm
+ option-2 density). One accent, color only where it means something,
real-table hairlines, actions revealed on the row you're pointing at.
══════════════════════════════════════════════════════════════════════ */
/* Priority badges — red is EARNED: solid on P0, tint on P1, quiet neutrals after. */
.v2-prio-0, .v2-prio-1, .v2-prio-rest { min-width: 44px; height: 20px; justify-content: center; }
.v2-prio-0 { background: var(--ctp-red); color: #fff; }
.v2-prio-1 { background: color-mix(in oklab, var(--ctp-red) 13%, transparent); color: var(--ctp-red); }
.v2-prio-rest { background: color-mix(in oklab, var(--ctp-overlay0) 12%, transparent); color: var(--ctp-overlay1); }
/* Two plan states, distinct colours (Mark, 2026-07-20):
GREEN = written (already published on the framed site) — a soft green wash +
green edge so "done" reads at a glance; AMBER = saved to the plan but not
written yet — a warm edge, no wash. Green is reserved for written. */
.ost-row-written { background: color-mix(in oklab, var(--ctp-green) 10%, transparent) !important; }
.ost-row-written:hover { background: color-mix(in oklab, var(--ctp-green) 16%, transparent) !important; }
.ost-row-written > td:first-child { box-shadow: inset 2.5px 0 0 var(--ctp-green); }
.ost-row-planned,
.ost-row-planned:hover { background: transparent !important; }
.ost-row-planned:hover { background: color-mix(in oklab, var(--ctp-surface0) 40%, transparent) !important; }
.ost-row-planned > td:first-child { box-shadow: inset 2.5px 0 0 var(--ctp-peach); }
/* Column grid — clear vertical rules on headers + body so it reads as a
spreadsheet, not stacked cards (Mark: "more table-y with lines"). */
.ost-head-sticky > th,
.ost-child > td { border-right: 1px solid color-mix(in oklab, var(--ctp-surface1) 70%, transparent); }
.ost-child > td:last-child,
.ost-head-sticky > th:last-child { border-right: none; }
/* Per-row rainbow accent stripe → whisper. */
.ost-child > td:first-child { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 30%, transparent); }
/* Main column: icon + plain text (pill removed in the template). */
.v2-main-cell { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
font-size: 11.5px; font-weight: 600; color: var(--ctp-subtext0); }
.v2-main-both { color: var(--ctp-mauve); }
/* Topic tags inside the table: quiet text, hue kept, chrome dropped.
(Sidebar niche chips keep the pill look — this is table-scoped.) */
.ost-child .tag-chip { min-width: 100px; justify-content: center; padding: 2.5px 8px; font-size: 10px; }
.ost-child .tag-chip.tag-hue-neutral { color: var(--ctp-overlay1); }
/* Translation column: reference info, not a competing voice. */
.v2-translation { color: var(--ctp-overlay1); font-size: 11.5px; font-style: italic; }
/* Modal stat band: labeled cells instead of a loose chip row.
ONE row on desktop (Mark 2026-08-04): the band used to wrap into two rows
(Priority/Geo/Main vol, then TP/Tags/Format/Intent) which read as two
unrelated strips. nowrap + a tighter cell keeps every fact on one line;
if a very long tag list still overruns, the band scrolls sideways instead
of stacking. Phones keep the wrapping band (see the 768px block below). */
.v2-statband { border: 1px solid var(--ctp-surface1); border-radius: 8px;
overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap;
background: color-mix(in oklab, var(--ctp-mantle) 70%, transparent); width: max-content; max-width: 100%; }
/* Topic-detail toolbar — ONE line (2026-08-05, Mark: "this should be all in 1 line").
The chip band and the action buttons share a single row: the band shrinks BELOW its
content (flex-basis 0 beats its own width:max-content) and scrolls sideways instead of
pushing the actions onto a second line — the same contract .oa-toolbar's filter group
has. The scrollbar is hidden so the row keeps one line's height. Anything that can't
read inline (the reader-intent paragraph, merged-in chips) takes its own full line. */
.v2-topicbar-chips { order: 1; flex: 1 1 0; min-width: 0; scrollbar-width: none; }
.v2-topicbar-chips::-webkit-scrollbar { display: none; }
.v2-topicbar-actions { order: 2; margin-left: auto; }
.v2-topicbar-below { order: 3; flex-basis: 100%; }
.v2-statband > .inline-flex { padding: 7px 9px; gap: 5px; border-right: 1px solid var(--ctp-surface0);
align-self: stretch; flex: 0 0 auto; white-space: nowrap; }
.v2-statband > .inline-flex:last-child { border-right: none; }
/* Tags is the only elastic cell: a topic with five tags scrolls INSIDE its own
cell instead of shoving Format and Intent off the end of the band. */
.v2-statband > .inline-flex.flex-wrap { flex: 0 1 auto; flex-wrap: nowrap; min-width: 96px;
overflow-x: auto; overflow-y: hidden; }
/* Keyword-row actions: hidden until the row is hovered (or a popover is open),
neutral ghost buttons — the red lives in the Remove ▾ menu where it's a choice. */
.group\/v2kw .kw-actions { opacity: 0; transition: opacity .12s ease; }
.group\/v2kw:hover .kw-actions,
.kw-actions:focus-within,
.kw-actions:has([class*="z-50"]) { opacity: 1; }
.kw-actions > button,
.kw-actions > span > button { background: transparent !important; border: 1px solid var(--ctp-surface1);
color: var(--ctp-overlay1) !important; }
.kw-actions > button:hover,
.kw-actions > span > button:hover { color: var(--ctp-text) !important; border-color: var(--ctp-surface2);
background: color-mix(in oklab, var(--ctp-surface0) 50%, transparent) !important; }
/* ── Peeko-inspired chrome (2026-07-18, Mark: "take styling/placement/pages ideas
from Peeko"): hero stat trio, count-carrying filter pills, inline TP meters,
plain-English page captions. Warmer hero wash à la Peeko's cream welcome card. ── */
/* Toned down 2026-08-04 (Mark: "make them smaller") — the trio is scope context,
not the headline, so it sits on one tight line instead of shouting. */
.v2-hero-stats { display: flex; gap: 14px; margin-top: 5px; flex-wrap: wrap; align-items: baseline; }
.v2-hero-stat { display: inline-flex; align-items: baseline; gap: 4px; }
.v2-hero-stat b { font-size: 12.5px; font-weight: 750; line-height: 1.15;
color: var(--ctp-text); font-variant-numeric: tabular-nums; }
.v2-hero-stat i { font-style: normal; font-size: 8px; font-weight: 650; letter-spacing: .07em;
text-transform: uppercase; color: var(--ctp-overlay1); }
.v2-tp-meter { display: block; height: 2.5px; width: 54px; margin: 1px auto 0;
border-radius: 2px; background: color-mix(in oklab, var(--ctp-surface1) 60%, transparent);
overflow: hidden; }
.v2-tp-fill { display: block; height: 100%; border-radius: 2px;
background: color-mix(in oklab, var(--ctp-lavender) 75%, var(--ctp-blue)); }
/* ── Priority filter boxes (2026-07-18, Mark's Higgsfield "Option 2" pick):
separate rounded boxes with a small gap, universal HEAT scale — P0 hot red
cooling to P5 gray, All = brand indigo. Solid fill + white text = selected;
unselected stays a quiet outlined box so a multi-pick reads instantly. ── */
.v2-pf { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
/* No counts inside these boxes, ever (Mark 2026-07-30: "remove the numbers to
make the buttons smaller (always)") — the count lives in the hover tooltip,
so min-width only has to hold "All". */
.v2-pf-btn { height: 30px; padding: 0 10px; border-radius: 8px; min-width: 38px; justify-content: center;
border: 1px solid var(--ctp-surface1); background: color-mix(in oklab, var(--ctp-surface0) 40%, transparent);
color: var(--ctp-overlay1); font-weight: 650; font-size: 12px;
display: inline-flex; align-items: center; cursor: pointer;
transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease; }
.v2-pf-btn:hover { color: var(--ctp-text); border-color: var(--ctp-surface2); }
.v2-pf-btn.on { color: #fff; border-color: transparent;
box-shadow: 0 1px 2.5px rgb(0 0 0 / .22); }
.v2-pf-btn.on:hover { color: #fff; filter: brightness(1.06); }
.v2-pf-all.on { background: #5B5BD6; }
.v2-pf-p0.on { background: #D92D20; }
.v2-pf-p1.on { background: #F04E23; }
.v2-pf-p2.on { background: #F59E0B; }
.v2-pf-p3.on { background: #12B76A; }
.v2-pf-p4.on { background: #1E66F5; }
.v2-pf-p5.on { background: #98A2B3; }
/* ── Excel-style columns (2026-07-18): resize handle on every header edge,
drag-to-reorder highlight, and the per-user layout cursor states. ── */
/* GOAT cell (Mark 2026-08-04): "if it is goated it will be marked in colour,
and without would mean it isnt goated". ONE glyph, two states — colour vs
drained — so the column needs no legend and no second symbol. Greyscale
rather than a lighter grey emoji, because the emoji's own colours can't be
restyled with `color`. */
.v2-goat-glyph { width: 16px; height: 16px; display: block; object-fit: contain; }
.v2-goat-on .v2-goat-glyph { filter: none; opacity: 1; }
.v2-goat-off .v2-goat-glyph { filter: grayscale(1); opacity: .38; }
.v2-goat-off:hover .v2-goat-glyph { opacity: .7; }
/* Headers stay on ONE line (Mark 2026-08-04). A wrapped "MAIN KEYWORD VOLUME"
made the whole header row two lines tall for one column's sake; the label
now shortens itself instead (v2ColHeadFor in topics-v2.js). No overflow
clipping here on purpose — it would cut off .v2-col-resizer, which lives
4px outside the cell. */
.v2-col-th { position: relative; white-space: nowrap; }
.v2-col-resizer { position: absolute; top: 0; right: -4px; width: 9px; height: 100%;
cursor: col-resize; z-index: 3; }
.v2-col-resizer::after { content: ""; position: absolute; top: 15%; bottom: 15%; left: 3.5px;
width: 2px; border-radius: 1px; background: transparent; transition: background .12s ease; }
.v2-col-resizer:hover::after { background: var(--ctp-lavender); }
body.v2-col-resizing { cursor: col-resize !important; user-select: none; }
body.v2-col-resizing * { cursor: col-resize !important; }
.v2-col-drop { box-shadow: inset 2.5px 0 0 var(--ctp-lavender); }
/* Nicer star: the SVG breathes inside the same .tl-star hit target. */
.tl-star svg { display: block; }
/* Topic page (in-content, sidebar + header stay) — back bar pins under the lane tabs. */
.v2-topic-page { min-height: 0; }
.v2-topic-back { top: var(--lane-tabbar-h, 0px); }
/* Region flag as a soft BANNER BACKDROP (Mark: "always, so we know in which
region we are") — fades in from the right, banner accent takes the geo hue. */
.v2-flag-backdrop { position: absolute; right: 0; top: 0; height: 100%; width: 44%;
object-fit: cover; opacity: .30; pointer-events: none; user-select: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
mask-image: linear-gradient(90deg, transparent, #000 45%); }
/* Topic page hero — the Explorer banner language per topic: geo-accent gradient,
flag backdrop, eyebrow + display title. Children ride above the flag (same
:not() exclusion lesson as .tab-hero). */
.v2-topic-hero { position: relative; overflow: hidden; border-radius: 12px;
border: 1px solid var(--ctp-surface1); padding: 14px 16px; margin-bottom: 12px;
background: linear-gradient(100deg,
color-mix(in oklab, var(--hero-ac, var(--ctp-teal)) 15%, var(--ctp-surface0)) 0%,
color-mix(in oklab, var(--hero-ac, var(--ctp-teal)) 4%, var(--ctp-surface0)) 55%,
var(--ctp-surface0) 100%); }
.v2-topic-hero > :not(.v2-flag-backdrop) { position: relative; z-index: 1; }
/* Sidebar collapse/expand (2026-07-22, from Mark's luckylatvian recording):
the toggle is now a first-class nav row at the TOP of the nav (replaces the
bottom chevron card). One eased WIDTH transition — not transition-all — so
only the fold animates and nothing else flickers during it. */
.oasis-sidebar.nav-anim { transition: width .28s cubic-bezier(.22,.61,.36,1); }
/* Quiet-until-touched nav (Mark 2026-07-22): the resting nav is NEUTRAL —
icons desaturated, text grey. Hovering an item brings ITS color back
(accent text + soft tint), and the active item KEEPS its color, so the one
lit-up tab is always "you are here". Applies to the sidebar and the lane
tab bar; the phone bottom bar keeps color (no hover on touch).
Every nav item carries a permanent .nav-tab- accent class (sidebar)
or a --tab-accent inline var (lane tabs, from laneTabs[].accent). */
.nav-tab-blue { --tab-accent: var(--ctp-blue); }
.nav-tab-green { --tab-accent: var(--ctp-green); }
.nav-tab-teal { --tab-accent: var(--ctp-teal); }
.nav-tab-rosewater { --tab-accent: var(--ctp-rosewater); }
.nav-tab-sky { --tab-accent: var(--ctp-sky); }
.nav-tab-sapphire { --tab-accent: var(--ctp-sapphire); }
.nav-tab-lavender { --tab-accent: var(--ctp-lavender); }
.nav-tab-yellow { --tab-accent: var(--ctp-yellow); }
.nav-tab-peach { --tab-accent: var(--ctp-peach); }
.nav-tab-mauve { --tab-accent: var(--ctp-mauve); }
.nav-tab-red { --tab-accent: var(--ctp-red); }
.oasis-sidebar .nav-tab { transition: background-color .18s ease, color .18s ease; }
.oasis-sidebar .nav-tab .nav-ico { filter: grayscale(1) opacity(.72); transition: filter .18s ease; }
.oasis-sidebar .nav-tab:hover .nav-ico,
.oasis-sidebar .nav-tab.nav-tab-active .nav-ico { filter: none; }
.oasis-sidebar .nav-tab:hover:not(.nav-tab-active) {
color: var(--tab-accent, var(--ctp-text));
background: color-mix(in srgb, var(--tab-accent, var(--ctp-overlay1)) 10%, transparent); }
/* Active sidebar item = its accent (generalizes the per-color
.nav-tab-active.nav-tab-X rules — rosewater never had one and silently
fell back to blue). */
.oasis-sidebar .nav-tab.nav-tab-active { color: var(--tab-accent, var(--ctp-blue)) !important;
background: color-mix(in srgb, var(--tab-accent, var(--ctp-blue)) 10%, transparent) !important;
border-color: color-mix(in srgb, var(--tab-accent, var(--ctp-blue)) 20%, transparent); }
/* Lane tab bar — same behavior: grey at rest, accent on hover, the active
tab wears its color as a bordered card. Transparent border at rest so
activation never shifts layout. */
.lane-tab { border: 1px solid transparent;
transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.lane-tab:hover:not(.lane-tab-active) {
color: var(--tab-accent, var(--ctp-text));
background: color-mix(in srgb, var(--tab-accent, var(--ctp-overlay1)) 10%, transparent); }
.lane-tab-active { color: var(--tab-accent, var(--ctp-text)); background: var(--ctp-base);
border-color: color-mix(in srgb, var(--tab-accent, var(--ctp-surface1)) 40%, transparent);
box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
/* Fixed singleton info tip (replaces the clippable ::after pp-tips for v2-tip hosts). */
#oasis-tip { position: fixed; z-index: 9999; width: 260px; display: none;
background: var(--ctp-mantle); border: 1px solid rgb(var(--ctp-sapphire-rgb) / 0.35);
border-radius: 8px; padding: 8px 10px; color: var(--ctp-subtext0); font-size: 11px;
line-height: 1.5; font-weight: 400; letter-spacing: normal; text-transform: none;
white-space: normal; text-align: left; box-shadow: 0 10px 28px rgb(0 0 0 / .28); pointer-events: none; }
#oasis-tip.on { display: block; }
/* Collapsed rail: compact LABEL flyout (the recording's "Atvērt" pill) — same
singleton, but auto-width + bolder text when showing a data-railtip label. */
#oasis-tip.rail { width: auto; max-width: 220px; padding: 5px 10px;
font-size: 12px; font-weight: 600; color: var(--ctp-text); white-space: nowrap; }
/* Sidebar tracking card — quiet two-cell stat, replaces the loud blue/mauve numbers. */
.v2-side-stats { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
margin: 0 2px; border: 1px solid var(--ctp-surface1); border-radius: 10px; overflow: hidden;
background: color-mix(in oklab, var(--ctp-mantle) 70%, transparent); text-decoration: none;
transition: border-color .12s ease; }
.v2-side-stats:hover { border-color: var(--ctp-surface2); }
.v2-side-stat { padding: 7px 10px 6px; }
.v2-side-stat + .v2-side-stat { border-left: 1px solid var(--ctp-surface0); }
.v2-side-stat b { display: block; font-size: 14px; font-weight: 700; color: var(--ctp-text);
font-variant-numeric: tabular-nums; line-height: 1.1; }
.v2-side-stat i { font-style: normal; font-size: 9px; font-weight: 650; letter-spacing: .09em;
text-transform: uppercase; color: var(--ctp-overlay1); }
/* Collapsed rail: the chevron card becomes a neat centered square. */
/* Priority badges follow the SAME heat scale as the filter pills (Mark Jul 19). */
.v2-prio-heat { min-width: 44px; height: 20px; justify-content: center; color: #fff; }
.v2-prio-p0 { background: #D92D20; }
.v2-prio-p1 { background: #F04E23; }
.v2-prio-p2 { background: #F59E0B; }
.v2-prio-p3 { background: #12B76A; }
.v2-prio-p4 { background: #1E66F5; }
.v2-prio-p5 { background: #98A2B3; }
.v2-prio-none { background: color-mix(in oklab, var(--ctp-overlay0) 12%, transparent); color: var(--ctp-overlay1); }
/* Intent chips: same-size boxes like everything else. */
.v2-intent-chip { display: inline-flex; justify-content: center; min-width: 96px; }
/* Daily movement chips on the sidebar tracking card. */
.v2-side-delta { display: block; font-style: normal; font-size: 9px; font-weight: 700;
font-variant-numeric: tabular-nums; color: var(--ctp-overlay0); margin-top: 1px; }
.v2-side-delta.up { color: var(--ctp-green); }
.v2-side-delta.down { color: var(--ctp-red); }
/* Clickable delta pill — opens the daily-changes drawer. */
.v2-side-delta-btn { cursor: pointer; border-radius: 4px; padding: 0 3px; margin-left: -3px;
transition: background-color .12s; }
.v2-side-delta-btn:hover { background: var(--ctp-surface0); text-decoration: underline; }
/* Tracking card tracks the DRAGGED sidebar width (same container queries as
the nav labels): narrow → cells stack; icon-rail → hidden (the numbers
live in the Explorer hero anyway). */
@container (max-width: 169px) {
.v2-side-stats { grid-template-columns: 1fr; }
.v2-side-stat + .v2-side-stat { border-left: none; border-top: 1px solid var(--ctp-surface0); }
.v2-side-stat { padding: 5px 8px 4px; text-align: center; }
.v2-side-stat b { font-size: 12px; }
.v2-side-stat i { font-size: 8px; letter-spacing: .06em; }
}
@container (max-width: 99px) {
.v2-side-stats { display: none; }
}
/* Sidebar nav never scrolls sideways (rail widths were showing an x-scrollbar). */
.oasis-sidebar nav { overflow-x: hidden; }
/* Brand stays DEAD CENTER at every sidebar width (Mark: "centred and responsive
at all times"): the tile and the lockup overlap in one centered grid cell, so
the width-morph cross-fade can never push the visible mark sideways. */
.oasis-sidebar .brand-header > a { display: grid !important; place-items: center; width: 100%; }
.oasis-sidebar .brand-header > a > * { grid-area: 1 / 1; margin: 0 auto; }
.oasis-sidebar .brand-lockup { display: flex; justify-content: center; }
/* In-page TOC rail — the Explorer browse-panel silhouette for content pages. */
/* Matches the Explorer browse rail exactly (Mark: "like the rest where their
sidebars are placed") — w-80 panel, surface0 card, same sticky metrics. */
.v2-toc { position: sticky; top: calc(var(--lane-tabbar-h, 0px) + 8px); width: 20rem;
max-height: calc(100vh - var(--lane-tabbar-h, 0px) - 24px); overflow-y: auto; overscroll-behavior: contain;
flex-shrink: 0; border: 1px solid var(--ctp-surface1); border-radius: 12px;
background: var(--ctp-surface0); padding: 16px; }
.v2-toc-title { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
color: var(--ctp-subtext0); padding: 2px 8px 8px; }
.v2-toc-item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 8px;
font-size: 13px; font-weight: 500; color: var(--ctp-text); text-decoration: none; cursor: pointer;
transition: background .12s ease, color .12s ease; }
.v2-toc-item:hover { background: color-mix(in oklab, var(--ctp-surface1) 55%, transparent); color: var(--ctp-text); }
.v2-toc-item > .flex-1 { min-width: 0; }
.v2-toc-item:hover { background: color-mix(in oklab, var(--ctp-lavender) 10%, transparent); color: var(--ctp-text); }
/* Rail item active state (activity-log views etc.). */
.v2-toc-item-on { background: color-mix(in oklab, var(--ctp-mauve) 12%, transparent); color: var(--ctp-mauve); font-weight: 650; }
/* Intent chip doubles as a select for curators — chip look, no native chrome. */
.v2-intent-select { appearance: none; -webkit-appearance: none; border: none; cursor: pointer;
text-align: center; font-weight: 600; }
.v2-intent-select:focus { outline: 1px solid var(--ctp-lavender); }
/* Rail watermark (Slack rail etc.) — faint brand mark bottom-right. */
.v2-rail-wm { position: absolute; right: -18px; bottom: -18px; width: 150px; height: 150px;
opacity: .06; pointer-events: none; user-select: none; }
/* Center the Main cells within their column (inline-flex ignores td text-align widths). */
.ost-child .v2-main-cell { width: 100%; justify-content: center; }
/* ════════════════════════════════════════════════════════════════════
Mobile usability pass (2026-07-19) — makes every page work on phones.
Desktop untouched: everything below is ≤768px only (except the toggle
default, hidden on desktop). Extends the Jul-8 mobile system (bottom
tab bar + drawer rails) to the Quiet-Grid-era chrome: compact header,
drawer .v2-toc rails, sideways-scrolling mode rows, viewport-sized
contained tables, always-visible touch actions. */
.v2-rail-mtoggle { display: none; }
.m-brand { display: none; }
/* Desktop: the header is ONE row, always — a 6-tab lane (Competitors) must
never fold its last tab under the brand (Insights wrapped, Mark
2026-07-20). Squeeze order: the search pill shrinks to 180px first, then
the tab strip scrolls sideways (scrollbar hidden, same as mobile). */
/* Squeeze order = the OTHERS shrink hard (factor 200, clamped by their own
min-width), the tab strip shrinks LAST and then scrolls sideways.
It must still have a REAL shrink factor: with `flex-shrink: 0.0001` the
flexbox algorithm only absorbs 0.0001 of the deficit, so on the 8-tab
Competitors lane the leftover width escaped the bar and the user chip fell
off the right edge (Mark 2026-08-04: "the top bar doesn't show fully"). */
.lane-tabs-strip { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none;
/* the scrollbar is hidden, so a squeezed strip needs SOME hint that a tab
continues past the edge: the last 8px fade out. 8px is the tab's own side
padding at these widths, so when the row fits the fade lands on padding
or empty space and is invisible; only a cut-off tab looks faded. */
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 8px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 8px), transparent); }
.lane-tabs-strip::-webkit-scrollbar { display: none; }
.uni-wrap { flex: 0 200 288px; min-width: 160px; }
.uni-wrap .uni-search { width: 100%; }
/* The site pill's input is w-56 (224px) — far wider than any domain. Let the
pill give back width too (domain truncates) so all 6 tabs stay visible
down to a 1512 window with the sidebar expanded. */
.site-frame-wrap { flex: 0 200 auto; min-width: 190px; }
.site-frame-wrap > div:first-child { flex: 1 1 auto; min-width: 0; }
.site-frame-wrap input { width: 0; flex: 1 1 224px; min-width: 90px; text-overflow: ellipsis; }
/* Windows under ~1800: the nice-to-haves slim down so the WHOLE tab row still
fits — the Competitors lane's tabs are ~890px on their own, which already
overflowed a 1728 MacBook window (Mark 2026-08-04). Stats pill hides, the
user chip drops to avatar-only, the ⌘K hint goes, search + site pill give
back a little more, tabs sit tighter.
Nothing here removes a control — every one of them stays clickable. */
@media (min-width: 769px) and (max-width: 1799px) {
.hdr-stats { display: none; }
/* Hide the NAME BLOCK only, never the circle. This used to read
`.hdr-user a` back when the avatar was a