/*
 * THE ROWS, and the piles standing on them.
 *
 * THE SHELL holds the height the board reserved for this row and nothing else.
 * The TRAY inside it is the thing with an edge -- and it is a tray on purpose:
 * the same inset, the same hairline and the same corner as every panel in the
 * column beside the board, but RECESSED rather than raised. A card laid on the
 * page and a slot cut into it are one grammar saying two things, which is the
 * distinction wanted here: the column is the scorepad, this is the table.
 *
 * A slot's height and the spacing of the cards in it both come off --pile in
 * base.css, so a row drawn at another size -- a ribbon, and the same ribbon
 * opened -- says that one number and the rest follows.
 */
.trail {
  position: relative;
  --cardw: calc(63px * var(--pile));
  --cardh: calc(86px * var(--pile));
  --pile1: var(--cardh);                          /* a slot holding one card */
}
/*
 * THE FULL WIDTH, AND THE ROW STARTS AT THE LEFT OF IT. Every other block on the
 * page runs edge to edge of the column it is in, and a tray that hugged its own
 * cards and sat in the middle was the one thing on a narrow screen that did not
 * -- two boxes of different widths, centred on nothing in particular.
 *
 * AND THE EMPTY PART IS ON THE RIGHT, which is where it means something: a row
 * is read left to right and grows that way, so the paper past the last pile is
 * the room the night still has. Split either side of centred cards it was paper
 * and nothing else.
 *
 * AND THE TRAY IS THE WIDTH OF THE COLUMN, whatever is standing in it. It used
 * to be max-content, growing with the row it held -- which is how a long row came
 * to hang out over the panel beside the board. The cards scroll inside it now
 * (see base.css), so all four edges of the tray stay where the column is and the
 * one part of a row that is longer than its column is the part that moves.
 */
.trail .tray {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 100%;
  padding: 6px 9px; border-radius: 8px;
  border: 1px solid var(--trayline); background: var(--tray);
  box-shadow: inset 0 1px 3px rgba(60, 50, 30, .09);
}
/*
 * WHOSE ROW IT IS, ON ONE LINE, AT EVERY WIDTH. It was a two-line block held
 * out in the margin by position: absolute, 168px of column reserved for it --
 * which on a desk left three hundred pixels of paper between a name and the row
 * it names, because the slots were centred and the name was not. A plate riding
 * at the head of the line cannot be stranded: it is next to the cards because
 * it is one of them.
 *
 * AND IT STAYS PUT WHEN THE ROW SCROLLS, because it is not in the part that
 * moves: the cards scroll inside the tray and the plate sits beside them, so a
 * row scrolled sideways still says whose it is -- which is the one thing on a
 * row you cannot work out by looking. (It was sticky against the left of the
 * strip when the strip was the scroller.) The z-index is what keeps a fanned
 * card from being drawn over the name.
 */
.trail .thead {
  flex: none; z-index: 12;
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
  padding: 3px 9px 3px 6px; border-radius: 99px;
  background: var(--plate); line-height: 1.25;
  min-height: 24px; margin-top: 1px;
}
/*
 * AND ON A ROW DRAWN FULL SIZE THE PLATE RIDES AT THE TOP OF THE TRAY. The tray
 * is as tall as the deepest pile the rules allow, whatever is standing in it, so
 * a plate centred in that box floated halfway down a row of cards it was level
 * with nothing in. Against the top it is level with the top edge of every card
 * on the row, which is the line the row is read along.
 *
 * A RIBBON KEEPS IT CENTRED: the plate is most of the height of the strip there,
 * so centred and level are the same thing and centred is the steadier of the two.
 */
.trail:not(.ribbon) .thead { align-self: flex-start; }
/* whose row this is, in their own colour and by their chair's number -- the mark
   itself is one object, in base.css; see ROUTE and burglarDot */
/*
 * THE NAME IS WHAT GIVES WAY. It is the one thing here that can be any length --
 * off a network it is whatever somebody typed -- and the chair it belongs to is
 * beside it anyway.
 */
.trail .thead .tname {
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  /* the tray is as wide as what is on it, so the plate needs no cap -- only the
     name does, and a fixed one: a percentage of a box sized by its own contents
     resolves against nothing and collapsed every name to two letters */
  max-width: 160px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.trail .thead .twho, .trail .thead em, .trail .thead .tcarry,
.trail .thead .thand { flex: none; }
/* the chair, beside the name rather than under it */
.trail .thead .twho { font-size: 11px; font-weight: 600; color: var(--dim); }
.trail .thead .twho.away { font-weight: 500; }
.trail .thead .twho i {
  font-style: normal; font-size: 10px; font-weight: 500; color: #b03a30;
}
/* which seat is sitting here, said once and quietly */
.trail .thead em {
  font-style: normal; font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; padding: 1.5px 5px; border-radius: 4px;
}
.trail .thead em.you { color: var(--accent); background: rgba(31, 111, 156, .13); }
.trail .thead em.out { color: #4a7c52; background: rgba(74, 124, 82, .13); }
/* and the other way a night ends, in the red the reveal scores it in */
.trail .thead em.caught { color: #b03a30; background: rgba(176, 58, 48, .13); }
/*
 * THE HAND, UNDER THE NAME OF WHOEVER IS HOLDING IT. One back a card, fanned
 * the way a hand is held rather than laid out the way a row is -- so it reads
 * as cards somebody is holding and never as a step they have taken. Smaller
 * than the cards on the row, and deliberately: what is on the trail happened,
 * and what is in the hand has not.
 *
 * It is the last thing on the plate, which is the one place it fits at both
 * sizes a row is drawn at.
 */
.trail .thead .thand {
  --hand: .24; --step: 8px;
  display: flex; height: calc(86px * var(--hand)); margin-left: 2px;
}
.trail .thead .thand .card {
  flex: none; transform: scale(var(--hand)); transform-origin: top left;
  margin-right: calc(var(--step) - 63px);
  cursor: default; box-shadow: 0 1px 2px rgba(60, 50, 30, .3);
}
/* the last one shows its whole width, having nothing lying over it */
.trail .thead .thand .card:last-child { margin-right: calc(63px * var(--hand) - 63px); }
/*
 * CARRYING IT, and the one thing on this panel that is not public. It wears the
 * gallery's own floor, so the badge, the card it was dealt on and the room it
 * was lifted from are all the same colour.
 */
.trail .thead .tcarry {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(35, 38, 44, .3), 0 1px 2px rgba(60, 50, 30, .25);
}
/*
 * YOUR OWN ROW carries the weight, and it carries it INSIDE its own edge. It
 * used to be marked by a 30px-wide negative margin and a tint that faded out at
 * 46%, so the one row that is yours was the only block on the page hanging past
 * the page's own padding and the mark stopped before it reached any card.
 *
 * AND THE TABLE IS ONE COLOUR. It was washed with the accent first, which is a
 * cold colour laid over a warm one and the recipe for grey -- the row came out a
 * muddy slate belonging to neither. Darkening it instead was no better: a second
 * shade of felt for one row reads as a stain on the first.
 *
 * So the felt is the felt, and everything that says THIS ONE IS YOURS is drawn
 * on top of it: the rule down the left edge, the name and the chip beside it,
 * and the plain fact that it is the row at the near edge of the table. A
 * saturated colour is crisp as a line and muddy as a wash.
 */
.trail.mine .tray { border-left: 3px solid var(--accent); }
.trail.mine .thead { background: var(--plateMine); }
.trail.mine .thead .tname { color: var(--accent); font-size: 13px; }
/* A row you are only reading is quieter, NOT shorter: height comes from the
   pile for every trail alike, or a pile hangs out of its own box. */
.trail.theirs { opacity: .82; }
.trail.theirs .thead .tname { font-weight: 500; }
.trail.theirs .slot.next { --slackx: 9px; }
/*
 * ------------------------------------------------------------- A RIBBON
 *
 * A ROW YOU DO NOT ACT ON, drawn the size it is worth. The burglar across the
 * table keeps their own cards face down all night, so what their row carries is
 * the museum's cards, the specials that answered them and how many steps they
 * have taken -- and every one of those survives being drawn at a third size,
 * while none of them is worth a hundred pixels above the building.
 *
 * STILL A ROW OF SEPARATE PILES, though. They were overlapped like a held hand
 * at first, on the theory that the difference in shape said which of the two you
 * were looking at -- and it read as crammed, which is the one thing a row of
 * cards must not: what the strip is FOR is counting the steps somebody has taken
 * and seeing what the museum spent on each. Size already says it is a ribbon.
 *
 * The arrow between piles does not survive the scale: it is 9px of hairline
 * with a 4px head, drawn in a gap now smaller than the head.
 */
.trail.ribbon { --pile: .38; --lay: 3px; --nlay: 6px; }
.trail.ribbon .tray { padding: 5px 9px; gap: 9px; }
.trail.ribbon .slots { gap: 0 5px; }
.trail.ribbon .slot + .slot::before, .trail.ribbon .slot + .slot::after { display: none; }
/*
 * A ribbon is read by opening it, and that is the whole of what its PILES answer
 * to. Fanning a pile a third of a size high tells nobody anything, and every pile
 * that answered a pointer was one more thing on the board that moved.
 *
 * THE STRIP THEY SIT ON STILL ANSWERS, THOUGH, because a ribbon longer than the
 * column has to be scrollable like any other row -- and with the piles deaf and
 * the box they are in deaf as well there was nothing left on it for a pointer to
 * take hold of: the end of a long ribbon simply could not be reached. Reading a
 * ribbon is fanning nothing and scrolling it is not.
 *
 * And it keeps no room for a fan, having none: the room would be a band of
 * nothing hanging over the building that now takes the pointer.
 */
.trail.ribbon:not(.open) .slots { --fanroom: 0px; pointer-events: auto; }
.trail.ribbon .slot { pointer-events: none; }
.trail.ribbon .thead { cursor: pointer; }
.trail.ribbon .thead .thand { --hand: .17; --step: 5px; }
/*
 * OPENED, THE TRAY LEAVES THE ROW BEHIND. The shell keeps the height the board
 * gave it and the tray lifts out of the flow on top of the building, so reading
 * a row never moves the thing you are reading it against. Every size on it goes
 * back to what a row you act on is drawn at -- it is the same row, asked for at
 * full size. (A phone has no room to lay one over the other and says so in
 * phone.css, where it grows in place instead.)
 */
.trail.ribbon.open {
  --pile: .64; --lay: 6px; --nlay: 15px;
  /* the shell is what has to rise, not only the tray inside it: the building is
     a later sibling, so without a stacking context of its own here the markers
     down the edges of the plan drew straight over an opened row */
  z-index: 40;
}
.trail.ribbon.open .tray {
  /* left and right both pinned, so the opened tray spans the column exactly as
     the closed one did rather than shrinking to the row it is holding */
  position: absolute; left: 0; right: 0; top: 0; z-index: 40;
  height: auto; padding: 6px 9px;
  box-shadow: 0 8px 22px rgba(60, 50, 30, .22), inset 0 1px 3px rgba(60, 50, 30, .09);
}
.trail.ribbon.open .slots { gap: 8px 9px; }
.trail.ribbon.open .slot { pointer-events: auto; }
.trail.ribbon.open .slot + .slot::before,
.trail.ribbon.open .slot + .slot::after { display: block; }
.trail.ribbon.open .thead .thand { --hand: .24; --step: 8px; }

/*
 * A slot is the little pile of cards actually sitting on it, laid in the order
 * they were played: the museum's card first, then a Quiet sneakers over it,
 * then the burglar's own on top. Each is offset down the pile so the one
 * beneath still shows, and hovering fans them apart.
 *
 * They are the same cards the hand draws -- cardFace builds all of them -- at
 * half size, with the words hidden. At this size a name is unreadable anyway,
 * so a card is known by its paint, its glyph and its drawing, which is what
 * the whole deck was designed to allow.
 */
.slots { display: flex; flex-wrap: wrap; gap: 8px 9px; align-items: flex-start; }
/*
 * THE ROOM A FAN IS DRAWN IN IS NOT A THING TO HIT. The cards scroll, and a
 * scroller keeps the room for a fan as padding (see base.css) -- which is a band
 * of the box lying over the building above the row or the panel below it. So the
 * box takes no pointer and the piles in it take it back: what is drawn is what
 * answers. The row is scrolled by the pointer on a card, which is where a
 * pointer over a row is.
 */
.trail .slots { pointer-events: none; }
.trail .slot { pointer-events: auto; }
/*
 * WHERE THE ROW IS CUT OFF, AND THE WAY PAST IT.
 *
 * A row longer than its column ended mid-card at the tray's rim, which is what
 * a card that happens to end there looks like as well. So the cut is drawn: the
 * tray trims the card flush and a hairline says the cut was meant. It shows on
 * whichever side there is more row -- more-l and more-r, set by markEnds in
 * play.js, because what is holding what is not a thing a stylesheet can ask.
 *
 * The box the marks hang off is the one element this needed: the cards scroll,
 * so nothing inside them can stay at the edge, and the tray's own left edge is
 * wherever the nameplate ends rather than where the cards begin.
 */
.trail .rowedge {
  position: relative; flex: 0 1 auto; min-width: 0; pointer-events: none;
  /* As tall as the tray, whatever is standing in it, so the cut is a line down
     the whole panel rather than a line as long as the deepest pile that happens
     to be on the row. The cards keep the middle of it -- they were centred in
     the tray before this box came between them and it. */
  align-self: stretch; display: flex; align-items: center;
}
.trail .rowedge .slots { flex: 0 1 auto; }
/* Above the piles, and above a fanned one: a pile rises to 40 when it is read
   (see .slot.fanned), and a card lifted over the cut would be a card hanging in
   the air past the end of the row -- and a caret a card can cover is a caret
   that is not there when it is wanted. The cut trims whatever is standing at
   the edge, the caret sits on the cut, and nothing gets in front of either. */
.trail .cut {
  position: absolute; top: -6px; bottom: -6px; width: 16px; z-index: 41; display: none;
}
/* the padding is what the line has to cross to reach the tray's own edge, and a
   ribbon's is a pixel less than a row's -- opened, it is a row again */
.trail.ribbon .cut { top: -5px; bottom: -5px; }
.trail.ribbon.open .cut { top: -6px; bottom: -6px; }
.trail .cut.l {
  left: -4px;
  background: linear-gradient(90deg, var(--tray) 0 10px, rgba(120, 106, 80, .34) 10px 11px,
    rgba(120, 106, 80, .1) 11px 13px, transparent 13px);
}
.trail .cut.r {
  right: -4px;
  background: linear-gradient(270deg, var(--tray) 0 10px, rgba(120, 106, 80, .34) 10px 11px,
    rgba(120, 106, 80, .1) 11px 13px, transparent 13px);
}
.rowedge.more-l .cut.l, .rowedge.more-r .cut.r { display: block; }
/*
 * AND THE CARET IS CENTRED ON THE CUT: half of it either side of the line, so
 * the place the row stops and the way past it are one mark instead of two. It is
 * the one way to the end of a long row that says it is there -- a wheel over the
 * cards does it too (see rowWheel), and a wheel says nothing about itself.
 */
.trail .rstep {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 42;
  display: none; place-items: center; pointer-events: auto;
  width: 17px; height: 26px; padding: 0; border-radius: 4px;
  border: 1px solid var(--trayline); background: var(--plate); color: var(--dim);
  font: 600 12px/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 1px 2px rgba(60, 50, 30, .2);
}
.trail .rstep.l { left: -2px; }
.trail .rstep.r { right: -2px; }
.rowedge.more-l .rstep.l, .rowedge.more-r .rstep.r { display: grid; }
@media (hover: hover) {
  .trail .rstep:hover { color: var(--ink); border-color: var(--accent); }
}
.trail .rstep:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A ribbon is opened to be read and the plate is the only thing on it that is
   pressed, so it keeps the cut and loses the carets. Opened, it is a full-size
   row again and gets them back. */
.trail.ribbon:not(.open) .rstep { display: none; }
/*
 * A SLOT IS EXACTLY AS TALL AS THE PILE STANDING IN IT. The cards are
 * positioned absolutely, so nothing about them pushes the box open -- the box
 * has to be told, and one fixed number is only ever right for one pile depth.
 *
 * So every number here is worked out from --pile, the size a card is drawn at
 * on a trail, and there is one place to change it. A card is 63 x 86 at full
 * size; the first sits at the top of the slot, each one --lay below the last,
 * and hovering fans them --fan apart.
 *
 * SLOTS ARE NOT NUMBERED. A row is read as a route, left to right, and which
 * step is the fourth is a thing to count on the rare occasion it matters --
 * not a caption on every pile, above every card, forever.
 */
/* --n is the pile depth less one, set on the slot; --k is a card's layer.
   They were ladders of classes, d2..d5 and k0..k3, and the two ladders were
   different lengths: a pile six deep got a box from d5 and no transform at
   all past k3, so the sixth card sat full-size and unstacked. */
/*
 * A SLOT IS A LITTLE WIDER AND TALLER THAN THE CARDS IN IT, and the extra has
 * to fall on BOTH sides. The cards are absolute at 0,0, so every spare pixel
 * used to collect on the right and underneath: the box a card is dropped on sat
 * up and to the left of the pile it belongs to, which reads as a target that
 * does not line up with the thing it is for.
 *
 * The slack is named so the cards can be moved half of it and the arrow between
 * two piles can follow them down.
 */
.slot {
  position: relative; --slackx: 3px; --slacky: 0px;
  /* the fraction of a full slot this one is drawn at. A step is a step and is
     drawn at 1; a turn thrown away says otherwise below. Every rule that sizes
     or stacks a card on a row multiplies by it -- here, and the fan in
     base.css -- so a cell's size is stated in one place. */
  --scale: 1;
  width: calc(var(--cardw) * var(--scale) + var(--slackx));
  height: calc(var(--pile1) + var(--lay) * var(--scale) * var(--n, 0) + var(--slacky));
}
/*
 * A hairline between the piles with a small head on it, pointing the way the
 * burglar walked: left to right, towards the slot they are about to play. It
 * is meant to be barely there -- the piles are the content, and this is only
 * which way to read them.
 */
.slot + .slot::before {
  content: ''; position: absolute; left: -9px; width: 9px;
  top: calc(var(--slacky) / 2 + var(--pile1) * .55);
  border-top: 1px solid #d2cab8; pointer-events: none;
}
.slot + .slot::after {
  content: ''; position: absolute; left: -7px;
  top: calc(var(--slacky) / 2 + var(--pile1) * .55 - 2.4px);
  width: 4px; height: 4px;
  border-right: 1.4px solid #cdc4b0; border-top: 1.4px solid #cdc4b0;
  transform: rotate(45deg); pointer-events: none;
}
.slot .card {
  position: absolute; left: calc(var(--slackx) / 2); top: calc(var(--slacky) / 2);
  transform-origin: top left;
  cursor: default; box-shadow: 0 1px 3px rgba(60, 50, 30, .3);
}
/*
 * THE STEEL, STILL HOLDING THEM -- see shutInMark. A lock standing in the middle
 * of the slot it took, and gone the moment the card is thrown.
 *
 * The disc is the lock's ground, and the lock is what has to read: white on red
 * is 5.5 wherever the disc is. The disc's own edge is another matter -- it runs
 * from 5.3 against marble to 1.2 against slate -- so on the two dark floors what
 * is seen is the lock and not the disc it stands on. That is the trade for not
 * ringing it in ink.
 */
.slot .shutin {
  position: absolute; inset: 0; z-index: 14; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.slot .shutin i {
  --disc: #b03a30;
  display: flex; align-items: center; justify-content: center;
  width: calc(34px * var(--pile)); height: calc(34px * var(--pile));
  border-radius: 50%; background: var(--disc); color: #fbf3f1;
  box-shadow: 0 1px 3px rgba(60, 50, 30, .35);
}
/*
 * AND THE ONE A GUARD SEES, which is every one of them -- a guard is not paying,
 * so there is nothing for them to be alarmed about. Ink rather than red, and
 * rather than green, though it is the museum's success: green on this board is
 * an exhibit carried OUT, which is the other side's.
 *
 * ...UNTIL THE REVEAL, WHERE THE DISC IS THE FLOOR IT COLLECTED and ink comes to
 * mean the other thing: the steel came down here and there was nothing to take.
 * The paint is set on the element by discPaint in trail.js, which is why only
 * the rims are written here.
 *
 * TWO RIMS, AND THEY FAIL ON DIFFERENT FLOORS. Whatever the disc is painted, it
 * stands on a floor card in one of six paints that a mark of the same family has
 * no separation from. Paper reads on carpet and slate at 6.9 and 6.8 where ink
 * manages 2.0; ink reads on the other four at 5.7 to 13.4 where paper manages
 * 1.0 to 2.4. Between them the worst case is 5.7, and every disc has an edge.
 * They scale with --pile so a ribbon's lock keeps the rims its size can carry.
 */
.slot .shutin.kept i {
  --disc: #23262c;
  box-shadow: 0 0 0 calc(2.5px * var(--pile)) rgba(251, 243, 241, .92),
              0 0 0 calc(4.2px * var(--pile)) rgba(35, 38, 44, .92),
              0 1px 3px rgba(60, 50, 30, .35);
}
.slot .shutin svg { width: 74%; height: 74%; display: block; }
.slot .card .ctitle, .slot .card .cname,
.slot .card .facing { display: none; }
.slot .card {
  transform: translateY(calc(var(--lay) * var(--scale) * var(--k, 0)))
             scale(calc(var(--pile) * var(--scale)));
  z-index: calc(var(--k, 0) + 1);
}
/* straight down, and far enough that every drawing on the pile is clear of the
   card in front of it -- a sideways drift only made the pile harder to read */
.slot.fanned { z-index: 40; }
.slot.fanned .card {
  transform: translateY(calc(var(--fan) * var(--k, 0))) scale(var(--pile));
}
@media (hover: hover) {
  .slot:hover { z-index: 40; }
  .slot:hover .card {
    transform: translateY(calc(var(--fan) * var(--k, 0))) scale(var(--pile));
  }
}

/*
 * The slot about to be played is already spread, because everything on it
 * matters now: what the museum left, a sneakers laid over it, and the space
 * the burglar's own card drops into. Nothing to fan, so hovering does nothing.
 */
.slot.next {
  --slacky: calc(var(--nlay) * .5);
  height: calc(var(--pile1) + var(--nlay) * var(--n, 0) + var(--slacky));
}
.slot.next .card, .slot.next:hover .card, .slot.next.fanned .card {
  transform: translateY(calc(var(--nlay) * var(--k, 0))) scale(var(--pile));
}
.card.ghost {
  background: rgba(255, 255, 255, .5); border-style: dashed; border-color: #b3ab99;
  box-shadow: none;
}
.slot.mine .card.ghost { border-color: var(--accent); }
.slot.pending .card.ghost { border-color: var(--gold); }
/*
 * A card only its owner can see. It lies face down on the table and they are
 * going from memory, so it is drawn face up for them but dashed -- washing it
 * out instead made the one trail they most need to read the hardest one.
 */
.slot .card.own { border-style: dashed; }
/* your partner's newest card: hover to remind yourself what they played */
/*
 * A turn thrown away. The rule is untouched -- no slot was filled, and the
 * next step the burglar takes goes into a fresh, empty one -- but the card the
 * museum had waiting was spent here, and a museum player watching it simply
 * vanish could not tell their shutters from a slot that was never played.
 *
 * So it is drawn, crossed through and hatched over the whole pile: something
 * happened here, and it was not a step. It carries no `data-drop`, which is
 * what keeps it from ever being read -- or dropped on -- as one. A tap does
 * still fan it open, because it is a pile and a pile is read by fanning it:
 * with nothing to drop on, that is the whole of what a tap on it can mean.
 *
 * AND IT IS DRAWN SMALLER THAN A SLOT, which is the whole of the difference.
 * At slot size it was a slot with a cross on it, and a cross says CANCELLED
 * where what is wanted is NOT ONE OF THESE -- so a row read by counting cells
 * gave the wrong answer about how far the tapes reach. They reach three SLOTS,
 * and this is not one: Trail.newSpentTurn stamps no number and Trail.at cannot
 * find it, so the card counts past a cell the eye counts through.
 *
 * WIDTH, and not a drop or a paler ink, because width is the one signal that
 * survives the row being drawn small. Everything here scales by --pile, so a
 * cell at --scale of its neighbours is at --scale of them on a ribbon too --
 * and a ribbon is the row a museum player counts steps on.
 *
 * The cross used to sit in the gap the slot number sat in. There is no gap
 * now, so it sits in the one corner of a card that is always empty: the
 * top-RIGHT. Top-left is a card's own floor glyph and the middle is its
 * drawing, and the drawing is the whole point of a spent slot -- it is what
 * the museum lost here.
 */
.slot.spent {
  --scale: .6;
  /* the room a smaller card leaves in a box still a full card tall, half of it
     above, so the card sits on the line the row is read along and the hairline
     between the piles runs through it rather than over it */
  --sunk: calc(var(--pile1) * (1 - var(--scale)) / 2);
}
.slot.spent .card { opacity: .72; top: calc(var(--slacky) / 2 + var(--sunk)); }
.slot.spent .cross {
  position: absolute; top: var(--sunk); right: calc(var(--slackx) / 2);
  z-index: 9; pointer-events: none;
  font-size: 10px; line-height: 1.1; font-weight: 700; color: rgba(74, 62, 38, .6);
}
/*
 * The hatch belongs to the CARD, not to the slot. As a box of its own it had
 * to guess the card's size, and a guess is what it looked like: 34x48 against
 * a 63x86 card at half scale, so it hung over the right edge and well past the
 * bottom. Riding on the card it cannot be out by anything -- inset 0, the same
 * corner radius, and the same halving, which is why the stripe is written at
 * double the width it is meant to be seen at.
 */
.slot.spent .card::after {
  content: ''; position: absolute; inset: 0; border-radius: 8px; z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(74, 62, 38, 0) 0 10px,
                                        rgba(74, 62, 38, .5) 10px 14px);
}
/* nothing was waiting: an empty box the size of the card that is not there --
   worked out from --pile and --scale like every other box here, and standing
   exactly where that card would have stood */
.slot.spent.bare .hatch {
  position: absolute;
  left: calc(var(--slackx) / 2); top: calc(var(--slacky) / 2 + var(--sunk));
  width: calc(var(--cardw) * var(--scale)); height: calc(var(--cardh) * var(--scale));
  border-radius: 5px; border: 1px dashed #cfc7b5; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(74, 62, 38, 0) 0 5px,
                                        rgba(74, 62, 38, .22) 5px 7px);
}
.trail .empty { color: #a79e8b; font-size: 12px; }
/* the back of a card, for one lying face down */
.card.back > .cemblem {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: rgba(90, 76, 48, .3);
}
.card.back > .cback {
  position: absolute; inset: 14% 16%; border-radius: 5px;
  border: 2px solid rgba(90, 76, 48, .13);
  background: repeating-linear-gradient(135deg, transparent 0 7px,
                                        rgba(90, 76, 48, .07) 7px 14px);
}

.note {
  border-left: 3px solid var(--accent); padding: 6px 10px; background: #eaf2f7;
  border-radius: 0 6px 6px 0; font-size: 13px;
}
.note.bad { border-color: #b03a30; background: #fbeceb; }
.log { font-size: 12px; color: #55514a; max-height: 210px; overflow-y: auto; }
.log div { padding: 2px 0; border-bottom: 1px solid #ece7dc; }
details.box > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px;
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--dim); font-weight: 600;
}
details.box > summary::-webkit-details-marker { display: none; }
details.box > summary::after { content: '▾'; margin-left: auto; font-size: 11px; }
details.box[open] > summary::after { content: '▴'; }
details.box[open] > summary { margin-bottom: 7px; }
summary .latest {
  flex: 1 1 auto; min-width: 0; text-transform: none; letter-spacing: 0;
  font-weight: 400; font-size: 11px; color: #8a8478;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
details.box[open] summary .latest { display: none; }