/* =========================================================================
   cardsearch.css — all the styles (colors, layout, looks) for
   cardsearch.html, the card search page.
   ========================================================================= */

/* =====================================================================
   THEME COLORS
   ===================================================================== */

/*
  Color "tokens" for LIGHT mode. Every color in the page uses these
  variables, so switching themes only means swapping this list.
*/
:root {
  --bg: #f4f1ea;
  --surface: #ffffff;
  --surface-hover: #f0ebe1;
  --text: #1e1c19;
  --muted: #6c675f;
  --border: #d8d2c6;
  --accent: #a8492a;
  --accent-text: #ffffff;
  --error: #c0392b;
  /* General shadow for pop-up lists and the Share / Add to binder buttons */
  --shadow: 0 10px 30px rgba(40, 30, 20, 0.15);
  /* The card's own shadow: a tight one close to the edges plus a soft one
     spreading below, so it looks like it's resting just above the page */
  --card-shadow: 0 2px 4px rgba(40, 30, 20, 0.18), 0 8px 18px rgba(40, 30, 20, 0.16);
  /* A bigger, softer shadow used while the card is lifted (mouse over) */
  --card-shadow-lift: 0 6px 10px rgba(40, 30, 20, 0.16), 0 22px 36px rgba(40, 30, 20, 0.22);
  --icon-filter: none;          /* set symbols are black SVGs: fine on light */
  --switch-track: #e3dccf;
  --switch-thumb: #ffffff;
  --radius: 10px;
}

/*
  Color tokens for DARK mode. These replace the light ones whenever the
  <html> tag has data-theme="dark".
*/
:root[data-theme="dark"] {
  --bg: #14151a;
  --surface: #1e2027;
  --surface-hover: #2a2d36;
  --text: #ece9e3;
  --muted: #9b968e;
  --border: #343741;
  --accent: #e38a5c;
  --accent-text: #1a1206;
  --error: #f07167;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  /* Dark backgrounds hide shadows, so these are darker and stronger */
  --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 10px 22px rgba(0, 0, 0, 0.65);
  --card-shadow-lift: 0 8px 12px rgba(0, 0, 0, 0.6), 0 26px 40px rgba(0, 0, 0, 0.75);
  --icon-filter: invert(1);     /* flip black set symbols to white */
  --switch-track: #2f323c;
  --switch-thumb: #14151a;
}

/* =====================================================================
   PAGE BASICS
   ===================================================================== */

/* Make width/height include padding and borders: easier sizing math */
*, *::before, *::after { box-sizing: border-box; }

/*
  Anything with the "hidden" attribute stays hidden, even if another
  rule (like display: block) would otherwise show it.
*/
[hidden] { display: none !important; }

/* Page-wide basics: font, colors, and a smooth fade when the theme changes */
body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.25s, color 0.25s;
}

/*
  One shared focus outline for every button and drop-down, shown when
  they're reached with the keyboard (Tab key) so you can see where you are.
*/
button:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Hidden label text that screen readers still announce */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Centers the content and limits how wide it can get on big screens */
main {
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 16px 48px;
}

/* =====================================================================
   TOP BAR AND LIGHT/DARK SWITCH
   ===================================================================== */

/* The top bar: holds the title on the left and the theme switch on the right */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
}

/* The app title in the top bar */
.topbar h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/*
  The switch itself: a pill-shaped button ("track").
  margin-left: auto pushes it to the far right of the top bar.
*/
.theme-switch {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
  width: 64px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--switch-track);
  cursor: pointer;
}

/* The sun and moon icons that sit inside the track, one at each end */
.theme-switch .icon {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}
.theme-switch .sun  { left: 8px;  color: #d9921c; }
.theme-switch .moon { right: 8px; color: #8fa3d9; }

/* The round "thumb" that slides left (light) or right (dark) */
.theme-switch .thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--switch-thumb);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease;
}

/* In dark mode, slide the thumb over to the right (moon) side */
:root[data-theme="dark"] .theme-switch .thumb { transform: translateX(32px); }

/* =====================================================================
   SEARCH BOX AND SUGGESTIONS
   ===================================================================== */

/* Wrapper so the suggestion list can be positioned under the input */
.search { position: relative; }

/* The search text box (it draws its own focus glow, below) */
.search input {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
}

/* While typing in the box: accent-colored border plus a soft glow */
.search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/*
  Shared look for the two pop-up lists: card-name suggestions and the
  list of sets. They float over the page below whatever opened them.
*/
.popup-list {
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  outline: none;
}

/* One row in either pop-up list */
.popup-list li {
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
}

/* The row under the mouse, or picked with the arrow keys */
.popup-list li.active,
.popup-list li:hover { background: var(--surface-hover); }

/* The suggestion list can be taller, but never more than 60% of the screen */
.suggestions { max-height: 60vh; }

/* The letters in a suggestion that match what was typed */
.suggestions mark { background: none; color: var(--accent); font-weight: 700; }

/* Small helper text under the search box (e.g., "type 3 letters") */
.hint {
  margin: 8px 2px 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--muted);
}

/* The helper text turns red when something goes wrong (e.g., card not found) */
.hint.error { color: var(--error); }

/*
  The Language picker between the search box and the card. It's centered
  and no wider than the card (400px), so it lines up with the card below.
  The "LANGUAGE" label and the drop-down sit side by side in one row
  ("flex"), so the whole thing stays short.
*/
.language-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 400px;
  margin: 14px auto 0;
}

/* The label beside the drop-down: no gap underneath like the other labels */
.language-picker .field-label {
  margin: 0;
  flex-shrink: 0;
}

/*
  The drop-down: about one third the height of the search box (which is
  about 50px tall), so 17px, with smaller text to fit. It uses the shared
  ".picker" look (further down) for colors and its down-arrow, and these
  rules shrink it. "flex: 1" lets it fill the rest of the row.
*/
.language-picker .picker {
  flex: 1;
  height: 17px;
  min-height: 0;
  padding: 0 24px 0 8px;
  font-size: 0.7rem;
  line-height: 15px;
  border-radius: 5px;
  background-position: calc(100% - 13px) 50%, calc(100% - 9px) 50%;
  background-size: 4px 4px;
}

/* =====================================================================
   CARD PICTURE, SHARE BUTTON, FLIP BUTTON
   ===================================================================== */

/*
  An invisible box exactly the size of the card, centered on the page.
  The Share button is positioned relative to this box, so it can sit
  beside the card without pushing the card off-center.
*/
.card-stage {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 16px auto 0;
}

/* Holds the card picture and keeps the real card shape (63 x 88 mm) */
.card-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 488 / 680;
  border-radius: 4.75% / 3.5%;   /* matches real card corner rounding */
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}

/*
  Bounce the card up when the mouse passes over it.
  - "transition" animates any change to the card's position over 0.45s.
  - The cubic-bezier numbers make a springy curve: the card shoots up a
    bit past its target, then settles back — that's the "bounce".
  - On hover the card lifts 12px and its shadow grows, like it's rising
    off the table. Moving the mouse away eases it back down.
  Wrapped in "(hover: hover)" so it only applies on devices with a mouse
  (touch screens would otherwise get stuck in the lifted state).
*/
@media (hover: hover) {
  .card-frame {
    transition: transform 0.45s cubic-bezier(0.34, 1.8, 0.64, 1),
                box-shadow 0.45s ease;
  }
  .card-frame:hover {
    transform: translateY(-12px);
    box-shadow: var(--card-shadow-lift);
  }
}

/* People who turn on "reduce motion" in their system settings get no bounce */
@media (prefers-reduced-motion: reduce) {
  .card-frame { transition: none; }
  .card-frame:hover { transform: none; }
}

/* The card picture fills the frame */
.card-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s;
}

/* While a new picture is downloading, dim the old one */
.card-frame.loading img { opacity: 0.35; }

/* A spinning ring shown on top of the card while it loads */
.card-frame.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 4px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* The spinning motion used by the loading ring */
@keyframes spin { to { transform: rotate(360deg); } }

/*
  The two round buttons beside the card: Share and "Add to binder".
  They share their size, shape and placement:
  - "position: absolute" takes them out of the normal layout, and
    "left: 100% + 12px" places them just past the card's right edge, so
    the card stays exactly where it was.
  - Each one's "top" (below) moves its top edge part way down the card, and
    "translateY(-50%)" pulls it back up by half its own height, so the
    button's MIDDLE sits at that point.
*/
.share-button,
.binder-button {
  position: absolute;
  left: calc(100% + 12px);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: pointer;
}

/* Share: one third of the way down the card, white with a thin border,
   and its icon turns the accent color when the mouse is over it */
.share-button {
  top: 33.333%;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
}
.share-button:hover { color: var(--accent); }
.share-button svg { width: 20px; height: 20px; }

/* "Add to binder" (a "+" sign): two thirds of the way down the card, in the
   accent color so it stands out as the main action */
.binder-button {
  top: 66.667%;
  color: var(--accent-text);
  background: var(--accent);
  border: none;
  transition: filter 0.2s ease;
}

/* The "+" drawing inside it. It turns smoothly (see the hover rule below). */
.binder-button svg {
  width: 22px;
  height: 22px;
  transition: transform 0.25s ease;
}

/* On hover: a little brighter, and the "+" turns a quarter turn
   (it looks the same after turning, so it just "spins" into place) */
.binder-button:hover { filter: brightness(1.1); }
.binder-button:hover svg { transform: rotate(90deg); }

/* People who turn on "reduce motion" get no spin */
@media (prefers-reduced-motion: reduce) {
  .binder-button:hover svg { transform: none; }
}

/*
  The "Add to which binder?" menu: a small floating box just under the "+"
  button (half the button's 44px height + an 8px gap = 30px below its
  middle), lined up with the button's left edge. It sits above everything
  else on the page ("z-index") and scrolls if there are lots of binders.
*/
.binder-menu {
  position: absolute;
  top: calc(66.667% + 30px);
  left: calc(100% + 12px);
  z-index: 5;
  width: 230px;
  padding: 8px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* The "hidden" attribute must win over "display" rules, so the menu
   really disappears when closed */
.binder-menu[hidden] { display: none; }

/* The menu's small heading */
.binder-menu-title {
  margin: 2px 6px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The list of binders: at most about 7 rows tall, then it scrolls */
.binder-menu-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 290px;
  overflow-y: auto;
}

/* One binder in the list: color dot, name, then card count on the right */
.binder-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 8px;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.binder-menu-item:hover,
.binder-menu-item:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

/* A full binder can't be picked, so it's faded out */
.binder-menu-item:disabled {
  opacity: 0.5;
  cursor: default;
}
.binder-menu-item:disabled:hover { background: transparent; }

/* The binder's name takes the spare room; a long name ends in "…" */
.binder-menu-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* How many cards it has (or "Full"), small and grey */
.binder-menu-count {
  font-size: 0.75rem;
  color: var(--muted);
}

/* The little round dot in the binder's cover color: a tiny version of the
   cover, using the shades its "cover-<color>" class sets (the cover color
   classes are in binder-dialog.css). The thin edge keeps white and light
   gray dots visible on a white menu. */
.binder-menu-dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--cover-edge, rgba(0, 0, 0, 0.25));
  background: linear-gradient(135deg, var(--cover-light) 0%, var(--cover-base) 55%, var(--cover-dark) 100%);
}

/*
  The "New binder" row's dot: a bold white "+" in a circle, the same size
  as the color dots. The circle is filled with the accent color (like the
  "+" button) so the white "+" shows in both light and dark mode.
  The "+" is drawn, not typed: a typed "+" sits low in its letter space,
  so it never looks centered. Instead, two small white bars (an 8px-wide
  flat one and an 8px-tall thin one, each 2px thick) are painted at the
  exact center ("center / width height") over the accent fill.
*/
.binder-menu-plus {
  border-color: var(--accent);
  background:
    linear-gradient(#ffffff, #ffffff) center / 8px 2px no-repeat,
    linear-gradient(#ffffff, #ffffff) center / 2px 8px no-repeat,
    var(--accent);
}

/* A thin line above "New binder" sets it apart from the binders (unless
   it's the only row) */
.binder-menu-item + .binder-menu-new {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
}

/*
  Little "Link copied!" message that appears just under the Share button
  (half the button's 44px height + an 8px gap = 30px below its middle).
*/
.share-toast {
  position: absolute;
  top: calc(33.333% + 30px);
  left: calc(100% + 12px);
  padding: 6px 10px;
  font-size: 0.8rem;
  white-space: nowrap;
  color: var(--accent-text);
  background: var(--accent);
  border-radius: 6px;
  pointer-events: none;
}

/*
  On narrow screens (phones) there's no empty space to the right of the
  card, so the Share and Add to binder buttons float just inside the
  card's right edge, at the same heights. The card still doesn't move.
*/
@media (max-width: 560px) {
  .share-button,
  .binder-button,
  .share-toast {
    left: auto;
    right: 10px;
    z-index: 2;
  }
  .share-button { background: color-mix(in srgb, var(--surface) 85%, transparent); }
  /* The binder menu opens under the "+", lined up with the card's right
     edge so it stays on screen */
  .binder-menu {
    left: auto;
    right: 10px;
  }
}

/* The row of buttons under the card (Flip card and Foil), centered, side
   by side. (A hidden button takes no space, so one alone stays centered.) */
.card-toggles {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

/* "Flip card" button for double-sided cards */
.flip-button {
  display: block;
  margin: 0;
  padding: 8px 16px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.flip-button:hover { background: var(--surface-hover); }

/*
  The Foil button. OFF, it looks "ghosted": see-through, with a dashed
  outline and faded text. ON (aria-pressed="true"), it's filled with the
  bright orange and has black text. The orange is the same in both themes
  (dark mode's accent), so the black text is always easy to read.
*/
.foil-button {
  padding: 8px 18px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 999px;
  opacity: 0.55;
  cursor: pointer;
  transition: background-color 0.15s, opacity 0.15s;
}
.foil-button:hover:not(:disabled) { opacity: 0.85; }

/* On: solid orange with black text, fully showing */
.foil-button[aria-pressed="true"] {
  color: #000000;
  background: #e38a5c;
  border: 1px solid #e38a5c;
  opacity: 1;
}

/* Can't be pressed: this printing has no foil version (very faint, and
   a "not allowed" pointer) ... */
.foil-button:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
/* ... or it ONLY comes in foil: it stays on (orange), just not clickable */
.foil-button[aria-pressed="true"]:disabled {
  opacity: 1;
  cursor: default;
}

/* Name / set / artist text under the card */
.card-info {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
}
.card-info strong { color: var(--text); font-size: 1.05rem; }
.card-info a { color: var(--accent); text-decoration: none; }   /* no underline: it turns bold on hover */

/* =====================================================================
   SET AND VERSION DROP-DOWNS
   ===================================================================== */

/* Stacks the Set and Version pickers under the card */
.pickers {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

/* Small heading above each picker */
.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/*
  Shared look for all three pickers: the custom Set button and the normal
  Version and Language drop-downs. "appearance: none" removes the
  browser's own styling so they all look the same.
*/
.picker {
  width: 100%;
  min-height: 46px;
  padding: 10px 40px 10px 12px;
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Draw our own little down-arrow on the right side, out of two
     triangles made with gradients */
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* Greyed-out look before a card has been searched */
.picker:disabled { opacity: 0.55; cursor: not-allowed; }

/* The options inside the Version and Language drop-downs use theme colors too */
.picker option { background: var(--surface); color: var(--text); }

/*
  The Set picker is custom-built (not a normal <select>) because
  normal drop-downs can't show pictures, and we need the set symbol.
  Its button and its rows lay out "symbol | CODE | Name" in a line.
*/
.set-picker { position: relative; }
.set-button,
.set-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The pop-up list of sets has a fixed maximum height and scrolls */
.set-list { max-height: 320px; }

/* The row for the set currently being shown */
.set-list li[aria-selected="true"] { font-weight: 600; }

/* The set symbol picture (flipped to white in dark mode) */
.set-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
  filter: var(--icon-filter);
}

/* The "|" separators between symbol, code, and name */
.sep { color: var(--muted); }

/* The set code, e.g. "LEA", in a fixed-width font so they line up */
.set-code {
  flex-shrink: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 600;
}

/* The set name: cut off with "…" if it's too long for the row */
.set-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =====================================================================
   NOTES AND RULES (official rulings for the card)
   ===================================================================== */

/* The whole box: a rounded panel below the drop-downs */
.rulings {
  margin-top: 28px;
  overflow: hidden;            /* keeps the title bar inside the rounded corners */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* The title block across the top of the box */
.rulings-title {
  margin: 0;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 700;
  background: var(--surface-hover);
  border-bottom: 1px solid var(--border);
}

/* The list of rulings (no bullet points) */
.rulings-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One ruling, with a thin line between each */
.rulings-list li {
  padding: 14px 16px;
  line-height: 1.55;
}
.rulings-list li + li { border-top: 1px solid var(--border); }

/* The date (and who published it) above each ruling */
.ruling-date {
  display: block;
  margin-bottom: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Message shown while loading, or when a card has no rulings */
.rulings-message {
  margin: 0;
  padding: 14px 16px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* =====================================================================
   FORMAT LEGALITY (which formats the card can be played in)
   It reuses the Notes and Rules box look (the "rulings" class); these
   rules add the list of formats.
   ===================================================================== */

/* The box sits a little below Notes and Rules */
.legality { margin-top: 16px; }

/*
  The list of formats: two columns side by side (one on narrow phones,
  see below), with no bullet points. Each line is one format.
*/
.legality-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  margin: 0;
  padding: 14px 16px;
  list-style: none;
}

/* One format: its name on the left and its status label on the right */
.legality-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.9rem;
}

/*
  The status label ("Legal", "Not Legal", "Banned", "Restricted"): a small
  rounded tag, the same width for every status so they line up. The color
  comes from its status (the classes below).
*/
.legality-status {
  flex-shrink: 0;
  min-width: 84px;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  border-radius: 999px;
}
.legality-status.legal      { color: #ffffff; background: #2f855a; }   /* green */
.legality-status.banned     { color: #ffffff; background: #c0392b; }   /* red */
.legality-status.restricted { color: #1e1c19; background: #e0a330; }   /* amber */
.legality-status.not_legal  { color: var(--muted); background: var(--surface-hover); }   /* grey */

/* Narrow phones: one column, so long format names have room */
@media (max-width: 480px) {
  .legality-list { grid-template-columns: 1fr; }
}

/* =====================================================================
   WIDER SCREENS
   ===================================================================== */

/*
  On wider screens (tablets and up), put the two pickers side by side
  and give the title a little more size.
*/
@media (min-width: 720px) {
  main { max-width: 760px; }
  .topbar h1 { font-size: 1.5rem; }
  .pickers { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   FOOTER: LINKS TO EVERY PAGE
   (the same rules are in style.css and landing.css)
   ===================================================================== */

/*
  The strip of links pinned to the bottom of the window, with a thin line
  above it. "position: fixed" keeps it at the window's bottom edge all the
  time, even while scrolling down this long page; the solid background
  hides the page passing underneath it, and z-index 50 keeps it on top.
  "line-height: 20px" fixes its height at 43px (1px line + 10px + 20px
  text + 12px), which is the body's bottom padding (below).
*/
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  /* The text and gaps shrink smoothly as the window narrows: "clamp(smallest,
     preferred, largest)", where 3.4vw is 3.4% of the window's width. The
     gaps (--footer-gap) are 3% of the width, between 6px and 24px. */
  font-size: clamp(0.7rem, 3.4vw, 0.9rem);
  --footer-gap: clamp(6px, 3vw, 24px);
  line-height: 20px;
  transition: background-color 0.25s;
  /* Inside, a grid with three columns: the page links in the middle one and
     "Sign out" in the right one, pushed to the far right edge. The two
     outer columns ("1fr") are always equal in width, which keeps the page
     links exactly centered on the page. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--footer-gap);
}

/* Leave room at the bottom of the page for the pinned footer (43px), so
   the end of the page (the Notes and Rules) can scroll up clear of it */
body { padding-bottom: 43px; }

/*
  The list of page links: no bullets, centered, side by side, always on
  one line ("nowrap").
*/
.footer-links {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px var(--footer-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each link uses the accent color, with no underline (it turns bold when the
   mouse is over it: see the end of this file) */
.footer-links a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

/* The link to the page you're already on looks like plain bold text */
.footer-links a[aria-current="page"] {
  color: var(--text);
  text-decoration: none;
  cursor: default;
}
/* In dark mode, the page you're on is solid white (in light mode it keeps
   the dark text color above, since white wouldn't show on the light footer) */
:root[data-theme="dark"] .footer-links a[aria-current="page"] { color: #ffffff; }/* =====================================================================
   FOOTER LAYOUT AND THE "SIGN OUT" LINK
   (the same rules are in style.css and landing.css)
   ===================================================================== */

/* The page links go in the footer's middle column (see .site-footer) */
.site-footer nav { grid-column: 2; }

/*
  "Sign out": a button (it does something) styled like the other footer
  links. "font: inherit" also copies the footer's 20px line height, so the
  footer stays exactly 43px tall.
*/
.footer-signout {
  grid-column: 3;
  justify-self: end;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  white-space: nowrap;
  cursor: pointer;
}
.footer-signout:disabled {
  opacity: 0.6;
  cursor: progress;
  text-decoration: none;
}

/*
  The footer sizes itself to the window: the text and the gaps between the
  links shrink smoothly as the window gets narrower (see .site-footer and
  --footer-gap above). Normally the links are exactly centered, with
  "Sign out" at the far right. When the window is too narrow for that,
  the footer gets the "footer-compact" class (added by the FOOTER code in
  binder-storage.js, which measures it whenever the window or the footer
  changes): it becomes one centered row, with "Sign out" (or "Sign in")
  as the last item, so it always fits on one line (the footer must stay
  one line, 43px tall, or it would cover the bottom of the page).
*/
.site-footer.footer-compact {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Phones and narrow windows (640px or less): shorter words */
@media (max-width: 640px) {
  /* A shorter label on phones ("Sign in" instead of "Sign in with
     Google"), so the footer fits on one line. (".site-footer" in front makes these rules
     win over the plain ".label-short" rule below.) */
  .site-footer .label-long { display: none; }
  .site-footer .label-short { display: inline; }
}
/* The short link words are hidden except on phones (the rule just above) */
.label-short { display: none; }
/* Very narrow phones (under 340px): a long binder name in the footer
   (like "Planeswalker") is cut short with "…", so the footer still fits on
   one line. "inline-block" lets the name have a maximum width;
   "vertical-align" keeps it lined up with the other links. */
@media (max-width: 339px) {
  #thisBinderLink, #backToBinderLink {
    display: inline-block;
    max-width: 4.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
}

/* =====================================================================
   LINKS TURN BOLD WHEN THE MOUSE IS OVER THEM
   (the same idea is at the end of style.css, landing.css and help.css)
   Real bold letters are wider, which would push the words beside them
   along. Instead, each letter gets a thin outline in its own color
   ("-webkit-text-stroke"), which makes it look bold while taking up
   exactly the same space, so nothing moves. 0.04em scales with the
   text's size. Covers: "View on Scryfall", the footer links (not the
   page you're on, which isn't a link) and Sign out.
   ===================================================================== */
.card-info a:hover,
.footer-links a:not([aria-current="page"]):hover,
.footer-signout:hover:not(:disabled) {
  -webkit-text-stroke: 0.04em currentColor;
}

/* =====================================================================
   USING THE KEYBOARD (see USING THE KEYBOARD in cardsearch.js)
   ===================================================================== */

/* The line under the search box: the status message on the left and the
   shortcuts tip on the right, on one line ("baseline" lines up their text) */
.hint-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/*
  The faint "/ search · ? shortcuts" tip. It's a button (clicking it opens
  the Keyboard shortcuts window) styled as small muted text. "flex-shrink:
  0" stops it squashing; the status message wraps instead.
*/
.shortcuts-tip {
  flex-shrink: 0;
  margin: 8px 2px 0;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.shortcuts-tip:hover { color: var(--accent); }

/* Touch screens (phones, tablets) usually have no keyboard: no tip */
@media (hover: none) {
  .shortcuts-tip { display: none; }
}

/* A key, like "/" or "?": a small rounded box with a border, the way keys
   are usually shown in instructions */
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 0.85em;
  line-height: 1.4;
  text-align: center;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
}

/* The list in the Keyboard shortcuts window: the keys in a narrow column
   on the left, what they do on the right (a two-column grid) */
.shortcut-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 16px;
  align-items: center;
  margin: 0;
}
.shortcut-list dt { white-space: nowrap; }
.shortcut-list dd { margin: 0; font-size: 0.95rem; }

/* =====================================================================
   BACK BUTTON (to the left of the title; see BACK BUTTON in
   binder-storage.js)
   ===================================================================== */

/* The back button and the title side by side, lined up in the middle */
.topbar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;   /* lets the title shrink on a narrow phone instead of overflowing */
}

/* The back button: a round outlined button with a left arrow, the same
   height as the light/dark switch. It turns orange under the mouse. */
.back-button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.back-button svg { width: 18px; height: 18px; }
.back-button:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}

/* Nowhere to go back to: faded, and the pointer shows it can't be clicked */
.back-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* The narrowest phones (360px or less): with the back button beside it,
   "MTG Card Binder" would wrap onto two lines, so make it a little smaller
   and keep it on one line ("nowrap"), with a smaller gap */
@media (max-width: 360px) {
  .topbar-title { gap: 8px; }
  .topbar-title h1 { font-size: 1.1rem; white-space: nowrap; }
}

/* =====================================================================
   THE APP'S NAME: "WUBRG'r Binder", with the W, U, B, R and G in their
   Magic colors (white, blue, purple for black, red and green). Light mode
   uses deeper shades so the letters stand out on the light background;
   dark mode uses brighter ones.
   ===================================================================== */
/* The W: solid white in both themes, with a thin black outline so it
   still shows up on the light background. The outline is four small
   shadows, nudged 1px up-left, up-right, down-left and down-right. */
.mana-w {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.mana-u { color: #1d6fd6; }
.mana-b { color: #7b3fd1; }
.mana-r { color: #c92a2a; }
.mana-g { color: #2b8a3e; }
:root[data-theme="dark"] .mana-u { color: #5aa9ff; }
:root[data-theme="dark"] .mana-b { color: #b182ff; }
:root[data-theme="dark"] .mana-r { color: #ff6b6b; }
:root[data-theme="dark"] .mana-g { color: #51cf66; }