/* Education360 2.0.0 — sign-in security (app/modules/security). Colours come from app.css's variables, so dark mode and the
   brand colour follow; logical properties (inline-start/end) so Urdu pages mirror. Works at 390 px and in Easy view. */

/* the code boxes: big, spaced digits, never mirrored */
.sec-code { font-size: 1.6rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; min-height: 56px; direction: ltr; }
.sec-code:not(.sec-digits) { letter-spacing: .08em; font-size: 1.25rem; }
.sec-card { padding: 28px; }
.sec-card h1 { margin-block-end: 6px; }
.sec-links { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; }
.sec-links a, .sec-links .linklike { display: inline-flex; align-items: center; gap: 4px; }
.sec-links .linklike { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--brand-ink); cursor: pointer; }
.sec-links .linklike:hover { text-decoration: underline; }
.sec-msg { margin: 10px 0 0; font-size: 14px; color: var(--red-ink, #b42318); }
.sec-msg[data-kind="info"] { color: var(--text-2); }

/* "or" between the password form and the other ways in */
.sec-alt { margin-block-start: 14px; display: grid; gap: 8px; }
.sec-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.sec-or::before, .sec-or::after { content: ""; flex: 1; border-block-start: 1px solid var(--border); }
.sec-channels label { cursor: pointer; }

/* Sign-in & security */
.sec-list .list-item { gap: 10px; }
.sec-list form { margin: 0; }
.sec-add-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sec-add-row .field { min-width: 200px; flex: 1; }
.sec-confirm-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.sec-confirm-row .field { min-width: 220px; flex: 1; }
.sec-confirm-row > .btn { margin-block-start: 26px; }
.sec-confirm { border-inline-start: 4px solid var(--amber, #f59f00); }
.sec-summary { display: flex; flex-wrap: wrap; gap: 10px; }
.sec-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.sec-actions { display: grid; gap: 12px; align-content: start; }
.sec-actions form { margin: 0; }
.sec-danger { border-color: var(--red-solid, #d92d20); }
.sec-narrow { max-width: 520px; }
.sec-fresh { display: flex; align-items: center; gap: 6px; }
.sec-roles { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-block: 4px; }

/* the two-step set-up */
.sec-steps { display: grid; gap: 16px; max-width: 760px; }
.sec-step-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 15px; font-weight: 700; margin-inline-end: 10px; }
.sec-add { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.sec-add > .grow { flex: 1 1 260px; min-width: 0; }
.sec-add p { overflow-wrap: anywhere; }
.sec-qr { width: 196px; height: 196px; padding: 10px; background: #fff; border-radius: 12px; border: 1px solid var(--border); flex: none; }
.sec-qr svg { width: 100%; height: 100%; display: block; }
.sec-key { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sec-key code { font-size: 1.05rem; letter-spacing: .06em; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); word-break: break-all; }
/* on a computer the "open in my app" button does nothing useful */
@media (hover: hover) and (pointer: fine) { .sec-onphone { display: none; } }

/* recovery codes */
.sec-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; padding-inline-start: 1.4em; margin: 14px 0 18px; font-size: 1.1rem; }
.sec-codes code { letter-spacing: .05em; }
@media (max-width: 420px) { .sec-codes { grid-template-columns: 1fr; } }
@media print {
  .sidebar, .topbar, .app-foot, .bottom-nav, .page-actions, .sec-codes-card .card-foot, .sec-codes-card .btn, .sec-codes-card .alert, #ast, .sec-imp { display: none !important; }
  .sec-codes { font-size: 14pt; }
}

/* the idle warning */
.sec-idle-count { font-variant-numeric: tabular-nums; }
.sec-idle-modal { z-index: 400; }

/* "You are signed in as …" and "set up two-step" bars: above the page, under the dialogs */
.sec-imp, .sec-due { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 10px 16px; font-size: 14px; }
.sec-imp { background: var(--violet-solid, #7048e8); color: #fff; }
.sec-imp form { margin: 0; }
.sec-imp .btn { background: #fff; color: var(--violet-ink, #5f3dc4); border-color: transparent; }
.sec-due { background: var(--amber-bg, #fff4e5); color: var(--amber-ink, #8a4b00); border-block-end: 1px solid var(--border); }
.sec-imp > span, .sec-due > span { display: inline-flex; gap: 8px; align-items: center; }
body:has(.sec-imp) .sec-due { top: 44px; }

@media (max-width: 600px) {
  .sec-card { padding: 20px 16px; }
  .sec-qr { width: 168px; height: 168px; margin-inline: auto; }
  .sec-add { justify-content: center; }
  .sec-confirm-row > .btn { margin-block-start: 0; width: 100%; }
  .sec-add-row > .btn { width: 100%; }
}
html[data-easy] .sec-code { font-size: 1.9rem; min-height: 64px; }