/*
 * ThreadYard styles: a general vintage look (woven-label logo, hang tags, screen-print colors).
 * Hand-written CSS, no build step. Colors are named once below; the light / dark switch in the
 * header sets <html data-theme="light|dark|auto"> (shared with the admin panel), and "auto"
 * follows the computer's own setting.
 */
/* Headings use Arial Narrow where the computer has it. Some browsers (example Brave) hide most fonts
   installed on the computer, so a matching condensed font, Roboto Condensed (SIL Open Font License, see
   static/fonts/roboto-condensed/OFL.txt), is served by the site itself as the fallback. */
@font-face {
  font-family: "Roboto Condensed"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/roboto-condensed/roboto-condensed-latin-400.e9d71ac5376b.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/roboto-condensed/roboto-condensed-latin-700.89e51a47e901.woff2") format("woff2");
}

:root {
  /* The width of every thick rounded frame (the home page's video and shirt cards, the entry page's photos,
     the profile cards): 7px, half that on phones (see the phone section). Use var(--frame-w) for new ones. */
  --frame-w: 7px;
  --cotton: #f5efe3;      /* page background */
  --paper: #fffaf0;       /* cards and panels */
  --ink: #2b2420;         /* main text */
  --ink-soft: #6b5f55;    /* secondary text */
  --red: #b5452f;         /* accents and red text */
  --red-fill: #b5452f;    /* red backgrounds behind light text (logo, badges) */
  --on-red: #fff8ec;      /* text on red backgrounds */
  --navy: #2f4858;        /* links and small labels */
  --mustard: #d9a441;     /* hang tags and highlights */
  --green: #4f7a4a;       /* success */
  --line: #e2d7c3;        /* borders */
  --dot: rgba(43, 36, 32, .045); /* the faint halftone print on the page */
  --focus: #2f4858;       /* keyboard focus outline */
  --display: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

/* Dark colors: used when the switch says "dark", or says "auto" and the computer is in dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cotton: #1d1a17;
    --paper: #26221e;
    --ink: #efe6d6;
    --ink-soft: #b3a796;
    --red: #e0725b;
    --red-fill: #b9533c;
    --on-red: #fff8ec;
    --navy: #8fb3c7;
    --mustard: #e6b85c;
    --green: #8fbf87;
    --line: #3a342d;
    --card-edge: #a9a39a;
    --dot: rgba(239, 230, 214, .035);
    --focus: #e6b85c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --cotton: #1d1a17;
  --paper: #26221e;
  --ink: #efe6d6;
  --ink-soft: #b3a796;
  --red: #e0725b;
  --red-fill: #b9533c;
  --on-red: #fff8ec;
  --navy: #8fb3c7;
  --mustard: #e6b85c;
  --green: #8fbf87;
  --line: #3a342d;
  --dot: rgba(239, 230, 214, .035);
  --focus: #e6b85c;
  color-scheme: dark;
  --card-edge: #a9a39a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--cotton);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 7px 7px;
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.5;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}

.logo { text-decoration: none; }
/* The logo picture (templates/_logo.html): top centre of the header. */
.brand-logo, .brand-logo img { display: block; }
.brand-logo img { width: 100%; height: auto; }
.site-header .logo { display: block; width: 205px; }
@media (min-width: 1181px) { .site-header .logo { width: 267px; } }  /* desktop: 30% bigger */
.home-logo { display: none; }  /* (phones only, under the home page's category slider) */
.footer-logo { display: inline-block; width: 130px; }
/* A photo with an AVIF copy: <picture class="pic"> adds no box of its own, so the photo's styles still apply. */
.pic { display: contents; }

.nav { display: flex; gap: 1.25rem; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; }
.nav a[aria-disabled="true"] { color: var(--ink-soft); pointer-events: none; }

main { padding: 0 clamp(1rem, 4vw, 3rem); max-width: 72rem; margin: 0 auto; }

.hero { padding: clamp(2.5rem, 8vw, 5rem) 0 2rem; text-align: center; }
.eyebrow {
  margin: 0;
  color: var(--navy);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .8rem;
}
.hero h1 {
  margin: .5rem 0;
  font-family: var(--display);
  font-size: clamp(2.2rem, 7vw, 4rem);
  line-height: 1.05;
  text-transform: uppercase;
}
.hero h1 em { color: var(--red); font-style: normal; }
.lede { max-width: 36rem; margin: 0 auto 1.5rem; color: var(--ink-soft); }

.search { display: flex; gap: .5rem; max-width: 36rem; margin: 0 auto; }
.search input {
  flex: 1;
  min-width: 0;
  padding: .8rem 1rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.search button {
  padding: .8rem 1.2rem;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cotton);
  font-weight: 700;
  font: inherit;
}
.note { color: var(--ink-soft); font-size: .85rem; }

.categories h2 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tiles {
  list-style: none;
  padding: 0;
  margin: 0 0 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: .75rem;
}
/* Tiles styled like hang tags. */
.tile {
  position: relative;
  padding: 1.1rem 1rem 1rem 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 6px solid var(--mustard);
  font-weight: 600;
}
.tile::before {
  content: "";
  position: absolute;
  left: .7rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  margin-top: -.25rem;
  border-radius: 50%;
  background: var(--cotton);
  border: 1px solid var(--line);
}
.tile:nth-child(3n+2), .tiles > li:nth-child(3n+2) > .tile { border-left-color: var(--red); }
.tile:nth-child(3n), .tiles > li:nth-child(3n) > .tile { border-left-color: var(--navy); }

.site-footer {
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-size: .9rem;
}
.site-footer p { margin: 0; }
.site-footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
.site-footer nav a { color: var(--ink); font-weight: 600; }

/* Nav call-to-action */
.nav { flex-wrap: wrap; align-items: center; }
.nav-cta {
  padding: .3rem .8rem;
  background: var(--ink);
  color: var(--cotton) !important;
}

/* Flash messages */
.messages { max-width: 72rem; margin: 1rem auto 0; padding: 0 clamp(1rem, 4vw, 3rem); }
.message {
  margin: 0 0 .5rem;
  padding: .7rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 5px solid var(--navy);
}
.message-success { border-left-color: var(--green); }
.message-warning { border-left-color: var(--mustard); }
.message-info { border-left-color: var(--navy); }
.message-error { border-left-color: var(--red); }

/* Account pages (allauth) */
.auth-card {
  max-width: 30rem;
  margin: clamp(1.5rem, 6vw, 3.5rem) auto;
  padding: clamp(1.25rem, 4vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 6px solid var(--red);
}
.auth-card h1 {
  margin-top: 0;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.auth-card a { color: var(--navy); }
.auth-card form p,
.auth-card form > div { margin: 0 0 1rem; }
.auth-card label { display: block; font-weight: 600; margin-bottom: .25rem; }
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="number"] {
  width: 100%;
  padding: .7rem .8rem;
  border: 2px solid var(--line);
  background: var(--cotton);
  color: var(--ink);
  font: inherit;
}
.auth-card input:focus { outline: none; border-color: var(--ink); }
.auth-card button,
.auth-card input[type="submit"] {
  padding: .7rem 1.2rem;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cotton);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.auth-card .helptext,
.auth-card small { display: block; color: var(--ink-soft); font-size: .85rem; }
.auth-card .errorlist { color: var(--red); padding-left: 1.1rem; margin: .25rem 0; }
.auth-card img,
.auth-card svg { max-width: 100%; height: auto; background: #fff; padding: .5rem; }
.settings-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}

/* Larger forms (submission) */
.auth-card.wide { max-width: 48rem; }
.auth-card select,
.auth-card textarea,
.auth-card input[type="file"] {
  width: 100%;
  padding: .6rem .8rem;
  border: 2px solid var(--line);
  background: var(--cotton);
  color: var(--ink);
  font: inherit;
}
.auth-card textarea { resize: vertical; }
.auth-card textarea.hint-box { resize: none; line-height: 1.4; }
.auth-card textarea.hint-box::placeholder { font-size: .85rem; }
.auth-card fieldset {
  margin: 0 0 1.5rem;
  padding: 1rem 0 0;
  border: 0;
  border-top: 2px solid var(--line);
}
.auth-card legend {
  padding-right: .5rem;
  font-family: var(--display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.auth-card fieldset > div,
.auth-card .row > div,
.auth-card .photo-slot > div { margin-bottom: 1rem; }
.auth-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.auth-card .row.era-row { grid-template-columns: auto auto; justify-content: start; column-gap: 2.5rem; }
.auth-card input.year-input { width: 7rem; }
.auth-card .inline-check { display: flex; gap: .45rem; align-items: center; margin: -.5rem 0 1rem; }
.auth-card .inline-check label { display: inline; font-weight: 400; margin: 0; }
.required-note { margin-top: -.25rem; }
.error-summary {
  margin: 0 0 1.25rem;
  padding: .8rem 1rem;
  border: 2px solid var(--red);
  border-left-width: 6px;
  background: var(--cotton);
}
.error-summary p { margin: 0 0 .4rem; }
.error-summary ul { margin: 0 0 .4rem; padding-left: 1.2rem; color: var(--red); }
.error-summary a { color: var(--red); font-weight: 700; }
.auth-card ul[id] { list-style: none; padding: 0; columns: 2 12rem; margin: .25rem 0; }
.auth-card ul[id] label { font-weight: 400; display: inline-flex; gap: .4rem; align-items: center; }
.hint, .label { color: var(--ink-soft); font-size: .9rem; }
.label { font-weight: 600; margin-bottom: .5rem; }
.form-errors { color: var(--red); font-weight: 600; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.photo-slot { display: block; padding: .75rem; background: var(--cotton); border: 1px dashed var(--line); }
.photo-slot.held { border-style: solid; border-color: var(--mustard); }
.photo-slot img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; padding: 0; margin-bottom: .5rem; }
.auth-card label.remove-check { display: flex; gap: .4rem; align-items: center; font-weight: 400; margin: .25rem 0 .75rem; }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }
.auth-card button.secondary { background: transparent; color: var(--ink); }
.auth-card button.danger { background: var(--red-fill); border-color: var(--red-fill); color: var(--on-red); }
.danger-link { margin-left: auto; color: var(--red) !important; }

.button {
  display: inline-block;
  padding: .6rem 1.1rem;
  background: var(--ink);
  color: var(--cotton);
  font-weight: 700;
  text-decoration: none;
}

/* Page headings */
.page-head { padding: 2rem 0 1rem; }
.page-head h1 { margin: .25rem 0; font-family: var(--display); text-transform: uppercase; }
.page-head .lede { margin: 0; text-align: left; }

.tile-link { display: block; color: var(--ink); text-decoration: none; }
.tile-link:hover, .tile-link:focus-visible { background: var(--cotton); outline: 2px solid var(--ink); }
ul.tiles > li > .tile-link.tile { height: 100%; }

/* Status labels */
.status-banner {
  margin: 1.5rem 0 0;
  padding: .8rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 6px solid var(--mustard);
}
.status-banner a { margin-left: .5rem; color: var(--navy); font-weight: 700; }
.status-banner.status-rejected { border-left-color: var(--red); }
.status-banner.status-changes_requested { border-left-color: var(--red); }
.status-pill {
  padding: .15rem .55rem;
  font-size: .8rem;
  font-weight: 700;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.status-pill.status-draft { color: var(--ink-soft); }
.status-pill.status-pending { color: var(--mustard); }
.status-pill.status-approved { color: var(--green); }
.status-pill.status-rejected,
.status-pill.status-changes_requested { color: var(--red); }

/* Entry page */
.entry-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; padding: 1.5rem 0 3rem; }
@media (max-width: 760px) { .entry-layout { grid-template-columns: 1fr; } }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .75rem; align-content: start; }
.gallery figure { margin: 0; background: var(--paper); border: 1px solid var(--line); }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.gallery figcaption { padding: .4rem .6rem; font-size: .8rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; }
.entry-info h1 { margin: .25rem 0 1rem; font-family: var(--display); text-transform: uppercase; line-height: 1.1; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0 0 1.5rem; }
.facts dt { color: var(--ink-soft); font-weight: 600; }
.facts dd { margin: 0; }
.hang-tag {
  display: inline-block;
  padding: .1rem .6rem .1rem 1.1rem;
  background: var(--mustard);
  color: #2b2420;
  font-size: .85rem;
  font-weight: 700;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}
.description { overflow-wrap: anywhere; }

/* My submissions */
.submission-list { list-style: none; padding: 0; margin: 0 0 3rem; display: grid; gap: .5rem; }
.submission {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.submission:hover { border-color: var(--ink); }
.submission img, .no-photo { width: 64px; height: 64px; object-fit: cover; flex: none; }
.no-photo { display: grid; place-items: center; background: var(--cotton); font-size: .7rem; color: var(--ink-soft); }
.submission-text { flex: 1; min-width: 0; display: grid; }
.submission-text small { color: var(--ink-soft); }

/* Moderation */
.badge {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 .35em;
  background: var(--red-fill);
  color: var(--on-red);
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
  border-radius: 1em;
}
.count-read { color: var(--ink-soft); font-weight: 600; font-size: .9rem; }
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem; border-bottom: 2px solid var(--line); }
.tabs a { padding: .5rem .9rem; color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a[aria-current="page"] { border-bottom-color: var(--red); }
.votes { font-size: .85rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.empty { padding: 2rem 0; }
.pager { display: flex; gap: 1rem; justify-content: center; margin: 0 0 3rem; }
.section-title { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; margin-top: 2rem; }

.review-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; padding-bottom: 3rem; }
@media (max-width: 860px) { .review-layout { grid-template-columns: 1fr; } }
.review-layout .gallery { margin-bottom: 1.5rem; }
.panel { margin: 0 0 1rem; padding: 1rem 1.1rem; background: var(--paper); border: 1px solid var(--line); }
.panel h2 { margin: 0 0 .75rem; font-family: var(--display); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .05em; }
.panel h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
.panel.decision { border-top: 5px solid var(--red); }
.panel label { display: block; font-weight: 600; margin-bottom: .25rem; }
.panel textarea, .panel input[type="text"], .panel select {
  width: 100%;
  padding: .55rem .7rem;
  border: 2px solid var(--line);
  background: var(--cotton);
  color: var(--ink);
  font: inherit;
}
.panel .helptext { color: var(--ink-soft); font-size: .85rem; }
.panel .errorlist { color: var(--red); padding-left: 1.1rem; margin: .25rem 0; }
.panel button, .role-form button, .search-left button {
  padding: .55rem 1rem;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cotton);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.panel button.secondary { background: transparent; color: var(--ink); }
.panel button.danger { background: var(--red-fill); border-color: var(--red-fill); color: var(--on-red); }
.inline-form > div, .inline-form > label, .inline-form > input { margin-bottom: .6rem; }
.inline-form ul[id] { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; }
.inline-form ul[id] label { font-weight: 400; display: inline-flex; gap: .35rem; align-items: center; }
.panel details summary { cursor: pointer; font-weight: 600; margin-top: .75rem; }
.vote-buttons { display: flex; gap: .5rem; margin-bottom: .5rem; }
.panel .vote-buttons .arrow {
  width: 3rem; height: 3rem; padding: 0; font-size: 1.4rem; line-height: 1;
  background: transparent; color: var(--ink); border: 2px solid var(--line);
}
.panel .vote-buttons .arrow.up:hover, .panel .vote-buttons .arrow.up.chosen { background: var(--green); border-color: var(--green); color: var(--cotton); }
.panel .vote-buttons .arrow.down:hover, .panel .vote-buttons .arrow.down.chosen { background: var(--red-fill); border-color: var(--red-fill); color: var(--on-red); }
.vote-choice { display: flex; gap: .75rem; align-items: center; margin: 0 0 .75rem; padding: 0; border: 0; }
.vote-choice legend { font-weight: 600; margin-bottom: .35rem; float: left; width: 100%; }
.vote-choice legend small { font-weight: 400; color: var(--ink-soft); }
.panel .vote-choice label.arrow {
  display: inline-flex; gap: .35rem; align-items: center; margin: 0;
  padding: .35rem .7rem; border: 2px solid var(--line); font-size: 1.15rem; cursor: pointer;
}
.vote-choice label.arrow:has(input:checked) { border-color: var(--ink); background: var(--cotton); }
.vote-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .35rem; }
.vote { font-weight: 700; margin-right: .35rem; }
.vote-1 { color: var(--green); }
.vote--1 { color: var(--red); }
.flag { margin: 0 0 .6rem; }
.flag.resolved { color: var(--ink-soft); text-decoration: line-through; }
.flag.resolved small { text-decoration: none; display: inline-block; }
.history { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .9rem; }
.history time { display: block; color: var(--ink-soft); font-size: .8rem; }
.history.panel { padding: 1rem 1.1rem; margin-bottom: 1.5rem; }
.decision-note { margin: .5rem 0 0; padding: .6rem .8rem; background: var(--cotton); border-left: 4px solid var(--red); }
.status-banner p { margin: 0; }
.entry-tools { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1.5rem 0 0; font-weight: 600; }
.entry-tools a { color: var(--navy); }

.diff { width: 100%; border-collapse: collapse; font-size: .92rem; }
.diff th, .diff td { padding: .5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.diff thead th { color: var(--ink-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
/* Only the words that changed are marked: struck through in red (removed) or highlighted (added). */
.diff td.old { color: var(--ink-soft); }
.diff td.old del { color: var(--red); text-decoration: line-through; text-decoration-color: var(--red); }
.diff td.new ins { text-decoration: none; background: color-mix(in srgb, var(--mustard) 30%, transparent); font-weight: 600; }
.photo-diff { display: grid; gap: 1rem; }
.before-after { display: flex; gap: .75rem; }
.before-after figure { margin: 0; flex: 1; max-width: 12rem; }
.before-after img, .photo-grid img.removed { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.photo-grid img.removed { opacity: .5; outline: 3px solid var(--red); }
.before-after figcaption { font-size: .8rem; color: var(--ink-soft); font-weight: 600; }

.search-left { display: flex; gap: .5rem; max-width: 30rem; margin: 0 0 1rem; }
.search-left input, .search-left select {
  flex: 1;
  padding: .55rem .8rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.members { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; background: var(--paper); border: 1px solid var(--line); }
.members th, .members td { padding: .55rem .8rem; text-align: left; border-bottom: 1px solid var(--line); }
.role-form { display: flex; gap: .5rem; align-items: center; }
.role-form select { padding: .4rem; border: 2px solid var(--line); background: var(--cotton); color: var(--ink); font: inherit; }

.deletion-thumb { width: 8rem; aspect-ratio: 1; object-fit: cover; display: block; margin-bottom: .5rem; }
.auth-card ul[id] li label input[type="radio"] { margin: 0; }

/* My submissions */
.row-actions { display: flex; gap: .9rem; flex-wrap: wrap; padding: .35rem .6rem .1rem; font-size: .88rem; font-weight: 600; }
.row-actions a { color: var(--navy); }
.row-actions a.danger-link { margin-left: 0; }
.row-actions .note { color: var(--ink-soft); font-weight: 400; }
.tab-tools { display: flex; justify-content: flex-end; margin: -.5rem 0 1rem; }
.tab-tools button { padding: .45rem .9rem; border: 2px solid var(--red); background: transparent; color: var(--red); font: inherit; font-weight: 700; cursor: pointer; }

/* Story editor */
.story-editor .story-section { margin: 0 0 1rem; padding-top: .75rem; border-top: 1px dashed var(--line); }
.story-editor .story-section:first-child { border-top: 0; padding-top: 0; }
.story-editor textarea { margin-bottom: .5rem; }
.story-picker { margin: .25rem 0 .75rem; }
.story-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; margin-bottom: .5rem; }
.story-thumbs[hidden] { display: none; }
.story-thumb { display: block; font-weight: 400 !important; font-size: .85rem; touch-action: pan-y; user-select: none;
  -webkit-user-select: none; -webkit-touch-callout: none; }
.story-thumb-frame { position: relative; }
.story-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; padding: 0 !important; margin-bottom: .25rem;
  cursor: grab; -webkit-user-drag: none; }
/* Little white arrows on the left and right of each backstory photo: move it one place (story-photos.js). */
.story-thumb .story-move { position: absolute; top: 50%; transform: translateY(-50%); width: 1.9rem; height: 1.9rem;
  min-width: 0; min-height: 0; padding: 0 0 .15rem; margin: 0; border: 0; border-radius: 50%; box-shadow: none;
  background: rgba(0, 0, 0, .55); color: #fff; font: 700 1.5rem/1 sans-serif;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.story-thumb .story-move.is-left { left: .3rem; }
.story-thumb .story-move.is-right { right: .3rem; }
.story-thumb .story-move[hidden] { display: none; }
.story-thumb .story-move:hover, .story-thumb .story-move:focus-visible { background: rgba(0, 0, 0, .8); }
.story-delete { display: block; width: 100%; margin: 0; padding: .35rem .5rem; font-size: .85rem; }
/* Being dragged: it follows the finger or mouse, lifted over the others. */
.story-thumb.is-dragging { position: fixed; z-index: 50; pointer-events: none; opacity: .9; transform: scale(1.05);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.file-label { display: block; font-weight: 600; font-size: .9rem; color: var(--navy); }
.file-label input { margin-top: .3rem; font-weight: 400; }
.auth-card button#add-story-section { margin-top: .25rem; }

/* Story on entry pages */
.story h2 { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: 1.1rem; }
.story-text { overflow-wrap: anywhere; }
.story-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; margin: .75rem 0 1rem; }
.story-figures img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: 1px solid var(--line); }

/* Moderators' notes, shown only to the submitter */
.owner-notes {
  margin: .25rem 0 .5rem;
  padding: .5rem .75rem;
  background: var(--cotton);
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  font-size: .92rem;
}
.entry .owner-notes { margin-top: 1rem; }
.owner-notes summary { cursor: pointer; font-weight: 700; }
.owner-notes .private { margin-left: .5rem; font-weight: 400; color: var(--ink-soft); font-size: .8rem; }
.owner-notes ol { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.owner-notes time { color: var(--ink-soft); font-size: .8rem; margin-left: .35rem; }
.owner-note-text { margin-top: .15rem; overflow-wrap: anywhere; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Browse, category pages and entry cards ---------- */
.entry-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
}
.entry-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.entry-card:hover, .entry-card:focus-visible { border-color: var(--ink); outline: none; }
.entry-card img, .entry-card .no-photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.entry-card-text { display: grid; gap: .15rem; padding: .6rem .7rem .75rem; }
.entry-card-text strong { line-height: 1.25; overflow-wrap: anywhere; }
.entry-card-text small { color: var(--ink-soft); font-size: .85rem; }
.entry-card-text .eyebrow { font-size: .7rem; color: var(--navy); }
.more-link { margin: 0 0 3rem; font-weight: 700; }
.more-link a, .note a, .page-head .eyebrow a { color: var(--navy); }

.browse-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; padding-bottom: 3rem; }
@media (max-width: 760px) { .browse-layout { grid-template-columns: 1fr; } }
.filters { display: grid; gap: .3rem; align-content: start; }
.filters label { font-weight: 600; font-size: .9rem; margin-top: .6rem; }
.filters select, .results-bar select {
  width: 100%;
  padding: .5rem .6rem;
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
/* Origin, and Apply Filters: dressed like the drop-downs and the Search button */
.filters .filter-grid input { padding: .5rem .6rem; border: 2px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; }
.filters > button[type="submit"] { padding: .7rem 1.2rem; border: 2px solid var(--ink); background: var(--ink); color: var(--cotton); font: inherit; font-weight: 700; cursor: pointer; }
.filters .search { margin: 0; max-width: none; }
.filters .search input { padding: .55rem .7rem; }
.filters .search button { padding: .55rem .8rem; }
.filters a { color: var(--red); font-weight: 600; }
.results-bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.results-bar p { margin: 0; }
.results-bar label { display: flex; gap: .5rem; align-items: center; font-weight: 600; }
.results-bar select { width: auto; }
/* Phones: a "Search" link (down to the search and filters under the results) where the count was, Sort by
   beside it, and the count moves beside Reverse order. */
.results-bar .to-filters { display: none; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 767px) {
  .results-bar { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; align-items: center; }
  .results-bar .to-filters { display: inline; grid-column: 1; grid-row: 1; justify-self: start; }
  .results-bar > label { grid-column: 2; grid-row: 1; justify-self: end; }
  .results-bar > label.era-sort { grid-row: 2; margin-top: 1rem; }
  /* Reverse Order just under the Sort by box (or Era's), the count level with it */
  .results-bar .reverse-sort { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 5px; }
  .results-bar > p { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 5px; }
  /* Card view: on the right under Sort by, above the second entry; 2 entries a row (as before), 3 or 4. */
  .results-bar .card-view { display: inline-flex; grid-column: 2; grid-row: 3; justify-self: end; align-items: flex-end;
    gap: 1px; margin-top: 5px; padding: .3rem .45rem; line-height: 1; }
  .card-view svg { display: block; }
  .card-view-n { font-size: .7rem; font-weight: 700; }
  .results .entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results[data-cols="3"] .entry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  .results[data-cols="4"] .entry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
  .results[data-cols="3"] .entry-card-text { padding: .35rem .4rem .45rem; }
  .results[data-cols="3"] .entry-card-text strong { font-size: .8rem; }
  .results[data-cols="3"] .entry-card-text small { font-size: .68rem; }
  .results[data-cols="4"] .entry-card-text { padding: .25rem .3rem .35rem; gap: .1rem; }
  .results[data-cols="4"] .entry-card-text strong { font-size: .68rem; }
  .results[data-cols] .entry-card-text strong { overflow-wrap: break-word; hyphens: auto; }
  .results[data-cols="4"] .entry-card-text small { font-size: .6rem; }
}
@media (min-width: 768px) { .results-bar .card-view { display: none; } }   /* (phones only) */

/* ---------- Member profiles ---------- */
.profile-head { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; padding: 2rem 0 1rem; }
.profile-text { flex: 1; min-width: 16rem; }
.profile-text h1 { margin: .25rem 0 1rem; font-family: var(--display); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.profile-text h1 .hang-tag { font-family: var(--body); text-transform: none; }
.avatar { display: block; border-radius: 50%; object-fit: cover; border: 3px solid var(--paper); outline: 1px solid var(--line); }
.avatar.large { width: 160px; height: 160px; }
.avatar-blank { display: grid; place-items: center; background: var(--mustard); color: #2b2420; font-family: var(--display); font-size: 4rem; font-weight: 700; }
.bio { max-width: 40rem; overflow-wrap: anywhere; }
.social-links { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.social-links a { display: inline-block; padding: .25rem .7rem; border: 1px solid var(--ink); color: var(--ink); font-weight: 600; text-decoration: none; }
.social-links a:hover { background: var(--ink); color: var(--cotton); }
.profile-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.profile-actions a:not(.button) { color: var(--navy); font-weight: 600; }
.avatar-edit { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.avatar-edit > div { flex: 1; min-width: 0; }
.avatar-edit .inline-check { margin: .25rem 0 0; }
.facts a { color: var(--navy); font-weight: 600; }
/* An entry's answers link to Browse with that filter applied: underlined, in the text's own colour. */
.facts a.fact-link { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; }
.facts a.fact-link:hover { color: var(--red); }
.entry-info .eyebrow a { color: var(--navy); text-decoration: none; }
.entry-info .eyebrow a:hover { text-decoration: underline; }
/* Browse: the search box and its button stack inside the narrow filter column. */
.filters .search { flex-direction: column; }
.filters .search input, .filters .search button { width: 100%; }
.message a { color: var(--navy); font-weight: 700; }

/* ---------- Alerts and reports ---------- */
.alert-list { list-style: none; padding: 0; margin: 0 0 3rem; display: grid; gap: .5rem; }
.alert-item { padding: .75rem 1rem; background: var(--paper); border: 1px solid var(--line); border-left: 5px solid var(--line); }
.alert-item.unread { border-left-color: var(--red); }
.alert-item p { margin: 0 0 .25rem; }
.alert-title a { color: var(--ink); font-weight: 700; }
.alert-note { color: var(--ink-soft); }
.alert-item small { color: var(--ink-soft); }
.plain-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.report-corner { display: flex; justify-content: flex-end; margin: 0 0 1.5rem; }
.report-corner a { color: var(--ink-soft); font-size: .85rem; text-decoration: none; }
.report-corner a:hover { color: var(--red); text-decoration: underline; }
.report-row { margin: 0 0 .6rem; }
.auth-card ul[id] li label { font-weight: 400; }


/* ---------- Header: theme switch, phone menu, current page ---------- */
.site-header { position: relative; }
.logo { order: 1; }
.nav { order: 2; margin-left: auto; }
.header-tools { order: 3; display: flex; gap: .5rem; align-items: center; }
.nav a { padding: .2rem 0; border-bottom: 3px solid transparent; }
.nav a:hover { border-bottom-color: var(--line); }
.nav a[aria-current="page"] { border-bottom-color: var(--red); }
.nav a.nav-cta { padding: .3rem .8rem; border-bottom: 0; }
.theme-toggle, .menu-toggle {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  padding: .35rem .65rem;
  border: 2px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.theme-toggle:hover, .menu-toggle:hover { border-color: var(--ink); }
.theme-icon::before { content: "\25D0"; }                   /* half circle: automatic */
.theme-toggle[data-theme="light"] .theme-icon::before { content: "\2600"; }  /* sun */
.theme-toggle[data-theme="dark"] .theme-icon::before { content: "\263E"; }   /* moon */
.menu-toggle { display: none; }
.dot-badge { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--red-fill); }
html:not(.js) .theme-toggle { display: none; }  /* the switch needs JavaScript */

/* Phones: the links fold away behind a Menu button. */
@media (max-width: 760px) {
  .site-header { gap: .75rem; }
  .theme-toggle .theme-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .header-tools { margin-left: auto; order: 2; }
  html.js .menu-toggle { display: inline-flex; }
  .nav { order: 3; width: 100%; margin: 0; }
  html.js .nav { display: none; }
  html.js .nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--line);
  }
  .nav a { padding: .7rem .25rem; border-bottom: 1px solid var(--line); }
  .nav a[aria-current="page"] { border-bottom-color: var(--line); border-left: 4px solid var(--red); padding-left: .6rem; }
  .nav a.nav-cta { margin-top: .5rem; padding: .6rem .8rem; text-align: center; }
  .hero h1 { font-size: clamp(2rem, 11vw, 3rem); }
  .search { flex-direction: column; }
  .auth-card .row, .auth-card .row.era-row { grid-template-columns: 1fr; }
  .entry-grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
  .members { display: block; overflow-x: auto; }
}

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: .6rem 1rem;
  background: var(--ink);
  color: var(--cotton);
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }
main:focus { outline: none; }
/* A clear outline wherever the keyboard is (mouse clicks don't show it). */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.entry-card:focus-visible, .tile-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
a { text-underline-offset: .15em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Small finishing touches ---------- */
.entry-card { transition: transform .12s ease, border-color .12s ease; }
.entry-card:hover { transform: translateY(-2px); }
.tile-link { transition: border-color .12s ease; }
button, .button { transition: background-color .12s ease, border-color .12s ease; }
.button:hover, .auth-card button:not(.secondary):hover, .panel button:not(.secondary):not(.danger):hover { background: var(--red-fill); border-color: var(--red-fill); color: var(--on-red); }
/* See-through, so highlighted text stays readable (phones draw it over the text in boxes). */
::selection { background: rgba(230, 184, 92, .35); }
.shrink-note { display: block; margin-top: .4rem; font-size: .88rem; }

/* ---------- Duplicate check ---------- */
.dup-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .6rem; }
.dup-photos figure { margin: 0; background: var(--cotton); border: 1px solid var(--line); }
.dup-photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.dup-photos figcaption { padding: .3rem .5rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.dup-match h3 { margin: 0 0 .25rem; }
.dup-match h3 a { color: var(--ink); }
.dup-match h3 small { font-weight: 400; color: var(--ink-soft); font-size: .8rem; }
.dup-mine { border-top: 5px solid var(--mustard); }
.dup-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 .5rem; }
.dup-actions button {
  padding: .8rem 1.2rem; border: 2px solid var(--ink); background: var(--ink); color: var(--cotton);
  font: inherit; font-weight: 700; cursor: pointer; text-align: left;
}
.dup-actions button.danger { background: var(--red-fill); border-color: var(--red-fill); color: var(--on-red); }
.dup-help { margin-bottom: 3rem; }

/* ---------- XP and class ---------- */
.rank { margin: -.25rem 0 1rem; max-width: 26rem; }
.rank-line { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin: 0 0 .35rem; }
.rank-class { font-family: inherit; font-weight: 700; font-size: 1.15rem; }  /* same font as Unit Type */
.rank-tier { padding: .05rem .5rem; border: 1px solid var(--ink); font-size: .8rem; font-weight: 700; }
.rank-xp { color: var(--ink-soft); font-weight: 600; font-size: .9rem; }
.rank-lines { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; margin: 0 0 .35rem; }
.rank-type { color: var(--ink-soft); font-weight: 700; }
.rank-with-badge { display: flex; gap: .6rem; align-items: flex-start; }
.rank-with-badge .class-badge { width: 40px; height: 40px; }
p.rank-xp { margin: 0 0 .35rem; }
.xp-bar { height: .7rem; background: var(--paper); border: 1px solid var(--line); }
.xp-bar span { display: block; height: 100%; background: var(--mustard); }
.rank .hint, .rank-panel .hint { margin: .35rem 0 0; }
.rank-panel { max-width: 40rem; }
.rank-panel h2 { margin-top: 1.25rem; }
.promote-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.panel .promote-options button { background: var(--paper); color: var(--ink); }
.panel .promote-options button:hover { background: var(--red-fill); color: var(--on-red); }
.tier-block summary { cursor: pointer; }
.class-list { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .35rem; font-size: .92rem; }
.class-list li.current { font-weight: 700; }
.rank-small { color: var(--ink-soft); font-weight: 600; }

/* ---------- Member chip: picture, name and class ---------- */
.member-chip { display: inline-flex; align-items: center; gap: .5rem; vertical-align: middle; }
.member-icon { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--line); background: var(--paper); }
.member-icon.is-class, .avatar.is-class { object-fit: contain; background: var(--cotton); }
.member-text { display: inline-flex; flex-direction: column; line-height: 1.2; }
.member-text a { font-weight: 700; }
.class-badge { width: 32px; height: 32px; object-fit: contain; flex: none; }
.rank-line .class-badge { width: 40px; height: 40px; align-self: center; }
.class-desc { max-width: 34rem; }

/* ---------- Class choices (sign-up and the class page) ---------- */
.class-grid, .class-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .75rem; margin: .5rem 0 1rem; padding: 0; list-style: none; }
.class-options > div, .class-options > li { margin: 0; }
.class-card, .class-options label {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; height: 100%; text-align: center;
  padding: .75rem .6rem; background: var(--paper); border: 2px solid var(--line); color: var(--ink); cursor: pointer;
  font: inherit; text-transform: none; letter-spacing: normal;
}
.class-card:hover, .class-options label:hover { border-color: var(--mustard); }
.class-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.class-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.class-options input:checked + .co-name, .class-options label:has(input:checked) { border-color: var(--red); }
.class-options label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--red); }
.class-options label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.co-name { font-family: var(--display); font-size: 1.1rem; font-weight: 700; }
.co-icon { width: 96px; height: 96px; object-fit: contain; }
.co-desc { font-size: .82rem; color: var(--ink-soft); line-height: 1.35; }
.co-type { font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.choice-group { margin: 1rem 0 .25rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.rank-current { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.rank-current > div { flex: 1; min-width: 14rem; }
.class-icon-big { width: 146px; height: 146px; object-fit: contain; background: var(--cotton); border: 2px solid var(--line); border-radius: 50%; }
.class-list li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.class-list li img { width: 40px; height: 40px; object-fit: contain; }
.class-list li small { color: var(--ink-soft); flex-basis: 100%; padding-left: 48px; margin-top: -.4rem; }
.profile-pic .avatar.is-class { padding: .5rem; }

/* ---------- Big "Custom class unlocked" banner ---------- */
.unlock-banner {
  margin: 0 0 1rem; padding: 1.25rem 1.25rem 1rem; text-align: center; color: var(--on-red);
  background: repeating-linear-gradient(135deg, var(--red-fill) 0 18px, #9c3a27 18px 36px);
  border: 3px solid var(--mustard); box-shadow: 0 0 0 3px var(--red-fill);
}
.unlock-banner p { margin: 0 0 .5rem; }
.unlock-kicker { text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; font-weight: 700; }
.unlock-title { font-family: var(--display); font-size: clamp(1.8rem, 6vw, 2.8rem); font-weight: 700; line-height: 1.05; }
.unlock-banner .button { background: var(--mustard); color: #2b2420; border-color: var(--mustard); }
.alert-item.banner-item { border-left-color: var(--mustard); }

/* ---------- Inbox messages ---------- */
.alert-item.is-message { border-left-color: var(--navy); }
.alert-item.is-message.unread { border-left-color: var(--red); }
.conversation-row .member-chip { margin-bottom: .35rem; }
.thread { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; max-width: 44rem; }
.thread-msg { padding: .6rem .9rem; background: var(--paper); border: 1px solid var(--line); margin-right: 3rem; }
.thread-msg.mine { margin: 0 0 0 3rem; border-color: var(--mustard); }
.thread-msg p { margin: 0; overflow-wrap: anywhere; }
.thread-meta { font-size: .8rem; color: var(--ink-soft); margin-bottom: .2rem !important; }
.reply-form { max-width: 44rem; }

/* ---------- Profile picture zoom and move ---------- */
.avatar-crop { margin: 0 0 1rem; }
.crop-view { position: relative; width: min(240px, 70vw); aspect-ratio: 1; overflow: hidden; border-radius: 50%; touch-action: none; cursor: grab; background: var(--cotton); outline: 2px solid var(--line); }
.crop-view:active { cursor: grabbing; }
.crop-view:focus-visible { outline: 3px solid var(--focus); }
.crop-view img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; pointer-events: none; }
.crop-zoom { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; max-width: 240px; }
.crop-zoom input { flex: 1; }

/* ---------- Resized photo check ---------- */
.shrink-intro { margin: 0 0 .4rem; color: var(--ink); font-weight: 600; }
.shrink-preview { display: flex; gap: .6rem; align-items: center; margin: 0 0 .4rem; padding: .4rem; background: var(--paper); border: 1px solid var(--line); }
.shrink-preview img { width: 6rem; height: 6rem; object-fit: cover; flex: none; }
.shrink-preview figcaption { display: grid; gap: .1rem; font-size: .82rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.shrink-preview figcaption strong { color: var(--ink); }
.shrink-note .errorlist { color: var(--red); font-weight: 600; }

/* ---------- Duplicate scores ---------- */
.dup-score { display: inline-block; margin-top: .15rem; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--ink-soft); }
.dup-score.strong { color: var(--red); }

/* The white box behind images on account pages is for two-factor QR codes only. */
.auth-card .co-icon, .auth-card .member-icon, .auth-card .class-badge, .auth-card .avatar,
.auth-card .crop-view img, .auth-card .shrink-preview img { background: transparent; padding: 0; }
.auth-card .co-icon { width: 96px; height: 96px; }
.auth-card .member-icon { width: 40px; height: 40px; }
.auth-card .class-badge { width: 32px; height: 32px; }
.auth-card .avatar { width: 96px; height: 96px; }
.auth-card .crop-view img { max-width: none; }

/* Class cards are buttons, but shouldn't look like the site's filled buttons. */
.class-grid button.class-card, .class-grid button.class-card:hover {
  background: var(--paper); color: var(--ink); font-weight: 400; text-transform: none; letter-spacing: normal;
  box-shadow: none; min-height: 0; line-height: 1.3;
}
.class-grid button.class-card:hover { border-color: var(--mustard); }
.class-grid button.class-card .co-name { font-weight: 700; }

/* Treasure Vault chest link (profile) and page head */
.facts + .vault-link { margin-top: -.75rem; }
.vault-link { display: inline-flex; flex-direction: column; align-items: center; gap: .15rem; margin: 0 0 1.25rem;
  color: var(--ink); font-weight: 700; text-decoration: none; transition: transform .15s ease; }
.vault-link img { display: block; }
.vault-link:hover, .vault-link:focus-visible { transform: translateY(-2px); }
.vault-link:hover span, .vault-link:focus-visible span { text-decoration: underline; }
a.rank-class { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a.rank-class:hover { color: var(--red); }
.favorite-pair { display: grid; grid-template-columns: minmax(10rem, 14rem) 1fr; gap: 0 1rem; align-items: start; }
@media (max-width: 560px) { .favorite-pair { grid-template-columns: 1fr; } }
.vault-head { display: flex; gap: 1rem; align-items: center; }

/* Profile: tier, class and unit type centred in a column */
.rank-lines { display: inline-flex; align-items: center; text-align: center; }
.facts .fav { font-weight: 800; color: var(--ink); }
/* Class page: each tier box only as wide as its text */
.tier-block { width: fit-content; max-width: min(100%, 36rem); }

/* Favorite Franchise: logo under the label, and the suggestions list on Edit profile */
.facts dd.fav-logo { grid-column: 1 / -1; margin-top: -.1rem; }
.fav-logo img { display: block; max-width: min(100%, 260px); max-height: 96px; width: auto; height: auto;
  padding: .5rem .75rem; background: #f7f1e6; border-radius: 6px; }
.franchise-field { position: relative; }
.franchise-suggestions { position: absolute; z-index: 20; left: 0; right: 0; margin: -.6rem 0 0; padding: .25rem 0;
  list-style: none; background: var(--paper, #fff); border: 1px solid var(--ink); box-shadow: 0 6px 18px rgba(0,0,0,.25);
  max-height: 18rem; overflow-y: auto; }
.franchise-suggestions li { padding: .45rem .75rem; cursor: pointer; display: flex; flex-direction: column; }
.franchise-suggestions li small { color: var(--ink-soft); }
.franchise-suggestions li:hover, .franchise-suggestions li.active { background: var(--ink); color: var(--paper, #fff); }
.franchise-suggestions li:hover small, .franchise-suggestions li.active small { color: inherit; }

/* =====================================================================
   UI overhaul (2026-10-21): editorial header, home stage and category slider.
   Layout and motion follow the nite-riot.com style; colours stay ThreadYard's.
   ===================================================================== */

/* ---------- Header: info + main links | logo | everything else ---------- */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: .9rem clamp(1rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.site-header .logo { grid-column: 2; grid-row: 1; order: 0; justify-self: center; }
.site-header .nav { display: contents; }
.nav-main { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap; }
.nav-side { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; }
.site-header .nav-side a.nav-phone-only, .site-header .nav-side .nav-checks { display: none; }  /* only in the open phone menu (see below) */
.site-header .nav a { padding: 0; border: 0; font-weight: 700; font-size: .98rem; position: relative; }
.site-header .nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.2rem; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .25s ease;
}
.site-header .nav a:hover::after, .site-header .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.site-header .nav a.nav-cta { padding: .3rem .8rem; }
.site-header .nav a.nav-cta::after { display: none; }
.nav-item { display: inline-flex; align-items: flex-start; gap: .15rem; }
.nav-item sup, .cat-all sup { font-size: .68em; color: var(--ink-soft); font-weight: 700; top: 0; line-height: 1; }
.header-info { margin: 0 .4rem 0 0; display: flex; gap: .45rem; align-items: center; font-size: .82rem; color: var(--ink-soft); font-weight: 700; }
.header-divider { opacity: .6; }
.header-time { display: inline-flex; align-items: center; gap: .35rem; min-width: 4.2em; }
.header-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--red); animation: ty-blink 2s steps(1) infinite; }
@keyframes ty-blink { 50% { opacity: 0; } }
.site-header .theme-toggle { border: 0; padding: 0; font-family: inherit; text-transform: uppercase; font-size: .9rem; font-weight: 700; }
.site-header .theme-toggle:hover { color: var(--red); }
.header-tools { grid-column: 3; grid-row: 1; justify-self: end; display: none; }
.menu-toggle { border: 0; padding: .2rem 0; font-family: var(--display); text-transform: uppercase; font-size: 1.05rem; font-weight: 700; letter-spacing: .03em; }
.menu-close-text { display: none; }
.menu-toggle[aria-expanded="true"] .menu-open-text { display: none; }
.menu-toggle[aria-expanded="true"] .menu-close-text { display: inline; }

@media (max-width: 1320px) {
  .header-info { display: none; }
}
@media (max-width: 1180px) {
  .site-header { grid-template-columns: 1fr auto 1fr; }  /* logo still top centre, Menu on the right */
  .site-header .logo { grid-column: 2; justify-self: center; }
  .header-tools { display: flex; grid-column: 3; }
  .site-header .nav.open .nav-side .theme-toggle { display: none; }  /* (not in the menu) */
  html.js .menu-toggle { display: inline-flex; }
  html.js .site-header .nav { display: none; }
  html.js .site-header .nav.open {
    display: flex; flex-direction: column; gap: 2rem;
    position: fixed; z-index: 60; inset: 4.4rem 0 0 0; overflow-y: auto;
    padding: 1.5rem clamp(1rem, 5vw, 2rem) 3rem;
    background: var(--cotton); border-top: 1px solid var(--line);
  }
  html:not(.js) .site-header .nav { display: flex; flex-direction: column; grid-column: 1 / -1; gap: 1rem; }
  .site-header .nav.open .nav-main, .site-header .nav.open .nav-side,
  html:not(.js) .nav-main, html:not(.js) .nav-side { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .site-header .nav.open .header-info { display: flex; order: 9; margin-top: .5rem; }
  .site-header .nav.open .nav-main a { font-size: clamp(2.4rem, 12vw, 3.6rem); line-height: 1; }
  .site-header .nav.open .nav-side a { font-size: 1.35rem; }
  .site-header .nav.open .nav-side a.nav-cta { font-size: 1.1rem; }
  .site-header .nav a { border-left: 0 !important; padding-left: 0 !important; border-bottom: 0 !important; }
  body.menu-is-open { overflow: hidden; }
  .site-header .nav.open .theme-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .site-header .nav.open .theme-toggle { font-size: 1.1rem; }
  /* The open phone menu shows only the menu items: one full-width list down the left side, filling the
     screen. Browse, Submit, the theme switch and the clock stay out of it (Browse and Submit are in the footer). */
  html.js .site-header .nav.open { gap: 0; padding: 0; justify-content: flex-start; align-items: stretch; }
  .site-header .nav.open .nav-main { display: none; }
  .site-header .nav.open .nav-side { width: 100%; align-items: stretch; justify-content: flex-start; gap: 0; }
  .site-header .nav.open .nav-side a {
    display: block; width: 100%; padding: 1rem clamp(1rem, 5vw, 2rem) !important; font-size: 1.6rem;
    border-bottom: 1px solid var(--line) !important; text-align: left;
  }
  .site-header .nav.open .nav-side a::after { display: none; }
  .site-header .nav.open .nav-side a.nav-phone-only { display: block; }
  .site-header .nav.open .nav-side a.nav-wide-only { display: none; }
  /* No Video Mode and No Screenshot Ani: side by side on one line */
  .site-header .nav.open .nav-side .nav-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; width: 100%;
    padding: 1rem clamp(1rem, 5vw, 2rem); }
  .site-header .nav.open .nav-side label.nav-check { display: flex; align-items: center; gap: .45rem; white-space: nowrap;
    font-size: 1rem; font-weight: 700; cursor: pointer; }
  .site-header .nav.open .nav-side label.nav-check input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--red); }
  .site-header .nav.open .nav-side a[aria-current="page"] { color: var(--red); }
  .site-header .nav.open .nav-side a.nav-cta { width: auto; margin: 1rem clamp(1rem, 5vw, 2rem); text-align: center; border-bottom: 0 !important; }
}

/* ---------- Instagram import ---------- */
.import-warning { border: 2px solid var(--red); border-radius: 6px; padding: 1rem 1.25rem; margin: 0 0 2rem; max-width: 52rem; }
.import-warning h2 { margin-top: 0; color: var(--red); font-size: 1.1rem; }
.import-help { max-width: 52rem; }
.import-warning > p:only-child { margin: 0; }
/* eBay import: the link box and button, styled like the sign-in forms. */
.ebay-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.25rem; }
.ebay-form label { flex-basis: 100%; font-weight: 600; }
.ebay-form input[type="text"] { flex: 1 1 18rem; min-width: 0; padding: .7rem .8rem; border: 2px solid var(--line);
  background: var(--cotton); color: var(--ink); font: inherit; }
.ebay-form input[type="text"]:focus { outline: none; border-color: var(--ink); }
.ebay-form input[type="text"]::placeholder { color: var(--ink-soft); }
.ebay-form button { padding: .7rem 1.2rem; border: 2px solid var(--ink); background: var(--ink); color: var(--cotton);
  font: inherit; font-weight: 700; cursor: pointer; }
.ebay-form button:hover { background: var(--red-fill); border-color: var(--red-fill); color: var(--on-red); }
.import-log { border: 1px solid var(--line, rgba(127, 127, 127, .35)); border-radius: 6px; padding: 1rem 1.25rem; margin: 0 0 2rem; }
.import-log h2 { margin-top: 0; font-size: 1.1rem; }
.import-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 0 0 .75rem; }
.import-counts div { padding: .6rem .8rem; border-radius: 4px; background: rgba(127, 127, 127, .12); }
.import-counts dt { font-size: .8rem; color: var(--ink-soft); }
.import-counts dd { margin: 0; font: 700 1.6rem/1.2 var(--display); }
.import-counts .is-rejected dd { color: var(--red); }
.import-notes { margin: 0 0 .5rem; padding-left: 1.1rem; color: var(--ink-soft); }
.import-details table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .5rem; }
.import-details th, .import-details td { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid rgba(127, 127, 127, .25); }
.import-details tr.is-rejected td { color: var(--ink-soft); }
.import-review .errorlist { color: var(--red); font-weight: 600; margin: .25rem 0; }
.import-post { border: 1px solid rgba(127, 127, 127, .35); border-radius: 6px; padding: .75rem 1rem 1rem; margin: 0 0 1.25rem; }
.import-post.has-problem { border-color: var(--red); }
.import-post legend { display: flex; gap: 1rem; align-items: baseline; padding: 0 .4rem; }
.import-include { font-weight: 700; }
.import-date { color: var(--ink-soft); font-size: .85rem; }
.import-title { display: grid; gap: .25rem; font-weight: 600; margin: .25rem 0 .75rem; max-width: 36rem; }
.import-photos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; }
.import-photos li { display: grid; gap: .4rem; }
.import-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: rgba(127, 127, 127, .15); }
.import-caption { margin-top: .75rem; color: var(--ink-soft); font-size: .9rem; }
.import-review .actions, p.actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
button.tile-link { width: 100%; height: 100%; text-align: left; font: inherit; cursor: pointer; }
.import-progress { max-width: 36rem; }
.import-progress progress { width: 100%; height: 1rem; accent-color: var(--red); }
.import-progress .progress-row { display: flex; align-items: center; gap: .75rem; margin: .75rem 0 0; }
.import-progress .progress-row progress { flex: 1 1 auto; }
.import-bulk { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1.25rem; }
.import-bulk .note { flex-basis: 100%; margin: 0; }
.import-not-apparel { display: inline-flex; gap: .4rem; align-items: center; margin-top: .75rem; font-weight: 600; }
.import-problems { border: 2px solid var(--red); border-radius: 6px; padding: .75rem 1rem; margin: 0 0 1.25rem; }
.import-problems ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.import-problems li { margin: .2rem 0; }
.import-number { color: var(--ink-soft); font-size: .85rem; }
.import-post { scroll-margin-top: 6rem; }
.back-link { margin: 0 0 .75rem; font-weight: 600; }
.back-link .note { font-weight: 400; }
/* Tick-box lists (example "Also fits in these categories"): the label is only as wide as the box and its name. */
#id_extra_categories label, div[id^="id_"] > div > label:has(input[type="checkbox"]) {
  display: inline-flex; gap: .4rem; align-items: center; width: auto; font-weight: 400; cursor: pointer;
}
input:disabled { background: rgba(127, 127, 127, .18); color: var(--ink-soft); cursor: not-allowed; }

/* ---------- Entry page: photo cards ---------- */
.entry-layout.is-stacked { grid-template-columns: 1fr; max-width: 52rem; margin-left: auto; margin-right: auto; }
.photo-deck { --card-w: min(80vw, 34rem, 64vh); position: relative; margin: 0 0 .5rem; overflow-x: clip;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: 4px; }
.deck-stage { position: relative; height: calc(var(--card-w) + 2.5rem); }
.deck-card {
  position: absolute; top: 1.25rem; left: 50%; width: var(--card-w); aspect-ratio: 1; margin: 0 0 0 calc(var(--card-w) / -2);
  background: var(--paper); border: var(--frame-w) solid var(--card-edge, var(--paper)); border-radius: 16px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
  transition: transform .45s cubic-bezier(.65, 0, .25, 1), opacity .35s ease, filter .35s ease;
}
.deck-card a { display: block; width: 100%; height: 100%; }
.deck-card img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.deck-card figcaption { display: none; }
/* "Full Size": the lower right corner of the entry page's front photo and of the zoomed view. It opens
   the full-size WebP (the archive copy) in a new tab; the photos themselves show the smaller AVIF copies. */
.hd-link { position: absolute; z-index: 2; right: .55rem; bottom: .55rem; padding: .3rem .6rem; border-radius: 6px;
  background: rgba(0, 0, 0, .68); color: #fff; font: 700 .72rem/1.2 var(--display); text-transform: uppercase;
  letter-spacing: .04em; text-decoration: none; }
.hd-link:hover, .hd-link:focus-visible { background: rgba(0, 0, 0, .88); color: #fff; text-decoration: underline; }
.deck-card a.hd-link { width: auto; height: auto; }  /* (not the photo link's full size) */
.hd-link[hidden], .deck-card:not(.is-center) .hd-link { display: none; }
.deck-card.is-center { z-index: 3; transform: none; cursor: zoom-in; }
/* The side cards tuck well behind the middle one (more than 40% hidden), tilted outwards. */
.deck-card.is-right { z-index: 2; transform: translateX(46%) rotate(7deg) scale(.86); filter: brightness(.88); cursor: pointer; }
.deck-card.is-left { z-index: 2; transform: translateX(-46%) rotate(-7deg) scale(.86); filter: brightness(.88); cursor: pointer; }
.deck-card.is-back { z-index: 1; opacity: 0; transform: scale(.7); pointer-events: none; }
.deck-caption { text-align: center; margin: .25rem 0 1.5rem; font-size: .8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .deck-card { transition: none; } }
/* Without scripts: a plain grid of the photos. */
html:not(.js) .deck-stage { height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .75rem; }
html:not(.js) .deck-card { position: static; width: auto; margin: 0; transform: none; opacity: 1; filter: none; }
html:not(.js) .deck-caption { display: none; }

/* Backstory photos: each at its own size, never blown up (one wider than the text shrinks to fit). Photos of
   different sizes sit side by side where they fit, centred, lined up along their middles, with even gaps. */
.story-figures { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem;
  margin: .75rem 0 1rem; }
.story-figures a { display: block; max-width: 100%; line-height: 0; }
.story-figures img { display: block; width: auto; max-width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; border: 0;
  border-radius: 10px; }
.photo-slot select { width: 100%; margin-top: .35rem; }
/* "Not Applicable" chosen: the Name and Publisher / Studio boxes are greyed out and crossed through with a white X. */
#id_subject:disabled, #id_detail_publisher:disabled {
  background-color: rgba(127, 127, 127, .25);
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1.5px), #fff calc(50% - 1.5px), #fff calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 1.5px), #fff calc(50% - 1.5px), #fff calc(50% + 1.5px), transparent calc(50% + 1.5px));
  background-repeat: no-repeat; background-size: 100% 100%;
}

/* ---------- Backstory quotes ---------- */
.story-quote { position: relative; margin: 1rem 0; padding: .9rem 1.1rem 1.6rem; border-left: 4px solid var(--red);
  background: rgba(127, 127, 127, .12); border-radius: 0 10px 10px 0; font-style: italic; }
.story-quote p { margin: 0; }
.story-quote.has-source { padding-bottom: 2rem; }
/* The source: only this small icon at the bottom right is a link (the words aren't). */
.quote-source { position: absolute; right: .6rem; bottom: .45rem; display: inline-flex; gap: .3rem; align-items: center;
  font: 600 .72rem/1 var(--display); font-style: normal; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); text-decoration: none; padding: .2rem .35rem; border-radius: 6px; }
.quote-source:hover, .quote-source:focus-visible { color: var(--ink); background: rgba(127, 127, 127, .2); }
/* Moderators: linked quotes in yellow, to verify before approving. */
.story-quote.needs-check { background: rgba(255, 210, 63, .2); border-left-color: #f2c12e; }
.link-check { margin-top: .6rem; padding: .5rem .7rem; border-radius: 6px; background: rgba(255, 210, 63, .25);
  color: var(--ink); font-style: normal; font-size: .85rem; }
.link-check code { display: block; margin: .3rem 0; overflow-wrap: anywhere; }
.link-check ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.quote-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin: .35rem 0 .5rem; }
/* Links in the backstory text (Link button): underlined in the site's red. */
.story-link { color: var(--red); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.story-link:hover, .story-link:focus-visible { color: var(--ink); }
/* Moderators: each link in yellow with its address and the safety check, to verify before approving. */
.story-link-check { padding: .1rem .3rem; border-radius: 4px; background: rgba(255, 210, 63, .3); font-style: normal; }
.story-link-check code { overflow-wrap: anywhere; }
#add-story-section:disabled { opacity: .5; cursor: not-allowed; }
/* The leaving-the-site page. */
.away-url code { overflow-wrap: anywhere; }

/* Item type and its combinations, each with "I need a combination" beside it. */
.item-type-row { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: flex-end; }
.item-type-row > div:first-child { flex: 1 1 14rem; }
.combo-check { display: inline-flex; gap: .4rem; align-items: center; font-weight: 400; margin-bottom: .55rem; cursor: pointer; width: auto; }
.item-type-row[hidden] { display: none; }

/* The "You're leaving ThreadYard" pop-up. */
.leave-dialog { max-width: min(34rem, 92vw); border: 0; border-radius: 12px; padding: 1.25rem 1.5rem; background: var(--paper); color: var(--ink);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.leave-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.leave-dialog h2 { margin-top: 0; }
.leave-dialog .leave-url code { overflow-wrap: anywhere; }
.leave-dialog .actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.combo-max { color: var(--red); font-size: .85rem; }

/* Photo preview (edit form): up to 80% of the window, never larger than the photo itself. */
img[data-preview] { cursor: zoom-in; }
.photo-preview { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.photo-preview::backdrop { background: rgba(0, 0, 0, .8); }
/* The photo leaves room above it for its name and below it for the buttons, on any screen (phones too) */
.photo-preview img { display: block; max-width: 80vw; max-height: 72vh; max-height: calc(100dvh - 12rem); width: auto; height: auto; border-radius: 8px;
  user-select: none; -webkit-user-select: none; }
.photo-preview-stage { position: relative; overflow: hidden; border-radius: 8px; touch-action: pan-y pinch-zoom; }  /* (sideways swipes go to the page's script) */
.photo-preview-stage img { transform-origin: 0 0; }
.photo-preview.is-zoomed .photo-preview-stage img { cursor: grab; }
.photo-preview.is-zoomed .photo-preview-stage img:active { cursor: grabbing; }
/* Crop: the kept part stays bright, the rest dims; drag a corner to resize, or inside to move it. */
.crop-box { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); cursor: move;
  touch-action: none; }
.crop-box[hidden] { display: none; }
.crop-box .crop-corner { position: absolute; z-index: 1; width: 26px; height: 26px; border: 4px solid #f5c518; touch-action: none; }  /* yellow corners: easy to see on light photos */
/* The top and bottom lines can be dragged anywhere along them (a strip as tall as a finger, unseen) */
.crop-line { position: absolute; height: 30px; margin-top: -15px; touch-action: none; cursor: ns-resize; }
/* The yellow lines reach a little past the corners, out over the dimmed part, to show they can be dragged; small
   up and down arrows beside them until the first touch (photo-preview.js places them). */
.crop-guides { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.crop-guides[hidden] { display: none; }
.crop-reach { position: absolute; width: 38px; height: 30px; margin-top: -15px; touch-action: none; cursor: ns-resize; }
.crop-reach::before { content: ""; position: absolute; top: 13px; height: 4px; width: 22px; background: #f5c518; }
.crop-reach-l::before { right: 0; }
.crop-reach-r::before { left: 0; }
.crop-arrow { position: absolute; top: 4px; color: #f5c518; line-height: 0; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9)); }
.crop-reach-l .crop-arrow { left: 0; }
.crop-reach-r .crop-arrow { right: 0; }
.crop-guides.arrows-seen .crop-arrow { display: none; }
.photo-preview-close[hidden] { display: none; }
/* The page behind a photo preview doesn't scroll */
html.preview-open, html.preview-open body { overflow: hidden; overscroll-behavior: none; }
.photo-preview { overscroll-behavior: contain; }
.crop-box [data-corner="nw"] { left: -4px; top: -4px; border-right: 0; border-bottom: 0; cursor: nwse-resize; }
.crop-box [data-corner="ne"] { right: -4px; top: -4px; border-left: 0; border-bottom: 0; cursor: nesw-resize; }
.crop-box [data-corner="sw"] { left: -4px; bottom: -4px; border-right: 0; border-top: 0; cursor: nesw-resize; }
.crop-box [data-corner="se"] { right: -4px; bottom: -4px; border-left: 0; border-top: 0; cursor: nwse-resize; }
.photo-preview-tools { position: absolute; top: calc(100% + .6rem); left: 0; right: 0; display: flex; gap: .5rem;
  justify-content: center; }
.photo-preview-tools[hidden], .photo-preview-tools [hidden] { display: none; }
.photo-preview-tools button { padding: .5rem 1rem; border: 2px solid #fff; background: #fff; color: #111;
  font: 700 .95rem/1.2 var(--body); cursor: pointer; }
.photo-preview-tools button.secondary { background: transparent; color: #fff; }
.crop-note { display: block; color: var(--red); font-weight: 700; }
/* The photo's name above it, in white (example Front), with its place when there are several. */
.photo-preview-label { position: absolute; bottom: calc(100% + .5rem); left: 0; right: 2.5rem; margin: 0; color: #fff;
  font: 700 1.1rem/1.2 var(--body); white-space: pre; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.photo-preview-label:empty { display: none; }
/* The X: above the photo (never on it), on the same line as its name, at the right. */
.photo-preview-close { position: absolute; top: auto; bottom: calc(100% + .25rem); right: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 2px solid #fff; background: #111; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; z-index: 2; }

/* Tag "Not Available" / back "Not Applicable" ticked: the photo's upload box is greyed out with a white X. */
.photo-slot:has(input[name="tag_unavailable"]:checked) input[type="file"],
.photo-slot:has(input[name="back_unavailable"]:checked) input[type="file"] {
  pointer-events: none; opacity: .7; color: transparent;
  background-color: rgba(127, 127, 127, .25);
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1.5px), #fff calc(50% - 1.5px), #fff calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 1.5px), #fff calc(50% - 1.5px), #fff calc(50% + 1.5px), transparent calc(50% + 1.5px));
  background-repeat: no-repeat; background-size: 100% 100%;
}
.photo-slot:has(input[name="tag_unavailable"]:checked) input[type="file"]::file-selector-button,
.photo-slot:has(input[name="back_unavailable"]:checked) input[type="file"]::file-selector-button { visibility: hidden; }

/* Instagram import finished: the notice that must be confirmed. */
.import-done-dialog { max-width: min(32rem, 92vw); border: 0; border-radius: 12px; padding: 1.4rem 1.6rem; background: var(--paper);
  color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.import-done-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.import-done-dialog h2 { margin-top: 0; color: var(--red); }

/* ---------- Results ---------- */
/* Grouped results (sorted by Game, Franchise, Console or System): each name in its own bracketed section. */
.result-group { position: relative; margin: 0 0 2rem; padding: 1rem 1.25rem 1.25rem; border: 2px solid var(--line, rgba(127,127,127,.35));
  border-left: 6px solid var(--red); border-radius: 0 10px 10px 0; }
.result-group-name { margin: 0 0 .9rem; font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; }
.result-group-name small { margin-left: .5rem; font-size: .7rem; color: var(--ink-soft); letter-spacing: .1em; }
.show-more { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; margin: 1.5rem 0; }
.show-more label { display: inline-flex; gap: .4rem; align-items: center; font-weight: 600; }
.page-numbers { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 0 0 2rem; }
.page-numbers a, .page-numbers span { min-width: 2.2rem; padding: .3rem .5rem; text-align: center; border-radius: 6px; border: 1px solid rgba(127,127,127,.4); }
.page-numbers span[aria-current] { background: var(--ink); color: var(--paper); font-weight: 700; }
.filters-below { max-width: 60rem; margin: 2rem auto 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(127,127,127,.35); }
.filters-below .filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .4rem 1.2rem; margin: 1rem 0; }
.filters-below .filter-grid input, .filters-below .filter-grid select { width: 100%; }

/* Name box suggestions. */
.name-suggest { position: absolute; z-index: 20; left: 0; right: 0; margin: .2rem 0 0; padding: .25rem 0; list-style: none;
  background: var(--paper); border: 1px solid rgba(127,127,127,.45); border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,.3); }
/* (about nine names show; the rest by scrolling, with a finger too, or the arrow keys) */
.name-suggest { max-height: 19rem; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  touch-action: pan-y; }
.name-suggest li { padding: .4rem .75rem; cursor: pointer; }
.name-suggest li.is-active, .name-suggest li:hover { background: rgba(127,127,127,.2); }

/* Moderator review: details given as unknown, Other or Not sure. */
.facts .is-unsure { color: #e0352b; font-weight: 700; }
dd.is-unsure { background: rgba(224, 53, 43, .12); border-radius: 4px; padding-left: .3rem; }

/* Photo sections for each item of a combination. */
.item-section-title { margin: .25rem 0 .5rem; font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; }
.item-photo-section { margin-top: 1.5rem; padding-top: 1rem; border-top: 2px dashed rgba(127, 127, 127, .4); }
.item-photo-section[hidden] { display: none; }

/* Tag "Not Available": the Tag Brand / Manufacturer box is crossed out with a white X too. */
form:has(input[name="tag_unavailable"]:checked) #id_manufacturer {
  pointer-events: none; color: transparent; background-color: rgba(127, 127, 127, .25);
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1.5px), #fff calc(50% - 1.5px), #fff calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 1.5px), #fff calc(50% - 1.5px), #fff calc(50% + 1.5px), transparent calc(50% + 1.5px));
  background-repeat: no-repeat; background-size: 100% 100%;
}
form:has(input[name="tag_unavailable"]:checked) #id_manufacturer::placeholder { color: transparent; }

/* Era and Exact Year: the boxes sit right under their labels, side by side. */
.era-row { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: flex-start; }
.era-row > div { flex: 0 1 16rem; }
.era-row label { margin-bottom: .1rem; }
.era-row .helptext { display: block; margin: .1rem 0 0; font-size: .8rem; color: var(--ink-soft); }

/* Entry votes. */
.entry-vote { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.vote-btn { padding: .15rem .55rem; border-radius: 6px; border: 1px solid rgba(127,127,127,.5); background: transparent;
  color: var(--ink); cursor: pointer; line-height: 1.2; }
.vote-btn.is-mine.up { background: #3f9a62; border-color: #3f9a62; color: #fff; }
.vote-btn.is-mine.down { background: var(--red); border-color: var(--red); color: #fff; }
.vote-score { min-width: 1.5rem; text-align: center; font-size: 1.1rem; }
.vote-error { flex-basis: 100%; margin: .2rem 0 0; color: var(--red); font-weight: 600; font-size: .85rem; }
.rank-with-badge .class-badge { width: 146px; height: 146px; }

/* Moderators edit details on the review page: each answer is its own drop-down or box. */
.quick-edit h2 { font-size: 1.05rem; margin: 1rem 0 .6rem; }
.quick-edit .facts { align-items: center; }
.quick-edit .facts dd input:not([type="checkbox"]), .quick-edit .facts dd select { width: 100%; max-width: 26rem; }
.quick-edit .facts dd.is-unsure input, .quick-edit .facts dd.is-unsure select { border-color: #e0352b; color: #e0352b; }
.quick-edit .facts dd .errorlist { margin: .2rem 0 0; }
.quick-edit .actions { margin: -.75rem 0 1.5rem; }

/* Account page: the class icon's drawing starts level with the Tier box; the XP bar sits right under Unit Type. */
.rank { max-width: 32rem; }
.rank-with-badge { align-items: flex-start; }
.rank-with-badge .class-badge { margin-bottom: -2rem; }
.rank-text { flex: 1; min-width: 0; }
.rank-text .rank-lines { margin-bottom: .5rem; }

/* The path on the class page: every class icon as big as the member's own icon at the top. */
.class-list { gap: .75rem; }
.class-list li { display: grid; grid-template-columns: 146px 1fr; grid-template-rows: auto 1fr; column-gap: 1rem; align-items: start; }
.class-list li img { width: 146px; height: 146px; grid-row: 1 / 3; background: var(--cotton); border: 2px solid var(--line); border-radius: 50%; }
.class-list li strong { align-self: end; font-size: 1.05rem; }
.class-list li small { flex-basis: auto; padding-left: 0; margin-top: .2rem; }
@media (max-width: 30rem) {
  .class-list li { grid-template-columns: 96px 1fr; }
  .class-list li img { width: 96px; height: 96px; }
}

/* Tiers 5-8 on the class page: an energetic glow around each icon's circle, a colour for each tier. */
.glow-5 { --glow: #b46cff; }  /* Heroic: purple */
.glow-6 { --glow: #3fe08a; }  /* Ancient: green */
.glow-7 { --glow: #4aa8ff; }  /* Celestial: blue */
.glow-8 { --glow: #ffc83d; }  /* Divine: gold */
.glow-tier .class-list li img {
  border-color: var(--glow);
  box-shadow: 0 0 6px 2px var(--glow), 0 0 18px 4px color-mix(in srgb, var(--glow) 55%, transparent),
              inset 0 0 12px color-mix(in srgb, var(--glow) 45%, transparent);
  animation: tier-glow 2.2s ease-in-out infinite;
}
.glow-tier .class-list li:nth-child(even) img { animation-delay: -1.1s; }
@keyframes tier-glow {
  0%, 100% { box-shadow: 0 0 5px 1px var(--glow), 0 0 12px 2px color-mix(in srgb, var(--glow) 45%, transparent),
                         inset 0 0 8px color-mix(in srgb, var(--glow) 35%, transparent); }
  50% { box-shadow: 0 0 9px 3px var(--glow), 0 0 26px 8px color-mix(in srgb, var(--glow) 65%, transparent),
                    inset 0 0 16px color-mix(in srgb, var(--glow) 55%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .glow-tier .class-list li img { animation: none; } }

/* Favorite Game on the account page: centred under the XP bar, with its box art. */
.fav-game { margin: 1rem 0 0; text-align: center; }
.fav-game-label { margin: 0; color: var(--ink-soft); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.fav-game-name { margin: .1rem 0 .6rem; font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
/* The name and box art link to the game's LaunchBox page; the box art keeps its place in the grid. */
.fav-game-name a { color: inherit; text-decoration: none; }
.fav-game-name a:hover, .fav-game-name a:focus-visible { text-decoration: underline; text-underline-offset: .15em; }
.fav-game-link { display: contents; }
.fav-game-cover { display: block; margin: 0 auto; max-width: 200px; max-height: 280px; width: auto; height: auto;
  border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }

/* Edit profile: box art region, hide option and preview. */
.boxart-pick { display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 1.25rem; }
.boxart-pick[hidden] { display: none; }
.boxart-preview { width: 120px; height: auto; max-height: 170px; object-fit: contain; border-radius: 3px; flex: none; }
.game-choices { margin: .25rem 0 1rem; border: 1px solid var(--line); padding: .5rem .75rem; display: grid; gap: .35rem; }
.game-choices small { color: var(--ink-soft); }

/* Instagram's own wordmark instead of the word: black on the light theme, white on the dark theme. */
.social-links a.has-logo { display: inline-flex; align-items: center; padding: .35rem .7rem; }
.social-logo { display: block; height: 1.25rem; width: auto; }
.social-links a.has-logo:hover .social-logo { filter: invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .social-logo { filter: invert(1); }
  :root:not([data-theme="light"]) .social-links a.has-logo:hover .social-logo { filter: none; }
}
:root[data-theme="dark"] .social-logo { filter: invert(1); }
:root[data-theme="dark"] .social-links a.has-logo:hover .social-logo { filter: none; }

/* Account page grid. Row 1: class icon, then tier / class / unit type over the XP bar.
   Rows 2-4: the Apparel Vault beside Favorite Game: "Apparel Vault" level with the game's name, and the
   chest level with the middle of the box art (whatever its shape). */
.rank-with-badge { display: grid; grid-template-columns: auto auto 1fr; column-gap: 1.5rem; align-items: start; }
.rank-with-badge > .rank-text { grid-column: 2; }
/* "Location" in the same size as "Apparel Vault" and the game's name, above its card; the card is about as
   tall as the treasure chest, with the place in big letters. */
.rank-with-badge .location-block { display: contents; }
.location-word { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.2; font-family: var(--body); }
.rank-with-badge .location-word { grid-area: 3 / 3; justify-self: start; width: 200px; max-width: 100%; margin-left: .5rem; text-align: center; }
/* No wider than the box art (at most 200px) or the chest (180px), so a long place wraps onto two lines. */
.profile-card.location-card { display: flex; align-items: center; justify-content: center; min-height: 125px; box-sizing: border-box;
  width: 200px; max-width: 100%; padding: .6rem .6rem; font-size: 1.5rem; font-weight: 700; line-height: 1.15; text-align: center; }
.rank-with-badge .location-card { grid-area: 4 / 3; align-self: center; justify-self: start; margin: 0 0 0 .5rem; }  /* the chest-to-box-art gap */
.rank-with-badge > .class-badge { grid-area: 1 / 1; }
.rank-with-badge > .rank-text { grid-row: 1; }
.rank-with-badge .vault-link.is-big, .rank-with-badge .fav-game { display: contents; }
.rank-with-badge .fav-game-label { grid-area: 2 / 2; margin-top: 1rem; }
.rank-with-badge .vault-word { grid-area: 3 / 1; justify-self: center; font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.rank-with-badge .fav-game-name { grid-area: 3 / 2; }
.rank-with-badge .vault-chest { grid-area: 4 / 1; justify-self: center; align-self: center; width: 180px; height: auto; }
.rank-with-badge .fav-game-cover { grid-area: 4 / 2; }
.rank-with-badge .fav-game-label, .rank-with-badge .fav-game-name, .rank-with-badge .fav-game-cover { justify-self: center; text-align: center; }
.vault-link.is-big:hover .vault-word { text-decoration: underline; }
.vault-link.is-big:hover .vault-chest { transform: translateY(-2px); }
/* Tier, class and unit type centred over the XP bar. */
.rank-text .rank-lines { display: flex; width: 100%; align-items: center; text-align: center; }
@media (max-width: 560px) {
  .rank-with-badge { grid-template-columns: 1fr; }
  .rank-with-badge > *, .rank-with-badge .vault-word, .rank-with-badge .vault-chest,
  .rank-with-badge .fav-game-label, .rank-with-badge .fav-game-name, .rank-with-badge .fav-game-cover,
  .rank-with-badge .location-card, .rank-with-badge .location-word { grid-area: auto !important; grid-column: auto !important; }
  .rank-with-badge .location-word { margin-top: 1rem; }
  .rank-with-badge .location-card, .rank-with-badge .location-word { justify-self: center; margin-left: 0; }
  .profile-card.location-card { font-size: 1.4rem; min-height: 100px; }  /* (still 200px wide at most) */
  .rank-with-badge .vault-chest { width: 140px; }
}

/* Location, About me and Socials: cards with the same thick rounded edge as the home page cards. */
.profile-card {
  width: fit-content; max-width: 100%; margin: 1.25rem 0 0; padding: .6rem 1rem .8rem;
  border: var(--frame-w) solid var(--card-edge, var(--line)); border-radius: 16px;
}
/* About me, Socials and the buttons share one width: Edit profile on the left, Log out on the right edge. */
.profile-cards { display: grid; width: fit-content; max-width: 100%; justify-items: start; }
.profile-cards .profile-actions { justify-self: stretch; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; }
.profile-card p { margin: 0; }
.profile-card-title { margin: 0 0 .5rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); font-family: var(--body); }
.profile-card .bio { max-width: 34rem; }
.profile-card.socials .social-links { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(max-content, 1fr)); gap: .5rem; margin: 0; }
.profile-card.socials .social-links a.has-logo { gap: .4rem; justify-content: center; height: 100%; }
.social-icon { display: block; flex: none; }
.profile-actions { margin-top: 1.25rem; }


/* Edit profile: email addresses (moved from their own page). */
.email-settings { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.email-list { display: grid; gap: .4rem; margin: 0 0 .75rem; }
.email-list .badge { margin-left: .35rem; }
.badge.is-warning { background: #b5651d; color: #fff; }
.add-email { margin-top: 1.25rem; }

/* "I don't know" next to a question (example Publisher): ticking it crosses the box out with a white X. */
.unknown-pair { position: relative; }
.unknown-pair .unknown-check { margin: .35rem 0 1rem; }
.unknown-pair:has(.unknown-check input:checked) input[type="text"] {
  pointer-events: none; color: transparent; background-color: rgba(127, 127, 127, .25);
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1.5px), #fff calc(50% - 1.5px), #fff calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 1.5px), #fff calc(50% - 1.5px), #fff calc(50% + 1.5px), transparent calc(50% + 1.5px));
  background-repeat: no-repeat; background-size: 100% 100%;
}
.unknown-pair:has(.unknown-check input:checked) input[type="text"]::placeholder { color: transparent; }
/* A question's "I need a combination" (example System) sits beside its "I don't know"; with "I don't know"
   ticked there is nothing to combine. */
/* "(The system was unable to automatically determine Publisher)" beside the box's name (game-facts.js) */
.auto-note { font-weight: 400; font-style: italic; color: var(--ink-soft); }
.detail-checks { display: flex; flex-wrap: wrap; gap: 0 1.5rem; align-items: center; }
.detail-checks .combo-check { margin: .35rem 0 1rem; }
.detail-combo-row[hidden] { display: none; }
.detail-combo-row .combo-check { margin: .35rem 0 1rem; }
.detail-combo:has(.unknown-check input:checked) .combo-check,
.detail-combo:has(.unknown-check input:checked) .detail-combo-row { display: none; }

.location-card a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.location-card a:hover { color: var(--red); }
/* Room for the Location card beside the box art; the rank column keeps its old width. */
.rank { max-width: 52rem; }
.rank-with-badge > .rank-text { max-width: 22rem; width: 100%; }

/* Edit profile: the box art "don't show" tick box sits clear of the region drop-down. */
.boxart-pick .inline-check { margin-top: .9rem; }
/* About me: a fixed-size box with a character count under it (red when none are left). */
textarea[data-counter] { resize: none; height: 16rem; overflow-y: auto; }
.char-count { margin: .3rem 0 1rem; font-size: .85rem; color: var(--ink-soft); }
.char-count.is-full { color: var(--red); font-weight: 700; }

/* Profile picture tool: the circle and its buttons, with previews of the result beside it. */
.crop-layout { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.crop-tools { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; max-width: 260px; }
.crop-tools button { padding: .3rem .6rem; font-size: .85rem; }
.crop-previews { display: grid; justify-items: center; gap: .2rem; }
.crop-previews .label { margin: 0 0 .3rem; }
.crop-previews .hint { margin: 0 0 .6rem; font-size: .8rem; }
.crop-preview { border-radius: 50%; background: var(--cotton); border: 2px solid var(--line); }
.crop-preview.is-large { width: 120px; height: 120px; }
.crop-preview.is-small { width: 40px; height: 40px; }
/* Every social button fills its column, so short names (example X) are as wide as the rest. */
.profile-card.socials .social-links li { display: flex; min-width: 0; }
/* Narrow screens: two buttons a row, all inside the card (they used to run past its right edge). */
@media (max-width: 700px) {
  .profile-card.socials { width: 100%; box-sizing: border-box; }
  .profile-card.socials .social-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-card.socials .social-links a.has-logo { min-width: 0; padding: .35rem .4rem; font-size: .95rem; }
  .profile-card.socials .social-logo { max-width: 100%; }
}
.profile-card.socials .social-links a.has-logo { width: 100%; }

/* Login security: the three ways to log in. */
.login-methods fieldset { display: grid; gap: .6rem; }
.login-method { align-items: flex-start; }
.login-method small { color: var(--ink-soft); }
.login-method input:disabled + span { opacity: .55; }

/* A custom class picture (the member's own upload) is shown in a circle, like the class icons. */
img.is-custom { border-radius: 50%; object-fit: cover; border: 2px solid var(--line); background: var(--cotton); }
.class-icon-big.is-custom { object-fit: cover; }

/* Password boxes: an eye button inside the right edge shows or hides what was typed. */
/* (Written strongly enough to beat the sign-in card's own button, input and picture styles.) */
.password-wrap { position: relative; display: block; }
.password-wrap > input.password-box, .auth-card .password-wrap > input.password-box { width: 100%; padding-right: 2.9rem; }
.password-wrap > button.password-eye, .auth-card .password-wrap > button.password-eye {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); display: flex; width: auto; margin: 0;
  padding: .25rem; border: 0; background: transparent; color: var(--ink); cursor: pointer; line-height: 0; }
.password-wrap > button.password-eye svg, .auth-card .password-wrap > button.password-eye svg {
  width: 22px; height: 22px; padding: 0; background: none; max-width: none; }
.password-wrap > button.password-eye:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Submission form: boxes only as wide as their longest choice. */
.item-type-row select, #id_subject_kind, .era-box select, .owned-box select { width: auto; max-width: 100%; }
.item-type-row > div:first-child { flex: 0 1 auto; }
.owned-box { flex: 0 1 auto; }
.era-row > div.era-box { flex: 0 1 auto; }
.era-box .helptext { display: block; margin: 0 0 .3rem; font-size: .8rem; color: var(--ink-soft); }
/* Tag Brand, Origin and Status: one shared width, the widest of the three (the Status choices). */
.same-width { display: grid; grid-template-columns: minmax(0, 30ch); }
.same-width input:not([type="checkbox"]), .same-width select { width: 100%; }
/* A label and its box wrapped together, so the label always sits on top. */
.field > label { display: block; }
.owned-box { margin-bottom: 1rem; }
.year-box input { width: 9ch; }
.extra-category-boxes { display: grid; gap: .4rem; justify-items: start; margin-bottom: 1rem; }
.extra-category select { width: auto; max-width: 100%; }
.extra-category[hidden] { display: none; }

/* Apparel Vault tabs: Owned and Submitted. */
.vault-tabs { display: flex; gap: 1.5rem; margin: 0 0 1rem; border-bottom: 1px solid var(--line); }
.vault-tabs a { padding: .4rem 0; font-weight: 700; text-decoration: none; color: var(--ink-soft); border-bottom: 3px solid transparent; }
.vault-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); }
.vault-note { margin: -.25rem 0 1rem; }
.vault-note a { text-decoration: underline; }

/* About me as ASCII art: fixed-width letters, every space kept, small enough for wide pictures
   (wider ones scroll sideways inside the card). The edit box switches to fixed-width too. */
/* As wide as the picture at full size (13px letters), or the screen if that's narrower. */
.profile-card.is-ascii { width: min(100%, calc(var(--cols, 80) * 13px * .62 + 2rem + 14px)); max-width: 100%; box-sizing: border-box; }
/* The letter size is worked out from the card's width and the picture's width (--cols), so it always fits. */
.ascii-fit { container-type: inline-size; }
.bio-ascii { margin: 0; max-width: 100%; overflow: hidden; white-space: pre; line-height: 1.15;
  font: 400 min(13px, calc(100cqw / (var(--cols, 80) * .62)))/1.15 ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; }
.bio-box:has(input[name="bio_ascii"]:checked) textarea { font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: .75rem; white-space: pre; overflow-x: auto; }

/* Phones: no header bar. Menu on the right with the grey divider line down its left side and along its bottom
   (the two lines stop short of the corner, and there's none on top). It floats over the top of the page: on the
   home page level with "where" above APPAREL (the logo is under the category slider there); on every other page
   the logo sits top left, Menu level with it on the right, and the page starts under the logo. */
@media (max-width: 767px) {
  :root { --frame-w: 3.5px; --phone-logo-w: min(180px, 50vw); }
  .site-header { position: absolute; z-index: 70; top: 0; left: 0; right: 0; display: block; height: 0; padding: 0;
    border-bottom: 0; }
  .header-tools { position: absolute; top: 1.25rem; right: clamp(1rem, 4vw, 3rem); }
  main { padding-top: 1.5rem; }  /* (their own top spacing does the rest) */
  .site-header .logo { position: absolute; top: .7rem; left: clamp(1rem, 4vw, 3rem); width: var(--phone-logo-w); }  /* top left */
  .page-home .site-header .logo { display: none; }
  body:not(.page-home) { padding-top: calc(.7rem + var(--phone-logo-w) * 198 / 640 + .5rem); }
  body:not(.page-home) main { padding-top: .5rem; }
  body:not(.page-home) .header-tools { top: calc(.7rem + var(--phone-logo-w) * 198 / 1280 - .75rem); }
  main > .page-head:first-child { padding-top: .5rem; }
  main > .page-head:first-child > .eyebrow:first-child { margin-top: 0; }
  .home-logo { display: block; width: min(80vw, 320px); margin: 1.5rem auto 0; }
  .menu-toggle { position: relative; padding: 0 0 .45rem .7rem; line-height: 1; }
  .menu-toggle::before, .menu-toggle::after { content: ""; position: absolute; background: var(--line); }
  .menu-toggle::before { left: 0; top: 0; bottom: 5px; width: 1px; }   /* left side */
  .menu-toggle::after { left: 5px; right: 0; bottom: 0; height: 1px; }  /* bottom */
  .page-home .header-tools { position: absolute; top: calc(clamp(.4rem, 1.8vh, 1.5rem) + .5rem); right: clamp(1rem, 3vw, 2.25rem); }
  html.js .site-header .nav.open { inset: 3.6rem 0 0 0; }  /* the open menu starts just under the Menu button */
  html.js body:not(.page-home) .site-header .nav.open { top: calc(.7rem + var(--phone-logo-w) * 198 / 640 + .5rem); }  /* (under the logo) */
}

/* ---------- Upload or import: the choice, and the batch photo sorter ---------- */
.import-choices { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.import-choice strong { display: block; font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; }
.import-choice span { display: block; margin-top: .35rem; color: var(--ink-soft); }
.batch-steps { margin: .75rem 0; padding-left: 1.3rem; max-width: 40rem; }
.batch-steps li { margin: 0 0 .35rem; }
.batch-upload { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1rem; }
.batch-choose { position: relative; cursor: pointer; }
.batch-choose input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.batch-status { margin: 0; }
.batch-grid { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 42vw), 1fr)); }
.batch-photo { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 3px solid transparent;
  background: var(--paper); cursor: pointer; }
.batch-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }  /* the whole photo: its top tells front, back or tag */
.batch-photo[aria-pressed="true"] { border-color: var(--red); }
.batch-badge { position: absolute; left: .25rem; top: .25rem; padding: .1rem .35rem; font: 700 .72rem/1.2 var(--body);
  background: var(--red); color: #fff; }
.batch-badge:empty { display: none; }
/* Already in an entry: greyed out, with its entry number. */
.batch-photo.is-grouped img { filter: grayscale(1) brightness(.45); }
.batch-photo.is-grouped .batch-badge { background: var(--ink-soft); color: var(--cotton); }
.batch-photo.is-uploading { opacity: .5; cursor: progress; }
/* The bar along the bottom of the screen with the buttons. */
.batch-bar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem 1rem; margin: 0 0 1rem; padding: .7rem clamp(.75rem, 3vw, 1.25rem);
  background: var(--cotton); border-top: 2px solid var(--line); box-shadow: 0 -8px 20px rgba(0, 0, 0, .25); }
.batch-count { margin: 0; font-weight: 700; }
.batch-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.batch-bar button { padding: .55rem .9rem; border: 2px solid var(--ink); background: var(--ink); color: var(--cotton);
  font: inherit; font-weight: 700; cursor: pointer; }
.batch-bar button.secondary { background: transparent; color: var(--ink); }
.batch-bar button:disabled { opacity: .4; cursor: default; }
/* Cancel (red) and the upload's progress: under the Choose buttons on computers; on phones Cancel sits right of
   Create Drafts and the progress runs along the bottom of the bar. Shown once the batch has photos. */
.batch-progress { display: flex; align-items: center; gap: .75rem; max-width: 36rem; margin: -.25rem 0 1rem; }
.batch-progress[hidden], .batch-bar [hidden] { display: none; }
.batch-progress progress, .batch-bar progress { flex: 1 1 auto; width: 100%; height: .9rem; accent-color: var(--red); }
.batch-cancel-button, .batch-bar button.batch-cancel-button, .import-progress .batch-cancel-button {
  padding: .55rem .9rem; border: 2px solid var(--red-fill); background: var(--red-fill); color: var(--on-red);
  font: inherit; font-weight: 700; cursor: pointer; }
.batch-cancel-button:hover { filter: brightness(1.1); }
.batch-bar .is-narrow { display: none; }
@media (max-width: 767px) {
  .batch-progress.is-wide { display: none; }
  .batch-bar button.is-narrow:not([hidden]) { display: inline-block; }
  /* Delete, Make Entry, Create Drafts and Cancel on one row */
  .batch-actions { flex-wrap: nowrap; gap: .3rem; width: 100%; }
  .batch-bar { padding-left: .5rem; padding-right: .5rem; }
  .batch-bar button, .batch-bar button.batch-cancel-button { flex: 1 1 auto; min-width: 0; padding: .5rem .35rem;
    font-size: .8rem; line-height: 1.15; }
  .batch-bar progress.is-narrow:not([hidden]) { display: block; flex-basis: 100%; }
}
.batch-lede { margin: .5rem 0; }
.batch-help { margin: 0 0 1rem; padding: .5rem .8rem; border: 1px solid var(--line); }
.batch-help summary { cursor: pointer; font-weight: 700; }
.batch-shortcut { display: none; }
@media (hover: hover) and (pointer: fine) { .batch-shortcut { display: inline; } }  /* (keyboards: computers only) */

/* ---------- Entry form: the same 16px between every field ----------
   Each field's last box or tick box ends 1rem above the next field's name. Wrappers (combination rows,
   "I don't know" pairs) add nothing of their own, so they never double up. */
.auth-card .entry-form fieldset > input:not([type="hidden"]), .auth-card .entry-form fieldset > select,
.auth-card .entry-form fieldset > textarea, .auth-card .entry-form .item-types,
.auth-card .entry-form .unknown-pair, .auth-card .entry-form .detail-combo,
.auth-card .entry-form .detail-combo-row { margin-bottom: 1rem; }
.auth-card .entry-form .detail-combo > .unknown-pair:last-child, .auth-card .entry-form .detail-combo-row:last-child,
.auth-card .entry-form .item-type-row:last-child { margin-bottom: 0; }
.auth-card .entry-form .unknown-pair .unknown-check, .auth-card .entry-form .detail-checks .combo-check,
.auth-card .entry-form .detail-combo-row .combo-check { margin: .35rem 0 0; }
.auth-card .entry-form .detail-checks { gap: 0 1.5rem; }
/* the last field of a section ends at the section's own bottom */
.auth-card .entry-form fieldset > :nth-last-child(1 of :not(datalist, script, input[type="hidden"])) { margin-bottom: 0; }
.auth-card .entry-form fieldset > textarea { display: block; }  /* (inline boxes leave a gap under the line) */
.auth-card .entry-form .detail-combo > .unknown-pair { margin-bottom: 0; }
.auth-card .entry-form .detail-combo-row { margin: 1rem 0 0; }
.auth-card .entry-form .same-width > input, .auth-card .entry-form .same-width > select { margin-bottom: 1rem; }
.auth-card .entry-form .same-width > :nth-last-child(1 of :not(datalist)) { margin-bottom: 0; }
/* Era's "I don't know the exact year" sits as close under it as other "I don't know" boxes */
.auth-card .entry-form .era-row { margin-bottom: .35rem; }
.auth-card .entry-form .era-row + .inline-check { margin-top: 0; }
.auth-card .entry-form fieldset:not(:has(> legend)) { padding-top: 0; }
.auth-card .entry-form .item-section-title:first-child { margin-top: 0; }
.auth-card .entry-form .era-row > div { margin-bottom: 0; }
@media (max-width: 767px) { .auth-card .entry-form .item-type-row .combo-check { margin-bottom: 0; } }
/* A photo given "Remove" in its drop-down: dimmed until the entry is saved */
.slot-photo.is-removing img, .photo-slot.is-removing > img { opacity: .3; filter: grayscale(1); }  /* (not a new photo chosen in its place) */
.slot-photo { position: relative; }
.remove-note { display: block; color: var(--red); font-weight: 700; }
.move-photo { display: block; margin: .35rem 0 .5rem; }
.move-photo select { display: block; width: 100%; margin-top: .2rem; }
/* Batch / Instagram drafts: Front, Back, Tag beside "Title:" (they open the photo) */
.title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-bottom: 4px; line-height: 1.25; }
.title-row + .helptext, .title-row ~ .helptext { margin-top: 0; }
.title-row label { margin-bottom: 0; }
.title-photos { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; margin-left: auto; }
.title-photos[hidden] { display: none; }   /* (no photos yet: no "Preview Pictures:" line) */
.title-photos-bar { color: var(--ink-soft); font-weight: 400; }
.title-photos-label { font-weight: 700; }
.title-photos .link-button { background: none; border: 0; padding: 0; color: var(--navy); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.title-photos .link-button:hover { color: var(--red); }
.auth-card .entry-form label[for="id_title"], .auth-card .entry-form label[for="id_manufacturer"] { display: inline-block; }
/* A removed photo also gets a white line across it (item-combo.js lays this over the photo) */
.photo-slot { position: relative; }
.remove-line { position: absolute; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 2px), #fff calc(50% - 2px), #fff calc(50% + 2px), transparent calc(50% + 2px)); }
/* Era greyed out once an exact year is given (era-year.js) */
.auth-card select.is-auto-off { opacity: .45; cursor: not-allowed; }
.has-era-line { position: relative; }
/* System: a drop-down of the game's systems (game-facts.js); "Choose One" in italics until one is chosen. */
.auth-card select.system-chooser { display: block; width: auto; max-width: 100%; margin: 0 0 .4rem; }
.system-chooser.is-placeholder { font-style: italic; }
.system-chooser option { font-style: normal; }
.system-chooser option[value=""] { font-style: italic; }  /* (Era: a white line across it, .era-off-line, placed by era-year.js) */
/* A photo just chosen: its thumbnail under the file box (photo-preview.js) */
.chosen-photos { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0 0; }
.chosen-photos img { width: 6rem; height: 6rem; object-fit: cover; border-radius: 6px; border: 2px solid var(--line); }
.chosen-photos small { flex-basis: 100%; color: var(--ink-soft); }
/* Preview: "Crop successfully applied", just above the photo's name */
.photo-preview-done { position: absolute; bottom: calc(100% + 2.3rem); left: 0; margin: 0; padding: .45rem .8rem;
  background: #1f7a3d; color: #fff; font: 700 .95rem/1.2 var(--body); border-radius: 6px; white-space: nowrap; }
.photo-preview-done[hidden] { display: none; }
.chosen-photos .chosen-name { padding: .3rem .5rem; border: 1px dashed var(--line); font-size: .85rem; }
.chosen-photo { display: flex; flex-direction: column; gap: .25rem; max-width: 12rem; }
.chosen-photo .move-photo { margin: 0; font-size: .85rem; }
.auth-card .entry-form .title-row { margin-bottom: 4px; }
/* A new photo chosen in a box takes the place of the photo shown there (photo-preview.js) */
.photo-slot.has-chosen .slot-photo.is-removing { display: none; }  /* (replaced by the new photo) */
/* Preview: Delete in red */
.photo-preview-tools button.danger { background: var(--red-fill); border-color: var(--red-fill); color: var(--on-red); }
/* "Make Default Photo" under the Front and the Back, in a yellow outline */
.cover-check { display: inline-flex; align-items: center; gap: .45rem; margin: .5rem 0 0; padding: .35rem .6rem;
  border: 2px solid #e8b923; border-radius: 6px; font-weight: 700; cursor: pointer; }
.cover-check input { accent-color: #e8b923; }
/* "You are about to leave..." (leave-guard.js) */
.leave-dialog { max-width: 26rem; padding: 1.25rem 1.5rem; border: 2px solid var(--line); border-radius: 8px;
  background: var(--paper, var(--cotton)); color: var(--ink); }
.leave-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.leave-dialog p { margin: 0 0 1rem; font-weight: 700; }
.leave-dialog .actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.leave-dialog button { padding: .55rem 1rem; border: 2px solid var(--ink); background: var(--ink); color: var(--cotton);
  font: inherit; font-weight: 700; cursor: pointer; }
.leave-dialog button.secondary { background: transparent; color: var(--ink); }
/* Phones: "Title:" and "| Preview Pictures: Front Back Tag" stay on one line (the links' text sized to the
   screen, so it fits even when the phone shows text larger) */
@media (max-width: 767px) {
  .auth-card .entry-form .title-row { flex-wrap: nowrap; gap: .5rem; }
  .title-row label { white-space: nowrap; }
  .auth-card .entry-form .title-row { width: 100%; min-width: 0; }
  .title-photos { flex-wrap: nowrap; gap: .45rem; white-space: nowrap; min-width: 0; overflow: hidden;
    padding-bottom: 4px; }  /* (photo-preview.js sizes it to fit; the padding keeps the underlines) */
}
.auth-card .entry-form fieldset { min-width: 0; }  /* (fieldsets otherwise never get narrower than their contents) */
/* Submit: the first thing on an empty batch page (batch-sort.js) */
.batch-start { max-width: 30rem; padding: 1.25rem 1.5rem; border: 2px solid var(--line); border-radius: 8px;
  background: var(--paper, var(--cotton)); color: var(--ink); }
.batch-start::backdrop { background: rgba(0, 0, 0, .6); }
.batch-start p { margin: 0 0 .75rem; }
.batch-start .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.batch-start button { padding: .55rem 1rem; border: 2px solid var(--ink); background: var(--ink); color: var(--cotton);
  font: inherit; font-weight: 700; cursor: pointer; }
.batch-start button.secondary { background: transparent; color: var(--ink); }
.batch-other { margin: -.5rem 0 1rem; }
/* A new photo in a photo box: where the box's photo shows, the same size, at full brightness */
.photo-slot > .chosen-photos { display: block; margin: 0; }
.photo-slot > .chosen-photos .chosen-photo { max-width: none; display: block; }
.photo-slot > .chosen-photos img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 0;
  border-radius: 0; margin-bottom: .5rem; opacity: 1; filter: none; }
.photo-slot > .chosen-photos small { display: block; color: var(--ink-soft); font-size: .8rem; }
.photo-slot > .chosen-photos .move-photo { margin: .35rem 0 .5rem; font-size: inherit; }
/* Extra photos: an empty card (its photo moved to a box) isn't shown, nor the section while it has none */
.extra-card:not(:has([data-slot-photo])) { display: none; }
.extras-area.is-empty { display: none; }

/* ---------- The contrast halo, everywhere ----------
   The home page shades the space around its video and shirt cards (home.css: --shade). The same soft dark glow
   goes around everything else on the site, in both themes: behind all text (it's inherited, so new text gets it
   too), around boxes, buttons, cards and photos, and around the outline of cut-out pictures (the logo, the
   treasure chest, class icons). The home page's stage keeps its own shading. Text inside filled boxes
   (buttons, input boxes, badges) has none: it would only smudge it there. */
/* The same strength as the home page's shading (--shade there): a close dark glow, then a wide soft one that
   fades out to the plain background, so neighbours' halos run into each other as the home page's do. */
:root { --halo: rgba(43, 36, 32, .28); --halo-far: rgba(43, 36, 32, .16);
  --halo-text: 0 0 .15em var(--halo), 0 0 .5em var(--halo), 0 0 1.1em var(--halo), 0 0 2.2em var(--halo-far);
  --halo-box: 0 0 18px 6px var(--halo), 0 0 70px 26px var(--halo-far); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --halo: rgba(0, 0, 0, .92); --halo-far: rgba(0, 0, 0, .55); }
}
:root[data-theme="dark"] { --halo: rgba(0, 0, 0, .92); --halo-far: rgba(0, 0, 0, .55); }
.site-header, main, .site-footer, .messages { text-shadow: var(--halo-text); }
:is(input, select, textarea, button:not(.theme-toggle):not(.menu-toggle):not(.ruler-name), .button, .nav-cta, .badge,
  .dot-badge, .hang-tag, .entry-card, .message, .card-tag, .sample-tag, .hd-link, .bio-ascii, .xp-bar, .ascii-fit,
  .photo-preview, .entry-card-text) { text-shadow: none; }
:is(.site-header, main, .site-footer) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select,
  textarea, button:not(.theme-toggle):not(.menu-toggle):not(.ruler-name):not(.batch-photo), .button, .nav-cta,
  .entry-card, .profile-card, .panel, .result-group, .import-warning, .error-summary, .alert-item, .photo-slot,
  .avatar, .fav-game-cover, .auth-card, .chosen-photos img):not(.stage *) { box-shadow: var(--halo-box); }
.messages .message { box-shadow: var(--halo-box); }
.deck-card { box-shadow: 0 14px 34px rgba(0, 0, 0, .4), var(--halo-box); }
.brand-logo img, .vault-chest, .class-badge, .social-logo, .joystick svg, .avatar.is-class {
  filter: drop-shadow(0 0 8px var(--halo)) drop-shadow(0 0 26px var(--halo-far)); }
/* The home page's big title (WHERE APPAREL AND / HISTORY COLLIDE) sits on the stage's own shading but gets the
   text halo too, so it stands out in the light theme as well. */
.home-title .ht-row > span, .home-title .ht-lead { text-shadow: var(--halo-text); }
.avatar.is-class { box-shadow: none; }

/* Unsaved work found when a submit / edit form opens (work-save.js): Restore It or Discard. */
.work-restore { margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 2px solid var(--line); border-left: 6px solid var(--accent, var(--ink));
  border-radius: 8px; background: var(--paper); }
.work-restore p { margin: 0 0 .5rem; font-weight: 700; }
.work-restore .hint { font-weight: 400; }
.work-restore ul { margin: 0 0 .75rem; padding-left: 1.25rem; overflow-wrap: anywhere; }
.work-restore .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.batch-kept { margin: 0 0 1rem; }

/* "Analyzing image for duplicate entries" while a submission is checked (dupe-wait.js). */
.dupe-wait { width: min(28rem, 92vw); padding: 1.5rem; border: 2px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink); box-shadow: var(--halo-box); text-align: center; }
.dupe-wait::backdrop { background: rgba(0, 0, 0, .65); }
.dupe-wait-title { margin: 0 0 1rem; font-weight: 700; font-size: 1.1rem; }
.dupe-wait progress { width: 100%; height: 1rem; }
.dupe-wait .hint { margin: .9rem 0 0; }
.dupe-wait-eta { margin: .6rem 0 0; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Drafts tab: a tick box beside each draft, with Select all and Delete selected above (site.js). */
.draft-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.has-picks li { position: relative; padding-left: 2.25rem; }
.draft-pick { position: absolute; left: 0; top: 0; width: 2rem; height: calc(64px + 1.2rem); display: grid; place-items: center; cursor: pointer; }
.draft-pick input { width: 1.2rem; height: 1.2rem; cursor: pointer; }
/* Unused photos left from a batch upload (Drafts tab, under Submit a new entry). */
.unused-photos { margin-top: 1rem; }
.unused-photos p { margin: 0 0 .6rem; }
.unused-photos .actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.unused-photos form { margin: 0; }
.unused-photos a.button { color: var(--cotton); }
.unused-photos a.button:hover { color: var(--on-red); }
.unused-photos button { padding: .6rem 1.1rem; border: 2px solid var(--red); background: transparent; color: var(--red);
  font: inherit; font-weight: 700; cursor: pointer; }
.unused-photos button:hover { background: var(--red-fill); border-color: var(--red-fill); color: var(--on-red); }
/* A suggestion list out of date (new names on their way): faded, and taps on it are ignored (suggest-guard.js) */
.name-suggest.is-stale, .franchise-suggestions.is-stale { opacity: .45; }
/* Cropping: the buttons sit further below the photo, so a touch on the bottom crop line isn't taken for them */
.photo-preview.is-cropping .photo-preview-tools { top: calc(100% + 1.6rem); }
/* "Tag Brand: | Preview Pictures: Tag 2nd Tag": the line may run past the narrow Tag Brand box (as far as the screen allows) */
.auth-card .entry-form .same-width > .title-row { width: max-content; max-width: calc(100vw - 3rem); }
/* A note shown as a pop-up (base.html, site.js) */
.notice-popup { width: min(30rem, 92vw); padding: 1.4rem; border: 2px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink); line-height: 1.5; }
.notice-popup::backdrop { background: rgba(0, 0, 0, .65); }
.notice-popup p { margin: 0 0 1.1rem; }
.notice-popup button { padding: .6rem 1.4rem; border: 2px solid var(--ink); background: var(--ink); color: var(--cotton);
  font: inherit; font-weight: 700; cursor: pointer; }
/* A message with a button at its right (example "Delete these now" beside the unused photos note) */
.message-with-action { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; justify-content: space-between; }
.message-with-action form { margin: 0; }
.message-with-action button { padding: .45rem .9rem; border: 2px solid currentColor; background: transparent; color: inherit;
  font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
/* The spam trap box (entry_form.html): off the screen, never seen or reached with Tab */
.trap-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Cloudflare's check before a big upload (batch-sort.js) */
.human-check { width: min(28rem, 92vw); padding: 1.4rem; border: 2px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink); }
.human-check::backdrop { background: rgba(0, 0, 0, .65); }
.human-check h2 { margin: 0 0 .6rem; font-size: 1.2rem; }
.human-check-box { min-height: 70px; margin: 1rem 0 .5rem; }
.human-check-note { min-height: 1.2em; margin: 0 0 .8rem; font-style: italic; }
.human-check button { padding: .55rem 1.2rem; border: 2px solid var(--ink); background: transparent; color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer; }
/* Desktop: arrow signs left and right of the photo turn to the previous and next one (photo-preview.js) */
.preview-turn { position: absolute; top: 50%; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateY(-50%); line-height: 0; }
.preview-turn[hidden] { display: none; }
.preview-turn img { width: 46px; height: 48px; image-rendering: pixelated; border-radius: 0; max-height: none; max-width: none; }
.preview-turn-left { right: calc(100% + 14px); }
.preview-turn-right { left: calc(100% + 14px); }
.preview-turn:hover img, .preview-turn:focus-visible img { filter: brightness(1.15); transform: scale(1.06); }
/* Game or Franchise: dots side by side (kind-dots.js) */
.kind-field > label { display: block; margin: 0 0 .35rem; }
#id_subject_kind, #id_owned { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
#id_subject_kind label, #id_owned label { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-weight: 600; cursor: pointer; }
#id_subject_kind input[type="radio"], #id_owned input[type="radio"] { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--red); cursor: pointer; }
/* System from a game's list (game-facts.js): a drop-down for each system of a combination; the typed boxes are
   set aside meanwhile. "Generic - All Systems" is a dot beside "I need a combination". */
.combo-check[hidden] { display: none; }
.detail-combo.is-chooser [data-combo-row] { display: none !important; }
.system-combo-row { margin: .6rem 0 0; }
.system-combo-row .combo-check { margin: .35rem 0 .2rem; }
.detail-combo.is-all .system-combo-row,
.detail-combo.is-all .detail-checks .combo-check:not(.all-check) { display: none; }
/* Every dot choice on the site shows the red dot when chosen (as Game or Franchise does). */
input[type="radio"] { accent-color: var(--red); }
.all-check input[type="radio"] { width: 1.15rem; height: 1.15rem; margin: 0; cursor: pointer; flex: none; }
.all-note { margin: .3rem 0 0; }
/* Loading bars (yoshi-bar.js): cape Mario on Yoshi runs along the top of every progress bar as it fills, with
   a trick now and then (Yoshi's tongue, Mario's spin jump); room above the bar for the jump. */
progress.has-yoshi { margin-top: 3.6rem; }
.bar-yoshi { position: absolute; z-index: 2; pointer-events: none;
  background: url("../img/bar-yoshi.990406b11a1a.png") 0 0 no-repeat; image-rendering: pixelated; }
.bar-yoshi.is-mario { z-index: 3; }
.bar-yoshi[hidden] { display: none; }
/* Delete Entry (moderators and admins), on the right, level with Save Changes. */
.actions .staff-delete { margin-left: auto; background: var(--red-fill); border-color: var(--red-fill); color: var(--on-red); }
.actions .staff-delete:hover, .actions .staff-delete:focus-visible { filter: brightness(1.1); }
/* Phones: the preview photo as big as the screen allows, edge to edge, with the X over the top centre of the
   photo and its name above it (always on screen); room below only when there are buttons there (the edit form). */
@media (max-width: 767px) {
  /* The buttons sit at the bottom of the screen, as wide as it (never pushed off it by a tall photo); the photo
     fits between the room above it (its name) and them. --room-bottom: the buttons' height, set by
     photo-preview.js as they change. */
  .photo-preview { --room-top: 3rem; inset: var(--room-top) 0 var(--room-bottom, 0px); margin: auto; }
  .photo-preview .photo-preview-stage img { max-width: 100vw; max-height: calc(100dvh - var(--room-top) - var(--room-bottom, 0px));
    border-radius: 0; }
  /* (down to the very bottom on a solid strip, and on past it: nothing of the page shows below them, even while
     the browser's own bar slides in or out) */
  .photo-preview .photo-preview-tools, .photo-preview.is-cropping .photo-preview-tools { position: fixed; top: auto; left: 0; right: 0;
    bottom: 0; padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom, 0px)); background: #000;
    box-shadow: 0 6rem 0 #000; }
  /* While cropping: Apply Crop, Rotate, Cancel; then Crop On by Default on the left and Delete on the right. */
  .photo-preview.is-cropping .photo-preview-tools [data-crop-apply] { order: 1; }
  .photo-preview.is-cropping .photo-preview-tools [data-rotate] { order: 2; }
  .photo-preview.is-cropping .photo-preview-tools [data-crop-cancel] { order: 3; }
  .photo-preview.is-cropping .photo-preview-tools .crop-default-row { order: 4; flex: 1 1 55%; justify-content: flex-start; }
  .photo-preview.is-cropping .photo-preview-tools [data-delete] { order: 5; flex: none; }
  /* Narrow phones (the four don't fit on a line): Crop, Rotate, Cancel; then Crop On by Default on the left and
     Delete on the right. */
  @media (max-width: 370px) {
    .photo-preview-tools [data-crop] { order: 1; }
    .photo-preview-tools [data-rotate] { order: 2; }
    .photo-preview-tools [data-exit] { order: 3; }
    .photo-preview-tools .crop-default-row { order: 4; flex: 1 1 55%; justify-content: flex-start; }
    .photo-preview:not(.is-cropping) .photo-preview-tools [data-delete] { order: 5; flex: none; }
  }
  .photo-preview-stage { border-radius: 0; }
  /* the name on the left, the X in the middle of the screen, both above the photo */
  .photo-preview-label { left: .5rem; right: auto; bottom: calc(100% + .55rem); max-width: calc(50% - 1.9rem);
    overflow: hidden; text-overflow: ellipsis; font-size: 1rem; line-height: 1.35; padding-top: .1rem; }
  .photo-preview-close { position: absolute; top: auto; bottom: calc(100% + .3rem); left: 50%; right: auto;
    transform: translateX(-50%); }
}
/* A backstory photo just chosen that the browser can't show (HEIC, DNG...): its file name in its place. */
.story-thumb-name { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: .4rem;
  margin-bottom: .25rem; background: rgba(127, 127, 127, .2); font-size: .75rem; text-align: center; overflow-wrap: anywhere; }
/* Remove under a photo on the entry form (photo-remove.js): asks first. */
.photo-remove { display: block; width: 100%; margin: .35rem 0 0; padding: .35rem .5rem; font-size: .85rem; }
/* A member's manual Publisher / System (not on our lists): red, for the moderators to check. */
.manual-entry-warning { margin: 0 0 1rem; padding: .75rem 1rem; border: 2px solid var(--red); border-radius: 8px;
  background: rgba(181, 69, 47, .12); color: var(--ink); }
.manual-entry-warning ul { margin: .35rem 0; padding-left: 1.2rem; }
.known-sure { display: block; margin: .4rem 0 .8rem; }
.no-story-check { margin: .1rem 0 .5rem; }
/* A box that needs fixing (the form says why at the top and under it): outlined in red, whatever it is. */
form [aria-invalid="true"], form .field:has(> .errorlist) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  border-color: var(--red) !important; box-shadow: 0 0 0 2px var(--red) !important; }
form .field:has(> .errorlist) > label, form .unknown-pair:has(.errorlist) label:first-child { color: var(--red); }
/* "Crop On by Default" (photo preview): on its own line under the four buttons, in the middle; light green when on. */
.photo-preview-tools { flex-wrap: wrap; }
.crop-default-row { flex: 0 0 100%; display: flex; justify-content: center; margin-top: .1rem; }
.crop-default-row[hidden] { display: none; }
.photo-preview-tools button.crop-default { background: transparent; color: #fff; font-size: .85rem; padding: .4rem .9rem; }
.photo-preview-tools button.crop-default.is-on { background: #9be89b; border-color: #9be89b; color: #111; }
/* "Crop On by Default": the arrow signs stay while cropping, above the crop lines. On phones they sit in the
   dim above the photo, at its left and right corners, with the photo's name between them (the photo a little
   smaller to make room). */
.photo-preview.turns-while-cropping .preview-turn { z-index: 6; }
@media (max-width: 767px) {
  .photo-preview.is-cropping.turns-while-cropping { --room-top: 3.4rem; }
  .photo-preview.turns-while-cropping .preview-turn { top: auto; bottom: calc(100% + .25rem); transform: none; }
  .photo-preview.turns-while-cropping .preview-turn img { width: 31px; height: 32px; }
  .photo-preview.turns-while-cropping .preview-turn-left { left: .3rem; right: auto; }
  .photo-preview.turns-while-cropping .preview-turn-right { right: .3rem; left: auto; }
  .photo-preview.turns-while-cropping .photo-preview-label { left: 50%; transform: translateX(-50%); max-width: calc(100% - 6rem);
    white-space: nowrap; text-align: center; }
}

/* Review page: the Tag photo of an entry whose tag isn't in the tag list yet. */
.gallery figure.is-new-tag { outline: 3px solid #e0352b; outline-offset: 2px; border-radius: 4px; }
.gallery figure.is-new-tag figcaption { color: #e0352b; font-weight: 700; }

/* Tag Brand's pop-up (tag-preview.js): an example picture of the picked tag, then the brand's other tags. */
.tag-new-note { margin: .25rem 0 .75rem; color: var(--red); font-weight: 700; }
/* (the padding is on the inside box, so a click on the dialog itself is a click on the dimmed background) */
.tag-dialog { width: min(46rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto;
  overscroll-behavior: contain; border: 2px solid var(--line); border-radius: 10px; padding: 0;
  background: var(--paper); color: var(--ink); }
.tag-dialog-body { padding: 1.1rem 1.25rem; }
.tag-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.tag-dialog h2 { margin: 0 0 .75rem; }
.tag-dialog .hint { margin: 0 0 .75rem; }
.tag-dialog .tag-label { margin: 0 0 .3rem; font-weight: 700; text-align: left; }
.tag-yours { margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); text-align: center; }
.tag-yours figcaption { margin: 0 0 .3rem; font-weight: 700; text-align: left; }
.tag-big { margin: 0; text-align: center; }
/* A picture that zooms (tag-preview.js): the scroll wheel, two fingers, or dragging once zoomed. */
.tag-zoom { display: inline-block; max-width: 100%; overflow: hidden; vertical-align: top; border-radius: 6px;
  background: #000; cursor: zoom-in; touch-action: pan-y; }
.tag-zoom.is-zoomed { cursor: grab; }
.tag-zoom picture { display: block; }
.tag-zoom img { display: block; max-width: 100%; max-height: min(55dvh, 480px); object-fit: contain;
  transform-origin: 0 0; user-select: none; -webkit-user-select: none; }
.tag-yours .tag-zoom img { max-height: min(32dvh, 300px); }
.tag-big figcaption { display: flex; flex-direction: column; gap: .15rem; margin-top: .5rem; }
.tag-dialog .tag-name { font-weight: 700; }
.tag-dialog .tag-era { color: var(--ink-soft); }
.tag-credit { margin: .3rem 0 0; font-size: .8rem; color: var(--ink-soft); }
.tag-credit a { color: inherit; }
.tag-dialog .tag-none { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: .5rem;
  background: var(--cotton); border: 1px dashed var(--line); border-radius: 6px; color: var(--ink-soft);
  font-size: .85rem; text-align: center; }
.tag-big .tag-none, .tag-yours .tag-none { width: min(100%, 18rem); margin: 0 auto; }
.tag-yours .tag-none { aspect-ratio: auto; min-height: 5rem; }
.tag-dialog .tag-none-big { font-size: 1rem; font-weight: 700; }
.tag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; }
.tag-tile { display: flex; flex-direction: column; gap: .2rem; padding: .35rem; border: 2px solid var(--line);
  border-radius: 8px; background: var(--cotton); color: var(--ink); font: inherit; font-size: .85rem;
  text-align: left; cursor: pointer; }
.tag-tile:hover, .tag-tile:focus-visible { border-color: var(--ink); }
.tag-tile picture { display: block; }
.tag-tile img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #000; border-radius: 4px; }
/* (the buttons stay in view at the bottom while the pictures scroll) */
.tag-dialog .actions { display: flex; flex-wrap: wrap; gap: .6rem; position: sticky; bottom: 0; z-index: 1;
  margin: 1rem -1.25rem -1.1rem; padding: .75rem 1.25rem; background: var(--paper); border-top: 1px solid var(--line); }
.tag-dialog .tag-grid-actions { justify-content: flex-end; }
@media (max-width: 767px) {
  .tag-dialog-body { padding: 1rem; }
  .tag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tag-dialog .actions { gap: .5rem; margin: 1rem -1rem -1rem; padding: .6rem .75rem; }
}
.tag-dialog .actions button { padding: .55rem 1rem; border: 2px solid var(--ink); border-radius: 6px; background: var(--ink);
  color: var(--cotton); font: inherit; font-weight: 700; cursor: pointer; }
.tag-dialog .actions button.secondary { background: transparent; color: var(--ink); }
@media (max-width: 767px) { .tag-dialog .actions button { padding: .5rem .7rem; font-size: .95rem; } }