/* Synth.Directory: the auth modal + the "Something missing?" panel (James, 11 Sep 2026).
   Reuses the site's own tokens and control classes (.btn, .f, .check, .meta - see the top of
   wiki.css) rather than redefining them - this file only adds the new dialog/aside chrome and
   the auth-card look shared by the modal and the standalone /login, /register, /forgot-password,
   /reset-password pages (the no-JS fallback). Barlow, no borders, fills only, radius 8 on
   dialogs, a dimmed backdrop, cursor pointer on every clickable, works at 400px. */

/* ---- the auth modal ---------------------------------------------------- */
.auth-modal { border: 0; border-radius: 8px; padding: 0; background: var(--w-card); color: var(--w-bone); width: min(420px, calc(100vw - 32px)); box-shadow: var(--w-shadow); }
.auth-modal::backdrop { background: rgba(10, 8, 4, .55); }
.auth-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 0; }
.auth-tabs { display: flex; gap: 4px; }
.auth-tab { background: transparent; border: 0; border-radius: 2px; padding: 8px 12px; cursor: pointer; font-weight: 500; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--w-bone2); }
.auth-tab:hover { background: var(--w-key); color: var(--w-bone); }
.auth-tab.is-on { color: var(--w-green); background: var(--w-key); }
.auth-close { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; background: transparent; border: 0; color: var(--w-bone2); cursor: pointer; }
.auth-close:hover { background: var(--w-key); color: var(--w-bone); }
.auth-close svg { width: 14px; height: 14px; }
.auth-form { display: none; flex-direction: column; padding: 20px; }
.auth-form.is-on { display: flex; }
.auth-form-small { padding-top: 4px; }
.auth-err { background: var(--w-blood-fill); color: var(--w-blood-text); border-radius: 2px; padding: 10px 12px; font-size: 14px; margin: 0 0 14px; }
.auth-err.is-ok { background: var(--w-green-fill); color: var(--w-green); }
.auth-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.auth-link { background: transparent; border: 0; padding: 0; color: var(--w-green); cursor: pointer; font-size: 13px; text-decoration: none; }
.auth-link:hover { color: var(--w-bone); }

/* ---- the standalone auth pages (no-JS fallback for /login, /register, /forgot-password,
   /reset-password) - the same card, centred in the page rather than floated as a dialog */
.auth-page { display: flex; justify-content: center; padding: 24px 0 8px; }
.auth-card { background: var(--w-card); border-radius: 8px; padding: 32px; width: 100%; max-width: 420px; }
.auth-card h1 { margin-bottom: 8px; }
.auth-card p.lead { margin-bottom: 20px; }
.auth-card .meta { margin-top: 14px; }
.auth-card .auth-form { padding: 0; }

@media (max-width: 460px) {
  .auth-card { padding: 24px 20px; border-radius: 8px; }
}

/* ---- the "Something missing?" panel ------------------------------------ */
.missing-scrim { position: fixed; inset: 0; background: var(--w-scrim); z-index: 30; cursor: pointer; }
.missing-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100vw; background: var(--w-card); z-index: 31; overflow-y: auto; padding: 24px 28px 48px; box-shadow: var(--w-shadow-panel); border-radius: 8px 0 0 8px; transform: translateX(0); transition: transform var(--w-move); }
.missing-panel[hidden] { display: block; transform: translateX(100%); visibility: hidden; }
.missing-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.missing-close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; background: var(--w-key); color: var(--w-bone2); border: 0; cursor: pointer; }
.missing-close:hover { background: var(--w-raise); color: var(--w-bone); }
.missing-close svg { width: 14px; height: 14px; }
.missing-link { margin-bottom: 4px; }
.missing-link-hint { margin-bottom: 20px; }
.missing-section { background: var(--w-key); border-radius: 8px; padding: 20px; }
.missing-section + .missing-section { margin-top: 16px; }
.missing-section h2 { margin-bottom: 14px; }
.missing-section .f + .f { margin-top: 14px; }
.missing-err { background: var(--w-blood-fill); color: var(--w-blood-text); border-radius: 2px; padding: 10px 12px; font-size: 14px; margin: 0 0 14px; }
.missing-hint { font-size: 13px; color: var(--w-mute); margin-top: 10px; }
.missing-actions { margin-top: 8px; }
.missing-status { margin-top: 10px; font-size: 14px; color: var(--w-green); }
.missing-status.is-error { color: var(--w-blood-text); }
.missing-section.is-linked-away { opacity: .55; }

@media (max-width: 480px) {
  .missing-panel { width: 100vw; border-radius: 0; padding: 20px 16px 40px; }
}