// ================================================================================================
// FIELD KIT UI SYSTEM · Placement Kit · demo key-hint card
//
// SOURCE OF TRUTH: docs/design/ui-system/tokens.dc.html
//                  (+ components.dc.html for the parts, placement-kit.dc.html for this screen)
//
// DRIFT NOTE. s&box cannot express a library-to-library dependency, so a kit must never @import
// another kit's stylesheet. Every kit carries its OWN copy of the token values below, and this
// kit's two panels each carry a copy. Nothing syncs them: if a value moves on the tokens page,
// hand-update it here, in TweakPanel.razor.scss, and in every other kit.
//
// ENGINE-LEGAL SUBSET (the mockups are browser HTML and contain CSS this engine cannot parse):
// border-width + border-color only, never `border: 1px solid x` (border-style is a parse error
// that aborts the whole stylesheet); no box-shadow; no letter-spacing; no `inset` shorthand; no
// percent max-height on an absolute card; explicit px line-heights; font sizes only from
// {12, 13, 14, 16}.
//
// CONTRAST LAW (overrides the mockups wherever they are dimmer): nothing a player reads is dimmer
// than #E8EAED, key badges are pure #FFFFFF at weight 700. The 42px close x is the only close
// affordance on this card; there is no ESC badge, here or anywhere.
// ================================================================================================

// ---- base tokens (shared across kits, copied per kit) ----
$fk-panel-bg:     rgba( 15, 17, 21, 0.92 );
$fk-border:       rgba( 255, 255, 255, 0.08 );
$fk-border-hi:    rgba( 255, 255, 255, 0.12 );
$fk-row:          rgba( 255, 255, 255, 0.05 );
$fk-hover:        rgba( 255, 255, 255, 0.10 );

$fk-text-hi:      #F2F4F7;
$fk-text:         #E8EAED;
$fk-key-glyph:    #FFFFFF;

// No accent token here on purpose: this card is entirely neutral in the mockup. Tinting the key
// chips would compete with the tweak panel, which is where the green (#5CE3A4) does its work.

$fk-ui-font:      Poppins, sans-serif;
$fk-mono-font:    "Roboto Mono", monospace;

DemoHintCard {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	pointer-events: none;
	font-family: $fk-ui-font;

	// Only the card takes clicks, so the scene keeps the cursor everywhere else.
	.hc-card {
		position: absolute;
		top: 40px;
		left: 40px;
		width: 440px;
		flex-direction: column;
		gap: 12px;
		padding: 20px;
		pointer-events: all;
		background-color: $fk-panel-bg;
		border-width: 1px;
		border-color: $fk-border;
		border-radius: 16px;
		color: $fk-text;
	}

	.hc-hdr {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.hc-title {
		font-size: 16px;
		line-height: 22px;
		font-weight: 700;
		color: $fk-text-hi;
	}
	// 42px hit target on a 16px glyph, matching the tweak panel. The negative margins pull it back
	// into the card's 20px padding so the header row stays compact.
	.hc-x {
		font-size: 16px;
		line-height: 22px;
		color: $fk-text-hi;
		width: 42px;
		height: 42px;
		margin: -8px -12px -8px 0px;
		justify-content: center;
		align-items: center;
		border-radius: 6px;
		cursor: pointer;
		pointer-events: all;
		transition: all 0.12s ease;
		&:hover { background-color: $fk-hover; }
	}

	.hc-lede {
		font-size: 13px;
		line-height: 20px;
		color: $fk-text;
	}

	.hc-rows {
		flex-direction: column;
		gap: 8px;
	}
	.hc-row {
		flex-direction: row;
		// flex-start, not centre: the longer hints wrap to two lines, and a key chip floating half
		// way down its own explanation is the one place this card stops looking like the mockup.
		align-items: flex-start;
		gap: 12px;
	}
	// Fixed-width chip so every key column lines up and a chip never splits across a wrapped line.
	// Width is the whole box (no horizontal padding), which keeps the column exact.
	.hc-key {
		font-family: $fk-mono-font;
		font-size: 14px;
		line-height: 18px;
		font-weight: 700;
		color: $fk-key-glyph;
		width: 110px;
		flex-shrink: 0;
		padding: 3px 0px;
		justify-content: center;
		align-items: center;
		background-color: $fk-row;
		border-width: 1px;
		border-color: $fk-border-hi;
		border-radius: 5px;
	}
	.hc-what {
		font-size: 13px;
		line-height: 20px;
		color: $fk-text;
		flex-grow: 1;
	}

	.hc-foot {
		font-size: 13px;
		line-height: 20px;
		color: $fk-text;
		border-top-width: 1px;
		border-top-color: $fk-border;
		padding-top: 12px;
	}
}