/* discovery.css: official links, anime end votes, ad slots, the reader's official button, and the search engine pages */

/* ===== official links inside the detail dialog ===== */

/* space between the header buttons and the official box */
.official_slot { margin-top: 14px; }

/* the official box itself */
.official_box { display: grid; gap: 8px; padding: 12px 14px; border: 0; border-radius: var(--radius_md); background: var(--scrim_chip); max-width: 560px; }

/* small heading inside the box */
.official_heading { margin: 0; font-size: 14px; font-weight: 700; color: var(--paper); }

/* row of link buttons that wraps on small screens */
.official_group { display: flex; flex-wrap: wrap; gap: 8px; }

/* the fold out list of stores and other languages */
.official_more summary { cursor: pointer; color: var(--muted); font-size: 14px; }

/* space above the extra links when opened */
.official_more[open] .official_group { margin-top: 8px; }

/* affiliate disclosure and empty state text */
.official_note, .official_none { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

/* ===== where does the anime end, inside each anime card ===== */

/* the answer and vote area */
.anime_end_box { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--color_periwinkle); background: var(--tint_periwinkle); border-radius: 0 var(--radius_small) var(--radius_small) 0; }

/* the answer line */
.anime_end_answer { margin: 0 0 6px; font-size: 14px; }

/* the vote count next to the answer */
.anime_end_votes { color: var(--muted); font-size: 12px; margin-left: 4px; }

/* the no votes yet line */
.anime_end_empty { color: var(--muted); }

/* continue button and vote form side by side, wrapping when narrow */
.anime_end_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* the vote form row */
.anime_end_form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* the chapter number box grows to fill the row so the "Last chapter" hint is never cut off */
.anime_end_input { flex: 1 1 132px; min-width: 0; padding: 6px 8px; border-radius: var(--radius_small); border: 1px solid transparent; background: var(--panel_high); }

/* a button that looks like a link */
.link_button { background: none; border: 0; padding: 0; color: var(--paper); text-decoration: underline; cursor: pointer; font-size: 14px; }

/* ===== ad slots, only on discovery pages ===== */

/* the slot box */
.ad_slot { display: grid; place-items: center; gap: 4px; min-height: 96px; margin: 24px var(--gutter); padding: 14px; border: 1px dashed var(--rule); border-radius: var(--radius_small); color: var(--muted); text-align: center; }

/* the small "Advertisement" label */
.ad_label { font-size: 12px; }

/* the placeholder note */
.ad_note { font-size: 13px; }

/* ===== the reader's official button ===== */

/* keep the star and text on one line */
.reader_official { white-space: nowrap; text-decoration: none; }

/* ===== search engine pages ===== */

/* page background and layout */
.seo_body { min-height: 100vh; display: flex; flex-direction: column; }

/* simple top bar */
.seo_header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px var(--gutter); box-shadow: inset 0 -1px 0 var(--tint_outline); }

/* links into the app pages beside the open button */
.seo_nav { display: flex; align-items: center; gap: var(--space_2); }

/* plain section links in the muted color */
.seo_nav a:not(.btn) { padding: var(--space_2) var(--space_3); border-radius: var(--radius_pill); color: var(--color_muted); text-decoration: none; font-size: var(--text_md); }

/* hover brightens them */
.seo_nav a:not(.btn):hover { color: var(--color_paper); background: var(--tint_paper); }

/* phones keep only the open button so the header fits */
@media (max-width: 520px) { .seo_nav a:not(.btn) { display: none; } }

/* main column */
.seo_main { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: 24px var(--gutter) 48px; }

/* cover and summary side by side */
.seo_hero { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }

/* smaller hero for the focused pages */
.seo_hero_small { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; }

/* cover image */
.seo_cover { width: 100%; height: auto; border-radius: var(--radius_small); box-shadow: var(--shadow_lg), 0 0 0 1px var(--tint_outline); }

/* page heading */
.seo_title { font-family: var(--font_display); font-size: clamp(28px, 4.4vw, 46px); line-height: 1.1; margin: 0 0 12px; overflow-wrap: anywhere; }

/* one sentence answer under the heading */
.seo_answer { font-size: 18px; margin: 0; }

/* synopsis text */
.seo_description { color: var(--color_muted); white-space: pre-line; margin: 0 0 18px; }

/* tag pills */
.seo_tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 14px; }

/* one tag pill */
.seo_tags li { font-size: 13px; padding: 2px 10px; border-radius: 999px; background: var(--tint_lavender); color: var(--color_lavender); }

/* links between the three pages for one manga */
.seo_tabs { display: flex; flex-wrap: wrap; gap: 18px; margin: 28px 0 8px; border-bottom: 1px solid var(--rule); }

/* one tab link */
.seo_tabs a { padding: 10px 0; text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; }

/* the current page's tab */
.seo_tabs a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--seal); }

/* each content section */
.seo_section { margin-top: 32px; }

/* section headings */
.seo_section_title { font-family: var(--font_display); font-size: 22px; margin: 0 0 14px; }

/* small labels above link groups */
.official_label { font-size: 14px; font-weight: 700; color: var(--muted); margin: 18px 0 8px; }

/* muted helper text */
.seo_muted { color: var(--muted); }

/* smaller helper text */
.seo_small { font-size: 13px; }

/* list of anime seasons */
.anime_end_list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }

/* one season row */
.anime_end_row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 12px; background: var(--panel); border-radius: var(--radius_small); }

/* season cover */
.anime_end_row img { width: 64px; height: auto; border-radius: 4px; }

/* text inside a season row */
.anime_end_row p { margin: 0 0 6px; }

/* season title */
.anime_end_title { font-weight: 700; }

/* comment list */
.seo_comments { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }

/* one comment */
.seo_comments li { padding: 10px 14px; background: var(--panel); border-radius: var(--radius_small); }

/* comment author */
.seo_comment_author { margin: 0 0 4px; font-weight: 700; font-size: 14px; }

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

/* not found and unavailable message box */
.seo_message { text-align: center; padding: 60px 0; }

/* ads inside the narrow page column use the column edges */
.seo_main .ad_slot { margin: 28px 0; }

/* phone layout stacks cover and text */
@media (max-width: 640px) {
  /* main page hero becomes one column with a smaller cover */
  .seo_hero { grid-template-columns: 1fr; }
  /* keep the big cover a sensible size */
  .seo_hero .seo_cover { max-width: 200px; }
  /* small hero keeps the thumbnail beside the heading */
  .seo_hero_small { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  /* smaller answer text */
  .seo_answer { font-size: 16px; }
}