/* Shomahmudoff Account: the page layer on top of the Qizil design system (SPEC 4.3, 9.7).
   Load order: qizil/fonts.css, qizil/qizil.css, qizil/base.css, qizil/components.css, then this
   file. Qizil (vendored in static/qizil, checked by scripts/sync-qizil.sh) owns the colours, type,
   controls, buttons, alerts, menus, tabs and badges; this file only lays the pages out and styles
   what the kit has no component for (the password field, the settings navigation, consent lists,
   recovery codes, the QR frame, session rows).

   Two layouts, chosen by the class on <body>:
   - layout-auth (sign-in, registration, reset, second factor, consent, logout, errors): the
     wordmark, one card about 400 px wide and an optional box under it, centred in the viewport as
     one group; the footer sits at the bottom. The pattern of the GitHub, Google and Microsoft
     sign-in pages.
   - layout-settings (the account area): a header bar with the wordmark, a left navigation on wide
     screens (collapsible above the content on phones) and a content column of sections with a
     danger zone at the bottom, the pattern of the GitHub settings pages.

   No colour is defined here: everything reads a --q-* token, so both themes and the theme switch
   come from the kit. The only literals are the white QR frame (a QR code must stay dark on light)
   and the print rules. No fonts or images are fetched from here, no inline styles anywhere (CSP:
   style-src 'self'); the font files come from qizil/fonts.css. */

:root {
  /* Touch targets are at least 44 px (SPEC 9.7); the kit default is 40 px. */
  --q-control-h: 2.75rem;
  --q-menu-item-h: 2.75rem;
  /* The auth card, and the width of the settings frame (navigation + gap + content). */
  --auth-w: 25rem;
  --settings-w: 60rem;
  --settings-nav-w: 13.5rem;
  /* The auth page is the surface and the card the page colour in light; in dark the card is
     the lighter step, so it lifts off the page in both themes without a shadow. */
  --auth-page: var(--q-surface);
  --auth-card: var(--q-bg);
}
:root[data-theme="dark"] {
  --auth-page: var(--q-bg);
  --auth-card: var(--q-surface);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --auth-page: var(--q-bg);
    --auth-card: var(--q-surface);
  }
}

@media (prefers-contrast: more) {
  :root:root {
    --q-border: var(--q-border-strong);
  }
}

html {
  scroll-padding-top: var(--q-space-16);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}
body.layout-auth {
  background: var(--auth-page);
}

[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------- frame */

.skip-link {
  position: absolute;
  top: -4rem;
  left: var(--q-space-16);
  z-index: var(--q-z-tooltip);
  padding: var(--q-space-12) var(--q-space-16);
  border-radius: var(--q-radius-control);
  background: var(--q-accent);
  color: var(--q-on-accent);
  font-weight: var(--q-weight-medium);
  text-decoration: none;
}
.skip-link:hover,
.skip-link:focus {
  color: var(--q-on-accent);
}
.skip-link:focus {
  top: var(--q-space-16);
}

.site-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: 100%;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.site-main {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--q-page-pad);
}
.site-main:focus {
  outline: none;
}

.site-footer {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--q-space-4);
  width: 100%;
  padding: var(--q-space-24) var(--q-page-pad) var(--q-space-24);
  color: var(--q-muted);
  font-size: var(--q-text-13);
  line-height: var(--q-leading-13);
  text-align: center;
}
.site-footer p {
  margin: 0;
}
.site-footer a {
  color: var(--q-muted);
  text-decoration-color: var(--q-border);
}
.site-footer a:hover {
  color: var(--q-accent);
  text-decoration-color: var(--q-accent);
}
.site-footer__support a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  overflow-wrap: anywhere;
}
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--q-space-16);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--q-space-16);
}
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.site-footer__tools {
  display: flex;
  align-items: center;
  gap: var(--q-space-4);
}

/* -- auth layout: the wordmark, the card and the footer. The auto margins above the header and
   the footer share the free height, so header + card sit in the middle of the space above the
   footer. When the content is taller (a long form, a phone with the keyboard open: the viewport
   meta asks for a content resize) the margins become zero and the page scrolls. */

.layout-auth .site-header {
  justify-content: center;
  margin-top: auto;
  padding: var(--q-space-32) var(--q-page-pad) var(--q-space-24);
}
.layout-auth .site-main {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--q-space-16);
  max-width: calc(var(--auth-w) + 2 * var(--q-page-pad));
  padding-bottom: var(--q-space-24);
}
.layout-auth .site-footer {
  margin-top: auto;
}

.layout-auth .q-card {
  gap: var(--q-space-20);
  padding: var(--q-space-32);
  background: var(--auth-card);
}
.layout-auth .q-card > h1 {
  text-align: center;
}
/* The line under the title: a subtitle on sign-in and registration, the intro elsewhere. */
.layout-auth .q-card > h1 + p:not(.q-alert, .status) {
  margin-top: calc(-1 * var(--q-space-12));
  color: var(--q-muted);
  font-size: var(--q-text-15);
  line-height: var(--q-leading-15);
  text-align: center;
}
/* Single-purpose forms: their button spans the card. */
.layout-auth form > .q-btn {
  align-self: stretch;
}

/* The box under the card: "New to ...? Create an account" (GitHub). The link is a 44 px tap target
   of its own; the sentence wraps around it. */
.auth-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--q-space-4);
  margin: 0;
  padding: var(--q-space-4) var(--q-space-20);
  border: var(--q-line-hairline) solid var(--q-border);
  border-radius: var(--q-radius-card);
  background: var(--auth-card);
  font-size: var(--q-text-15);
  line-height: var(--q-leading-15);
  text-align: center;
}

.auth-alt,
.upstream-buttons,
.passkey {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-12);
}
.upstream-buttons form {
  align-items: stretch;
}
.divider {
  display: flex;
  align-items: center;
  gap: var(--q-space-12);
  margin: 0;
  color: var(--q-muted);
  font-size: var(--q-text-13);
  line-height: var(--q-leading-13);
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-top: var(--q-line-hairline) solid var(--q-border);
}

/* -- settings layout: header bar, navigation, content column. */

.layout-settings .site-header {
  padding: var(--q-space-8) max(var(--q-page-pad), calc((100% - var(--settings-w)) / 2));
  border-bottom: var(--q-line-hairline) solid var(--q-border);
}
.layout-settings .site-main {
  display: grid;
  flex: 1 0 auto;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--q-space-24);
  max-width: calc(var(--settings-w) + 2 * var(--q-page-pad));
  padding-block: var(--q-space-24) var(--q-space-64);
}
.layout-settings .site-footer {
  border-top: var(--q-line-hairline) solid var(--q-border);
}
@media (min-width: 768px) {
  .layout-settings .site-main {
    grid-template-columns: var(--settings-nav-w) minmax(0, 1fr);
    align-items: start;
    gap: var(--q-space-48);
    padding-top: var(--q-space-40);
  }
}

.account-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--q-space-8);
  min-height: var(--q-control-h);
  padding: 0 var(--q-space-16);
  border: var(--q-line-hairline) solid var(--q-border-strong);
  border-radius: var(--q-radius-control);
  font-weight: var(--q-weight-medium);
  cursor: pointer;
  list-style: none;
}
.account-nav__toggle::-webkit-details-marker {
  display: none;
}
.account-nav__menu[open] > .account-nav__toggle {
  margin-bottom: var(--q-space-8);
}
.account-nav__chevron,
.lang-menu__chevron {
  flex: none;
  color: var(--q-muted);
  transition: transform var(--q-duration) var(--q-ease);
}
.account-nav__menu[open] .account-nav__chevron,
.lang-menu[open] .lang-menu__chevron {
  transform: rotate(180deg);
}
.account-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.account-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--q-space-12);
  min-height: 2.75rem;
  padding: 0 var(--q-space-12);
  border-radius: var(--q-radius-control);
  color: var(--q-fg);
  font-size: var(--q-text-15);
  line-height: var(--q-leading-15);
  text-decoration: none;
  transition: background-color var(--q-duration) var(--q-ease);
}
.account-nav__link .q-icon {
  flex: none;
  color: var(--q-muted);
}
.account-nav__link:hover {
  background: var(--q-hover);
  color: var(--q-fg);
}
.account-nav__link[aria-current="page"] {
  background: var(--q-hover);
  font-weight: var(--q-weight-medium);
}
.account-nav__link[aria-current="page"] .q-icon {
  color: var(--q-fg);
}
/* The current item carries a 2px accent rule, like the kit's current tab (K9). */
.account-nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: var(--q-space-8);
  bottom: var(--q-space-8);
  left: 0;
  width: var(--q-line-accent);
  border-radius: var(--q-radius-full);
  background: var(--q-accent);
}
.account-nav__link:focus-visible {
  outline-offset: -2px;
}
.account-nav__end {
  margin-top: var(--q-space-8);
  padding-top: var(--q-space-8);
  border-top: var(--q-line-hairline) solid var(--q-border);
}
@media (min-width: 768px) {
  .account-nav {
    position: sticky;
    top: var(--q-space-24);
  }
  /* The navigation is always open on wide screens (app.js keeps the details open there). */
  .account-nav__toggle {
    display: none;
  }
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-40);
  min-width: 0;
}
.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-16);
  min-width: 0;
}
.settings-section > h1 {
  padding-bottom: var(--q-space-12);
  border-bottom: var(--q-line-hairline) solid var(--q-border);
}
.settings-section > h2 {
  padding-bottom: var(--q-space-8);
  border-bottom: var(--q-line-hairline) solid var(--q-border);
}
/* Forms keep a readable width in the content column. */
.settings-section form > .q-field,
.settings-section form > fieldset,
.settings-section .passkey > .q-field {
  max-width: 30rem;
}
.settings-content > .back-link {
  margin: 0 0 calc(-1 * var(--q-space-24));
}
.settings-content > .back-link a {
  margin-block: calc(-1 * var(--q-space-8));
}

/* A section that only destroys (deleting an organization): the danger zone frame around it. */
.settings-section--danger {
  padding: var(--q-space-20);
  border: var(--q-line-hairline) solid var(--q-danger);
  border-radius: var(--q-radius-card);
}
.settings-section--danger > h2 {
  padding-bottom: 0;
  border-bottom: 0;
}

.danger-zone {
  border: var(--q-line-hairline) solid var(--q-danger);
  border-radius: var(--q-radius-card);
}
.danger-zone__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--q-space-12) var(--q-space-24);
  padding: var(--q-space-16) var(--q-space-20);
}
.danger-zone__row + .danger-zone__row {
  border-top: var(--q-line-hairline) solid var(--q-border);
}
.danger-zone__text {
  display: flex;
  flex: 1 1 16rem;
  flex-direction: column;
  gap: var(--q-space-4);
}

/* ---------------------------------------------------------------- footer tools */

.lang-menu {
  position: relative;
}
.lang-menu__toggle {
  min-height: 2.75rem;
  padding-inline: var(--q-space-12);
  color: var(--q-muted);
  font-size: var(--q-text-13);
  list-style: none;
}
.lang-menu__toggle::-webkit-details-marker {
  display: none;
}
.lang-menu__toggle:hover,
.lang-menu[open] > .lang-menu__toggle {
  color: var(--q-fg);
}
.lang-menu > .locale-switch {
  position: absolute;
  bottom: calc(100% + var(--q-space-4));
  left: 50%;
  min-width: 12rem;
  transform: translateX(-50%);
}
form.locale-switch {
  align-items: stretch;
  gap: 0;
}
.locale-switch .q-menu__item[aria-current="true"] {
  font-weight: var(--q-weight-medium);
}
.locale-switch .q-menu__item[aria-current="true"]::after {
  content: "\2713";
  content: "\2713" / "";
  margin-left: auto;
  color: var(--q-accent);
}
.theme-toggle {
  width: 2.75rem;
  height: 2.75rem;
  border-color: transparent;
}
.theme-toggle:hover {
  border-color: transparent;
  background: var(--q-hover);
}

/* ---------------------------------------------------------------- text */

/* Page titles stay at a size a form can carry: 30 px, 38 px for settings on wide screens. */
h1 {
  font-size: var(--q-text-30);
  line-height: var(--q-leading-30);
  letter-spacing: var(--q-tracking-30);
}
@media (min-width: 640px) {
  .settings-section > h1 {
    font-size: var(--q-text-38);
    line-height: var(--q-leading-38);
    letter-spacing: var(--q-tracking-38);
  }
}
.q-card h2,
.settings-section h2 {
  font-size: var(--q-text-24);
  line-height: var(--q-leading-24);
  letter-spacing: 0;
}
.q-card h3,
.settings-section h3 {
  font-family: var(--q-font-sans);
  font-size: var(--q-text-17);
  font-weight: var(--q-weight-medium);
  line-height: var(--q-leading-17);
  letter-spacing: 0;
}
h1,
h2,
h3 {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

ul,
ol {
  margin: 0;
  padding-left: var(--q-space-24);
}

.muted,
.hint {
  color: var(--q-muted);
  font-size: var(--q-text-15);
  line-height: var(--q-leading-15);
}

/* Links in running text keep the kit's underline, drawn in a colour that is visible on its own. */
main a:not([class]) {
  text-decoration-color: var(--q-muted);
}
main a:not([class]):hover {
  text-decoration-color: var(--q-accent);
}

code {
  overflow-wrap: anywhere;
}

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

.back-link {
  font-size: var(--q-text-15);
}
/* Links that stand on their own line (not inside a sentence) are 44 px tap targets. */
.back-link a,
.legal__back a,
.link-row a,
.auth-aside a,
ul.org-list > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.auth-aside a {
  padding-inline: var(--q-space-4);
}
.link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--q-space-16);
}

/* ---------------------------------------------------------------- forms */

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--q-space-16);
  margin: 0;
}
form > .q-field,
form > .password-field,
form > fieldset,
form > details {
  align-self: stretch;
}

.q-field--full {
  max-width: none;
}
.q-field > .q-hint {
  margin: 0;
}
.q-field > .q-label {
  min-width: 0;
}

/* A label with a link on the right of the same row ("Forgot password?", GitHub). */
.field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--q-space-16);
  min-width: 0;
}
.field-head__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-block: calc(-1 * var(--q-space-12));
  font-size: var(--q-text-13);
  line-height: var(--q-leading-13);
  text-decoration-color: var(--q-muted);
}

input[inputmode="numeric"],
input[autocomplete="one-time-code"],
input.code {
  font-family: var(--q-font-mono);
  letter-spacing: 0.08em;
}

/* The password field: the show/hide button is a fixed 44 x 44 px square inside the right end
   of the input, absolutely positioned in a wrapper that is exactly the input. The input keeps
   its width and height whatever the button shows (its padding always reserves the square),
   the button never changes size (it holds two icons and shows one, no text), and without
   JavaScript the button stays hidden and the field is a plain password field. */
.password-field {
  position: relative;
  display: block;
  min-width: 0;
}
.password-field > .q-input {
  display: block;
  width: 100%;
  padding-right: calc(var(--q-control-h) + var(--q-space-4));
}
.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--q-control-h);
  height: var(--q-control-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 var(--q-radius-control) var(--q-radius-control) 0;
  background: transparent;
  color: var(--q-muted);
  cursor: pointer;
  transition: color var(--q-duration) var(--q-ease);
}
.password-toggle:hover {
  color: var(--q-fg);
}
.password-toggle:focus-visible {
  outline-offset: -2px;
}
.password-toggle .q-icon {
  flex: none;
  width: var(--q-icon-lg);
  height: var(--q-icon-lg);
}
.password-toggle__hide,
.password-toggle[data-shown="true"] .password-toggle__show {
  display: none;
}
.password-toggle[data-shown="true"] .password-toggle__hide {
  display: block;
}
/* Edge draws its own reveal button; ours replaces it when it is shown. */
.password-field:has(> .password-toggle:not([hidden])) > .q-input::-ms-reveal {
  display: none;
}

/* The whole label is the tap target: at least 44 px high, the box aligned with the first line. */
.q-check {
  align-items: flex-start;
  min-height: 2.75rem;
  margin: 0;
  padding-block: 0.6875rem;
}

fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-8);
  min-width: 0;
  margin: 0;
  padding: var(--q-space-12) var(--q-space-16);
  border: var(--q-line-hairline) solid var(--q-border);
  border-radius: var(--q-radius-control);
}
legend {
  padding-inline: var(--q-space-4);
  font-size: var(--q-text-13);
  font-weight: var(--q-weight-medium);
}

/* ---------------------------------------------------------------- buttons */

/* Compact buttons (row actions) keep the 44 px touch height of every control (SPEC 9.7) and
   only get a smaller font and padding than the kit's default. */
.q-btn.small {
  --q-control-h: 2.75rem;
  --q-control-px: var(--q-space-12);
  --q-control-font: var(--q-text-14);
}
.q-btn img {
  flex: none;
  border-radius: 5px;
}
.q-btn[disabled] {
  cursor: not-allowed;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-space-8);
}
form.inline-form {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--q-space-8);
  margin: var(--q-space-4) var(--q-space-4) 0 0;
}
form.inline-form .q-select {
  display: inline-block;
  width: auto;
}
.link-form .q-btn {
  width: 100%;
}
.settings-section .link-form {
  max-width: 30rem;
}

/* ---------------------------------------------------------------- messages */

/* Alerts are the kit's .q-alert (Qizil decision C8: a hairline box with a 2px tone rule on the
   left, a mark in the tone and text in the foreground colour). The templates write them as one
   paragraph, so the mark is a glyph drawn here in the alert's icon column: the tone is never the
   only signal, and the glyph is decorative for assistive technology (empty alternative text after
   the slash); the message itself says what happened. */
p.q-alert {
  align-items: start;
  padding: var(--q-space-12) var(--q-space-16);
}
p.q-alert::before {
  content: "i";
  content: "i" / "";
  display: inline-grid;
  place-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--q-tone);
  border-radius: var(--q-radius-full);
  color: var(--q-tone);
  font-family: var(--q-font-mono);
  font-size: var(--q-text-12);
  font-weight: var(--q-weight-medium);
  line-height: 1;
}
p.q-alert--danger::before,
p.q-alert--warning::before {
  content: "!";
  content: "!" / "";
}
p.q-alert--success::before {
  content: "\2713";
  content: "\2713" / "";
}
/* A message under a field: small danger text with a small mark, no box (the kit's K7). */
p.error.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--q-space-4);
  margin: 0;
  color: var(--q-danger);
  font-size: var(--q-text-13);
  line-height: var(--q-leading-13);
}
p.error.field-error::before {
  content: "!";
  content: "!" / "";
  display: inline-grid;
  flex: none;
  place-content: center;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border: 1px solid var(--q-danger);
  border-radius: var(--q-radius-full);
  font-family: var(--q-font-mono);
  font-size: 9px;
  font-weight: var(--q-weight-medium);
  line-height: 1;
}

/* ---------------------------------------------------------------- account */

.account-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--q-space-4) var(--q-space-24);
  margin: 0;
}
.account-facts dt {
  color: var(--q-muted);
}
.account-facts dd {
  margin: 0;
  font-weight: var(--q-weight-medium);
  overflow-wrap: anywhere;
}

.link-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.link-list li + li {
  border-top: var(--q-line-hairline) solid var(--q-border);
}
.link-list a {
  display: block;
  padding: var(--q-space-12) 0;
  font-weight: var(--q-weight-medium);
  text-decoration: none;
}
.link-list a:hover {
  color: var(--q-accent);
}
.link-list span {
  display: block;
  color: var(--q-muted);
  font-size: var(--q-text-15);
  font-weight: var(--q-weight-regular);
}

ul.rows,
ul.sessions,
ul.passkeys,
ul.linked,
ul.org-list,
ul.member-list,
ul.invitation-list,
ul.apps,
ul.consent-scopes,
ul.consent-services,
ul.blocking-orgs {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.rows > li,
ul.sessions > li,
ul.passkeys > li,
ul.linked > li,
ul.org-list > li,
ul.member-list > li,
ul.invitation-list > li,
ul.apps > li {
  padding: var(--q-space-12) 0;
  border-top: var(--q-line-hairline) solid var(--q-border);
  overflow-wrap: anywhere;
}
ul.rows > li:first-child,
ul.sessions > li:first-child,
ul.passkeys > li:first-child,
ul.linked > li:first-child,
ul.org-list > li:first-child,
ul.member-list > li:first-child,
ul.invitation-list > li:first-child,
ul.apps > li:first-child {
  padding-top: 0;
  border-top: 0;
}
ul.rows .muted,
ul.sessions .muted,
ul.passkeys .muted,
ul.member-list .muted,
ul.org-list .muted,
ul.invitation-list .muted,
ul.apps .muted {
  display: block;
}
ul.sessions > li > form,
ul.passkeys > li > form,
ul.linked > li > form,
ul.apps > li > form {
  margin-top: var(--q-space-8);
}
ul.rows ul.rows > li {
  padding-block: var(--q-space-4);
  border-top: 0;
}

/* Consent: what the app asks for, one line each, with a check drawn in the accent. */
ul.consent-scopes li,
ul.consent-services li {
  position: relative;
  padding: var(--q-space-8) var(--q-space-12) var(--q-space-8) var(--q-space-40);
  border: var(--q-line-hairline) solid var(--q-border);
  border-radius: var(--q-radius-control);
  background: var(--q-bg);
}
ul.consent-scopes li + li,
ul.consent-services li + li {
  margin-top: var(--q-space-8);
}
ul.consent-scopes li::before,
ul.consent-services li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--q-space-16);
  width: 10px;
  height: 6px;
  margin-top: -5px;
  border-bottom: 2px solid var(--q-accent);
  border-left: 2px solid var(--q-accent);
  transform: rotate(-45deg);
}

.q-badge {
  margin-right: var(--q-space-4);
}

/* A QR code must stay dark on light in both themes, so its frame is the one fixed colour. */
.totp-qr {
  align-self: flex-start;
  margin: 0;
  padding: var(--q-space-12);
  border: var(--q-line-hairline) solid var(--q-border);
  border-radius: var(--q-radius-control);
  background: #ffffff;
}
.totp-qr svg {
  width: 14rem;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.totp-secret {
  display: inline-block;
  padding: var(--q-space-4) var(--q-space-8);
  border: var(--q-line-hairline) solid var(--q-border);
  border-radius: var(--q-radius-chip);
  background: var(--q-surface);
  letter-spacing: 0.06em;
  user-select: all;
}

ol.recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--q-space-8);
  margin: 0;
  padding: var(--q-space-16) var(--q-space-16) var(--q-space-16) var(--q-space-40);
  border: var(--q-line-hairline) solid var(--q-border);
  border-radius: var(--q-radius-card);
  background: var(--q-surface);
  font-size: var(--q-text-17);
}
ol.recovery-codes li {
  padding-left: var(--q-space-4);
}

details:not(.lang-menu, .account-nav__menu) > summary {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  cursor: pointer;
  font-weight: var(--q-weight-medium);
}
details:not(.lang-menu, .account-nav__menu) > summary::marker {
  color: var(--q-accent);
}
details:not(.lang-menu, .account-nav__menu)[open] > summary {
  margin-bottom: var(--q-space-8);
}

/* ---------------------------------------------------------------- error pages */

.error-page {
  text-align: center;
}
.error-page .status {
  margin-bottom: calc(-1 * var(--q-space-12));
  color: var(--q-muted);
  font-family: var(--q-font-display);
  font-size: var(--q-text-64);
  line-height: var(--q-leading-64);
  letter-spacing: var(--q-tracking-64);
}
.error-page .actions {
  justify-content: center;
}
.error-meta {
  margin: 0;
}
.error-meta dt {
  display: inline;
  color: var(--q-muted);
}
.error-meta dd {
  display: inline;
  margin: 0 var(--q-space-12) 0 var(--q-space-4);
}
.error-code {
  font-family: var(--q-font-mono);
  font-size: 0.875em;
}

/* ---------------------------------------------------------------- sign-up additions */

/* "What you get" (GitHub sign-up): three short lines with a crimson check. */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--q-text-15);
  line-height: var(--q-leading-15);
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--q-space-8);
}
.check-list .q-icon {
  flex: none;
  margin-top: 3px;
  color: var(--q-accent);
}
.layout-auth .perks {
  padding: var(--q-space-12) var(--q-space-16);
  border: var(--q-line-hairline) solid var(--q-border);
  border-radius: var(--q-radius-control);
  color: var(--q-muted);
}
/* The terms line under the sign-up button. */
.terms-line {
  margin: 0;
  color: var(--q-muted);
  font-size: var(--q-text-13);
  line-height: var(--q-leading-13);
}
.terms-line a {
  color: inherit;
  text-decoration-color: var(--q-border-strong);
}

/* ---------------------------------------------------------------- portal: header, home, documents */

/* Two more layouts: layout-home (the signed-out start page) and layout-doc (privacy, terms). Both have
   a header bar like the settings layout; the home header carries the sign-in and sign-up links. */
.layout-home .site-header,
.layout-doc .site-header {
  justify-content: space-between;
  gap: var(--q-space-12);
  padding: var(--q-space-8) max(var(--q-page-pad), calc((100% - var(--settings-w)) / 2));
  border-bottom: var(--q-line-hairline) solid var(--q-border);
}
.layout-home .site-footer,
.layout-doc .site-footer {
  margin-top: auto;
  border-top: var(--q-line-hairline) solid var(--q-border);
}
.site-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--q-space-8);
}
.site-header__actions .q-btn.small {
  --q-control-h: 2.75rem;
}
@media (max-width: 559.98px) {
  /* The hero right below has both buttons; the header keeps only the wordmark. */
  .site-header__actions {
    display: none;
  }
}

.layout-home .site-main {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  max-width: none;
  padding-inline: 0;
}
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--q-space-96) var(--q-page-pad) var(--q-space-96);
  border-bottom: var(--q-line-hairline) solid var(--q-border);
  text-align: center;
}
.home-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--q-space-20);
  max-width: 44rem;
  margin-inline: auto;
}
.home-eyebrow {
  margin: 0;
  color: var(--q-accent);
  font-family: var(--q-font-mono);
  font-size: var(--q-text-12);
  letter-spacing: var(--q-tracking-label);
  text-transform: uppercase;
}
.home-hero .home-hero__title {
  margin: 0;
  font-size: var(--q-text-44);
  line-height: var(--q-leading-44);
  letter-spacing: var(--q-tracking-44);
}
@media (min-width: 640px) {
  .home-hero .home-hero__title {
    font-size: var(--q-text-64);
    line-height: var(--q-leading-64);
    letter-spacing: var(--q-tracking-64);
  }
}
.home-hero__lead {
  max-width: 36rem;
  margin: 0;
  color: var(--q-muted);
  font-size: var(--q-text-17);
  line-height: var(--q-leading-17);
}
.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--q-space-12);
}
.home-hero__note {
  margin: 0;
  color: var(--q-muted);
  font-size: var(--q-text-13);
}
.home-section {
  width: 100%;
  max-width: calc(var(--settings-w) + 2 * var(--q-page-pad));
  margin-inline: auto;
  padding: var(--q-space-64) var(--q-page-pad) 0;
}
.home-section:last-child {
  padding-bottom: var(--q-space-64);
}
.home-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-8);
  margin-bottom: var(--q-space-24);
}
.home-section h2 {
  font-size: var(--q-text-30);
  line-height: var(--q-leading-30);
  letter-spacing: var(--q-tracking-30);
}
.home-section h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--q-space-8);
  font-family: var(--q-font-sans);
  font-size: var(--q-text-17);
  font-weight: var(--q-weight-medium);
  line-height: var(--q-leading-17);
  letter-spacing: 0;
}
.home-section p {
  margin: 0;
}
.service-list,
.feature-list,
.tile-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--q-space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.service {
  flex-direction: row;
  align-items: flex-start;
}
.service__mark {
  flex: none;
  width: 4rem;
  height: auto;
}
.service__text {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-8);
  min-width: 0;
}
.service__text p {
  color: var(--q-muted);
  font-size: var(--q-text-15);
  line-height: var(--q-leading-15);
}
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-8);
  padding-top: var(--q-space-16);
  border-top: var(--q-line-accent) solid var(--q-accent);
}
.feature__mark .q-icon {
  width: var(--q-icon-xl);
  height: var(--q-icon-xl);
  color: var(--q-accent);
}
.home-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--q-space-20);
  text-align: center;
}

/* Privacy notice and terms: one reading column. */
.layout-doc .site-main {
  flex: 1 0 auto;
  max-width: calc(var(--q-prose) + 2 * var(--q-page-pad));
  padding-block: var(--q-space-40) var(--q-space-64);
}
.legal {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-16);
}
.legal h1 {
  font-size: var(--q-text-38);
  line-height: var(--q-leading-38);
  letter-spacing: var(--q-tracking-38);
}
.legal h2 {
  margin-top: var(--q-space-16);
  font-size: var(--q-text-24);
  line-height: var(--q-leading-24);
  letter-spacing: 0;
}
.legal p,
.legal ul {
  margin: 0;
}
.legal li + li {
  margin-top: var(--q-space-8);
}
.legal__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--q-space-8);
  color: var(--q-muted);
  font-size: var(--q-text-14);
}
.legal__lead {
  color: var(--q-muted);
  font-size: var(--q-text-17);
  line-height: var(--q-leading-17);
}

/* ---------------------------------------------------------------- account home */

/* The initials avatar (src/ui/account/avatar.rs): surface disc, hairline, a crimson arc. */
.avatar {
  flex: none;
  display: block;
}
.avatar--lg {
  width: 4rem;
  height: 4rem;
}
.avatar--xl {
  width: 6rem;
  height: 6rem;
}
.avatar__face {
  fill: var(--q-surface);
  stroke: var(--q-border);
  stroke-width: 1;
}
.avatar__arc {
  fill: none;
  stroke: var(--q-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.avatar__text {
  fill: var(--q-fg);
  font-family: var(--q-font-display);
  font-size: 26px;
}

.profile-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--q-space-16) var(--q-space-20);
}
.profile-head__text {
  display: flex;
  flex: 1 1 14rem;
  flex-direction: column;
  gap: var(--q-space-4);
  min-width: 0;
}
.profile-head__text h1 {
  font-size: var(--q-text-30);
  line-height: var(--q-leading-30);
}
@media (min-width: 640px) {
  .profile-head__text h1 {
    font-size: var(--q-text-38);
    line-height: var(--q-leading-38);
    letter-spacing: var(--q-tracking-38);
  }
}
.profile-head__text p {
  margin: 0;
  overflow-wrap: anywhere;
}
.profile-head__email {
  font-weight: var(--q-weight-medium);
}
.profile-head__meta {
  font-size: var(--q-text-14);
}
.home-intro {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-16);
}

/* Panels of the home (Google account home): hairline boxes, a heading row with one link. */
.home-panel {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-12);
  min-width: 0;
  padding: var(--q-space-20);
  border: var(--q-line-hairline) solid var(--q-border);
  border-radius: var(--q-radius-card);
}
.home-panel h2 {
  font-size: var(--q-text-24);
  line-height: var(--q-leading-24);
  letter-spacing: 0;
}
.home-panel p {
  margin: 0;
}
.home-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--q-space-8) var(--q-space-16);
}
.home-panel__link,
.checkup-item__action {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--q-text-15);
  font-weight: var(--q-weight-medium);
  text-decoration: none;
}
.home-panel__link:hover,
.checkup-item__action:hover {
  text-decoration: underline;
}
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--q-space-24);
}
@media (min-width: 1024px) {
  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.checkup-summary {
  display: flex;
  align-items: center;
  gap: var(--q-space-16);
}
.checkup-summary__mark,
.checkup-item__mark,
.activity-item__mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: var(--q-radius-full);
}
.checkup-summary__mark {
  width: 2.75rem;
  height: 2.75rem;
}
.checkup-summary__mark .q-icon {
  width: var(--q-icon-lg);
  height: var(--q-icon-lg);
}
.checkup-summary--ok .checkup-summary__mark,
.checkup-item--ok .checkup-item__mark,
.activity-item__mark {
  color: var(--q-success);
}
.checkup-summary--warn .checkup-summary__mark,
.checkup-item--warn .checkup-item__mark,
.activity-item--failed .activity-item__mark {
  color: var(--q-warning);
}
.checkup-item--tip .checkup-item__mark {
  color: var(--q-info);
}
.checkup-summary__text {
  color: var(--q-muted);
}
.checkup-list,
.home-rows,
.activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.checkup-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--q-space-4) var(--q-space-12);
  padding: var(--q-space-12) 0;
  border-top: var(--q-line-hairline) solid var(--q-border);
}
.checkup-item__mark,
.activity-item__mark {
  width: 1.75rem;
  height: 1.75rem;
}
.checkup-item__text {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-4);
  min-width: 0;
}
.checkup-item__title {
  font-weight: var(--q-weight-medium);
}
.checkup-item__detail {
  color: var(--q-muted);
  font-size: var(--q-text-15);
  line-height: var(--q-leading-15);
  overflow-wrap: anywhere;
}
.checkup-item__action {
  grid-column: 2;
  justify-self: start;
  margin-block: calc(-1 * var(--q-space-8));
}
@media (min-width: 640px) {
  .checkup-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }
  .checkup-item__action {
    grid-column: 3;
    margin-block: 0;
  }
}
.checkup-item--warn .checkup-item__action {
  color: var(--q-accent);
}

.home-row {
  display: flex;
  align-items: flex-start;
  gap: var(--q-space-12);
  padding: var(--q-space-12) 0;
  border-top: var(--q-line-hairline) solid var(--q-border);
}
.home-row__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--q-radius-control);
  background: var(--q-surface);
  color: var(--q-muted);
}
.home-row__text {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-4);
  min-width: 0;
  overflow-wrap: anywhere;
}
.home-row__title {
  font-weight: var(--q-weight-medium);
}
.home-row .muted {
  font-size: var(--q-text-14);
}

.activity-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--q-space-12);
  padding: var(--q-space-12) 0;
  border-top: var(--q-line-hairline) solid var(--q-border);
}
.activity-item:first-child {
  border-top: 0;
}
.activity-item__mark .q-icon {
  width: var(--q-icon-sm);
  height: var(--q-icon-sm);
}
.activity-item__text {
  min-width: 0;
}
.activity-item__text p {
  margin: 0;
}
.activity-item__title {
  font-weight: var(--q-weight-medium);
}
.activity-item__detail {
  color: var(--q-muted);
  font-weight: var(--q-weight-regular);
}
.activity-item__meta {
  font-size: var(--q-text-14);
  overflow-wrap: anywhere;
}
.activity-item__ip {
  font-family: var(--q-font-mono);
  font-size: var(--q-text-13);
}
.activity-help {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.activity-help p {
  margin: 0;
}

.tile-links a {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-4);
  height: 100%;
  min-height: 2.75rem;
  padding: var(--q-space-12) var(--q-space-16);
  border: var(--q-line-hairline) solid var(--q-border);
  border-radius: var(--q-radius-control);
  color: var(--q-fg);
  text-decoration: none;
  transition: border-color var(--q-duration) var(--q-ease);
}
.tile-links a:hover {
  border-color: var(--q-fg);
}
.tile-links strong {
  font-weight: var(--q-weight-medium);
}
.tile-links span {
  color: var(--q-muted);
  font-size: var(--q-text-14);
  line-height: var(--q-leading-14);
}

/* ---------------------------------------------------------------- personal info, data */

.profile-picture {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--q-space-20);
}
.profile-picture p {
  margin: 0;
}
.profile-picture__name {
  font-family: var(--q-font-display);
  font-size: var(--q-text-24);
  line-height: var(--q-leading-24);
}
.email-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--q-space-8) var(--q-space-12);
}
.email-row__address {
  font-weight: var(--q-weight-medium);
}
.email-row__badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--q-space-4);
}
ul.email-list .muted {
  display: inline;
  font-size: var(--q-text-14);
}
.account-id {
  font-size: var(--q-text-14);
}
.data-export-form {
  gap: var(--q-space-8);
}
.data-export-form .q-hint {
  margin: 0;
}

/* ---------------------------------------------------------------- small screens */

@media (max-width: 479.98px) {
  .layout-auth .site-header {
    padding-top: var(--q-space-24);
    padding-bottom: var(--q-space-16);
  }
  .layout-auth .q-card {
    padding: var(--q-space-24) var(--q-space-20);
  }
}
@media (max-width: 639.98px) {
  .account-facts {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .account-facts dd {
    margin-bottom: var(--q-space-12);
  }
  .layout-auth .actions > .q-btn,
  .danger-zone__row > .q-btn {
    flex: 1 1 100%;
  }
}

/* ---------------------------------------------------------------- user preferences */

@media (forced-colors: active) {
  .q-card,
  .auth-aside,
  .q-tabs,
  .q-input,
  .q-btn,
  .q-badge,
  .q-alert,
  .danger-zone,
  fieldset {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
  .account-nav__link[aria-current="page"]::before {
    background: Highlight;
  }
  :focus-visible {
    outline: 3px solid Highlight;
  }
}

@media print {
  .site-header,
  .site-footer,
  .account-nav,
  .skip-link,
  button,
  .q-btn {
    display: none !important;
  }
  body,
  body.layout-auth {
    background: #ffffff;
    color: #000000;
  }
  .q-card {
    border-color: #000000;
  }
}