/* The card page. Poker size, 63 by 88 mm, nine to an A4 sheet in portrait
   with room to cut: 3 x 63 + 2 x 4 = 197 mm across inside 20 mm of margin,
   3 x 88 + 2 x 4 = 272 mm down inside 277. On screen the same grid sits on
   a paper-coloured ground so the preview is the print. Unbranded on purpose:
   the cards are the table's content and the paper is theirs. */
/* 6mm, not 10. Nine poker cards across an A4 portrait need 3 x 63 + 2 x 3
   = 195mm, and a 10mm margin leaves 190. The comment above this line used
   to do that sum and get it wrong, so the right-hand column of every
   printed sheet ran off the paper. 6mm leaves 198 across and 285 down,
   which holds 195 and 270 with a millimetre and a half to spare on each
   side, and is inside what a domestic inkjet will actually print. */
@page { size: A4 portrait; margin: 6mm; }

.pc-page { background: #2a2825; color: var(--ink); }

.pc-tools {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: .6rem 1.2rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.pc-tools h1 { margin: 0; font-size: var(--fs-head); }
.pc-sub { margin: .15rem 0 0; color: var(--dim); font-size: var(--fs-small); }
.pc-btns { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pc-btns .tickish { display: inline-flex; align-items: center; gap: .35rem; }
.pc-btns select { font: inherit; font-size: var(--fs-small); min-height: 2rem; padding: .2rem .4rem; }
.pc-lab { font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--faint); }
.pc-btns .ghost { display: inline-block; padding: .45rem .7rem; }

/* Three sizes on one sheet of A4 (210 by 297, inside 6mm of margin, so
   198 by 285): nine poker cards at 63 by 88, four at 92 by 132, or two at
   130 by 190. Our own cards carry a lot of text, so the size is the Ref's
   call and the page says when a card is being cut off.

     nine  3 x 63 + 2 x 3 = 195   3 x 88 + 2 x 3 = 270
     four  2 x 92 + 1 x 3 = 187   2 x 132 + 1 x 3 = 267
     two   1 x 130            190

   Poker size is not negotiable: 63 by 88 is what a card sleeve takes. */
.pc-sheet {
  display: grid;
  grid-template-columns: repeat(3, 63mm);
  grid-auto-rows: 88mm;
  grid-template-rows: none;
  align-items: stretch;
  gap: 3mm;
  justify-content: center;
  /* `safe`, so that when the sheet is wider than the screen the first
     column is still reachable. A centred grid that overflows pushes its own
     start out of the scroll box and there is no scrolling back to it.
     Declared after the plain `center` so a browser that does not know the
     keyword keeps the one above. */
  justify-content: safe center;
  padding: 10mm;
  background: #f4f1ea;
  color: #1a1816;
  min-height: 50vh;
  /* Three cards at 63mm is 189mm of paper, and a phone is 375px. It used to
     take the PAGE sideways with it: 189px of horizontal scroll on the whole
     document, so the toolbar and the heading slid about while you were
     trying to read a card. It scrolls in its own box now. Undone for print,
     where the sheet is the paper and a scroll box would only confuse the
     pagination. */
  overflow-x: auto;
}
.pc-sheet[data-size="4"] { grid-template-columns: repeat(2, 92mm); grid-auto-rows: 132mm; }
.pc-sheet[data-size="2"] { grid-template-columns: 130mm; grid-auto-rows: 190mm; }
.pc-sheet[data-size="4"] .pc, .pc-sheet[data-size="2"] .pc { padding: 4mm 4.2mm; }

.pc {
  box-sizing: border-box;
  border: .3mm solid #4a4540;
  /* SQUARE. A rounded corner is a corner you cannot cut to: a guillotine
     and a steel rule follow a straight line, and the border is that line.
     The 3mm gutter is two 1.5mm trims, one for each neighbour. */
  border-radius: 0;
  padding: 3mm 3.2mm;
  background: #fff;
  color: #1a1816;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 8.5pt;
  line-height: 1.42;
  display: flex; flex-direction: column; gap: 1.4mm;
  height: 100%;
  overflow: hidden;
  break-inside: avoid; page-break-inside: avoid;
}
.pc-hidden { border-style: dashed; }
/* The faces a card can be set in. System stacks: the CSP serves no font
   files, and a card that asked for one would print in the fallback. */
.pc-f-plain { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.pc-f-typed { font-family: ui-monospace, "Courier New", Courier, monospace; }
.pc-f-old { font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }
.pc-f-typed .pc-name { letter-spacing: -.01em; }
/* The card is set the way the game's own item cards are: the name
   underlined at the top left with the counts in the corner, a rule under
   it, italic prose in the middle, the tiers in a bordered table, and a
   ruled foot with the craft line and the price centred. */
/* The header is one line: the name at the left and the counts along the
   right, the way the printed cards head them. */
.pc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 2mm; border-bottom: .3mm solid #1a1816; padding-bottom: 1.2mm; }
.pc-name { margin: 0; font-size: 11pt; font-weight: 700; text-decoration: underline; text-underline-offset: 1.5px; }
.pc-corner { display: flex; align-items: baseline; gap: 3mm; font-size: 8pt; font-weight: 700; white-space: nowrap; }
.pc-meta { font-size: 7.5pt; white-space: nowrap; color: #4a4540; }
.pc-tags { font-size: 7.5pt; font-style: italic; color: #6b6660; margin: .8mm 0 .2mm; }
.pc-line { display: flex; gap: 1.5mm; }
.pc-label { font-weight: 700; }
/* Everything a card says is set in italic, and the labels a Ref reads out
   ("Maneuver:", "Action:") are the bold in it. */
.pc-body, .pc-detail, .pc-craft, .pc-line, .pc-tail { font-style: italic; }
.pc-craft, .pc-tail { text-align: center; }
/* Two columns, a key and a result, three rows. The row wrapper has to be
   display: contents or the grid takes the WRAPPERS as its items: band one
   went into the 9mm key column and wrapped a word to a line, band two into
   the result column, band three back to the start. That is what broke the
   Long Line. */
.pc-bands { width: 100%; border-collapse: collapse; margin: 1.2mm 0; table-layout: fixed; }
.pc-bands th, .pc-bands td { border: .25mm solid #1a1816; padding: .6mm 1mm; text-align: center; vertical-align: top; font-style: italic; }
.pc-bands th { font-weight: 700; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-body p { margin: 0 0 1.4mm; }
.pc-body p:last-child { margin-bottom: 0; }
/* Each labelled line gets its own ruled row: the printed cards separate
   "Maneuver:", "Action:" and the rest with a rule across the card, and a
   run of prose without them was the thing that read as a wall. */
.pc-keyed, .pc-line { border-top: .25mm solid #1a1816; padding-top: 1.1mm; margin-top: 1.1mm; }
.pc-head + .pc-line, .pc-head + .pc-detail + .pc-line { border-top: 0; padding-top: 0; margin-top: .6mm; }
.pc-body > .pc-keyed:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.pc-detail { font-style: italic; color: #4a4540; margin-bottom: .2mm; }
.pc-foot { margin-top: auto; border-top: .3mm solid #1a1816; padding-top: 1.4mm; font-size: 8.5pt; display: flex; flex-direction: column; gap: .7mm; text-align: center; }
.pc-tail { font-weight: 400; }
/* The line a Ref reads out is a sentence, not a price, so it does not want
   the price's bold. They were joined with a middot and both came out heavy. */
.pc-found { font-style: italic; }
.pc-who { color: #4a4540; }

@media print {
  .pc-page { background: #fff; }
  .pc-tools { display: none; }
  .pc-sheet { padding: 0; background: #fff; min-height: 0; gap: 3mm;
               overflow: visible; }
  .pc { box-shadow: none; }
}