/* Copyright © 2026 MELDIX. TrioSoft. All rights reserved. */
/* TrioSoft ID 17.3 — account refresh. Loaded last on /account: readability floor,
   balanced grids, paginated long lists, snappier tab transitions and focus states. */

/* ---------- One palette: the legacy neutral-black "--id-*" layer follows the site tokens ----------
   Several tabs (Profile, Updates, Premium, Support) were painted from an older near-black
   palette (#0a0a0b / #101113) and a blue focus colour, so they looked like another product.
   Mapping those tokens onto the OS tokens makes every panel follow the site in both themes. */
body.account-page,
html[data-theme="light"] body.account-page,
html[data-theme="dark"] body.account-page {
  --id-surface: var(--os-window);
  --id-panel: var(--os-pane);
  --id-panel-raised: var(--os-pane-2);
  --id-field: var(--os-field);
  --id-line: var(--os-line);
  --id-line-strong: var(--os-line-2);
  --id-label: var(--os-ink);
  --id-secondary: var(--os-ink-2);
  --id-muted: var(--os-ink-3);
  --id-focus: var(--os-accent);
  --id-accent-soft: rgba(var(--os-accent-rgb), .12);
}

/* Hard-coded black studio (Profile, 16.8) and Premium (16.5) surfaces join the same scale:
   tab background → pane panels → raised pane-2 blocks → field inputs. */
html[data-theme="dark"] body.account-page #tab-profile.account-card { background: transparent !important; border-color: transparent !important; }
html[data-theme="dark"] body.account-page #tab-profile :is(.profile-avatar-editor-card, .profile-form-section) { background: var(--os-pane) !important; border-color: var(--os-line); }
html[data-theme="dark"] body.account-page #tab-profile :is(.profile-banner-editor, .profile-save-bar) { background: var(--os-pane-2); border-color: var(--os-line); }
html[data-theme="dark"] body.account-page #tab-profile .profile-banner-preview { background-color: var(--os-field); }
html[data-theme="dark"] body.account-page .premium-v16521 :is(.premium-overview-shell .premium-state, .premium-overview-rail, .premium-content-section) { background: var(--os-pane); border-color: var(--os-line); }
html[data-theme="dark"] body.account-page .premium-features-dialog { background: var(--os-window); }
body.account-page .premium-v16521 :is(.premium-overview-shell .premium-state, .premium-overview-rail, .premium-content-section) { border-radius: var(--os-r-lg); }

/* ---------- Custom selects: one chevron on the right, turning when open ----------
   The trigger drew a violet ⇕ tile (::after) next to an icon that sat mid-field. */
body.account-page .ts-select-trigger::after { content: none !important; display: none !important; }
body.account-page .ts-select-trigger { justify-content: space-between; gap: 10px; }
body.account-page .ts-select-trigger .ts-select-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
body.account-page .ts-select-trigger > .ui-icon { flex: none; color: var(--os-ink-3); transition: transform .2s var(--os-ease), color .2s var(--os-ease); }
body.account-page .ts-select-trigger[aria-expanded="true"] > .ui-icon { color: var(--os-accent); transform: rotate(180deg); }

/* ---------- Profile: avatar and banner editors ---------- */
/* "Upload photo" no longer breaks onto two lines: the longer label gets the wider column. */
body.account-page #tab-profile :is(.profile-avatar-actions, .profile-banner-actions) { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 8px; }
body.account-page #tab-profile :is(.profile-avatar-actions, .profile-banner-actions) > * { min-width: 0; white-space: nowrap; justify-content: center; padding-inline: 10px; }
/* The banner editor becomes a proper card inside the avatar column. */
body.account-page #tab-profile .profile-banner-editor { display: grid; gap: 10px; margin-top: 6px; padding: 12px; border: 1px solid var(--os-line); border-radius: 16px; }
body.account-page #tab-profile .profile-banner-preview { border-radius: 12px; overflow: hidden; }
body.account-page #tab-profile .profile-banner-editor .profile-avatar-help { margin: 0; text-align: center; }
body.account-page #tab-profile :is(.profile-media-status, .profile-avatar-upload-state) { margin: 0; color: var(--os-ink-3); font-size: 12px; font-weight: 600; line-height: 1.4; text-align: center; }
body.account-page #tab-profile .profile-media-status:empty { display: none; }
body.account-page #tab-profile :is(.profile-media-status, .profile-avatar-upload-state)[data-tone="success"] { color: var(--os-success); }
body.account-page #tab-profile :is(.profile-media-status, .profile-avatar-upload-state)[data-tone="error"] { color: var(--os-danger); }
body.account-page #tab-profile :is(.profile-media-status, .profile-avatar-upload-state)[data-tone="pending"] { color: var(--os-warning); }

/* Tablets: the avatar column was 440px for a 160px avatar while the buttons got 175px. */
@media (min-width: 601px) and (max-width: 900px) {
  body.account-page #tab-profile .profile-avatar-editor-card { grid-template-columns: 180px minmax(0, 1fr) !important; column-gap: 24px; }
  body.account-page #tab-profile .profile-avatar-editor-card > :is(.profile-avatar-help, .profile-avatar-upload-state) { grid-column: 1 / -1; }
}

/* ---------- Updates: save bar and the "all up to date" state ---------- */
/* The settings form is always "cards, then the save row". A generic .preference-strip rule
   turned it into two columns on tablets, squeezing both cards into ~230px beside an empty column. */
body.account-page #tab-updates .updates-preference-strip { grid-template-columns: minmax(0, 1fr) !important; }
body.account-page #tab-updates .updates-settings-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important; }
/* "Save settings" is the primary action and now looks like every other primary button. */
html body.account-page #tab-updates .updates-action-buttons .updates-save-button {
  color: #fff; border: 0; border-radius: 10px;
  background: linear-gradient(color-mix(in srgb, var(--os-accent) 82%, white), var(--os-accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px -8px rgba(var(--os-accent-rgb), .8);
}
html body.account-page #tab-updates .updates-action-buttons .updates-save-button:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); }
html body.account-page #tab-updates .updates-action-buttons .updates-reset-button { color: var(--os-ink-2); }
html body.account-page #tab-updates .updates-action-buttons .updates-reset-button:hover { color: var(--os-ink); }
/* Icon, text and action on one aligned row instead of an icon stranded on the far left. */
body.account-page #tab-updates .updates-empty-state { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: start; justify-content: stretch; gap: 16px; padding: 20px 22px; text-align: left; }
body.account-page #tab-updates .updates-empty-state > div { min-width: 0; max-width: none; width: auto; justify-self: stretch; margin: 0; text-align: left; }
/* Older decorative pseudo-elements were taking a grid cell and pushing the text right. */
body.account-page #tab-updates .updates-empty-state::before, body.account-page #tab-updates .updates-empty-state::after { position: absolute; }
body.account-page #tab-updates .updates-empty-state { position: relative; }
body.account-page #tab-updates .updates-empty-state > span { grid-column: 1; grid-row: 1; }
body.account-page #tab-updates .updates-empty-state > div { grid-column: 2; grid-row: 1; }
body.account-page #tab-updates .updates-empty-state > button { grid-column: 3; grid-row: 1; }
body.account-page #tab-updates .updates-empty-state h3 { margin: 0 0 3px; }
body.account-page #tab-updates .updates-empty-state p { margin: 0; }
@media (max-width: 600px) {
  body.account-page #tab-updates .updates-empty-state { grid-template-columns: auto minmax(0, 1fr); }
  body.account-page #tab-updates .updates-empty-state > button { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Support: "create ticket" header ---------- */
body.account-page #tab-support .new-ticket-box > summary > span { display: inline-flex; align-items: center; gap: 10px; }
body.account-page #tab-support .new-ticket-box > summary > span .ui-icon { width: 18px; height: 18px; color: var(--os-accent); }
/* The toggle tile stays square; only its glyph changes (+ closed, − open) instead of turning into a diamond. */
body.account-page #tab-support .new-ticket-box > summary::after { transform: none !important; border-radius: 10px; font-size: 18px; line-height: 1; }
body.account-page #tab-support .new-ticket-box[open] > summary::after { content: '−'; }

/* ---------- Labs: per-app release channels ---------- */
/* Unavailable channels stay legible (they were 40% opacity, nearly invisible). */
body.account-page #tab-labs .beta-channel-group button:disabled { opacity: .7; }
body.account-page #tab-labs .beta-channel-group button:disabled strong { color: var(--os-ink-2); }
body.account-page #tab-labs .beta-channel-group button:not(.active):not(:disabled) { box-shadow: inset 0 0 0 1px var(--os-line); }

/* ---------- Labs: roadmap ---------- */
/* Cards share the full row instead of leaving an empty third column. */
body.account-page #tab-labs .roadmap-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Descriptions keep their line breaks and bullet lists, trimmed to a readable preview. */
body.account-page #tab-labs .roadmap-card p { white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
/* A progress bar at 0% is just an empty grey line: hidden until work starts. */
body.account-page #tab-labs .roadmap-progress:has(> i[style*="width:0%"]) { display: none; }
body.account-page #tab-labs .roadmap-card-actions { flex-wrap: nowrap; }
body.account-page #tab-labs .roadmap-card-actions > * { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }

/* ---------- Light theme: muted text readable on every surface ----------
   The shared muted ink (#978b7f) is ~3:1 on the cream panels; small labels need 4.5:1.
   --ink-3 is resolved on <html>, so both names are overridden here. */
html:not([data-theme="dark"]) body.account-page { --os-ink-3: #72665a; --ink-3: #72665a; }
html:not([data-theme="dark"]) body.account-page .passkey-backup { color: #087a5e; }
html:not([data-theme="dark"]) body.account-page #tab-profile :is(.profile-media-status, .profile-avatar-upload-state)[data-tone="success"] { color: #087a5e; }
/* Bright status colours tuned for dark glass are too faint on cream; darker shades, same hue. */
html:not([data-theme="dark"]) body.account-page .home-app-card > em.current { color: #1b7a3a; }
html:not([data-theme="dark"]) body.account-page .verified-mini { color: #146c35; }
html:not([data-theme="dark"]) body.account-page #tab-updates .updates-overview-card span > em { color: #565b68; }
html:not([data-theme="dark"]) body.account-page :is(.pv-deco[class*="rarity-"] > em, .pv-status.on) { filter: brightness(.55) saturate(1.3); }

/* Dark theme: the muted ink (#82786f) sits at ~4:1 on the dark panels; one step lighter, same warm hue. */
html[data-theme="dark"] body.account-page { --os-ink-3: #9a8f85; --ink-3: #9a8f85; }
/* White on the light dark-theme accent (#8b72ff) is 3.5:1; the brand violet keeps the look at 5.1:1. */
html[data-theme="dark"] body.account-page .profile-nav button.active, html[data-theme="dark"] body.account-page .profile-nav .nav-count:not(.premium-nav-badge), html[data-theme="dark"] body.account-page #tab-labs .deco-filters button.active { background: #6c4cff !important; }
body.account-page .profile-nav :is(.nav-count, .premium-nav-badge) { font-size: 11px; }

/* ---------- Tab transitions: quick and calm instead of a 0.9s rise ---------- */
body.account-page .account-tab:not(.hidden) { animation: accountTabIn .32s var(--os-out) both; }
@keyframes accountTabIn { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }

/* ---------- Readability floor: nothing in the account below 11px ----------
   Scoped through the tab ids so these win over the per-tab rules in account.css. */
body.account-page :is(#tab-home, #tab-profile, #tab-security, #tab-devices, #tab-connections, #tab-notifications, #tab-library, #tab-reviews, #tab-updates, #tab-premium, #tab-support, #tab-privacy, #tab-labs, #tab-danger) :is(
  .home-status-copy > small, .home-app-copy > small, .home-all-good-tags > i, .home-app-card > em, .home-identity-row small, .version-compare span, .labs-ring small,
  .profile-editor-kicker, .profile-avatar-status, .field-hint, .passkey-backup, .verified-mini,
  .style-effect-pro, .pro-tag, .sp-about > small, .device-meta-grid dt, .updates-overview-card small,
  .updates-setting-eyebrow, .updates-control-label, .premium-section-kicker, .premium-state-kicker
) { font-size: 11px; }
body.account-page :is(#tab-home, #tab-profile, #tab-security, #tab-devices, #tab-connections, #tab-notifications, #tab-library, #tab-reviews, #tab-updates, #tab-premium, #tab-support, #tab-privacy, #tab-labs, #tab-danger) :is(
  .home-status-copy > em, .passkey-item-copy > small, .profile-avatar-help, .app-access-item em,
  .home-panel-head p, .home-quick-actions span, .profile-save-bar span, .updates-warning-fact b, .updates-warning-fact small, .premium-overview-caption small
) { font-size: 12px; line-height: 1.45; }
/* Uppercase kickers keep their small-caps look but get room to breathe. */
body.account-page :is(#tab-home, #tab-profile, #tab-security, #tab-devices, #tab-connections, #tab-notifications, #tab-library, #tab-reviews, #tab-updates, #tab-premium, #tab-support, #tab-privacy, #tab-labs, #tab-danger) :is(.profile-editor-kicker, .updates-setting-eyebrow, .premium-section-kicker, .premium-state-kicker, .device-meta-grid dt) { letter-spacing: .08em; }
body.account-page #tab-reviews small { font-size: 11px; }

/* ---------- Balanced grids: no card left alone on its own row ---------- */
body.account-page #tab-home .home-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* Four in a row only when each card keeps its full title. */
@media (min-width: 1500px) {
  body.account-page #tab-home .home-status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  body.account-page #tab-home .home-status-grid { grid-template-columns: 1fr !important; }
}
/* An odd last check stretches across both columns instead of hanging alone. */
body.account-page #tab-security .security-checks > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Status subtitles wrap to two lines instead of being cut off with an ellipsis. */
body.account-page #tab-home .home-status-copy > em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; text-overflow: clip; }

/* ---------- Long lists: "show more" sits under the list, full width ---------- */
body.account-page .list-more-button {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 340px);
  justify-content: center;
  margin-top: 4px;
}
body.account-page .list-more-button .ui-icon { transition: transform .2s var(--os-ease); }
body.account-page .list-more-button:hover .ui-icon { transform: translateY(2px); }

/* Security history reads as a compact timeline rather than a stack of heavy cards. */
body.account-page #tab-security .timeline-list { gap: 8px; }
body.account-page #tab-security .timeline-item { padding: 11px 14px; }
body.account-page #tab-security .timeline-item p { margin: 2px 0 4px; }

/* ---------- Devices: two columns on wide screens ---------- */
@media (min-width: 1180px) {
  body.account-page #tab-devices .device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.account-page #tab-devices .device-card-item.current { box-shadow: 0 0 0 1px rgba(var(--os-accent-rgb), .55), 0 14px 36px -22px rgba(var(--os-accent-rgb), .8); }

/* Phones: device cards were ~540px tall each. Details become label/value rows and the
   actions share two columns, with the longest label ("rename") across the full width. */
@media (max-width: 600px) {
  body.account-page #tab-devices .device-meta-grid { gap: 0; padding: 4px 12px; border-radius: var(--os-r-md); background: var(--os-hover); }
  body.account-page #tab-devices .device-meta-grid > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 0; padding: 8px 0; border: 0; border-bottom: 1px solid var(--os-line); background: none; }
  body.account-page #tab-devices .device-meta-grid > div:last-child { border-bottom: 0; }
  body.account-page #tab-devices .device-meta-grid dd { margin: 0; text-align: right; }
  body.account-page #tab-devices .device-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.account-page #tab-devices .device-actions > :first-child { grid-column: 1 / -1; }
  body.account-page #tab-devices .device-actions .account-button { min-width: 0; padding-inline: 10px; }
  body.account-page #tab-devices .device-actions .account-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Phones: the identity card was ~600px of chrome before any section content. It becomes
   a compact row (avatar beside name, e-mail and chips) and "sign out" an icon in its corner.
   Applies wherever the sidebar stacks above the content (≤900px), tablets included. */
@media (max-width: 900px) {
  body.account-page .profile-sidebar { position: relative; }
  body.account-page .profile-sidebar .id-card { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 14px; row-gap: 3px; padding: 14px 58px 14px 14px; text-align: left; }
  /* The banner turns into a soft wash behind the whole compact card. */
  body.account-page .profile-sidebar .id-card > .id-card-banner { position: absolute; inset: 0; height: auto; margin: 0; opacity: .32; z-index: 0; }
  body.account-page .profile-sidebar .id-card > :not(.id-card-banner) { position: relative; z-index: 1; }
  body.account-page .profile-sidebar .id-card > .profile-avatar { grid-column: 1; grid-row: 1 / span 3; zoom: .64; margin: 10px 0 !important; } /* room for the 1.2× decoration inside the clipped card; beats os-labs.css */
  body.account-page .profile-sidebar .id-card > #profileName { grid-column: 2; grid-row: 1; }
  body.account-page .profile-sidebar .id-card > #profileEmail { grid-column: 2; grid-row: 2; }
  body.account-page .profile-sidebar .id-card > .id-card-chips { grid-column: 2; grid-row: 3; }
  body.account-page .profile-sidebar .id-card > :is(#profileName, #profileEmail, .id-card-chips) { margin: 0; max-width: 100%; }
  body.account-page .profile-sidebar #profileName { font-size: 17px; overflow-wrap: anywhere; }
  body.account-page .profile-sidebar #profileEmail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.account-page .profile-sidebar .id-card-chips { justify-content: flex-start; flex-wrap: wrap; }
  body.account-page .profile-sidebar #logoutButton { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; min-height: 0; padding: 0; justify-content: center; font-size: 0; z-index: 2; }
  body.account-page .profile-sidebar #logoutButton .ui-icon { width: 18px; height: 18px; }
  /* Tighter rhythm: card, protection meter and section strip sit 10px apart. */
  body.account-page .profile-sidebar { gap: 10px; }
  body.account-page .profile-sidebar .id-card { margin-bottom: 0; }
  body.account-page .profile-sidebar .sidebar-security-mini { justify-self: stretch; width: auto; margin: 0; }
  body.account-page .profile-sidebar .profile-nav { margin-top: 0; margin-bottom: 0; }
}

/* ---------- Focus: visible keyboard focus everywhere in the account ---------- */
body.account-page :is(.account-dashboard, .profile-sidebar) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgba(var(--os-accent-rgb), .9);
  outline-offset: 2px;
  border-radius: var(--os-r-md);
}

/* ---------- Sidebar navigation: clearer active state and hover ---------- */
body.account-page .profile-nav [data-account-tab] { transition: background-color .18s var(--os-ease), color .18s var(--os-ease), transform .18s var(--os-ease); }
body.account-page .profile-nav [data-account-tab]:not(.active):hover { transform: translateX(2px); }
@media (max-width: 900px) {
  body.account-page .profile-nav [data-account-tab]:not(.active):hover { transform: none; }
  /* The horizontal section strip snaps to chips and hides its scrollbar. */
  body.account-page .profile-nav { scroll-snap-type: x proximity; scrollbar-width: none; }
  body.account-page .profile-nav::-webkit-scrollbar { display: none; }
  body.account-page .profile-nav [data-account-tab] { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  body.account-page .account-tab:not(.hidden) { animation: none; }
  body.account-page .profile-nav [data-account-tab], body.account-page .list-more-button .ui-icon { transition: none; }
}

/* ---------- Decoration shop (Labs) ---------- */
body.account-page .deco-tile-price { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; color: #5a3a00; background: linear-gradient(135deg, #ffe79a, #ffc93c); font-size: 11px; font-weight: 800; line-height: 18px; }
body.account-page .deco-tile-drop { position: absolute; top: 8px; left: 8px; padding: 2px 7px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #ff5a36, #6c4cff); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 18px; }
body.account-page .pv-shop { display: flex; align-items: flex-start; gap: 8px; color: var(--os-ink-2); font-size: 12.5px; line-height: 1.45; }
body.account-page .pv-shop b { color: var(--os-ink); }
body.account-page .pv-shop .ui-icon, body.account-page .pv-shop-wait .ui-icon { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--os-accent); }
body.account-page .pv-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; color: var(--os-ink-2); font-size: 12px; line-height: 1.45; cursor: pointer; }
body.account-page .pv-consent input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--os-accent); }
body.account-page .pv-consent a, body.account-page .pv-shop-wait a { color: var(--os-accent); }
body.account-page .pv-shop-wait { display: flex; gap: 8px; margin: 0; color: var(--os-ink-2); font-size: 12.5px; }
body.account-page #decoApplyButton.shop:not(:disabled) { background: linear-gradient(135deg, #ffb33c, #ff7a2f) !important; color: #2a1600 !important; box-shadow: 0 10px 24px -12px rgba(255, 122, 47, .8) !important; }

/* A section whose split-out styles (/account-tabs/<tab>.css) are still loading stays invisible. */
body.account-page .account-tab.tab-styles-pending { visibility: hidden; }