/* components.css: Landing, waitlist, auth card, buttons, forms, tables, toasts, cards. */
/* ===== LANDING ===== */
/* The front page itself lives in the Classic block (.classic-landing); the share pages
   still use this note spacing. */
.landing-note { margin-top: 22px; }

/* Larger button for the hero call-to-action */
.btn-lg { padding: 13px 28px; font-size: 1.02rem; min-height: 50px; }

/* ===== WAITLIST (landing-page pre-launch email capture) ===== */
.waitlist { max-width: 620px; margin: 34px auto 0; scroll-margin-top: 24px; }
.waitlist__panel { text-align: center; padding: 30px 26px; }
.waitlist__panel--ok { border-color: var(--color-success-border); }
.waitlist__panel--error { border-color: var(--color-error-border); }
.waitlist__glyph { font-size: 2rem; line-height: 1; margin-bottom: 10px; color: var(--color-success); }
.waitlist__title { font-family: var(--font-heading); font-size: 1.15rem; margin: 6px 0 8px; }
.waitlist__blurb { color: var(--text-secondary); font-size: 0.92rem; margin: 0 0 18px; }
.waitlist__form {
    display: flex;
    /* The global `form` rule (FORMS, below) is flex-direction: column; without
       overriding it here, `.waitlist__input`'s `flex: 1 1 240px` sets a
       240px *height* basis instead of width, ballooning the email field. */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    /* FORMS (below) sets a global max-width on `form`; the row needs the panel's
       full width or the input collapses to a stub beside the button. */
    max-width: none;
    width: 100%;
    margin: 0;
}
.waitlist__input {
    flex: 1 1 240px;
    min-width: 0;
    margin: 0;
}
.waitlist__form .btn { flex: 0 0 auto; }
.waitlist__error {
    color: var(--color-error-text);
    font-size: 0.9rem;
    margin: 0 0 14px;
}
.waitlist__fineprint {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 16px 0 0;
}

/* ===== AUTH (login / register / password reset): light-touch card =====
   max-width is a comfortable reading measure for a handful of stacked fields,
   not a hard cap: it was 440px (blocking register's extra fields onto a
   cramped column), widened to sit alongside the site's other intermediate
   card widths (frontend-guide.md's "480px or 700px" examples) while staying
   fluid below it, so nothing narrower than the card ever gets clipped. */
.auth-card { max-width: 560px; margin: clamp(24px, 6vw, 60px) auto; }
.auth-card .eyebrow { color: var(--text-muted); }
.auth-title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    letter-spacing: -0.02em;
    margin: 6px 0 16px;
}
.auth-card form { max-width: none; }
.auth-intro { color: var(--text-secondary); font-size: 0.92rem; margin: 0 0 16px; }
.auth-links { margin: 18px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.auth-links p { margin: 0; color: var(--text-secondary); }

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    min-height: 42px;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Primary = the accent, solid. The nebula gradient is reserved for .btn-reward
   (earned / celebratory actions) so the glow stays meaningful. */
.btn-primary {
    background: var(--color-primary);
    color: var(--text-inverse);
}
@media (hover: hover) { .btn-primary:hover { background: var(--color-primary-dark); box-shadow: var(--glow-accent); } }

.btn-reward {
    background: var(--gradient-primary);
    color: var(--text-inverse);
    box-shadow: var(--glow-reward);
}
@media (hover: hover) { .btn-reward:hover { filter: brightness(1.06); } }

.btn-secondary {
    background: var(--bg-subtle);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
@media (hover: hover) { .btn-secondary:hover { background: var(--bg-hover); } }

.btn-danger {
    background: var(--color-error);
    color: var(--text-inverse);
}
@media (hover: hover) { .btn-danger:hover { opacity: 0.9; } }

.btn:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 768px) {
    .btn { min-height: 44px; }
}

body.compact-ui .btn { padding: 7px 14px; font-size: 0.9em; min-height: 34px; }

/* ===== FORMS ===== */
form { display: flex; flex-direction: column; gap: 14px; }
/* Opt-in narrow width for small confirm/single-field forms (rename, cancel, decline,
   allocate, etc.) — forms no longer default to a 420px cap (that used to squeeze full-
   width content like the bio editors and trade offer builders), so anything that actually
   wants the old compact width takes this class explicitly instead of inheriting it silently. */
.form-compact { max-width: 420px; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; color: var(--text-secondary); }

/* A checkbox label reads naturally box-then-text on one line, not stacked
   like the column labels above it (register's Terms checkbox). */
.form-checkbox-row { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; }
.form-checkbox-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }

/* `input:not([type])` is in the list for the same reason it is in the coarse-
   pointer font floor below: a bare <input> defaults to type=text but matches
   none of the attribute selectors, so it renders as an unstyled 24px browser
   box next to styled siblings. The dressing room's "save this look" field
   shipped exactly that way. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input:not([type]),
select,
textarea {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 1em;
}

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

/* ===== TABLES =====
   Every in-app table is a dense data table (mod/staff panels, login activity).
   They self-scroll horizontally via the display:block technique (like GitHub's
   markdown tables): the table element itself is the scroll container, so a wide
   table scrolls sideways inside its column instead of forcing the whole page to
   scroll on phones: no per-table wrapper markup required. Cells stay on one line
   (nowrap) so columns keep their shape while scrolling; opt a long free-text
   column into wrapping with class="cell-wrap". */
table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    margin: 4px 0 18px;
    font-size: 0.9rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
th, td {
    padding: 9px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}
thead th {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-subtle);
}
/* Row-header tables (Redis panel: <th> in the first column); quieter than a
   column header, aligned as a label. */
tbody th {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 700;
}
tbody tr:last-child td,
tbody tr:last-child th { border-bottom: none; }
@media (hover: hover) { tbody tr:hover td { background: var(--bg-hover); } }
td a { font-weight: 600; }
/* Long free text (user agents, tracebacks, summaries) wraps instead of blowing
   the row width out: width is capped so the column stays readable. */
.cell-wrap { white-space: normal; min-width: 200px; max-width: 380px; word-break: break-word; }
table pre { white-space: pre-wrap; word-break: break-word; margin: 6px 0 0; }

/* ===== MESSAGES / TOASTS ===== */
.messages { list-style: none; margin: 0; padding: 12px 20px 0; }
.messages li {
    padding: 10px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}
.messages li.success { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.messages li.error   { background: var(--color-error-bg);   color: var(--color-error-text);   border: 1px solid var(--color-error-border); }
.messages li.info    { background: var(--color-info-bg);    color: var(--color-info-text);    border: 1px solid var(--color-info-border); }
.messages li.warning { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }

.auth-suspension-notice {
    background: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-error-border);
    border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 16px;
}
.auth-suspension-notice p { margin: 0 0 6px; }
.auth-suspension-notice p:last-child { margin-bottom: 0; }

/* FIND-05/12: the unified inbox banner on the /mod/ dashboard. */
.mod-inbox-banner {
    display: flex; align-items: center; gap: 14px; margin: 14px 0;
    padding: 14px 18px; border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--color-warning) 45%, var(--border-color));
    background: color-mix(in srgb, var(--color-warning) 8%, var(--bg-surface));
    text-decoration: none; color: inherit;
}
.mod-inbox-banner--clear {
    border-color: color-mix(in srgb, var(--color-success) 45%, var(--border-color));
    background: color-mix(in srgb, var(--color-success) 8%, var(--bg-surface));
}
.mod-inbox-banner__count {
    font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; min-width: 2ch; text-align: center;
}
.mod-inbox-banner__label { flex: 1; font-weight: 600; }
.mod-inbox-banner__cta { font-size: .85rem; color: var(--color-primary); font-weight: 600; white-space: nowrap; }

/* FIND-11: the site-wide "jump to case file" icon, next to a username anywhere a
   moderator with can_view_user_god_view is looking at the live site. */
.case-file-jump {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-left: 4px; border-radius: var(--radius-pill);
    border: 1px solid var(--border-color); background: var(--bg-surface);
    font-size: 0.75rem; line-height: 1; text-decoration: none; vertical-align: middle;
    opacity: 0.75;
}
@media (hover: hover) {
    .case-file-jump:hover { opacity: 1; border-color: var(--color-primary); }
}
@media (pointer: coarse) {
    .case-file-jump { width: 44px; height: 44px; }
}

.message-toast {
    padding: 12px 18px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    color: var(--text-inverse);
    font-weight: 500;
    max-width: 380px;
}
.message-toast.success { background: var(--color-success); }
.message-toast.error   { background: var(--color-error); }
.message-toast.info    { background: var(--color-primary); }
.message-toast.reward  { border-left: 4px solid var(--color-warning-text); background: var(--color-warning-bg); color: var(--color-warning-text); }

/* ===== CARDS =====
   Shared surface treatment for the existing card class hooks already present
   in template markup: .pet-card, .nest-card, .expedition-card,
   .map-node-card, .faction-card, .inventory-item */
.pet-card,
.nest-card,
.expedition-card,
.map-node-card,
.faction-card,
.inventory-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px;
}

.squad-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-lg);
    background: var(--color-success-bg);
    color: var(--color-success-text);
    font-size: 0.85em;
    font-weight: 600;
}

.hex-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    margin-right: 4px;
    vertical-align: middle;
}