/* pages.css: the My list page and the Comments feed page, built only from tokens.css values */

/* ===== shared page frame ===== */

/* the page container sits where the hero and rows normally are */
.page_view { padding: calc(var(--space_8) + var(--space_6)) var(--gutter) var(--space_8); min-height: 70vh; }

/* content width for the library page */
.page_wrap { max-width: 1240px; margin: 0 auto; display: grid; gap: var(--space_6); }

/* narrower column for reading comments comfortably */
.page_wrap_narrow { max-width: 820px; }

/* title block at the top of each page */
.page_header { display: grid; gap: var(--space_2); }

/* big page title in the display font */
.page_title { margin: 0; font-family: var(--font_display); font-size: clamp(30px, 4vw, 44px); line-height: var(--leading_tight); color: var(--color_paper); outline: none; }

/* small line under the title */
.page_subtitle { margin: 0; color: var(--color_muted); font-size: var(--text_base); }

/* section headings inside a page */
.page_section_title { margin: 0 0 var(--space_3); font-size: var(--text_lg); font-weight: 700; color: var(--color_paper); }

/* friendly empty and signed out messages */
.page_empty { display: grid; justify-items: start; gap: var(--space_4); padding: var(--space_6); border-radius: var(--radius_lg); background: var(--color_panel); box-shadow: var(--shadow_sm); color: var(--color_muted); }

/* the message text */
.page_empty p { margin: 0; max-width: 56ch; line-height: var(--leading_body); }

/* buttons in an empty message sit side by side */
.page_empty_actions { display: flex; flex-wrap: wrap; gap: var(--space_3); }

/* blank tile when a saved entry has no cover */
.cover_blank { display: block; width: 100%; height: 100%; background: var(--color_panel_high); }

/* ===== continue reading strip ===== */

/* horizontal list of resume tiles */
.resume_track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); gap: var(--space_4); overflow-x: auto; padding-bottom: var(--space_2); scroll-snap-type: x proximity; }

/* one resume tile, cover on the left and details on the right */
.resume_tile { display: grid; grid-template-columns: 88px 1fr; gap: var(--space_4); padding: var(--space_3); border-radius: var(--radius_lg); background: var(--color_panel); box-shadow: var(--shadow_sm); scroll-snap-align: start; }

/* the cover button */
.resume_cover { padding: 0; border: 0; border-radius: var(--radius_sm); overflow: hidden; aspect-ratio: 2 / 3; background: var(--color_panel_high); cursor: pointer; }

/* cover image fills the button */
.resume_cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* text column stacks with a small gap */
.resume_body { display: grid; align-content: start; gap: var(--space_1); min-width: 0; }

/* title clipped to two lines */
.resume_title { margin: 0; font-size: var(--text_base); font-weight: 700; line-height: var(--leading_snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* chapter and page line in the reading color */
.resume_progress { margin: 0; color: var(--color_periwinkle); font-size: var(--text_sm); }

/* last read time */
.resume_time { margin: 0 0 var(--space_2); color: var(--color_faint); font-size: var(--text_xs); }

/* the resume button hugs its text */
.resume_body .btn { justify-self: start; }

/* ===== library toolbar ===== */

/* chips on one line and controls on the other side */
.library_toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space_4); }

/* the chip group wraps on small screens */
.filter_chips { display: flex; flex-wrap: wrap; gap: var(--space_2); }

/* one status filter chip */
.filter_chip { display: inline-flex; align-items: center; gap: var(--space_2); min-height: 36px; padding: var(--space_1) var(--space_3); border: 1px solid var(--tint_outline); border-radius: var(--radius_pill); background: var(--color_panel); color: var(--color_muted); font: inherit; font-size: var(--text_sm); cursor: pointer; transition: background-color var(--duration_fast) var(--ease_hover), color var(--duration_fast) var(--ease_hover), border-color var(--duration_fast) var(--ease_hover); }

/* hover brightens the chip */
.filter_chip:hover { color: var(--color_paper); background: var(--color_panel_raised); }

/* the count bubble inside a chip */
.filter_count { min-width: 22px; padding: 0 var(--space_1); border-radius: var(--radius_pill); background: var(--tint_paper); color: var(--color_paper); font-size: var(--text_xs); text-align: center; }

/* the selected chip fills with its status color and uses dark text */
.filter_chip[aria-pressed="true"] { background: var(--chip_color, var(--color_rose)); border-color: transparent; color: var(--color_on_accent); font-weight: 700; }

/* the count inside a selected chip */
.filter_chip[aria-pressed="true"] .filter_count { background: var(--scrim_chip); color: var(--color_paper); }

/* All uses the main accent */
.filter_chip.status_all { --chip_color: var(--color_rose); }

/* reading is periwinkle */
.status_reading { --chip_color: var(--color_periwinkle); }

/* plan to read is lavender */
.status_plan_to_read { --chip_color: var(--color_lavender); }

/* completed is sage */
.status_completed { --chip_color: var(--color_sage); }

/* on hold is honey */
.status_on_hold { --chip_color: var(--color_honey); }

/* dropped is coral */
.status_dropped { --chip_color: var(--color_coral); }

/* search box and sort menu side by side */
.library_controls { display: flex; flex-wrap: wrap; gap: var(--space_2); }

/* the title filter box */
.library_query { min-height: 40px; min-width: 200px; padding: var(--space_2) var(--space_4); border: 1px solid transparent; border-radius: var(--radius_pill); background: var(--color_panel_raised); color: var(--color_paper); font: inherit; font-size: var(--text_md); }

/* placeholder uses the faint text color */
.library_query::placeholder { color: var(--color_faint); }

/* focused filter box gets the accent outline */
.library_query:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }

/* ===== library grid ===== */

/* responsive grid of saved titles */
.library_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space_5) var(--space_4); }

/* one saved title */
.library_card { display: grid; gap: var(--space_3); align-content: start; }

/* the cover button with the status pill on top */
.library_cover { position: relative; padding: 0; border: 0; border-radius: var(--radius_md); overflow: hidden; aspect-ratio: 2 / 3; background: var(--color_panel_high); cursor: pointer; box-shadow: var(--shadow_sm); transition: transform var(--duration_base) var(--ease_out), box-shadow var(--duration_base) var(--ease_out); }

/* cover image fills the button */
.library_cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* hover lifts the cover a little on devices with a real pointer */
@media (hover: hover) and (pointer: fine) {
  /* lift and deepen the shadow */
  .library_cover:hover { transform: translateY(-3px); box-shadow: var(--shadow_md); }
}

/* status pill pinned to the cover corner, dark text on the pastel */
.status_pill { position: absolute; left: var(--space_2); top: var(--space_2); padding: 2px var(--space_2); border-radius: var(--radius_pill); background: var(--chip_color, var(--color_rose)); color: var(--color_on_accent); font-size: var(--text_xs); font-weight: 700; }

/* text area under the cover */
.library_card_body { display: grid; gap: var(--space_1); min-width: 0; }

/* title clipped to two lines */
.library_card_title { margin: 0; font-size: var(--text_md); font-weight: 700; line-height: var(--leading_snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* progress and rating line */
.library_card_meta { margin: 0; color: var(--color_muted); font-size: var(--text_sm); }

/* status menu and remove button in one row */
.library_card_actions { display: flex; align-items: center; gap: var(--space_2); margin-top: var(--space_1); }

/* the status menu takes the free width */
.card_status { flex: 1; min-width: 0; min-height: 36px; font-size: var(--text_sm); }

/* small square icon button */
.icon_btn { flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--radius_sm); background: var(--color_panel_raised); color: var(--color_muted); font: inherit; cursor: pointer; transition: background-color var(--duration_fast) var(--ease_hover), color var(--duration_fast) var(--ease_hover); }

/* remove turns coral on hover */
.icon_btn:hover { background: var(--tint_coral); color: var(--color_coral); }

/* gray placeholder while the list loads */
.library_skeleton { aspect-ratio: 2 / 3; border-radius: var(--radius_md); background: var(--color_panel); }

/* ===== comments feed ===== */

/* scope toggle on the left, live badge on the right */
.feed_toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space_3); }

/* two option toggle */
.segmented { display: inline-flex; padding: var(--space_1); border-radius: var(--radius_pill); background: var(--color_panel); box-shadow: var(--shadow_sm); }

/* each option */
.segmented button { min-height: 36px; padding: var(--space_1) var(--space_4); border: 0; border-radius: var(--radius_pill); background: transparent; color: var(--color_muted); font: inherit; font-size: var(--text_sm); cursor: pointer; transition: background-color var(--duration_fast) var(--ease_hover), color var(--duration_fast) var(--ease_hover); }

/* the chosen option fills with the accent */
.segmented button[aria-pressed="true"] { background: var(--seal); color: var(--color_on_accent); font-weight: 700; }

/* live status line */
.feed_live { display: inline-flex; align-items: center; gap: var(--space_2); margin: 0; color: var(--color_faint); font-size: var(--text_sm); }

/* the dot is gray until the socket is live */
.feed_live_dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color_faint); }

/* live text turns teal */
.feed_live.is_live { color: var(--color_teal); }

/* live dot turns teal with a soft halo */
.feed_live.is_live .feed_live_dot { background: var(--color_teal); box-shadow: 0 0 0 4px var(--tint_teal); }

/* spoiler shield summary in honey */
.feed_shield { margin: 0; padding: var(--space_3) var(--space_4); border-radius: var(--radius_md); background: var(--tint_honey); color: var(--color_honey); font-size: var(--text_sm); }

/* floating pill that jumps back to new comments */
.feed_new_pill { position: fixed; top: calc(var(--space_8) + var(--space_3)); left: 50%; transform: translateX(-50%); z-index: var(--layer_nav); min-height: 40px; padding: var(--space_2) var(--space_4); border: 0; border-radius: var(--radius_pill); background: var(--color_teal); color: var(--color_on_accent); font: inherit; font-weight: 700; font-size: var(--text_sm); box-shadow: var(--shadow_md); cursor: pointer; }

/* hidden attribute wins over display rules */
.feed_new_pill[hidden] { display: none; }

/* space between manga groups */
.feed_body { display: grid; gap: var(--space_5); }

/* one manga and its comments */
.feed_group { display: grid; gap: var(--space_3); padding: var(--space_4); border-radius: var(--radius_lg); background: var(--color_panel); box-shadow: var(--shadow_sm); }

/* cover beside the title */
.feed_group_head { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: var(--space_3); }

/* small cover button */
.feed_group_cover { padding: 0; border: 0; border-radius: var(--radius_sm); overflow: hidden; aspect-ratio: 2 / 3; background: var(--color_panel_high); cursor: pointer; }

/* cover image fills the button */
.feed_group_cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* title and progress stacked */
.feed_group_info { min-width: 0; display: grid; gap: 2px; }

/* manga title */
.feed_group_title { margin: 0; font-size: var(--text_base); font-weight: 700; }

/* a button that looks like a text link */
.link_btn { padding: 0; border: 0; background: none; color: var(--color_paper); font: inherit; text-align: left; cursor: pointer; }

/* underline on hover */
.link_btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* progress line under the title */
.feed_group_meta { margin: 0; color: var(--color_muted); font-size: var(--text_sm); }

/* held back spoiler count in honey */
.feed_spoiler_note { color: var(--color_honey); }

/* comments under one manga */
.feed_list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space_2); }

/* one comment card */
.feed_comment { display: grid; grid-template-columns: 36px 1fr; gap: var(--space_3); padding: var(--space_3); border-radius: var(--radius_md); background: var(--color_panel_raised); }

/* a comment that just arrived gets a teal edge */
.feed_comment.is_fresh { box-shadow: inset 3px 0 0 var(--color_teal); }

/* staff see hidden comments dimmed */
.feed_comment.is_hidden { opacity: 0.6; }

/* text column */
.feed_comment_main { min-width: 0; display: grid; gap: var(--space_1); }

/* chapter chip in the reading color */
.feed_chapter_chip { padding: 1px var(--space_2); border-radius: var(--radius_pill); background: var(--tint_periwinkle); color: var(--color_periwinkle); font-size: var(--text_xs); }

/* comment text keeps line breaks and wraps long words */
.feed_comment_text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; line-height: var(--leading_body); }

/* small link button to open the thread */
.feed_reply { justify-self: start; min-height: 32px; padding: 0 var(--space_2); margin-left: calc(var(--space_2) * -1); border: 0; border-radius: var(--radius_sm); background: transparent; color: var(--color_periwinkle); font: inherit; font-size: var(--text_sm); cursor: pointer; }

/* hover gives it a soft background */
.feed_reply:hover { background: var(--tint_periwinkle); }

/* italic name for comments whose author deleted their account */
.cmt_deleted_user { font-style: italic; color: var(--color_muted); }

/* load older button centered */
.feed_more { display: flex; justify-content: center; }

/* gray placeholders while the feed loads */
.feed_skeletons { display: grid; gap: var(--space_3); }

/* one placeholder block */
.feed_skeleton { height: 120px; border-radius: var(--radius_lg); background: var(--color_panel); }

/* ===== undo toast ===== */

/* toast with a button on the right */
.toast_with_action { justify-content: space-between; }

/* the undo button inside a toast */
.toast_action { min-height: 32px; padding: 0 var(--space_3); border: 0; border-radius: var(--radius_sm); background: var(--tint_rose); color: var(--color_rose); font: inherit; font-weight: 700; cursor: pointer; }

/* undo hover */
.toast_action:hover { background: var(--tint_rose_strong); }

/* ===== focus rings ===== */

/* every interactive control on these pages shows the accent ring for keyboard users */
.page_view button:focus-visible, .page_view select:focus-visible, .toast_action:focus-visible, .feed_new_pill:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }

/* ===== motion, only for people who have not asked for less ===== */

@media (prefers-reduced-motion: no-preference) {
  /* new live comments slide down into place */
  .feed_comment.is_fresh { animation: feed_slide_in var(--duration_slow) var(--ease_out) both; }

  /* the page fades and rises in when it opens */
  .page_wrap { animation: page_rise var(--duration_slow) var(--ease_out) both; }

  /* loading placeholders shimmer */
  .library_skeleton, .feed_skeleton { background: linear-gradient(90deg, var(--color_panel) 0%, var(--color_panel_raised) 50%, var(--color_panel) 100%); background-size: 200% 100%; animation: page_shimmer 1.4s ease-in-out infinite; }

  /* the new comments pill drops in */
  .feed_new_pill:not([hidden]) { animation: pill_drop var(--duration_base) var(--ease_out) both; }
}

/* slide and fade for a new comment */
@keyframes feed_slide_in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* fade and rise for a page */
@keyframes page_rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* shimmer sweep */
@keyframes page_shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* pill drop keeps the horizontal centering */
@keyframes pill_drop { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ===== touch screens get 44px targets ===== */

@media (pointer: coarse) {
  /* chips, toggles, icon buttons, reply links and the undo button */
  .filter_chip, .segmented button, .icon_btn, .feed_reply, .toast_action, .card_status, .library_query, .feed_new_pill { min-height: 44px; }

  /* square icon buttons grow both ways */
  .icon_btn { width: 44px; height: 44px; }
}

/* ===== phone layout ===== */

@media (max-width: 600px) {
  /* less top padding under the nav */
  .page_view { padding-top: calc(var(--space_8) + var(--space_5)); }

  /* two columns of covers */
  .library_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* the search box takes the full width */
  .library_controls, .library_query { width: 100%; }

  /* the search box can shrink */
  .library_query { min-width: 0; flex: 1; }

  /* resume tiles fill most of the screen */
  .resume_track { grid-auto-columns: 86%; }

  /* tighter group padding */
  .feed_group { padding: var(--space_3); }
}

/* ===== nav current state ===== */

/* the current top nav link stays bright with a soft fill */
.nav_links a[aria-current] { color: var(--color_paper); background: var(--tint_paper); }

/* ===== phone tab bar ===== */

/* hidden on wide screens where the top links show */
.bottom_tabs { display: none; }

/* phones and small tablets, the same width where the top links hide */
@media (max-width: 900px) {
  /* four equal tabs fixed to the bottom edge */
  .bottom_tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--layer_nav); display: grid; grid-template-columns: repeat(4, 1fr); padding: var(--space_1) var(--space_2) calc(var(--space_1) + env(safe-area-inset-bottom)); background: var(--scrim_bar); backdrop-filter: blur(12px); box-shadow: 0 -1px 0 var(--tint_outline); }

  /* one tab, icon over label */
  .bottom_tabs a { display: grid; justify-items: center; gap: 2px; min-height: 48px; padding: var(--space_1) 0; border-radius: var(--radius_md); color: var(--color_muted); text-decoration: none; font-size: var(--text_xs); }

  /* the icon */
  .tab_icon { font-size: var(--text_lg); line-height: 1; }

  /* the current tab uses the accent */
  .bottom_tabs a[aria-current] { color: var(--seal); }

  /* keyboard focus ring */
  .bottom_tabs a:focus-visible { outline: 2px solid var(--seal); outline-offset: -2px; }

  /* room so the footer and last rows are not covered */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* toasts sit above the tab bar */
  .toast_area { bottom: calc(72px + env(safe-area-inset-bottom)); }
}