/* /vintage-legality -- the Vintage B&R list on any date since 1994.
   Three stacked controls: a count-over-time area chart that doubles as the
   scrubber, a zoomable vis-timeline rail, then the state panel. */

.vl { --vl-gold: #b8860b;
      /* bright enough to read as a highlight on a dark page: the darker
         material greens and reds just look muddy here */
      --vl-add: #43d16a; --vl-add-dim: rgba(67,209,106,.22);
      --vl-rem: #ff5a52; --vl-rem-dim: rgba(255,90,82,.20);
      --vl-line: rgba(128,128,128,.28); }

/* ---------- chart scrubber ---------- */
.vl-chart-wrap { position: relative; margin: 0 0 .25rem; }
.vl-chart { display: block; width: 100%; height: auto; touch-action: none;
            cursor: ew-resize; overflow: visible; }
.vl-area { fill: var(--vl-gold); fill-opacity: .18; }
.vl-line { fill: none; stroke: var(--vl-gold); stroke-width: 2;
           stroke-linejoin: round; }
.vl-axis { stroke: var(--vl-line); stroke-width: 1; }
.vl-axis-text { font-size: 10px; fill: currentColor; opacity: .55; }
.vl-grid { stroke: var(--vl-line); stroke-width: 1; stroke-dasharray: 2 3; }
.vl-head { stroke: var(--vl-gold); stroke-width: 2; }
.vl-head-dot { fill: var(--vl-gold); stroke: var(--vl-bg, #fff); stroke-width: 2;
               transition: transform .25s cubic-bezier(.4,0,.2,1); }
.vl-pt { fill: var(--vl-gold); opacity: 0; cursor: pointer; }
.vl-pt:hover { opacity: .9; }
.vl-chart-hint { font-size: .75rem; opacity: .6; margin: 0 0 .75rem; }

/* action ticks under the axis */
.vl-tick { cursor: pointer; }
.vl-tick-restrict   { fill: #c9a227; }
.vl-tick-unrestrict { fill: #c9a227; fill-opacity: .4; }
.vl-tick-ban        { fill: #c0392b; }
.vl-tick-unban      { fill: #c0392b; fill-opacity: .4; }
.vl-tick:hover      { fill-opacity: 1; }

/* the rail is now an optional panel, not a second control */
.vl-rail-wrap { margin: 0 0 1.5rem; font-size: .9rem; }
.vl-rail-wrap > summary { cursor: pointer; opacity: .8; padding: .3rem 0; }
.vl-rail-wrap[open] > summary { margin-bottom: .5rem; }

.vl-controls { display: flex; gap: .5rem; align-items: center;
               flex-wrap: wrap; margin-bottom: 1rem; }
.vl-btn { font: inherit; font-size: .85rem; padding: .3rem .8rem; cursor: pointer;
          background: none; color: inherit; border: 1px solid currentColor;
          border-radius: 4px; }
.vl-btn:hover { background: rgba(184,134,11,.14); }
.vl-btn[aria-pressed="true"] { background: var(--vl-gold); color: #fff;
                               border-color: var(--vl-gold); }
.vl-scrub { flex: 1 1 12rem; min-width: 8rem; }

/* ---------- vis-timeline rail ---------- */
.vl-rail { margin: 0; border: 1px solid var(--vl-line); border-radius: 6px; }
.vl-rail .vis-item { border-width: 1px; font-size: .72rem; }
.vl-rail .vis-item.vl-i-restrict   { background: #8d6e1f; border-color: #6d5418;
                                     color: #fff; }
.vl-rail .vis-item.vl-i-unrestrict { background: transparent; border-color: #8d6e1f;
                                     color: inherit; }
.vl-rail .vis-item.vl-i-ban        { background: #8e2b2b; border-color: #6d2121;
                                     color: #fff; }
.vl-rail .vis-item.vl-i-unban      { background: transparent; border-color: #8e2b2b;
                                     color: inherit; }
.vl-rail .vis-item.vis-selected    { box-shadow: 0 0 0 2px var(--vl-gold); }
.vl-rail .vis-time-axis .vis-text { font-size: .7rem; opacity: .75; color: inherit; }
.vl-rail-fallback { font-size: .8rem; opacity: .7; }

/* vis-timeline ships light chrome; the site is dark, so restate the pieces
   that would otherwise render as near-white panels and hairlines. */
.vl-rail .vis-timeline { border: 0; font-family: inherit; color: inherit; }
.vl-rail .vis-panel.vis-left,
.vl-rail .vis-panel.vis-center,
.vl-rail .vis-panel.vis-top,
.vl-rail .vis-panel.vis-bottom { border-color: var(--vl-line); }
.vl-rail .vis-labelset .vis-label {
  color: inherit; opacity: .8; font-size: .74rem;
  border-bottom: 1px solid var(--vl-line);
  display: flex; align-items: center;
}
.vl-rail .vis-labelset .vis-label .vis-inner { padding: .25rem .6rem; }
.vl-rail .vis-foreground .vis-group { border-bottom: 1px solid var(--vl-line); }
.vl-rail .vis-time-axis .vis-grid.vis-minor { border-color: var(--vl-line); }
.vl-rail .vis-time-axis .vis-grid.vis-major { border-color: var(--vl-line); }
.vl-rail .vis-current-time { background-color: var(--vl-gold); }
.vl-rail .vis-item .vis-item-content { padding: 2px 6px; }
.vl-rail .vis-tooltip {
  background: #222; color: #eee; border: 1px solid var(--vl-line);
  border-radius: 5px; font-family: inherit; font-size: .78rem;
  white-space: pre-line; max-width: 22rem; box-shadow: 0 4px 14px rgba(0,0,0,.4);
}

/* ---------- state panel ---------- */
.vl-head-row { display: flex; align-items: baseline; gap: .75rem 1.25rem;
               /* The row must NOT wrap. A long era name made the meta block
                  demand its full width, which bumped it to a second line and
                  made the header 35px taller on six announcements -- walking
                  the lids down the page. The meta shrinks and ellipses
                  instead. */
               flex-wrap: nowrap;
               /* Pinned. The basis note wraps on some announcements and the
                  era line is absent on others; a header that changes height
                  walks everything below it up and down as you step through,
                  which is most of what made playback feel jumpy. */
               min-height: 4.4rem; }

/* era and dates pushed to the right of the heading. Pinned: an era name or a
   date line that wraps changes the header height, and that walks everything
   below it -- the same bug as before, reintroduced by moving this block. */
.vl-head-meta {
  margin-left: auto; text-align: right;
  flex: 0 1 auto; min-width: 0;        /* allowed to shrink, not to wrap the row */
  min-height: 2.6rem;
}
.vl-asof { flex: 0 0 auto; }
.vl-head-meta .vl-era,
.vl-head-meta .vl-basis {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 700px) {
  .vl-head-row { flex-wrap: wrap; }
  .vl-head-meta { min-height: 3.8rem; }
  .vl-head-meta .vl-era, .vl-head-meta .vl-basis { white-space: normal; }
}
@media (max-width: 700px) {
  .vl-head-meta { margin-left: 0; text-align: left; }
}
.vl-asof { font-size: 1.6rem; font-weight: 700; margin: 0; line-height: 1.1; }
.vl-asof-n {
  font-variant-numeric: tabular-nums; font-size: 2.4rem; font-weight: 700;
  color: var(--vl-gold); line-height: 1;
}
.vl-asof-n small { font-size: .8rem; font-weight: 400; opacity: .7;
                   color: inherit; display: block; }
.vl-basis { font-size: .8rem; opacity: .7; margin: .1rem 0 0; }
.vl-sec { margin: 1.25rem 0 .5rem; font-size: .72rem; letter-spacing: .1em;
          text-transform: uppercase; opacity: .6;
          border-top: 1px solid var(--vl-line); padding-top: .55rem; }

/* delta: card art for what this announcement changed */
/* Fixed height: during playback a strip that grows and shrinks shoves the
   list up and down and makes it impossible to read. */
.vl-delta { display: flex; gap: .75rem; flex-wrap: wrap; margin: .5rem 0 0;
            min-height: 12.5rem; align-items: flex-start; }
.vl-nochange { opacity: .55; font-style: italic; font-size: .9rem;
               align-self: center; }
.vl-dcard { width: 8.5rem; animation: vl-pop .32s cubic-bezier(.34,1.3,.64,1) both; }
.vl-dcard img { width: 100%; border-radius: 6px; display: block;
                border: 2px solid transparent;
                background: rgba(128,128,128,.12); }
.vl-dcard.is-add img { border-color: var(--vl-add);
                       box-shadow: 0 0 16px rgba(67,209,106,.45); }
.vl-dcard.is-rem img { border-color: var(--vl-rem);
                       box-shadow: 0 0 16px rgba(255,90,82,.4); }
.vl-dcard figcaption { font-size: .72rem; margin-top: .25rem; line-height: 1.25; }
.vl-dcard { position: relative; }
.vl-dcard.is-rem img { filter: grayscale(.9) brightness(.5); }
.vl-dcard.is-rem::after {
  content: "\2715"; position: absolute; top: 0; left: 0; right: 0;
  height: 204px; display: flex; align-items: center; justify-content: center;
  font-size: 4.5rem; font-weight: 900; color: var(--vl-rem);
  text-shadow: 0 0 14px rgba(0,0,0,.8); pointer-events: none; opacity: .92;
}
.vl-dcard.is-rem figcaption { text-decoration: line-through; opacity: .75; }
.vl-dtag { display: block; font-weight: 800; font-size: .74rem;
           letter-spacing: .07em; text-transform: uppercase; }
.vl-dcard.is-add .vl-dtag { color: var(--vl-add); }
.vl-dcard.is-rem .vl-dtag { color: var(--vl-rem); }
@keyframes vl-pop {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* the data table, collapsed by default */
.vl-table-wrap { margin: 1.5rem 0; }
.vl-table-wrap > summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
.vl-table { width: 100%; border-collapse: collapse; font-size: .84rem;
            margin-top: .5rem; }
.vl-table th, .vl-table td { text-align: left; padding: .3rem .5rem;
                             border-bottom: 1px solid var(--vl-line);
                             vertical-align: top; }
.vl-table th { font-size: .72rem; text-transform: uppercase;
               letter-spacing: .08em; opacity: .65; }
.vl-td-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vl-td-basis { white-space: nowrap; opacity: .7; font-size: .8em; }
.vl-td-a { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
           padding: 0 .3em; border-radius: 3px; opacity: .85; }
.vl-td-restrict   { background: rgba(201,162,39,.3); }
.vl-td-unrestrict { background: rgba(201,162,39,.12); }
.vl-td-ban        { background: rgba(192,57,43,.35); }
.vl-td-unban      { background: rgba(192,57,43,.14); }

/* ---- the B&R list as card art ---------------------------------------- */
.vl-grid {
  display: grid; gap: .55rem; margin: .6rem 0 0; padding: 0; list-style: none;
  /* Big enough to read, small enough that fifty-two cards do not run to six
     rows. At 92px the grid alone was 958px tall and the page 2579px. */
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: .4rem;
}
@media (min-width: 992px) {
  .vl-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}
@media (min-width: 1500px) {
  .vl-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}
.vl-cell { position: relative; }
.vl-cell a { display: block; text-decoration: none; color: inherit; }
.vl-cell img {
  width: 100%; height: auto; display: block; border-radius: 5%;
  border: 2px solid transparent; background: rgba(128,128,128,.14);
  transition: transform .18s, box-shadow .18s;
}
.vl-cell a:hover img { transform: translateY(-4px) scale(1.5);
                       position: relative; z-index: 50; }
.vl-cell a:hover { position: relative; z-index: 50; }
.vl-cell-name {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.vl-noart {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 146 / 204; font-size: .62rem; padding: .3rem;
  border: 2px dashed var(--vl-line); border-radius: 5%;
}

/* ADDED this announcement: green ring and glow */
.vl-cell.is-add img {
  border-color: var(--vl-add);
  box-shadow: 0 0 0 2px var(--vl-add), 0 0 14px rgba(67,209,106,.75);
}
.vl-cell.is-add .vl-cell-name { color: var(--vl-add); opacity: 1; font-weight: 700; }
.vl-cell.is-add { animation: vl-pulse .8s cubic-bezier(.3,.9,.4,1) 1; }

/* REMOVED this announcement: greyed, red ring, red cross over the art */
.vl-cell.is-gone img {
  filter: grayscale(.95) brightness(.45);
  border-color: var(--vl-rem);
  box-shadow: 0 0 0 2px var(--vl-rem), 0 0 18px rgba(255,90,82,.5);
}
.vl-cell.is-gone::after {
  content: "\2715";
  position: absolute; left: 0; right: 0; top: 0;
  aspect-ratio: 146 / 204;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem; font-weight: 900; color: var(--vl-rem);
  text-shadow: 0 0 9px rgba(0,0,0,.95); pointer-events: none;
}
.vl-cell.is-gone .vl-cell-name {
  color: var(--vl-rem); opacity: 1; text-decoration: line-through;
}
.vl-cell.is-gone { animation: vl-pulse .8s cubic-bezier(.3,.9,.4,1) 1; }

@media (prefers-reduced-motion: reduce) {
  .vl-cell.is-add, .vl-cell.is-gone { animation: none; }
  .vl-cell a:hover img { transform: none; }
}

/* the one-line change summary above the grids */
.vl-chg { margin: .4rem 0 0; font-size: .9rem; display: flex;
          flex-wrap: wrap; gap: .3rem .75rem; }
.vl-chg-a { color: var(--vl-add); font-weight: 700; }
.vl-chg-r { color: var(--vl-rem); font-weight: 700; }
.vl-sec-n { float: right; opacity: .8; font-weight: 700; }

/* the list itself, animated via FLIP */
.vl-cards { display: flex; flex-wrap: wrap; gap: .3rem .5rem;
            margin: 0; padding: 0; list-style: none; }
.vl-cards li {
  font-size: .92rem; padding: .12rem .5rem; border-radius: 3px;
  background: rgba(128,128,128,.1); transition: background .3s, color .3s;
}
/* This announcement's changes, marked in place in the full list. They have to
   be findable at a glance among fifty, and during playback the eye needs to be
   pulled to them: bright fill, a ring, a glow, and a brief pulse. */
.vl-cards li.vl-new,
.vl-cards li.vl-gone {
  padding: .18rem .55rem .18rem .42rem;
  animation: vl-pulse .8s cubic-bezier(.3,.9,.4,1) 1;
}
.vl-cards li.vl-new {
  background: var(--vl-add-dim); font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--vl-add), 0 0 12px rgba(67,209,106,.5);
}
.vl-cards li.vl-new a { color: var(--vl-add); }
.vl-cards li.vl-gone {
  background: var(--vl-rem-dim);
  box-shadow: inset 0 0 0 2px var(--vl-rem), 0 0 12px rgba(255,90,82,.45);
}
.vl-cards li.vl-gone a {
  text-decoration: line-through; text-decoration-thickness: 2px;
  color: var(--vl-rem); opacity: .95;
}
.vl-mark {
  display: inline-block; font-weight: 900; margin-right: .35em;
  font-size: 1.05em; line-height: 1;
}
.vl-x    { color: var(--vl-rem); }
.vl-plus { color: var(--vl-add); }

@keyframes vl-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .vl-cards li.vl-new, .vl-cards li.vl-gone { animation: none; }
}
.vl-cards li a { text-decoration: none; }
.vl-flip { transition: transform .32s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .vl-flip, .vl-head-dot { transition: none; }
  .vl-dcard { animation: none; }
}

.vl-banned { font-size: .92rem; }

/* class bans sit with the banned list, not behind a toggle */
.vl-classban { list-style: none; margin: .6rem 0 0; padding: 0;
               font-size: .85rem; }
.vl-classban li { margin: .3rem 0; opacity: .9; }
.vl-classban-n {
  display: inline-block; min-width: 1.9rem; text-align: center;
  font-weight: 700; font-size: .78rem; padding: .05rem .35rem;
  border-radius: 3px; background: var(--vl-rem-dim);
  color: var(--vl-rem); margin-right: .4em;
}
.vl-cats, .vl-pool-note { margin-top: .6rem; font-size: .84rem; }
.vl-cats summary, .vl-pool-note summary { cursor: pointer; opacity: .8; }
.vl-pool {
  display: inline-block; margin-top: 1rem; font-size: .85rem;
  padding: .4rem .8rem; border: 1px solid var(--vl-gold);
  border-radius: 4px; text-decoration: none; color: inherit;
}
.vl-pool:hover { background: rgba(184,134,11,.14); text-decoration: none; }
.vl-src { margin-top: 1rem; font-size: .76rem; opacity: .7; }
.vl-dispute { margin-top: .6rem; font-size: .78rem; padding: .5rem .65rem;
              border-left: 3px solid var(--vl-gold);
              background: rgba(184,134,11,.08); }
.vl-flag { display: inline-block; font-size: .68rem; padding: 0 .35em;
           margin-left: .35em; border: 1px solid currentColor;
           border-radius: 3px; opacity: .7; vertical-align: middle; }

/* ---------- per-card history ---------- */
.vl-hist { position: fixed; inset: 0; z-index: 1070; display: none;
           align-items: center; justify-content: center; padding: 1rem;
           background: rgba(0,0,0,.55); }
.vl-hist.is-open { display: flex; animation: vl-fade .18s both; }
@keyframes vl-fade { from { opacity: 0 } to { opacity: 1 } }
.vl-hist-box {
  /* Explicit colours, not inherit. The box defaulted to a white background
     while the text inherited the site's dark-theme light grey, so in a
     light-scheme browser the whole modal was white on white -- card name,
     type line and the entire history table invisible. The site is dark; the
     modal is dark. */
  background: #232323; color: #ededed;
               max-width: 36rem; width: 100%; max-height: 82vh; overflow-y: auto;
               border-radius: 8px; padding: 1.25rem 1.5rem; }
.vl-hist-box h3 { margin-top: 0; }
.vl-hist-box table { width: 100%; font-size: .9rem; }
.vl-hist-box td { padding: .2rem .4rem;
                  border-bottom: 1px solid rgba(255,255,255,.14); }
.vl-hist-box a { color: #7fb8ff; }
.vl-hist-art { float: right; width: 9rem; margin: 0 0 .75rem 1rem;
               border-radius: 6px; }
.vl-hist-close { float: right; background: none; border: 0; font-size: 1.5rem;
                 line-height: 1; cursor: pointer; color: inherit; }
.vl-noscript { padding: .75rem 1rem; border-left: 3px solid #b8860b;
               background: rgba(184,134,11,.08); font-size: .9rem; }

@media (prefers-color-scheme: dark) {
  .vl { --vl-bg: #1d1d1d; }
}
@media (max-width: 600px) {
  .vl-dcard { width: 6.5rem; }
  .vl-asof-n { font-size: 1.9rem; }
}


/* ---- shoebox view ------------------------------------------------------
   Two lids with the cards thrown in face up. Scatter is deterministic (see
   jitter() in the JS), so a card keeps its spot and the pile does not
   reshuffle every time you step. */
.vl-lid {
  position: relative; margin: 1rem 0 1.5rem; border-radius: 8px;
  /* cards are kept inside by containCards(); clipping here only sliced the
     ones that overhung, which looked like damage rather than a full lid */
  overflow: hidden;
  /* corrugated cardboard */
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.05) 0 3px, rgba(255,255,255,.035) 3px 7px),
    linear-gradient(165deg, #a98b5e 0%, #8d6e46 55%, #70552f 100%);
  border: 9px solid #6d5230;
  border-top-color: #7d5f39; border-bottom-color: #5b4427;
  box-shadow: inset 0 0 48px rgba(0,0,0,.55),
              inset 0 3px 0 rgba(255,255,255,.1),
              0 6px 18px rgba(0,0,0,.4);
}
.vl-lid-label {
  position: absolute; top: .45rem; left: .7rem; z-index: 1000;
  font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #f0e2c8;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  background: rgba(0,0,0,.3); padding: .1rem .45rem; border-radius: 3px;
}
.vl-lid-empty { position: absolute; inset: 0; display: flex;
                align-items: center; justify-content: center;
                color: #e8dcc4; opacity: .55; }

.vl-thrown {
  position: absolute; display: block; text-decoration: none;
  transform: rotate(var(--rot)); transform-origin: 50% 50%;
  transition: filter .18s ease;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.6));
}
.vl-thrown img {
  width: 100%; height: auto; display: block; border-radius: 6%;
  border: 2px solid transparent; transition: border-color .18s;
  /* so the card occupies its full height before the lazy art arrives;
     without this the lid lays out around zero-height cards */
  aspect-ratio: 146 / 204;
  background: rgba(128,128,128,.14);
}
/* Hover must not change the card's GEOMETRY. Scaling it up pushed cards near
   the rim outside the lid, where the lid's overflow sliced them in half. The
   full-size image is already one hover away through autocard, so this only
   lifts the card to the top of the pile and brightens it. */
.vl-thrown:hover {
  z-index: 3000 !important;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.8)) brightness(1.18);
}
.vl-thrown:hover img { border-color: var(--vl-gold); }

/* thrown in on this announcement */
.vl-thrown.is-add img {
  box-shadow: 0 0 0 2px var(--vl-add), 0 0 20px rgba(67,209,106,.75);
}
.vl-thrown.is-add { animation: vl-toss .62s cubic-bezier(.22,1.1,.36,1) 1; }
@keyframes vl-toss {
  0%   { transform: translate(60px, -260px) rotate(-180deg) scale(1.5);
         opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: rotate(var(--rot)); opacity: 1; }
}

/* pulled back out on this announcement */
.vl-thrown.is-gone img {
  filter: grayscale(.95) brightness(.5);
  box-shadow: 0 0 0 2px var(--vl-rem), 0 0 20px rgba(255,90,82,.6);
}
.vl-thrown.is-gone { animation: vl-lift .7s ease-out 1 both; }
@keyframes vl-lift {
  0%   { transform: rotate(var(--rot)); }
  100% { transform: translateY(-34px) rotate(var(--rot)) scale(1.08); }
}
.vl-thrown-x {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900; color: var(--vl-rem);
  text-shadow: 0 0 7px rgba(0,0,0,.95); pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .vl-thrown.is-add, .vl-thrown.is-gone { animation: none; }
}

/* set symbols standing in for the kinds of card outside the pool */
.vl-seticon {
  width: 1.05em; height: 1.05em; vertical-align: -.15em; margin-right: .45em;
  /* Scryfall ships these as dark SVGs; invert so they read on a dark page */
  filter: invert(1) brightness(1.4); opacity: .85;
}
.vl-pool-note li { margin: .4rem 0; }

.vl-era { font-size: .82rem; opacity: .8; margin: 0;
          font-style: italic; min-height: 1.2em; }
.vl-noarchive { opacity: .55; }

/* what moved the format between announcements: errata, rules, format changes */
.vl-between { list-style: none; margin: .5rem 0 0; padding: 0;
              font-size: .86rem; }
.vl-between li { margin: .4rem 0; line-height: 1.4; }
.vl-kind {
  display: inline-block; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .06em; padding: .05rem .35rem; border-radius: 3px;
  vertical-align: .08em; font-weight: 700;
}
.vl-kind-errata { background: rgba(140,100,200,.3); color: #c9aaff; }
.vl-kind-rules  { background: rgba(70,150,210,.3);  color: #9ad2f5; }
.vl-kind-format { background: rgba(201,162,39,.3);  color: #e8c86a; }
.vl-kind-banned_restricted { background: rgba(255,90,82,.25); color: #ff9a94; }

/* ---- the chart beside the cards --------------------------------------
   The page asks for the `wide` layout, which gives a full-width article;
   chulapa's default would pin it to about 740px at any screen size. */
.chulapa-wide { max-width: min(1760px, 96vw); }

.vl-split { display: block; }
@media (min-width: 1150px) {
  .vl-split {
    display: grid;
    grid-template-columns: minmax(360px, 0.85fr) minmax(560px, 1.15fr);
    gap: 2rem;
    align-items: start;
  }
  /* the chart and its controls stay in view while the piles scroll */
  .vl-col-controls {
    position: sticky; top: 1rem;
    max-height: calc(100vh - 2rem); overflow-y: auto;
  }
  .vl-col-state { min-width: 0; }
}

/* the source credit sits above everything: the data is his work */
.vl-credit {
  border-left: 3px solid var(--vl-gold);
  background: rgba(184,134,11,.08);
  padding: .7rem .9rem; margin: 0 0 1rem; font-size: .92rem;
}

/* the data is open; say so near the top rather than in a footnote */
.vl-repo {
  font-size: .92rem; margin: 0 0 1rem; padding: .7rem .9rem;
  border-left: 3px solid rgba(128,128,128,.45);
  background: rgba(128,128,128,.09);
}
.vl-repo code { font-size: .92em; }

/* detail about the announcement, in the left column under the controls */
.vl-details { margin-top: 1.25rem; }
.vl-details .vl-sec { margin-top: 1rem; }

/* Reserve the detail column's full height so the block as a whole does not
   move. Its content varies a lot between announcements -- a one-card change
   with no class bans against a twenty-three card restriction with four --
   and that was shifting everything below the app on every step. Only on the
   two-column layout: on a phone the column is in normal flow and reserving
   space would just push the page down. */
@media (min-width: 1150px) {
  .vl-details { min-height: 32rem; }
}

/* The page's own heading. chulapa's header block is skipped (header_type:
   none) because this page is an application, not an article, and the hero
   spent most of the first screen on a title over a splash that does not
   exist here. */
.vl-title { margin: 0 0 .9rem; }
.vl-title h1 {
  font-size: 1.9rem; margin: 0; line-height: 1.15; font-weight: 700;
}
.vl-title p { margin: .15rem 0 0; opacity: .72; font-size: .95rem; }
@media (min-width: 1150px) {
  .vl-title { display: flex; align-items: baseline; gap: .85rem;
              flex-wrap: wrap; }
  .vl-title p { margin: 0; }
}

/* Mana symbols from Scryfall's symbology endpoint. Magic's symbols are the
   property of Wizards of the Coast, used under the Fan Content Policy cited
   in the site footer. */
.vl-mana {
  width: 1em; height: 1em; vertical-align: -.08em;
  margin: 0 .04em; display: inline-block;
}

/* The app comes first and the prose after it, so the heading below the app
   needs the separation a page title would normally get from the header. */
.vl-title { margin-top: .5rem; }

.vl-btn i { margin-right: .35em; }

/* The title sits above the app again, so it needs no extra top margin. */
.vl-title { margin-top: 0; margin-bottom: .7rem; }