/* styles.css is the main stylesheet, every value comes from tokens.css */

/* ===== base ===== */

/* make sizes include padding and borders */
*, *::before, *::after { box-sizing: border-box; }

/* base page look */
html, body {
  /* remove default spacing */
  margin: 0;
  /* charcoal page background */
  background: var(--color_ink);
  /* soft lilac white text */
  color: var(--color_paper);
  /* body font */
  font-family: var(--font_body);
  /* default text size */
  font-size: var(--text_base);
  /* comfortable line spacing */
  line-height: var(--leading_body);
  /* crisper text on macOS */
  -webkit-font-smoothing: antialiased;
  /* crisper text on macOS in Firefox */
  -moz-osx-font-smoothing: grayscale;
}

/* the hidden attribute always wins over display rules */
[hidden] { display: none !important; }

/* stop sideways scrolling on phones */
body { overflow-x: hidden; }

/* lock scrolling when a dialog or reader is open */
body.no_scroll { overflow: hidden; }

/* links use the periwinkle info color */
a { color: var(--color_periwinkle); text-underline-offset: 3px; }

/* images never overflow their box */
img { max-width: 100%; display: block; }

/* headings wrap into balanced lines */
h1, h2, h3 { text-wrap: balance; }

/* paragraphs avoid lonely last words */
p { text-wrap: pretty; }

/* buttons and inputs use the page font */
button, input, select, textarea { font: inherit; color: inherit; }

/* visible focus ring in the accent for keyboard users */
:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; border-radius: var(--radius_xs); }

/* hide text visually but keep it for screen readers */
.visually_hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* skip link sits off screen until focused */
.skip_link { position: absolute; left: -999px; top: var(--space_2); background: var(--seal); color: var(--color_on_accent); padding: var(--space_2) var(--space_4); z-index: var(--layer_toast); border-radius: var(--radius_sm); }

/* skip link slides in when focused */
.skip_link:focus { left: var(--space_2); }

/* ===== top navigation ===== */

/* sticky bar across the top */
.top_nav {
  /* stays at the top while scrolling */
  position: sticky;
  /* pinned to the very top */
  top: 0;
  /* above page content */
  z-index: var(--layer_nav);
  /* lay items in a row */
  display: flex;
  /* center items vertically */
  align-items: center;
  /* space between items */
  gap: var(--space_5);
  /* inner spacing */
  padding: var(--space_3) var(--gutter);
  /* fade from the page color so the hero shows through */
  background: linear-gradient(to bottom, var(--scrim_top), var(--scrim_clear));
  /* fade the solid layer in on scroll */
  transition: background-color var(--duration_base) var(--ease_hover);
}

/* solid frosted bar once the page scrolls */
.top_nav.is_scrolled { background: var(--scrim_bar); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--tint_outline); }

/* logo link layout */
.wordmark { display: flex; align-items: center; gap: var(--space_3); text-decoration: none; flex-shrink: 0; color: var(--color_paper); }

/* rose seal square with the kanji */
.wordmark_seal {
  /* fixed square size */
  width: 34px;
  /* fixed square size */
  height: 34px;
  /* center the character */
  display: grid;
  /* center the character */
  place-items: center;
  /* seal rose fill */
  background: var(--seal);
  /* dark character on the pastel */
  color: var(--color_on_accent);
  /* slightly rounded like a stamp */
  border-radius: var(--radius_sm);
  /* tilted a little like a hand pressed stamp */
  transform: rotate(-6deg);
  /* character size */
  font-size: 19px;
  /* bold character */
  font-weight: 700;
}

/* product name next to the seal */
.wordmark_text { font-family: var(--font_display); font-size: 20px; letter-spacing: 0.03em; white-space: nowrap; }

/* the smaller MANGA after TSUZUKU in the wordmark */
.wordmark_sub { font-size: 0.62em; letter-spacing: 0.16em; color: var(--color_muted); vertical-align: 0.18em; }

/* section links row */
.nav_links { display: flex; gap: var(--space_1); }

/* section link style, padded so the hit area is generous */
.nav_links a { color: var(--color_muted); text-decoration: none; font-size: var(--text_md); padding: var(--space_2) var(--space_3); border-radius: var(--radius_pill); transition: color var(--duration_fast) var(--ease_hover), background-color var(--duration_fast) var(--ease_hover); }

/* brighten links on hover with a soft wash */
.nav_links a:hover { color: var(--color_paper); background: var(--tint_paper); }

/* search box pushes to the right side */
.search_form { margin-left: auto; }

/* search input look */
.search_form input {
  /* default width */
  width: 240px;
  /* soft raised fill instead of a hard border */
  background: var(--tint_paper);
  /* hairline border that only shows on focus */
  border: 1px solid transparent;
  /* inner spacing */
  padding: var(--space_2) var(--space_4);
  /* pill shape */
  border-radius: var(--radius_pill);
  /* sixteen pixels stops iOS from zooming in */
  font-size: var(--text_base);
  /* soft color changes */
  transition: background-color var(--duration_fast) var(--ease_hover), border-color var(--duration_fast) var(--ease_hover);
}

/* placeholder text in the search box */
.search_form input::placeholder { color: var(--color_faint); }

/* search input gets a clear accent edge when focused */
.search_form input:focus { background: var(--color_panel_raised); border-color: var(--seal); outline: none; }

/* sign in button and user menu area */
.account_area { position: relative; flex-shrink: 0; }

/* ===== buttons ===== */

/* shared button base */
.btn {
  /* lay icon and text in a row */
  display: inline-flex;
  /* center content */
  align-items: center;
  /* center content across */
  justify-content: center;
  /* space between icon and text */
  gap: var(--space_2);
  /* forty pixel minimum height for easy tapping */
  min-height: 40px;
  /* inner spacing */
  padding: var(--space_2) var(--space_5);
  /* no default border */
  border: 1px solid transparent;
  /* rounded corners */
  border-radius: var(--radius_sm);
  /* bold label */
  font-weight: 700;
  /* label size */
  font-size: var(--text_md);
  /* hand cursor */
  cursor: pointer;
  /* links styled as buttons lose underline */
  text-decoration: none;
  /* quick press and color feedback */
  transition: background-color var(--duration_fast) var(--ease_hover), border-color var(--duration_fast) var(--ease_hover), transform var(--duration_fast) var(--ease_out);
}

/* pressed buttons shrink a touch */
.btn:active { transform: scale(0.97); }

/* main action button, rose with dark text */
.btn_primary { background: var(--seal); color: var(--color_on_accent); }

/* deeper rose on hover */
.btn_primary:hover { background: var(--seal_deep); }

/* secondary button, a quiet raised surface */
.btn_secondary { background: var(--color_panel_high); color: var(--color_paper); }

/* secondary hover gets a light wash on top */
.btn_secondary:hover { background: var(--color_rule); }

/* quiet outlined button */
.btn_ghost { background: transparent; border-color: var(--color_rule); color: var(--color_paper); }

/* outlined button hover fills softly */
.btn_ghost:hover { background: var(--tint_paper); border-color: var(--color_faint); }

/* small button size */
.btn_small { min-height: 34px; padding: var(--space_1) var(--space_3); font-size: var(--text_sm); }

/* disabled buttons look faded */
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ===== hero banner ===== */

/* the big featured area */
.hero {
  /* allow layered backgrounds */
  position: relative;
  /* tall banner */
  min-height: min(70vh, 640px);
  /* pull up under the nav bar */
  margin-top: -64px;
  /* two column layout: text and cover */
  display: grid;
  /* text column wider than cover column */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  /* center vertically */
  align-items: center;
  /* gap between columns */
  gap: var(--space_7);
  /* inner spacing, extra at top for the nav */
  padding: 128px var(--gutter) var(--space_8);
  /* keep blurred backdrop inside */
  overflow: hidden;
  /* layer above backdrop */
  isolation: isolate;
}

/* blurred cover filling the background */
.hero_backdrop {
  /* fill the hero */
  position: absolute;
  /* stretch past edges so blur has no gaps */
  inset: -40px;
  /* cover image fills the area */
  background-size: cover;
  /* center the image */
  background-position: center 30%;
  /* heavy blur, dimmed and slightly desaturated so the pastels lead */
  filter: blur(32px) brightness(0.5) saturate(0.85);
  /* behind everything */
  z-index: -2;
  /* slow fade in when loaded */
  animation: fade_in 700ms var(--ease_out) both;
}

/* halftone screentone dots plus a fade into the page, the signature touch */
.hero::after {
  /* empty decorative layer */
  content: "";
  /* fill the hero */
  position: absolute;
  /* fill the hero */
  inset: 0;
  /* dot pattern like manga screentone over a fade into the page color */
  background:
    radial-gradient(circle, var(--scrim_dots) 1.3px, transparent 1.5px) 0 0 / 7px 7px,
    linear-gradient(to right, var(--scrim_hero_strong) 0%, var(--scrim_hero_mid) 48%, var(--scrim_hero_soft) 100%),
    linear-gradient(to top, var(--color_ink) 0%, var(--scrim_clear) 40%);
  /* between backdrop and content */
  z-index: -1;
}

/* text column in the hero */
.hero_text { max-width: 720px; }

/* small line above the title */
.hero_kicker { color: var(--color_muted); font-size: var(--text_md); margin: 0 0 var(--space_3); display: flex; align-items: center; gap: var(--space_2); }

/* teal live dot before the kicker text */
.hero_kicker::before { content: ""; width: 8px; height: 8px; background: var(--color_teal); border-radius: 50%; box-shadow: 0 0 0 4px var(--tint_teal); flex-shrink: 0; }

/* huge title */
.hero_title {
  /* heading font */
  font-family: var(--font_display);
  /* scale with screen size */
  font-size: var(--text_hero);
  /* display font has its own weight */
  font-weight: 400;
  /* tight lines for big type */
  line-height: var(--leading_tight);
  /* slightly tighter tracking for big type */
  letter-spacing: -0.01em;
  /* remove default margin, add space below */
  margin: 0 0 var(--space_4);
  /* stop very long titles from overflowing */
  overflow-wrap: anywhere;
  /* cap at three lines */
  display: -webkit-box;
  /* cap at three lines */
  -webkit-line-clamp: 3;
  /* cap at three lines */
  -webkit-box-orient: vertical;
  /* hide overflow from the cap */
  overflow: hidden;
}

/* short description in the hero */
.hero_description {
  /* softer text */
  color: var(--color_muted);
  /* slightly larger text */
  font-size: var(--text_lg);
  /* readable leading */
  line-height: var(--leading_body);
  /* space below */
  margin: 0 0 var(--space_5);
  /* cap at three lines */
  display: -webkit-box;
  /* cap at three lines */
  -webkit-line-clamp: 3;
  /* cap at three lines */
  -webkit-box-orient: vertical;
  /* hide overflow from the cap */
  overflow: hidden;
  /* keep line length readable */
  max-width: 56ch;
}

/* tag chips row under the title */
.hero_tags { display: flex; flex-wrap: wrap; gap: var(--space_2); margin: 0 0 var(--space_5); padding: 0; list-style: none; }

/* one tag chip in a lavender wash */
.hero_tags li { font-size: var(--text_sm); color: var(--color_lavender); border-radius: var(--radius_pill); padding: 2px var(--space_3); background: var(--tint_lavender); }

/* hero buttons row */
.hero_actions { display: flex; gap: var(--space_3); flex-wrap: wrap; }

/* cover shown sharp on the right like a pinned manga panel */
.hero_cover {
  /* keep the panel to a sensible size */
  justify-self: center;
  /* panel width */
  width: min(300px, 100%);
  /* portrait cover shape */
  aspect-ratio: 5 / 7;
  /* fit image inside */
  object-fit: cover;
  /* paper colored panel frame */
  border: 5px solid var(--color_paper);
  /* soft corners on the frame */
  border-radius: var(--radius_xs);
  /* slight tilt like a pinned page */
  transform: rotate(2deg);
  /* pastel offset block like a printed panel, plus a soft lift */
  box-shadow: 12px 12px 0 var(--seal), var(--shadow_lg);
  /* placeholder color before load */
  background: var(--color_panel);
}

/* loading block for the hero */
.hero_skeleton { width: min(560px, 80%); height: 220px; border-radius: var(--radius_lg); background: var(--color_panel); position: relative; overflow: hidden; }

/* ===== rows of covers ===== */

/* stack rows with space between */
.rows { display: flex; flex-direction: column; gap: var(--space_6); padding: var(--space_2) 0 var(--space_7); position: relative; z-index: var(--layer_content); }

/* one row */
.row { position: relative; }

/* row heading */
.row_title { font-family: var(--font_display); font-size: clamp(18px, 1.9vw, 22px); font-weight: 400; margin: 0 var(--gutter) var(--space_2); }

/* the scrolling track of cards */
.row_track {
  /* cards side by side */
  display: flex;
  /* space between cards */
  gap: var(--space_4);
  /* scroll sideways */
  overflow-x: auto;
  /* hide vertical overflow */
  overflow-y: visible;
  /* page side padding plus room for hover lift and shadow */
  padding: var(--space_3) var(--gutter) var(--space_5);
  /* snap cards into place */
  scroll-snap-type: x proximity;
  /* align snap with padding */
  scroll-padding: 0 var(--gutter);
  /* hide scrollbar in Firefox */
  scrollbar-width: none;
  /* smooth arrow scrolling */
  scroll-behavior: smooth;
}

/* hide scrollbar in Chrome and Safari */
.row_track::-webkit-scrollbar { display: none; }

/* arrow buttons at the row edges */
.row_arrow {
  /* sit over the track */
  position: absolute;
  /* line up with the cards */
  top: 44px;
  /* match card area height */
  bottom: var(--space_5);
  /* arrow strip width */
  width: calc(var(--gutter) - 4px);
  /* at least wide enough to tap */
  min-width: 40px;
  /* fade from the page color */
  background: var(--scrim_bar);
  /* no border */
  border: 0;
  /* arrow color */
  color: var(--color_paper);
  /* big arrow symbol */
  font-size: 28px;
  /* hand cursor */
  cursor: pointer;
  /* above cards */
  z-index: 3;
  /* hidden until row hover */
  opacity: 0;
  /* fade in */
  transition: opacity var(--duration_base) var(--ease_hover);
}

/* left arrow on the left edge, rounded on the inside */
.row_arrow_left { left: 0; border-radius: 0 var(--radius_md) var(--radius_md) 0; }

/* right arrow on the right edge, rounded on the inside */
.row_arrow_right { right: 0; border-radius: var(--radius_md) 0 0 var(--radius_md); }

/* show arrows when hovering the row or focusing inside it */
.row:hover .row_arrow, .row_arrow:focus-visible { opacity: 1; }

/* hide arrows on touch screens where swiping works */
@media (hover: none) { .row_arrow { display: none; } }

/* one cover card */
.card {
  /* fixed card width */
  flex: 0 0 var(--card_width);
  /* snap to the start */
  scroll-snap-align: start;
  /* reset button look */
  background: none;
  /* reset button look */
  border: 0;
  /* reset button look */
  padding: 0;
  /* left aligned text */
  text-align: left;
  /* hand cursor */
  cursor: pointer;
  /* allow the lift effect */
  position: relative;
  /* smooth lift, interruptible */
  transition: transform var(--duration_base) var(--ease_out);
}

/* the cover image frame */
.card_cover_wrap {
  /* portrait cover shape */
  aspect-ratio: 5 / 7;
  /* rounded corners */
  border-radius: var(--radius_md);
  /* clip image to corners */
  overflow: hidden;
  /* placeholder color */
  background: var(--color_panel);
  /* allow badges and the ring on top */
  position: relative;
  /* soft resting shadow */
  box-shadow: var(--shadow_sm);
}

/* hairline outline plus accent ring that fades in on hover */
.card_cover_wrap::after {
  /* empty decorative layer */
  content: "";
  /* cover the image */
  position: absolute;
  /* cover the image */
  inset: 0;
  /* same corners as the frame */
  border-radius: inherit;
  /* hairline outline for depth on dark covers */
  box-shadow: inset 0 0 0 1px var(--tint_outline);
  /* never blocks clicks */
  pointer-events: none;
}

/* the accent ring layer, hidden at rest */
.card_cover_wrap::before {
  /* empty decorative layer */
  content: "";
  /* cover the image */
  position: absolute;
  /* cover the image */
  inset: 0;
  /* same corners as the frame */
  border-radius: inherit;
  /* rose ring */
  box-shadow: inset 0 0 0 2px var(--seal);
  /* hidden at rest */
  opacity: 0;
  /* fade with the lift */
  transition: opacity var(--duration_base) var(--ease_hover);
  /* above the image */
  z-index: 1;
  /* never blocks clicks */
  pointer-events: none;
}

/* lift and ring only on devices that really hover */
@media (hover: hover) and (pointer: fine) {
  /* lift the card */
  .card:hover { transform: translateY(-4px); }
  /* show the ring */
  .card:hover .card_cover_wrap::before { opacity: 1; }
}

/* keyboard focus shows the ring without moving */
.card:focus-visible { outline: none; }

/* ring on keyboard focus */
.card:focus-visible .card_cover_wrap::before { opacity: 1; }

/* pressed cards sink a touch */
.card:active { transform: scale(0.98); }

/* cover image fills the frame */
.card_cover_wrap img { width: 100%; height: 100%; object-fit: cover; }

/* progress bar for continue reading cards */
.card_progress { position: absolute; left: var(--space_2); right: var(--space_2); bottom: var(--space_2); height: 4px; border-radius: var(--radius_pill); background: var(--scrim_chip); overflow: hidden; z-index: 2; }

/* periwinkle filled part means reading */
.card_progress span { display: block; height: 100%; background: var(--color_periwinkle); border-radius: inherit; }

/* card title under the cover */
.card_title {
  /* small title text */
  font-size: var(--text_md);
  /* medium weight */
  font-weight: 500;
  /* space above */
  margin-top: var(--space_2);
  /* cap at two lines */
  display: -webkit-box;
  /* cap at two lines */
  -webkit-line-clamp: 2;
  /* cap at two lines */
  -webkit-box-orient: vertical;
  /* hide overflow from the cap */
  overflow: hidden;
  /* tighter lines */
  line-height: var(--leading_snug);
}

/* small line under the card title */
.card_meta { font-size: var(--text_xs); color: var(--color_faint); margin-top: 2px; }

/* placeholder cards while loading, with a sweeping shimmer */
.card_skeleton { flex: 0 0 var(--card_width); aspect-ratio: 5 / 7; border-radius: var(--radius_md); background: var(--color_panel); position: relative; overflow: hidden; }

/* shimmer band shared by every skeleton */
.card_skeleton::after, .hero_skeleton::after {
  /* empty decorative band */
  content: "";
  /* cover the block */
  position: absolute;
  /* cover the block */
  inset: 0;
  /* a soft light band */
  background: linear-gradient(100deg, transparent 20%, var(--tint_paper) 50%, transparent 80%);
  /* start off to the left */
  transform: translateX(-100%);
  /* sweep across, linear because it is constant motion */
  animation: shimmer 1.4s linear infinite;
}

/* message shown inside an empty row */
.row_empty { margin: 0 var(--gutter); color: var(--color_muted); }

/* ===== row reveal motion, only when motion.js turned it on ===== */

/* cards in a row that has not scrolled into view yet stay hidden */
.motion_ready .row:not(.is_revealed) .row_track > .card { opacity: 0; }

/* cards rise in with a short stagger once the row is revealed */
.motion_ready .row.is_revealed .row_track > .card { animation: card_rise var(--duration_slow) var(--ease_out) backwards; animation-delay: calc(var(--card_index, 0) * var(--stagger_step)); }

/* ===== search results ===== */

/* results area spacing */
.results_section { padding: var(--space_5) var(--gutter) var(--space_7); position: relative; z-index: var(--layer_content); }

/* results heading */
.results_title { font-family: var(--font_display); font-weight: 400; font-size: var(--text_xl); margin: 0 0 var(--space_4); }

/* grid of result cards */
.results_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card_width), 1fr)); gap: var(--space_5) var(--space_4); }

/* cards in the grid fill their cell */
.results_grid .card { flex: none; width: 100%; }

/* ===== dialogs shared ===== */

/* base dialog look */
dialog {
  /* surface color */
  background: var(--color_panel);
  /* paper text */
  color: var(--color_paper);
  /* no hard border, the shadow carries the edge */
  border: 0;
  /* rounded corners */
  border-radius: var(--radius_xl);
  /* no default padding */
  padding: 0;
  /* layered lift shadow plus a hairline edge */
  box-shadow: var(--shadow_lg), 0 0 0 1px var(--tint_outline);
}

/* dialogs scale and fade in from close to their trigger */
dialog[open] { animation: dialog_in var(--duration_slow) var(--ease_out); }

/* dimmed blurred layer behind dialogs */
dialog::backdrop { background: var(--scrim_backdrop); backdrop-filter: blur(6px); }

/* backdrop fades in with the dialog */
dialog[open]::backdrop { animation: fade_in var(--duration_slow) var(--ease_out); }

/* round close button in dialog corners */
.close_btn {
  /* pinned to the corner */
  position: absolute;
  /* top offset */
  top: var(--space_4);
  /* right offset */
  right: var(--space_4);
  /* circle size */
  width: 40px;
  /* circle size */
  height: 40px;
  /* make it a circle */
  border-radius: 50%;
  /* frosted dark circle */
  background: var(--scrim_chip);
  /* no border */
  border: 0;
  /* x color */
  color: var(--color_paper);
  /* big x symbol */
  font-size: 22px;
  /* hand cursor */
  cursor: pointer;
  /* above content */
  z-index: 5;
  /* center the x */
  line-height: 1;
  /* soft hover change */
  transition: background-color var(--duration_fast) var(--ease_hover), transform var(--duration_fast) var(--ease_out);
}

/* close button hover */
.close_btn:hover { background: var(--color_panel_high); }

/* close button press */
.close_btn:active { transform: scale(0.94); }

/* ===== detail modal ===== */

/* the big detail dialog */
.detail_modal {
  /* wide but within the screen */
  width: min(980px, calc(100vw - 24px));
  /* tall but within the screen */
  max-height: calc(100vh - 32px);
  /* scroll inside */
  overflow-y: auto;
}

/* top part with backdrop and info */
.detail_header {
  /* layer backdrop */
  position: relative;
  /* cover and text side by side */
  display: grid;
  /* cover column then text */
  grid-template-columns: 196px minmax(0, 1fr);
  /* space between */
  gap: var(--space_6);
  /* inner spacing */
  padding: var(--space_7) var(--space_6) var(--space_6);
  /* keep blur inside */
  overflow: hidden;
  /* layer stacking */
  isolation: isolate;
}

/* blurred backdrop inside the detail header */
.detail_backdrop { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(34px) brightness(0.38) saturate(0.85); z-index: -1; }

/* fade from the backdrop into the dialog surface */
.detail_header::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--color_panel) 0%, transparent 55%); z-index: -1; pointer-events: none; }

/* cover inside the detail header */
.detail_cover { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: var(--radius_md); box-shadow: var(--shadow_md), 0 0 0 1px var(--tint_outline); background: var(--color_ink); }

/* detail title */
.detail_title { font-family: var(--font_display); font-weight: 400; font-size: clamp(26px, 3.4vw, 40px); line-height: var(--leading_tight); margin: 0 0 var(--space_3); overflow-wrap: anywhere; padding-right: var(--space_7); }

/* facts line under the title */
.detail_facts { display: flex; flex-wrap: wrap; gap: var(--space_1) var(--space_4); color: var(--color_muted); font-size: var(--text_md); margin: 0 0 var(--space_4); padding: 0; list-style: none; }

/* description text */
.detail_description { color: var(--color_muted); margin: 0 0 var(--space_5); max-width: 68ch; white-space: pre-line; }

/* buttons row in the detail header */
.detail_actions { display: flex; flex-wrap: wrap; gap: var(--space_3); align-items: center; }

/* library status dropdown */
.status_select { min-height: 40px; background: var(--color_panel_high); border: 1px solid transparent; border-radius: var(--radius_sm); padding: var(--space_2) var(--space_3); color: var(--color_paper); }

/* tab buttons row */
.tab_list { display: flex; gap: var(--space_1); padding: 0 var(--space_6); box-shadow: inset 0 -1px 0 var(--color_rule); overflow-x: auto; scrollbar-width: none; }

/* one tab button */
.tab_btn {
  /* no fill */
  background: none;
  /* no border */
  border: 0;
  /* inner spacing */
  padding: var(--space_4) var(--space_4) var(--space_3);
  /* gray text */
  color: var(--color_muted);
  /* hand cursor */
  cursor: pointer;
  /* bold label */
  font-weight: 700;
  /* keep label on one line */
  white-space: nowrap;
  /* room for the underline */
  position: relative;
  /* soft color change */
  transition: color var(--duration_fast) var(--ease_hover);
}

/* the accent underline, drawn as a scaled bar so it can animate */
.tab_btn::after { content: ""; position: absolute; left: var(--space_3); right: var(--space_3); bottom: 0; height: 2px; border-radius: var(--radius_pill); background: var(--seal); transform: scaleX(0); transition: transform var(--duration_base) var(--ease_out); }

/* hover brightens the tab */
.tab_btn:hover { color: var(--color_paper); }

/* the selected tab */
.tab_btn[aria-selected="true"] { color: var(--color_paper); }

/* the selected tab shows its underline */
.tab_btn[aria-selected="true"]::after { transform: scaleX(1); }

/* content area under the tabs */
.tab_panel { padding: var(--space_5) var(--space_6) var(--space_6); min-height: 260px; }

/* new tab content crossfades in */
.tab_panel > * { animation: panel_in var(--duration_base) var(--ease_out) backwards; }

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

/* one chapter button */
.chapter_item {
  /* full width */
  width: 100%;
  /* number, title and date in a row */
  display: grid;
  /* column widths */
  grid-template-columns: 90px minmax(0, 1fr) auto;
  /* space between */
  gap: var(--space_4);
  /* center vertically */
  align-items: center;
  /* left aligned text */
  text-align: left;
  /* surface fill */
  background: var(--color_panel_raised);
  /* no border */
  border: 0;
  /* rounded */
  border-radius: var(--radius_sm);
  /* inner spacing */
  padding: var(--space_3) var(--space_4);
  /* hand cursor */
  cursor: pointer;
  /* color for the left marker */
  position: relative;
  /* soft hover */
  transition: background-color var(--duration_fast) var(--ease_hover);
}

/* chapter hover lifts the surface */
.chapter_item:hover { background: var(--color_panel_high); }

/* chapter you last read */
.chapter_item.is_current { background: var(--tint_rose); }

/* rose marker on the chapter you last read */
.chapter_item.is_current::before { content: ""; position: absolute; left: 0; top: var(--space_2); bottom: var(--space_2); width: 3px; border-radius: var(--radius_pill); background: var(--seal); }

/* current chapter hover */
.chapter_item.is_current:hover { background: var(--tint_rose_strong); }

/* chapter number */
.chapter_number { font-weight: 700; font-variant-numeric: tabular-nums; }

/* chapter title cut off with dots */
.chapter_name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color_muted); }

/* chapter date and group */
.chapter_meta { color: var(--color_faint); font-size: var(--text_sm); text-align: right; }

/* grid of related anime cards */
.media_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space_3); }

/* one related media card, outer radius equals inner radius plus padding */
.media_card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--space_3); background: var(--color_panel_raised); border-radius: var(--radius_md); padding: var(--space_2); }

/* small cover in the media card */
.media_card img { width: 76px; aspect-ratio: 5 / 7; object-fit: cover; border-radius: var(--radius_xs); background: var(--color_panel); box-shadow: 0 0 0 1px var(--tint_outline); }

/* media card title */
.media_title { font-weight: 700; font-size: var(--text_md); line-height: var(--leading_snug); margin: var(--space_1) 0; }

/* media card relation and format */
.media_meta { color: var(--color_faint); font-size: var(--text_sm); margin: 0 0 var(--space_2); }

/* row of watch link buttons */
.watch_links { display: flex; flex-wrap: wrap; gap: var(--space_2); padding-bottom: var(--space_1); }

/* list of songs */
.song_list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space_2); }

/* one song row */
.song_item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space_4); align-items: center; background: var(--color_panel_raised); border-radius: var(--radius_md); padding: var(--space_3) var(--space_4); }

/* opening or ending label like OP1 */
.song_slot { font-family: var(--font_display); font-size: var(--text_lg); color: var(--color_lavender); }

/* song title */
.song_title { font-weight: 700; margin: 0; }

/* artist and anime name */
.song_artist { color: var(--color_faint); font-size: var(--text_sm); margin: 0; }

/* song link buttons row */
.song_links { display: flex; gap: var(--space_2); flex-wrap: wrap; justify-content: flex-end; }

/* spotify button brand edge */
.link_spotify { border-color: var(--brand_spotify); }

/* youtube button brand edge */
.link_youtube { border-color: var(--brand_youtube); }

/* comment form */
.comment_form { display: grid; gap: var(--space_3); margin-bottom: var(--space_4); }

/* comment text box */
.comment_form textarea { background: var(--color_panel_raised); border: 1px solid transparent; border-radius: var(--radius_sm); padding: var(--space_3); min-height: 80px; resize: vertical; font-size: var(--text_base); }

/* list of comments */
.comment_list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space_3); }

/* one comment */
.comment_item { background: var(--color_panel_raised); border-radius: var(--radius_md); padding: var(--space_3) var(--space_4); }

/* hidden comments look faded for moderators */
.comment_item.is_hidden { opacity: 0.5; }

/* comment author line */
.comment_head { display: flex; justify-content: space-between; gap: var(--space_3); color: var(--color_faint); font-size: var(--text_sm); margin-bottom: var(--space_1); }

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

/* comment buttons row */
.comment_actions { display: flex; gap: var(--space_2); margin-top: var(--space_2); }

/* plain message inside a tab */
.panel_message { color: var(--color_muted); }

/* ===== auth modal ===== */

/* sign in dialog size */
.auth_modal { width: min(420px, calc(100vw - 24px)); }

/* sign in form layout */
.auth_form { display: grid; gap: var(--space_4); padding: var(--space_6) var(--space_6) var(--space_5); }

/* sign in heading */
.auth_form h2 { font-family: var(--font_display); font-weight: 400; margin: 0 0 var(--space_1); font-size: var(--text_2xl); }

/* field label */
.auth_form label { display: grid; gap: var(--space_2); font-size: var(--text_md); color: var(--color_muted); }

/* text fields */
.auth_form input { min-height: 44px; background: var(--color_panel_raised); border: 1px solid transparent; border-radius: var(--radius_sm); padding: var(--space_2) var(--space_3); color: var(--color_paper); font-size: var(--text_base); transition: border-color var(--duration_fast) var(--ease_hover); }

/* accent border on focus */
.auth_form input:focus { border-color: var(--seal); outline: none; }

/* age and terms agreement: checkbox beside its sentence instead of stacked */
.auth_form .auth_terms { display: flex; align-items: flex-start; gap: var(--space_2); font-size: var(--text_sm); line-height: 1.4; }

/* the checkbox keeps its normal size and lines up with the first line of text */
.auth_form .auth_terms input { min-height: 0; width: 18px; height: 18px; margin: 1px 0 0; padding: 0; flex: none; accent-color: var(--seal); }

/* links in the agreement stand out from the muted text */
.auth_form .auth_terms a { color: var(--color_paper); text-decoration: underline; }

/* error text in coral */
.form_error { color: var(--color_coral); font-size: var(--text_md); min-height: 1.2em; margin: 0; }

/* switch between sign in and sign up */
.auth_switch { font-size: var(--text_md); color: var(--color_muted); margin: 0; }

/* switch link styled as text */
.auth_switch button { background: none; border: 0; color: var(--color_periwinkle); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; }

/* ===== user menu ===== */

/* square avatar button with initial */
.avatar_btn { width: 40px; height: 40px; border-radius: var(--radius_sm); background: var(--seal); border: 0; font-weight: 700; cursor: pointer; color: var(--color_on_accent); transition: transform var(--duration_fast) var(--ease_out); }

/* avatar press */
.avatar_btn:active { transform: scale(0.95); }

/* dropdown under the avatar */
.user_menu { position: absolute; right: 0; top: 50px; background: var(--color_panel); border-radius: var(--radius_md); padding: var(--space_2); min-width: 220px; box-shadow: var(--shadow_lg), 0 0 0 1px var(--tint_outline); transform-origin: top right; animation: menu_in var(--duration_base) var(--ease_out); }

/* user info line */
.user_menu p { margin: var(--space_2) var(--space_3) var(--space_3); font-size: var(--text_md); color: var(--color_muted); overflow-wrap: anywhere; }

/* menu buttons, inner radius equals outer radius minus padding */
.user_menu button { width: 100%; min-height: 40px; text-align: left; background: none; border: 0; padding: var(--space_2) var(--space_3); border-radius: var(--radius_xs); cursor: pointer; transition: background-color var(--duration_fast) var(--ease_hover); }

/* menu button hover */
.user_menu button:hover { background: var(--color_panel_raised); }

/* ===== reader ===== */

/* full screen reader layer */
.reader { position: fixed; inset: 0; background: var(--color_ink); z-index: var(--layer_reader); overflow-y: auto; animation: fade_in var(--duration_base) var(--ease_out); }

/* reader top bar */
.reader_bar {
  /* stays on top while scrolling */
  position: sticky;
  /* pinned top */
  top: 0;
  /* above pages */
  z-index: 2;
  /* items in a row */
  display: flex;
  /* center vertically */
  align-items: center;
  /* space between */
  gap: var(--space_3);
  /* inner spacing */
  padding: var(--space_3) var(--gutter);
  /* frosted bar */
  background: var(--scrim_bar);
  /* frosted bar */
  backdrop-filter: blur(12px);
  /* hairline bottom edge */
  box-shadow: 0 1px 0 var(--tint_outline);
  /* hide while reading, slides with on screen easing */
  transition: transform var(--duration_slow) var(--ease_in_out);
}

/* reader bar slides away while scrolling down */
.reader_bar.is_hidden { transform: translateY(-100%); }

/* thin chapter progress track hanging just below the reader bar, so it still peeks out when the bar slides away */
.reader_progress { position: absolute; left: 0; right: 0; bottom: calc(var(--space_1) * -1); height: var(--space_1); background: var(--tint_outline); pointer-events: none; }

/* purple fill that grows from the left as pages are read */
.reader_progress_fill { display: block; height: 100%; background: var(--color_lavender); transform: scaleX(0); transform-origin: left center; transition: transform var(--duration_base) var(--ease_out); }

/* title block in the reader bar */
.reader_heading { min-width: 0; flex: 1; }

/* manga title in the reader bar */
.reader_title { margin: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* chapter and page counter */
.reader_sub { margin: 0; color: var(--color_faint); font-size: var(--text_sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* column of page images */
.reader_pages { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

/* each page image */
.reader_page { width: 100%; min-height: 300px; background: var(--color_panel); }

/* credit and navigation at the end of a chapter */
.reader_footer { max-width: 820px; margin: 0 auto; padding: var(--space_6) var(--space_4) 80px; text-align: center; color: var(--color_muted); }

/* next and previous buttons at the end */
.reader_footer_actions { display: flex; justify-content: center; gap: var(--space_3); margin-top: var(--space_4); flex-wrap: wrap; }

/* message while pages load */
.reader_loading { text-align: center; padding: 80px var(--space_4); color: var(--color_muted); }

/* page dimming from the settings slider, applied to page images only */
.reader_pages, .reader_stage { filter: brightness(var(--reader_dim, 1)); }

/* paged modes fill the screen instead of scrolling */
.reader.is_paged { overflow: hidden; display: flex; flex-direction: column; }

/* the page area takes the space under the bar in paged modes */
.reader.is_paged .reader_body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* stage that holds one page or a two page spread */
.reader_stage {
  /* take the leftover height */
  flex: 1;
  /* allow shrinking below the image size */
  min-height: 0;
  /* pages sit in a row */
  display: flex;
  /* centered across */
  justify-content: center;
  /* centered down */
  align-items: center;
  /* small breathing room around pages */
  padding: var(--space_2) var(--space_2) 0;
  /* the whole stage is a page turn target */
  cursor: pointer;
  /* stop text selection on quick clicks */
  user-select: none;
}

/* one page in paged modes, fit to the screen height, crossfades in on each turn */
.reader_paged_page { height: 100%; width: auto; max-width: 100%; object-fit: contain; background: transparent; animation: page_in var(--duration_base) var(--ease_out); }

/* two pages share the width in a spread */
.reader_stage.is_spread .reader_paged_page { max-width: 50%; }

/* left page of a spread hugs the middle */
.reader_paged_page.is_left { object-position: right center; }

/* right page of a spread hugs the middle */
.reader_paged_page.is_right { object-position: left center; }

/* slim credit line under paged pages */
.reader_credit { margin: 0; padding: var(--space_2) var(--space_4); text-align: center; color: var(--color_faint); font-size: var(--text_xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* gear button keeps a square shape */
.reader_gear { padding: var(--space_1) var(--space_2); }

/* gear icon stays crisp */
.reader_gear svg { display: block; }

/* gear looks pressed while the panel is open */
.reader_gear[aria-expanded="true"] { border-color: var(--seal); color: var(--seal); }

/* settings popover under the reader bar */
.reader_settings {
  /* pinned to the screen */
  position: fixed;
  /* just under the bar */
  top: 64px;
  /* lined up with the bar padding */
  right: var(--gutter);
  /* above the bar and pages */
  z-index: 5;
  /* comfortable width */
  width: min(340px, calc(100vw - 32px));
  /* raised surface */
  background: var(--color_panel);
  /* rounded corners */
  border-radius: var(--radius_lg);
  /* inner spacing */
  padding: var(--space_4);
  /* lift it off the page with a hairline edge */
  box-shadow: var(--shadow_lg), 0 0 0 1px var(--tint_outline);
  /* grows from the gear corner */
  transform-origin: top right;
  /* scale and fade in when shown */
  animation: menu_in var(--duration_base) var(--ease_out) both;
}

/* panel heading row */
.settings_head { display: flex; align-items: center; justify-content: space-between; gap: var(--space_3); margin-bottom: var(--space_1); }

/* panel title */
.settings_title { margin: 0; font-weight: 700; }

/* done button only shows on the phone sheet */
.settings_done { display: none; }

/* one block of related controls */
.settings_group { margin-top: var(--space_4); }

/* small heading above each control */
.settings_label { display: block; margin: 0 0 var(--space_2); color: var(--color_muted); font-size: var(--text_sm); font-weight: 500; }

/* brightness label puts the percent on the right */
.settings_range_label { display: flex; justify-content: space-between; }

/* percent value next to the brightness label */
.settings_range_label output { color: var(--color_paper); font-variant-numeric: tabular-nums; }

/* row of joined toggle buttons on a sunken track, outer radius equals inner plus padding */
.segmented { display: flex; gap: 2px; padding: 3px; background: var(--color_ink); border-radius: calc(var(--radius_sm) + 3px); }

/* one toggle button */
.segment_button { flex: 1; min-height: 36px; background: transparent; border: 0; border-radius: var(--radius_sm); padding: var(--space_2) var(--space_1); font-size: var(--text_md); color: var(--color_muted); cursor: pointer; transition: background-color var(--duration_fast) var(--ease_hover), color var(--duration_fast) var(--ease_hover); }

/* hover on a toggle button */
.segment_button:hover { background: var(--color_panel_raised); color: var(--color_paper); }

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

/* toggle buttons that do nothing in the current mode */
.segment_button:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; color: var(--color_muted); }

/* keyboard focus stays inside the button row */
.segment_button:focus-visible { outline-offset: -2px; }

/* short hint under a control */
.settings_note { margin: var(--space_2) 0 0; color: var(--color_faint); font-size: var(--text_xs); }

/* brightness slider fills the width and uses the accent */
.settings_range { width: 100%; accent-color: var(--seal); }

/* phone width turns the popover into a bottom sheet */
@media (max-width: 600px) {
  /* sheet hugs the bottom edge */
  .reader_settings { top: auto; right: 0; left: 0; bottom: 0; width: 100%; border-radius: var(--radius_xl) var(--radius_xl) 0 0; padding-bottom: calc(var(--space_5) + env(safe-area-inset-bottom)); animation: sheet_up var(--duration_slow) var(--ease_out) both; }
  /* done button is handy on touch screens */
  .settings_done { display: inline-flex; }
  /* bigger toggle targets for fingers */
  .segment_button { min-height: 44px; }
  /* tighter bar so the gear fits */
  .reader_bar { gap: var(--space_2); }
  /* bar buttons keep only their symbols so the page counter fits */
  .reader_btn_text { display: none; }
  /* square symbol buttons in the bar */
  .reader_bar .btn_small { padding: var(--space_1) var(--space_3); }
}

/* ===== toasts ===== */

/* bottom center area for small messages */
.toast_area { position: fixed; bottom: var(--space_5); left: 50%; transform: translateX(-50%); display: grid; gap: var(--space_2); z-index: var(--layer_toast); width: min(420px, calc(100vw - 32px)); }

/* one toast message on a raised surface with a sage marker */
.toast { display: flex; align-items: center; gap: var(--space_3); background: var(--color_panel_high); color: var(--color_paper); padding: var(--space_3) var(--space_4); border-radius: var(--radius_md); font-weight: 500; box-shadow: var(--shadow_lg); animation: toast_in var(--duration_base) var(--ease_out) both; }

/* small colored marker at the start of a toast */
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color_sage); flex-shrink: 0; }

/* error toast uses a coral marker and wash */
.toast_error { background: var(--color_panel_high); box-shadow: var(--shadow_lg), inset 0 0 0 1px var(--color_coral); }

/* error marker color */
.toast_error::before { background: var(--color_coral); }

/* toast leaving gets a softer, shorter exit */
.toast.is_leaving { animation: toast_out var(--duration_fast) var(--ease_out) both; }

/* ===== footer ===== */

/* footer text */
.site_footer { padding: var(--space_6) var(--gutter) var(--space_7); color: var(--color_faint); font-size: var(--text_sm); box-shadow: inset 0 1px 0 var(--tint_outline); }

/* footer paragraphs */
.site_footer p { margin: 0 0 var(--space_2); max-width: 80ch; }

/* footer links */
.site_footer a { color: var(--color_muted); }

/* footer link hover */
.site_footer a:hover { color: var(--color_paper); }

/* ===== keyframes ===== */

/* fade in from nothing */
@keyframes fade_in { from { opacity: 0; } to { opacity: 1; } }

/* slow breathing for loaders */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* skeleton shimmer sweep */
@keyframes shimmer { to { transform: translateX(100%); } }

/* cards rise into place */
@keyframes card_rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* dialogs scale up from just under full size */
@keyframes dialog_in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* small menus scale from their corner */
@keyframes menu_in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* tab content crossfades with a tiny rise */
@keyframes panel_in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* reader pages crossfade on each turn */
@keyframes page_in { from { opacity: 0; } to { opacity: 1; } }

/* toasts rise in */
@keyframes toast_in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* toasts leave with a small drop */
@keyframes toast_out { to { opacity: 0; transform: translateY(4px); } }

/* bottom sheet slides up from the edge */
@keyframes sheet_up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ===== reduced motion ===== */

/* turn off movement for people who ask for less */
@media (prefers-reduced-motion: reduce) {
  /* remove animations and transitions everywhere */
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ===== tablet and phone ===== */

/* medium screens */
@media (max-width: 900px) {
  /* hide section links to save room */
  .nav_links { display: none; }
  /* hero stacks: cover on top of text */
  .hero { grid-template-columns: 1fr; text-align: left; padding-top: 96px; gap: var(--space_5); min-height: 0; }
  /* cover goes first and smaller */
  .hero_cover { order: -1; width: min(180px, 40vw); justify-self: start; box-shadow: 8px 8px 0 var(--seal), var(--shadow_md); }
  /* detail header tightens */
  .detail_header { grid-template-columns: 120px minmax(0, 1fr); padding: var(--space_6) var(--space_5) var(--space_5); gap: var(--space_5); }
  /* smaller tab padding */
  .tab_list { padding: 0 var(--space_4); }
  /* smaller panel padding */
  .tab_panel { padding: var(--space_5); }
}

/* phones */
@media (max-width: 560px) {
  /* tighter nav */
  .top_nav { gap: var(--space_3); padding-top: var(--space_2); padding-bottom: var(--space_2); }
  /* hide the long name, keep the seal */
  .wordmark_text { display: none; }
  /* search fills the space */
  .search_form { flex: 1; }
  /* smaller cover on phones so the first row shows sooner */
  .hero_cover { width: 120px; border-width: 4px; box-shadow: 6px 6px 0 var(--seal), var(--shadow_sm); }
  /* tighter hero on phones */
  .hero { padding-top: 84px; padding-bottom: var(--space_6); gap: var(--space_4); }
  /* smaller description on phones */
  .hero_description { font-size: var(--text_base); margin-bottom: var(--space_4); }
  /* search input full width */
  .search_form input { width: 100%; }
  /* detail header goes single column */
  .detail_header { grid-template-columns: 1fr; }
  /* title clears the close button */
  .detail_title { padding-right: var(--space_6); }
  /* smaller cover in the detail header */
  .detail_cover { width: 130px; }
  /* chapter rows drop the date column */
  .chapter_item { grid-template-columns: 70px minmax(0, 1fr); }
  /* hide chapter meta on phones */
  .chapter_meta { display: none; }
  /* song rows stack the links under the text */
  .song_item { grid-template-columns: 48px minmax(0, 1fr); }
  /* song links take a full row */
  .song_links { grid-column: 1 / -1; justify-content: flex-start; }
  /* detail dialog fills the phone */
  .detail_modal { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; margin: 0; }
}

/* every text field placeholder uses the faint text token so it stays readable, about 6 to 1 on panels */
::placeholder { color: var(--color_faint); opacity: 1; }

/* on touch screens, controls grow to at least 44 pixels so they are easy to tap */
@media (pointer: coarse) {
  /* buttons, small buttons, and the dialog close button */
  .btn, .btn_small, .close_btn, .avatar_btn { min-height: 44px; min-width: 44px; }
  /* the logo link gets a full size tap area */
  .wordmark { min-height: 44px; min-width: 44px; }
  /* the skip link matches the other controls */
  .skip_link { min-height: 44px; display: inline-flex; align-items: center; }
}