/* CrowOn Help Center — one stylesheet for support.crowon.app (server/help.mjs serves it as /help/static/site.css) and the
   app's Help screen (pages/Help.tsx links /help-site.css). Colours come from the app's tokens (--canvas, --ink, --ink-2,
   --ink-3, --line, --surface-2); the public pages define them themselves. No accent colour: ink on canvas.
   Sizes from docs/type-scale-proposal.md: 28 hero / article title, 22 page titles, 20 section headings, 16 rows + reading,
   14 secondary, 13 crumbs, 12 notes. Apple system font. No scroll bars. */
.hc { --hc-r: 20px; --hc-w: 1080px; color: var(--ink); background: var(--canvas); font-family: -apple-system, BlinkMacSystemFont, system-ui, "Hiragino Sans", sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.hc, .hc * { box-sizing: border-box; scrollbar-width: none; }
.hc ::-webkit-scrollbar { display: none; }
.hc :where(a) { color: inherit; text-decoration: none; }
.hc :where(button) { font: inherit; color: inherit; }
.hc :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.hc :where(h1, h2, h3, p) { margin: 0; }
.hc svg.i { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hc svg.i.s { width: 18px; height: 18px; }
.hc-wrap { max-width: var(--hc-w); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .hc-wrap { padding: 0 32px; } }

/* ---------- top bar ---------- */
.hc-top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--canvas) 86%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.hc-top > .hc-wrap { display: flex; align-items: center; gap: 12px; height: 56px; }
.hc-top { position: sticky; }
.hc-brand { display: flex; align-items: baseline; gap: 6px; font-size: 16px; font-weight: 700; white-space: nowrap; }
.hc-brand span { font-weight: 400; color: var(--ink-2); }
.hc-top .hc-search { flex: 1; max-width: 420px; margin-inline-start: auto; }
.hc-top-end { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.hc-top .hc-search + .hc-top-end { margin-inline-start: 0; }
.hc-lang, .hc-iconbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 8px; font-size: 14px; color: var(--ink-2); border: 0; background: none; cursor: pointer; }
.hc-iconbtn { display: none; }
@media (max-width: 767px) {
  .hc-top .hc-search { display: none; }
  .hc-top.searching .hc-search { display: flex; position: absolute; inset: 6px 12px; max-width: none; margin: 0; z-index: 2; }
  .hc-top.searching .hc-search .hc-suggest { top: 52px; }
  .hc-iconbtn { display: inline-flex; color: var(--ink); }
  .hc-top .hc-top-end, .hc-top .hc-search + .hc-top-end { margin-inline-start: auto; margin-inline-end: -8px; }
}

/* ---------- search ---------- */
.hc-search { position: relative; display: flex; align-items: center; }
.hc-search > svg.i { position: absolute; inset-inline-start: 16px; z-index: 1; color: var(--ink-2); pointer-events: none; }
/* !important: the app's own text-box styles (pill.css, type.css) must not reach this box */
.hc .hc-search::before, .hc .hc-search::after { display: none !important; content: none !important; }
.hc .hc-search { border: 0 !important; outline: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
.hc .hc-search input { position: static !important; z-index: auto !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; background: var(--surface-2) !important; box-shadow: none !important; border: 0 !important; }
.hc .hc-search input:focus { background: var(--canvas) !important; box-shadow: 0 0 0 1px var(--line), 0 6px 24px rgba(0,0,0,.08) !important; }
.hc .hc-search input { padding-inline-start: 48px !important; }
.hc .hc-search.lg input { padding-inline-start: 52px !important; }
.hc-search input { width: 100%; height: 44px; border: 0; border-radius: 999px !important; padding: 0 20px 0 48px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 16px; outline: none; -webkit-appearance: none; appearance: none; box-shadow: none; }
.hc-search input::placeholder { color: var(--ink-2); }
.hc-search input::-webkit-search-cancel-button { display: none; }
.hc-search input:focus { background: var(--canvas); box-shadow: 0 0 0 1px var(--line), 0 6px 24px rgba(0,0,0,.08); }
.hc-search.lg input { height: 56px; font-size: 16px; padding-inline-start: 52px; }
.hc-search.lg > svg.i { inset-inline-start: 20px; }
.hc-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--hc-r); box-shadow: 0 16px 48px rgba(0,0,0,.14); padding: 8px; max-height: min(70vh, 460px); overflow: auto; text-align: start; }
.hc-suggest[hidden] { display: none; }
.hc-suggest a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: 14px; }
.hc-suggest a[aria-selected="true"], .hc-suggest a:hover { background: var(--surface-2); }
.hc-suggest a > svg.i { color: var(--ink-2); }
.hc-suggest b { display: block; font-size: 16px; font-weight: 500; line-height: 1.35; }
.hc-suggest small { display: block; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.hc-suggest .all { font-size: 14px; font-weight: 600; min-height: 44px; }
.hc-suggest .none { padding: 12px; font-size: 14px; color: var(--ink-2); }
.hc mark { background: none; color: inherit; font-weight: 700; }

/* ---------- home ---------- */
.hc-hero { padding: 56px 0 40px; text-align: center; }
.hc-hero h1 { font-size: 28px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.hc-hero > .hc-wrap > p { margin-top: 8px; font-size: 16px; color: var(--ink-2); }
.hc-hero .hc-search { max-width: 640px; margin: 28px auto 0; }
.hc-hot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 16px; font-size: 14px; color: var(--ink-2); }
.hc-hot a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
@media (max-width: 767px) { .hc-hero { padding: 32px 0 28px; text-align: start; } .hc-hero h1 { font-size: 22px; } .hc-hot { justify-content: flex-start; gap: 8px 16px; } .hc-hot > span { flex-basis: 100%; font-size: 12px; } }

.hc-sec { padding: 24px 0; }
.hc-sec > h2, .hc-h2 { font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 16px; }
.hc-tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .hc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.hc-tile { display: flex; flex-direction: column; gap: 4px; min-height: 132px; padding: 18px; border-radius: var(--hc-r); background: var(--surface-2); transition: transform .2s ease, background-color .2s ease; }
.hc-tile:hover { background: color-mix(in srgb, var(--surface-2) 80%, var(--ink) 6%); }
.hc-tile:active { transform: scale(.98); }
.hc-tile .hc-ico { margin-bottom: auto; }
.hc-tile b { font-size: 16px; font-weight: 600; line-height: 1.35; margin-top: 16px; }
.hc-tile small { font-size: 12px; color: var(--ink-2); }
.hc-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--canvas); color: var(--ink); flex: none; }
.hc-ico.lg { width: 56px; height: 56px; border-radius: 18px; background: var(--surface-2); }
.hc-ico.lg svg.i { width: 28px; height: 28px; }

.hc-popular { display: grid; gap: 0 32px; }
@media (min-width: 768px) { .hc-popular { grid-template-columns: 1fr 1fr; } }
.hc-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hc-row > span:not(.hc-rank) { flex: 1; min-width: 0; }
.hc-row b { display: block; font-size: 16px; font-weight: 500; line-height: 1.4; }
.hc-row small { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.hc-row > svg.i { color: var(--ink-3); }
.hc-row:hover b { text-decoration: underline; text-underline-offset: 3px; }
.hc-rank { width: 24px; font-size: 14px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: center; }

/* ---------- 解決しない場合 ---------- */
.hc-ask { display: flex; align-items: center; gap: 16px; margin: 24px 0 8px; padding: 24px; border-radius: var(--hc-r); background: var(--surface-2); }
.hc-ask .hc-ico { width: 52px; height: 52px; border-radius: 16px; }
.hc-ask > div { flex: 1; min-width: 0; }
.hc-ask h2 { font-size: 16px; font-weight: 700; line-height: 1.35; }
.hc-ask p { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.hc-cta { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; font-size: 14px; font-weight: 600; white-space: nowrap; border: 0; background: none; cursor: pointer; }
.hc-cta svg.i { width: 16px; height: 16px; }
@media (max-width: 767px) { .hc-ask { flex-wrap: wrap; padding: 20px; } .hc-ask > div { flex-basis: calc(100% - 68px); } .hc-ask .hc-cta { margin-inline-start: 68px; } }

/* ---------- crumbs ---------- */
.hc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 20px 0 8px; font-size: 13px; color: var(--ink-2); }
.hc-crumbs a:hover { color: var(--ink); }
.hc-crumbs svg.i { width: 14px; height: 14px; color: var(--ink-3); }

/* ---------- category page ---------- */
.hc-cathead { display: flex; align-items: center; gap: 16px; padding: 16px 0 24px; }
.hc-cathead h1 { font-size: 22px; font-weight: 700; line-height: 1.3; }
.hc-cathead p { font-size: 14px; color: var(--ink-2); }
.hc-list .hc-row { min-height: 72px; }
.hc-list .hc-row small { font-size: 14px; line-height: 1.5; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--surface-2); font-size: 14px; }
.hc-chips a svg.i { width: 18px; height: 18px; }

/* ---------- search page / empty states ---------- */
.hc-results-head { padding: 24px 0 8px; }
.hc-results-head .hc-search { max-width: 640px; }
.hc-results-head p { margin-top: 16px; font-size: 14px; color: var(--ink-2); }
.hc-empty { padding: 48px 0 24px; text-align: center; }
.hc-empty .hc-ico { margin: 0 auto 16px; }
.hc-empty h1 { font-size: 20px; font-weight: 700; line-height: 1.35; }
.hc-empty p { margin: 8px auto 0; max-width: 420px; font-size: 14px; color: var(--ink-2); }
.hc-empty .hc-search { max-width: 520px; margin: 24px auto 0; text-align: start; }

/* ---------- article ---------- */
.hc-doclay { display: grid; gap: 40px; padding-bottom: 24px; }
@media (min-width: 900px) { .hc-doclay { grid-template-columns: 240px minmax(0, 1fr); gap: 56px; } }
.hc-side { font-size: 14px; }
@media (min-width: 900px) { .hc-side { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 96px); overflow: auto; } }
.hc-side-t { position: absolute; opacity: 0; pointer-events: none; }
.hc-side label { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 14px; font-weight: 600; cursor: default; }
.hc-side label .n { margin-inline-start: auto; font-weight: 400; color: var(--ink-2); }
.hc-side label svg.chev { display: none; width: 18px; height: 18px; color: var(--ink-2); transition: transform .2s ease; }
.hc-side ul a { display: block; padding: 8px 12px; margin: 0 -12px; border-radius: 12px; color: var(--ink-2); line-height: 1.45; }
.hc-side ul a:hover { color: var(--ink); }
.hc-side ul a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--surface-2); }
.hc-side .hc-side-all { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 14px; font-weight: 600; min-height: 44px; }
@media (max-width: 899px) {
  .hc-side { border: 1px solid var(--line); border-radius: var(--hc-r); padding: 0 16px; }
  .hc-side label { cursor: pointer; }
  .hc-side label svg.chev { display: block; }
  .hc-side label .n { margin-inline-start: auto; }
  .hc-side-t:not(:checked) ~ ul, .hc-side-t:not(:checked) ~ .hc-side-all { display: none; }
  .hc-side-t:checked + label svg.chev { transform: rotate(180deg); }
  .hc-side ul { padding-bottom: 8px; }
  .hc-side-t:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
}

.hc-doc { max-width: 680px; }
.hc-doc h1 { font-size: 28px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.hc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 12px 0 28px; font-size: 12px; color: var(--ink-2); }
.hc-body { font-size: 16px; line-height: 1.75; }
.hc-body > * + * { margin-top: 16px; }
.hc-body h2 { font-size: 20px; font-weight: 700; line-height: 1.35; margin-top: 36px; }
.hc-body ul { padding-inline-start: 1.2em; list-style: disc; }
.hc-body ul li + li { margin-top: 6px; }
.hc-body a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 3px; }
.hc-steps { counter-reset: step; display: grid; gap: 8px; }
.hc-steps li { counter-increment: step; position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); }
.hc-steps li::before { content: counter(step); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: var(--ink); color: var(--canvas); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hc-note { display: flex; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); font-size: 14px; line-height: 1.65; }
.hc-note svg.i { width: 20px; height: 20px; margin-top: 1px; color: var(--ink-2); }
@media (max-width: 767px) { .hc-doc h1 { font-size: 22px; } }

.hc-fb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: 680px; margin-top: 40px; padding: 16px 20px; border-radius: var(--hc-r); background: var(--surface-2); font-size: 14px; }
.hc-fb > span { margin-inline-end: auto; font-weight: 600; }
.hc-fb form { display: contents; }
.hc-fb button { min-height: 44px; padding: 0 8px; border: 0; background: none; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.hc-fb button svg.i { width: 18px; height: 18px; }
.hc-fb.done { color: var(--ink-2); }
.hc-fb.done > span { font-weight: 400; }
.hc-fb.done a { font-weight: 600; color: var(--ink); }

.hc-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 680px; margin-top: 16px; }
.hc-pn a { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: var(--hc-r); border: 1px solid var(--line); min-height: 76px; }
.hc-pn a:hover { background: var(--surface-2); }
.hc-pn small { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--ink-2); }
.hc-pn small svg.i { width: 14px; height: 14px; }
.hc-pn b { font-size: 14px; font-weight: 600; line-height: 1.4; }
.hc-pn .next { text-align: end; align-items: flex-end; grid-column: 2; }
.hc-related { max-width: 680px; margin-top: 40px; }
.hc-related .hc-row { min-height: 56px; }

/* ---------- footer ---------- */
.hc-foot { margin-top: 48px; border-top: 1px solid var(--line); background: var(--canvas); }
.hc-foot-cols { display: grid; gap: 28px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 32px 0 24px; }
@media (min-width: 768px) { .hc-foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hc-foot-cols h2 { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.hc-foot-cols li a { display: block; padding: 4px 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.hc-foot-cols a:hover { color: var(--ink); }
.hc-foot-bar { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 16px 0 calc(env(safe-area-inset-bottom, 0px) + 40px); border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.hc-foot-bar a:hover { color: var(--ink); }
.hc-foot-bar .c { margin-inline-end: auto; }

/* ---------- global section nav + mega menu ---------- */
.hc-secnav { border-bottom: 1px solid var(--line); background: var(--canvas); }
.hc-secnav ul { display: flex; gap: 4px; overflow-x: auto; margin: 0 -8px; padding: 0 8px; }
.hc-secnav a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 14px; color: var(--ink-2); white-space: nowrap; border-radius: 999px; }
.hc-secnav a:hover { color: var(--ink); }
.hc-secnav a[aria-current] { color: var(--ink); font-weight: 600; }
.hc-mega { position: static; }
.hc-mega summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; font-size: 14px; color: var(--ink); cursor: pointer; border-radius: 999px; }
.hc-mega summary::-webkit-details-marker { display: none; }
.hc-mega summary svg.i { width: 20px; height: 20px; }
.hc-mega[open] summary { background: var(--surface-2); }
.hc-mega-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--canvas); border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px rgba(0,0,0,.12); max-height: calc(100vh - 60px); overflow: auto; }
.hc-mega-grid { display: grid; gap: 24px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 24px 0 8px; }
@media (min-width: 900px) { .hc-mega-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hc-mega-grid h2 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.hc-mega-grid h2 a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; }
.hc-mega-grid li a { display: block; padding: 5px 0; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.hc-mega-grid a:hover { color: var(--ink); }
.hc-mega-foot { padding: 8px 0 20px; }
.hc-mega-foot a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; font-weight: 600; }
@media (max-width: 767px) { .hc-mega summary span { display: none; } .hc-mega summary { padding: 0 12px; } }

/* ---------- section cards (home, 404) ---------- */
.hc-seccards { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .hc-seccards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hc-seccards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.hc-seccard { display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "i b" "i s" "i n"; column-gap: 14px; row-gap: 2px; padding: 18px; border-radius: var(--hc-r); background: var(--surface-2); transition: transform .2s ease; }
.hc-seccard:active { transform: scale(.98); }
.hc-seccard .hc-ico { grid-area: i; }
.hc-seccard b { grid-area: b; font-size: 16px; font-weight: 600; line-height: 1.35; }
.hc-seccard small { grid-area: s; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.hc-seccard-n { grid-area: n; font-size: 12px; color: var(--ink-2); margin-top: 6px; }
@media (min-width: 960px) { .hc-seccard { grid-template-columns: 1fr; grid-template-areas: "i" "b" "s" "n"; min-height: 200px; } .hc-seccard b { margin-top: 16px; } .hc-seccard-n { margin-top: auto; padding-top: 10px; } }

/* ---------- section page ---------- */
.hc-topicblock { padding: 8px 0 24px; }
.hc-topicblock > h2 { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.hc-topicblock > h2 a { display: inline-flex; align-items: center; gap: 8px; }
.hc-topicblock > h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hc-topicblock > h2 small { margin-inline-start: auto; font-size: 12px; font-weight: 400; color: var(--ink-2); }

/* ---------- sitemap ---------- */
.hc-sitemap { columns: 1; column-gap: 40px; padding-bottom: 24px; }
@media (min-width: 768px) { .hc-sitemap { columns: 2; } }
@media (min-width: 1024px) { .hc-sitemap { columns: 3; } }
.hc-sitemap > section { break-inside: avoid; padding-bottom: 28px; }
.hc-sitemap h2 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.hc-sitemap h2 a { display: inline-flex; align-items: center; gap: 8px; }
.hc-sitemap li a { display: block; padding: 3px 0; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.hc-sitemap li a b { color: var(--ink); font-weight: 600; }
.hc-sitemap li ul { padding: 2px 0 8px 14px; border-inline-start: 1px solid var(--line); margin-inline-start: 2px; }
.hc-sitemap a:hover { color: var(--ink); }

/* ---------- announcements / press / incidents ---------- */
.hc-posts { display: grid; gap: 0; }
.hc-posts > li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.hc-posts time { display: block; font-size: 12px; color: var(--ink-2); }
.hc-posts h2 { font-size: 16px; font-weight: 600; line-height: 1.4; margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hc-posts p { font-size: 14px; line-height: 1.7; margin-top: 6px; white-space: pre-line; }
.hc-posts .hc-body { font-size: 14px; margin-top: 8px; }
.hc-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.hc-badge.warn { color: var(--ink); background: color-mix(in srgb, #ff9f0a 22%, var(--surface-2)); }
.hc-note-plain { font-size: 14px; color: var(--ink-2); }

/* ---------- status ---------- */
.hc-status { display: flex; align-items: center; gap: 16px; margin: 16px 0 20px; padding: 24px; border-radius: var(--hc-r); background: color-mix(in srgb, #30d158 14%, var(--surface-2)); }
.hc-status.warn { background: color-mix(in srgb, #ff9f0a 18%, var(--surface-2)); }
.hc-status .hc-ico { background: var(--canvas); }
.hc-status h1 { font-size: 22px; font-weight: 700; line-height: 1.3; }
.hc-status p { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.hc-comps > li { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line); font-size: 16px; }
.hc-comps b { font-size: 14px; font-weight: 600; }
.hc-comps b.ok::before, .hc-comps b.warn::before, .hc-comps b.bad::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 8px; vertical-align: 1px; }
.hc-comps b.ok::before { background: #30d158; }
.hc-comps b.warn::before { background: #ff9f0a; }
.hc-comps b.bad::before { background: #ff453a; }
.hc-comps + .hc-meta { margin-top: 12px; }
.hc-mt { margin-top: 24px; }
.hc-count { margin: -8px 0 8px; }

/* ---------- trust pages: transparency, ad library, forms ---------- */
.hc-periods { margin: 8px 0 4px; }
.hc-periods a[aria-current] { background: var(--ink); color: var(--canvas); }
.hc-kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 20px 0 8px; }
@media (min-width: 768px) { .hc-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hc-kpi { padding: 18px; border-radius: var(--hc-r); background: var(--surface-2); }
.hc-kpi b { display: block; font-size: 28px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.hc-kpi span { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.hc-table-wrap { overflow-x: auto; margin: 4px 0 8px; }
.hc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hc-table th { text-align: start; font-weight: 600; font-size: 12px; color: var(--ink-2); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.hc-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); line-height: 1.5; vertical-align: top; }
.hc-table .n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; padding-inline-end: 0; padding-inline-start: 12px; }
.hc-doc .hc-table-wrap { max-width: 680px; }
.hc-badge.ok { color: var(--ink); background: color-mix(in srgb, #30d158 22%, var(--surface-2)); }
.hc-adsearch { max-width: 520px; margin: 4px 0 12px; }
.hc-ads { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin: 12px 0 24px; }
@media (min-width: 768px) { .hc-ads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hc-ads { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hc-ad { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--hc-r); overflow: hidden; background: var(--canvas); }
.hc-ad-media { aspect-ratio: 16 / 10; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.hc-ad-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-ad-media span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.hc-ad-body { padding: 16px; font-size: 14px; }
.hc-ad-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hc-ad-top b { font-size: 14px; font-weight: 600; }
.hc-ad h2 { font-size: 16px; font-weight: 600; line-height: 1.4; margin-top: 8px; }
.hc-ad-body > p:not(.hc-ad-top) { margin-top: 4px; color: var(--ink-2); line-height: 1.55; }
.hc-ad dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 14px 0 0; font-size: 12px; }
.hc-ad dt { color: var(--ink-2); }
.hc-ad dd { margin: 0; }
.hc-form { display: grid; gap: 16px; max-width: 680px; margin: 12px 0 8px; padding: 24px; border-radius: var(--hc-r); background: var(--surface-2); }
.hc-field { display: grid; gap: 6px; font-size: 14px; }
.hc-field > span { font-weight: 600; }
.hc-field em { font-style: normal; color: var(--ink-2); }
.hc-field small { font-size: 12px; color: var(--ink-2); }
.hc .hc-field input, .hc .hc-field textarea { width: 100%; border: 1px solid var(--line); background: var(--canvas); color: var(--ink); font: inherit; font-size: 16px; padding: 12px 16px; outline: none; -webkit-appearance: none; appearance: none; box-shadow: none; }
.hc .hc-field input { height: 44px; border-radius: 999px !important; }
.hc .hc-field textarea { border-radius: 16px !important; resize: vertical; min-height: 96px; line-height: 1.6; }
.hc .hc-field input:focus, .hc .hc-field textarea:focus { border-color: var(--ink-2); }
.hc-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.hc-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.hc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hc-submit { justify-self: start; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.hc-submit:disabled { color: var(--ink-3); }
.hc-note.hc-ok { border-color: color-mix(in srgb, #30d158 45%, var(--line)); }
.hc-note.hc-err { border-color: color-mix(in srgb, #ff453a 45%, var(--line)); }

.hc-loading { padding: 64px 0; text-align: center; color: var(--ink-2); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .hc * { transition: none !important; } }