/* library_pages.css styles the Updates feed, History, custom lists, and the Add to list picker, using Dusk ink tokens only */

/* page column with the shared gutter */
.lib_page { display: grid; gap: var(--space_5); max-width: 960px; margin: 0 auto; padding: var(--space_6) var(--gutter) var(--space_8); }

/* heading row, title on the left and actions on the right, wraps on phones */
.lib_head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space_3); }

/* small label above the title */
.lib_kicker { margin: 0 0 var(--space_1); font-size: var(--text_sm); font-weight: 700; color: var(--color_lavender); }

/* owner link inside the kicker keeps the link color */
.lib_kicker a { color: var(--color_periwinkle); }

/* page title */
.lib_title { margin: 0; font-family: var(--font_display); font-size: var(--text_2xl); line-height: var(--leading_tight); overflow-wrap: anywhere; }

/* quiet helper text */
.lib_hint { margin: 0; font-size: var(--text_sm); color: var(--color_muted); }

/* status and empty messages */
.lib_status { margin: 0; color: var(--color_muted); text-align: center; }

/* signed out and empty cards */
.lib_empty { display: grid; justify-items: start; gap: var(--space_3); padding: var(--space_5); border-radius: var(--radius_lg); background: var(--color_panel_raised); }

/* empty card text */
.lib_empty p { margin: 0; color: var(--color_muted); }

/* a row of buttons that wraps */
.lib_actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space_2); }

/* the inline second step for destructive actions */
.lib_confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space_2); color: var(--color_coral); font-weight: 700; }

/* the hidden attribute always wins over display rules above */
.lib_confirm[hidden], .lib_actions [hidden] { display: none; }

/* the Load more button sits in the middle */
.lib_more { justify-self: center; min-height: 44px; }

/* invisible marker that triggers the next page */
.lib_sentinel { height: 1px; }

/* field labels */
.lib_label { font-size: var(--text_sm); font-weight: 700; color: var(--color_muted); }

/* text fields, selects, and text areas */
.lib_input { min-height: 44px; padding: var(--space_2) var(--space_3); border: 1px solid var(--color_rule); border-radius: var(--radius_sm); background: var(--color_panel_raised); color: var(--color_paper); font: inherit; }

/* a clear focus ring on fields */
.lib_input:focus-visible { outline: 2px solid var(--color_periwinkle); outline-offset: 2px; }

/* covers keep the manga shape */
.lib_cover { display: block; object-fit: cover; border-radius: var(--radius_sm); background: var(--color_panel_high); box-shadow: 0 0 0 1px var(--tint_outline); }

/* small covers in feeds and list rows */
.lib_cover_small { width: 56px; height: 80px; flex-shrink: 0; }

/* blank tile when there is no cover */
.lib_cover_blank { background: var(--color_panel_high); }

/* ===== Updates and History ===== */

/* days stacked */
.upd_list { display: grid; gap: var(--space_6); }

/* one day */
.upd_day { display: grid; gap: var(--space_3); }

/* day heading with a rule under it */
.upd_day_title { margin: 0; padding-bottom: var(--space_2); border-bottom: 1px solid var(--color_rule); font-size: var(--text_lg); }

/* one title group: cover and chapters side by side */
.upd_title { display: flex; gap: var(--space_3); padding: var(--space_3); border-radius: var(--radius_md); background: var(--color_panel_raised); }

/* cover button has no chrome */
.upd_cover_btn { padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius_sm); align-self: flex-start; }

/* focus ring on the cover button */
.upd_cover_btn:focus-visible { outline: 2px solid var(--color_periwinkle); outline-offset: 2px; }

/* the right column can shrink */
.upd_title_body { display: grid; gap: var(--space_2); min-width: 0; flex: 1; }

/* title heading */
.upd_title_name { margin: 0; font-size: var(--text_base); }

/* the title button looks like a heading link */
.upd_title_link { min-height: 44px; padding: 0; border: 0; background: none; color: var(--color_paper); font: inherit; font-weight: 700; text-align: left; cursor: pointer; overflow-wrap: anywhere; }

/* hover underline on the title */
.upd_title_link:hover { text-decoration: underline; }

/* focus ring on the title */
.upd_title_link:focus-visible { outline: 2px solid var(--color_periwinkle); outline-offset: 2px; }

/* chapter rows without bullets */
.upd_chapters { display: grid; gap: var(--space_1); margin: 0; padding: 0; list-style: none; }

/* one chapter: read marker then the open button */
.upd_chapter { display: flex; align-items: stretch; gap: var(--space_1); }

/* read marker button meets the touch size */
.upd_mark { display: grid; place-items: center; width: 44px; min-height: 44px; flex-shrink: 0; padding: 0; border: 0; border-radius: var(--radius_sm); background: transparent; cursor: pointer; }

/* hover wash on the marker */
.upd_mark:hover { background: var(--tint_paper); }

/* focus ring on the marker */
.upd_mark:focus-visible { outline: 2px solid var(--color_periwinkle); outline-offset: 2px; }

/* unread dot is filled rose */
.upd_dot { width: 12px; height: 12px; border-radius: var(--radius_pill); background: var(--color_rose); }

/* read dot is a hollow ring, so the state is not shown by color alone */
.upd_chapter.is_read .upd_dot { background: transparent; box-shadow: inset 0 0 0 2px var(--color_faint); }

/* the chapter button fills the row */
.upd_open { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space_1) var(--space_2); flex: 1; min-width: 0; min-height: 44px; padding: var(--space_1) var(--space_2); border: 0; border-radius: var(--radius_sm); background: transparent; color: var(--color_paper); font: inherit; text-align: left; cursor: pointer; }

/* hover wash on the chapter */
.upd_open:hover { background: var(--tint_paper); }

/* focus ring on the chapter */
.upd_open:focus-visible { outline: 2px solid var(--color_periwinkle); outline-offset: 2px; }

/* read chapters use muted text */
.upd_chapter.is_read .upd_label { color: var(--color_muted); }

/* language badge */
.upd_lang { padding: 2px var(--space_2); border-radius: var(--radius_xs); background: var(--tint_periwinkle); color: var(--color_periwinkle); font-size: var(--text_xs); font-weight: 700; }

/* chapter label */
.upd_label { font-weight: 700; overflow-wrap: anywhere; }

/* group and time, pushed right on wide screens */
.upd_meta { margin-left: auto; font-size: var(--text_sm); color: var(--color_muted); }

/* ===== Lists ===== */

/* create form stacked */
.lst_create { display: grid; gap: var(--space_2); }

/* create row wraps on phones */
.lst_create_row { display: flex; flex-wrap: wrap; gap: var(--space_2); }

/* the name field takes the spare room */
.lst_create_row .lib_input:first-child { flex: 1 1 220px; }

/* the create button matches the field height */
.lst_create_row .btn { min-height: 44px; }

/* one listing section */
.lst_section { display: grid; gap: var(--space_3); }

/* section heading */
.lst_section_title { margin: 0; font-size: var(--text_lg); }

/* tile grid fills the width */
.lst_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space_4); margin: 0; padding: 0; list-style: none; }

/* one tile */
.lst_tile { display: grid; gap: var(--space_2); padding: var(--space_2); border-radius: var(--radius_md); background: var(--color_panel_raised); color: var(--color_paper); text-decoration: none; transition: background var(--duration_fast) var(--ease_hover); }

/* hover lifts the tile color */
.lst_tile:hover { background: var(--color_panel_high); }

/* focus ring on the tile */
.lst_tile:focus-visible { outline: 2px solid var(--color_periwinkle); outline-offset: 2px; }

/* four cover mosaic */
.lst_mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius_sm); background: var(--color_panel_high); }

/* mosaic covers and blanks fill their cell */
.lst_mosaic img, .lst_mosaic span { width: 100%; height: 100%; object-fit: cover; background: var(--color_panel); }

/* tile name */
.lst_tile_name { font-weight: 700; overflow-wrap: anywhere; }

/* tile meta line */
.lst_tile_meta { font-size: var(--text_xs); color: var(--color_muted); }

/* list description */
.lst_description { margin: var(--space_2) 0; max-width: 65ch; color: var(--color_muted); line-height: var(--leading_body); white-space: pre-line; }

/* edit panel */
.lst_edit { padding: var(--space_3); border-radius: var(--radius_md); background: var(--color_panel_raised); }

/* the summary button keeps its button look */
.lst_edit summary { display: inline-flex; list-style: none; cursor: pointer; }

/* hide the default marker */
.lst_edit summary::-webkit-details-marker { display: none; }

/* edit fields stacked */
.lst_edit_form { display: grid; gap: var(--space_2); margin-top: var(--space_3); }

/* list titles in order */
.lst_items { display: grid; gap: var(--space_2); margin: 0; padding: 0; list-style: none; }

/* one title row */
.lst_item { display: flex; align-items: center; gap: var(--space_2); padding: var(--space_2); border-radius: var(--radius_md); background: var(--color_panel_raised); }

/* position number */
.lst_rank { width: 2ch; text-align: right; font-weight: 700; color: var(--color_faint); flex-shrink: 0; }

/* the open button holds the cover and the title */
.lst_item_open { display: flex; align-items: center; gap: var(--space_3); flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: var(--color_paper); font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius_sm); }

/* focus ring on the open button */
.lst_item_open:focus-visible { outline: 2px solid var(--color_periwinkle); outline-offset: 2px; }

/* title text wraps */
.lst_item_title { font-weight: 700; overflow-wrap: anywhere; }

/* owner tools on the right */
.lst_item_tools { display: flex; gap: var(--space_1); flex-shrink: 0; }

/* square icon buttons at the touch size */
.btn_icon { width: 44px; min-height: 44px; padding: 0; justify-content: center; }

/* disabled icon buttons fade */
.btn_icon:disabled { opacity: 0.4; cursor: default; }

/* ===== Add to list picker ===== */

/* the dialog box */
.atl_dialog { width: min(440px, calc(100vw - 2 * var(--space_4))); padding: 0; border: 0; border-radius: var(--radius_lg); background: var(--color_panel_raised); color: var(--color_paper); box-shadow: var(--shadow_lg); }

/* dim the page behind it */
.atl_dialog::backdrop { background: var(--scrim_backdrop); }

/* inner spacing */
.atl_body { display: grid; gap: var(--space_3); padding: var(--space_5); }

/* dialog title */
.atl_title { margin: 0; font-family: var(--font_display); font-size: var(--text_xl); }

/* which title is being added */
.atl_subject { margin: 0; color: var(--color_muted); overflow-wrap: anywhere; }

/* scrollable list of lists */
.atl_lists { display: grid; gap: var(--space_1); max-height: 45vh; margin: 0; padding: 0; overflow-y: auto; list-style: none; }

/* one toggle row */
.atl_toggle { display: grid; grid-template-columns: 28px 1fr; align-items: center; column-gap: var(--space_2); width: 100%; min-height: 48px; padding: var(--space_2); border: 1px solid var(--color_rule); border-radius: var(--radius_sm); background: transparent; color: var(--color_paper); font: inherit; text-align: left; cursor: pointer; }

/* hover wash */
.atl_toggle:hover { background: var(--tint_paper); }

/* focus ring */
.atl_toggle:focus-visible { outline: 2px solid var(--color_periwinkle); outline-offset: 2px; }

/* pressed rows get a rose border and wash */
.atl_toggle[aria-pressed="true"] { border-color: var(--color_rose); background: var(--tint_rose); }

/* the check box square */
.atl_check { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--color_faint); border-radius: var(--radius_xs); font-weight: 700; color: var(--color_on_accent); }

/* filled check when pressed */
.atl_toggle[aria-pressed="true"] .atl_check { border-color: var(--color_rose); background: var(--color_rose); }

/* list name */
.atl_name { font-weight: 700; overflow-wrap: anywhere; }

/* visibility and count */
.atl_meta { font-size: var(--text_xs); color: var(--color_muted); }

/* loading and empty notes */
.atl_note { padding: var(--space_2); color: var(--color_muted); }

/* new list form */
.atl_new { display: grid; gap: var(--space_2); padding-top: var(--space_3); border-top: 1px solid var(--color_rule); }

/* new list label */
.atl_label { font-size: var(--text_sm); font-weight: 700; color: var(--color_muted); }

/* new list row wraps */
.atl_new_row { display: flex; flex-wrap: wrap; gap: var(--space_2); }

/* new list field and select */
.atl_input, .atl_select { min-height: 44px; padding: var(--space_2) var(--space_3); border: 1px solid var(--color_rule); border-radius: var(--radius_sm); background: var(--color_panel); color: var(--color_paper); font: inherit; }

/* the name field takes spare room */
.atl_input { flex: 1 1 160px; }

/* create button matches field height */
.atl_new_row .btn { min-height: 44px; }

/* Done button on the right */
.atl_close { justify-self: end; min-height: 44px; }

/* birth year field in Settings, wide enough for four digits */
.st_year_input { width: 8.5em; min-height: 44px; padding: var(--space_2) var(--space_3); border: 1px solid var(--color_rule); border-radius: var(--radius_sm); background: var(--color_panel_raised); color: var(--color_paper); font: inherit; flex-shrink: 0; }

/* focus ring on the year field */
.st_year_input:focus-visible { outline: 2px solid var(--color_periwinkle); outline-offset: 2px; }

/* the "Add to list" button on My list cards */
.add_list_btn { min-height: 44px; }

/* phones: the chapter meta drops under the label */
@media (max-width: 560px) {
  /* meta on its own line */
  .upd_meta { margin-left: 0; width: 100%; }
  /* smaller title */
  .lib_title { font-size: var(--text_xl); }
}

/* calmer motion for readers who ask for it */
@media (prefers-reduced-motion: reduce) {
  /* no tile color fade */
  .lst_tile { transition: none; }
}