/* profile.css: edit profile, blocked users, settings, public profiles and the comment member menu, Dusk ink tokens only */

/* ===== avatars ===== */

/* round avatar holder, letter or picture */
.pf_avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--seal); color: var(--color_on_accent); font-weight: 700; }

/* pictures fill the circle with a faint edge so light images keep their shape */
.pf_avatar img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid var(--tint_outline); outline-offset: -1px; border-radius: 50%; }

/* small avatars in lists */
.pf_avatar_sm { width: 40px; height: 40px; font-size: var(--text_base); }

/* the header avatar on the profile page */
.pf_avatar_lg { width: 72px; height: 72px; font-family: var(--font_display); font-size: 30px; }

/* the large avatar in the edit card and public profile */
.pf_avatar_xl { width: 96px; height: 96px; font-family: var(--font_display); font-size: 38px; box-shadow: 0 0 0 4px var(--panel), 0 0 0 5px var(--tint_paper_strong); }

/* dims the preview while it uploads */
.pf_avatar.is_uploading { opacity: 0.6; }

/* comment avatars that use a picture */
.cmt_avatar_img { width: 36px; height: 36px; }

/* avatar picture inside the nav button */
.avatar_btn.has_img { padding: 0; overflow: hidden; }

/* the nav picture fills its rounded square */
.avatar_img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the header buttons on the profile page sit to the right */
.acct_header_links { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space_2); }

/* ===== sections ===== */

/* a titled block on the profile page */
.pf_section { display: grid; gap: var(--space_3); }

/* heading and short line above a card */
.pf_section_head { display: grid; gap: var(--space_1); }

/* section titles */
.pf_section_title { margin: 0; font-size: var(--text_xl); font-weight: 700; text-wrap: balance; }

/* line under a section title */
.pf_section_sub { margin: 0; color: var(--muted); font-size: var(--text_md); line-height: var(--leading_body); text-wrap: pretty; }

/* the raised card that holds the rows */
.pf_card { background: var(--color_panel); border-radius: var(--radius_lg); box-shadow: 0 0 0 1px var(--tint_outline), var(--shadow_sm); padding: var(--space_2) clamp(var(--space_4), 3vw, var(--space_6)); }

/* ===== edit profile rows ===== */

/* label column on the left, fields on the right */
.pf_row { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: var(--space_5); padding: var(--space_5) 0; }

/* a hairline between rows marks a new topic */
.pf_row + .pf_row { box-shadow: 0 -1px 0 var(--tint_outline); }

/* row titles */
.pf_label h3 { margin: 0 0 var(--space_1); font-size: var(--text_base); font-weight: 700; }

/* row helper text */
.pf_label p { margin: 0; color: var(--muted); font-size: var(--text_sm); line-height: var(--leading_body); text-wrap: pretty; }

/* the fields column */
.pf_fields { display: grid; gap: var(--space_4); min-width: 0; }

/* two fields side by side */
.pf_grid_two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space_4); }

/* one field with its caption, hint and error */
.pf_field { display: grid; gap: var(--space_2); min-width: 0; align-content: start; }

/* small caption above a field, sentence case */
.pf_caption { font-size: var(--text_sm); font-weight: 700; color: var(--muted); }

/* text boxes and areas, scoped so the older account page input rule does not win */
.account_view .pf_fields .pf_input { width: 100%; min-height: 44px; background: var(--color_panel_raised); color: var(--paper); border: 1px solid transparent; border-radius: var(--radius_sm); padding: var(--space_2) var(--space_3); font: inherit; font-size: var(--text_base); transition: border-color var(--duration_fast) var(--ease_hover), background-color var(--duration_fast) var(--ease_hover); }

/* lighter placeholder that still meets contrast */
.pf_input::placeholder { color: var(--color_faint); }

/* hover lifts the field slightly */
.account_view .pf_fields .pf_input:hover { background: var(--color_panel_high); }

/* clear focus ring in the accent */
.account_view .pf_fields .pf_input:focus-visible { outline: 2px solid var(--seal); outline-offset: 1px; }

/* invalid fields get a coral edge */
.account_view .pf_fields .pf_input[aria-invalid] { border-color: var(--color_coral); }

/* multi line boxes */
.pf_textarea { resize: vertical; min-height: 104px; line-height: var(--leading_body); }

/* monospace look for the profile id */
.pf_mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.04em; }

/* a field with an icon or prefix inside it */
.pf_affix { position: relative; display: flex; align-items: center; }

/* the mark sits inside the left edge */
.pf_affix_mark { position: absolute; left: var(--space_3); color: var(--color_faint); display: inline-flex; pointer-events: none; }

/* leave room for the mark */
.account_view .pf_affix .pf_input { padding-left: calc(var(--space_3) + 22px); }

/* the read only id is flatter */
.account_view .pf_affix.pf_readonly .pf_input { padding-left: var(--space_3); padding-right: 52px; background: var(--color_panel); box-shadow: inset 0 0 0 1px var(--tint_outline); color: var(--muted); }

/* the copy button inside the id field */
.pf_copy_btn { position: absolute; right: 2px; width: 44px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: var(--radius_sm); cursor: pointer; }

/* hover and focus on the copy button */
.pf_copy_btn:hover { color: var(--paper); background: var(--tint_paper); }

/* small helper text */
.pf_hint { margin: 0; color: var(--muted); font-size: var(--text_sm); line-height: var(--leading_body); }

/* links inside hints */
.pf_hint a { color: var(--color_periwinkle); }

/* counters keep their width as they change */
.pf_count { font-variant-numeric: tabular-nums; justify-self: end; }

/* field errors in coral */
.pf_error { margin: 0; color: var(--color_coral); font-size: var(--text_sm); font-weight: 700; }

/* empty error slots take no space */
.pf_error:empty { display: none; }

/* the avatar row */
.pf_avatar_row { display: flex; align-items: center; gap: var(--space_5); flex-wrap: wrap; }

/* buttons next to the avatar */
.pf_avatar_actions { display: flex; align-items: center; gap: var(--space_2); flex-wrap: wrap; }

/* the upload label looks like a button and takes the keyboard focus ring from its hidden input */
.pf_file_btn { cursor: pointer; }

/* show focus on the label when the hidden file input is focused */
#pf_avatar_input:focus-visible + .pf_file_btn, .pf_avatar_actions:focus-within .pf_file_btn { outline: 2px solid var(--seal); outline-offset: 3px; }

/* the confirm row stands out softly */
.pf_confirm_row { background: var(--tint_honey); border-radius: var(--radius_md); padding: var(--space_4); margin: var(--space_3) 0; box-shadow: none; }

/* sticky save bar at the bottom of the card */
.pf_savebar { position: sticky; bottom: var(--space_4); z-index: var(--layer_content); display: flex; align-items: center; justify-content: space-between; gap: var(--space_3); flex-wrap: wrap; margin: var(--space_2) calc(var(--space_2) * -1) var(--space_3); padding: var(--space_3) var(--space_4); background: var(--color_panel_high); border-radius: var(--radius_md); box-shadow: 0 0 0 1px var(--tint_outline), var(--shadow_lg); animation: pf_bar_in var(--duration_base) var(--ease_out); }

/* the save bar slides up a little when it appears */
@keyframes pf_bar_in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* the save bar text */
.pf_savebar_text { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* save bar buttons */
.pf_savebar_actions { display: flex; gap: var(--space_2); }

/* buttons reach 44px on touch screens */
@media (pointer: coarse) { .pf_savebar .btn, .pf_avatar_actions .btn, .pf_block_item .btn, .st_switch { min-height: 44px; } }

/* ===== blocked users ===== */

/* the blocked card has more room inside */
.pf_block_card { padding: var(--space_2) var(--space_4); }

/* the list of blocked members */
.pf_block_list { list-style: none; margin: 0; padding: 0; }

/* one blocked member */
.pf_block_item { display: flex; align-items: center; gap: var(--space_3); padding: var(--space_3) 0; }

/* hairline between members */
.pf_block_item + .pf_block_item { box-shadow: 0 -1px 0 var(--tint_outline); }

/* name and handle stack */
.pf_block_names { display: grid; gap: 2px; min-width: 0; flex: 1; }

/* the member name link */
.pf_block_name { color: var(--paper); font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* underline on hover */
.pf_block_name:hover { text-decoration: underline; }

/* the centered empty state */
.pf_empty { display: grid; justify-items: center; text-align: center; gap: var(--space_2); padding: var(--space_6) var(--space_4); }

/* the round icon in the empty state */
.pf_empty_icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--color_panel_raised); color: var(--muted); }

/* empty state title */
.pf_empty_title { margin: 0; font-weight: 700; }

/* empty state line */
.pf_empty_body { margin: 0; color: var(--muted); font-size: var(--text_md); max-width: 46ch; text-wrap: pretty; }

/* links in empty states */
.pf_empty_body a { color: var(--color_periwinkle); }

/* loading line */
.pf_block_loading { padding: var(--space_4) 0; }

/* ===== settings ===== */

/* settings cards stack with breathing room */
.st_page { gap: var(--space_5); }

/* the header block */
.st_head { margin-bottom: var(--space_1); }

/* the saved indicator fades in and out */
.st_saved { color: var(--color_sage); font-weight: 700; opacity: 0; transition: opacity var(--duration_base) var(--ease_out); }

/* visible state */
.st_saved.is_visible { opacity: 1; }

/* one group of settings */
.st_card { background: var(--color_panel); border-radius: var(--radius_lg); box-shadow: 0 0 0 1px var(--tint_outline), var(--shadow_sm); padding: var(--space_5) clamp(var(--space_4), 3vw, var(--space_5)); display: grid; gap: var(--space_2); }

/* group title */
.st_card h2 { margin: 0; font-size: var(--text_lg); }

/* group description */
.st_card_sub { margin: 0 0 var(--space_2); color: var(--muted); font-size: var(--text_md); line-height: var(--leading_body); text-wrap: pretty; }

/* one switch row, nested radius is the card radius minus its padding */
.st_row { display: flex; align-items: center; justify-content: space-between; gap: var(--space_4); background: var(--color_panel_raised); border-radius: var(--radius_md); padding: var(--space_3) var(--space_4); }

/* text side of a row */
.st_text { min-width: 0; }

/* row title */
.st_title { margin: 0; font-weight: 700; font-size: var(--text_md); color: var(--paper); }

/* row helper */
.st_help { margin: 2px 0 0; color: var(--muted); font-size: var(--text_sm); line-height: var(--leading_body); }

/* the switch track */
.st_switch { position: relative; flex-shrink: 0; width: 48px; height: 28px; border-radius: var(--radius_pill); border: 0; background: var(--color_panel_high); box-shadow: inset 0 0 0 2px var(--color_faint); cursor: pointer; padding: 0; transition: background-color var(--duration_base) var(--ease_out), box-shadow var(--duration_base) var(--ease_out); }

/* the switch knob */
.st_switch_thumb { position: absolute; top: 5px; left: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--color_faint); transition: transform var(--duration_base) var(--ease_out), background-color var(--duration_base) var(--ease_out); }

/* on state: teal track with an ink knob */
.st_switch[aria-checked="true"] { background: var(--color_teal); box-shadow: none; }

/* knob slides right when on */
.st_switch[aria-checked="true"] .st_switch_thumb { transform: translateX(20px); background: var(--color_on_accent); }

/* a slight press */
.st_switch:active .st_switch_thumb { width: 22px; }

/* focus ring around the switch */
.st_switch:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; }

/* a checklist group */
.st_checklist { border: 0; margin: var(--space_2) 0 0; padding: 0; display: grid; gap: var(--space_1); }

/* the legend reads like a row title */
.st_checklist legend { padding: 0; }

/* the list of boxes */
.st_checks { display: grid; gap: var(--space_1); margin-top: var(--space_2); }

/* one checkbox row */
.st_check { position: relative; display: flex; align-items: center; gap: var(--space_3); min-height: 44px; padding: 0 var(--space_4); background: var(--color_panel_raised); border-radius: var(--radius_sm); cursor: pointer; }

/* hover on a checkbox row */
.st_check:hover { background: var(--color_panel_high); }

/* the real checkbox stays focusable but invisible over the row */
.st_check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }

/* the drawn box */
.st_check_box { width: 20px; height: 20px; border-radius: var(--radius_xs); box-shadow: inset 0 0 0 2px var(--color_faint); display: grid; place-items: center; color: transparent; transition: background-color var(--duration_fast) var(--ease_out); }

/* checked box in teal with an ink tick */
.st_check input:checked + .st_check_box { background: var(--color_teal); box-shadow: none; color: var(--color_on_accent); }

/* focus ring on the row when its box is focused */
.st_check:has(input:focus-visible) { outline: 2px solid var(--seal); outline-offset: 2px; }

/* the folder name */
.st_check_text { font-size: var(--text_md); }

/* ===== public profile ===== */

/* header with avatar, names and actions */
.pp_header { display: flex; align-items: center; gap: var(--space_5); flex-wrap: wrap; }

/* names column */
.pp_names { display: grid; gap: var(--space_1); min-width: 0; flex: 1; }

/* the @handle line */
.pp_handle { margin: 0; color: var(--muted); display: flex; align-items: center; gap: var(--space_2); flex-wrap: wrap; }

/* actions on the right */
.pp_actions { display: flex; gap: var(--space_2); }

/* role badges */
.pp_badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius_pill); background: var(--color_lavender); color: var(--color_on_accent); }

/* admins get periwinkle */
.pp_badge_admin { background: var(--color_periwinkle); }

/* the bio */
.pp_bio { margin: 0; white-space: pre-line; line-height: var(--leading_body); max-width: 65ch; text-wrap: pretty; }

/* social links */
.pp_links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space_2); }

/* each link as a chip */
.pp_links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space_3); border-radius: var(--radius_pill); background: var(--color_panel_raised); color: var(--color_periwinkle); text-decoration: none; font-size: var(--text_sm); }

/* hover on a link chip */
.pp_links a:hover { background: var(--color_panel_high); }

/* the blocked note */
.pp_blocked_note { margin: 0; padding: var(--space_3) var(--space_4); border-radius: var(--radius_md); background: var(--tint_coral); color: var(--paper); font-size: var(--text_md); }

/* the block confirm box */
.pp_confirm { background: var(--color_panel_high); border-radius: var(--radius_md); padding: var(--space_4); box-shadow: 0 0 0 1px var(--tint_outline); display: grid; gap: var(--space_2); }

/* the section tabs */
.pp_tabs { display: flex; gap: var(--space_1); overflow-x: auto; }

/* one tab */
.pp_tab { min-height: 44px; padding: 0 var(--space_4); border: 0; border-radius: var(--radius_pill); background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; white-space: nowrap; }

/* hover on a tab */
.pp_tab:hover { color: var(--paper); background: var(--tint_paper); }

/* the selected tab */
.pp_tab[aria-selected="true"] { background: var(--color_panel_high); color: var(--paper); }

/* the panel under the tabs */
.pp_panel { padding: var(--space_4) clamp(var(--space_4), 3vw, var(--space_5)); }

/* empty panel line */
.pp_empty_line { padding: var(--space_3) 0; }

/* recent comments */
.pp_comment_list { list-style: none; margin: 0; padding: 0; }

/* one recent comment */
.pp_comment { padding: var(--space_3) 0; }

/* hairline between comments */
.pp_comment + .pp_comment { box-shadow: 0 -1px 0 var(--tint_outline); }

/* where and when */
.pp_comment_meta { margin: 0 0 var(--space_1); color: var(--muted); font-size: var(--text_sm); }

/* the manga link */
.pp_comment_meta a { color: var(--color_periwinkle); font-weight: 700; text-decoration: none; }

/* the comment text */
.pp_comment_text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* reading list grid */
.pp_reading_list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space_4); }

/* one title in the reading list */
.pp_reading_item { display: grid; gap: var(--space_2); width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }

/* covers keep the manga shape */
.pp_reading_item img, .pp_cover_blank { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius_sm); background: var(--color_panel_raised); outline: 1px solid var(--tint_outline); outline-offset: -1px; }

/* the title under a cover */
.pp_reading_title { font-size: var(--text_sm); font-weight: 700; line-height: var(--leading_snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* folder chip */
.pp_status { justify-self: start; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius_pill); background: var(--color_panel_high); color: var(--paper); }

/* reading in periwinkle */
.pp_status_reading { background: var(--color_periwinkle); color: var(--color_on_accent); }

/* completed in sage */
.pp_status_completed { background: var(--color_sage); color: var(--color_on_accent); }

/* plan to read in lavender */
.pp_status_plan_to_read { background: var(--color_lavender); color: var(--color_on_accent); }

/* on hold in honey */
.pp_status_on_hold { background: var(--color_honey); color: var(--color_on_accent); }

/* dropped in coral */
.pp_status_dropped { background: var(--color_coral); color: var(--color_on_accent); }

/* stat tiles */
.pp_stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space_3); }

/* one stat tile */
.pp_stat { display: grid; gap: var(--space_1); background: var(--color_panel_raised); border-radius: var(--radius_md); padding: var(--space_4); }

/* the big number */
.pp_stat_value { font-family: var(--font_display); font-size: var(--text_2xl); color: var(--seal); font-variant-numeric: tabular-nums; }

/* label above genres */
.pp_genres_label { margin-top: var(--space_4); }

/* genre chips */
.pp_genres { list-style: none; margin: var(--space_2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space_2); }

/* one genre chip */
.pp_genres li { padding: var(--space_1) var(--space_3); border-radius: var(--radius_pill); background: var(--tint_lavender); color: var(--color_lavender); font-size: var(--text_sm); }

/* ===== comment author links and the member menu ===== */

/* author names link to profiles without looking like plain links */
.cmt_author_link { color: inherit; text-decoration: none; }

/* underline on hover and focus */
.cmt_author_link:hover strong, .cmt_author_link:focus-visible strong { text-decoration: underline; }

/* the menu holder sits at the end of the comment head */
.member_menu_wrap { position: relative; margin-left: auto; align-self: center; }

/* the "..." button with a 40px hit area */
.member_menu_btn { width: 40px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--radius_sm); background: transparent; color: var(--muted); cursor: pointer; opacity: 0.8; transition: opacity var(--duration_fast) var(--ease_hover), background-color var(--duration_fast) var(--ease_hover); }

/* hover, focus and open states */
.member_menu_btn:hover, .member_menu_btn[aria-expanded="true"] { opacity: 1; background: var(--tint_paper); color: var(--paper); }

/* the menu itself */
.member_menu { position: absolute; right: 0; top: calc(100% + var(--space_1)); z-index: var(--layer_nav); min-width: 200px; display: grid; padding: var(--space_1); background: var(--color_panel_high); border-radius: var(--radius_md); box-shadow: 0 0 0 1px var(--tint_outline), var(--shadow_md); transform-origin: top right; animation: member_menu_in var(--duration_fast) var(--ease_out); }

/* hidden menus stay hidden even with display grid */
.member_menu[hidden] { display: none; }

/* the menu scales in from its corner */
@keyframes member_menu_in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* one menu item */
.member_menu_item { display: flex; align-items: center; min-height: 40px; padding: 0 var(--space_3); border: 0; border-radius: var(--radius_sm); background: transparent; color: var(--paper); font-size: var(--text_md); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; }

/* hover on an item */
.member_menu_item:hover, .member_menu_item:focus-visible { background: var(--tint_paper_strong); }

/* the block item in coral */
.member_menu_danger { color: var(--color_coral); }

/* the confirm step inside the menu */
.member_confirm { display: grid; gap: var(--space_2); padding: var(--space_3); width: min(280px, 80vw); white-space: normal; }

/* confirm title */
.member_confirm_title { margin: 0; font-weight: 700; }

/* confirm body */
.member_confirm_body { margin: 0; color: var(--muted); font-size: var(--text_sm); line-height: var(--leading_body); }

/* confirm buttons */
.member_confirm_row { display: flex; justify-content: flex-end; gap: var(--space_2); }

/* solid coral button for confirming a block */
.btn_danger_solid { background: var(--color_coral); color: var(--color_on_accent); }

/* pressed coral */
.btn_danger_solid:hover { filter: brightness(0.92); }

/* ===== manual comment loading ===== */

/* the load comments block */
.cmt_manual_load { display: grid; justify-items: start; gap: var(--space_3); padding: var(--space_4) 0; }

/* ===== small screens ===== */

/* stack label and fields on phones and narrow tablets */
@media (max-width: 720px) {
  /* one column rows */
  .pf_row { grid-template-columns: 1fr; gap: var(--space_3); }
  /* one column field pairs */
  .pf_grid_two { grid-template-columns: 1fr; }
  /* switch rows keep text and switch on one line */
  .st_row { padding: var(--space_3); }
  /* header buttons wrap under the names */
  .acct_header_links { margin-left: 0; width: 100%; }
  /* public profile header stacks */
  .pp_header { gap: var(--space_4); }
  /* save bar spans the width */
  .pf_savebar { margin-left: 0; margin-right: 0; }
}

/* reduced motion keeps changes but drops movement */
@media (prefers-reduced-motion: reduce) {
  /* no slide or scale */
  .pf_savebar, .member_menu { animation: none; }
  /* knob jumps instead of sliding */
  .st_switch_thumb, .st_switch, .st_saved { transition: none; }
}

/* the hidden attribute wins over the display values set above */
.pf_row[hidden], .pf_savebar[hidden], .pp_confirm[hidden], .pf_avatar_actions [hidden] { display: none; }

/* a reminder to the owner about hidden sections */
.pp_owner_note { margin: 0; padding: var(--space_3) var(--space_4); border-radius: var(--radius_md); background: var(--tint_lavender); font-size: var(--text_md); }

/* the settings link inside the reminder */
.pp_owner_note a { color: var(--color_lavender); font-weight: 700; }

/* bell that is on automatically through a My list folder: dashed edge, no ring animation */
.alert_bell.is_auto { border-style: dashed; background: transparent; }

/* no ring for automatic alerts, nothing just changed */
.alert_bell.is_auto .alert_bell_icon { animation: none; }