/* ERIUS PHONE user guide (/docs/): only what styles.css does not already have. Same tokens, same look. */
.docs__nav a[aria-current="page"] { color: var(--ink); background: rgba(45, 212, 191, .08); box-shadow: inset 2px 0 0 var(--teal); }
.docs__body .prose + .codeblock, .docs__body .prose + .callout, .docs__body .prose + .guide-table, .docs__body .prose + .guide-fig,
.docs__body .codeblock + .prose, .docs__body .callout + .prose, .docs__body .guide-table + .prose, .docs__body .guide-fig + .prose,
.docs__body .callout + .codeblock, .docs__body .codeblock + .callout, .docs__body .guide-table + .codeblock,
.docs__body .codeblock + .guide-table, .docs__body .callout + .guide-table, .docs__body .guide-table + .callout,
.docs__body .guide-fig + .codeblock, .docs__body .codeblock + .guide-fig, .docs__body .callout + .guide-fig,
.docs__body .guide-fig + .callout, .docs__body .guide-cards + .prose, .docs__body .prose + .guide-cards,
.docs__body .callout + .callout { margin-top: 18px; }
.docs__body .prose a.inline { color: var(--teal); text-decoration: none; }
.docs__body .prose a.inline:hover { text-decoration: underline; }
.guide-list { display: grid; gap: 8px; padding-left: 22px; }
ul.guide-list { list-style: disc; }
ol.guide-list { list-style: decimal; }
.guide-list li::marker { color: var(--ink-3); }
.guide-table { padding: 18px 22px; overflow-x: auto; }
.guide-table .params td:first-child { white-space: normal; color: var(--ink); min-width: 150px; }
.guide-fig { margin: 0; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: rgba(0, 0, 0, .4); max-width: 780px; }
.guide-fig img { display: block; width: 100%; height: auto; }
.guide-fig figcaption { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.guide-fig--phone { max-width: 320px; }
.guide-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.guide-cards a { display: grid; gap: 6px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .015); text-decoration: none; color: var(--ink-2); font-size: 14px; }
.guide-cards a:hover { border-color: rgba(45, 212, 191, .4); }
.guide-cards a strong { color: var(--ink); font-size: 16px; font-weight: 600; }
.guide-cards a span { font: 500 11px var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .12em; }
.st { display: inline-block; font: 500 11px var(--mono); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.st--ok { color: var(--teal); border: 1px solid rgba(45, 212, 191, .35); }
.st--wait { color: var(--amber); border: 1px solid rgba(245, 181, 68, .35); }
.st--no { color: var(--ink-2); border: 1px solid var(--line-2); }
.guide-pager { display: flex; justify-content: space-between; gap: var(--gap); margin-top: 72px; }
.guide-pager a { display: grid; gap: 4px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); font-weight: 600; min-width: 0; }
.guide-pager a:hover { border-color: rgba(45, 212, 191, .4); }
.guide-pager a span { font: 500 11px var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .12em; }
.guide-pager__next { text-align: right; margin-left: auto; }
.codeblock__head .guide-copy { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); background: none; border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 8px; cursor: pointer; }
.codeblock__head .guide-copy:hover { color: var(--ink); border-color: rgba(45, 212, 191, .4); }
.codeblock pre code { white-space: pre; }
@media (max-width: 640px) {
  .guide-cards { grid-template-columns: 1fr; }
  .guide-pager { flex-direction: column; }
  .guide-pager__next { text-align: left; margin-left: 0; }
  .guide-table { padding: 12px 14px; }
}