/* css/sheets.css: Belongings, cards, resting by chits, the morning review, goals, finds, the clearing sheet, the end-of-turn sheet, colours of magic, the Setup Card.
   The css/ files are CONTIGUOUS SLICES of the old single styles.css, loaded by index.html in this order (base, front, shell, combat, map, plan, sheets, play, shared).
   Cascade order is part of the meaning: a rule that overrides an earlier rule of the same specificity must stay in a file that loads after it. Move rules between files
   only with a screenshot diff (tools/ui_snapshots.py). New rules for a screen go at the END of the file that owns it. */
/* "what is happening and why you are being asked" blocks */
.ask { border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); border-radius: 0 12px 12px 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; }
.ask b { font-size: calc(15px * var(--ts, 1)); }
.ask p { margin: 0; font-size: calc(13.5px * var(--ts, 1)); color: var(--dim); line-height: 1.35; }
.ask.compact { padding: 6px 10px; } .ask.compact b { font-size: calc(14px * var(--ts, 1)); } .ask.compact p { font-size: calc(12.5px * var(--ts, 1)); }

/* a label that belongs to a clearing opens that clearing, like the clearing itself */
.realm-svg .names .pill[data-clearing], .realm-svg .names .pill[data-clearing] * { pointer-events: auto; cursor: pointer; }

/* belongings */
.itemrow { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: stretch; }
.switch { min-width: 78px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); color: var(--dim); font-weight: 700; font-size: calc(15px * var(--ts, 1)); cursor: pointer; }
.switch.on { background: color-mix(in srgb, var(--gold) 22%, var(--panel)); color: var(--gold); border-color: var(--gold); }
.switch:disabled { opacity: .45; cursor: default; }
.itemsheet { display: flex; flex-direction: column; gap: 10px; }
.itemsheet .faces { display: flex; gap: 12px; justify-content: center; }
.itemsheet p { margin: 0; }
.itemrow .rl small { display: block; font-size: calc(12px * var(--ts, 1)); color: var(--dim); font-weight: 400; }

/* cards */
.card { border: 1px solid #6b5d3a; border-radius: 12px; overflow: hidden; background: #f1e9d0; color: #1d1a12; width: 100%; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.card-band { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.card-band b { font-family: var(--font-display); font-size: calc(18px * var(--ts, 1)); display: block; }
.card-band small { display: block; font-size: calc(12.5px * var(--ts, 1)); opacity: .85; }
.card-sym { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: #efe6d0; border-radius: 8px; color: #1d1a12; } .card-sym .ds-i { width: 36px; height: 36px; }
.card-pic { width: 44px; height: 44px; object-fit: contain; background: #efe6d0; border-radius: 8px; }
.card-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 12px 0; font-size: calc(13.5px * var(--ts, 1)); }
.card-stats em { font-style: normal; font-weight: 700; }
.card-text { margin: 0; padding: 10px 12px; font-size: calc(15px * var(--ts, 1)); line-height: 1.42; }
.card-note { margin: 0; padding: 0 12px 10px; font-size: calc(13.5px * var(--ts, 1)); color: #4a4030; font-style: italic; }
.spellrow .rl small { display: block; font-size: calc(12px * var(--ts, 1)); color: var(--dim); font-weight: 400; }

/* resting by tapping chits */
.chitgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
button.chit2 { color: inherit; font: inherit; cursor: pointer; padding: 8px 0; }
button.chit2:disabled { cursor: default; }
.chit2.pick { box-shadow: 0 0 0 2px var(--gold); border-color: var(--gold); opacity: 1; }
.chit2.sel { background: color-mix(in srgb, var(--gold) 20%, var(--panel2)); }
.chit2.off { opacity: .35; }
.restsheet { display: flex; flex-direction: column; gap: 12px; }

.pitnote summary { cursor: pointer; }
.pitnote .pitrow { font-size: calc(13.5px * var(--ts, 1)); }

.btn .col { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
.btn .col small { font-size: calc(12.5px * var(--ts, 1)); opacity: .8; }

.scoresheet { display: flex; flex-direction: column; gap: 10px; }
.scorerow2 { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.sr-head { display: flex; justify-content: space-between; }
.sr-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: calc(14px * var(--ts, 1)); margin-top: 2px; }
.sr-nums em { font-style: normal; color: var(--dim); }
.scorerow2 .hint { margin: 4px 0 0; font-size: calc(13px * var(--ts, 1)); }

.stat { white-space: nowrap; }
.repstep { border-top: 1px solid var(--line, #2b3045); padding: 6px 0; }
.repstep summary { cursor: pointer; margin: 0; padding: 6px 0; color: inherit; }
.repstep p { margin: 4px 0 4px 14px; font-size: calc(14px * var(--ts, 1)); opacity: .88; }
.repstep.plain { padding: 10px 0; }

/* title: three small buttons in one row, and the whole screen scrolls rather than cutting a button off on a short phone */
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.row3 .btn { padding: 0 6px; font-size: calc(17px * var(--ts, 1)); }
.title { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.title-top { padding-top: max(2vh, 8px); }
.emblem { width: min(46vw, 190px, 16vh); margin: 2vh auto 1vh; }
.tagline { margin-top: 10px; }
.title .menu { padding-bottom: 8px; }

/* goals: progress first, the arithmetic behind a triangle */
.goalbar { height: 10px; border-radius: 8px; background: var(--panel2, #232838); overflow: hidden; margin: 6px 0 4px; }
.goalbar i { display: block; height: 100%; background: linear-gradient(90deg, #5fa96a, #8fcb80); border-radius: 8px; min-width: 0; }
.sr-math summary, .sr-idle summary { cursor: pointer; color: var(--dim); font-size: calc(13.5px * var(--ts, 1)); margin: 6px 0 0; }
.scorerow2.ifnow { background: transparent; border-style: dashed; }

/* what you have just come by: a bar like an inventory row, but louder */

@keyframes gain-in { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* a site in the clearing sheet, worded like the printed Setup Card */
.sitecard { margin-top: 4px; }
.sitecard .setupline { margin: 4px 0; font-size: calc(15px * var(--ts, 1)); line-height: 1.35; color: var(--text); }
.sitecard .setupline.card { padding: 6px 8px; border-left: 3px solid #6c5aa8; background: rgba(108, 90, 168, .12); border-radius: 4px; }
.sitecard .setupline.dim { color: var(--dim); font-size: calc(14px * var(--ts, 1)); }

/* map chits drawn the way the game prints them */
.mrchit { flex: none; box-sizing: border-box; width: 62px; height: 62px; border-radius: 8px; border: 2px solid #1b1710; box-shadow: 0 2px 0 rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.35);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; color: #1b1710; line-height: 1.05; padding: 3px; overflow: hidden; }
.mrchit b { font-size: calc(12.5px * var(--ts, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.mrchit i { font-style: normal; font-size: calc(17px * var(--ts, 1)); font-weight: 800; }
.mrchit.sound { background: #d65d46; }
.mrchit.warning { background: #efeb7b; }
.mrchit.site { background: #efcc6e; }
.mrchit.special { background: #b491b4; }
.crow.chit { display: flex; align-items: center; gap: 12px; }
.crow.chit .callout { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.crow.chit .callout small { color: var(--dim); font-size: calc(14px * var(--ts, 1)); }
.crow.chit .who { display: inline-flex; align-items: center; gap: 6px; }
.crow.chit .who .ico { width: 36px; height: 36px; object-fit: contain; }
.crow.chit .who b { font-size: calc(17px * var(--ts, 1)); }

/* from the fight: look at belongings or the map, then come back */
.cb-peek { display: flex; align-items: center; gap: 8px; }
.cb-peek em { font-style: normal; margin-left: 4px; }
.peekbtn { min-height: 34px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: calc(15px * var(--ts, 1)); }
.peekbtn:active { background: var(--panel2); }
.combat-back { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, rgba(10,12,17,.95) 60%, rgba(10,12,17,0)); }
.combat-back .btn { width: 100%; }

/* colours of magic */
.mcolor { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); font-size: calc(15px * var(--ts, 1)); }
.mcolor img { width: 20px; height: 20px; object-fit: contain; }
.mcolor.white b { color: #f4f1e6; } .mcolor.black b { color: #cfcfd8; } .mcolor.grey b { color: #b9bec6; } .mcolor.purple b { color: #c7a2ee; } .mcolor.gold b { color: #e8c566; }

.calgrid { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.calweek { display: grid; grid-template-columns: 52px repeat(7, 1fr); gap: 4px; align-items: center; }
.calweek small { color: var(--dim); }
.calday { text-align: center; padding: 6px 0; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 40px; justify-content: center; }
.calday.past { opacity: .64; }          /* days gone by: fainter, numbers still 4.5:1 */ .calday.today { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
.calday.magic { border-color: #8f7cc0; }
.calday .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 1px; border: 1px solid #000; }
.dot.white { background: #f4f1e6; } .dot.black { background: #222; border-color: #aaa; } .dot.grey { background: #9aa0a6; } .dot.purple { background: #a77bd1; } .dot.gold { background: #8fcb80; }
.calrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.crow.magic { display: flex; align-items: center; gap: 12px; }

/* the Setup Card, pictured */
.setupcard.graphic h3 { margin: 16px 0 6px; }
.sc-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: calc(13px * var(--ts, 1)); color: var(--dim); align-items: center; margin-bottom: 4px; }
.sc-key span { display: inline-flex; align-items: center; gap: 5px; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; }
.sc-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc-card.site.found { border-color: #8fcb80; box-shadow: 0 0 0 1px #8fcb80 inset; }
.sc-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.sc-title b { font-size: calc(16px * var(--ts, 1)); } .sc-title em { font-style: normal; font-size: calc(12px * var(--ts, 1)); color: #8fcb80; } .sc-title small { color: var(--dim); font-size: calc(12.5px * var(--ts, 1)); }
.sc-card .mrchit { width: 52px; height: 52px; }
.sc-guard { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.18); border-radius: 8px; padding: 4px 6px; }
.sc-guard img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.sc-guard span { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.sc-guard b { font-size: calc(14px * var(--ts, 1)); } .sc-guard small { color: var(--dim); font-size: calc(12px * var(--ts, 1)); }
.sc-treasure { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sc-t { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.sc-t small, .sc-treasure > small { color: var(--dim); font-size: calc(12px * var(--ts, 1)); margin-left: 3px; }
.pip { display: inline-block; border-radius: 50%; border: 1px solid #000; }
.pip.small { width: 9px; height: 9px; background: #d9d4c4; }
.pip.large { width: 13px; height: 13px; background: #8fcb80; }
.sc-spell { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 5px; border-radius: 8px; background: #5b4a8c; color: #fff; font-style: normal; font-weight: 700; font-size: calc(12.5px * var(--ts, 1)); }
.sc-need { font-size: calc(12.5px * var(--ts, 1)); color: #e08a7a; }
.sc-dw { width: 52px; height: 52px; object-fit: contain; flex: none; background: #efe6d0; border-radius: 8px; padding: 2px; }
.sc-natives { display: flex; align-items: center; gap: 8px; }
.sc-natives img { width: 34px; height: 34px; object-fit: contain; background: #efe6d0; border-radius: 7px; padding: 1px; }
.sc-natives small { color: var(--dim); }
.sc-goods { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-good { display: inline-flex; align-items: center; gap: 4px; font-size: calc(12.5px * var(--ts, 1)); padding: 2px 6px; border-radius: 8px; background: rgba(0,0,0,.2); }
.sc-good img { width: 22px; height: 22px; object-fit: contain; background: #efe6d0; border-radius: 5px; padding: 1px; }
.sc-spells { margin: 6px 0; } .sc-spells small { color: var(--dim); }
/* Note 107: the original pictures are black line art on transparent, so on the dark card they vanished. Every one sits on the cream counter plate (the same plate belongings, trade and the journal use). */
.setupcard img { background: var(--counter-face); border: 1px solid var(--counter-edge); border-radius: 8px; padding: 3px; box-sizing: border-box; }
.setupcard .sc-good { padding: 3px 8px 3px 3px; gap: 6px; }
.setupcard .sc-good img { border-radius: 6px; padding: 2px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.sc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); font-size: calc(13.5px * var(--ts, 1)); }

.sc-card .mrchit { width: 64px; height: 56px; } .sc-card .mrchit b { font-size: calc(12px * var(--ts, 1)); letter-spacing: 0; }

/* the item card (play/piece_card.js): a big counter, its numbers in words */
.piececard { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.piececard .big { display: grid; place-items: center; padding: 4px 0; }
.piececard .big svg { width: min(220px, 62vw); height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55)); }
.piececard .facts { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font: 400 15px/1.35 var(--font-voice); color: var(--ink-2); }
.pieceopen { cursor: pointer; }

/* the calendar's colours of magic, drawn with the colour-magic art (note 84), and its Turn order tab (note 85) */
.calendar .kit-seg { margin: 2px 0 10px; }
.calday { min-height: 48px; }
.calday .blasts { display: flex; justify-content: center; align-items: center; gap: 0; }
.calday .blast { width: 24px; height: 24px; object-fit: contain; }
img.blast { border-radius: 5px; background: var(--counter-face); box-sizing: border-box; padding: 1px; }          /* the Black magic chit is near-black: on a parchment plate it reads (ui_screens art 1.3:1) */
.calday.two .blast { width: 17px; height: 17px; }
.calday.magic { border-color: var(--gold-lo, #8f7cc0); }
.mcolor.big { padding: 2px 12px 2px 4px; gap: 8px; min-height: 40px; }
.mcolor.big img { width: 32px; height: 32px; }
.calrow > b { min-width: 52px; }

.calstages { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.calstage { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.calstage.now { border-color: var(--gold); background: var(--gold-wash, var(--panel)); box-shadow: 0 0 0 1px var(--gold) inset; }
.calstage-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 10px; text-align: left; color: var(--text); background: none; border: 0; font: inherit; cursor: pointer; }
.calstage-head .n { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 700; font-size: calc(14px * var(--ts, 1)); color: var(--dim); }
.calstage.now .n { background: var(--gold); border-color: var(--gold); color: #0b0e12; }
.calstage-head .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.calstage-head b { font-size: calc(17px * var(--ts, 1)); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.calstage-head .here { font-style: normal; font-weight: 700; font-size: calc(12px * var(--ts, 1)); letter-spacing: .04em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 1px 8px; }
.calstage-head .l { font-size: calc(15px * var(--ts, 1)); color: var(--ink-2, var(--dim)); }
.calstage-head .now-line { font-size: calc(14px * var(--ts, 1)); color: var(--gold); font-weight: 600; }
.calstage-head .chev { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--dim); transition: transform .15s; }
.calstage.open .chev { transform: rotate(180deg); }
.calstage-more { display: none; padding: 0 12px 8px 48px; }
.calstage.open .calstage-more { display: block; }
.calstage-more p { margin: 4px 0; font-size: calc(15px * var(--ts, 1)); line-height: 1.35; }
.caldraw { margin: 4px 0; }
.calparty { margin: 4px 0 8px; padding-left: 20px; font-family: var(--font-voice, inherit); }
.calparty li { margin: 6px 0; font-size: calc(15px * var(--ts, 1)); line-height: 1.35; }