/* ═══════════════════════════════════════════
   PrezzBox — Home (Ask mode)
   Investigation launcher · editorial surfaces
   ═══════════════════════════════════════════ */

:root {
  --primary: #e63946;
  --primary-bright: #ff6b6b;
  --primary-soft: rgba(230, 57, 70, 0.07);
  --primary-line: rgba(230, 57, 70, 0.28);
  --primary-glow: rgba(230, 57, 70, 0.18);
  --bg: #f7f8fa;
  --bg-sunk: #f2f4f7;
  --surface: #ffffff;
  --surface-hover: #f4f6fa;
  --border: #eceef2;
  --border-strong: #e0e3ea;
  --text: #111118;
  --muted: #6b7280;
  --faint: #9aa2ae;
  --ok: #16a06a;

  --nav-h: 58px;
  --lib-w: 268px;
  --center-max: 900px;
  --gutter: 32px;

  --r-xl: 20px;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 9px;

  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;

  --shadow-sm: 0 1px 2px rgba(17, 17, 24, 0.04), 0 1px 3px rgba(17, 17, 24, 0.03);
  --shadow-md: 0 4px 16px rgba(17, 17, 24, 0.06), 0 1px 3px rgba(17, 17, 24, 0.04);
  --shadow-lift: 0 10px 30px rgba(17, 17, 24, 0.08);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

html:has(body.ask) {
  overflow: hidden;
}

body.ask {
  height: 100%;
  /* base.html scales <html> with an ambient `zoom`, but dvh keeps resolving
     against the real, unscaled viewport — undershooting the zoomed page and
     leaving a gap below the fold. Inflate by the inverse of the zoom factor
     so the zoomed-down box exactly fills the screen. */
  height: calc(100vh / var(--mobile-zoom));
  height: calc(100dvh / var(--mobile-zoom));
  max-height: calc(100dvh / var(--mobile-zoom));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

em {
  font-style: normal;
}

ul {
  list-style: none;
}

::selection {
  background: var(--primary);
  color: #fff;
}

::placeholder {
  color: var(--faint);
}

:focus-visible {
  outline: 2px solid var(--primary-line);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Shared atoms ────────────────────────── */
.iconbtn {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.iconbtn svg {
  width: 18px;
  height: 18px;
}

.iconbtn:hover {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}

.iconbtn--dot::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--bg);
}

.avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-sunk);
  border: 1px solid var(--border-strong);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
}

kbd {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted);
  background: var(--bg-sunk);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 3px 5px;
}

/* ── Top navigation ──────────────────────── */
.topnav {
  flex-shrink: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 30;
}

.topnav__menu {
  display: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  place-items: center;
  flex-shrink: 0;
}

.topnav__menu svg {
  width: 18px;
  height: 18px;
}

.topnav__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  padding-right: 6px;
}

.topnav__logo {
  width: 26px;
  height: auto;
  display: block;
}

.topnav__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
}

.topnav__wordmark em {
  color: var(--primary);
}

.topnav__search {
  flex: 1;
  max-width: 380px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.topnav__search:focus-within {
  background: var(--surface);
  border-color: var(--primary-line);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.topnav__search svg {
  width: 15px;
  height: 15px;
  color: var(--faint);
  flex-shrink: 0;
}

.topnav__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13px;
}

.topnav__search input::-webkit-search-cancel-button {
  display: none;
}

.topnav__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.cmdbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.cmdbtn svg {
  width: 14px;
  height: 14px;
}

.cmdbtn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.topnav__user {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  margin-left: 2px;
}

.topnav__user:hover .avatar {
  border-color: var(--primary-line);
  color: var(--text);
}

/* ── Layout ──────────────────────────────── */
.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--lib-w) minmax(0, 1fr);
  /* Keep the row viewport-bound so the prompt dock cannot be pushed off-screen
     when the thread grows (grid items default to min-height: auto). */
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

/* ── Left: investigation library ─────────── */
.library {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 25;
}

.library__top {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 6px;
}

.newbtn {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border: 1px solid var(--primary);
  border-radius: var(--r-md);
  background: var(--primary);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s var(--ease), background 0.2s ease;
}

.newbtn svg {
  width: 16px;
  height: 16px;
}

.newbtn:hover {
  background: #d92f3c;
  box-shadow: 0 6px 20px var(--primary-glow);
}

.newbtn:active {
  transform: translateY(1px);
}

.library__close {
  display: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  place-items: center;
  flex-shrink: 0;
}

.library__close svg {
  width: 17px;
  height: 17px;
}

.library__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.libsec__title {
  padding: 0 6px;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}

.invlist {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.inv-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r-md);
  padding: 9px 10px;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.inv-item:hover {
  background: var(--surface-hover);
}

.inv-item.is-active {
  background: var(--primary-soft);
  border-color: rgba(230, 57, 70, 0.16);
}

.inv-item__title {
  display: block;
  font-size: 13.2px;
  font-weight: 550;
  line-height: 1.35;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-item__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--faint);
  min-width: 0;
}

.inv-item__meta svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.inv-item__cat {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-item__sep {
  opacity: 0.6;
}

.invlist--pinned .inv-item {
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: 6px;
  padding: 8px 10px;
}

.invlist--pinned .inv-item:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.inv-item__pin {
  margin-left: auto;
  color: var(--primary);
  flex-shrink: 0;
}

.quickgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px;
}

.quick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.quick svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.quick:hover {
  border-color: var(--primary-line);
  color: var(--text);
  background: var(--surface-hover);
}

.library__foot {
  flex-shrink: 0;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--faint);
}

.library__link:hover {
  color: var(--text);
}

.library__sep {
  margin: 0 5px;
  opacity: 0.6;
}

/* ── Center column ───────────────────────── */
.center {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.center__scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}

/* ── Empty state / launcher ──────────────── */
.launcher {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px var(--gutter) 56px;
  transition: opacity 0.24s ease, transform 0.32s var(--ease);
}

.launcher.is-leaving {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
}

.launcher__inner {
  width: 100%;
  max-width: var(--center-max);
  margin: 0 auto;
}

.welcome {
  text-align: center;
  margin-bottom: 26px;
  /* Lets the title size itself against the real content width (see the
     mobile rule below) rather than against vw, which the mobile `zoom`
     on <html> puts out of step with the actual layout width. */
  container-type: inline-size;
}

.welcome__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.1vw, 38px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.welcome__title em {
  color: var(--primary);
}

.welcome__sub {
  max-width: 560px;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ── Prompt box ──────────────────────────── */
.composer-slot {
  position: relative;
}

/* Glow lives behind the prompt only — never across the page. */
.composer-slot::before {
  content: "";
  position: absolute;
  inset: -18% -6% -34%;
  background: radial-gradient(ellipse at 50% 40%, var(--primary-glow), transparent 68%);
  opacity: 0.5;
  filter: blur(28px);
  pointer-events: none;
}

.center__dock .composer-slot::before,
.composer-slot.is-dock::before {
  display: none;
}

.composer {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.composer:focus-within {
  border-color: var(--primary-line);
  box-shadow: 0 0 0 4px var(--primary-glow), var(--shadow-md);
}

.composer__field {
  position: relative;
  padding: 18px 20px 4px;
}

.composer__input {
  display: block;
  width: 100%;
  min-height: 62px;
  max-height: 220px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text);
  overflow-y: auto;
}

.composer__ghost {
  position: absolute;
  top: 18px;
  left: 20px;
  right: 20px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--faint);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}

.composer__ghost i {
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.18em;
  background: var(--primary);
  animation: caret 1.1s steps(1) infinite;
}

@keyframes caret {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.composer__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 10px 14px;
}

.composer__tools {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.ctool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.ctool svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ctool:hover {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}

.ctool--wide span {
  font-weight: 500;
}

/* ── Effort picker ──────────────────────────────────────────────────────
   The tier the next question runs at (analytics/analyst/effort.py). Sits in
   the composer toolbar next to Commands; the menu opens upward because the
   composer docks to the bottom of the viewport once a thread starts. */

.effort {
  position: relative;
}

.effort__toggle.is-open,
.effort__toggle[aria-expanded="true"] {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}

.effort__menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 244px;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}

.effort__menu[hidden] {
  display: none;
}

.effort__opt {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease;
}

.effort__opt:hover {
  background: var(--surface-hover);
}

.effort__opt.is-active {
  background: var(--primary-soft);
}

.effort__opt-label {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.effort__opt.is-active .effort__opt-label {
  color: var(--primary);
}

.effort__opt-blurb {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

/* Stamped on a finished answer so a Low lookup is never re-read months later
   as though it were a full investigation. */
.effort-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-bottom: 8px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-sunk);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.effort-badge--high,
.effort-badge--max {
  border-color: var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
}

.composer__submit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.composer__hint {
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}

.send {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--primary);
  border-radius: 13px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.2s ease, transform 0.2s var(--ease),
    border-color 0.18s ease, opacity 0.18s ease;
}

.send svg {
  width: 18px;
  height: 18px;
}

.send:hover:not(:disabled) {
  box-shadow: 0 6px 18px var(--primary-glow);
  transform: translateY(-1px);
}

.send:disabled {
  background: var(--bg-sunk);
  border-color: var(--border-strong);
  color: var(--faint);
  cursor: default;
}

/* ── Suggested prompt chips ──────────────── */
.suggest {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 7px;
  margin-top: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 2px 2px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.suggest::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  scroll-snap-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease,
    transform 0.15s var(--ease);
}

.chip svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.85;
}

.chip:hover {
  border-color: var(--primary-line);
  color: var(--text);
  background: var(--surface-hover);
  transform: translateY(-1px);
}

/* ── Analyst templates ──────────────────── */
.templates {
  margin-top: 38px;
}

.templates__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 0 2px;
}

.templates__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.templates__hint {
  font-size: 11.5px;
  color: var(--faint);
}

.templates__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(206px, 1fr);
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 2px 2px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.templates__track::-webkit-scrollbar {
  display: none;
}

.tpl {
  scroll-snap-align: start;
  min-width: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.22s var(--ease), box-shadow 0.22s ease;
}

.tpl:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.tpl__icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary);
}

.tpl__icon svg {
  width: 16px;
  height: 16px;
}

.tpl__title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tpl__desc {
  font-size: 11.8px;
  line-height: 1.5;
  color: var(--muted);
}

.tpl__steps {
  margin-top: auto;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ── Investigation workspace ──────────────── */
.investigation {
  padding: 22px var(--gutter) 12px;
  animation: riseIn 0.4s var(--ease) both;
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.inv__head {
  width: 100%;
  max-width: var(--center-max);
  margin: 0 auto 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.inv__titlerow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.inv__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.inv__tools {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.inv__tools .iconbtn.is-on {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: rgba(230, 57, 70, 0.16);
}

.sharewrap {
  position: relative;
}

.sharepop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: min(320px, calc(100vw - 32px));
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(17, 17, 24, 0.12);
}

.sharepop__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.sharepop__hint {
  margin: 6px 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.sharepop__row {
  display: flex;
  gap: 8px;
}

.sharepop__url {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-sunk);
  color: var(--text);
  font-size: 12px;
}

.sharepop__copy {
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.sharepop__stop {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.sharepop__stop:hover {
  color: var(--primary);
}

body.share-view .layout {
  grid-template-columns: 1fr;
}

body.share-view .center {
  max-width: var(--center-max);
  margin: 0 auto;
}

.inv__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--muted);
}

.inv__dot {
  color: var(--border-strong);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 550;
}

.status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
}

.status.is-running {
  color: var(--primary);
}

.status.is-running i {
  background: var(--primary);
  animation: pulseRed 1.5s ease-out infinite;
}

@keyframes pulseRed {
  0% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(230, 57, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
}

.status.is-done {
  color: var(--ok);
}

.status.is-done i {
  background: var(--ok);
}

.autosave {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--faint);
  transition: opacity 0.3s ease;
}

.autosave svg {
  width: 12px;
  height: 12px;
}

.autosave.is-saving {
  opacity: 0.5;
}

.inv__tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: auto;
}

.tag {
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.tag--accent {
  background: var(--primary-soft);
  border-color: rgba(230, 57, 70, 0.16);
  color: var(--primary);
}

/* ── Thread ──────────────────────────────── */
.thread {
  width: 100%;
  max-width: var(--center-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-bottom: 18px;
}

.msg {
  animation: riseIn 0.34s var(--ease) both;
  min-width: 0;
}

.msg--user {
  display: flex;
  justify-content: flex-end;
}

.msg--user .msg__body {
  max-width: 82%;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 6px var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg--answer {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
}

/* Place every direct child explicitly — auto-placement alone breaks on two of
   the three shapes this article is built in (see home.js):
     [mark, effort-badge, report-body]  the badge claimed column 2, pushing
                                        .report-body onto row 2 / column 1,
                                        where the 28px mark track squeezed the
                                        answer to one word per line
     [msg__body]                        a bare assistant message with no mark
                                        landed in the 28px track for the same
                                        reason
     [mark, report-body]                the streaming shape, which was fine
   justify-self keeps the badge a pill; as a stretched grid item it spanned the
   full content width. */
.msg--answer > .msg__mark {
  grid-column: 1;
  grid-row: 1;
}

.msg--answer > .effort-badge {
  grid-column: 2;
  justify-self: start;
}

.msg--answer > .report-body,
.msg--answer > .msg__body {
  grid-column: 2;
}

.msg__mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.msg__mark img {
  width: 13px;
  height: auto;
  display: block;
}

.report-body {
  min-width: 0;
}

/* Research trace — the whole investigation lives inside one dropdown
   (.rtrace, a plain button + panel — not a native <details>, whose UA-level
   "hidden when closed" behaviour can't be animated smoothly across
   browsers), its toggle mirroring the latest step so a collapsed trace
   still reads live. Open by default while running, auto-collapsing once
   finished; a user click always overrides that default (see
   createResearchTimeline in home.js). Inside, .rline is the vertical
   step-by-step list itself — fine-grained, already human-readable steps
   (analytics/analyst/steps.py), active (pulsing) or completed (quiet check).
   Failed tool calls are never shown. While running, only the current and
   immediately-previous step stay expanded; older ones collapse to compact
   rows the user can still click open. */
.rtrace {
  display: block;
}

.report-body > .rtrace {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.rtrace__toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
}

.rtrace__toggle:hover {
  background: var(--bg-sunk);
}

.rtrace__toggle::after {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-right: 2px;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}

.rtrace.is-open > .rtrace__toggle::after {
  transform: rotate(-135deg);
}

.rtrace__label {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 550;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* max-height (not grid-template-rows/fr, whose animation support is
   inconsistent) transitioning to a generous fixed cap — the real content is
   almost always well under it, so the box still tracks its natural height
   as it grows/shrinks and the motion reads as smooth, not "reaching for"
   the cap. */
.rtrace__body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s var(--ease), opacity 0.25s ease;
}

.rtrace.is-open > .rtrace__body {
  max-height: 2000px;
  opacity: 1;
}

.rtrace__body > .rline {
  padding-top: 6px;
}

.rline {
  display: flex;
  flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
  .rtrace__body,
  .rtrace__toggle::after {
    transition: none;
  }
}

.rline__step {
  position: relative;
  opacity: 1;
  transform: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.rline__step.is-entering {
  opacity: 0;
  transform: translateY(6px);
}

.rline__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 4px;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: padding 0.28s var(--ease), background 0.15s ease;
}

.rline__step.is-active .rline__row {
  cursor: default;
}

.rline__step:not(.is-active) .rline__row:hover {
  background: var(--bg-sunk);
}

.rline__step.is-collapsed .rline__row {
  padding: 3px 4px;
}

.rline__rail {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
}

.rline__rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--border-strong);
  transform: translateX(-50%);
  z-index: 0;
}

.rline__step:first-child .rline__rail::before {
  top: 50%;
}

.rline__step:last-child .rline__rail::before {
  bottom: 50%;
}

.rline__dot,
.rline__check {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rline__dot {
  border: 1.5px solid var(--primary-glow);
  border-top-color: var(--primary);
  border-right-color: var(--primary);
  background: none;
  animation: rlineSpin 0.65s linear infinite;
}

.rline__check {
  background: var(--ok);
  display: grid;
  place-items: center;
}

.rline__check::after {
  content: "";
  width: 5px;
  height: 2.5px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) translate(0.5px, -0.5px);
}

.rline__body {
  min-width: 0;
  padding-top: 1px;
}

.rline__title {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  transition: color 0.3s ease;
}

.rline__step.is-active .rline__title {
  color: var(--text);
  font-weight: 550;
}

.rline__detail {
  margin-top: 2px;
  font-size: 12px;
  color: var(--faint);
}

.rline__step.is-collapsed .rline__detail {
  display: none;
}

@keyframes rlineSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rline__step,
  .rline__row {
    transition: none;
  }
  .rline__dot {
    animation: none;
  }
}

.stream-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}

.stream-viz {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stream-viz__item {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s var(--ease);
}

.stream-viz__item.is-in {
  opacity: 1;
  transform: none;
}

.stream-lede.is-composing {
  color: var(--muted);
  font-style: italic;
}

.stream-lede.is-composing::after {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent, #e63946);
  animation: streamCaret 0.9s steps(1) infinite;
}

@keyframes streamCaret {
  50% {
    opacity: 0;
  }
}

/* Analyst Tier-2 cell trace (docs/analyst-mode-plan.md §8/§14) — debug-mode
   only now (staff users), see cfg.debugMode gating in home.js. */
.cells {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0;
}

.cells--stored {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.cell {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-sunk);
  overflow: hidden;
}

.cell.is-error {
  border-color: var(--primary-line);
}

.cell__summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.cell__summary::-webkit-details-marker {
  display: none;
}

.cell__num {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--faint);
}

.cell.is-error .cell__num {
  border-color: var(--primary-line);
  color: var(--primary);
}

.cell__label {
  color: var(--text);
  font-weight: 500;
}

.cell__meta {
  margin-left: auto;
  color: var(--faint);
  font-size: 11.5px;
  white-space: nowrap;
}

.cell__body {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cell__code,
.cell__output {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 320px;
  overflow-y: auto;
  color: var(--text);
}

.cell__output {
  color: var(--muted);
}

.cell__output--error {
  color: var(--primary);
  border-color: var(--primary-line);
  background: var(--primary-soft);
}

/* Report typography */
.report-body .lede {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}

.report-body .lede strong {
  font-weight: 600;
}

/* Conversational Markdown prose — the primary content of an answer. */
.report-body > :first-child {
  margin-top: 0;
}

.md-block {
  margin-top: 14px;
}

.md-block p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 12px;
}

.md-block p:last-child {
  margin-bottom: 0;
}

.md-block strong {
  font-weight: 600;
}

.md-block em {
  font-style: italic;
}

.md-block code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--bg-sunk);
  padding: 1px 5px;
  border-radius: 4px;
}

.md-block a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--primary-line);
  text-underline-offset: 2px;
}

.md-block a:hover {
  text-decoration-color: var(--primary);
}

.md-block h2,
.md-block h3,
.md-block h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 24px 0 8px;
}

.md-block h2:first-child,
.md-block h3:first-child,
.md-block h4:first-child {
  margin-top: 0;
}

.md-block h2 { font-size: 17px; }
.md-block h3 { font-size: 15px; }
.md-block h4 { font-size: 13.5px; }

.md-block ul,
.md-block ol {
  margin: 4px 0 14px;
  padding-left: 22px;
}

.md-block li {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 4px;
}

.md-block li::marker {
  color: var(--faint);
}

.md-block blockquote {
  margin: 14px 0;
  padding-left: 14px;
  border-left: 2px solid var(--primary-line);
  color: var(--muted);
  font-style: italic;
}

.md-block blockquote p {
  margin: 0;
}

.md-block .table-scroll {
  overflow-x: auto;
  margin: 10px 0 16px;
}

.md-block table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.md-block th {
  text-align: left;
  padding: 7px 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.md-block td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.finding {
  margin-top: 22px;
  padding-left: 15px;
  border-left: 2px solid var(--border-strong);
}

.finding--key {
  border-left-color: var(--primary);
}

.finding__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.finding__claim {
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.finding__text {
  margin-top: 7px;
  color: var(--muted);
  font-size: 13.8px;
  line-height: 1.62;
}

/* Evidence */
.evidence {
  margin-top: 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

.evidence__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--muted);
  transition: background 0.14s ease, color 0.14s ease;
}

.evidence__summary::-webkit-details-marker {
  display: none;
}

.evidence__summary:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.evidence__chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.24s var(--ease);
}

.evidence[open] .evidence__chev {
  transform: rotate(90deg);
}

.evidence__conf {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
}

.confbar {
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: var(--bg-sunk);
  overflow: hidden;
}

.confbar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
}

.evidence__panel {
  border-top: 1px solid var(--border);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: fadeIn 0.24s ease both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ev-group__title {
  display: flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 7px;
}

.evidence.methodology {
  margin-top: 26px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 7px;
}

.metric {
  padding: 9px 10px;
  border-radius: var(--r-sm);
  background: var(--bg);
  min-width: 0;
}

.metric__value {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.metric__label {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

.metric__delta {
  font-size: 11px;
  font-weight: 600;
  margin-left: 5px;
}

.metric__delta--up { color: var(--ok); }
.metric__delta--down { color: var(--primary); }

.evmatches {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.evmatch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  transition: background 0.14s ease;
}

.evmatch:hover {
  background: var(--bg);
}

.evmatch__score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.evmatch__teams {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evmatch__date {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--faint);
}

.evlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.evlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 11.5px;
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease;
}

.evlink svg {
  width: 12px;
  height: 12px;
}

.evlink:hover {
  border-color: var(--primary-line);
  color: var(--text);
}

.evnote {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Visualisation blocks ── inline embeds, not dashboard cards ────────── */
.viz {
  margin-top: 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.viz__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px 6px;
}

.viz__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--faint);
}

.viz__icon svg {
  width: 14px;
  height: 14px;
}

.viz__titles {
  min-width: 0;
}

.viz__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viz__sub {
  font-size: 11px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Export control — sits in the chart header, hidden until the card is
   hovered or the control itself takes focus. Never appears in an export:
   static/js/viz-export.js skips [data-viz-export-skip]. */
.vizexp {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}

.vizexp__toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
}

.vizexp__toggle svg {
  width: 15px;
  height: 15px;
}

.viz:hover .vizexp__toggle,
.vizexp.is-open .vizexp__toggle,
.vizexp__toggle:focus-visible {
  opacity: 1;
}

.vizexp__toggle:hover,
.vizexp.is-open .vizexp__toggle {
  background: var(--surface-hover);
  color: var(--text);
}

.vizexp.is-busy .vizexp__toggle {
  opacity: 1;
  color: var(--primary);
  animation: vizexp-pulse 1s var(--ease) infinite;
}

@keyframes vizexp-pulse {
  50% {
    opacity: 0.4;
  }
}

/* The card clips its own chart to the rounded corners, which would clip this
   menu too on a short card — so it stops clipping while the menu is open. */
.viz:has(.vizexp.is-open) {
  overflow: visible;
}

.vizexp__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  display: none;
}

.vizexp.is-open .vizexp__menu {
  display: block;
}

.vizexp__label {
  padding: 5px 8px 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}

.vizexp__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.vizexp__item span {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--faint);
}

.vizexp__item:hover {
  background: var(--surface-hover);
}

.vizexp__sep {
  height: 1px;
  margin: 5px 8px;
  background: var(--border);
}

/* Touch devices have no hover to reveal the control with. */
@media (hover: none) {
  .vizexp__toggle {
    opacity: 1;
  }
}

.viz__caption {
  font-size: 11.5px;
  color: var(--faint);
  line-height: 1.5;
  padding: 0 14px 12px;
}

.viz__canvas {
  padding: 14px;
}

/* Charts stay readable rather than stretching to the full column width. */
.viz__canvas svg {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
}

.viz--radar .viz__canvas {
  padding: 6px 8px 10px;
}

.viz--radar .viz__canvas svg.radar-svg,
.viz--radar .viz__canvas svg {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
}

.viz--radar .viz__canvas svg text {
  font-family: var(--font-sans, "Segoe UI", system-ui, sans-serif);
}

.radar-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px 0;
  background: var(--bg);
  border-bottom: 1px solid transparent;
}

.radar-tab {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-sans, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.radar-tab:hover {
  color: var(--ink);
  border-color: #cfd4dc;
}

.radar-tab.is-active {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: var(--primary-soft);
}

.radar-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── The Puntrr app's heatmap ────────────────────────────────────────────
   home.js `vizPuntrrHeat` (a Heatmap with `style: "puntrr"`): the match-player
   sheet's pitch from the Puntrr app — the card's ground, a hairline edge, grey
   markings and the grey direction badge. Here rather than in embed.css
   because the reports and share pages draw these cards too, and without it
   the pitch outline fills black over the cloud. The embed's dark palette
   stays in embed.css, the only page with a dark theme. */
.pzh {
  --pzh-ground: #ffffff;
  --pzh-edge: #e7e9ef;
  --pzh-line: #b6bbc6;
  --pzh-badge: #8a90a0;
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  aspect-ratio: 105 / 68;
  background: var(--pzh-ground);
  border: 1px solid var(--pzh-edge);
  border-radius: 10px;
  overflow: hidden;
}

.viz__canvas .pzh__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}

.pzh__line {
  fill: none;
  stroke: var(--pzh-line);
  stroke-width: 0.8;
}

.pzh__spot {
  fill: var(--pzh-line);
}

.pzh__badge {
  fill: var(--pzh-badge);
}

.pzh__attack {
  fill: none;
  stroke: var(--pzh-ground);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── PrezzBox shotmap (Telegram mini-app match style, branded) ── */
/* Chart — model-written Vega-Lite (static/js/vega-chart.js). Vega sizes its
   SVG to the mount's width itself, so none of the .viz__canvas svg scaling
   above applies; the mount only caps how wide a chart may grow. */
.vchart {
  padding: 4px 14px 12px;
}

.vchart__mount {
  width: 100%;
  max-width: 720px;
  min-height: 160px;
  margin: 0 auto;
}

.vchart.is-drawn .vchart__mount {
  min-height: 0;
}

.vchart__mount svg {
  display: block;
}

/* A composed chart (facet, concat) sizes its own panels; wider than the
   mount, it is scaled down whole rather than cropped. */
.vchart--composed .vchart__mount svg {
  max-width: 100%;
  height: auto;
}

.vchart__error {
  margin: 0;
  padding: 28px 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.vchart__data {
  padding: 0 14px 12px;
}

.vchart__data > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.vchart__data > summary::-webkit-details-marker {
  display: none;
}

.vchart__data > summary::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s var(--ease);
}

.vchart__data[open] > summary {
  margin-bottom: 8px;
}

.vchart__data[open] > summary::before {
  transform: rotate(45deg);
}

.vchart__data > summary:hover,
.vchart__data > summary:focus-visible {
  color: var(--text);
}

.vchart-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  color: var(--text);
  font: 400 12px/1.45 var(--font-body);
  pointer-events: none;
}

.vchart-tip[hidden] {
  display: none;
}

.vchart-tip__title {
  margin-bottom: 4px;
  font-weight: 600;
}

.vchart-tip__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.vchart-tip__row strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.vchart-tip__row span {
  color: var(--muted);
}

.viz--shotmap {
  background: var(--surface);
}

.pa-shotmap {
  padding: 0;
  background: transparent;
}

.pa-shotmap--empty {
  padding: 28px 16px;
  text-align: center;
}

.pa-shotmap__empty {
  font-size: 13px;
  color: var(--muted);
}

.pa-shotmap-stage {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0b1020;
}

.pa-shotmap-goal {
  background:
    radial-gradient(ellipse 70% 80% at 50% 100%, rgba(230, 57, 70, 0.16), transparent 70%),
    #0b1020;
  padding: 12px 10px 8px;
}

.pa-goalmouth {
  display: block;
  width: 100%;
  height: auto;
  max-width: 520px;
  margin: 0 auto;
}

.pa-gm-void { fill: #050810; }
.pa-gm-apron { fill: #0f4020; }
.pa-gm-posts { fill: #f4f6fa; opacity: 0.92; }
.pa-gm-grid {
  fill: none;
  stroke: #f4f6fa;
  stroke-width: 1;
  opacity: 0.18;
}

.pa-shotmap-pitch {
  background:
    radial-gradient(ellipse 120% 40% at 50% 0%, rgba(0, 60, 20, 0.45) 0%, transparent 65%),
    linear-gradient(180deg, #0a2e14 0%, #0f4020 35%, #16562a 100%);
  padding: 6px 4px 10px;
}

.pa-sofa-pitch {
  display: block;
  width: 100%;
  height: auto;
  max-width: 520px;
  margin: 0 auto;
}

.pa-sofa-grass { fill: #0f4020; }
.pa-sofa-stripe.even { fill: rgba(255, 255, 255, 0.025); }
.pa-sofa-stripe.odd { fill: rgba(0, 0, 0, 0.08); }
.pa-sofa-line { fill: rgba(255, 255, 255, 0.14); }

.pa-shot-outer {
  fill: rgba(230, 57, 70, 0.18);
  stroke: rgba(230, 57, 70, 0.42);
  stroke-width: 1;
  transition: opacity 0.22s ease, fill 0.22s ease, stroke 0.22s ease;
}

.pa-shot-g.on-target .pa-shot-outer {
  fill: rgba(230, 57, 70, 0.3);
  stroke: rgba(230, 57, 70, 0.7);
}

.pa-shot-g.is-goal .pa-shot-outer {
  fill: rgba(230, 57, 70, 0.55);
  stroke: rgba(255, 107, 107, 0.95);
}

.pa-shot-inner {
  fill: #0b1020;
  pointer-events: none;
}

.pa-shot-g.is-selected .pa-shot-outer {
  fill: rgba(230, 57, 70, 0.72);
  stroke: #fff;
  stroke-width: 1.7;
}

.pa-shot-ball { color: #0b1020; }
.pa-shot-ball-halo {
  fill: var(--primary);
  stroke: #fff;
  stroke-width: 1.4;
}
.pa-shot-ball-glyph { overflow: visible; }
.pa-gm-ball .pa-shot-ball-halo {
  fill: var(--primary);
  stroke: #fff;
  stroke-width: 1.2;
}
.pa-gm-ball--off .pa-shot-ball-halo {
  opacity: 0.75;
  stroke-dasharray: 1.5 1.5;
}

.pa-trajectory {
  stroke: #f4f6fa;
  stroke-width: 1.8;
  stroke-opacity: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.pa-shot-detail {
  margin: 12px 14px 4px;
  padding: 10px 12px 12px;
  border-radius: var(--r-md);
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}

.pa-shot-detail.is-in {
  opacity: 1;
  transform: none;
}

.pa-shot-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.pa-shot-nav-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.2s ease, background 0.2s ease;
}

.pa-shot-nav-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.pa-shot-player {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pa-shot-player-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.pa-shot-player-min {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}

.pa-shot-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pa-shot-stats + .pa-shot-stats {
  margin-top: 8px;
}

.pa-shot-stat span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 2px;
}

.pa-shot-stat strong {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  text-transform: capitalize;
}

.pa-shotmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px 14px;
  font-size: 11px;
  color: var(--muted);
}

.pa-shotmap-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pa-shotmap-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(230, 57, 70, 0.45);
  background: rgba(230, 57, 70, 0.18);
}

.pa-shotmap-legend i.is-on {
  background: rgba(230, 57, 70, 0.35);
  border-color: rgba(230, 57, 70, 0.75);
}

.pa-shotmap-legend i.is-goal {
  background: var(--primary);
  border-color: var(--primary-bright);
}

.pa-shotmap-legend i.is-off {
  background: transparent;
  border-color: #b9bfc9;
}

@media (max-width: 640px) {
  .pa-shot-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pa-shot-detail,
  .pa-shot-outer {
    transition: none;
  }
}

/* ── Starting XI pitch lineup ── */
.viz--lineup {
  background: var(--surface);
  overflow: hidden;
}

.viz--lineup .viz__head {
  padding: 10px 14px 8px;
}

.pa-lineup {
  position: relative;
  padding: 0 0 6px;
  --kit: #64748b;
  color: var(--text);
}

.pa-lineup-stage {
  position: relative;
  margin: 0 2px;
}

.pa-lineup-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 105 / 68;
  max-height: min(780px, 86vh);
  border-radius: 10px;
  overflow: hidden;
  background: #eef1f5;
  box-shadow: inset 0 0 0 1px var(--border);
}

.pa-lineup[data-layout="dual"] .pa-lineup-pitch {
  max-height: min(840px, 90vh);
}

.pa-lineup-markings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.pa-lineup-turf {
  fill: #eef1f5;
}

.pa-lineup-brand {
  display: none;
}

.pa-lineup-center-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  /* Sized to fit the full tall logo inside the centre circle. */
  width: min(36px, 7%);
  height: min(52px, 14%);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0.28;
}

.pa-lineup-center-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.pa-lineup-forms {
  position: absolute;
  inset: 8px 10px auto;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.pa-lineup-form {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 2px 0;
}

.pa-lineup-form--home::before,
.pa-lineup-form--away::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kit, #64748b);
  margin-right: 6px;
  vertical-align: middle;
  opacity: 0.85;
}

/* The crest stands in for the kit dot (home.js lineupFormChip). */
.pa-lineup-form.pa-lineup-form--crest::before {
  content: none;
}

.pa-lineup-crest {
  width: 16px;
  height: 16px;
  object-fit: contain;
  margin-right: 6px;
  vertical-align: middle;
}

.pa-lineup-players {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.pa-lineup-player {
  position: absolute;
  /* Tactical point is left/top %; marker centers on that point. */
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
  --label-dy: 0px;
  --marker-size: 38px;
  transform: none;
  transition: left 0.45s var(--ease), top 0.45s var(--ease);
}

.pa-lineup[data-layout="dual"] .pa-lineup-player {
  --marker-size: 28px;
}

.pa-lineup-player.is-hot,
.pa-lineup-player.is-active,
.pa-lineup-player:focus-visible {
  z-index: 5;
  outline: none;
}

.pa-lineup-player.is-hot .pa-lineup-portrait,
.pa-lineup-player.is-active .pa-lineup-portrait,
.pa-lineup-player:focus-visible .pa-lineup-portrait {
  transform: translate(-50%, -50%) scale(1.06);
}

.pa-lineup-portrait {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0;
  transition: transform 0.2s var(--ease);
}

.pa-lineup-marker {
  position: relative;
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: 50%;
  background: #e8ecf2;
  border: 2px solid var(--kit, #64748b);
  box-shadow:
    0 1px 3px rgba(17, 17, 24, 0.12),
    0 0 0 1px rgba(17, 17, 24, 0.04);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.pa-lineup[data-layout="dual"] .pa-lineup-marker {
  width: var(--marker-size);
  height: var(--marker-size);
}

.pa-lineup-player.is-hot .pa-lineup-marker,
.pa-lineup-player.is-active .pa-lineup-marker {
  box-shadow:
    0 2px 8px rgba(17, 17, 24, 0.14),
    0 0 0 1.5px var(--primary-line);
}

.pa-lineup-avatar,
.pa-lineup-silhouette {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pa-lineup-info {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, calc(var(--marker-size) * 0.55 + 3px + var(--label-dy, 0px)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  width: max-content;
  max-width: 92px;
}

.pa-lineup[data-layout="dual"] .pa-lineup-info {
  max-width: 82px;
}

.pa-lineup-rating {
  position: static;
  transform: none;
  margin-top: 0;
  min-width: 26px;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
  text-align: center;
  border: 0;
  box-shadow: 0 1px 2px rgba(17, 17, 24, 0.12);
  z-index: 2;
}

.pa-lineup-rating--elite {
  background: #0f766e;
}

.pa-lineup-rating--strong {
  background: #15803d;
}

.pa-lineup-rating--ok {
  background: #a16207;
}

.pa-lineup-rating--poor {
  background: #c2410c;
}

.pa-lineup-events {
  position: absolute;
  top: -3px;
  left: -5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 3;
  pointer-events: none;
}

.pa-lineup-evt {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  color: #111118;
  font-size: 6px;
  font-weight: 800;
  line-height: 11px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(17, 17, 24, 0.18);
  border: 1px solid var(--border);
}

.pa-lineup-evt--goal {
  background:
    radial-gradient(circle at 40% 35%, #fff 0 18%, transparent 19%),
    #111118;
  border: 1px solid #f4f6fa;
}

.pa-lineup-evt--assist {
  font-size: 7px;
}

.pa-lineup-evt--og {
  width: auto;
  padding: 0 2px;
  border-radius: 3px;
  font-size: 5px;
}

.pa-lineup-evt--yc {
  width: 7px;
  height: 10px;
  border-radius: 1.5px;
  background: #eab308;
}

.pa-lineup-evt--rc {
  width: 7px;
  height: 10px;
  border-radius: 1.5px;
  background: #dc2626;
}

.pa-lineup-evt--sub {
  background:
    linear-gradient(135deg, transparent 40%, #16a34a 40% 60%, transparent 60%),
    linear-gradient(315deg, transparent 40%, #dc2626 40% 60%, transparent 60%),
    #f4f6fa;
}

.pa-lineup-evt--cap {
  width: auto;
  min-width: 11px;
  padding: 0 2px;
  border-radius: 3px;
  font-size: 6px;
  background: #2563eb;
  color: #fff;
}

.pa-lineup-meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  max-width: 92px;
  margin-top: 0;
  transform: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: var(--text);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pa-lineup[data-layout="dual"] .pa-lineup-meta {
  max-width: 82px;
  font-size: 10px;
}

.pa-lineup-num {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92em;
}

.pa-lineup-lastname {
  color: var(--text);
  font-weight: 600;
}

.pa-lineup-card {
  position: absolute;
  z-index: 8;
  transform: translate(-50%, -100%);
  min-width: 160px;
  max-width: 220px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pa-lineup-card__close {
  position: absolute;
  top: 4px;
  right: 6px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.pa-lineup-card strong {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  padding-right: 16px;
}

.pa-lineup-card__num {
  color: var(--muted);
  font-weight: 600;
}

.pa-lineup-card__rating {
  position: static;
  transform: none;
  align-self: flex-start;
  margin-top: 1px;
  font-size: 10px;
}

.pa-lineup-card__role {
  color: var(--muted);
  font-size: 10px;
}

.pa-lineup-card__line {
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}

.pa-lineup-card__line--mute {
  color: var(--muted);
  font-weight: 500;
}

@media (max-width: 720px) {
  .pa-lineup-stage {
    margin: 0 4px;
  }

  .pa-lineup-pitch {
    max-height: none;
  }

  .pa-lineup-player {
    --marker-size: 30px;
  }

  .pa-lineup[data-layout="dual"] .pa-lineup-player {
    --marker-size: 26px;
  }

  .pa-lineup-info {
    max-width: 70px;
  }

  .pa-lineup-meta {
    font-size: 9.5px;
    max-width: 70px;
  }

  .pa-lineup-rating {
    font-size: 9px;
    min-width: 22px;
    padding: 0 4px;
  }

  .pa-lineup-form {
    font-size: 9px;
  }

  .pa-lineup-crest {
    width: 14px;
    height: 14px;
    margin-right: 5px;
  }
}

.viz__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
}

.viz__legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.viz__legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

.viz__legend i.is-alt {
  background: #2b5fd9;
}

.viz__legend i.is-mute {
  background: var(--border-strong);
}

/* A series' face in place of its dot, ringed in the dot's colour. */
.viz__legend .pa-face {
  width: 22px;
  height: 22px;
}

.viz__legend .pa-face__disc {
  box-shadow: 0 0 0 1.5px var(--primary);
}

.viz__legend .is-mute .pa-face__disc {
  box-shadow: 0 0 0 1.5px var(--border-strong);
}

.viz__legend > span > .pa-crest {
  width: 18px;
  height: 18px;
}

/* ── Faces and crests (home.js faceHtml / crestHtml) ───────────────────── */

.pa-face {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  vertical-align: middle;
}

.pa-face__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #e8ecf2;
}

.pa-face__blank,
.pa-face__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pa-face__img {
  object-fit: cover;
  object-position: center top;
}

/* The club badge on a face's edge, on a white disc so it reads against
   any photo. */
.pa-face > .pa-face__badge {
  position: absolute;
  right: -3px;
  bottom: -2px;
  width: 46%;
  height: 46%;
  padding: 1px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.1);
  object-fit: contain;
}

.pa-crest {
  display: inline-block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
}

/* One player or one club leads the card where the kind icon would sit. */
.viz__subject {
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.viz__subject .pa-face {
  width: 38px;
  height: 38px;
}

.viz__subject > .pa-crest {
  width: 30px;
  height: 30px;
}

/* A scatter's highlighted players: faces laid over their dots. The wrapper
   takes the SVG's own box (.viz__canvas svg caps it at 600px), so the
   percentages land where the dots are. */
.pa-scatter {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.pa-scatter__faces {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pa-scatter__face {
  position: absolute;
  width: 6%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.pa-scatter__face .pa-face {
  width: 100%;
  height: 100%;
}

.pa-scatter__face .pa-face__disc {
  box-shadow: 0 0 0 2px #e63946;
}

.pa-shot-face {
  width: 38px;
  height: 38px;
}

/* A table cell naming a player, club or competition, led by its face or
   crest (home.js mdCellHtml / cellText). */
.cell-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  vertical-align: middle;
}

.cell-mark .pa-face {
  width: 22px;
  height: 22px;
}

.cell-mark > .pa-crest {
  width: 18px;
  height: 18px;
}

/* Ranking bars */
.vbars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vbar {
  display: grid;
  grid-template-columns: minmax(72px, 116px) minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.vbar__name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
}

.vbar__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rows with a face or crest get the room the mark takes from the name. */
.vbars.has-marks .vbar {
  grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) 52px;
}

.vbar__name .pa-face {
  width: 24px;
  height: 24px;
}

.vbar__name > .pa-crest {
  width: 20px;
  height: 20px;
}

.vbar__track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-sunk);
  overflow: hidden;
}

.vbar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: #c3c9d3;
}

.vbar__val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted);
}

.vbar.is-lead .vbar__fill {
  background: var(--primary);
}

.vbar.is-lead .vbar__name,
.vbar.is-lead .vbar__val {
  color: var(--text);
}

/* Comparison table block — dense, scrollable, first column pinned */
.viz:has(.cmp-wrap) .viz__head {
  padding: 8px 10px;
}

.cmp-wrap {
  overflow: auto;
  max-height: min(380px, 62vh);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.cmp {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  line-height: 1.25;
}

.cmp th,
.cmp td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cmp thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  background: var(--bg);
}

.cmp th:first-child,
.cmp td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  font-weight: 500;
  max-width: 148px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
}

.cmp thead th:first-child {
  z-index: 3;
  background: var(--bg);
}

.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td {
  border-bottom: 0;
}

.cmp td.is-lead {
  color: var(--primary);
  font-weight: 700;
}

/* ── Follow-ups & message actions ────────── */
.followups {
  margin-top: 20px;
}

.followups__title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}

.followups__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.msg__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--faint);
  font-size: 11.5px;
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease;
}

.act svg {
  width: 13px;
  height: 13px;
}

.act:hover {
  color: var(--text);
  background: var(--surface-hover);
}

/* ── Prompt dock ─────────────────────────── */
.center__dock {
  position: relative;
  flex: 0 0 auto;
  z-index: 5;
  padding: 10px var(--gutter) 16px;
  background: var(--bg);
}

/* Fades the thread out behind the docked prompt instead of cutting it off. */
.center__dock::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  height: 24px;
  background: linear-gradient(to bottom, rgba(247, 248, 250, 0), var(--bg));
  pointer-events: none;
}

.center__dock .composer-slot {
  max-width: var(--center-max);
  margin: 0 auto;
}

.center__dock .composer {
  box-shadow: var(--shadow-sm);
}

.center__dock .composer:focus-within {
  box-shadow: 0 0 0 3px var(--primary-glow), var(--shadow-sm);
}

.center__dock .composer__field {
  padding: 12px 18px 2px;
}

.center__dock .composer__input {
  min-height: 26px;
  font-size: 14.5px;
}

.center__dock .composer__ghost {
  top: 12px;
  left: 18px;
  right: 18px;
  font-size: 14.5px;
}

/* The ghost is a span layered over the textarea, so the global anti-zoom rule
   in base.html (which only targets real fields) misses it. Track the input's
   mobile size by hand or the placeholder drifts out of register with the caret.
   Placed after both base rules so it wins on source order. */
@media (max-width: 720px) {
  .composer__ghost,
  .center__dock .composer__ghost {
    font-size: calc(16px / var(--mobile-zoom));
  }
}

.dock-note {
  max-width: var(--center-max);
  margin: 8px auto 0;
  text-align: center;
  font-size: 10.5px;
  color: var(--faint);
}

/* Composer flight between the launcher and the dock */
.composer.is-flying {
  will-change: transform;
}

/* ── Command palette ─────────────────────── */
.palette {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 20px;
}

.palette__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 24, 0.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fadeIn 0.18s ease both;
}

.palette__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  animation: paletteIn 0.24s var(--ease) both;
}

@keyframes paletteIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.palette__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
}

.palette__field svg {
  width: 16px;
  height: 16px;
  color: var(--faint);
  flex-shrink: 0;
}

.palette__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14.5px;
}

.palette__results {
  max-height: 46vh;
  overflow-y: auto;
  padding: 6px;
}

.palette__group {
  padding: 8px 8px 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.palette__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 13.2px;
}

.palette__item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--muted);
}

.palette__item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette__item small {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--faint);
}

.palette__item.is-cursor,
.palette__item:hover {
  background: var(--surface-hover);
}

.palette__item.is-cursor {
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.palette__empty {
  padding: 22px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--faint);
}

/* ── Toast ───────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 10px);
  z-index: 90;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  font-size: 12.5px;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.28s var(--ease);
}

.toast.is-in {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── Mobile scrim ────────────────────────── */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 24;
  background: rgba(17, 17, 24, 0.34);
}

/* ── Guest access & sign-up wall ─────────── */
.topnav__guest {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 2px;
}

.guestcount {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--faint);
  white-space: nowrap;
}

.guestbtn {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.guestbtn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.guestbtn--primary {
  border-color: transparent;
  background: var(--primary);
  color: #fff;
}

.guestbtn--primary:hover {
  background: var(--primary-bright);
  border-color: transparent;
  color: #fff;
}

.library__guestnote {
  margin: 0 16px 14px;
  padding: 11px 12px;
  border: 1px solid var(--primary-line);
  border-radius: var(--r-md);
  background: var(--primary-soft);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

.library__guestnote a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.library__guestnote a:hover {
  text-decoration: underline;
}

.signupwall {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
}

.signupwall__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 24, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.18s ease both;
}

.signupwall__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 30px 30px 26px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  text-align: center;
  animation: paletteIn 0.22s var(--ease) both;
}

.signupwall__x {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.signupwall__x:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.signupwall__x svg {
  width: 16px;
  height: 16px;
}

.signupwall__logo {
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
}

.signupwall__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--text);
}

.signupwall__sub {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.signupwall__perks {
  margin: 18px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  text-align: left;
  max-width: 320px;
}

.signupwall__perks li {
  position: relative;
  padding-left: 22px;
  font-size: 12.5px;
  color: var(--muted);
}

.signupwall__perks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

.signupwall__actions {
  margin-top: 22px;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.signupwall__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s var(--ease);
}

.signupwall__cta:hover {
  background: var(--primary-bright);
  transform: translateY(-1px);
}

.signupwall__alt {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}

.signupwall__alt:hover {
  color: var(--text);
  text-decoration: underline;
}

/* ── Publish to Puntrr (staff) ───────────── */
/* The answer's action. Brand-red once it is live, so a staff member sees at
   a glance that an answer is already out before publishing it again. */
.act--publish {
  color: var(--muted);
}

.act--publish.is-live {
  color: var(--primary);
  background: var(--primary-soft);
}

.act--publish.is-failed {
  color: var(--text);
  border-color: var(--primary-line);
}

.pubsheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
}

.pubsheet[hidden] {
  display: none;
}

.pubsheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 24, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.18s ease both;
}

.pubsheet__panel {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 26px 26px 22px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  animation: paletteIn 0.22s var(--ease) both;
}

.pubsheet__x {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}

.pubsheet__x:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.pubsheet__x svg {
  width: 16px;
  height: 16px;
}

.pubsheet__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.pubsheet__sub {
  margin-top: 6px;
  padding-right: 24px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

.pubsheet__body {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.pubsheet__loading {
  padding: 24px 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.pubsheet__field {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pubsheet__label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.pubsheet__label em {
  font-style: normal;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.pubsheet__field input,
.pubsheet__field textarea,
.pubsheet__hours select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: 400 13.5px/1.45 var(--font-body);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pubsheet__field textarea {
  resize: vertical;
  min-height: 84px;
}

.pubsheet__field input:focus,
.pubsheet__field textarea:focus,
.pubsheet__hours select:focus {
  outline: none;
  border-color: var(--primary-line);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.pubsheet__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.pubsheet__seg {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--bg-sunk);
}

.pubsheet__seg button {
  min-width: 72px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font: 500 13px var(--font-body);
  cursor: pointer;
}

.pubsheet__seg button[aria-checked="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.pubsheet__hours {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
}

.pubsheet__hours[hidden] {
  display: none;
}

.pubsheet__hours select {
  width: auto;
  padding: 6px 10px;
}

.pubsheet__cards {
  gap: 4px;
}

.pubsheet__cards legend {
  margin-bottom: 6px;
}

.pubsheet__card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.pubsheet__card:has(input:checked) {
  border-color: var(--primary-line);
  background: var(--primary-soft);
}

.pubsheet__card:has(input:disabled:not(:checked)) {
  opacity: 0.5;
  cursor: not-allowed;
}

.pubsheet__card input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--primary);
}

.pubsheet__card span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pubsheet__card em {
  font-style: normal;
  font-size: 11px;
  color: var(--faint);
}

.pubsheet__existing {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--bg-sunk);
}

.pubsheet__existing ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pubsheet__pub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text);
}

.pubsheet__pubtext {
  flex: 1;
  min-width: 0;
}

.pubsheet__pubtext em {
  font-style: normal;
  color: var(--faint);
  white-space: nowrap;
}

.pubsheet__puberr {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}

.pubsheet__pub button,
.pubsheet__link {
  padding: 4px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font: 500 12px var(--font-body);
  cursor: pointer;
}

.pubsheet__pub button:hover,
.pubsheet__link:hover {
  background: var(--surface);
  color: var(--text);
}

.pubsheet__link {
  justify-self: start;
  padding-left: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pubsheet__editing {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary);
}

.pubsheet__pill {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.pubsheet__pill--live {
  background: rgba(22, 160, 106, 0.12);
  color: #0f7a50;
}

.pubsheet__pill--failed {
  background: var(--primary-soft);
  color: #b4232f;
}

.pubsheet__pill--off {
  background: var(--surface);
  color: var(--muted);
}

.pubsheet__error {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--primary-soft);
  color: #b4232f;
  font-size: 12.5px;
  line-height: 1.45;
}

.pubsheet__error[hidden] {
  display: none;
}

.pubsheet__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.pubsheet__ghost,
.pubsheet__cta {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-md);
  font: 600 13.5px var(--font-body);
  cursor: pointer;
}

.pubsheet__ghost {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
}

.pubsheet__cta {
  min-width: 150px;
  border: 0;
  background: var(--primary);
  color: #fff;
  transition: background 0.15s ease;
}

.pubsheet__cta:hover:not(:disabled) {
  background: var(--primary-bright);
}

.pubsheet__cta:disabled,
.pubsheet__ghost:disabled {
  opacity: 0.6;
  cursor: progress;
}

@media (max-width: 560px) {
  .pubsheet {
    align-items: flex-end;
    padding: 0;
  }

  .pubsheet__panel {
    max-width: none;
    max-height: 92dvh;
    padding: 22px 16px 18px;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }

  .pubsheet__actions > * {
    flex: 1;
  }
}

/* ── Responsive ──────────────────────────── */
@media (max-width: 1320px) {
  :root {
    --lib-w: 250px;
    --gutter: 24px;
  }
}

@media (max-width: 900px) {
  :root {
    --gutter: 18px;
  }

  .cmp {
    font-size: 10.5px;
  }

  .cmp th,
  .cmp td {
    padding: 4px 6px;
  }

  .cmp thead th {
    font-size: 9px;
  }

  .cmp th:first-child,
  .cmp td:first-child {
    max-width: 120px;
  }

  .cmp-wrap {
    max-height: min(340px, 55vh);
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Small screens carry three things only: the drawer toggle, the brand and
     one action. Everything else lives in the library drawer or the palette. */
  .topnav {
    gap: 8px;
    padding: 0 12px;
  }

  .topnav__actions {
    gap: 8px;
  }

  .topnav__menu {
    display: grid;
  }

  .topnav__search {
    display: none;
  }

  .guestcount {
    display: none;
  }

  /* Placeholder bell; nothing behind it that the drawer doesn't already show. */
  .topnav__notif {
    display: none;
  }

  /* "Sign in" stays reachable from the library foot and the guest note. */
  .topnav__guest .guestbtn:not(.guestbtn--primary),
  .guestbtn__more {
    display: none;
  }

  /* The palette button drops to its icon — the label and the keyboard hint
     are both dead weight on a touch device. */
  .cmdbtn--palette span,
  .cmdbtn--palette kbd {
    display: none;
  }

  /* Square off the icon-only buttons and widen the touch targets. */
  .topnav__menu,
  .topnav__actions .iconbtn,
  .cmdbtn--palette {
    width: 38px;
    height: 38px;
  }

  .cmdbtn--palette {
    padding: 0;
    justify-content: center;
  }

  .guestbtn {
    height: 38px;
    padding: 0 16px;
  }

  .topnav__user .avatar {
    width: 34px;
    height: 34px;
    font-size: 12.5px;
  }

  .library {
    position: fixed;
    top: var(--nav-h);
    bottom: 0;
    left: 0;
    width: min(300px, 86vw);
    transform: translateX(-104%);
    transition: transform 0.3s var(--ease);
    box-shadow: var(--shadow-lift);
  }

  body.library-open .library {
    transform: none;
  }

  .library__close {
    display: grid;
  }

  /* Keep the greeting on a single line. The string measures ~17.5em wide in
     Space Grotesk 600 at this letter-spacing, so 100cqw / 17.5 = 5.7cqw is the
     largest size that still fits; 5.4cqw leaves ~5% for the fallback face
     during the font swap. Desktop keeps the clamp — 38px fits 780px fine. */
  .welcome__title {
    font-size: min(30px, 5.4cqw);
    white-space: nowrap;
  }

  .msg--user .msg__body {
    max-width: 94%;
  }
}

@media (max-width: 560px) {
  .composer__hint {
    display: none;
  }

  .cmp {
    font-size: 10px;
  }

  .cmp th,
  .cmp td {
    padding: 3px 5px;
  }

  .cmp thead th {
    font-size: 8.5px;
    letter-spacing: 0.04em;
  }

  .cmp th:first-child,
  .cmp td:first-child {
    max-width: 96px;
    padding-left: 8px;
  }

  .cmp th:last-child,
  .cmp td:last-child {
    padding-right: 8px;
  }

  .cmp-wrap {
    max-height: min(300px, 50vh);
  }

  .ctool--wide span {
    display: none;
  }

  .inv__tags {
    margin-left: 0;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}