/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

:root {
  --bg: #15151a;
  --surface: #1c1c23;
  --surface-raised: #22222b;
  --hairline: #2f2f38;
  --text: #f1ede3;
  --text-muted: #97938a;
  --safe: #5fb878;
  --soon: #d9a440;
  --gone: #c1473f;
  --unknown: #6b7280;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

code {
  font-family: "IBM Plex Mono", monospace;
  background: var(--surface-raised);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

/* Hero */
.hero {
  margin-bottom: 40px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 32px;
}

.tagline {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin: 0;
}

/* Lockup: the circular-arrow mark, the two-line wordmark, a hairline rule,
   the kicker, and the Safe/Rotating/Gone badge row. Real text (no image),
   styled with the existing :root vars; Lora 700 for the wordmark. */
.lockup {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.lockup__mark {
  flex: 0 0 96px;
  height: 92px;                 /* centres the mark on the two-line wordmark */
  display: flex;
  align-items: center;
}

.lockup__mark svg { width: 100%; height: auto; display: block; }

.lockup__body { flex: 1; min-width: 0; }

.lockup__wordmark {
  font-family: "Lora", "Fraunces", serif;
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}

.lockup__wordmark span { display: block; color: var(--soon); }

/* The kicker sizes to its own text and carries the rule as its top border,
   so the rule runs exactly to the end of "Rotation tracker for MTG Standard". */
.lockup__kicker {
  width: max-content;
  max-width: 100%;
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.lockup__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lockup__badge {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--soon);
  background: color-mix(in oklab, currentColor 14%, transparent);
}

.lockup__badge--safe { color: var(--safe); }
.lockup__badge--gone { color: var(--gone); }

/* The hero rule reads heavy on the dark surface — lighten it. */
.hero {
  border-bottom-color: color-mix(in oklab, var(--hairline) 70%, var(--bg));
}

.lockup + .tagline { margin-top: 18px; }

@media (max-width: 600px) {
  .lockup { gap: 20px; }
  .lockup__mark { flex-basis: 60px; height: auto; align-items: flex-start; padding-top: 4px; }
  .lockup__badge { padding: 4px 11px; }
}

/* Form */
.import-form { margin-bottom: 32px; }

.field-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.decklist-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.92rem;
  padding: 16px;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease;
}

.decklist-input::placeholder { color: #57544c; }

.decklist-input:focus {
  border-color: var(--soon);
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

.hint {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.submit-btn {
  background: var(--soon);
  color: #1a1305;
  border: none;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease;
}

.submit-btn:hover { filter: brightness(1.08); }
.submit-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Notices */
.notice {
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 0.92rem;
  border: 1px solid var(--hairline);
}

.notice p { margin: 0; }

.notice-info { background: var(--surface); color: var(--text); }

.notice-warning {
  background: rgba(217, 164, 64, 0.08);
  border-color: rgba(217, 164, 64, 0.35);
  color: #ecd8a8;
}

.error-lines {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--text-muted);
}

/* Deck verdict - one-line triage line above the stat cards */
.verdict {
  margin: 0 0 16px;
  /* Breathing room when the post-submit scroll lands on this line. */
  scroll-margin-top: 16px;
  padding: 10px 14px;
  border-left: 3px solid var(--unknown);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.95rem;
  color: var(--text-muted);
}

.verdict strong { color: var(--text); }

.verdict-safe { border-left-color: var(--safe); }
.verdict-soon { border-left-color: var(--soon); }
.verdict-gone { border-left-color: var(--gone); }

/* Rough Arena-wildcard bill to swap out what's rotating - its own card under
   the verdict, with the gold accent of a deck that needs work. */
.wildcard-bill {
  margin: 0 0 24px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--soon);
  border-radius: 10px;
}

.wildcard-bill__label {
  margin: 0 0 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wildcard-bill__line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em;
  font-family: "Fraunces", "Lora", serif;
  font-size: clamp(1.45rem, 4.5vw, 1.85rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
}

.wildcard-bill__seg { display: inline-flex; align-items: baseline; gap: 0.28em; }
.wildcard-bill__rarity { font-weight: 500; }
.wildcard-bill__plus { color: var(--text-muted); font-weight: 300; margin: 0 0.1em; }
.wildcard-bill__unit { color: var(--text-muted); font-weight: 500; }

.wc-n { font-weight: 700; }
.wc-n--common   { color: var(--text-muted); }
.wc-n--uncommon { color: #a7b7c9; }
.wc-n--rare     { color: var(--soon); }
.wc-n--mythic   { color: #df833f; }

.wildcard-bill__line--plain {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
}

.wildcard-bill__note {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Summary stats */
.summary {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.stat {
  flex: 1;
  min-width: 120px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--unknown);
  border-radius: 8px;
  padding: 14px 16px;
}

.stat-safe { border-top-color: var(--safe); }
.stat-soon { border-top-color: var(--soon); }
.stat-gone { border-top-color: var(--gone); }
.stat-unknown { border-top-color: var(--unknown); }

.stat-num {
  display: block;
  font-family: "Fraunces", serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.stat-label {
  display: block;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.policy-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0 0 32px;
  line-height: 1.6;
}

/* Deck sections */
.deck-section { margin-bottom: 32px; }

.deck-section h2 {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.deck-section .count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
}

.card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
}

.card-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--surface);
  border-left: 4px solid var(--unknown);
  border-bottom: 1px solid var(--hairline);
}

.card-row:last-child { border-bottom: none; }

.card-row.status-safe { border-left-color: var(--safe); }
.card-row.status-rotating_soon { border-left-color: var(--soon); background: rgba(217, 164, 64, 0.06); }
.card-row.status-not_standard { border-left-color: var(--gone); background: rgba(193, 71, 63, 0.06); }
.card-row.status-unknown { border-left-color: var(--unknown); }

.card-row .qty {
  font-family: "IBM Plex Mono", monospace;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.card-row .name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-row .name a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
}

.card-row .name a:hover { border-bottom-color: var(--text); }

.card-row .stamp {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--surface-raised);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.card-row .status-label {
  font-size: 0.82rem;
  text-align: right;
  white-space: nowrap;
  color: var(--text-muted);
}

.status-safe .status-label { color: var(--safe); }
.status-rotating_soon .status-label { color: var(--soon); }
.status-not_standard .status-label { color: var(--gone); }
.status-unknown .status-label { color: var(--unknown); }

/* Only rotating-soon rows carry a title attribute (the rotation date),
   so the help cursor signals the tooltip. */
.status-label[title] {
  cursor: help;
}

/* 4th grid cell: the status label, plus (on rotating / not-Standard rows) a
   small button that opens the replacement-suggestions popover. */
.status-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.alt-toggle {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.72rem;
  color: var(--text-muted);
  border-bottom: 1px dotted var(--text-muted);
  cursor: pointer;
}

.alt-toggle:hover { color: var(--text); border-bottom-color: var(--text); }
.alt-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Native popover: hidden until opened, then rendered in the top layer (so the
   card list's overflow:hidden doesn't clip it). Light-dismiss and Esc are free.
   Falls back to a centred panel where CSS anchor positioning is unsupported. */
.alt-popover {
  margin: auto;
  max-width: min(300px, calc(100vw - 32px));
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 16px 18px;
  color: var(--text);
}

.alt-popover::backdrop { background: rgba(0, 0, 0, 0.35); }

/* Where supported, pin the panel to the .alt-toggle that opened it (its
   implicit anchor) instead of centring. It sits just under the button,
   extending left to stay clear of the viewport edge, and flips above when
   there's no room below. The dimming backdrop goes with the centred layout. */
@supports (anchor-name: --x) {
  .alt-popover {
    margin: 6px 0;
    width: max-content;
    position-area: bottom span-left;
    position-try-fallbacks: top span-left, bottom span-right, top span-right;
  }

  .alt-popover::backdrop { background: transparent; }
}

.alt-head {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.alt-head strong { color: var(--text); font-weight: 600; }

.alt-popover ul { margin: 0; padding: 0; list-style: none; }

.alt-popover li {
  margin: 4px 0;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Right-hand meta on each stand-in row: mana cost, then Arena wildcard rarity. */
.alt-meta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Mana cost, drawn as plain coloured discs (no card-game icons): a grey disc
   with the number for generic mana, one lettered disc per coloured pip. */
.mana-cost {
  display: inline-flex;
  gap: 3px;
}

/* Wildcard rarity: a rounded square (distinct from the round mana pips) tinted
   like the Arena wildcard for that rarity. */
.wc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25em;
  height: 1.25em;
  padding: 0 0.28em;
  border-radius: 3px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1;
  color: #1a1305;
}

.wc-common   { background: #8b8f97; color: #f1ede3; }
.wc-uncommon { background: #b7c0cb; }
.wc-rare     { background: var(--soon); }
.wc-mythic   { background: #d97a3c; }

.pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25em;
  height: 1.25em;
  padding: 0 0.28em;
  border-radius: 999px;           /* circle for one char, pill for "10" / "X" */
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1;
  color: #1a1305;
}

.pip-generic { background: #c7c3b6; }
.pip-w { background: #f3eede; }
.pip-u { background: #a8c9e8; }
.pip-b { background: #c3b7cb; }
.pip-r { background: #eaa48d; }
.pip-g { background: #a2c8a4; }
.pip-c { background: #cbc9cf; }
.pip-s { background: #d9e5ec; }

.alt-popover a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
}

.alt-popover a:hover { border-bottom-color: var(--text); }

/* No Popover API support (rare by now): drop the feature rather than leave a
   dead button or an always-visible panel. */
@supports not selector([popover]:popover-open) {
  .alt-toggle,
  .alt-popover { display: none; }
}

/* Reference / SEO content below the tool - quiet muted prose, collapsed by
   default into native <details> disclosures. */
.rotation-info {
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.rotation-info h2 {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--text);
  margin: 34px 0 12px;
}

.rotation-info h2:first-of-type { margin-top: 0; }

.rotation-info h3 {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  margin: 18px 0 6px;
}

.rotation-info p { margin: 0 0 12px; }
.rotation-info strong { color: var(--text); font-weight: 600; }
.rotation-info__lead { margin-bottom: 16px; }

.rotation-schedule { margin: 0; padding-left: 18px; }
.rotation-schedule li { margin: 5px 0; }

/* Disclosure rows */
.disclosure {
  border-bottom: 1px solid var(--hairline);
}

.disclosure--lead { border-top: 1px solid var(--hairline); }
.faq { border-top: 1px solid var(--hairline); }

.disclosure > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 13px 28px 13px 0;
  color: var(--text);
  font-weight: 500;
}

.disclosure > summary::-webkit-details-marker { display: none; }

.disclosure > summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--text-muted);
}

.disclosure[open] > summary::after { content: "\2013"; }

.disclosure > summary:hover { color: var(--soon); }
.disclosure > summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.disclosure__body { padding: 2px 0 18px; }
.disclosure__body > :first-child { margin-top: 0; }
.disclosure__body > :last-child { margin-bottom: 0; }

/* Footer */
.site-footer {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px 56px;
  border-top: 1px solid var(--hairline);
}

.site-footer p {
  margin: 24px 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

.site-footer a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
  white-space: nowrap;
}

.site-footer a:hover { border-bottom-color: var(--text); }
.site-footer a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

@media (max-width: 600px) {
  .card-row {
    grid-template-columns: 30px 1fr;
    grid-template-rows: auto auto;
  }
  .card-row .stamp,
  .card-row .status-label {
    grid-column: 2;
    text-align: left;
  }
  .card-row .status-cell {
    grid-column: 2;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }
  .form-row { flex-direction: column; align-items: stretch; }
  .submit-btn { width: 100%; }
}

/* Turbo swaps the results into this frame; show a busy state while it loads. */
turbo-frame#results { display: block; }

turbo-frame#results[busy] {
  position: relative;
  min-height: 140px;
  pointer-events: none;
}

turbo-frame#results[busy] > * { opacity: 0.35; }

turbo-frame#results[busy]::after {
  content: "Checking your deck…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.95rem;
}

turbo-frame#results[busy]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -104px;
  border: 2px solid var(--hairline);
  border-top-color: var(--soon);
  border-radius: 50%;
  animation: rw-spin 0.7s linear infinite;
}

@keyframes rw-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  turbo-frame#results[busy]::before { animation: none; }
}