/* ============================================================
   Warm-semantic: SemanticNode role classes on warm-owner tokens.
   Loaded after /css/warm-owner.css by render_page(chrome="warm")
   (app/tui/warm_chrome.py). Token references only; no literal colours.
   ============================================================ */

.warm-doc .brand-agi { color: var(--gr); }

/* ---- page frame ---- */
.warm-page { padding-block: clamp(36px, 6vw, 72px) clamp(56px, 8vw, 104px); }
.warm-page > .solace-panel[data-kind="page"] { max-width: 76ch; margin-inline: auto; }
.warm-page .solace-grid ~ *,
.warm-page .solace-panel[data-kind="page"] > * + * { margin-top: 18px; }
.warm-page .solace-panel > .solace-button + * { margin-top: 16px; }
.warm-page .solace-panel[data-kind="hero"] > * + .solace-text { margin-top: 12px; }

/* ---- type ---- */
.warm-page h1.solace-heading {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em; line-height: 1.04;
  font-size: clamp(34px, 5vw, 56px); color: var(--tx-hi);
}
.warm-page h2.solace-heading {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; line-height: 1.12;
  font-size: clamp(24px, 3.2vw, 34px); color: var(--tx-hi); margin-top: 34px;
}
.warm-page h3.solace-heading {
  font-size: clamp(18px, 2vw, 21px); color: var(--tx-hi); letter-spacing: -0.01em;
}
.warm-page .solace-text { font-size: 17px; line-height: 1.62; color: var(--tx-mid); }
.warm-page [data-style="subtitle"] { font-size: clamp(17px, 2vw, 20px); line-height: 1.5; }
.warm-page [data-style="muted"] { color: var(--tx-dim); font-size: 15px; }
.warm-page h2.solace-heading[data-style="accent"] {
  font-family: var(--font); font-weight: 500; font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5; color: var(--tx-mid); letter-spacing: 0; margin-top: 16px;
}
.warm-page .solace-heading[data-style="brand"] { color: var(--tx-hi); }
.warm-page .solace-link { color: var(--gr-ink); text-decoration: underline; text-underline-offset: 3px; }
.warm-page .solace-text[data-style="brand"], .warm-page .solace-link[data-style="brand"] { color: var(--gr-ink); font-weight: 600; }
.warm-page .solace-separator { border: 0; border-top: 1px solid var(--hairline); margin-block: 40px 8px; }

.warm-page .solace-list { list-style: none; padding: 0; margin-top: 14px; }
.warm-page .solace-list-item {
  padding: 8px 0 8px 24px; position: relative; border-top: 1px solid var(--hairline);
  color: var(--tx-mid); font-size: 15.5px; line-height: 1.5;
}
.warm-page .solace-list-item:first-child { border-top: 0; }
.warm-page .solace-list-item::before { content: "✓"; position: absolute; left: 0; color: var(--gr-ink); font-weight: 700; }

/* ---- buttons (warm-owner .btn look) ---- */
.warm-page .solace-button {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px;
  padding: 12px 20px; border-radius: 11px; border: 1.5px solid var(--hairline-2);
  color: var(--tx-hi); background: var(--surface); text-decoration: none; margin-top: 18px;
  transition: all .22s var(--ease); max-width: 100%; white-space: normal;
}
.warm-page .solace-button + .solace-button { margin-left: 10px; }
.warm-page .solace-button:hover { border-color: var(--gr); color: var(--gr-ink); }
.warm-page .solace-button[data-style="primary"] { background: var(--gr); border-color: var(--gr); color: var(--surface); box-shadow: 0 8px 24px var(--gr-glow); }
.warm-page .solace-button[data-style="primary"]:hover { background: var(--gr-ink); color: var(--surface); }

/* ---- badges / tags ---- */
.warm-page .solace-badge {
  display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11.5px;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gr-ink);
  background: var(--gr-dim); border-radius: 999px; padding: 3px 10px; margin: 4px 6px 0 0;
}

/* ---- panels ---- */
.warm-page .solace-panel[data-kind="hero"]:first-child { padding-bottom: 8px; }
.warm-page .solace-panel[data-kind="hero"]:not(:first-child) {
  margin-top: 40px; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--hairline);
}
.warm-page .solace-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 22px;
}
.warm-page .solace-panel[data-kind="page"] > .solace-grid { width: min(1080px, calc(100vw - 2 * var(--gutter))); position: relative; left: 50%; transform: translateX(-50%); }
.warm-page .solace-grid > .solace-panel {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column;
}
.warm-page .solace-grid > .solace-panel > .solace-button { margin-top: auto; align-self: flex-start; }
.warm-page .solace-grid > .solace-panel > .solace-list { margin-bottom: 18px; }
.warm-page .solace-grid > .solace-panel .solace-heading[data-level="2"] { margin-top: 0; font-size: 22px; }
.warm-page .solace-grid > .solace-panel [data-style="subtitle"] { font-size: 16px; margin-top: 10px; }
.warm-page .solace-text[data-style="price"] {
  font-family: var(--serif); font-size: 40px; font-weight: 600; color: var(--tx-hi); line-height: 1.1; margin-top: 10px;
}

/* The flagship level: an ink inset panel with the light text tokens. */
.warm-page .solace-panel[data-kind="showcase"] {
  background: var(--ink-panel); border-color: var(--ink-panel);
  /* No cycles: each override names a token this rule does not redefine. */
  --tx-hi: var(--tx-inv); --tx-mid: var(--paper-2); --tx-dim: var(--hairline-2);
  --gr-ink: var(--gr-hi); --hairline: var(--tx-sub);
}

/* ---- FAQ ---- */
.warm-page .solace-panel[data-kind="faq"] { border-top: 1px solid var(--hairline); padding-block: 6px; }
.warm-page .solace-panel[data-kind="faq"] + .solace-panel[data-kind="faq"] { margin-top: 0; }
.warm-page .solace-panel[data-kind="faq"] h2.solace-heading { font-size: clamp(19px, 2.2vw, 23px); margin-top: 0; }
.warm-page .faq-q {
  all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer;
  padding: 14px 40px 14px 0; position: relative;
}
.warm-page .faq-q::after { content: "+"; position: absolute; right: 4px; top: 12px; font-family: var(--font); font-weight: 500; color: var(--gr-ink); }
.warm-page .solace-panel.open .faq-q::after { content: "−"; }
.warm-page .faq-q:focus-visible { outline: 3px solid var(--gr); outline-offset: 2px; border-radius: 4px; }
.warm-page .solace-panel.faq-ready:not(.open) > :not(.solace-heading) { display: none; }
.warm-page .solace-panel[data-kind="faq"] > .solace-text { margin: 0 0 16px; }

@media (max-width: 560px) {
  .warm-page .solace-panel[data-kind="page"] > .solace-grid { width: auto; left: auto; transform: none; }
  .warm-page .solace-text[data-style="price"] { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .warm-page .solace-button { transition: none; }
}