/*
 * css/stack-panel.css
 *
 * Stack-panel styles shared by the harness Stack Inspector and the in-game
 * stack HUD. Loaded by BOTH harness.html and index.html so the renderer in
 * src/games/squad-leader/views/stack-panel.ts looks identical in either host.
 * (Moved out of harness.css, which the game does not load.)
 */

.h-hint { margin-top: 8px; font-size: 11px; color: #999; font-style: italic; }

.h-stack-header {
	margin: 8px 0 6px;
	padding: 6px 8px;
	background: #1d1f21;
	border: 1px solid #333;
	border-radius: 3px;
}
.h-stack-header-top {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
}
.h-stack-hex {
	font: bold 14px monospace;
	color: #fff;
}
.h-stack-terrain {
	font-size: 11px;
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.h-stack-header-counts {
	display: flex;
	gap: 10px;
	font-size: 10px;
	color: #aaa;
}
.h-stack-count.h-stack-overcap {
	color: #f88;
	font-weight: bold;
}

.h-stack-rows {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 4px;
}
.h-stack-row {
	background: #2a2d30;
	border: 1px solid #333;
	border-radius: 3px;
	padding: 5px 7px;
}
.h-stack-row-selected {
	border-color: #6aa9ff;
	background: #2f4d6e;
}
.h-stack-row-clickable {
	cursor: pointer;
}
.h-stack-row-clickable:hover {
	border-color: #555;
	background: #303437;
}
/* ACTIVE row — the single unit foregrounded for ops. Only the active row
   is highlighted; a merely-checked row shows ☑ but no highlight. */
.h-stack-row-active {
	border-color: #6aa9ff;
	background: #2f4d6e;
}
.h-stack-row-active:hover {
	border-color: #8bbcff;
	background: #355880;
}
.h-stack-check {
	font-size: 14px;
	line-height: 1;
	color: #888;
	cursor: pointer;
	user-select: none;
}
.h-stack-check:hover { color: #bbb; }
.h-stack-check-on { color: #6aa9ff; }
.h-stack-active-badge {
	font-size: 9px;
	font-weight: bold;
	letter-spacing: 0.5px;
	color: #6aa9ff;
}
.h-stack-row-head {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}
.h-stack-unit-name {
	font-weight: bold;
	color: #fff;
}
/* Namespaced side classes — `.side0/.side1` collide with the counter-sprite
   rules in sprack-minisl.css (35x35 absolute boxes), which clipped the name. */
.h-stack-unit-name.h-side0 { color: #cdd; }
.h-stack-unit-name.h-side1 { color: #fcc; }
.h-stack-unit-stats {
	font: 11px monospace;
	color: #ddd;
	margin-left: auto;
}
.h-stack-row-meta {
	font-size: 10px;
	color: #999;
	margin-top: 3px;
}
.h-stack-pill {
	display: inline-block;
	font-size: 9px;
	font-weight: bold;
	letter-spacing: 0.5px;
	background: #5a2a2a;
	color: #fdd;
	padding: 1px 5px;
	border-radius: 2px;
}

.h-stack-support {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font: 11px monospace;
	color: #ccc;
	padding: 2px 0 2px 8px;
}
.h-stack-support-glyph { color: #666; }
.h-stack-support-name { color: #ddd; }
.h-stack-support-stats { color: #aaa; }
.h-stack-support-pp { color: #aaa; margin-left: auto; }

.h-stack-loose {
	margin-top: 8px;
	padding-top: 6px;
	border-top: 1px dashed #444;
}
.h-stack-loose-heading {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #888;
	margin-bottom: 4px;
}
.h-stack-loose-row {
	display: flex;
	gap: 6px;
	font: 11px monospace;
	padding: 2px 0;
}

/*
 * Interactive stack-tile panel (task 056, views/stack-tiles.ts) — the
 * in-game counter-face panel. Tiles are clones of the live marker DOM
 * (39x38 absolute boxes), so each face sits inside a relative .st-face
 * shell that gives it layout size.
 */
.st-hint { margin-top: 10px; font-size: 11px; color: #999; font-style: italic; }

.st-header {
	margin: 8px 0 6px;
	padding: 6px 8px;
	background: #1d1f21;
	border: 1px solid #333;
	border-radius: 3px;
}
.st-title {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
}
.st-hex { font: bold 14px monospace; color: #fff; }
.st-terrain {
	font-size: 11px;
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.st-caps { display: flex; gap: 10px; font-size: 10px; color: #aaa; }
.st-cap.st-over { color: #f88; font-weight: bold; }

.st-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 6px;
}
.st-tile {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	background: #2a2d30;
	border: 1px solid #333;
	border-radius: 3px;
}
.st-clickable { cursor: pointer; }
.st-clickable:hover { border-color: #555; background: #303437; }

/* The face shell: gives the cloned absolute-positioned marker a layout box.
   Clones keep their map classes (.marker etc.), so pin them to the shell. */
.st-face {
	position: relative;
	width: 43px;
	height: 42px;
	flex: 0 0 auto;
}
.st-face > div {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	cursor: inherit !important;
}

/* Carried weapon: nested under its carrier, slightly inset + smaller.
   The map's 135° carried rotation is undone — nesting shows the relation. */
.st-carried { margin-left: 26px; padding: 3px 8px; }
.st-carried .st-face { transform: scale(0.8); transform-origin: left center; }
.st-carried .st-face .rot_counter_45 { transform: none; }

.st-loose-hdr {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px dashed #444;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #888;
}

/*
 * --- Bottom-docked horizontal stack HUD (task 056 Slice C) ---
 * User direction 2026-07-31: the selected stack reads left→right in
 * Units | Leaders | Weapons sections along the bottom of the screen.
 * User direction 2026-08-01: enclosed floating rectangle, matching the
 * map-overlay widget language (.fc-widget in sprack-minisl.css) —
 * centered, lifted off the edge, shrink-to-fit around its content.
 */
.st-bottom {
	position: fixed;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	max-width: calc(100% - 24px);
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 10px 14px;
	background: rgba(0, 0, 0, 0.82);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 3000;
}
.st-bottom .st-header {
	margin: 0;
	padding: 6px 10px;
	flex: 0 0 auto;
	min-width: 110px;
}
.st-bottom .st-hint { margin: 12px 0; }
/* The HUD floats in the root stacking context (z 3000), above everything
   inside the playfield's transform context — including modals. Yield while
   a modal (scenario intro card) is open; the renderer stamps the class. */
body.minisl-modal-open .st-bottom {
	visibility: hidden;
}

.st-sections {
	display: flex;
	align-items: flex-start;
	gap: 22px;
}
.st-section-hdr {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #888;
	margin-bottom: 4px;
}
.st-section-tiles {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
/* In the bottom bar a tile is a compact vertical cell: face over label. */
.st-bottom .st-tile {
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 5px 6px;
}
/* Sections replace the nested-row treatment — no indent/scale carryover. */
.st-bottom .st-carried { margin-left: 0; padding: 5px 6px; }
.st-bottom .st-carried .st-face { transform: none; }

/* Docked ownership (2026-08-06): a carrier and its weapons share one
   grouped cell — adjacency IS the attachment indication. */
.st-group {
	display: flex;
	align-items: flex-start;
	gap: 2px;
	padding: 2px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid #4a4f53;
	border-radius: 6px;
	/* The ring (border+padding = 3px) draws OUTWARD so grouped tiles stay
	   on the same baseline as ungrouped ones. */
	margin: -3px;
}
.st-group .st-tile {
	border-color: transparent;
	background: transparent;
}
.st-docked .st-face .rot_counter_45 { transform: none; }

/* Arming mode: while a weapon glows armed, unit tiles advertise
   themselves as attach targets. */
.st-arming .st-unit.st-clickable {
	border: 1px dashed rgba(255, 212, 0, 0.55);
}

.st-sub {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #999;
}
.st-carried .st-sub { color: #8fb98f; }

/* Armed weapon tile — panel mirror of the map's .armed_counter glow
   (the Rule 5.7 pickup/drop gesture state). */
.st-tile.st-armed {
	border-color: #ffd400;
	box-shadow: 0 0 8px 2px rgba(255, 212, 0, 0.65);
}

/* Status glow mirrors (Slice D) — same color language as the map rings
   (sprack-minisl.css): orange = must rout (§13.2), deep red = berserk
   (§18.4), amber = repairable weapon (§18.2). Face art (broken/DM/prep
   fire) already rides the clone; only outer-wrapper glows need mirroring. */
.st-tile.st-mustrout {
	border-color: #ff4d1f;
	box-shadow: 0 0 8px 2px rgba(255, 77, 31, 0.65);
}
.st-tile.st-berserk {
	border-color: #d40000;
	box-shadow: 0 0 8px 2px rgba(212, 0, 0, 0.65);
}
.st-tile.st-repairable {
	border-color: #d9a441;
	box-shadow: 0 0 8px 2px rgba(217, 164, 65, 0.65);
}

/* Setup tray (task 127) — the off-board placement dock reuses the stack
   HUD's bottom-dock frame and tile vocabulary. Green = "selected for
   placement", matching the map's green legal-hex fill. */
.st-tile.st-setup-selected {
	border-color: #35c04a;
	box-shadow: 0 0 8px 2px rgba(53, 192, 74, 0.65);
	cursor: pointer;
}
#setupTray .st-tile { cursor: pointer; }

/*
 * --- Scenario-card setup tray (task 127 iteration) ---
 * The tray keeps the printed card's LAYOUT (side emblem column, formation
 * title, per-building boxes labeled "In building F5", one face per counter
 * type with a red countdown digit below) but wears the app's dark HUD
 * widget language instead of the paper replica — user direction
 * 2026-08-22: bg = black + the established look & feel (.st-bottom frame,
 * #2a2d30 cells, #333 borders, uppercase grey labels, sans-serif).
 */
#setupTray.st-card {
	/* left:50% halves the shrink-to-fit space; size to content instead
	   (the .st-bottom max-width cap still applies on narrow windows).
	   Background/border/radius/blur come from the .st-bottom frame. */
	width: max-content;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	color: #ccc;
	font-family: Helvetica, Arial, sans-serif;
	padding: 8px 12px 10px;
}
.st-card-status {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #888;
	text-align: center;
}
.st-card-panel {
	display: flex;
	align-items: stretch;
	gap: 12px;
}
/* Left column: emblem over the reserved soldier-illustration slot. Drop the
   scan-extracted art in as an <img> inside .st-side-art with no layout
   change (fixed column width, like the card). */
.st-card-sidecol {
	flex: 0 0 auto;
	width: 56px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding-top: 2px;
}
.st-card-emblem { line-height: 0; }
.st-side-art {
	flex: 1 1 auto;
	width: 48px;
	min-height: 40px;
}
.st-side-art img { max-width: 100%; height: auto; display: block; }
.st-card-main {
	/* Formations flow side by side so a multi-formation side (the Russians:
	   308th Rifle Div + 37th Guards) reads as ONE row like the German panel;
	   wrap stays as the narrow-window fallback. */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px 28px;
	min-width: 0;
}
.st-card-formation-title {
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #aaa;
	margin-bottom: 4px;
}
.st-card-groups {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px 16px;
}
.st-card-group-label {
	font-size: 10px;
	color: #999;
	margin-bottom: 2px;
}
/* The counter box: a dark cell in the HUD tile vocabulary. */
.st-card-box {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 6px;
	background: #2a2d30;
	border: 1px solid #333;
	border-radius: 3px;
}
/* Red quantity digits, one cell aligned under each face. */
.st-card-counts {
	display: flex;
	gap: 6px;
	padding: 1px 6px 0;
}
.st-card-count {
	width: 45px;
	min-height: 14px;
	text-align: center;
	color: #f88;
	font-size: 12px;
	font-weight: bold;
}
/* A slot cell: the face clone plus a physical counter-stack shadow that
   deepens with the remaining quantity. */
.st-cell {
	position: relative;
	width: 45px;
	height: 44px;
	cursor: pointer;
	flex: 0 0 auto;
}
.st-cell .st-face { width: 43px; height: 42px; }
.st-cell.st-depth1 .st-face { box-shadow: 2px 2px 0 #3a3f43, 2px 2px 0 1px #17191b; }
.st-cell.st-depth2 .st-face {
	box-shadow: 2px 2px 0 #3a3f43, 2px 2px 0 1px #17191b,
		4px 4px 0 #3a3f43, 4px 4px 0 1px #17191b;
}
/* Emptied slot: its counters are on the board — ghost the printed face. */
.st-cell.st-ghost { cursor: default; }
.st-cell.st-ghost .st-face { opacity: 0.25; filter: grayscale(0.7); }
/* Selection ring matches the map's green legal-hex fill. */
.st-cell.st-setup-selected .st-face {
	outline: 2px solid #35c04a;
	outline-offset: 1px;
	box-shadow: 0 0 8px 2px rgba(53, 192, 74, 0.65);
}