/* ─────────────────────────────────────────────────────────────────────────────
   PoolQuant — application styles (production)
   Drop into app/static/. Imported by base.html after tokens.css.
   This is the file the dev team ships. The static review pages reuse it.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── reset ──────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
}
body {
  background:
    radial-gradient(ellipse 80vw 60vh at 80% -10%, rgba(10, 107, 140, 0.05), transparent 60%),
    radial-gradient(ellipse 60vw 50vh at 0% 110%, rgba(31, 138, 92, 0.03), transparent 55%),
    var(--pq-paper);
  background-attachment: fixed;
  color: var(--pq-ink);
  font-family: var(--pq-font-sans);
  font-size: var(--pq-text-base);
  line-height: var(--pq-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, .pq-btn, .pq-filter, a { touch-action: manipulation; }
a { color: var(--pq-brand); text-decoration: none; }
a:hover { color: var(--pq-brand-hover); text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: none; box-shadow: var(--pq-focus); border-radius: var(--pq-radius-md); }
img { max-width: 100%; display: block; }

/* ── layout shell ───────────────────────────────────────────────────────── */
.pq-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}
.pq-shell.compact { grid-template-columns: 64px minmax(0, 1fr); }
@media (max-width: 880px) {
  .pq-shell { grid-template-columns: minmax(0, 1fr); }
}

/* ── side rail (desktop) ────────────────────────────────────────────────── */
.pq-rail {
  background: linear-gradient(180deg, var(--pq-surface) 0%, var(--pq-paper-2) 100%);
  border-right: 1px solid var(--pq-line);
  padding: var(--pq-space-4) var(--pq-space-3);
  display: flex; flex-direction: column; gap: var(--pq-space-1);
  position: sticky; top: 0; height: 100vh;
  box-shadow: 1px 0 0 rgba(13, 60, 90, 0.02), 4px 0 24px rgba(13, 60, 90, 0.03);
}
.pq-rail .brand {
  display: flex; align-items: center; gap: var(--pq-space-2);
  padding: var(--pq-space-2) var(--pq-space-3) var(--pq-space-4);
  text-decoration: none;
}
.pq-rail .brand img { height: 28px; }
.pq-rail .pool-pick {
  display: flex; align-items: center; gap: var(--pq-space-2);
  padding: var(--pq-space-2) var(--pq-space-3);
  background: var(--pq-surface);
  border: 1px solid var(--pq-line);
  border-radius: var(--pq-radius-lg);
  font-size: var(--pq-text-md);
  color: var(--pq-ink);
  cursor: pointer;
  margin: 0 0 var(--pq-space-3);
  font-weight: var(--pq-fw-medium);
  box-shadow: 0 1px 2px rgba(13, 60, 90, 0.04);
  transition: border-color var(--pq-dur-fast) var(--pq-ease);
}
.pq-rail .pool-pick:hover { border-color: var(--pq-line-2); }
.pq-rail .pool-pick .caret { margin-left: auto; color: var(--pq-ink-3); }
.pq-rail .nav { display: flex; flex-direction: column; gap: 2px; }
.pq-rail .nav a {
  display: flex; align-items: center; gap: var(--pq-space-3);
  padding: var(--pq-space-2) var(--pq-space-3);
  border-radius: var(--pq-radius-md);
  font-size: var(--pq-text-md);
  font-weight: var(--pq-fw-medium);
  color: var(--pq-ink-2);
  text-decoration: none;
}
.pq-rail .nav a:hover { background: var(--pq-paper-2); color: var(--pq-ink); }
.pq-rail .nav a.active {
  background: linear-gradient(180deg, var(--pq-brand-tint), var(--pq-brand-tint-2));
  color: var(--pq-brand-deep);
  box-shadow: 0 1px 2px rgba(7, 77, 102, 0.08), inset 0 0 0 1px var(--pq-brand-soft);
}
.pq-rail .nav a .ico { width: 18px; height: 18px; opacity: 0.7; }
.pq-rail .nav a.active .ico { opacity: 1; }

.pq-rail .footer {
  margin-top: auto;
  padding: var(--pq-space-3);
  font-size: var(--pq-text-xs);
  color: var(--pq-ink-3);
  border-top: 1px solid var(--pq-line);
  display: flex; align-items: center; gap: var(--pq-space-2);
}
.pq-rail .footer .avatar {
  width: 24px; height: 24px; border-radius: 50%; background: var(--pq-brand-tint-2); color: var(--pq-brand-deep);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
}

/* ── content frame ──────────────────────────────────────────────────────── */
.pq-main { display: flex; flex-direction: column; min-width: 0; }

/* Safe-area-aware topbars on non-pool surfaces (home, settings, terms, privacy).
   Each template defines its own .pq-*-topbar with height 52 + sticky top: 0; this
   rule extends them so the dynamic island doesn't cover the contents on iOS PWA. */
.pq-home-topbar, .pq-settings-topbar, .pq-prose-topbar {
  padding-top: env(safe-area-inset-top);
  height: calc(52px + env(safe-area-inset-top));
}
.pq-topbar {
  height: calc(52px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--pq-line);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  display: flex; align-items: center; gap: var(--pq-space-3);
  padding-left: var(--pq-space-6);
  padding-right: var(--pq-space-6);
  position: sticky; top: 0; z-index: var(--pq-z-sticky);
}
.pq-topbar { flex-wrap: nowrap; min-width: 0; }
.pq-topbar > * { flex-shrink: 0; min-width: 0; }
.pq-topbar h1 {
  font-size: var(--pq-text-lg);
  font-weight: var(--pq-fw-semibold);
  margin: 0;
  letter-spacing: -0.005em;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}
.pq-topbar .pq-back { flex-shrink: 0; white-space: nowrap; }
.pq-topbar .crumb { font-size: var(--pq-text-md); color: var(--pq-ink-3); }
.pq-topbar .spacer { flex: 1; }
.pq-topbar .actions { display: flex; gap: var(--pq-space-2); }

/* ── tab strip (under topbar — Chat / Today / Trends / Summary) ─────────── */
.pq-tabs {
  display: flex;
  border-bottom: 1px solid var(--pq-line);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  padding: 0 var(--pq-space-6);
  gap: var(--pq-space-1);
  position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: var(--pq-z-sticky);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-shadow: 0 1px 0 rgba(13, 60, 90, 0.02), 0 6px 16px -10px rgba(13, 60, 90, 0.08);
}
.pq-tabs::-webkit-scrollbar { display: none; }
.pq-tabs a { white-space: nowrap; }
.pq-tabs .tab-short { display: none; }
@media (max-width: 700px) {
  .pq-tabs .tab-long { display: none; }
  .pq-tabs .tab-short { display: inline; }
}
@media (max-width: 700px) {
  .pq-tabs { padding: 0 var(--pq-space-3); }
  .pq-tabs a { padding: var(--pq-space-3) var(--pq-space-3); }
  /* IMPORTANT: keep padding-top: env(safe-area-inset-top) intact — only override the
     horizontal padding here, not the shorthand. */
  .pq-topbar {
    padding-left: var(--pq-space-3);
    padding-right: var(--pq-space-3);
    gap: var(--pq-space-2);
  }
  .pq-topbar h1 { font-size: var(--pq-text-md); }
  .pq-topbar .crumb { display: none; }
  .pq-stream { padding: var(--pq-space-4) var(--pq-space-3) var(--pq-space-16); }
  .pq-composer-wrap { padding-left: var(--pq-space-3); padding-right: var(--pq-space-3); }
}
.pq-tabs a {
  padding: var(--pq-space-3) var(--pq-space-4);
  font-size: var(--pq-text-md);
  font-weight: var(--pq-fw-medium);
  color: var(--pq-ink-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: flex; align-items: center; gap: var(--pq-space-2);
}
.pq-tabs a:hover { color: var(--pq-ink); }
.pq-tabs a.active {
  color: var(--pq-brand);
  border-bottom-color: var(--pq-brand);
  font-weight: var(--pq-fw-semibold);
}
.pq-tabs a .badge {
  background: var(--pq-paper-2); color: var(--pq-ink-3);
  font-size: var(--pq-text-2xs); font-weight: var(--pq-fw-semibold);
  padding: 1px 6px; border-radius: var(--pq-radius-pill);
  letter-spacing: 0.04em;
}
.pq-tabs a.active .badge { background: var(--pq-brand-tint); color: var(--pq-brand-deep); }

/* ── buttons ────────────────────────────────────────────────────────────── */
.pq-btn {
  display: inline-flex; align-items: center; gap: var(--pq-space-2);
  font: inherit; font-size: var(--pq-text-md); font-weight: var(--pq-fw-medium);
  padding: var(--pq-space-2) var(--pq-space-3);
  border-radius: var(--pq-radius-md); border: 1px solid var(--pq-line-2);
  background: var(--pq-surface); color: var(--pq-ink);
  cursor: pointer; transition: background var(--pq-dur-fast) var(--pq-ease), border-color var(--pq-dur-fast) var(--pq-ease);
}
.pq-btn:hover { background: var(--pq-paper-2); }
.pq-btn.primary {
  background: linear-gradient(180deg, var(--pq-brand) 0%, var(--pq-brand-hover) 100%);
  color: white; border-color: var(--pq-brand-hover);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 1px 2px rgba(7, 77, 102, 0.18),
    0 4px 8px -2px rgba(7, 77, 102, 0.20);
}
.pq-btn.primary:hover {
  background: linear-gradient(180deg, var(--pq-brand-hover) 0%, var(--pq-brand-deep) 100%);
  border-color: var(--pq-brand-deep);
}
.pq-btn.ghost { border-color: transparent; background: transparent; color: var(--pq-ink-2); }
.pq-btn.ghost:hover { background: var(--pq-paper-2); color: var(--pq-ink); }
.pq-btn.sm { padding: 4px 10px; font-size: var(--pq-text-sm); }
.pq-btn .ico { width: 16px; height: 16px; }

/* ── pills + tags ───────────────────────────────────────────────────────── */
.pq-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: var(--pq-radius-sm);
  font-size: var(--pq-text-2xs); font-weight: var(--pq-fw-bold);
  text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--pq-paper-2); color: var(--pq-ink-3);
  white-space: nowrap;
}
.pq-tag.measurement { background: var(--pq-good-tint); color: var(--pq-good); }
.pq-tag.action      { background: var(--pq-warn-tint); color: var(--pq-warn); }
.pq-tag.note        { background: var(--pq-paper-2);   color: var(--pq-ink-3); }
.pq-tag.question    { background: var(--pq-info-tint); color: var(--pq-info); }
.pq-tag.image       { background: #f0eafa;             color: #6f4cb8; }
.pq-tag.rejected    { background: var(--pq-bad-tint);  color: var(--pq-bad); }
.pq-tag.assistant   { background: var(--pq-brand-tint); color: var(--pq-brand-deep); }
.pq-tag.weather     { background: var(--pq-info-tint); color: var(--pq-info); }
.pq-tag.api         { background: #efeae0; color: #7a5a18; }

.pq-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--pq-radius-pill);
  font-size: var(--pq-text-sm); font-weight: var(--pq-fw-medium);
  background: var(--pq-paper-2); color: var(--pq-ink-2);
}
.pq-pill.good { background: var(--pq-good-tint); color: var(--pq-good); }
.pq-pill.warn { background: var(--pq-warn-tint); color: var(--pq-warn); }
.pq-pill.bad  { background: var(--pq-bad-tint);  color: var(--pq-bad); }
.pq-pill.info { background: var(--pq-info-tint); color: var(--pq-info); }

/* ── chat / log ─────────────────────────────────────────────────────────── */
.pq-stream {
  max-width: var(--pq-content-base);
  margin: 0 auto;
  padding: var(--pq-space-6) var(--pq-space-6) var(--pq-space-16);
  display: flex; flex-direction: column; gap: var(--pq-space-2);
}
.pq-day-label {
  font-family: var(--pq-font-mono);
  font-size: var(--pq-text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pq-ink-4);
  padding: var(--pq-space-4) 0 var(--pq-space-1);
  font-weight: var(--pq-fw-medium);
}

/* an entry card — the technical-log entry, NOT a chat bubble */
.pq-entry {
  background: var(--pq-surface);
  border: 1px solid var(--pq-line);
  border-left: 3px solid var(--pq-line-2);
  border-radius: 4px var(--pq-radius-md) var(--pq-radius-md) 4px;
  padding: var(--pq-space-2) var(--pq-space-4);
  display: flex; flex-direction: column; gap: 2px;
  position: relative;
  box-shadow: 0 1px 2px rgba(13, 60, 90, 0.03);
  transition: box-shadow var(--pq-dur-fast) var(--pq-ease), transform var(--pq-dur-fast) var(--pq-ease);
}
.pq-entry:hover { box-shadow: 0 2px 6px rgba(13, 60, 90, 0.06); }
.pq-entry.measurement { border-left-color: var(--pq-kind-measurement); }
.pq-entry.action      { border-left-color: var(--pq-kind-action); }
.pq-entry.note        { border-left-color: var(--pq-kind-note); }
.pq-entry.question    { border-left-color: var(--pq-kind-question); }
.pq-entry.image       { border-left-color: var(--pq-kind-image); }
.pq-entry.rejected    { border-left-color: var(--pq-kind-rejected); opacity: 0.7; }
.pq-entry.assistant   { border-left-color: var(--pq-kind-assistant); background: var(--pq-brand-tint); border-color: var(--pq-brand-soft); }
.pq-entry.weather     { border-left-color: var(--pq-kind-weather); }

.pq-entry .meta {
  display: flex; align-items: center; gap: var(--pq-space-2);
  font-size: var(--pq-text-xs);
  color: var(--pq-ink-3);
}
.pq-entry .meta .author { font-weight: var(--pq-fw-semibold); color: var(--pq-ink-2); }
.pq-entry .meta .time   { font-family: var(--pq-font-mono); }
.pq-entry .meta .delete {
  margin-left: auto;
  width: 18px; height: 18px;
  border: 1px solid var(--pq-line-2);
  border-radius: 50%;
  background: var(--pq-surface);
  color: var(--pq-ink-3);
  font-size: 11px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--pq-dur-fast);
  padding: 0;
}
.pq-entry:hover .meta .delete { opacity: 0.7; }
.pq-entry .meta .delete:hover { opacity: 1; }

.pq-entry .body { font-size: var(--pq-text-base); color: var(--pq-ink); line-height: var(--pq-lh-snug); }
.pq-entry .body p { margin: 2px 0; }
.pq-entry .body code { font-family: var(--pq-font-mono); font-size: 0.92em; background: var(--pq-paper-2); padding: 0 4px; border-radius: 3px; }

/* Long-message collapse */
.pq-entry .body.collapsible {
  max-height: 200px;
  overflow: hidden;
  position: relative;
}
.pq-entry .body.collapsible::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--pq-surface));
  pointer-events: none;
}
.pq-entry.assistant .body.collapsible::after {
  background: linear-gradient(to bottom, transparent, var(--pq-brand-tint));
}
.pq-entry .body.collapsible.expanded { max-height: none; overflow: visible; }
.pq-entry .body.collapsible.expanded::after { display: none; }
.pq-entry .show-toggle {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--pq-font-mono);
  font-size: var(--pq-text-2xs);
  color: var(--pq-brand);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--pq-fw-medium);
}
.pq-entry .show-toggle:hover { text-decoration: underline; }

/* parsed measurement card — used inside an entry body when parsed */
.pq-readings {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--pq-space-1);
  margin-top: var(--pq-space-1);
}
.pq-reading {
  background: var(--pq-paper-2);
  border-radius: var(--pq-radius-sm);
  padding: var(--pq-space-2) var(--pq-space-3);
}
.pq-reading .k {
  font-size: var(--pq-text-xs); color: var(--pq-ink-3);
  font-weight: var(--pq-fw-medium); margin-bottom: 1px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pq-reading .v {
  font-family: var(--pq-font-mono);
  font-size: var(--pq-text-lg);
  font-weight: var(--pq-fw-semibold);
  color: var(--pq-ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.pq-reading .v .u { font-size: var(--pq-text-sm); color: var(--pq-ink-3); margin-left: 4px; font-weight: var(--pq-fw-regular); }
.pq-reading.range-good .v { color: var(--pq-good); }
.pq-reading.range-warn .v { color: var(--pq-warn); }
.pq-reading.range-bad  .v { color: var(--pq-bad); }

/* lighter inline format for an entry that only contains one reading */
.pq-single-reading {
  display: inline-flex; align-items: baseline; gap: var(--pq-space-2);
  margin-top: 2px;
}
.pq-single-reading .k {
  font-size: var(--pq-text-xs); color: var(--pq-ink-3);
  text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: var(--pq-fw-medium);
}
.pq-single-reading .v {
  font-family: var(--pq-font-mono);
  font-size: var(--pq-text-lg);
  font-weight: var(--pq-fw-semibold);
  color: var(--pq-ink);
  overflow-wrap: anywhere;
}
.pq-single-reading .v .u {
  font-size: var(--pq-text-sm); color: var(--pq-ink-3);
  margin-left: 2px; font-weight: var(--pq-fw-regular);
}
.pq-single-reading.range-good .v { color: var(--pq-good); }
.pq-single-reading.range-warn .v { color: var(--pq-warn); }
.pq-single-reading.range-bad  .v { color: var(--pq-bad); }

/* assistant streaming */
.pq-entry.assistant .body { line-height: var(--pq-lh-normal); }
.pq-streaming::after {
  content: "▍";
  margin-left: 2px;
  color: var(--pq-brand);
  animation: pq-blink 1.1s steps(2, start) infinite;
}
@keyframes pq-blink { to { opacity: 0; } }

/* image entry */
.pq-entry.image .body img {
  max-width: 280px; max-height: 200px;
  border-radius: var(--pq-radius-md);
  border: 1px solid var(--pq-line);
  cursor: zoom-in;
}

/* ── filter chips ───────────────────────────────────────────────────────── */
.pq-filters {
  display: flex; gap: var(--pq-space-1);
  padding: 0;
  flex-wrap: wrap;
}
.pq-filter {
  padding: 4px 12px;
  font-size: var(--pq-text-sm); font-weight: var(--pq-fw-medium);
  border-radius: var(--pq-radius-pill);
  border: 1px solid var(--pq-line);
  background: var(--pq-surface);
  color: var(--pq-ink-2);
  cursor: pointer;
}
.pq-filter:hover { background: var(--pq-paper-2); }
.pq-filter.active { background: var(--pq-brand); color: white; border-color: var(--pq-brand); }
.pq-filter .count { opacity: 0.7; margin-left: 4px; }

/* ── composer ───────────────────────────────────────────────────────────── */
.pq-composer-wrap {
  position: sticky; bottom: 0;
  background: linear-gradient(to bottom, transparent, var(--pq-paper) 32px);
  padding: var(--pq-space-5) var(--pq-space-6) var(--pq-space-4);
  z-index: var(--pq-z-sticky);
}
.pq-composer {
  max-width: var(--pq-content-base);
  margin: 0 auto;
  background: var(--pq-surface);
  border: 1px solid var(--pq-line-2);
  border-radius: var(--pq-radius-xl);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 2px 8px rgba(13, 60, 90, 0.08),
    0 12px 32px -8px rgba(13, 60, 90, 0.10);
  padding: var(--pq-space-3) var(--pq-space-3) var(--pq-space-2);
}
.pq-composer:focus-within {
  border-color: var(--pq-brand-soft);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 0 0 4px var(--pq-brand-tint),
    0 12px 32px -8px rgba(13, 60, 90, 0.12);
}
.pq-composer textarea, .pq-composer input.text {
  width: 100%; min-height: 28px; max-height: 200px;
  border: none; outline: none; resize: none;
  font: inherit; font-size: var(--pq-text-base); color: var(--pq-ink);
  background: transparent;
  padding: 4px 4px;
  font-family: var(--pq-font-sans);
}
.pq-composer textarea::placeholder, .pq-composer input.text::placeholder {
  color: var(--pq-ink-4);
}
.pq-composer .row {
  display: flex; align-items: center; gap: var(--pq-space-2);
  padding-top: var(--pq-space-1);
  border-top: 1px solid var(--pq-paper-2);
}
.pq-composer .icon-btn {
  width: 28px; height: 28px; border-radius: var(--pq-radius-md);
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--pq-ink-3);
}
.pq-composer .icon-btn:hover { background: var(--pq-paper-2); color: var(--pq-ink); }
.pq-composer .send {
  margin-left: auto;
  width: 32px; height: 32px;
  background: var(--pq-brand); color: white;
  border: none; border-radius: var(--pq-radius-md);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pq-composer .send:disabled { background: var(--pq-paper-2); color: var(--pq-ink-4); cursor: default; }
.pq-composer .send:hover:not(:disabled) { background: var(--pq-brand-hover); }

/* ── card ───────────────────────────────────────────────────────────────── */
.pq-card {
  background: var(--pq-surface);
  border: 1px solid var(--pq-line);
  border-radius: var(--pq-radius-xl);
  padding: var(--pq-space-5);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 1px 2px rgba(13, 60, 90, 0.04),
    0 4px 12px -8px rgba(13, 60, 90, 0.08);
}
.pq-card.elevated {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 4px 12px -4px rgba(13, 60, 90, 0.08),
    0 16px 32px -16px rgba(13, 60, 90, 0.12);
}
.pq-card h2, .pq-card h3 {
  margin: 0 0 var(--pq-space-2);
  font-size: var(--pq-text-lg);
  font-weight: var(--pq-fw-semibold);
  letter-spacing: -0.005em;
}
.pq-card .lede { color: var(--pq-ink-2); font-size: var(--pq-text-md); }

/* ── input ──────────────────────────────────────────────────────────────── */
.pq-input {
  display: block; width: 100%;
  padding: var(--pq-space-2) var(--pq-space-3);
  font: inherit; font-size: var(--pq-text-base);
  border: 1px solid var(--pq-line-2);
  border-radius: var(--pq-radius-md);
  background: var(--pq-surface);
  color: var(--pq-ink);
}
.pq-input::placeholder { color: var(--pq-ink-4); }
.pq-input:focus { outline: none; border-color: var(--pq-brand); box-shadow: 0 0 0 3px var(--pq-brand-tint); }

/* ── empty + error states ───────────────────────────────────────────────── */
.pq-empty {
  text-align: center;
  padding: var(--pq-space-12) var(--pq-space-4);
  max-width: 400px;
  margin: 0 auto;
}
.pq-empty .ico {
  width: 56px; height: 56px;
  margin: 0 auto var(--pq-space-3);
  color: var(--pq-ink-4);
}
.pq-empty h2 { font-size: var(--pq-text-xl); font-weight: var(--pq-fw-semibold); margin: 0 0 var(--pq-space-2); }
.pq-empty p  { color: var(--pq-ink-2); font-size: var(--pq-text-md); margin: 0 0 var(--pq-space-4); line-height: var(--pq-lh-normal); }

/* ── generic table ──────────────────────────────────────────────────────── */
.pq-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--pq-text-md); }
.pq-table th, .pq-table td { text-align: left; padding: var(--pq-space-2) var(--pq-space-3); border-bottom: 1px solid var(--pq-line); }
.pq-table thead th { font-weight: var(--pq-fw-semibold); color: var(--pq-ink-2); background: var(--pq-paper-2); font-size: var(--pq-text-sm); }
.pq-table tbody tr:hover { background: var(--pq-paper-2); }
.pq-table td.num { font-family: var(--pq-font-mono); }

/* ── mobile bottom bar — replaces the top tabs on iPhone-class devices ─── */
.pq-mobile-tabs { display: none; }
@media (max-width: 880px) {
  .pq-shell { grid-template-columns: minmax(0, 1fr); }
  .pq-rail { display: none; }
  .pq-tabs { display: none; }   /* the bottom tab bar replaces the top strip on mobile */

  .pq-mobile-tabs {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--pq-line);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: var(--pq-z-sticky);
    box-shadow: 0 -1px 0 rgba(13, 60, 90, 0.02), 0 -8px 24px -16px rgba(13, 60, 90, 0.10);
  }
  .pq-mobile-tabs a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--pq-space-2) 4px var(--pq-space-1);
    font-size: var(--pq-text-2xs); font-weight: var(--pq-fw-medium);
    color: var(--pq-ink-3);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .pq-mobile-tabs a.active { color: var(--pq-brand); }
  .pq-mobile-tabs a .ico { width: 22px; height: 22px; }

  /* leave room above the bottom-tab bar so content doesn't sit under it */
  .pq-main { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  /* composer (sticky bottom) sits above the tab bar */
  .pq-composer-wrap {
    position: sticky;
    bottom: calc(56px + env(safe-area-inset-bottom));
    padding-bottom: var(--pq-space-3);
  }
}

/* ── utilities ──────────────────────────────────────────────────────────── */
.pq-mono { font-family: var(--pq-font-mono); }
.pq-muted { color: var(--pq-ink-3); }
.pq-hr { height: 1px; background: var(--pq-line); border: none; margin: var(--pq-space-4) 0; }