/* Pawse.ai data room. Built from the website's own styles, 5 October 2026, at
   Luis's request ("the same CSS and style as the site"): the tokens, nav,
   page glow, hero, section headings, cards, buttons and footer are taken from
   WEBSITE/public_html/privacy.html (inline styles) and index.html (.btn-primary).
   If the site's look changes, change it here too.
   Brand type since 24 September 2026: Zodiak Light only at 28 px and up,
   Switzer for everything else, Inter for the wordmark only. Fonts are the
   website's own files. External file, not inline, because the room's
   Content-Security-Policy allows no inline styles. */

@font-face { font-family: "Zodiak"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/Zodiak-Light.woff2") format("woff2"); }
@font-face { font-family: "Switzer"; font-style: normal; font-weight: 100 500; font-display: swap; src: url("fonts/Switzer-Variable.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/Inter-Variable.woff2") format("woff2"); }

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

:root {
  /* the site's tokens, privacy.html :root, unchanged */
  --bg: #f7f4ef;
  --bg-soft: #f0ede6;
  --panel: rgba(255,255,255,0.56);
  --panel-solid: #fbf9f5;
  --ink: #211e19;
  --accent: #a8813f;
  --accent-soft: rgba(168,129,63,0.12);
  --ink-mid: #585249;
  --ink-muted: #8a8a8a;
  --ink-faint: #b5b5b5;
  --border: rgba(42,42,42,0.10);
  --border-strong: rgba(42,42,42,0.16);
  --shadow: 0 24px 60px rgba(42,42,42,0.08);
  --shadow-soft: 0 14px 28px rgba(42,42,42,0.06);
  --serif: 'Zodiak', Georgia, serif;
  --sans: 'Switzer', system-ui, sans-serif;
  --radius-lg: 24px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --container: 860px;
  --container-wide: 1220px;
  --nav-h: 86px;
  /* the room's only addition: a red for errors and warnings */
  --alert: #9b2c1f;
}

html { scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, .nda:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* page glow, as on the site */
.page-glow::before, .page-glow::after {
  content: ""; position: fixed; border-radius: 999px; pointer-events: none; z-index: 0; filter: blur(40px); opacity: 0.4;
}
.page-glow::before { width: 380px; height: 380px; top: -120px; right: -120px; background: rgba(255,255,255,0.9); }
.page-glow::after { width: 280px; height: 280px; left: -100px; bottom: 8%; background: rgba(232,226,218,0.85); }

.container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; position: relative; z-index: 1; }
.container.wide { width: min(var(--container-wide), calc(100% - 48px)); }
main { flex: 1 0 auto; position: relative; z-index: 1; }

/* nav, as on the site */
body > nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100;
  background: rgba(245,243,239,0.92); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.nav-inner {
  width: min(1220px, calc(100% - 48px)); height: 100%; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav-brand svg { height: 38px; width: auto; display: block; color: var(--ink); flex-shrink: 0; }
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-label {
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); text-align: right;
}

/* hero, as the site's .privacy-hero */
.room-hero { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 34px; border-bottom: 1px solid var(--border); position: relative; z-index: 1; }
.section-label {
  font-size: 9px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px; display: block;
}
.room-hero h1 {
  font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.06; margin-bottom: 12px;
  opacity: 0; animation: fadeUp 0.9s ease 0.2s forwards;
}
.room-hero .meta { font-size: 13px; color: var(--ink-muted); max-width: 640px; opacity: 0; animation: fadeUp 0.9s ease 0.4s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .room-hero h1, .room-hero .meta { opacity: 1; animation: none; } }

.room-body { padding: 44px 0 84px; }

/* sections, as the site's .privacy-section */
.section { display: grid; gap: 28px; }
.section h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 2.3vw, 26px); line-height: 1.15; margin-bottom: 9px; padding-top: 2px; }
.section p { font-size: 14px; line-height: 1.45; color: var(--ink-mid); margin-bottom: 8px; }
.section p:last-child { margin-bottom: 0; }
.section ul { list-style: none; display: grid; gap: 5px; margin: 9px 0; }
.section ul li { font-size: 14px; line-height: 1.45; color: var(--ink-mid); padding-left: 18px; position: relative; }
.section ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); }
/* plain text links only: buttons and cards keep their own colours */
.section a:not([class]), .link { color: var(--ink); border-bottom: 1px solid var(--ink-faint); transition: border-color 0.22s ease; }
.section a:not([class]):hover, .link:hover { border-bottom-color: var(--ink); }

/* cards, as the site's .info-card and .notice-card */
.info-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px 32px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.notice-card { background: rgba(42,42,42,0.04); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 22px 28px; }
.notice-card p, .notice { font-size: 13px; color: var(--ink-mid); line-height: 1.7; margin: 0; }
.notice a { color: var(--ink); border-bottom: 1px solid var(--ink-faint); }

/* forms */
.stack { display: grid; gap: 8px; }
.stack label { font-size: 12px; font-weight: 500; color: var(--ink-mid); margin-top: 8px; }
.stack input:not([type=checkbox]):not([type=hidden]) {
  font: 400 15px/1.4 var(--sans); color: var(--ink); width: 100%;
  padding: 13px 16px; background: rgba(255,255,255,0.78); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.stack input:focus { border-color: var(--accent); }
label.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; font-weight: 400; color: var(--ink-mid); line-height: 1.5; margin-top: 14px; }
label.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
.error { font-size: 14px; font-weight: 500; color: var(--alert); margin: 4px 0 8px; }

/* buttons, as the site's .btn-primary and .btn-secondary */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px;
  font: 600 10px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: 0.25s ease;
}
.btn-primary { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
.btn-primary:hover { opacity: 0.82; }
button[aria-busy="true"] { opacity: 0.6; cursor: progress; }   /* seen.js, while the form is sending (14 October 2026) */
.btn-secondary { background: rgba(255,255,255,0.56); color: var(--ink); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: rgba(255,255,255,0.78); }
.btn-small { min-height: 38px; padding: 0 18px; }
.stack .btn-primary { justify-self: start; margin-top: 18px; }

/* the NDA */
.nda { max-height: 48vh; overflow: auto; background: rgba(255,255,255,0.7); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 22px 26px; margin: 20px 0 8px; }
.nda h2 { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); margin: 16px 0 4px; }
.nda h2:first-child { margin-top: 0; font-family: var(--serif); font-weight: 300; font-size: 26px; }
.nda p { font-size: 14px; line-height: 1.5; color: var(--ink-mid); }
.record .nda { max-height: none; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; margin: 4px 0 20px; font-size: 14px; }
.facts dt { color: var(--ink-muted); }
.facts dd { color: var(--ink); }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; }

/* the viewer */
.docs { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 30px; }
.docs a[aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.docs a span { opacity: 0.6; margin-left: 8px; letter-spacing: 0.08em; }
.pg { margin: 0 0 32px; }
.pg img {
  width: 100%; height: auto; background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--border); box-shadow: var(--shadow-soft);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.pg figcaption { font-size: 10px; font-weight: 500; letter-spacing: 0.18em; color: var(--ink-muted); text-align: right; margin-top: 8px; }

/* footer, as on the site */
footer { background: var(--ink); border-top: 1px solid rgba(245,243,239,0.08); padding: 34px 0 40px; position: relative; z-index: 1; flex-shrink: 0; }
.footer-inner { width: min(1220px, calc(100% - 48px)); margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 14px; color: rgba(245,243,239,0.56); }
.footer-brand svg { height: 46px; width: auto; display: block; flex-shrink: 0; }
.footer-links { list-style: none; display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,243,239,0.42); transition: color 0.25s ease; }
.footer-links a:hover, .footer-links a[aria-current="page"] { color: rgba(245,243,239,0.78); }
.footer-legal { width: 100%; font-size: 10px; color: rgba(245,243,239,0.24); margin-top: 4px; }

/* admin */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; font-size: 9px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted); padding: 0 12px 12px; border-bottom: 1px solid var(--border-strong); }
.admin-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--ink); }
.admin-table td small { display: block; font-size: 12px; color: var(--ink-muted); }
.admin-table a { border-bottom: 1px solid var(--ink-faint); }
.flag { color: var(--alert); font-weight: 500; }
.ok { color: #2f6b3a; font-weight: 500; }
.muted { color: var(--ink-muted); }
.warn { background: rgba(155,44,31,0.06); border: 1px solid rgba(155,44,31,0.25); color: var(--alert); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 14px; margin-bottom: 24px; }
.actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 8px; }
.bars svg { display: block; max-width: 100%; height: auto; }
.bars text { font: 12px var(--sans); fill: var(--ink-mid); }
details summary { cursor: pointer; font-size: 14px; color: var(--ink-mid); }
form.inline { display: inline; }

/* version 2: contents cards, sections, document lists, films, questions (6 October 2026), from the same tokens */
/* the contents page, 7 October 2026: one panel of wide rows, numbered like a table of contents,
   instead of a grid of boxes (Luis: "too boxy"). Titles are Zodiak at 28 px, the brand's smallest size for it. */
.index-list {
  list-style: none; margin: 0 !important; display: grid !important; gap: 0 !important; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.section .index-list li { padding-left: 0; }
.section .index-list li::before { display: none; }
.index-list li + li { border-top: 1px solid var(--border); }
.index-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 20px; gap: 4px 24px; align-items: center;
  padding: 26px 32px; color: var(--ink); transition: background 0.2s ease;
}
.index-row:hover { background: rgba(255,255,255,0.55); }
.index-no { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: var(--accent); }
.index-title { min-width: 0; font-family: var(--serif); font-weight: 300; font-size: 28px; line-height: 1.15; }
.index-title .badge { margin-left: 12px; vertical-align: 6px; font-family: var(--sans); }
.index-meta { font-size: 13px; color: var(--ink-mid); text-align: right; white-space: nowrap; }
.index-arrow { justify-self: end; color: var(--ink-faint); transition: transform 0.2s ease, color 0.2s ease; }
.index-row:hover .index-arrow { color: var(--ink); transform: translateX(3px); }
.index-list.quiet { background: rgba(42,42,42,0.03); }
.index-list.quiet .index-row { padding-top: 18px; padding-bottom: 18px; }
.index-list.quiet .index-title { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.4; }
.index-list.quiet .index-title .badge { vertical-align: 1px; }
.badge {
  display: inline-block; justify-self: start; margin-left: 8px; padding: 2px 9px; border-radius: 999px; vertical-align: 2px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
}
.note .note-text { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 6px 0 4px; max-width: 64ch; }
.note p:last-child { margin-top: 14px; }
.crumbs { font-size: 12px; color: var(--ink-muted); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.crumbs a { color: var(--ink-mid); border-bottom: 1px solid var(--ink-faint); }
.crumbs a:hover { color: var(--ink); }
.hero-actions { margin-top: 18px; opacity: 0; animation: fadeUp 0.9s ease 0.5s forwards; }
@media (prefers-reduced-motion: reduce) { .hero-actions { opacity: 1; animation: none; } }
.code-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--accent); }
.room-hero h1 .code-tag { font-family: var(--sans); font-size: 0.42em; vertical-align: 0.5em; margin-right: 4px; }
.group h2 { margin-bottom: 4px; }
.doclist { list-style: none; margin: 0 !important; display: grid !important; gap: 0 !important; }
.doclist li { padding: 0 !important; }
.doclist li::before { display: none; }
.doclist a {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: baseline;
  padding: 13px 4px; border-bottom: 1px solid var(--border) !important; color: var(--ink); font-size: 15px;
}
.doclist a:hover { background: rgba(255,255,255,0.45); }
.doclist .doc-title { min-width: 0; }
.doclist .doc-pages { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.films { display: grid; gap: 24px; }
.film { margin: 0; }
.film-frame { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: #0e0d0b; box-shadow: var(--shadow-soft); }
.film video { display: block; width: 100%; height: auto; max-height: 72vh; background: #0e0d0b; }
.film-mark {
  position: absolute; top: 12px; right: 14px; pointer-events: none; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: rgba(245,243,239,0.82); background: rgba(14,13,11,0.45);
}
.film figcaption { font-size: 13px; color: var(--ink-mid); margin-top: 8px; }
.film.portrait .film-frame { width: fit-content; max-width: 100%; margin: 0 auto; }
.film.portrait video { width: auto; max-width: 100%; max-height: 72vh; }
.film.portrait figcaption { text-align: center; }
.pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 36px; }
.pager a { white-space: normal; text-align: left; line-height: 1.4; min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.ask { margin: 8px 0 32px; }
.ask h2 { font-family: var(--serif); font-weight: 300; font-size: 26px; margin-bottom: 4px; }
.stack textarea {
  font: 400 15px/1.5 var(--sans); color: var(--ink); width: 100%; resize: vertical;
  padding: 13px 16px; background: rgba(255,255,255,0.78); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.stack textarea:focus { border-color: var(--accent); outline: none; }
.ok-note { font-size: 14px; color: #2f6b3a !important; font-weight: 500; }
.qa { display: grid; gap: 8px; }
.qa-meta { font-size: 12px !important; color: var(--ink-muted) !important; }
.qa-q { font-size: 16px !important; color: var(--ink) !important; }
.qa-a { border-left: 2px solid var(--accent); padding-left: 14px; }
.qa-wait { font-size: 13px !important; color: var(--ink-muted) !important; }
.admin-answer textarea { min-height: 80px; }
.sec-toggles { display: grid; gap: 8px; margin: 8px 0 12px; }
.sec-toggles label { margin: 0; }
.summary { font-size: 12px; color: var(--ink-muted); }

/* admin, 7 October 2026: compact room card, sections grid, message center */
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; vertical-align: 3px; }
.pill.done { color: #2f6b3a; background: rgba(47,107,58,0.10); }
.pill.waiting { color: var(--accent); background: var(--accent-soft); }
h2 .pill { margin-left: 8px; }
.btn-secondary.danger { color: var(--alert); border-color: rgba(155,44,31,0.30); }
.room-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 24px; display: grid; gap: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.room-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.room-card-state { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.room-card-state .pill { vertical-align: 0; }
.room-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.link-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(42,42,42,0.04); }
.link-row code { flex: 1 1 260px; min-width: 0; font-size: 12px; overflow-wrap: anywhere; color: var(--ink-mid); }
.facts.compact { margin: 0; gap: 8px 20px; font-size: 14px; }
.facts.compact dt { padding-top: 1px; }
.facts.compact dd { min-width: 0; }
details.inline-edit { display: inline; }
details.inline-edit summary { display: inline; margin-left: 10px; cursor: pointer; font-size: 12px; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
details.inline-edit summary::-webkit-details-marker { display: none; }
details.inline-edit[open] summary { color: var(--ink); }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; }
.inline-form input[type=email] { font: 400 14px/1.4 var(--sans); color: var(--ink); padding: 8px 12px; min-width: 0; flex: 1 1 220px; max-width: 360px;
  background: rgba(255,255,255,0.8); border: 1px solid var(--border-strong); border-radius: 10px; }
.inline-form.stacked { flex-direction: column; align-items: flex-start; gap: 6px; }
.inline-form .check { margin: 0; font-size: 14px; }
.hint { display: block; font-size: 12px; margin-top: 2px; }
.sections-form { display: grid; gap: 12px; }
.sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.sec-toggle { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel); cursor: pointer; font-weight: 400; }
.sec-toggle:has(input:checked) { border-color: var(--border-strong); background: rgba(255,255,255,0.85); }
.sec-toggle input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--ink); flex: none; }
.sec-toggle > span { display: grid; gap: 1px; min-width: 0; }
.sec-title { font-size: 14px; color: var(--ink); font-weight: 500; }
.sec-toggle .muted { font-size: 12px; }
.sections-save { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.msg-list { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); overflow: hidden; }
.msg-list > p { padding: 16px 20px; margin: 0; }
.msg { padding: 14px 20px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.msg:first-child { border-top: 0; }
.msg.waiting { background: rgba(168,129,63,0.05); }
.msg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.msg-head .pill { vertical-align: 0; }
.msg-who { font-size: 13px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--ink-faint); }
.msg-q { font-size: 15px !important; color: var(--ink) !important; margin: 0 !important; }
.msg-a { border-left: 2px solid var(--accent); padding-left: 12px; font-size: 14px; }
.msg-a .muted { font-size: 11px; }
.msg-a p { margin: 2px 0 0 !important; }
.msg-reply summary { display: inline-block; cursor: pointer; font-size: 12px; color: var(--ink-mid); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.msg-reply summary::-webkit-details-marker { display: none; }
.msg-reply[open] summary { color: var(--ink); margin-bottom: 6px; }
.msg-reply textarea { min-height: 70px; }
.msg-reply .stack { margin-top: 0; }
.msg-reply .btn-primary { margin-top: 4px; }

@media (max-width: 640px) {
  .nav-brand svg { height: 30px; }
  .nav-label { font-size: 9px; letter-spacing: 0.12em; max-width: 52vw; }
  .container, .container.wide { width: min(var(--container), calc(100% - 32px)); }
  .container.wide { width: calc(100% - 32px); }
  .footer-inner { width: min(1220px, calc(100% - 32px)); }
  .room-hero { padding-top: calc(var(--nav-h) + 30px); padding-bottom: 26px; }
  .info-card, .notice-card { padding: 22px 20px; }
  .nda { padding: 18px; }
  .pg { margin-bottom: 20px; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
  .doclist a { grid-template-columns: 36px minmax(0, 1fr); }
  .doclist .doc-pages { grid-column: 2; }
  .index-row { grid-template-columns: 26px minmax(0, 1fr) 14px; gap: 4px 12px; padding: 20px 18px; }
  .index-meta { grid-column: 2; grid-row: 2; text-align: left; white-space: normal; }
  .index-arrow { grid-column: 3; grid-row: 1 / span 2; }
  .index-list.quiet .index-row { padding-top: 16px; padding-bottom: 16px; }
}
@media print {
  body > nav, footer, .page-glow, .docs, .crumbs, .pager, .ask, .no-print { display: none !important; }
  .room-hero { padding-top: 0; }
  .room-hero h1, .room-hero .meta { opacity: 1; animation: none; }
  .info-card { border: 0; padding: 0; backdrop-filter: none; }
}
.msg-tell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0 0 !important; font-size: 13px; }
/* Delete the room, 8 October 2026: folded away under the room's buttons, with its own confirmation */
details.delete-room { flex-basis: 100%; }
details.delete-room summary { display: inline; cursor: pointer; font-size: 12px; color: var(--alert); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
details.delete-room summary::-webkit-details-marker { display: none; }
details.delete-room form { margin-top: 10px; max-width: 60ch; padding: 14px 16px; border: 1px solid rgba(155,44,31,0.30); border-radius: var(--radius-sm); background: rgba(155,44,31,0.04); }
details.delete-room p { font-size: 13px; margin: 0 0 8px; color: var(--ink-mid); }
details.delete-room form button { justify-self: start; width: auto; }
/* The invitation to a call, 8 October 2026: words beside the button, in the note's card or on its own */
.note .invite { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.note .invite.after-note { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.note .invite p { margin: 0 !important; }
.note .invite-title { font-family: var(--sans); font-weight: 500; font-size: 18px; line-height: 1.3; color: var(--ink); }
.note .invite-line { font-size: 14px; line-height: 1.5; color: var(--ink-mid); margin-top: 2px !important; }
.note .invite .btn-primary { flex: none; }

/* Header actions, 8 October 2026: Messages with a count of unread answers, and Book a call, on every page past the gates */
.nav-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; color: var(--ink); transition: background 0.2s ease; }
.nav-icon:hover { background: rgba(42,42,42,0.06); }
.nav-icon svg { width: 21px; height: 21px; }
.nav-badge { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 600; line-height: 17px; text-align: center; }
.nav-call { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: opacity 0.2s ease; }
.nav-call:hover { opacity: 0.88; }
.nav-call svg { width: 16px; height: 16px; flex: none; }

/* Messages as a small mail client, 8 October 2026, for investors and the admin */
.mail { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); min-height: 480px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mail-list { border-right: 1px solid var(--border); min-width: 0; display: flex; flex-direction: column; }
.mail-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.mail-list-head.stacked { flex-direction: column; align-items: stretch; }
.section .mail ul { list-style: none; margin: 0; display: block; overflow-y: auto; max-height: 640px; }
.section .mail ul li { padding-left: 0; margin: 0; }
.section .mail ul li::before { display: none; }
.mail-item { display: grid; gap: 4px; padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--ink); transition: background 0.15s ease; }
.mail-item:hover { background: rgba(255,255,255,0.6); }
.mail-item.open { background: var(--accent-soft); }
.mail-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mail-subject { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.mail-item.unread .mail-subject::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }
.mail-date { font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.mail-who { font-size: 12px; color: var(--ink-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-preview { font-size: 13px; line-height: 1.45; color: var(--ink-mid); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mail-preview b { font-weight: 500; color: var(--ink); }
.mail-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.mail-flags .badge, .mail-flags .pill { margin-left: 0; vertical-align: 0; }
.mail-note { font-size: 11px; }
.mail-empty { padding: 18px; font-size: 13px; color: var(--ink-muted); }
.mail-pane { min-width: 0; padding: 22px 28px 26px; display: flex; flex-direction: column; gap: 12px; }
.section .mail-title { font-family: var(--sans); font-weight: 500; font-size: 18px; line-height: 1.3; margin: 0; padding: 0; }
.section .mail-about, .section .mail-meta { font-size: 12px; line-height: 1.5; color: var(--ink-muted); margin: 0; }
.mail-about b { color: var(--ink); font-weight: 500; }
.mail-thread { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.mail-msg { max-width: min(640px, 92%); padding: 12px 16px; border-radius: 14px; }
.section .mail-msg p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.section .mail-msg .mail-meta { margin-bottom: 4px; font-size: 11px; color: var(--ink-muted); }
.mail-msg.mine { align-self: flex-end; background: var(--accent-soft); }
.mail-msg.other { align-self: flex-start; background: rgba(255,255,255,0.85); border: 1px solid var(--border); }
.mine-tools { align-self: flex-end; }
.section .mail-wait { font-size: 13px; color: var(--ink-muted); margin: 0; }
.mail-compose { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.mail-compose .btn-primary { justify-self: start; width: auto; }
.mail-placeholder { margin: auto; text-align: center; }
.section .mail-placeholder p { color: var(--ink-muted); font-size: 14px; margin: 0 0 4px; }
.mail-back { display: none; font-size: 13px; color: var(--ink-mid); }
.mail-tabs { display: flex; gap: 6px; }
.mail-tabs a { padding: 5px 12px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 12px; color: var(--ink-mid); }
.mail-tabs a.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.mail-search input { width: 100%; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: rgba(255,255,255,0.8); font: 400 13px/1.4 var(--sans); color: var(--ink); }
.mail-search input:focus { outline: none; border-color: var(--accent); }

@media (max-width: 760px) {
  .mail { grid-template-columns: 1fr; min-height: 0; }
  .mail-list { border-right: 0; }
  .mail.has-open .mail-list { display: none; }
  .mail:not(.has-open) .mail-pane { display: none; }
  .mail-back { display: inline-block; }
  .mail-pane { padding: 18px; }
  .mail-msg { max-width: 100%; }
}
@media (max-width: 640px) {
  .nav-right:has(.nav-icon) .nav-label { display: none; }   /* only where the header carries Messages and Book a call */
  .nav-right { gap: 8px; }
  .nav-call { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .nav-call span { display: none; }
  .nav-call svg { width: 19px; height: 19px; }
}

/* ---------- A tighter room, 8 October 2026 ----------
   Luis: "waste of space. things should be much more condensed", "overall tighter UI please", on every page.
   One block of overrides at the end, so the rules above still read as taken from the site. Headings below
   28 px move from Zodiak to Switzer, as the brand type rule asks. The media blocks at the foot restate the
   phone layouts this block would otherwise override. */
:root { --nav-h: 62px; --radius-md: 16px; --radius-sm: 11px; }
html { scroll-padding-top: calc(var(--nav-h) + 12px); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* header */
.nav-brand svg { height: 28px; }
.nav-right { gap: 12px; }
.nav-label { font-size: 9px; }
.nav-icon { width: 36px; height: 36px; }
.nav-icon svg { width: 20px; height: 20px; }
.nav-badge { top: 0; right: -2px; }
.nav-call { height: 34px; padding: 0 14px; gap: 7px; font-size: 10px; }
.nav-call svg { width: 15px; height: 15px; }

/* page heading */
.room-hero { padding-top: calc(var(--nav-h) + 22px); padding-bottom: 16px; }
.section-label { margin-bottom: 6px; }
.room-hero h1 { font-size: clamp(28px, 3vw, 38px); line-height: 1.1; margin-bottom: 4px; }
.room-hero .meta { font-size: 12.5px; line-height: 1.5; }
.crumbs { margin-bottom: 8px; }
.hero-actions { margin-top: 10px; }
.room-hero.slim { padding-top: calc(var(--nav-h) + 14px); padding-bottom: 12px; }
.room-hero.slim .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; }
.room-hero.slim .crumbs, .room-hero.slim .section-label { flex-basis: 100%; margin-bottom: 2px; }
.room-hero.slim h1 { font-size: 28px; margin: 0; }
.room-hero.slim .meta { flex: 1 1 280px; }

/* body, text and cards */
.room-body { padding: 18px 0 40px; }
.section { gap: 16px; }
.section h2, .ask h2 { font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.3; margin-bottom: 6px; padding-top: 0; }
.section .nda h2 { font-size: 13px; font-weight: 600; margin: 14px 0 4px; }
.section .nda h2:first-child { font-family: var(--serif); font-weight: 300; font-size: 28px; margin-top: 0; }
.group h2 { margin-bottom: 2px; }
.section p { font-size: 13.5px; margin-bottom: 6px; }
.section ul { gap: 3px; margin: 6px 0; }
.section ul li { font-size: 13.5px; }
.section ul li::before { top: 7px; }
.info-card { padding: 16px 20px; }
.notice-card { padding: 10px 16px; border-radius: var(--radius-sm); }
.notice-card p, .notice { font-size: 12px; line-height: 1.55; }
.note .note-text { font-size: 15px; line-height: 1.5; margin: 2px 0 0; }
.note p:last-child { margin-top: 8px; }
.note .invite { gap: 10px 20px; }
.note .invite.after-note { margin-top: 12px; padding-top: 12px; }
.note .invite-title { font-size: 16px; }
.note .invite-line { font-size: 13px; }
.nda { padding: 18px 22px; margin: 12px 0 6px; }
.facts { gap: 4px 18px; margin: 2px 0 12px; font-size: 13.5px; }
.warn { padding: 10px 14px; margin-bottom: 12px; font-size: 13px; }
.ok-note { font-size: 13px; }
.error { margin: 2px 0 6px; font-size: 13px; }

/* buttons and forms */
.btn-primary, .btn-secondary { min-height: 40px; padding: 0 18px; }
.btn-small { min-height: 32px; padding: 0 14px; }
.stack { gap: 6px; }
.stack label { margin-top: 4px; }
.stack .btn-primary { margin-top: 8px; }
.stack input:not([type=checkbox]):not([type=hidden]), .stack textarea { padding: 10px 14px; font-size: 14px; }
label.check { margin-top: 8px; gap: 10px; }

/* contents, sections, documents, films */
.index-row { grid-template-columns: 30px minmax(0, 1fr) auto 16px; gap: 2px 16px; padding: 12px 18px; }
.index-no { font-size: 10px; }
.index-title { font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.35; }
.index-title .badge { margin-left: 8px; vertical-align: 1px; }
.index-meta { font-size: 12px; }
.index-list.quiet .index-row { padding-top: 9px; padding-bottom: 9px; }
.index-list.quiet .index-title { font-size: 14px; font-weight: 400; }
.doclist a { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 8px 4px; font-size: 14px; }
.doclist .doc-pages { font-size: 11.5px; }
.films { gap: 16px; }
.film figcaption { font-size: 12px; margin-top: 4px; }
.docs { gap: 6px; margin: 0 0 16px; }
.pg { margin: 0 0 16px; }
.pg figcaption { margin-top: 4px; }
.pager { margin: 4px 0 20px; }
.pager a { min-height: 36px; padding-top: 7px; padding-bottom: 7px; }
.ask { margin: 4px 0 20px; max-width: 720px; }
.ask #qpage { max-width: 140px; }
.qa { gap: 6px; }

/* footer */
footer { padding: 14px 0 16px; }
.footer-inner { gap: 8px 20px; }
.footer-brand svg { height: 30px; }
.footer-links { gap: 16px; }
.footer-legal { margin-top: 0; }

/* admin */
.admin-table { font-size: 13px; }
.admin-table th { padding: 0 10px 7px; }
.admin-table td { padding: 7px 10px; }
.admin-table td small { font-size: 11.5px; }
.room-card { padding: 12px 16px; gap: 8px; }
.room-card-state { font-size: 12.5px; }
.facts.compact { gap: 3px 16px; font-size: 13px; }
.link-row { padding: 6px 10px; gap: 8px; }
.sections-form { gap: 8px; }
.sec-grid { gap: 6px; }
.sec-toggle { padding: 8px 12px; gap: 10px; }
.sec-title { font-size: 13.5px; }
.msg-list > p { padding: 10px 16px; }
.msg { padding: 10px 16px; gap: 4px; }
.msg-q { font-size: 14px !important; }
.msg-tell { font-size: 12px; gap: 4px 10px; }
.pill { padding: 2px 8px; }
.actions-row { gap: 8px; margin: 0; }
.inline-form { margin: 6px 0 2px; }
details.delete-room form { padding: 10px 14px; }

/* Messages: one window that fits the screen, the list and the conversation scroll inside it,
   and the reply sits in a slim bar under the conversation, as in a mail app */
.mail { height: calc(100vh - var(--nav-h) - 132px); height: calc(100dvh - var(--nav-h) - 132px); min-height: 420px; max-height: 940px; }
.mail-list { min-height: 0; }
.mail-list-head { padding: 9px 12px 9px 16px; }
.mail-list-head .section-label { margin: 0; }
.mail-list-head.stacked { gap: 8px; padding: 10px 12px; }
.section .mail ul { flex: 1 1 auto; min-height: 0; max-height: none; }
.mail-item { gap: 2px; padding: 9px 14px 10px 16px; }
.mail-subject { font-size: 13.5px; }
.mail-who { font-size: 11.5px; }
.mail-preview { font-size: 12.5px; line-height: 1.4; -webkit-line-clamp: 1; }
.mail-flags { gap: 5px; margin-top: 3px; }
.mail-flags .badge, .mail-flags .pill { padding: 1px 7px; font-size: 8.5px; }
.mail-tabs a { padding: 3px 10px; font-size: 11.5px; }
.mail-search input { padding: 6px 12px; font-size: 12.5px; }
.mail-pane { padding: 14px 20px; gap: 8px; min-height: 0; overflow: hidden; }
.section .mail-title { font-size: 16px; }
.mail-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; gap: 8px; margin: 0 -10px; padding: 2px 10px 8px; }
.mail-msg { padding: 8px 12px; border-radius: 12px; max-width: min(620px, 88%); }
.section .mail-msg p { font-size: 13.5px; line-height: 1.5; }
.section .mail-msg .mail-meta { font-size: 10.5px; margin-bottom: 2px; }
.section .mail-wait { font-size: 12px; }
.mail-pane > .ok-note { margin: 0; font-size: 12px; }
.mail-compose { padding-top: 10px; gap: 6px; flex: none; }
.mail-compose.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 8px; }
.mail-compose.bar textarea { resize: none; padding: 9px 14px; line-height: 1.45; }
.mail-compose.bar .btn-primary { margin: 0; min-height: 38px; }
.mail-compose.bar .muted { grid-column: 1 / -1; font-size: 11.5px; }
.mail-compose.new { margin-top: 4px; padding-top: 0; border-top: 0; }
.mail-thread .mail-compose { margin-top: 2px; padding-top: 0; border-top: 0; }
.mail-thread .msg-reply textarea { min-height: 0; }

@media (max-width: 760px) {
  .mail { height: calc(100vh - var(--nav-h) - 142px); height: calc(100dvh - var(--nav-h) - 142px); min-height: 380px; }
  .mail-pane { padding: 12px 14px; }
  .mail-msg { max-width: 94%; }
}
@media (max-width: 640px) {
  .nav-brand svg { height: 26px; }
  .nav-right { gap: 6px; }
  .nav-call { width: 36px; height: 36px; padding: 0; }
  .nav-call svg { width: 18px; height: 18px; }
  .room-hero { padding-top: calc(var(--nav-h) + 16px); padding-bottom: 12px; }
  .room-hero.slim { padding-top: calc(var(--nav-h) + 10px); padding-bottom: 10px; }
  .room-body { padding-top: 14px; }
  .info-card { padding: 14px 16px; }
  .notice-card { padding: 10px 14px; }
  .nda { padding: 14px; }
  .index-row { grid-template-columns: 22px minmax(0, 1fr) 14px; gap: 2px 10px; padding: 11px 14px; }
  .index-list.quiet .index-row { padding-top: 9px; padding-bottom: 9px; }
  .doclist a { grid-template-columns: 26px minmax(0, 1fr); }
}

/* The room's sections as a bar under the header, 8 October 2026 (Luis: "could there be some sort of
   navigation on the investor room? there are only breadcrumbs"). The header grows by the bar, so every
   rule that uses --nav-h (headings, the Messages window, anchors) makes room for it by itself. */
body.has-tabs { --nav-h: 100px; }
html:has(body.has-tabs) { scroll-padding-top: 112px; }
body.has-tabs > nav .nav-inner { height: 62px; }
.room-tabs { height: 38px; border-top: 1px solid var(--border); }
.room-tabs-inner { position: relative; width: min(1220px, calc(100% - 48px)); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.room-tabs-inner::-webkit-scrollbar { display: none; }
.room-tabs a { flex: none; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; line-height: 1.4; color: var(--ink-mid); white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.room-tabs a:hover { background: rgba(42,42,42,0.05); color: var(--ink); }
.room-tabs a[aria-current] { background: var(--ink); color: var(--bg); }
@media (max-width: 640px) {
  .room-tabs-inner { width: 100%; padding: 0 16px; -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
  .room-tabs a:last-child { margin-right: 24px; }
}
@media print { .room-tabs { display: none; } }

/* Admin Messages: New message beside the tabs, a reply bar under every conversation, and the room page's list */
.mail-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mail-head-row .btn-small { min-height: 28px; padding: 0 12px; }
.stack select { font: 400 14px/1.4 var(--sans); color: var(--ink); width: 100%; max-width: 420px; padding: 9px 12px; background: rgba(255,255,255,0.78); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.stack select:focus { border-color: var(--accent); outline: none; }
.msg-list > .mail-item:last-of-type { border-bottom: 0; }
.mail-thread .mail-wait { align-self: flex-start; }
.mail-thread { position: relative; }   /* so a message's offsetTop is measured inside the conversation */

/* The reading notice in the footer on pages past the gates, 8 October 2026 (Luis: "Could this be closer
   to the footer? Or actually the footer itself?"). It was a card at the foot of every page. */
.footer-notice { width: 100%; font-size: 11.5px; line-height: 1.5; color: rgba(245,243,239,0.56); margin-top: 4px; }
.footer-notice a { color: rgba(245,243,239,0.78); border-bottom: 1px solid rgba(245,243,239,0.3); transition: border-color 0.2s ease; }
.footer-notice a:hover { border-bottom-color: rgba(245,243,239,0.78); }

/* Footer, 8 October 2026: the logo cropped to the mark, as in the header, so it reads at a glance, and the
   copyright line readable (4.7 to 1 on the dark ground, measured, it was 2.1 to 1). */
.footer-brand { color: rgba(245,243,239,0.72); }
.footer-brand svg { height: 22px; }
.footer-legal { font-size: 11px; color: rgba(245,243,239,0.5); }

/* On a phone, Book a call keeps its words now that the contents page has no call card (8 October 2026).
   Only the narrowest phones fall back to the calendar icon alone. */
@media (max-width: 640px) {
  .nav-inner, .room-tabs-inner { width: calc(100% - 32px); }
  .room-tabs-inner { padding: 0; }
  .nav-call { width: auto; height: 34px; padding: 0 12px; gap: 6px; white-space: nowrap; }
  .nav-call span { display: inline; }
  .nav-call svg { width: 15px; height: 15px; }
}
@media (max-width: 359px) {
  .nav-call { width: 36px; height: 36px; padding: 0; }
  .nav-call span { display: none; }
}

/* Sign out, in the footer of rooms with the email check (9 October 2026, was the passcode until 13 October). A form, so it is a deliberate press,
   styled as the footer's other links. */
.footer-signout { display: inline; }
.footer-signout button { background: none; border: 0; padding: 0; cursor: pointer; font: 500 10px/1.6 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,243,239,0.42); transition: color 0.25s ease; }
.footer-signout button:hover { color: rgba(245,243,239,0.78); }
.footer-signout button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Follow-ups in the admin, 11 October 2026: where everyone stands, Today, each investor's panel and timeline */
.pipeline { display: flex; flex-wrap: wrap; gap: 6px; }
.pipe { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); font-size: 12.5px; color: var(--ink-mid); }
.pipe b { font-size: 15px; font-weight: 600; color: var(--ink); }
.pipe.zero { opacity: 0.55; }
.today { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; }
.section .today h2 { margin-bottom: 4px; }
.section .today-list { list-style: none; display: grid; gap: 0; margin: 0; }
.section .today-list li { padding: 8px 0 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.section .today-list li:first-child { border-top: 0; }
.section .today-list li::before { display: none; }
.today-item { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.today-text { display: grid; gap: 1px; min-width: 0; flex: 1 1 320px; }
.today-who { font-weight: 500; color: var(--ink); }
.today-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.small-link { font-size: 12px; }
.follow { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; }
.section .follow h2 { display: flex; align-items: center; gap: 8px; }
.section .follow h2 .pill { margin-left: 0; }
.section .follow-due { margin: 0 0 8px; }
.section .follow-due li { color: var(--alert); }
.follow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px 24px; }
.follow-grid .stack .btn-primary { margin-top: 2px; }
.row-fields { display: flex; gap: 6px; flex-wrap: wrap; }
.row-fields > * { flex: 1 1 140px; min-width: 0; }
.stack select { font: 400 14px/1.4 var(--sans); color: var(--ink); padding: 9px 12px; background: rgba(255,255,255,0.78); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.follow-mail { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.section .follow h3 { font-size: 13px; font-weight: 600; margin: 10px 0 4px; color: var(--ink-mid); }
.section .timeline { list-style: none; margin: 0; display: grid; gap: 0; }
.section .timeline li { display: flex; gap: 12px; align-items: baseline; padding: 5px 0 5px 12px; border-left: 2px solid var(--border); font-size: 13px; }
.section .timeline li::before { display: none; }
.section .timeline li.tl-them { border-left-color: var(--accent); }
.section .timeline li.tl-us { border-left-color: var(--ink); }
.tl-when { flex: none; width: 128px; color: var(--ink-muted); font-size: 12px; }
.tl-what { flex: 1 1 auto; min-width: 0; color: var(--ink); }
.tl-remove { background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.tl-remove:hover { color: var(--alert); }
details.add-prospect { margin-top: 8px; }
details.add-prospect summary { list-style: none; cursor: pointer; }
details.add-prospect summary::-webkit-details-marker { display: none; }
details.add-prospect[open] summary { margin-bottom: 8px; }
.stack.narrow { max-width: 420px; }
@media (max-width: 640px) {
  .tl-when { width: 96px; }
  .today { padding: 10px 12px; }
  .follow { padding: 10px 12px; }
}
/* A grid item takes its content's full width unless told otherwise, so a wide table inside a section pushed the
   whole admin page wider than a phone. Every section of the grid may shrink, and the table scrolls inside it. */
.section > * { min-width: 0; }

/* Phones, 11 October 2026 (Luis: "we have this problem throughout the whole dataroom site"). Measured at 320
   and 375 px on every page: buttons could not wrap (Save as PDF pushed a document page to 335 px), the admin
   header did not fit 320 px (422 px), and a long link in a message ran out of its bubble. */
body { overflow-wrap: break-word; }
.mail-msg p, .tl-what, .today-text span, .mono, .summary { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .btn-primary, .btn-secondary { white-space: normal; text-align: center; line-height: 1.3; padding-top: 6px; padding-bottom: 6px; }
}
@media (max-width: 359px) {
  .nav-brand svg { height: 22px; }
  .nav-right { gap: 4px; }
  .nav-right .btn-small { padding: 0 10px; letter-spacing: 0.1em; }
}

/* The email check, 13 October 2026 (Luis: "simple and show security to the investor"). The card asks for the code,
   and a quiet panel under it says how the room protects them. */
.gate-verify .info-card p { font-size: 15px; line-height: 1.55; color: var(--ink-mid); margin: 0 0 4px; }
.gate-verify .info-card p strong { color: var(--ink); font-weight: 600; }
.gate-verify .info-card p.small { font-size: 13px; margin-top: 14px; }
.code-input { max-width: 220px; font-size: 24px !important; letter-spacing: 0.32em; font-variant-numeric: tabular-nums; text-align: center; }
.resend { margin-top: 6px; }
.link-button { background: none; border: 0; padding: 0; cursor: pointer; font: 500 13px/1.5 var(--sans); color: var(--ink); border-bottom: 1px solid var(--ink-faint); transition: border-color 0.22s ease; }
.link-button:hover { border-bottom-color: var(--ink); }
.trust { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 24px; background: rgba(42,42,42,0.03); }
.section .trust h2 { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: 0.02em; margin: 0 0 10px; padding: 0; }
.trust-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.section .trust ul { display: grid; gap: 8px; margin: 0; }
.section .trust li { font-size: 13.5px; line-height: 1.55; }
.section .trust li strong { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .trust { padding: 12px 16px; }
  .gate-verify .info-card p { font-size: 14px; }
  .code-input { max-width: none; }
}

/* The signed copy's page: Open the documents beside Print at the top, as well as at the foot (13 October 2026). */
.record-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* New room on the admin page, and sending the link (14 October 2026) */
.new-room { gap: 14px; }
.new-room-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px 18px; }
.new-room-fields .field { display: grid; gap: 6px; align-content: start; }
.new-room-fields .field.wide { grid-column: 1 / -1; }
.new-room-fields label { margin-top: 0; }
.new-room-block { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; display: grid; gap: 8px; }
.new-room-block legend { font-size: 12px; font-weight: 500; color: var(--ink-mid); padding: 0; margin-bottom: 8px; }
.new-room input[type=file] { padding: 10px 12px; background: rgba(255,255,255,0.7); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font: 400 13px/1.4 var(--sans); color: var(--ink-mid); width: 100%; }
.new-room > .btn-primary { margin-top: 6px; }
.send-row { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 8px; }
.send-row .send-label { font-size: 12px; font-weight: 600; color: var(--ink); }
.send-row .hint { flex-basis: 100%; margin-top: 0; }
.new-room input[type=file]::file-selector-button { font: 600 10px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; padding: 9px 14px; margin-right: 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--ink); cursor: pointer; }

/* The admin's own bar (14 October 2026): the investors' section bar, with the waiting count on Messages */
.admin-tabs .tab-count { display: inline-block; min-width: 17px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--alert); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 17px; text-align: center; }
.h2-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.h2-row h2 { margin: 0; }

/* The team (14 October 2026): the setup page's steps and key, and the team table */
.setup-step { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); margin: 18px 0 2px; }
.setup-key { font-size: 20px; letter-spacing: 0.08em; padding: 12px 16px; background: rgba(42,42,42,0.05); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.team-table td small { display: block; }
.team-acts { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 8px; }
.team-table .delete-room { margin: 0; }

/* Help, 18 October 2026: the "?" notes (dr_tip in lib.php, tips.js), the Help page (help.php) and the first-visit
   card on the contents page. Same tokens as everything above. A note lives in the browser's top layer, so it
   inherits the heading's type unless told otherwise: every text property is set here. */
.tip {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; position: relative; top: -0.08em;
  width: 18px; height: 18px; margin-left: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--panel-solid); color: var(--ink-mid);
  font: 500 11px/1 var(--sans); letter-spacing: 0; text-transform: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.tip::after { content: ""; position: absolute; inset: -9px; }   /* a target a finger can hit */
.tip:hover, .tip:focus-visible, .tip:has(+ .tip-pop:popover-open) { border-color: var(--accent); color: var(--accent); }
.tip.on-dark { background: transparent; border-color: rgba(245,243,239,0.3); color: rgba(245,243,239,0.7); margin-left: 6px; }
.tip.on-dark:hover, .tip.on-dark:focus-visible, .tip.on-dark:has(+ .tip-pop:popover-open) { border-color: rgba(245,243,239,0.8); color: rgba(245,243,239,0.95); }
.tip-pop { display: none; }
.tip-pop:popover-open {
  display: block; position: fixed; inset: 0; margin: auto; height: fit-content; width: min(300px, calc(100vw - 24px)); overflow: visible;
  padding: 12px 14px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--panel-solid); box-shadow: var(--shadow-soft); color: var(--ink-mid);
  font: 400 13px/1.55 var(--sans); letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
}
.tips-js .tip-pop:popover-open:not(.placed) { visibility: hidden; }
.tip-pop::backdrop { background: transparent; }
.tip-head { display: block; margin-bottom: 4px; font-size: 9px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.tip-text { display: block; }
.tip-more { display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--ink); border-bottom: 1px solid var(--ink-faint); }
.tip-more:hover { border-bottom-color: var(--ink); }
.tip-sample {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; vertical-align: 1px;
  border: 1px solid var(--border-strong); background: var(--panel-solid); color: var(--ink-mid); font-size: 10px; font-weight: 500; line-height: 1;
}
@media print { .tip, .tip-pop { display: none !important; } }

/* the contents page: the first-visit card and the label over the list */
.info-card.intro p { margin-top: 2px; }
.list-label { display: flex; align-items: center; margin: 0 0 -18px; }
.list-label .section-label { margin: 0; }

/* the Help page */
.help-back { margin-bottom: -10px; }
.help-toc ol { list-style: none; columns: 2 240px; column-gap: 32px; margin-top: 2px; counter-reset: toc; }
.help-toc li { counter-increment: toc; padding: 3px 0; break-inside: avoid; font-size: 14px; }
.help-toc li::before { content: counter(toc, decimal-leading-zero); display: inline-block; width: 26px; font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.section .help-toc a { color: var(--ink); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.section .help-toc a:hover { border-bottom-color: var(--ink-faint); }
.help-part { padding-top: 22px; border-top: 1px solid var(--border); }
.help-steps { list-style: none; counter-reset: step; display: grid; gap: 6px; margin: 4px 0 12px; }
.help-steps li { counter-increment: step; position: relative; padding-left: 30px; font-size: 14px; line-height: 1.45; color: var(--ink-mid); }
.help-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--border-strong); font-size: 11px; line-height: 18px; text-align: center; color: var(--ink);
}
.help-terms, .help-qa { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; margin: 6px 0 12px; font-size: 14px; line-height: 1.45; }
.help-terms dt, .help-qa dt { color: var(--ink); font-weight: 500; }
.help-terms dd, .help-qa dd { color: var(--ink-mid); }
.help-qa { grid-template-columns: 1fr; gap: 2px; }
.help-qa dd { margin-bottom: 10px; }
.help strong { font-weight: 500; color: var(--ink); }
@media (max-width: 640px) {
  .help-terms { grid-template-columns: 1fr; gap: 0; }
  .help-terms dd { margin-bottom: 8px; }
}

/* The investor's header and bar, 18 October 2026 (Luis): Sign out at the top right as well as in the footer,
   "Prepared for" at the right of the section bar, and the bar set like the website's menu (index.html .nav-links:
   10 px capitals, 0.18em tracking, grey, gold on hover), the page you are on in ink with a gold line under it.
   Only the investor's bar has .room-tabs-row, so the admin's bar keeps its pills. */
.room-tabs-row { width: min(1220px, calc(100% - 48px)); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 28px; }
.room-tabs-row .room-tabs-inner { width: auto; margin: 0; flex: 1 1 auto; min-width: 0; gap: 30px; }
.room-tabs-row .room-tabs-inner a {
  display: inline-flex; align-items: center; height: 37px; padding: 0; border-radius: 0; background: none;
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; color: var(--ink-muted);
  transition: color 0.25s ease, box-shadow 0.25s ease;
}
.room-tabs-row .room-tabs-inner a:hover { background: none; color: var(--accent); }
.room-tabs-row .room-tabs-inner a[aria-current] { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.room-for { flex: none; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.nav-signout { display: inline-flex; margin: 0; }
.nav-signout button {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: transparent; color: var(--ink);
  font: 600 10px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; transition: border-color 0.2s ease;
}
.nav-signout button:hover { border-color: var(--ink); }
.nav-signout svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 900px) { .room-for { display: none; } }
@media (max-width: 640px) {
  .room-tabs-row { width: calc(100% - 32px); }
  .room-tabs-row .room-tabs-inner { gap: 22px; }
  .nav-signout button { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .nav-signout span { display: none; }
}
@media print { .nav-signout { display: none; } }
.room-tabs-row.tight .room-for { display: none; }   /* live.js: the name gives way when the bar would not fit beside it */
/* The header's copy of the name: only when the bar is too full to carry it (live.js .tight), and between phone and
   laptop widths, where the bar's copy is hidden. Never on a phone, where the header holds the buttons. */
.nav-for { display: none; }
body:has(.room-tabs-row.tight) .nav-for { display: block; }
@media (max-width: 900px) { .nav-for { display: block; } }
@media (max-width: 640px) { body .nav-right .nav-for { display: none !important; } }
/* A phone's header now carries Messages, Book a call and Sign out (18 October 2026). Measured at 375 px, Sign out ran
   off the edge, so the header tightens: a smaller wordmark, closer buttons, and below 375 px Book a call shows only
   its calendar, as it already did below 360. */
@media (max-width: 640px) {
  .nav-inner { gap: 8px; }
  .nav-brand svg { height: 23px; }
  .nav-right { gap: 4px; }
  .nav-icon { width: 34px; height: 34px; }
  .nav-call { padding: 0 11px; gap: 5px; }
  .nav-signout button { width: 34px; height: 34px; }
}
@media (max-width: 374px) {
  .nav-call { width: 34px; height: 34px; padding: 0; justify-content: center; }
  .nav-call span { display: none; }
}

/* The admin's bar in the website menu's type too (18 October 2026, Luis: "can you not make nice menu for admin as
   well?"): the same capitals, tracking, gold hover and gold line as the investor's bar. The waiting count keeps its
   red pill, without the tracking. */
.admin-tabs .room-tabs-inner { gap: 30px; }
.admin-tabs .room-tabs-inner a {
  display: inline-flex; align-items: center; height: 37px; padding: 0; border-radius: 0; background: none;
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; color: var(--ink-muted);
  transition: color 0.25s ease, box-shadow 0.25s ease;
}
.admin-tabs .room-tabs-inner a:hover { background: none; color: var(--accent); }
.admin-tabs .room-tabs-inner a[aria-current] { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.admin-tabs .tab-count { margin-left: 6px; font-size: 10px; letter-spacing: 0; }
@media (max-width: 640px) { .admin-tabs .room-tabs-inner { gap: 22px; } }