/* Shore Pass — Profile + Saved screens
   Translated from Shore Pass Design/screens-tabs.jsx › ProfileScreen and SavedScreen.

   Everything here is namespaced under .scr-profile / .scr-saved so it cannot
   collide with another screen's stylesheet. Colours come from the design tokens,
   so dark mode follows for free. */

/* ══════════════════════════════════════════════════════════════
   PROFILE — screens-tabs.jsx › ProfileScreen
   ══════════════════════════════════════════════════════════════ */

/* ---------- Identity header (sits inside the shared .mhead chrome) ---------- */
.scr-profile__idrow { display: flex; align-items: center; gap: 14px; }

.scr-profile__av {
    flex: 0 0 auto; width: 60px; height: 60px; 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: 22px;
    letter-spacing: .02em;
}
.scr-profile__avico { width: 28px; height: 28px; }

.scr-profile__id { flex: 1; min-width: 0; }
.scr-profile__name {
    margin: 0; font-family: var(--sp-font-display); font-size: 20px; font-weight: 700;
    color: var(--sp-ink); line-height: 1.1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scr-profile__meta {
    margin: 3px 0 0; font-size: 13px; color: var(--sp-slate);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scr-profile__mail {
    margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--sp-blue);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.scr-profile__edit {
    flex: 0 0 auto; padding: 8px 14px; border-radius: 10px;
    background: var(--sp-bg); border: 1px solid var(--sp-line);
    font-size: 13px; font-weight: 700; color: var(--sp-ink); text-decoration: none;
}
.scr-profile__edit:hover { background: var(--sp-bg-2); }
.scr-profile__edit--on {
    background: var(--sp-red); border-color: var(--sp-red); color: #fff;
}
.scr-profile__edit--on:hover { background: var(--sp-red-deep); }

/* ---------- Body & section scaffolding ---------- */
.scr-profile__body { padding: 16px 0 32px; }
.scr-profile__sec { padding: 0 16px 18px; }

.scr-profile__label {
    margin: 0 0 10px; font-family: var(--sp-font-display);
    font-size: 11px; font-weight: 700; color: var(--sp-slate);
    letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- Signed-out prompt ---------- */
.scr-profile__guest {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 10px; padding: 26px 22px 22px;
    background: var(--sp-surface); border: 1px solid var(--sp-line);
    border-radius: 18px; box-shadow: var(--sp-shadow-1);
}
.scr-profile__guesth { margin: 6px 0 0; font-family: var(--sp-font-display); font-size: 22px; color: var(--sp-ink); }
.scr-profile__guestp { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--sp-slate); }

.scr-profile__btn {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px; border-radius: 13px; font-size: 14px; font-weight: 700;
    text-decoration: none; border: 1.5px solid transparent;
}
.scr-profile__btnico { width: 16px; height: 16px; flex: 0 0 auto; }
.scr-profile__btn--primary { background: var(--sp-red); color: #fff; box-shadow: var(--sp-shadow-red); }
.scr-profile__btn--primary:hover { background: var(--sp-red-deep); }
.scr-profile__btn--ghost { background: transparent; border-color: var(--sp-red); color: var(--sp-red); }
.scr-profile__btn--ghost:hover { background: var(--sp-red-tint); }

/* ---------- My Port picker ---------- */
/* Pills are submit buttons in one POST form (/profile/port), so the choice is
   stored on the account rather than in localStorage — hence the button resets. */
.scr-profile__portmsg { margin: 0 0 10px; font-size: 13px; }
.scr-profile__porthint { margin: 10px 0 0; font-size: 12px; color: var(--sp-slate); }
.scr-profile__pills { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; }
.scr-profile__pill {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px; border-radius: 999px; white-space: nowrap; text-decoration: none;
    background: var(--sp-surface); border: 1.5px solid var(--sp-line);
    color: var(--sp-slate); font-size: 13px; font-weight: 700;
}
.scr-profile__pill:hover { border-color: var(--sp-red); color: var(--sp-red); }
.scr-profile__pill:focus-visible { outline: 2px solid var(--sp-red); outline-offset: 2px; }
.scr-profile__pill.is-on { background: var(--sp-red); border-color: var(--sp-red); color: #fff; }
.scr-profile__pillflag { font-size: 16px; line-height: 1; }

.scr-profile__portsel {
    margin-top: 10px; padding: 11px 14px; border-radius: 12px;
    background: var(--sp-red-soft); border: 1px solid var(--sp-red);
    display: flex; align-items: center; gap: 10px;
}
.scr-profile__portsel[hidden] { display: none; }
.scr-profile__portselflag { font-size: 22px; line-height: 1; }
.scr-profile__portseltxt { flex: 1; min-width: 0; }
.scr-profile__portselname { margin: 0; font-size: 14px; font-weight: 700; color: var(--sp-red); }
.scr-profile__portselsub { margin: 2px 0 0; font-size: 12px; color: var(--sp-slate); line-height: 1.4; }
.scr-profile__portselgo {
    flex: 0 0 auto; padding: 6px 12px; border-radius: 999px;
    background: var(--sp-red); color: #fff; font-size: 12px; font-weight: 700; text-decoration: none;
}
.scr-profile__portselgo:hover { background: var(--sp-red-deep); }
.scr-profile__portselx {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 8px; padding: 4px;
    background: transparent; border: none; cursor: pointer;
    color: var(--sp-slate); line-height: 1; font-family: inherit;
}
.scr-profile__portselx:hover { color: var(--sp-red); }
.scr-profile__portselxsvg { width: 16px; height: 16px; }
.scr-profile__portsempty { margin: 0; }

/* ---------- Panels (Saved preview + Settings rows) ---------- */
.scr-profile__panel {
    border-radius: 14px; overflow: hidden; border: 1px solid var(--sp-line);
    background: var(--sp-surface);
}

.scr-profile__row {
    display: flex; align-items: center; gap: 13px; padding: 13px 14px;
    background: var(--sp-surface); text-decoration: none;
    border-top: 1px solid var(--sp-line-2);
}
.scr-profile__row:first-child { border-top: none; }
.scr-profile__row[hidden] { display: none; }
.scr-profile__row:hover { background: var(--sp-bg-2); }

.scr-profile__rowico {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
    background: var(--sp-bg-2); border: 1px solid var(--sp-line);
    display: grid; place-items: center; color: var(--sp-red);
}
.scr-profile__rowico--blue { background: var(--sp-blue-soft); border-color: transparent; color: var(--sp-blue); }
.scr-profile__rowicosvg { width: 17px; height: 17px; }

.scr-profile__rowbody { flex: 1; min-width: 0; }
.scr-profile__rowname {
    display: block; font-size: 14px; font-weight: 700; color: var(--sp-ink); line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scr-profile__rowsub {
    display: block; margin-top: 2px; font-size: 11.5px; color: var(--sp-slate);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scr-profile__chev { flex: 0 0 auto; width: 16px; height: 16px; color: var(--sp-slate-2); }
.scr-profile__row--all .scr-profile__rowname { color: var(--sp-blue); }

/* The prototype draws the Saved rows a touch tighter than the Settings rows:
   12px/14px padding, a 36px tile and a 13.5px title against 13px/14px, 38px
   and 14px. Scoped to the Saved panel so the Settings list keeps its own scale. */
.scr-profile__panel--saved .scr-profile__row { gap: 12px; padding: 12px 14px; }
.scr-profile__panel--saved .scr-profile__rowico { width: 36px; height: 36px; border-radius: 9px; }
.scr-profile__panel--saved .scr-profile__rowname { font-size: 13.5px; }
.scr-profile__panel--saved .scr-profile__chev { width: 15px; height: 15px; }

/* Saved preview — empty variant */
.scr-profile__savedempty { padding: 24px 16px; text-align: center; background: var(--sp-surface); }
.scr-profile__savedempty[hidden] { display: none; }
.scr-profile__savedico {
    display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--sp-bg-2); color: var(--sp-slate-2); margin-bottom: 8px;
}
.scr-profile__savedicosvg { width: 20px; height: 20px; }
.scr-profile__savedh { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--sp-ink); }
.scr-profile__savedp { margin: 4px 0 0; font-size: 12px; color: var(--sp-slate); line-height: 1.45; }

/* ---------- Stat tiles ---------- */
.scr-profile__sec--stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.scr-profile__stat {
    padding: 14px 10px; text-align: center;
    background: var(--sp-surface); border: 1px solid var(--sp-line);
    border-radius: var(--sp-r-lg); box-shadow: var(--sp-shadow-1);
}
.scr-profile__statn {
    display: block; font-family: var(--sp-font-mono); font-size: 22px; font-weight: 700;
    color: var(--sp-ink); line-height: 1;
}
.scr-profile__statl {
    display: block; margin-top: 5px; font-size: 10.5px; font-weight: 600; color: var(--sp-slate);
    text-transform: uppercase; letter-spacing: .06em;
}
.scr-profile__statsempty { margin: 0 16px 18px; }
.scr-profile__statslink { display: inline-block; margin-top: 8px; color: var(--sp-red); font-weight: 700; }

/* ---------- Sign out ---------- */
.scr-profile__signout {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px; border-radius: 13px;
    background: transparent; border: 1.5px solid var(--sp-red); color: var(--sp-red);
    font-size: 14px; font-weight: 700; text-decoration: none;
}
.scr-profile__signout:hover { background: var(--sp-red-tint); }

/* ══════════════════════════════════════════════════════════════
   SAVED — screens-tabs.jsx › SavedScreen
   ══════════════════════════════════════════════════════════════ */
.scr-saved__title {
    margin: 0; font-family: var(--sp-font-display); font-size: 26px; font-weight: 600;
    color: var(--sp-ink); letter-spacing: .01em; line-height: 1.1;
}
.scr-saved__sub { margin: 6px 0 0; font-size: 13px; color: var(--sp-slate); }

/* ---------- Empty state ---------- */
.scr-saved__empty { padding: 40px 16px; text-align: center; }
.scr-saved__empty[hidden] { display: none; }
.scr-saved__emptyico {
    display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%;
    background: var(--sp-bg-2); color: var(--sp-slate-2); margin: 0 auto 20px;
}
.scr-saved__emptyicosvg { width: 36px; height: 36px; }
.scr-saved__emptyh {
    margin: 0 0 8px; font-family: var(--sp-font-display); font-size: 18px; font-weight: 600; color: var(--sp-ink);
}
.scr-saved__emptyp {
    margin: 0 auto 24px; max-width: 280px; font-size: 14px; line-height: 1.5; color: var(--sp-slate);
}
.scr-saved__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 18px; border-radius: var(--sp-r-md);
    background: var(--sp-red); color: #fff; box-shadow: var(--sp-shadow-red);
    font-size: 14px; font-weight: 700; text-decoration: none;
}
.scr-saved__cta:hover { background: var(--sp-red-deep); }
.scr-saved__ctaico { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---------- Groups ---------- */
.scr-saved__groups { padding: 20px 0 24px; }
.scr-saved__groups[hidden] { display: none; }
.scr-saved__grp { margin-bottom: 24px; }
.scr-saved__grp:last-child { margin-bottom: 0; }
.scr-saved__grph {
    padding: 0 16px; margin: 0 0 14px;
    font-family: var(--sp-font-display); font-size: 20px; font-weight: 600;
    color: var(--sp-ink); letter-spacing: -.005em; line-height: 1.1;
}

.scr-saved__cards { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.scr-saved__card {
    display: flex; align-items: center; gap: 8px; padding: 14px;
    background: var(--sp-surface); border: 1px solid var(--sp-line);
    border-radius: var(--sp-r-lg); box-shadow: var(--sp-shadow-1);
}
.scr-saved__cardlink { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.scr-saved__cardico {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px;
    display: grid; place-items: center;
}
.scr-saved__cardico--red  { background: var(--sp-red-soft);  color: var(--sp-red); }
.scr-saved__cardico--blue { background: var(--sp-blue-soft); color: var(--sp-blue); }
.scr-saved__cardicosvg { width: 17px; height: 17px; }
.scr-saved__cardbody { flex: 1; min-width: 0; }
.scr-saved__cardname {
    display: block; font-size: 14px; font-weight: 700; color: var(--sp-ink); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scr-saved__cardmeta {
    display: block; margin-top: 4px; font-size: 12px; color: var(--sp-slate);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scr-saved__rm {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
    background: transparent; border: 1px solid var(--sp-line);
    color: var(--sp-slate-2); font-size: 18px; line-height: 1; font-family: inherit; cursor: pointer;
}
.scr-saved__rm:hover { border-color: var(--sp-red); color: var(--sp-red); }

/* ---------- Desktop: keep both screens in a comfortable centred column ---------- */
@media (min-width: 1024px) {
    .scr-saved { max-width: 580px; margin-inline: auto; }
}

/* Sits between the search field and the shortcut pills, so it needs a little
   air above it that the section's first label does not. */
.scr-profile__portpop { margin-top: 18px; }