/* TestRoute - Road signs PRACTICE WINDOW additions v2.0.0 (core 4.107.0)
 * Loads AFTER show-tell/assets/session.css (the shared window, same screens, same sizes).
 * Adds only what a sign needs:
 *   - the light plate a sign sits on (it has to read as it does on the road)
 *   - the sign in the deck preview, on the card and in the question
 *   - the four plates of a "which sign" question: the plate is the option,
 *     its key sits under it on a laptop
 *   - the small plate in the answer and in the review list
 * Same pixel rules as the window: a 4 px spacing scale, whole pixel sizes,
 * hairlines as box-shadows. Green stays the only accent: a wrong pick is
 * neutral, never red.
 * `!important` throughout per house rule 7 (Cornerstone stacking traps). */

/* ── the plate ── */
.tss .tss-plate{flex:0 0 auto !important;display:flex !important;align-items:center !important;justify-content:center !important;
	background:#f3f6f8 !important;box-shadow:inset 0 0 0 1px #dde4ea !important;border-radius:12px !important;padding:12px !important}
.tss .tss-plate img{display:block !important;width:100% !important;height:100% !important;max-width:100% !important;object-fit:contain !important;
	-webkit-user-drag:none !important;user-select:none !important;pointer-events:none !important}

/* ── start screen: the first sign in the deck preview, the question beside it ── */
.tss .tss-pc-sign{display:flex !important;align-items:center !important;gap:24px !important;height:100% !important;min-width:0 !important}
.tss .tss-pc-sign .tss-plate{width:112px !important;height:112px !important}
.tss .tss-pc-sign>span:last-child{font-size:17px !important;line-height:26px !important;font-weight:600 !important;letter-spacing:-.01em !important;
	color:var(--tss-hi) !important;text-wrap:balance}
@media (min-width:960px) and (min-height:560px){
	.tss .tss-pc-sign{gap:32px !important}
	/* 144 when the preview has the room (always from 720 px high), else the height of the preview */
	.tss .tss-pc-sign .tss-plate{width:auto !important;height:min(144px,100%) !important;aspect-ratio:1/1 !important;min-width:0 !important;min-height:0 !important;padding:16px !important}
	.tss .tss-pc-sign>span:last-child{font-size:24px !important;line-height:32px !important}
}

/* ── flashcard: the sign is the whole front; the back shows it small beside its name ── */
.tss .tss-face-mid--plate{align-items:center !important}
.tss .tss-plate--card{width:200px !important;height:200px !important;padding:20px !important;border-radius:16px !important;
	box-shadow:inset 0 0 0 1px #dde4ea,0 16px 32px -16px rgba(0,0,0,.6) !important}
@media (min-width:960px) and (min-height:720px){
	.tss .tss-plate--card{width:240px !important;height:240px !important;padding:24px !important}
}
.tss .tss-signrow{display:flex !important;align-items:center !important;gap:16px !important}
.tss .tss-signname{flex:1 !important;min-width:0 !important;font-size:22px !important;line-height:30px !important;font-weight:600 !important;letter-spacing:-.01em !important;
	color:var(--tss-hi) !important;text-wrap:balance}
@media (min-width:960px) and (min-height:560px){
	.tss .tss-signrow{gap:20px !important}
	.tss .tss-signrow .tss-plate--sm{width:56px !important;height:56px !important;padding:8px !important;border-radius:10px !important}
	.tss .tss-signname{font-size:28px !important;line-height:36px !important}
}

/* ── quiz, "what does this sign mean": the sign under the question, on the content edge ── */
.tss .tss-qzsign{display:flex !important;margin:0 0 20px !important}
.tss .tss-plate--q{width:128px !important;height:128px !important;padding:16px !important}
@media (min-width:720px){.tss .tss-plate--q{width:144px !important;height:144px !important}}
@media (min-width:960px) and (min-height:560px){.tss .tss-qzsign{margin-bottom:24px !important}}

/* ── quiz, "which sign means": four plates, two per row on a phone, one row from 720 px ── */
.tss .tss-imgopts{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}
@media (min-width:720px){.tss .tss-imgopts{grid-template-columns:repeat(4,minmax(0,1fr)) !important}}
.tss .tss-imgopt{position:relative !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:8px !important;
	width:100% !important;min-width:0 !important;border-radius:12px !important}
.tss .tss-imgopt:disabled{cursor:default !important}
.tss .tss-plate--opt{width:100% !important;height:auto !important;aspect-ratio:1/1 !important;min-width:0 !important;min-height:0 !important;
	padding:16px !important;transition:box-shadow .15s !important}
.tss .tss-imgopt:not(:disabled):hover .tss-plate--opt,
.tss .tss-imgopt.is-wrong .tss-plate--opt{box-shadow:inset 0 0 0 1px #dde4ea,0 0 0 2px rgba(255,255,255,.4) !important}
.tss .tss-imgopt.is-correct .tss-plate--opt{box-shadow:inset 0 0 0 1px #dde4ea,0 0 0 2px var(--tss-green) !important}
.tss .tss-imgopt.is-dim{opacity:.44 !important}
/* the key under the plate: the same key as on a text answer */
.tss .tss-imgopt kbd{order:2 !important;height:24px !important;min-width:24px !important;padding:0 !important;border-radius:6px !important;
	font-size:12px !important;line-height:24px !important;color:var(--tss-mid) !important;
	background:rgba(255,255,255,.06) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16) !important}
/* the mark in the plate's corner once answered: green tick on the right one, a neutral cross on a wrong pick */
.tss .tss-imgopt-mark{position:absolute !important;top:8px !important;right:8px !important;width:24px !important;height:24px !important;border-radius:12px !important;
	display:none !important;align-items:center !important;justify-content:center !important}
.tss .tss-imgopt.is-correct .tss-imgopt-mark{display:flex !important;background:var(--tss-green) !important;color:var(--tss-green-deep) !important}
.tss .tss-imgopt.is-wrong .tss-imgopt-mark{display:flex !important;background:var(--tss-ink) !important;color:var(--tss-hi) !important}
.tss .tss-imgopt-mark svg{width:14px !important;height:14px !important}

/* ── the answer: the sign small, its name and meaning beside it (two lines of 24 = the plate) ── */
.tss .tss-plate--sm{width:48px !important;height:48px !important;padding:6px !important;border-radius:8px !important}
.tss .tss-why-row{display:flex !important;align-items:flex-start !important;gap:16px !important;margin:8px 0 24px !important}
.tss .tss-why-row .tss-why{flex:1 !important;min-width:0 !important;margin:0 !important}
.tss .tss-why b{display:block !important;font-weight:600 !important;color:var(--tss-hi) !important}

/* ── end of a session: the review list shows the sign instead of the dot ── */
.tss .tss-again--signs li{align-items:center !important}
.tss .tss-again--signs li::before{display:none !important}
.tss .tss-again--signs .tss-plate--sm{width:32px !important;height:32px !important;padding:4px !important;border-radius:6px !important}