/* DOU-52 C3-UI styles for the onboarding and admin pages.
 * Ported from the DOU-122 prototype (site/styles.css, sha256 d0300052…): base, buttons, status,
 * notices, cards, forms, the onboarding shell, the Telegram hero, connect, console and tables.
 * Left out: the prototype chrome, simulated third-party frames, dialogs, the flow map, share pages
 * and the phase-B sections (files, usage, vault).
 * Semantic --d-* variables only (tokens.css + theme-frost.css): no raw colour values here (a test
 * checks).  No inline styles anywhere (CSP style-src 'self'): every rule lives in this file.
 */

*,
*::before,
*::after { box-sizing: border-box; }

/* The hidden attribute always wins over component display rules. */
[hidden] { display: none !important; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  background: var(--d-color-page);
}

body {
  margin: 0;
  min-width: 20rem;
  font-family: var(--d-font-sans);
  font-size: var(--d-font-size-md);
  line-height: var(--d-line-height-body);
  color: var(--d-color-text);
  background: var(--d-color-page);
}

img, svg { display: block; max-width: 100%; }
.icon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -0.2em; }

h1, h2, h3 { line-height: var(--d-line-height-heading); margin: 0 0 var(--d-space-3); }
p { margin: 0 0 var(--d-space-4); }
ul, ol { margin: 0; padding: 0; }
code { font-family: var(--d-font-mono); font-size: 0.92em; }
a { color: var(--d-color-accent); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- focus: always visible, token colour ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--d-color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }
main:focus { outline: none; }

.skip-link {
  position: fixed;
  left: var(--d-space-3); top: var(--d-space-3);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--d-color-text);
  color: var(--d-color-surface);
  padding: var(--d-space-3) var(--d-space-4);
  border-radius: var(--d-radius-sm);
  font-weight: 700;
}
.skip-link:focus { transform: none; }

/* The page itself is the container the component queries measure. */
.surface {
  container: surface / inline-size;
  position: relative;
  min-height: 100vh;
  color: var(--d-color-text);
  background: var(--d-gradient-ambient), var(--d-color-page);
  overflow-x: clip;
}

/* ==========================================================================
 * Type helpers
 * ======================================================================== */
.eyebrow, .ob-step, .con-nav-group {
  font-size: var(--d-font-size-xs);
  font-weight: 700;
  letter-spacing: var(--d-proto-label-tracking, 0.12em);
  text-transform: uppercase;
  color: var(--d-color-text-muted);
  margin: 0 0 var(--d-space-2);
}
.lede { font-size: var(--d-font-size-lg); color: var(--d-color-text-muted); max-width: var(--d-layout-reading-max); }
.small { font-size: var(--d-font-size-sm); }
.muted { color: var(--d-color-text-muted); }
.center { text-align: center; }
.block { display: block; }
.nowrap { white-space: nowrap; }
.h-small { font-size: var(--d-font-size-md); font-weight: 700; margin-top: var(--d-space-6); }
.h-card { font-size: var(--d-font-size-lg); font-weight: 650; margin: 0 0 var(--d-space-1); }
.h-section {
  font-size: var(--d-font-size-xl);
  font-weight: var(--d-proto-display-weight, 700);
  letter-spacing: var(--d-proto-display-tracking, -0.01em);
  margin: var(--d-space-8) 0 var(--d-space-3);
}
.tag {
  display: inline-block; vertical-align: 0.1em;
  font-size: var(--d-font-size-xs); font-weight: 600;
  padding: 0.05rem 0.5rem; border-radius: var(--d-radius-pill);
  background: var(--d-color-accent-soft); color: var(--d-color-text);
}
.count { font-size: var(--d-font-size-sm); font-weight: 700; background: var(--d-color-warning-soft); color: var(--d-color-warning); border-radius: var(--d-radius-pill); padding: 0 0.5rem; vertical-align: 0.15em; }
.text-link {
  display: inline-flex; align-items: center; gap: var(--d-space-1);
  min-height: var(--d-layout-touch-target);
  color: var(--d-color-accent); font-weight: 600;
  text-underline-offset: 3px;
}
.plain-list { list-style: none; display: grid; gap: var(--d-space-3); margin: var(--d-space-4) 0; }
.plain-list li { display: flex; gap: var(--d-space-3); align-items: flex-start; }
.plain-list .icon { margin-top: 0.2em; color: var(--d-color-text-muted); }

/* ==========================================================================
 * Buttons
 * ======================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--d-space-2);
  min-height: var(--d-layout-touch-target);
  padding: 0 var(--d-space-6);
  font: inherit; font-weight: 650; font-size: var(--d-font-size-md);
  text-decoration: none; text-align: center;
  border-radius: var(--d-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--d-motion-fast) var(--d-motion-ease), transform var(--d-motion-fast) var(--d-motion-ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--d-color-text); color: var(--d-color-surface); }
.btn-primary:hover { background: color-mix(in srgb, var(--d-color-text) 86%, var(--d-color-accent)); }
.btn-secondary { background: var(--d-color-surface); color: var(--d-color-text); border-color: var(--d-color-border); }
.btn-secondary:hover { background: var(--d-color-accent-soft); }
.btn-quiet { background: transparent; color: var(--d-color-text); }
.btn-quiet:hover { background: color-mix(in srgb, var(--d-color-text) 7%, transparent); }
.btn-danger { background: var(--d-color-danger); color: var(--d-color-surface); }
.btn-danger:hover { background: color-mix(in srgb, var(--d-color-danger) 85%, var(--d-color-text)); }
.btn-danger-text { color: var(--d-color-danger); }
.btn-block { width: 100%; }
.btn-lg { min-height: 3.5rem; font-size: var(--d-font-size-lg); }
.btn-sm { padding: 0 var(--d-space-3); font-size: var(--d-font-size-sm); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.stack { display: grid; gap: var(--d-space-3); margin: var(--d-space-6) 0; }
.stack-row { display: flex; flex-wrap: wrap; gap: var(--d-space-3); }
.row-wrap { display: flex; flex-wrap: wrap; gap: var(--d-space-2); align-items: center; }
/* An icon-led note: the text stays beside its icon and wraps within itself (Design, 360 px). */
p.row-wrap { flex-wrap: nowrap; align-items: flex-start; }
p.row-wrap > span { min-width: 0; }
form.inline { display: inline; margin: 0; }
.stack > form, .stack > form > .btn { width: 100%; }
.stack-row > form { display: inline-flex; }

/* The copy button (static/app.js) sits beside a read-only field; without scripts the field is
 * selectable and the button stays hidden (the "no-js" class is removed by app.js). */
.copy {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--d-space-2);
  min-height: var(--d-layout-touch-target); padding: 0 var(--d-space-4);
  font: inherit; font-weight: 650; font-size: var(--d-font-size-sm);
  color: var(--d-color-text); background: var(--d-color-surface);
  border: 1px solid var(--d-color-border); border-radius: var(--d-radius-pill); cursor: pointer;
}
.copy:hover { background: var(--d-color-accent-soft); }
.no-js .copy { display: none; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--d-space-2); margin: 0 0 var(--d-space-2); }
.copy-row input { flex: 1 1 14rem; font-family: var(--d-font-mono); }
.copy-status { font-size: var(--d-font-size-sm); color: var(--d-color-text-muted); min-height: 1.5em; margin: 0; }

/* ==========================================================================
 * Status (icon + text), notices
 * ======================================================================== */
.status {
  display: inline-flex; align-items: center; gap: var(--d-space-1);
  font-size: var(--d-font-size-sm); font-weight: 600;
  padding: 0.15rem 0.6rem 0.15rem 0.45rem;
  border-radius: var(--d-radius-pill);
  line-height: 1.4;
}
.status-ok { color: var(--d-color-success); background: var(--d-color-success-soft); }
.status-warn { color: var(--d-color-warning); background: var(--d-color-warning-soft); }
.status-err { color: var(--d-color-danger); background: var(--d-color-danger-soft); }
.status-info { color: var(--d-color-text); background: var(--d-color-accent-soft); }
.status-pending, .status-off { color: var(--d-color-text-muted); background: color-mix(in srgb, var(--d-color-text) 7%, var(--d-color-surface)); }
.status.is-live .icon { animation: spin 2.4s linear infinite; }

.notice {
  display: flex; gap: var(--d-space-3); align-items: flex-start;
  padding: var(--d-space-4);
  margin: var(--d-space-4) 0;
  border-radius: var(--d-radius-md);
  border: 1px solid var(--d-color-border);
  background: var(--d-color-surface);
  color: var(--d-color-text);
}
.notice > .icon { width: 1.4rem; height: 1.4rem; margin-top: 0.05rem; }
.notice > div { flex: 1; min-width: 0; }
.notice p { margin: 0 0 var(--d-space-1); }
.notice-title { font-weight: 700; }
.notice-actions { display: flex; flex-wrap: wrap; gap: var(--d-space-2); margin-top: var(--d-space-3); }
.notice-ok { background: var(--d-color-success-soft); border-color: color-mix(in srgb, var(--d-color-success) 35%, transparent); }
.notice-ok > .icon { color: var(--d-color-success); }
.notice-warn { background: var(--d-color-warning-soft); border-color: color-mix(in srgb, var(--d-color-warning) 35%, transparent); }
.notice-warn > .icon { color: var(--d-color-warning); }
.notice-err { background: var(--d-color-danger-soft); border-color: color-mix(in srgb, var(--d-color-danger) 35%, transparent); }
.notice-err > .icon { color: var(--d-color-danger); }
.notice-info { background: var(--d-color-accent-soft); }

.state-icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; margin-bottom: var(--d-space-4); }
.state-icon .icon { width: 1.6rem; height: 1.6rem; }
.state-ok { background: var(--d-color-success-soft); color: var(--d-color-success); }
.state-warn, .state-pending { background: var(--d-color-warning-soft); color: var(--d-color-warning); }
.state-err { background: var(--d-color-danger-soft); color: var(--d-color-danger); }
.state-info { background: var(--d-color-accent-soft); color: var(--d-color-text); }

/* A POST that reads as a link ("not you?", "Sign out" in a sentence). */
.link-button {
  display: inline; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; font-weight: 600; color: var(--d-color-accent);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ==========================================================================
 * Cards (glass in frost, solid elsewhere)
 * ======================================================================== */
.card {
  position: relative;
  background: var(--d-proto-card-bg, var(--d-color-surface));
  -webkit-backdrop-filter: blur(var(--d-proto-card-blur, 0px));
  backdrop-filter: blur(var(--d-proto-card-blur, 0px));
  border: 1px solid var(--d-proto-card-border, var(--d-color-border));
  box-shadow: var(--d-proto-card-shadow, var(--d-shadow-sm)), inset 0 0 0 1px var(--d-proto-card-edge, transparent);
  border-radius: var(--d-radius-lg);
  padding: var(--d-space-6);
  margin: var(--d-space-4) 0;
}
.card-soft { background: color-mix(in srgb, var(--d-proto-card-bg, var(--d-color-surface)) 70%, transparent); }
.card > :last-child { margin-bottom: 0; }

/* ==========================================================================
 * Forms
 * ======================================================================== */
.form { display: grid; gap: var(--d-space-4); margin: var(--d-space-4) 0; }
.field { display: grid; gap: var(--d-space-1); margin: 0 0 var(--d-space-3); }
/* The named-only controls also disappear when JavaScript is unavailable. */
/* Without JS, keep the email editable: a hidden invalid type=email blocks submission. */
#invite-create:has(#invite-kind-open:checked) #preapproval-field { display: none; }
.field label, .fieldset legend { font-weight: 650; font-size: var(--d-font-size-sm); }
.hint { margin: 0; font-size: var(--d-font-size-sm); color: var(--d-color-text-muted); }
input[type="text"], input[type="email"], input[type="number"], input[type="password"],
input[type="datetime-local"], input:not([type]), select, textarea {
  width: 100%;
  min-height: var(--d-layout-touch-target);
  padding: var(--d-space-2) var(--d-space-3);
  font: inherit; color: var(--d-color-text);
  background: var(--d-color-surface);
  border: 1px solid var(--d-color-border);
  border-radius: var(--d-radius-sm);
}
textarea { resize: vertical; }
[aria-invalid="true"] { border-color: var(--d-color-danger); box-shadow: 0 0 0 1px var(--d-color-danger); }
.field-error {
  display: flex; gap: var(--d-space-1); align-items: flex-start;
  margin: 0; font-size: var(--d-font-size-sm); font-weight: 600;
  color: var(--d-color-danger);
}
.field-error .icon { margin-top: 0.15em; }

.disclosure { margin: var(--d-space-4) 0; border-top: 1px solid var(--d-color-border); padding-top: var(--d-space-2); }
.disclosure summary {
  display: flex; align-items: center; gap: var(--d-space-2);
  min-height: var(--d-layout-touch-target);
  cursor: pointer; font-weight: 650; color: var(--d-color-text);
  list-style: none;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::before {
  content: ""; width: 0.5rem; height: 0.5rem; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--d-motion-fast);
}
.disclosure[open] summary::before { transform: rotate(45deg); }
/* A destructive action behind a disclosure: the explanation, then the real button. */
.confirm { margin: 0; border: 0; padding: 0; }
.confirm summary { color: var(--d-color-danger); font-size: var(--d-font-size-sm); min-height: max(24px, 1.5rem); }
.confirm[open] { flex-basis: 100%; }
.confirm-body { padding: var(--d-space-2) 0 0; font-size: var(--d-font-size-sm); }

/* ==========================================================================
 * Onboarding shell
 * ======================================================================== */
.ob {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 100vh;
  padding: var(--d-space-4) var(--d-space-4) 0;
  overflow: hidden;
}
/* thin orbital arc (frost only: transparent elsewhere) */
.ob::before {
  content: ""; position: absolute; pointer-events: none;
  width: 140cqi; height: 140cqi; right: -95cqi; top: 18%;
  border-radius: 50%;
  border: 1px solid var(--d-proto-arc, transparent);
}
.ob-top { position: relative; display: flex; align-items: center; gap: var(--d-space-2); min-height: 2.5rem; }
.ob-word { font-weight: 700; letter-spacing: -0.02em; color: var(--d-color-text); text-decoration: none; }
.ob-step { margin: 0 0 0 auto; }
.ob-body { position: relative; flex: 1; width: 100%; max-width: 32rem; margin: 0 auto; padding: var(--d-space-8) 0; }
.ob-wide .ob-body { max-width: 56rem; }
.ob-body h1 {
  font-size: clamp(1.75rem, 7cqi, 2.6rem);
  font-weight: var(--d-proto-display-weight, 750);
  letter-spacing: var(--d-proto-display-tracking, -0.02em);
}
.ob-foot {
  position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--d-space-2);
  border-top: 1px solid color-mix(in srgb, var(--d-color-border) 70%, transparent);
  font-size: var(--d-font-size-xs); letter-spacing: var(--d-proto-label-tracking, 0.08em); text-transform: uppercase;
  color: var(--d-color-text-muted);
}
.ob-foot a, .ob-foot button { color: inherit; min-height: var(--d-layout-touch-target); display: inline-flex; align-items: center; padding: 0 var(--d-space-2); }
.ob-foot button { font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; cursor: pointer; text-decoration: underline; }
.ob-foot-links { display: flex; flex-wrap: wrap; align-items: center; }

.logo {
  display: inline-block; flex: none;
  background: currentColor;
  -webkit-mask: url("29-master.svg") center / contain no-repeat;
  mask: url("29-master.svg") center / contain no-repeat;
  color: var(--d-color-text);
}
.logo-sm { width: 1.4rem; height: 1.6rem; }

.steps { list-style: none; display: grid; gap: var(--d-space-3); margin: var(--d-space-3) 0 var(--d-space-4); }
.steps li { display: flex; gap: var(--d-space-3); align-items: flex-start; }
.steps-n {
  flex: none; width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--d-color-text); font-size: var(--d-font-size-sm); font-weight: 700;
}
.note-quote { margin: var(--d-space-4) 0; padding: var(--d-space-4) var(--d-space-6); border-left: 3px solid var(--d-color-accent); background: var(--d-proto-card-bg, var(--d-color-surface)); border-radius: 0 var(--d-radius-md) var(--d-radius-md) 0; }
.note-quote blockquote { margin: 0; font-size: var(--d-font-size-lg); }
.note-quote p { margin: 0; }
.note-quote figcaption { margin-top: var(--d-space-2); font-size: var(--d-font-size-sm); color: var(--d-color-text-muted); }
.note-quote figcaption::before { content: "\2014\00a0"; }

.wait-card { padding: var(--d-space-4); border: 1px dashed var(--d-color-border); border-radius: var(--d-radius-md); margin: var(--d-space-6) 0; }
.wait-card p { margin: var(--d-space-2) 0 0; }

/* The setting-up bar (Akhil ask 2026-10-08; for DOU-122 to review): an estimate the server draws as
 * SVG geometry (no style attribute), plus a CSS-only sheen while the worker builds.  The sheen stops
 * once setting up is slow (.is-held) and for prefers-reduced-motion (the rule at the end). */
.setup-bar {
  height: 0.5rem; margin: var(--d-space-4) 0 var(--d-space-3);
  border-radius: var(--d-radius-pill); overflow: hidden;
}
.setup-bar > svg { display: block; width: 100%; height: 100%; }
.setup-bar-track { fill: color-mix(in srgb, var(--d-color-text) 9%, var(--d-color-surface)); }
.setup-bar-fill { fill: var(--d-color-accent); }
.setup-sheen-edge { stop-color: var(--d-color-surface); stop-opacity: 0; }
.setup-sheen-mid { stop-color: var(--d-color-surface); stop-opacity: 0.45; }
.setup-bar-sheen { animation: setup-sheen 2.2s var(--d-motion-ease) infinite; }
.setup-bar.is-held .setup-bar-sheen { display: none; }
@keyframes setup-sheen { from { transform: translateX(0); } to { transform: translateX(140px); } }

.setup-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--d-space-1) var(--d-space-3);
  font-size: var(--d-font-size-sm); color: var(--d-color-text-muted);
}
.setup-steps li { display: inline-flex; align-items: center; gap: var(--d-space-1); }
.setup-steps .is-done { color: var(--d-color-success); }
.setup-steps .is-current { color: var(--d-color-text); font-weight: 600; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
 * Telegram hand-off
 * ======================================================================== */
.tg-hero {
  position: relative; overflow: hidden;
  margin: 0 calc(var(--d-space-4) * -1) var(--d-space-6);
  padding: var(--d-space-8) var(--d-space-4);
  border-radius: var(--d-radius-lg);
  background: var(--d-proto-dark-glow, none), var(--d-proto-dark-page, var(--d-color-brand-background));
  color: var(--d-proto-dark-text, var(--d-color-brand-foreground));
}
.tg-hero::after {
  content: ""; position: absolute; pointer-events: none;
  width: 170%; aspect-ratio: 1; left: 40%; top: 62%;
  border-radius: 50%;
  border-top: 1px solid var(--d-proto-dark-arc, transparent);
  transform: rotate(-18deg);
}
.tg-hero > * { position: relative; z-index: 1; }
.tg-hero .eyebrow, .tg-hero .lede, .tg-hero .small { color: var(--d-proto-dark-muted, var(--d-color-brand-foreground)); }
.tg-hero h1 { color: inherit; }
.tg-hero :focus-visible { outline-color: var(--d-proto-dark-text, var(--d-color-brand-foreground)); }
.tg-hero .btn-primary { background: var(--d-proto-dark-text, var(--d-color-brand-foreground)); color: var(--d-proto-dark-page, var(--d-color-brand-background)); }
.tg-hero .btn-primary:hover { background: color-mix(in srgb, var(--d-proto-dark-text, var(--d-color-brand-foreground)) 88%, var(--d-color-accent)); }
.tg-hero .notice { color: var(--d-color-text); }
.tg-hero .stack { margin-bottom: 0; }
.tg-desktop-intro, .tg-qr-card { display: none; }
.tg-qr { width: min(100%, 16rem); }
.tg-qr svg { display: block; width: 100%; height: auto; }
@media (min-width: 48rem) {
  .tg-has-link .tg-phone-intro { display: none; }
  .tg-has-link .tg-desktop-intro { display: inline; }
  .tg-qr-card { display: grid; justify-items: center; gap: var(--d-space-4); text-align: center; }
}
.linked { display: flex; flex-wrap: wrap; align-items: center; gap: var(--d-space-2); margin: var(--d-space-4) 0 var(--d-space-3); }
.linked .status { font-size: var(--d-font-size-md); }

/* ==========================================================================
 * Connect / Google
 * ======================================================================== */
.conn-head { display: flex; gap: var(--d-space-3); align-items: flex-start; }
.conn-icon {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--d-radius-sm);
  display: grid; place-items: center; font-weight: 800;
  background: color-mix(in srgb, var(--d-color-text) 8%, var(--d-color-surface));
  border: 1px solid var(--d-color-border);
}
/* Official marks retain their colours in both themes. Letters remain if loading fails. */
.conn-logo { width: 40px; height: 40px; background: var(--d-proto-connection-logo-bg); color: var(--d-proto-connection-logo-text); position: relative; }
.conn-logo img { position: absolute; width: 24px; height: 24px; object-fit: contain; visibility: hidden; }
.conn-logo.is-loaded img { visibility: visible; }
.conn-logo.is-loaded .conn-letter { visibility: hidden; }
.connection-summary { list-style: none; display: grid; gap: var(--d-space-3); }
.connection-summary a { display: flex; align-items: center; gap: var(--d-space-3); color: inherit; text-decoration: none; }
.connection-summary a > span:last-child { min-width: 0; display: grid; gap: var(--d-space-1); }
.connection-summary a:hover strong { text-decoration: underline; }
/* D-447: the Google Drive files line sits under the Google row, aligned with the row text (40px logo + gap). */
.connection-drive { display: flex; flex-wrap: wrap; align-items: center; gap: var(--d-space-1) var(--d-space-3); margin: var(--d-space-2) 0 0 calc(40px + var(--d-space-3)); font-size: var(--d-font-size-sm); }
.connection-drive-name { font-weight: 600; }
.connection-summary .connection-drive-link { display: inline-flex; align-items: center; min-height: 24px; color: var(--d-color-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.scope-list { list-style: none; display: grid; gap: var(--d-space-3); margin: var(--d-space-4) 0; }
.scope-list li { display: flex; gap: var(--d-space-3); align-items: flex-start; }
.scope-list li > .icon { margin-top: 0.25em; color: var(--d-color-text-muted); }
.scope-list p { margin: 0; font-size: var(--d-font-size-sm); color: var(--d-color-text-muted); }
.result-list { list-style: none; display: grid; gap: var(--d-space-2); margin: var(--d-space-4) 0; }
.result-list li { display: flex; flex-wrap: wrap; gap: var(--d-space-2) var(--d-space-3); align-items: center; padding: var(--d-space-3); border: 1px solid var(--d-color-border); border-radius: var(--d-radius-md); background: var(--d-proto-card-bg, var(--d-color-surface)); }
.res-name { font-weight: 650; margin-right: auto; }
.walk { list-style: none; display: grid; gap: var(--d-space-6); margin: var(--d-space-6) 0; }
.walk > li { display: flex; gap: var(--d-space-3); }
.walk > li > div { flex: 1; min-width: 0; }
.walk-n { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--d-color-text); color: var(--d-color-surface); font-weight: 700; }
.schem { margin: var(--d-space-2) 0 0; }
.schem-screen { border: 1px dashed var(--d-color-text-muted); border-radius: var(--d-radius-md); padding: var(--d-space-4); background: var(--d-color-surface); display: grid; gap: var(--d-space-2); }
.schem-line { height: 0.5rem; border-radius: 4px; background: color-mix(in srgb, var(--d-color-text) 12%, transparent); }
.w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; }
.schem-title { font-weight: 700; font-size: var(--d-font-size-sm); }
.schem-foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--d-space-2); font-size: var(--d-font-size-sm); }
.schem-link { text-decoration: underline; padding: 0.1rem 0.3rem; border-radius: 4px; width: fit-content; font-size: var(--d-font-size-sm); }
.schem-link.is-dim { color: var(--d-color-text-muted); text-decoration: none; }
.schem-link.is-hl { outline: 3px solid var(--d-color-warning); outline-offset: 2px; background: var(--d-color-warning-soft); font-weight: 700; }
.schem-btn { padding: 0.2rem 0.6rem; border-radius: 4px; background: color-mix(in srgb, var(--d-color-text) 12%, transparent); }

/* can-do */
.can-do { margin-top: var(--d-space-8); }
.can-do + .small { margin-top: var(--d-space-8); }
.can-do-group { margin-top: var(--d-space-6); }
.can-do-group > h3 { margin-bottom: var(--d-space-3); }
.can-do-grid { list-style: none; display: grid; gap: var(--d-space-3); grid-template-columns: 1fr; }
.can-do-card { margin: 0; padding: var(--d-space-4) var(--d-space-6); }
.can-do-card > .icon { width: 1.5rem; height: 1.5rem; color: var(--d-color-accent); margin-bottom: var(--d-space-2); }
.can-do-card h4 { font-size: var(--d-font-size-md); margin: 0 0 var(--d-space-1); }
.can-do-ask { margin: 0 0 var(--d-space-1); font-style: italic; }
@container surface (min-width: 40rem) {
  .tg-hero { margin-left: 0; margin-right: 0; padding: var(--d-space-12) var(--d-space-8); }
}
@media (min-width: 1024px) {
  .can-do-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
 * Console
 * ======================================================================== */
.con { display: block; min-height: 100vh; }
.con-side { display: none; }
.con-top {
  display: flex; align-items: center; gap: var(--d-space-2);
  padding: var(--d-space-3) var(--d-space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--d-color-border) 70%, transparent);
  background: color-mix(in srgb, var(--d-color-page) 80%, transparent);
}
.con-top-who { font-weight: 700; margin-right: auto; font-size: var(--d-font-size-sm); }
.con-content { padding: var(--d-space-6) var(--d-space-4) var(--d-space-16); max-width: 60rem; }
.con-h1 {
  font-size: clamp(1.75rem, 6cqi, 2.5rem);
  font-weight: var(--d-proto-display-weight, 750);
  letter-spacing: var(--d-proto-display-tracking, -0.02em);
}
.con-tabs {
  position: sticky; bottom: 0; z-index: 20;
  background: color-mix(in srgb, var(--d-color-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--d-color-border);
  padding-bottom: env(safe-area-inset-bottom);
}
.con-tabs ul { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.con-tab {
  display: grid; justify-items: center; align-content: center; gap: 2px;
  width: 100%; min-height: 3.5rem; padding: var(--d-space-1);
  font: inherit; font-size: 0.75rem; font-weight: 600;
  color: var(--d-color-text-muted); text-decoration: none;
}
.con-tab .icon { width: 1.35rem; height: 1.35rem; }
.con-tab[aria-current="page"] { color: var(--d-color-text); }
.con-tab[aria-current="page"] .icon { color: var(--d-color-accent); }
.con-tab[aria-current="page"] span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.con-signout .btn { min-height: var(--d-layout-touch-target); }

@container surface (min-width: 48rem) {
  .con { display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
  .con-side {
    display: flex; flex-direction: column; gap: var(--d-space-4);
    position: sticky; top: 0; align-self: start;
    height: 100vh; overflow-y: auto;
    padding: var(--d-space-6) var(--d-space-4);
    border-right: 1px solid color-mix(in srgb, var(--d-color-border) 70%, transparent);
    background: color-mix(in srgb, var(--d-proto-card-bg, var(--d-color-surface)) 60%, transparent);
  }
  .con-top, .con-tabs { display: none; }
  .con-content { padding: var(--d-space-8) var(--d-space-8) var(--d-space-16); }
}
.con-brand { display: flex; align-items: center; gap: var(--d-space-2); font-weight: 700; }
.con-who { display: flex; gap: var(--d-space-3); align-items: center; }
.con-who > span:last-child { display: grid; gap: var(--d-space-1); justify-items: start; font-size: var(--d-font-size-sm); }
.con-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--d-color-text); color: var(--d-color-surface); font-weight: 700; flex: none; }
.con-nav ul { list-style: none; display: grid; gap: 2px; }
.con-nav-link {
  display: flex; align-items: center; gap: var(--d-space-3);
  min-height: var(--d-layout-touch-target); padding: 0 var(--d-space-3);
  border-radius: var(--d-radius-sm);
  color: var(--d-color-text); text-decoration: none; font-weight: 550;
}
.con-nav-link:hover { background: color-mix(in srgb, var(--d-color-text) 6%, transparent); }
.con-nav-link[aria-current="page"] { background: var(--d-color-text); color: var(--d-color-surface); }
.con-side .con-signout { margin-top: auto; }

.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--d-space-2); margin: var(--d-space-2) 0; }
.shortcut-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--d-space-3); }
.shortcut {
  display: flex; align-items: center; gap: var(--d-space-2); width: 100%;
  min-height: 3.5rem; padding: var(--d-space-2);
  border: 1px solid var(--d-proto-card-border, var(--d-color-border));
  border-radius: var(--d-radius-md);
  background: var(--d-proto-card-bg, var(--d-color-surface));
  color: var(--d-color-text); text-decoration: none; font: inherit; font-weight: 600; text-align: left;
  box-shadow: var(--d-proto-card-shadow, var(--d-shadow-sm));
}
.shortcut:hover { border-color: var(--d-color-text); }
.shortcut > span { min-width: 0; overflow-wrap: anywhere; }
@container surface (min-width: 48rem) { .shortcut-grid { grid-template-columns: repeat(3, 1fr); } }
.empty { text-align: center; padding: var(--d-space-8) var(--d-space-4); border: 1px dashed var(--d-color-border); border-radius: var(--d-radius-lg); display: grid; justify-items: center; gap: var(--d-space-1); }
.empty > .icon { width: 2rem; height: 2rem; color: var(--d-color-text-muted); margin-bottom: var(--d-space-2); }
.empty p { margin: 0; max-width: 28rem; }
.empty-line { margin: var(--d-space-2) 0; }

.conn-list { list-style: none; display: grid; gap: var(--d-space-3); }
.conn-row { display: grid; grid-template-columns: auto 1fr; gap: var(--d-space-3); padding: var(--d-space-4); border: 1px solid var(--d-proto-card-border, var(--d-color-border)); border-radius: var(--d-radius-lg); background: var(--d-proto-card-bg, var(--d-color-surface)); box-shadow: var(--d-proto-card-shadow, var(--d-shadow-sm)); }
.card .conn-row { box-shadow: none; padding: 0; border: 0; background: none; }
.conn-row.is-muted .conn-text { opacity: 0.8; }
.conn-text { display: grid; gap: var(--d-space-1); justify-items: start; }
.conn-text p, .conn-text h2, .conn-text h3 { margin: 0; }
.conn-note { display: flex; flex-wrap: nowrap; gap: var(--d-space-2); align-items: flex-start; }
.conn-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--d-space-2); align-items: flex-start; }
@container surface (min-width: 40rem) {
  .conn-row { grid-template-columns: auto 1fr auto; align-items: start; }
  .conn-actions { grid-column: auto; justify-content: flex-end; max-width: 20rem; }
}

.facts { display: grid; grid-template-columns: 1fr; gap: var(--d-space-3); margin: var(--d-space-4) 0; }
.facts > div { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: var(--d-space-2); padding: var(--d-space-2) 0; border-bottom: 1px solid color-mix(in srgb, var(--d-color-border) 60%, transparent); }
.facts dt { font-size: var(--d-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--d-color-text-muted); }
.facts dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--d-space-1); align-items: center; word-break: break-word; }

/* ==========================================================================
 * Admin (admin.doubld.ai): one page, three anchored sections
 * ======================================================================== */
.adm { max-width: 64rem; margin: 0 auto; padding: var(--d-space-4) var(--d-space-4) var(--d-space-16); }
.adm-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--d-space-2) var(--d-space-4); padding: var(--d-space-2) 0 var(--d-space-4); border-bottom: 1px solid color-mix(in srgb, var(--d-color-border) 70%, transparent); }
.adm-brand { display: flex; align-items: center; gap: var(--d-space-2); font-weight: 700; margin-right: auto; color: var(--d-color-text); text-decoration: none; }
.adm-nav { position: sticky; top: 0; z-index: 10; margin: 0 calc(var(--d-space-4) * -1); padding: var(--d-space-2) var(--d-space-4); background: color-mix(in srgb, var(--d-color-page) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--d-color-border) 60%, transparent); }
.adm-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--d-space-2); }
.adm-nav a { display: inline-flex; align-items: center; gap: var(--d-space-1); min-height: var(--d-layout-touch-target); padding: 0 var(--d-space-3); border-radius: var(--d-radius-pill); border: 1px solid var(--d-color-border); background: var(--d-color-surface); color: var(--d-color-text); text-decoration: none; font-size: var(--d-font-size-sm); font-weight: 600; }
.adm section { scroll-margin-top: 4rem; }
.adm h1 { font-size: clamp(1.75rem, 6cqi, 2.5rem); font-weight: var(--d-proto-display-weight, 750); letter-spacing: var(--d-proto-display-tracking, -0.02em); margin-top: var(--d-space-6); }
.req-list { list-style: none; display: grid; gap: var(--d-space-2); }
.req-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--d-space-2) var(--d-space-4); padding: var(--d-space-3) var(--d-space-4); border: 1px solid var(--d-color-border); border-radius: var(--d-radius-md); background: var(--d-proto-card-bg, var(--d-color-surface)); }
.req-row p { margin: 0; }

/* responsive tables: rows become cards on narrow surfaces */
.rtable { width: 100%; border-collapse: collapse; font-size: var(--d-font-size-sm); }
.rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rtable tr { display: grid; gap: var(--d-space-1); padding: var(--d-space-3) var(--d-space-4); margin-bottom: var(--d-space-2); border: 1px solid var(--d-color-border); border-radius: var(--d-radius-md); background: var(--d-proto-card-bg, var(--d-color-surface)); }
.rtable th, .rtable td { display: flex; flex-wrap: wrap; gap: var(--d-space-2); align-items: center; text-align: left; font-weight: 400; padding: 0; }
.rtable th[scope="row"] { font-weight: 600; font-size: var(--d-font-size-md); display: block; word-break: break-word; }
.rtable td::before { content: attr(data-label); min-width: 6rem; color: var(--d-color-text-muted); font-size: var(--d-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.rtable td.td-actions::before { display: none; }
@container surface (min-width: 48rem) {
  .rtable thead { position: static; width: auto; height: auto; clip: auto; display: table-header-group; }
  .rtable tr { display: table-row; border: 0; padding: 0; background: none; }
  .rtable tbody tr { border-top: 1px solid var(--d-color-border); }
  .rtable th, .rtable td { display: table-cell; padding: var(--d-space-3) var(--d-space-2); vertical-align: middle; }
  .rtable thead th { font-size: var(--d-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--d-color-text-muted); font-weight: 600; }
  .rtable th[scope="row"] { font-size: var(--d-font-size-sm); }
  .rtable td::before { display: none; }
  .td-actions { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .setup-bar-sheen { display: none; }
}

/* Credential form disclosures reuse the console fields, with or without scripts. */
#credential-add:not(:has(#key-preset option[value="generic"]:checked)) [data-key-destination],
#credential-add:not(:has(#key-kind option[value="header"]:checked)) [data-key-auth="header"],
#credential-add:not(:has(#key-kind option[value="basic"]:checked)) [data-key-auth="basic"],
#credential-add:not(:has(#key-kind option[value="query"]:checked)) [data-key-auth="query"],
#credential-add:not(:has(#key-kind option[value="cookie"]:checked)) [data-key-auth="cookie"] { display: none; }

/* D-335: the credential controls use the standard labels and stack spacing. */
.credential-freeze { margin-bottom: var(--d-space-3); }
.credential-access { border: 0; padding: 0; margin: 0; min-width: 0; }
.credential-access legend { margin-bottom: var(--d-space-3); }
.credential-option { grid-template-columns: auto 1fr; column-gap: var(--d-space-2); }
.credential-option label { display: contents; }
.credential-option input { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
.credential-option .muted { grid-column: 2; }
.credential-actions { justify-content: flex-start; align-items: baseline; }
.credential-change { border: 0; padding: 0; margin: 0; }
.credential-actions .confirm[open], .credential-change[open] { flex-basis: 100%; }

/* Keep the complete approval preview readable on narrow owner screens. */
.remote-preview { white-space: pre-wrap; overflow-wrap: anywhere; }

#credential-add:not(:has(#key-preset option[value="openai"]:checked)) [data-openai-scope] { display: none; }