/* Design carré, encre et papier : aucun arrondi, aucune ombre, filets nets. */ /* DRY via CSS3 : thème jour/nuit système en une passe (light-dark()), tons */ /* de statut définis une seule fois (custom properties), imbrication native, */ /* guide et infobulles 100 % CSS (:target, :has, :focus-within) — zéro JS. */ :root { color-scheme: light dark; --bg: light-dark(#f9f9f7, #0d0d0d); --surface: light-dark(#fcfcfb, #1a1a19); /* Contraste AAA (7:1) vérifié par src/ui/a11y_test.ts — clair ET sombre. */ --ink: light-dark(#0b0b0b, #ffffff); --ink-2: light-dark(#454440, #d0cfc5); --ink-3: light-dark(#54524c, #a9a79d); /* Limites de composants d'interface : WCAG 1.4.11 exige 3:1, sur --surface ET sur --bg. Vérifié par le volet « non textuel » de src/ui/a11y_test.ts, qui compose les rgba() sur le fond réel. --border est le SEUL indice visuel des zones de saisie (leur fond est celui de la carte). */ --border: light-dark(rgba(11, 11, 11, 0.5), rgba(255, 255, 255, 0.38)); /* --hairline sépare cartes, panneaux et lignes de tableau : décor structurel, PAS une limite de composant d'interface — 1.4.11 ne s'y applique pas, et le porter à 3:1 alourdirait tout le dessin. Il reste volontairement discret. */ --hairline: light-dark(#e1e0d9, #2c2c2a); --progress: light-dark(#2a78d6, #3987e5); --progress-text: light-dark(#163e69, #a6c7f9); --ok: #0ca30c; --ok-text: light-dark(#004b00, #55d955); --warn: #fab219; --warn-text: light-dark(#664400, #ffd47a); --serious: #ec835a; --serious-text: light-dark(#7a3413, #ffb08a); --danger: #d03b3b; --danger-text: light-dark(#851a1a, #ffa7a7); --font: system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "Cascadia Code", Consolas, monospace; --fast: 110ms cubic-bezier(0.2, 0, 0.38, 0.9); /* cible d'activation minimale (WCAG 2.5.5 AAA) — consommée partout */ --tap-target: 44px; /* Accent émeraude (thème sécurité/TLS). Foncé en clair, clair en sombre pour rester ≥ 7:1 AAA en TEXTE et en bouton (blanc/encre-sur-accent) — vérifié par a11y_test.ts. --accent-on = la couleur du texte SUR un fond accent. */ --accent: light-dark(#0a5f43, #3fbf95); --accent-on: light-dark(#ffffff, #0d1a15); } /* Cible ≥ 44 px : UNE règle à étendre pour tout nouveau contrôle. .infotip-btn garde son icône de 22 px — zone étendue via ::after. */ .btn, .copy, .theme-switch button { min-height: var(--tap-target); } /* Bascule clair / sombre : le cookie de /theme pose data-theme sur ; forcer color-scheme suffit, tous les tokens passant par light-dark(). */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Tons de statut : définis UNE fois, consommés par badges, points et bandeaux */ .tone-ok { --tone: var(--ok); --tone-text: var(--ok-text); } .tone-action { --tone: var(--warn); --tone-text: var(--warn-text); } .tone-progress { --tone: var(--progress); --tone-text: var(--progress-text); } .tone-warn { --tone: var(--serious); --tone-text: var(--serious-text); } .tone-danger { --tone: var(--danger); --tone-text: var(--danger-text); } /* ---------- Base ---------- */ * { box-sizing: border-box; border-radius: 0 !important; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--bg); } .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } main.container { padding-top: 28px; padding-bottom: 56px; } /* Exploite la largeur desktop : formulaire (colonne étroite) + contenu large côte à côte. S'effondre en une colonne sous 900px. Les cartes empilées à l'intérieur restent naturelles. */ .grid-main { display: grid; grid-template-columns: minmax(320px, 380px) 1fr; gap: 20px; align-items: start; } .grid-main > .col { display: flex; flex-direction: column; gap: 20px; min-width: 0; } /* Deux colonnes égales (détail domaine, compte). */ .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } .grid-2 > .col { display: flex; flex-direction: column; gap: 20px; min-width: 0; } @media (max-width: 900px) { .grid-main, .grid-2 { grid-template-columns: 1fr; } } /* FAQ / listes de Q-R : deux colonnes fluides sans couper une entrée. */ .faq { columns: 2; column-gap: 44px; } .faq-item { break-inside: avoid; } .faq-item h3 { margin-top: 0; } @media (max-width: 760px) { .faq { columns: 1; } } h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; } h2 { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; margin: 0 0 6px; } h3 { font-size: 0.95rem; margin: 20px 0 6px; } a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 2px; transition: text-decoration-color var(--fast); &:hover { text-decoration-color: var(--ink); } } code { font-family: var(--mono); font-size: 0.86em; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--hairline); padding: 0.1rem 0.4rem; word-break: break-all; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* Lien d'évitement (WCAG 2.4.1) : invisible hors focus clavier. */ .skip-link { position: absolute; left: -9999px; } .skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 200; background: var(--ink); color: var(--bg); padding: 12px 18px; text-decoration: none; } /* Largeur de lecture confortable (WCAG 1.4.8 : ≤ 80 caractères). */ p, .card-sub, .hint { max-width: 70ch; } /* Dans les blocs centrés, la boîte limitée reste centrée elle aussi. */ .empty p { margin-inline: auto; } /* ---------- Topbar ---------- */ .topbar { background: var(--surface); border-bottom: 2px solid var(--accent); .topbar-inner { display: flex; align-items: center; gap: 16px; padding-block: 12px; } .topbar-right { display: flex; align-items: center; gap: 14px; flex: none; } .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.02rem; text-decoration: none; } .brand-dot { width: 10px; height: 10px; background: var(--accent); } .topbar-sub { color: var(--ink-3); font-size: 0.85rem; } .theme-switch { display: flex; border: 1px solid var(--border); button { font: inherit; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: transparent; color: var(--ink-3); border: none; padding: 4px 14px; cursor: pointer; transition: background-color var(--fast), color var(--fast); &:hover { color: var(--ink); } &.on { background: var(--ink); color: var(--bg); } } } .topbar-nav { margin-left: auto; display: flex; gap: 18px; a { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-2); text-decoration: none; &:hover { color: var(--ink); text-decoration: underline; } } } } /* Déconnecté (login/setup, pas de nav) : rien ne pousse le cluster droit — on lui donne la marge auto pour qu'il reste collé à droite. */ .topbar-inner:not(:has(nav)) .topbar-right { margin-left: auto; } /* Topbar sur une seule ligne en desktop : la tagline s'efface quand la largeur se réduit, la navigation passe sur sa propre ligne en mobile. */ @media (max-width: 1120px) { .topbar .topbar-sub { display: none; } } @media (max-width: 860px) { .topbar .topbar-inner { flex-wrap: wrap; } .topbar .topbar-right { width: 100%; flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; } .topbar .topbar-nav { order: 3; width: 100%; margin-left: 0; gap: 16px; } } /* ---------- Sections ---------- */ .card { background: var(--surface); border: 1px solid var(--hairline); border-top: 2px solid var(--ink); padding: 20px; margin-top: 24px; } /* En-tête de carte en accent (émeraude), souligné d'un filet ténu — hiérarchie typographique renforcée. Contraste ≥ 7:1 vérifié par a11y_test.ts. */ .card h2 { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--hairline)); padding-bottom: 8px; } /* Liens de CONTENU (sans classe) en accent ; les liens structurels (nav, .back, .row-link, .btn, .brand…) gardent leur style propre. */ main a:not([class]) { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); &:hover { text-decoration-color: var(--accent); } } .card-sub { margin: 0 0 16px; color: var(--ink-2); font-size: 0.9rem; } /* ---------- KPIs ---------- */ .kpis { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--hairline); border-top: 2px solid var(--accent); background: var(--surface); .kpi { padding: 14px 16px; border-left: 1px solid var(--hairline); &:first-child { border-left: none; } } .kpi-value { font-size: 1.85rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--accent); } .kpi-label { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-3); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; } } /* ---------- Point et badge d'état : carré de couleur + libellé ---------- */ .dot { width: 8px; height: 8px; flex: none; background: var(--tone, var(--ink-3)); } .badge { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; vertical-align: middle; color: var(--tone-text); background: color-mix(in srgb, var(--tone) 9%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 42%, transparent); &.is-live .dot { animation: pulse 1.6s ease-in-out infinite; } } @keyframes pulse { 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .badge.is-live .dot { animation: none; } * { transition: none !important; } } /* ---------- Bandeau « que faire maintenant » ---------- */ .banner { border: 1px solid var(--hairline); border-left: 4px solid var(--tone, var(--ink)); padding: 14px 16px; margin-top: 24px; background: var(--surface); color: var(--ink); strong { display: block; margin-bottom: 2px; } p { margin: 4px 0 0; color: var(--ink-2); font-size: 0.92rem; } form { margin-top: 12px; } .deadline { color: var(--ink-3); font-size: 0.85rem; } } /* ---------- Stepper ---------- */ .stepper { display: flex; list-style: none; margin: 28px 0 0; padding: 0; li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); text-align: center; &::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--hairline); } &:first-child::before { display: none; } } .marker { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; background: var(--surface); border: 2px solid var(--hairline); color: var(--ink-3); position: relative; z-index: 1; } .done { color: var(--ink-2); .marker { background: var(--accent); border-color: var(--accent); color: var(--accent-on); } &::before { background: var(--accent); } } .current { color: var(--accent); .marker { border-color: var(--accent); color: var(--accent); } &::before { background: var(--ink); } } .failed { color: var(--danger-text); /* paire inversée bg/danger-text : contraste AAA garanti par a11y_test */ .marker { background: var(--danger-text); border-color: var(--danger-text); color: var(--bg); } &::before { background: var(--danger); } } } /* [hidden] doit VRAIMENT masquer, quelle que soit la règle d'auteur qui suit. Le bouton par défaut inoffensif de /compte (celui qu'active la touche Entrée à la place de « Régénérer les codes de secours ») repose là-dessus : une règle d'auteur posant un `display` sur ses sélecteurs le rendrait visible, les styles d'auteur l'emportant sur la feuille du navigateur. */ [hidden] { display: none !important; } /* ---------- Formulaires ---------- */ .form-stack { display: flex; flex-direction: column; gap: 20px; max-width: 560px; } .field { display: flex; flex-direction: column; /* ≥ 12px : la zone étendue de l'infobulle (::after) ne doit pas recouvrir le champ situé dessous et lui voler ses clics */ gap: 12px; > span { display: inline-flex; align-items: center; gap: 10px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink); } } .hint { color: var(--ink-3); font-size: 0.82rem; line-height: 1.5; } input, select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border); padding: 9px 11px; min-width: 0; transition: border-color var(--fast); &:hover { border-color: var(--ink); } &:focus { outline: 2px solid var(--ink); outline-offset: -1px; } &::placeholder { color: var(--ink-3); } } /* ---------- Boutons (et liens habillés en bouton) ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 0.9rem; font-weight: 650; border: 1px solid var(--accent); padding: 9px 20px; text-align: center; text-decoration: none; cursor: pointer; background: var(--accent); color: var(--accent-on); align-self: flex-start; transition: background-color var(--fast), border-color var(--fast), color var(--fast); &:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); border-color: color-mix(in srgb, var(--accent) 86%, var(--ink)); text-decoration: none; } &.ghost { background: transparent; color: var(--ink-2); border-color: var(--border); &:hover { color: var(--ink); border-color: var(--ink); background: transparent; } } &.danger { background: transparent; color: var(--danger-text); border-color: var(--danger); &:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); } &.armed { /* paire inversée bg/danger-text : contraste AAA garanti par a11y_test */ background: var(--danger-text); border-color: var(--danger-text); color: var(--bg); } } } .copy { font: inherit; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); background: transparent; border: 1px solid var(--border); padding: 4px 14px; cursor: pointer; white-space: nowrap; transition: border-color var(--fast), color var(--fast); &:hover { border-color: var(--ink); color: var(--ink); } &.is-copied { color: var(--ok-text); border-color: var(--ok); } } /* ---------- Infobulles ⓘ — pur CSS (:hover / :focus-within) ---------- */ .infotip { position: relative; display: inline-flex; .infotip-btn { width: 22px; height: 22px; position: relative; border: 1px solid var(--ink-3); background: transparent; color: var(--ink-3); font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1; cursor: help; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: border-color var(--fast), color var(--fast); } /* zone d'activation étendue à --tap-target sans grossir l'icône (2.5.5) */ .infotip-btn::after { content: ""; position: absolute; inset: calc((var(--tap-target) - 22px) / -2); } .infotip-panel { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: min(320px, 78vw); background: var(--surface); border: 1px solid var(--ink); padding: 10px 12px; font-size: 0.82rem; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--ink-2); line-height: 1.55; } &:hover, &:focus-within { .infotip-btn { border-color: var(--ink); color: var(--ink); } .infotip-panel { display: block; } } } /* ---------- Guide interactif — pur CSS (:target + :has), zéro JS ---------- */ /* Une section ciblée (#guide-N) passe au-dessus d'un voile, son panneau */ /* d'étape s'affiche en bas d'écran avec Précédent / Suivant en ancres. */ body:has([id^="guide-"]:target)::before { content: ""; position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--ink) 55%, transparent); } [id^="guide-"] { scroll-margin-block: 96px; } [id^="guide-"]:target { position: relative; z-index: 95; outline: 3px solid var(--surface); } .tour-tip { display: none; } /* La section de l'étape 2 est en bas de page : son panneau s'affiche en haut de l'écran pour ne jamais recouvrir ce qu'il désigne. */ #guide-2:target .tour-tip { bottom: auto; top: 76px; } [id^="guide-"]:target .tour-tip { display: block; position: fixed; z-index: 96; left: 50%; bottom: 20px; translate: -50% 0; width: min(560px, calc(100vw - 24px)); background: var(--surface); border: 1px solid var(--ink); border-top: 4px solid var(--ink); padding: 14px 16px; .tour-count { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 6px; } strong { display: block; font-size: 0.98rem; margin-bottom: 4px; } p { margin: 0 0 14px; color: var(--ink-2); font-size: 0.88rem; } nav { display: flex; align-items: center; gap: 10px; } .tour-skip { margin-left: auto; font-size: 0.8rem; color: var(--ink-3); } } /* ---------- Confirmation destructive —
natif, zéro JS ---------- */ details.confirm { > summary { list-style: none; display: inline-block; width: fit-content; &::-webkit-details-marker { display: none; } } .confirm-body { margin-top: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--danger); padding: 12px 14px; p { margin: 0; font-size: 0.9rem; color: var(--danger-text); } } } /* ---------- Tableaux ---------- */ .table-wrap { overflow-x: auto; margin: 0 -20px -20px; padding: 0 20px 8px; /* les valeurs techniques restent sur une ligne : le tableau défile horizontalement plutôt que de céser les noms DNS caractère par caractère */ code { word-break: normal; white-space: nowrap; } } table { width: 100%; border-collapse: collapse; } th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); font-weight: 700; padding: 8px 12px; border-bottom: 2px solid var(--ink); } td { padding: 11px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; } tbody tr { &:last-child td { border-bottom: none; } &:hover td { background: color-mix(in srgb, var(--ink) 3%, transparent); } } td.num { font-variant-numeric: tabular-nums; } .status-live { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; } .row-link { font-weight: 650; text-decoration: none; &:hover { text-decoration: underline; } } .cell-help { display: block; color: var(--ink-3); font-size: 0.8rem; margin-top: 2px; } /* ---------- État vide / explications ---------- */ .empty { text-align: center; padding: 36px 20px; p { color: var(--ink-2); margin: 0 0 24px; } } .how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: left; > div { border: 1px solid var(--hairline); padding: 12px 14px; font-size: 0.88rem; color: var(--ink-2); } strong { display: block; color: var(--ink); margin-bottom: 2px; } } /* ---------- Divers ---------- */ .page-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; } .meta { color: var(--ink-3); font-size: 0.88rem; margin: 6px 0 0; } .back { font-size: 0.85rem; color: var(--ink-3); text-decoration: none; &:hover { color: var(--ink); } } .error { background: color-mix(in srgb, var(--danger) 8%, transparent); border: 1px solid var(--danger); color: var(--danger-text); padding: 10px 14px; margin-top: 16px; font-size: 0.92rem; } /* Le message d'erreur est rendu AVANT le formulaire (role=alert, annoncé et lu en premier au retour de POST) : il lui faut donc aussi une respiration en bas. */ .error + .form-stack { margin-top: 16px; } /* Rangée de contrôles secondaires (les deux actions MFA de /compte). */ .actions { display: flex; align-items: flex-start; gap: 12px; } .tech { margin-top: 24px; border: 1px solid var(--hairline); background: var(--surface); summary { cursor: pointer; padding: 10px 14px; color: var(--ink-2); font-size: 0.85rem; font-weight: 650; } pre { margin: 0; padding: 4px 14px 14px; white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-2); } } .danger-zone { border-top-color: var(--danger); > p { color: var(--ink-2); font-size: 0.9rem; margin: 4px 0 14px; } } .muted { color: var(--ink-3); } .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 0.92rem; margin: 0; dt { color: var(--ink-3); } dd { margin: 0; } } /* ---------- Page d'aide ---------- */ .help { p { color: var(--ink-2); font-size: 0.92rem; margin: 6px 0; } .states-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; > div { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: start; border-top: 1px solid var(--hairline); padding-top: 10px; font-size: 0.9rem; color: var(--ink-2); } } } /* ---------- Responsive ---------- */ @media (max-width: 720px) { .kpis { grid-template-columns: repeat(2, 1fr); .kpi:nth-child(3) { border-left: none; } .kpi:nth-child(n+3) { border-top: 1px solid var(--hairline); } } .how { grid-template-columns: 1fr; } .stepper li { font-size: 0.62rem; } .topbar .topbar-sub { display: none; } .form-stack { max-width: none; } .kv { grid-template-columns: 1fr; gap: 2px 0; dd { margin-bottom: 8px; } } .help .states-list > div { grid-template-columns: 1fr; gap: 4px; } .actions, .tour-tip nav { flex-wrap: wrap; } } /* ---------- Page /etat : état des vérifications ---------- */ /* Grille des suites de /etat : deux colonnes, l'espacement vient du gap (pas du margin-top des cartes, réinitialisé ici pour des rangées régulières). */ .checks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; margin-top: 24px; } .checks-grid > .check { margin-top: 0; } @media (max-width: 900px) { .checks-grid { grid-template-columns: 1fr; } } .checks-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; strong { font-size: 1.05rem; } .dot { width: 14px; height: 14px; } } .check .check-head { display: flex; align-items: flex-start; gap: 10px; h2 { margin: 0; font-size: 1.02rem; flex: 1; min-width: 0; } } .check-verdict { flex: none; white-space: nowrap; margin-top: 2px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; &.is-ok { color: var(--ok-text); } &.is-bad { color: var(--danger-text); } &.is-idle { color: var(--ink-3); } } /* Suite jamais lancée : pastille neutre (ni verte ni rouge). */ .check .dot.is-idle { background: var(--ink-3); opacity: 0.45; } /* ---------- Authentification (login, setup, compte) ---------- */ .auth { max-width: 30rem; margin: 1.5rem auto; } .notice { border: 1px solid var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); color: var(--ok-text); padding: 10px 14px; margin-top: 16px; font-size: 0.92rem; } .logout { display: flex; align-items: center; gap: 10px; } .topbar-user { font-size: 0.85rem; color: var(--ink-3); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .role-tag { display: inline-block; border: 1px solid var(--hairline); padding: 0 6px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-2); } .btn.small { min-height: 32px; padding: 4px 10px; font-size: 0.82rem; } code.secret { font-size: 1.05rem; letter-spacing: 0.08em; user-select: all; } .uri-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } code.wrap { word-break: break-all; white-space: normal; } .backup { margin-top: 16px; border: 1px solid var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); padding: 12px 14px; } .backup-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 6px 14px; margin: 10px 0 0; padding: 0; list-style: none; code { font-size: 0.95rem; letter-spacing: 0.04em; user-select: all; } } .check-summary { margin: 8px 0 0; font-weight: 600; color: var(--ink); } .check-meta { font-size: 0.82rem; margin: 6px 0 0; } .check-out { margin-top: 12px; border: 1px solid var(--hairline); background: var(--surface); summary { cursor: pointer; padding: 8px 12px; color: var(--ink-2); font-size: 0.82rem; font-weight: 650; } pre { margin: 0; padding: 0 12px 12px; max-height: 22rem; overflow: auto; white-space: pre; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-2); } }