/*
 * Subclavis component stylesheet
 * Phase 1: empty placeholder. Styles added from Phase 2 onward.
 * See Arch §B12 (phone-first, stacked-card dashboards) and NFR-RWD.
 */

/* intl-tel-input: force block display and full width so the flag+input wrapper
   fills its container and matches the email field width. Also force the input
   itself to 100% so it fills the wrapper (ITI doesn't do this by default). */
.iti {
    display: block !important;
    width: 100%;
}
.iti input[type="tel"],
.iti input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

/* Auth flow pages (request, reinstate, erase): centre all card content.
   Block-level form controls (inputs, selects) are unaffected by text-align
   and remain full-width; only inline content (headings, labels, small text)
   is visually centred. */
.subc-request-wrap,
.subc-reinstate-wrap,
.subc-erase-wrap {
    text-align: center;
}

/* #112 — Mobile: stack email/phone identifier fields vertically below 576px.
   The subc-identifier-row flex container switches to column layout; the
   subc-identifier-or span gets CSS text-transform uppercase and em-dashes
   so it reads "— OR —" centred between the stacked fields. Desktop keeps
   the existing lowercase inline "or" unchanged. */
@media (max-width: 575px) {
    .subc-identifier-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .subc-identifier-or {
        text-align: center;
        text-transform: uppercase;
        letter-spacing: .05em;
        flex-shrink: 0;
    }
    .subc-identifier-or::before { content: '\2014\00a0'; }
    .subc-identifier-or::after  { content: '\00a0\2014'; }
}