/* ===== PROFILE PAGE ===== */

.profile-page-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.profile-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Groups the desktop "Manage account" button with its own Privacy Policy link directly below it
   (per direct request) — a plain flex column instead of two separate top-level children of
   .profile-account-row, so the link sits pinned right under the button regardless of how tall the
   identity block next to it gets, and lines up with the button's own right edge. */
.profile-account-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Privacy Policy · Terms of Service, as one row — shared by the desktop card (under the button)
   and the mobile page-end duplicate below (see buildLegalLinksRow() in profile.js). */
.profile-legal-links {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}

.profile-legal-links a {
  color: var(--text-secondary);
  text-decoration: none;
}

.profile-legal-links a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.profile-legal-sep {
  color: var(--text-secondary);
  opacity: 0.6;
}

/* Now the ONLY Privacy Policy · Terms of Service row on the page, on both desktop and mobile —
   per direct request ("on desktop put the Privacy Policy · Terms of Service... below the account
   details widget"). Used to be a mobile-only duplicate of a second copy pinned under the top
   Account card's "Manage account" button (the mobile-only .profile-manage-account-mobile button
   right above this one in the DOM, profile.js, is hidden on desktop — so this row sits directly
   below Account Details there); that top copy is gone now (buildAccountSection, profile.js) —
   this is the only one left. */
.profile-legal-links-bottom {
  display: flex;
  justify-content: center;
  margin-top: -4px;
}

/* About page's own use of this same row (about.js) — centered, since .shared-page (the page shell
   it reuses) is a full-width flex column and this row would otherwise sit flush left. */
.about-legal-links {
  justify-content: center;
  /* Extra space below the description text, per direct request. */
  margin-top: 50px;
}

/* About page's own description text — sits directly on the page background now, not inside the
   hero/banner header (moved out per direct request), so it uses the normal theme text color
   instead of .bare-list-desc's near-white (tuned for that banner's own colored background). */
.about-copy {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
}

/* "SaveCraft is a VoteCraft.org product." — bolder and a little larger than the rest of the
   description below it, per direct request. */
.about-copy--lead {
  font-size: 18px;
  font-weight: 700;
}

/* Account stays its own natural-height card at the top, full width — everything below it
   (Connections/Interests/My Notes/Saved Lists/Shared Lists/VoteCraft.org Connection) shares the
   Dashboard's grid shape and .dash-card box model, but taller than the Dashboard's own grid —
   Connections in particular has grown to 4 platform rows, more than the Dashboard's "peek"
   widgets were ever sized for. Three rows now (was two) — Shared Lists + VoteCraft.org Connection
   added per direct request. */
.profile-widget-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
  height: 1232px; /* three 400px rows + the two 16px gaps between them */
}

/* Dashboard widgets are deliberately "peek" sized (a few tracks, a capped genre list, etc.) —
   Profile's equivalents can have more to show, so let each card scroll internally instead of
   overflowing the fixed cell or stretching the grid taller than the Dashboard's. */
.profile-widget-grid .dash-card {
  overflow-y: auto;
}

.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* "Connections" — centered, with a divider below it, per request. Scoped to this card
   specifically (.profile-card--connections, its own dash-card class) rather than the shared
   .profile-card-header/-title, which every other widget card on this page still uses as-is. */
.profile-card--connections .profile-card-header {
  justify-content: center;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.profile-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Sizes/line-height bumped up across this page (was 13px, no line-height — reading tight and
   small at any width, worse on mobile), per direct request. Base values here apply everywhere;
   misc.css's mobile media query pushes them further on top of these, same split as the rest of
   this codebase's responsive overrides. */
.profile-card-copy {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

/* --- VC Connector --- */
/* Rebuilds the standalone VC-coin promo widget's content (widgets/vc-coin-widget/vc-coin-
   banner.html — embedded elsewhere via iframe) as plain markup in this app's own visual language,
   per a live reference screenshot — no coin animation/particles, those add real motion/weight
   this card was never sized for. */
.vc-connect-title {
  font-size: 16px;
  font-weight: 700;
  color: #14CCB0;
  margin: 0;
  line-height: 1.3;
}
.vc-connect-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}
.vc-connect-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Same .btn-primary class/look as Connect Steam's own button (Connections widget) — per direct
   request. margin-top: auto (pin to the very bottom of the card) replaced with a fixed 20px gap
   instead, per a direct follow-up request — auto was pushing it flush against the card's bottom
   edge with a lot more than 20px of empty space above it, since the card's a fixed-height row
   with room to spare below the tags. Shared with .profile-widget-add-new-btn (Interests/Shared
   Lists' own bottom button, not wired to anything yet — visual placeholder only for now) — both
   want the exact same "centered CTA near the bottom of a dash-card" treatment. */
.vc-connect-learn-more-btn,
.profile-widget-add-new-btn {
  align-self: center;
  margin-top: 20px;
}
.vc-connect-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.vc-connect-tag--earn {
  background: rgba(20, 204, 176, 0.15);
  color: #14CCB0;
  border: 1px solid rgba(20, 204, 176, 0.3);
}
/* .vc-connect-tag--learn/--support removed — the Learn/Donate tags were dropped from the widget
   (only Volunteer stays), per direct request. */

/* "You're opening Votecraft Wallet" confirmation popup — white-themed regardless of SaveCraft's
   own dark/light setting, styled to match the VC-coin site's own branding (teal #14CCB0 accent,
   pill-shaped teal-gradient CTA) rather than SaveCraft's purple, per direct request. Overrides the
   shared .modal/.btn-cancel/.btn-primary's theme-variable colors with hardcoded light-mode-
   appropriate ones, scoped to just this modal via .vc-wallet-modal. */
.vc-wallet-modal {
  background: #fff;
}
/* flex-direction: column (the shared .modal h2 base is a row) so the two stacked lines actually
   center over each other, not just vertically align within a single row — per direct request
   ("your opening should be centered above VC Connector"). gap dropped from the base row's 8px to
   2px — reported live as "far too much padding between these two lines" (the markup's own <br>,
   now removed, was also stacking its own line-height on top of that gap). */
.vc-wallet-modal .modal-header h2 {
  color: #111827;
  flex-direction: column;
  gap: 2px;
}
/* "VC Connector" line, per direct request — bolder and a little larger than "You're opening"
   above it and the base h2's own 20px/600 weight. */
.vc-wallet-modal-title-emphasis {
  font-size: 24px;
  font-weight: 800;
}
/* "You're opening" line, per direct follow-up request — a little smaller than the base h2 size,
   and kept on one line (the h2's own flex-column above can otherwise let it wrap in this
   360px-wide modal). */
.vc-wallet-modal-title-lead {
  font-size: 16px;
  white-space: nowrap;
}
/* Optional icon (see confirmModal.js's openSwitchConfirm) — a circle carrying whatever identity
   the thing being opened already has (a Shared Saves card's own avatar color/content, or a
   sidebar list's purple icon badge), sitting centered between the title and the body copy. */
.switch-confirm-icon {
  width: 53px;
  height: 53px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* -14px top: the shared .modal-header already carries its own 24px margin-bottom (addEditModal.
     css) before this element even starts — negative offset pulls the icon up so the real gap
     under the title lands at 10px total (was 15px, -5px per direct follow-up request), rather
     than adding this on top of that 24px. 22px bottom (was 12px) — an explicit +10px per an
     earlier direct request. */
  margin: -14px auto 22px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  overflow: hidden;
}
.switch-confirm-icon img { width: 100%; height: 100%; object-fit: cover; }
.switch-confirm-icon svg { width: 24px; height: 24px; fill: #fff; }

.vc-wallet-modal .modal-body p {
  color: #4B5563;
  text-align: center;
}
/* Overrides the shared .modal-actions' default flex-end (right-aligned) — per direct request. */
.vc-wallet-modal .modal-actions {
  justify-content: center;
}
.vc-wallet-modal .btn-cancel {
  background: #fff;
  border-color: #E5E7EB;
  color: #4B5563;
}
.vc-wallet-modal .btn-cancel:hover {
  background: #F3F4F6;
}
/* border-radius deliberately not overridden here — .btn-primary's own 8px already matches
   .btn-cancel's shape exactly, per direct request ("both buttons the rounded rectangle size the
   cancel button is"); this used to set its own 24px pill shape instead. */
.vc-wallet-modal .vc-wallet-open-btn {
  background: linear-gradient(135deg, #14CCB0, #0d9488);
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 0 16px rgba(20, 204, 176, 0.25);
}
.vc-wallet-modal .vc-wallet-open-btn:hover {
  box-shadow: 0 0 24px rgba(20, 204, 176, 0.4);
}

/* The shared openSwitchConfirm() popup's own primary button (confirmModal.js — "Open"/"Explore")
   only, not VC Connector's separately-styled teal .vc-wallet-open-btn above (same .vc-wallet-modal
   wrapper, different button). Adds a purple ring on hover on top of the base .btn-primary:hover's
   existing white-bg/purple-text swap, per direct request. Border reserved (transparent) at rest,
   not just added on :hover — the base .btn-primary has border: none, so adding a real 2px border
   only on hover grew the button by 2px a side at that moment, visibly shifting it (reported live).
   Padding trimmed 2px a side to compensate, so the button's overall rest-state size is unchanged
   from before this reserved border existed. */
.vc-wallet-modal .btn-primary:not(.vc-wallet-open-btn) {
  padding: 7px 22px;
  border: 2px solid transparent;
}
.vc-wallet-modal .btn-primary:not(.vc-wallet-open-btn):hover {
  border-color: var(--primary);
}

/* --- Account --- */
/* Single row: avatar+name on the left, "Manage account" on the right — align-items: flex-start
   (not center) so the button's top edge lines up with the avatar circle's top edge, rather than
   sitting centered against the whole (taller, avatar-height) row. */
.profile-account-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* Mobile-only duplicate of the "Manage account" button above (id="profile-manage-account"),
   placed at the very end of the page — hidden by default (desktop keeps only the one in the
   account row); misc.css's own mobile media query shows this one and hides that one instead. */
.profile-manage-account-mobile {
  display: none;
}

.profile-account-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #2E7D32;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
}

.profile-account-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-account-email {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

/* Editable name row (Profile > Account) — the pencil button is opacity: 0 until the identity
   area is hovered, per direct request ("on hover of the profile area add a little pencil to the
   right of the account name"). @media (hover: none) covers touch devices (phones/tablets), which
   have no real hover state at all — the pencil just stays visible there instead of being
   permanently unreachable. */
.profile-account-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.profile-name-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.profile-account-identity:hover .profile-name-edit-btn {
  opacity: 1;
}
.profile-name-edit-btn:hover {
  background: var(--hover-bg);
  color: var(--primary);
}
@media (hover: none) {
  .profile-name-edit-btn {
    opacity: 1;
  }
}

.profile-name-edit-input {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: 6px;
  padding: 3px 8px;
  min-width: 160px;
  font-family: inherit;
}
.profile-name-edit-input:focus {
  outline: none;
}

/* Same treatment as .auth-verify-banner (addEditModal.css) — the identical reminder shown in the
   auth modal's signed-in view; .auth-resend-link (defined there) is shared by both buttons. */
.profile-verify-banner {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--hover-bg);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

/* --- Settings + Account Details row --- */
/* Per direct request ("add another half width widget to the left of the account details") —
   Settings and Account Details now share a row, each at half width. Plain flexbox with
   flex-basis: 0, the same pattern already used elsewhere in this codebase for "two items split a
   row evenly" (misc.css's mobile dual sort/genre dropdown row) — Account Details had been a
   standalone block sized via width: calc((100% - 16px) / 2) instead (a previous commit, after an
   earlier attempt at pairing it with VC Connector in a shared row never rendered correctly live
   across three separate fix attempts, cause still unexplained even after a live DevTools
   inspection) — that calc() width is gone now that it's back in a real row; flex-basis: 0 does
   the same 50/50 job. */
/* align-items: stretch (the flex default — no longer overridden to flex-start) per direct
   follow-up ("the setting widget should also be the same height as account details") — both
   cards now match the taller one's height (Account Details' own form fields), Settings' shorter
   content just leaving empty space below its one Storage row. */
.profile-bottom-row {
  display: flex;
  gap: 16px;
}
.profile-bottom-row > * {
  flex: 1 1 0;
  min-width: 0;
}

/* --- Settings --- */
/* More breathing room between the Last Synced/Account Data/Cache rows, per direct request ("add
   more padding between these sections") — overrides .dash-card's own tighter 12px gap
   (dashboard.css; profile.css loads after it in index.html, so this wins at equal specificity).
   */
.profile-card--settings {
  gap: 20px;
}
/* .profile-settings-section-title ("Storage" sub-heading) removed per direct request ("remove
   the header word storage") — .profile-card-title ("Settings") is the only heading this card
   has now. */
.profile-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.profile-settings-row-text {
  min-width: 0;
}
.profile-settings-row-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.profile-settings-row-value {
  font-weight: 400;
  color: var(--text-secondary);
}

/* --- Account Details --- */
.profile-card--account-details .form-group:first-of-type {
  margin-top: 14px;
}
/* Per direct request ("center the 'reset password' button within it's widget") — the only thing
   left in this row now that Change Email moved into the Email field's own row (above). */
.profile-account-details-row {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.profile-masked-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-masked-field-row input {
  flex: 1;
  min-width: 0;
}
/* Email's "Change Email" button, sharing this row (per direct request — "put the change email
   button on the same row as the email field"). flex-shrink: 0 so it keeps its own natural width
   instead of the input's flex: 1 squeezing it (same guarantee .profile-reveal-btn's fixed width
   already gets); white-space: nowrap since Account Details now runs at half the page's width
   (profile.css), narrow enough that "Change Email" could otherwise wrap to two lines. */
.profile-inline-field-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
/* .profile-update-btn-icon hidden by default (desktop keeps the plain "Update" text button) —
   misc.css's mobile media query swaps this in, per direct request ("in mobile make the update
   button just be a pencil icon in a purple square. this way the email field can be longer."). */
.profile-update-btn-icon {
  display: none;
}
/* Clear Cache + Download, per direct request ("make the clear cache and download buttons the
   same width") — min-width fits "Clear Cache" (the longer of the two labels), Download's own
   shorter text just centers within the same box via .btn-cancel/.btn-primary's existing
   text-align: center. */
.profile-settings-action-btn {
  min-width: 118px;
  text-align: center;
}
/* Press-and-hold reveal (wireAccountDetailsSection, profile.js flips the sibling input's own
   type between password/text on mousedown/touchstart vs mouseup/touchend/etc.) — this button
   itself is just the eye affordance, no click-toggle state of its own. */
.profile-reveal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  touch-action: none;
}
.profile-reveal-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* --- Connections --- */
.profile-connections-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-connection-divider {
  height: 1px;
  background: var(--border);
}

.profile-connection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.profile-connection-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Fixed size (matching the Last.fm row's button) for every row's action button — Connect,
   Disconnect, or the disabled "Coming soon" ones — so they all line up instead of each shrinking
   to fit its own label, which also kept shifting the description text's available width per row. */
.profile-connection-row .btn-primary,
.profile-connection-row .btn-cancel {
  width: 150px;
  height: 58px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.profile-connection-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.profile-connection-empty {
  font-size: 14px;
  color: var(--text-secondary);
}

.profile-track-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-track-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 8px;
  background: var(--hover-bg);
}

.profile-track-art {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--border);
}

.profile-track-art--placeholder {
  display: block;
}

.profile-track-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.profile-track-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-track-artist {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-track-nowplaying {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-bg);
  border-radius: 10px;
  padding: 3px 8px;
}

/* --- Interests --- */
/* column-gap bumped up from the row-gap's 8px, per direct request ("more padding between the two
   columns") — split out from a single uniform `gap` so row spacing stays as-is. Shared by both
   Interests and Shared Lists (same checklist recipe), so both get the wider column gap. */
.profile-interests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  row-gap: 8px;
  column-gap: 24px;
}

/* align-items: flex-start (not center) — same fix as .profile-account-row above: with center, a
   label that wraps to a 2nd line (a longer genre name, or just this page's own bigger mobile
   fonts) vertically centered the checkbox against the label's full wrapped height instead of
   keeping it pinned to the first line, per direct request. */
.profile-interest-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
}

.profile-interest-option input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* --- Saved Lists (folder scoping) --- */
.profile-saved-lists-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-saved-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  user-select: none;
}

.profile-saved-list-row:hover {
  background: var(--hover-bg);
}

.profile-saved-list-arrow {
  font-size: 9px;
  color: var(--text-secondary);
  width: 10px;
  flex-shrink: 0;
}

.profile-saved-list-name {
  flex: 1;
}

/* Rename/delete icons — hidden until the row's hovered, same "don't clutter the row until it's
   relevant" convention as the sidebar's own .sidebar-delete-folder. */
.profile-saved-list-actions {
  display: none;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
/* Also stays visible while the row's accordion is open, not just on hover — per direct request
   ("it seems to disappear"). Expanding a row moves the mouse down into the category tree below,
   which is a sibling of .profile-saved-list-row, not a descendant, so :hover alone stopped
   matching the instant the cursor left the row itself. */
.profile-saved-list-row:hover .profile-saved-list-actions,
.profile-saved-list-row--expanded .profile-saved-list-actions {
  display: flex;
}
.profile-saved-list-rename,
.profile-saved-list-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 50%;
  line-height: 1;
}
.profile-saved-list-delete {
  font-size: 16px;
}
.profile-saved-list-rename:hover {
  background: var(--hover-bg);
  color: var(--primary);
}
.profile-saved-list-delete:hover {
  background: var(--hover-bg);
  color: #EF4444;
}

/* Two-column layout: category groups flow top-to-bottom filling the left column first, then the
   right (standard CSS multi-column behavior), rather than one long single-column stack — matches
   how many category groups a single Saved List's tree tends to hold. */
.profile-saved-list-tree {
  column-count: 2;
  column-gap: 24px;
  padding: 6px 0 14px 26px;
}

.profile-saved-list-category-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  break-inside: avoid; /* keeps one category's checkboxes from splitting across the column break */
}

.profile-saved-list-category-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Separate click target from the checkbox/label next to it — expanding/collapsing a category's
   folder list never fights with toggling its selection checkbox. */
.profile-saved-list-category-arrow {
  font-size: 9px;
  color: var(--text-secondary);
  width: 10px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}

.profile-saved-list-category,
.profile-saved-list-folder {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
}

.profile-saved-list-category {
  font-weight: 600;
}

.profile-saved-list-category input[type="checkbox"],
.profile-saved-list-folder input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.profile-saved-list-folders {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 24px;
}

.profile-saved-list-folder {
  font-weight: 400;
  color: var(--text-secondary);
}

.profile-saved-list-add-folder {
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
}

.profile-saved-list-add-folder:hover {
  color: var(--primary);
}

/* --- My Notes (timeline of every item with real notes) --- */
.profile-notes-category-btn {
  /* Reuses .btn-board-filter's shape (kanban.css), recolored purple and shrunk to fit a widget
     header corner — same recipe dashboard.css's .dash-fav-category-btn already uses for the
     identical "sort by category" control on the Favorites widget. */
  width: auto;
  padding: 5px 14px;
  box-sizing: border-box;
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
}
.profile-notes-category-btn svg { opacity: 0.85; fill: #fff; }
.profile-notes-category-btn:hover,
.profile-notes-category-btn:active {
  background: #fff;
  border-color: #fff;
  color: var(--primary);
}
.profile-notes-category-btn:hover svg,
.profile-notes-category-btn:active svg {
  opacity: 1;
  fill: var(--primary);
}
/* Right-aligned, same reasoning as .dash-fav-category-dropdown — the base .board-filter-dropdown
   (kanban.css) anchors left:0, which runs a corner-positioned dropdown off the edge of the card. */
.profile-notes-category-dropdown {
  left: auto;
  right: 0;
}

.profile-notes-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Same shape as .profile-saved-list-row (Saved Lists widget) — arrow, then content, click-to-
   toggle on the whole row. */
.profile-notes-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  user-select: none;
}
.profile-notes-row:hover { background: var(--hover-bg); }

.profile-notes-arrow {
  font-size: 9px;
  color: var(--text-secondary);
  width: 10px;
  flex-shrink: 0;
}

.profile-notes-cat-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.profile-notes-cat-icon svg { width: 16px; height: 16px; }

.profile-notes-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Only the badges that actually apply render at all (see profile.js's _buildNotesBadges) — no
   dimmed/absent placeholders, so a plain-text-only item's row just has fewer icons, not empty ones. */
.profile-notes-badges {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.profile-notes-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--primary-bg);
  color: var(--primary);
}

.profile-notes-subrows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 6px 26px;
}
.profile-notes-subrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.profile-notes-subrow:hover { background: var(--hover-bg); }
.profile-notes-subrow-label {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--text-primary);
}
.profile-notes-subrow-preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

/* --- Last.fm connect modal --- */
.lastfm-modal-copy {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 16px;
}