/* =====================================================================
   DEIMIX HUB - what the owner's first look asked for (round 006), beside
   form-guidance.js and app-code-qr.js:
     the invite's domain line          .domain-hint
     permissions grouped by area       .permission-area
     the access-key filter             .choice-filter
     a secret shown once, landed on    [data-shown-once].is-just-shown
     one field for a six-digit code    .one-time-code-entry
     the app-code QR                   .app-code-pairing, .app-code-qr
   ===================================================================== */

/* The invite's domain line: under the email, said as soon as it is wrong. */
.domain-hint { display: flex; gap: 6px; align-items: center; margin-top: 7px; }
.domain-hint[hidden] { display: none; }
.domain-hint .svg-icon { color: var(--choice); }

/* Permissions grouped by area: a small title, one plain line, the cards. */
.permission-area { margin-top: 18px; }
.permission-area:first-of-type { margin-top: 10px; }
.permission-area-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.permission-area-head h4 { margin: 0; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--soft-text); }
.permission-area-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* The access-key filter: our own text box, a clear button, a count. */
.choice-filter { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; max-width: 420px; }
.choice-filter .input { height: 38px; font-size: 14px; }
.choice-filter .field-hint:empty { display: none; }
.choice-check[hidden] { display: none; }

/* A secret shown once: the page lands on it; a ring says "this one". */
[data-shown-once].is-just-shown .secret-box,
[data-shown-once].is-just-shown .recovery-grid { box-shadow: 0 0 0 2px var(--choice-line); }
.shown-once-codes { display: flex; flex-direction: column; gap: 10px; }

/* One field for a six-digit code (a password manager fills one field). */
.one-time-code-entry { width: 100%; }
.one-time-code-input {
  width: 100%; max-width: 320px; height: 58px; padding: 0 14px; border-radius: 10px;
  background: var(--ink-deep); border: 1px solid var(--line-strong); color: var(--text);
  font-family: var(--font-mono); font-size: 28px; letter-spacing: .42em; text-align: center; text-indent: .42em;
}
.one-time-code-input::placeholder { color: var(--faint); }
.one-time-code-input:hover { border-color: var(--muted); }
.one-time-code-input:focus { outline: none; border-color: var(--soft-text); box-shadow: 0 0 0 3px rgba(220,230,238,.12); }
.one-time-code-entry.is-wrong .one-time-code-input { border-color: var(--danger); }
.app-code-setup .one-time-code-input { height: 50px; font-size: 24px; }

/* The app-code QR beside the key: dark on a white tile, whatever the theme. */
.app-code-pairing { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.app-code-pairing .secret-box { flex: 1 1 260px; }
.app-code-qr { margin: 0; display: flex; flex-direction: column; gap: 6px; width: 176px; }
.app-code-qr[hidden] { display: none; }
.app-code-qr-drawing { width: 176px; height: 176px; border-radius: 10px; overflow: hidden; background: #FFFFFF; }
.app-code-qr-drawing svg { display: block; width: 100%; height: 100%; }
.app-code-qr figcaption { font-size: 12px; line-height: 1.4; }

/* The new key's notice: its Docs link and the command read as words, never
   in blue (R-096: blue is only the forward button). */
.new-key .notice-box a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.new-key .notice-box a:hover { color: var(--soft-text); }
.new-key .notice-box code { color: var(--text); font-size: 12.5px; }