/* title_page.css: the advanced search page and the full title page, built only from the Dusk ink tokens */

/* while a discovery view shows, the home content steps aside no matter which script handled the address first */
body.discovery_open #main_content { display: none; }

/* the shared view container sits under the sticky nav */
.discovery_view { position: relative; z-index: var(--layer_content); min-height: 70vh; }

/* headings that receive focus on page change show no ring for mouse users */
.discovery_view [tabindex="-1"]:focus { outline: none; }

/* ===== advanced search ===== */

/* page padding follows the site gutter */
.adv_page { padding: var(--space_7) var(--gutter) var(--space_7); }

/* title row with the phone filter toggle */
.adv_head { display: flex; align-items: center; justify-content: space-between; gap: var(--space_4); margin-bottom: var(--space_5); }

/* page heading in the display face */
.adv_title { font-family: var(--font_display); font-weight: 400; font-size: var(--text_2xl); line-height: var(--leading_tight); margin: 0; text-wrap: balance; }

/* the filter toggle only matters on phones */
.adv_filters_toggle { display: none; }

/* the summary drops its default marker and acts as a button */
.adv_filters_toggle > summary { list-style: none; }

/* hide the marker in WebKit too */
.adv_filters_toggle > summary::-webkit-details-marker { display: none; }

/* filters on the left, results on the right */
.adv_layout { display: grid; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); gap: var(--space_6); align-items: start; }

/* the filter rail stays in view and scrolls on its own */
.adv_rail { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain; padding: var(--space_4); background: var(--color_panel); border-radius: var(--radius_lg); box-shadow: 0 0 0 1px var(--tint_outline); scrollbar-width: thin; }

/* fields stack with even rhythm */
.adv_form { display: grid; gap: var(--space_5); }

/* one labeled field */
.adv_field { display: grid; gap: var(--space_2); }

/* fieldsets lose browser chrome */
.adv_group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space_2); }

/* field labels in sentence case, muted */
.adv_legend { padding: 0; font-size: var(--text_sm); font-weight: 700; color: var(--color_muted); }

/* text boxes and menus */
.adv_input { width: 100%; min-height: 44px; padding: var(--space_2) var(--space_3); background: var(--color_ink); color: var(--color_paper); border: 1px solid var(--color_rule); border-radius: var(--radius_sm); font: inherit; font-size: var(--text_md); }

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

/* small helper text */
.adv_hint { margin: 0; color: var(--color_muted); font-size: var(--text_sm); line-height: var(--leading_snug); text-wrap: pretty; }

/* links inside hints stay readable */
.adv_hint a { color: var(--color_paper); }

/* check chips wrap in rows */
.adv_checks { display: flex; flex-wrap: wrap; gap: var(--space_2); }

/* one check chip, the whole pill is the target */
.adv_check { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space_3); background: var(--color_panel_raised); color: var(--color_paper); border-radius: var(--radius_pill); font-size: var(--text_sm); cursor: pointer; transition: background-color var(--duration_fast) var(--ease_hover), box-shadow var(--duration_fast) var(--ease_hover); }

/* the real checkbox covers the chip invisibly so it stays keyboard and screen reader friendly */
.adv_check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }

/* hover lightens the chip */
.adv_check:hover { background: var(--color_panel_high); }

/* checked chips take the accent wash with a ring */
.adv_check:has(input:checked) { background: var(--tint_rose_strong); box-shadow: inset 0 0 0 1px var(--seal); }

/* keyboard focus on the hidden input rings the chip */
.adv_check:has(input:focus-visible) { outline: 2px solid var(--seal); outline-offset: 2px; }

/* locked chips read as unavailable */
.adv_check.is_disabled { opacity: 0.55; cursor: not-allowed; }

/* tag box groups its parts */
.adv_tags_box { gap: var(--space_3); }

/* label and switch side by side */
.adv_mode_row { display: flex; align-items: center; justify-content: space-between; gap: var(--space_3); font-size: var(--text_sm); color: var(--color_muted); }

/* the All or Any switch */
.adv_mode { display: inline-flex; padding: 2px; background: var(--color_ink); border-radius: calc(var(--radius_sm) + 2px); }

/* one switch half */
.adv_mode_btn { min-width: 52px; min-height: 40px; padding: 0 var(--space_3); background: transparent; border: 0; border-radius: var(--radius_sm); color: var(--color_muted); font: inherit; font-size: var(--text_sm); font-weight: 700; cursor: pointer; transition: background-color var(--duration_fast) var(--ease_hover), color var(--duration_fast) var(--ease_hover); }

/* the chosen half */
.adv_mode_btn[aria-pressed="true"] { background: var(--color_panel_high); color: var(--color_paper); }

/* the picker scrolls inside the rail */
.adv_tag_picker { display: grid; gap: var(--space_4); max-height: 360px; overflow-y: auto; padding-right: var(--space_1); scrollbar-width: thin; }

/* one tag group */
.adv_tag_group { display: grid; gap: var(--space_2); }

/* group name with a colored key dot */
.adv_tag_group_name { display: flex; align-items: center; gap: var(--space_2); margin: 0; font-size: var(--text_xs); font-weight: 700; color: var(--color_muted); }

/* the key dot before each group name */
.adv_tag_group_name::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--group_color, var(--color_faint)); }

/* genre tags are periwinkle */
[data-group="genre"] { --group_color: var(--color_periwinkle); }

/* theme tags are sage */
[data-group="theme"] { --group_color: var(--color_sage); }

/* format tags are honey */
[data-group="format"] { --group_color: var(--color_honey); }

/* content warnings are coral */
[data-group="content"] { --group_color: var(--color_coral); }

/* tags wrap in rows */
.adv_tag_list { display: flex; flex-wrap: wrap; gap: var(--space_1); }

/* one tag, three states */
.adv_tag { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 var(--space_3) 0 var(--space_2); background: var(--color_panel_raised); color: var(--color_paper); border: 1px solid transparent; border-radius: var(--radius_pill); font: inherit; font-size: var(--text_sm); cursor: pointer; transition: background-color var(--duration_fast) var(--ease_hover), border-color var(--duration_fast) var(--ease_hover), transform var(--duration_fast) var(--ease_out); }

/* a hidden pseudo element grows the target to 44 pixels tall without changing the look */
.adv_tag { position: relative; }

/* the taller invisible hit area */
.adv_tag::after { content: ""; position: absolute; inset: -4px 0; }

/* hover lightens */
.adv_tag:hover { background: var(--color_panel_high); }

/* press feedback */
.adv_tag:active { transform: scale(0.97); }

/* the state mark keeps a fixed width so names do not jump */
.adv_tag_mark { display: inline-block; width: 1ch; text-align: center; font-weight: 700; }

/* included tags take the accent */
.adv_tag[data-state="include"] { background: var(--tint_rose_strong); border-color: var(--seal); }

/* excluded tags are struck through with a coral ring */
.adv_tag[data-state="exclude"] { border-color: var(--color_coral); color: var(--color_muted); text-decoration: line-through; text-decoration-color: var(--color_coral); }

/* the reset button spans the rail */
.adv_reset { width: 100%; min-height: 44px; }

/* active filter chips above the results */
.adv_chips { display: flex; flex-wrap: wrap; gap: var(--space_2); margin: 0 0 var(--space_4); padding: 0; list-style: none; }

/* one removable chip */
.adv_chip { display: inline-flex; align-items: center; gap: var(--space_2); min-height: 44px; padding: 0 var(--space_2) 0 var(--space_3); background: var(--color_panel_raised); color: var(--color_paper); border: 0; border-radius: var(--radius_pill); font: inherit; font-size: var(--text_sm); cursor: pointer; transition: background-color var(--duration_fast) var(--ease_hover); }

/* the remove mark in a small circle */
.adv_chip span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tint_paper_strong); }

/* hover warms the chip */
.adv_chip:hover { background: var(--color_panel_high); }

/* count line over the grid */
.adv_count { margin: 0 0 var(--space_3); color: var(--color_muted); font-size: var(--text_sm); font-variant-numeric: tabular-nums; }

/* results dim softly while a new page loads */
.adv_results[aria-busy="true"] .adv_grid { opacity: 0.55; transition: opacity var(--duration_base) var(--ease_hover); }

/* the results grid fills the column */
.adv_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card_width), 1fr)); gap: var(--space_5) var(--space_4); }

/* link cards share the button card look */
.adv_card { color: var(--color_paper); text-decoration: none; width: auto; }

/* placeholder cards keep the grid shape */
.adv_skeleton { flex: none; width: 100%; }

/* official English badge on the cover */
.adv_badge { position: absolute; left: var(--space_2); bottom: var(--space_2); z-index: 2; padding: 2px var(--space_2); background: var(--scrim_chip); color: var(--color_paper); border-radius: var(--radius_xs); font-size: var(--text_xs); font-weight: 700; }

/* empty and error states sit centered in the column */
.adv_empty { display: grid; justify-items: start; gap: var(--space_3); max-width: 46ch; padding: var(--space_6) 0; }

/* the first line of an empty or error state */
.adv_empty_title { margin: 0; font-family: var(--font_display); font-size: var(--text_lg); }

/* pager under the grid */
.adv_pager { display: flex; align-items: center; justify-content: center; gap: var(--space_4); margin-top: var(--space_6); }

/* pager buttons meet the 44 pixel target */
.adv_pager .btn { min-height: 44px; }

/* unavailable pager ends */
.adv_pager .is_disabled { opacity: 0.45; pointer-events: none; }

/* page numbers do not shift */
.adv_page_text { color: var(--color_muted); font-size: var(--text_sm); font-variant-numeric: tabular-nums; }

/* ===== full title page ===== */

/* the page keeps the banner behind the header */
.tp_page { position: relative; padding-bottom: var(--space_7); }

/* the wide blurred banner under the nav */
.tp_banner { position: absolute; inset: -72px 0 auto 0; height: 380px; overflow: hidden; z-index: -1; }

/* the cover art blown up and blurred */
.tp_banner_art { position: absolute; inset: -40px; background-size: cover; background-position: center 30%; filter: blur(28px) brightness(0.42) saturate(0.9); transform: scale(1.05); }

/* the banner fades into the page color */
.tp_banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--scrim_hero_soft), var(--scrim_hero_mid) 60%, var(--color_ink)); }

/* cover beside the intro */
.tp_head { display: grid; grid-template-columns: clamp(140px, 18vw, 240px) minmax(0, 1fr); gap: var(--space_6); padding: var(--space_7) var(--gutter) var(--space_5); align-items: end; }

/* the cover with a hairline outline for depth */
.tp_cover { width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; border-radius: var(--radius_md); background: var(--color_panel); box-shadow: var(--shadow_lg), 0 0 0 1px var(--tint_outline); }

/* placeholder cover while loading */
.tp_cover_skeleton { display: block; }

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

/* the title is the loudest thing on the page */
.tp_title { margin: 0; font-family: var(--font_display); font-weight: 400; font-size: clamp(28px, 4.2vw, 56px); line-height: var(--leading_tight); text-wrap: balance; overflow-wrap: anywhere; }

/* alternate titles under it */
.tp_alt { margin: 0; color: var(--color_muted); font-size: var(--text_md); }

/* the count of hidden alt titles */
.tp_alt_more { color: var(--color_faint); }

/* story and art credits share one row */
.tp_credits { display: flex; flex-wrap: wrap; column-gap: var(--space_5); }

/* one credit line */
.tp_credit { margin: 0; font-size: var(--text_md); }

/* the role word before the names */
.tp_credit_role { color: var(--color_muted); margin-right: var(--space_1); }

/* author and artist links, padded to a comfortable target */
.tp_person { display: inline-block; padding: var(--space_2) 0; color: var(--color_paper); text-decoration-color: var(--color_faint); text-underline-offset: 3px; }

/* hover makes the link obvious */
.tp_person:hover { text-decoration-color: var(--seal); }

/* short facts in a row */
.tp_facts { display: flex; flex-wrap: wrap; gap: var(--space_1) var(--space_4); margin: 0; padding: 0; list-style: none; color: var(--color_muted); font-size: var(--text_md); }

/* rating and follows */
.tp_stats { display: flex; gap: var(--space_6); margin: 0; }

/* one number with its label underneath */
.tp_stats div { display: flex; flex-direction: column-reverse; }

/* the label */
.tp_stats dt { color: var(--color_muted); font-size: var(--text_xs); }

/* the number */
.tp_stats dd { margin: 0; font-size: var(--text_xl); font-weight: 700; font-variant-numeric: tabular-nums; }

/* action buttons */
.tp_actions { display: flex; flex-wrap: wrap; gap: var(--space_3); align-items: center; margin-top: var(--space_2); }

/* main buttons meet the 44 pixel target */
.tp_actions .btn, .tp_actions .status_select { min-height: 44px; }

/* the My list control slot lays out like a button */
.tp_list_slot { display: inline-flex; }

/* the body below the header */
.tp_body { padding: 0 var(--gutter); }

/* tags, description, and official links */
.tp_about { display: grid; gap: var(--space_4); max-width: 900px; margin-bottom: var(--space_6); }

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

/* one tag chip link with its group dot */
.tp_tag { display: inline-flex; align-items: center; gap: var(--space_2); min-height: 44px; padding: 0 var(--space_3); background: var(--color_panel_raised); color: var(--color_paper); border-radius: var(--radius_pill); font-size: var(--text_sm); text-decoration: none; transition: background-color var(--duration_fast) var(--ease_hover); }

/* the group dot */
.tp_tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--group_color, var(--color_faint)); }

/* hover lightens */
.tp_tag:hover { background: var(--color_panel_high); }

/* description clamps to a few lines until opened */
.tp_description p { margin: 0; color: var(--color_muted); line-height: var(--leading_body); white-space: pre-line; max-width: 72ch; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* opened description shows everything */
.tp_description[data-expanded="true"] p { -webkit-line-clamp: unset; display: block; }

/* the show more control meets the target size */
.tp_more { justify-self: start; min-height: 44px; color: var(--color_paper); }

/* section tabs reuse the dialog tabs with page padding */
.tp_tabs { padding: 0; margin-bottom: var(--space_4); }

/* tab buttons meet the target size */
.tp_tabs .tab_btn { min-height: 44px; }

/* the section panel */
.tp_panel { min-height: 240px; }

/* panel focus ring only for keyboard users */
.tp_panel:focus-visible { outline: 2px solid var(--seal); outline-offset: 4px; border-radius: var(--radius_sm); }

/* language chips and the order switch */
.tp_chapter_tools { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space_4); margin-bottom: var(--space_4); }

/* the language fieldset */
.tp_languages { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space_2); flex: 1 1 320px; }

/* the order switch keeps its width */
.tp_order { flex: 0 0 auto; min-width: 240px; }

/* order buttons meet the target size */
.tp_order .segment_button { min-height: 40px; }

/* chosen order */
.tp_order .segment_button[aria-pressed="true"] { background: var(--color_panel_high); color: var(--color_paper); }

/* volumes stack */
.tp_volumes { display: grid; gap: var(--space_3); }

/* one volume, a spine on the left marks it */
.tp_volume { background: var(--color_panel); border-radius: var(--radius_lg); box-shadow: inset 3px 0 0 var(--color_rule); }

/* open volumes light the spine */
.tp_volume[open] { box-shadow: inset 3px 0 0 var(--color_lavender); }

/* the volume header row */
.tp_volume_head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space_3); min-height: 52px; padding: var(--space_3) var(--space_4) var(--space_3) var(--space_5); cursor: pointer; list-style: none; border-radius: var(--radius_lg); }

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

/* a chevron that turns when open */
.tp_volume_head::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--color_muted); border-bottom: 2px solid var(--color_muted); transform: rotate(-45deg); transition: transform var(--duration_base) var(--ease_out); align-self: center; flex-shrink: 0; }

/* open state chevron points down */
.tp_volume[open] > .tp_volume_head::after { transform: rotate(45deg); }

/* volume name in the display face */
.tp_volume_name { font-family: var(--font_display); font-size: var(--text_lg); }

/* range text pushes right */
.tp_volume_range { margin-left: auto; color: var(--color_muted); font-size: var(--text_sm); font-variant-numeric: tabular-nums; }

/* chapter rows inside a volume */
.tp_chapter_list { list-style: none; margin: 0; padding: 0 var(--space_2) var(--space_2) var(--space_3); display: grid; gap: 2px; }

/* one chapter row as a grid */
.tp_chapter { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 13rem) 6.5rem auto; align-items: center; gap: var(--space_3); padding-right: var(--space_2); border-radius: var(--radius_md); transition: background-color var(--duration_fast) var(--ease_hover); }

/* hover lightens the row */
.tp_chapter:hover { background: var(--color_panel_raised); }

/* the main reading button fills its cell */
.tp_chapter_main { display: flex; align-items: center; gap: var(--space_3); min-height: 48px; min-width: 0; padding: 0 var(--space_3); background: transparent; border: 0; border-radius: var(--radius_md); color: var(--color_paper); font: inherit; text-align: left; cursor: pointer; }

/* unread chapters show a rose dot */
.tp_read_dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--seal); }

/* read chapters show a hollow dot */
.tp_chapter.is_read .tp_read_dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--color_faint); }

/* read chapters fade a step */
.tp_chapter.is_read .tp_chapter_number, .tp_chapter.is_read .tp_chapter_title { color: var(--color_faint); }

/* the chapter where reading stopped gets a lavender ring */
.tp_chapter.is_current { box-shadow: inset 0 0 0 1px var(--color_lavender); }

/* chapter number never shifts */
.tp_chapter_number { flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* chapter title truncates */
.tp_chapter_title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color_muted); }

/* language code in a small box */
.tp_language { justify-self: start; padding: 2px var(--space_1); border-radius: var(--radius_xs); background: var(--tint_paper_strong); color: var(--color_paper); font-size: var(--text_xs); font-weight: 700; text-decoration: none; cursor: help; }

/* group names truncate */
.tp_groups { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color_muted); font-size: var(--text_sm); }

/* Tsuzuku group links stand out */
.tp_group_local { color: var(--color_teal); text-underline-offset: 3px; }

/* upload time right aligned */
.tp_time { color: var(--color_faint); font-size: var(--text_sm); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* comment bubbles meet the target size */
.tp_talk { min-height: 40px; }

/* rows without a room keep the column width */
.tp_talk_space { display: inline-block; width: 56px; }

/* the art gallery */
.tp_art { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space_4); margin: 0; padding: 0; list-style: none; }

/* one cover link */
.tp_art_item { display: grid; gap: var(--space_2); color: var(--color_paper); text-decoration: none; }

/* cover images with a hairline outline */
.tp_art_item img { width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; border-radius: var(--radius_md); background: var(--color_panel); box-shadow: 0 0 0 1px var(--tint_outline); }

/* volume label under each cover */
.tp_art_label { font-size: var(--text_sm); color: var(--color_muted); }

/* missing title message */
.tp_missing { display: grid; justify-items: start; gap: var(--space_4); padding: var(--space_7) var(--gutter); }

/* the full page link in the quick peek dialog */
.detail_full_link { display: inline-flex; align-items: center; min-height: 44px; margin: calc(var(--space_2) * -1) 0 var(--space_2); color: var(--color_paper); font-size: var(--text_md); font-weight: 700; text-underline-offset: 3px; }

/* ===== tablets ===== */
@media (max-width: 960px) {
  /* rows drop the group column */
  .tp_chapter { grid-template-columns: minmax(0, 1fr) 40px 6rem auto; }
  /* groups move out of the grid */
  .tp_groups { display: none; }
}

/* ===== phones ===== */
@media (max-width: 720px) {
  /* the filter toggle shows on phones */
  .adv_filters_toggle { display: block; }
  /* one column */
  .adv_layout { grid-template-columns: minmax(0, 1fr); gap: var(--space_4); }
  /* the rail folds away until the toggle opens it */
  .adv_rail { display: none; position: static; max-height: none; }
  /* opened rail */
  .adv_rail.is_open { display: block; }
  /* banner is shorter */
  .tp_banner { height: 300px; }
  /* cover above the text, smaller */
  .tp_head { grid-template-columns: 112px minmax(0, 1fr); gap: var(--space_4); padding-top: var(--space_6); align-items: start; }
  /* the action row spans the full width under the cover */
  .tp_actions { grid-column: 1 / -1; }
  /* chapter rows become two lines */
  .tp_chapter { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "main main talk" "lang time talk"; row-gap: 0; padding-bottom: var(--space_2); }
  /* main button on top */
  .tp_chapter_main { grid-area: main; }
  /* language under it */
  .tp_language { grid-area: lang; margin-left: calc(var(--space_3) + 8px + var(--space_3)); }
  /* time beside the language */
  .tp_time { grid-area: time; text-align: left; }
  /* bubble on the right across both lines */
  .tp_talk, .tp_talk_space { grid-area: talk; }
  /* the order switch spans the width */
  .tp_order { min-width: 0; width: 100%; }
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  /* no chevron turn, no dimming fade, no press scale */
  .tp_volume_head::after, .adv_results .adv_grid, .adv_tag, .adv_check, .adv_chip, .tp_chapter, .tp_tag { transition: none; }
  /* presses stay still */
  .adv_tag:active { transform: none; }
}