/* account.css: profile page, Wrapped page, premium badge and the extra user menu links */

/* small gold pill that marks premium members */
.premium_badge { display: inline-block; vertical-align: middle; font-family: var(--font_body); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 999px; background: var(--color_honey); color: var(--color_on_accent); }

/* profile and Wrapped links inside the user menu, styled like the menu buttons */
.user_menu .menu_link { display: block; padding: 9px 10px; border-radius: 6px; color: var(--paper); text-decoration: none; font-size: 14px; }

/* hover state for those links */
.user_menu .menu_link:hover { background: var(--panel_raised); }
/* a menu link the server switched off, like Groups and uploads while uploads are off */
.user_menu .menu_link[hidden] { display: none; }

/* the account page container sits where the home rows normally are */
.account_view { min-height: 70vh; padding: 96px var(--gutter) 48px; }

/* centered readable column */
.acct_page { max-width: 820px; margin: 0 auto; display: grid; gap: 18px; }

/* back link above the page */
.acct_back { color: var(--muted); font-size: 14px; text-decoration: none; justify-self: start; }

/* back link hover */
.acct_back:hover { color: var(--paper); }

/* top row with avatar, name and the Wrapped link */
.acct_header { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* big letter avatar */
.acct_avatar { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--seal); color: var(--color_on_accent); font-family: var(--font_display); font-size: 32px; flex-shrink: 0; }

/* Wrapped link pushed to the right on wide screens */
.acct_header_link { margin-left: auto; text-decoration: none; }

/* page headings */
.acct_title { font-family: var(--font_display); font-size: clamp(26px, 4vw, 36px); margin: 0; line-height: 1.15; overflow-wrap: anywhere; }

/* gray helper text */
.acct_muted { color: var(--muted); margin: 4px 0 0; font-size: 14px; line-height: 1.55; }

/* very small print */
.acct_fine { color: var(--muted); font-size: 12px; margin: 10px 0 0; }

/* one settings card */
.acct_card { background: var(--panel); border: 0; box-shadow: 0 0 0 1px var(--tint_outline); border-radius: var(--radius_large); padding: 20px clamp(16px, 3vw, 26px); }

/* card headings */
.acct_card h2 { font-size: 18px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }

/* smaller heading inside a card */
.acct_subheading { font-size: 15px; margin: 22px 0 10px; color: var(--paper); }

/* centered card for prompts and locks */
.acct_center { text-align: center; display: grid; gap: 12px; justify-items: center; padding: 40px 24px; }

/* premium card gets a soft gold edge */
.acct_premium { border-color: var(--tint_honey); background: linear-gradient(160deg, var(--tint_honey), var(--panel) 55%); }

/* danger zone gets a red edge */
.acct_danger { border-color: var(--tint_coral); }

/* stacked form fields with the button below */
.acct_form { display: grid; gap: 12px; max-width: 420px; }

/* field labels */
.acct_form label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }

/* text and password boxes on account pages */
.account_view input[type=text], .account_view input[type=password] { background: var(--panel_raised); border: 1px solid transparent; color: var(--paper); border-radius: var(--radius_small); padding: 10px 12px; font: inherit; font-size: 15px; min-width: 0; }

/* focus ring in the accent color */
.account_view input:focus-visible { outline: 2px solid var(--seal); outline-offset: 1px; border-color: transparent; }

/* checkbox row */
.acct_form .acct_check { display: flex; align-items: center; gap: 8px; color: var(--paper); }

/* form buttons do not stretch */
.acct_form .btn { justify-self: start; }

/* red outline button for deleting */
.btn_danger { background: transparent; color: var(--color_coral); border: 1px solid var(--color_coral); }

/* danger hover fills red */
.btn_danger:hover { background: var(--color_coral); color: var(--color_on_accent); }

/* premium perk list */
.perk_list { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 6px; }

/* row of color swatches */
.theme_swatches { display: flex; gap: 12px; flex-wrap: wrap; }

/* one round swatch */
.theme_swatch { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; background: var(--swatch); cursor: pointer; box-shadow: inset 0 0 0 2px var(--scrim_chip); }

/* the active color gets a white ring */
.theme_swatch.is_active { border-color: var(--paper); }

/* locked swatches look faded */
.theme_swatch[aria-disabled=true] { opacity: 0.45; cursor: not-allowed; }

/* tiny lock on locked swatches */
.swatch_lock { position: absolute; right: -6px; bottom: -6px; font-size: 14px; }

/* one connected account row */
.sync_row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); flex-wrap: wrap; }

/* first row has no line above it */
.sync_row:first-of-type { border-top: 0; padding-top: 0; }

/* text side of the row */
.sync_row > div:first-child { flex: 1 1 260px; }

/* buttons or the MAL form */
.sync_actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* import progress box */
.sync_job { margin-top: 14px; padding: 14px; background: var(--panel_raised); border-radius: var(--radius_small); }

/* first line of the progress box */
.sync_job p { margin: 0 0 8px; }

/* progress bar track */
.sync_bar { height: 8px; border-radius: 999px; background: var(--ink); overflow: hidden; }

/* progress bar fill */
.sync_bar span { display: block; height: 100%; background: var(--seal); transition: width 0.4s ease; }

/* year buttons above Wrapped */
.year_tabs { display: flex; gap: 8px; flex-wrap: wrap; }

/* one year button */
.year_tab { background: var(--panel_raised); border: 1px solid transparent; color: var(--paper); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; }

/* selected year */
.year_tab.is_active { background: var(--seal); border-color: var(--seal); color: var(--color_on_accent); }

/* big Wrapped header with an accent glow */
.wrapped_hero { padding: 36px clamp(18px, 4vw, 36px); border-radius: var(--radius_large); background: radial-gradient(circle at 100% 0%, var(--tint_rose_strong), transparent 65%), radial-gradient(circle at 0% 100%, var(--tint_lavender), transparent 55%), var(--panel); border: 0; box-shadow: 0 0 0 1px var(--tint_outline); display: grid; gap: 12px; justify-items: start; }

/* small line above the title */
.wrapped_kicker { margin: 0; color: var(--muted); font-size: 16px; }

/* the year title */
.wrapped_title { font-family: var(--font_display); font-size: clamp(36px, 7vw, 64px); margin: 0; line-height: 1.05; }

/* grid of number tiles, three across so six tiles make two even rows */
.wrapped_stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* word values like a month name use a smaller size so they never break mid word */
.wrapped_stat strong.is_word { font-size: clamp(20px, 3vw, 28px); overflow-wrap: normal; word-break: keep-all; }

/* space between a card's explanation and the form under it */
.acct_card > .acct_muted + .acct_form { margin-top: 14px; }

/* one number tile */
.wrapped_stat { background: var(--panel); border: 0; border-radius: var(--radius_lg); padding: 18px; display: grid; gap: 4px; }

/* the big number, tabular so digits line up */
.wrapped_stat strong { font-family: var(--font_display); font-size: clamp(26px, 4vw, 36px); color: var(--seal); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* second tile number in lavender */
.wrapped_stat:nth-child(6n + 2) strong { color: var(--color_lavender); }

/* third tile number in periwinkle */
.wrapped_stat:nth-child(6n + 3) strong { color: var(--color_periwinkle); }

/* fourth tile number in sage */
.wrapped_stat:nth-child(6n + 4) strong { color: var(--color_sage); }

/* fifth tile number in honey */
.wrapped_stat:nth-child(6n + 5) strong { color: var(--color_honey); }

/* sixth tile number in teal */
.wrapped_stat:nth-child(6n + 6) strong { color: var(--color_teal); }

/* the label under it */
.wrapped_stat span { color: var(--muted); font-size: 14px; }

/* ranked top series list */
.wrapped_top { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* one ranked row */
.wrapped_top li { display: grid; grid-template-columns: 28px 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; }

/* rank number */
.wrapped_rank { font-family: var(--font_display); color: var(--seal); font-size: 20px; }

/* small cover */
.wrapped_top img, .wrapped_cover_blank { width: 44px; height: 62px; object-fit: cover; border-radius: 4px; background: var(--panel_raised); display: block; }

/* series name cut off when long */
.wrapped_name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }

/* genre chips */
.wrapped_genres { display: flex; gap: 8px; flex-wrap: wrap; }

/* one genre chip */
.wrapped_genre { padding: 6px 14px; border-radius: 999px; background: var(--tint_lavender); color: var(--color_lavender); }

/* phone layout */
@media (max-width: 600px) {
  /* less space under the fixed nav */
  .account_view { padding-top: 84px; }
  /* Wrapped link wraps under the name */
  .acct_header_link { margin-left: 0; }
  /* two number tiles across on phones */
  .wrapped_stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* hide the chapter count on tiny screens so titles have room */
  .wrapped_top li { grid-template-columns: 24px 40px minmax(0, 1fr); }
  /* chapter count moves below */
  .wrapped_top li .acct_muted { grid-column: 3; margin-top: -8px; }
}