/* ==========================================================================
   Simply C2 - escalate page
   One central stylesheet for the complaint escalation page, built the same
   way as register.css: same section order, same tokens, same class names for
   the parts the two pages share. The page markup has no style attributes and
   the JS writes no CSS; it only toggles state classes (.hidden in section 2,
   .is-reached / .is-current / .is-pending / .is-done / .is-muted in section 8).

   Sections: 1 Tokens · 2 Base · 3 Page layout · 4 Hero · 5 Form column ·
             6 Fields · 7 Buttons · 8 Feedback · 9 Escalate-only components ·
             10 Responsive

   Taken from register.css with the same values: the tokens, the base rules,
   the page layout, the hero text and feature list, .card-box,
   .instruction-notice, the field rules (.field-group, .field-label,
   .input-box, .char-counter, .field-help-text, .hint-center, .grid-two-col)
   and .btn-action. Left out because only register uses them: tabs, deal
   banner, hero line art, Google button, verified-email notice, registration
   message box. Once both pages are cleaned up, the shared parts can move into
   one site.css and each page keeps only what is its own.

   Differences from register.css, on purpose:
     - .hidden uses !important so it beats any display rule (section 2).
     - textarea is covered by the base form rules (section 2).
     - .form-section aligns to the top and .form-wrapper centres itself with
       auto margins. Register's form is short enough to centre with
       align-items; this one is taller than the viewport and would lose its
       top edge (section 5).
     - The primary button is .btn-primary, not the Google-specific
       .btn-google. Same look (section 7).
     - New tokens under "Added for escalate", and section 9.
   ========================================================================== */


/* 1. Tokens ---------------------------------------------------------------- */

:root {
    /* Brand */
    --orange: #F5901B;
    --orange-disabled: #F6C48A;
    --orange-tint: #FFF4E6;
    --orange-line: #FADFBC;
    --orange-deep: #C97614;
    --brown-ink: #4A3521;
    --green-link: #0E7A57;
    --green-ui: #22C21E;
    --green-art: #8FE08C; /* hero line art, drawn at 75% opacity */
    --green-mist: #C7EFC5; /* hero blobs */
    --google-blue: #4285F4; /* the "G" on the sign-in button */
    /* Verified-email notice */
    --verified-bg: #E8F6F0;
    --verified-line: #A9DCC8;
    --verified-ink: #0E5B41;
    /* Text */
    --ink-deep: #0B2A33;
    --ink: #1B333B;
    --ink-soft: #33474F;
    --text-info: #3B4D54;
    --text-lead: #45585F;
    --text-muted: #5C7079;
    --text-eyebrow: #7F8F96;
    --text-hint: #8C9BA3;
    --text-disabled: #97A3A8;
    --text-placeholder: #A8B6BC;
    /* Surfaces and edges */
    --surface-card: #FFFFFF;
    --surface-page: #FBFBF9;
    --surface-sunken: #F4F6F4;
    --surface-disabled: #FCFCFB;
    --border: #E6E9E5;
    --border-input: #DDE2DD;
    --border-subtle: #EEF1EE;
    --border-dashed: #E0E4E0;
    --focus: #F79A35;
    /* Status (registration messages, validation) */
    --success-bg: #E6FFFA;
    --success-ink: #065F46;
    --success-line: #10B981;
    --error-bg: #FEE2E2;
    --error-ink: #991B1B;
    --error-line: #EF4444;
    --info-bg: #EFF6FF;
    --info-ink: #1E40AF;
    --info-line: #3B82F6;
    /* Type */
    --font-sans: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    /* Shape */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --shadow-cta: 0 8px 18px rgba(245, 144, 27, 0.22);
    --ease: 0.2s ease;
    /* Fluid sizes shared by several components */
    --control-h: clamp(40px, 5vh, 48px);
    --button-h: clamp(44px, 5.5vh, 54px);
    --fs-control: clamp(13px, 1vw, 15px);
    /* Added for escalate */
    --orange-text: #A94F00; /* orange that passes 4.5:1 on white, for small text */
    --on-primary: #FFFFFF; /* label on the orange button. #FFFFFF matches register.
                                       It is 2.4:1 on orange; set to var(--ink) for 5.6:1. */
    --status-pending: #F0A94E; /* dot next to "reading..." / "waiting..." (always beside words) */
    --status-done: var(--green-ui);
}


/* 2. Base ------------------------------------------------------------------ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    font-family: var(--font-sans);
    color: var(--ink-deep);
    background: var(--surface-card);
    overflow-x: hidden;
}

/* Form controls do not inherit the page font by default. */
button,
input,
select,
textarea {
    font-family: inherit;
}

a {
    color: var(--green-link);
    text-decoration: none;
}

    a:hover {
        color: var(--ink-deep);
    }

input::placeholder,
textarea::placeholder {
    color: var(--text-placeholder);
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--focus);
    outline-offset: 0;
}

/* Everything set in the mono face */
.form-header-tag,
.section-tag,
.badge-mono,
.char-counter,
.input-box-mono,
.summary-list dd,
.file-picker-name,
.verified-tag,
.qr-code-label,
.divider-or {
    font-family: var(--font-mono);
}

/* JS shows and hides things by toggling this class. */
.hidden {
    display: none !important;
}


/* 3. Page layout ----------------------------------------------------------- */

/* .page-container is full width and centres .page-row inside it. On a wide
   monitor the extra width becomes equal margins OUTSIDE the row rather than
   a gap between hero and form. Its background matches the hero's white, so
   the left margin reads as part of the hero; only the right margin (outside
   the cream form column) shows as a thin white band - by design. */
.page-container {
    display: flex;
    justify-content: center;
    width: 100vw;
    min-height: 100vh;
    background: var(--surface-card);
}

.page-row {
    display: flex;
    width: 100%;
    max-width: 1240px; /* hero and form stop drifting apart past this */
    min-height: 100vh;
}


/* 4. Hero (left column) ---------------------------------------------------- */

.hero-section {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--surface-card);
    padding: clamp(20px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(16px, 2vh, 28px);
}

.hero-header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vh, 20px);
}

.hero-logo {
    display: block;
    align-self: flex-start;
    height: clamp(40px, 5vh, 60px);
    width: auto;
}

.hero-title-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero-heading {
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--orange);
}

.hero-subheading {
    font-size: clamp(14px, 1.3vw, 18px);
    line-height: 1.4;
    color: var(--text-lead);
}

.hero-features {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.5vh, 12px);
    list-style: none;
}

.hero-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-bullet {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--green-ui);
}

.feature-text {
    font-size: clamp(13px, 1.1vw, 15px);
    font-weight: 500;
    color: var(--ink);
}


/* 5. Form column (right) --------------------------------------------------- */

.form-section {
    flex: 1.1;
    min-width: 320px;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* not centre: keeps the top edge if it ever overflows */
    padding: clamp(12px, 2.4vh, 32px) clamp(16px, 3vw, 32px);
    background: var(--surface-page);
    border-left: 1px solid var(--border-subtle);
    overflow-y: auto; /* a safety net: only this column scrolls, never the page */
}

.form-wrapper {
    width: 100%;
    max-width: 480px;
    margin-block: auto; /* centres when there is room, never clips the top */
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.2vh, 20px);
}

.form-header-tag {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-eyebrow);
}

.form-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-title {
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--orange);
}

    .form-title:focus {
        outline: none; /* focus is moved here between steps; it is not a control */
    }

/* Card and notice */
.card-box {
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 0.85vh, 14px);
    padding: clamp(9px, 1.5vh, 20px);
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

.instruction-notice {
    margin-bottom: 2px;
    padding: 8px 12px;
    background: var(--surface-sunken);
    border-left: 3px solid var(--orange);
    border-radius: 4px var(--radius-sm) var(--radius-sm) 4px;
}

    .instruction-notice p {
        font-size: 12.5px;
        line-height: 1.45;
        color: var(--text-info);
    }

/* One step of the flow: a card plus whatever sits under it */
.step-panel {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vh, 10px);
}

.center-row {
    display: flex;
    justify-content: center;
}


/* 6. Fields ---------------------------------------------------------------- */

.field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.field-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.char-counter {
    font-size: 11px;
    color: var(--text-placeholder);
}

    /* Counters that carry information use the muted ink: the placeholder grey
   is 2.1:1 on white. */
    .char-counter.is-readable {
        color: var(--text-muted);
    }

.input-box {
    width: 100%;
    height: var(--control-h);
    padding: 8px 14px;
    background: var(--surface-card);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
    font-size: var(--fs-control);
    color: var(--ink-deep);
}

.input-box-mono {
    letter-spacing: 0.04em;
}

/* Multi-line variant (issue description). Fluid so a short laptop screen
   gets a shorter box instead of forcing the page to scroll; resize:vertical
   lets anyone who wants more room drag it open. */
.input-area {
    height: auto;
    min-height: clamp(56px, 9vh, 120px);
    padding: 10px 14px;
    line-height: 1.4;
    resize: vertical;
}

/* Read-only value, e.g. the verified WhatsApp number */
.input-box.is-locked {
    background: var(--surface-sunken);
    color: var(--ink-deep);
}

.field-help-text,
.hint-center {
    font-size: 11.5px;
    color: var(--text-muted);
}

.field-help-text {
    line-height: 1.35;
}

    .field-help-text.is-error {
        font-weight: 600;
        color: var(--error-ink);
    }

.hint-center {
    text-align: center;
}

.grid-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 1.2vw, 12px);
}

.body-text {
    font-size: clamp(14px, 1.1vw, 15px);
    line-height: 1.45;
    color: var(--ink);
}


/* 7. Buttons --------------------------------------------------------------- */

/* Base for every full-width button, also used on <a> */
.btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: var(--button-h);
    border: none;
    border-radius: var(--radius-lg);
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--ease);
}

    .btn-action:not(:disabled):hover {
        opacity: 0.92;
    }

/* Primary: orange when enabled, pale when disabled. One per screen. */
.btn-primary {
    background: var(--orange);
    color: var(--on-primary);
    box-shadow: var(--shadow-cta);
}

    .btn-primary:hover {
        color: var(--on-primary);
    }

    .btn-primary:disabled {
        background: var(--orange-disabled);
        cursor: not-allowed;
    }

/* Secondary: neutral outline, for the alternative way to do the same step */
.btn-outline {
    background: var(--surface-card);
    border: 1px solid var(--border-input);
    color: var(--ink);
}

/* Looks like a link, behaves like a button ("Edit complaint details") */
.btn-link {
    min-height: 44px;
    padding: 0 8px;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--green-link);
    cursor: pointer;
}

    .btn-link:hover {
        color: var(--ink-deep);
    }


/* 8. Feedback -------------------------------------------------------------- */

/* Dot plus words. The dot never carries the meaning alone. */
.status-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.status-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--status-pending);
}

.status-text {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-info);
}

.status-row.is-done .status-dot {
    background: var(--status-done);
}

.status-row.is-muted .status-dot {
    background: var(--text-muted);
}

/* "Verified" tag next to a field label */
.verified-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--verified-ink);
}

    .verified-tag::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--status-done);
    }

/* Step tracker. .is-reached colours the bar, .is-current colours the label. */
.step-progress {
    display: flex;
    gap: 8px;
    list-style: none;
}

.step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 600;
    color: var(--text-muted);
}

    .step-item::before {
        content: "";
        height: 2px;
        background: var(--border);
        transition: background var(--ease);
    }

    .step-item.is-reached::before {
        background: var(--orange);
    }

    .step-item.is-current {
        color: var(--orange-text);
    }


/* 9. Escalate-only components ----------------------------------------------- */

.stack {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vh, 16px);
}

/* Small mono heading inside a card ("About you") */
.section-tag {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.card-divider {
    height: 1px;
    border: none;
    background: var(--border);
}

/* Recap of what was entered on the first form */
.summary-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
}

    .summary-list > div {
        display: flex;
        justify-content: space-between;
        gap: 16px;
    }

    .summary-list dt {
        font-size: 13px;
        color: var(--text-muted);
    }

    .summary-list dd {
        font-size: 13px;
        font-weight: 500;
        text-align: right;
        overflow-wrap: anywhere;
        color: var(--ink);
    }

/* File picker: a styled label around a visually hidden <input type="file">.
   The input stays focusable, so the whole control shows the focus ring. */
.file-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.file-picker {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--control-h);
    padding: 0 14px;
    background: var(--surface-card);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
    font-size: var(--fs-control);
    cursor: pointer;
}

    .file-picker:focus-within {
        outline: 2px solid var(--focus);
    }

.file-picker-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.file-picker-action {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--green-link);
}

.file-picker-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--text-muted);
}

/* WhatsApp QR */
.qr-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.qr-frame {
    padding: 6px;
    background: #fff; /* a QR code needs white behind it, whatever the page colour */
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
}

    .qr-frame svg {
        display: block;
        width: clamp(140px, 18vh, 190px);
        height: auto; /* height follows the viewBox */
    }

.qr-path {
    fill: var(--ink-deep);
}

.qr-text {
    max-width: 360px;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
    color: var(--text-info);
}

.qr-code-label {
    font-size: 11px;
    color: var(--text-muted);
}

/* The desktop/WhatsApp-Web alternative is collapsed by default (most people
   scan with a phone): a native <details> needs no JS and is keyboard and
   screen-reader operable on its own. */
.wa-alt {
    text-align: center;
}

    .wa-alt summary {
        font-size: 12px;
        font-weight: 600;
        color: var(--green-link);
        cursor: pointer;
        list-style: none;
    }

        .wa-alt summary::-webkit-details-marker {
            display: none;
        }

        .wa-alt summary:hover {
            color: var(--ink-deep);
        }

    .wa-alt[open] summary {
        margin-bottom: 10px;
    }


/* 10. Responsive ------------------------------------------------------------ */

/* Below 900px the hero is dropped and the form takes the page. */
@media (max-width: 899px) {
    .hero-section {
        display: none;
    }
}

/* From 900px the split fills the viewport; the form column scrolls by itself,
   so the hero stays put and the page itself never grows a scrollbar. */
@media (min-width: 900px) {
    body {
        overflow: hidden;
    }

    .page-container,
    .page-row {
        height: 100vh;
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .grid-two-col {
        grid-template-columns: 1fr;
    }
}