@harshankur/viewcounter 3.0.1 → 3.2.0

package/admin/css/admin.css

@@ -0,0 +1,2568 @@
+/*
+ * ViewCounter admin UI.
+ *
+ * Same design language as the documentation site (docs/index.html): the
+ * terminal palette, window chrome, grid and glow. Differences, on purpose:
+ *  - system monospace fonts only. The docs site loads Google Fonts; the admin
+ *    UI never contacts a third party, so an admin's IP is never disclosed to a
+ *    font host and the strict CSP needs no exception.
+ *  - the theme is a class on <html> (FRONTEND.md §6), not a data attribute.
+ */
+
+/* ---------- Tokens (FRONTEND.md §4) ---------- */
+
+:root,
+.theme-dark {
+    /* Brand */
+    --primary: #3ddc84;
+    --primary-bright: #7dffb3;
+    --primary-glow: rgba(61, 220, 132, 0.35);
+    --secondary: #ffb454;
+    /* Background */
+    --bg: #0a0f0c;
+    /* Surface */
+    --card-bg: rgba(16, 24, 20, 0.82);
+    --surface-solid: #101814;
+    --nav-bg: rgba(8, 11, 9, 0.86);
+    --code-bg: #0d1310;
+    --row-hover: rgba(61, 220, 132, 0.06);
+    --row-selected: rgba(61, 220, 132, 0.12);
+    /* Border */
+    --border: rgba(61, 220, 132, 0.22);
+    --border-strong: rgba(61, 220, 132, 0.45);
+    /* Text */
+    --text: #e8f6ec;
+    --text-muted: #7c9686;
+    --text-on-primary: #0a0f0c;
+    /* Semantic status */
+    --success: #3ddc84;
+    --danger: #ef4444;
+    --danger-bg: rgba(239, 68, 68, 0.14);
+    --warning: #f5b942;
+    --warning-bg: rgba(245, 185, 66, 0.14);
+    --info: #5aa9e6;
+    --info-bg: rgba(90, 169, 230, 0.14);
+    --muted-bg: rgba(124, 150, 134, 0.16);
+    /* Effects */
+    --scanline-opacity: 0.4;
+    --shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
+    --backdrop: rgba(4, 7, 5, 0.72);
+    color-scheme: dark;
+
+    /* Charts. Validated with the data-viz palette checks against the card
+       surfaces of each theme: one series hue inside the lightness band, and a
+       one-hue sequential map ramp, monotone, with its low end >= 2:1 so "few
+       views" never reads as "no views" (--map-0). */
+    --chart-series: #2aa862;
+    --chart-area: rgba(42, 168, 98, 0.1);
+    --chart-grid: rgba(61, 220, 132, 0.1);
+    --chart-baseline: rgba(61, 220, 132, 0.3);
+    --map-0: #1a2420;
+    --map-1: #236642;
+    --map-2: #288552;
+    --map-3: #2ea563;
+    --map-4: #4cc57f;
+    --map-5: #8fe3b2;
+
+    --font-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+    --radius: 12px;
+    --radius-small: 8px;
+}
+
+.theme-light {
+    --primary: #1f7a4a;
+    --primary-bright: #12653c;
+    --primary-glow: rgba(31, 122, 74, 0.16);
+    --secondary: #b5590f;
+    --bg: #f3efe2;
+    --card-bg: rgba(255, 253, 246, 0.9);
+    --surface-solid: #fffdf6;
+    --nav-bg: rgba(243, 239, 226, 0.9);
+    --code-bg: #eae4d1;
+    --row-hover: rgba(31, 122, 74, 0.05);
+    --row-selected: rgba(31, 122, 74, 0.1);
+    --border: rgba(31, 122, 74, 0.25);
+    --border-strong: rgba(31, 122, 74, 0.5);
+    --text: #1b2a20;
+    --text-muted: #5f6f63;
+    --text-on-primary: #fffdf6;
+    --success: #1f7a4a;
+    --danger: #b42318;
+    --danger-bg: rgba(180, 35, 24, 0.1);
+    --warning: #8a5a00;
+    --warning-bg: rgba(181, 89, 15, 0.12);
+    --info: #1c6fa8;
+    --info-bg: rgba(28, 111, 168, 0.1);
+    --muted-bg: rgba(95, 111, 99, 0.12);
+    --scanline-opacity: 0;
+    --shadow: 0 24px 48px -20px rgba(27, 42, 32, 0.25);
+    --backdrop: rgba(27, 42, 32, 0.4);
+    --chart-series: #1f7a4a;
+    --chart-area: rgba(31, 122, 74, 0.1);
+    --chart-grid: rgba(31, 122, 74, 0.1);
+    --chart-baseline: rgba(31, 122, 74, 0.35);
+    --map-0: #ebe5d2;
+    --map-1: #7cc298;
+    --map-2: #52ab79;
+    --map-3: #33935f;
+    --map-4: #1f7a4a;
+    --map-5: #11532f;
+    color-scheme: light;
+}
+
+/* ---------- Base ---------- */
+
+*,
+*::before,
+*::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    background-color: var(--bg);
+}
+
+body {
+    font-family: var(--font-mono);
+    font-size: 14px;
+    background-color: var(--bg);
+    color: var(--text);
+    line-height: 1.5;
+    min-height: 100vh;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+body.booting main {
+    visibility: hidden;
+}
+
+body.modal-open {
+    overflow: hidden;
+}
+
+h1, h2, h3 {
+    font-weight: 700;
+    letter-spacing: -0.01em;
+}
+
+button,
+input,
+textarea {
+    font: inherit;
+    color: inherit;
+}
+
+[hidden] {
+    display: none !important;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+}
+
+.mono {
+    font-family: var(--font-mono);
+}
+
+:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+}
+
+.skip-link {
+    position: absolute;
+    left: 1rem;
+    top: -3rem;
+    z-index: 300;
+    padding: 0.5rem 0.9rem;
+    background: var(--primary);
+    color: var(--text-on-primary);
+    border-radius: var(--radius-small);
+    text-decoration: none;
+}
+
+.skip-link:focus {
+    top: 1rem;
+}
+
+/* ---------- Ambient background (as on the docs site) ---------- */
+
+.bg-grid {
+    position: fixed;
+    inset: 0;
+    z-index: -2;
+    pointer-events: none;
+    background-image:
+        linear-gradient(var(--border) 1px, transparent 1px),
+        linear-gradient(90deg, var(--border) 1px, transparent 1px);
+    background-size: 48px 48px;
+    opacity: 0.35;
+    mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, black 30%, transparent 100%);
+}
+
+.bg-glow {
+    position: fixed;
+    top: -10%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: min(900px, 100vw);
+    height: 500px;
+    background: radial-gradient(ellipse at center, var(--primary-glow) 0%, transparent 70%);
+    z-index: -1;
+    pointer-events: none;
+}
+
+.crt-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 250;
+    pointer-events: none;
+    background: repeating-linear-gradient(to bottom,
+            rgba(255, 255, 255, 0.05) 0px,
+            rgba(255, 255, 255, 0.05) 1px,
+            transparent 1px,
+            transparent 3px);
+    opacity: var(--scanline-opacity);
+    mix-blend-mode: overlay;
+}
+
+/* ---------- Icons ---------- */
+
+/* Line icons take the size and colour of the text around them. */
+.icon {
+    width: 1.1em;
+    height: 1.1em;
+    flex-shrink: 0;
+}
+
+/* ---------- Top bar ---------- */
+
+.topbar {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 2rem;
+    background: var(--nav-bg);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--border);
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+}
+
+.logo-mark {
+    height: 24px;
+    width: auto;
+    color: var(--primary);
+}
+
+.logo-cursor {
+    animation: blink 1.1s steps(1) infinite;
+}
+
+.logo-text {
+    font-weight: 700;
+    font-size: 1.05rem;
+}
+
+.logo-badge {
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--secondary);
+    border: 1px solid currentColor;
+    border-radius: 4px;
+    padding: 0.05rem 0.4rem;
+}
+
+.version-badge {
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    font-variant-numeric: tabular-nums;
+}
+
+.topbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.header-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    color: var(--text-muted);
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-decoration: none;
+    padding: 0.35rem 0.5rem;
+    border-radius: var(--radius-small);
+}
+
+.header-link:hover {
+    color: var(--primary);
+    background: var(--row-hover);
+}
+
+.theme-switcher {
+    display: flex;
+    background: var(--code-bg);
+    border: 1px solid var(--border);
+    padding: 0.2rem;
+    border-radius: var(--radius-small);
+    gap: 0.2rem;
+}
+
+.theme-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    width: 30px;
+    height: 30px;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.theme-btn:hover {
+    color: var(--text);
+    background: var(--border);
+}
+
+.theme-btn.active {
+    background: var(--primary);
+    color: var(--bg);
+    box-shadow: 0 0 12px var(--primary-glow);
+}
+
+.theme-btn .icon {
+    width: 16px;
+    height: 16px;
+}
+
+/* ---------- Layout ---------- */
+
+/* Wide enough that a large screen shows more columns and wider charts. */
+main {
+    max-width: 1920px;
+    margin: 0 auto;
+    padding: 1.75rem 2rem 3rem;
+}
+
+/* ---------- Terminal window chrome ---------- */
+
+.term-window {
+    background: var(--card-bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    backdrop-filter: blur(10px);
+    box-shadow: var(--shadow);
+}
+
+.term-titlebar {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.65rem 1rem;
+    background: var(--code-bg);
+    border-bottom: 1px solid var(--border);
+}
+
+.term-dots {
+    display: flex;
+    gap: 0.4rem;
+}
+
+.term-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}
+
+.term-dot.red { background: #ef4444; }
+.term-dot.amber { background: #f5b942; }
+.term-dot.green { background: var(--primary); }
+
+.term-title {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+    margin-left: 0.25rem;
+}
+
+.term-body {
+    padding: 1.75rem;
+}
+
+.prompt-char {
+    color: var(--primary);
+    font-weight: 700;
+}
+
+/* ---------- Buttons ---------- */
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.7rem 1.3rem;
+    border-radius: var(--radius-small);
+    font-weight: 600;
+    font-size: 0.9rem;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s, color 0.2s, background-color 0.2s;
+    white-space: nowrap;
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.btn-small {
+    padding: 0.4rem 0.85rem;
+    font-size: 0.82rem;
+}
+
+.btn-primary {
+    background: var(--primary);
+    color: var(--text-on-primary);
+}
+
+.btn-primary:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 8px 24px var(--primary-glow);
+}
+
+.btn-secondary {
+    background: transparent;
+    color: var(--text);
+    border-color: var(--border-strong);
+}
+
+.btn-secondary:hover:not(:disabled) {
+    border-color: var(--primary);
+    color: var(--primary);
+}
+
+.btn-danger {
+    background: var(--danger-bg);
+    color: var(--danger);
+    border-color: var(--danger);
+}
+
+.btn-danger:hover:not(:disabled) {
+    background: var(--danger);
+    color: #fff;
+}
+
+.btn-ghost {
+    background: transparent;
+    color: var(--text-muted);
+}
+
+.btn-ghost:hover:not(:disabled) {
+    color: var(--text);
+}
+
+.icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 0.95rem;
+    line-height: 1;
+    transition: all 0.15s;
+}
+
+.icon-btn:hover {
+    color: var(--primary);
+    border-color: var(--border);
+    background: var(--row-hover);
+}
+
+.icon-btn.danger:hover {
+    color: var(--danger);
+    border-color: var(--danger);
+    background: var(--danger-bg);
+}
+
+/* ---------- Form controls ---------- */
+
+.input {
+    width: 100%;
+    padding: 0.6rem 0.8rem;
+    background: var(--code-bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-small);
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.input:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px var(--primary-glow);
+}
+
+textarea.input {
+    resize: vertical;
+    min-height: 5rem;
+}
+
+.field-label {
+    display: block;
+    font-size: 0.82rem;
+    color: var(--text-muted);
+    margin-bottom: 0.4rem;
+}
+
+.field-error {
+    color: var(--danger);
+    font-size: 0.82rem;
+    margin-top: 0.4rem;
+}
+
+.notice {
+    font-size: 0.82rem;
+    color: var(--text-muted);
+    border-left: 2px solid var(--secondary);
+    padding: 0.2rem 0 0.2rem 0.75rem;
+    margin: 0.25rem 0 1rem;
+}
+
+/* Custom listbox (FRONTEND.md §0: never a native select) */
+
+.listbox {
+    position: relative;
+    min-width: 10rem;
+}
+
+.listbox-button {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.55rem 0.8rem;
+    background: var(--code-bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-small);
+    cursor: pointer;
+    text-align: left;
+}
+
+.listbox-button:hover,
+.listbox-button[aria-expanded='true'] {
+    border-color: var(--primary);
+}
+
+.listbox-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.listbox-caret {
+    color: var(--primary);
+    font-size: 0.75rem;
+}
+
+.listbox-popup {
+    position: absolute;
+    z-index: 150;
+    top: calc(100% + 4px);
+    left: 0;
+    min-width: 100%;
+    max-height: 18rem;
+    overflow-y: auto;
+    list-style: none;
+    padding: 0.3rem;
+    background: var(--surface-solid);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-small);
+    box-shadow: var(--shadow);
+    animation: pop-in 0.12s ease-out;
+}
+
+.listbox-popup:focus {
+    outline: none;
+}
+
+.listbox-option {
+    padding: 0.45rem 0.7rem;
+    border-radius: 5px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.listbox-option::before {
+    content: '  ';
+    white-space: pre;
+    color: var(--primary);
+}
+
+.listbox-option[aria-selected='true']::before {
+    content: '❯ ';
+}
+
+.listbox-option.active,
+.listbox-option:hover {
+    background: var(--row-selected);
+}
+
+/* Segmented control */
+
+.segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    max-width: 100%;
+    background: var(--code-bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-small);
+    padding: 0.2rem;
+    gap: 0.2rem;
+}
+
+.segmented-btn {
+    border: none;
+    background: transparent;
+    color: var(--text-muted);
+    padding: 0.35rem 0.75rem;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 0.82rem;
+    white-space: nowrap;
+}
+
+.segmented-btn:hover {
+    color: var(--text);
+}
+
+.segmented-btn.active {
+    background: var(--primary);
+    color: var(--text-on-primary);
+}
+
+/* Switch */
+
+.switch {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.55rem;
+    cursor: pointer;
+    white-space: nowrap;
+    font-size: 0.85rem;
+}
+
+.switch-input {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+}
+
+.switch-track {
+    position: relative;
+    width: 34px;
+    height: 20px;
+    border-radius: 10px;
+    background: var(--code-bg);
+    border: 1px solid var(--border-strong);
+    transition: background-color 0.2s;
+}
+
+.switch-track::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--text-muted);
+    transition: transform 0.2s, background-color 0.2s;
+}
+
+.switch-input:checked + .switch-track {
+    background: var(--primary-glow);
+    border-color: var(--primary);
+}
+
+.switch-input:checked + .switch-track::after {
+    transform: translateX(14px);
+    background: var(--primary);
+}
+
+.switch-input:focus-visible + .switch-track {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+}
+
+/* ---------- Login ---------- */
+
+.login {
+    display: flex;
+    justify-content: center;
+    padding-top: 8vh;
+}
+
+.login-window {
+    width: min(460px, 100%);
+}
+
+.login-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.login-heading {
+    font-size: 1.25rem;
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.4rem;
+}
+
+.login-intro {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+    margin-bottom: 1.2rem;
+}
+
+.login-form .btn {
+    margin-top: 1.1rem;
+}
+
+/* ---------- Tabs ---------- */
+
+.tabs {
+    display: flex;
+    gap: 0.25rem;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 1.25rem;
+}
+
+.tab {
+    display: inline-flex;
+    gap: 0.5rem;
+    align-items: center;
+    padding: 0.7rem 1rem;
+    border: none;
+    border-bottom: 2px solid transparent;
+    background: transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-weight: 600;
+    margin-bottom: -1px;
+}
+
+.tab .icon {
+    opacity: 0.7;
+}
+
+.tab:hover {
+    color: var(--text);
+}
+
+.tab.active {
+    color: var(--primary);
+    border-bottom-color: var(--primary);
+}
+
+.tab.active .icon {
+    opacity: 1;
+}
+
+/* ---------- Panels and toolbar ---------- */
+
+.panel {
+    display: flex;
+    flex-direction: column;
+    gap: 0.9rem;
+}
+
+.toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+}
+
+.toolbar-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.6rem;
+}
+
+.search-input {
+    width: 20rem;
+    max-width: 100%;
+}
+
+.app-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.app-tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    padding: 0.45rem 0.8rem;
+    background: var(--code-bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-small);
+    color: var(--text-muted);
+    cursor: pointer;
+    font-weight: 600;
+    transition: color 0.15s, border-color 0.15s, background-color 0.15s, box-shadow 0.2s;
+}
+
+.app-tab:hover {
+    color: var(--text);
+    border-color: var(--border-strong);
+}
+
+.app-tab.active {
+    color: var(--primary);
+    border-color: var(--primary);
+    background: var(--row-selected);
+    box-shadow: 0 0 12px var(--primary-glow);
+}
+
+.app-tab.unavailable {
+    opacity: 0.55;
+    text-decoration: line-through;
+}
+
+.app-tab-count {
+    font-size: 0.72rem;
+    font-weight: 700;
+    padding: 0.05rem 0.45rem;
+    border-radius: 999px;
+    background: var(--muted-bg);
+    color: var(--text-muted);
+}
+
+.app-tab.active .app-tab-count {
+    background: var(--primary);
+    color: var(--text-on-primary);
+}
+
+.panel-summary {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+}
+
+/* Each section says what it is and how it differs from the others. */
+.panel-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+}
+
+.panel-title {
+    font-size: 1.25rem;
+}
+
+.panel-intro {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+    max-width: 62rem;
+}
+
+.filter-chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.filter-chips:empty {
+    display: none;
+}
+
+.chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    max-width: 22rem;
+    padding: 0.3rem 0.55rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--primary);
+    background: var(--row-selected);
+    border: 1px solid var(--border-strong);
+    border-radius: 999px;
+    cursor: pointer;
+}
+
+.chip:hover {
+    border-color: var(--primary);
+}
+
+.chip-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+
+.link-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--primary);
+    font-size: 0.82rem;
+    cursor: pointer;
+}
+
+.link-btn:hover {
+    text-decoration: underline;
+}
+
+/* "How these are counted": definitions, folded away until wanted. */
+.metric-help {
+    font-size: 0.82rem;
+    color: var(--text-muted);
+}
+
+.metric-help summary {
+    cursor: pointer;
+    width: fit-content;
+    font-weight: 600;
+}
+
+.metric-help summary:hover {
+    color: var(--text);
+}
+
+.metric-help dl {
+    display: grid;
+    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
+    gap: 0.4rem 1rem;
+    margin-top: 0.6rem;
+    max-width: 62rem;
+}
+
+.metric-help dt {
+    color: var(--text);
+    font-weight: 600;
+}
+
+.outcome-legend dt {
+    font-weight: 400;
+}
+
+/* ---------- Charts ---------- */
+
+/* Headline numbers: label, value, change against the period before, sparkline. */
+.stat-tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
+    gap: 0.75rem;
+}
+
+/* The Overview's nine sit in even rows: all nine, five and four, three by
+   three, or two by two, by the width they have, never seven and two. */
+.overview-tiles {
+    container: tiles / inline-size;
+}
+
+.overview-tiles .stat-tiles {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.6rem;
+}
+
+@container tiles (width >= 34rem) {
+    .overview-tiles .stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+@container tiles (width >= 58rem) {
+    .overview-tiles .stat-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+}
+
+@container tiles (width >= 80rem) {
+    .overview-tiles .stat-tiles { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+}
+
+.stat-tile {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    min-width: 0;
+    padding: 0.85rem 1rem 0.7rem;
+    font: inherit;
+    color: inherit;
+    text-align: left;
+    background: var(--card-bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-small);
+}
+
+.stat-tile.selectable {
+    cursor: pointer;
+    transition: border-color 0.15s, box-shadow 0.2s;
+}
+
+.stat-tile.selectable:hover {
+    border-color: var(--border-strong);
+}
+
+.stat-tile.active {
+    border-color: var(--primary);
+    box-shadow: inset 0 -2px 0 var(--primary), 0 0 12px var(--primary-glow);
+}
+
+.stat-label {
+    color: var(--text-muted);
+    font-size: 0.78rem;
+}
+
+.stat-value {
+    font-size: 1.55rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.stat-delta {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    min-height: 1.1rem;
+    font-size: 0.74rem;
+    color: var(--text-muted);
+}
+
+.stat-delta-value {
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+/* Good and bad changes carry an arrow and a sign as well as a colour. */
+.stat-delta.tone-good .stat-delta-value,
+.stat-delta.tone-good .icon {
+    color: var(--success);
+}
+
+.stat-delta.tone-bad .stat-delta-value,
+.stat-delta.tone-bad .icon {
+    color: var(--danger);
+}
+
+.stat-delta .icon {
+    width: 0.9rem;
+    height: 0.9rem;
+}
+
+.sparkline {
+    display: block;
+    width: 100%;
+    height: 28px;
+    /* On the tile's bottom edge, level across a row whatever the label's length. */
+    margin-top: auto;
+    padding-top: 0.3rem;
+    overflow: visible;
+}
+
+.sparkline-line {
+    fill: none;
+    stroke: var(--chart-series);
+    stroke-width: 1.5;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+}
+
+.tracking-summary .sparkline {
+    display: none;
+}
+
+/* The Overview */
+
+.overview-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    transition: opacity 0.2s;
+}
+
+/* Refetch keeps the frame: the last render stays, dimmed, until the new one. */
+.overview.loading .overview-content {
+    opacity: 0.55;
+}
+
+.overview-span {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    margin-top: -0.4rem;
+}
+
+.overview-top {
+    display: grid;
+    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
+    gap: 1rem;
+}
+
+.overview-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+    container: overview-grid / inline-size;
+}
+
+.card-wide {
+    grid-column: 1 / -1;
+}
+
+.card-body {
+    min-width: 0;
+}
+
+.card-footer {
+    margin-top: auto;
+}
+
+.card-note {
+    color: var(--text-muted);
+    font-size: 0.75rem;
+}
+
+.card-note a {
+    color: inherit;
+}
+
+.card-note a:hover {
+    color: var(--primary);
+}
+
+.chart-card-header .segmented {
+    flex-wrap: wrap;
+}
+
+/* Ranked tables: the label with its bar behind it, then the measures. */
+
+.rank-table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    font-size: 0.82rem;
+}
+
+.rank-table th,
+.rank-table td {
+    padding: 0.2rem 0.35rem;
+    text-align: left;
+    font-weight: 400;
+}
+
+.rank-table thead th {
+    color: var(--text-muted);
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    padding-bottom: 0.35rem;
+}
+
+.rank-table .rank-num {
+    width: 5.2rem;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.rank-table thead .rank-num {
+    white-space: normal;
+    vertical-align: bottom;
+}
+
+.rank-label-head {
+    width: auto;
+    vertical-align: bottom;
+}
+
+.rank-label {
+    padding-left: 0;
+}
+
+.rank-select,
+.rank-static {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    min-height: 1.9rem;
+    padding: 0.2rem 1.6rem 0.2rem 0.5rem;
+    font: inherit;
+    color: var(--text);
+    text-align: left;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    overflow: hidden;
+}
+
+.rank-select {
+    cursor: pointer;
+}
+
+.rank-bar {
+    position: absolute;
+    inset: 0 auto 0 0;
+    background: var(--chart-series);
+    opacity: 0.18;
+    border-radius: 4px;
+    pointer-events: none;
+}
+
+.rank-text,
+.rank-detail {
+    position: relative;
+}
+
+.rank-detail {
+    color: var(--text-muted);
+    font-size: 0.72rem;
+}
+
+.rank-filter-icon {
+    position: absolute;
+    right: 0.4rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--primary);
+    opacity: 0;
+    transition: opacity 0.15s;
+}
+
+.rank-select:hover,
+.rank-select:focus-visible {
+    background: var(--row-hover);
+}
+
+.rank-select:hover .rank-filter-icon,
+.rank-select:focus-visible .rank-filter-icon {
+    opacity: 1;
+}
+
+.rank-muted .rank-static,
+.rank-muted td {
+    color: var(--text-muted);
+}
+
+.rank-muted .rank-bar {
+    background: var(--text-muted);
+}
+
+/* Right now */
+
+.live-card .chart-title {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.live-dot {
+    width: 0.55rem;
+    height: 0.55rem;
+    border-radius: 50%;
+    background: var(--success);
+    box-shadow: 0 0 0 0 var(--primary-glow);
+    animation: pulse 2s ease-out infinite;
+}
+
+.live-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+}
+
+.live-headline {
+    display: flex;
+    align-items: baseline;
+    gap: 0.6rem;
+    flex-wrap: wrap;
+}
+
+.live-count {
+    font-size: 2.2rem;
+    font-weight: 700;
+    letter-spacing: -0.03em;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+}
+
+.live-caption {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+}
+
+.minute-svg {
+    display: block;
+    width: 100%;
+    height: 56px;
+    cursor: crosshair;
+}
+
+.minute-svg:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 3px;
+    border-radius: 4px;
+}
+
+.minute-bar {
+    fill: var(--chart-series);
+}
+
+.minute-bar.active {
+    fill: var(--primary-bright);
+}
+
+.minute-axis {
+    display: flex;
+    justify-content: space-between;
+    color: var(--text-muted);
+    font-size: 0.7rem;
+    margin-top: 0.2rem;
+}
+
+/* Weekday by hour */
+
+.heatmap {
+    display: grid;
+    grid-template-columns: 3rem repeat(24, minmax(0, 1fr));
+    gap: 2px;
+    align-items: center;
+}
+
+.heatmap:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 4px;
+    border-radius: 4px;
+}
+
+.heatmap-hour,
+.heatmap-day {
+    color: var(--text-muted);
+    font-size: 0.68rem;
+    white-space: nowrap;
+}
+
+.heatmap-hour {
+    overflow: visible;
+}
+
+.heatmap-cell {
+    display: block;
+    height: 1.35rem;
+    border-radius: 3px;
+}
+
+.heatmap-cell.active {
+    outline: 2px solid var(--text);
+    outline-offset: -1px;
+}
+
+.heatmap-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.7rem;
+}
+
+.chart-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    padding: 1rem 1.1rem;
+    background: var(--card-bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    min-width: 0;
+}
+
+.chart-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+}
+
+.chart-title {
+    font-size: 0.85rem;
+    font-weight: 700;
+}
+
+.chart-body {
+    position: relative;
+    min-width: 0;
+}
+
+.chart-empty {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+    padding: 1.5rem 0;
+    text-align: center;
+    list-style: none;
+}
+
+/* Views over time */
+
+.trend-svg {
+    display: block;
+    width: 100%;
+    height: auto;
+    overflow: visible;
+}
+
+.trend-svg:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 4px;
+    border-radius: 4px;
+}
+
+.chart-grid {
+    stroke: var(--chart-grid);
+    stroke-width: 1;
+    shape-rendering: crispEdges;
+}
+
+.chart-baseline {
+    stroke: var(--chart-baseline);
+    stroke-width: 1;
+    shape-rendering: crispEdges;
+}
+
+.chart-tick {
+    fill: var(--text-muted);
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+}
+
+.chart-area {
+    fill: var(--chart-area);
+}
+
+.chart-line {
+    fill: none;
+    stroke: var(--chart-series);
+    stroke-width: 2;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+}
+
+/* >= 8px across, with a 2px ring in the surface colour. */
+.chart-dot {
+    fill: var(--chart-series);
+    stroke: var(--surface-solid);
+    stroke-width: 2;
+}
+
+.chart-crosshair {
+    stroke: var(--text-muted);
+    stroke-width: 1;
+    shape-rendering: crispEdges;
+}
+
+.chart-table-wrap {
+    max-height: 16rem;
+    overflow-y: auto;
+}
+
+.chart-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.82rem;
+    font-variant-numeric: tabular-nums;
+}
+
+.chart-table th,
+.chart-table td {
+    text-align: left;
+    padding: 0.3rem 0.5rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.chart-table th {
+    color: var(--text-muted);
+    font-weight: 700;
+}
+
+/* Tooltip: values lead, labels follow, keyed with a short stroke. */
+
+.chart-tooltip {
+    position: absolute;
+    z-index: 20;
+    pointer-events: none;
+    min-width: 9rem;
+    padding: 0.55rem 0.7rem;
+    background: var(--surface-solid);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-small);
+    box-shadow: var(--shadow);
+    font-size: 0.8rem;
+}
+
+.chart-tooltip-title {
+    color: var(--text-muted);
+    margin-bottom: 0.25rem;
+}
+
+.chart-tooltip-row {
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+}
+
+.chart-tooltip-row strong {
+    color: var(--text);
+    font-variant-numeric: tabular-nums;
+}
+
+.chart-tooltip-row span:last-child {
+    color: var(--text-muted);
+}
+
+.chart-tooltip-key {
+    width: 0.8rem;
+    height: 2px;
+    background: var(--chart-series);
+    flex-shrink: 0;
+}
+
+/* The country list beside the map */
+
+.country-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    list-style: none;
+}
+
+.country-row {
+    display: grid;
+    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.6rem;
+    width: 100%;
+    font: inherit;
+    font-size: 0.82rem;
+    color: inherit;
+    text-align: left;
+    padding: 0.2rem 0.3rem;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+}
+
+button.country-row {
+    cursor: pointer;
+}
+
+.country-row:hover,
+.country-row:focus-visible {
+    background: var(--row-hover);
+}
+
+.bar-track {
+    display: block;
+    height: 10px;
+}
+
+.bar-fill {
+    display: block;
+    height: 100%;
+    min-width: 2px;
+    background: var(--chart-series);
+    border-radius: 0 4px 4px 0;
+}
+
+.bar-value {
+    font-variant-numeric: tabular-nums;
+    color: var(--text);
+    text-align: right;
+    min-width: 2.5rem;
+}
+
+/* World map */
+
+.map-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem);
+    gap: 1rem;
+    align-items: start;
+}
+
+.map-column {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    min-width: 0;
+}
+
+.map-host {
+    position: relative;
+}
+
+.map-svg {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+/* Borders are gaps in the surface colour, not drawn outlines. */
+.country {
+    stroke: var(--surface-solid);
+    stroke-width: 0.5;
+    transition: opacity 0.15s;
+}
+
+.country-point {
+    stroke-width: 2;
+}
+
+.country.selectable {
+    cursor: pointer;
+}
+
+.country.active {
+    stroke: var(--text);
+    stroke-width: 1;
+}
+
+.map-0 { fill: var(--map-0); background: var(--map-0); }
+.map-1 { fill: var(--map-1); background: var(--map-1); }
+.map-2 { fill: var(--map-2); background: var(--map-2); }
+.map-3 { fill: var(--map-3); background: var(--map-3); }
+.map-4 { fill: var(--map-4); background: var(--map-4); }
+.map-5 { fill: var(--map-5); background: var(--map-5); }
+
+.map-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem 0.9rem;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+.legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+.legend-swatch {
+    width: 0.85rem;
+    height: 0.6rem;
+    border-radius: 2px;
+}
+
+.country-name {
+    color: var(--text);
+}
+
+.country-more {
+    padding: 0.2rem 0.25rem;
+}
+
+.country-more .btn {
+    padding: 0.25rem 0.5rem;
+}
+
+.event-type-picker {
+    min-width: 11rem;
+}
+
+/* Batch bar */
+
+.batch-bar {
+    position: sticky;
+    top: 4.2rem;
+    z-index: 50;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.6rem 1rem;
+    background: var(--surface-solid);
+    border: 1px solid var(--primary);
+    border-radius: var(--radius-small);
+    box-shadow: 0 0 18px var(--primary-glow);
+    animation: pop-in 0.15s ease-out;
+}
+
+.batch-count {
+    font-weight: 700;
+}
+
+.batch-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-left: auto;
+}
+
+/* ---------- Data table ---------- */
+
+.table-wrap {
+    background: var(--card-bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    backdrop-filter: blur(10px);
+}
+
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+
+.data-table th,
+.data-table td {
+    padding: 0.55rem 0.7rem;
+    text-align: left;
+    vertical-align: middle;
+    border-bottom: 1px solid var(--border);
+}
+
+.data-table thead th {
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--text-muted);
+    background: var(--code-bg);
+    font-weight: 700;
+}
+
+.data-table thead th:first-child {
+    border-top-left-radius: var(--radius);
+}
+
+.data-table thead th:last-child {
+    border-top-right-radius: var(--radius);
+}
+
+.data-table tbody tr:last-child td {
+    /* Transparent rather than removed, so the last row is exactly as tall as
+       every other (FRONTEND.md §14). */
+    border-bottom-color: transparent;
+}
+
+.data-table tbody tr {
+    height: 3.6rem;
+    transition: background-color 0.15s;
+}
+
+.data-table tbody tr:hover {
+    background: var(--row-hover);
+}
+
+.data-table tbody tr:has(input[type='checkbox']:checked) {
+    background: var(--row-selected);
+}
+
+.data-table[aria-busy='true'] tbody {
+    opacity: 0.55;
+}
+
+.row-deleted td:not(.col-select):not(.col-actions):not(.col-status) {
+    opacity: 0.55;
+    text-decoration: line-through;
+    text-decoration-color: var(--danger);
+}
+
+.table-message {
+    text-align: center !important;
+    color: var(--text-muted);
+    padding: 2.5rem 1rem !important;
+}
+
+.sort-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    border: none;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-transform: inherit;
+    letter-spacing: inherit;
+    cursor: pointer;
+    padding: 0;
+}
+
+.sort-btn:hover,
+.sort-btn.active {
+    color: var(--primary);
+}
+
+.sort-indicator {
+    font-size: 0.7rem;
+    opacity: 0.8;
+}
+
+input[type='checkbox'] {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--primary);
+    cursor: pointer;
+}
+
+/*
+ * Columns (FRONTEND.md §12: reflow, never scroll sideways). dataTable.js
+ * decides which of the admin's chosen columns fit the table's own width, in
+ * their order, and sets their widths; what does not fit is under each row,
+ * behind its "more" button. Below a card's width, each row is a card.
+ */
+
+.data-table th {
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.th-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* The draggable right edge of a column header. */
+.resize-handle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 11px;
+    cursor: col-resize;
+    touch-action: none;
+}
+
+.resize-handle::after {
+    content: '';
+    position: absolute;
+    top: 25%;
+    bottom: 25%;
+    right: 3px;
+    width: 2px;
+    border-radius: 1px;
+    background: var(--border);
+    transition: background-color 0.15s;
+}
+
+.resize-handle:hover::after,
+.resize-handle:focus-visible::after,
+.resizing-column .resize-handle:active::after {
+    background: var(--primary);
+}
+
+.resize-handle:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: -2px;
+}
+
+/* While an edge is dragged, the pointer and the text stay put. */
+body.resizing-column {
+    cursor: col-resize;
+    user-select: none;
+}
+
+.data-table .col-select {
+    padding-left: 0.6rem;
+    padding-right: 0.3rem;
+}
+
+/* The "more" button's own 28px, and a little air. */
+.data-table .col-more {
+    padding-left: 0.3rem;
+    padding-right: 0.3rem;
+}
+
+.col-actions {
+    white-space: nowrap;
+}
+
+/* What did not fit, under its row: labelled, in the admin's order. */
+.data-table tbody tr.row-more {
+    height: auto;
+    background: var(--code-bg);
+}
+
+.data-table tbody tr.row-more:hover {
+    background: var(--code-bg);
+}
+
+.more-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+    gap: 0.6rem 1.25rem;
+    padding: 0.2rem 0 0.3rem 2.4rem;
+}
+
+.more-list dt {
+    font-size: 0.68rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--text-muted);
+}
+
+.more-list dd {
+    min-width: 0;
+    margin-bottom: 0.1rem;
+}
+
+/* Cards: below a table's width, each row stacks its fields, each labelled. */
+.data-table.cards thead {
+    display: none;
+}
+
+.data-table.cards,
+.data-table.cards tbody,
+.data-table.cards tr,
+.data-table.cards td {
+    display: block;
+    width: 100%;
+}
+
+.data-table.cards tbody tr {
+    height: auto;
+    position: relative;
+    padding: 0.6rem 0.8rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.data-table.cards td {
+    border: none;
+    padding: 0.15rem 0;
+}
+
+.data-table.cards td[data-label] {
+    display: grid;
+    grid-template-columns: 6.5rem minmax(0, 1fr);
+    column-gap: 0.75rem;
+    /* From the top, not the baseline: a badge's baseline would otherwise make
+       a card with badges a few pixels taller than one without. */
+    align-items: start;
+}
+
+.data-table.cards td[data-label]::before {
+    content: attr(data-label);
+    grid-row: 1 / span 2;
+    padding-top: 0.2rem;
+    font-size: 0.68rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--text-muted);
+}
+
+.data-table.cards td[data-label] > * {
+    grid-column: 2;
+}
+
+/* A badge keeps its own width; only text fills the value column. */
+.data-table.cards td[data-label] > .badge {
+    justify-self: start;
+}
+
+/* The left gutter of a views card holds its checkbox. */
+.views-table.cards tbody tr:not(.row-more) {
+    padding-left: 2.8rem;
+}
+
+.views-table.cards td.col-select {
+    position: absolute;
+    left: 0.8rem;
+    top: 0.8rem;
+    width: auto;
+    padding: 0;
+}
+
+/* A card's status line is full width, so every badge fits on one line;
+   fixed, so a card with no badges is as tall as one with some. */
+.data-table.cards .badges {
+    height: 1.4rem;
+}
+
+.data-table.cards .col-more .btn {
+    padding-left: 0;
+}
+
+.data-table.cards tr.row-more {
+    padding-top: 0;
+}
+
+.data-table.cards .more-list {
+    grid-template-columns: 6.5rem minmax(0, 1fr);
+    column-gap: 0.75rem;
+    row-gap: 0.3rem;
+    padding: 0;
+}
+
+.views-table.cards .more-list {
+    padding-left: 2rem;
+}
+
+/* Choosing columns: a checkbox and two move buttons per column. */
+.column-chooser {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    margin-bottom: 0.75rem;
+}
+
+.column-choice {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.15rem 0.4rem;
+    border-radius: 6px;
+}
+
+.column-choice:hover {
+    background: var(--row-hover);
+}
+
+.column-choice-label {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    min-width: 0;
+    padding: 0.3rem 0;
+    cursor: pointer;
+}
+
+.column-choice-note {
+    color: var(--text-muted);
+    font-size: 0.78rem;
+}
+
+.icon-btn:disabled {
+    opacity: 0.3;
+    pointer-events: none;
+}
+
+.toolbar-slot {
+    display: inline-flex;
+}
+
+.cell-primary {
+    color: var(--text);
+}
+
+.cell-secondary {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+}
+
+/* Clamp: text never outgrows its cell (FRONTEND.md §14) */
+
+.clamp {
+    display: block;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+}
+
+.clamp-1 {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+/* Badges */
+
+.badges {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+    align-items: center;
+    gap: 0.2rem 0.3rem;
+    overflow: hidden;
+    /* Fixed at the row's two text lines, so a row with no badges is exactly
+       as tall as one with four, which wrap onto a second line rather than
+       being cut off (FRONTEND.md §14: like items share one height). */
+    height: 2.5rem;
+}
+
+.badge {
+    font-size: 0.68rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    padding: 0.1rem 0.45rem;
+    border-radius: 4px;
+    border: 1px solid currentColor;
+    line-height: 1.2;
+    white-space: nowrap;
+}
+
+.badge-success { color: var(--success); background: var(--row-selected); }
+.badge-danger { color: var(--danger); background: var(--danger-bg); }
+.badge-warning { color: var(--warning); background: var(--warning-bg); }
+.badge-info { color: var(--info); background: var(--info-bg); }
+.badge-muted { color: var(--text-muted); background: var(--muted-bg); }
+
+.row-actions {
+    display: flex;
+    gap: 0.15rem;
+}
+
+/* Pager */
+
+.pager {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.pager-summary {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+}
+
+/* ---------- Footer ---------- */
+
+.app-footer {
+    max-width: 1920px;
+    margin: 0 auto;
+    padding: 1.5rem 2rem 2.5rem;
+    border-top: 1px solid var(--border);
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+}
+
+.footer-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem 1.5rem;
+}
+
+.footer-copyright {
+    color: var(--text);
+}
+
+.footer-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem 1.1rem;
+}
+
+.footer-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    color: var(--text-muted);
+    text-decoration: none;
+}
+
+.footer-link:hover {
+    color: var(--primary);
+}
+
+.footer-legal {
+    font-size: 0.75rem;
+}
+
+.footer-copyright a,
+.footer-credits a {
+    color: inherit;
+}
+
+.footer-copyright a:hover,
+.footer-credits a:hover {
+    color: var(--primary);
+}
+
+/* ---------- Modal (FRONTEND.md §1.1) ---------- */
+
+#modal-root {
+    position: fixed;
+    inset: 0;
+    z-index: 200;
+}
+
+.modal-backdrop {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 8vh 1rem 2rem;
+    background: var(--backdrop);
+    backdrop-filter: blur(3px);
+    overflow-y: auto;
+    animation: fade-in 0.15s ease-out;
+}
+
+.modal {
+    width: min(520px, 100%);
+    background: var(--surface-solid);
+    animation: pop-in 0.18s ease-out;
+}
+
+.modal-wide {
+    width: min(760px, 100%);
+}
+
+.modal-title {
+    font-size: 0.9rem;
+    margin-left: 0.25rem;
+    flex: 1;
+}
+
+.modal-close {
+    margin-left: auto;
+}
+
+.modal-body {
+    padding: 1.4rem 1.5rem 0.5rem;
+}
+
+.modal-message {
+    margin-bottom: 1rem;
+}
+
+.modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 0.6rem;
+    padding: 1rem 1.5rem 1.4rem;
+}
+
+.detail-groups {
+    display: flex;
+    flex-direction: column;
+    gap: 1.1rem;
+}
+
+.detail-group-title {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--secondary);
+    margin-bottom: 0.45rem;
+}
+
+.detail-list {
+    display: grid;
+    grid-template-columns: 11rem 1fr;
+    gap: 0.45rem 1rem;
+    font-size: 0.85rem;
+}
+
+.detail-list dt {
+    color: var(--text-muted);
+}
+
+.detail-list dd {
+    overflow-wrap: anywhere;
+    min-width: 0;
+}
+
+.detail-json {
+    background: var(--code-bg);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 0.6rem;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    font-size: 0.8rem;
+}
+
+.edit-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    margin-bottom: 0.5rem;
+}
+
+.edit-row {
+    display: grid;
+    grid-template-columns: 1.4rem 9rem 1fr;
+    align-items: start;
+    gap: 0.6rem;
+}
+
+.edit-row .field-include {
+    margin-top: 0.7rem;
+}
+
+.edit-label {
+    padding-top: 0.6rem;
+    color: var(--text-muted);
+    font-size: 0.85rem;
+}
+
+.edit-control {
+    min-width: 0;
+}
+
+/* ---------- Toasts (FRONTEND.md §2) ---------- */
+
+.toast-root {
+    position: fixed;
+    right: 1.5rem;
+    bottom: 1.5rem;
+    z-index: 260;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    width: min(420px, calc(100vw - 2rem));
+}
+
+.toast {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.6rem;
+    padding: 0.8rem 0.9rem;
+    background: var(--surface-solid);
+    border: 1px solid var(--border-strong);
+    border-left: 3px solid var(--primary);
+    border-radius: var(--radius-small);
+    box-shadow: var(--shadow);
+    animation: slide-in 0.2s ease-out;
+}
+
+.toast-error { border-left-color: var(--danger); }
+.toast-error .toast-prompt { color: var(--danger); }
+.toast-info { border-left-color: var(--info); }
+
+.toast-prompt {
+    color: var(--primary);
+    font-weight: 700;
+}
+
+.toast-message {
+    flex: 1;
+    overflow-wrap: anywhere;
+}
+
+.toast-leaving {
+    animation: slide-out 0.2s ease-in forwards;
+}
+
+/* ---------- Motion ---------- */
+
+@keyframes blink {
+    50% { opacity: 0; }
+}
+
+@keyframes pulse {
+    0% { box-shadow: 0 0 0 0 var(--primary-glow); }
+    70% { box-shadow: 0 0 0 0.45rem transparent; }
+    100% { box-shadow: 0 0 0 0 transparent; }
+}
+
+@keyframes fade-in {
+    from { opacity: 0; }
+}
+
+@keyframes pop-in {
+    from { opacity: 0; transform: scale(0.97) translateY(-4px); }
+}
+
+@keyframes slide-in {
+    from { opacity: 0; transform: translateX(16px); }
+}
+
+@keyframes slide-out {
+    to { opacity: 0; transform: translateX(16px); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation: none !important;
+        transition: none !important;
+    }
+}
+
+/* ---------- Narrow screens (FRONTEND.md §12: reflow, never scroll sideways) ---------- */
+
+/* The Overview reflows by its own width: two columns of cards, then one. */
+@container overview-grid (width < 56rem) {
+    .overview-grid > .chart-card {
+        grid-column: 1 / -1;
+    }
+}
+
+@media (max-width: 1100px) {
+    .overview-top {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .overview-grid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+@media (max-width: 960px) {
+    main {
+        padding: 1.25rem 1rem 3rem;
+    }
+
+    .app-footer {
+        padding: 1.25rem 1rem 2rem;
+    }
+
+    .header-link span {
+        display: none;
+    }
+
+    .topbar {
+        padding: 0.8rem 1rem;
+    }
+
+    .batch-bar {
+        top: 3.6rem;
+    }
+}
+
+@media (max-width: 720px) {
+    .tabs {
+        flex-wrap: wrap;
+    }
+
+    .search-input {
+        width: 100%;
+    }
+
+    .toolbar-group {
+        width: 100%;
+    }
+
+    /* A segmented control spans the row and shares it evenly, rather than
+       pushing the page sideways (FRONTEND.md §12). */
+    .segmented {
+        width: 100%;
+    }
+
+    .segmented-btn {
+        flex: 1 1 auto;
+        padding: 0.35rem 0.45rem;
+    }
+
+    .edit-row {
+        grid-template-columns: 1.4rem 1fr;
+    }
+
+    .map-layout {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .edit-row .edit-control {
+        grid-column: 1 / -1;
+    }
+
+    .detail-list {
+        grid-template-columns: 1fr;
+    }
+
+    .metric-help dl {
+        grid-template-columns: 1fr;
+    }
+
+    .logo-text,
+    .version-badge {
+        display: none;
+    }
+
+    .topbar {
+        gap: 0.5rem;
+    }
+
+    .topbar-actions {
+        gap: 0.4rem;
+    }
+
+    /* Sign out keeps its name for assistive technology, and shows its icon. */
+    #logout-btn {
+        padding: 0.4rem 0.55rem;
+    }
+
+    #logout-btn span {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        white-space: nowrap;
+    }
+
+    .rank-table .rank-share {
+        display: none;
+    }
+
+    .rank-table .rank-num {
+        width: 4.2rem;
+    }
+
+    /* Hours stay readable: every sixth is labelled, cells get shorter. */
+    .heatmap {
+        grid-template-columns: 2.2rem repeat(24, minmax(0, 1fr));
+        gap: 1px;
+    }
+
+    .heatmap-cell {
+        height: 1rem;
+    }
+
+    .heatmap-hour:nth-child(6n + 5) {
+        visibility: hidden;
+    }
+}