/* Shore Pass — Menu · App Settings · Account · Privacy · Notifications · Help
   Translated from "Shore Pass Design/screens-settings.jsx" ›
   MenuScreen, SettingsScreen, AccountScreen, PrivacyScreen, NotificationsScreen.

   One root class — .scr-ms — wraps every screen in this group, and EVERY rule below
   is scoped under it so nothing here can leak into another screen's stylesheet.
   Colours come from the design tokens only, so dark mode is inherited for free. */

/* 8px, not 32: the 32 was to clear the bottom of the screen back when the menu
   pages ended here. The site footer follows every screen now and owns that
   spacing, so the old trailing pad just stacked with it. */
.scr-ms { padding: 16px 16px 8px; }
.scr-ms *, .scr-ms *::before, .scr-ms *::after { box-sizing: border-box; }
.scr-ms .dh-empty { margin: 0 0 16px; }

/* ──────────────── Group label — SettingsScreen's uppercase micro-heading ──────────────── */
.scr-ms__grp {
    margin: 22px 2px 10px;
    font-size: 11px; font-weight: 700; color: var(--sp-slate-2);
    letter-spacing: .1em; text-transform: uppercase;
}
.scr-ms__grp:first-child { margin-top: 2px; }

/* ──────────────── Card — prototype's .sp-card with padding 0 / overflow hidden ──────────────── */
.scr-ms__card { padding: 0; overflow: hidden; }
.scr-ms__card + .scr-ms__card { margin-top: 12px; }

/* ──────────────── Row: icon tile · title + sub · trailing control ──────────────── */
.scr-ms__row {
    display: flex; align-items: center; gap: 13px;
    width: 100%; padding: 14px 16px; margin: 0;
    background: transparent; border: 0; border-top: 1px solid var(--sp-line-2);
    font: inherit; color: inherit; text-align: left; text-decoration: none;
}
.scr-ms__row:first-child { border-top: 0; }
a.scr-ms__row, button.scr-ms__row { cursor: pointer; }
a.scr-ms__row:hover, button.scr-ms__row:hover { background: var(--sp-bg-2); }

.scr-ms__tile {
    width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
    background: var(--sp-bg-2); border: 1px solid var(--sp-line);
    display: grid; place-items: center; color: var(--sp-red);
}
.scr-ms__tile svg { width: 18px; height: 18px; display: block; }
.scr-ms__tile--blue { color: var(--sp-blue); }
/* Settings / Privacy / Notifications rows use the slightly smaller borderless tile */
.scr-ms__tile--sm { width: 36px; height: 36px; border-radius: 9px; border-color: transparent; }
.scr-ms__tile--sm svg { width: 17px; height: 17px; }

.scr-ms__body { flex: 1; min-width: 0; }
.scr-ms__t { font-size: 14px; font-weight: 700; color: var(--sp-ink); line-height: 1.25; }
.scr-ms__s { font-size: 11.5px; color: var(--sp-slate); line-height: 1.4; margin-top: 2px; }
.scr-ms__chev { flex: 0 0 auto; display: flex; color: var(--sp-slate-2); }
.scr-ms__chev svg { width: 18px; height: 18px; display: block; }

/* ──────────────── MenuScreen — user card ──────────────── */
.scr-ms__me { display: flex; align-items: center; gap: 14px; padding: 16px; margin: 0 0 16px; }
.scr-ms__av {
    width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto;
    background: var(--sp-red); color: #fff; display: grid; place-items: center;
    font-family: var(--sp-font-display); font-weight: 700; font-size: 20px; letter-spacing: .02em;
}
.scr-ms__av svg { width: 26px; height: 26px; display: block; }
.scr-ms__meid { flex: 1; min-width: 0; }
.scr-ms__mename {
    font-family: var(--sp-font-display); font-size: 17px; font-weight: 600;
    color: var(--sp-ink); line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* the guest card carries a sentence, not a name — let it wrap */
.scr-ms__me--guest .scr-ms__mename { white-space: normal; font-size: 15px; }
.scr-ms__memeta { font-size: 12.5px; color: var(--sp-slate); margin-top: 2px; line-height: 1.35; }
.scr-ms__memail {
    font-size: 11.5px; color: var(--sp-blue); font-weight: 600; margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scr-ms__edit {
    flex: 0 0 auto; display: inline-flex; align-items: center;
    padding: 8px 12px; border-radius: 10px;
    background: var(--sp-bg-2); border: 1px solid var(--sp-line);
    font: 700 12px/1 var(--sp-font-body); color: var(--sp-ink); text-decoration: none;
}
.scr-ms__edit:hover { border-color: var(--sp-red); color: var(--sp-red); }

/* ──────────────── MenuScreen — outlined Sign Out button ──────────────── */
.scr-ms__signout {
    width: 100%; margin-top: 16px; padding: 14px; border-radius: 12px;
    background: transparent; border: 1.5px solid var(--sp-red); color: var(--sp-red);
    font: 700 14px/1 var(--sp-font-body); cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.scr-ms__signout svg { width: 16px; height: 16px; }
.scr-ms__signout:hover { background: var(--sp-red-tint); }
.scr-ms__signout--blue { border-color: var(--sp-blue); color: var(--sp-blue); }
.scr-ms__signout--blue:hover { background: var(--sp-blue-soft); }

/* ──────────────── SettingsScreen — language / rank pill rows ──────────────── */
.scr-ms__block { padding: 14px 16px; }
.scr-ms__blocklbl {
    font-size: 11px; font-weight: 700; color: var(--sp-slate-2);
    letter-spacing: .1em; text-transform: uppercase;
}
.scr-ms__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.scr-ms__pill {
    display: inline-flex; align-items: center;
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    font: 600 13px/1 var(--sp-font-body);
    background: var(--sp-bg-2); color: var(--sp-ink); border: 1px solid var(--sp-line);
}
.scr-ms__pill:hover { border-color: var(--sp-red); }
.scr-ms__pill.is-on { background: var(--sp-red); color: #fff; border-color: var(--sp-red); }
.scr-ms__pill--sm { padding: 8px 13px; font-size: 12.5px; background: var(--sp-surface); }
/* read-only pills (Account rank) — same shape, no affordance */
.scr-ms__pill--static { cursor: default; }
.scr-ms__pill--static:hover { border-color: var(--sp-line); }
.scr-ms__pill--static.is-on:hover { border-color: var(--sp-red); }

/* Account rank — the prototype's pill row, driven by real radios so it submits
   and repaints with JavaScript off. The radio itself is visually hidden but stays
   focusable, so the keyboard ring has to be drawn on the pill around it. */
.scr-ms__pills--rank { margin-top: 0; }
.scr-ms__pillin {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; border: 0; overflow: hidden; white-space: nowrap;
    clip: rect(0 0 0 0); clip-path: inset(50%);
}
.scr-ms__pill:has(> .scr-ms__pillin:checked) {
    background: var(--sp-red); color: #fff; border-color: var(--sp-red);
}
.scr-ms__pill:has(> .scr-ms__pillin:focus-visible) {
    outline: 2px solid var(--sp-blue); outline-offset: 2px;
}

/* ──────────────── Toggle switch (46×26, 20px knob) ──────────────── */
.scr-ms__sw {
    position: relative; width: 46px; height: 26px; border-radius: 999px; flex: 0 0 auto;
    padding: 0; border: 0; cursor: pointer; background: var(--sp-line);
    transition: background 150ms;
}
.scr-ms__sw::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: left 150ms;
}
.scr-ms__sw.is-on { background: var(--sp-red); }
.scr-ms__sw.is-on::after { left: 23px; }
.scr-ms__sw--blue.is-on { background: var(--sp-blue); }

/* ──────────────── Theme segmented control (kept from the working settings toggle) ──────────────── */
.scr-ms__seg {
    display: flex; gap: 4px; flex: 0 0 auto; padding: 3px; border-radius: 999px;
    background: var(--sp-bg-2); border: 1px solid var(--sp-line);
}
.scr-ms__segbtn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 11px; border-radius: 999px; border: 0; background: transparent;
    color: var(--sp-slate); font: 700 12px/1 var(--sp-font-body); cursor: pointer;
}
.scr-ms__segbtn svg { width: 15px; height: 15px; }
.scr-ms__segbtn.is-on { background: var(--sp-surface); color: var(--sp-ink); box-shadow: var(--sp-shadow-1); }

/* ──────────────── AccountScreen ──────────────── */
.scr-ms__form { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
.scr-ms__avwrap { display: flex; justify-content: center; margin-bottom: 4px; }
.scr-ms__avbig { position: relative; }
.scr-ms__avlg {
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--sp-red); color: #fff; display: grid; place-items: center;
    font-family: var(--sp-font-display); font-weight: 700; font-size: 28px;
}
.scr-ms__avcam {
    position: absolute; bottom: 0; right: 0; width: 26px; height: 26px; border-radius: 50%;
    background: var(--sp-blue); color: #fff; display: grid; place-items: center;
    border: 2px solid var(--sp-surface);
}
.scr-ms__avcam svg { width: 13px; height: 13px; display: block; }
.scr-ms__two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scr-ms__lbl {
    display: block;                 /* real <label>s are inline — block keeps the 8px gap */
    font-size: 12px; font-weight: 700; color: var(--sp-slate);
    letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px;
}
.scr-ms__inp {
    width: 100%; padding: 13px 14px; border-radius: 12px;
    border: 1.5px solid var(--sp-line); background: var(--sp-surface);
    font: 14px/1.2 var(--sp-font-body); color: var(--sp-ink); outline: none;
}
.scr-ms__inp::placeholder { color: var(--sp-slate-2); }
.scr-ms__inp:focus { border-color: var(--sp-red); box-shadow: 0 0 0 3px var(--sp-red-soft); }
.scr-ms__inp[readonly] { color: var(--sp-ink-2); background: var(--sp-bg); }
.scr-ms__inp[readonly]:focus { border-color: var(--sp-line); box-shadow: none; }
.scr-ms__inp[aria-invalid="true"] { border-color: var(--sp-red); background: var(--sp-red-tint); }

/* Sub-label under a field (why Email is read-only) */
.scr-ms__hint {
    margin: 6px 0 0; font-size: 11.5px; color: var(--sp-slate); line-height: 1.45;
}
.scr-ms__hint a { color: var(--sp-blue); font-weight: 700; text-decoration: none; }
.scr-ms__hint a:hover { text-decoration: underline; }
/* Validation summary above the form */
.scr-ms__flash { margin: 0 0 16px; }

.scr-ms__save {
    width: 100%; padding: 16px; border-radius: 14px; border: 0;
    background: var(--sp-red); color: #fff; font: 700 15px/1 var(--sp-font-body); cursor: pointer;
}
.scr-ms__save:hover { filter: brightness(1.06); }
.scr-ms__save[disabled] { background: var(--sp-line); color: var(--sp-slate); cursor: not-allowed; }
.scr-ms__save[disabled]:hover { filter: none; }

/* ──────────────── Notes / footers ──────────────── */
.scr-ms__note {
    margin-top: 16px; padding: 14px 16px; border-radius: 14px;
    background: var(--sp-bg-2); border: 1px solid var(--sp-line);
    font-size: 13px; color: var(--sp-slate); line-height: 1.55;
}
.scr-ms__note b, .scr-ms__note a { color: var(--sp-blue); font-weight: 700; text-decoration: none; }
.scr-ms__note a:hover { text-decoration: underline; }
.scr-ms__note:first-child { margin-top: 0; }
.scr-ms__note--ok {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 16px;
    background: var(--sp-green-soft); border-color: var(--sp-green);
    color: var(--sp-green); font-size: 13px; font-weight: 700;
}
.scr-ms__note--ok svg { width: 16px; height: 16px; flex: 0 0 auto; }
.scr-ms__intro { margin: 0 0 14px; font-size: 12.5px; color: var(--sp-slate); line-height: 1.55; }

/* ──────────────── Help — FAQ disclosure rows ──────────────── */
.scr-ms__faq { border-top: 1px solid var(--sp-line-2); }
.scr-ms__faq:first-child { border-top: 0; }
.scr-ms__faq > summary {
    display: flex; align-items: center; gap: 13px; padding: 14px 16px;
    cursor: pointer; list-style: none;
    font-size: 14px; font-weight: 700; color: var(--sp-ink);
}
.scr-ms__faq > summary::-webkit-details-marker { display: none; }
.scr-ms__faq > summary:hover { background: var(--sp-bg-2); }
.scr-ms__faqq { flex: 1; min-width: 0; }
.scr-ms__faqmark { flex: 0 0 auto; color: var(--sp-slate-2); font-size: 18px; line-height: 1; font-weight: 400; }
.scr-ms__faqmark::before { content: '+'; }
.scr-ms__faq[open] > summary .scr-ms__faqmark { color: var(--sp-red); }
.scr-ms__faq[open] > summary .scr-ms__faqmark::before { content: '–'; }
.scr-ms__faqa {
    padding: 0 16px 14px 67px; margin: 0;
    font-size: 12.5px; color: var(--sp-slate); line-height: 1.6;
}
.scr-ms__faqa a { color: var(--sp-blue); font-weight: 700; text-decoration: none; }

@media (max-width: 360px) {
    .scr-ms__two { grid-template-columns: 1fr; }
    .scr-ms__row { gap: 10px; padding: 13px 12px; }
    .scr-ms__faqa { padding-left: 12px; }
}

/* ──────────────── /about — prose sections ────────────────
 * These four classes were used by the About screen from the day it was written
 * and never had a rule between them, so the page rendered as unstyled body text
 * with its row titles and subtitles run together. Tests could not see it: the
 * page was 200 and every word was present.
 *
 * .scr-ms__group doubles as the row container at the foot of the page, which is
 * why it carries the card treatment rather than the prose block doing so.
 */
.scr-ms__group {
    margin: 0 0 14px; padding: 16px;
    background: var(--sp-surface); border: 1px solid var(--sp-line);
    border-radius: 16px;
}
/* Rows inside the group run edge to edge, so the group gives up its padding. */
.scr-ms__group:has(> .scr-ms__row) { padding: 0; overflow: hidden; }

.scr-ms__lead {
    margin: 0 0 4px; font-size: 14px; line-height: 1.55;
    color: var(--sp-ink); font-weight: 500;
}
.scr-ms__h2 {
    margin: 18px 0 6px; font-family: var(--sp-font-display);
    font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--sp-ink);
}
.scr-ms__h2:first-child { margin-top: 0; }
.scr-ms__p {
    margin: 0; font-size: 13px; line-height: 1.6; color: var(--sp-slate);
}
.scr-ms__p a { color: var(--sp-blue); font-weight: 600; text-decoration: none; }
.scr-ms__p a:hover { text-decoration: underline; }
.scr-ms__p b, .scr-ms__p strong { color: var(--sp-ink); font-weight: 700; }
.scr-ms__list {
    margin: 8px 0 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 8px;
}
.scr-ms__list li {
    position: relative; padding-left: 20px;
    font-size: 13px; line-height: 1.5; color: var(--sp-slate);
}
.scr-ms__list li::before {
    content: ''; position: absolute; left: 4px; top: 7px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--sp-red);
}
.scr-ms__list b, .scr-ms__list strong { color: var(--sp-ink); font-weight: 700; }

/* Account photo uploader — the big circle is now a real control. */
.scr-ms__avbig {
    position: relative; overflow: hidden;
    width: 80px; height: 80px; border-radius: 50%; flex: 0 0 auto;
    background: var(--sp-red);
}
/* The initials fill the circle now that the size lives on the container, so
   the disc keeps its shape whether a photo is shown or not. */
.scr-ms__avbig .scr-ms__avlg { width: 100%; height: 100%; }
.scr-ms__avedit { cursor: pointer; display: block; }
.scr-ms__avphoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scr-ms__avphoto[hidden] { display: none; }
.scr-ms__err { margin: 6px 0 0; font-size: 12px; color: var(--sp-red); text-align: center; }
/* .scr-ms__avlg sets display:grid for the initials, which outranks the UA
   [hidden] rule — so the initials showed THROUGH a loaded photo. */
.scr-ms__avlg[hidden] { display: none; }