/* =====================================================================
   Clark public pages, "Instrument", NHS blue: the shared public chrome
   (top bar, footer: partials/public_chrome.html) and the sign-in,
   password, trial, verification and error pages. legal.html links this
   sheet for the chrome and adds legal.css.
   Linked after theme.css and fonts.css and before design-system.css, so
   the components win ties; rules that must beat a component are scoped
   under .pub. Tokens only; square except buttons; flat (the static
   sign-in card drops the dialog shadow).
   Guarded by tests/unit/test_public_pages.py.
   ===================================================================== */

.pub,
.pub *,
.pub *::before,
.pub *::after {
    box-sizing: border-box;
}

.pub {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--surface-page);
    color: var(--text-primary);
}

:where(.pub) :where(h1, h2, h3, p, ul, ol) {
    margin: 0;
    padding: 0;
}

.pub a:not(.c-btn) { color: var(--accent-fg); }
.pub a:not(.c-btn):hover { text-decoration: underline; text-underline-offset: 3px; }

/* ----- Top bar (68px, wordmark 46px; light/dark pair switched here) ----- */
.pub-bar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 68px;
    padding: 0 40px;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border);
}
.pub-bar__brand {
    display: inline-flex;
    align-items: center;
    flex: none;
}
.pub-bar__logo {
    display: block;
    height: 46px;
    width: auto;
}
.pub-bar__logo--dark { display: none; }
[data-theme="dark"] .pub-bar__logo--light { display: none; }
[data-theme="dark"] .pub-bar__logo--dark { display: block; }

/* ----- Sunken stage holding a static card (sign-in, password) ----- */
.pub-stage {
    display: flex;
    flex: 1 0 auto;
    align-items: flex-start;
    justify-content: center;
    padding: 72px 24px;
    background: var(--surface-sunken);
}

/* ----- Plain page with one left column (error, trial request) ----- */
.pub-page {
    flex: 1 0 auto;
    padding: 96px 40px;
}
.pub-page__col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 680px;
}
.pub-page__col > .c-eyebrow { margin-bottom: -4px; }
.pub-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
}
.pub-page__aside {
    font-size: 14px;
    color: var(--text-muted);
}

/* ----- Footer ----- */
.pub-foot {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding: 18px 40px;
    border-top: 1px solid var(--border);
    background: var(--surface-page);
    color: var(--text-muted);
}
.pub-foot__copy {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .06em;
}
.pub-foot__note { font-size: 13px; }
.pub-foot__spacer { flex: 1 1 auto; }
.pub-foot__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 13px;
}
.pub .pub-foot__links a { color: var(--text-muted); text-decoration: none; }
.pub .pub-foot__links a:hover { color: var(--text-primary); text-decoration: underline; }
.pub-foot__links a[hidden] { display: none; }

/* ----- Static card: a .c-dialog on the page, not a modal ----- */
.pub .auth-card {
    max-width: 520px;
    max-height: none;
    overflow: visible;
    box-shadow: none;
}
.pub .auth-card--split {
    grid-template-columns: minmax(0, 1fr) 300px;
    max-width: 800px;
}
.pub .auth-card .c-dialog__header { padding-right: 32px; }
.pub .auth-card .c-dialog__body { overflow: visible; }
.pub .auth-card--split .c-dialog__body { padding-bottom: 32px; }
.auth-card__title { font-size: 28px; }
.pub .auth-card__lead {
    margin-bottom: 20px;
    color: var(--text-muted);
}
.pub .auth-card__footer { justify-content: flex-start; }
.auth-card__note {
    font-size: 14px;
    color: var(--text-muted);
}

/* ----- Form ----- */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.auth-submit { width: 100%; }
.auth-check {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
}
.auth-link {
    align-self: flex-start;
    font-size: 14px;
}

/* Password rule and match indicators (reset and trial pages): the page
   scripts set .valid/.invalid (reset) or .is-ok/.is-error/.is-caution. */
.password-match {
    min-height: 18px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-muted);
}
.pub .password-match.valid,
.pub .password-match.is-ok,
.pub .password-strength.is-ok { color: var(--status-ok); }
.pub .password-match.invalid,
.pub .password-match.is-error,
.pub .password-strength.is-error { color: var(--status-danger); }
.pub .password-strength.is-caution { color: var(--status-caution); }
.pub .c-field.is-ok { --c-tone: var(--status-ok); }

/* ----- Flashed messages ----- */
.auth-flashes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.pub .auth-flash { padding: 12px 16px; }
.pub .auth-flash .c-panel__text {
    font-size: 14px;
    color: var(--text-primary);
}

/* ----- Inverse aside (sign-in) ----- */
.auth-aside { gap: 24px; }
.auth-aside__brand {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.auth-aside__point {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.auth-aside__point--end { margin-top: auto; }
.auth-aside__title {
    font-size: 15px;
    font-weight: 500;
}
.pub .auth-aside__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-inverse-muted);
}
.pub a.auth-aside__mail {
    font-size: 14px;
    color: var(--text-inverse);
}

/* ----- Verification info lists ----- */
.auth-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
}
.pub .auth-info ul {
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.6;
}

/* ----- Trial request: address box with an attached button ----- */
.auth-mailbox {
    display: flex;
    align-items: stretch;
    max-width: 520px;
    margin-top: 8px;
    border: 1px solid var(--border-strong);
    background: var(--surface-card);
}
.auth-mailbox__addr {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    padding: 12px 16px;
    font-size: 16px;
    overflow-wrap: anywhere;
}
/* The one square button: it is attached to the address box and shares
   its square edges, so it drops the usual --radius-1. */
.pub .auth-mailbox__btn {
    flex: none;
    margin: -1px -1px -1px 0;
    border-radius: 0;
}

/* ----- Narrow screens ----- */
@media (max-width: 900px) {
    .pub-bar { padding: 0 24px; }
    .pub-foot { padding: 18px 24px; }
    .pub-page { padding: 64px 24px; }
}

@media (max-width: 760px) {
    .pub .auth-card--split { grid-template-columns: minmax(0, 1fr); }
    .pub-stage { padding: 40px 16px; }
}

@media (max-width: 600px) {
    .pub-bar { height: 60px; padding: 0 16px; }
    .pub-bar__logo { height: 34px; }
    .pub-bar__long { display: none; }
    .pub-bar .c-btn { padding: 9px 10px; }
    .pub-stage { padding: 24px 16px; }
    .pub .auth-card .c-dialog__header { padding: 24px 24px 0; }
    .pub .auth-card .c-dialog__body { padding: 16px 24px 24px; }
    .pub .auth-card .c-dialog__footer { padding: 0 24px 24px; }
    .pub .auth-card .c-dialog__aside { padding: 24px; }
    .pub-page { padding: 40px 16px; }
    .pub-page__col .c-title { font-size: 38px; }
    .pub-page__actions .c-btn { flex: 1 1 auto; }
    .pub-foot { padding: 18px 16px; }
    .pub-foot__spacer { display: none; }
    .auth-mailbox { flex-direction: column; }
    .pub .auth-mailbox__btn { margin: 0 -1px -1px; }
}