/*
 * The pieces' shared look (includes/pieces.php): the frame every piece sits in, the controls, and
 * the materials pieces are made of (board black, enamel, ticket card, brass, steel), lit from above
 * like the departure board's flaps. Each piece's own look is in its own file. Every word sits on a
 * plain panel at 7:1 or more; shading is for objects, never under text.
 */

:root {
	--p-board: linear-gradient(#1b1d21, #0f1114 72%);
	--p-card: #f7f2e5;
	--p-card-ink: #15171a;
	--p-brass: linear-gradient(150deg, #f4dea0 0%, #cf9f40 36%, #8c6219 62%, #e6c06a 100%);
	--p-steel: linear-gradient(180deg, #eef0f2 0%, #c2c7ce 52%, #8e949d 100%);
	--p-lift: 0 1px 0 rgba(0, 0, 0, .28), 0 16px 26px -18px rgba(0, 0, 0, .6);
	--p-enamel: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .16);
}

/* ---- The frame -------------------------------------------------------------------------------- */

.piece { position: relative; margin: 2.2em 0; padding: 16px 18px 0; background: var(--paper); border: 1px solid var(--stone-2); border-radius: var(--radius); }
.piece__title { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0 10px; margin: 0 0 14px; font: 700 1.15rem/1.2 var(--board-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.piece__title .bullet { margin: .2em 0 0; }
.piece__body { position: relative; }
.piece__foot { margin: 16px -18px 0; padding: 12px 18px 14px; border-top: 1px solid var(--stone-2); }
.piece__note { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.piece__foot .cite { margin: 6px 0 0; font-size: .95rem; }
.prose .piece p { margin-bottom: 0; }

.piece--dark { background: var(--p-board); border-color: #000; color: var(--flap-ink); box-shadow: inset 0 1px 0 #30343b, 0 26px 50px -30px rgba(0, 0, 0, .7); }
.piece--dark .piece__title { color: var(--signal); }
.piece--dark .bullet { box-shadow: 0 0 0 2px #121417, 0 0 0 3.5px var(--line); }
.piece--dark .piece__foot { border-color: #2a2e34; }
.piece--dark .piece__note { color: #cfcac0; }
.piece--dark .cite { color: #bdb8ae; }
.piece--dark a { color: #a9cdf8; }

/* ---- Controls --------------------------------------------------------------------------------- */

/* A station push-button: signal yellow, pressed in when held. */
.p-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 8px; background: var(--signal); color: var(--signal-ink); font: 700 1.05rem/1 var(--board-font); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 2px 0 #000; }
/* Focus: a dark ring with a yellow one outside it, so it reads on a yellow button, on paper and on the board. */
.p-btn:focus-visible { outline: 3px solid var(--board); outline-offset: 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 0 0 8px var(--signal); }
.p-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 1px 0 #000; }
.p-btn--quiet { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.p-btn svg { width: 14px; height: 14px; fill: currentColor; }

/* A slider drawn as a length of rail with a stop on it; a real range input underneath, for keys and readers. */
.p-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.p-range:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.p-range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--line) var(--p-fill, 0%), var(--stone-2) var(--p-fill, 0%)); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25); }
.p-range::-moz-range-track { height: 8px; border-radius: 4px; background: var(--stone-2); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25); }
.p-range::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--line); }
.p-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--paper); border: 6px solid var(--board); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.p-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 6px solid var(--board); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.piece--dark .p-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--line) var(--p-fill, 0%), #3a3f46 var(--p-fill, 0%)); }
.piece--dark .p-range::-moz-range-track { background: #3a3f46; }
.piece--dark .p-range::-webkit-slider-thumb { background: var(--signal); border-color: #000; }
.piece--dark .p-range::-moz-range-thumb { background: var(--signal); border-color: #000; }

/* In dark mode the paper and the board are both dark: the stop on a light stage's slider turns signal yellow. */
@media (prefers-color-scheme: dark) {
	.p-range::-webkit-slider-thumb { background: var(--signal); border-color: #000; }
	.p-range::-moz-range-thumb { background: var(--signal); border-color: #000; }
}

/* An enamel plate: paper-white enamel, a rim in the line's colour, dark lettering. */
.p-plate { display: inline-grid; place-items: center; min-width: 2.4em; height: 1.9em; padding: 0 .45em; border-radius: 6px; background: #fbfaf6; color: #15171a; font: 700 1.2rem/1 var(--board-font); letter-spacing: .02em; box-shadow: inset 0 0 0 3px var(--line), var(--p-enamel), 0 2px 0 rgba(0, 0, 0, .35); white-space: nowrap; }

/* A line read out to screen readers as it changes, unseen. */
.p-live { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Flaps in a piece: the board's flaps (site.css), a size smaller. */
.piece .flaps--sm .flaps__cells i { font-size: 1.25rem; }

@media (max-width: 599px) {
	.piece { padding: 14px 12px 0; margin-inline: -4px; }
	.piece__foot { margin: 14px -12px 0; padding: 10px 12px 12px; }
}
@media print {
	.piece { break-inside: avoid; }
	.p-btn, .p-range { display: none; }
}