/* ═══════════════════════════════════════════════════════════════
   SellSpace Docs / Guides / Legal reading layout (built on ss-dash.css tokens).
   Use: <link ss-dash.css> + <link ss-docs.css>, <body class="dx">, then js/ss-docs.js
   Structure: header.dx-top + div.dx-wrap > aside.dx-side + main.dx-main + aside.dx-toc
   ═══════════════════════════════════════════════════════════════ */
body.dx { font-size: 15px; line-height: 1.7; min-height: 100vh; overflow-x: hidden; }
body.dx .dx-main a { color: var(--accent); }
body.dx .dx-main a:hover { filter: brightness(1.2); }
body.dx a { color: inherit; }
.dx-top { position: sticky; top: 0; z-index: 30; height: 54px; display: flex; align-items: center; gap: 18px; padding: 0 22px; border-bottom: 1px solid var(--border); background: var(--topbar-bg); backdrop-filter: blur(10px); }
body.dx .dx-top .dx-logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; letter-spacing: -.3px; color: var(--text); }
.dx-top .dx-logo img { height: 24px; width: auto; display: block; }
.dx-top .dx-sec { font-family: var(--mono); font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); padding-left: 18px; border-left: 1px solid var(--border); }
.dx-top .dx-spacer { flex: 1; }
.dx-top nav { display: flex; gap: 4px; }
body.dx .dx-top nav a { color: var(--muted); font-size: 13.5px; padding: 6px 11px; border-radius: 8px; }
body.dx .dx-top nav a:hover, body.dx .dx-top nav a.on { color: var(--text); background: var(--ghost-bg); filter: none; }
.dx-burger { display: none; background: var(--card); border: 1px solid var(--border); color: var(--text); width: 38px; height: 38px; border-radius: 9px; cursor: pointer; align-items: center; justify-content: center; }
.dx-burger svg { width: 18px; height: 18px; }

.dx-wrap { display: grid; grid-template-columns: 270px minmax(0, 1fr) 230px; max-width: 1360px; margin: 0 auto; gap: 0 34px; padding: 0 22px; }
.dx-wrap.no-side { grid-template-columns: minmax(0, 1fr) 230px; }
.dx-side { position: sticky; top: 54px; align-self: start; height: calc(100vh - 54px); overflow-y: auto; padding: 24px 6px 40px 0; border-right: 1px solid var(--border-soft); }
.dx-search { position: relative; margin-bottom: 18px; }
.dx-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--dim); pointer-events: none; }
.dx-search input { width: 100%; background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 9px 12px 9px 33px; border-radius: 9px; font-size: 13.5px; outline: none; font-family: inherit; }
.dx-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.dx-grp { margin-bottom: 18px; }
.dx-grp h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase; color: var(--dim); font-weight: 500; margin: 0 0 6px 10px; }
body.dx .dx-grp a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.dx-grp a:hover { background: var(--ghost-bg); color: var(--text); filter: none; }
body.dx .dx-grp a.on { background: var(--accent-soft); color: var(--accent); }
.dx-grp a[hidden] { display: none; }
.dx-nores { color: var(--dim); font-size: 13px; padding: 4px 10px; display: none; }

.dx-main { padding: 36px 0 70px; min-width: 0; max-width: 780px; }
.dx-eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.dx-main h1 { font-size: clamp(26px, 5vw, 34px); font-weight: 600; letter-spacing: -.5px; line-height: 1.2; margin-bottom: 10px; }
.dx-main .dx-lead { color: var(--muted); font-size: 16.5px; margin-bottom: 8px; }
.dx-meta { font-family: var(--mono); font-size: 11.5px; color: var(--dim); margin: 10px 0 24px; }
.dx-main h2 { font-size: 21px; font-weight: 600; letter-spacing: -.2px; margin: 38px 0 10px; padding-top: 6px; scroll-margin-top: 74px; }
.dx-main h3 { font-size: 16px; font-weight: 600; margin: 24px 0 6px; scroll-margin-top: 74px; }
.dx-main p { margin: 0 0 14px; }
.dx-main ul, .dx-main ol { margin: 0 0 16px 22px; }
.dx-main li { margin-bottom: 6px; }
.dx-main hr { border: 0; border-top: 1px solid var(--border); margin: 34px 0; }
.dx-main code { font-family: var(--mono); font-size: 12.5px; background: var(--card); border: 1px solid var(--border-soft); padding: 1px 6px; border-radius: 6px; }
.dx-main table { width: 100%; border-collapse: collapse; margin: 6px 0 20px; font-size: 14px; display: block; overflow-x: auto; }
.dx-main th, .dx-main td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.dx-main th { font-family: var(--mono); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); font-weight: 500; white-space: nowrap; }

.dx-code { position: relative; margin: 0 0 18px; background: var(--card); border: 1px solid var(--border); border-radius: 11px; }
.dx-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--text); }
.dx-code .dx-lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase; color: var(--dim); padding: 8px 14px 0; }
.dx-copy { position: absolute; top: 7px; right: 7px; display: inline-flex; align-items: center; gap: 6px; background: var(--card-inner); border: 1px solid var(--border); color: var(--muted); font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 7px; cursor: pointer; transition: color .15s, border-color .15s; }
.dx-copy:hover { color: var(--text); border-color: var(--hover-border); }
.dx-copy svg { width: 12px; height: 12px; }
.dx-copy.done { color: var(--green); border-color: rgba(34,197,94,.4); }

.dx-note { display: flex; gap: 12px; padding: 13px 15px; border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 11px; margin: 0 0 18px; font-size: 14px; }
.dx-note svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 3px; color: var(--accent); }
.dx-note p { margin: 0; }
.dx-note.warn { border-color: rgba(234,179,8,.4); background: rgba(234,179,8,.08); }
.dx-note.warn svg { color: var(--yellow); }

ol.dx-steps { list-style: none; margin-left: 0; counter-reset: s; }
ol.dx-steps > li { counter-increment: s; position: relative; padding: 2px 0 14px 44px; margin: 0; }
ol.dx-steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); font-family: var(--mono); font-size: 13px; display: flex; align-items: center; justify-content: center; }
ol.dx-steps > li > strong:first-child { display: block; margin-bottom: 2px; }

.dx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 18px 0 26px; }
body.dx .dx-main a.dx-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 16px 17px; color: var(--text) !important; transition: border-color .15s, transform .15s; }
.dx-card:hover { border-color: var(--accent-line); transform: translateY(-2px); filter: none !important; }
.dx-card svg { width: 22px; height: 22px; color: var(--accent); margin-bottom: 10px; }
.dx-card b { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 3px; }
.dx-card span { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }

.dx-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 46px; }
body.dx .dx-main .dx-pn a { display: block; border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px; background: var(--card); color: var(--text); }
.dx-pn a:hover { border-color: var(--accent-line); filter: none; }
.dx-pn small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase; color: var(--dim); }
.dx-pn a.next { text-align: right; grid-column: 2; }
body.dx .dx-pn a b { color: var(--accent); font-weight: 500; }

.dx-toc { position: sticky; top: 54px; align-self: start; max-height: calc(100vh - 54px); overflow-y: auto; padding: 38px 0 40px; font-size: 13px; }
.dx-toc summary { font-family: var(--mono); font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase; color: var(--dim); cursor: pointer; margin-bottom: 8px; list-style: none; }
.dx-toc summary::-webkit-details-marker { display: none; }
.dx-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.dx-toc li { margin: 0; }
body.dx .dx-toc a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; border-left: 1px solid transparent; color: var(--muted); line-height: 1.4; }
.dx-toc a:hover { color: var(--text); filter: none; }
body.dx .dx-toc a.on { color: var(--accent); border-left-color: var(--accent); }

.dx-foot { border-top: 1px solid var(--border); text-align: center; color: var(--dim); font-size: 12.5px; padding: 22px 16px 30px; font-family: var(--mono); }
body.dx .dx-foot a { color: var(--muted); }



@media (max-width: 1180px) {
  .dx-wrap { grid-template-columns: 250px minmax(0, 1fr); }
  .dx-wrap.no-side { grid-template-columns: minmax(0, 1fr); }
  .dx-toc { position: static; max-height: none; padding: 20px 0 0; order: -1; grid-column: 1 / -1; display: none; }
  .dx-toc-inline { display: block !important; }
}
.dx-toc-inline { display: none; border: 1px solid var(--border); border-radius: 11px; background: var(--card); padding: 12px 15px; margin: 0 0 24px; }
.dx-toc-inline summary { font-family: var(--mono); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.dx-toc-inline ol { margin: 10px 0 0 18px; }
.dx-toc-inline li { margin-bottom: 3px; font-size: 14px; }
@media (min-width: 1181px) { .dx-toc-inline { display: none !important; } }

@media (max-width: 860px) {
  .dx-top { padding: 0 14px; gap: 10px; }
  .dx-top .dx-sec { display: none; }
  .dx-top nav a:not(.keep) { display: none; }
  .dx-burger { display: inline-flex; }
  .dx-wrap, .dx-wrap.no-side { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
  .dx-side { position: fixed; top: 54px; left: 0; bottom: 0; width: min(320px, 86vw); height: auto; z-index: 40; background: var(--bg); padding: 18px 14px 40px; border-right: 1px solid var(--border); transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--shadow); }
  body.dx-open .dx-side { transform: none; }
  .dx-scrim { position: fixed; inset: 54px 0 0 0; background: var(--overlay); z-index: 35; display: none; }
  body.dx-open .dx-scrim { display: block; }
  .dx-main { padding-top: 24px; }
  .dx-pn { grid-template-columns: 1fr; }
  .dx-pn a.next { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .dx-side, .dx-card, .dx-copy { transition: none !important; } }