/* Sign-in and account pages. */
[hidden] { display: none !important; }
.dy-auth { width: min(100%, var(--geometry-width-30rem-0220cc6)); margin: 0 auto; padding: clamp(var(--spacing-padding-2rem-bca5ebd), var(--spacing-padding-7vw-0738a04), var(--spacing-padding-4-5rem-41dca9e)) clamp(var(--spacing-padding-1rem-b8be0c7), var(--spacing-padding-4vw-3bfef1b), var(--spacing-padding-1-5rem-b81aec4)) var(--spacing-padding-3rem-550d167); flex: 1; }
/* In the Android app there's no site header (dyadic.css .is-app): the page clears the status bar and the gesture bar
   itself, and sits in the middle of the screen. */
.is-app .dy-auth { box-sizing: border-box; display: flex; flex-direction: column; justify-content: safe center;
  padding-top: calc(clamp(var(--spacing-padding-2rem-bca5ebd), var(--spacing-padding-7vw-0738a04), var(--spacing-padding-4-5rem-41dca9e)) + env(safe-area-inset-top, var(--spacing-padding-top-0px-33a3c91))); padding-bottom: calc(var(--spacing-padding-3rem-550d167) + env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91))); }
.dy-auth h1 { font-size: clamp(var(--typography-font-size-1-8rem-1e2e541), var(--typography-font-size-5vw-897330e), var(--typography-font-size-2-4rem-84ca4d0)); margin: 0 0 var(--spacing-margin-5rem-ef026cb); letter-spacing: var(--typography-letter-spacing-01em-a3043ca); }
.dy-auth > p { color: var(--muted); margin: 0 0 var(--spacing-margin-1-6rem-9ef54f1); }
.dy-card { background: var(--panel); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-md); padding: var(--spacing-padding-1-2rem-a7b00d3); display: grid; gap: var(--spacing-gap-8rem-818b9f7); margin-bottom: var(--spacing-padding-1rem-b8be0c7); }
.dy-card h2 { margin: 0; font-size: var(--typography-font-size-1-02rem-f6100ff); }
.dy-card p { margin: 0; color: var(--muted); font-size: var(--typography-font-size-92rem-c7cd355); }
.dy-field { display: grid; gap: var(--spacing-gap-35rem-1304a2b); font-size: var(--typography-font-size-9rem-2ad2e76); font-weight: var(--type-weight-control); }
.dy-field input { box-sizing: border-box; width: 100%; min-width: 0; font: inherit; font-weight: var(--typography-font-weight-400-26d2286); min-height: var(--geometry-min-height-2-75rem-3cc807c); padding: 0 var(--spacing-padding-9rem-2ad2e76); border-radius:var(--r-sm); border: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--paper); color: var(--ink); }
.dy-field input:focus { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-border-1px-93e2062); }
.dy-auth .dy-button { width: 100%; justify-content: center; gap: var(--spacing-gap-55rem-f5020a7); cursor: pointer; font: inherit; font-weight: var(--type-weight-control); color: var(--ink); }
.dy-auth .dy-button--primary { color: var(--accent-ink); }
.dy-button:disabled { opacity: .6; cursor: progress; }
.dy-or { display: flex; align-items: center; gap: var(--spacing-gap-8rem-818b9f7); color: var(--dim); font-size: var(--typography-font-size-85rem-2e72ebc); margin: var(--spacing-margin-3rem-fb2375d) 0 var(--spacing-padding-1rem-b8be0c7); }
.dy-or::before, .dy-or::after { content: ""; flex: 1; border-top: var(--geometry-border-1px-93e2062) solid var(--line); }
.dy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-margin-5rem-ef026cb); }
.dy-list li { display: flex; align-items: center; gap: var(--spacing-gap-8rem-818b9f7); justify-content: space-between; padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-padding-75rem-4cf1798); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); }
.dy-list small { display: block; color: var(--dim); font-size: var(--typography-font-size-8rem-818b9f7); }
.dy-row { display: flex; gap: var(--spacing-padding-6rem-d0bc70f); flex-wrap: wrap; }
.dy-row > * { flex: 1; }
.dy-banner { border: var(--geometry-border-1px-93e2062) solid var(--accent); background: var(--accent-surface); border-radius:var(--r-sm); padding: var(--spacing-padding-9rem-2ad2e76) var(--spacing-padding-1rem-b8be0c7); margin-bottom: var(--spacing-padding-1rem-b8be0c7); }
.dy-banner p { margin: var(--spacing-margin-3rem-fb2375d) 0 0; color: var(--muted); font-size: var(--typography-font-size-92rem-c7cd355); }
.sr-only { position: absolute; width: var(--geometry-border-1px-93e2062); height: var(--geometry-border-1px-93e2062); padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.dy-banner .dy-button { justify-content: center; white-space: nowrap; }
.dy-banner--danger { border-color: var(--red); }
.dy-banner--danger .dy-button { margin-top: var(--spacing-gap-8rem-818b9f7); }
.dy-small { color: var(--muted); font-size: var(--typography-font-size-92rem-c7cd355); margin: var(--spacing-margin-4rem-7fdc8b1) 0; }
.dy-small a, .dy-auth p a { color: var(--accent); }
.dy-steps { display: flex; gap: var(--spacing-margin-4rem-7fdc8b1); list-style: none; padding: 0; margin: 0 0 var(--spacing-padding-1-2rem-a7b00d3); counter-reset: step; flex-wrap: wrap; }
.dy-steps li { counter-increment: step; font-size: var(--typography-font-size-8rem-818b9f7); color: var(--dim); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244); padding: var(--spacing-padding-25rem-1677828) var(--spacing-padding-65rem-bcca6ce); }
.dy-steps li::before { content: counter(step) ". "; }
.dy-steps li.is-current { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); font-weight: var(--typography-font-weight-700-99ee502); }
.dy-steps li.is-done { color: var(--green); border-color: var(--green); }
.dy-check { display: flex; gap: var(--spacing-padding-6rem-d0bc70f); align-items: center; margin: var(--spacing-margin-2rem-4cd30ed) 0 var(--spacing-padding-1rem-b8be0c7); font-size: var(--typography-font-size-95rem-adb8a86); }
.dy-check input { width: var(--geometry-width-1-2rem-a7b00d3); height: var(--geometry-width-1-2rem-a7b00d3); accent-color: var(--accent); }
.dy-auth section > h1 { margin-top: 0; }
/* Recovery codes: numbered cards, five words each. */
.dy-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--spacing-margin-5rem-ef026cb); margin: 0; padding: 0; list-style: none; font: inherit; }
.dy-code { display: flex; align-items: center; gap: var(--spacing-gap-7rem-7eff2a1); padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-gap-7rem-7eff2a1); border-radius:var(--r-sm); border: var(--geometry-border-1px-93e2062) solid hsl(var(--hue) 55% 55% / .45);
  background: linear-gradient(135deg, hsl(var(--hue) 60% 50% / .14), transparent 70%); white-space: normal; }
.dy-code__n { flex: none; display: grid; place-items: center; width: var(--geometry-width-1-7rem-82991a7); height: var(--geometry-width-1-7rem-82991a7); border-radius: 50%; font-weight: var(--typography-font-weight-800-1a1cf79); font-size: var(--typography-font-size-85rem-2e72ebc);
  background: hsl(var(--hue) 65% 62%); color: var(--accent-ink); }
.dy-code__words { display: flex; flex-wrap: wrap; gap: var(--spacing-gap-15rem-e51094a) var(--spacing-margin-4rem-7fdc8b1); font: 600 var(--typography-font-size-95rem-adb8a86)/1.35 var(--font-mono); color: var(--ink); }
.dy-code__words span { white-space: nowrap; }
.dy-code__words span:not(:last-child)::after { content: "-"; color: var(--dim); margin-left: var(--spacing-margin-4rem-7fdc8b1); }
.dy-confirm-code { display: grid; gap: var(--spacing-padding-6rem-d0bc70f); border-top: var(--geometry-border-1px-93e2062) dashed var(--line); padding-top: var(--spacing-padding-9rem-2ad2e76); }
/* Authenticator app setup. */
.dy-totp { display: grid; gap: var(--spacing-gap-8rem-818b9f7); }
.dy-qr { justify-self: center; background: var(--color-background-fff-e08de71); border-radius:var(--r-sm); padding: var(--spacing-margin-4rem-7fdc8b1); line-height: 0; }
.dy-qr img { display: block; width: min(var(--geometry-width-13rem-e38b03b), var(--geometry-width-60vw-07739f3)); height: auto; }
.dy-key { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-margin-5rem-ef026cb); padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-padding-75rem-4cf1798); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); }
.dy-key code { font: 600 var(--typography-font-size-9rem-2ad2e76)/1.5 var(--font-mono); color: var(--ink); word-break: break-all; }
.dy-open-app { text-align: center; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .dy-open-app { display: none; } }
/* Confirm-it's-you dialog. */
/* Passkey rows: rename in place. */
.dy-pk-info { min-width: 0; overflow-wrap: anywhere; }
.dy-pk-actions { display: flex; gap: var(--spacing-margin-3rem-fb2375d); flex: none; }
.dy-pk-rename { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); width: 100%; }
.dy-pk-rename input { flex: 1; min-width: 0; font: inherit; min-height: var(--geometry-min-height-2-4rem-84ca4d0); padding: 0 var(--spacing-gap-7rem-7eff2a1); border-radius:var(--r-sm); border: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--paper); color: var(--ink); }
.dy-pk-rename input:focus { outline: var(--geometry-outline-2px-7476140) solid var(--cyan); outline-offset: var(--geometry-border-1px-93e2062); }
/* Signed-in devices. */
.dy-sessions li { justify-content: flex-start; }
.dy-sessions .dy-pk-info { flex: 1; }
.dy-sessions li > button { flex: none; }
.dy-sessions li.is-current { border-color: var(--accent); }
.dy-device { flex: none; display: grid; place-items: center; width: var(--geometry-min-height-2-4rem-84ca4d0); height: var(--geometry-min-height-2-4rem-84ca4d0); border-radius:var(--r-sm); background: var(--paper); color: var(--accent); }
.dy-badge { display: inline-block; margin-left: var(--spacing-margin-5rem-ef026cb); padding: var(--spacing-padding-05rem-98939d1) var(--spacing-margin-5rem-ef026cb); border-radius: var(--geometry-border-radius-999px-088f244); font-size: var(--typography-font-size-72rem-2a7309a); font-weight: var(--typography-font-weight-700-99ee502); vertical-align: .1em;
  background: var(--accent); color: var(--accent-ink); }
/* Connect an app: the consent card. */
.dy-connect { padding-top: clamp(var(--spacing-padding-1-5rem-b81aec4), var(--spacing-padding-top-6vw-f89fcb9), var(--spacing-padding-top-3-5rem-4c81e32)); }
.dy-consent { position: relative; overflow: hidden; gap: var(--spacing-padding-1rem-b8be0c7); padding: var(--spacing-margin-1-6rem-9ef54f1) var(--spacing-padding-1-4rem-2569574) var(--spacing-padding-1-4rem-2569574); text-align: left; }
.dy-consent::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--geometry-height-3px-ac33ff9); background: var(--accent-gradient); }
.dy-consent h1 { font-size: clamp(var(--typography-font-size-1-45rem-4556fac), var(--typography-font-size-5vw-897330e), var(--typography-font-size-1-8rem-1e2e541)); margin: 0; line-height: var(--typography-line-height-1-15-9f0e787); }
.dy-pair { display: flex; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f); }
.dy-pair__app, .dy-pair__mark { width: var(--geometry-min-height-2-75rem-3cc807c); height: var(--geometry-min-height-2-75rem-3cc807c); border-radius: 50%; flex: none; }
.dy-pair__app { display: grid; place-items: center; font-weight: var(--typography-font-weight-700-99ee502); font-size: var(--typography-font-size-1-15rem-3b14c93); color: var(--accent-ink); background: var(--accent-gradient); }
.dy-pair__mark { background: var(--paper); border: var(--geometry-border-1px-93e2062) solid var(--line); padding: var(--spacing-gap-35rem-1304a2b); }
.dy-pair__link { width: var(--geometry-min-height-2-4rem-84ca4d0); border-top: var(--geometry-outline-2px-7476140) dashed var(--accent); opacity: .8; }
.dy-consent__owner { font-size: var(--typography-font-size-95rem-adb8a86); }
.dy-consent__label { color: var(--dim) !important; font-size: var(--typography-font-size-78rem-6850684) !important; font-weight: var(--type-weight-control); letter-spacing: var(--typography-letter-spacing-06em-9679667); text-transform: uppercase; }
.dy-scopes { list-style: none; margin: var(--spacing-margin-4rem-088589b) 0 0; padding: 0; display: grid; gap: var(--spacing-margin-5rem-ef026cb); }
.dy-scopes li { display: flex; align-items: center; gap: var(--spacing-gap-7rem-7eff2a1); padding: var(--spacing-gap-8rem-818b9f7) var(--spacing-padding-9rem-2ad2e76); border-radius:var(--r-sm); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-surface); color: var(--ink); font-size: var(--typography-font-size-95rem-adb8a86); line-height: var(--typography-line-height-1-45-6918de1); }
.dy-scopes svg { width: var(--geometry-width-1-15rem-3b14c93); flex: none; display: block; fill: var(--accent); }
.dy-consent__safe { display: flex; gap: var(--spacing-padding-6rem-d0bc70f); align-items: center; font-size: var(--typography-font-size-88rem-39c360b) !important; }
.dy-consent__safe svg { width: var(--geometry-width-1-05rem-8c6e288); flex: none; display: block; fill: var(--cyan); }
.dy-consent .dy-row { margin-top: var(--spacing-margin-2rem-4cd30ed); }
.dy-consent .dy-button { white-space: nowrap; }
.dy-consent .dy-button--primary { box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.dy-consent .dy-button--primary:hover { filter: brightness(1.06); }
.dy-button--quiet { background: transparent; }
.dy-done-mark { display: grid; place-items: center; width: var(--geometry-width-3rem-550d167); height: var(--geometry-width-3rem-550d167); border-radius: 50%; background: var(--accent-gradient); }
.dy-done-mark svg { width: var(--geometry-width-1-6rem-9ef54f1); height: var(--geometry-width-1-6rem-9ef54f1); fill: var(--accent-ink); }

/* Icons and words are centered by their boxes, the words keeping the font's full line (never trimmed: styles.css). */