/*
  Shared design system for Mox-Watch's public + admin pages.
  Dark, card-frame-inspired palette: Magic's gold paired with Secret Lair's
  own magenta, not a literal copy of either site's exact colors.
*/

:root {
  --bg: #0b0a0d;
  --bg-elevated: #17151b;
  --bg-inset: #1f1c24;
  --border: #2d2a34;
  --border-strong: #423d4a;

  --text: #f2efe6;
  --text-muted: #a9a3ad;
  --text-faint: #726c78;

  --gold: #d3a94c;
  --gold-hover: #e6bd63;
  --gold-ink: #221a08;

  --magenta: #e8368f;
  --magenta-hover: #f45aa4;

  --success: #4caf6d;
  --success-bg: rgba(76, 175, 109, 0.12);
  --error: #f0555a;
  --error-bg: rgba(240, 85, 90, 0.14);
  --info: #6fa8dc;
  --info-bg: rgba(111, 168, 220, 0.12);

  --radius: 10px;
  --radius-sm: 7px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.35);

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  background: radial-gradient(ellipse 80% 50% at 50% -10%, #241d2c 0%, var(--bg) 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 38rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
}

.page--wide {
  max-width: min(94vw, 88rem);
}

.page--narrow {
  max-width: 26rem;
}

/* Header / brand mark */

.site-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.brand-mark {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--gold);
}

.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.site-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}

.site-title small {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.site-nav {
  margin-left: auto;
  display: flex;
  gap: 1.25rem;
}

.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

h1 {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  color: var(--text);
}

h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 2.25rem 0 0.75rem;
  color: var(--text);
}

h2 .muted {
  font-family: var(--font-body);
}

p {
  color: var(--text-muted);
}

.lede {
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: 0;
}

.muted {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.faint {
  color: var(--text-faint);
  font-size: 0.8rem;
}

a {
  color: var(--gold);
}

/* Cards / sections */

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-card);
}

.card + .card {
  margin-top: 1rem;
}

section.card {
  margin-top: 1.5rem;
}

/* Form elements */

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

legend {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0;
  margin-bottom: 0.6rem;
}

label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.field {
  margin-bottom: 1.1rem;
}

.field:last-child {
  margin-bottom: 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
select {
  width: 100%;
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  font-size: 0.98rem;
  color: var(--text);
  font-family: var(--font-body);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder {
  color: var(--text-faint);
}

input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.hint {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* Buttons */

button {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.1rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.12s ease, transform 0.05s ease;
}

button:active {
  transform: translateY(1px);
}

.btn-primary {
  background: linear-gradient(180deg, var(--gold-hover), var(--gold));
  color: var(--gold-ink);
  border-color: transparent;
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(1.06);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  padding: 0.5rem 0.6rem;
  font-weight: 500;
}

.btn-ghost:hover:not(:disabled) {
  color: var(--text);
  text-decoration: underline;
}

.btn-pill {
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.82rem;
}

.btn-follow {
  background: transparent;
  color: var(--magenta);
  border-color: var(--magenta);
}

.btn-follow:hover:not(:disabled) {
  background: rgba(232, 54, 143, 0.1);
}

.btn-following {
  background: var(--magenta);
  color: #fff;
  border-color: var(--magenta);
}

.btn-following:hover:not(:disabled) {
  background: var(--magenta-hover);
  border-color: var(--magenta-hover);
}

/* Upcoming/Past drop-view toggle (browse.html) */

.view-toggle {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.view-toggle-btn {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border-strong);
  min-height: 2.25rem;
}

.view-toggle-btn.is-active {
  background: var(--gold);
  color: var(--gold-ink);
  border-color: var(--gold);
}

.view-toggle-btn:hover:not(.is-active):not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Status messages */

.status-message {
  display: none;
  margin-top: 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border-strong);
  font-size: 0.88rem;
  background: var(--bg-inset);
  color: var(--text-muted);
}

.status-message:not(:empty) {
  display: block;
}

.status-message.is-success {
  border-left-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
}

.status-message.is-error {
  border-left-color: var(--error);
  background: var(--error-bg);
  color: var(--error);
}

.status-message.is-info {
  border-left-color: var(--info);
  background: var(--info-bg);
  color: var(--info);
}

/* Badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  /* Most badges (statuses, short IP names) are one line regardless — but an
     unusually long IP name (real case: "National Association of Latino
     Arts and Cultures") must wrap rather than force the page wider, so this
     stays a max-width guard instead of white-space: nowrap. */
  max-width: 100%;
}

.badge-confirmed,
.badge-tagged {
  background: var(--success-bg);
  color: var(--success);
}

.badge-pending {
  background: rgba(211, 169, 76, 0.14);
  color: var(--gold);
}

.badge-failed {
  background: var(--error-bg);
  color: var(--error);
}

.badge-no_collab {
  background: var(--bg-inset);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
}

.badge-superdrop {
  background: rgba(232, 54, 143, 0.14);
  color: var(--magenta);
}

/* Metric tiles (admin dashboard overview) */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}

.metric-tile {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}

.metric-tile.is-warning {
  border-color: var(--error);
  background: var(--error-bg);
}

.metric-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.metric-tile.is-warning .metric-label {
  color: var(--error);
}

.metric-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-top: 0.3rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.metric-sub {
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-top: 0.2rem;
}

/* Tables (admin) */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 0.75rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

th,
td {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--border);
  /* Wraps by default so long content (names, ids, error text) is never
     clipped or forced into a wide horizontal scroll — .table-scroll below
     still catches genuinely dense tables, but wrapping means it's rarely
     needed. break-word guards against a single unbroken token (an email, a
     drop id) blowing out its column instead of wrapping at all. */
  word-break: break-word;
}

thead th {
  background: var(--bg-inset);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-strong);
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

tr.is-error-row td {
  color: var(--error);
}

/* Empty state */

.empty-state {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.9rem;
}

/* Utility */

.hidden {
  display: none;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.spacer-top {
  margin-top: 1.5rem;
}

.center {
  text-align: center;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  word-break: break-all;
}

.token-display {
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
}

/* Drop cards (browse.html) — stack vertically once the row gets tight,
   so the follow button never has to fight the name/badges for width. */
#drops .card {
  flex-wrap: wrap;
}

/* min-width: 0 overrides the flex default (min-width: auto), which lets a
   wide descendant (the card gallery below) force this whole flex item wider
   than the row — the real cause of cards overflowing past the page's right
   edge instead of wrapping/scrolling inside their own box. flex: 1 1 auto
   lets it claim the space the follow button doesn't need. */
#drops .card > .drop-info {
  min-width: 0;
  flex: 1 1 auto;
}

@media (max-width: 34rem) {
  #drops .card {
    flex-direction: column;
    /* flex-wrap: wrap above was meant for the row layout (letting the
       button drop to its own line); combined with column direction it puts
       the container into column-wrap mode, where a line's cross size (width
       here) is sized by its own content instead of stretching to the
       container — the real cause of .drop-info measuring wider than its
       parent .card at narrow widths. Column layout already stacks info and
       button on separate lines by itself, so wrapping serves no purpose
       here and is turned back off. */
    flex-wrap: nowrap;
    align-items: stretch;
  }

  #drops .card > button {
    align-self: stretch;
  }
}

/* Card-image gallery (browse.html) — a wrapping grid, not a horizontal
   scroll strip: a drop's card count varies (1 to a dozen+), and a scroll
   strip either hides most of the cards behind an easy-to-miss scrollbar or
   (the real bug this replaced) overflows the page to the right when nothing
   constrains its intrinsic width. Fixed-size tiles that wrap onto more rows
   as needed stay fully visible and never exceed the card's own width. */
.card-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr));
  gap: 0.4rem;
  margin-top: 0.75rem;
  max-width: 26rem;
}

.card-thumb {
  /* min-width: 0 overrides a grid item's default automatic minimum size,
     which for a replaced element (img) is its intrinsic size — without it,
     a real full-resolution Scryfall image can force its grid track (and the
     whole gallery) wider than the "auto-fill, minmax(3.25rem, 1fr)" columns
     intend, undoing the wrapping this gallery exists for. */
  min-width: 0;
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: block;
  cursor: zoom-in;
  transition: transform 0.1s ease, border-color 0.1s ease;
}

.card-thumb:hover,
.card-thumb:focus-visible {
  transform: scale(1.08);
  border-color: var(--gold);
}

/* Announcement image/video still (browse.html, Phase 43) — a drop's real
   social-post graphic, shown for a drop that has one (often the *only*
   identifying visual a genuinely nameless/untagged teaser has — see
   dropTitle()'s "Name coming soon" case). Sized larger than a card-thumb
   (this is the primary identifying image, not one of several cards) but
   still modest — the gallery below it, when present, is the detailed view. */
.announcement-media {
  margin-top: 0.75rem;
}

.announcement-thumb {
  display: block;
  max-width: 11rem;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.announcement-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

/* Card lightbox (browse.html) — thumbnails in the wrapping grid stay small
   at any drop size (Phase 39), so this is the "get a good look at each
   card" path: click a thumbnail for a full-size view with prev/next through
   the rest of that drop's cards. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 1rem;
  background: rgba(6, 5, 8, 0.88);
  backdrop-filter: blur(2px);
}

.lightbox.hidden {
  display: none;
}

.lightbox-image {
  max-width: min(90vw, 26rem);
  max-height: 65vh;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card);
  object-fit: contain;
}

.lightbox-caption {
  text-align: center;
  max-width: 90vw;
}

.lightbox-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text);
}

.lightbox-counter {
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  color: var(--text);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.lightbox-close:hover {
  color: var(--gold);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 1.75rem;
  line-height: 1;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  cursor: pointer;
}

.lightbox-nav:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.lightbox-prev {
  left: 0.75rem;
}

.lightbox-next {
  right: 0.75rem;
}

@media (max-width: 30rem) {
  .lightbox-nav {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.4rem;
  }
}

@media (max-width: 30rem) {
  .page {
    padding: 1.75rem 1rem 4rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  .site-header {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .site-nav {
    margin-left: 0;
    width: 100%;
    gap: 1rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
  }

  /* Full-width primary actions are easier to hit on a phone. */
  form > button[type="submit"],
  fieldset button[type="submit"] {
    width: 100%;
  }
}

@media (max-width: 22rem) {
  .brand-mark {
    width: 1.9rem;
    height: 1.9rem;
  }

  .site-title {
    font-size: 1.3rem;
  }
}