/* Guide chord grid: gives [ukuchords] cards the exact song-page card chrome.
   This stylesheet is enqueued ONLY on guide pages that actually contain the
   [ukuchords] shortcode, so any bare/global selector here affects nothing else
   on the site, just those guide pages. Kept in step with the song template
   (templates/post-single/content-classic-test.php) and inc/uku-theme.css. */

/* Wrapper layout: stays scoped to the on-page grid. */
.uku-guide-chords {
	text-align: center;          /* same centred, inline-block flow as the song page */
	margin: 1.6em auto;
	line-height: 0;              /* kill baseline whitespace gaps between cards */
}

/* On-page card chrome: stays scoped to the on-page grid. The popover preview
   card uses the picker's OWN container class (.uku-vp-card), not .cits-c-b, so
   .cits-c-b must stay scoped here. Un-scoping it would do nothing for the
   popover and could leak the paper-card look onto unrelated elements. Mirrors
   the song template's .cits-c-b chrome. */
.uku-guide-chords .cits-c-b {
	display: inline-block;
	vertical-align: middle;
	margin: 7px;
	padding: 3px;
	border-radius: 8px;
	background: #fbfbf1;                       /* cream card */
	box-shadow: 1px 1px 5px #999;
	position: relative;
	box-sizing: border-box;
	line-height: normal;
}
html[data-theme="dark"] .uku-guide-chords .cits-c-b {
	background: #25241f !important;
	border: 0 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .45) !important;
}

/* .uku-chord-svg is INTENTIONALLY bare / global.
   The variation picker (js/uku-variation-picker.js) appends its popover to
   document.body, OUTSIDE the .uku-guide-chords wrapper. The popover preview is
   a fresh SVG that the renderer hard-codes with class "uku-chord-svg". On song
   pages the equivalent rules are bare/global (content-classic-test.php line 668
   for light, inc/uku-theme.css line 3482 for dark), so they reach that
   body-level preview and give it its recessed-paper look. If these rules were
   scoped to .uku-guide-chords they would never reach the popover, leaving it
   flat (no inset shadow, wrong padding and stroke weight). Values are copied
   verbatim from the song template so guide and song diagrams are pixel-identical.
   The picker's own .uku-vp-dia svg { width:100%; height:auto } overrides only
   the width/height for the preview; the inset shadow, radius, padding and
   font-size still apply, which is exactly what we want. */
.uku-chord-svg {
	display: block;
	height: 140px;
	width: auto;
	margin: 0 auto;
	font-size: 9px !important;                 /* overrides the inline 11px on the <svg> */
	box-shadow: inset 0 0 20px #b4b3a6;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 8px 3px 0 0;
}

/* Dark mode: matches inc/uku-theme.css line 3482. Bare/global (gated only on
   html[data-theme="dark"], no on-page container) so it reaches the body-level
   popover preview SVG just like on song pages. */
html[data-theme="dark"] .uku-chord-svg {
	box-shadow: inset 0 0 18px rgba(0, 0, 0, .50) !important;
}