/* Wren Data opt-out portal.
 *
 * Hand-written, no build step and no Tailwind: this is a handful of pages and an npm toolchain
 * would buy nothing while making the Dockerfile multi-stage. Palette taken from
 * WrenDataLayout/app/src/assets/styles/main.css so the page reads as ours.
 *
 * The system font stack is deliberate. WrenDataLayout uses Inter, but pulling it from Google Fonts
 * on a privacy page would be a third-party request (and a transfer question) on the one page where
 * that is least defensible, and self-hosting a webfont for four pages is not worth the payload.
 * The stack below renders close to Inter on every platform we care about.
 */

:root {
    --primary-500: #862fe7;
    --primary-600: #7326cf;
    --primary-700: #5f1fab;
    --brand-deep: #3d1470;
    --btn-gradient-from: #862fe7;
    --btn-gradient-to: #a266f0;

    --text-main: #1e293b;
    --text-muted: #64748b;
    --surface: #ffffff;
    --background: #f6f7f8;
    --border: #e2e8f0;

    --success-bg: #f0fdf4;
    --success-border: #86efac;
    --error-bg: #fef2f2;
    --error-border: #fca5a5;
    --notice-bg: #fffbeb;
    --notice-border: #fcd34d;

    --radius: 10px;
    --wrap: 42rem;
    --wrap-wide: 64rem;
}

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

body {
    margin: 0;
    background: var(--background);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* Index page only: room for the two-column hero (intro + form) beside each other. */
.wrap-wide { max-width: var(--wrap-wide); }

/* ---------------------------------------------------------------- header / footer */

.site-header {
    background: var(--brand-deep);
    background-image: linear-gradient(100deg, var(--brand-deep), var(--primary-700));
    padding: 1.1rem 0;
}

.brand {
    color: #fff;
    display: inline-flex;
    align-items: center;
}

.brand-logo {
    display: block;
    height: 2rem;
    width: auto;
}

main { padding: 2.5rem 1.25rem 3.5rem; }

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 1.5rem 0 2.5rem;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.site-footer p { margin: 0.35rem 0; }

/* ---------------------------------------------------------------- typography */

h1 {
    font-size: 1.9rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--brand-deep);
    margin: 0 0 0.75rem;
}

h2 {
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    margin: 2rem 0 0.6rem;
}

.hero-subhead { margin-top: 1.25rem; }

.lead { font-size: 1.05rem; color: var(--text-main); }
.lead-list {
    font-size: 1.05rem;
    color: var(--text-main);
    margin: 0.5rem 0 1rem;
    padding-left: 1.3rem;
}

/* ---------------------------------------------------------------- assurance panel + tick list */

.assurance-panel {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    background: #f5edfd;
    border: 1px solid #e4d3fa;
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    margin-bottom: 0.5rem;
}

.assurance-icon {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    color: var(--primary-600);
    margin-top: 0.15rem;
}

.assurance-body .hero-subhead { margin-top: 0; }
.assurance-body .lead:last-child { margin-bottom: 0; }

.tick-list {
    list-style: none;
    margin: 0.5rem 0 1rem;
    padding: 0;
}

.tick-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 1.05rem;
    color: var(--text-main);
    margin-bottom: 0.55rem;
}

.tick-icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
}
.lead-list li { margin-bottom: 0.3rem; }
.note, .help { color: var(--text-muted); font-size: 0.92rem; }

.reference {
    font-size: 1rem;
    margin: 0.6rem 0 0;
}
.reference .help { display: block; margin-top: 0.2rem; }

a { color: var(--primary-600); }
a:hover { color: var(--primary-700); }

/* Never remove the focus ring: this form must be usable by keyboard. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--primary-500);
    outline-offset: 2px;
}

section { margin-bottom: 0.5rem; }

ul.rights { padding-left: 1.15rem; }
ul.rights li { margin-bottom: 0.6rem; }

/* ---------------------------------------------------------------- panels */

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    margin: 1.5rem 0;
}

.panel h2:first-child { margin-top: 0; }
.panel.success { background: var(--success-bg); border-color: var(--success-border); }
.panel.error { background: var(--error-bg); border-color: var(--error-border); }
.panel.notice-panel { background: var(--notice-bg); border-color: var(--notice-border); }

/* ---------------------------------------------------------------- hero (intro + form) */
/* The form sits beside the summary of what it does, rather than below it, so the action is
   visible without scrolling past the explanation. Widened beyond the site's normal .wrap so the
   two columns have room; stacks to a single column below that. */

.hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.hero-form { margin-top: 0; }

@media (max-width: 60rem) {
    .hero { grid-template-columns: 1fr; gap: 0; }
}

/* ---------------------------------------------------------------- legal sections */
/* "Your rights" / "How we use this information" / "Who we are" / "Complaints" are plain,
   always-visible sections below the fold -- not collapsed, so everything is readable without
   any interaction. */

.legal {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
}

.legal h2:first-child { margin-top: 0; }

.notice {
    background: var(--notice-bg);
    border: 1px solid var(--notice-border);
    border-radius: var(--radius);
    padding: 0.7rem 0.95rem;
    margin: 0 0 1rem;
    font-size: 0.94rem;
}

.error-notice { background: var(--error-bg); border-color: var(--error-border); }

/* ---------------------------------------------------------------- form */

.form-panel { padding: 1.5rem 1.4rem; }

.field { margin-bottom: 1.25rem; }

.field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
    font-size: 0.95rem;
}

.req { color: var(--primary-600); font-weight: 500; }
.opt { color: var(--text-muted); font-weight: 400; }

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    font-size: 1rem;
    background: #fff;
    color: var(--text-main);
}

.field input:focus, .field textarea:focus { border-color: var(--primary-500); }
.field textarea { resize: vertical; }

.field .help { margin: 0.35rem 0 0; }
.prefilled { font-size: 0.9rem; color: var(--text-muted); margin: 0 0 0.4rem; }

.field-info {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    margin: 0.5rem 0 0;
    font-size: 0.83rem;
    color: var(--text-muted);
}

.field-error, .validation-summary {
    color: #b91c1c;
    font-size: 0.9rem;
}

.validation-summary ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.validation-summary:empty { display: none; }

/* jQuery unobtrusive validation always renders an empty <li> even with no errors -- its own
   text is hidden inline, but the list-style bullet marker still shows. Hide the whole summary
   until real errors are injected (which replaces this valid state). */
.validation-summary-valid { display: none; }

.btn {
    display: inline-block;
    background-image: linear-gradient(100deg, var(--btn-gradient-from), var(--btn-gradient-to));
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.btn:hover { filter: brightness(1.06); }
.btn:active { filter: brightness(0.96); }

.btn-secondary {
    background-image: none;
    background: var(--surface);
    color: var(--text-main);
    border: 1px solid #cbd5e1;
}

/* Honeypot. Positioned off-screen rather than display:none, which bots detect and skip --
   the whole value of the trap is that an automated client fills it in. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- tables */

.data-table, .review-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 0.92rem;
    margin: 1rem 0;
}

.data-table th, .data-table td,
.review-table th, .review-table td {
    border: 1px solid var(--border);
    padding: 0.55rem 0.7rem;
    text-align: left;
    vertical-align: top;
}

.data-table th, .review-table th { background: #f8fafc; font-size: 0.86rem; }

/* ---------------------------------------------------------------- admin review */

.review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin: 1.25rem 0;
}

.reject-group { display: inline-flex; gap: 0.5rem; align-items: center; }

.reject-group input {
    padding: 0.55rem 0.7rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    font-size: 0.92rem;
    min-width: 16rem;
}

.review-table { font-size: 0.86rem; }
.review-table .nowrap { white-space: nowrap; }
.review-table .reason { color: var(--text-muted); }
.group-header td { background: #f1f5f9; font-size: 0.86rem; }

.flags { line-height: 2; }

.flag {
    display: inline-block;
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-size: 0.78rem;
    margin-right: 0.25rem;
    white-space: nowrap;
}

.flag-muted { background: #f1f5f9; border-color: var(--border); color: var(--text-muted); }
.flag-warn { background: var(--notice-bg); border-color: var(--notice-border); }

.linkish {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.86rem;
    color: var(--primary-600);
    text-decoration: underline;
    cursor: pointer;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 40rem) {
    body { font-size: 16px; }
    h1 { font-size: 1.55rem; }
    main { padding-top: 1.75rem; }

    /* A wide review table must scroll in its own box rather than the page. */
    .review-table, .data-table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}