/* =========================================================================
   landing.css — all the styles (colors, layout, looks) for index.html,
   the landing page: the Google sign-in screen, then the shelf of binders.
   ========================================================================= */

/* =====================================================================
   THEME COLORS  (the same tokens as style.css, so the pages match)
   ===================================================================== */

/*
  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;
  --text: #1e1c19;
  --muted: #6c675f;
  --border: #d8d2c6;
  --accent: #a8492a;
  --error: #c0392b;
  /* "Danger" red for the delete circle and "Yes, delete" (and a brighter
     red for hovering), the same in both themes */
  --danger: #c0392b;
  --danger-bright: #e74c3c;
  --switch-track: #e3dccf;
  --switch-thumb: #ffffff;

  /* The black cover's colors (black is the default cover color; the
     other cover colors are set further down): a black cover with a
     slightly lighter edge. A real binder is black in any light, so these
     only change a little. */
  --binder-cover: #121214;
  --binder-cover-edge: #2a2a2e;
  --binder-shadow: 0 4px 8px rgba(40, 30, 20, 0.20), 0 14px 28px rgba(40, 30, 20, 0.25);
  --binder-shadow-lift: 0 8px 14px rgba(40, 30, 20, 0.22), 0 24px 40px rgba(40, 30, 20, 0.30);

  /* Google's sign-in button colors for light pages */
  --google-bg: #ffffff;
  --google-border: #747775;
  --google-text: #1f1f1f;
}

/*
  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;
  --error: #f07167;
  --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 14px 28px rgba(0, 0, 0, 0.7);
  --binder-shadow-lift: 0 8px 14px rgba(0, 0, 0, 0.6), 0 24px 40px rgba(0, 0, 0, 0.8);

  /* Google's sign-in button colors for dark pages */
  --google-bg: #131314;
  --google-border: #8e918f;
  --google-text: #e3e3e3;
}

/* =====================================================================
   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 would otherwise show it. landing.js uses this to switch views. */
[hidden] { display: none !important; }

/*
  Page-wide basics: font, colors, and a smooth fade when the theme changes.
  The body is a column (flex) at least as tall as the window, so the
  footer sits at the bottom and the middle part can center things in it.
*/
body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin: 0;
  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;
}

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

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

/* The middle of the page: takes all the height between the top bar and the
   footer ("flex: 1"), and is itself a column so its content can center. */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 16px 32px;
}

/* =====================================================================
   TOP BAR AND LIGHT/DARK SWITCH  (same look as the other pages)
   ===================================================================== */

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

/* =====================================================================
   SIGNED OUT: THE SIGN-IN SCREEN
   ===================================================================== */

/*
  The sign-in box. "margin: auto" inside main's column centers it both
  ways: across the page and up/down in the space above the footer.
*/
/*
  The sign-in screen fills the page between the top bar and the footer
  ("flex: 1"), as a grid of three rows:
    1. the open binder picture, sitting at the bottom of the top row
    2. the sign-in box
    3. empty
  Rows 1 and 3 share the spare height equally ("1fr" each), so the box
  stays centered on the page, where it always was. Only when the window
  is too short for the picture to fit in the top half does row 1 grow,
  pushing the box down (and the page can scroll).
*/
.sign-in {
  flex: 1;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  text-align: center;
}
/* "display: grid" above would otherwise beat the "hidden" attribute that
   landing.js uses to hide the sign-in screen once signed in */
.sign-in[hidden] { display: none; }

/*
  The open binder picture: at most 560px wide (and never wider than the
  page), and never taller than 36% of the window, so on short windows it
  shrinks before it pushes the box down. "object-fit: contain" keeps its
  shape when either limit kicks in. The 24px gap keeps it off the heading.
*/
.sign-in-art {
  align-self: end;
  width: min(560px, 100%);
  height: auto;
  max-height: 36svh;
  object-fit: contain;
  margin: 8px 0 24px;
  /* A soft shadow under the binder, like it's lying on a table */
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.35));
}

/* The sign-in box: the heading, text and buttons, no wider than 420px */
.sign-in-box { max-width: 420px; }

/* The heading and the short explanation above the button */
.sign-in-title {
  margin: 0 0 10px;
  font-size: 1.6rem;
}
.sign-in-text {
  margin: 0 0 28px;
  line-height: 1.5;
  color: var(--muted);
}

/*
  "Sign in with Google": a rounded white button with Google's colored G,
  the way Google's own sign-in buttons look (dark version in dark mode).
*/
.google-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 22px 0 16px;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--google-text);
  background: var(--google-bg);
  border: 1px solid var(--google-border);
  border-radius: 999px;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}
.google-button:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.google-button:disabled { opacity: 0.6; cursor: default; box-shadow: none; }

/* Google's "G" logo inside the button */
.google-logo { width: 20px; height: 20px; }

/* "Skip login, local use only": a small link-style button under the
   Google button, for using the app without signing in */
.skip-login {
  margin: 18px 0 0;
}
.skip-login-button {
  padding: 4px 6px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.skip-login-button:hover { filter: brightness(1.15); }

/* "Go to your binders →": shown on the welcome page in place of the
   sign-in buttons when you're already signed in (or using the site
   locally). An accent-colored link, like the site's other links; it turns
   bold under the mouse (see the end of this file) */
.go-to-binders { margin: 0; }
.go-to-binders a {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

/* A message under the button (e.g. "Sign-in was cancelled."). It keeps its
   height when empty so the button doesn't jump when a message appears. */
.sign-in-message {
  min-height: 1.4em;
  margin: 16px 0 0;
  font-size: 0.9rem;
  color: var(--error);
}

/* =====================================================================
   SIGNED IN: THE SHELF OF BINDERS
   ===================================================================== */

/* The signed-in area: centered across the page, starting near the top.
   It can be as wide as the window (up to 1400px on very big screens),
   so the shelf can fit more binders across when there's room. */
.shelf-area {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* "Signed in as …" above the binders (Sign out is in the footer) */
.account-line {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

/*
  The shelf: a grid that fits as many binders across as the window allows.
  - --tile-width is each binder's width, and --gap-x / --gap-y the space
    between them. Smaller windows and phones use smaller sizes (see the
    @media rules just below), so the number across changes to fit.
  - "repeat(auto-fit, …)" makes as many columns as fit across the shelf.
    "auto-fit" also drops the empty columns when there aren't enough
    binders to fill a row, and "justify-content: center" then centers the
    binders that are there. So a few binders sit in the middle, and each new
    one widens the row outward until it's full and a new row starts.
  Binders fill in left to right, top to bottom.
*/
.binder-shelf {
  --tile-width: 150px;
  --gap-x: 40px;
  --gap-y: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--tile-width));
  justify-content: center;
  gap: var(--gap-y) var(--gap-x);
  margin-top: 28px;
  /* Dragging binders shouldn't highlight (select) text on the shelf */
  user-select: none;
  -webkit-user-select: none;
}

/* Medium windows and tablets: slightly smaller binders and gaps */
@media (max-width: 900px) {
  .binder-shelf { --tile-width: 130px; --gap-x: 28px; --gap-y: 28px; }
}

/* Phones: small binders and gaps, so three fit across a normal phone
   (and two on the narrowest ones) */
@media (max-width: 560px) {
  .binder-shelf { --tile-width: 100px; --gap-x: 14px; --gap-y: 22px; }
}

/* A message under the shelf (e.g. "Loading your binders…") */
.shelf-message {
  min-height: 1.4em;
  margin: 24px 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}
.shelf-message.error { color: var(--error); }

/*
  One spot on the shelf: a closed binder with a caption under it. It's a
  link (to open that binder) or, for the "+" binder, a button. Both are
  reset here to look the same: no underline, no button box.
*/
.binder-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  font: inherit;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  /* On iPhones, a long press on a link normally pops up a preview; a long
     press picks the binder up instead, so turn that preview off */
  -webkit-touch-callout: none;
}
.binder-tile:disabled { cursor: progress; opacity: 0.6; }

/*
  The closed binder, seen from the front: a cover a little taller than
  wide, with square corners on the spine side (left) and rounded corners
  on the opening side (right), like a real binder.
  A faint diagonal gradient (light, then the base color, then dark) gives
  the cover a soft sheen. The three shades come from the cover's color
  class (".cover-black", ".cover-gold" etc., in binder-dialog.css, which
  the card finder page shares).
*/
.closed-binder {
  position: relative;
  display: block;                 /* a full-size box wherever it's placed (it's a <span>) */
  width: 100%;
  aspect-ratio: 10 / 12;
  border: 1px solid var(--cover-edge);
  border-radius: 4px 12px 12px 4px;
  background: linear-gradient(135deg, var(--cover-light) 0%, var(--cover-base) 55%, var(--cover-dark) 100%);
  box-shadow: var(--binder-shadow);
  transition: transform 0.3s cubic-bezier(0.34, 1.6, 0.64, 1), box-shadow 0.3s ease;
}

/* Label colors: light text on the dark covers (the starting values here),
   dark text on the light covers (white, gold, light gray and pale custom
   colors: applyCoverColor in binder-dialog.js gives those "light-cover") */
.closed-binder {
  --cover-text: #e9e5dc;
  --cover-label-line: rgba(255, 255, 255, 0.16);
  --cover-label-fill: rgba(255, 255, 255, 0.05);
}
.closed-binder.light-cover {
  --cover-text: #24211c;
  --cover-label-line: rgba(0, 0, 0, 0.28);
  --cover-label-fill: rgba(255, 255, 255, 0.35);
}

/*
  The spine along the left edge: a darker strip with a soft groove where
  the cover bends. "::before" draws it without needing more HTML.
  It's made of see-through blacks and whites laid over the cover, so it
  works on every cover color: a darker band of whatever color the cover is.
*/
.closed-binder::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.55) 80%, rgba(255, 255, 255, 0.08));
  box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.6);
}

/*
  The label window on the front of the cover, with the binder's name in
  it, like the clear pocket on a real binder that you slide a label into.
*/
.cover-label {
  position: absolute;
  top: 9%;                        /* near the top, leaving the center for the color symbol */
  left: 22%;
  right: 7%;
  display: block;
  padding: 10px 4px;
  line-height: 1.2;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  color: var(--cover-text);
  border: 1px solid var(--cover-label-line);
  border-radius: 3px;
  background: var(--cover-label-fill);
  /* The name always stays on ONE line ("nowrap"). Names are limited to
     12 characters, which fit on phones too. If a name of extra-wide
     letters (like "WWW") doesn't fit, landing.js shrinks its text a little
     (see fitCoverLabels); if it STILL doesn't fit at the smallest size,
     it ends in "…" ("text-overflow: ellipsis") instead of wrapping. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
  The binder's cover symbol (any symbol in MANA_COLORS: a color, two colors,
  colorless or planeswalker),
  in the center of the cover. The left position skips the spine (15%), so
  the symbol is centered on the front of the cover; "top: 50%" with the
  "translateY(-50%)" pull-back centers it top to bottom. The glow and drop
  shadow help the black symbol stand out on the black cover.
*/
.cover-symbol {
  position: absolute;
  top: 50%;
  left: calc(15% + (85% - 36%) / 2);
  width: 36%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

/* The white "+" on the new-binder spot, centered on the cover (the same
   thin-then-bold "+" as the binder pockets) */
.cover-plus {
  position: absolute;
  inset: 0 0 0 15%;               /* leave out the spine, so it looks centered on the cover */
  display: grid;
  place-items: center;
  font-size: 3.2rem;
  font-weight: 300;
  line-height: 1;
  color: #ffffff;
}

/* The caption under each binder: its card count, or "New binder" */
.tile-caption {
  font-size: 0.85rem;
  color: var(--muted);
}

/*
  The holder for one binder and its download button (landing.js puts them
  together, since a button can't go inside the binder's link).
  "position: relative" lets the button be placed against the holder's
  edges; the binder itself still fills the holder exactly as before.
*/
.binder-slot { position: relative; }

/*
  The small download button: a round down arrow at the right edge, on the
  same line as the card count. It's placed on top ("absolute") rather than
  beside the count, so the count stays centered under the binder.
  It's quiet (muted color) until the mouse is over it.
*/
.binder-download {
  position: absolute;
  right: 0;
  bottom: -3px;             /* centers it on the card count's line */
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
}
.binder-download svg { width: 14px; height: 14px; }
.binder-download:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}
.binder-download:disabled { opacity: 0.5; cursor: progress; }

/* While a binder is being dragged, its download button fades with it */
.binder-slot:has(.drag-source) .binder-download { opacity: 0.3; }

/*
  Hovering (or reaching with the Tab key): the binder lifts a little with a
  springy bounce and a bigger shadow, and the "+" turns bold.
  "(hover: hover)" limits the lift to devices with a mouse.
*/
@media (hover: hover) {
  .binder-tile:hover .closed-binder {
    transform: translateY(-6px);
    box-shadow: var(--binder-shadow-lift);
  }
}
.binder-tile:focus-visible .closed-binder {
  transform: translateY(-6px);
  box-shadow: var(--binder-shadow-lift);
}
/* The new-binder "+" turns bold and orange, like the "+" in the binder
   pockets. The cover is always black, so it uses the bright orange (dark
   mode's accent) in both themes; the darker light-mode orange would be
   hard to see. (Centered, so getting bolder doesn't move anything.) */
.binder-tile:hover .cover-plus,
.binder-tile:focus-visible .cover-plus {
  font-weight: 800;
  color: #e38a5c;
}

/* People who turn on "reduce motion" get no lift */
@media (prefers-reduced-motion: reduce) {
  .closed-binder { transition: none; }
  .binder-tile:hover .closed-binder,
  .binder-tile:focus-visible .closed-binder { transform: none; }
}

/* Phones: smaller cover text to suit the smaller binders (the shelf's
   own phone sizes are with the shelf, above). (The windows' phone sizes
   are in binder-dialog.css.) */
@media (max-width: 560px) {
  .cover-label { font-size: 0.7rem; padding: 4px; }
  .cover-plus { font-size: 2.6rem; }
}

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

/* =====================================================================
   FOOTER: LINKS TO EVERY PAGE  (same look as the other pages)
   ===================================================================== */

/*
  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, 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
   nothing ends up hidden behind it. The middle of the page fills the rest. */
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 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) {
  /* 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; }
/* =====================================================================
   DRAGGING BINDERS (see DRAGGING BINDERS in landing.js)
   ===================================================================== */

/* The binder being dragged OUT of its spot fades */
.binder-tile.drag-source { opacity: 0.3; }

/*
  The spot the binder would move INTO: a dashed accent-colored outline
  around that binder's cover.
*/
.binder-tile.drop-target .closed-binder {
  outline: 2px dashed var(--accent);
  outline-offset: 5px;
}

/*
  The floating copy of the binder that follows the mouse or finger.
  "position: fixed" places it relative to the window; landing.js moves it
  with "transform". It ignores the pointer, so the script can see what's
  underneath it. z-index 1000 keeps it above everything.
*/
.binder-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
  transition: opacity 0.15s ease;
  will-change: transform;    /* hint to the browser: this moves a lot */
}
.binder-ghost .closed-binder { box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55); }

/* Over the edit or delete circle: the floating binder fades so the circle
   shows through it */
.binder-ghost.over-zone { opacity: 0.35; }

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

/*
  The two drop circles (edit at the top, delete at the bottom). They're
  pinned to the window ("fixed"), centered across it with left: 50% and a
  translate back by half their width, and hidden (display: none) until a
  binder is being dragged.
*/
.drop-zone {
  position: fixed;
  left: 50%;
  z-index: 900;
  display: none;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
  transition: transform 0.15s ease, background-color 0.15s ease;
  pointer-events: none;
}
.drop-zone svg { width: 30px; height: 30px; }

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

/* The edit circle: at the top of the page, in the empty middle of the top
   bar (between the title and the light/dark switch), in the accent color
   with a pencil */
.edit-zone {
  top: 4px;
  background: var(--accent);
}

/* The delete circle: at the bottom middle, just above the footer links
   (the footer is 43px tall, plus a 16px gap), red with an X */
.delete-zone {
  bottom: 59px;
  background: var(--danger);
}

/* A binder is over a circle: grow it and brighten it, so it's clear that
   letting go here will edit or delete */
.edit-zone.active {
  transform: translateX(-50%) scale(1.25);
  filter: brightness(1.15);
}
.delete-zone.active {
  background: var(--danger-bright);
  transform: translateX(-50%) scale(1.25);
}

/* =====================================================================
   THE DELETE WINDOW (extra pieces; the windows' shared look is in
   binder-dialog.css)
   ===================================================================== */

/* The Delete window's buttons show in normal order (No, then Yes) */
.dialog-buttons.normal-order {
  flex-direction: row;
  justify-content: flex-end;
}

/* "Yes, delete": red, since it removes something */
.dialog-button.danger {
  color: #ffffff;
  background: var(--danger);
  border-color: var(--danger);
}
.dialog-button.danger:hover { background: var(--danger-bright); }

/* =====================================================================
   LINKS TURN BOLD WHEN THE MOUSE IS OVER THEM
   (the same idea is at the end of style.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: "Skip login", the footer links (not the page
   you're on, which isn't a link) and Sign out / Sign in with Google.
   (The Help page uses these footer rules too.)
   ===================================================================== */
.skip-login-button:hover,
.go-to-binders 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 landing.js)
   ===================================================================== */

/*
  The key guide: a small dark pill pinned to the bottom middle of the
  window, just above the footer (the top is taken by the "Signed in as"
  line), listing the keys that work right now (the same look as on the
  binder pages). It only shows while the keyboard is on the
  shelf (landing.js takes away "hidden"). "pointer-events: none" lets
  clicks pass through it, and "nowrap" + "ellipsis" keep it to one line.
*/
.keyboard-hint {
  position: fixed;
  bottom: 56px;
  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 #e38a5c;
  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; }

/* The binder the keyboard is on: an accent-colored outline around its
   cover (rather than around the whole spot with its caption), matching
   the lift it gets */
.binder-tile:focus-visible { outline: none; }
.binder-tile:focus-visible .closed-binder {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ...except on the spot a binder is being moved to with the keyboard:
   there it keeps the dashed "goes here" outline, like dragging */
.binder-tile.drop-target:focus-visible .closed-binder {
  outline: 2px dashed var(--accent);
  outline-offset: 5px;
}

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

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