/*
 * cover.css
 * Styles for the cover page (public/index.html) and the other signed-out
 * pages that share its layout (confirmation, forgot password).
 */

/* The page is a column: banner at the top, content in the middle, footer at the bottom. */
.cover-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* The "IN ACTIVE DEVELOPMENT" banner across the top of the page. */
.development-banner {
    padding: 8px var(--page-side-padding);
    background-color: var(--cover-banner-colour); /* light green */
    color: var(--cover-banner-ink-colour);        /* very dark green: high contrast on the light green */
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* (The page background is in pageBackground.css.) */

/* ---------- Main content ---------- */

.cover-content {
    flex: 1;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 48px var(--page-side-padding);
    text-align: center;
}

/* The "Duality" title, in the Duality heading font (from main.css). */
.site-title {
    margin: 0 0 32px;
    color: var(--plain-black-colour);
    font-family: "Duality", Georgia, serif; /* Set here too, as it isn't always a heading element */
    line-height: 1.2;
    /* It is the logo, a single word: it keeps the font's own letter spacing,
       rather than the heading spacing from main.css. */
    letter-spacing: normal;
    word-spacing: normal;
    /* Scales with the screen width, between a minimum and maximum size. */
    font-size: clamp(4.5rem, 18vw, 7.5rem);
}

/* ---------- The sign-in box ---------- */

/* Layout of the box. Its parchment look is set further down ("Tome" style),
   over the shared "glass-panel" class from main.css. */
.sign-in-panel {
    padding: 24px;
    border-radius: var(--corner-radius);
    text-align: left;
}

.sign-in-panel h1,
.sign-in-panel h2 {
    margin: 0 0 16px;
    font-size: 2.4rem;
}

/* (Light input boxes and message colours come from ".glass-panel" rules in main.css.) */

/* The full-width sign-in button and panel buttons: styled as flat stitched leather. */
.sign-in-panel .button,
.sign-in-panel.glass-panel .button,
.sign-in-panel.glass-panel .button-light-blue {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 9px 20px 8px; /* Balanced optical center for Duality font */
    border: 1px solid var(--tome-leather-dark-colour);
    border-radius: 4px;
    background-color: var(--tome-leather-colour);
    color: var(--tome-on-leather-colour) !important;
    font-family: "Duality", Georgia, serif;
    font-size: 1.4rem;
    font-weight: normal;
    letter-spacing: -0.013em;
    word-spacing: 0.163em;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(45, 30, 15, 0.25);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Subtle optical centering for the text if wrapped in span */
.sign-in-panel .button .document-button-text {
    display: inline-block;
    line-height: 1;
}

/* Flat stitched waxed-thread perimeter */
.sign-in-panel .button::after,
.sign-in-panel.glass-panel .button::after,
.sign-in-panel.glass-panel .button-light-blue::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px dashed rgba(228, 202, 148, 0.65);
    border-radius: 2px;
    pointer-events: none;
}

.sign-in-panel .button:hover,
.sign-in-panel.glass-panel .button:hover,
.sign-in-panel.glass-panel .button-light-blue:hover {
    background-color: var(--tome-leather-hover-colour);
    color: var(--tome-on-leather-colour) !important;
    box-shadow: 0 3px 6px rgba(45, 30, 15, 0.35);
    text-decoration: none !important;
}

.sign-in-panel .button:active,
.sign-in-panel.glass-panel .button:active,
.sign-in-panel.glass-panel .button-light-blue:active {
    background-color: var(--tome-leather-dark-colour);
    box-shadow: 0 1px 2px rgba(45, 30, 15, 0.2);
    text-decoration: none !important;
}

.sign-in-panel .button:disabled,
.sign-in-panel.glass-panel .button:disabled {
    opacity: 0.6;
    cursor: wait;
    box-shadow: none;
}

.sign-in-panel .button:focus-visible,
.sign-in-panel.glass-panel .button:focus-visible {
    outline: 2px solid var(--tome-red-ink-colour);
    outline-offset: 3px;
}

/* A form message that reports success rather than a problem: dark text
   instead of red (used by the "Forgot password" page). */
.glass-panel .form-message.is-success {
    color: var(--plain-ink-colour);
}

/* The emailed-code step (signInCodeStep.js): a short explanation, a code box
   with roomy, spaced digits, and "Send a new code" / "Start again" side by side. */
.sign-in-code-intro {
    margin: 0 0 16px;
    line-height: 1.45;
}

.sign-in-code-input {
    font-size: 1.4rem;
    letter-spacing: 0.3em;
    text-align: center;
}

.sign-in-code-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.sign-in-code-actions .button,
.sign-in-panel.glass-panel .button-secondary {
    padding: 9px 8px 8px;
    font-size: 1.15rem;
    background-color: var(--tome-leather-soft-colour); /* slightly deeper/softer leather tone for secondary actions */
    border-color: var(--tome-leather-deep-colour);
}

.sign-in-code-actions .button:hover,
.sign-in-panel.glass-panel .button-secondary:hover {
    background-color: var(--tome-leather-soft-hover-colour);
    color: var(--tome-on-leather-colour) !important;
}

.sign-in-code-actions .button:active,
.sign-in-panel.glass-panel .button-secondary:active {
    background-color: var(--tome-leather-deep-colour);
}

/* Narrow phones: one button per row, so "Send a new code" stays on one line. */
@media (max-width: 480px) {
    .sign-in-code-actions {
        grid-template-columns: 1fr;
    }
}

/* The "Forgot your password?" link, centred under the button. */
.forgot-password-link {
    margin: 16px 0 0;
    text-align: center;
    font-size: 0.875rem;
}

/* Always-visible links to the public documents. The privacy notice must be
   readable before signing in (UK GDPR), and the community guidelines must be
   clearly signposted to everyone (Ofcom Codes measure ICU G3). The site has
   no cookie notice: its only cookie is strictly necessary (PECR reg. 6(4)). */
.cover-document-links {
    margin: 12px 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--tome-brown-colour);
}

/* Antique text back link: styled in Duality font with serif arrow glyph,
   brown colour, no button box, and strictly no underline. */
main .sign-in-panel.glass-panel a.cover-back-link,
.cover-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--tome-brown-colour) !important;
    font-family: "Duality", Georgia, serif;
    font-size: 1.35rem;
    font-weight: normal;
    letter-spacing: -0.013em;
    word-spacing: 0.163em;
    line-height: 1;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease, transform 0.15s ease;
}

main .sign-in-panel.glass-panel a.cover-back-link:hover,
.cover-back-link:hover {
    color: var(--tome-ink-colour) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

main .sign-in-panel.glass-panel a.cover-back-link:active,
.cover-back-link:active {
    color: var(--tome-ink-colour) !important;
    text-decoration: none !important;
    transform: translateY(1px);
}

main .sign-in-panel.glass-panel a.cover-back-link:focus-visible,
.cover-back-link:focus-visible {
    outline: 2px solid var(--tome-red-ink-colour);
    outline-offset: 4px;
    border-radius: 2px;
    text-decoration: none !important;
}

.cover-back-arrow {
    font-family: "Duality", Georgia, serif;
    font-size: 1.35rem;
    line-height: 1;
}

/* Guarantee no underline on any child or state */
main .sign-in-panel.glass-panel a.cover-back-link *,
main .sign-in-panel.glass-panel a.cover-back-link:hover *,
main .sign-in-panel.glass-panel a.cover-back-link:active *,
main .sign-in-panel.glass-panel a.cover-back-link:focus-visible * {
    text-decoration: none !important;
}

/* ---------- The box in the "Tome" style (approved by the owner, 5 October 2026) ---------- */

/* An authentic parchment sheet with an organic torn deckle paper edge,
   toasted amber vignette patina along the ragged fibers, and a gilded inner frame.
   Rendered with a high-fidelity vector deckle border image (parchment-border.svg).
   The ".glass-panel" in the selector makes these win over main.css's glass rules. */
.sign-in-panel.glass-panel,
.sign-in-panel.tome-parchment-card {
    position: relative;
    padding: 24px 20px 20px;
    border: 16px solid transparent;
    border-image-source: var(--tome-parchment-picture);
    border-image-slice: 44 fill;
    border-image-width: 16px;
    border-image-repeat: round;
    background: none;
    -webkit-backdrop-filter: none; /* no blur: the card is solid parchment */
    backdrop-filter: none;
    filter: drop-shadow(0 8px 24px rgba(26, 16, 7, 0.38));
    color: var(--tome-ink-colour);
    outline: 1px solid rgba(195, 165, 110, 0.38); /* inner gold frame (decoration only) */
    outline-offset: -10px;
}

/* The heading, centred in ink. */
.sign-in-panel.glass-panel h1,
.sign-in-panel.glass-panel h2 {
    margin: 0;
    color: var(--tome-ink-colour);
    text-align: center;
}

/* The ✦ under the heading (decoration only; aria-hidden in the page). */
.sign-in-flourish {
    margin: 2px 0 16px;
    color: var(--tome-ornament-colour);
    text-align: center;
}

/* Links in red ink (8.3:1 on the parchment). */
main .sign-in-panel.glass-panel a {
    color: var(--tome-red-ink-colour);
}

/* Text boxes: the lightest parchment, with a brown outline clear enough
   for low-vision users (4.4:1; WCAG non-text contrast needs 3:1). */
.sign-in-panel.glass-panel .form-input {
    border-color: var(--tome-ornament-colour);
    border-radius: 4px;
    background-color: var(--tome-input-colour);
    color: var(--tome-ink-colour);
}

.sign-in-panel.glass-panel .form-hint {
    color: var(--tome-brown-colour);
}


/* The checkbox, the (?) help tip and the keyboard focus outline in red ink. */
.sign-in-panel.glass-panel .checkbox-row input {
    accent-color: var(--tome-red-ink-colour);
}

.sign-in-panel.glass-panel .help-tip-button {
    border-color: var(--tome-red-ink-colour);
    color: var(--tome-red-ink-colour);
}

.sign-in-panel.glass-panel :focus-visible {
    outline-color: var(--tome-red-ink-colour);
}