/* Agur account screens — shared sea/sand styling, 12.10.2026.
 * Login, logout, reset, invite, password and first-login keep their existing
 * interaction contract. Palette: packages/ui/tokens.css; scoped here so
 * other modules and tenant branding do not change.
 */

/* ════════════════════════════════════════════════════════════════════════════════════════════
 * הכרטיס המשותף — account-login.html · reset.html · invite.html · change-password.html
 * ════════════════════════════════════════════════════════════════════════════════════════════ */
.dan-auth {
  --d-green: var(--teal-600); --d-green-dark: var(--teal-700);
  --d-ink: var(--sea-ink); --d-text: var(--sea-ink); --d-body: var(--sea-ink);
  --d-muted: var(--sand-700); --d-faint: var(--sand-700);
  --d-cream: var(--sand-100); --d-cream2: var(--sand-50);
  --d-line: var(--sand-300); --d-line-soft: var(--sand-200);
  --d-track: var(--sand-100); --d-mint: var(--teal-50);
  --d-orange-ink: var(--clay-dark); --d-orange-soft: var(--clay-tint-50);
  --d-shadow: var(--shadow-card);
  color: var(--sea-ink); line-height: var(--lh-body);
}                                                        /* ⑥ */
.dan-auth * { box-sizing: border-box; }

/* ── הדף (מחוץ למעטפת) — ה-`body` של דן: רקע · מרכוז · ריווח ── */
.dan-auth--page {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 20px;
  background: var(--sand-200);
}
.dan-auth--page.dan-reset, .dan-auth--page.dan-invite { padding: clamp(20px, 5vh, 56px) 20px; }

.dan-auth .awrap {
  container: awrap / inline-size;
  width: 100%; max-width: 540px; margin-inline: auto;
  display: flex; flex-direction: column; gap: 22px;
}
.dan-reset .awrap, .dan-invite .awrap, .dan-change-password .awrap { max-width: 520px; gap: 18px; }

.dan-auth .acard {
  background: var(--sand-50); border-radius: 32px; overflow: hidden;
  border: 1px solid var(--sand-300); box-shadow: var(--shadow-card);
}
.dan-reset .acard, .dan-invite .acard, .dan-change-password .acard { border-radius: clamp(20px, 3vh, 28px); }

/* ── הסצנה והקשת ── */
.dan-auth .ascene {
  height: 148px; position: relative; display: grid; place-items: end center; overflow: hidden;
  background: var(--sand-100);
}
.dan-auth .ascene > svg { position: absolute; inset: 0; width: 100%; height: 100%; }       /* base.css: svg 20×20 */
.dan-auth .aarch {
  position: relative; width: 112px; height: 100px; background: var(--sand-50); border-radius: var(--r-lg) var(--r-lg) 0 0;
  display: grid; place-items: center; padding-top: 18px;
}
.dan-auth .abrand { display: block; width: 60px; height: 60px; border-radius: 14px; }
.dan-auth .abrand--tenant { object-fit: contain; border-radius: 0; }
.dan-reset .ascene, .dan-invite .ascene, .dan-change-password .ascene { height: clamp(110px, 16vh, 140px); }
.dan-reset .aarch, .dan-invite .aarch, .dan-change-password .aarch { width: 96px; height: 88px; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-top: 16px; }
.dan-reset .abrand, .dan-invite .abrand, .dan-change-password .abrand { width: 46px; height: 46px; border-radius: 11px; }
/* ⭐ 05.10 · לוגו רחב (כפר בלום): הקופסה ריבועית, ולכן הוא היה מצויר ברוחב 60px. הרוחב עד גבול הקשת והגובה לפי היחס; לוגו גבוה (דן) — כמו קודם. */
.dan-auth .abrand--tenant { width: auto; height: auto; max-width: 96px; max-height: 60px; }
.dan-reset .abrand--tenant, .dan-invite .abrand--tenant, .dan-change-password .abrand--tenant { max-width: 76px; max-height: 46px; }

/* ── הגוף והכותרת ── */
.dan-auth .abody { padding: 26px 46px 44px; }
.dan-reset .abody, .dan-invite .abody, .dan-change-password .abody { padding: 24px 30px 32px; display: flex; flex-direction: column; gap: 16px; }

.dan-auth .ahead { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.dan-reset .ahead, .dan-invite .ahead, .dan-change-password .ahead { gap: 6px; align-items: stretch; }
.dan-auth .atitle { margin: 0; font-size: 30px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; line-height: normal; }
.dan-auth .atitle--sm { font-size: 26px; }
.dan-reset .atitle, .dan-invite .atitle, .dan-change-password .atitle { font-size: clamp(23px, 3.4vh, 28px); }
.dan-auth .asub { margin: 0; font-size: 16px; color: var(--d-muted); line-height: 1.55; }
.dan-auth .asub b { color: var(--d-ink); font-weight: 600; }
.dan-auth .asub--lines { display: flex; align-items: center; gap: 10px; font-size: 16.5px; line-height: normal; }
.dan-auth .asub--lines i { display: block; width: 26px; height: 1.5px; background: #EBD9BC; }

/* ── טפסים ושדות ── */
.dan-auth .aform { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.dan-reset .aform, .dan-invite .aform, .dan-change-password .aform { margin-top: 0; }
.dan-auth .form-field { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.dan-auth .form-field label { font-size: 15px; font-weight: 500; color: var(--d-body); }
.dan-reset .form-field, .dan-invite .form-field, .dan-change-password .form-field { gap: 6px; }
.dan-reset .form-field label, .dan-invite .form-field label, .dan-change-password .form-field label { font-size: 14.5px; }
.dan-auth .form-input {
  width: 100%; min-width: 0; min-height: 52px; font: inherit; font-size: 18px; padding: 16px 18px;
  border: 1.5px solid var(--sand-600); border-radius: 16px; background: var(--d-cream2); color: var(--d-text);      /* ⑤ גבול 3:1 */
}
.dan-reset .form-input, .dan-invite .form-input, .dan-change-password .form-input { font-size: 17px; padding: 14px 16px; border-radius: 14px; }
.dan-auth .form-input:focus {                                                                          /* ⑦ */
  outline: 2px solid var(--d-green); outline-offset: 2px;
  border-color: var(--d-green); background: var(--sand-50); box-shadow: none;
}
.dan-auth .form-input[aria-invalid="true"] { border-color: var(--d-orange-ink); border-width: 2px; }
.dan-auth .form-input:read-only, .dan-auth .form-input:disabled { background: var(--d-track); }
.dan-auth .form-input:disabled { opacity: .7; }
/* ⑨ `input::placeholder{color:#A9B2AB}` של דן — כאן `--d-faint` (AA), ו-`opacity:1`: Firefox מעמעם placeholder. התווית נשארת השם הנגיש. */
.dan-auth .form-input::placeholder { color: var(--d-faint); opacity: 1; }
/* שדה קוד — `#codeInput` של דן. ⚠️ dir=ltr ו-inputmode=numeric בסימון (ראו login.js); letter-spacing כדי שאפשר יהיה לספור. */
.dan-auth .acode { text-align: center; letter-spacing: .5em; font-size: 26px; font-weight: 600; padding-inline-start: calc(18px + .5em); }

.dan-auth .ahint, .dan-auth .kit-field__hint { margin: 0; font-size: 13.5px; color: var(--d-faint); line-height: 1.5; }
.dan-auth .kit-field__error { margin: 0; font-size: 14px; font-weight: 500; color: var(--d-orange-ink); }

/* ── הודעת שגיאה — `.error` (כניסה) ו-`.msg.err` (reset · invite · change-password) של דן: כתום רך ──
 * `.aerr` למסכי הכניסה; `.alert` הוא החריץ של `formErrorSlotHTML` (kit) — אותו צבע וריפוד. `[hidden]` מנצח (dan.css).
 * ⑧ **הבועה "!" רק ב-`.error` של הכניסה** (`display:flex`); ב-`.msg.err` של שלושת האחרים — תיבה (`display:block`), בלי בועה. */
.dan-auth .aerr, .dan-auth .alert {
  display: flex; align-items: center; gap: 10px; margin: 0;
  background: var(--d-orange-soft); color: var(--d-orange-ink); border: 0; border-radius: 14px;
  padding: 14px 16px; font-size: 15.5px; line-height: 1.5;
}
.dan-login .aerr::before, .dan-login .alert::before {
  content: "!"; content: "!" / "";
  flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--d-orange-ink); color: var(--surface);      /* ⑤ */
  font-size: 13px; display: grid; place-items: center;
}
.dan-reset .alert, .dan-invite .alert, .dan-change-password .alert { display: block; line-height: 1.55; }

/* ── כפתורים — `.btn` · `.ghost` · `.switch button` · `.resend button` של דן ── */
.dan-auth .abtn {
  display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 18px; text-align: center; cursor: pointer;
  font: inherit; font-size: 19px; font-weight: 600; color: var(--surface); background: var(--d-green); border: 0; border-radius: 999px;
  box-shadow: none;
}
.dan-reset .abtn, .dan-invite .abtn, .dan-change-password .abtn { font-size: 18px; padding: 16px; margin-top: 4px; }
.dan-auth .abtn:hover { background: var(--d-green-dark); }
.dan-auth .abtn:disabled { opacity: .65; cursor: default; }
.dan-auth .aghost {
  display: block; width: 100%; min-height: 44px; padding: 15px 36px; text-align: center; text-decoration: none; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 500; color: var(--d-green); background: var(--teal-50); border: 0; border-radius: 999px;
}
.dan-auth .aghost:hover { background: var(--d-mint); }
.dan-auth .aghost:disabled { opacity: .65; cursor: default; }
.dan-auth .aghost:disabled:hover { background: var(--teal-50); }
.dan-auth .alink {
  display: block; margin-inline: auto; min-height: 44px; padding: 8px 4px; cursor: pointer;
  font: inherit; font-size: 15.5px; font-weight: 500; color: var(--d-green); background: none; border: 0;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--teal-200);
}
.dan-auth .alink:hover { color: var(--d-orange-ink); text-decoration-color: var(--clay); }            /* ⑤ */
.dan-auth .alink:disabled { color: var(--d-faint); cursor: default; text-decoration: none; }
.dan-auth .abody > .alink { margin-top: 18px; }
.dan-auth .aways { display: flex; flex-direction: column; gap: 12px; }
.dan-auth .aways[data-oidc], .dan-auth .aways[data-quick] { margin-top: 16px; }
.dan-auth .aactions { display: grid; gap: 12px; margin-top: 16px; }
.dan-auth .aactions .abtn { margin-top: 0; }
.dan-auth .offer-sub { margin: 14px 0 0; text-align: center; }
.dan-auth .aform > .ahelp { margin: 0; }                                                          /* "שכחתם סיסמה?" בתוך הטופס — הרווח מ-gap */
/* ⑩ `.resend` של דן: "לא הגיע? <בקשו קוד חדש>" — שורה מושתקת ובה קישור-כפתור קטן. min-height 44 נשאר (יעד מגע). */
.dan-auth .aresend { margin: -4px 0 0; text-align: center; font-size: 14px; color: var(--d-faint); }
.dan-auth .aresend .alink { display: inline-block; margin: 0; padding: 8px 4px; font-size: 14px; font-weight: 400; text-underline-offset: 3px; }
.dan-auth .aresend-wait { margin: -8px 0 0; text-align: center; font-size: 14px; color: var(--d-faint); font-variant-numeric: tabular-nums; }

/* ── הודעות — `.note` · `.msg.ok` של דן ── */
.dan-auth .anote { margin: 0; padding: 13px 16px; font-size: 14.5px; line-height: 1.6; color: var(--teal-700); background: var(--d-mint); border-radius: 14px; }
.dan-auth .anote--warn { color: var(--d-orange-ink); background: var(--d-orange-soft); }
.dan-auth .anote a { color: inherit; font-weight: 500; text-underline-offset: 3px; }
.dan-auth .amsg { margin: 0; padding: 14px 16px; font-size: 15.5px; line-height: 1.55; border-radius: 14px; }
.dan-auth .amsg--ok { color: var(--d-green-dark); background: var(--d-mint); }
.dan-login .abody > .anote { margin-top: 22px; }
.dan-login .abody > .anote + .aform, .dan-login .abody > .anote + .anote { margin-top: 18px; }
.dan-login [data-code-blocked] p { margin: 0 0 14px; }
.dan-login [data-code-blocked] .aghost { margin-top: 12px; }

/* ── מצב בלי טופס — `.state` של דן ── */
.dan-auth .astate { padding: 40px 30px; text-align: center; color: var(--d-muted); font-size: 16px; line-height: 1.65; }
.dan-auth .astate p { margin: 0; }
.dan-auth .astate__t { display: block; margin: 0 0 8px; font-size: 19px; font-weight: 600; color: var(--d-ink); letter-spacing: normal; line-height: 1.65; }

/* ── תחתית — `.help` · `.foot` של דן ── */
.dan-auth .ahelp { margin: 22px 0 0; text-align: center; font-size: 14.5px; color: var(--d-faint); line-height: 1.6; }
.dan-auth .afoot { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; font-size: 13.5px; color: var(--d-muted); }
.dan-auth .afoot svg { flex: none; width: 60px; height: 12px; }
.dan-auth .afoot--help { display: block; font-size: 14.5px; line-height: 1.6; }
.dan-auth .afoot--help span { color: var(--clay-dark); }                                                   /* ⑪ כתום כהה: #A9542A הוא 4.44 על #E9EDE4 */

/* ── "דרכים נוספות" — של עגור (בדן אין), בשפה של דן: קו עליון · כפתורי ghost מושבתים · הסיבה ליד כל אחד ── */
.dan-auth .aothers { margin-top: 26px; border-top: 1px solid var(--d-line); padding-top: 8px; }
.dan-auth .aothers summary { min-height: 44px; padding-block: 10px; cursor: pointer; font-size: 15.5px; font-weight: 500; color: var(--d-body); }
.dan-auth .aothers__note { font-size: 14px; font-weight: 400; color: var(--d-muted); }
.dan-auth .amethods { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 14px; }
.dan-auth .amethods li { display: grid; gap: 6px; }
.dan-auth .amethods .aghost { text-align: start; }
.dan-auth .awhy { font-size: 14px; color: var(--d-muted); }

/* ── הרשמת אפליקציית המאמת (שלב שני) — של עגור, בשפה של דן ── */
.dan-auth .aenroll { margin-top: 26px; border-top: 1px solid var(--d-line); padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.dan-auth .aenroll--primary { border-top: 0; padding-top: 0; margin-top: 30px; }
.dan-auth .aenroll__t { margin: 0; font-size: 17px; font-weight: 600; color: var(--d-ink); letter-spacing: normal; line-height: normal; }
.dan-auth .aenroll__step { display: flex; flex-direction: column; gap: 12px; }
.dan-auth .aenroll__step .aform { margin-top: 0; }
.dan-auth .aenroll__list { margin: 4px 0; padding-inline-start: 22px; display: grid; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--d-body); }
.dan-auth .aenroll__link { cursor: pointer; color: var(--d-green); }
/* המפתח הוא 32 תווים רצופים — `overflow-wrap:anywhere`, אחרת הכרטיס גולש ב-375 (ui-viewport). */
.dan-auth .akey {
  display: block; margin-top: 6px; padding: 10px 14px; border: 1px solid var(--d-line); border-radius: 12px;
  background: var(--teal-50); color: var(--d-green-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14.5px; letter-spacing: .08em; overflow-wrap: anywhere; user-select: all;
}

/* ── רוחב צר: `@media (max-width:560px)` של דן, כ-container query על המכל ── */
@container awrap (max-width: 520px) {
  .dan-login .abody, .dan-logout .abody { padding: 22px 24px 34px; }
  .dan-login .atitle, .dan-logout .atitle { font-size: 30px; }
  .dan-login .atitle--sm, .dan-logout .atitle--sm { font-size: 24px; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════════
 * הכניסה הראשונה — src/app/screens/first-login.js  (`/account/first-login`)
 * אין לה דף בדן — המקביל הוא מודאל ההסכמה (`legal-consent.js` + `header.css` · `.kd-legal-*`). כרטיסי הדשבורד של דן, גלולות, וקופסת ה"חתימה".
 * ════════════════════════════════════════════════════════════════════════════════════════════ */
.dan-first-login { container: dan-first-login / inline-size; display: flex; flex-direction: column; gap: 18px; }
.dan-first-login .flcrumbs { font-size: 14.5px; color: var(--d-muted); }
.dan-first-login .flcrumbs a { color: var(--d-green); font-weight: 500; text-decoration: none; }
.dan-first-login .flcrumbs a:hover { color: var(--d-orange-ink); }
.dan-first-login h1 { margin: 0 0 4px; font-size: 26px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; line-height: normal; }
.dan-first-login .flmeta { margin: 0; font-size: 15px; color: var(--d-muted); }

/* הבאנר — `.dalert.plain` (פתוחה) ו-`.dalert.warn` (חסומה) של הדשבורד. */
.dan-first-login .flbanner {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-size: 15px; line-height: 1.5;
  color: var(--d-body); background: var(--sand-50); border: 1px solid var(--d-line); border-radius: 16px;
}
.dan-first-login .flbanner p { margin: 0; }
.dan-first-login .flbanner--blocked { color: var(--d-orange-ink); background: var(--d-orange-soft); border-color: transparent; }

.dan-first-login .flgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; align-items: start; }
/* `card()` של packages/ui — מעוצב מחדש כ-`.dcard` של דן: בלי מסגרת, רדיוס 22, צל, כותרת 17px. */
.dan-first-login .card {
  display: flex; flex-direction: column; gap: 14px; padding: 26px 28px;
  background: var(--sand-50); border: 0; border-radius: 22px; box-shadow: var(--d-shadow);
}
.dan-first-login .card > header { margin: 0; }
.dan-first-login .card > header h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--d-ink); letter-spacing: normal; line-height: normal; }
.dan-first-login .card p { margin: 0; }
.dan-first-login .card a { color: var(--d-green); }
.dan-first-login .card code { padding: 1px 5px; border-radius: 5px; font-size: .9em; color: var(--d-green-dark); background: var(--teal-50); }

.dan-first-login .flrows { display: flex; flex-direction: column; }
.dan-first-login .flrow { display: flex; align-items: flex-start; gap: 14px; padding-block: 12px; border-top: 1px solid var(--d-line-soft); }
.dan-first-login .flrows > .flrow:first-child { border-top: 0; padding-top: 0; }
.dan-first-login .flrow__main { flex: 1; min-width: 0; }
.dan-first-login .flrow__title { font-size: 15.5px; font-weight: 500; color: var(--d-ink); }
.dan-first-login .flrow__meta { font-size: 14px; line-height: 1.6; color: var(--d-muted); overflow-wrap: anywhere; }
.dan-first-login .flrow__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.dan-first-login .flrow__meta:empty { display: none; }                                           /* `minor.reason` ריק לבגיר */
.dan-first-login .flnote { font-size: 14.5px; line-height: 1.6; color: var(--d-body); }

/* גלולות — `done` (ירוק רך) · `open` (כתום רך) · `blocked` (כתום כהה, לבן עליו 5.27) · תג (חול). ⑤ */
.dan-first-login .flpill, .dan-first-login .fltag {
  display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.dan-first-login .flpill { color: var(--d-green-dark); background: var(--d-mint); }
.dan-first-login .flpill--open { color: var(--d-orange-ink); background: var(--d-orange-soft); }
.dan-first-login .flpill--blocked { color: var(--surface); background: var(--d-orange-ink); }
.dan-first-login .fltag { color: var(--d-body); background: var(--d-track); }

/* קופסת ה"חתימה" — `.kd-legal-sign` + `.kd-legal-btn` של דן: לבן · מסגרת · כפתור גלולה 50px. */
.dan-first-login .flsign { margin-top: 28px; padding: 20px; background: var(--sand-50); border: 1px solid var(--d-line); border-radius: 16px; }
.dan-first-login .flsign .kit-status { min-height: 0; margin: 0 0 8px; }
.dan-first-login .flsign .kit-status:empty { display: none; }
.dan-first-login .flsign .abtn { height: 50px; min-height: 50px; padding: 0 18px; margin: 16px 0 0; font-size: 16.5px; border-radius: 25px; box-shadow: none; }
.dan-first-login .flsign .abtn:disabled { background: var(--teal-100); opacity: 1; cursor: not-allowed; }
.dan-first-login .flsign .abtn:disabled { color: var(--teal-800); }                                        /* ⑤ לבן על #9FC3B0 הוא 1.93; כהה עליו 6.35 */

/* ── מודאל החתימה — `dialog.kd-legal` של דן (header.css:572-649), על `kit-dialog` ──
 * ⚠️ נפתח מעל המסך (`showModal` — top layer), אבל הוא צאצא של `.dan-first-login` ולכן הפלטה (`--d-*`) וה-container חלים עליו.
 * ⚠️ `min-height:0` על הגוף — בלעדיו flex מסרב להתכווץ והדיאלוג גולש מעל ראש המסך (הלקח של דן באותו קובץ: `top:-37px`). */
.dan-first-login .kit-dialog {
  padding: 0; border: 0; border-radius: 22px; width: min(760px, calc(100vw - 32px)); max-height: min(88vh, 880px);
  background: var(--d-cream2); color: var(--d-ink); box-shadow: 0 24px 70px rgba(16,42,32,.22);
}
.dan-first-login .kit-dialog::backdrop { background: rgba(16,42,32,.42); backdrop-filter: blur(2px); }
.dan-first-login .kit-dialog__head { padding: 22px 28px 0; border: 0; }
.dan-first-login .kit-dialog__head h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: normal; color: var(--d-ink); }
.dan-first-login .kit-dialog__x { background: var(--d-track); color: var(--d-body); }
.dan-first-login .kit-dialog__x:hover { background: var(--d-mint); color: var(--d-green-dark); }
.dan-first-login .kit-dialog__body { padding: 8px 28px 24px; min-height: 0; overscroll-behavior: contain; }
.dan-first-login .fldoc { font-size: 14.5px; line-height: 1.7; color: var(--d-body); }
.dan-first-login .fldoc p { margin: 9px 0; }
.dan-first-login .fldoc a { color: var(--d-green); font-weight: 500; }
/* התיבה — `.kd-legal-ok`: 20px, accent ירוק, שורה שלמה לחיצה (≥ 44px). */
.dan-first-login .flok { display: flex; gap: 11px; align-items: flex-start; min-height: 44px; padding-block: 10px; cursor: pointer; font-size: 15.5px; line-height: 1.5; color: var(--d-body); }
.dan-first-login .flok input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--d-green); cursor: pointer; }
/* "לחתימה ↓" — `.kd-legal-jump`: מרחף מעל הגלילה, ביחס לדיאלוג (position:fixed של ה-UA); `inset-inline-start:50%` + translateX(50%) ⟹ במרכז ב-RTL. */
.dan-first-login .fljump {
  position: absolute; bottom: 18px; inset-inline-start: 50%; transform: translateX(50%); min-height: 44px;
  border: 0; border-radius: 22px; padding: 11px 20px; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 500; color: var(--surface); background: var(--d-ink); box-shadow: 0 6px 20px rgba(16,42,32,.3);
}

@container dan-first-login (max-width: 520px) {
  .dan-first-login .kit-dialog__head { padding: 18px 18px 0; }
  .dan-first-login .kit-dialog__body { padding: 6px 18px 20px; }
  .dan-first-login .card { padding: 22px 20px; }
  .dan-first-login .flrow { flex-direction: column; gap: 8px; }
  .dan-first-login .flrow__side { flex-direction: row; align-items: center; flex-wrap: wrap; }
}

/* Agur lockup uses the same mark as the company homepage. */
.dan-auth .auth-lockup {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  direction: ltr; color: var(--teal-600); font-size: var(--fs-h2); font-weight: 600;
  letter-spacing: .12em; line-height: 1;
}
.dan-auth .auth-lockup svg { width: 34px; height: 28px; flex: none; }
.dan-auth .aarch .abrand--agur { color: var(--teal-600); width: 60px; height: 48px; border-radius: 0; }
.dan-auth .afoot svg { color: var(--sand-600); }
.dan-auth .abtn:focus-visible, .dan-auth .aghost:focus-visible, .dan-auth .alink:focus-visible {
  outline: 2px solid var(--teal-600); outline-offset: 3px;
}