/* S: lane SS (the shelf, the records, the scenes and the title). JOB-019 SS part: the cork board, the backs of the Codex shelves, the title. JOB-056: the speaker of a scene.
   Loaded after main.css: it adds and overrides, nothing here is used by another lane. Colours are the game's own (ink, ivory paper, worn red); no card is greyed (rule 175). */

/* ------------------------------------------------------------ the cork board (X2 B1, B3; rule 165) */
/* the count of clues found out of all of them, where the lone icon was */
.board-top .board-title { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; } /* main.css sizes a symbol that sits before a number at .72 of the font size (rule 160): the symbol follows this size */
.board-count { font-size: inherit; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.board-count:empty { display: none; }
/* a place still to find: a ghost of a pinned card, dashed and dark on the cork, with the board symbol */
.board-ghost { position: absolute; box-sizing: border-box; display: grid; place-items: center; border: 2px dashed rgba(243, 240, 230, .85); border-radius: 4px; background: rgba(27, 26, 23, .24); color: rgba(243, 240, 230, .85); }
.board-ghost .sym { width: 42%; height: auto; aspect-ratio: 1; }
/* a faint dotted thread from a card to the places of its truth that are still empty */
.board-lead { fill: none; stroke: #f3f0e6; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: .1 7; opacity: .7; }
/* the threads go over the pieces, from pin to pin (they only draw: the layer takes no pointer, main.css): under the pieces they were two slivers in the gaps between them */
.board-threads { z-index: 2; }
/* the face-down card of a truth: the count on top, its name on the band only once the truth is understood */
.board-truth { container-type: inline-size; }
.bt-count { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); min-width: 52%; padding: 2px 6px; background: var(--paper); border: 2px solid var(--ink); border-radius: 3px; text-align: center; font-weight: 700; font-size: clamp(.8rem, 17cqw, 1.25rem); letter-spacing: .06em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.board-truth .bt-name { font-size: clamp(.74rem, 14cqw, .95rem); }
.board-truth.is-understood { box-shadow: 0 0 0 2px var(--red), 3px 5px 6px rgba(0, 0, 0, .5); }
.board-truth:focus-visible, .board-piece:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
/* a pinned piece: its number in its truth is the numeral, the board symbol under it is smaller than the number (rule 160) */
.board-piece b { font-size: calc(var(--cw, 56px) * .42); line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.board-piece.is-new { animation: board-pinned .34s ease-out; }
@keyframes board-pinned { from { scale: 1.35; opacity: .2; } to { scale: 1; opacity: 1; } }
/* the line of years: the year of the truths on the board has its tick filled */
.board-years .by { cursor: default; }
.board-years .by.is-now i { width: 10px; height: 10px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .board-piece.is-new { animation: none; } }

/* ------------------------------------------------------------ the Codex shelves (X2 X2) */
/* a card still face down carries a faint print of its shelf's symbol: a weapon back shows the weapon, a place back the pin; never the card itself */
.cdx-print { position: absolute; left: 50%; top: 50%; width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%); color: var(--ink); opacity: .55; mix-blend-mode: multiply; pointer-events: none; }
.cdx-print .sym { width: 100%; height: 100%; stroke-width: 2.2; }
.cdx-print, .cdx-print * { pointer-events: none; } /* the print only draws: even the transparent hit rect that every symbol carries takes nothing from the card under it (a folded crowded fan stays inert) */
/* X3: the slashed circle of a fallen man is a mark with a bubble, not a drawing: main.css makes the whole layer of marks inert (the symbol inherits it), so in the fan a long press on the circle
   never said « Tombé ». It takes the pointer here, and a tap on it still reaches the card (it is the card's child); the enlarged card carries the same bubble (cartes.js watchFallenLift) */
.cdx-fan .tw-fallen-mark { pointer-events: auto; }

/* ------------------------------------------------------------ the title (rule 5: readable text; rule 175: no card dimmed) */
.mode-card { opacity: 1; }
/* the line under the name sits on its own paper band, ink on paper (15:1), whatever the painting holds behind it: at 1440x700 it fell on the dark tree line */
.title .title-line, .title[data-tone="paper"] .title-line { display: inline-block; margin-top: .9em; padding: .5em .95em .5em 1.25em; background: var(--paper); color: var(--ink); text-shadow: none; border: 2px solid var(--ink); box-shadow: 3px 4px 0 rgba(27, 26, 23, .35); }
/* the painting is a window on its sky: the wider and shorter the screen, the higher the window, so that the name and the year always stay on the sky and never on the horizon */
@media (min-aspect-ratio: 17/10) { .title-art { object-position: 50% 62%; } }
@media (min-aspect-ratio: 19/10) { .title-art { object-position: 50% 40%; } }
/* a low screen (1024x600, 800x600): the buttons a little smaller, so that the free space between the head and the buttons holds the toast of the radio */
@media (max-height: 680px) {
  .title-menu { gap: 8px; }
  .title-menu .btn-lg { min-height: 50px; }
  .mode-card { height: 56px; }
  .title-menu .chip { min-height: 40px; }
}
/* a phone lying down (the screen is lower than 480 px): the name and the year on one line at the top, the buttons smaller under them, so that the menu is never drawn on the name */
@media (max-height: 480px) and (min-aspect-ratio: 14/10) {
  .title-art { object-position: 50% 8%; }
  .title-head { top: calc(var(--safe-top) + 10px); }
  .title-name { flex-direction: row; justify-content: center; align-items: baseline; gap: .38em; font-size: clamp(1.5rem, 8.6vh, 2.8rem); }
  .title-year { padding-left: 0; }
  .title .title-line, .title[data-tone="paper"] .title-line { margin-top: .6em; padding: .3em .8em .3em 1.1em; font-size: clamp(.64rem, 2.6vh, .86rem); }
  .title-menu { gap: 6px; bottom: calc(var(--safe-bottom) + 8px); }
  .title-menu .btn-lg { min-height: clamp(38px, 11vh, 50px); padding: 6px 20px; font-size: 1.05rem; }
  .mode-card { height: clamp(40px, 12vh, 52px); }
  .mode-card .sym { width: 24px; height: 24px; }
  .title-menu .chip { min-height: 38px; }
  .title-row { margin-top: 0; }
  .mode-row { margin: 0; }
}
/* the toast of the radio on the title stands in the free space between the head and the buttons (title.js measures it), never on the name */
html[data-screen="title"] .radio-toast { top: var(--title-toast-top, 50%); transform: translate(-50%, -50%); }

/* ------------------------------------------------------------ the picture of a scene (the director's note of 19:00) and the man who speaks in it (JOB-056, rule 183) */
/* the frame takes the shape of its painting (scene.js sets --ratio from the picture itself): a 3:2 painting in a tall frame left two empty bands of paper above and below, an empty box. The column of the
   picture is a size container; the frame is as wide as the column allows and as tall as the painting needs, in the middle of the column */
.scene-art { --ratio: 1.5; container-type: size; }
.scene-frame { width: min(100cqw, calc(100cqh * var(--ratio))); height: auto; aspect-ratio: var(--ratio); }
.scene { --name-h: 26px; --line-fs: clamp(1.05rem, 4.3vw, 1.4rem); --line-rows: 4; --line-budget: 5; --line-pad: 28px; --bust-max: 300px; }
/* the text is the place of the man who speaks (when men speak in the panel) above the line itself; the line keeps its measure: nothing sits beside it any more */
.scene-text { flex-direction: column; gap: 6px; }
.scene-lineholder { width: min(100%, 720px); flex: none; display: flex; justify-content: center; }
.scene-lineholder:empty { display: none; }
.scene-lineholder .scene-line { width: 100%; }
.scene-text.has-speakers .scene-line.is-quote, .scene-text.has-speakers .scene-line.is-narration { min-height: calc(1.38em * var(--line-rows) + var(--line-pad)); } /* four lines: a short line does not make the picture or the man jump */
/* the man is as tall as what is left of the column once his name and a plate of five lines have their room (the plate itself keeps four at least) (a phone 390x844: 300 px, 360x640: 147; a wide screen: 420 px, 1440x900 and 1440x700 alike,
   less where the room is smaller); the owner's word was "too small". cqh is the height of the column of text, which is a size container when men speak in the panel */
.scene-text.has-speakers { container-type: size; }
.scene { --bust-h: clamp(96px, calc(100cqh - var(--name-h) - 12px - (1.38 * var(--line-fs) * var(--line-budget) + var(--line-pad))), var(--bust-max)); }
.scene-speakerzone { display: none; flex: none; width: min(100%, 720px); height: calc(var(--bust-h) + var(--name-h) + 6px); align-items: flex-end; justify-content: flex-start; }
.scene-text.has-speakers .scene-speakerzone { display: flex; }
.scene-speakerzone[data-side="right"] { justify-content: flex-end; }
/* a phone upright: the picture is as tall as its painting needs (the width of the screen over its ratio, never more than 46 % of the height) and what is left is the man's and his line's, in its middle */
@media not all and (min-aspect-ratio: 11/10) {
  .scene-art { flex: 0 0 auto; height: min(calc((100vw - 32px) / var(--ratio)), 46dvh); }
  .scene-text { flex: 1 1 0; }
}
/* a wide screen: the picture keeps its 60 % at the left (main.css) and the man fills the column above his words, 420 px (46 % of the height on a tall screen), as far as the room allows
   (the director, 22:56: at 315 px he was the smallest thing on the page; 1440x900: 420, 1440x700: 420 of the 431 the room gives) */
@media (min-aspect-ratio: 11/10) { .scene { --bust-max: max(420px, 46dvh); } }
/* a phone on its side (a wide screen under 520 px tall): the column is about 300 px tall and 300 wide, and the skip button stands over its top, so the man and his line are made to fit under it:
   a smaller line of three lines, the picture a little narrower, the man as tall as what is left (844x390: 174 px) */
@media (min-aspect-ratio: 11/10) and (max-height: 520px) {
  .scene { --name-h: 22px; --line-fs: clamp(.88rem, 2.2vw, 1.02rem); --line-rows: 3; --line-budget: 4; --line-pad: 20px; --bust-max: 46dvh; }
  .scene-stage .scene-art { flex-basis: 54%; }
  .scene-text.has-speakers { padding-top: 40px; }
  .scene-text.has-speakers .scene-line { font-size: var(--line-fs); padding: 8px 12px; box-shadow: 2px 3px 0 var(--ink); }
}
/* the figure: the cut-out, then his short name on one line, ink on paper (15:1) */
.speaker.tw-card { position: relative; width: auto; aspect-ratio: auto; margin: 0; display: flex; flex-direction: column; align-items: center; perspective: none; cursor: pointer; }
.speaker-bust { display: block; height: var(--bust-h); width: auto; max-width: none; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.speaker-bust.is-mirrored { transform: scaleX(-1); }
.speaker-name { margin-top: 4px; height: var(--name-h); padding: 0 12px; display: inline-flex; align-items: center; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font-weight: 700; font-size: 1rem; line-height: 1; letter-spacing: .06em; white-space: nowrap; box-shadow: 2px 3px 0 rgba(27, 26, 23, .35); }
@media (min-aspect-ratio: 11/10) and (max-height: 520px) { .speaker-name { font-size: .88rem; padding: 0 10px; } } /* the name plate of the phone on its side (after its base rule above) */

/* ------------------------------------------------------------ the return screen (the director, 22:56): the heading of a row never stands under the difficulty badge at the top left */
/* a won fight that also lost cards lists the lost row first and its heading « PERDU » stood at the left edge of a phone, under the badge (it read « ≡ERDU »): the lost board and the wide screens centre their headings already, every heading is centred now */
.ret-head { text-align: center; }

/* ------------------------------------------------------------ the lessons of the intro (JOB-018, rules 163, 164): a small paper card with the old hand's portrait at the top edge. It says what a thing is FOR; it never points,
   never blocks and takes no pointer (a tap goes through to what is under it), and it leaves by itself (lessons.js) */
.lesson { position: fixed; z-index: 900; left: 50%; top: calc(var(--safe-top, 0px) + 68px); transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
.lesson, .lesson * { pointer-events: none; }
.lesson[data-edge="bottom"] { top: auto; bottom: calc(var(--safe-bottom, 0px) + 18px); }
.lesson[data-screen="table"]:not([data-edge="bottom"]) { top: calc(var(--safe-top, 0px) + 40px); } /* the tarp has no top bar: the lesson stands above the first row of cards, not on it */
@media (max-width: 600px) { .lesson[data-screen="team"]:not([data-edge="bottom"]) { top: calc(var(--safe-top, 0px) + 58px); } } /* the points hang under the title: the lesson that speaks of them stays above */
.lesson-bust { flex: none; display: block; height: 96px; width: auto; margin-bottom: -4px; filter: drop-shadow(1px 2px 0 rgba(27, 26, 23, .25)); user-select: none; }
.lesson-bust.is-mirrored { transform: scaleX(-1); }
.lesson-card { flex: 1 1 auto; min-width: 0; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); padding: 8px 14px 10px; }
.lesson-card p { margin: 0; font-size: clamp(.95rem, 3.6vw, 1.1rem); line-height: 1.35; font-style: italic; text-wrap: pretty; }
.lesson-name { display: block; margin-bottom: 3px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
@media (max-height: 520px) { .lesson { top: calc(var(--safe-top, 0px) + 54px); } .lesson-bust { height: 72px; } .lesson-card p { font-size: .9rem; } }

/* The freight reference catalogue is separate from owned equipment and its collection count. */
.cartes .topbar > [data-act="cargo-catalogue"] { width: auto; min-width: 48px; padding-inline: 10px; }
.cargo-catalogue { position: absolute; inset: 66px 0 0; overflow-y: auto; padding: 18px; background: var(--paper); color: var(--ink); }
.cargo-catalogue[hidden] { display: none; }
.cargo-catalogue h2 { margin: 0; }
.cargo-catalogue label { display: block; }
.cargo-catalogue input { display: block; width: min(100%, 480px); padding: 9px; margin: 8px 0; color: inherit; background: transparent; border: 1px solid currentColor; }
.cargo-catalogue-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.cargo-reference { min-width: 0; padding: 10px; border: 1px solid currentColor; }
.cargo-reference-face { position: relative; aspect-ratio: 2 / 3; container-type: inline-size; margin-bottom: 8px; }
.cargo-reference-face > .tw-face { position: absolute; inset: 0; }
.cargo-numeral { display: block; text-align: center; margin-bottom: 5px; }
@media (max-width: 480px) { .cargo-catalogue { padding: 12px; } .cargo-catalogue-list { gap: 10px; } }
.cargo-reference { appearance: none; cursor: pointer; color: inherit; background: transparent; text-align: center; }
.cargo-reference:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.cargo-inspect-card { width: min(92vw, 420px, calc((100dvh - 185px) * .6667 + 44px)); padding: 14px; }
.cargo-inspect-card > .icon-btn { margin-bottom: 8px; }
.cargo-inspect-card .cargo-reference-face { width: 100%; }