/* =============================================================================
   Brionic Reports — UI theme
   macOS-inspired design language from the Brionic Web Framework
   (github.com/brian0h3c/brionic-web-framework): vibrancy, glass, soft depth,
   vivid system color. Design tokens vendored below; this app is server-rendered
   PHP so we consume the framework's tokens directly rather than its Astro build.
   ============================================================================= */
:root {
  --bg: #f5f5f7;            /* app background (macOS light gray) */
  --panel: #ffffff;        /* cards, panels */
  --panel-2: #f0f0f3;      /* inputs, sunken surfaces */
  --line: rgba(0, 0, 0, 0.10);
  --line-strong: rgba(0, 0, 0, 0.16);
  --text: #1d1d1f;
  --muted: #6e6e73;
  --accent: #d92b32;       /* Brionic Red */
  --accent-deep: #b81d23;  /* Deep Red */
  --accent-2: #c9a23c;     /* Gold */
  --green: #12996b;
  --amber: #9a7b1e;
  --danger: #c0341d;

  /* macOS system colors (the vivid, colorful palette) — bw framework */
  --mac-red: #ff3b30;   --mac-orange: #ff9500;  --mac-yellow: #ffcc00;
  --mac-green: #34c759; --mac-mint: #00c7be;    --mac-teal: #30b0c7;
  --mac-cyan: #32ade6;  --mac-blue: #007aff;    --mac-indigo: #5856d6;
  --mac-purple: #af52de; --mac-pink: #ff2d55;

  /* Vibrancy / glass + signature gradients */
  --glass: rgba(255, 255, 255, 0.65);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --blur: saturate(180%) blur(20px);
  --gradient-aurora: linear-gradient(120deg, #5856d6, #007aff, #32ade6, #34c759, #ffcc00, #ff9500, #ff2d55);
  --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-deep));
  --gradient-mint: linear-gradient(135deg, #00c7be 0%, #34c759 100%);

  /* Traffic-light window controls */
  --tl-red: #ff5f57; --tl-yellow: #febc2e; --tl-green: #28c840;

  /* Chart colors: vivid macOS green (humans) + yellow (bots) */
  --chart-human: var(--mac-green);
  --chart-bot: var(--mac-yellow);

  --radius: 16px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.12);
  --shadow-window: 0 30px 90px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.10);
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* Topbar — macOS vibrancy: sticky glass bar with backdrop blur */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-bottom: 1px solid var(--line); margin: 0 -22px 26px;
  position: sticky; top: 0; z-index: 100;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; color: var(--text); }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-sub { font-weight: 600; font-size: .95rem; color: var(--muted); border-left: 1px solid var(--line-strong); padding-left: 10px; letter-spacing: -0.01em; }
.brand .dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.nav { display: flex; gap: 18px; align-items: center; }
.nav a { color: var(--muted); font-weight: 500; }
.nav a:hover, .nav a.active { color: var(--text); }
.btn {
  display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--text); font-weight: 600; cursor: pointer; font-size: .92rem;
  box-shadow: var(--shadow-sm); transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { background: #fbfbfd; border-color: rgba(0,0,0,.22); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); border: none; color: #fff; }
.btn-primary:hover { filter: brightness(1.05); background: linear-gradient(135deg, var(--accent), var(--accent-deep)); }
.btn-danger { background: var(--panel); border-color: rgba(192,52,29,.4); color: var(--danger); }
.btn-sm { padding: 6px 12px; font-size: .85rem; }

h1 { font-size: 1.7rem; margin: 0 0 4px; letter-spacing: -0.02em; }
h2 { font-size: 1.15rem; margin: 0 0 14px; letter-spacing: -0.01em; }
.sub { color: var(--muted); margin: 0 0 22px; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--muted); font-weight: 700; }

/* Cards + grids */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.card h2 { display: flex; align-items: center; justify-content: space-between; }

/* Stat */
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.stat .n { font-size: 2rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.stat .l { color: var(--muted); font-size: .85rem; margin-top: 2px; }

/* Site cards (overview) */
.site-card { display: block; transition: border-color .15s, transform .15s, box-shadow .15s; }
.site-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.site-card .dom { color: var(--muted); font-size: .85rem; }
.site-card .row { display: flex; gap: 24px; margin-top: 14px; }
.site-card .row .n { font-size: 1.4rem; font-weight: 700; }
.site-card .row .l { color: var(--muted); font-size: .78rem; }

/* Tables / bars */
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 6px 0; position: relative; }
.bars li .bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(217,43,50,.10); border-radius: 8px; z-index: 0; }
.bars li .lbl, .bars li .val { position: relative; z-index: 1; }
.bars li .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 8px; }
.bars li .val { color: var(--muted); font-variant-numeric: tabular-nums; padding-right: 6px; }
.empty { color: var(--muted); font-size: .9rem; padding: 8px 0; }

.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); }
.table th { color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.badge.human { background: rgba(18,153,107,.14); color: var(--green); }
.badge.bot { background: rgba(201,162,60,.18); color: var(--amber); }

/* Day chart */
.chart { display: flex; align-items: flex-end; gap: 3px; height: 120px; margin-top: 8px; }
.chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 2px; }
.chart .col .h { background: var(--chart-human); border-radius: 2px 2px 0 0; }
.chart .col .b { background: var(--chart-bot); border-radius: 2px 2px 0 0; }

/* Filter */
.filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.filter a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: .85rem; background: var(--panel); }
.filter a:hover { border-color: var(--line-strong); }
.filter a.active { background: rgba(217,43,50,.10); color: var(--accent); border-color: rgba(217,43,50,.28); }

/* Forms */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
.input {
  width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--text); font: inherit;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217,43,50,.16); }
.code {
  display: block; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; color: #2a2a2e; font: 13px/1.5 var(--font-mono);
  overflow-x: auto; white-space: pre-wrap; word-break: break-all;
}
.flash { background: rgba(18,153,107,.10); border: 1px solid rgba(18,153,107,.28); color: #0e7a55; padding: 12px 14px; border-radius: 10px; margin-bottom: 18px; }
.flash.err { background: rgba(192,52,29,.09); border-color: rgba(192,52,29,.28); color: var(--danger); }

/* The result of an action, kept readable from wherever the page was left.
   Only floats once the script is running: it relies on JS to dismiss it, and
   without that a fixed banner would park itself over the page for good. The
   top bar is sticky at z-index 100, so this clears it on both axes. */
.js .flash-float { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 120; width: max-content; max-width: calc(100vw - 32px); margin: 0; background-color: #e7f5f0; box-shadow: 0 10px 30px rgba(16,24,40,.16); cursor: pointer; transition: opacity .35s ease, transform .35s ease; }
.js .flash-float.err { background-color: #fbece9; }
.js .flash-float.is-gone { opacity: 0; transform: translateX(-50%) translateY(-10px); pointer-events: none; }

/* Login */
/* The gutter is on the wrapper, not inside a media query: .login is capped at
   380px, so on anything narrower the card ran edge to edge and its rounded
   corners left grey notches against straight sides. Phones from 320 to 390px
   all landed in that band. */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login { width: 100%; max-width: 380px; }
.login-brand { display: flex; justify-content: center; margin-bottom: 22px; }
.login-brand img { height: 54px; width: auto; }
/* "or" divider between single sign-on and the local fallback methods. */
.login-sep { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--muted); font-size: .8rem; }
.login-sep::before, .login-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-more { margin-top: 18px; }
.login-more > summary { cursor: pointer; color: var(--muted); font-size: .86rem; }
.login-more > summary:hover { color: var(--text); }
.mt { margin-top: 22px; }
.muted { color: var(--muted); }
.right { text-align: right; }

/* Trend delta badges */
.delta { font-size: .62rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }
.delta.up { background: rgba(18,153,107,.16); color: var(--green); }
.delta.down { background: rgba(192,52,29,.14); color: var(--danger); }
.delta.flat { background: var(--panel-2); color: var(--muted); }

/* Visitor map */
.geo-map { background: #0e1118; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 8px; box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
.geo-map svg { display: block; width: 100%; height: auto; }
.geo-map circle { filter: drop-shadow(0 0 3px rgba(217,43,50,.7)); }

/* Filter bar + date range + export */
.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.filter-bar .filter { margin-bottom: 0; }
.daterange { display: flex; gap: 6px; align-items: center; margin: 0; }
.daterange .sep { color: var(--muted); }
.input-date { background: var(--panel); border: 1px solid var(--line-strong); color: var(--text); border-radius: 8px; padding: 5px 8px; font-size: .82rem; color-scheme: light; }
.btn.active { background: rgba(217,43,50,.10); border-color: rgba(217,43,50,.28); color: var(--accent); }
.btn.export { margin-left: auto; }

/* Live pulse dot + feed */
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(18,153,107,.5); animation: pulse 1.8s infinite; vertical-align: middle; }
.live-dot.sm { width: 7px; height: 7px; margin-right: 4px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(18,153,107,.5); } 70% { box-shadow: 0 0 0 8px rgba(18,153,107,0); } 100% { box-shadow: 0 0 0 0 rgba(18,153,107,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.live-now { font-size: 2.4rem; font-weight: 800; line-height: 1; margin: 4px 0 2px; letter-spacing: -0.02em; }
.live-now .live-lbl { font-size: .9rem; font-weight: 600; color: var(--muted); margin-left: 8px; }
.live-feed { list-style: none; margin: 6px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.live-feed li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .82rem; }
.live-feed li:last-child { border-bottom: none; }
.live-feed .fp { color: var(--text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.live-feed .fw { color: var(--muted); }
.live-feed .fa { margin-left: auto; color: var(--muted); font-size: .76rem; white-space: nowrap; }

/* Uptime */
.up-status { display: flex; align-items: center; gap: 10px; }
.up-badge { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .95rem; }
.up-led { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.up-status.up .up-badge { color: var(--green); } .up-status.up .up-led { background: var(--green); box-shadow: 0 0 6px rgba(18,153,107,.6); }
.up-status.down .up-badge { color: var(--danger); } .up-status.down .up-led { background: var(--danger); box-shadow: 0 0 6px rgba(192,52,29,.55); }
.up-status.unknown .up-badge { color: var(--muted); }
.stat.sm { padding: 12px 14px; } .stat.sm .n { font-size: 1.4rem; }
.up-bars { display: flex; gap: 3px; margin-top: 14px; align-items: flex-end; }
.up-bar { flex: 1; height: 22px; border-radius: 3px; background: var(--panel-2); }
.up-bar.ok { background: var(--green); opacity: .85; }
.up-bar.bad { background: var(--danger); }

/* Uptime pill on overview cards */
.site-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.up-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.up-pill.up { color: var(--green); border-color: rgba(18,153,107,.35); } .up-pill.up .up-led { background: var(--green); }
.up-pill.down { color: var(--danger); border-color: rgba(192,52,29,.4); } .up-pill.down .up-led { background: var(--danger); }
.site-card .n.on { display: flex; align-items: center; }

/* Sparklines */
.spark-wrap { margin: 12px 0 4px; height: 30px; }
.spark { width: 100%; height: 30px; display: block; }
.spark-empty { height: 30px; border-bottom: 1px dashed var(--line); }

/* Live stat highlight */
.stat.live .n { display: flex; align-items: center; gap: 8px; color: var(--text); }

/* Connect-this-website methods */
.connect-method { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 14px; background: #fbfbfd; }
.connect-method h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1rem; }
.connect-method p { margin: 0 0 10px; font-size: .88rem; }
.connect-method .code { margin-top: 6px; }
.cm-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .78rem; font-weight: 800; flex: none; }
.cm-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--green); background: rgba(18,153,107,.12); border-radius: 999px; padding: 2px 8px; }
.cm-badge { font-size: .68rem; font-weight: 800; letter-spacing: .02em; color: #fff; background: var(--green); border-radius: 999px; padding: 2px 9px; }
.connect-method.is-connected { border-color: rgba(18,153,107,.4); background: rgba(18,153,107,.05); }
.conn-status { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; font-size: .9rem; margin: 0 0 14px; border: 1px solid var(--line); }
.conn-status.ok { background: rgba(18,153,107,.10); border-color: rgba(18,153,107,.3); color: #0e7a55; }
.conn-status.ok .up-led { background: var(--green); box-shadow: 0 0 6px rgba(18,153,107,.6); }
.conn-status.wait { background: rgba(201,162,60,.10); border-color: rgba(201,162,60,.3); color: #8a6d17; }
.conn-status.wait .up-led { background: var(--amber); }
.conn-status strong { color: inherit; }
code { background: var(--panel-2); border-radius: 5px; padding: 1px 5px; font: .86em var(--font-mono); overflow-wrap: anywhere; }
.code code { background: none; padding: 0; }

/* ── Donut charts (inline-SVG, zero-JS) ─────────────────────────────────── */
.metric-viz { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut { flex: none; }
.donut circle { fill: none; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; min-width: 150px; }
.donut-legend li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; font-size: .88rem; }
.donut-legend .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.donut-legend .lv { color: var(--muted); font-variant-numeric: tabular-nums; }
.donut-hole { fill: var(--panel); }
.donut-total { font-weight: 800; font-size: .92rem; fill: var(--text); }
.donut-sub { fill: var(--muted); font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; }

/* Gradient brand mark + macOS card depth */
.brand-sub { background: none; }
.card { transition: box-shadow .24s var(--ease-out, ease), transform .18s ease; }
.card.lift:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Chart legend pills reuse .badge.human/.bot; brighten to vivid system colors */
.chip-legend { display: inline-flex; gap: 6px; align-items: center; }

/* Weekly report recipient editor */
.recip-fallback.is-enhanced { display: none; }
.recip-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
/* A flex item's automatic minimum is its own content, so a chip holding a long
   address refused to shrink and held the whole page open at its width. */
.recip-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: .85rem; }
.recip-x { border: none; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; color: #636368; padding: 4px 8px; border-radius: 50%; }
.recip-x:hover { color: var(--accent); }
.recip-empty { color: var(--muted); font-size: .82rem; }
.recip-add { display: flex; gap: 8px; }
.recip-add .input { flex: 1; }
.input.is-error { border-color: var(--accent); }

.recip-chip > span:first-child { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Activity feed ─────────────────────────────────────────────────────────── */
.act-summary { display: flex; flex-wrap: wrap; gap: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.act-stat { display: flex; flex-direction: column; gap: 2px; }
.act-stat-n { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.act-stat-n.bad { color: var(--danger); }
.act-stat-l { color: var(--muted); font-size: .85rem; }

.act-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 16px; }
.act-filters .input { width: auto; min-width: 190px; }

.act-day {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700; margin: 22px 0 10px;
}
.act-day:first-child { margin-top: 0; }

.act-list { list-style: none; margin: 0; padding: 0; }
.act-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.act-item:last-child { border-bottom: none; }
.act-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--muted); }
.act-dot.bad { background: var(--danger); }
.act-dot.good { background: var(--green); }
.act-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.act-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.act-site {
  font-size: .75rem; font-weight: 600; color: var(--muted);
  background: var(--panel-2); border-radius: 999px; padding: 2px 9px; text-decoration: none;
}
.act-site:hover { color: var(--text); }
.act-time { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.act-url { font-size: .84rem; word-break: break-all; }
.act-detail { font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }

.act-pager { display: flex; align-items: center; gap: 14px; margin-top: 20px; }

@media (max-width: 560px) {
  .act-summary { gap: 18px; }
  .act-filters .input { min-width: 0; flex: 1; }
}

/* ── Narrow screens ──────────────────────────────────────────────────────────
   The nav is a single row of six links plus a button, which is wider than a
   phone: half of it sat off the right edge and took the whole page into
   sideways scrolling with it. It gets its own line and scrolls on its own. */
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .topbar { flex-wrap: wrap; gap: 10px; padding: 12px 16px; margin: 0 -16px 20px; }
  .topbar .brand { flex: 1 1 auto; }
  .nav {
    width: 100%; gap: 16px; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; padding: 11px 0; min-height: 44px; display: inline-flex; align-items: center; }
  .nav form { margin-left: auto; }
  /* Comfortable to hit with a thumb rather than a mouse pointer. */
  .btn { padding: 11px 16px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { padding: 9px 14px; }

  /* A bare `1fr` track is `minmax(auto, 1fr)`, and that `auto` floor is the
     content's min-content width — so one long URL widened the column instead
     of being wrapped inside it, and took the page sideways with it. */
  .grid { grid-template-columns: minmax(0, 1fr); }
  .card, .grid > * { min-width: 0; }
  .table { display: block; overflow-x: auto; }
  .daterange { flex-wrap: wrap; }
  .daterange .input { min-width: 0; flex: 1 1 120px; }
  /* The chip's own 340px cap is wider than the phone it has to fit in. */
  .recip-chip > span:first-child { max-width: 100%; }
  .recip-x { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ── Settings ──────────────────────────────────────────────────────────────── */
.set-when { display: flex; flex-wrap: wrap; gap: 14px; }
.set-when .field { flex: 1; min-width: 150px; }
.set-sites { list-style: none; margin: 0; padding: 0; }
.set-sites li { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.set-sites li:last-child { border-bottom: none; }
.set-sites li .muted { margin-left: 8px; font-size: .82rem; }
.set-quota { display: block; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ── Client logos ─────────────────────────────────────────────────────────── */
.site-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.site-mark {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid var(--line); background: #f1f2f5;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.site-mark img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.site-mark-initial { font-weight: 700; color: var(--muted); font-size: .95rem; }
.site-mark-lg { width: 52px; height: 52px; border-radius: 12px; }
.logo-row { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.logo-preview {
  flex: 0 0 auto; width: 104px; height: 104px; border-radius: 14px;
  border: 1px solid var(--line); background: #f1f2f5;
  display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8px;
}
.logo-preview img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

/* ── Sign in with Brionic ID ──────────────────────────────────────────────────
   Copied verbatim from the Brionic ID media kit (id.brionicx.com/brand).
   Do not hand-tune it: the border colours are measured for non-text contrast
   against the surface each theme is meant for, and a local "improvement" would
   quietly break that. Re-copy the block from the brand page instead. */
.bid-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.7rem 1.15rem;
    font: 600 0.95rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #0d1c27;
    background: #ffffff;
    /* 3.85:1 against white. The border is the only thing describing the
       button's edge, so it has to meet non-text contrast on its own. */
    border: 1px solid #6d8598;
    border-radius: 0.6rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.bid-btn:hover {
    background: #f4f9fc;
}

.bid-btn:focus-visible {
    outline: 2px solid #1f6193;
    outline-offset: 2px;
}

.bid-btn svg {
    flex: none;
}

/* Filled, for light pages that want more presence than an outline. */
.bid-btn-soft {
    background: #e4ecf3;
}

.bid-btn-soft:hover {
    background: #d3e0ea;
}

/* Sign-in forms usually stack full-width controls. */
.bid-btn-block {
    display: flex;
    width: 100%;
}