/* guard.css styles the "Available officially" dialog, the licensed title note, and the admin takedowns page, using Dusk ink tokens only */

/* the dialog box itself */
.official_sheet { width: min(460px, 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 the dialog */
.official_sheet::backdrop { background: var(--scrim_backdrop); }

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

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

/* manga title */
.official_sheet_title { margin: 0; font-family: var(--font_display); font-size: 24px; line-height: var(--leading_tight); }

/* the explanation */
.official_sheet_text { margin: 0; color: var(--color_muted); line-height: var(--leading_body); }

/* official site buttons stacked, full width on phones */
.official_sheet_links { display: grid; gap: var(--space_2); margin-top: var(--space_2); }

/* buttons fill the width and meet the touch target size */
.official_sheet_links .btn { justify-content: center; min-height: 44px; }

/* message when no official link is known */
.official_sheet_none { margin: 0; color: var(--color_faint); }

/* close button sits under the links */
.official_sheet_close { justify-self: end; min-height: 44px; }

/* the short note under the detail buttons for licensed titles */
.guard_note { margin: var(--space_2) 0 0; max-width: 60ch; font-size: var(--text_md); color: var(--color_muted); line-height: var(--leading_snug); }

/* entrance for the dialog, transform and opacity only */
@keyframes official_sheet_in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* play the entrance when opened */
.official_sheet[open] { animation: official_sheet_in var(--duration_base) var(--ease_out) both; }

/* the takedowns page uses the shared page width */
.takedowns_page { max-width: 900px; }

/* the add form, one column on phones */
.takedown_form { display: grid; gap: var(--space_3); grid-template-columns: 1fr; padding: var(--space_5); border-radius: var(--radius_lg); background: var(--color_panel); box-shadow: var(--shadow_sm); }

/* two columns on wider screens with the button on its own row */
@media (min-width: 720px) { .takedown_form { grid-template-columns: 2fr 1fr 1.5fr; align-items: end; } .takedown_form .btn { grid-column: 1 / -1; justify-self: start; } }

/* label above each input */
.takedown_field { display: grid; gap: var(--space_1); font-size: var(--text_sm); color: var(--color_muted); }

/* inputs match the rest of the app */
.takedown_field input { min-height: 44px; padding: 0 var(--space_3); border: 1px solid var(--color_rule); border-radius: var(--radius_sm); background: var(--color_ink); color: var(--color_paper); font: inherit; font-size: var(--text_base); }

/* clear focus ring in the accent color */
.takedown_field input:focus-visible { outline: 2px solid var(--color_rose); outline-offset: 2px; }

/* the records list */
.takedown_list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space_2); }

/* one record */
.takedown_row { display: flex; align-items: center; justify-content: space-between; gap: var(--space_3); padding: var(--space_3) var(--space_4); border-radius: var(--radius_md); background: var(--color_panel); }

/* text block can shrink */
.takedown_info { min-width: 0; }

/* manga title */
.takedown_title { margin: 0; font-weight: 700; }

/* reason, reference and date */
.takedown_meta { margin: var(--space_1) 0 0; font-size: var(--text_sm); color: var(--color_muted); }

/* the raw id for the records, wraps on small screens */
.takedown_id { margin: var(--space_1) 0 0; font-size: var(--text_xs); color: var(--color_faint); overflow-wrap: anywhere; }

/* lift button keeps the touch size */
.takedown_row .btn { min-height: 44px; flex-shrink: 0; }

/* empty state */
.takedown_empty { color: var(--color_muted); }

/* stack the row on phones */
@media (max-width: 560px) { .takedown_row { flex-direction: column; align-items: stretch; } }

/* no motion for people who asked for less */
@media (prefers-reduced-motion: reduce) { .official_sheet[open] { animation: none; } }