/*
 * User settings page (templates/settings.html). Built on tokens.css + components.css (hp-*);
 * everything here is prefixed sp- so it can't leak into the pages that share settings.css.
 */

.sp-body { background: var(--c-canvas); }

.sp {
    flex: 1;
    min-width: 0;
    max-width: 880px;
    margin: 0 auto;
    padding: var(--s-8) var(--s-6) var(--s-16);
    box-sizing: border-box;
    color: var(--c-ink);
    font-family: var(--font);
}

.sp-header h1 {
    margin: 0;
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    font-weight: var(--fw-heavy);
    letter-spacing: -0.02em;
}

/* Section shortcuts, pinned under the navbar while scrolling */
.sp-nav {
    position: sticky;
    top: 56px;
    z-index: 5;
    display: flex;
    gap: var(--s-1);
    margin: var(--s-4) calc(-1 * var(--s-2)) var(--s-6);
    padding: var(--s-2);
    background: var(--c-canvas);
    overflow-x: auto;
    scrollbar-width: none;
}
.sp-nav::-webkit-scrollbar { display: none; }
.sp-nav a {
    flex-shrink: 0;
    padding: 7px var(--s-3);
    border-radius: var(--r-full);
    color: var(--c-ink-2);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    white-space: nowrap;
}
.sp-nav a:hover { background: var(--c-surface); color: var(--c-ink); }
.sp-nav a:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }

/* Anchored sections stop below the navbar + shortcut bar */
.sp-card, .sp-pair { scroll-margin-top: 128px; }

.sp-flash { margin-bottom: var(--s-4); }
.sp-flash svg { flex-shrink: 0; margin-top: 2px; }

/* ── Cards ── */
.sp-card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--s-6);
    margin-bottom: var(--s-4);
}
.sp-card-head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-6);
}
.sp-card-head h2 {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: 1.3;
}
.sp-head-badge { margin-left: auto; }
.sp-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-primary-tint);
    color: var(--c-primary);
}
.sp-icon svg { width: 18px; height: 18px; }
.sp-icon--accent { background: var(--c-accent-tint); color: var(--c-accent-ink); }

.sp-muted { margin: 0; color: var(--c-muted); font-size: var(--fs-small); }
.sp-optional { color: var(--c-muted); font-weight: var(--fw-regular); }
.sp-mono { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.sp-divider { border: none; border-top: 1px solid var(--c-line); margin: var(--s-6) 0; }

/* Form layout */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4) var(--s-4);
}
.sp-span-2 { grid-column: 1 / -1; }
.sp-stack { display: flex; flex-direction: column; gap: var(--s-4); }
.sp-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--s-3);
    margin-top: var(--s-6);
}
.sp-stack .sp-actions { margin-top: auto; }
.sp-actions form { margin: 0; }

/* ── Profile ── */
.sp-profile { display: flex; align-items: center; gap: var(--s-4); }
.sp-avatar {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: var(--r-full);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-primary-tint-2);
    color: var(--c-primary-hover);
    font-size: 1.5rem;
    font-weight: var(--fw-bold);
}
.sp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sp-profile-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.sp-profile-name {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.sp-avatar-form { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s-6); }
.sp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.sp-file {
    flex: 1 1 240px;
    min-width: 0;
    font-family: inherit;
    font-size: var(--fs-small);
    color: var(--c-muted);
}
.sp-file::file-selector-button {
    margin-right: var(--s-3);
    height: var(--control-h-sm);
    padding: 0 var(--s-3);
    border: 1px dashed var(--c-line-strong);
    border-radius: var(--r-sm);
    background: var(--c-canvas);
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    cursor: pointer;
}
.sp-file::file-selector-button:hover { border-color: var(--c-primary); color: var(--c-primary-hover); }

/* ── Subscription ── */
.sp-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-4);
    margin: 0 0 var(--s-4);
}
.sp-facts > div {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm);
    background: var(--c-canvas);
}
.sp-facts dt { font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.sp-facts dd { margin: 4px 0 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); }

.sp-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}
.sp-empty p { margin: 0; color: var(--c-ink-2); }

/* ── One Click Trip credits ── */
.sp-credits { display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: flex-start; }
.sp-stat {
    flex: 0 0 auto;
    min-width: 120px;
    padding: var(--s-4) var(--s-6);
    border-radius: var(--r-md);
    background: var(--c-primary-tint);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.sp-stat-value { font-size: 2.5rem; line-height: 1; font-weight: var(--fw-heavy); color: var(--c-primary-hover); }
.sp-stat-label { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-primary-hover); text-align: center; }
.sp-credits-detail { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.sp-meter-label {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-1) var(--s-3);
    margin: 0;
    font-size: var(--fs-small);
    color: var(--c-ink-2);
}
.sp-meter-label strong { color: var(--c-ink); }
.sp-meter { height: 8px; border-radius: var(--r-full); background: var(--c-line); overflow: hidden; }
.sp-meter span { display: block; height: 100%; border-radius: inherit; background: var(--c-primary); }

/* ── Language + currency ── */
.sp-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0 var(--s-4);
}
.sp-pair .sp-card { display: flex; flex-direction: column; }
.sp-pair .sp-stack { flex: 1; }

/* ── Preferences ── */
.sp-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s-6);
}
.sp-group {
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
/* The legend isn't a flex item, so the hint below it carries the spacing */
.sp-group legend {
    padding: 0;
    margin-bottom: 2px;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
}
.sp-group > .hp-hint { margin: 0; }

/* ── Bookmarks ── */
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-list li {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    border-top: 1px solid var(--c-line);
}
.sp-list li:first-child { border-top: none; padding-top: 0; }
.sp-list li:last-child { padding-bottom: 0; }
.sp-list-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-accent-tint);
    color: var(--c-accent-ink);
}
.sp-list-icon svg { width: 18px; height: 18px; }
.sp-list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-list-title { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }

/* ── Small screens ── */
@media (max-width: 768px) {
    .sp { padding: var(--s-6) var(--s-4) var(--s-12); }
    .sp-header h1 { font-size: var(--fs-h2); }
    .sp-card { padding: var(--s-4); }
    .sp-grid { grid-template-columns: minmax(0, 1fr); }
    .sp-pair { grid-template-columns: minmax(0, 1fr); }
    .sp-actions .hp-btn { flex: 1 1 auto; }
    .sp-list li { flex-wrap: wrap; }
    .sp-list li .hp-btn { margin-left: 48px; padding-left: 0; }
}