/* Consultants of Swing — component stylesheet.
   Public-site classes are recreated from the live Hugo SCSS (assets/scss/components/*).
   Ledenzone (member area) classes are additions on the same tokens; map them onto MudBlazor. */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Open+Sans:wght@300;400;600;700;800&display=swap');

.cos, .cos-root { font-family: var(--font-body); font-size: 14.4px; line-height: 1.6; color: var(--ink); background: var(--ground); }
:where(.cos, .cos-root) * { box-sizing: border-box; }
:where(.cos) a { color: var(--rose-link); text-decoration: none; }
:where(.cos) a:hover { color: var(--rose-hover); text-decoration: underline; }
:where(.cos) :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:where(.cos) :where(h1, h2, h3, h4, h5) { font-family: var(--font-body); font-weight: 800; line-height: 1.2; margin: 0 0 10px; color: var(--ink); }
:where(.cos) h2 { font-size: 28.8px; }
:where(.cos) h4 { font-size: 21.6px; }
:where(.cos) h5 { font-size: 18px; }
:where(.cos) p { margin: 0 0 1rem; }

/* ---------- Button (_buttons.scss) ---------- */
.cos-button { display: inline-block; white-space: nowrap; padding: 7px 15px; border: 2px solid transparent; border-radius: var(--radius-none);
  background: var(--rose); color: var(--on-rose); font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.6;
  text-transform: uppercase; letter-spacing: .025em; text-decoration: none; cursor: pointer; transition: all .15s ease; }
.cos-button:hover { background: var(--rose-soft); color: var(--on-rose); text-decoration: none; }
.cos-button--outline { background: none; color: var(--on-chrome); border-color: var(--on-chrome); }
.cos-button--outline:hover { background: var(--on-chrome); color: var(--chrome); }
.cos-button--secondary { background: none; color: var(--ink-strong); border-color: var(--line-strong); }
.cos-button--secondary:hover { background: var(--surface-raised); color: var(--ink-strong); }
.cos-button--danger { background: none; color: var(--danger); border-color: var(--danger); }
.cos-button--danger:hover { background: var(--danger); color: var(--ground); }
.cos-button--ghost { background: none; color: var(--ink-strong); border-color: transparent; }
.cos-button--ghost:hover { background: var(--surface-raised); color: var(--ink-strong); }
.cos-button--small { padding: 3px 10px; font-size: 12.6px; }
.cos-button--block { display: block; width: 100%; text-align: center; }
.cos-button svg { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }
.cos-button[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Site header + main menu (_header, _logo, _main-menu, _hamburger) ---------- */
.cos-header { position: relative; height: var(--header-height); background: var(--chrome); box-shadow: var(--shadow-header); color: var(--rose); z-index: 10; }
.cos-header__inner { max-width: var(--container-max); height: 100%; margin: 0 auto; padding: 0 var(--space-1); display: flex; align-items: flex-start; justify-content: space-between; }
.cos-header__logo { display: block; width: var(--logo-width); margin-top: 0; }
.cos-header__logo img { display: block; width: 100%; height: auto; }
.cos-menu { display: flex; align-items: center; height: 100%; margin: 0; padding: 0; list-style: none; }
.cos-menu a { display: inline-block; padding: 10px 14px; font-size: 14.4px; text-transform: uppercase; color: var(--rose); text-decoration: none; }
.cos-menu a:hover { background: var(--rose); color: var(--on-rose); text-decoration: none; }
.cos-menu .is-active a { background: var(--rose); color: var(--on-rose); }
.cos-hamburger { display: none; align-self: center; width: 35px; padding: 10px 0 10px 10px; background: none; border: 0; cursor: pointer; }
.cos-hamburger span { display: block; height: 3px; margin: 5px 0; background: var(--rose); }
.cos-hamburger span:last-child { width: 18px; margin-left: auto; }
@media (max-width: 767px) { .cos-menu { display: none; } .cos-hamburger { display: block; } .cos-header__logo { width: 40px; padding: 10px 0; } }

/* ---------- Mobile menu (_main-menu-mobile) ---------- */
.cos-mobile-menu { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; background: var(--rose); }
.cos-mobile-menu ul { margin: 0; padding: 0; list-style: none; text-align: center; font-family: var(--font-heading); font-size: 32px; line-height: 1.5; }
.cos-mobile-menu a { position: relative; display: block; color: var(--on-rose); text-decoration: none; }
.cos-mobile-menu a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; transform: translateX(-50%); background: var(--on-rose); transition: .35s; }
.cos-mobile-menu a:hover::after, .cos-mobile-menu a:focus::after, .cos-mobile-menu .is-active a::after { width: 100%; }

/* ---------- Hero (_hero-image) ---------- */
.cos-hero { position: relative; display: flex; align-items: center; height: var(--hero-height); padding-top: var(--header-height);
  background-color: var(--hero-veil); background-size: cover; background-position: center; background-blend-mode: overlay; color: var(--on-chrome); }
.cos-hero--tall { height: var(--hero-height-set); }
.cos-hero__text { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-2); }
.cos-hero__eyebrow { display: block; font-size: 14.4px; text-transform: uppercase; }
.cos-hero h1 { margin: 0 0 10px; width: 80%; font-size: 64px; font-weight: 800; line-height: 1.2; color: var(--on-chrome); }
.cos-hero p { width: 60%; margin: 0 0 20px; font-size: 25.6px; line-height: 1.3; color: var(--on-chrome); }
@media (max-width: 767px) { .cos-hero h1 { font-size: 48px; width: 100%; } .cos-hero p { width: 100%; } }

/* ---------- Page intro (_intro, _title .title-1, .single lead) ---------- */
.cos-intro { max-width: var(--container-max); margin: 0 auto; padding: var(--space-10) var(--space-2) var(--space-4); }
.cos-intro h1 { width: 70%; margin: 0 0 20px; font-family: var(--font-heading); font-size: 48px; font-weight: 400; line-height: 1.2; color: var(--rose-link); }
.cos-intro p { width: 60%; font-size: 22.4px; font-weight: 300; line-height: 1.4; color: var(--ink); }

/* ---------- Event card (partials/event.html) ---------- */
.cos-event { width: 100%; max-width: 420px; min-width: 0; overflow-wrap: anywhere; }
.cos-event__media { aspect-ratio: 16 / 9; margin-bottom: var(--space-2); }
.cos-event__media img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; border-radius: var(--radius-image); }
.cos-event h5 { margin: 0 0 8px; font-size: 18px; }
.cos-event h5 a { color: var(--ink-strong); }
.cos-event table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.cos-event td { padding: 2px 10px 2px 0; vertical-align: top; }
.cos-event td:first-child { color: var(--ink-muted); width: 5.5em; }
.cos-event td[colspan] { width: auto; color: inherit; }
.cos-event--past { opacity: .7; }

/* ---------- Member card (partials/member.html) ---------- */
.cos-member { text-align: center; width: 100%; max-width: 300px; margin-inline: auto; }
.cos-member img { width: var(--avatar-size); height: var(--avatar-size); margin: var(--space-5) auto var(--space-2); display: block; border-radius: var(--radius-round); object-fit: cover; }
.cos-member h4 { margin: 0 0 4px; font-size: 21.6px; color: var(--ink-strong); }
.cos-member__instrument { margin: 0 0 6px; color: var(--rose-link); }
.cos-member__bio { margin: 0; }
.cos-member--alumnus img { filter: grayscale(1); }

/* ---------- Song item (partials/song.html) ---------- */
.cos-song { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 0; align-content: start; justify-items: start; width: 100%; text-align: left; overflow-wrap: anywhere; }
.cos-song img { width: 50px; height: 50px; border-radius: var(--radius-image); object-fit: cover; }
.cos-song__title { font-weight: 700; color: var(--ink-strong); }
.cos-song__band { color: var(--ink-muted); }
.cos-song audio { height: 30px; width: 100%; max-width: 260px; margin: 4px 0 0; }

/* ---------- Content strip (_strip, shortcodes/content-strip-*) ---------- */
.cos-strip { padding: var(--space-8) var(--space-2); background-color: var(--hero-veil); background-size: cover; background-position: top; background-blend-mode: overlay; color: var(--on-chrome); text-align: center; }
.cos-strip h2 { color: var(--on-chrome); }
.cos-strip p { max-width: 640px; margin: 0 auto 20px; color: var(--on-chrome); font-size: 19.2px; }
.cos-strip--raised { background: var(--surface-raised); background-image: none; color: var(--ink); }
.cos-strip--raised h2, .cos-strip--raised p { color: var(--ink); }

/* ---------- Mobile nav: the hamburger as a <details> toggle, no JavaScript (MobileMenu.md, ARCHITECTURE.md Q9) ---------- */
.cos-nav { display: none; }
.cos-nav > summary { list-style: none; }
.cos-nav > summary::-webkit-details-marker { display: none; }
.cos-nav .cos-mobile-menu { position: fixed; inset: var(--header-height) 0 0 0; z-index: 20; min-height: 0; }
@media (max-width: 767px) { .cos-nav { display: block; align-self: center; } }

/* ---------- Section + grid (the public list pages: line-up, repertoire, agenda) ---------- */
.cos-section { max-width: var(--container-max); margin: 0 auto; padding: var(--space-8) var(--space-2); }
.cos-section > h2 { margin-bottom: var(--space-3); }
.cos-section > p { max-width: 640px; }
.cos-section + .cos-section { border-top: 1px solid var(--line); }
.cos-grid { display: grid; gap: var(--space-3) var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); margin: 0; padding: 0; list-style: none; }
.cos-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.cos-grid > li { display: flex; justify-content: flex-start; min-width: 0; }

/* ---------- Gallery (event photo albums) ---------- */
.cos-gallery { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 0; padding: 0; list-style: none; }
.cos-gallery a { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-sm); }
.cos-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Footer (_footer, partials/footer.html) ---------- */
.cos-footer { background: var(--chrome); padding: 20px 0; }
.cos-footer__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-2); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cos-social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cos-social img { display: block; width: 40px; height: 40px; }
.cos-footer__copy { color: var(--chrome-muted); font-size: 14.4px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.cos-footer__copy a { color: var(--chrome-muted); }
.cos-footer__copy img { width: 32px; height: 32px; }

/* ---------- Panel (_whitebox) ---------- */
.cos-panel { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-panel); padding: var(--space-2); }
.cos-panel__title { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: var(--ink-strong); }
.cos-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.cos-panel__head .cos-panel__title { margin: 0; }
.cos-panel__meta { margin: 2px 0 0; font-size: 12.6px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cos-panel__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ================= Ledenzone (member area) ================= */

/* App shell: chrome bar + drawer */
.cos-appbar { display: flex; align-items: center; gap: 12px; height: var(--header-height); padding: 0 var(--space-2); background: var(--chrome); color: var(--on-chrome); box-shadow: var(--shadow-header); }
.cos-appbar img { width: 40px; height: 40px; }
.cos-appbar__title { font-family: var(--font-heading); font-size: 20.8px; color: var(--on-chrome); }
.cos-appbar__section { font-size: 14.4px; text-transform: uppercase; color: var(--rose); letter-spacing: .025em; }
.cos-appbar__spacer { flex: 1; }
.cos-appbar__user { font-size: 12.6px; color: var(--on-chrome); opacity: .8; }
.cos-drawer { width: 220px; flex: none; overflow-y: auto; padding: var(--space-1) 0; background: var(--surface-raised); border-right: 1px solid var(--line); }
.cos-drawer a { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: var(--ink); text-transform: uppercase; font-size: 14.4px; text-decoration: none; }
.cos-drawer a:hover { background: var(--surface-overlay); color: var(--ink-strong); text-decoration: none; }
.cos-drawer .is-active a { background: var(--rose); color: var(--on-rose); }
.cos-drawer__group { padding: 14px 20px 4px; font-size: 12.6px; color: var(--ink-muted); text-transform: uppercase; }

/* Data table */
.cos-table { width: 100%; border-collapse: collapse; font-size: 14.4px; }
.cos-table th { position: sticky; top: 0; padding: 8px 12px; text-align: left; background: var(--surface-raised); color: var(--ink-muted); font-size: 12.6px; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; border-bottom: 1px solid var(--line-strong); }
.cos-table th[aria-sort] { color: var(--ink-strong); }
.cos-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--ink); }
.cos-table tbody tr:hover td { background: var(--surface-raised); }
.cos-table .is-muted td { color: var(--ink-muted); }
.cos-table__handle { width: 1%; color: var(--ink-muted); cursor: grab; }

/* Form field */
.cos-field { display: grid; gap: 4px; max-width: 360px; }
.cos-field label { font-size: 12.6px; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; color: var(--ink-muted); }
.cos-input { width: 100%; padding: 8px 10px; font: inherit; color: var(--ink-strong); background: var(--ground); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.cos-input:hover { border-color: var(--ink-muted); }
.cos-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.cos-field__help { font-size: 12.6px; color: var(--ink-muted); }
.cos-field--error .cos-input { border-color: var(--danger); }
.cos-field--error .cos-field__help { color: var(--danger); }

/* Status chip (availability, invite, event status) */
.cos-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 10px 1px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: 12.6px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.cos-chip svg { width: 12px; height: 12px; flex: none; }
.cos-chip--success { color: var(--success); }
.cos-chip--warning { color: var(--warning); }
.cos-chip--danger { color: var(--danger); }
.cos-chip--info { color: var(--info); }
.cos-chip--neutral { color: var(--ink-muted); }
.cos-chip--rose { color: var(--on-rose); background: var(--rose); border-color: var(--rose); }

/* Alert */
.cos-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border: 1px solid currentColor; border-radius: var(--radius-md); background: var(--surface-raised); font-size: 14.4px; }
.cos-alert svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.cos-alert__body { color: var(--ink); }
.cos-alert strong { color: var(--ink-strong); }
.cos-alert--success { color: var(--success); }
.cos-alert--warning { color: var(--warning); }
.cos-alert--danger { color: var(--danger); }
.cos-alert--info { color: var(--info); }

/* Setlist */
.cos-setlist { margin: 0; padding: 0; list-style: none; counter-reset: song; max-width: 520px; }
.cos-setlist__set { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font-size: 12.6px; font-weight: 700; color: var(--rose-link); text-transform: uppercase; letter-spacing: .1em; }
.cos-setlist__set::after { content: ''; order: 1; flex: 1; height: 1px; background: var(--deco-line); }
.cos-setlist__set > span { order: 2; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.cos-setlist__song { counter-increment: song; display: grid; grid-template-columns: 20px 28px 1fr auto auto; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.cos-setlist__song::before { content: counter(song); grid-column: 2; font-weight: 700; color: var(--ink-muted); text-align: right; font-variant-numeric: tabular-nums; }
.cos-setlist__handle { grid-column: 1; grid-row: 1; color: var(--ink-muted); cursor: grab; }
.cos-setlist__title { color: var(--ink-strong); font-weight: 700; }
.cos-setlist__title small { display: block; font-weight: 400; color: var(--ink-muted); font-size: 12.6px; }
.cos-setlist__meta { font-size: 12.6px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cos-setlist__note { padding: 4px 10px 4px 68px; font-size: 13.5px; font-style: italic; color: var(--ink-muted); border-bottom: 1px solid var(--line); }
.cos-setlist__comments { display: inline-flex; align-items: center; gap: 3px; font-size: 12.6px; color: var(--rose-link); font-variant-numeric: tabular-nums; }
.cos-setlist__comments svg { width: 14px; height: 14px; }
/* Read-only and compact: no handle column, title and artist on one line. The gig page and the viewer overview. */
.cos-setlist--compact { max-width: none; }
.cos-setlist--compact .cos-setlist__song { grid-template-columns: 28px minmax(0, 1fr) 3em 3.5em; min-height: 44px; padding: 6px 0; }
.cos-setlist--compact .cos-setlist__song::before { grid-column: 1; }
.cos-setlist--compact .cos-setlist__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-setlist--compact .cos-setlist__title small { display: inline; margin-left: 6px; font-size: inherit; }
.cos-setlist--compact .cos-setlist__meta { font-size: 14.4px; color: var(--ink); text-align: right; }
.cos-setlist--compact .cos-setlist__note { padding-left: 38px; }
a.cos-setlist__song, button.cos-setlist__song { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
:where(.cos) a.cos-setlist__song:hover, button.cos-setlist__song:hover { background: var(--surface-raised); color: inherit; text-decoration: none; }
.cos-setlist__break { margin: 8px 0; padding: 6px 10px; text-align: center; font-size: 12.6px; color: var(--ink-muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }

/* ================= Ledenzone pages: detail, edit, filtered list (generalised from docs/song-detail-redesign) ================= */

/* Icon button: a square, borderless action (download, delete, edit note). 34px in tables and on desktop, 44px on touch. */
.cos-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-md); background: none; color: var(--ink-muted); cursor: pointer; transition: all .15s ease; }
.cos-icon-button:hover { background: var(--surface-overlay); color: var(--ink-strong); }
.cos-icon-button--bordered { border-color: var(--line-strong); color: var(--ink); }
.cos-icon-button--danger:hover { color: var(--danger); }
.cos-icon-button svg { width: 18px; height: 18px; }

/* Page nav: back link and previous/next, real anchors in the row above a page title */
.cos-pagenav { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.cos-backlink { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; color: var(--rose-link); }
.cos-backlink::before { content: '\2039'; font-size: 20px; line-height: 1; }
.cos-pagenav__siblings { display: flex; gap: 10px; min-width: 0; }
.cos-pagenav__siblings a { display: inline-flex; align-items: center; gap: 6px; max-width: 200px; min-height: 34px; padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-pagenav__siblings a:hover { background: var(--surface-raised); color: var(--ink-strong); text-decoration: none; }

/* Detail header: chips, title, subtitle, one action on the right */
.cos-detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.cos-detail-head__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.cos-detail-head h1 { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.2; color: var(--ink-strong); overflow-wrap: anywhere; }
.cos-detail-head__actions { display: flex; gap: 8px; align-items: center; }
.cos-detail-head__sub { margin: 4px 0 0; font-size: 18px; color: var(--ink-muted); }

/* Fact strip: the few values a reader looks for first */
.cos-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 0 0 var(--space-3); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.cos-facts > div { min-width: 0; padding: 12px 20px; border-left: 1px solid var(--line); }
.cos-facts > div:first-child { border-left: 0; }
.cos-facts dt { font-size: 12.6px; color: var(--ink-muted); }
.cos-facts dd { margin: 0; font-size: 21.6px; font-weight: 800; color: var(--ink-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cos-facts dd small { font-size: 14.4px; font-weight: 400; color: var(--ink-muted); }
.cos-facts dd.is-empty { color: var(--ink-muted); font-weight: 400; }
@media (max-width: 599px) { .cos-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cos-facts > div { padding: 8px 10px; } .cos-facts dd { font-size: 18px; } }
/* Wide facts: eyebrow label, a value and a secondary line per cell (a gig: Wanneer, Verzamelen, Waar, Contact) */
.cos-facts--wide { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cos-facts--wide > div { padding: 16px 20px; border-left: 0; }
.cos-facts--wide dt { font-size: 12.6px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.cos-facts--wide dd { font-size: 18px; }
.cos-facts__sub { display: block; font-size: 14.4px; font-weight: 400; color: var(--ink); }
.cos-facts__scope { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--rose-link); }
.cos-facts__scope::before { content: '\00B7'; margin: 0 5px; color: var(--ink-muted); }
.cos-facts-media { display: grid; grid-template-columns: 160px minmax(0, 1fr); margin: 0 0 var(--space-3); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.cos-facts-media > img { width: 100%; height: 100%; object-fit: cover; border-right: 1px solid var(--line); }
.cos-facts-media > .cos-facts { margin: 0; border: 0; border-radius: 0; background: none; }
@media (max-width: 599px) {
  .cos-facts.cos-facts--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cos-facts.cos-facts--wide > div { padding: 10px 12px; }
  .cos-facts-media { grid-template-columns: minmax(0, 1fr); }
  .cos-facts-media > img { height: 120px; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* Detail layout: main column + side column; the side stacks below on narrow screens */
.cos-detail { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.cos-detail__main, .cos-detail__side { display: grid; gap: var(--space-2); min-width: 0; }
@media (max-width: 991px) { .cos-detail { grid-template-columns: minmax(0, 1fr); } }
.cos-block-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 var(--space-1); font-size: 18px; font-weight: 800; color: var(--ink-strong); }
.cos-block-title small { font-size: 12.6px; font-weight: 400; color: var(--ink-muted); }

/* Tag: a neutral label on an item (instrument, version). Not a state, so no icon and no colour. */
.cos-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cos-tag { display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12.6px; line-height: 1.6; color: var(--ink); white-space: nowrap; }

/* Choice chip: filter chips and multi-select toggles (aria-pressed), plus a removable context chip */
.cos-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cos-choices__divider { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--line); }
.cos-choices__count { margin-left: auto; font-size: 12.6px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cos-choice { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--ink-strong); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all .15s ease; }
.cos-choice:hover { background: var(--surface-overlay); }
.cos-choice[aria-pressed="true"] { background: var(--rose); border-color: var(--rose); color: var(--on-rose); }
.cos-choice[aria-pressed="true"]:hover { background: var(--rose-soft); border-color: var(--rose-soft); }
.cos-choice svg { width: 16px; height: 16px; }
.cos-choice--context { padding-right: 4px; background: var(--surface-overlay); font-weight: 400; cursor: default; }
.cos-choice--context strong { font-weight: 700; }
.cos-choice__remove { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ink-muted); font: inherit; cursor: pointer; }
.cos-choice__remove:hover { background: var(--surface-raised); color: var(--ink-strong); }

/* Favourite toggle: the star. aria-pressed carries the state; the colour only repeats it. */
.cos-star { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-md); background: none; color: var(--ink-muted); cursor: pointer; }
.cos-star:hover { background: var(--surface-overlay); color: var(--ink-strong); }
.cos-star[aria-pressed="true"], .cos-star[aria-pressed="true"]:hover { color: var(--favourite); }
.cos-star svg { width: 20px; height: 20px; }

/* File card: one file the reader opens (a score), with its tags and actions */
.cos-filegrid { display: grid; gap: var(--space-1); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); margin: 0; padding: 0; list-style: none; }
.cos-filecard { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 6px 12px; align-items: start; padding: 16px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.cos-filecard__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--surface-overlay); color: var(--ink-muted); }
.cos-filecard__icon svg { width: 20px; height: 20px; }
.cos-filecard__name { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--ink-strong); overflow-wrap: anywhere; }
.cos-filecard > .cos-star { margin: -10px -10px 0 0; }
.cos-filecard__actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }
.cos-filecard__actions .cos-button { flex: 1; text-align: center; }

/* Link card: a whole card that is one anchor to another page */
.cos-linkcard { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 16px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); }
:where(.cos) a.cos-linkcard:hover, .cos-linkcard:hover { background: var(--surface-overlay); color: var(--ink); text-decoration: none; }
.cos-linkcard__title { display: block; font-weight: 700; color: var(--ink-strong); }
.cos-linkcard__meta { display: block; font-size: 12.6px; color: var(--ink-muted); }
.cos-linkcard::after { content: '\203A'; font-size: 24px; line-height: 1; color: var(--rose-link); }

/* Empty state: dashed and quiet. The admin "Nog leeg" card is the same box with a link to the edit page. */
.cos-empty { padding: 16px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--ink-muted); }
.cos-empty p { margin: 0; }
.cos-empty a { display: inline-block; margin-top: 8px; font-weight: 700; }

/* Segmented control: one of a few exclusive values (role=radiogroup, buttons role=radio) */
.cos-segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.cos-segmented button { min-height: 32px; padding: 4px 14px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-muted); font: inherit; font-weight: 600; cursor: pointer; }
.cos-segmented button:hover { color: var(--ink-strong); }
.cos-segmented [aria-checked="true"] { background: var(--surface-overlay); color: var(--ink-strong); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cos-segmented--answer [aria-checked="true"] { background: var(--rose); color: var(--on-rose); box-shadow: none; }
.cos-segmented--block { display: flex; }
.cos-segmented--block button { flex: 1; }

/* Switch: on/off for a setting that takes effect on save, with a line saying what "on" means */
.cos-switch, .cos-field label.cos-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14.4px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink); cursor: pointer; }
.cos-switch input { appearance: none; position: relative; flex: none; width: 40px; height: 22px; margin: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer; transition: background .15s ease; }
.cos-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-strong); transition: transform .15s ease; }
.cos-switch input:checked { background: var(--rose); }
.cos-switch input:checked::after { transform: translateX(18px); background: var(--on-rose); }

/* Edit page: a panel per group of fields; --danger for the delete zone at the bottom */
.cos-form { display: grid; gap: var(--space-2); max-width: 720px; }
.cos-form-section { display: grid; gap: var(--space-2); padding: var(--space-2); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cos-form-section > h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink-strong); }
.cos-form-section--danger { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; border-color: var(--danger); }
.cos-form-row { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: start; }
.cos-form-row .cos-field { max-width: none; }
.cos-input-affix { position: relative; display: block; }
.cos-input-affix .cos-input { padding-right: 46px; }
.cos-input-affix > span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12.6px; color: var(--ink-muted); pointer-events: none; }

/* Repeatable rows: one row per item (links, scores) with a remove button, and an add action below */
.cos-repeat { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cos-repeat > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cos-repeat--two > li { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto; }
.cos-repeat__add { justify-self: start; padding: 4px 0; border: 0; background: none; color: var(--rose-link); font: inherit; font-weight: 700; cursor: pointer; }
.cos-repeat__add:hover { color: var(--rose-hover); text-decoration: underline; }

/* File drop: a drag-and-drop area with a file-picker link, for uploads inside a form */
.cos-dropzone { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--ink-muted); font-size: 12.6px; }
.cos-dropzone.is-over { border-color: var(--rose); background: var(--surface-overlay); }
.cos-dropzone svg { flex: none; width: 22px; height: 22px; color: var(--rose-link); }

/* Save bar: sticky at the bottom of an edit page */
.cos-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: 12px var(--space-2); background: var(--surface-raised); border-top: 1px solid var(--line-strong); box-shadow: var(--shadow-float); }
.cos-savebar__status { flex: 1; font-size: 12.6px; color: var(--ink-muted); }
.cos-savebar__status.is-dirty { color: var(--ink-strong); }
.cos-savebar__status.is-error { color: var(--danger); }
.cos-savebar.is-dirty { background: var(--rose-tint); border-color: var(--rose-tint-line); }
.cos-savebar.is-dirty .cos-savebar__status { color: var(--rose-link); }
.cos-savebar--top { top: 0; bottom: auto; margin: 0 0 var(--space-2); border-top: 0; border-bottom: 1px solid var(--line-strong); box-shadow: none; }

/* ================= Ledenzone patterns generalised from docs/cos-setlist-handoff ================= */

/* Meta line: type, state and audience as plain words split by dots. Not pills: a pill next to a title reads as a button. */
.cos-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0 0 6px; padding: 0; list-style: none; font-size: 14.4px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cos-meta > li + li::before { content: '\00B7'; margin: 0 8px; color: var(--ink-muted); }
.cos-meta__dot::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.cos-meta .is-success { color: var(--success); }
.cos-meta .is-warning { color: var(--warning); }
.cos-meta .is-danger { color: var(--danger); }
.cos-meta .is-info { color: var(--info); }

/* Eyebrow: the small uppercase label above a value or a group */
.cos-eyebrow { display: block; margin: 0; font-size: 12.6px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.cos-eyebrow--rose { color: var(--rose-link); }

/* Overflow menu: the "Meer acties" button that holds rare and destructive actions. A <details> here; MudMenu in the app. */
.cos-overflow { position: relative; display: inline-block; }
.cos-overflow > summary { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); color: var(--ink-strong); cursor: pointer; list-style: none; }
.cos-overflow > summary::-webkit-details-marker { display: none; }
.cos-overflow > summary:hover { background: var(--surface-raised); }
.cos-overflow > summary svg { width: 20px; height: 20px; }
.cos-overflow--bare > summary { width: 32px; height: 32px; border-color: transparent; color: var(--ink-muted); }
.cos-overflow__menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; margin: 0; padding: 6px 0; list-style: none; background: var(--surface-overlay); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-float); }
.cos-overflow__menu a, .cos-overflow__menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 16px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
:where(.cos) .cos-overflow__menu a:hover, .cos-overflow__menu button:hover { background: var(--surface-raised); color: var(--ink-strong); text-decoration: none; }
.cos-overflow__menu hr { margin: 6px 0; border: 0; border-top: 1px solid var(--line); }
.cos-overflow__menu .is-danger { color: var(--danger); }

/* Link list: several LinkCards in one panel, each row one full-width anchor */
.cos-linklist { margin: 0; padding: 0; list-style: none; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.cos-linklist li + li { border-top: 1px solid var(--line); }
.cos-linklist a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 14px 16px; color: var(--ink); }
:where(.cos) .cos-linklist a:hover, .cos-linklist a:hover { background: var(--surface-overlay); color: var(--ink); text-decoration: none; }
.cos-linklist a::after { content: '\203A'; grid-column: 2; grid-row: 1 / span 2; font-size: 22px; line-height: 1; color: var(--rose-link); }
.cos-linklist strong { display: block; color: var(--ink-strong); }
.cos-linklist small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.6px; color: var(--ink-muted); }

/* Cue: a note the reader must see before something (an "aanwijzing" before a song). Dashed rose-tint box, eyebrow + italic text. */
.cos-cue { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 16px; background: var(--rose-tint); border: 1px dashed var(--rose-tint-line); border-radius: var(--radius-md); }
.cos-cue > .cos-eyebrow { color: var(--rose-link); }
.cos-cue p { margin: 0; font-style: italic; color: var(--ink-strong); }

/* Context bar: shown when an item is opened from a parent collection (a song from a setlist). Previous/next follow that collection. */
.cos-contextbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--space-2); margin: 0 0 var(--space-2); padding: 8px 14px; background: var(--rose-tint); border: 1px solid var(--rose-tint-line); border-radius: var(--radius-md); }
.cos-contextbar__where { flex: 1; min-width: 0; font-size: 14.4px; color: var(--ink-muted); }
.cos-contextbar__where a { font-weight: 700; }
.cos-contextbar .cos-pagenav__siblings a { background: var(--ground); }

/* Inline edit: a value edited where it stands (a block name, a note). Looks like text with a dashed underline. */
.cos-inline-input { width: 100%; min-width: 0; padding: 2px 0; border: 0; border-bottom: 1px dashed var(--line-strong); border-radius: 0; background: none; color: inherit; font: inherit; }
.cos-inline-input:hover { border-bottom-color: var(--ink-muted); }
.cos-inline-input:focus { outline: none; border-bottom: 1px solid var(--focus); }

/* Insert handle: between two rows of an ordered editor, on hover or focus only: a rose line with "+ Nummer" / "+ Aanwijzing" */
.cos-insert { position: relative; display: flex; align-items: center; gap: 6px; height: 0; padding: 0 12px; overflow: visible; opacity: 0; transition: opacity .15s ease; }
.cos-insert::after { content: ''; flex: 1; height: 2px; background: var(--rose); }
.cos-insert:hover, .cos-insert:focus-within { opacity: 1; }
.cos-insert button { position: relative; z-index: 1; padding: 0 10px; border: 1px solid var(--rose); border-radius: 999px; background: var(--ground); color: var(--rose-link); font: inherit; font-size: 12.6px; font-weight: 700; line-height: 22px; cursor: pointer; }
@media (pointer: coarse) { .cos-insert { display: none; } }

/* Editor rows: one line per item (48px; notes 36px), for the setlist editor and other ordered lists. Set the columns per editor. */
.cos-editor { width: 100%; overflow-x: auto; }
.cos-editor__head, .cos-editor__row { display: grid; align-items: center; gap: 8px; min-width: 680px; padding: 0 12px; }
.cos-editor__head { min-height: 36px; border-bottom: 1px solid var(--line-strong); font-size: 12.6px; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; color: var(--ink-muted); }
.cos-editor__row { min-height: 48px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.cos-editor__row:hover, .cos-editor__row:focus-within { background: var(--surface-overlay); }
.cos-editor__row--note { min-height: 36px; font-style: italic; color: var(--ink-muted); }
.cos-editor__row--group { min-height: 52px; font-weight: 800; color: var(--rose-link); }
.cos-editor__handle { color: var(--ink-muted); cursor: grab; }
.cos-editor__row.is-dragging { opacity: .5; }
.cos-editor__foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }

/* Picker: a side panel to search a source list and add from it (drag, or "+") */
.cos-picker { display: grid; gap: 10px; align-content: start; }
.cos-picker__list { margin: 0; padding: 0; list-style: none; }
.cos-picker__list li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.cos-picker__list strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-strong); }
.cos-picker__list small { display: block; font-size: 12.6px; color: var(--ink-muted); }

/* Step viewer: a focused, phone-first view that steps through a sequence (setlist songs): a bar, progress, and previous/next */
.cos-viewer { display: flex; flex-direction: column; min-height: 100dvh; max-width: 640px; margin: 0 auto; background: var(--ground); }
.cos-viewer__bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 16px; background: var(--ground); border-bottom: 1px solid var(--line); }
.cos-viewer__position { flex: 1; text-align: center; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cos-viewer__body { flex: 1; display: grid; gap: var(--space-2); align-content: start; padding: 16px; }
.cos-viewer__title { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.05; color: var(--ink-strong); overflow-wrap: anywhere; }
.cos-viewer__sub { margin: 4px 0 0; font-size: 18px; color: var(--ink-muted); }
.cos-viewer--stage .cos-viewer__title { font-size: 44px; }
.cos-viewer__big { display: flex; flex-wrap: wrap; gap: 10px var(--space-3); font-size: 56px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.cos-viewer__big .is-key { color: var(--rose); }
.cos-viewer__big small { font-size: 18px; font-weight: 400; color: var(--ink-muted); }
.cos-progress { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cos-progress li { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.cos-progress .is-done { background: var(--rose); opacity: .45; }
.cos-progress .is-current { background: var(--rose); }
.cos-facts.cos-facts--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cos-facts--tiles > div:nth-child(odd) { border-left: 0; }
.cos-facts--tiles > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.cos-facts.cos-facts--tiles > div { padding: 12px 16px; }
.cos-facts.cos-facts--tiles dd { font-size: 28px; }
.cos-stepnav { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--ground); border-top: 1px solid var(--line); }
.cos-stepnav a, .cos-stepnav button { display: grid; align-content: center; min-height: 56px; min-width: 0; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: none; color: var(--ink-strong); font: inherit; font-weight: 700; text-align: left; cursor: pointer; text-decoration: none; }
:where(.cos) .cos-stepnav a:hover, .cos-stepnav button:hover { background: var(--surface-raised); color: var(--ink-strong); text-decoration: none; }
.cos-stepnav small { font-size: 12.6px; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.cos-stepnav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-stepnav .is-next { text-align: right; background: var(--rose-tint); border-color: var(--rose); }
.cos-stepnav .is-next small { color: var(--rose-link); }
.cos-stepnav [aria-disabled="true"], .cos-stepnav [disabled] { opacity: .4; pointer-events: none; }
.cos-nextup { padding: 12px 16px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.cos-nextup p { margin: 2px 0 0; font-weight: 700; color: var(--ink-strong); }
.cos-nextup em { display: block; font-weight: 400; color: var(--ink-muted); }

/* Touch: every control at least 44 × 44 px */
@media (pointer: coarse) {
  .cos-icon-button { width: 44px; height: 44px; }
  .cos-choice, .cos-backlink, .cos-pagenav__siblings a, .cos-segmented button, .cos-repeat__add, .cos-button, .cos-linklist a, .cos-overflow__menu a, .cos-overflow__menu button { min-height: 44px; }
  .cos-overflow > summary { width: 44px; height: 44px; }
  .cos-choice__remove { width: 36px; height: 36px; }
}