/* Porchlight menus: "B Tabs" (Harold chose it from the design preview, 2026-10-15).
 * Secondary menus (Content, Group) are plain words on a hairline, the chosen one with a
 * rose bar beneath. Library's choices sit in a soft rose panel under the chosen tab, as
 * white pills in two labelled rows (Spoken, Music). Applied by data-menu="b" on <html>
 * (index.html), the same selectors the preview used, so it looks exactly as previewed. */

/* Shared: the tertiary rows get their group names, so two rows read as two groups. */
html[data-menu] #lib-chips { margin: 0 0 var(--s-4) !important; padding: 0 !important; border: 0 !important; }
html[data-menu] #lib-chips > .states { margin: 0 !important; }
html[data-menu] #lib-chips > .states::before {
  content: "Spoken"; display: block; width: 100%;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
html[data-menu] #lib-chips > .states + .states::before { content: "Music"; }
html[data-menu] #lib-chips > .states + .states + .states::before { content: "Add MP3 content"; }   /* 2026-10-15 */

/* B: Tab and its panel
 * Secondary: plain words on a hairline, the chosen one with a rose bar beneath, one
 * line. Tertiary: a soft rose panel that hangs from the chosen tab, holding its own
 * choices as white pills in a tidy 2 x 4 grid. The panel shows what belongs to what. */
html[data-menu="b"] .subtabs {
  display: flex; gap: 0; margin: var(--s-3) 0 0; padding: 0; border-bottom: 1px solid var(--silver-1);
}
html[data-menu="b"] .subtabs .btn {
  flex: 1 1 auto; min-width: 0; padding: 12px 4px 10px; border: 0; border-bottom: 3px solid transparent;
  border-radius: 0; background: none; color: var(--muted); font-weight: 600; font-size: var(--t-sm); white-space: nowrap;
  margin-bottom: -1px;
}
html[data-menu="b"] .subtabs .btn.on { color: var(--rose); border-bottom-color: var(--rose); background: none; }
html[data-menu="b"] .subtabs:not(#content-tabs) { margin-bottom: var(--s-4); }
html[data-menu="b"] #lib-chips {
  display: grid; gap: var(--s-3); margin: 0 0 var(--s-4) !important; padding: var(--s-3) !important;
  background: var(--rose-lo); border-radius: 0 0 16px 16px !important;
}
html[data-menu="b"] #lib-chips[hidden] { display: none; }
html[data-menu="b"] #content-tabs:not([hidden]) { margin-bottom: 0; }
html[data-menu="b"] #content-tabs:not([hidden]) ~ #lib-chips:not([hidden]) { margin-top: 0 !important; padding-top: var(--s-4) !important; }
html[data-menu="b"] #lib-chips[hidden] ~ * { margin-top: var(--s-4); }
html[data-menu="b"] #lib-chips > .states { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 6px; }
html[data-menu="b"] #lib-chips > .states::before { grid-column: 1 / -1; color: var(--rose); opacity: .8; }
html[data-menu="b"] #lib-chips .btn {
  min-height: 44px; padding: 6px 4px; border: 1px solid #F1D9E1; border-radius: 12px; background: var(--paper);
  color: var(--ink); font-size: var(--t-xs); font-weight: 600; line-height: 1.15; box-shadow: var(--shadow-sm);
}
html[data-menu="b"] #lib-chips .btn.on { background: var(--rose); border-color: var(--rose); color: var(--rose-ink); }