/* Smart Pointer website: components for the inner pages (support, privacy, terms, it, for-teams,
   feedback, talk, 404, app). Design v5 ("product document"), loaded after site.css and built only
   from its tokens: paper, ink, greys and rules. No accent colours, no gradients, no shadows, no icons.
   The red --dot stays reserved for the product's pointer dot and is not used here.
   CSP: plain CSS only, no inline styles.
   Contents: page shell, page hero, doc layout + table of contents, headings, callouts, link cards,
   steps and numbered lists, symptom -> fix rows, platforms, FAQ, summary panel and item grid,
   data-flow diagram, facts, permission panels, tables, full text, CTA panel, bilingual section,
   motion, print. */

/* ---------- Page shell ---------- */
main.page { padding: 0 0 var(--sec-y); }
.page-body { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* Narrow pages (no table of contents): on wide screens the content sits in the 8/12 body column,
   aligned with the hero title and with the content column of the doc pages. */
.page-body-narrow > * { min-width: 0; }
@media (min-width: 62rem) {
  .page-body-narrow { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 1.5rem; }
  .page-body-narrow > * { grid-column: 2; }
}

/* ---------- Page hero: paper, mono kicker, large title, lead, bottom rule ---------- */
.page-hero { background: var(--paper); border-bottom: 1px solid var(--rule); }
.page-hero-inner { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.page-hero-text { display: grid; grid-template-columns: minmax(0, 1fr); }
.page-kicker {
  margin: 0 0 1.25rem; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.page-hero h1 { margin: 0; max-width: 22em; }
.page-lead { margin: 1.25rem 0 0; max-width: 40em; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.9; }
:lang(en) .page-lead { line-height: 1.7; }
.page-lead strong { color: var(--ink-2); }
.page-hero .meta { margin: 1.25rem 0 0; max-width: 46em; color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.8; }
@media (min-width: 62rem) {
  .page-hero-text { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 1.5rem; }
  .page-hero-text > * { grid-column: 2; }
  .page-hero-text > .page-kicker { grid-column: 1; grid-row: 1 / span 4; margin: 0.9rem 0 0; }
}

/* ---------- Doc layout: table of contents on the left, content on the right ---------- */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 1.5rem; }
.doc-main { min-width: 0; }
@media (min-width: 62rem) {
  .doc { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .toc { position: sticky; top: 1.5rem; align-self: start; max-height: calc(100vh - 3rem); overflow-y: auto; max-width: 20rem; }
}

.toc { font-size: 0.875rem; line-height: 1.6; border-top: 2px solid var(--ink); padding-top: 0.75rem; }
.toc-title { margin: 0 0 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-soft); }
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc li { margin: 0; border-bottom: 1px solid var(--gray-1); }
.toc a { display: block; padding: 0.45rem 0; color: var(--ink); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc .toc-sub a { padding-left: 1rem; color: var(--ink-soft); font-size: 0.8125rem; }
.toc .toc-mark a { font-weight: 700; }
@media (max-width: 61.99rem) {
  .toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); column-gap: 1.5rem; }
}

/* ---------- Headings inside the content ---------- */
.doc-main h2, .page-body-narrow > h2 {
  margin: clamp(3rem, 6vw, 4rem) 0 1.25rem; padding-top: 1rem; border-top: 1px solid var(--ink);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
}
.doc-main > h2:first-child, .doc-main > :first-child h2:first-child, .page-body-narrow > h2:first-child { margin-top: 0; }
.doc-main h3, .page-body-narrow h3 { margin: 2.25rem 0 0.75rem; font-size: 1.0625rem; }
.doc-main h2 + h3 { margin-top: 1.5rem; }
.doc-main li::marker, .page-body li::marker { color: var(--ink-soft); }
.doc-main h2[id], .doc-main h3[id], .doc-main dt[id], .page-body h2[id] { scroll-margin-top: 1.5rem; }

/* ---------- Callouts: white box, ink rule on the left ---------- */
.callout { background: var(--surface); border-left: 2px solid var(--ink); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.callout p { margin: 0 0 0.5rem; }
.callout > div > :last-child, .callout > p:last-child { margin-bottom: 0; }
.callout-tip { border-left-color: var(--gray-2); }
.callout-caution { border-left-width: 5px; }
.doc-main > .callout:first-child, .page-body-narrow > .callout:first-child { margin-top: 0; }

/* ---------- Link cards: 1px bordered white rectangles ---------- */
.link-cards {
  list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.link-cards li { margin: 0; }
.link-cards a {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; height: 100%;
  padding: 1rem 1.125rem; background: var(--surface); border: 1px solid var(--rule);
  color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.5; transition: border-color 150ms ease;
}
.link-cards a::after { content: "\2192"; font-family: var(--font-mono); font-weight: 400; color: var(--ink-soft); }
.link-cards a:hover { border-color: var(--ink); color: var(--ink); }
.link-cards a:hover::after { color: var(--ink); }
.link-cards small { display: block; margin-top: 0.25rem; font-weight: 400; font-size: 0.8125rem; color: var(--ink-soft); }

/* ---------- Numbered steps (support: getting started) ---------- */
.steps { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 2rem 1.5rem; counter-reset: pstep; }
@media (min-width: 36rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.step { margin: 0; counter-increment: pstep; border-top: 2px solid var(--ink); padding-top: 1rem; }
.step-body { display: flex; flex-direction: column; gap: 0.5rem; }
.step-body::before { content: counter(pstep, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-soft); }
.step-title { display: block; font-weight: 700; font-size: 1.0625rem; line-height: 1.5; }
.step-text { display: block; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.8; }
.step-keys { display: grid; gap: 0.5rem; margin: 0.25rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--gray-1); font-size: 0.8125rem; line-height: 1.9; color: var(--ink-soft); }
.step-keys > span { display: block; }
.code-pill {
  font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.04em; color: var(--ink);
  background: var(--surface); border: 1px solid var(--ink); border-radius: 3px; padding: 0.05em 0.45em;
}

/* Simple numbered list: ruled rows, mono numbers */
.numlist { list-style: none; padding: 0; margin: 0 0 1.5rem; counter-reset: nl; border-top: 2px solid var(--ink); }
.numlist > li {
  margin: 0; counter-increment: nl; position: relative;
  padding: 0.85rem 0 0.85rem 2.5rem; border-bottom: 1px solid var(--rule-2); line-height: 1.8;
}
.numlist > li::before { content: counter(nl, decimal-leading-zero); position: absolute; left: 0; top: 1.05rem; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.5; color: var(--ink-soft); }

/* ---------- Symptom -> fix: two-column ruled rows under an ink rule ---------- */
.fixes { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; border-top: 2px solid var(--ink); }
.fix { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule-2); }
.fix-symptom { color: var(--ink-soft); font-weight: 700; font-size: 0.9375rem; line-height: 1.7; }
.fix-cure { font-size: 0.9375rem; line-height: 1.75; }
.fix-cure ul { margin: 0; padding-left: 1.1rem; list-style: disc; }
.fix-cure li { margin: 0.15rem 0; }
.fix-more { display: inline-block; margin-top: 0.5rem; font-size: 0.8125rem; }
.fix-more::after { content: " \2192"; font-family: var(--font-mono); }
@media (min-width: 40rem) {
  .fix { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 1.5rem; }
}

/* ---------- Platforms (planned / confirmed setups): spec rows ---------- */
.platforms { list-style: none; padding: 0; margin: 1rem 0 1.5rem; border-top: 2px solid var(--ink); font-size: 0.9375rem; }
.platforms li { margin: 0; padding: 0.75rem 0; border-bottom: 1px solid var(--rule-2); }
.platforms li > span { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem 1.5rem; }
.platforms strong { line-height: 1.6; }
.platforms strong + span { color: var(--ink-2); font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.9; }
:lang(ja) .platforms strong + span { font-family: var(--font-body); font-size: 0.875rem; }
@media (min-width: 40rem) { .platforms li > span { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.badge-beta {
  display: inline-block; margin-left: 0.5rem; padding: 0 0.4rem; vertical-align: 0.1em;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; line-height: 1.6; letter-spacing: 0.04em;
  color: var(--ink); border: 1px solid var(--ink); border-radius: 2px;
}

/* ---------- FAQ ---------- */
.faq-nav {
  list-style: none; padding: 0.75rem 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem;
  border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); font-size: 0.875rem;
}
.faq-nav li { margin: 0; }
.faq-nav a { color: var(--ink); }
.faq-group { scroll-margin-top: 1.5rem; }
.doc-main h3.faq-group { margin: 2.75rem 0 0.75rem; font-size: 1.125rem; }
.faq { margin: 0 0 1.5rem; border-top: 2px solid var(--ink); }
.faq dt { margin: 0; padding: 1.1rem 0 0.35rem; font-weight: 700; line-height: 1.7; }
.faq dd { margin: 0; padding: 0 0 1.1rem; border-bottom: 1px solid var(--rule-2); color: var(--ink-2); font-size: 0.9375rem; line-height: 1.85; }
.faq dd > :last-child { margin-bottom: 0; }
.faq dd ul { margin: 0.25rem 0 0; }

/* ---------- Summary panel ("at a glance") and the numbered item grid ---------- */
.summary-panel { background: var(--surface); border: 1px solid var(--rule); padding: clamp(1.25rem, 3.5vw, 2.25rem); margin: 0 0 1rem; }
.doc-main .summary-panel > h2 { margin: 0 0 0.5rem; padding-top: 0; border-top: 0; }
.summary-note { margin: 0 0 1.75rem; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.8; }

.cards {
  list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: 1.75rem 1.5rem; counter-reset: ic;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
}
.cards-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.icard { margin: 0; display: flex; flex-direction: column; gap: 0.4rem; border-top: 2px solid var(--ink); padding-top: 0.9rem; counter-increment: ic; }
.icard::before { content: counter(ic, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); }
.icard-title { display: block; font-weight: 700; font-size: 1rem; line-height: 1.55; }
.icard-text { display: block; color: var(--ink-2); font-size: 0.875rem; line-height: 1.8; }
.icard-text strong { color: var(--ink); }
.icard-text ul { margin: 0.25rem 0 0; padding-left: 1.1rem; list-style: disc; }
.icard-text li { margin: 0.1rem 0; }
.icard-more { margin-top: 0.25rem; font-size: 0.8125rem; }
.icard-more a::after { content: " \2192"; font-family: var(--font-mono); }
.icard-caution { border-top-width: 5px; padding-top: calc(0.9rem - 3px); }
.summary-panel .cards { margin-bottom: 0; }

/* ---------- Diagram figure: data-flow lanes in ink and greys ---------- */
.diagram { margin: 0 0 2rem; padding: clamp(1rem, 3vw, 1.75rem); background: var(--surface); border: 1px solid var(--gray-2); }
.summary-panel .diagram { padding: 0 0 0.25rem; border: 0; }
.diagram figcaption {
  margin: 1.25rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--gray-1);
  color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.8;
}
.diagram figcaption strong { color: var(--ink); }

/* Lanes: node - edge - node - edge - node; they stack vertically in narrow containers */
.dflow { container-type: inline-size; display: grid; gap: 1.5rem; }
.lane { display: grid; gap: 0.5rem; }
.lane-title { margin: 0; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-soft); }
:lang(ja) .lane-title { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0; }
.lane-row { display: grid; align-items: stretch; grid-template-columns: minmax(0, 1fr) 7rem minmax(0, 1fr) 7rem minmax(0, 1fr); }
.zone {
  grid-column: 1 / 4; display: grid; grid-template-columns: subgrid; align-items: stretch;
  position: relative; padding: 1.75rem 0.5rem 0.5rem; margin: -0.1rem 0;
  border: 1px dashed var(--ink-soft); background: var(--paper);
}
.zone-label { position: absolute; left: 0.6rem; top: 0.35rem; margin: 0; font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); line-height: 1.5; }
.node {
  background: var(--surface); border: 1px solid var(--ink); border-radius: 2px;
  padding: 0.7rem 0.75rem 0.75rem; display: grid; align-content: start; gap: 0.2rem; min-width: 0;
}
.node strong { font-size: 0.875rem; line-height: 1.5; }
.node span { color: var(--ink-soft); font-size: 0.75rem; line-height: 1.65; }
.node code { font-size: 0.75rem; background: none; border: 0; padding: 0; }
.node-us { border-width: 2px; }
.node-muted { background: var(--gray-1); border-style: dashed; border-color: var(--ink-mute); }
.node-muted strong { color: var(--ink-2); }

.edge {
  position: relative; display: grid; align-content: center; justify-items: center; gap: 0.35rem;
  padding: 0 0.4rem; text-align: center; color: var(--ink); font-size: 0.6875rem; line-height: 1.5;
}
.edge-label { color: var(--ink-soft); }
.edge-label strong { color: var(--ink); font-weight: 700; }
.edge-line { position: relative; width: 100%; height: 1px; background: currentColor; }
.edge-line::after {
  content: ""; position: absolute; right: -1px; top: -4px;
  border-style: solid; border-color: transparent transparent transparent currentColor; border-width: 4.5px 0 4.5px 7px;
}
.edge-both .edge-line::before {
  content: ""; position: absolute; left: -1px; top: -4px;
  border-style: solid; border-color: transparent currentColor transparent transparent; border-width: 4.5px 7px 4.5px 0;
}
.edge-violet { color: var(--ink-2); }
.edge-blocked { color: var(--ink-mute); }
.edge-blocked .edge-line { height: 0; background: none; border-top: 1px dashed currentColor; }
.edge-blocked .edge-line::after { display: none; }
.edge-x {
  display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem;
  background: var(--surface); border: 1px solid var(--ink-soft); color: var(--ink-soft);
}
.edge-x::before { content: "\00d7"; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1; }

@container (max-width: 40rem) {
  .lane-row { grid-template-columns: minmax(0, 1fr); }
  .zone { grid-column: 1; grid-template-columns: minmax(0, 1fr); padding: 1.9rem 0.6rem 0.6rem; }
  .edge { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; padding: 0.4rem 0 0.4rem 1.4rem; gap: 0.75rem; }
  .edge-line { width: 1px; height: 2.25rem; order: -1; }
  .edge-line::after { right: auto; left: -4px; top: auto; bottom: -1px; border-width: 7px 4.5px 0 4.5px; border-color: currentColor transparent transparent transparent; }
  .edge-both .edge-line::before { left: -4px; top: -1px; border-width: 0 4.5px 7px 4.5px; border-color: transparent transparent currentColor transparent; }
  .edge-blocked .edge-line { width: 0; height: 2.25rem; border-top: 0; border-left: 1px dashed currentColor; }
  .edge-x { position: absolute; left: calc(1.4rem - 0.625rem); top: 50%; translate: 0 -50%; }
  .edge-blocked .edge-label { padding-left: 0.5rem; }
}

/* Fact rows under a diagram */
.facts {
  list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; column-gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); font-size: 0.875rem; line-height: 1.7;
}
.facts li { margin: 0; padding: 0.6rem 0; border-top: 1px solid var(--rule-2); font-weight: 700; }

/* ---------- Permission panels (IT page) ---------- */
.perm { display: grid; gap: 1rem 1.5rem; margin: 0 0 1.75rem; }
@media (min-width: 44rem) { .perm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.perm-card { background: var(--surface); border: 1px solid var(--rule); padding: 1.25rem 1.5rem 1rem; }
.perm-head { margin: 0 0 0.75rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--ink); font-weight: 700; }
.perm-card p { font-size: 0.875rem; color: var(--ink-2); line-height: 1.8; margin: 0.5rem 0 0.5rem; }
.perm-card .perm-head { font-size: 1rem; color: var(--ink); margin: 0 0 0.75rem; }
.perm-wide { grid-column: 1 / -1; }

/* Chips: short yes / no lists, a square marker instead of a pill */
.chips-label { margin: 0.9rem 0 0.35rem; font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.04em; }
.perm-card .chips-label { font-size: 0.75rem; color: var(--ink-soft); margin: 0.9rem 0 0.35rem; }
.chips { list-style: none; padding: 0; margin: 0 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; font-size: 0.875rem; line-height: 1.6; }
.chips li { margin: 0; display: inline-flex; align-items: baseline; gap: 0.5rem; }
.chips li::before { content: ""; flex: none; width: 0.4375rem; height: 0.4375rem; background: var(--ink); translate: 0 -0.1em; }
.chips-no li { color: var(--ink-soft); }
.chips-no li::before { background: transparent; border: 1px solid var(--ink-mute); }
.chips code { background: transparent; border: 0; padding: 0; font-size: 0.8125rem; color: inherit; }

/* ---------- Tables ---------- */
.table-wrap table code { white-space: nowrap; }
.table-wrap:focus-visible { outline-offset: 2px; }
.table-policy td:first-child { min-width: 13rem; }
@media (max-width: 40rem) {
  .table-stack table, .table-stack thead, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack table { border-top: 2px solid var(--ink); }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-stack tr { border-bottom: 1px solid var(--rule-2); padding: 0.6rem 0; }
  .table-stack td { border: 0; padding: 0.3rem 0; }
  .table-stack td::before {
    content: attr(data-label); display: block; margin-bottom: 0.1rem;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft);
  }
  .table-stack td:first-child { min-width: 0; font-weight: 700; }
  .table-stack table code { white-space: normal; }
}

/* ---------- Full text (legal) ---------- */
.fulltext-head {
  margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding-top: 0.75rem; border-top: 2px solid var(--ink);
  font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--ink-soft);
}
:lang(ja) .fulltext-head { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.04em; }
.fulltext > p:first-child { margin-top: 1.5rem; }
.fulltext > h2:first-child { margin-top: 1.5rem; }

/* ---------- CTA panel (feedback, talk) ---------- */
.cta-panel { background: var(--surface); border: 1px solid var(--rule); padding: clamp(1.25rem, 3.5vw, 2.25rem); margin: 0 0 2rem; }
.page-body-narrow .cta-panel h2, .cta-panel h2 { margin: 0 0 0.5rem; padding-top: 0; border-top: 0; font-size: 1.25rem; }
.cta-panel p { margin: 0 0 1rem; color: var(--ink-2); }
.cta-panel .cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1.25rem 0 0; }
@media (max-width: 40rem) { .cta-panel .button { width: 100%; } }

/* For teams: interest form placeholder */
.teams-form-pending { border-left: 2px solid var(--gray-2); padding-left: 1rem; color: var(--ink-2); }

/* ---------- Bilingual section (404, /app) ---------- */
.lang-section { margin-top: clamp(3rem, 6vw, 4rem); padding-top: 1rem; border-top: 2px solid var(--ink); }
.page-body-narrow .lang-section > h2, .lang-section > h2 { margin: 0 0 1rem; padding-top: 0; border-top: 0; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Print (the IT page is a printable one-pager) ---------- */
@media print {
  .toc, .faq-nav, .cta-panel .button { display: none !important; }
  .page-hero { border-bottom: 1px solid var(--ink); }
  .page-hero-inner { padding: 0 0 1rem; }
  .page-hero-text { display: block; }
  .page-hero h1, .page-lead, .page-hero .meta, .page-kicker { color: var(--ink); }
  .doc, .page-body-narrow { display: block; }
  .summary-panel, .diagram, .node, .step, .perm-card, .icard, .fix { break-inside: avoid; }
  .lane-row { break-inside: avoid; }
}