/* ============================================================================
   guides.css — guide-page polish (site review round 2: R04 / R07 / R08).

   Loaded by shop-guide / connect-ai / api-docs / tax-guide AFTER landing.css
   and BEFORE each page's own <style>. Scope, by class:

     .tv-doc-title   H1 that carries one <span data-lang-block> per language;
                     only the active language is shown (R08).
     .tv-flow        the reusable flow diagram: horizontal step row ≥ 900px,
                     vertical numbered cards below (R07). Text is HTML, so it
                     never scales down with a viewBox; body copy ≥ 14px.
     .tv-toc         table of contents as <details>: sticky side column on wide
                     desktops (.has-sidetoc, ≥ 1100px), open card in between,
                     collapsible on phones (the page script closes it < 900px).
     .tv-cap         channel × capability table; stacks into per-channel cards
                     on phones so no cell text is squeezed (R04).

   No palette of its own — tokens.css variables only.
   ============================================================================ */

/* ---- per-language H1 (R08) ------------------------------------------------ */
.tv-doc-title { overflow-wrap: anywhere; }
.tv-doc-title [data-lang-block] { display: none; }
.tv-doc-title [data-lang-block].active { display: inline; }

/* Anchors land below the sticky site header. */
.tv-guide h2[id], .tv-guide h3[id], .tv-guide [id^="ja-"], .tv-guide [id^="zh-"], .tv-guide [id^="en-"] { scroll-margin-top: 92px; }

/* ---- flow (R07) ------------------------------------------------------------ */
.tv-flow { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: tvflow; }
.tv-flow__step { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; background: var(--tv-paper); border: 1px solid var(--tv-line); border-radius: var(--tv-radius-sm); min-width: 0; }
.tv-flow__num { counter-increment: tvflow; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tv-cobalt-soft); color: var(--tv-cobalt-ink); font: 700 14px/1 var(--tv-font); }
.tv-flow__num::before { content: counter(tvflow); }
.tv-flow__title { display: block; font: 700 15px/1.4 var(--tv-font); color: var(--tv-ink-strong); }
.tv-flow__desc { display: block; margin-top: 2px; font: 400 14px/1.55 var(--tv-font); color: var(--tv-ink-secondary); overflow-wrap: anywhere; }
.tv-flow__caption { margin: 10px 0 0; font: 400 13px/1.6 var(--tv-font); color: var(--tv-muted); }
.tv-flow__legend { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--tv-radius-sm); background: var(--tv-cobalt-soft); color: var(--tv-cobalt-ink); font: 500 14px/1.65 var(--tv-font); }
.tv-flow__legend code { font-size: 13px; }
@media (min-width: 900px) {
  .tv-flow { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
  .tv-flow__step { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 8px 12px; text-align: center; justify-items: center; }
  .tv-flow__step:not(:last-child)::after { content: "→"; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); color: var(--tv-muted); font-size: 15px; line-height: 1; }
  .tv-flow.is-wide { gap: 24px; }
  .tv-flow.is-wide .tv-flow__step { padding: 14px 12px 12px; }
  .tv-flow.is-wide .tv-flow__step:not(:last-child)::after { right: -20px; }
  .tv-flow__num { width: 28px; height: 28px; font-size: 13px; }
  .tv-flow__title { font-size: 14.5px; }
  .tv-flow__desc { font-size: 13px; }
  .tv-flow.is-wide .tv-flow__desc { font-size: 13.5px; }
}

/* ---- table of contents ----------------------------------------------------- */
.tv-toc { margin: 20px 0 0; background: var(--tv-paper); border: 1px solid var(--tv-line); border-radius: var(--tv-radius-md); }
.tv-toc > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 10px 18px; font: 700 14px/1.4 var(--tv-font); color: var(--tv-ink-strong); border-radius: var(--tv-radius-md); }
.tv-toc > summary::-webkit-details-marker { display: none; }
.tv-toc > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 6px 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--tv-dur-fast) var(--tv-ease); }
.tv-toc[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.tv-toc > summary:focus-visible { outline: 3px solid var(--tv-cobalt); outline-offset: 2px; }
.tv-toc nav { display: grid; gap: 1px; padding: 0 10px 12px; }
.tv-toc nav a { display: block; padding: 6px 8px; border-radius: 8px; color: var(--tv-cobalt-ink); font: 500 14px/1.5 var(--tv-font); text-decoration: none; }
.tv-toc nav a:hover { background: var(--tv-canvas); }
.tv-toc nav a.is-sub { padding-left: 24px; font-weight: 400; color: var(--tv-ink-secondary); }
.tv-guide-body { min-width: 0; }
@media (min-width: 1100px) {
  .tv-guide.has-sidetoc { max-width: 1160px; }
  .tv-guide.has-sidetoc > [data-lang-block].active { display: grid; grid-template-columns: minmax(0, 1fr) 236px; column-gap: 40px; align-items: start; }
  .tv-guide.has-sidetoc > [data-lang-block] > .lead { grid-column: 1 / -1; }
  .tv-guide.has-sidetoc > [data-lang-block] > .tv-toc { grid-column: 2; grid-row: 2; position: sticky; top: 92px; margin-top: 0; max-height: calc(100vh - 112px); overflow: auto; }
  .tv-guide.has-sidetoc > [data-lang-block] > .tv-guide-body { grid-column: 1; grid-row: 2; }
}

/* ---- channel × capability table (R04) --------------------------------------- */
.tv-cap-wrap { margin: 12px 0 4px; }
.tv-cap { width: 100%; border-collapse: collapse; font: 400 13.5px/1.55 var(--tv-font); }
.tv-cap th, .tv-cap td { border: 1px solid var(--tv-line); padding: 8px 10px; text-align: left; vertical-align: top; }
.tv-cap th { background: var(--tv-paper-tint); font-weight: 700; color: var(--tv-ink-strong); white-space: nowrap; word-break: keep-all; }
.tv-cap td:first-child { font-weight: 700; white-space: nowrap; color: var(--tv-ink-strong); }
.tv-cap .ok { color: var(--tv-success-ink); font-weight: 700; }
.tv-cap .part { color: var(--tv-amber-ink); font-weight: 700; }
.tv-cap small { display: block; font-size: 12.5px; line-height: 1.5; color: var(--tv-ink-secondary); font-weight: 400; margin-top: 2px; }
.tv-cap-note { margin: 8px 0 0; font: 400 13px/1.6 var(--tv-font); color: var(--tv-muted); }
@media (max-width: 899px) {
  .tv-cap thead { display: none; }
  .tv-cap, .tv-cap tbody, .tv-cap tr, .tv-cap td { display: block; width: 100%; }
  .tv-cap tr { border: 1px solid var(--tv-line); border-radius: var(--tv-radius-sm); padding: 4px 0 6px; margin-top: 10px; background: var(--tv-paper); }
  .tv-cap td { border: 0; padding: 6px 12px; font-size: 14px; }
  .tv-cap td:first-child { white-space: normal; font-size: 15px; padding-bottom: 2px; }
  .tv-cap td:not(:first-child)::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 600; color: var(--tv-muted); }
  .tv-cap small { font-size: 13.5px; }
}