/* Dashboard shell (R9 / 4.1b) — handwritten, no framework, CSP-safe.
   The monitor cards, sparkline strips, status badges and expiry rows reuse
   share.css classes (one source of truth with the share page); this file is
   only the chrome: header, stats grid, add form, list layout, states. */

body.dashboard-body {
  background-color: #292524; /* stone-800 */
  color: #F6A600; /* duckie */
  min-height: 100vh;
  margin: 0;
  /* ONE font stack with share.css (.share-body) — two stacks on one page
     is a real render difference, not a style preference. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.dash-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(68, 64, 60, 0.95); /* stone-700/95 */
  backdrop-filter: blur(8px); /* share.css .site-header parity */
  border-bottom: 1px solid rgba(246, 166, 0, 0.2);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

.dash-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
}

.dash-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: right;
  min-width: 0;
}

.dash-email {
  color: #d6d3d1;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-badge {
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  /* A long badge ("Duckling trial · 6d left") truncates on phones instead
     of pushing the buttons off the header (AppHeader's truncate). */
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-badge-active { color: #F6A600; }
.plan-badge-paused { color: #fca5a5; } /* red-300, matches AppHeader's paused colour */
.plan-badge-none { color: #d6d3d1; }

.dash-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  min-width: 0;
}

.dash-header-inner > .logo-link { flex: none; }
.dash-header-actions > :not(.dash-identity) { flex: none; }
.dash-identity-link { text-decoration: none; }
.dash-identity-link:hover { opacity: 0.8; }

/* Billing button (AppHeader's duckie CTA). Short label on phones. */
.btn-plan {
  background: #F6A600;
  border-radius: 0.5rem;
  color: #292524;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.375rem 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}
.btn-plan:hover { background: #eab308; }
.btn-plan .cta-full { display: none; }
@media (min-width: 640px) {
  .btn-plan .cta-full { display: inline; }
  .btn-plan .cta-short { display: none; }
}

/* Profile button: pencil as a CSS mask (img-src allows data:). */
.btn-icon {
  align-items: center;
  border: 1px solid #57534e;
  border-radius: 0.5rem;
  color: #d6d3d1;
  display: inline-flex;
  flex: none;
  height: 2.125rem;
  justify-content: center;
  width: 2.25rem;
}
.btn-icon:hover { border-color: #a8a29e; color: #f5f5f4; }
.btn-icon::before {
  background-color: currentColor;
  content: "";
  height: 1rem;
  mask: center / contain no-repeat;
  width: 1rem;
}
.btn-profile::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E"); }

/* Phones: the logo gets its own row, the controls a second one, where the
   plan badge takes the free width and truncates. */
@media (max-width: 639px) {
  .dash-header-inner { flex-wrap: wrap; row-gap: 0.625rem; }
  .dash-header-actions { flex: 1 0 100%; }
  .dash-header-actions .dash-identity { flex: 1 1 auto; text-align: left; }
  .dash-header-actions .dash-email { display: none; }
}

.dash-logout-form { margin: 0; }

.btn-secondary {
  background: transparent;
  border: 1px solid #57534e;
  border-radius: 0.5rem;
  color: #d6d3d1;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  padding: 0.375rem 0.875rem;
  white-space: nowrap;
}

.btn-secondary:hover { border-color: #a8a29e; color: #f5f5f4; }

/* ── Reconnect banner (poll failure is a state, not a dead page) ────────── */

.reconnect-banner {
  background: rgba(239, 68, 68, 0.15);
  border-bottom: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  text-align: center;
}

.reconnect-dot,
.reconnect-dot::before {
  display: inline-block;
  width: 0.5rem;
}

.reconnect-dot::before { content: "●"; }

/* ── Layout ─────────────────────────────────────────────────────────────── */

.dash-main { padding-top: 1.5rem; }
.dash-content { display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Stats grid ─────────────────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 auto;
  max-width: 56rem;
  width: 100%;
}

@media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat-card {
  background: rgba(87, 83, 78, 0.4); /* stone-700/40 */
  border: 1px solid rgba(68, 64, 60, 0.5);
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: center;
}

.stat-value {
  color: #F6A600;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
}

.stat-limit { color: #a8a29e; font-size: 1.125rem; }
.stat-paused { color: #f87171; }
.stat-warn { color: #fbbf24; }

.stat-label {
  color: #a8a29e;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

/* ── Panels / add form ──────────────────────────────────────────────────── */

.panel {
  background: #292524;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  padding: 1rem;
}

@media (min-width: 1024px) { .panel { padding: 1.5rem; } }

.panel-title {
  color: #F6A600;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.add-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .add-form { flex-direction: row; }
  .add-input { flex: 1; }
}

.add-input {
  background: #44403c;
  border: 1px solid #57534e;
  border-radius: 0.5rem;
  color: #f5f5f4;
  font: inherit;
  padding: 0.75rem 1rem;
  width: 100%;
}

.add-input::placeholder { color: #a8a29e; }
.add-input:focus { border-color: #F6A600; outline: none; }

/* The add form's result line: success (stone-400) or error (red) — and the
   upgrade CTA link inside it. textContent only, CSP-safe. */
.add-note {
  color: #a8a29e; /* stone-400 */
  font-size: 0.875rem;
  margin-top: 0.75rem;
}
.add-note-error { color: #f87171; } /* red-400 — readable on the panel */
.add-note a,
.card-error a { color: #F6A600; text-decoration: underline; }

/* ── Card actions (4.1c writes): pause/resume + delete, inline confirm,
   and the per-card error line. JS builds the same nodes the template does.
   Quiet ghost buttons with CSS-mask icons (img-src allows data:, and the JS
   relabels via textContent, so the icons must live outside the text).
   Delete sits apart on the right and only turns red on hover/confirm. */
.card-actions {
  align-items: center;
  border-top: 1px solid #3a3532;
  display: flex;
  flex-wrap: wrap; /* the row wraps on a 320-375px card */
  gap: 0.25rem;
  margin-top: 0.75rem;
  padding-top: 0.625rem;
}

.btn-action {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: #d6d3d1;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  gap: 0.375rem;
  line-height: 1.25rem;
  padding: 0.3125rem 0.625rem;
  transition: background-color 120ms, color 120ms;
}
.btn-action:hover { background: #44403c; color: #fafaf9; }
.btn-action:focus-visible { outline: 2px solid #F6A600; outline-offset: 1px; }
.btn-action:disabled { cursor: wait; opacity: 0.6; }
.btn-action[data-action="share"]::before,
.btn-action[data-action="delete"]::before,
.btn-action[data-action="expand"]::after {
  background-color: currentColor;
  content: "";
  flex: none;
  height: 0.9375rem;
  mask: center / contain no-repeat;
  width: 0.9375rem;
}
.btn-action[data-action="share"]::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='m16 6-4-4-4 4'/%3E%3Cpath d='M12 2v13'/%3E%3C/svg%3E"); }
.btn-action[data-action="delete"]::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }
.btn-action[data-action="expand"]::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); transition: transform 150ms; }
.btn-action[data-action="expand"][aria-expanded="true"] { background: rgba(246, 166, 0, 0.12); color: #F6A600; }
.btn-action[data-action="expand"][aria-expanded="true"]::after { transform: rotate(180deg); }
.btn-danger { color: #a8a29e; margin-left: auto; }
.btn-danger:hover { background: rgba(127, 29, 29, 0.35); color: #fca5a5; }
.btn-danger-confirm,
.btn-danger-confirm:hover { background: #b91c1c; color: #fff; }

.card-error {
  color: #f87171;
  font-size: 0.8125rem;
  margin-top: 0.5rem;
}

/* The share header's title sizing, reused here (class moved to share.css). */
.auth-title-dash { margin: 1.5rem 0 1rem; }

/* ── Monitor list ───────────────────────────────────────────────────────── */

.list-title {
  color: #F6A600;
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.monitor-list { display: flex; flex-direction: column; gap: 1rem; }

/* Paused monitor: dimmed, like the React card's opacity-60. */
.monitor-card.card-paused .card-padding { opacity: 0.6; }

/* The share page centers one card; the dashboard stacks full-width ones.
   (Override share.css' .main-content centering for this page only.) */
.dash-main .monitor-card { max-width: none; }

.card-meta {
  align-items: center;
  color: #a8a29e;
  column-gap: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  margin-top: 1rem;
  row-gap: 0.25rem;
}

/* ── Expand panel (3a): single-open accordion detail view ─────────────────
   All colors match the share page's stone palette (no inline styles — CSP). */

.monitor-expand { border-top: 1px solid #44403c; margin-top: 1rem; }
.monitor-expand[hidden] { display: none; }

.expand-toggle[aria-expanded="true"] { border-color: #F6A600; color: #F6A600; }

.expand-body { display: flex; flex-direction: column; gap: 1rem; padding-top: 1rem; }

/* Time-range switcher — CSS-class active state, never inline. */
.tr-switcher { display: flex; gap: 0.25rem; }
.tr-btn {
  background: #292524; border: 1px solid #57534e; border-radius: 0.375rem;
  color: #a8a29e; cursor: pointer; font-size: 0.75rem; padding: 0.25rem 0.6rem;
}
.tr-btn-active { background: #78716c; border-color: #F6A600; color: #F6A600; }

/* Chart block: attribute-only SVG; axis text / strokes are styles from here. */
/* The SVG is drawn at the panel's real width (dashboard.js lhChartWidth), so
   these sizes are true pixels, never scaled. */
.chart-block { background: #292524; border-radius: 0.5rem; padding: 0.75rem 0.75rem 0.5rem; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 0.5rem; }
.chart-legend-item { align-items: center; color: #d6d3d1; display: flex; font-size: 0.75rem; gap: 0.4rem; }
.chart-dot { flex: none; }
.legend-value { color: #a8a29e; font-family: ui-monospace, monospace; font-size: 0.75rem; }
.legend-outage { background: #EF4444; border-radius: 1px; display: inline-block; height: 4px; width: 12px; }
.chart-note { color: #a8a29e; font-size: 0.6875rem; margin-top: 0.25rem; text-align: right; }
.history-chart { display: block; height: auto; max-width: 100%; touch-action: pan-y; width: 100%; }
.chart-grid { stroke: #44403c; stroke-width: 1; }
.chart-baseline { stroke: #57534e; stroke-width: 1; }
.chart-tick { stroke: #57534e; stroke-width: 1; }
.chart-axis-text { fill: #a8a29e; font-size: 11px; }
.chart-slow-line { stroke: #F59E0B; stroke-dasharray: 4 4; stroke-opacity: 0.6; stroke-width: 1; }
.chart-slow-text { fill: #F59E0B; fill-opacity: 0.8; font-size: 10px; }
.band-wash { fill: #EF4444; fill-opacity: 0.08; }
.band-bar { fill: #EF4444; }
.chart-hit { cursor: crosshair; fill: transparent; }
.chart-guide { pointer-events: none; stroke: #a8a29e; stroke-dasharray: 2 3; stroke-width: 1; }
.chart-dot-ring { pointer-events: none; stroke: #292524; stroke-width: 1.5; }

/* Tooltip: an SVG <g> INSIDE the chart (moved via the transform ATTRIBUTE —
   CSP style-src 'self' allows no inline styles, so no HTML tip + positioning). */
.chart-tip { pointer-events: none; }
.chart-tip-box {
  fill: #1c1917; fill-opacity: 0.95; stroke: #57534e; stroke-width: 1;
}
.chart-tip-title { fill: #fbbf24; font-size: 11px; font-weight: 600; }
.chart-tip-text { fill: #d6d3d1; font-size: 11px; }
.chart-tip-value { fill: #f5f5f4; font-family: ui-monospace, monospace; font-size: 11px; }
.chart-tip-offline { fill: #F87171; font-size: 11px; font-weight: 600; }

/* Degradation callout + checks grid: the share page's classes (shared CSS),
   referenced here so the panel's shapes are identical to /s/<token>. */

.expand-section .check-cat-header { margin-top: 0.75rem; }
.check-cat-bar { height: 4px; margin: 0.25rem 0 0.5rem; }
.check-cat-bar-svg { display: block; width: 200px; }
.check-cat-grid { display: grid; gap: 0.5rem; grid-template-columns: 1fr 1fr; }
.check-card { background: #292524; border: 1px solid #57534e; border-radius: 0.5rem; padding: 0.5rem 0.75rem; }
.check-name { color: #d6d3d1; font-size: 0.8rem; }
.check-points { color: #a8a29e; float: right; font-size: 0.75rem; font-family: ui-monospace, monospace; }
.check-message { color: #a8a29e; font-size: 0.7rem; margin: 0.25rem 0 0; }

.expand-heading { color: #F6A600; font-size: 0.9rem; font-weight: 600; margin: 0; }
.expand-section { color: #d6d3d1; }
.warn-item { background: #292524; border-radius: 0.5rem; font-size: 0.8rem; margin-top: 0.3rem; padding: 0.6rem 0.75rem; }

/* Timing breakdown table */
.timing-table { border-collapse: collapse; font-size: 0.75rem; width: 100%; }
.timing-table th {
  border-bottom: 1px solid #44403c; color: #a8a29e; font-weight: 600;
  padding: 0.35rem 0.35rem; text-align: right; text-transform: uppercase;
}
.timing-table th:first-child, .timing-table th:nth-child(2) { text-align: left; }
.timing-table td { border-bottom: 1px solid #44403c; color: #d6d3d1; padding: 0.4rem 0.35rem; }
.timing-table td.t-num { font-family: ui-monospace, monospace; text-align: right; }
.timing-table td.t-ttfb { color: #fbbf24; font-weight: 600; }
.t-sub { color: #a8a29e; display: block; font-size: 0.65rem; }

/* Loading / empty / error client states (no server render carries these) */
.expand-loading {
  background: #292524; border-radius: 0.5rem; height: 96px; position: relative;
  overflow: hidden;
}
.expand-loading::after {
  background: linear-gradient(90deg, transparent, #44403c, transparent);
  content: ''; display: block; height: 100%; left: -100%;
  position: relative; top: 0; width: 50%;
  animation: expand-shimmer 1.2s linear infinite;
}
@keyframes expand-shimmer { to { left: 150%; } }
.expand-empty { color: #a8a29e; font-size: 0.85rem; text-align: center; }
.expand-error { color: #fbbf24; font-size: 0.85rem; }
.expand-retry {
  margin-left: 0.5rem; background: #292524; border: 1px solid #F6A600;
  border-radius: 0.375rem; color: #F6A600; cursor: pointer; font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
}

/* ── Empty state ────────────────────────────────────────────────────────── */

.empty-state { padding: 3rem 1.5rem; text-align: center; }
@media (min-width: 1024px) { .empty-state { padding: 3rem; } }

.empty-title { color: #d6d3d1; font-size: 1.25rem; font-weight: 600; margin: 0 0 0.5rem; }
.empty-text { color: #a8a29e; margin: 0; }

/* ── Share dialog (4.1e): ShareDialog.tsx as a page-level singleton ────────
   Approved deviation: React's desktop popover anchors with inline
   positioning — CSP style-src 'self' forbids inline styles, so the MOBILE
   treatment (fixed centered modal + backdrop) serves ALL viewports; the
   share page's own CSP-clean precedent. Class-based only. The stone/tailwind
   palette matches the React dialog (stone-800 card, duckie primary). */

.share-backdrop {
  background: rgba(0, 0, 0, 0.5); /* React's bg-black/50 */
  inset: 0;
  position: fixed;
  z-index: 100; /* above the sticky header (z-index: 50) */
}
.share-backdrop[hidden] { display: none; }

.share-dialog {
  background: #292524; /* stone-800 */
  border: 1px solid #57534e; /* stone-600 */
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* shadow-2xl */
  left: 50%;
  max-height: calc(100dvh - 2rem); /* dvh: iOS toolbar can't hide Revoke */
  overflow-y: auto;
  overscroll-behavior: contain;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%); /* class-based centering — no inline */
  width: min(32rem, calc(100vw - 2rem)); /* roomy on desktop, 1rem gutters on a phone */
  z-index: 101;
}
.share-dialog[hidden] { display: none; }
body.share-open { overflow: hidden; } /* the page behind the modal stays put */

.share-dialog-header {
  align-items: center;
  border-bottom: 1px solid #44403c;
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 1rem;
}
.share-dialog-title { color: #e7e5e4; font-size: 0.875rem; font-weight: 600; margin: 0; }
.share-close {
  background: transparent;
  border: none;
  color: #a8a29e; /* stone-500 */
  cursor: pointer;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 0.125rem;
}
.share-close:hover { color: #d6d3d1; }

.share-dialog-body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; }

.share-monitor-url {
  color: #a8a29e;
  font-size: 0.75rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-error {
  background: rgba(127, 29, 29, 0.2); /* red-900/20 */
  border-radius: 0.5rem;
  color: #f87171; /* red-400 */
  font-size: 0.75rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
}

/* Token state: URL row + the embed section + revoke. */
.share-url-row { display: flex; gap: 0.5rem; }
.share-url-input {
  background: #44403c; /* stone-700 */
  border: 1px solid #57534e;
  border-radius: 0.5rem;
  color: #e7e5e4;
  flex: 1;
  font: inherit;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  min-width: 0;
  padding: 0.5rem 0.75rem;
}
.share-url-input:focus { border-color: #F6A600; outline: none; }
.share-copy-main {
  background: #F6A600; /* duckie */
  border: none;
  border-radius: 0.5rem;
  color: #1c1917; /* stone-900 */
  cursor: pointer;
  flex: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
}
.share-copy-main:hover { background: #facc15; } /* yellow-400 */

.share-info { color: #a8a29e; font-size: 0.75rem; line-height: 1.625; margin: 0; }

.share-ai-callout {
  background: rgba(68, 64, 60, 0.4); /* stone-700/40 */
  border: 1px solid rgba(87, 83, 78, 0.5); /* stone-600/50 */
  border-radius: 0.5rem;
  color: #d6d3d1; /* stone-300 */
  font-size: 0.75rem;
  line-height: 1.625;
  padding: 0.625rem 0.75rem;
}
.share-ai-strong { color: #F6A600; font-weight: 600; }

.share-embed {
  border-top: 1px solid #44403c;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-top: 0.75rem;
}
.share-embed-head { align-items: center; display: flex; justify-content: space-between; }
.share-embed-label { color: #d6d3d1; font-size: 0.75rem; font-weight: 600; }
.share-theme-group {
  background: #44403c;
  border: 1px solid #57534e;
  border-radius: 0.375rem;
  display: flex;
  gap: 0.125rem;
  padding: 0.125rem;
}
.share-theme-btn {
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  color: #a8a29e;
  cursor: pointer;
  font: inherit;
  font-size: 0.625rem; /* 10px, React's text-[10px] */
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  text-transform: capitalize;
}
.share-theme-btn:hover { color: #e7e5e4; }
.share-theme-btn-active { background: #F6A600; color: #1c1917; }

.share-badge-preview {
  background: #1c1917; /* stone-900 — the dark theme's page */
  border: 1px solid #57534e;
  border-radius: 0.5rem;
  padding: 0.75rem;
}
.share-badge-preview-light { background: #f5f5f4; border-color: #d6d3d1; } /* stone-100/stone-300 */
.share-preview-label {
  color: #a8a29e;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  text-align: center;
  text-transform: uppercase;
}
.share-preview-row { display: flex; justify-content: center; }

.share-snippet { display: flex; flex-direction: column; gap: 0.25rem; }
.share-snippet-head { align-items: center; display: flex; justify-content: space-between; }
.share-snippet-label { color: #a8a29e; font-size: 0.75rem; }
.share-copy-btn {
  background: none;
  border: none;
  color: #a8a29e;
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  padding: 0;
}
.share-copy-btn:hover { color: #F6A600; }
.share-snippet-code {
  background: #44403c;
  border: 1px solid #57534e;
  border-radius: 0.5rem;
  color: #e7e5e4;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  margin: 0;
  overflow-x: auto;
  padding: 0.5rem 0.75rem;
  white-space: pre;
}

.share-revoke {
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.3); /* red-500/30 */
  border-radius: 0.5rem;
  color: #f87171; /* red-400 */
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  width: 100%;
}
.share-revoke:hover { background: rgba(127, 29, 29, 0.2); border-color: rgba(239, 68, 68, 0.5); }
.share-revoke:disabled { cursor: not-allowed; opacity: 0.5; }

.share-generate {
  background: #F6A600;
  border: none;
  border-radius: 0.5rem;
  color: #1c1917;
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.625rem 1rem;
  width: 100%;
}
.share-generate:hover { background: #facc15; }
.share-generate:disabled { cursor: not-allowed; opacity: 0.5; }

/* The execCommand fallback's helper: class-hidden, NEVER style-hidden
   (CSP style-src 'self'; the module never touches .style — pinned). */
.share-copy-helper {
  opacity: 0;
  pointer-events: none;
  position: fixed;
}

/* ── 4.1f: the card's "Changed X" shading (page.tsx: >30d amber, >90d red) ── */
.meta-changed.content-stale-30 { color: #fbbf24; } /* amber-400 */
.meta-changed.content-stale-90 { color: #f87171; } /* red-400 */

/* ── Pause switch (PauseToggle.tsx): h-6 w-11 track, h-4 w-4 knob, the
   knob slides on a transform transition — class-driven, no inline style. ── */
.pause-switch {
  align-items: center;
  background: #ca8a04; /* yellow-600: active */
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 1.5rem;
  padding: 0;
  transition: background-color 200ms ease-in-out;
  width: 2.75rem;
}
.pause-switch.is-paused { background: #57534e; } /* stone-600 */
.pause-switch:focus-visible { outline: 2px solid #eab308; outline-offset: 2px; }
.pause-switch:disabled { cursor: wait; opacity: 0.5; }
.pause-knob {
  background: #000;
  border-radius: 9999px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  display: inline-block;
  height: 1rem;
  transform: translateX(1.5rem); /* translate-x-6 */
  transition: transform 200ms ease-in-out;
  width: 1rem;
}
.pause-switch.is-paused .pause-knob {
  background: #44403c; /* stone-700 */
  transform: translateX(0.25rem); /* translate-x-1 */
}
.pause-state { align-self: center; color: #F6A600; font-size: 0.75rem; } /* text-duckie */
.action-divider { align-self: center; background: #44403c; height: 1rem; margin: 0 0.375rem; width: 1px; }

/* ── 4.1g: Performance by location (GeoPerformanceStrip.tsx) ──────────────
   Desktop (lg, ≥1024px): React's 7-column grid. Below it: React's mobile
   summary — city (+ alert) and current on one line, baseline under it, no
   fold-out. Class-driven only (CSP). */
.perf-strip { margin-top: 1rem; }
.perf-title {
  border-bottom: 1px solid rgba(68, 64, 60, 0.4); /* stone-700/40 */
  color: #a8a29e; /* stone-400 */
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
  padding-bottom: 0.25rem;
  text-transform: uppercase;
}
.perf-head { display: none; }
.perf-geo + .perf-geo { border-top: 1px solid rgba(41, 37, 36, 0.6); } /* divide-stone-800/60 */
.perf-row {
  align-items: center;
  column-gap: 0.75rem;
  display: grid;
  font-size: 0.875rem;
  grid-template-areas: "name current" "base base";
  grid-template-columns: 1fr auto;
  padding: 0.5rem 0;
}
.perf-name { align-items: center; display: flex; gap: 0.5rem; grid-area: name; min-width: 0; }
.perf-current { grid-area: current; }
.perf-baseline { grid-area: base; text-align: left; }
.perf-p5, .perf-p95, .perf-uptime, .perf-badge-cell, .perf-toggle { display: none; }
.perf-r { text-align: right; }
.perf-city { color: #a8a29e; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perf-ms { color: #f5f5f4; font-family: ui-monospace, monospace; } /* stone-100 */
.perf-ms.perf-none { color: #a8a29e; }
.perf-base { color: #a8a29e; font-family: ui-monospace, monospace; font-size: 0.75rem; }
.perf-learning { color: #a8a29e; font-family: ui-monospace, monospace; font-size: 0.75rem; }
.perf-stat { color: #d6d3d1; font-family: ui-monospace, monospace; font-size: 0.75rem; }
.perf-mobile-alert { align-items: center; display: inline-flex; gap: 0.375rem; }
.perf-ago { color: #a8a29e; font-size: 0.75rem; }
.perf-badge { border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; padding: 0.125rem 0.375rem; }
.perf-badge-warning { background: rgba(245, 158, 11, 0.2); color: #fbbf24; } /* amber-500/20, amber-400 */
.perf-badge-alert { background: rgba(249, 115, 22, 0.2); color: #fb923c; } /* orange-500/20, orange-400 */

@media (min-width: 1024px) {
  .perf-head,
  .perf-row {
    column-gap: 0.75rem;
    display: grid;
    grid-template-areas: none;
    grid-template-columns: 1fr 72px 72px 100px 100px 56px 76px;
  }
  .perf-head {
    align-items: center;
    border-bottom: 1px solid #292524; /* stone-800 */
    color: #a8a29e; /* stone-600 */
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    padding-bottom: 0.375rem;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .perf-name, .perf-current, .perf-baseline { grid-area: auto; }
  .perf-baseline { text-align: right; }
  .perf-p5, .perf-p95, .perf-uptime { display: block; }
  .perf-badge-cell { align-items: center; display: flex; }
  .perf-toggle {
    align-items: center;
    background: none;
    border: none;
    color: #a8a29e;
    cursor: pointer;
    display: flex;
    font: inherit;
    height: 1.25rem;
    justify-content: center;
    padding: 0;
    width: 1.25rem;
  }
  .perf-toggle:hover { color: #e7e5e4; }
  .perf-city { color: #d6d3d1; }
  .perf-mobile-only, .perf-mobile-alert { display: none; }
}

.perf-foldout {
  background: rgba(28, 25, 23, 0.3); /* stone-900/30 */
  border: 1px solid rgba(68, 64, 60, 0.5);
  border-radius: 0.5rem;
  margin: 0.75rem 0 0.5rem 1.75rem;
  overflow: hidden;
}
.perf-foldout-scroll { overflow-x: auto; }
.perf-foldout .timing-table th { background: rgba(41, 37, 36, 0.5); color: #d6d3d1; font-weight: 500; white-space: nowrap; }
.perf-foldout .timing-table tr.t-latest td { background: rgba(68, 64, 60, 0.2); }
.perf-foldout .timing-table td.t-empty { color: #a8a29e; padding: 1rem; text-align: center; }
.perf-more {
  align-items: center;
  border-top: 1px solid rgba(68, 64, 60, 0.5);
  display: flex;
  gap: 1rem;
  padding: 0.75rem 1rem;
}
.perf-more-btn {
  background: none;
  border: 1px solid #44403c;
  border-radius: 0.5rem;
  color: #a8a29e;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}
.perf-more-btn:hover { border-color: #78716c; color: #e7e5e4; }
.perf-more-note { color: #a8a29e; font-size: 0.75rem; }

.perf-callout {
  border-left: 2px solid #57534e;
  border-radius: 0 0.5rem 0.5rem 0;
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
}
.perf-callout-learning { background: rgba(41, 37, 36, 0.6); }
.perf-callout-problem { background: rgba(28, 25, 23, 0.7); border-left-color: rgba(249, 115, 22, 0.6); margin-top: 1rem; padding: 0.75rem; }
.perf-callout-geo { background: rgba(41, 37, 36, 0.6); border-left-color: rgba(59, 130, 246, 0.5); margin-top: 1rem; }
.perf-callout-mark { color: #a8a29e; flex-shrink: 0; font-size: 0.875rem; margin-top: 0.125rem; }
.perf-callout-problem .perf-callout-mark { color: #fb923c; }
.perf-callout-geo .perf-callout-mark { color: #60a5fa; }
.perf-callout-body { display: flex; flex-direction: column; gap: 0.375rem; }
.perf-callout-title { color: #e7e5e4; font-size: 0.75rem; font-weight: 500; margin: 0; }
.perf-callout-text { color: #a8a29e; font-size: 0.75rem; line-height: 1.6; margin: 0; }
.perf-callout-geo .perf-callout-text { color: #d6d3d1; }
.perf-strong { color: #e7e5e4; font-weight: 500; }
.perf-ratio { color: rgba(251, 146, 60, 0.8); }

/* The errored-check state (ExpandedMonitorDetails.tsx "Error details"). */
.expand-error-heading { color: #fff; font-size: 0.9rem; font-weight: 600; margin: 0 0 0.5rem; }
.expand-error-text { color: #d6d3d1; margin: 0; }

/* ── 4.1h: Lighthouse scans (CoreWebVitalsFoldout.tsx) ────────────────────
   Zone colors are classes (never inline): good green-600, needs yellow-600,
   poor red-600 — React's COLOR_GOOD/NEEDS/POOR; text zones in the history
   rows use the -400 shades like React's text classes. */
.lh-section { margin-bottom: 1.5rem; }
.lh-head { align-items: center; display: flex; gap: 0.5rem; }
.lh-title { color: #F6A600; font-size: 1.125rem; font-weight: 600; margin: 0 0 1rem; }
.lh-rule { background: rgba(68, 64, 60, 0.6); flex: 1; height: 1px; }
.lh-body { margin-top: 0.5rem; }
.lh-block { margin-top: 1.5rem; }
.lh-subtitle {
  color: #a8a29e;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}
.lh-muted { color: #a8a29e; font-size: 0.75rem; line-height: 1.6; margin: 0; }
.lh-dim { color: #a8a29e; font-size: 0.75rem; line-height: 1.6; margin: 0; }
.lh-failed { color: #f87171; font-size: 0.75rem; margin: 0; }
.lh-noruns { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }

.lh-icon { flex-shrink: 0; height: 0.75rem; width: 0.75rem; }
.lh-spin { animation: lh-spin 1s linear infinite; }
@keyframes lh-spin { to { transform: rotate(360deg); } }
.lh-btn-primary {
  align-items: center;
  align-self: flex-start;
  background: #44403c;
  border: none;
  border-radius: 0.375rem;
  color: #e7e5e4;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
}
.lh-btn-primary:hover { background: #57534e; }
.lh-run-btn {
  align-items: center;
  background: none;
  border: none;
  border-radius: 0.375rem;
  color: #a8a29e;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  gap: 0.375rem;
  margin-left: 0.75rem;
  padding: 0.25rem 0.625rem;
}
.lh-run-btn:hover:not(:disabled) { background: #44403c; color: #e7e5e4; }
.lh-run-btn:disabled { color: #a8a29e; cursor: not-allowed; }

.lh-cadence { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1rem; }
.lh-cadence-text { color: #a8a29e; font-size: 0.75rem; margin: 0; }
.lh-cadence-key { color: #a8a29e; }
.lh-cadence-abs { color: #a8a29e; }
.lh-overdue { color: #dc2626; }
.lh-cadence-error { flex-basis: 100%; margin-top: 0.5rem; }

.lh-scores { border-top: 1px solid rgba(41, 37, 36, 0.8); padding-top: 0.75rem; }
.lh-scores-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 0.75rem; }
.lh-scores-head .lh-subtitle { margin: 0; }
.lh-report-btn {
  background: rgba(246, 166, 0, 0.1);
  border-radius: 0.375rem;
  color: #F6A600;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  text-decoration: none;
}
.lh-report-btn:hover { background: rgba(246, 166, 0, 0.2); }
.lh-badges { display: flex; flex-wrap: wrap; gap: 1rem; }
.lh-badge { align-items: center; display: flex; flex-direction: column; gap: 0.375rem; min-width: 52px; }
.lh-badge-circle {
  align-items: center;
  border: 2px solid currentColor;
  border-radius: 9999px;
  display: flex;
  font-family: ui-monospace, monospace;
  font-size: 0.875rem;
  font-weight: 600;
  height: 2.75rem;
  justify-content: center;
  width: 2.75rem;
}
.lh-badge-circle.lh-zone-good { background: rgba(22, 163, 74, 0.09); }
.lh-badge-circle.lh-zone-needs { background: rgba(202, 138, 4, 0.09); }
.lh-badge-circle.lh-zone-poor { background: rgba(220, 38, 38, 0.09); }
.lh-badge-label { color: #a8a29e; font-size: 0.75rem; line-height: 1.25; text-align: center; }

.lh-zone-good { color: #16a34a; }
.lh-zone-needs { color: #ca8a04; }
.lh-zone-poor { color: #dc2626; }
.lh-fill-good { fill: #16a34a; }
.lh-fill-needs { fill: #ca8a04; }
.lh-fill-poor { fill: #dc2626; }

.lh-cwv-grid { display: grid; gap: 0.625rem; grid-template-columns: 1fr 1fr; }
.lh-cell {
  background: rgba(41, 37, 36, 0.5);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.75rem;
}
.lh-cell-key { color: #a8a29e; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.025em; text-transform: uppercase; }
.lh-cell-value { font-family: ui-monospace, monospace; font-size: 1.25rem; font-weight: 600; line-height: 1; }
.lh-cell-na { color: #a8a29e; }
.lh-cell-avg { color: #a8a29e; font-family: ui-monospace, monospace; font-size: 0.75rem; }
.lh-cell-nobase { color: #a8a29e; font-family: ui-monospace, monospace; font-size: 0.75rem; }
.lh-tbar { border-radius: 9999px; display: block; height: 6px; width: 100%; }
.lh-tbar-good { fill: rgba(22, 163, 74, 0.25); }
.lh-tbar-needs { fill: rgba(202, 138, 4, 0.25); }
.lh-tbar-poor { fill: rgba(220, 38, 38, 0.25); }

.lh-pulse { animation: lh-pulse 2s ease-in-out infinite; }
@keyframes lh-pulse { 50% { opacity: 0.5; } }
.lh-sk { background: #44403c; border-radius: 0.25rem; }
.lh-sk-key { height: 0.625rem; width: 2rem; }
.lh-sk-value { height: 1.25rem; width: 4rem; }
.lh-sk-bar { background: #292524; border-radius: 9999px; height: 0.375rem; width: 100%; }

.lh-error {
  background: rgba(28, 25, 23, 0.7);
  border-left: 2px solid #57534e;
  border-radius: 0 0.5rem 0.5rem 0;
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.625rem 0.75rem;
}
.lh-error-mark { color: #a8a29e; flex-shrink: 0; font-size: 0.75rem; }
.lh-error-text { color: #a8a29e; font-size: 0.75rem; line-height: 1.6; margin: 0; }

.lh-lock { border-radius: 0.5rem; margin-top: 1rem; overflow: hidden; position: relative; }
.lh-lock-ghost { filter: blur(4px); opacity: 0.3; pointer-events: none; user-select: none; }
.lh-ghost-bar { background: #16a34a; border-radius: 9999px; height: 0.375rem; width: 40%; }
.lh-lock-overlay {
  align-items: center;
  background: rgba(28, 25, 23, 0.7);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  inset: 0;
  justify-content: center;
  position: absolute;
}
.lh-lock-icon { color: #a8a29e; height: 1.25rem; width: 1.25rem; }
.lh-lock-title { color: #d6d3d1; font-size: 0.875rem; font-weight: 500; margin: 0; padding: 0 1rem; text-align: center; }
.lh-lock-text { color: #a8a29e; font-size: 0.75rem; margin: 0; padding: 0 1.5rem; text-align: center; }

.lh-regression {
  align-items: flex-start;
  background: rgba(67, 20, 7, 0.3); /* orange-950/30 */
  border: 1px solid rgba(124, 45, 18, 0.4); /* orange-900/40 */
  border-radius: 0.5rem;
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
}
.lh-regression-mark { color: #fb923c; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; }
.lh-regression-text { color: #fdba74; font-size: 0.75rem; line-height: 1.4; margin: 0; }
.lh-strong { font-weight: 600; }

.lh-charts { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.lh-chart-card { background: rgba(41, 37, 36, 0.5); border-radius: 0.5rem; padding: 0.75rem; }
.lh-chart-label { color: #a8a29e; display: block; font-size: 0.75rem; font-weight: 500; margin-bottom: 0.25rem; }
.lh-chart { display: block; height: auto; overflow: visible; width: 100%; }
.lh-chart-grid { stroke: rgba(87, 83, 78, 0.15); stroke-width: 1; }
.lh-chart-axis { fill: #a8a29e; font-size: 10px; }
.lh-chart-time { fill: #78716c; font-size: 9px; }

.lh-history { border-top: 1px solid rgba(41, 37, 36, 0.8); margin-top: 1.5rem; padding-top: 0.75rem; }
.lh-history-toggle {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 0.5rem;
  padding: 0;
  width: 100%;
}
.lh-chevron { color: #a8a29e; font-size: 0.75rem; }
.lh-history-label { color: #a8a29e; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.lh-history-toggle:hover .lh-history-label { color: #a8a29e; }
.lh-history-scroll { margin-top: 0.5rem; overflow-x: auto; }
.lh-history-table { display: flex; flex-direction: column; gap: 0.125rem; min-width: 420px; }
.lh-history-row { align-items: center; border-radius: 0.25rem; display: flex; gap: 0.5rem; padding: 0.25rem; }
.lh-history-row:hover { background: rgba(41, 37, 36, 0.3); }
.lh-history-newest { background: rgba(41, 37, 36, 0.4); }
.lh-history-head .lh-hv { color: #a8a29e; font-size: 9px; letter-spacing: 0.05em; text-align: center; text-transform: uppercase; }
.lh-history-time { color: #a8a29e; flex-shrink: 0; font-family: ui-monospace, monospace; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 7rem; }
.lh-history-newest .lh-history-time { color: #a8a29e; }
.lh-hv { display: inline-block; flex-shrink: 0; font-family: ui-monospace, monospace; font-size: 10px; width: 2.5rem; }
.lh-hv.lh-zone-good { color: #4ade80; }
.lh-hv.lh-zone-needs { color: #fbbf24; }
.lh-hv.lh-zone-poor { color: #f87171; }
.lh-hv-none { color: #a8a29e; }
.lh-hv-failed { color: #a8a29e; }
.lh-history-link { color: #a8a29e; flex-shrink: 0; font-size: 0.75rem; margin-left: auto; min-width: 3.5rem; text-align: right; text-decoration: none; }
a.lh-history-link:hover { color: #F6A600; }
.lh-cwv-col { display: none; }
@media (min-width: 768px) {
  .lh-cwv-col { display: inline-block; }
}

/* ── Muse round (4.1h review) ─────────────────────────────────────────── */
.chart-head { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; margin: 1.5rem 0 1rem; }
.chart-title { color: #F6A600; font-size: 1.125rem; font-weight: 600; margin: 0; }
.chart-head .tr-switcher { margin: 0; }
.lh-hit { cursor: pointer; fill: transparent; }
.pause-group { align-items: center; display: inline-flex; gap: 0.5rem; }
.expand-error-detail { color: #a8a29e; font-size: 0.875rem; margin: 0.5rem 0 0; }
@media (prefers-reduced-motion: reduce) {
  .lh-spin, .lh-pulse { animation: none; }
  .pause-knob, .pause-switch, .btn-action, .btn-action::after { transition: none; }
}