/* ===== KEYBOARD SHORTCUTS BUNDLE: THE KEYCAP AND THE SHORTCUT LEDGER ===== */
/* DOCS: AI Resources/Core Resources/Code Documentation/page_templates/css/keyboard_shortcuts/main.md */

/* ----- THE KEYCAP: FLUSH IN ITS CONTROL'S CORNER ----- */
.Shortcut_Keycap
	{
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 4px;
		box-sizing: border-box;
		border: 0 solid var(--Color_Secondary_Deep);
		border-left-width: 2px;
		border-bottom-width: 2px;
		border-radius: 0 0 0 4px;
		background: var(--Color_Div_2);
		color: var(--Color_Main);
		font-family: var(--Font_Mono);
		font-weight: 600;
		font-size: 11px;
		font-style: normal;
		line-height: 1;
		letter-spacing: 0;
		text-transform: none;
		white-space: nowrap;
	}
.Shortcut_Keycap:has(> .Shortcut_Keycap_Glyph) { padding: 0; }
.Shortcut_Keycap_Glyph { display: inline-flex; line-height: 0; }
.Shortcut_Keycap_Glyph svg { width: 12px; height: 12px; fill: currentColor; }
.Shortcut_Keycap_Glyph_Left svg { transform: rotate(180deg); }
.Shortcut_Keycap_Glyph_Up svg { transform: rotate(-90deg); }
.Shortcut_Keycap_Glyph_Down svg { transform: rotate(90deg); }

/* ----- THE HOST: THE CONTROL THE KEY FIRES ----- */
:where(button, [role="button"]):has(> .Shortcut_Keycap) { position: relative; }
:is(.Main_Button, .Yes_Button, .No_Button, .Gray_Button) > .Shortcut_Keycap { border-top-right-radius: 2px; }
:disabled > .Shortcut_Keycap { opacity: 0.55; filter: saturate(0); }
.Button_Loading > .Shortcut_Keycap { visibility: hidden; }

/* ----- THE SHORTCUT LEDGER: A KEYCAP TAB UNDER THE TOP PANEL ----- */
.Shortcut_Ledger { position: relative; z-index: 10; height: 0; }
.Shortcut_Ledger_Tab { width: 38px; height: 28px; background: var(--Color_Div_1); }
.Shortcut_Ledger_Tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.Shortcut_Ledger_Panel { position: absolute; top: 33px; right: 0; width: max-content; min-width: 320px; max-width: calc(100vw - 32px); }
.Shortcut_Ledger_List { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.Shortcut_Ledger_Column + .Shortcut_Ledger_Column { border-left: 2px solid var(--Color_Secondary_Deep); }
.Shortcut_Ledger_List .Data_Table td { white-space: nowrap; }
.Shortcut_Ledger_List .Data_Table td:first-child { width: 44px; }
.Shortcut_Ledger_List .Shortcut_Keycap { position: static; vertical-align: middle; }

/* ----- NARROW WINDOWS: THE COLUMNS STACK ----- */
@media (max-width: 640px)
	{
		.Shortcut_Ledger_List { grid-auto-flow: row; }
		.Shortcut_Ledger_Column + .Shortcut_Ledger_Column { border-left: 0; }
	}

/* ----- TOUCH DEVICES: NO KEYCAPS, NO LEDGER ----- */
@media (hover: none) and (pointer: coarse)
	{
		.Shortcut_Keycap, .Shortcut_Ledger { display: none; }
	}