/* Public Help Center stylesheet. Self-contained (no build step): served by the
   Go SSR pages and reused by the progressive-enhancement islands bundle. Design
   tokens are ported from web/src/index.css; dark mode is driven by an explicit
   [data-theme] attribute (set server-side from ?theme=) with the OS preference
   as the fallback. Per-product accents derive a full ramp from a single seed. */

:root {
  --color-background-primary: #ffffff;
  --color-background-secondary: #f3f1ea;
  --color-background-tertiary: #e9e6df;
  --color-background-info: #e6f1fb;
  --color-text-primary: #2c2c2a;
  --color-text-secondary: #5f5e5a;
  --color-text-tertiary: #8a8983;
  --color-text-info: #0c447c;
  --color-border-tertiary: rgba(0, 0, 0, 0.12);
  --color-border-secondary: rgba(0, 0, 0, 0.22);
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Accent seed → derived ramp. Per-product seeds override --accent-seed below;
     ?accent= can override it inline on <html>. */
  --accent-seed: #378add;
  --color-accent: var(--accent-seed);
  --color-accent-contrast: #ffffff;
  --color-accent-bg: color-mix(in srgb, var(--accent-seed) 12%, var(--color-background-primary));
  --color-accent-bg-strong: color-mix(in srgb, var(--accent-seed) 20%, var(--color-background-primary));
  --color-accent-border: color-mix(in srgb, var(--accent-seed) 42%, transparent);
  --color-accent-hover: color-mix(in srgb, var(--accent-seed) 85%, #000000);
  color-scheme: light;
}

/* Explicit dark theme (server sets data-theme from ?theme=dark). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-background-primary: #201f1d;
  --color-background-secondary: #2a2926;
  --color-background-tertiary: #161513;
  --color-background-info: #0e3253;
  --color-text-primary: #ecebe4;
  --color-text-secondary: #a8a69e;
  --color-text-tertiary: #76746d;
  --color-text-info: #9fc6f0;
  --color-border-tertiary: rgba(255, 255, 255, 0.14);
  --color-border-secondary: rgba(255, 255, 255, 0.24);
  --color-accent-contrast: #15140f;
}

/* OS-preference dark fallback, ONLY when the host did not pin a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-background-primary: #201f1d;
    --color-background-secondary: #2a2926;
    --color-background-tertiary: #161513;
    --color-background-info: #0e3253;
    --color-text-primary: #ecebe4;
    --color-text-secondary: #a8a69e;
    --color-text-tertiary: #76746d;
    --color-text-info: #9fc6f0;
    --color-border-tertiary: rgba(255, 255, 255, 0.14);
    --color-border-secondary: rgba(255, 255, 255, 0.24);
    --color-accent-contrast: #15140f;
  }
}

/* Per-product brand palette, sampled from the BudgetBakers product cards: a solid
   accent seed (links / buttons / focus, legible on the page background) plus the
   brand gradient endpoints (brand mark / hero). The dark seed is a brighter
   variant for legibility; the gradient keeps the product identity in both themes. */
:root {
  --product-grad-from: var(--accent-seed);
  --product-grad-to: var(--color-accent-hover);
}
:root[data-product="wallet"]    { --accent-seed: #12a06c; --product-grad-from: #35c18e; --product-grad-to: #1c9e6c; }
:root[data-product="board"]     { --accent-seed: #2563eb; --product-grad-from: #4c92ea; --product-grad-to: #2563eb; }
:root[data-product="sharecost"] { --accent-seed: #7c3aed; --product-grad-from: #a95ef2; --product-grad-to: #7c3aed; }
:root[data-product="aisp"]      { --accent-seed: #ea580c; --product-grad-from: #ff8c28; --product-grad-to: #ef5f0c; }
:root[data-theme="dark"][data-product="wallet"]    { --accent-seed: #4fd6a0; }
:root[data-theme="dark"][data-product="board"]     { --accent-seed: #7fb0f8; }
:root[data-theme="dark"][data-product="sharecost"] { --accent-seed: #c09bf5; }
:root[data-theme="dark"][data-product="aisp"]      { --accent-seed: #fb9a4d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme])[data-product="wallet"]    { --accent-seed: #4fd6a0; }
  :root:not([data-theme])[data-product="board"]     { --accent-seed: #7fb0f8; }
  :root:not([data-theme])[data-product="sharecost"] { --accent-seed: #c09bf5; }
  :root:not([data-theme])[data-product="aisp"]      { --accent-seed: #fb9a4d; }
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

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

.hc-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

/* Header / footer chrome — hidden when embedded in a native WebView. */
.hc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  background: var(--color-background-primary);
}
.hc-brand { font-weight: 650; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.hc-brand-dot { width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, var(--product-grad-from), var(--product-grad-to)); }
.hc-footer {
  margin-top: 48px;
  padding: 24px 20px;
  border-top: 0.5px solid var(--color-border-tertiary);
  color: var(--color-text-tertiary);
  font-size: 12px;
  text-align: center;
}
:root[data-embedded="1"] .hc-standalone-chrome { display: none !important; }

.hc-h1 { font-size: 26px; font-weight: 680; margin: 8px 0 4px; letter-spacing: -0.01em; }
.hc-lead { color: var(--color-text-secondary); margin: 0 0 24px; }

/* Search box (enhanced into a live overlay by the islands bundle). */
.hc-search { margin: 0 0 28px; }
.hc-search-input {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* anything smaller makes iOS zoom the page on focus */
  color: var(--color-text-primary);
  background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  padding: 11px 14px;
}
.hc-search-input:focus {
  outline: none;
  border-color: var(--color-accent-border);
  box-shadow: 0 0 0 3px var(--color-accent-bg);
}

/* Category / article cards. */
.hc-grid { display: grid; gap: 10px; }
.hc-card {
  display: block;
  padding: 14px 16px;
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  color: inherit;
}
.hc-card:hover { background: var(--color-background-secondary); text-decoration: none; }
.hc-card-title { font-weight: 600; font-size: 15px; }
.hc-card-meta { color: var(--color-text-tertiary); font-size: 12px; margin-top: 2px; }

/* Product chooser (root landing): brand-gradient cards.
   The gradient is held in --card-grad so the hover rule keeps the brand color:
   .hc-prod-card:hover matches .hc-card:hover specificity and wins by source order,
   instead of falling back to the generic --color-background-secondary. */
.hc-chooser-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.hc-prod-card {
  border: none;
  padding: 22px 20px;
  min-height: 96px;
  background: var(--card-grad);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.hc-prod-card:hover {
  background: var(--card-grad);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.hc-prod-card .hc-card-title { color: #fff; font-size: 19px; font-weight: 680; }
.hc-prod-card .hc-card-meta { color: rgba(255, 255, 255, 0.85); font-size: 13px; margin-top: 6px; }
.hc-prod-wallet { --card-grad: linear-gradient(135deg, #35c18e, #1c9e6c); }
.hc-prod-board { --card-grad: linear-gradient(135deg, #4c92ea, #2563eb); }
.hc-prod-sharecost { --card-grad: linear-gradient(135deg, #a95ef2, #7c3aed); }
.hc-prod-aisp { --card-grad: linear-gradient(135deg, #ff8c28, #ef5f0c); }

.hc-section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
  margin: 28px 0 10px;
}

/* Breadcrumbs + language switcher. */
.hc-breadcrumbs { font-size: 13px; color: var(--color-text-tertiary); margin-bottom: 12px; }
.hc-breadcrumbs a { color: var(--color-text-secondary); }
.hc-locales { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.hc-locale {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 0.5px solid var(--color-border-tertiary);
  color: var(--color-text-secondary);
}
.hc-locale[aria-current="true"] {
  background: var(--color-accent-bg-strong);
  border-color: var(--color-accent-border);
  color: var(--color-text-primary);
}

.hc-fallback-note {
  font-size: 12px;
  color: var(--color-text-info);
  background: var(--color-background-info);
  border-radius: var(--border-radius-md);
  padding: 8px 12px;
  margin: 0 0 16px;
}

/* Theme toggle button (enhanced/active via the islands bundle). */
.hc-icon-btn {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text-secondary);
  background: transparent;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  padding: 6px 10px;
  cursor: pointer;
}
.hc-icon-btn:hover { background: var(--color-background-secondary); }

/* Feedback widget. */
.hc-feedback {
  margin-top: 36px;
  padding: 16px;
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  text-align: center;
}
.hc-feedback-q { font-size: 14px; margin-bottom: 10px; }
.hc-feedback-btns { display: inline-flex; gap: 8px; }

/* Rendered markdown body. */
.md-body { font-size: 15.5px; color: var(--color-text-primary); }
.md-body h1, .md-body h2, .md-body h3 { line-height: 1.3; margin: 1.4em 0 0.5em; font-weight: 660; }
.md-body h1 { font-size: 23px; }
.md-body h2 { font-size: 19px; }
.md-body h3 { font-size: 16px; }
.md-body p { margin: 0.7em 0; }
.md-body ul, .md-body ol { padding-left: 1.4em; margin: 0.7em 0; }
.md-body li { margin: 0.3em 0; }
.md-body img { max-width: 100%; height: auto; border-radius: var(--border-radius-md); }
.md-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--color-background-secondary);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.md-body pre {
  background: var(--color-background-secondary);
  padding: 12px 14px;
  border-radius: var(--border-radius-md);
  overflow-x: auto;
}
.md-body pre code { background: transparent; padding: 0; }
.md-body blockquote {
  margin: 0.8em 0;
  padding-left: 14px;
  border-left: 3px solid var(--color-border-secondary);
  color: var(--color-text-secondary);
}
.md-body table { border-collapse: collapse; width: 100%; margin: 0.8em 0; }
.md-body th, .md-body td { border: 0.5px solid var(--color-border-tertiary); padding: 7px 10px; text-align: left; }
.md-body mark { background: var(--color-accent-bg-strong); color: inherit; padding: 0 2px; border-radius: 3px; }

/* --- islands-enhanced live search overlay --- */
.hc-search { position: relative; }
.hc-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}
.hc-result {
  display: block;
  padding: 10px 14px;
  color: inherit;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.hc-result:last-child { border-bottom: none; }
.hc-result:hover, .hc-result[aria-selected="true"] { background: var(--color-background-secondary); text-decoration: none; }
.hc-result-title { font-size: 14px; font-weight: 560; }
.hc-result-snippet { font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px; }
.hc-result-snippet mark { background: var(--color-accent-bg-strong); border-radius: 2px; }
.hc-result-empty { padding: 12px 14px; color: var(--color-text-tertiary); font-size: 13px; }

/* Feedback "thanks" + support handoff states. */
.hc-feedback-thanks { font-size: 14px; color: var(--color-text-secondary); }
.hc-feedback-comment {
  width: 100%;
  margin-top: 10px;
  font-family: inherit;
  font-size: 16px; /* iOS zoom, as above */
  color: var(--color-text-primary);
  background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  padding: 8px 10px;
  resize: vertical;
}

/* --- contact support --- */
.hc-contact { --hc-danger: #b3261e; }
:root[data-theme="dark"] .hc-contact { --hc-danger: #f2b8b5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .hc-contact { --hc-danger: #f2b8b5; }
}

/* Several classes below set display, which would otherwise beat [hidden]. */
.hc-contact [hidden] { display: none !important; }

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

.hc-contact button:disabled { opacity: 0.55; cursor: default; }
.hc-contact button:focus-visible,
.hc-contact a:focus-visible,
.hc-contact summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* Touch-sized variants of the shared buttons. */
.hc-contact .hc-icon-btn { font-size: 14px; color: var(--color-text-primary); padding: 9px 14px; min-height: 40px; }
.hc-contact .hc-fallback-note { font-size: 14px; }
.hc-contact-primary {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-accent-contrast);
  background: var(--color-accent);
  border: none;
  border-radius: var(--border-radius-md);
  padding: 11px 18px;
  min-height: 44px;
  cursor: pointer;
}
.hc-contact-primary:hover:not(:disabled) { background: var(--color-accent-hover); }

/* Labelled fields (question box, follow-up, request form). */
.hc-contact-field { margin: 0 0 14px; }
.hc-contact-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.hc-contact-input {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* anything smaller makes iOS zoom the page on focus */
  line-height: 1.4;
  color: var(--color-text-primary);
  background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  padding: 10px 12px;
}
textarea.hc-contact-input { resize: vertical; min-height: 68px; }
select.hc-contact-input { min-height: 44px; }
.hc-contact-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-bg-strong);
}
.hc-contact-input[aria-invalid="true"] { border-color: var(--hc-danger); border-width: 1px; }
.hc-contact-hint { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 12px; }
.hc-contact-field .hc-contact-hint { margin: 6px 0 0; }
.hc-contact-status { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 12px; }
.hc-contact-status:empty { margin: 0; }
.hc-contact-status.is-error { color: var(--hc-danger); }

.hc-contact-ask { margin: 0 0 16px; }
.hc-contact-ask .hc-contact-field { margin-bottom: 10px; }
.hc-contact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

/* Suggested articles: the search overlay rows, laid out in normal flow. */
.hc-contact-suggest { margin: 0 0 16px; }
.hc-contact-suggest .hc-section-title { margin: 0 0 8px; }
.hc-contact-articles {
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

/* Assistant thread (also reused for a ticket's messages under "My requests"). */
.hc-contact-thread { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.hc-contact-thread:empty { margin: 0; }
.hc-contact-thread:focus { outline: none; }
.hc-contact-bubble {
  max-width: 92%;
  padding: 10px 14px;
  border-radius: var(--border-radius-lg);
  font-size: 15px;
  overflow-wrap: anywhere;
}
.hc-contact-bubble.is-user {
  align-self: flex-end;
  background: var(--color-accent-bg-strong);
  border-bottom-right-radius: 4px;
}
.hc-contact-bubble.is-assistant {
  align-self: flex-start;
  background: var(--color-background-secondary);
  border-bottom-left-radius: 4px;
}
.hc-contact-bubble-text { white-space: pre-wrap; }
.hc-contact-bubble-meta { font-size: 12px; color: var(--color-text-tertiary); margin-bottom: 4px; }
.hc-contact-bubble .md-body { font-size: 15px; }
.hc-contact-bubble .md-body > :first-child { margin-top: 0; }
.hc-contact-bubble .md-body > :last-child { margin-bottom: 0; }
.hc-contact-bubble.is-assistant .md-body code,
.hc-contact-bubble.is-assistant .md-body pre { background: var(--color-background-tertiary); }
.hc-contact-bubble.is-pending { color: var(--color-text-secondary); }
.hc-contact-bubble.is-pending .hc-contact-bubble-text::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: hc-contact-pulse 1s ease-in-out infinite;
}
@keyframes hc-contact-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-contact-bubble.is-pending .hc-contact-bubble-text::after { animation: none; }
}
.hc-contact-sources { margin-top: 10px; padding-top: 8px; border-top: 0.5px solid var(--color-border-tertiary); }
.hc-contact-sources-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
}
.hc-contact-sources .hc-result { padding: 6px 0; border-bottom: none; color: var(--color-accent); }
.hc-contact-sources .hc-result:hover { background: transparent; text-decoration: underline; }

/* Request form. */
.hc-contact-request { margin-top: 8px; padding-top: 20px; border-top: 0.5px solid var(--color-border-tertiary); }
.hc-contact-form-title { font-size: 19px; font-weight: 660; margin: 0 0 14px; }
.hc-contact-form-title:focus { outline: none; }
.hc-contact-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.hc-contact-bank { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.hc-contact-file-input {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.hc-contact-files { list-style: none; margin: 8px 0 0; padding: 0; }
.hc-contact-files:empty { margin: 0; }
.hc-contact-file {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.hc-contact-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-contact-file-meta { flex: none; font-size: 12px; color: var(--color-text-tertiary); }
.hc-contact .hc-contact-file-remove { flex: none; min-width: 36px; min-height: 36px; padding: 0 8px; font-size: 18px; line-height: 1; }
.hc-contact-done {
  margin: 0;
  padding: 14px 16px;
  font-size: 15px;
  background: var(--color-accent-bg);
  border: 0.5px solid var(--color-accent-border);
  border-radius: var(--border-radius-lg);
}
.hc-contact-done:focus { outline: none; }

/* "My requests" (verified users only). */
.hc-contact-mine {
  margin-top: 28px;
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}
.hc-contact-mine > summary { cursor: pointer; padding: 12px 16px; font-size: 14px; font-weight: 600; }
.hc-contact-mine-body { border-top: 0.5px solid var(--color-border-tertiary); }
.hc-contact-mine-body > p { margin: 0; padding: 12px 16px; }
.hc-contact-mine-item { border-bottom: 0.5px solid var(--color-border-tertiary); }
.hc-contact-mine-item:last-child { border-bottom: none; }
.hc-contact-mine-toggle {
  width: 100%;
  font-family: inherit;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px 16px;
}
.hc-contact-mine-thread { margin: 0; padding: 4px 16px 14px; }
.hc-contact-mine-thread > p { margin: 0; }

/* Narrow WebViews: one column, full-width primary action. */
@media (max-width: 480px) {
  .hc-contact-bank { grid-template-columns: 1fr; }
  .hc-contact-primary { width: 100%; }
  .hc-contact-actions .hc-icon-btn { flex: 1 1 auto; }
}

/* Header tools: language switcher + theme toggle. */
.hc-header-tools { display: inline-flex; align-items: center; gap: 8px; }
.hc-lang-select {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text-secondary);
  background: transparent;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  padding: 6px 8px;
  max-width: 160px;
  cursor: pointer;
}
.hc-lang-select:hover { background: var(--color-background-secondary); }
.hc-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header section navigation (Articles · Feature requests · Contact). */
.hc-nav { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 12px; }
.hc-nav-link {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--border-radius-md);
  color: var(--color-text-secondary);
}
.hc-nav-link:hover { background: var(--color-background-secondary); text-decoration: none; }
.hc-nav-link[aria-current="page"] { background: var(--color-accent-bg); color: var(--color-accent); font-weight: 600; }
.hc-signed-in { margin-top: 8px; }
.hc-tiles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 8px; }

/* Feature-request board. */
.hc-fr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hc-fr-head .hc-lead { margin-bottom: 12px; }
.hc-fr-suggest { display: inline-block; text-decoration: none; white-space: nowrap; }
.hc-fr-tabs { display: flex; gap: 2px; border-bottom: 0.5px solid var(--color-border-tertiary); margin: 8px 0 12px; }
.hc-fr-tab {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -0.5px;
}
.hc-fr-tab:hover { text-decoration: none; color: var(--color-text-primary); }
.hc-fr-tab[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); font-weight: 600; }
.hc-fr-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.hc-fr-select, .hc-fr-search {
  font-family: inherit;
  font-size: 16px; /* iOS zoom, as above */
  min-height: 40px;
  color: var(--color-text-primary);
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  padding: 7px 10px;
}
.hc-fr-search { flex: 1 1 160px; min-width: 120px; }
.hc-fr-filter-fields { display: contents; }
.hc-fr-filter-toggle { display: none; }
.hc-fr-filter-toggle.is-active { color: var(--color-accent); border-color: var(--color-accent-border); background: var(--color-accent-bg); }
.hc-board[aria-busy="true"] [data-hc-fr-list] { opacity: 0.55; transition: opacity 0.15s ease; }
.hc-fr-more { display: block; width: 100%; min-height: 44px; margin-top: 12px; font-size: 14px; color: var(--color-text-primary); }
.hc-fr-list { display: flex; flex-direction: column; gap: 8px; }
.hc-fr-row, .hc-fr-post-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
}
.hc-fr-post-head { border: none; padding: 0; margin-bottom: 12px; }
.hc-fr-main { flex: 1 1 auto; min-width: 0; }
.hc-fr-title { font-size: 15px; font-weight: 600; color: inherit; overflow-wrap: anywhere; }
.hc-fr-post-title { margin: 0 0 6px; }
.hc-fr-excerpt {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-tertiary);
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.hc-fr-meta { font-size: 12px; color: var(--color-text-tertiary); margin-top: 4px; }
.hc-fr-votes { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px; }
/* 44 px wide and 36 px tall; the ::after pad extends the touch area to 44 px. */
.hc-fr-vote {
  position: relative;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  width: 44px;
  height: 36px;
  padding: 0;
  color: var(--color-text-secondary);
  background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  cursor: pointer;
}
.hc-fr-vote::after { content: ""; position: absolute; inset: -4px 0; }
.hc-fr-vote:disabled { cursor: default; opacity: 0.6; }
.hc-fr-vote:not(:disabled):hover { background: var(--color-accent-bg); color: var(--color-accent); }
.hc-fr-vote[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-contrast); border-color: var(--color-accent); }
.hc-fr-score { font-size: 15px; font-weight: 600; }
.hc-fr-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
}
.hc-fr-status.is-planned, .hc-fr-status.is-under_review { background: var(--color-background-info); color: var(--color-text-info); }
.hc-fr-status.is-in_progress { background: var(--color-accent-bg-strong); color: var(--color-accent); }
.hc-fr-status.is-completed { background: color-mix(in srgb, #12a06c 18%, var(--color-background-primary)); color: #0f7a52; }
:root[data-theme="dark"] .hc-fr-status.is-completed { color: #4fd6a0; }
.hc-fr-status.is-declined, .hc-fr-status.is-merged { opacity: 0.75; }
.hc-fr-empty { color: var(--color-text-tertiary); font-size: 14px; }
.hc-fr-pager { display: flex; justify-content: space-between; margin-top: 16px; }
.hc-fr-signin {
  margin: 12px 0 14px;
  padding: 10px 14px;
  font-size: 14px;
  background: var(--color-accent-bg);
  border: 0.5px solid var(--color-accent-border);
  border-radius: var(--border-radius-lg);
}
.hc-fr-body { font-size: 15px; line-height: 1.55; margin: 0 0 16px; overflow-wrap: anywhere; }
.hc-fr-body p { margin: 0 0 10px; }
.hc-fr-response { margin: 0 0 20px; padding: 12px 14px; border-left: 3px solid var(--color-accent); background: var(--color-background-secondary); border-radius: var(--border-radius-md); }
.hc-fr-response .hc-section-title { margin: 0 0 6px; }
.hc-fr-comments .hc-section-title { margin-top: 20px; }
.hc-fr-comment { padding: 10px 0; border-bottom: 0.5px solid var(--color-border-tertiary); }
.hc-fr-comment.is-pending { opacity: 0.7; }
.hc-fr-comment-meta { font-size: 12px; color: var(--color-text-tertiary); margin-bottom: 4px; }
.hc-fr-comment-body { font-size: 14px; overflow-wrap: anywhere; }
.hc-fr-comment-body p { margin: 0 0 6px; }
.hc-fr-comment-form { margin-top: 14px; }
.hc-fr-platforms { border: none; padding: 0; margin: 0 0 14px; }
.hc-fr-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 18px 0 0; font-size: 15px; }
.hc-fr-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-accent); }
.hc-fr-similar { margin: 0 0 14px; }
.hc-fr-similar .hc-section-title { margin: 0 0 8px; }
.hc-fr-done { font-size: 15px; }
.hc-fr-strip-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: inherit;
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
}
.hc-fr-strip-row:hover { background: var(--color-background-secondary); text-decoration: none; }
.hc-fr-strip-score { min-width: 32px; font-weight: 600; text-align: center; color: var(--color-accent); }
.hc-fr-strip-title { flex: 1 1 auto; font-size: 14px; font-weight: 560; overflow-wrap: anywhere; }

/* Toast: a short message tied to a tap (an anonymous vote), shown where the
   visitor is looking rather than in a hint box at the top of a long page. */
.hc-toast {
  position: fixed;
  left: 50%;
  top: calc(12px + env(safe-area-inset-top));
  z-index: 40;
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 16px;
  font-size: 14px;
  color: var(--color-text-primary);
  background: var(--color-accent-bg);
  border: 0.5px solid var(--color-accent-border);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.hc-toast.is-shown { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .hc-toast { transition: none; }
}

/* Bottom tab bar: the section navigation on phones and in the app's WebView
   (where the header is hidden). Hidden on wider standalone pages, which have
   the header navigation instead. */
.hc-tabbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 0 max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
  background: var(--color-background-primary);
  border-top: 0.5px solid var(--color-border-tertiary);
}
.hc-tabbar-link {
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 560;
  line-height: 1.2;
  text-align: center;
  color: var(--color-text-secondary);
}
.hc-tabbar-link:hover { text-decoration: none; }
.hc-tabbar-link[aria-current="page"] { color: var(--color-accent); }
.hc-tabbar-icon { flex: none; }
:root[data-embedded="1"] .hc-tabbar { display: flex; }
:root[data-embedded="1"] body.hc-has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

/* Phones: one compact header row, the tab bar instead of the header links,
   the filters folded behind one button, and the board's "Suggest" button as
   a floating action above the tab bar. */
@media (max-width: 640px) {
  .hc-header { padding: 10px 16px; gap: 10px; }
  .hc-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hc-nav { display: none; }
  .hc-lang-select { font-size: 16px; max-width: 132px; padding: 6px 8px; min-height: 40px; }
  .hc-icon-btn[data-hc-theme-toggle] { min-width: 40px; min-height: 40px; }
  .hc-container { padding: 16px 16px 40px; }
  .hc-h1 { font-size: 24px; }
  .hc-lead { font-size: 15px; margin-bottom: 18px; }
  .hc-search { margin-bottom: 20px; }
  .hc-footer { margin-top: 24px; }

  .hc-tabbar { display: flex; }
  body.hc-has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* Only the last crumb, as a back link. */
  .hc-crumb-sep, .hc-crumb:not(:last-of-type) { display: none; }
  .hc-crumb:last-of-type::before { content: "‹ "; }
  [dir="rtl"] .hc-crumb:last-of-type::before { content: "› "; }
  .hc-breadcrumbs { margin-bottom: 8px; }

  /* The header's language select covers the article's language chips; the
     articles tile only jumps down the same page. */
  .hc-locales { display: none !important; }
  .hc-tile-articles { display: none; }

  .hc-fr-head { display: block; }
  .hc-fr-head .hc-lead { margin-bottom: 4px; }
  .hc-fr-head .hc-fr-suggest {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(72px + env(safe-area-inset-bottom));
    z-index: 31;
    width: auto;
    border-radius: 999px;
    padding: 12px 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  }
  body.hc-has-tabbar .hc-board { padding-bottom: 56px; } /* room for the floating button */

  .hc-fr-tabs { margin-top: 4px; }
  .hc-fr-tab { padding: 10px 14px; }
  .hc-fr-filters.is-enhanced .hc-fr-filter-toggle { display: inline-block; min-height: 40px; font-size: 14px; }
  .hc-fr-filters.is-enhanced .hc-fr-filter-fields { display: none; }
  .hc-fr-filters.is-enhanced.is-open .hc-fr-filter-fields { display: flex; gap: 8px; width: 100%; }
  .hc-fr-filters.is-enhanced.is-open .hc-fr-select { flex: 1 1 0; min-width: 0; }
  .hc-fr-row { gap: 12px; padding: 12px; }
  .hc-fr-post-head { gap: 12px; }
  .hc-fr-post-title { font-size: 22px; }
}