/* How it works: the five steps of a publish, each read twice: what you see,
   and what happens underneath (in the mono voice the site uses for that layer).
   Shared design system in base.css; the reading column and callouts in guide.css. */
.how.doc{max-width:900px}
.chain{list-style:none;counter-reset:step;margin:34px 0 10px;border-top:2px solid var(--ink)}
.chain li{counter-increment:step;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:12px 36px;padding:26px 0 24px;border-bottom:1px solid var(--edge-2);position:relative}
.chain-see h2{font-family:var(--display);font-weight:700;font-size:1.45rem;letter-spacing:-.015em;line-height:1.15;margin:6px 0 8px}
.chain-see h2::before{content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;
  background:var(--clay-deep);color:#fff;font-size:.95rem;margin-right:12px;vertical-align:3px}
.chain p{margin:0}
.chain-under{border-left:2px dashed var(--clay);padding-left:20px}
.chain-under p{font-size:15px;line-height:1.6}
.layer{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--clay-deep)}
.chain-under .layer{color:var(--ink-soft)}
.ui{display:inline-block;font-family:var(--mono);font-size:12.5px;color:var(--ink);background:var(--card);border:1px solid var(--edge);border-radius:6px;padding:0 6px;white-space:nowrap}

.words{margin:14px 0 0;display:grid;grid-template-columns:200px minmax(0,1fr);border-top:1px solid var(--edge-2)}
.words dt{font-family:var(--display);font-weight:660;font-size:1.05rem;padding:16px 16px 16px 0;border-bottom:1px solid var(--edge-2)}
.words dd{font-size:16px;color:var(--ink-soft);line-height:1.6;padding:16px 0;border-bottom:1px solid var(--edge-2)}

.wrw-wrap{overflow-x:auto;margin:16px 0 0;-webkit-overflow-scrolling:touch}
table.wrw{width:100%;border-collapse:collapse;min-width:620px;font-size:15px}
.wrw th,.wrw td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--edge-2);color:var(--ink-soft);line-height:1.45}
.wrw thead th{font-family:var(--display);font-weight:700;color:var(--ink);border-bottom:2px solid var(--ink)}
.wrw tbody th{font-weight:600;color:var(--ink)}
.wrw td.wk{color:var(--clay-deep);font-weight:600}
.table-note{font-size:15px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(max-width:760px){
  .chain li{grid-template-columns:1fr}
  .chain-under{border-left:none;border-top:2px dashed var(--clay);padding:14px 0 0}
  .words{grid-template-columns:1fr}
  .words dt{border-bottom:none;padding-bottom:2px}
  .words dd{padding-top:0}
}