/* index.css - look of the public landing page (web/index.jsp).

   Replaces the page's 33-line <style> block, which was a style-src-elem violation under the strict
   policy the Report-Only header is already measuring (CSP phase 2). The <link> sits where the block
   sat, after cardly-base.css and cardly-admin.css, so the cascade order is unchanged.

   Token substitutions used below, all exact unless noted: 48px -> --space-7, 32px -> --space-6,
   24px -> --space-5, 16px -> --space-4, 12px -> --space-3, 8px -> --space-2, 4px -> --space-1;
   font 32px -> --text-2xl, 18px -> --text-lg, 15px -> --text-md, 13px -> --text-sm,
   12px -> --text-xs; #2563eb -> --brand (cardly-admin.css sets --brand-primary to that exact
   value, so the token resolves to the identical colour on this page); #b45309 -> --warn (identical);
   #ffffff -> --surface (this page carries no data-face, so --surface is #ffffff unconditionally).

   Three colours moved, all of them the hardcoded near-misses cardly-base.css already documents:
     #6b7280 -> --ink-2   (#5b6672)   - the subtitle, the option copy
     #e5e7eb -> --line    (#e3e7ec)   - the option border, the footer rule
     #d1d5db -> --line    (#e3e7ec)   - the slug field border, which therefore lightens slightly
     #f7f8fa -> --surface-2 (#f6f7f9) - the page background, and it now simply agrees with the
                                        cardly-admin.css body default instead of overriding it
   #1f2937 (headings) and #374151 (field label) and #9ca3af (footer note) keep their literals:
   --ink is #17202b, a visibly deeper value, and snapping to it would darken the page. */

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--surface-2);
}

.landing {
    max-width: 560px;
    width: 90%;
    padding: var(--space-7);
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.landing h1 { margin: 0 0 var(--space-2); font-size: var(--text-2xl); color: #1f2937; }
.landing .subtitle { color: var(--ink-2); margin-bottom: var(--space-6); font-size: var(--text-md); }

.options { display: grid; gap: var(--space-4); }
.option {
    display: block;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, background .15s;
}
a.option:hover { border-color: var(--brand); background: var(--surface-2); text-decoration: none; }
.option h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); color: #1f2937; display: flex; align-items: center; gap: 10px; }
.option h3 i { color: var(--brand); width: 24px; text-align: center; }
.option p { margin: 0; color: var(--ink-2); font-size: 14px; }

.option-form { margin-top: var(--space-3); }
/* The label used to be pushed off-screen with position:absolute;left:-9999px, which left a bare box
   with no readable name next to a button. It is a visible label now: a field's name has to stay on
   screen, which is the same reason a hint may never be a placeholder. */
.option-form label { display: block; margin-bottom: 6px; font-size: var(--text-sm); font-weight: 600; color: #374151; }
.option-form-row { display: flex; gap: var(--space-2); }
.option-form input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
}
.option-form input:focus { outline: none; border-color: var(--brand); }
.option-form .err { color: #dc2626; font-size: var(--text-sm); margin-top: 6px; min-height: 18px; }

.footer-note {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
    color: #9ca3af;
    font-size: var(--text-xs);
    text-align: center;
}
.badge {
    display: inline-block;
    margin-right: var(--space-2);
    padding: 2px var(--space-2);
    border-radius: 4px;
    background: #fef3c7;
    color: var(--warn);
    font-size: 11px;
    font-weight: 600;
}
/* The badge starts hidden and is only revealed once /api/version says we are NOT on prod
   (index.js sets badge.hidden = false). Needed because the `display:inline-block` above would
   otherwise beat the UA rule that the `hidden` attribute relies on, and the empty badge would
   flash on every page. */
.badge[hidden] { display: none; }