/* Settings (rs-wire): Parker's Riverside-style Settings, .orch/qa/flow-design/riverside-review/settings.html.
   A sticky sub-nav (Find a setting + eight panes in three groups) beside one pane column of white panels; every row is
   label + caption on the left with its control on the right, stacking when the panel is narrow (container query).
   Type 20 / 15 / 13 / 12, weights 400 and 500; 12 inside panels, 16 between panels. Tokens: css/rs-shell.css :root.
   Everything is scoped to .das and prefixed ds- so the app's own .pill / .card / .select / .link rules never reach it.
   Behaviour: js/da-settings.js; panes: views.js settings(). */

:root .das { max-width: none; font: var(--rs-w-reg) var(--rs-fs-body)/1.5 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); -webkit-font-smoothing: antialiased; padding-bottom: var(--rs-s32); }
:root .das *, :root .das *::before, :root .das *::after, :root .ds-cpop *, :root .ds-scrim * { box-sizing: border-box; }
:where(.das, .ds-cpop, .ds-scrim) :where(h1, h2, h3, p, dl, dd, dt, ol, ul) { margin: 0; }
:where(.das) :where(ol, ul) { padding: 0; list-style: none; }
:where(.das, .ds-cpop, .ds-scrim) :where(button, input, select) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(.das, .ds-cpop, .ds-scrim) button { cursor: pointer; }
:root .das .ds-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root .das .ds-faint { color: var(--rs-tx-2); }
:root .das svg.vi, :root .ds-cpop svg.vi { display: block; flex: none; }
:root .das .ds-num { font-variant-numeric: tabular-nums; }

/* ---------- head: title + one line, the save status on the right ---------- */
:root .das .ds-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rs-s16); margin-bottom: var(--rs-s16); }
:root .das .ds-head h1 { font-size: var(--rs-fs-title); line-height: 1.3; font-weight: var(--rs-w-med); letter-spacing: -.01em; color: var(--rs-tx); }
:root .das .ds-head-sub { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); margin-top: 2px; }
:root .das .ds-saved { display: inline-flex; align-items: center; gap: var(--rs-s8); height: 32px; padding: 0 var(--rs-s12); border-radius: var(--rs-r-pill); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); white-space: nowrap; flex: none; transition: background var(--rs-t), color var(--rs-t); }
:root .das .ds-saved:empty { visibility: hidden; }
:root .das .ds-saved:not(:empty):not(.is-saving) { background: var(--rs-pos-soft); color: var(--dk-tx-rs-pos, var(--rs-pos)); }
:root .das .ds-saved .vi { width: 14px; height: 14px; color: var(--dk-tx-rs-pos, var(--rs-pos)); }

/* ---------- body: sub-nav | pane ---------- */
:root .das .ds-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--rs-gap); align-items: start; }
:root .das .ds-card { background: var(--rs-panel); border-radius: var(--rs-r-panel); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-shadow); min-width: 0; }
:root .das .ds-rail { position: sticky; top: calc(var(--rs-top-h) + var(--rs-s8)); padding: var(--rs-pad); display: grid; gap: var(--rs-s12); }
:root .das .ds-find { position: relative; }
:root .das .ds-find-g { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--rs-tx-3); display: grid; pointer-events: none; }
:root .das .ds-find-g .vi { width: 15px; height: 15px; }
:root .das .ds-find input { width: 100%; height: 36px; border: 0; border-radius: var(--rs-r-pill); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); padding: 0 12px 0 32px; font-size: var(--rs-fs-body); outline: none; color: var(--rs-tx); }
:root .das .ds-find input::placeholder { color: var(--rs-tx-3); }
:root .das .ds-find input:focus { background: var(--dk-paper, #fff); box-shadow: var(--rs-ring); }
:root .das .ds-find-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; padding: 4px; border-radius: 12px; background: var(--rs-panel); box-shadow: var(--rs-pop-shadow), 0 0 0 1px var(--rs-line); max-height: 320px; overflow-y: auto; }
:root .das .ds-find-list[hidden] { display: none; }
:root .das .ds-find-list li { display: grid; padding: 8px; border-radius: var(--rs-r-sm); cursor: pointer; }
:root .das .ds-find-list li span { font-size: var(--rs-fs-body); }
:root .das .ds-find-list li small { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .das .ds-find-list li[aria-selected="true"], :root .das .ds-find-list li:hover { background: var(--rs-sel); }
:root .das .ds-find-list li.none { display: block; cursor: default; background: none; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .das .ds-rail-g { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); padding: 0 8px; margin-bottom: 4px; }
:root .das .ds-rail ul + .ds-rail-g { margin-top: 0; padding-top: var(--rs-s12); border-top: 1px solid var(--rs-line); }
:root .das .ds-rail ul { display: grid; gap: 2px; }
:root .das .ds-rail ul:not(:last-child) { padding-bottom: 0; }
:root .das .ds-rail a { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border-radius: var(--rs-r-sm); font-size: var(--rs-fs-body); color: var(--rs-tx-2); text-decoration: none; white-space: nowrap; transition: background var(--rs-t), color var(--rs-t); }
:root .das .ds-rail a:hover { background: var(--rs-inset); color: var(--rs-tx); }
:root .das .ds-rail a.on { background: var(--rs-sel); color: var(--rs-tx); font-weight: var(--rs-w-med); }
:root .das .ds-rg { display: grid; color: var(--rs-tx-3); }
:root .das .ds-rg .vi { width: 16px; height: 16px; }
:root .das .ds-rail a.on .ds-rg { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .das .ds-nd { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--s-danger-dot, #C4544A); flex: none; }
@media (max-width: 760px) { :root .das .ds-nd { margin-left: 2px; } }

:root .das .ds-pane { min-width: 0; max-width: 840px; }
:root .das .ds-pane-h h2 { font-size: var(--rs-fs-title); line-height: 1.3; font-weight: var(--rs-w-med); letter-spacing: -.01em; color: var(--rs-tx); }
:root .das .ds-pane-h > p { margin-top: 4px; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .das .ds-pane-h > p.ds-ed-note { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; margin-top: var(--rs-s12); padding: var(--rs-pad); border-radius: 12px; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--rs-tx-2); font-size: var(--rs-fs-body); }
:root .das .ds-ed-note .vi { width: 16px; height: 16px; margin-top: 1px; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .das .ds-pane-b, :root .das .ds-stack { margin-top: var(--rs-gap); display: grid; gap: var(--rs-gap); min-width: 0; }
:root .das .ds-stack { margin-top: 0; }
:root .das .ds-enter > * { animation: ds-up var(--rs-t) var(--rs-ease) both; }
:root .das .ds-enter > *:nth-child(2) { animation-delay: 30ms; } :root .das .ds-enter > *:nth-child(3) { animation-delay: 60ms; } :root .das .ds-enter > *:nth-child(n+4) { animation-delay: 90ms; }
@keyframes ds-up { from { opacity: 0; transform: translateY(4px); } }
@keyframes ds-pop { from { opacity: 0; transform: translateY(-4px); } }
/* the route's own rise-in would move the sub-nav too; Settings keeps it still and staggers the pane */
body[data-route="settings"] #outlet.is-enter > .das { animation: none !important; }

/* ---------- panels and rows ---------- */
:root .das .ds-blk { padding: var(--rs-pad); container-type: inline-size; }
:root .das .ds-blk-h h3 { font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); line-height: 1.4; letter-spacing: -.005em; display: flex; align-items: center; gap: 8px; color: var(--rs-tx); }
:root .das .ds-blk-h p { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); margin-top: 4px; }
:root .das .ds-blk-h + .ds-rows, :root .das .ds-blk-h + [data-int-pane] > .ds-rows { margin-top: var(--rs-s12); }
:root .das .ds-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--rs-r-pill); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); color: var(--rs-tx-2); display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
:root .das .ds-count:empty { display: none; }
:root .das .ds-rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; padding: 12px 0; border-top: 1px solid var(--rs-line); scroll-margin: 96px; }
:root .das .ds-rows > li:first-child { border-top: 0; }
:root .das .ds-blk > .ds-rows:first-child > li:first-child { padding-top: 0; }
:root .das .ds-row-l { min-width: 0; }
:root .das .ds-row-t { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); line-height: 1.4; display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; color: var(--rs-tx); }
:root .das .ds-row-n { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); margin-top: 2px; max-width: 560px; }
:root .das .ds-row-r:empty { display: none; }
:root .das .ds-rows.ds-tight > li:first-child { padding-top: 4px; }
:root .das .ds-row-r { display: flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 0; flex-wrap: wrap; }
:root .das .ds-val { font-size: var(--rs-fs-body); color: var(--rs-tx); overflow-wrap: anywhere; }
:root .das .ds-rows > li.ds-errrow { display: flex; justify-content: flex-end; padding: 0 0 12px; border-top: 0; }
:root .das .ds-kept > li { grid-template-columns: minmax(0, 1fr); }
:root .das .ds-quiet { margin-top: var(--rs-s12); padding: var(--rs-pad); border-radius: 12px; background: var(--rs-inset); color: var(--rs-tx-2); }
:root .das .ds-foot { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .das .ds-foot.ds-in { margin-top: 4px; padding-top: var(--rs-s12); border-top: 1px solid var(--rs-line); }
:root .das .ds-lockline { display: inline-flex; gap: 4px; align-items: center; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); white-space: nowrap; }
:root .das .ds-lockline .vi { width: 13px; height: 13px; }
:root .das .ds-lockp { margin-top: var(--rs-s12); }
:root .das .ds-err { color: var(--dk-tx-rs-neg, var(--rs-neg)); font-size: var(--rs-fs-cap); display: flex; gap: 8px; align-items: flex-start; }
:root .das .ds-err .vi { width: 14px; height: 14px; margin-top: 1px; }
:root .das .ds-err[hidden] { display: none; }
:root .das .ds-statusl { display: flex; gap: 8px; align-items: center; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); margin-top: 4px; padding-top: var(--rs-s12); border-top: 1px solid var(--rs-line); }
:root .das .ds-statusl .vi { width: 14px; height: 14px; }
:root .das .ds-statusl.on, :root .das .ds-statusl.on .vi { color: var(--dk-tx-rs-pos, var(--rs-pos)); }
:root .das .ds-statusl.bad, :root .das .ds-statusl.bad .vi { color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .das .ds-flash { animation: ds-flash 1.6s var(--rs-ease); }
@keyframes ds-flash { 0%, 30% { background-color: var(--rs-sel); box-shadow: 0 0 0 8px var(--rs-sel); } 100% { background-color: transparent; box-shadow: 0 0 0 8px transparent; } }

/* ---------- controls ---------- */
:root .das .ds-link, :root .ds-cpop .ds-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); text-decoration: none; background: none; border: 0; padding: 0; }
:root .das .ds-row-n .ds-link, :root .das .ds-foot .ds-link { display: inline; font-size: inherit; }
:root .das .ds-link:hover { text-decoration: underline; text-underline-offset: 2px; }
:root .das .ds-link .vi { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; }
:root .das .ds-textbtn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border: 0; border-radius: var(--rs-r-xs); background: none; font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); line-height: 1.4; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); white-space: nowrap; text-decoration: none; }
:root .das .ds-textbtn:hover { background: var(--rs-sel); }
:root .das .ds-textbtn[disabled] { opacity: .5; cursor: default; background: none; }
:where(.das, .ds-cpop, .ds-scrim) .ds-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: var(--rs-r-pill); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line-2); font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--rs-tx); text-decoration: none; white-space: nowrap; transition: background var(--rs-t), box-shadow var(--rs-t), color var(--rs-t); }
:where(.das, .ds-cpop, .ds-scrim) .ds-pill:hover { background: var(--rs-inset); box-shadow: inset 0 0 0 1px rgba(31,31,33,.18); }
:where(.das, .ds-cpop, .ds-scrim) .ds-pill.ds-sm { height: 32px; padding: 0 12px; }
:where(.das, .ds-cpop, .ds-scrim) .ds-pill .vi { width: 14px; height: 14px; }
:where(.das, .ds-cpop, .ds-scrim) .ds-pill.ds-ink { background: var(--rs-peri-deep); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(76,95,146,.25); }
:where(.das, .ds-cpop, .ds-scrim) .ds-pill.ds-ink:hover { background: var(--rs-peri-deep-hover); }
:where(.das, .ds-cpop, .ds-scrim) .ds-pill.ds-line { background: var(--rs-panel); }
:where(.das, .ds-cpop, .ds-scrim) .ds-pill.ds-danger { color: var(--rs-tx-2); }
:where(.das, .ds-cpop, .ds-scrim) .ds-pill.ds-danger:hover:not([disabled]) { color: var(--dk-tx-rs-neg, var(--rs-neg)); background: var(--rs-neg-soft); box-shadow: inset 0 0 0 1px rgba(154,59,51,.25); }
:where(.ds-scrim) .ds-pill.ds-danger:not([disabled]) { color: #fff; background: var(--rs-neg); box-shadow: none; }
:where(.ds-scrim) .ds-pill.ds-danger:not([disabled]):hover { color: #fff; background: #86332C; box-shadow: none; }
:where(.das, .ds-cpop, .ds-scrim) .ds-pill[disabled] { opacity: .45; pointer-events: none; }
:where(.das) .ds-pill.done .vi { color: var(--dk-tx-rs-pos, var(--rs-pos)); }
:where(.das, .ds-cpop, .ds-scrim) :is(.ds-pill, .ds-link, .ds-textbtn, button, a, select):focus-visible { outline: 2px solid var(--rs-peri); outline-offset: 2px; }
:root .das .ds-tag { width: fit-content; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: var(--rs-r-xs); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); white-space: nowrap; }
:root .das .ds-tag.ds-ink { background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .das .ds-tag.ds-ok { background: var(--rs-pos-soft); color: var(--dk-tx-rs-pos, var(--rs-pos)); }
:root .das .ds-tag.ds-bad { background: var(--rs-neg-soft); color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .das .ds-tag.ds-mute { background: var(--rs-inset); color: var(--rs-tx-2); box-shadow: inset 0 0 0 1px var(--rs-line); }
:root .das .ds-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rs-peri); flex: none; display: inline-block; }
:root .das .ds-dot.ok { background: var(--rs-pos); } :root .das .ds-dot.bad { background: var(--s-danger-dot, #C4544A); }
:where(.das, .ds-scrim) .ds-input, :root .das .ds-select select { display: block; height: 36px; border: 0; border-radius: var(--rs-r-inner); background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--rs-line-2); padding: 0 12px; font-size: var(--rs-fs-body); outline: none; min-width: 0; color: var(--rs-tx); transition: box-shadow var(--rs-t); }
:where(.das, .ds-scrim) .ds-input::placeholder { color: var(--rs-tx-3); }
:where(.das, .ds-scrim) .ds-input:focus, :root .das .ds-select select:focus { box-shadow: var(--rs-ring); outline: none; }
:root .das .ds-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--rs-neg), 0 0 0 3px var(--rs-neg-soft); }
:root .das .ds-select { position: relative; display: inline-block; min-width: 0; }
:root .das .ds-select select { appearance: none; -webkit-appearance: none; width: 100%; padding-right: 32px; cursor: pointer; }
:root .das .ds-select select:disabled { opacity: .5; cursor: default; }
:root .das .ds-select.ds-sm select { height: 32px; min-width: 112px; }
:root .das [data-row="tz"] .ds-select { width: 220px; max-width: 100%; }
:root .das .ds-select::after { content: ""; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--rs-tx-2); border-bottom: 1.5px solid var(--rs-tx-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
:root .das .ds-switch { position: relative; display: inline-block; width: 32px; height: 20px; flex: none; vertical-align: middle; }
:root .das .ds-switch input { position: absolute; inset: -12px -6px; width: auto; height: auto; opacity: 0 !important; margin: 0; padding: 0; border: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; z-index: 1; }
:root .das .ds-switch .ds-tr { position: absolute; inset: 0; border-radius: var(--rs-r-pill); background: var(--rs-raise); box-shadow: inset 0 0 0 1px var(--rs-line-2); transition: background var(--rs-t) var(--rs-ease); }
:root .das .ds-switch .ds-tr::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--dk-paper, #fff); box-shadow: 0 1px 2px rgba(31,31,33,.22); transition: transform var(--rs-t) var(--rs-ease); }
:root .das .ds-switch input:checked + .ds-tr { background: var(--rs-peri-deep); box-shadow: none; }
/* light theme: an off switch on a white card was a near-white track (about 1.1:1), so it read as no control at all */
:root[data-theme="light"] .das .ds-switch .ds-tr { background: rgba(31,31,33,.2); box-shadow: none; }
@media (prefers-color-scheme: light) { :root[data-theme="system"] .das .ds-switch .ds-tr { background: rgba(31,31,33,.2); box-shadow: none; } }
:root .das .ds-switch input:checked + .ds-tr::after { transform: translateX(12px); }
:root .das .ds-switch input:focus-visible { outline: none; }
:root .das .ds-switch input:focus-visible + .ds-tr { outline: 2px solid var(--rs-peri); outline-offset: 2px; }
:root .das .ds-switch input:disabled { cursor: default; }
:root .das .ds-switch input:disabled + .ds-tr { opacity: .4; }
:root .das .ds-seg { position: relative; display: inline-flex; padding: 3px; border-radius: var(--rs-r-pill); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); min-width: 260px; max-width: 100%; }
:root .das .ds-seg button { position: relative; z-index: 1; flex: 1 1 0; height: 30px; padding: 0 16px; border: 0; border-radius: var(--rs-r-pill); background: none; font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--rs-tx-2); white-space: nowrap; transition: color var(--rs-t); }
:root .das .ds-seg button:hover, :root .das .ds-seg button[aria-checked="true"] { color: var(--rs-tx); }
:root .das .ds-seg .ds-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: var(--rs-r-pill); background: var(--dk-paper, #fff); box-shadow: 0 1px 2px rgba(31,31,33,.1), 0 0 0 1px var(--rs-line); transition: transform var(--rs-t) var(--rs-ease), width var(--rs-t) var(--rs-ease); }
:root .das .ds-seg:not(:has(.ds-thumb)) button[aria-checked="true"] { background: var(--dk-paper, #fff); box-shadow: 0 1px 2px rgba(31,31,33,.1), 0 0 0 1px var(--rs-line); }
:root .das .ds-disc { margin-top: 8px; }
:root .das .ds-disc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms var(--rs-ease); }
:root .das .ds-disc-body > div { overflow: hidden; min-height: 0; }
:root .das .ds-disc.open > .ds-disc-body { grid-template-rows: 1fr; }
:root .das .ds-disc-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; margin-left: -4px; border: 0; border-radius: var(--rs-r-xs); background: none; font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .das .ds-disc-btn:hover { background: var(--rs-sel); }
:root .das .ds-disc-btn .vi { width: 12px; height: 12px; transition: transform var(--rs-t) var(--rs-ease); }
:root .das .ds-disc.open > .ds-disc-btn .vi { transform: rotate(180deg); }
:root .das .ds-disc-body .ds-howto, :root .das .ds-disc-body .ds-roles { margin-top: 8px; padding: var(--rs-pad); border-radius: 12px; background: var(--rs-inset); color: var(--rs-tx-2); display: grid; gap: 4px; }
:root .das .ds-sk { display: block; border-radius: var(--rs-r-sm); background: linear-gradient(90deg, var(--rs-inset) 0 40%, var(--dk-paper, #fff) 50%, var(--rs-inset) 60% 100%); background-size: 300% 100%; animation: ds-shim 1.4s linear infinite; box-shadow: inset 0 0 0 1px var(--rs-line); }
@keyframes ds-shim { from { background-position: 100% 0; } to { background-position: 0 0; } }
:root .das .ds-ie { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
:root .das .ds-ie.editing { width: min(420px, 100%); }
:root .das .ds-ie.editing .ds-input { flex: 1; width: auto; }
:root .das .ds-ie.editing .ds-pill { flex: none; }

/* ---------- account ---------- */
:root .das .ds-idn { margin-top: var(--rs-s12); display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--rs-s12); align-items: center; padding-bottom: var(--rs-s12); border-bottom: 1px solid var(--rs-line); }
:root .das .ds-big-av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-size: var(--rs-fs-title); font-weight: var(--rs-w-med); }
:root .das .ds-idn-n { font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); line-height: 1.4; overflow-wrap: anywhere; }
:root .das .ds-idn-m { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); overflow-wrap: anywhere; }
:root .das .ds-idn + .ds-rows { margin-top: 4px; }
:root .das .ds-with-mark { display: inline-flex; align-items: center; gap: 8px; }
/* the cross-link panels (Account -> Brand, Integrations -> Keys) */
:root .das .ds-bridge { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--rs-s12); align-items: center; }
:root .das .ds-bridge-mk { width: 32px; height: 32px; border-radius: var(--rs-r-sm); display: grid; place-items: center; background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .das .ds-bridge-mk .vi { width: 16px; height: 16px; }

/* ---------- workspace and members ---------- */
:root .das .ds-mini-av { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-size: 11px; font-weight: var(--rs-w-med); }
:root .das .ds-owner { display: inline-flex; align-items: center; gap: 8px; }
:root .das .ds-invite { display: grid; grid-template-columns: minmax(0, 1fr) 136px auto; gap: 8px; margin-top: var(--rs-s12); }
:root .das .ds-invite .ds-input { width: 100%; }
:root .das .ds-invite + .ds-err { margin-top: 8px; }
:root .das .mn-link { font-size: var(--rs-fs-cap); margin-top: 8px; max-width: none; }
:root .das .mn-link strong { color: var(--rs-tx); font-weight: var(--rs-w-med); overflow-wrap: anywhere; }
:root .das .mn-link .ds-textbtn { margin-left: 4px; }
:root .das .ds-people { margin-top: var(--rs-s12); }
:root .das .ds-people li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rs-line); }
:root .das .ds-people li:first-child { border-top: 0; }
:root .das .ds-people li .ds-row-r { flex-wrap: nowrap; }
:root .das .ds-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--rs-tx-2); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); }
:root .das .ds-av.pend { background: none; box-shadow: inset 0 0 0 1px var(--rs-line-2); color: var(--rs-tx-3); }
:root .das .ds-pp-l { min-width: 0; }
:root .das .ds-pp-l .ds-row-t { overflow-wrap: anywhere; }
:root .das .ds-roles-disc { margin-top: 8px; }
:root .das .ds-roles b { color: var(--rs-tx); font-weight: var(--rs-w-med); margin-right: 4px; }
:root .das [data-members-pane] .estate, :root .das [data-members-pane] .skel-page { margin: var(--rs-s12) 0 0; }

/* ---------- integrations (rows drawn by js/integrations.js) ---------- */
:root .das .ds-svc .int-list { margin: var(--rs-s12) 0 0; padding: 0; list-style: none; background: none; border-radius: 0; gap: 0; display: block; }
:root .das .ds-svc .int { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--rs-line); margin: 0; background: none; border-radius: 0; box-shadow: none; scroll-margin: 96px; }
:root .das .ds-svc .int:first-child { border-top: 0; }
:root .das .ds-svc .int-icon { width: 32px; height: 32px; border-radius: var(--rs-r-sm); display: grid; place-items: center; background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--rs-line); border: 0; margin-top: 2px; padding: 0; }
:root .das .ds-svc .int-icon svg { width: 18px; height: 18px; }
:root .das .ds-svc .int[data-state="unavailable"] .int-icon { filter: grayscale(1); opacity: .55; }
:root .das .ds-svc .int-text { display: block; min-width: 0; flex: none; }
:root .das .ds-svc .int-h { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
:root .das .ds-svc .int-h strong { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); line-height: 1.4; color: var(--rs-tx); }
:root .das .ds-svc .int-text small { display: block; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); margin-top: 2px; max-width: 560px; }
:root .das .ds-svc .int-text small.int-line { margin-top: 4px; }
:root .das .ds-svc .int[data-state="connected"] small.int-line, :root .das .ds-svc .int[data-state="needs_reconnect"] small.int-line { color: var(--rs-tx); position: relative; padding-left: 17px; }
:root .das .ds-svc .int[data-state="connected"] small.int-line::before, :root .das .ds-svc .int[data-state="needs_reconnect"] small.int-line::before { content: ""; position: absolute; left: 0; top: 2px; width: 13px; height: 13px; background: var(--rs-pos); -webkit-mask: var(--ds-mk-check) center / contain no-repeat; mask: var(--ds-mk-check) center / contain no-repeat; }
:root .das .ds-svc .int[data-state="needs_reconnect"] small.int-line::before { background: var(--rs-neg); -webkit-mask-image: var(--ds-mk-alert); mask-image: var(--ds-mk-alert); }
:root .das .ds-svc small.int-note { color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .das .ds-svc { --ds-mk-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --ds-mk-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5l8.5 15h-17z'/%3E%3Cpath d='M12 10.5v4M12 17.2v.1'/%3E%3C/svg%3E"); }
:root .das .ds-svc .pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--rs-r-xs); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); border: 0; background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--rs-tx-2); gap: 0; text-transform: none; letter-spacing: 0; margin: 0; width: auto; }
:root .das .ds-svc .pill i { display: none; }
:root .das .ds-svc .pill--done { background: var(--rs-pos-soft); color: var(--dk-tx-rs-pos, var(--rs-pos)); box-shadow: none; }
:root .das .ds-svc .pill--review { background: var(--rs-neg-soft); color: var(--dk-tx-rs-neg, var(--rs-neg)); box-shadow: none; }
:root .das .ds-svc .pill--editing { background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); box-shadow: none; }
:root .das .ds-svc .int > .btn { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; margin-top: 2px; border: 0; border-radius: var(--rs-r-pill); font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line-2); color: var(--rs-tx); white-space: nowrap; transform: none; }
:root .das .ds-svc .int > .btn:hover { background: var(--rs-inset); }
:root .das .ds-svc .int > .btn--primary { background: var(--rs-peri-deep); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(76,95,146,.25); }
:root .das .ds-svc .int > .btn--primary:hover { background: var(--rs-peri-deep-hover); }
/* one primary per view: a second "Connect again" reads as a secondary button */
:root .das .ds-svc .int:has(> .btn--primary) ~ .int > .btn--primary { background: var(--rs-panel); color: var(--rs-tx); box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root .das .ds-svc .int > .int-lock { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; gap: 4px; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); padding-top: 4px; white-space: nowrap; }
:root .das .ds-svc .int-see { margin-top: 8px; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); border: 0; padding: 0; }
:root .das .ds-svc .int-see summary { width: max-content; list-style: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; margin-left: -4px; border-radius: var(--rs-r-xs); font-weight: var(--rs-w-med); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); cursor: pointer; }
:root .das .ds-svc .int-see summary:hover { background: var(--rs-sel); }
:root .das .ds-svc .int-see summary::-webkit-details-marker, :root .das .ds-svc .int-see > summary::before { display: none; }
:root .das .ds-svc .int-see summary::after { content: ""; width: 5px; height: 5px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--rs-t) var(--rs-ease); }
:root .das .ds-svc .int-see[open] summary::after { transform: translateY(1px) rotate(-135deg); }
:root .das .ds-svc .int-see[open] { padding-left: 0; border-left: 0; }
:root .das .ds-svc .int-see[open] > :not(summary) { background: var(--rs-inset); }
:root .das .ds-svc .int-see ul { display: grid; gap: 4px; margin: 8px 0 0; padding: var(--rs-pad) var(--rs-pad) var(--rs-pad) 28px; border-radius: 12px 12px 0 0; list-style: disc; }
:root .das .ds-svc .int-see ul:last-child { border-radius: 12px; }
:root .das .ds-svc .int-see li { padding-left: 0; }
:root .das .ds-svc .int-see li::before { display: none; }
:root .das .ds-svc .int-see p { margin: 0; padding: 0 var(--rs-pad) var(--rs-pad); border-radius: 0 0 12px 12px; max-width: none; }
:root .das .ds-svc .int-see a { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-weight: var(--rs-w-med); }
:root .das .ds-svc .delivery-note { display: none; }
:root .das .ds-svc .estate, :root .das .ds-svc .skel-page { margin: var(--rs-s12) 0 0; }

/* ---------- plan ---------- */
:root .das .ds-alert { display: flex; gap: 8px; align-items: flex-start; padding: var(--rs-pad); border-radius: 12px; background: var(--rs-neg-soft); color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .das [data-plan-alert]:empty { display: none; }
:root .das .ds-planhero { display: flex; align-items: flex-start; gap: var(--rs-s16); }
:root .das .ds-ph-k { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .das .ds-ph-n { font-size: var(--rs-fs-title); font-weight: var(--rs-w-med); letter-spacing: -.01em; line-height: 1.3; margin-top: 4px; color: var(--rs-tx); }
:root .das .ds-ph-p { margin-top: 4px; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); max-width: 460px; }
:root .das .ds-ph-acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; flex: none; }
:root .das .ds-plan-msg { font-size: var(--rs-fs-cap); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); margin-top: 8px; }
:root .das .ds-plan-msg:empty { display: none; }
:root .das .ds-incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: var(--rs-s16); padding-top: var(--rs-s12); border-top: 1px solid var(--rs-line); }
:root .das .ds-incl li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; color: var(--rs-tx-2); }
:root .das .ds-incl .vi { width: 14px; height: 14px; color: var(--dk-tx-rs-pos, var(--rs-pos)); margin-top: 2px; }
:root .das .ds-turn { display: flex; gap: 8px; align-items: center; margin-top: var(--rs-s12); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .das .ds-turn .vi { width: 14px; height: 14px; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .das .ds-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rs-s16); margin-top: var(--rs-s16); }
:root .das .ds-meters li { display: grid; gap: 8px; min-width: 0; align-content: start; }
:root .das .ds-mt-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--rs-tx-2); }
:root .das .ds-mt-h .ds-num { color: var(--rs-tx); font-weight: var(--rs-w-med); }
:root .das .ds-mt-f { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root .das .ds-bar { display: block; height: 6px; border-radius: 3px; background: var(--rs-raise); overflow: hidden; }
:root .das .ds-bar i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--rs-peri-deep); transform-origin: left; animation: ds-fill .7s var(--rs-ease) both; }
@keyframes ds-fill { from { transform: scaleX(0); } }
:root .das .ds-state { margin-top: var(--rs-s16); display: grid; gap: 4px; justify-items: start; }
:root .das .ds-state .ds-pill { margin-top: 8px; }
:root .das .ds-plancards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--rs-s12); margin-top: var(--rs-s16); padding-top: var(--rs-s12); border-top: 1px solid var(--rs-line); outline: none; }
:root .das .ds-plancard { border-radius: 12px; background: var(--rs-inset); padding: var(--rs-pad); display: grid; gap: 8px; align-content: start; }
:root .das .ds-plancard.is-current { background: var(--rs-sel); box-shadow: none; }
:root .das .ds-perks { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); display: grid; gap: 4px; }
:root .das [data-plan-picker-slot] > .ds-row-n { margin-top: 8px; }

/* ---------- notifications ---------- */
:root .das .ds-matrix { width: 100%; border-collapse: collapse; margin-top: var(--rs-s12); }
:root .das .ds-matrix th, :root .das .ds-matrix td { padding: 12px 0; border-top: 1px solid var(--rs-line); text-align: left; font-weight: var(--rs-w-reg); vertical-align: middle; background: none; }
:root .das .ds-matrix thead th { border-top: 0; padding: 0 0 8px; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); font-weight: var(--rs-w-med); }
:root .das .ds-matrix thead th:not(:first-child), :root .das .ds-matrix td { width: 88px; text-align: center; }
:root .das .ds-matrix .ds-row-t, :root .das .ds-matrix .ds-row-n { display: block; }
:root .das .ds-phone { display: flex; gap: 8px; align-items: center; }
:root .das .ds-phone .ds-input { width: 180px; }

/* ---------- privacy ---------- */
:root .das .ds-diag { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--rs-s12); border-radius: 12px; background: var(--rs-inset); }
:root .das .ds-diag > div { padding: 12px 16px; min-width: 0; }
:root .das .ds-diag > div + div { border-left: 1px solid var(--rs-line); }
:root .das .ds-diag dt { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .das .ds-diag dd { margin-top: 4px; font-weight: var(--rs-w-med); display: flex; align-items: center; gap: 8px; color: var(--rs-tx); }
:root .das .ds-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: var(--rs-s12); }
:root .das .ds-dzone, :root .das .ds-dzone.trust-danger { margin-top: 0; }
:root .das .ds-dzone { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: var(--rs-pad); border-radius: var(--rs-r-panel); box-shadow: inset 0 0 0 1px var(--rs-line-2); background: none; }
:root .das .ds-dzone .ds-row-n { max-width: 520px; }

/* ---------- keys ---------- */
:root .das .ds-addr { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--rs-fs-cap); letter-spacing: 0; padding: 4px 8px; border-radius: var(--rs-r-xs); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--rs-tx); overflow-wrap: anywhere; }
:root .das .ds-howto { padding-left: 28px !important; list-style: decimal; }
:root .das .ds-howto b { color: var(--rs-tx); font-weight: var(--rs-w-med); margin-right: 4px; }
:root .das [data-mcp-state] { display: inline-flex; align-items: center; gap: 8px; }

/* look (only while index.html does not lock the look) */
:root .das .ds-looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: var(--rs-s12); }
:root .das .ds-look { display: flex; gap: 8px; align-items: flex-start; padding: var(--rs-pad); border-radius: 12px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--rs-line); }
:root .das .ds-look.is-on { box-shadow: inset 0 0 0 1.5px var(--rs-peri); }
:root .das .ds-look small { display: block; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }

/* ---------- anchored confirm + delete dialog (appended to body) ---------- */
:root .ds-cpop { position: absolute; z-index: 1200; padding: var(--rs-pad); border-radius: 12px; background: var(--rs-panel); box-shadow: var(--rs-pop-shadow), 0 0 0 1px var(--rs-line); animation: ds-pop var(--rs-t) var(--rs-ease); color: var(--rs-tx); font: var(--rs-w-reg) var(--rs-fs-body)/1.5 var(--rs-font); letter-spacing: var(--rs-ls); }
:root .ds-cp-t { font-weight: var(--rs-w-med); }
:root .ds-cp-b { margin-top: 4px; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .ds-cp-a { display: flex; gap: 8px; justify-content: flex-end; margin-top: var(--rs-s12); }
:root .ds-scrim { position: fixed; inset: 0; z-index: 1200; background: var(--dk-s-1f1f21a32, rgba(31,31,33,.32)); display: grid; place-items: center; padding: var(--rs-s16); animation: ds-fade var(--rs-t); color: var(--rs-tx); font: var(--rs-w-reg) var(--rs-fs-body)/1.5 var(--rs-font); letter-spacing: var(--rs-ls); }
@keyframes ds-fade { from { opacity: 0; } }
:root .ds-dlg { width: min(440px, 100%); padding: var(--rs-s16); border-radius: var(--rs-r-panel); background: var(--rs-panel); box-shadow: 0 16px 48px rgba(31,31,33,.24), 0 0 0 1px var(--rs-line); animation: ds-pop var(--rs-t) var(--rs-ease); }
:root .ds-dlg h2 { font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); }
:root .ds-dlg p { margin-top: 8px; color: var(--rs-tx-2); }
:root .ds-dlg-f { display: grid; gap: 4px; margin-top: var(--rs-s16); }
:root .ds-dlg-f span { font-weight: var(--rs-w-med); }
:root .ds-dlg-f b { color: var(--dk-tx-rs-neg, var(--rs-neg)); font-weight: var(--rs-w-med); }
:root .ds-dlg-f .ds-input { width: 100%; }
:root .ds-dlg-a { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: var(--rs-s16); flex-wrap: wrap; }

/* ---------- narrow panels: the control drops under its label ---------- */
@container (max-width: 560px) {
  :root .das .ds-rows > li { grid-template-columns: minmax(0, 1fr); }
  :root .das .ds-rows > li.inline { grid-template-columns: minmax(0, 1fr) auto; }
  :root .das .ds-row-r { justify-content: flex-start; }
  :root .das .ds-rows > li.ds-errrow { justify-content: flex-start; }
  :root .das .ds-seg { min-width: 0; width: 100%; }
  :root .das .ds-ie.editing { width: 100%; }
  :root .das .ds-svc .int, :root .das .ds-bridge { grid-template-columns: 32px minmax(0, 1fr); }
  :root .das .ds-svc .int > .btn, :root .das .ds-svc .int > .int-lock { grid-column: 2; grid-row: auto; justify-self: start; }
  :root .das .ds-bridge > :last-child { grid-column: 2; justify-self: start; }
  :root .das .ds-invite { grid-template-columns: minmax(0, 1fr) 120px; }
  :root .das .ds-invite .ds-input { grid-column: 1 / -1; }
  :root .das .ds-invite .ds-pill { justify-content: center; }
  :root .das .ds-people li { grid-template-columns: 32px minmax(0, 1fr); }
  :root .das .ds-people li .ds-row-r { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  :root .das .ds-planhero { flex-direction: column; }
  :root .das .ds-ph-acts { margin-left: 0; justify-content: flex-start; }
  :root .das .ds-incl, :root .das .ds-meters { grid-template-columns: minmax(0, 1fr); }
  :root .das .ds-diag { grid-template-columns: minmax(0, 1fr); }
  :root .das .ds-diag > div + div { border-left: 0; border-top: 1px solid var(--rs-line); }
  :root .das .ds-looks { grid-template-columns: minmax(0, 1fr); }
  :root .das .ds-phone { flex-wrap: wrap; width: 100%; }
  :root .das .ds-phone .ds-input { flex: 1 1 160px; width: auto; }
  :root .das .ds-idn { grid-template-columns: 48px minmax(0, 1fr); }
  :root .das .ds-idn .ds-tag { grid-column: 2; justify-self: start; }
  :root .das .ds-addr { white-space: normal; }
  /* the matrix: one event per block, its three switches labelled */
  :root .das .ds-matrix thead { display: none; }
  :root .das .ds-matrix, :root .das .ds-matrix tbody, :root .das .ds-matrix tr, :root .das .ds-matrix th, :root .das .ds-matrix td { display: block; width: auto; }
  :root .das .ds-matrix tr { padding: 12px 0; border-top: 1px solid var(--rs-line); }
  :root .das .ds-matrix tr:first-child { border-top: 0; }
  :root .das .ds-matrix th, :root .das .ds-matrix td { border: 0; padding: 0; text-align: left; }
  :root .das .ds-matrix td { display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 8px 16px 0 0; }
  :root .das .ds-matrix td::before { content: attr(data-l); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
}

/* ---------- narrower desktops ---------- */
@media (max-width: 1100px) { :root .das .ds-body { grid-template-columns: 208px minmax(0, 1fr); } }

/* ---------- phones: the sub-nav becomes a chip rail under "Find a setting" ---------- */
@media (max-width: 760px) {
  :root .das .ds-head { margin-bottom: var(--rs-s12); }
  :root .das .ds-body { grid-template-columns: minmax(0, 1fr); gap: var(--rs-s12); }
  :root .das .ds-rail { position: static; padding: var(--rs-pad) 0 0; gap: 8px; overflow: hidden; }
  :root .das .ds-find { margin: 0 var(--rs-pad); }
  :root .das .ds-rail-scroll { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--rs-pad) var(--rs-pad); scroll-snap-type: x proximity; }
  :root .das .ds-rail-scroll::-webkit-scrollbar { display: none; }
  :root .das .ds-rail-g { display: none; }
  :root .das .ds-rail ul { display: contents; }
  :root .das .ds-rail li { flex: none; scroll-snap-align: start; }
  :root .das .ds-rail a { height: 32px; padding: 0 12px; border-radius: var(--rs-r-pill); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); }
  :root .das .ds-rail a.on { background: var(--rs-sel); box-shadow: none; }
  :root .das .ds-rg { display: none; }
  :root .das .ds-dzone { grid-template-columns: minmax(0, 1fr); }
  :root .das .ds-dzone > .ds-pill { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  :root .das .ds-enter > *, :root .das .ds-bar i, :root .das .ds-sk { animation: none !important; }
  :root .das .ds-flash { animation-duration: .01s; }
}