/* ═══════════════════════════════════════════════════════════════════════════
   Shore Pass — Alerts screen + Report-alert form
   Translated from  Shore Pass Design/screens-alerts.jsx › AlertsScreen
                and Shore Pass Design/screens-share.jsx  › ReportAlertScreen

   Everything is scoped under .scr-alerts (list) or .scr-report (form) so this
   file cannot collide with design.css or with any other screen stylesheet.

   Kind mapping — the DB enum is scam|safety|notice, the prototype's palette is
   warn|info|success|chat. Each row/option sets two locals, --k (line colour)
   and --k-soft (tint), so the shared rules stay kind-agnostic:
       scam   → prototype "warn"  · siren  · --sp-red
       safety → prototype "chat"  · shield · --sp-amber
       notice → prototype "info"  · info   · --sp-blue
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── shared kind tokens ───────────────────────── */
.scr-alerts .is-scam,
.scr-report .is-scam   { --k: var(--sp-red);   --k-soft: var(--sp-red-soft); }
.scr-alerts .is-safety,
.scr-report .is-safety { --k: var(--sp-amber); --k-soft: var(--sp-amber-soft); }
.scr-alerts .is-notice,
.scr-report .is-notice { --k: var(--sp-blue);  --k-soft: var(--sp-blue-soft); }


/* ═══════════════════════════════════════════════════════════════════════════
   1. ALERTS  —  AlertsScreen
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header — prototype: 16px 16px 14px, surface, 1px bottom line. The prototype's
   header is title + sub only, with no right-hand action square; the single way
   into the report form is the CTA at the foot of the list. */
.scr-alerts__head {
    padding: 16px 16px 14px;
    background: var(--sp-surface);
    border-bottom: 1px solid var(--sp-line);
    position: sticky; top: 0; z-index: 20;
}
.scr-alerts__title {
    margin: 0 0 6px;
    font-family: var(--sp-font-display); font-size: 26px; font-weight: 600;
    color: var(--sp-ink); letter-spacing: .01em; line-height: 1.1;
}
.scr-alerts__sub { margin: 0; font-size: 13px; color: var(--sp-slate); }

/* Body — prototype: padding 14px 0 24px */
.scr-alerts__body { padding: 14px 0 24px; }
.scr-alerts__flash { margin: 0 16px 14px; }

/* Filter pills — prototype: 0 16px 14px, gap 8, pill 8/14, r999 */
.scr-alerts__filters {
    display: flex; gap: 8px; overflow-x: auto;
    padding: 0 16px 14px;
}
.scr-alerts__pill {
    flex: 0 0 auto; padding: 8px 14px; border-radius: 999px;
    background: var(--sp-surface); border: 1px solid var(--sp-line);
    color: var(--sp-ink-2); font-size: 13px; font-weight: 700;
    text-decoration: none; white-space: nowrap;
}
.scr-alerts__pill.is-on {
    background: var(--sp-blue); border-color: var(--sp-blue); color: #fff;
}

/* List — prototype: 0 16px, column, gap 10 */
.scr-alerts__list { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }

/* Row — the prototype's settled ("read") card treatment, applied to every row:
   surface background + 1px line. The DB has no read flag, so the unread tint,
   2px kind border and status dot are deliberately not rendered. */
.scr-alerts__row {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px; border-radius: var(--sp-r-lg, 14px);
    background: var(--sp-surface); border: 1px solid var(--sp-line);
    box-shadow: var(--sp-shadow-1);
    color: inherit; text-decoration: none;
}
a.scr-alerts__row:hover { border-color: var(--k, var(--sp-line)); }

/* Kind tile — prototype: 40x40, r10, tinted, 20px glyph in kind colour */
.scr-alerts__tile {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
    background: var(--k-soft); color: var(--k);
    display: grid; place-items: center;
}
.scr-alerts__tileico { width: 20px; height: 20px; }

.scr-alerts__main { flex: 1; min-width: 0; }
.scr-alerts__rowtitle {
    margin: 0 0 4px;
    font-family: var(--sp-font-display); font-size: 15px; font-weight: 700;
    color: var(--sp-ink); line-height: 1.3;
}
.scr-alerts__rowbody {
    margin: 0 0 6px;
    font-size: 13px; color: var(--sp-ink-2); line-height: 1.5;
}

/* Meta line — prototype: 11px, slate-2, gap 8, clock glyph first */
.scr-alerts__meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-size: 11px; color: var(--sp-slate-2);
}
.scr-alerts__meta > span { display: inline-flex; align-items: center; gap: 4px; }
/* The prototype draws these at 11px with a stroked icon set. These glyphs are
   solid fills, so 11px collapses them into blobs — 13px is the smallest size at
   which they still read. evenodd is needed because the shared clock path draws
   its hands as a same-winding subpath, which the default nonzero rule fills in
   solid; the other three glyphs here already hole out and are unaffected. */
.scr-alerts__metaico { width: 13px; height: 13px; flex: 0 0 auto; fill-rule: evenodd; }
.scr-alerts__sep { color: var(--sp-line); }
.scr-alerts__view { color: var(--sp-blue); font-weight: 600; }

/* Empty state — prototype: 40px 16px, 48px bell at 50% opacity, one line of text */
.scr-alerts__empty { padding: 40px 16px; text-align: center; }
.scr-alerts__emptyico { width: 48px; height: 48px; color: var(--sp-slate-2); opacity: .5; }
.scr-alerts__emptytxt {
    margin: 16px 0 0; font-size: 15px; font-weight: 600; color: var(--sp-ink-2);
}

/* Ghost "report" call to action at the foot of the list */
.scr-alerts__cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 18px 16px 0; padding: 15px;
    border-radius: var(--sp-r-lg, 14px);
    background: transparent; border: 1.5px solid var(--sp-red);
    color: var(--sp-red); font-size: 14px; font-weight: 700; text-decoration: none;
}
.scr-alerts__ctaico { width: 17px; height: 17px; }


/* ═══════════════════════════════════════════════════════════════════════════
   2. REPORT AN ALERT  —  ReportAlertScreen
   ═══════════════════════════════════════════════════════════════════════════ */

/* TopBar — prototype: 14px 16px 12px, surface, sticky, 1px bottom line */
.scr-report__bar {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px 12px;
    background: var(--sp-surface); border-bottom: 1px solid var(--sp-line);
    position: sticky; top: 0; z-index: 20;
}
.scr-report__back {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
    background: var(--sp-bg); border: 1px solid var(--sp-line);
    display: grid; place-items: center; color: var(--sp-ink); text-decoration: none;
}
/* prototype: Icon name="chevron-left" size={20} */
.scr-report__backico { width: 20px; height: 20px; }
.scr-report__barmain { flex: 1; min-width: 0; }
.scr-report__eyebrow {
    margin: 0 0 2px;
    font-family: var(--sp-font-display); font-size: 10px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase; color: var(--sp-red);
}
.scr-report__title {
    margin: 0;
    font-family: var(--sp-font-display); font-size: 22px; font-weight: 600;
    color: var(--sp-ink); line-height: 1.1;
    text-transform: uppercase; letter-spacing: .01em;
}

/* Form body — prototype: 20px 16px 32px, column, gap 20 */
.scr-report__body { padding: 20px 16px 32px; display: flex; flex-direction: column; gap: 20px; }
.scr-report__form { display: flex; flex-direction: column; gap: 20px; }

.scr-report__lead { margin: 0; }
.scr-report__leadh {
    margin: 0 0 6px;
    font-family: var(--sp-font-display); font-size: 20px; font-weight: 600; color: var(--sp-ink);
}
.scr-report__leadp { margin: 0; font-size: 13px; color: var(--sp-slate); line-height: 1.5; }

/* Kind chooser — prototype: column, gap 10, 14/16 padding, r14, 1.5px border.
   The radio is visually hidden and the styled box is its next sibling, so the
   selected state rides on `input:checked + box` — always in step with the real
   control, with no :has() and no server-rendered "selected" class to go stale. */
.scr-report__kinds { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; margin: 0; }
.scr-report__kind { display: block; cursor: pointer; }
.scr-report__kind input {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.scr-report__kindbox {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 14px;
    background: var(--sp-surface); border: 1.5px solid var(--sp-line);
}
.scr-report__kind input:checked + .scr-report__kindbox {
    background: var(--k-soft); border-color: var(--k);
}
/* keyboard focus has to be visible — the radio itself is off-screen */
.scr-report__kind input:focus-visible + .scr-report__kindbox { outline: 2px solid var(--k); outline-offset: 2px; }
.scr-report__kindico { width: 22px; height: 22px; flex: 0 0 auto; color: var(--k); }
.scr-report__kindtxt { flex: 1; min-width: 0; }
.scr-report__kindtxt strong { display: block; font-size: 14px; font-weight: 700; color: var(--sp-ink); }
.scr-report__kindtxt small { display: block; margin-top: 2px; font-size: 11px; color: var(--sp-slate); }
.scr-report__kindchk { flex: 0 0 auto; margin-left: auto; color: var(--k); visibility: hidden; }
.scr-report__kindchkico { width: 18px; height: 18px; display: block; }
.scr-report__kind input:checked + .scr-report__kindbox .scr-report__kindchk { visibility: visible; }

/* Field — prototype: uppercase 12/700 slate caption + 14px control, r12 */
.scr-report__field { display: block; }
.scr-report__lab {
    display: block; margin-bottom: 8px;
    font-size: 12px; font-weight: 700; color: var(--sp-slate);
    letter-spacing: .06em; text-transform: uppercase;
}
.scr-report__opt { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--sp-slate-2); }
.scr-report__in {
    display: block; width: 100%; padding: 14px; border-radius: 12px;
    border: 1.5px solid var(--sp-line); background: var(--sp-surface);
    font-family: var(--sp-font-body); font-size: 14px; color: var(--sp-ink);
    outline: none; -webkit-appearance: none; appearance: none;
}
.scr-report__in:focus { border-color: var(--sp-red); }
.scr-report__in::placeholder { color: var(--sp-slate-2); }
textarea.scr-report__in { resize: none; line-height: 1.6; }
.scr-report__err { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--sp-red); }

/* Identity block for signed-out reporters */
.scr-report__id { display: flex; flex-direction: column; gap: 10px; }
.scr-report__anon {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--sp-ink-2); font-weight: 600;
}
.scr-report__anon input { width: 17px; height: 17px; accent-color: var(--sp-red); }

/* Submit — prototype: 16px, r14, 15/700, red */
.scr-report__submit {
    display: block; width: 100%; padding: 16px; border-radius: 14px;
    background: var(--sp-red); color: #fff; border: none;
    font-family: var(--sp-font-body); font-size: 15px; font-weight: 700;
    cursor: pointer;
}
.scr-report__submit:active { background: var(--sp-red-deep); }

/* ──────────────── PORT SCOPE — the list follows the chosen port ──────────────── */
.scr-alerts__scope {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--sp-red-soft);
    color: var(--sp-red);
    font-weight: 700;
}
.scr-alerts__all {
    margin-left: 6px;
    color: var(--sp-red);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}