/* Shared reading-page structure: Docs and Contact. Canonical tokens stay in packages/ui. */
:root[data-theme="dark"] { --ink-mute: var(--ink-dim); }
.editorial { padding-block: var(--space-8) var(--space-12); }
.editorial-header { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-10); align-items: end; padding-block: var(--space-6) var(--space-10); }
.editorial h1 { max-width: 17ch; margin: var(--space-4) 0 var(--space-5); font-size: clamp(var(--fs-xl), 5vw, var(--fs-3xl)); line-height: var(--leading-tight); letter-spacing: -0.03em; text-wrap: balance; }
.editorial .lede { max-width: 49ch; color: rgb(var(--ink-dim)); font-size: var(--fs-md); line-height: var(--leading-relaxed); }
.editorial-note { border-left: 1px solid rgb(var(--hairline)); padding-left: var(--space-6); }
.editorial-note p { margin: var(--space-3) 0; color: rgb(var(--ink-dim)); font-size: var(--fs-sm); line-height: var(--leading-relaxed); }
.editorial a.text-link { display: inline-flex; gap: var(--space-3); align-items: center; min-height: var(--touch-min); color: rgb(var(--ink)); text-decoration: underline; text-underline-offset: var(--space-1); text-decoration-color: rgb(var(--hairline)); }
.editorial a.text-link:hover { text-decoration-color: rgb(var(--accent)); }
.editorial a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.section-kicker { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-block: var(--space-5); border-top: 1px solid rgb(var(--ink)); }
.section-kicker h2, .section-kicker span, .editorial .meta { font: 500 var(--fs-xs)/var(--leading-body) var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; text-transform: uppercase; }
.section-kicker h2 { margin: 0; }
.section-kicker span, .editorial .meta { color: rgb(var(--ink-dim)); }
.guide-list { list-style: none; margin: 0; padding: 0; }
.guide-list li { border-top: 1px solid rgb(var(--hairline)); }
.guide-list a { display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr) minmax(0, 1.15fr) auto; gap: var(--space-6); align-items: start; padding: var(--space-6) var(--space-3); color: rgb(var(--ink)); text-decoration: none; transition: background var(--dur-fast) var(--ease); }
.guide-list a:hover { background: rgb(var(--surface)); }
.guide-list h3 { font-size: var(--fs-lg); font-weight: 600; margin: 0; }
.guide-list p { color: rgb(var(--ink-dim)); margin: 0; font-size: var(--fs-base); line-height: var(--leading-relaxed); }
.guide-list .index { padding-top: var(--space-1); }
.guide-list .arrow { font-size: var(--fs-lg); }
.editorial-next { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-6); border-top: 1px solid rgb(var(--hairline)); padding-top: var(--space-8); margin-top: var(--space-6); }
.editorial-next h2 { font-size: var(--fs-lg); margin: 0 0 var(--space-3); }
.editorial-next p { color: rgb(var(--ink-dim)); margin: 0; max-width: 60ch; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-10); }
.brief-list { margin: 0; }
.brief-list > div { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); gap: var(--space-6); border-top: 1px solid rgb(var(--hairline)); padding-block: var(--space-5); }
.brief-list dt { font-size: var(--fs-base); font-weight: 600; }
.brief-list dd { margin: 0; color: rgb(var(--ink-dim)); font-size: var(--fs-base); line-height: var(--leading-relaxed); }
.contact-action { align-self: start; padding: var(--space-6); background: rgb(var(--surface)); border: 1px solid rgb(var(--hairline)); border-radius: var(--radius-sm); }
.contact-action h2 { margin: var(--space-3) 0; font-size: var(--fs-xl); }
.contact-action p { margin-block: var(--space-4); color: rgb(var(--ink-dim)); line-height: var(--leading-relaxed); }
.contact-action .btn { margin-top: var(--space-3); }
.contact-action a { overflow-wrap: anywhere; }
.security-note { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid rgb(var(--hairline)); display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-8); }
.security-note h2 { font-size: var(--fs-md); margin: 0; }
.security-note p { color: rgb(var(--ink-dim)); font-size: var(--fs-sm); line-height: var(--leading-relaxed); margin: 0; }
@media (max-width: 760px) {
  .editorial-header, .contact-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .editorial-header { padding-bottom: var(--space-8); }
  .editorial-note { padding-left: 0; border-left: 0; }
  .editorial h1 { font-size: clamp(var(--fs-xl), 9vw, var(--fs-2xl)); }
  .guide-list a { grid-template-columns: var(--space-6) minmax(0, 1fr) auto; gap: var(--space-3); padding-inline: 0; }
  .guide-list p { grid-column: 2; }
  .guide-list .arrow { grid-column: 3; grid-row: 1; }
  .editorial-next, .security-note { grid-template-columns: 1fr; gap: var(--space-4); }
  .editorial-next .btn { justify-self: start; }
  .brief-list > div { grid-template-columns: 1fr; gap: var(--space-2); }
}