/* uploads.css styles group pages, the uploader, original works, and the moderation Uploads tab, using dusk ink tokens only */

/* every button on these pages meets the 44px target */
.up_page .btn, .upq_frame .btn { min-height: 44px; }

/* page width and rhythm */
.up_page { max-width: 960px; padding: var(--space_5) var(--gutter); gap: var(--space_5); }

/* a notice when uploads are switched off */
.up_notice { margin: 0; padding: var(--space_3) var(--space_4); border-radius: var(--radius_md); background: var(--tint_honey); color: var(--color_paper); }

/* a titled block on the page */
.up_section { display: grid; gap: var(--space_3); }

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

/* card lists of groups */
.up_cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space_2); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* one group card */
.up_card { display: grid; gap: var(--space_2); padding: var(--space_3) var(--space_4); border-radius: var(--radius_md); background: var(--color_panel); }

/* the card link fills a comfortable target */
.up_card_link { display: flex; flex-wrap: wrap; gap: var(--space_2); align-items: center; min-height: 44px; color: var(--color_paper); text-decoration: none; }

/* underline on hover so the link reads as a link */
.up_card_link:hover .up_card_title { text-decoration: underline; }

/* group name */
.up_card_title { font-weight: 700; }

/* small meta line */
.up_card_meta { margin: 0; color: var(--color_muted); font-size: var(--text_sm); }

/* buttons inside a card */
.up_card_tools { display: flex; flex-wrap: wrap; gap: var(--space_2); }

/* small status pill */
.up_badge { display: inline-flex; align-items: center; padding: 2px var(--space_2); border-radius: var(--radius_pill); background: var(--color_panel_high); color: var(--color_paper); font-size: var(--text_xs); font-weight: 500; }

/* verified and published read as success */
.up_badge.is_verified, .up_badge.is_approved { background: var(--tint_sage); color: var(--color_paper); }

/* banned, rejected, and removed read as errors */
.up_badge.is_banned, .up_badge.is_rejected, .up_badge.is_removed { background: var(--tint_coral); color: var(--color_paper); }

/* waiting for review reads as information */
.up_badge.is_pending { background: var(--tint_periwinkle); color: var(--color_paper); }

/* plain row lists */
.up_list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space_2); }

/* one row */
.up_list_row { display: flex; flex-wrap: wrap; gap: var(--space_2) var(--space_3); align-items: center; min-height: 44px; padding: var(--space_2) var(--space_4); border-radius: var(--radius_md); background: var(--color_panel); }

/* links inside rows */
.up_list_row a { color: var(--color_periwinkle); }

/* rejection reasons */
.up_reason { width: 100%; color: var(--color_coral); font-size: var(--text_sm); }

/* forms on these pages */
.up_form { display: grid; gap: var(--space_3); padding: var(--space_4); border-radius: var(--radius_lg); background: var(--color_panel); }

/* field groups without the default border */
.up_fields, .up_attest { display: grid; gap: var(--space_3); margin: 0; padding: 0; border: 0; min-width: 0; }

/* side by side fields that wrap on phones */
.up_row { display: grid; gap: var(--space_3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* label above its control */
.up_field { display: grid; gap: var(--space_1); color: var(--color_muted); font-size: var(--text_sm); }

/* inputs, selects, and text areas match the app */
.up_field input, .up_field select, .up_field textarea, .up_inline select, .upq_reason 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_ink); color: var(--color_paper); font: inherit; font-size: var(--text_base); }

/* locked fields after the session starts */
.up_field input:disabled, .up_field select:disabled { opacity: 0.7; }

/* clear focus rings */
.up_page :focus-visible, .upq_frame :focus-visible { outline: 2px solid var(--color_rose); outline-offset: 2px; }

/* inline label with a select */
.up_inline { display: inline-flex; gap: var(--space_2); align-items: center; color: var(--color_muted); font-size: var(--text_sm); }

/* error lines */
.up_error { margin: 0; min-height: 1em; color: var(--color_coral); font-size: var(--text_sm); }

/* the drop zone */
.up_drop { display: grid; gap: var(--space_2); padding: var(--space_5); border: 2px dashed var(--color_rule); border-radius: var(--radius_lg); background: var(--color_panel_raised); text-align: center; transition: border-color var(--duration_fast) var(--ease_out), background var(--duration_fast) var(--ease_out); }

/* highlighted while files hover over it */
.up_drop.is_over { border-color: var(--color_rose); background: var(--tint_rose); }

/* hint text */
.up_drop_hint { margin: 0; color: var(--color_muted); }

/* the choose files label looks like a link and is easy to hit */
.up_pick { display: inline-flex; align-items: center; min-height: 44px; color: var(--color_rose); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* the real file input stays reachable for keyboards but visually hidden */
.up_file_input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* a visible focus ring on the label when its hidden input has focus */
.up_drop:focus-within .up_pick, .up_cover_pick:focus-within { outline: 2px solid var(--color_rose); outline-offset: 2px; }

/* cover picker label button */
.up_cover_pick { position: relative; cursor: pointer; }

/* the page count line */
.up_summary { margin: 0; color: var(--color_muted); }

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

/* one page row */
.up_thumb { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space_3); align-items: center; padding: var(--space_2) var(--space_3); border-radius: var(--radius_md); background: var(--color_panel_raised); cursor: grab; }

/* failed pages stand out */
.up_thumb.is_failed { box-shadow: inset 3px 0 0 var(--color_coral); }

/* uploaded pages get a quiet success edge */
.up_thumb.is_done { box-shadow: inset 3px 0 0 var(--color_sage); }

/* the thumbnail */
.up_thumb_img { width: 64px; height: 88px; object-fit: cover; border-radius: var(--radius_sm); background: var(--color_ink); }

/* text block can shrink */
.up_thumb_info { min-width: 0; display: grid; gap: var(--space_1); }

/* file name */
.up_thumb_name { margin: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* size and status */
.up_thumb_meta { margin: 0; color: var(--color_muted); font-size: var(--text_sm); }

/* the progress bar */
.up_progress { width: 100%; height: 6px; accent-color: var(--color_rose); }

/* page tools */
.up_thumb_tools { display: flex; flex-wrap: wrap; gap: var(--space_1); justify-content: flex-end; }

/* the attestation checkbox row */
.up_check { display: flex; gap: var(--space_3); align-items: flex-start; color: var(--color_paper); line-height: var(--leading_body); }

/* a bigger checkbox */
.up_check input { width: 24px; height: 24px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--color_rose); }

/* group page header */
.group_head { display: flex; gap: var(--space_4); align-items: flex-start; }

/* the letter mark */
.group_mark { display: grid; place-items: center; width: 72px; height: 72px; flex-shrink: 0; border-radius: var(--radius_lg); background: var(--color_lavender); color: var(--color_on_accent); font-family: var(--font_display); font-size: var(--text_2xl); }

/* header text */
.group_head_text { display: grid; gap: var(--space_2); min-width: 0; }

/* meta row */
.group_meta { display: flex; flex-wrap: wrap; gap: var(--space_2); align-items: center; margin: 0; color: var(--color_muted); font-size: var(--text_sm); }

/* about text */
.group_about { margin: 0; color: var(--color_paper); line-height: var(--leading_body); white-space: pre-line; }

/* outside links */
.group_links { display: flex; gap: var(--space_3); margin: 0; }

/* each outside link */
.group_links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color_periwinkle); }

/* originals grid */
.orig_grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space_3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* one work card */
.orig_card_link { display: grid; gap: var(--space_1); color: var(--color_paper); text-decoration: none; }

/* cover image */
.orig_cover { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius_md); background: var(--color_panel_raised); }

/* a letter when there is no cover yet */
.orig_cover_empty { display: grid; place-items: center; color: var(--color_muted); font-family: var(--font_display); font-size: var(--text_2xl); }

/* work title */
.orig_title { font-weight: 700; }

/* work page header */
.orig_head { display: grid; grid-template-columns: 180px 1fr; gap: var(--space_5); align-items: start; }

/* bigger cover on the work page */
.orig_cover_large { width: 180px; }

/* tag row */
.orig_tags { display: flex; flex-wrap: wrap; gap: var(--space_1); margin: 0; }

/* chapter read buttons read like links */
.up_read_btn { color: var(--color_periwinkle); }

/* moderation queue status filters */
.upq_filters { display: flex; flex-wrap: wrap; gap: var(--space_2); margin-bottom: var(--space_3); }

/* the selected filter */
.upq_filters [aria-pressed="true"] { background: var(--tint_rose_strong); color: var(--color_paper); }

/* queue card title */
.upq_title { margin: 0; font-weight: 700; }

/* queue card links */
.upq_title a { color: var(--color_periwinkle); }

/* first pages for a quick look */
.upq_previews { display: flex; gap: var(--space_2); margin: var(--space_2) 0; }

/* one preview */
.upq_preview { width: 72px; height: 100px; object-fit: cover; border-radius: var(--radius_sm); background: var(--color_ink); }

/* queue actions */
.upq_actions { display: flex; flex-wrap: wrap; gap: var(--space_2); align-items: end; }

/* the rejection reason field */
.upq_reason { display: grid; gap: var(--space_1); color: var(--color_muted); font-size: var(--text_sm); flex: 1 1 220px; }

/* phones stack the page rows and headers */
@media (max-width: 560px) { .up_thumb { grid-template-columns: 56px 1fr; } .up_thumb_tools { grid-column: 1 / -1; justify-content: flex-start; } .orig_head { grid-template-columns: 1fr; } .group_head { flex-direction: column; } }

/* no motion for people who asked for less */
@media (prefers-reduced-motion: reduce) { .up_drop { transition: none; } }