@harshankur/viewcounter 3.1.0 → 3.2.0

package/admin/css/admin.css

@@ -233,6 +233,15 @@ textarea {
     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 {
@@ -281,12 +290,35 @@ textarea {
     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);
@@ -321,12 +353,18 @@ textarea {
     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: 1440px;
+    max-width: 1920px;
     margin: 0 auto;
-    padding: 1.75rem 2rem 6rem;
+    padding: 1.75rem 2rem 3rem;
 }
 
 /* ---------- Terminal window chrome ---------- */
@@ -733,7 +771,7 @@ textarea.input {
 
 .tab {
     display: inline-flex;
-    gap: 0.4rem;
+    gap: 0.5rem;
     align-items: center;
     padding: 0.7rem 1rem;
     border: none;
@@ -745,8 +783,8 @@ textarea.input {
     margin-bottom: -1px;
 }
 
-.tab .prompt-char {
-    opacity: 0.4;
+.tab .icon {
+    opacity: 0.7;
 }
 
 .tab:hover {
@@ -758,7 +796,7 @@ textarea.input {
     border-bottom-color: var(--primary);
 }
 
-.tab.active .prompt-char {
+.tab.active .icon {
     opacity: 1;
 }
 
@@ -810,10 +848,6 @@ textarea.input {
     transition: color 0.15s, border-color 0.15s, background-color 0.15s, box-shadow 0.2s;
 }
 
-.app-tab .prompt-char {
-    opacity: 0.4;
-}
-
 .app-tab:hover {
     color: var(--text);
     border-color: var(--border-strong);
@@ -826,10 +860,6 @@ textarea.input {
     box-shadow: 0 0 12px var(--primary-glow);
 }
 
-.app-tab.active .prompt-char {
-    opacity: 1;
-}
-
 .app-tab.unavailable {
     opacity: 0.55;
     text-decoration: line-through;
@@ -854,95 +884,528 @@ textarea.input {
     font-size: 0.85rem;
 }
 
-/* ---------- Insights ---------- */
-
-.insights {
+/* Each section says what it is and how it differs from the others. */
+.panel-header {
     display: flex;
     flex-direction: column;
-    gap: 0.9rem;
-    transition: opacity 0.2s;
+    gap: 0.3rem;
 }
 
-/* Refetch keeps the frame: the last render stays, dimmed, until the new one. */
-.insights.loading .insights-body {
-    opacity: 0.55;
+.panel-title {
+    font-size: 1.25rem;
 }
 
-.insights-header {
+.panel-intro {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+    max-width: 62rem;
+}
+
+.filter-chips {
     display: flex;
-    align-items: baseline;
-    gap: 0.9rem;
     flex-wrap: wrap;
+    align-items: center;
+    gap: 0.4rem;
 }
 
-.insights-toggle {
+.filter-chips:empty {
+    display: none;
+}
+
+.chip {
     display: inline-flex;
     align-items: center;
-    gap: 0.45rem;
+    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;
-    font-size: 1rem;
-    padding: 0;
+    letter-spacing: -0.02em;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-.insights-caret {
+.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;
-    transition: transform 0.2s;
+    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;
 }
 
-.insights-toggle[aria-expanded='false'] .insights-caret {
-    transform: rotate(-90deg);
+.card-wide {
+    grid-column: 1 / -1;
 }
 
-.insights-caption,
-.insights-span {
+.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;
 }
 
-.insights-body {
+.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;
-    gap: 1rem;
+    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;
 }
 
-.stat-tiles {
+/* Weekday by hour */
+
+.heatmap {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
-    gap: 0.75rem;
+    grid-template-columns: 3rem repeat(24, minmax(0, 1fr));
+    gap: 2px;
+    align-items: center;
 }
 
-.stat-tile {
-    padding: 0.85rem 1rem;
-    background: var(--card-bg);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-small);
+.heatmap:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 4px;
+    border-radius: 4px;
 }
 
-.stat-label {
+.heatmap-hour,
+.heatmap-day {
     color: var(--text-muted);
-    font-size: 0.78rem;
+    font-size: 0.68rem;
+    white-space: nowrap;
 }
 
-.stat-value {
-    font-size: 1.6rem;
-    font-weight: 700;
-    letter-spacing: -0.02em;
+.heatmap-hour {
+    overflow: visible;
 }
 
-.insights-grid {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
-    gap: 1rem;
+.heatmap-cell {
+    display: block;
+    height: 1.35rem;
+    border-radius: 3px;
 }
 
-.breakdown-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
-    gap: 1rem;
+.heatmap-cell.active {
+    outline: 2px solid var(--text);
+    outline-offset: -1px;
+}
+
+.heatmap-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.7rem;
 }
 
 .chart-card {
@@ -1106,39 +1569,40 @@ textarea.input {
     flex-shrink: 0;
 }
 
-/* Breakdown bars and the country list */
+/* The country list beside the map */
 
-.bar-list,
 .country-list {
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: 0.2rem;
     list-style: none;
 }
 
-.bar-row,
 .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;
-    padding: 0.1rem 0.25rem;
+    color: inherit;
+    text-align: left;
+    padding: 0.2rem 0.3rem;
+    border: none;
     border-radius: 4px;
-    cursor: default;
+    background: transparent;
+}
+
+button.country-row {
+    cursor: pointer;
 }
 
-.bar-row:hover,
-.bar-row:focus-visible,
 .country-row:hover,
 .country-row:focus-visible {
     background: var(--row-hover);
 }
 
-.bar-other .bar-label {
-    color: var(--text-muted);
-}
-
 .bar-track {
     display: block;
     height: 10px;
@@ -1152,11 +1616,6 @@ textarea.input {
     border-radius: 0 4px 4px 0;
 }
 
-.bar-other .bar-fill {
-    background: var(--text-muted);
-    opacity: 0.6;
-}
-
 .bar-value {
     font-variant-numeric: tabular-nums;
     color: var(--text);
@@ -1201,6 +1660,10 @@ textarea.input {
     stroke-width: 2;
 }
 
+.country.selectable {
+    cursor: pointer;
+}
+
 .country.active {
     stroke: var(--text);
     stroke-width: 1;
@@ -1384,162 +1847,245 @@ input[type='checkbox'] {
     cursor: pointer;
 }
 
-.col-select { width: 2.6rem; }
-.col-time { width: 8.5rem; }
-.col-app { width: 8rem; }
-.col-page { width: auto; }
-.col-source { width: 9.5rem; }
-.col-device { width: 6.5rem; }
-.col-country { width: 5.5rem; }
-.col-client { width: 8rem; }
-.col-event { width: 7rem; }
-.col-status { width: 10.5rem; }
-.col-actions { width: 8.5rem; }
-
-.log-table .col-action { width: 11rem; }
-.log-table .col-app { width: 9rem; }
-.log-table .col-rows { width: 5rem; }
-.log-table .col-fields { width: auto; }
-.log-table .col-session { width: 7rem; }
-.log-table .col-ip { width: 11rem; }
-.log-table .col-source { width: 8rem; }
-.log-table .col-event { width: 9rem; }
-.log-table .col-unique { width: 6rem; }
-.log-table .col-view { width: auto; }
-
 /*
- * Reflow (FRONTEND.md §12). A table answers to its own width, not the
- * viewport's: it drops optional columns, least useful first, and becomes cards
- * where even its essential columns no longer fit (views below 53rem, logs
- * below 46rem). Each threshold is the width at which the columns still shown
- * leave the flexible column (page, fields, or view) at least 13rem:
- *
- *   views, one app   always 39.6 (select, time, source, status, actions);
- *                    + event 7 from 60, country 5.5 from 65.5,
- *                    device 6.5 from 72, client 8 from 80
- *   views, All apps  the same plus app 8, so each step comes 8rem later;
- *                    source also steps aside between the cards and 61
- *   admin log        always 45.5; + ip 11 from 57, session 7 from 64
- *   view log         always 40.5; + view ID 12 from 53
+ * 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.
  */
-.table-wrap {
-    container: table / inline-size;
+
+.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;
 }
 
-/* One app's tab already names the app. */
-.views-table:not(.has-app) .col-app {
+.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;
 }
 
-@container table (width < 88rem) {
-    .views-table.has-app .col-client { display: none; }
+.data-table.cards,
+.data-table.cards tbody,
+.data-table.cards tr,
+.data-table.cards td {
+    display: block;
+    width: 100%;
 }
 
-@container table (width < 80rem) {
-    .views-table .col-client,
-    .views-table.has-app .col-device { display: none; }
+.data-table.cards tbody tr {
+    height: auto;
+    position: relative;
+    padding: 0.6rem 0.8rem;
+    border-bottom: 1px solid var(--border);
 }
 
-@container table (width < 73.5rem) {
-    .views-table.has-app .col-country { display: none; }
+.data-table.cards td {
+    border: none;
+    padding: 0.15rem 0;
 }
 
-@container table (width < 72rem) {
-    .views-table .col-device { display: none; }
+.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;
 }
 
-@container table (width < 68rem) {
-    .views-table.has-app .col-event { display: none; }
+.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);
 }
 
-@container table (width < 65.5rem) {
-    .views-table .col-country { display: none; }
+.data-table.cards td[data-label] > * {
+    grid-column: 2;
 }
 
-@container table (width < 64rem) {
-    .log-table .col-session { display: none; }
+/* A badge keeps its own width; only text fills the value column. */
+.data-table.cards td[data-label] > .badge {
+    justify-self: start;
 }
 
-@container table (53rem <= width < 61rem) {
-    .views-table.has-app .col-source { display: none; }
+/* The left gutter of a views card holds its checkbox. */
+.views-table.cards tbody tr:not(.row-more) {
+    padding-left: 2.8rem;
 }
 
-@container table (width < 60rem) {
-    .views-table .col-event { display: none; }
+.views-table.cards td.col-select {
+    position: absolute;
+    left: 0.8rem;
+    top: 0.8rem;
+    width: auto;
+    padding: 0;
 }
 
-@container table (width < 57rem) {
-    .log-table .col-ip { display: none; }
+/* 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;
 }
 
-@container table (width < 53rem) {
-    .log-table .col-view {
-        display: none;
-    }
+.data-table.cards .col-more .btn {
+    padding-left: 0;
+}
 
-    .views-table thead {
-        display: none;
-    }
+.data-table.cards tr.row-more {
+    padding-top: 0;
+}
 
-    .views-table,
-    .views-table tbody,
-    .views-table tr,
-    .views-table td {
-        display: block;
-        width: 100%;
-    }
+.data-table.cards .more-list {
+    grid-template-columns: 6.5rem minmax(0, 1fr);
+    column-gap: 0.75rem;
+    row-gap: 0.3rem;
+    padding: 0;
+}
 
-    /* The left gutter holds the row's checkbox. */
-    .views-table tbody tr {
-        height: auto;
-        position: relative;
-        padding: 0.6rem 0.8rem 0.6rem 2.8rem;
-        border-bottom: 1px solid var(--border);
-    }
+.views-table.cards .more-list {
+    padding-left: 2rem;
+}
 
-    .views-table td {
-        border: none;
-        padding: 0.15rem 0;
-    }
+/* 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;
+}
 
-    .views-table td.col-select {
-        position: absolute;
-        left: 0.8rem;
-        top: 0.8rem;
-        width: auto;
-    }
+.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;
+}
 
-    /* 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. */
-    .views-table .badges {
-        height: 1.4rem;
-    }
+.column-choice:hover {
+    background: var(--row-hover);
 }
 
-/* Log rows have no checkbox, so their cards need no gutter. */
-@container table (width < 46rem) {
-    .log-table thead {
-        display: none;
-    }
+.column-choice-label {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    min-width: 0;
+    padding: 0.3rem 0;
+    cursor: pointer;
+}
 
-    .log-table,
-    .log-table tbody,
-    .log-table tr,
-    .log-table td {
-        display: block;
-        width: 100%;
-    }
+.column-choice-note {
+    color: var(--text-muted);
+    font-size: 0.78rem;
+}
 
-    .log-table tbody tr {
-        height: auto;
-        padding: 0.6rem 0.8rem;
-        border-bottom: 1px solid var(--border);
-    }
+.icon-btn:disabled {
+    opacity: 0.3;
+    pointer-events: none;
+}
 
-    .log-table td {
-        border: none;
-        padding: 0.15rem 0;
-    }
+.toolbar-slot {
+    display: inline-flex;
 }
 
 .cell-primary {
@@ -1597,6 +2143,7 @@ input[type='checkbox'] {
     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); }
@@ -1621,6 +2168,64 @@ input[type='checkbox'] {
     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 {
@@ -1678,6 +2283,20 @@ input[type='checkbox'] {
     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;
@@ -1782,6 +2401,12 @@ input[type='checkbox'] {
     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; }
 }
@@ -1809,15 +2434,34 @@ input[type='checkbox'] {
 
 /* ---------- Narrow screens (FRONTEND.md §12: reflow, never scroll sideways) ---------- */
 
-@media (max-width: 1180px) {
-    .insights-grid {
+/* 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 5rem;
+        padding: 1.25rem 1rem 3rem;
+    }
+
+    .app-footer {
+        padding: 1.25rem 1rem 2rem;
+    }
+
+    .header-link span {
+        display: none;
     }
 
     .topbar {
@@ -1869,7 +2513,56 @@ input[type='checkbox'] {
         grid-template-columns: 1fr;
     }
 
-    .logo-text {
+    .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;
+    }
 }