:root {
  --bg: #fbf8f3;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e7dfd1;
  --card: #ffffff;
  --accent: #3f5348;
  --accent-ink: #fbf8f3;
  --warm: #d98a45;
  --success: #16a34a;
  --error: #dc2626;
}

/* Follow the device. When the OS is set to dark and the member has not chosen the
   explicit glossy theme, the whole palette flips by redefining the variables the rest of
   the sheet already reads. A handful of surfaces are painted with literal light tints
   rather than a variable — tables, alerts, message bubbles — so each of those is restated
   here. The glossy theme is a deliberate opt-in look with its own gradients, so it is left
   untouched: hence body:not(.theme-glossy). */
@media (prefers-color-scheme: dark) {
  body:not(.theme-glossy) {
    color-scheme: dark;
    --bg: #10151b;
    --ink: #e6ebf1;
    --muted: #9aa6b2;
    --line: #29323c;
    --card: #171e26;
    --accent: #86b39a;
    --accent-ink: #0f141a;
    --warm: #e0975a;
    --success: #34d17f;
    --error: #f87171;
  }
  body:not(.theme-glossy) .btn.primary:hover { background: #6f9c84; }
  body:not(.theme-glossy) .alert.error { background: #3a1c1c; color: #fca5a5; }
  body:not(.theme-glossy) .alert.success { background: #12331f; color: #86efac; }
  body:not(.theme-glossy) .alert.warn { background: #3a2f12; color: #fcd34d; }
  body:not(.theme-glossy) .table th,
  body:not(.theme-glossy) .table tr.report-head td,
  body:not(.theme-glossy) .conv-list li.active a,
  body:not(.theme-glossy) .message-list li.theirs,
  body:not(.theme-glossy) .disclosure,
  body:not(.theme-glossy) .disclaimer,
  body:not(.theme-glossy) .hub-bubble.bot { background: #1e262f; }
  body:not(.theme-glossy) .message-list li.mine { background: #1b2620; }
  body:not(.theme-glossy) .finding.sev-disqualifying { background: #2a1a1a; }
  body:not(.theme-glossy) .gate.ok { background: #12331f; color: #86efac; }
  body:not(.theme-glossy) .gate.todo,
  body:not(.theme-glossy) .criteria-list li.blocking,
  body:not(.theme-glossy) .entry-list li.unread { background: #23201a; }
  body:not(.theme-glossy) .policy-rules li.ok { color: #86efac; }
  /* The select caret is a data URI and cannot read --muted, so its light-mode
     slate is repainted here to the dark --muted, matching the summary chevrons. */
  body:not(.theme-glossy) select:not([multiple]) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239aa6b2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; }
/* A grid or flex child will not shrink past its min-content unless told to, and
   that floor is what pushes narrow layouts sideways. Cards own their padding, so
   letting the track decide the width is always right for them. */
.card, .sitter-card, .feature-card, .metric, .tier, .steps li, .city-grid li,
.ticker-item, .conv-list, .conv-main, .hero-card, .callout, .auth-card { min-width: 0; }

.container { max-width: 1100px; margin: 0 auto; padding: clamp(20px, 4vw, 32px) clamp(16px, 4vw, 24px); }
.container.narrow { max-width: 720px; }
.muted { color: var(--muted); }

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin: 0 0 12px; }
h2 { font-size: clamp(1.35rem, 3.5vw, 1.6rem); margin: 32px 0 12px; }
h3 { font-size: 1.15rem; margin: 0 0 8px; }

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 8px;
}
.lede { font-size: 1.05rem; color: var(--muted); max-width: 60ch; }

/* Sits directly above the page's own heading block, so it drops the container's
   bottom gutter instead of stacking two of them. */
.account-welcome { padding-bottom: 0; }

.slogan {
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  color: var(--warm);
  margin: 0 0 12px;
}

.policy-doc { max-width: 72ch; }
.policy-doc h2 {
  font-size: 1.15rem;
  margin: 28px 0 8px;
}
.policy-doc p { margin: 0 0 12px; }
.policy-doc ul { margin: 0 0 16px; padding-left: 22px; }
.policy-doc li { margin-bottom: 6px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px is the smallest tap target that is reliable on a touch screen. */
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { border-color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { background: #2f3f36; }
/* The quiet option in a row: no weight of its own until you reach for it. */
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--card); border-color: var(--line); }
.btn.danger { background: var(--error); color: #fff; border-color: var(--error); }
.btn.danger:hover { background: #b91c1c; }
/* Size modifier last, so every call site reads "btn <variant> <size>". */
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 0.82rem; }

.tab-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.tab-row a {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.tab-row a.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.link { color: var(--accent); font-weight: 600; font-size: 0.9rem; }
.link-btn {
  background: none; border: none; color: var(--accent);
  font: inherit; cursor: pointer; padding: 0;
}

/* Header / footer */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding-top: 14px; padding-bottom: 14px;
  flex-wrap: wrap;
}
.brand { flex: 0 0 auto; }
.brand img { display: block; width: 400px; height: auto; }
@media (max-width: 1040px) { .brand img { width: 250px; } }
.nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--ink); font-size: 0.92rem; white-space: nowrap; }
.lang-switch {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.nav .lang-switch a { font-size: 0.8rem; color: var(--muted); }
.nav .lang-switch a.lang-active { color: var(--ink); font-weight: 600; }
.inline { display: inline; }

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding: 24px 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
/* Without the wrap this row is wider than a phone and scrolls every page sideways. */
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px 18px; }

/* Home */
/* The hero is a direct child of main with no .container around it, so it has to
   carry the shared column geometry itself or it bleeds past the header and footer. */
.hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 32px;
}
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }
.hero h1 { font-size: 3rem; line-height: 1.05; }
.cta-row { display: flex; gap: 12px; margin: 24px 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 360px; margin-top: 24px; }
.stats dt { font-family: Georgia, serif; font-size: 1.8rem; }
.stats dd { margin: 0; color: var(--muted); font-size: 0.8rem; }
.hero-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  align-self: start;
}

.band { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 48px 0; margin: 32px 0; }
.band .container, .band > * { max-width: 1100px; margin-left: auto; margin-right: auto; padding: 0 24px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.callout {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
}

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 24px; }
@media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
}

.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }
.steps li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.step-n { font-family: Georgia, serif; color: var(--warm); font-size: 0.9rem; font-weight: 600; }

.city-grid {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 20px;
}
.city-grid li {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; font-size: 0.9rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}

/* Auth */
.auth-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 48px 0; align-items: start; }
@media (max-width: 860px) { .auth-split { grid-template-columns: 1fr; } }
/* A grid rather than a block because this card stacks a heading, any number of
   alerts, a form and a footer. As a block each child had to bring its own margin,
   and .alert has none — so the login page, which can raise five different alerts,
   ran them together with no gap. The card owns the spacing instead. */
.auth-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px;
  display: grid;
  gap: 16px;
  align-content: start;
}
/* The global h2 rule opens with 32px of top margin, which inside a padded card
   reads as a dead band above "Sign in". The card's gap positions it now. */
.auth-card > h2 { margin: 0; }
.stack { display: grid; gap: 14px; }
label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
/* Every text-like type has to be named. An input type absent from this list falls
   back to the browser's own box, which is narrower and shorter than the 44px
   control beside it — that is how the sign-up mobile number ended up visibly
   smaller than the fields above it. Add new types here. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="date"], input[type="url"], input[type="search"],
input[type="datetime-local"], textarea, select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: var(--card);
  color: var(--ink);
}
textarea { resize: vertical; font-family: inherit; }
/* A select is the only control here that draws its own arrow, and every platform draws a
   different one — a stepper on macOS, a flat triangle on Windows, nothing recognisable on
   some Android skins. One painted caret makes "this opens a list" say the same thing
   everywhere. Colour is --muted inlined, because a CSS variable cannot be read from
   inside a data URI. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
/* A multiple select is a list box. It never opens, so a caret would be a lie. */
select[multiple] { background-image: none; padding-right: 12px; }
/* Live per-field feedback written by phone.js. Empty until there is something to say,
   so the form does not jump as the member types. */
.field-hint { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--muted); }
.field-hint:empty { display: none; }
.field-hint.ok { color: var(--accent); }
.field-hint.warn { color: #92400e; }
/* The script sets aria-invalid, so the assistive name and the visible state come from
   one attribute rather than drifting apart. */
input[aria-invalid="true"] { border-color: var(--error); }
.alert { padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; }
.alert.error { background: #fee2e2; color: var(--error); }
.alert.success { background: #dcfce7; color: var(--success); }
.alert.warn { background: #fef3c7; color: #92400e; }
/* For an alert that itemises what changed, one line each. */
.alert.lines { white-space: pre-line; }
.auth-foot { margin-top: 14px; font-size: 0.85rem; color: var(--muted); }
/* The card's gap already separates it; its own margin would stack on top. */
.auth-card > .auth-foot { margin-top: 0; }
.social-auth { display: grid; gap: 8px; margin-top: 16px; }
.or-line {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn.social {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; width: 100%;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  font-weight: 600;
}
.btn.social:hover { border-color: var(--accent); }
.bullets { list-style: none; padding: 0; margin: 20px 0; }
.bullets li { padding: 6px 0 6px 18px; position: relative; font-size: 0.95rem; }
.bullets li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Onboarding */
.role-cards { display: grid; gap: 10px; }
.role-card {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
}
.role-card input { margin-right: 10px; }
.role-card strong { display: block; }
.role-card span { color: var(--muted); font-size: 0.88rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* Two inputs side by side do not fit a phone; each one's intrinsic size is wider
   than half the screen, which is what drags the page sideways. */
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.day-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 0.85rem; cursor: pointer; }
.chip input { margin: 0; }

/* Dashboard */
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
@media (max-width: 860px) { .dash-grid { grid-template-columns: 1fr; } }
/* minmax(0, …) on purpose: with plain auto/1fr the tracks cannot shrink below
   their min-content, which is what makes cards holding a kv overflow a phone. */
.kv { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 0.9rem; }
.kv dt { color: var(--muted); }
/* The gutter is the grid gap; the UA default indent on dd was never designed for. */
.kv dd { margin: 0; min-width: 0; }
.nav-list { list-style: none; padding: 0; margin: 0; }
.nav-list li { padding: 6px 0; }
.tier-badge { font-family: Georgia, serif; font-size: 1.4rem; text-transform: capitalize; }

/* The adaptive focus panel. Ordered by AccountFocusService, so the severity classes
   only need to colour what is already in the right order — no reordering here. */
.focus-card { margin-top: 24px; }
.focus-card h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* A blocking item means something on this account does not work. The card edge says so
   before any single row is read. */
.focus-card.focus-blocked { border-left: 4px solid var(--warm); }
.focus-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.focus-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 10px;
  background: var(--bg);
}
.focus-list li > div { min-width: 0; }
.focus-list li p { margin: 4px 0 0; }
.focus-list li > a { flex: 0 0 auto; white-space: nowrap; }
.focus-list li.focus-blocked { border-left-color: var(--error); }
.focus-list li.focus-warn { border-left-color: var(--warm); }
.focus-list li.focus-info { border-left-color: var(--line); }
@media (max-width: 620px) {
  .focus-list li { flex-direction: column; gap: 8px; }
  .focus-list li > a { white-space: normal; }
}

/* Ticker */
.scope-switch { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 16px; }
.ticker-form { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; margin: 24px 0; }
.ticker-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ticker-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px;
  animation: ticker-in 0.4s ease-out;
}
@keyframes ticker-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ticker-item header { display: flex; gap: 12px; align-items: baseline; margin-bottom: 6px; }
.ticker-empty { padding: 24px; text-align: center; color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: 12px; }

/* Sitters */
.sitter-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; }
@media (max-width: 720px) { .sitter-grid { grid-template-columns: 1fr; } }
.sitter-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.sitter-card header { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 0.85rem;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px;
}
.save-search { margin: 12px 0; }

/* Tables */
.table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.table th, .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.table th { background: #f6efe2; font-weight: 600; }
.table tr:last-child td { border-bottom: none; }
/* A table's own min-content width would otherwise push the whole page sideways. */
@media (max-width: 720px) {
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table th, .table td { padding: 8px 10px; }
}

/* A window onto a long list: scrolls both ways, header stays with its rows. */
.table-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 60vh;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.table-scroll .table {
  border: none;
  border-radius: 0;
  overflow: visible;
}
.table-scroll .table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  /* border-collapse drops a sticky cell's own border, so draw the rule inside. */
  box-shadow: inset 0 -1px 0 var(--line);
}
.table-scroll.short { max-height: 320px; }
.table-scroll.tall { max-height: 76vh; }
/* Columns worth reading in full: scroll sideways rather than crush them. */
.table-scroll.wide .table { min-width: 940px; }
@media (max-width: 720px) {
  .table-scroll .table { display: table; overflow: visible; }
  .table-scroll { max-height: 70vh; }
}

/* Messages */
.messages-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; margin-top: 20px; }
@media (max-width: 860px) { .messages-layout { grid-template-columns: 1fr; } }
.conv-list { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.conv-list ul { list-style: none; padding: 0; margin: 12px 0; }
.conv-list li a { display: block; padding: 10px; border-radius: 8px; }
.conv-list li.active a { background: #f6efe2; }
.conv-main { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.conv-head-bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.message-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.message-list li { padding: 10px 14px; border-radius: 10px; max-width: 80%; }
.message-list li.mine { background: #eef2ee; margin-left: auto; }
.message-list li.theirs { background: #f6efe2; }
.badge { display: inline-block; padding: 2px 8px; background: var(--warm); color: #fff; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.thread-files { border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 16px; }
.thread-files h3 { margin: 0 0 8px; font-size: 0.95rem; }
.file-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.file-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.file-list li > a { font-weight: 600; overflow-wrap: anywhere; }
.file-list form { margin-left: auto; }
.attachment-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }

/* Jobs */
.job-list { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 20px; }
.job-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.job-card header { display: flex; justify-content: space-between; margin-bottom: 6px; }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
@media (max-width: 860px) { .pricing-grid { grid-template-columns: 1fr; } }
.tier { position: relative; }
.tier.featured { border-color: var(--accent); box-shadow: 0 4px 20px rgba(63, 83, 72, 0.12); }
.price { font-family: Georgia, serif; font-size: 2rem; margin: 8px 0; }
.price span { font-size: 0.9rem; color: var(--muted); }
.tier ul { list-style: none; padding: 0; margin: 16px 0; }
.tier li { padding: 6px 0; font-size: 0.9rem; }
.tier-note { color: var(--muted); font-size: 0.85rem; }

/* Admin */
.admin-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.admin-list li { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }

/* ---- Background screening ---- */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
.small { font-size: 0.85rem; }

.status-card { margin: 20px 0; }
.status-head { display: flex; gap: 32px; justify-content: space-between; flex-wrap: wrap; }
.status-badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--muted); color: #fff;
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; margin: 4px 0 0;
}
.status-badge.inline { margin: 0; }
.status-badge.ok   { background: var(--success); }
.status-badge.warn { background: var(--warm); }
.status-badge.bad  { background: var(--error); }
.summary { margin-top: 14px; font-size: 0.95rem; }

.disclosure { margin: 20px 0; background: #f6efe2; }
.disclosure p { font-size: 0.9rem; }
.consent-check {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); font-weight: 400; font-size: 0.9rem;
}
.consent-check input { margin-top: 3px; }

/* Sits inside forms of very different shapes, so it carries its own spacing. */
.stepup {
  margin: 14px 0; padding: 12px 14px;
  border: 1px solid var(--line); border-left: 4px solid var(--warn, #c98a1e);
  border-radius: 10px; background: var(--card);
}
.stepup label { display: block; font-weight: 500; font-size: 0.9rem; }
.stepup input { width: 100%; margin-top: 6px; }
.stepup p { margin: 8px 0 0; }

.finding-list { list-style: none; padding: 0; display: grid; gap: 10px; margin: 16px 0; }
.finding {
  background: var(--card); border: 1px solid var(--line);
  border-left-width: 4px; border-radius: 10px; padding: 14px;
}
.finding header { display: flex; justify-content: space-between; align-items: baseline; }
.finding-main { margin: 6px 0; font-weight: 500; }
.finding .sev {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
}
.finding.sev-info  { border-left-color: var(--success); }
.finding.sev-minor { border-left-color: #d4a72c; }
.finding.sev-major { border-left-color: var(--warm); }
.finding.sev-disqualifying { border-left-color: var(--error); background: #fff5f5; }
.finding.sev-disqualifying .sev { color: var(--error); }

.decision-row { display: flex; gap: 10px; }

.plain-list { margin: 6px 0 0; padding-left: 18px; }
.plain-list li { margin: 3px 0; }

.criteria-box {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 4px 0 0;
}
.criteria-box legend { font-weight: 700; font-size: 0.9rem; padding: 0 6px; }
.criteria-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
label.check {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  font-weight: 400; min-height: 36px;
}
label.check input { width: auto; margin: 0; }

.criteria-group { margin: 16px 0 4px; }
.criteria-group h3 {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--accent); margin: 0 0 8px;
}
.criteria-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.criteria-list li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border: 1px solid var(--line);
  border-left-width: 3px; border-radius: 10px; background: var(--card);
}
.criteria-list li.met { border-left-color: var(--success); }
.criteria-list li.blocking { border-left-color: var(--warm); background: #fdf7f0; }
.criteria-list li.open { border-left-color: var(--line); }
.criteria-mark {
  font-weight: 700; line-height: 1.4; width: 14px; flex: none; text-align: center;
  color: var(--muted);
}
.criteria-list li.met .criteria-mark { color: var(--success); }
.criteria-list li.blocking .criteria-mark { color: var(--warm); }
.criteria-list li > div { flex: 1 1 auto; min-width: 0; }
.criteria-answer { display: grid; gap: 4px; margin-top: 8px; }
.criteria-answer textarea { width: 100%; font-size: 0.9rem; }
.criteria-said {
  display: grid; gap: 2px; margin: 8px 0 0; padding: 6px 10px;
  border-left: 2px solid var(--accent); font-size: 0.9rem;
}


.badge.ok  { background: var(--success); }
.badge.bad { background: var(--error); }

/* ---- Resume ---- */
.status-line { margin: 12px 0; font-size: 0.9rem; }
.resume-sections { display: grid; gap: 16px; margin-top: 16px; }
.entry-list { list-style: none; padding: 0; display: grid; gap: 12px; margin: 12px 0; }
.entry-list li {
  padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
}
.entry-main { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.entry-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px;
}
.entry-actions input[type="text"] { flex: 1 1 220px; }
.inline-form {
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line);
}
.submit-row { margin: 20px 0; }
.apply-form { margin-top: 12px; }

/* ---- Eligibility gates ---- */
.gate-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 24px; }
.gate {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; font-size: 0.88rem;
  border: 1px solid var(--line); background: var(--card);
}
.gate.ok   { border-color: var(--success); color: #14532d; background: #f0fdf4; }
.gate.todo { border-color: var(--warm); background: #fffbf5; }

/* ---- Password policy checklist ---- */
.policy-rules li { display: flex; align-items: baseline; gap: 8px; }
.policy-rules li.ok { color: #14532d; }
.policy-rules li.todo { color: var(--error); }

/* ---- Account handle ---- */
/* Secondary to the display name beside it, and monospace because a handle read out
   over the phone has to be transcribable character by character. */
.handle {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em; font-weight: 400;
  color: var(--muted); white-space: nowrap;
}
.named { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.named-name { font-weight: 600; }
h1 .handle, h2 .handle, h3 .handle { font-size: 0.6em; }

/* ---- Profile picture ---- */
/* One fixed square whether it holds a photo or initials, so a list of members with
   mixed choices still has a straight left edge.

   Its own class rather than the sitter-card .avatar above: that one is tinted from the
   public name by an inline style and never holds an image. */
.member-avatar {
  display: inline-flex; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  align-items: center; justify-content: center;
  background: var(--line); border: 1px solid var(--line);
  vertical-align: middle;
}
.member-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member-avatar-initials {
  font-size: 0.9rem; font-weight: 600; line-height: 1;
  color: var(--muted); letter-spacing: 0.02em; user-select: none;
}
.avatar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.avatar-row p { margin: 0; }

/* ---- Recovery codes ---- */
.recovery-codes { list-style: none; padding: 0; }
.recovery-codes code {
  font-size: 1.05rem; letter-spacing: 0.08em;
  padding: 6px 10px; border-radius: 8px;
  background: #f6efe2; border: 1px solid var(--line);
  display: inline-block;
}

/* ---- Job portal stages ---- */
.applicant-list .applicant { display: block; padding: 14px 0; }
.applicant-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.stage-meter { margin: 10px 0 8px; max-width: 520px; }
.stage-ticks {
  display: flex; justify-content: space-between; gap: 6px;
  margin-top: 6px; font-size: 0.72rem; color: var(--muted);
  text-transform: capitalize;
}
.stage-ticks span.reached { color: var(--accent); font-weight: 600; }
.stage-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---- Card checkout ---- */
/* Expiry month, year and security code read as one line, not three questions. */
.field-row { display: flex; flex-wrap: wrap; gap: 12px; }
.field-row label { flex: 1 1 120px; }

/* ---- House ads ---- */
/* Marked as an advert and set apart, so it is never mistaken for the site's own
   words. Ours are the only ads here: no third-party script is loaded. */
.house-ad {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--card); border: 1px dashed var(--line);
  border-radius: 12px; padding: 16px 20px; margin: 24px 0;
}
.house-ad-tag {
  margin: 0; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.house-ad h3 { margin: 4px 0 6px; }
.house-ad p { margin: 0 0 10px; font-size: 0.94rem; }
.house-ad-image {
  width: 120px; height: 120px; object-fit: cover; border-radius: 10px; flex: 0 0 auto;
}
@media (max-width: 560px) {
  .house-ad { flex-direction: column; }
  .house-ad-image { width: 100%; height: 160px; }
}

/* A single-cell row in a stored report is a block heading, not data. */
.table tr.report-head td { background: #f6efe2; font-weight: 600; }

/* ---- FAQ ---- */
.faq {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 10px;
}
.faq summary {
  cursor: pointer; font-weight: 600; font-family: Georgia, serif; font-size: 1.05rem;
}
.faq[open] summary { margin-bottom: 10px; }
.faq p { margin: 8px 0 0; font-size: 0.94rem; }

/* ---- Disclosures ---- */
/* One arrow for every <details> here. The default marker is a filled triangle in Chrome,
   a hollow one in Safari, and sits a different distance from the text in each; ::marker
   cannot be styled far enough to reconcile them, so it goes and a real box takes its
   place. <summary> is focusable and toggles on Enter and Space without any help, so
   nothing about this is mouse-only. */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 0.4em;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transform-origin: 65% 65%;
  transition: transform 150ms ease;
}
details[open] > summary::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) {
  summary::after { transition: none; }
}
summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* A page section that folds away when it has nothing in it for this member. The summary
   carries the weight the <h2> it replaced had, so the page still scans by heading. */
.disclose { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 28px; }
.disclose > summary {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ink);
}
.disclose > summary .badge { vertical-align: middle; margin-left: 6px; }
.disclose[open] > summary { margin-bottom: 10px; }

/* ---- Directory search ---- */
.search-bar {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px; margin: 20px 0 12px;
}
.search-bar .grow { flex: 1 1 260px; }
.search-bar label { margin: 0; }
.allowance {
  font-size: 0.88rem; color: var(--muted); margin: 0 0 16px;
  padding: 8px 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; display: inline-block;
}
.allowance.spent { border-color: var(--error); color: var(--error); }
.distance { font-weight: 600; color: var(--accent); }

.usage-grid { display: grid; gap: 14px; margin-top: 16px; }
.usage-meter .usage-label {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 0.88rem; margin-bottom: 6px;
}
.usage-meter .usage-label span { color: var(--muted); }
.usage-meter .bar {
  height: 8px; background: var(--line); border-radius: 999px; overflow: hidden;
}
.usage-meter .fill {
  display: block; height: 100%; background: var(--accent); border-radius: 999px;
}
.usage-meter.spent .fill { background: var(--error); }
.usage-meter.spent .usage-label span { color: var(--error); }

.plan-report {
  width: 100%; border-collapse: collapse; margin: 12px 0 28px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden;
}
.plan-report th, .plan-report td {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.plan-report th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; }
.plan-report tr:last-child td { border-bottom: 0; }

/* ---- Disclaimers ---- */
.disclaimer { background: #f6efe2; margin: 20px 0; }
.disclaimer p { font-size: 0.9rem; }
.footer-disclaimer { font-size: 0.78rem; color: var(--muted); display: inline-block; margin-top: 6px; max-width: 60ch; }
.footer-contact { font-size: 0.78rem; color: var(--muted); display: block; margin-top: 6px; }

/* ---- Account ---- */
.entry-list li.unread { border-left: 3px solid var(--warm); background: #fffbf5; }

/* ---- Admin ---- */
.row-inactive { opacity: 0.6; }
.admin-action { display: inline-flex; gap: 6px; align-items: center; margin-right: 8px; }
.admin-action input[type="text"] {
  width: 120px; padding: 4px 8px; font-size: 0.8rem; margin: 0;
}
.danger-link { color: var(--error); }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 16px 0 8px;
}
.metric {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.metric-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.metric-label { font-size: 0.85rem; font-weight: 600; color: var(--accent); }

.storage-meter { margin: 4px 0 12px; }
.storage-meter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.storage-bar {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.storage-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.2s ease;
}
.storage-bar > span.warm { background: var(--warm); }

.delta {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  margin: 8px 0 2px;
}
.delta.down { color: var(--error); }

.setting-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.setting-row:last-of-type { border-bottom: none; }
.setting-row label { display: block; font-size: 0.9rem; font-weight: 600; }
.setting-row p { margin: 4px 0 0; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
}
.filter-bar input, .filter-bar select { margin: 0; padding: 6px 10px; font-size: 0.85rem; }
.filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.panel-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 18px 0 24px;
}
.panel-menu-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}
.panel-menu-item:hover, .panel-menu-item:focus-visible {
  border-color: var(--accent);
}
.panel-menu-item strong { color: var(--accent); font-size: 0.95rem; }
.panel-menu-item span { font-size: 0.82rem; color: var(--muted); }

.metric-grid.compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.metric-grid.compact .metric { padding: 12px; }
.metric-grid.compact .metric-value { font-size: 1.3rem; }

.bar-chart { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.bar-chart li {
  display: grid;
  grid-template-columns: 90px 1fr 52px;
  align-items: center;
  gap: 10px;
}
.bar-label { font-size: 0.85rem; font-weight: 600; }
.bar-track {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 999px;
  background: var(--accent);
}
.bar-value { font-size: 0.85rem; font-weight: 700; text-align: right; }

/* One column a minute. Bars grow from the baseline so the row reads as a shape. */
.spark {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 80px;
}
.spark li {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: var(--line);
  border-radius: 2px;
}
.spark-fill {
  display: block;
  width: 100%;
  border-radius: 2px;
  background: var(--accent);
}

.board-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .board-row { grid-template-columns: 1fr; } }

.feature-switches { list-style: none; margin: 8px 0 0; padding: 0; }
.feature-switches li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.feature-switches li:last-child { border-bottom: none; }
.feature-switches div { display: flex; flex-direction: column; gap: 2px; }

.setting-group h4 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: var(--accent);
}

.site-notice {
  background: var(--warm);
  color: #fff;
  font-size: 0.88rem;
  padding: 8px 0;
  text-align: center;
}
.read-only-notice { background: #92400e; }
.read-only-notice a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  margin-left: 6px;
}

/* Skip link, focus, mobile nav, Hub Guide */
.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 80;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 8px 14px;
  border-radius: 8px;
}
.skip-link:focus { top: 12px; }
:focus-visible {
  outline: 3px solid var(--warm);
  outline-offset: 2px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.nav-check { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle {
  display: none;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  font-weight: 600;
  cursor: pointer;
}
.nav .nav-cta { padding: 8px 14px; }
.nav a, .nav .link-btn { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .nav-check:checked ~ .nav { display: flex; }
  .nav a, .nav .link-btn, .nav .btn { padding: 12px 8px; }
  .header-inner { gap: 12px; }
}

.usage-reset {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.search-replay {
  background: #eef4f0;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
  margin: 0 0 12px;
}

.setting-group { margin: 8px 0 20px; }
.setting-group h3 {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 16px 0 4px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  min-height: 44px;
}
.check-row input { width: auto; margin: 0; }

/* A fieldset used only to group related controls under a heading. The browser
   default border reads as a second card inside the card it already sits in. */
fieldset.stack {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
fieldset.stack legend { padding: 0; margin-bottom: 8px; }

/* One place a sign-in code could be sent. The radio is pinned to the first line
   so a two-line caveat beside it does not drag the control down the row. */
.choice-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  font-weight: 500;
  min-height: 44px;
}
.choice-row input { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
.choice-row > span { display: flex; flex-direction: column; gap: 2px; }
.choice-row:has(input:checked) { border-color: var(--accent); }
.ledger { font-size: 0.88rem; }
.ledger td.neg { color: var(--error); }

.hub-guide {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.hub-toggle {
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
.hub-panel {
  width: min(380px, calc(100vw - 24px));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}
.hub-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.hub-head strong { flex: 1; }
.hub-close {
  background: none; border: 0; color: var(--muted);
  font-weight: 600; cursor: pointer; min-height: 44px;
}
.hub-log {
  max-height: 240px;
  overflow: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hub-bubble {
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.9rem;
  white-space: pre-wrap;
}
.hub-bubble.bot { background: #f3eee4; align-self: flex-start; }
.hub-bubble.me { background: var(--accent); color: var(--accent-ink); align-self: flex-end; }
.hub-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 14px 8px; }
.hub-links a { font-size: 0.82rem; font-weight: 600; }
.hub-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 10px;
}
.hub-suggestions button {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
  cursor: pointer;
}
.hub-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
}
.hub-form input { margin: 0; flex: 1; }
.hub-form .btn { min-height: 44px; }
.feature-banner { background: var(--accent); }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin: 0 0 28px;
}
.feature-card.revoked { opacity: 0.7; }
.feature-card h3 { margin-top: 0; }

/* Theme switch in the header. Present for signed-in members of any tier. */
.theme-switch { display: inline-flex; margin: 0; }
.theme-btn {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
}
.theme-btn:hover { border-color: var(--accent); color: var(--ink); }

/* ---------------------------------------------------------------- glossy skin
   Additive only, keyed off the body class, so the classic look is never
   touched. Same palette on purpose: this changes the surface treatment, not
   the brand. */
.theme-glossy {
  --line: #dcd2c0;
  background:
    radial-gradient(1200px 400px at 50% -180px, #ffffff 0%, rgba(255,255,255,0) 70%),
    var(--bg);
}
.theme-glossy .btn,
.theme-glossy .theme-btn,
.theme-glossy .hub-suggestions button {
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.theme-glossy .btn:hover,
.theme-glossy .theme-btn:hover {
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
}
.theme-glossy .btn:active { transform: translateY(0); }
.theme-glossy .btn.primary {
  background-image: linear-gradient(180deg, #59705f 0%, var(--accent) 55%, #33453a 100%);
  box-shadow: 0 2px 6px rgba(63, 83, 72, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.theme-glossy .btn.primary:hover {
  background-image: linear-gradient(180deg, #647d6a 0%, #44594c 55%, #2b3a31 100%);
  box-shadow: 0 6px 14px rgba(63, 83, 72, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.theme-glossy .btn.danger {
  background-image: linear-gradient(180deg, #ef4444 0%, var(--error) 55%, #b91c1c 100%);
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.theme-glossy .card,
.theme-glossy .sitter-card,
.theme-glossy .metric,
.theme-glossy .feature-card {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 20px -14px rgba(15, 23, 42, 0.28);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}
.theme-glossy .site-header {
  box-shadow: 0 1px 0 var(--line), 0 6px 18px -14px rgba(15, 23, 42, 0.35);
  background-image: linear-gradient(180deg, #ffffff, #fdfbf7);
}
.theme-glossy .badge,
.theme-glossy .status-badge {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
}
.theme-glossy input[type="text"], .theme-glossy input[type="email"],
.theme-glossy input[type="password"], .theme-glossy input[type="number"],
.theme-glossy input[type="tel"], .theme-glossy input[type="date"],
.theme-glossy input[type="url"], .theme-glossy input[type="search"],
.theme-glossy input[type="datetime-local"], .theme-glossy textarea,
.theme-glossy select {
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}
.theme-glossy input:focus, .theme-glossy textarea:focus, .theme-glossy select:focus {
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 3px rgba(63, 83, 72, 0.18);
}
.theme-glossy .storage-bar > span,
.theme-glossy .bar-fill,
.theme-glossy .usage-meter > span {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
}
.theme-glossy .hub-toggle {
  box-shadow: 0 6px 18px -6px rgba(63, 83, 72, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  background-image: linear-gradient(180deg, #59705f 0%, var(--accent) 60%, #33453a 100%);
}

/* The small end of the phone range. The 24px gutter and the display type were
   sized for a 375px screen and up; on a 320px screen they leave too little room
   for the content itself. */
@media (max-width: 400px) {
  .container { padding: 24px 16px; }
  .hero { padding: 24px 16px; }
  h1 { font-size: 2rem; }
  .hero h1 { font-size: 2.3rem; }
  h2 { font-size: 1.4rem; }
  .card, .sitter-card, .auth-card, .hero-card, .callout, .ticker-form { padding: 16px; }
  .cta-row, .filter-bar { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .theme-glossy .btn:hover, .theme-glossy .theme-btn:hover { transform: none; }
}