/* fun.css — the parts of Galaxy that are meant to feel light: modal sheets, publication
   marks, claim marks, decade pills, artwork panels. Everything here layers on top of app.css
   and uses its tokens, so a theme change needs no edits in this file. */

/* ---------- sheets (claim, share) ----------
   One pattern for every modal on the site: a scrim, a card that grows to fit, a close in the
   same corner every time. Nothing slides in from the side; nothing bounces. */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: end center;
  background: color-mix(in srgb, #01121f 72%, transparent);
  backdrop-filter: blur(3px);
  animation: sheet-fade .16s ease-out;
}
@media (min-width: 701px) {
  .sheet-backdrop { place-items: center; }
}

.sheet {
  width: min(560px, 100%);
  max-height: min(88vh, 900px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -12px 40px rgba(1, 12, 24, .5);
  animation: sheet-rise .2s cubic-bezier(.22, .9, .3, 1);
}
.sheet--sm { width: min(460px, 100%); }
@media (min-width: 701px) {
  .sheet { border-radius: 14px; box-shadow: 0 24px 60px rgba(1, 12, 24, .55); }
}

@keyframes sheet-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sheet-rise { from { transform: translateY(18px); opacity: .6 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-backdrop { animation: none; }
}

.sheet-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.sheet-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--text-lg);
  line-height: 1.25;
  flex: 1;
}
.sheet-sub {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--muted);
}
.sheet-x {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.sheet-x:hover { background: var(--surface-2); }

.sheet-body { padding: var(--space-5) var(--space-6) var(--space-6); }
.sheet-lede {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--cool);
}
.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.sheet-done h3 { font-family: var(--serif); font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.sheet-done p { font-size: var(--text-sm); margin: 0 0 var(--space-3); }

.sheet fieldset.field { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.sheet legend {
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
}
.sheet .field { margin-bottom: var(--space-5); }
.field-note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
}
.field-note--warn { color: var(--text); }
.field-note--warn strong { color: var(--danger); }

/* Radios read as tappable rows, not as bare dots. */
.radio-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.radio-stack { display: grid; gap: var(--space-2); }
.radio {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .5rem .7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: var(--text-sm);
  cursor: pointer;
}
.radio:hover { border-color: var(--cool); }
.radio input { margin-top: .18rem; accent-color: var(--brass); flex: none; }
.radio:has(input:checked) {
  border-color: var(--brass);
  background: color-mix(in srgb, var(--brass) 10%, transparent);
}
.radio--block { align-items: flex-start; }
.radio-sub {
  display: block;
  margin-top: .15rem;
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 400;
}

.copy-row { display: flex; gap: var(--space-2); }
.copy-row input {
  flex: 1;
  min-width: 0;
  font-size: var(--text-xs);
  font-family: var(--mono);
}
.share-preview {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: var(--text-sm);
  color: var(--text);
  background: color-mix(in srgb, var(--cool) 7%, transparent);
}
.share-outs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-4); }

/* ---------- publication marks ----------
   A publication's own icon, sized down to the height of the type beside it. */
.src-mark {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 3px;
  object-fit: contain;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

/* ---------- claim mark ----------
   Deliberately small, and deliberately not a blue tick. It reports one narrow fact: somebody
   wrote in and a human checked. */
.claim-mark {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: var(--space-2) 0 0;
  padding: .16rem .5rem;
  border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--border));
  border-radius: 999px;
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--ok) 78%, var(--text));
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  cursor: help;
}
.claim-mark:empty { display: none; }

.btn-claim { border-color: color-mix(in srgb, var(--brass) 55%, var(--border)); }
.person-actions--venue { margin: var(--space-4) 0 var(--space-5); }

/* ---------- decade pills ---------- */
.decades {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.decades .pill { font-variant-numeric: tabular-nums; }

/* ---------- artwork ----------
   Generated, abstract, and never a photograph of a person. It sets a mood behind type; it is
   not evidence, so it never sits next to a fact without a caption saying what it is. */
.art-band {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
  isolation: isolate;
  min-height: var(--art-h, 140px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-3);
}
.art-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.art-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 55%, transparent) 0%,
    color-mix(in srgb, var(--bg) 88%, transparent) 70%,
    var(--bg) 100%);
}
.art-band > * { position: relative; }
.art-cap {
  font-size: var(--text-xs);
  color: var(--muted);
}
.art-thumb {
  width: var(--art-thumb, 48px);
  height: var(--art-thumb, 48px);
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
  flex: none;
}

/* ---------- empty states ----------
   An empty state is a promise about the data: it says "we looked, and there is nothing", which is
   a different sentence from "this is broken". The picture buys the words enough room to be read. */
.empty--art {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
}
.empty-art {
  width: min(260px, 62%);
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: var(--space-2);
}
.empty--art h3 { margin: 0; }
.empty--art p { margin: 0; max-width: 46ch; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .empty-art { transition: opacity .3s ease; }
}
@media (max-width: 700px) {
  .empty-art { width: min(200px, 70%); }
}

/* Page-top bands. Short, so they never push the first fact below the fold. */
.vn-art, .st-art { margin-bottom: var(--space-5); }
.vn-art .art-cap, .st-art .art-cap { max-width: 60ch; }
@media (max-width: 700px) {
  .vn-art, .st-art { --art-h: 108px; }
}

/* ---------- the welcome ----------
   One sentence, three doors, one search box. It borrows the sheet chrome so there is only one
   modal idea in the product, and it leads with artwork because the first thing a visitor should
   feel is "this is a map of a scene", not "this is a database". */
.intro {
  width: min(620px, 100%);
  position: relative;
  /* Inherits the sheet's own scrolling. A laptop at 800px tall must still be able to reach the
     fine print at the bottom, so this must never be overflow: hidden. */
}
/* The welcome has no title bar, so its close button floats over the artwork — always reachable,
   never covering a word, and dark enough behind to stay legible on a bright frame. */
.intro .sheet-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(4px);
}
.intro-art {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
  border-radius: 14px 14px 0 0;
}
@media (max-width: 700px) {
  .intro-art { height: 108px; border-radius: 0; }
}
.intro-body { padding-top: var(--space-4); }
.intro-h {
  font-family: var(--serif);
  font-size: var(--text-xl);
  line-height: 1.15;
  margin: var(--space-1) 0 var(--space-3);
}
.intro-lede { color: var(--muted); margin: 0 0 var(--space-4); max-width: 52ch; }

/* Short laptop screens: a 13-inch MacBook gives about 800px of usable height, and the fine print
   at the bottom is the part that says "you can get this removed". It must be on screen without a
   scroll, so the card gets tighter rather than taller. */
@media (min-width: 701px) and (max-height: 900px) {
  .intro-art { height: 104px; }
  .intro-h { font-size: var(--text-lg); margin-bottom: var(--space-2); }
  .intro-lede { margin-bottom: var(--space-3); }
  .intro-doors { gap: 6px; margin-bottom: var(--space-3); }
  .intro-door { padding: var(--space-2) var(--space-3); }
}

.intro-doors { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.intro-door {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.intro-door:hover, .intro-door:focus-visible {
  border-color: var(--brass);
  background: color-mix(in srgb, var(--brass) 10%, var(--surface-2));
}
.intro-door-k { font-weight: 600; }
.intro-door-d { color: var(--muted); font-size: var(--text-sm); }

.intro-find-l {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--space-2);
}
.intro-find-row { display: flex; gap: var(--space-2); }
.intro-find-row input { flex: 1; min-width: 0; }
.intro-hits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}
.intro-hit {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  text-decoration: none;
  color: inherit;
}
.intro-hit:hover { border-color: var(--brass); }
.intro-hit--v { border-style: dashed; }
.intro-fine {
  margin: var(--space-5) 0 0;
  font-size: var(--text-xs);
  color: var(--faint);
  max-width: 56ch;
}