/* =========================================================================
   style.css — all the styles (colors, layout, looks) for binder.html,
   the Card Binder page.
   ========================================================================= */

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

/*
  Color "tokens" for LIGHT mode (the same ones cardsearch.html uses, plus
  a few for the binder). Every color in the page uses these variables,
  so switching themes only means swapping this list.
*/
:root {
  --bg: #f4f1ea;
  --surface: #ffffff;
  --text: #1e1c19;
  --muted: #6c675f;
  --border: #d8d2c6;
  --accent: #a8492a;
  /* The bright orange (dark mode's accent), used in BOTH themes for things
     that always sit on black, like the "+" in empty pockets and the
     "− 3 +" buttons on cards, where the darker light-mode orange would be
     hard to see */
  --accent-on-dark: #e38a5c;
  --switch-track: #e3dccf;
  --switch-thumb: #ffffff;

  /* Binder colors: a black cover, slightly lighter black pages, and
     see-through plastic pockets. A real binder is black in any light,
     so these only change a little between themes. */
  --binder-cover: #121214;
  --binder-cover-edge: #2a2a2e;
  --binder-page: #1b1b1f;
  --pocket-fill: #232328;
  --pocket-edge: rgba(255, 255, 255, 0.10);
  --pocket-shine: rgba(255, 255, 255, 0.07);
  /* Shadow under the whole binder so it sits on the page */
  --binder-shadow: 0 4px 8px rgba(40, 30, 20, 0.20), 0 18px 40px rgba(40, 30, 20, 0.25);
}

/*
  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;
  --text: #ece9e3;
  --muted: #9b968e;
  --border: #343741;
  --accent: #e38a5c;
  --switch-track: #2f323c;
  --switch-thumb: #14151a;

  /* On a dark background the cover needs a lighter edge to stand out */
  --binder-cover: #0b0b0d;
  --binder-cover-edge: #3a3c45;
  --binder-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), 0 18px 40px rgba(0, 0, 0, 0.7);
}

/* =====================================================================
   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: grid) would otherwise show it. javascript.js uses
  this to hide the binder pages you're not looking at.
*/
[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;
  /* On a phone, a turning page swings out past the screen's edge.
     "clip" cuts it off there instead of letting the page scroll sideways. */
  overflow-x: clip;
}

/* A visible outline on buttons reached with the keyboard (Tab key) */
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/*
  Holds the binder and the page links. There's no width limit, so the
  binder can grow with the browser window; the 16px side padding keeps
  it off the window's edges. The small bottom padding is a little space
  between the Previous / Next links and the footer.
*/
main {
  margin: 0 auto;
  padding: 8px 16px 12px;
}

/* =====================================================================
   TOP BAR AND LIGHT/DARK SWITCH  (same look as cardsearch.html)
   ===================================================================== */

/*
  The top bar: title on the left, Download / Upload links in the center,
  and the theme switch on the right.
  It's a "grid" with three columns: the two outer ones ("1fr") share the
  leftover space equally, so the middle one ("auto") lands exactly in the
  center of the bar no matter how long the title is.
*/
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
}

/* The theme switch sits at the right end of its column */
.topbar .theme-switch { justify-self: end; }

/* The Download / Upload links, side by side in the center column */
.binder-tools {
  display: flex;
  gap: 20px;
}

/*
  Each Download / Upload control: a button styled as a link (accent
  color, no box), with a small arrow icon before the words.
*/
.tool-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  cursor: pointer;
}
.tool-link svg { width: 16px; height: 16px; flex-shrink: 0; }   /* the small arrow / cloud icon */

/*
  The Google Drive save status beside the links ("✓ Saved to Drive",
  "Saving…"). javascript.js sets data-state, which picks the color:
  muted gray normally, green once saved, red if Drive couldn't be reached.
*/
.sync-status {
  align-self: center;
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--muted);
}
.sync-status[data-state="saved"] { color: #3f9b5b; }
.sync-status[data-state="error"] { color: #d0453a; }
.sync-status:empty { display: none; }   /* nothing to say: take no space */

/*
  On phones there's no room for all three in one row, so the links move
  to a second row under the title and switch, centered across the bar.
  "grid-template-areas" names the spots: title and switch on row one,
  tools spanning the whole of row two.
*/
@media (max-width: 640px) {
  .topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title switch"
      "tools tools";
    row-gap: 8px;
  }
  .topbar .topbar-title { grid-area: title; }
  .topbar .theme-switch { grid-area: switch; }
  /* "flex-wrap" lets the Drive save status drop to its own line under the
     Download / Upload links when they don't all fit across a phone */
  .binder-tools {
    grid-area: tools;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 2px;
  }
}

/* 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"). (".topbar .theme-switch"
  above puts it at the right end of the top bar.)
*/
.theme-switch {
  position: relative;
  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); }

/* =====================================================================
   THE BINDER
   ===================================================================== */

/*
  SIZING THE BINDER TO THE WINDOW
  The binder grows and shrinks with the browser window, filling the
  height left over once everything above and below it has its space.
  That way the whole page fits in the window with no scrolling.

  These "custom properties" (variables, written --name) do the math:

  --top-gap: the space above the binder. It's the top bar (60px tall:
    32px switch + 14px padding above and below) + main's 8px top padding
    + the binder's 20px top margin = 88px. If you change any of those,
    update this number too.

  --bottom-space: everything below the binder:
      16px gap + 33px Previous / Next row + main's 12px bottom padding
      + 43px footer (1px line + 10px padding + 20px text + 12px padding)
      + 2px spare, because screens set to zoom levels like 125% round
        sizes to fractions of a pixel, which could add a 1px scroll
      = 106px.
    If you change any of those (or add something under the binder),
    update this number too, or the page will start to scroll.

  --binder-height: the window's height minus the space above and below.
    "svh" means "small viewport height": on phones it ignores the
    browser's address bar, which slides in and out. It never goes below
    380px, so a very short window still shows a usable binder (the page
    scrolls a little in that case).

  --binder-chrome: the parts of the binder's height that AREN'T pockets:
    cover padding 14px x 2 + cover border 1px x 2 + page padding 8px x 2
    + 3 seams of 6px between the 4 rows = 64px.

  --pocket-height: what's left for the 4 rows of pockets, split 4 ways.
  --pocket-width: pockets are card-shaped (63 wide for every 88 tall).

  --binder-width: whatever makes those pockets fit:
    8 pockets across (4 per page) + 6 seams of 6px + 4 page paddings of
    8px + the 28px spine + 2 cover paddings of 14px + 2px of border
    = 8 pockets + 126px.
    "min(100%, ...)" stops it getting wider than the window. On a tall,
    narrow window the width runs out first, and the binder is simply as
    wide as it can be (with a bigger gap below).

  These are set on <main> (not just the binder) so the Previous / Next
  row under the binder can use --binder-width too, and line up with it.
*/
main {
  --top-gap: 88px;
  --bottom-space: 106px;
  --binder-height: max(380px, calc(100svh - var(--top-gap) - var(--bottom-space)));
  --binder-chrome: 64px;
  --pocket-height: calc((var(--binder-height) - var(--binder-chrome)) / 4);
  --pocket-width: calc(var(--pocket-height) * 63 / 88);
  --binder-width: min(100%, calc(8 * var(--pocket-width) + 126px));
}

/*
  The open binder: the black cover with the two pages lying on it.
  It's a "grid" with two equal columns (left page, right page), exactly
  --binder-width wide (worked out above).
*/
.binder {
  width: var(--binder-width);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;                     /* the space for the spine in the middle */
  position: relative;
  margin: 20px auto 0;
  padding: 14px;
  border: 1px solid var(--binder-cover-edge);
  border-radius: 12px;
  background: var(--binder-cover);
  box-shadow: var(--binder-shadow);
  /* Let the phone handle up/down scrolling as usual, but pass sideways
     finger swipes to our script so it can turn the page */
  touch-action: pan-y;
  /* "perspective" gives 3D depth to things turning inside the binder:
     a page swinging toward you looks bigger, like a real page lifting.
     Smaller numbers = more dramatic 3D. */
  perspective: 2200px;
}

/*
  The spine: a dark groove down the middle where the binder folds.
  "::before" draws an extra shape without needing more HTML.
  The gradient goes dark → darker → dark to look like a fold in the cover.
*/
.binder::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 28px;
  transform: translateX(-50%);
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0.03),
    rgba(0, 0, 0, 0.55) 50%,
    rgba(255, 255, 255, 0.03));
}

/*
  One page of pockets: 4 columns by 4 rows (16 pockets), like a real
  binder page. The small gaps are the plastic seams between pockets.
*/
.binder-page {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px;
  border-radius: 6px;
  background: var(--binder-page);
}

/*
  One pocket. It keeps the real Magic card shape (63 x 88 mm) so a card
  picture fits it exactly.
  - The inset shadow makes an empty pocket look sunk in, like an empty sleeve.
  - The thin light border is the edge of the plastic.
*/
.pocket {
  position: relative;
  aspect-ratio: 63 / 88;
  border: 1px solid var(--pocket-edge);
  border-radius: 4px;
  background: var(--pocket-fill);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  /* Lets things inside size themselves by the pocket's width
     (the "cqw" unit below), so the "+" grows with the binder */
  container-type: inline-size;
}

/*
  A soft diagonal shine across each pocket, so it looks like clear
  plastic catching the light. It sits on top of the card picture too,
  like a real sleeve. pointer-events: none lets clicks pass through it
  to the link inside the pocket.
*/
.pocket::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    var(--pocket-shine) 0%,
    transparent 40%,
    transparent 70%,
    var(--pocket-shine) 100%);
  pointer-events: none;
}

/*
  The white "+" in the middle of an empty pocket. It's a link to
  cardsearch.html. It fills the whole pocket, so clicking anywhere in
  the pocket works, and centers the "+" inside it.
*/
.pocket-add {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* The "+" is 35% of the pocket's width ("cqw" = 1% of the pocket's
     width), but never smaller than 1.25rem or bigger than 4rem */
  font-size: clamp(1.25rem, 35cqw, 4rem);
  font-weight: 300;              /* thin "+" normally... */
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
}

/* ...and a bold, orange "+" when the mouse is over it (or it's reached by
   Tab), like the other links. (It's centered in the pocket, so getting
   bolder doesn't move anything.) */
.pocket-add:hover,
.pocket-add:focus-visible {
  font-weight: 800;
  color: var(--accent-on-dark);
}

/* A pocket that holds a card: the whole card picture is a link */
.pocket-card {
  position: absolute;
  inset: 0;
  /* On iPhones, a long press normally pops up a link preview. A long
     press now picks the card up instead, so turn that preview off. */
  -webkit-touch-callout: none;
}

/*
  A FOIL card (marked with the Foil button on the card finder): a rainbow
  border around the card. It's drawn by a layer on top of the card's edge
  ("::before", covering the whole pocket), so the card doesn't shrink or
  move. The trick: the layer is filled with a rainbow, then a "mask" cuts
  out everything except a 3px frame ("padding: 3px" is the frame's width;
  "exclude" removes the inner part from the whole). "pointer-events: none"
  lets clicks pass through to the card. z-index 1 puts it over the card
  picture; the "− 3 +" bar comes later in the page, so it stays on top.
*/
.pocket.foil::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 3px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    #ff4d6d, #ff9f43, #ffe156, #4cd97b, #3ec5ff, #6c7bff, #c06cff, #ff4d6d);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* The card picture fills its pocket */
.pocket-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;   /* no browser "drag the picture" (Safari) */
}

/*
  The "− 3 +" bar along the bottom of a card: how many copies you own,
  with buttons to change it. It's a dark see-through pill over the
  bottom edge of the card (where the artist's name is, so it hides
  nothing important). "z-index: 1" puts it above the plastic shine.
  Its size follows the pocket's width ("cqw" = 1% of the pocket's width),
  so it shrinks on phones and grows on big screens.
*/
.copies-bar {
  position: absolute;
  z-index: 1;
  left: 8%;
  right: 8%;
  bottom: 3%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(0.65rem, 11cqw, 1.05rem);
  line-height: 1;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  -webkit-touch-callout: none;
}

/* The "−" and "+" buttons: round, see-through until the mouse is over them */
.copies-bar button {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;   /* no double-tap zoom when tapping quickly */
}
/* Mouse over "−" or "+" (or reached by Tab): it turns orange and bold,
   like the links, on a faint light circle. The bold is a thin outline in
   its own color ("-webkit-text-stroke"), so the sign doesn't change size
   and the number beside it doesn't move. */
.copies-bar button:hover:not(:disabled),
.copies-bar button:focus-visible {
  color: var(--accent-on-dark);
  -webkit-text-stroke: 0.06em currentColor;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

/* "+" is greyed out at the most copies allowed (99) */
.copies-bar button:disabled { opacity: 0.35; cursor: default; }

/* The number of copies between the buttons */
.copies-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;   /* every digit the same width */
}

/* =====================================================================
   DRAGGING CARDS BETWEEN POCKETS (see DRAGGING CARDS in javascript.js)
   ===================================================================== */

/* Dragging shouldn't highlight (select) text or pictures in the binder */
.binder {
  user-select: none;
  -webkit-user-select: none;
}

/* The pocket a card is being dragged OUT of: the card left behind (and
   its "− 3 +" bar) fades */
.pocket.drag-source .pocket-card,
.pocket.drag-source .copies-bar { opacity: 0.25; }

/*
  The pocket the card would drop INTO: an accent-colored dashed outline
  inside its edge, plus a soft glow. (A negative outline-offset draws the
  outline inside the pocket instead of around it.)
*/
.pocket.drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: -3px;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
}

/*
  The floating copy of the card that follows the mouse or finger.
  "position: fixed" places it relative to the window; the script moves it
  with "transform". It ignores the pointer (pointer-events: none), so the
  script can see which pocket is underneath it.
*/
.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  border-radius: 4px;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  will-change: transform;    /* hint to the browser: this moves a lot */
  transition: opacity 0.15s ease;   /* fades smoothly over a drop circle (below) */
}
.drag-ghost img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
  The two drop circles on the binder while a card is being dragged, both
  centered across the binder (over the spine, or the middle of the page on
  a phone):
  - the blue "move to another binder" circle, 1/3 of the way down
  - the red "remove card" circle, 1/3 of the way up from the bottom
  Each is placed with "top" and "left: 50%" plus a "translate(-50%, -50%)"
  pull back by half its own size, so its CENTER sits on that spot.
  They sit above the pages (z-index 5) and are hidden (display: none)
  until a card is being dragged.
*/
.binder-trash,
.binder-move {
  position: absolute;
  left: 50%;
  z-index: 5;
  display: none;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: #ffffff;
  border: 3px solid #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.binder-trash svg,
.binder-move svg { width: 30px; height: 30px; }

/* Where each one sits, and its color */
.binder-move  { top: 33.333%; background: #2b6cb0; }
.binder-trash { top: 66.667%; background: #c0392b; }

/* Show them (as centered grids) only while a card is being dragged */
body.dragging .binder-trash,
body.dragging .binder-move { display: grid; }

/* A card is over one: grow it and brighten it, so it's clear what
   letting go there will do */
.binder-trash.active,
.binder-move.active { transform: translate(-50%, -50%) scale(1.25); }
.binder-trash.active { background: #e74c3c; }
.binder-move.active  { background: #3b82d6; }

/* The floating card fades while it's over either circle. The circles are
   drawn underneath the floating card, so this lets them show through, and
   the fading hints that the card is about to leave this binder. */
.drag-ghost.over-circle { opacity: 0.3; }

/* While dragging, show the "grabbing hand" cursor everywhere */
body.dragging,
body.dragging * {
  cursor: grabbing !important;
}

/*
  The glow on the binder's left or right edge while a card is held there,
  showing that the page is about to turn. "::after" draws it without extra
  HTML. It pulses (the "edge-pulse" animation below) while it waits.
*/
.binder.edge-left::after,
.binder.edge-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 70px;
  z-index: 4;
  pointer-events: none;
  animation: edge-pulse 0.8s ease-in-out infinite alternate;
}
.binder.edge-left::after {
  left: 0;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--accent) 55%, transparent), transparent);
}
.binder.edge-right::after {
  right: 0;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(to left,
    color-mix(in srgb, var(--accent) 55%, transparent), transparent);
}

/* The pulse: the glow fades between half and full strength */
@keyframes edge-pulse {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}

/* People who turn on "reduce motion" get a steady glow, no pulsing */
@media (prefers-reduced-motion: reduce) {
  .binder.edge-left::after,
  .binder.edge-right::after { animation: none; }
}

/* Keyboard focus outline for both kinds of pocket link */
.pocket-add:focus-visible,
.pocket-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* =====================================================================
   PAGE TURNING ANIMATION
   ===================================================================== */

/*
  The "flipper" is a temporary page laid on top of the binder while a
  page turns. The script places it exactly over the page that's turning,
  then swings it around the spine like a door on a hinge.
  "preserve-3d" keeps its two sides (front and back) in real 3D, so
  we see the back side once it has turned past halfway.
*/
.flipper {
  position: absolute;
  z-index: 3;
  transform-style: preserve-3d;
  pointer-events: none;          /* it's just for show: can't be clicked */
}

/*
  The two sides of the turning page. javascript.js only shows one side at
  a time (it swaps them when the page is straight up), so cards on one
  side can't show through the other. "backface-visibility: hidden" is a
  backup: it hides a side whenever it faces away from you.
*/
.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;   /* same thing, for Safari */
}

/* The back side starts already turned around, facing away */
.flip-back { transform: rotateY(180deg); }

/* The copied page inside each side fills it completely */
.flip-face > .binder-page { height: 100%; }

/* The plain back of a page (used on phones, where only one page shows) */
.flip-face > .blank-page {
  height: 100%;
  border-radius: 6px;
  background: var(--binder-page);
}

/*
  The shadow a turning page casts on the binder underneath it.
  javascript.js places it over a page, gives it a dark-at-the-spine
  gradient, and fades it in or out as the page lifts and lands.
  It sits above the binder's pages (z-index 2) but under the turning
  page (z-index 3), and can't be clicked.
*/
.turn-shadow {
  position: absolute;
  z-index: 2;
  border-radius: 6px;
  pointer-events: none;
}

/*
  A dark layer over each side that the script fades in and out while
  the page turns, so the page looks shadowed as it lifts off the binder.
*/
.flip-shade {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: #000000;
  opacity: 0;
}

/* =====================================================================
   PREVIOUS / NEXT PAGE LINKS
   ===================================================================== */

/*
  The row under the binder: "Previous page" left, page number middle,
  "Next page" right. It's exactly as wide as the binder and centered the
  same way ("auto" side margins), so the "←" of Previous lines up with the
  binder's left edge and the "→" of Next lines up with its right edge.
*/
.page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: var(--binder-width);
  margin: 16px auto 0;
}

/*
  The Previous / Next controls. They're real buttons (so they work with
  the keyboard and screen readers) but styled to look like text links.
  No padding on the sides, so the arrows sit right at the binder's edges.
*/
.page-link {
  padding: 6px 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}

/* At the first or last page there's nowhere to go, so grey the link out */
.page-link:disabled {
  color: var(--muted);
  opacity: 0.5;
  cursor: default;
  text-decoration: none;
}

/* "Pages 1–2 of 10" in the middle of the row */
.page-status {
  font-size: 0.9rem;
  color: var(--muted);
}

/*
  Small screens (phones): two pages side by side would be tiny, so the
  binder shows ONE page at a time (the script hides the other) and the
  spine in the middle is hidden.
  The size math changes to match: 4 pockets across, and the cover
  padding is 10px instead of 14px, so:
    - not-pocket height = 20px padding + 2px border + 16px page padding
      + 18px of seams = 56px
    - width = 4 pockets + 18px seams + 16px page padding + 20px padding
      + 2px border = 4 pockets + 56px
  The space above the binder is bigger too: the top bar has a second row
  on phones (the Drive save status, under the title), which makes it 86px
  tall instead of 60px, so --top-gap is 114px instead of 88px. Without
  this, the binder came out too tall for short phones, and the Previous /
  Next row slid under the footer.
  Very small phones (like a 320 x 568 screen) also allow a shorter binder,
  300px instead of 380px, so it still fits without scrolling.
  Keep this 640px number in sync with PHONE_QUERY in javascript.js.
*/
@media (max-width: 640px) {
  main {
    --top-gap: 114px;
    --binder-height: max(300px, calc(100svh - var(--top-gap) - var(--bottom-space)));
    --binder-chrome: 56px;
    --binder-width: min(100%, calc(4 * var(--pocket-width) + 56px));
  }
  .binder {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  .binder::before { display: none; }
}

/* On wider screens, give the title a little more size (same as cardsearch.html) */
@media (min-width: 720px) {
  .topbar h1 { font-size: 1.5rem; }
}

/* =====================================================================
   FOOTER: LINKS TO EVERY PAGE
   (cardsearch.css has the same rules, except this page's footer is
   slimmer so the whole binder page fits in the window without scrolling)
   ===================================================================== */

/*
  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 if the page scrolls; the solid background hides anything
  passing underneath it. z-index 50 keeps it above the page (but under a
  card being dragged, which is 1000).
  Its height (43px) is part of --bottom-space in the binder sizing above,
  and is the body's bottom padding (below), so it never covers the page.
  "line-height: 20px" fixes the text's height so that number stays true.
*/
.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 can scroll up clear of it instead of hiding behind 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 landing.css and cardsearch.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) {
  /* Shorter words on phones, so each row fits on one line: "Sign in" in
     the footer, and "Previous" / "Next" under the binder. (".site-footer" / ".page-nav" in front makes these rules win
     over the plain ".label-short" rule below.) */
  .site-footer .label-long, .page-nav .label-long { display: none; }
  .site-footer .label-short, .page-nav .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;
  }
}
/* =====================================================================
   THE "MOVE CARD TO…" WINDOW (see MOVING A CARD TO ANOTHER BINDER in
   javascript.js). It matches the pop-up windows on the My Binders page.
   ===================================================================== */

/*
  The pop-up window itself. A <dialog> opened with showModal() is centered
  on the screen by the browser; these rules give it the page's colors,
  rounded corners and a shadow, and keep a 16px gap at each side on a phone.
*/
.move-dialog {
  width: 440px;
  max-width: calc(100vw - 32px);
  padding: 24px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

/* The dimmed layer the browser puts over the page behind the window */
.move-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }

/* "Move card to…" and the line under it */
.dialog-title {
  margin: 0 0 6px;
  font-size: 1.25rem;
}
.dialog-text {
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
}

/* The list of the user's other binders, one button per line */
.move-targets {
  display: grid;
  gap: 6px;
}

/*
  One binder to pick: its symbol, its name, and its card count on the
  right, in a row. It's a button styled as a light box that highlights
  in the accent color when the mouse is over it.
*/
.move-target {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.move-target:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}

/* A full binder (or while a move is being saved): greyed out */
.move-target:disabled { opacity: 0.5; cursor: default; }

/* The binder's cover symbol (an empty spot of the same size if it has none) */
.move-symbol {
  display: block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

/* The binder's name takes the space in the middle; the count sits right */
.move-name { flex: 1; font-weight: 600; }
.move-count { font-size: 0.85rem; color: var(--muted); }

/* "You don't have any other binders yet." */
.move-none {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* The "Or move it to a new binder" part, below the list */
.move-new { margin-top: 18px; }

/* "OR MOVE IT TO A NEW BINDER": the small heading above the name box */
.field-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The name box and the "New binder & move" button side by side.
   ("flex-wrap" puts the button under the box on a narrow phone.) */
.move-new-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The name box with its "5 / 12" counter on the right inside it */
.name-field {
  position: relative;
  flex: 1 1 180px;
}
.name-input {
  width: 100%;
  padding: 9px 60px 9px 12px;     /* room on the right for the counter */
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.name-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.name-count {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--muted);
  pointer-events: none;
}

/* "Moving…", or a problem like "That binder is full" (in red) */
.move-message {
  min-height: 1.3em;
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.move-message.error { color: #d0453a; }

/* "How many to move" (only when the pocket has several copies): a small
   number box with "of 4" beside it */
.move-how-many { margin-bottom: 14px; }
.move-amount-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.move-amount {
  width: 5.5em;
  padding: 8px 10px;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.move-amount:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.move-amount-note { font-size: 0.9rem; color: var(--muted); }

/* The Cancel button along the bottom, on the right */
.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

/* The window's buttons: rounded, the page's font */
.dialog-button {
  padding: 9px 18px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.dialog-button:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 8%, transparent); }
.dialog-button:disabled { opacity: 0.6; cursor: default; }

/* "New binder & move" is a main action, so it's filled with the accent color */
.dialog-button.primary {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
}
.dialog-button.primary:hover:not(:disabled) { filter: brightness(1.1); background: var(--accent); }

/* "Yes, remove" in the Remove card window: red, since it takes a card out */
.dialog-button.danger {
  color: #ffffff;
  background: #c0392b;
  border-color: #c0392b;
}
.dialog-button.danger:hover:not(:disabled) { filter: brightness(1.1); background: #c0392b; }

/* =====================================================================
   LINKS TURN BOLD WHEN THE MOUSE IS OVER THEM
   (the same idea is at the end of landing.css, cardsearch.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: "Connect Drive", Previous / Next page, the footer
   links (not the page you're on, which isn't a link) and Sign out.
   ===================================================================== */
.tool-link:hover,
.page-link:hover:not(:disabled),
.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 javascript.js)
   ===================================================================== */

/*
  Hidden from view but still read by screen readers: the message area
  that says what the keyboard just did ("Picked up Lightning Bolt…").
  (display: none would hide it from screen readers too, so instead it's
  shrunk to 1px and clipped.)
*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/*
  The key guide: a small dark pill pinned to the top middle of the window,
  just under the top bar, listing the keys that work right now. It only
  shows while the keyboard is in the binder (javascript.js takes away
  "hidden"). "pointer-events: none" lets clicks pass through it, and
  "nowrap" + "ellipsis" keep it to one line on narrow screens.
*/
.keyboard-hint {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  max-width: calc(100vw - 32px);
  padding: 5px 14px;
  font-size: 0.8rem;
  color: #f4efe7;
  background: rgba(20, 21, 26, 0.92);
  border: 1px solid var(--accent-on-dark);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.keyboard-hint[hidden] { display: none; }

/* While carrying a card with the keyboard, the pocket it would drop into
   shows only the dashed "drop here" outline (not the keyboard's solid
   outline on top of it), so it looks just like dragging with the mouse */
.pocket.drop-target > a:focus-visible { outline: none; }

/* A key, like "M" or "Space": a small rounded box with a border, the way
   keys are usually shown in instructions (used in the Keyboard shortcuts
   window) */
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; }

/* =====================================================================
   DROPPING CARD PICTURES FROM OTHER WEBSITES (see the same heading in
   javascript.js)
   ===================================================================== */

/* A pocket waiting for Scryfall to say which card was dropped on it:
   its dashed outline gently fades in and out until the card arrives */
.pocket.drop-loading {
  outline: 2px dashed var(--accent);
  outline-offset: -3px;
  animation: drop-loading-pulse 0.9s ease-in-out infinite alternate;
}
@keyframes drop-loading-pulse {
  from { outline-color: var(--accent); }
  to   { outline-color: transparent; }
}
/* People who turn on "reduce motion" get a steady outline instead */
@media (prefers-reduced-motion: reduce) {
  .pocket.drop-loading { animation: none; }
}

/* =====================================================================
   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; }