/* =====================================================================
   Clark landing page (templates/landing.html), "Instrument", NHS blue.
   Linked after theme.css and fonts.css and before design-system.css, so
   the components win ties. Tokens only; square except buttons; flat
   except dialogs (their shadow comes from design-system.css).
   Guarded by tests/unit/test_landing_page.py.
   ===================================================================== */

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

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

:where(.landing) :where(h1, h2, h3, p, ol, dl, dd, figure) {
    margin: 0;
    padding: 0;
}

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

/* ----- Top bar ----- */
.landing-bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 68px;
    padding: 0 40px;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border);
}
.landing-bar__brand {
    display: inline-flex;
    align-items: center;
    flex: none;
}
.landing-bar__logo {
    display: block;
    height: 36px;
    width: auto;
}
.landing-bar__logo--dark { display: none; }
[data-theme="dark"] .landing-bar__logo--light { display: none; }
[data-theme="dark"] .landing-bar__logo--dark { display: block; }
.landing-bar__actions {
    display: flex;
    align-items: center;
    gap: 28px;
}
.landing-bar__signin {
    margin: 0;
    padding: 10px 0;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    cursor: pointer;
}
.landing-bar__signin:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ----- Main: grows to fill the window, the hero taking the extra ----- */
.landing-main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.landing-main > .landing-hero { flex: 1 0 auto; }

/* ----- Shared ----- */
.landing-cols {
    display: grid;
    border-top: 1px solid var(--border);
}
.landing-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.landing-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px 40px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-muted);
}
.landing-col + .landing-col { border-left: 1px solid var(--border); }
.landing-col__label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent-fg);
}

/* ----- Hero: copy and steps | sample card ----- */
.landing-hero {
    display: grid;
    /* The copy side a little wider than the card, as on Clare */
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    min-height: 620px;
    border-bottom: 1px solid var(--border);
}
/* The copy column is a size container so the headline's font size can
   follow its width (cqi) and the headline stays on one line: it is about
   16.6em wide in IBM Plex Sans 500, and the divisor leaves a little slack.
   Below 900px it wraps at fixed sizes instead. The column's content is
   centred in the hero's height as one block. */
.landing-hero__copy {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: 72px 48px 56px 40px;
    border-right: 1px solid var(--border);
}
.landing-hero__title {
    font-size: min(56px, calc(100cqi / 17.2));
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.03em;
    white-space: nowrap;
    color: var(--text-primary);
}
.landing .landing-hero__lead { text-wrap: balance; }
.landing-steps {
    list-style: none;
    padding: 0;
    border-bottom: 1px solid var(--border);
}
.landing-steps li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
    font-size: 15px;
    line-height: 1.5;
    border-top: 1px solid var(--border);
}
.landing-steps__num {
    color: var(--accent-fg);
}
.landing-hero__stage {
    display: flex;
    padding: 40px;
    background: var(--surface-sunken);
}

/* ----- Sample card ----- */
/* Fills the stage like Clare's answer card; the foot stays at its bottom */
.landing-sample {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--surface-card);
    border: 1px solid var(--border);
}
.landing-sample__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}
.landing-sample__ready {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--status-ok);
}
.landing-sample__block { padding: 16px 20px 4px; }
.landing-sample__label { padding-bottom: 8px; }
.landing-sample .c-turn {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 12px;
    padding: 9px 0;
}
.landing-sample .c-turn__text { font-size: 14px; line-height: 1.5; }
.landing-sample__divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
}
.landing-sample__bar {
    flex: none;
    width: 32px;
    height: 3px;
    background: var(--accent);
}
.landing-sample__writes {
    flex: 0 1 auto;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent-fg);
}
.landing-sample__rule {
    flex: 1 1 16px;
    height: 1px;
    background: var(--border);
}
.landing-note {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    padding: 0 20px 8px;
}
.landing-note dt,
.landing-note dd {
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
.landing-note > :nth-child(-n + 2) { border-top: 0; }
.landing-note dt {
    padding-right: 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.9;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.landing-note dd {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
}
.landing-note__strong { font-weight: 500; }
.landing-sample__foot {
    margin-top: auto;
    padding: 12px 20px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

/* ----- What Clark writes, facts ----- */
.landing-facts .landing-cols { border-top: 0; border-bottom: 1px solid var(--border); }

/* ----- Footer ----- */
.landing-foot {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding: 18px 40px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}
.landing-main + .landing-foot { border-top: 0; }
.landing-foot__spacer { flex: 1 1 auto; }
.landing-foot__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.landing .landing-foot__links a { color: var(--text-muted); text-decoration: none; }
.landing .landing-foot__links a:hover { color: var(--text-primary); text-decoration: underline; }
.landing-foot__links a[hidden] { display: none; }

/* ----- Login dialog: form left, inverse aside right ----- */
.c-dialog--wide.landing-login { grid-template-columns: minmax(0, 1fr) 300px; }
.landing-login__title { font-size: 28px; }
.landing-login .c-dialog__body { padding-bottom: 32px; }
.landing-login__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* Hidden until the login script shows it (inline display: block). Danger
   ink beats .c-field__msg's muted default (design-system.css is later). */
.landing .landing-login__error {
    display: none;
    color: var(--status-danger);
}
.landing-login__remember {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
}
.landing-login__submit { width: 100%; }
.landing-login__forgot {
    align-self: flex-start;
    font-size: 14px;
}
.landing-login__aside { gap: 24px; }
.landing-login__brand {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.landing-login__point {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.landing-login__point--end { margin-top: auto; }
.landing-login__point-title {
    font-size: 15px;
    font-weight: 500;
}
.landing .landing-login__point-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-inverse-muted);
}
.landing a.landing-login__mail {
    font-size: 14px;
    color: var(--text-inverse);
}

/* ----- Trial dialog ----- */
.landing-trial__text {
    margin-bottom: 18px;
    color: var(--text-muted);
}
.landing-trial__footer { justify-content: flex-start; }
.landing-trial__footer .c-btn { white-space: normal; text-align: left; }

/* ----- Narrower screens ----- */
/* Facts two by two below 1200px, one column below 760px, as on Clare */
@media (max-width: 1200px) and (min-width: 761px) {
    .landing-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing-cols--4 .landing-col:nth-child(odd) { border-left: 0; }
    .landing-cols--4 .landing-col:nth-child(n + 3) { border-top: 1px solid var(--border); }
}

@media (max-width: 900px) {
    .landing-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .landing-hero__title { font-size: 44px; white-space: normal; }
    .landing-hero__copy { border-right: 0; border-bottom: 1px solid var(--border); padding: 56px 32px 40px; }
    .landing-hero__stage { padding: 32px; }
}

@media (max-width: 760px) {
    .landing-cols--4 { grid-template-columns: minmax(0, 1fr); }
    .landing-cols--4 .landing-col + .landing-col { border-left: 0; border-top: 1px solid var(--border); }
}

@media (max-width: 600px) {
    .landing-bar { height: 60px; padding: 0 16px; }
    .landing-bar__logo { height: 24px; }
    .landing-bar__actions { gap: 12px; }
    .landing-bar__signin { min-height: 44px; padding: 0 4px; }
    .landing-bar__long { display: none; }
    .landing-bar .c-btn { padding: 9px 10px; }
    .landing-hero__copy { padding: 36px 16px 32px; gap: 22px; }
    .landing-hero__title { font-size: 36px; }
    .landing .landing-hero__lead { font-size: 16px; }
    .landing-hero__stage { padding: 16px; }
    .landing-sample__head,
    .landing-sample__block,
    .landing-sample__divider,
    .landing-sample__foot { padding-left: 16px; padding-right: 16px; }
    .landing-note { grid-template-columns: minmax(0, 1fr); padding: 0 16px 8px; }
    .landing-note dt { padding-bottom: 0; }
    .landing-note dd { padding-top: 2px; border-top: 0; }
    .landing-sample .c-turn { grid-template-columns: 72px minmax(0, 1fr); }
    .landing-col { padding: 22px 16px; }
    .landing-foot { padding: 18px 16px 24px; }
    .landing-foot__spacer { display: none; }
    /* 44px targets: the legal links */
    .landing .landing-foot__links a:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; }
    .landing-foot__links { column-gap: 16px; row-gap: 0; }
    .landing-login .c-dialog__header { padding: 28px 56px 0 24px; }
    .landing-login .c-dialog__body { padding: 16px 24px 24px; }
}