/* Riti UI v1 — getting in (lane P1): sign-in, first run, agent consent. Page parts on top of tokens/base/components.
   Ported from the approved prototype (prototype/ui/unbound/signin.html, welcome.html, consent.html, r1.css) onto the
   design-system tokens. Strict CSP: no inline styles; JS positions use CSSOM. */

html:not(.js) .js-only { display: none !important; }
.auth .thr-col:has(.step.wide:not([hidden])) { width: min(640px, 100%); }
.auth .thr-col:has(.consent-wide) { width: min(540px, 100%); }
.auth .step { view-transition-name: step; }
::view-transition-old(step) { animation: .22s var(--ease) both step-out; }
::view-transition-new(step) { animation: .45s var(--spring-soft) both step-in; }
@keyframes step-out { to { opacity: 0; transform: translateX(-24px); } }
@keyframes step-in { from { opacity: 0; transform: translateX(32px); } }

/* ---------- sign-in ---------- */
.signin .thr-sub .addr { color: var(--ink); font-weight: 600; view-transition-name: addr; display: inline-block; overflow-wrap: anywhere; }
.signin #email { view-transition-name: addr; }
.signin-form { margin-top: 30px; display: grid; gap: 14px; }
.signin-form .btn.go.wide { margin-top: 6px; }
.signin-form.code { margin-top: 32px; }
.signin-form .msg:empty { display: none; }
.ts-slot { min-height: 0; }
.ts-slot:not([hidden]) { min-height: 65px; }
.linkish { border: 0; background: none; padding: 0; font: 560 14px/1.4 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.linkish:hover { text-decoration-color: currentColor; }
.linkish .ic { width: 16px; height: 16px; }
.signin .row, .welcome .row { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-3); }
.signin .timer { font-variant-numeric: tabular-nums; }
.signin .hint { margin-top: 36px; display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.signin .hint .ic { margin-top: 2px; }
.signin .alt { margin-top: 18px; display: flex; justify-content: center; }
.signin .or { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.signin .or::before, .signin .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.signin .btn.wide { width: 100%; }
.signin .fine { margin-top: 22px; }
.signin .eyebrow + .thr-h1 { margin-top: 14px; }

/* returning browser: the account as a card you continue with */
.who-card { margin-top: 30px; display: grid; gap: 18px; padding: 18px; border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); background: var(--lift); }
.who-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.who-id b { display: block; font: 620 17px/1.2 var(--sans); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.who-id small { display: block; margin-top: 3px; font: 500 13px/1.2 var(--mono); color: var(--ink-3); }
.who-card .msg:empty { display: none; }

/* signed-in moment and the passkey offer */
.signin .burst, .signin .tile { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; }
.signin .burst { background: var(--good); color: var(--on-ag); animation: land .6s var(--spring) both; }
.signin .tile { background: var(--editor-w); color: var(--editor); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--editor) 22%, transparent); }
.signin .burst .ic, .signin .tile .ic { width: 34px; height: 34px; }
.signin .thr-acts .msg:empty { display: none; }
.signin #offer-msg { margin-top: 12px; }

/* ---------- first run: step rail ---------- */
.wsteps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 560 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.wsteps .st { display: inline-flex; align-items: center; gap: 8px; }
.wsteps .st i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--sans); font-style: normal; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-3); transition: background .3s, color .3s, box-shadow .3s; }
.wsteps .st.on { color: var(--ink); } .wsteps .st.on i { background: var(--ink); color: var(--bg); box-shadow: none; }
.wsteps .st.done i { background: var(--good); color: var(--on-ag); box-shadow: none; }
.wsteps .st.done i .ic { width: 12px; height: 12px; }
.wsteps .hnd { text-transform: none; letter-spacing: 0; font: 500 13px/1 var(--mono); color: var(--ink); }
.wsteps .rule { flex: 0 1 36px; height: 2px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.wsteps .rule::after { content: ''; position: absolute; inset: 0; background: var(--good); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--spring); }
.wsteps .rule.p::after { transform: scaleX(1); }

/* handle field: the address being written, availability that morphs */
.handle { margin-top: 30px; }
.handle > label { display: block; font: 560 13.5px/1 var(--sans); margin-bottom: 10px; }
.hf { position: relative; display: flex; align-items: center; height: 64px; padding: 0 14px 0 18px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s; font: 450 17px/1 var(--mono); }
.hf:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.hf:focus-within { box-shadow: inset 0 0 0 1.5px var(--focus), 0 0 0 4px color-mix(in srgb, var(--focus) 15%, transparent); }
.hf .pre { color: var(--ink-3); white-space: nowrap; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }
.hf input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 600 17px/1 var(--mono); letter-spacing: -0.01em; padding: 0 0 0 1px; caret-color: var(--focus); }
.hf input:focus-visible { outline: 0; animation: none; }
.hf .state { flex: none; width: 30px; height: 30px; display: grid; place-items: center; position: relative; }
.hf .state > * { position: absolute; transition: opacity .2s, transform .45s var(--spring); }
.hf .state .ic { width: 16px; height: 16px; }
.hf .spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--ink); animation: rot .8s linear infinite; }
.hf .ok, .hf .no, .hf .spin { opacity: 0; transform: scale(.4); }
.hf[data-st='checking'] .spin, .hf[data-st='ok'] .ok, .hf[data-st='taken'] .no, .hf[data-st='reserved'] .no, .hf[data-st='invalid'] .no { opacity: 1; transform: none; }
.hf .ok, .hf .no { color: var(--on-ag); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.hf .ok { background: var(--good); } .hf .no { background: var(--bad); }
.hf[data-st='ok'] { box-shadow: inset 0 0 0 1.5px var(--good), 0 0 0 4px color-mix(in srgb, var(--good) 14%, transparent); }
.hf[data-st='taken'], .hf[data-st='reserved'], .hf[data-st='invalid'] { box-shadow: inset 0 0 0 1.5px var(--bad), 0 0 0 4px color-mix(in srgb, var(--bad) 12%, transparent); }
.hf.shake { animation: shake .4s var(--ease); }
.hmsg { min-height: 24px; margin-top: 12px; font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--ink-2); }
.hmsg.ok { color: var(--good); } .hmsg.bad { color: var(--bad); }
.hmsg b { color: var(--ink); font-weight: 600; }
.sugg { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; margin-top: 4px; }
.sugg button { height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font: 500 13.5px/1 var(--mono); color: var(--ink); cursor: pointer; transition: background .15s, box-shadow .15s, transform .2s var(--spring); }
.sugg button:hover { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--ink-3); transform: translateY(-1px); }
.rules { margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.preview-url { margin-top: 26px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); font: 450 14px/1.4 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.preview-url b { color: var(--ink); font-weight: 600; }
.handle .btn.wide { width: 100%; margin-top: 22px; }

/* plug: the MCP address you copy */
.plug-label { margin-top: 28px; }
.plug { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 8px 8px 16px; border-radius: 16px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.plug .pin { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent); }
.plug code { flex: 1; min-width: 0; font: 500 14.5px/1.3 var(--mono); overflow-wrap: anywhere; color: var(--ink); }
.cbtn { position: relative; flex: none; height: 38px; min-width: 92px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--ink); color: var(--bg); font: 600 13.5px/1 var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; transition: background .25s, transform .15s var(--ease); }
.cbtn:hover { transform: translateY(-1px); } .cbtn:active { transform: scale(.96); }
.cbtn .no, .cbtn .ok { display: inline-flex; align-items: center; gap: 6px; transition: transform .45s var(--spring), opacity .2s; }
.cbtn .ok { position: absolute; inset: 0; justify-content: center; transform: translateY(110%); opacity: 0; }
.cbtn.done { background: var(--good); color: var(--on-ag); }
.cbtn.done .no { transform: translateY(-110%); opacity: 0; } .cbtn.done .ok { transform: none; opacity: 1; }
.cbtn .ic { width: 15px; height: 15px; }

/* clients: per-agent steps as an expandable list */
.clients { margin-top: 24px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.clients details { border-top: 1px solid var(--line); interpolate-size: allow-keywords; }
.clients details:first-child { border-top: 0; }
.clients summary { list-style: none; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; cursor: pointer; transition: background .15s; }
.clients summary::-webkit-details-marker { display: none; }
.clients summary:hover { background: var(--bg-2); }
.clients summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 0; }
.clients summary .agent__name { font-weight: 600; }
.clients summary .cl-lbl { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.clients summary .hint { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.clients summary .tw { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); transition: transform .4s var(--spring), background .15s; }
.clients details[open] summary .tw { transform: rotate(180deg); background: var(--bg-3); color: var(--ink); }
.clients details[open] summary { background: var(--bg-2); }
.clients details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
.clients details[open]::details-content { block-size: auto; }
.clients .how { padding: 6px 18px 20px 56px; background: var(--bg-2); display: grid; gap: 12px; }
.clients .how ol { counter-reset: s; display: grid; gap: 10px; }
.clients .how li { counter-increment: s; display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.clients .how li::before { content: counter(s); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11.5px/1 var(--sans); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); margin-top: 1px; }
.clients .how .kbd { font: 500 12.5px/1.5 var(--mono); padding: 3px 6px; border-radius: 6px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
.codeblock { position: relative; }
.codeblock pre { margin: 0; padding: 12px 104px 12px 14px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font: 450 12.5px/1.55 var(--mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.codeblock .cbtn { position: absolute; top: 6px; right: 6px; height: 32px; min-width: 84px; font-size: 12.5px; }
.cnote { display: flex; gap: 8px; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.cnote .ic { margin-top: 2px; color: var(--warn); }
@media (max-width: 560px) { .clients summary { grid-template-columns: auto minmax(0, 1fr) auto; } .clients summary .hint { display: none; } .clients .how { padding: 6px 14px 18px; } }

/* waiting for the agent's first call */
.listen { margin-top: 30px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 20px; border-radius: 20px; background: var(--bg-2); }
.radar { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.radar .agent { position: relative; z-index: 2; }
.radar::before, .radar::after { content: ''; position: absolute; inset: 6px; border-radius: 18px; border: 2px solid var(--live); opacity: 0; animation: radar 2s var(--ease) infinite; }
.radar::after { animation-delay: 1s; }
@keyframes radar { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
.listen p { font-size: 14.5px; color: var(--ink-2); } .listen p b { color: var(--ink); font-weight: 600; display: block; font-size: 16px; margin-bottom: 2px; }
.listen .dots i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-left: 3px; animation: dots 1.2s infinite; vertical-align: middle; }
.listen .dots i:nth-child(2) { animation-delay: .15s; } .listen .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }

/* connected: the agent docks into Riti */
.socket { display: flex; align-items: center; margin-top: 26px; }
.socket .agent--lg .mark { box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-2); background: var(--bg); }
.socket .wire { width: 64px; height: 2px; position: relative; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 10px); }
.socket .wire.live { background: var(--good); }
.socket .wire::after { content: ''; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--good); opacity: 0; }
.socket .wire.live::after { opacity: 1; animation: pulse-along 1.8s var(--ease) infinite; }
@keyframes pulse-along { from { left: 0; } to { left: calc(100% - 8px); } }
.socket .loftdoor { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-2); }
.socket .loftdoor .mark .door { width: 18px; height: 20px; }
.socket.landed .agent--lg { animation: dock .7s var(--spring) both; }
@keyframes dock { from { transform: translateX(-26px) rotate(-8deg); opacity: 0; } }
.socket .ok-badge { margin-left: -12px; margin-top: -34px; width: 22px; height: 22px; border-radius: 50%; background: var(--good); color: var(--on-ag); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg); animation: land .6s .25s var(--spring) both; z-index: 2; }
.socket .ok-badge .ic { width: 12px; height: 12px; }
.tryit { margin-top: 26px; padding: 18px 20px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); }
.tryit .eyebrow { margin-bottom: 10px; }
.tryit blockquote { margin: 0; font: italic 400 21px/1.35 var(--voice); color: var(--ink); text-wrap: pretty; }
.tryit .acts { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; }
.rowlink { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 22px; }
.later { font-size: 14px; color: var(--ink-2); }
.later:hover { color: var(--ink); }

/* ---------- agent consent ---------- */
.shake2 { display: flex; align-items: center; gap: 10px; }
.shake2 .wire { width: 46px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 5px, transparent 5px 9px); background-size: 9px 2px; animation: flow 1s linear infinite; }
@keyframes flow { to { background-position: 9px 0; } }
.shake2 .loftdoor { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-2); }
.shake2 .agent--lg .mark { box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-2); background: var(--bg); }
.unknown-tile { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--code-w); color: var(--code); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--code) 30%, transparent); font: 700 20px/1 var(--sans); }
.host { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.3 var(--mono); color: var(--ink-2); padding: 7px 10px; border-radius: 9px; background: var(--bg-2); overflow-wrap: anywhere; }
.host .ic { width: 14px; height: 14px; color: var(--good); }
.host.unknown .ic { color: var(--warn); }
/* rev 2026-10-22 (prototype/app-v2 #scr-connect): who you are on one line, one warning line, one choice */
.consent .from { margin-top: 12px; color: var(--ink-2); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.consent .from b { color: var(--ink); font: 560 .92em/1 var(--mono); }
.consent .notyou { border: 0; background: none; padding: 0; font: inherit; font-size: 14px; color: var(--ink-2); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.consent .notyou:hover { color: var(--ink); text-decoration-color: currentColor; }
.careful { margin-top: 20px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--code-w); color: var(--ink); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.careful .ic { color: var(--code); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.careful b { font-weight: 620; }
.presets { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.preset { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 16px 18px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; transition: box-shadow .2s; }
.preset:hover { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.preset input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.preset:has(input:checked) { box-shadow: inset 0 0 0 2.5px var(--ink); }
.preset:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.preset .dot { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); margin-top: 1px; display: grid; place-items: center; }
.preset:has(input:checked) .dot { box-shadow: inset 0 0 0 1.5px var(--ink); }
.preset:has(input:checked) .dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.preset b { display: block; font: 620 15.5px/1.3 var(--sans); }
.preset small { display: block; margin-top: 3px; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.custom { display: none; margin-top: 8px; padding: 4px 18px; border-radius: 14px; background: var(--bg-2); }
.choices:has(input[name='preset'][value='custom']:checked) .custom { display: block; }
.custom .choice { padding: 12px 0; border-top: 1px solid var(--line-2); }
.custom .choice:first-child { border-top: 0; }
.custom .rail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; }
.custom .rail legend { float: left; margin: 0; font: 560 14px/1.3 var(--sans); }
.custom .rail .why { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 12.5px; }
.custom .rail .opts { padding: 3px; gap: 2px; border-radius: 11px; background: var(--bg-3); box-shadow: none; justify-self: end; }
.custom .rail .o { min-height: 30px; padding: 4px 10px; border-radius: 8px; font-size: 13px; gap: 6px; }
.custom .rail .o .ic { width: 13px; height: 13px; }
.custom .rail .pane { border-radius: 8px; box-shadow: var(--shadow-1); }
.custom .picks { margin-top: 10px; background: var(--bg); max-height: 240px; }
.cfoot { margin-top: 22px; display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink-3); }
.cfoot .ic { width: 16px; height: 16px; margin-top: 2px; flex: none; }
@media (max-width: 560px) { .custom { padding: 4px 14px; } .custom .rail { grid-template-columns: minmax(0, 1fr); } .custom .rail .why { grid-row: auto; } .custom .rail .opts { justify-self: start; } }
.choices { margin-top: 18px; }
.choice { padding: 18px 0; border-top: 1px solid var(--line); }
.choice:first-of-type { border-top: 0; }
.rail { border: 0; padding: 0; margin: 0; min-width: 0; }
.rail legend { padding: 0; font: 600 15px/1.3 var(--sans); letter-spacing: -0.01em; margin-bottom: 4px; }
.rail .why { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
.rail .opts { position: relative; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 16px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); max-width: 100%; }
.rail .pane { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: 12px; background: var(--bg); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line-2); pointer-events: none; }
.rail.ready .pane { transition: left .45s var(--spring), top .45s var(--spring), width .45s var(--spring), height .45s var(--spring); }
.rail .o { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 12px; cursor: pointer; font: 520 14px/1.25 var(--sans); color: var(--ink-2); transition: color .2s, background .2s; }
.rail .o:hover { color: var(--ink); }
.rail .o input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rail .o:has(input:checked) { color: var(--ink); font-weight: 600; }
html:not(.js) .rail .o:has(input:checked) { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); }
.rail .o:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.rail .o .dflt { font: 500 12px/1 var(--sans); color: var(--ink-3); }
.rail .o .ic { width: 15px; height: 15px; }
.rail .o[data-tone='write'] .ic { color: var(--editor); } .rail .o[data-tone='read'] .ic { color: var(--viewer); } .rail .o[data-tone='no'] .ic { color: var(--ink-3); }
.rail .o[data-tone='share'] .ic { color: var(--conncode); }
html.still .rail .pane { transition: none; }
.picks { margin-top: 14px; display: grid; gap: 2px; padding: 6px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); max-height: 320px; overflow: auto; }
.picks .tick { padding: 10px; border-radius: 10px; transition: background .15s; font-weight: 560; font-size: 14.5px; }
.picks .tick:hover { background: var(--bg-2); }
.picks .new { font-size: 13px; color: var(--ink-3); padding: 6px 10px 4px; }
.picks .none { font-size: 13.5px; color: var(--ink-3); padding: 10px; }
.choices:has(input[name='doc_scope'][value='all']:checked) .picks { display: none; }
.decide { margin-top: 22px; display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.decide .btn { width: 100%; }
.decide-msg:empty { display: none; }
.decide-msg { margin-top: 12px; }
.sum { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.sum .pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font: 520 13px/1 var(--sans); color: var(--ink); }
.sum .pill .ic { width: 14px; height: 14px; color: var(--good); }
.consent .btn.wide { width: 100%; margin-top: 26px; }
@media (max-width: 560px) { .decide { grid-template-columns: 1fr; } .decide .btn.ghost { order: 2; } }