/*
 * THE TWO REFERENCE SCREENS -- the rulebook and the card sheet -- and the debug
 * switches beside them. They are the same kind of thing as each other, which is
 * why they share a sheet and most of their rules.
 */

#overlay.scroll { justify-content: flex-start; overflow-y: auto; padding: 0 20px 40px; }
/* a paged sheet ends in a bar pinned to the bottom, so it keeps no gap below it */
#overlay.scroll:has(.rules .pager) { padding-bottom: 0; }
.sheet, .rules {
  width: 100%; margin-top: 26px; padding: 0 40px 40px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 44px rgba(60, 50, 30, .13);
}
.sheet { max-width: 1010px; }
.sheet .shead, .rules .shead {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 0 -40px 20px; padding: 15px 40px 14px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  border-radius: 13px 13px 0 0;
}
.sheet .shead .big, .rules .shead .big { font-size: 20px; }
/* the line under the title is not in the head: the head rides along, and a
   standfirst is read once */
.sheet .lede, .rules .lede {
  color: var(--dim); font-size: 13px; line-height: 1.55; margin: 0 0 18px; max-width: 720px;
}
.sheet h3 {
  margin: 28px 0 4px; font-size: 16px; padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.sheet p { margin: 0 0 12px; color: var(--dim); font-size: 13px; line-height: 1.55; max-width: 720px; }
/* a group's title is set like the rulebook's sub-headings, so a reader coming
   from that screen reads the same hierarchy here */
.sheet h4 {
  margin: 20px 0 9px; font-size: 11.5px; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: .085em;
}
.sheet h4 span {
  display: block; font-weight: 400; color: var(--dim); font-size: 12px;
  text-transform: none; letter-spacing: 0;
  line-height: 1.5; max-width: 720px; margin-top: 4px;
}
.refs { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 14px; }
.ref { display: flex; gap: 9px; width: 292px; }
/*
 * Hovering a card on the sheet blows it up where it stands. It grows from its
 * own left edge rather than its middle, so it opens out across its own
 * description instead of over the card to its left -- and the pointer stays
 * inside it the whole way, which is what stops the grow/shrink flicker.
 */
.ref .card {
  flex: 0 0 auto; cursor: zoom-in;
  transition: transform .14s ease, box-shadow .14s ease;
}
.ref .card:hover {
  transform: scale(3); transform-origin: 0 50%; z-index: 60;
  box-shadow: 0 10px 26px rgba(60, 50, 30, .32);
}
/*
 * THE RULEBOOK, on the sheet stock set above. Narrower than the card sheet,
 * because this one is read in lines rather than scanned in tiles, and a line
 * of text past about eighty characters loses the reader on the way back to the
 * left.
 */
.rules { max-width: 704px; counter-reset: sec; }
/*
 * Sections are numbered by the page rather than by the words, so the rulebook
 * can be re-ordered without renumbering anything, and a reader scrolling fast
 * has six landmarks to count.
 */
.rules h2 {
  counter-increment: sec; display: flex; align-items: center; gap: 11px;
  margin: 36px 0 13px; font-size: 17px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.rules h2::before {
  content: counter(sec); flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; color: #fff; background: var(--accent);
}
/* the sub-headings are set like the table headings, so nothing below an h2
   can be mistaken for one */
.rules h3 {
  margin: 24px 0 9px; font-size: 11.5px; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: .085em;
}
/* a step below an h3: the same family, set in the ink of the body text so it
   reads as a part of the section above rather than a new one */
.rules h4 {
  margin: 22px 0 8px; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.rules p, .rules li { font-size: 14px; line-height: 1.68; margin: 0 0 11px; }
/* the line that says who is at the table is set larger: it is read before
   anybody has decided to read the rest */
.rules .lede + p {
  font-size: 15.5px; line-height: 1.6; color: #3c4148; margin-bottom: 4px;
}
.rules ul { margin: 0 0 13px; padding-left: 20px; }
.rules li { margin-bottom: 9px; }
.rules li::marker { color: #b6ae9d; }
.rules b { font-weight: 600; }
/* The turn order, and the one thing neither burglar knows: set apart, because
   both are the kind of line a player comes back to the page to re-read. */
.rules blockquote {
  margin: 0 0 16px; padding: 12px 16px; font-size: 13.5px; line-height: 1.6;
  background: #f3eee1; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
}
.rules table { border-collapse: collapse; width: 100%; margin: 2px 0 16px; font-size: 12.8px; }
.rules th {
  text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); padding: 0 12px 6px 0;
  border-bottom: 1px solid var(--line);
}
.rules td { padding: 9px 12px 9px 0; border-bottom: 1px solid #eae4d7; line-height: 1.5; vertical-align: top; }
/* what a row is about is darker than what it does, so the left column can be
   scanned on its own and the rest read only where it lands */
.rules td:first-child { color: var(--ink); }
.rules td + td { color: #575c63; }
.rules tr:last-child td { border-bottom: none; }
.rules th.num, .rules td.num {
  text-align: right; width: 74px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* the guards are scored on the other side of a line from the burglars, so the
   two columns of numbers cannot be read as one */
.rules th.num + th.num, .rules td.num + td.num { border-left: 1px solid #eae4d7; padding-left: 14px; }
/* a night is scored in points won and points lost, and they are coloured as
   such -- the same green and red the result screen tallies with */
.rules td.num .pos { color: #2f8f5b; }
/*
 * The figures. A rulebook that names six floors and three kinds of room ought
 * to show them: these are drawn by the board's own functions, so what is on
 * this page is what is on the table. Each set is plated -- framed, on the
 * darker paper -- so it reads as an illustration rather than as loose things
 * left between two paragraphs.
 */
.rules .figs {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px;
  align-items: flex-end; justify-content: center;
  padding: 16px 14px; border-radius: 10px;
  background: var(--figbg); border: 1px solid #e7dfd0;
}
.rules .swatch {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px;
  border-radius: 7px; font-size: 12.5px; font-weight: 600;
  border: 1px solid rgba(35, 38, 44, .18);
}
.rules .swatch .sglyph { font-size: 15px; line-height: 1; }
/* the tiles line up along their tops, so a caption that wraps cannot lift its
   own drawing out of the row */
/* the building itself, drawn by the board's own function and capped so it
   stays a figure rather than becoming the page */
/* named `board` and not `plan`: #overlay .plan is the plan chooser's button,
   an id selector, and it was painting this figure as one of those */
.rules .figs.board { justify-content: center; }
.rules .planfig { width: 100%; }
/* the plan is a block of its own, and the cards it points at sit under it */
.rules .figs.step { display: block; }   /* and see THE PANEL IS THE CROP below */
/*
 * THE PANEL IS THE CROP. The step figure is a few rooms out of the plan, and
 * given its own frame inside the panel it was a rectangle floating in a
 * rectangle -- so the drawing runs right to the panel's edge and the panel's
 * own rounded corner is what cuts it off.
 */
.rules .figs.step { padding: 0; overflow: hidden; }
.rules .figs.step .planfig { width: 100%; margin: 0; }
.rules .figs.step .figcap { padding: 0 14px 13px; }
.rules .figcap {
  display: block; margin-top: 10px; text-align: center;
  font-size: 11.5px; line-height: 1.4; color: var(--dim);
}
.rules .figs.rooms { align-items: flex-start; gap: 12px 20px; }
.rules .fig { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 176px; }
.rules .fig span { color: var(--dim); font-size: 11px; line-height: 1.35; text-align: center; }
.rules .figart svg { display: block; }
/* the cards are the real ones, at the size a hand holds them, and they blow
   up under the pointer exactly as they do on the all-cards sheet */
.rules .figs .card {
  cursor: zoom-in; transition: transform .14s ease, box-shadow .14s ease;
}
.rules .figs .card:hover {
  transform: scale(2.4); transform-origin: 50% 100%; z-index: 60;
  box-shadow: 0 10px 26px rgba(60, 50, 30, .32);
}
/*
 * A CARD AND ITS PARAGRAPH, SIDE BY SIDE. Three cards over three paragraphs
 * makes the reader count along a row to find out which one is being talked
 * about; beside its own words, a card needs no finding.
 */
.rules .figs.cardNotes {
  display: block; padding: 0; background: none; border: none; margin-bottom: 18px;
}
.rules .cnote {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 14px 16px; border-radius: 10px;
  background: var(--figbg); border: 1px solid #e7dfd0;
}
.rules .cnote + .cnote { margin-top: 9px; }
/* the card keeps its size while the words take whatever is left */
.rules .cnote > .card { flex: 0 0 auto; }
.rules .cnotex { flex: 1 1 auto; min-width: 0; }
.rules .cnotex > b { display: block; font-size: 13.5px; margin-bottom: 5px; }
.rules .cnotex p { font-size: 13px; line-height: 1.55; margin: 0; }
/*
 * A HAND, DEALT: ten cards laid out the way they are handed over, wrapping on a
 * narrow window rather than shrinking. It is a picture to count, so the cards
 * are shoulder to shoulder and none of them overlaps another.
 */
.rules .figs.burglarHand, .rules .figs.museumHand { display: block; padding: 15px 10px; }
.rules .handfig { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.rules .handrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
/*
 * WHERE THE TWO SIDES MEET, and the one idea in the game with nothing on the
 * board to point at: both sides put a card on the SAME place, one aiming and
 * one answering.
 *
 * TWO COLUMNS, and the right one is as wide as the ROW of slots. Everything
 * that happens to the slot about to be filled -- the arrows, and the hand each
 * card comes out of -- is a box one slot wide, pushed to the end of that
 * column, so it sits over the slot it means rather than over the middle of the
 * figure. A hand is wider than a slot and overhangs its box evenly, which
 * keeps its centre on the slot's.
 */
.rules .figs.slots { display: block; }
.rules .slotfig {
  display: grid; grid-template-columns: auto auto;
  justify-content: center; align-items: center; gap: 7px 14px;
}
.rules .slotfig .slaim {
  grid-column: 2; justify-self: end;
  width: var(--slotw, 73px); display: flex; justify-content: center;
}
.rules .slotfig .slrow { grid-column: 2; display: flex; gap: 8px; }
.rules .slotfig .slcap {
  grid-column: 1; justify-self: end;
  font-size: 12px; font-weight: 600; color: var(--dim);
}
/*
 * A HAND IS HELD, so it is fanned: squared up in a row it is a pile on a
 * table, which is what everything else in the book is, and the one thing this
 * figure has to say is that these cards are in somebody's hand.
 */
.rules .slhand { display: flex; align-items: flex-end; }
.rules .slhand .card { transform-origin: 50% 135%; }
.rules .slhand .card + .card { margin-left: -38px; }
.rules .slhand .card:nth-child(1) { transform: rotate(-10deg); }
.rules .slhand .card:nth-child(3) { transform: rotate(10deg); }
/* a slot is a place on the table, and the same size whether or not it is filled */
.rules .slslot {
  width: var(--slotw, 73px); height: 96px; padding: 5px;
  border: 1px solid transparent; border-radius: 9px;
}
.rules .slslot.next { border-style: dashed; border-color: #c8bfa9; }

/*
 * THE GALLERY CARDS, drawn the way the one a burglar is dealt is drawn. The gold
 * ring the dealt card wears is left OFF: on that screen it means "this one is
 * yours", and three of them side by side on a page about the deal say that
 * about all three.
 *
 * Sized like a card rather than a tile -- border-box, so the padding is inside
 * the width and the three come out identical whatever is written on them.
 */
.rules .galfig {
  position: relative; box-sizing: border-box; width: 112px; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 13px 8px 14px;
  border: 1px solid rgba(35, 38, 44, .55);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .26), 0 6px 16px rgba(0, 0, 0, .16);
}
.rules .galfig .tile { display: block; line-height: 0; }
.rules .galfig .tile svg { width: 74px; height: auto; }
.rules .galfig b { font-size: 14px; font-weight: 650; margin-top: 7px; }
/* the copy number, which only decides a same-round tie */
.rules .galfig .rank {
  position: absolute; top: 7px; right: 8px; font-size: 11px; font-weight: 700;
  width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid currentColor; opacity: .75;
}
/*
 * THE PILE, DRAWN AS THE EXCHANGE IT IS: what goes out, an arrow, what comes
 * back -- and what comes back is the same deck the examples draw, so the one
 * picture means the same thing wherever the book uses it.
 *
 * Two rows: the pictures, bottom aligned so the cards given up and the card
 * drawn sit on one line whatever height the deck adds above it, and then the
 * captions on a line of their own.
 */
.rules .figs.trade {
  display: grid; grid-template-columns: auto auto auto;
  justify-content: center; align-items: end; gap: 8px 18px;
}
.rules .figs.trade .tp { display: flex; gap: 7px; align-items: flex-end; }
.rules .figs.trade .tp.arrow {
  font-size: 22px; color: #b0a893; line-height: 1; padding-bottom: 32px;
}
.rules .figs.trade .tc {
  text-align: center; font-size: 11.5px; line-height: 1.4; color: var(--dim);
  max-width: 160px; justify-self: center;
}
/*
 * THE SCENARIOS. Each is a plate of its own rather than one long strip: five
 * of them in a row read as a table of thirty cards, and each is meant to be
 * read on its own and then left.
 *
 * The pile is SPREAD, where a trail stacks it. On a row the cards overlap
 * because there are a dozen piles competing for the width; here there is one,
 * and the whole point of the picture is that every card in it can be read
 * without hovering anything.
 */
.rules .figs.scenarios {
  display: block; padding: 0; background: none; border: none; margin-bottom: 18px;
}
.rules .scene {
  padding: 15px 17px 13px; border-radius: 10px;
  background: var(--figbg); border: 1px solid #e7dfd0;
}
.rules .scene + .scene { margin-top: 11px; }
/* the h3 rule sets a margin for prose; inside the plated figure it needs its
   own, and the first one must not push a gap above the whole block */
.rules .figs.scenarios .sgroup { margin: 22px 0 9px; }
.rules .figs.scenarios > .sgroup:first-child { margin-top: 2px; }
.rules .scene .sname {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
/*
 * The steps run left to right and the piles grow downwards, so the words are
 * given a fixed block at the TOP of each panel: every picture then starts on
 * the same line, and a step that took three lines to say does not push its own
 * pile out of step with the one beside it.
 */
/*
 * A GRID, not a row of columns: the words, the pile and the label are three
 * ROWS shared by every step, so the pictures all start on the same line
 * however many lines a step took to say. As five separate boxes the panels
 * each sized themselves and the piles came out a step ladder.
 */
.rules .sflow {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  grid-template-rows: auto auto; gap: 7px 6px;
  align-items: start; justify-items: center;
}
.rules .sstep { display: contents; }
.rules .spic { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rules .ssay {
  justify-self: stretch; font-size: 10.5px; line-height: 1.45;
  color: #5b6069; padding-right: 7px;
}
.rules .ssay b { font-weight: 600; color: #40454c; }
/* the step number rides in the first line of its own sentence rather than
   above it: five numbers in a row of their own read as a fifth column */
.rules .ssay .snum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; margin-right: 5px;
  vertical-align: -3px;
  font-size: 9.5px; font-weight: 600; color: #fff; background: #b0a893;
}
/* what the pile IS -- their slot, or the discard pile. The two are drawn
   differently and named anyway, because a card leaving the table for good is
   the one thing a picture of a pile cannot say on its own. */
.rules .swhere {
  color: var(--dim); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
}
.rules .spile {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  padding: 6px; border: 1px dashed #c8bfa9; border-radius: 9px;
}
/* a slot with nothing on it yet is still a slot, and still that size */
.rules .spile:empty { width: 75px; height: 98px; }
/*
 * THE DRAW, as the fourth step: the deck as a loose stack, an arrow down at
 * the person reading, and the card that arrived. A cross where the arrow was
 * when none did -- an arrow pointing at nothing still points.
 */
.rules .sdraw { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/*
 * THE DECK IS SQUARED UP, because somebody has to take the top card off it:
 * four backs offset by the same three pixels each and turned not at all. It is
 * a picture OF a deck, so it does not take the pointer and its cards do not
 * blow up under one.
 */
.rules .sdeck { position: relative; width: 72px; height: 95px; pointer-events: none; }
.rules .sdeck .card { position: absolute; left: 0; top: 0; }
.rules .sdeck .card:nth-child(1) { transform: translate(9px, 8px); }
.rules .sdeck .card:nth-child(2) { transform: translate(6px, 5px); }
.rules .sdeck .card:nth-child(3) { transform: translate(3px, 2px); }
.rules .sarrow { display: flex; color: #a2997f; }
.rules .sarrow.none { color: #b03a30; }
/*
 * AND THE PILE A CARD IS THROWN ONTO: the same cards from the same angle, and
 * nobody has straightened them. Four angles, none of them alike and none of
 * them small -- squared to within a few degrees it reads as a deck somebody
 * knocked, which is worse than either.
 */
.rules .sbin { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rules .sbincards { display: flex; gap: 7px; }
.rules .sheap { position: relative; width: 92px; height: 104px; pointer-events: none; }
.rules .sheap .card {
  position: absolute; left: 14px; top: 9px;
  /* and each one is lying ON the last rather than flush with it */
  box-shadow: 0 2px 7px rgba(60, 50, 30, .22);
}
.rules .sheap .card:nth-child(1) { transform: rotate(-16deg) translate(-6px, 2px); }
.rules .sheap .card:nth-child(2) { transform: rotate(11deg) translate(5px, -3px); }
.rules .sheap .card:nth-child(3) { transform: rotate(-5deg) translate(-1px, 4px); }
.rules .sheap .card:nth-child(4) { transform: rotate(15deg) translate(2px, 3px); }
/* several slots opened at once -- one tape reaches three */
.rules .spiles { display: flex; align-items: flex-start; gap: 9px; }
.rules .spileone { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.rules .spilelab {
  color: var(--dim); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
}
/* the one card this step changed */
.rules .spile .card.now {
  box-shadow: 0 0 0 2px var(--gold), 0 3px 9px rgba(60, 50, 30, .22);
}
/*
 * The page turn, and the count that says how much book is left. Stuck to the
 * bottom the way .shead is stuck to the top, so turning the page never means
 * scrolling to the end of one first.
 */
/*
 * A PAGED SHEET IS ALWAYS THE HEIGHT OF THE WINDOW, whatever is on it, so the
 * bar does not walk up and down as pages get shorter and longer. Short pages
 * push it down with the auto margin; long ones scroll under it.
 */
.rules:has(.pager) {
  display: flex; flex-direction: column;
  /* the overlay is a flex item sized to what the header leaves, so its height
     is definite and a percentage here resolves against it -- 26px is the
     sheet's own top margin */
  min-height: calc(100% - 26px);
  /* An explicit min-height replaces the automatic minimum size that keeps a
     flex item from being squashed below its content, so the sheet has to
     refuse to shrink itself: without this a page taller than the window is
     drawn in a box the height of the window, and the paper stops mid-page. */
  flex-shrink: 0;
  /* the bar IS the bottom edge: left in, the sheet's own border puts a pixel
     between where the bar rests on a short page and where it sticks on a long
     one, and the button moves by that pixel as you turn through */
  border-bottom: 0;
}
.rules { padding-bottom: 0; }
.rules .pager {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: auto -40px 0; padding: 13px 40px 14px;
  background: var(--panel); border-top: 1px solid var(--line);
  border-radius: 0 0 13px 13px;
}
.rules .pgo {
  padding: 8px 15px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 7px; background: #fff;
  color: var(--accent); cursor: pointer;
}
.rules .pgo:hover:not(:disabled) { background: rgba(31, 111, 156, .07); }
.rules .pgo:disabled { color: #b3ab99; cursor: default; }
.rules .pgn { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
/* an example page says so, so a worked turn is never read as another rule */
.rules .egbrow {
  margin: 0 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .085em;
  text-transform: uppercase; color: var(--dim);
}
/*
 * ONE EXAMPLE, plated by its own .scene and not by the figure box around it --
 * a group page is a stack of these, and two frames round each read as a box
 * inside a box. It has the width to itself either way, so it need not be a
 * strip.
 */
.rules .figs.scenario {
  display: block; padding: 0; background: none; border: none; margin-bottom: 11px;
}
/* the title of a page of examples, under the brow that says it is one */
.rules h4.egtitle { margin: 2px 0 13px; }
.rules .spile .card { position: relative; }
/* a floor named in the prose wears its own colour */
.rules .floorword { font-weight: 600; }
/* on a narrow window a sheet gives up its margins rather than its column */
@media (max-width: 700px) {
  .sheet, .rules { padding: 0 20px 30px; margin-top: 16px; }
  .rules { padding-bottom: 0; }
  .rules .pager { margin: auto -20px 0; padding: 12px 20px 13px; }
  .rules:has(.pager) { min-height: calc(100% - 16px); }
  /* five steps will not fit across a phone, so they stack and wrap -- and the
     shared rows go with them, which is the cost of fitting */
  .rules .sflow { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .rules .sstep {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    flex: 1 1 150px;
  }
  .rules .ssay { align-self: stretch; }
  .sheet .shead, .rules .shead { margin: 0 -20px 20px; padding: 14px 20px 12px; }
  .sheet .shead .big, .rules .shead .big { font-size: 18px; }
}
.refx { display: flex; flex-direction: column; font-size: 11px; line-height: 1.4; padding-top: 2px; }
.refx b { font-size: 12.5px; }
.refx .refn {
  color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: .03em;
  margin: 1px 0 4px;
}
.refx span:last-child { color: var(--dim); }
/*
 * THE DEBUG SWITCHES. A settings row rather than a caption with a button in
 * it: the whole row is the control, the state is a knob that moves as well as
 * a colour, and the rows are ruled off so two of them do not read as one.
 */
.dbgs-list { margin-top: 6px; }
.dbg {
  display: flex; align-items: flex-start; gap: 20px; width: 100%;
  padding: 15px 4px; border: 0; border-top: 1px solid var(--line);
  background: none; font: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
.dbgs-list .dbg:last-child { border-bottom: 1px solid var(--line); }
.dbg:hover { background: rgba(31, 111, 156, .05); }
.dbg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dbgt { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.dbgt b { font-size: 14px; font-weight: 600; }
.dbgt > span { font-size: 12.5px; line-height: 1.55; color: var(--dim); }
.dbgs { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding-top: 1px; }
.dbgs i {
  font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim); width: 22px; text-align: right;
}
.dbg.on .dbgs i { color: var(--accent); }
/* the knob moves as well as changing colour, so the state is not colour alone */
.dbgk {
  position: relative; width: 36px; height: 21px; border-radius: 11px;
  background: #c9c1b0; transition: background .15s ease;
}
.dbgk::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(60, 50, 30, .3); transition: transform .15s ease;
}
.dbg.on .dbgk { background: var(--accent); }
.dbg.on .dbgk::after { transform: translateX(15px); }
@media (max-width: 560px) {
  .dbg { gap: 12px; }
}
#overlay.hidden { display: none; }