/* =========================================================================
   Pelagos · account pages
   profile, orders, subscriptions, credit history, applications, contact details,
   settings (edit profile, security, linked accounts).
   Loaded on every page, so every rule is scoped to an .ss-acc* class.
   ========================================================================= */

/* ---- section rhythm ------------------------------------------------------ */
.ss-acc { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem) clamp(3rem, 2rem + 3vw, 5rem); }
.ss-acc-main > * + * { margin-top: 1.25rem; }
.ss-acc-main > .alert { margin-bottom: 0; }
.ss-acc-main > .ss-panel + .ss-panel { margin-top: 1.25rem; }

/* ---- panel head extras ---------------------------------------------------- */
.ss-acc-desc { margin: .5rem 0 0; color: var(--band-muted); font-size: .93rem; max-width: 40rem; }
.ss-acc-more { font-size: .9rem; padding-bottom: .1rem; }

/* ---- lists: only real links get the hover underline ---------------------- */
.ss-acc .ss-list-item:hover .ss-list-title:not(a) { text-decoration: none; }

/* ---- tables --------------------------------------------------------------- */
.ss-acc-table > :not(caption) > * > * { padding-block: .95rem; }
.ss-acc-table > :not(caption) > * > *:first-child { padding-left: 1.35rem; }
.ss-acc-table > :not(caption) > * > *:last-child { padding-right: 1.35rem; }
.ss-acc-no { font-weight: 700; color: var(--band-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-acc-table a.ss-acc-no { color: var(--band-muted); }
.ss-acc-sum { font-family: var(--ss-display); font-weight: 800; font-size: 1.11rem; line-height: 1; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-acc-when { color: var(--band-muted); white-space: nowrap; font-size: .9rem; }
.ss-acc-strong { font-weight: 700; }
.ss-acc-wide { min-width: 15rem; }

/* ---- compact empty row inside a panel ------------------------------------ */
.ss-acc-none { display: flex; align-items: center; gap: .9rem; padding: 1.25rem 1.35rem; color: var(--band-muted); font-weight: 600; flex-wrap: wrap; }
.ss-acc-none > :is(.ph-bold, .ph-fill) { width: 40px; height: 40px; display: grid; place-items: center; background: var(--band-sunk); border-radius: var(--ss-r-sm); font-size: 1.25rem; color: var(--band-fg); flex: none; }
.ss-acc-none .btn { margin-left: auto; }

/* ---- square icon badge used in lists ------------------------------------- */
.ss-acc-ico { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--ss-r-sm); background: var(--band-sunk); color: var(--band-fg); font-size: 1.25rem; flex: none; position: relative; }
.ss-acc-ico.is-in { background: color-mix(in oklab, var(--ss-live) 20%, transparent); color: color-mix(in oklab, var(--ss-live) 60%, var(--band-fg)); }
.ss-acc-ico.is-out { background: color-mix(in oklab, var(--ss-danger) 14%, transparent); color: var(--ss-danger); }
.ss-acc-ico[class*="ss-tone-"] { background: var(--tone); color: var(--ss-bone); }
.ss-acc-delta { font-family: var(--ss-display); font-weight: 800; font-size: 1.11rem; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; margin-left: auto; padding-left: .5rem; }

/* ---- profile: player card ------------------------------------------------- */
.ss-acc-id { overflow: hidden; }
.ss-acc-id-top { position: relative; isolation: isolate; display: flex; align-items: center; gap: 1.1rem 1.4rem; flex-wrap: wrap; padding: 1.6rem 1.5rem; background: var(--tone, var(--ss-tone-navy)); color: var(--ss-bone); }
.ss-acc-id-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 140% at 88% 30%, rgba(255, 255, 255, .15), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 16px); }
.ss-acc-id-top .ss-avatar { width: 88px; height: 88px; border-radius: var(--ss-r-sm); box-shadow: 0 16px 24px -14px rgba(0, 0, 0, .7); }
.ss-acc-id-who { flex: 1 1 14rem; min-width: 0; }
.ss-acc-id-name { font-family: var(--ss-display); font-weight: 800; font-size: clamp(1.702rem, 1.258rem + 1.184vw, 2.516rem); line-height: var(--ss-display-lh); margin: 0 0 .5rem; overflow-wrap: anywhere; }
.ss-acc-id-mail { display: flex; align-items: center; gap: .45rem; margin: 0; font-weight: 500; color: color-mix(in oklab, var(--ss-bone) 80%, transparent); overflow-wrap: anywhere; }
.ss-acc-id-top .btn { flex: none; }
.ss-acc-stats { display: grid; grid-template-columns: repeat(var(--acc-cols, 3), minmax(0, 1fr)); }
.ss-acc-stats .ss-stat { padding: 1.15rem 1.35rem 1.2rem; border-left: 1px solid var(--band-card-line); }
.ss-acc-stats .ss-stat:first-child { border-left: 0; }
.ss-acc-stats .ss-stat-value { font-size: 1.628rem; overflow-wrap: anywhere; }
.ss-acc-stats .ss-stat-label :is(.ph-bold, .ph-fill) { font-size: 1.05rem; }
.ss-acc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--band-card-line); }
.ss-acc-fact { display: flex; align-items: center; gap: .85rem; padding: .95rem 1.35rem; border-top: 1px solid var(--band-card-line); min-width: 0; }
.ss-acc-fact:nth-child(-n+2) { border-top: 0; }
.ss-acc-fact:nth-child(odd) { border-right: 1px solid var(--band-card-line); }
.ss-acc-fact:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.ss-acc-fact .ss-acc-ico { width: 38px; height: 38px; font-size: 1.15rem; color: var(--band-muted); }
.ss-acc-fact dt { margin: 0; font-size: .82rem; font-weight: 600; color: var(--band-muted); }
.ss-acc-fact dd { margin: .05rem 0 0; font-weight: 700; overflow-wrap: anywhere; }

/* ---- profile: leaderboard tabs ------------------------------------------- */
.ss-acc-tabs { padding: 0 1.35rem; border-bottom: 1px solid var(--band-card-line); }
.ss-acc-tabs .nav-tabs { border-bottom: 0; }
.ss-acc-tabs .nav-link { padding-block: .9rem; }

/* ---- subscriptions --------------------------------------------------------- */
.ss-acc-sub { padding-block: 1rem; }
.ss-acc-sub .ss-list-meta > span { white-space: nowrap; }
.ss-acc-left { margin-top: .65rem; max-width: 26rem; }
.ss-acc-left .progress { --bs-progress-height: 6px; }
.ss-acc-left .progress-bar { background-image: none; }
.ss-list-end .ss-acc-sum { color: var(--band-fg); }
.ss-acc-past .ss-list-title { color: var(--band-muted); }

/* ---- applications ---------------------------------------------------------- */
.ss-acc-ico.is-wait { background: color-mix(in oklab, var(--ss-warning) 24%, transparent); color: color-mix(in oklab, var(--ss-warning) 62%, var(--band-fg)); }
.ss-acc-app { align-items: flex-start; padding-block: 1rem; }
.ss-acc-app .ss-list-end { padding-top: .1rem; }
.ss-acc-reason { margin: .65rem 0 0; padding: .1rem 0 .1rem .8rem; border-left: 3px solid var(--band-line); font-size: .92rem; color: var(--band-muted); max-width: 46rem; }
.ss-acc-reason b { color: var(--band-fg); font-weight: 650; }

/* ---- linked accounts ------------------------------------------------------- */
.ss-acc-provider { width: 52px; height: 52px; display: grid; place-items: center; background: var(--band-sunk); border-radius: var(--ss-r-sm); flex: none; }
.ss-acc-provider img { width: 30px; height: 30px; object-fit: contain; }
.ss-acc-state { display: inline-flex; align-items: center; gap: .45rem; }
.ss-acc-state .ss-live-dot { width: 8px; height: 8px; }
.ss-acc-link .ss-list-title { font-size: 1.05rem; }
.ss-acc-link.ss-list-item { padding-block: 1.05rem; }

/* ---- settings forms -------------------------------------------------------- */
.ss-acc-form { max-width: 760px; }
.ss-acc-form .form-label :is(.ph-bold, .ph-fill) { color: var(--band-muted); font-size: 1rem; }
.ss-acc-foot { display: flex; align-items: center; justify-content: flex-end; gap: .6rem 1rem; flex-wrap: wrap; }
.ss-acc-split { height: 1px; background: var(--band-card-line); margin: 1.6rem 0 1.4rem; border: 0; opacity: 1; }
.ss-acc-subtitle { font-size: 1.02rem; font-weight: 700; margin: 0 0 1rem; letter-spacing: 0; }
.ss-acc-pass .form-control { border-right: 0; }
.ss-acc-pass .input-group-text { background: var(--band-input); border-left: 0; padding-inline: .8rem; }
.ss-acc-pass .toggle-password { color: var(--band-muted); font-size: 1.15rem; line-height: 1; display: inline-flex; }
.ss-acc-pass .toggle-password:hover { color: var(--band-fg); }
.ss-acc-pass:focus-within .form-control, .ss-acc-pass:focus-within .input-group-text { border-color: var(--ss-accent); }
.ss-acc-pass:focus-within { box-shadow: 0 0 0 3px var(--bs-focus-ring-color); border-radius: var(--ss-r-sm); }
.ss-acc-pass .form-control:focus { box-shadow: none; }

/* avatar uploader */
.ss-acc-avatar { display: flex; align-items: center; gap: 1.25rem 1.75rem; flex-wrap: wrap; }
.ss-acc-avatar-frame { padding: 8px; background: var(--band-sunk); border-radius: var(--ss-r); flex: none; }
.ss-acc-avatar-frame .ss-avatar { width: 112px; height: 112px; border-radius: var(--ss-r-sm); display: block; }
.ss-acc-avatar-tools { display: flex; flex-wrap: wrap; gap: .6rem; }
.ss-acc-avatar-tools form { margin: 0; }
.ss-acc-avatar-hint { margin: .85rem 0 0; color: var(--band-muted); font-size: .86rem; line-height: 1.55; }

/* two-factor row */
.ss-acc-tfa { display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap; }
.ss-acc-tfa-text { flex: 1 1 18rem; min-width: 0; }
.ss-acc-tfa-text .ss-panel-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ss-acc-tfa-text .ss-chip { font-family: var(--ss-font); text-transform: none; letter-spacing: .01em; }
.ss-acc-tfa form { margin: 0; }
.ss-acc-shield { width: 56px; height: 56px; display: grid; place-items: center; font-size: 1.7rem; flex: none; background: var(--band-sunk); color: var(--band-fg); border-radius: 14px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16), inset 0 2px 0 rgba(255, 255, 255, .22); }
.ss-acc-shield.is-on { background: var(--ss-accent); color: var(--ss-on-accent); }

/* ---- account card (components/sidebar-profile-card) ----------------------- */
/* the head is ink in both modes: the default role chip needs its own light-on-ink ground. :where() keeps this at
   single-class weight so the admin's injected .role__<slug> colours (printed after this file) still win */
:where(.ss-account-head) [class*="role__"] { background: rgba(255, 255, 255, .12); color: #F4F0E8; }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.ss-acc .ss-aside { position: static; }
	/* the stacked account nav (up to ten links) would push the page ~450px down on phones: one scrollable chip row */
	.ss-account-nav { position: relative; display: flex; gap: .4rem; padding: .7rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.ss-account-nav::-webkit-scrollbar { display: none; }
	.ss-account-nav .ss-account-group { display: none; }
	.ss-account-nav form { display: flex; flex: none; margin: 0; }
	.ss-account-nav .sidebar-link { flex: none; width: auto; white-space: nowrap; gap: .45rem; padding: .5rem .8rem; font-size: .9rem; background: var(--band-sunk); }
	.ss-account-nav .sidebar-link i { width: auto; font-size: 1.05rem; }
	.ss-account-nav .sidebar-link:hover { background: color-mix(in oklab, var(--band-sunk), var(--band-fg) 8%); }
	.ss-account-nav .sidebar-link.active { background: var(--ss-accent); color: var(--ss-on-accent); }
	.ss-account-nav .sidebar-link.active i { color: inherit; }
	.ss-account-nav .sidebar-link.active::before { display: none; }
}
@media (max-width: 767.98px) {
	.ss-acc-facts { grid-template-columns: 1fr; }
	.ss-acc-fact:nth-child(odd) { border-right: 0; }
	.ss-acc-fact:nth-child(2) { border-top: 1px solid var(--band-card-line); }
	.ss-acc-app { flex-wrap: wrap; row-gap: .75rem; }
	.ss-acc-app .ss-list-main { flex: 1 1 calc(100% - 42px - .9rem); }
	.ss-acc-app .ss-list-end { width: 100%; padding: 0 0 0 calc(42px + .9rem); justify-content: space-between; }
}
@media (max-width: 575.98px) {
	.ss-acc-stats { grid-template-columns: 1fr 1fr; }
	.ss-acc-stats .ss-stat { border-left: 0; border-top: 1px solid var(--band-card-line); }
	.ss-acc-stats .ss-stat:nth-child(-n+2) { border-top: 0; }
	.ss-acc-stats .ss-stat:nth-child(even) { border-left: 1px solid var(--band-card-line); }
	.ss-acc-stats .ss-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.ss-acc-stats .ss-stat-value { font-size: 1.332rem; }
	.ss-acc-id-top { padding: 1.25rem 1.1rem; }
	.ss-acc-id-top .ss-avatar { width: 64px; height: 64px; }
	.ss-acc-id-top .btn { width: 100%; }
	.ss-acc-table > :not(caption) > * > *:first-child { padding-left: 1.1rem; }
	.ss-acc-table > :not(caption) > * > *:last-child { padding-right: 1.1rem; }
	.ss-acc-tabs { padding: 0 .6rem; }
	/* phones: the title column gives up its floor so ID, title and status fit without a sideways scroll */
	.ss-acc-wide { min-width: 0; }
	.ss-acc-table > :not(caption) > * > *:has(+ .d-none:last-child) { padding-right: 1.1rem; }
}
@media (max-width: 479.98px) {
	/* credit feed: the amount drops under the label instead of squeezing it */
	.ss-acc-feed .ss-list-item { flex-wrap: wrap; row-gap: .3rem; }
	.ss-acc-feed .ss-list-main { flex: 1 1 calc(100% - 42px - .9rem); }
	.ss-acc-feed .ss-acc-delta { margin-left: calc(42px + .9rem); padding-left: 0; }
}
@media (max-width: 419.98px) {
	.ss-acc-stats .ss-stat { padding: 1rem 1.1rem 1.05rem; }
	.ss-acc-stats .ss-stat-value { font-size: 1.11rem; }
	.ss-acc-link.ss-list-item { flex-wrap: wrap; row-gap: .7rem; }
	.ss-acc-link .ss-list-main { flex: 1 1 calc(100% - 52px - .9rem); }
	.ss-acc-link .ss-list-end { width: 100%; padding-left: calc(52px + .9rem); }
}