/* UkuTabs — "How to play" panel (compact design; dark rules in inc/uku-theme-dark.css).
   Loaded via in-body <link> from inc/uku-strumming.php (Perfmatters-safe, filemtime-busted).
   The panel visually merges with the hero card: .chordssongbox keeps 0 bottom
   radius + 0 margin when the panel follows it (:has rules below), and the panel
   continues the card with the site's 5px bottom corners. The second :has selector
   tolerates the stylesheet <link> sitting between the two nodes. !important is
   required: the template sets these properties in an inline style attribute. */

.chordssongbox:has(+ .uku-strumbox),
.chordssongbox:has(+ link + .uku-strumbox) {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	margin-bottom: 0 !important;
}
.uku-strumbox {
	margin: 0 0 15px;
	border: none;
	border-top: 1px solid #d9d6c8;
	border-radius: 0 0 5px 5px;
	overflow: hidden;
	background: #f2f2e8;
}
/* The below-sheet answer block is a standalone card, not a hero continuation. */
.uku-strumbox--howto {
	border-top: none;
	border-radius: 5px;
	margin: 25px 0 0;
}
.uku-strumbox .ust-titlestrip {
	background: #e7e5d9;
	border-bottom: 1px solid #dcd9cb;
	padding: 9px 16px;
}
.uku-strumbox--howto .ust-titlestrip .ust-h2 { margin: 0; }
.uku-strumbox.uku-strumbox--howto .ust-body { padding-bottom: 9px; } /* doubled class, same reason */
.uku-strumbox.uku-strumbox--howto .ust-lede { margin-bottom: 0; } /* doubled class: must beat the later base lede rule */

/* Zone title strip: label + pattern name left, quiet hear-it pill right.
   Doubled selector: must beat the shared two-class strip rule above. */
.uku-strumbox .ust-titlestrip.ust-titlestrip--zone {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 3px 8px 3px 16px;
}
.uku-strumbox .ust-zname { font-size: 12.5px; font-weight: 600; color: #3d382e; }
.uku-strumbox .ust-zname a,
.uku-strumbox .ust-zname b { color: #a3321b; text-decoration: none; font-weight: 600; }
.uku-strumbox .ust-zname a { border-bottom: 1px solid rgba(163, 50, 27, 0.28); }
.uku-strumbox .ust-zname a:hover { border-bottom-color: #a3321b; }
.uku-strumbox .ust-body--zone { padding: 12px 16px 13px; }
.uku-strumbox .ust-body { padding: 13px 16px 14px; }
.uku-strumbox .ust-h2 {
	margin: 0 0 5px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: #3a352b;
	letter-spacing: 0.01em;
	line-height: 1.35;
	text-transform: none;
}
.uku-strumbox .ust-h2 em { font-style: normal; color: #a3321b; }

/* crawlable chords sentence with clickable chord chips. It sits in the hero
   card under the diagram buttons (its original spot); the .chordssongbox rule
   out-specifies the legacy centered strip in main-ukutabs.css. The .uku-strumbox
   floor variant stays for the block's chords_line_html API. */
.chordssongbox .chordsinthissong p.uku-chords-line {
	margin: 15px -5px -20px;
	padding: 12px 16px 12px;
	border: none;
	border-top: 1px solid #dddacd;
	border-radius: 0;
	font-size: 12.5px;
	color: #97917f;
	line-height: 1.8;
	background: none;
	text-align: left;
}
.uku-strumbox .uku-chords-line {
	margin: 0;
	padding: 12px 16px 13px;
	border: none;
	border-top: 1px solid #dddacd;
	font-size: 12.5px;
	color: #97917f;
	line-height: 1.8;
	background: none;
	text-align: left;
}
.uku-strumbox .uku-chords-line strong,
.chordssongbox .uku-chords-line strong { color: #5b5647; font-weight: 600; }
.uku-cl-chordlink { text-decoration: none; }
.uku-chords-line a.uku-cl-artist {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid #c9c3b3;
}
.uku-chords-line a.uku-cl-artist:hover { border-bottom-color: #97917f; }
.chordssongbox .uku-cl-chord,
.uku-strumbox .uku-cl-chord {
	display: inline-block;
	font-weight: 600;
	color: #6f6128;
	background: rgba(111, 97, 40, 0.07);
	border: 1px solid rgba(111, 97, 40, 0.14);
	border-radius: 5px;
	padding: 0 5px;
	margin: 0 1px;
	font-size: 11.5px;
}
.uku-cl-chordlink:hover .uku-cl-chord {
	background: rgba(111, 97, 40, 0.16);
	border-color: rgba(111, 97, 40, 0.35);
	color: #55501f;
}

/* prose lede */
.uku-strumbox .ust-lede {
	font-size: 13.5px;
	line-height: 1.55;
	color: #3d3d3d;
	margin: 0 0 15px;
}
.uku-strumbox .ust-lede a {
	color: #a3321b;
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid rgba(163, 50, 27, 0.32);
}
.uku-strumbox .ust-lede a:hover { border-bottom-color: #a3321b; }

/* zone label (lives in the title strip) */
.uku-strumbox .ust-zlabel {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: #a68e45;
}
.uku-strumbox .ust-zlabel--fallback { color: #6f6128; }
.uku-strumbox .ust-meter {
	margin-left: auto;
	font-size: 10.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 700;
	color: #6f6128;
	background: #efeada;
	border: 1px solid #e0d8bf;
	border-radius: 999px;
	padding: 1px 8px;
}

.uku-strumbox .ust-tiles { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; justify-content: safe center; }
.uku-strumbox .ust-slot { width: 34px; flex: 0 0 34px; text-align: center; }
.uku-strumbox .ust-slot__num {
	display: block;
	font-size: 10px;
	line-height: 1;
	font-weight: 600;
	color: #97917f;
	font-variant-numeric: tabular-nums;
	margin: 0 0 3px;
}
.uku-strumbox .ust-slot__cell {
	height: 34px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	transition: background-color 70ms ease, border-color 70ms ease;
}
.uku-strumbox .ust-slot__cell i { font-size: 15px; line-height: 1; }
.uku-strumbox .ust-slot--live .ust-slot__cell { border-color: currentColor; }
.uku-strumbox .ust-slot--d.ust-slot--live .ust-slot__cell { background: rgba(163, 50, 27, 0.22); }
.uku-strumbox .ust-slot--u.ust-slot--live .ust-slot__cell { background: rgba(166, 142, 69, 0.28); }
.uku-strumbox .ust-slot--chunk.ust-slot--live .ust-slot__cell { background: rgba(111, 97, 40, 0.26); }
.uku-strumbox .ust-slot--x.ust-slot--live .ust-slot__cell { background: rgba(151, 145, 127, 0.16); border-color: #c9c3b3; }
.uku-strumbox .ust-slot--live .ust-slot__num { color: currentColor; }
.uku-strumbox .ust-slot--x.ust-slot--live .ust-slot__num { color: #5b5647; }
.uku-strumbox .ust-slot__letter {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	margin: 3px 0 0;
}
.uku-strumbox .ust-slot--x { color: #97917f; }
.uku-strumbox .ust-slot--d { color: #a3321b; }
.uku-strumbox .ust-slot--d .ust-slot__cell { background: rgba(163, 50, 27, 0.09); border-color: rgba(163, 50, 27, 0.18); }
.uku-strumbox .ust-slot--u { color: #a68e45; }
.uku-strumbox .ust-slot--u .ust-slot__cell { background: rgba(166, 142, 69, 0.11); border-color: rgba(166, 142, 69, 0.28); }
.uku-strumbox .ust-slot--chunk { color: #6f6128; }
.uku-strumbox .ust-slot--chunk .ust-slot__cell { background: rgba(111, 97, 40, 0.1); border-color: rgba(111, 97, 40, 0.22); }
.uku-strumbox .ust-chunk { font-size: 16px; font-weight: 700; line-height: 1; }
.uku-strumbox .ust-slot--acc .ust-slot__cell { box-shadow: 0 0 0 2px currentColor inset; }
.uku-strumbox .ust-slot--mute { opacity: 0.55; }
.uku-strumbox .ust-miss { width: 6px; height: 6px; border-radius: 50%; background: #c9c3b3; display: inline-block; }

/* quiet hear-it pill in the title strip (js/uku-strummer.js) */
.uku-strumbox .ust-play {
	margin-left: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	border: 1px solid #d3cfc0;
	background: rgba(255, 255, 255, 0.55);
	color: #6f6128;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}
.uku-strumbox .ust-play:hover { border-color: #b9b39f; color: #55501f; }
.uku-strumbox .ust-play--on { color: #a3321b; border-color: rgba(163, 50, 27, 0.45); }
.uku-strumbox .ust-play i { pointer-events: none; font-size: 9px; }
.uku-strumbox .ust-play__lbl { pointer-events: none; }

/* muted alternative line under the tiles */
.uku-strumbox .ust-altline { margin: 8px 0 0; font-size: 12px; color: #97917f; text-align: center; }
.uku-strumbox .ust-nota {
	color: #97917f;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	letter-spacing: 0.04em;
	white-space: nowrap;
	margin-left: 3px;
}

@media (max-width: 430px) {
	.uku-strumbox .ust-body { padding: 12px 14px 13px; }
	.uku-strumbox .ust-titlestrip { padding: 8px 14px; }
	.uku-strumbox .ust-titlestrip.ust-titlestrip--zone { padding: 3px 8px 3px 14px; }
	.uku-strumbox .ust-play__lbl { display: none; }
	.uku-strumbox .ust-play { padding: 4px 8px; }
	.uku-strumbox .ust-play i { font-size: 10px; }
	.uku-strumbox .ust-lede { font-size: 13px; }
	.uku-strumbox .ust-slot { width: 30px; flex: 0 0 30px; }
	.uku-strumbox .ust-slot__cell { height: 30px; }
	.uku-strumbox .ust-slot__cell i { font-size: 13px; }
	.uku-strumbox .uku-chords-line { padding: 11px 14px 12px; }
	.chordssongbox .chordsinthissong p.uku-chords-line { padding: 11px 14px 11px; }
}