/* Visual layer added in v0.36: loaded last on every page, so it can refine the shared look without touching each tool's own sheet. */
:root { --radius: 18px; --ring: color-mix(in srgb, var(--accent) 22%, transparent); }
html { scroll-padding-top: 84px; }
body {
  background:
    radial-gradient(900px 420px at 12% -80px, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(700px 360px at 92% -60px, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* Header: a thin accent line under the glass bar, and a roomier menu button */
.top { box-shadow: 0 1px 0 var(--line), 0 8px 24px -18px rgba(15, 21, 48, .35); }
.top::after { content: ""; display: block; height: 2px; background: var(--grad); opacity: .85; }
.nav-btn { min-height: 42px; box-shadow: var(--shadow); }

/* Tool pages: a clear title area */
.intake { position: relative; }
.intake > .crumb::before { content: ""; display: inline-block; width: 22px; height: 4px; border-radius: 4px; background: var(--grad); vertical-align: middle; margin-right: 10px; }
.intake h1 { background: linear-gradient(120deg, var(--ink) 30%, var(--accent-strong)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.lede { line-height: 1.65; }

/* Surfaces */
.panel, .pd-card2, .pd-bar, .pd-nav, .card { border-radius: var(--radius); }
.panel { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--line) 80%, var(--accent) 6%); }
.tile, .pd-kpi, .pd-insight, .pd-chipc, .issue-card { border-radius: 14px; }
.pd-kpi { transition: transform .12s, box-shadow .12s; }
.pd-kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.pd-insight { transition: box-shadow .15s; }
.pd-insight:hover { box-shadow: var(--shadow); }

/* Controls */
.btn { min-height: 40px; padding: 9px 18px; border-radius: 12px; }
.btn.small { min-height: 34px; padding: 6px 13px; }
input, select { min-height: 40px; }
input[type="checkbox"], input[type="radio"] { min-height: 0; }
:focus-visible { outline-offset: 2px; }
.field > span, .field { letter-spacing: .01em; }

/* Tabs as soft pills */
.tabs { gap: 6px; border-bottom: 0; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; width: fit-content; max-width: 100%; }
.tab { border-radius: 10px; border: 0; padding: 8px 16px; }
.tab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent); }

/* Tables */
.tbl thead th, .mini thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; }
.tbl tbody tr:hover > td, .mini tbody tr:hover > td { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* Footer */
.foot-site { background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 4%, transparent)); }
.foot-site .wrap { align-items: center; }
.foot-site a { color: var(--muted); text-underline-offset: 3px; }
.foot-site a:hover { color: var(--accent-strong); }

/* Landing */
.card { transition: transform .15s, box-shadow .15s, border-color .15s; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.hero { position: relative; overflow: hidden; }

/* A calm entrance for new content */
@keyframes rise { from { transform: translateY(6px); } to { transform: none; } }
.pd-view > *, .intake > *, .panel { animation: rise .28s ease both; }
@media (prefers-reduced-motion: reduce) { .pd-view > *, .intake > *, .panel { animation: none; } .card, .pd-kpi { transition: none; } }
@media print { body { background: #fff; } .top::after { display: none; } .intake h1 { -webkit-text-fill-color: #000; color: #000; background: none; } }

/* Connected accounts strip, shown the same way on every tool that reads Google data */

/* Check boxes and radio buttons: one size on every page, never stretched by a "full width" rule meant for text boxes. */
input[type="checkbox"], input[type="radio"] { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: none !important; padding: 0 !important; margin: 0; flex: none; accent-color: var(--accent); }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]), .check { display: inline-flex; align-items: center; gap: 8px; }

/* Table headings that sort are buttons: big enough to tap on a phone. */
@media (max-width: 860px) { .th-sort { min-height: 36px; padding-top: 6px; padding-bottom: 6px; } }

/* Connection chips and the search-controls bar on phones: every control gets a full row. */
.pd-chipsel .pick, .pd-chipsel .combo { width: 100%; }
.pd-chipsel input { min-width: 220px; max-width: 100%; font-size: .92rem; }
@media (max-width: 600px) {
  .pd-chipc { flex-wrap: wrap; }
  .pd-chipc-text { flex: 1 1 calc(100% - 30px); }
  .pd-chipc > .btn { flex: 1 1 100%; }
  .pd-chipsel input { min-width: 0; }
  .pd-bar-row > .field, .pd-bar-row > .btn { flex: 1 1 100%; }
  .pd-filterrow { align-items: stretch; }
  .pd-filterrow > select, .pd-filterrow > .pd-fval, .pd-filterrow > .btn { flex: 1 1 100%; }
}

/* Containers may always shrink below the width of what is inside them (a long table, a no-wrap row), so a page never widens past the screen.
   A flex or grid item defaults to the width of its widest content; these rules switch that off everywhere. */
.wrap, main, section, .panel, .panel > *, .tpane, .osec, .row-filters, .research-row, .intake > * { min-width: 0; max-width: 100%; }
.panel { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) {
  /* A table that is not already inside its own scrolling box scrolls on its own instead of widening the page. */
  .tpane table, .osec table, .panel table:not(.tbl) { display: block; max-width: 100%; overflow-x: auto; }
}

/* The children of every control row may shrink too (a long note beside a button must wrap, not widen the page). */
.research-row > *, .row-filters > *, .st-row > *, .pd-bar-row > *, .gb-controls > *, .tools > *, .refine > *, .gsc-row > *, .filebar > * { min-width: 0; }
/* Link-style buttons inside text get a comfortable tap area on phones. */
@media (max-width: 860px) { .pd-link-btn, button.link, .link-btn { min-height: 32px; padding-top: 6px; padding-bottom: 6px; } }

.pd-chipc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 600px) { .pd-chipc-actions { flex: 1 1 100%; } .pd-chipc-actions > .btn { flex: 1 1 auto; } }

/* The note beside the market pickers must wrap on a phone (research.css had it never shrink). */
.research-row .market-note { flex: 1 1 100%; }

/* Analytics channel picker */
.ga-channels { position: relative; }
.ga-channels > summary { cursor: pointer; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); min-height: 40px; display: flex; align-items: center; gap: 4px; list-style: none; }
.ga-channels > summary::-webkit-details-marker { display: none; }
.ga-channels[open] > summary { border-color: var(--accent); }
.ga-ch-list { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 6px 14px; max-width: 640px; }
.ga-ch-quick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.ga-ch-row { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; }
.ga-ch-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: .82rem; }

/* The shared activity card (activity.ts): fixed at the bottom of the screen while something is loading, wherever you have scrolled. */
.vb-activity { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; width: min(560px, calc(100vw - 24px)); padding: 12px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface); color: var(--ink); box-shadow: 0 10px 30px rgba(15, 23, 42, .25); }
.vb-activity[hidden] { display: none; }
.vb-activity-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.vb-activity-text b { font-size: .95rem; }
.vb-activity-sub { font-size: .84rem; color: var(--muted); overflow-wrap: anywhere; }
.vb-activity-time { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--muted); flex: none; }
.vb-spin { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: vb-turn .9s linear infinite; }
@keyframes vb-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vb-spin { animation-duration: 3s; } }

/* A drop-down that opens from a panel must sit above the panels after it (each panel animates in, which gives it its own layer) */
.panel:focus-within, .pd-bar:focus-within, .gscbox:focus-within, .pd-conn:focus-within, .pd-chipc:focus-within { position: relative; z-index: 30; }

/* Channel chooser: a pop-over that floats over the page instead of pushing everything down */
.ga-channels { position: relative; }
.ga-channels[open] > .ga-ch-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; margin-top: 0; width: min(640px, 90vw); max-width: none; box-shadow: var(--shadow-lg); }
.pd-gahost:has(.ga-channels[open]), .gabox:has(.ga-channels[open]), .osec:has(.ga-channels[open]) { position: relative; z-index: 45; }
.ga-channels[open] > .ga-ch-list { background: var(--surface); }
.ga-channels[open] > .ga-ch-list { left: auto; right: 0; }
@media (max-width: 700px) { .ga-channels[open] > .ga-ch-list { left: 0; right: auto; } }