/* ============================================================
   P32.A10-D3: auth flow + legal/marketing reading layout.
   Loads AFTER portal/dc.css (which owns the tokens and shared
   dc-* components; this file never redefines those). Scope:
   - the allauth account screens (login, signup, password chain,
     email management, verification, logout) as dc auth cards;
   - the embedded-auth variant of those cards (the search page's
     sign-in modal iframes them chrome-less; base.css hides the
     header/footer, this file de-cards the dc markup);
   - the legal/marketing statics (about, privacy, terms, cookies,
     contact) as a measured reading column.
   No inline styles anywhere: the portal CSP forbids them.
   ============================================================ */

/* ------------------------------------------------------------
   Auth column: a single centered card under the portal header.
   ------------------------------------------------------------ */

.dc-auth {
    max-width: 460px;
    margin: 0 auto;
    padding: 40px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Email management carries option rows + a second card; give it air. */
.dc-auth.dc-auth-wide {
    max-width: 560px;
}

.dc-auth-back {
    margin: 0;
}

/* The card itself reuses .dc-card for the surface; this class only
   sets the interior rhythm. */
.dc-auth-card {
    padding: 26px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dc-auth-title {
    margin: 0;
    font: 400 27px/1.15 var(--font-serif);
    letter-spacing: -0.018em;
    color: var(--fg-1);
}

.dc-auth-intro {
    margin: 0;
    font: 400 14px/1.6 var(--font-sans);
    color: var(--fg-2);
}

/* Quiet guidance after the form (the "still unverified" notes). */
.dc-auth-foot {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--border-faint);
    font: 400 12.5px/1.6 var(--font-sans);
    color: var(--fg-3);
}

.dc-auth-foot p {
    margin: 0 0 6px;
}

.dc-auth-foot p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   Auth forms: label rows, fields, checks, errors
   ------------------------------------------------------------ */

.dc-auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.dc-auth-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dc-auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.dc-auth-label {
    font: 500 13px var(--font-sans);
    color: var(--fg-1);
}

.dc-auth-form input[type="text"],
.dc-auth-form input[type="email"],
.dc-auth-form input[type="password"],
.dc-auth-form input[type="number"],
.dc-auth-form input[type="url"],
.dc-auth-form select,
.dc-auth-form textarea {
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    color: var(--fg-1);
    font: 400 13.5px var(--font-sans);
    padding: 9px 12px;
    width: 100%;
    box-sizing: border-box;
}

.dc-auth-form input:focus-visible,
.dc-auth-form select:focus-visible,
.dc-auth-form textarea:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

/* Help text under a field (allauth's password help carries the
   "Forgot your password?" link). */
.dc-auth-field .dc-field-hint {
    margin: 0;
}

.dc-auth-field .dc-field-hint a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--border-strong);
}

.dc-auth-field .dc-field-hint a:hover {
    color: var(--accent-hi);
    border-bottom-color: var(--accent);
}

/* Help text that arrives as a list (Django's password-validator help
   renders as a <ul>; the HTML parser hoists it out of the hint <p>). */
.dc-auth-field ul:not(.dc-auth-errors) {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dc-auth-field ul:not(.dc-auth-errors) li {
    font: 400 12px/1.5 var(--font-sans);
    color: var(--fg-3);
}

.dc-auth-field ul:not(.dc-auth-errors) li::marker {
    color: var(--fg-4);
}

/* Checkbox row ("Remember me"). */
.dc-auth-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.dc-auth-check input[type="checkbox"],
.dc-auth-check input[type="radio"] {
    accent-color: var(--accent);
    margin: 2px 0 0;
    flex-shrink: 0;
}

.dc-auth-check-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dc-auth-check-title {
    font: 400 13.5px var(--font-sans);
    color: var(--fg-1);
}

/* Paragraphs inside a card's amber .dc-note keep the note rhythm. */
.dc-auth .dc-note p {
    margin: 0 0 6px;
    font: inherit;
}

.dc-auth .dc-note p:last-child {
    margin-bottom: 0;
}

/* Field + form errors. */
.dc-auth-errors {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dc-auth-errors li {
    font: 400 12.5px/1.5 var(--font-sans);
    color: var(--status-danger);
}

.dc-auth-alert {
    border-left: 2px solid var(--status-danger);
    padding-left: 14px;
    font: 400 13.5px/1.6 var(--font-sans);
    color: var(--fg-2);
}

.dc-auth-alert p {
    margin: 0 0 6px;
}

.dc-auth-alert p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   Email management: address option rows
   ------------------------------------------------------------ */

.dc-auth-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: none;
    margin: 0;
    padding: 0;
}

.dc-auth-options legend {
    font: 500 13px var(--font-sans);
    color: var(--fg-1);
    padding: 0;
    margin-bottom: 8px;
}

.dc-auth-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border-faint);
    border-radius: var(--r-2);
    background: var(--bg-inset);
    cursor: pointer;
    transition: border-color var(--dur-quick) var(--ease-out);
}

.dc-auth-option:hover {
    border-color: var(--border-strong);
}

.dc-auth-option:has(input:checked) {
    border-color: var(--accent-lo);
}

.dc-auth-option input[type="radio"] {
    accent-color: var(--accent);
    margin: 3px 0 0;
    flex-shrink: 0;
}

.dc-auth-option-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dc-auth-option-title {
    font: 400 13.5px var(--font-sans);
    color: var(--fg-1);
    overflow-wrap: anywhere;
}

.dc-auth-option-desc {
    font: 400 12px var(--font-sans);
    color: var(--fg-3);
}

/* ------------------------------------------------------------
   Embedded auth: the search UI's sign-in modal iframes these
   pages (?next=/auth/popup-complete). base.css hides the portal
   chrome and remaps the legacy variables; here the dc auth card
   drops its border and padding so the form reads as part of the
   modal surface.
   ------------------------------------------------------------ */

body.embedded-auth .dc-auth {
    max-width: none;
    padding: 0;
    gap: 10px;
}

body.embedded-auth .dc-auth-card {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 8px 0 0;
    gap: 12px;
}

body.embedded-auth .dc-auth .dc-eyebrow {
    display: none;
}

body.embedded-auth .dc-auth-title {
    font-size: 22px;
}

body.embedded-auth .dc-auth-intro {
    font-size: 13px;
}

/* ------------------------------------------------------------
   Reading column: legal + about statics. Measured line length,
   the dc type ramp, quiet section rhythm. Content is prose-only;
   these classes never appear on app surfaces.
   ------------------------------------------------------------ */

.dc-prose {
    max-width: 68ch;
    margin: 0 auto;
    padding: 40px 0 24px;
    font-family: var(--font-sans);
    color: var(--fg-2);
}

.dc-prose-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border-faint);
    margin-bottom: 10px;
}

.dc-prose h2 {
    margin: 0;
    font: 400 clamp(30px, 5vw, 40px)/1.12 var(--font-serif);
    letter-spacing: var(--tracking-tight);
    color: var(--fg-1);
}

.dc-prose section {
    margin-top: 30px;
}

.dc-prose h3 {
    margin: 0 0 10px;
    font: 500 19px/1.25 var(--font-sans);
    letter-spacing: var(--tracking-snug);
    color: var(--fg-1);
}

.dc-prose h4 {
    margin: 0 0 6px;
    font: 500 15px/1.25 var(--font-sans);
    color: var(--fg-1);
}

.dc-prose p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.7;
}

.dc-prose p:last-child {
    margin-bottom: 0;
}

.dc-prose ul {
    margin: 0 0 12px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dc-prose li {
    font-size: 15px;
    line-height: 1.65;
}

.dc-prose li::marker {
    color: var(--fg-4);
}

.dc-prose a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--border-strong);
    transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.dc-prose a:hover {
    color: var(--accent-hi);
    border-bottom-color: var(--accent);
}

/* Pilot notice: quiet amber sidenote above the title. */
.dc-prose-note {
    border-left: 2px solid var(--accent);
    padding-left: 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--fg-3);
}

.dc-prose-note strong {
    color: var(--fg-2);
}

/* Contact/imprint detail list. */
.dc-prose-details {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 12px 24px;
    margin: 18px 0 0;
    padding: 18px 20px;
    border: 1px solid var(--border-faint);
    border-radius: var(--r-3);
    background: var(--bg-inset);
}

.dc-prose-details dt {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding-top: 2px;
}

.dc-prose-details dd {
    margin: 0;
    font-size: 14px;
    color: var(--fg-1);
}

@media (max-width: 560px) {
    .dc-prose-details {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px 0;
    }

    .dc-prose-details dd {
        margin-bottom: 10px;
    }
}

/* About page: brandline, tagline, card grids, origin story. */
.dc-prose-brandline {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-3);
}

.dc-prose-tagline {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--fg-1);
}

.dc-prose-tagline strong {
    font-weight: 500;
}

.dc-prose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.dc-prose-card {
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    background: var(--bg-elev-1);
    padding: 16px 18px;
}

.dc-prose-card p {
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
}

.dc-prose-quote {
    border-left: 2px solid var(--accent);
    padding-left: 18px;
}

.dc-prose-signature {
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: var(--tracking-mono);
    color: var(--fg-3);
}

.dc-prose-signature p {
    margin: 0 0 4px;
    font-size: 12px;
}