/*
 * Manouke Grille V2 — production presentation skin
 * Step 10.6d.2b
 *
 * Visual-only layer. No PlayerTransportV2 timing, grille data, sync protocol,
 * chord selection or persistence behavior is changed here.
 */

body.viewer-production {
    --mk-ink:#191714;
    --mk-ink-soft:#5e554d;
    --mk-brown:#5b422d;
    --mk-brown-2:#7a5b3e;
    --mk-line:rgba(87,67,48,.15);
    --mk-line-strong:rgba(87,67,48,.24);
    --mk-panel:rgba(255,253,248,.96);
    --mk-panel-soft:#f8f4ec;
    --mk-bg:#f2eee6;
    --mk-shadow:0 10px 30px rgba(46,35,26,.07);
    margin:0;
    padding:10px 12px 24px;
    background:
        radial-gradient(circle at 50% -18%, rgba(166,128,86,.09), transparent 35%),
        var(--mk-bg);
    color:var(--mk-ink);
}

body.viewer-production .shell { width:100%; max-width:none; margin-inline:0; }

body.viewer-production .panel {
    margin:12px 0;
    padding:14px;
    border:1px solid var(--mk-line);
    border-radius:18px;
    background:var(--mk-panel);
    box-shadow:var(--mk-shadow);
}

body.viewer-production .summary {
    color:#777067;
    font-size:12px;
}

/* =========================================================
   HERO — artwork + editorial title treatment
========================================================= */
body.viewer-production .production-hero {
    min-height:236px;
    margin:0 0 14px;
    padding:0;
    border:1px solid rgba(94,68,42,.15);
    border-radius:24px;
    background:#ead8bd;
    box-shadow:0 14px 38px rgba(57,42,29,.11);
}

body.viewer-production .production-hero::before {
    z-index:0;
    opacity:1;
    background:
        linear-gradient(90deg,
            rgba(245,234,215,.92) 0%,
            rgba(245,234,215,.88) 24%,
            rgba(245,234,215,.78) 48%,
            rgba(245,234,215,.34) 76%,
            rgba(245,234,215,.12) 100%);
}

body.viewer-production .production-hero-scene {
    position:absolute;
    inset:0;
    z-index:-1;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center 58%;
    filter:sepia(.14) saturate(.88) contrast(.96);
    opacity:.64;
    transform:scale(1.015);
}

body.viewer-production .production-hero[data-instrument="guitar"] .production-hero-scene {
    background-position:60% 63%;
}
body.viewer-production .production-hero[data-instrument="ukulele"] .production-hero-scene {
    background-position:42% 61%;
}

body.viewer-production .production-hero-main {
    position:relative;
    z-index:3;
    grid-template-columns:252px minmax(0,760px);
    gap:30px;
    width:100%;
    min-height:236px;
    padding:22px 30px 24px 22px;
    align-items:center;
}

body.viewer-production .production-player-mark {
    width:252px;
    height:192px;
    border:0;
    border-radius:18px;
    background-repeat:no-repeat;
    background-color:rgba(255,248,236,.24);
    background-size:295% auto;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
    filter:sepia(.08) contrast(1.02);
    overflow:hidden;
}

body.viewer-production .production-hero[data-instrument="guitar"] .production-player-mark {
    background-position:88% 60%;
}
body.viewer-production .production-hero[data-instrument="ukulele"] .production-player-mark {
    background-position:52% 62%;
}

body.viewer-production .production-instrument-mark {
    width:104px;
    border-radius:22px;
    background:rgba(255,255,255,.62);
}

body.viewer-production .production-hero-copy {
    padding:2px 0 0;
    text-shadow:0 1px rgba(255,255,255,.35);
}

body.viewer-production .production-hero-eyebrow {
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 0 7px;
    color:#332b24;
    font-size:11px;
    font-weight:800;
    letter-spacing:.31em;
}
body.viewer-production .production-hero-eyebrow::before,
body.viewer-production .production-hero-eyebrow::after {
    content:"";
    width:58px;
    height:1px;
    background:rgba(54,43,33,.62);
}
body.viewer-production .production-hero-eyebrow::before { display:none; }

body.viewer-production .production-hero h1 {
    max-width:820px;
    margin:0;
    color:#0d0c0b;
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(48px,5.4vw,78px);
    font-weight:700;
    line-height:.94;
    letter-spacing:-.045em;
}

body.viewer-production .production-hero-subline {
    margin-top:13px;
    color:#24201c;
    font-size:16px;
}
body.viewer-production .production-hero-subline strong { color:#171411; }
body.viewer-production .production-hero-subline span:last-child {
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:5px 12px;
    border:1px solid rgba(91,66,45,.22);
    border-radius:999px;
    background:rgba(255,250,242,.52);
}
body.viewer-production .production-hero-subline .hero-separator { display:none; }

body.viewer-production .production-hero-chips {
    gap:8px;
    margin-top:15px;
}
body.viewer-production .production-hero-chip {
    min-height:38px;
    padding:8px 14px;
    border-color:rgba(92,68,45,.20);
    background:rgba(255,250,242,.55);
    color:#2d261f;
    box-shadow:inset 0 1px rgba(255,255,255,.36);
}
body.viewer-production .production-hero-chip small { display:none; }
body.viewer-production .production-hero-chip strong {
    font-size:13px;
    font-weight:700;
}

/* Keep the old SVG as a clean fallback for piano / generic / cavaquinho. */
body.viewer-production .production-hero:not(.has-player-art) {
    padding:22px;
    background:linear-gradient(115deg,#f7eee0,#ead9bf);
}
body.viewer-production .production-hero:not(.has-player-art) .production-hero-main {
    grid-template-columns:110px minmax(0,1fr);
    min-height:180px;
    padding:0;
}
body.viewer-production .production-hero:not(.has-player-art) .production-hero h1 {
    font-size:clamp(42px,4.7vw,68px);
}

/* =========================================================
   PREV / NEXT — compact controls docked into hero
========================================================= */
body.viewer-production .production-nav {
    position:relative;
    z-index:12;
    width:max-content;
    max-width:calc(100% - 36px);
    margin:-72px 18px 22px auto;
}
body.viewer-production .production-nav .grille-neighbor-nav {
    display:flex;
    justify-content:flex-end;
    gap:7px;
}
body.viewer-production .production-nav .grille-neighbor-side { width:auto; }
body.viewer-production .production-nav .grille-neighbor-link,
body.viewer-production .production-nav .grille-neighbor-center {
    min-width:48px;
    min-height:46px;
    padding:9px 14px;
    border:1px solid rgba(78,58,41,.13);
    border-radius:999px;
    background:rgba(255,253,248,.92);
    color:#171411;
    box-shadow:0 5px 16px rgba(45,34,25,.07);
    backdrop-filter:blur(8px);
}
body.viewer-production .production-nav .grille-neighbor-link { justify-content:center; }
body.viewer-production .production-nav .grille-neighbor-link-next { justify-content:center; }
body.viewer-production .production-nav .grille-neighbor-copy { display:none; }
body.viewer-production .production-nav .grille-neighbor-arrow { font-size:24px; line-height:1; }
body.viewer-production .production-nav .grille-neighbor-center {
    min-width:90px;
    flex-direction:row;
    gap:7px;
    font-size:13px;
}
body.viewer-production .production-nav .grille-neighbor-center::before {
    content:"☷";
    font-size:17px;
}
body.viewer-production .production-nav .grille-neighbor-center small { display:none; }

/* =========================================================
   CONTENT ORDER — meta → chord deck → rhythm → player → grille
========================================================= */
body.viewer-production #viewer-v2-content {
    display:flex;
    flex-direction:column;
}
body.viewer-production #viewer-v2-meta-panel { order:10; }
body.viewer-production #viewer-v2-chords-panel { order:20; }
body.viewer-production #viewer-v2-rhythms-panel { order:25; }
body.viewer-production #viewer-v2-player-shell { order:30; }
body.viewer-production #viewer-v2-grille-panel { order:40; }
body.viewer-production #viewer-v2-performance { order:50; }

/* =========================================================
   META STRIP
========================================================= */
body.viewer-production #viewer-v2-meta-panel {
    padding:10px 12px;
}
body.viewer-production .meta-grid {
    grid-template-columns:1.35fr 1.1fr .8fr .8fr 1fr;
    gap:9px;
}
body.viewer-production .meta-card {
    min-height:58px;
    padding:8px 12px;
    border:1px solid rgba(94,72,50,.11);
    border-radius:12px;
    background:#faf7f1;
}
body.viewer-production .meta-card span {
    color:#82786e;
    font-size:9px;
    letter-spacing:.03em;
    text-transform:none;
}
body.viewer-production .meta-card strong {
    margin-top:3px;
    color:#1e1a17;
    font-size:13px;
    font-weight:650;
}

/* =========================================================
   CHORD DECK
========================================================= */
body.viewer-production #viewer-v2-chords-panel { padding:13px 15px 15px; }
body.viewer-production .viewer-v2-chord-head strong {
    font-size:18px;
    letter-spacing:-.02em;
}
body.viewer-production .viewer-v2-chord-head strong::before {
    content:"⌗";
    margin-right:9px;
    font-size:20px;
    font-weight:400;
}
body.viewer-production .chord-show-toggle {
    min-height:34px;
    background:#faf7f1;
}
body.viewer-production .chord-toolbar {
    margin:12px 0 10px;
    padding:8px;
    gap:7px;
    border-color:rgba(93,70,50,.11);
    border-radius:14px;
    background:#faf7f1;
}
body.viewer-production .chord-toolbar label {
    min-width:150px;
    color:#716960;
    font-size:9px;
}
body.viewer-production .chord-toolbar select,
body.viewer-production .chord-toolbar .mini-btn {
    min-height:34px;
    border-color:rgba(84,65,48,.15);
    border-radius:999px;
    background:#fffdf9;
}
body.viewer-production .viewer-v2-chord-deck {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
    gap:9px;
}
body.viewer-production .viewer-v2-chord-card,
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="small"] .viewer-v2-chord-card,
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="large"] .viewer-v2-chord-card {
    width:100%;
    min-height:0;
    border-color:rgba(82,63,47,.14);
    border-radius:10px;
    box-shadow:none;
    background:#fff;
}
body.viewer-production .viewer-v2-chord-card.keyboard-card,
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="small"] .viewer-v2-chord-card.keyboard-card,
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="large"] .viewer-v2-chord-card.keyboard-card {
    width:100%;
}
body.viewer-production .chord-card-footer {
    min-height:32px;
    padding:5px 7px;
    background:#faf7f1;
}
body.viewer-production .voicing-source { font-size:8px; }

/* =========================================================
   RHYTHMS — secondary, compact
========================================================= */
body.viewer-production #viewer-v2-rhythms-panel { padding:10px 14px; }
body.viewer-production .viewer-v2-rhythm-head strong { font-size:14px; }
body.viewer-production .viewer-v2-rhythm-head .summary { display:inline; margin-left:6px; }
body.viewer-production .viewer-v2-rhythm-cards { gap:8px; }
body.viewer-production .viewer-v2-rhythm-card { box-shadow:none; background:#fffdf9; }

/* =========================================================
   PLAYER — canonical classic floating PlayerShellV2
   ---------------------------------------------------------
   IMPORTANT: do not restyle the Player into page flow here.
   The Viewer core owns the classic floating/movable shell,
   Minify, Follow and Performance presentation. Production
   skin intentionally leaves that geometry untouched.
========================================================= */

/* =========================================================
   GRILLE — clean lead-sheet card system
========================================================= */
body.viewer-production #viewer-v2-grille-panel { padding:13px 14px 16px; }
body.viewer-production #viewer-v2-grille-panel > .player-head {
    margin-bottom:8px;
}
body.viewer-production #viewer-v2-grille-panel > .player-head strong {
    font-size:18px;
    letter-spacing:-.02em;
}
body.viewer-production #viewer-v2-grille-panel > .player-head strong::before {
    content:"⌘";
    margin-right:8px;
    font-size:17px;
}
body.viewer-production .viewer-display-toolbar {
    margin:0 0 12px;
    padding:7px 9px;
    border:1px solid rgba(85,65,48,.11);
    border-radius:14px;
    background:#faf7f1;
}
body.viewer-production .viewer-display-toolbar select,
body.viewer-production .viewer-display-toolbar .mini-btn,
body.viewer-production .viewer-harmony-controls,
body.viewer-production .viewer-easy-controls {
    border-color:rgba(85,65,48,.13);
    background:#fffdf9;
}

/* Active feature buttons must beat the production skin's generic white
 * .mini-btn background. Without this specificity, Manouche/Easy buttons had
 * white text on a white background after becoming active. */
body.viewer-production .feature-btn.is-active,
body.viewer-production .chord-toolbar .mini-btn.feature-btn.is-active,
body.viewer-production .viewer-display-toolbar .mini-btn.feature-btn.is-active {
    background:#4c3c2b;
    color:#fff;
    border-color:#4c3c2b;
}

body.viewer-production .viewer-grille.mode-grille .section {
    margin:10px 0 12px;
    padding:10px 10px 12px;
    border-color:rgba(77,59,44,.12);
    border-radius:13px;
    background:#fffdf9;
    box-shadow:none;
}
body.viewer-production .viewer-grille.mode-grille .section-head {
    min-height:28px;
    margin:0 0 7px;
}
body.viewer-production .viewer-grille.mode-grille .section-head h2 {
    color:#1c1815;
    font-size:14px;
    font-weight:700;
}
body.viewer-production .viewer-grille.mode-grille .bars { gap:7px; }
body.viewer-production .viewer-grille.mode-grille .bar {
    min-height:138px;
    padding:5px;
    border-color:rgba(65,51,39,.18);
    border-radius:8px;
    background:#fff;
    box-shadow:none;
}
body.viewer-production .viewer-grille.mode-grille .bar-track {
    border-color:rgba(44,36,29,.25);
    border-radius:2px;
}
body.viewer-production .viewer-grille.mode-grille .bar-event {
    color:#171411;
    font-family:Georgia, "Times New Roman", serif;
    font-weight:700;
}
body.viewer-production .viewer-grille.mode-grille .bar-number-label {
    border:0;
    background:transparent;
    color:#655c54;
    font-size:8px;
}

/* =========================================================
   FOOTER
========================================================= */
body.viewer-production .viewer-production-footer {
    width:100%;
    max-width:none;
    margin-top:18px;
}
body.viewer-production .viewer-production-footer .manouke-footer {
    border-radius:16px;
    background:linear-gradient(180deg,#2d2925,#24211e);
    box-shadow:0 10px 28px rgba(31,26,22,.13);
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1120px) {
    body.viewer-production .production-hero-main {
        grid-template-columns:190px minmax(0,1fr);
        gap:20px;
    }
    body.viewer-production .production-player-mark {
        width:190px;
        height:166px;
    }
    body.viewer-production .production-hero h1 { font-size:clamp(44px,6vw,64px); }
    body.viewer-production .production-nav { margin-top:-60px; }
    body.viewer-production .player-control-deck { grid-template-columns:1fr; }
}

@media (max-width:820px) {
    body.viewer-production { padding:8px; }
    body.viewer-production .production-hero {
        min-height:210px;
        border-radius:18px;
    }
    body.viewer-production .production-hero-main {
        width:100%;
        grid-template-columns:120px minmax(0,1fr);
        min-height:210px;
        gap:14px;
        padding:16px;
    }
    body.viewer-production .production-player-mark {
        width:120px;
        height:150px;
        border-radius:14px;
    }
    body.viewer-production .production-hero-eyebrow::after { width:30px; }
    body.viewer-production .production-hero h1 { font-size:clamp(34px,8vw,52px); }
    body.viewer-production .production-hero-subline { font-size:13px; }
    body.viewer-production .production-hero-chip { min-height:31px; padding:6px 10px; }
    body.viewer-production .production-nav {
        margin:-52px 10px 14px auto;
    }
    body.viewer-production .meta-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    body.viewer-production .viewer-v2-chord-deck { grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); }
}

@media (max-width:560px) {
    body.viewer-production .production-hero-main {
        grid-template-columns:1fr;
        align-content:end;
        padding-top:74px;
    }
    body.viewer-production .production-player-mark { display:none; }
    body.viewer-production .production-hero::before {
        background:linear-gradient(180deg,rgba(245,234,215,.22),rgba(245,234,215,.94) 56%,rgba(245,234,215,.98));
    }
    body.viewer-production .production-hero h1 { font-size:40px; }
    body.viewer-production .production-hero-eyebrow { font-size:9px; }
    body.viewer-production .production-nav { position:static; width:100%; max-width:none; margin:0 0 10px; }
    body.viewer-production .production-nav .grille-neighbor-nav { justify-content:center; }
    body.viewer-production .meta-grid { grid-template-columns:1fr; }
    body.viewer-production .viewer-v2-chord-deck { grid-template-columns:repeat(2,minmax(0,1fr)); }
    body.viewer-production .player-now-inline { grid-template-columns:1fr 1fr; }
    body.viewer-production .player-inline-readout:last-child { display:none; }
}


/* =========================================================
   10.6d.2b.1 — PLAYBACK VISUAL PERFORMANCE HOTFIX
   Audio/timing remain fully owned by PlayerTransportV2.
   These rules only remove expensive/laggy presentation effects.
========================================================= */
body.viewer-production .viewer-grille .bar-playback-rail,
body.viewer-production .viewer-grille .bar-playback-tick {
    transition:none !important;
}
body.viewer-production .viewer-grille .bar.is-playback-active {
    box-shadow:none !important;
}
body.viewer-production .production-hero-scene,
body.viewer-production .production-player-mark {
    filter:none !important;
}
body.viewer-production .production-nav .grille-neighbor-link,
body.viewer-production .production-nav .grille-neighbor-center {
    backdrop-filter:none !important;
}

/* =========================================================
   10.6d.2b.2 — HEADER + TYPOGRAPHY PASS
   Keeps the 2b.1 playback performance hotfix intact.
========================================================= */

/* The production viewer can breathe more on desktop. */
body.viewer-production .shell,
body.viewer-production .viewer-production-footer {
    max-width:none;
}

/* ---------------------------------------------------------
   HERO
   Instrument-aware artwork, same Manouke layout for every
   instrument. Guitar/ukulele use matching player crops;
   cavaquinho/piano/generic keep their own SVG fallback.
--------------------------------------------------------- */
body.viewer-production .production-hero {
    min-height:230px;
    border-radius:22px;
    background:
        radial-gradient(circle at 24% 18%, rgba(255,255,255,.50), transparent 34%),
        linear-gradient(104deg,#f1dfc5 0%,#ead4b6 46%,#dbc09d 100%);
}

body.viewer-production .production-hero::before {
    z-index:1;
    opacity:1;
    background:
        linear-gradient(90deg,
            rgba(247,236,218,.98) 0%,
            rgba(247,236,218,.96) 37%,
            rgba(247,236,218,.82) 56%,
            rgba(247,236,218,.36) 72%,
            rgba(247,236,218,.06) 100%),
        repeating-linear-gradient(0deg,
            rgba(78,55,35,.018) 0,
            rgba(78,55,35,.018) 1px,
            transparent 1px,
            transparent 4px);
    pointer-events:none;
}

body.viewer-production .production-hero-scene {
    inset:0;
    z-index:0;
    opacity:.48;
    transform:none;
    background-repeat:no-repeat;
    background-size:auto 205%;
    background-position:right 50%;
}

body.viewer-production .production-hero[data-instrument="guitar"] .production-hero-scene {
    background-position:right 47%;
}
body.viewer-production .production-hero[data-instrument="ukulele"] .production-hero-scene {
    background-position:right 48%;
}

body.viewer-production .production-hero-main {
    position:relative;
    z-index:3;
    grid-template-columns:220px minmax(0,880px);
    gap:30px;
    width:min(1160px,calc(100% - 360px));
    min-height:230px;
    padding:22px 32px 24px 22px;
    align-items:center;
}

body.viewer-production .production-player-mark {
    width:220px;
    height:184px;
    border-radius:17px;
    background-size:cover;
    background-position:center center;
    background-color:#ead6bb;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.34),
        0 9px 24px rgba(63,45,29,.10);
}
body.viewer-production .production-hero[data-instrument="guitar"] .production-player-mark,
body.viewer-production .production-hero[data-instrument="ukulele"] .production-player-mark {
    background-position:center center;
}

body.viewer-production .production-instrument-mark {
    width:118px;
    border-radius:24px;
}

body.viewer-production .production-hero-copy {
    padding:0 0 2px;
}

body.viewer-production .production-hero-eyebrow {
    justify-content:flex-start;
    gap:14px;
    margin:0 0 8px;
    color:#2f2822;
    font-size:10px;
    font-weight:850;
    letter-spacing:.32em;
    text-transform:uppercase;
}
body.viewer-production .production-hero-eyebrow::before,
body.viewer-production .production-hero-eyebrow::after {
    display:block;
    width:54px;
    flex:0 0 54px;
    height:1px;
    background:rgba(49,39,31,.64);
}

body.viewer-production .production-hero h1 {
    max-width:900px;
    margin:0;
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(46px,5.2vw,76px);
    font-weight:700;
    line-height:.96;
    letter-spacing:-.045em;
    text-wrap:balance;
}

body.viewer-production .production-hero-subline {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px;
    margin-top:12px;
    font-size:15px;
}
body.viewer-production .production-hero-subline .hero-separator {
    display:inline;
    color:#8b735e;
}
body.viewer-production .production-hero-subline span:last-child {
    min-height:29px;
    padding:4px 11px;
    background:rgba(255,249,239,.58);
}

body.viewer-production .production-hero-chips {
    gap:8px;
    margin-top:14px;
}
body.viewer-production .production-hero-chip {
    min-height:34px;
    padding:7px 12px;
    border:1px solid rgba(82,59,40,.20);
    border-radius:999px;
    background:rgba(255,249,239,.60);
    box-shadow:none;
}
body.viewer-production .production-hero-chip strong {
    font-size:12px;
    font-weight:750;
}

/* Navigation belongs to the hero in production, matching the mockup. */
body.viewer-production .production-nav.production-nav-in-hero {
    position:absolute;
    right:18px;
    bottom:15px;
    z-index:5;
    width:max-content;
    max-width:calc(100% - 36px);
    margin:0;
}

/* Fallback instruments stay visually part of the same family. */
body.viewer-production .production-hero:not(.has-player-art) {
    padding:0;
}
body.viewer-production .production-hero:not(.has-player-art) .production-hero-main {
    grid-template-columns:118px minmax(0,880px);
    min-height:230px;
    padding:22px 32px;
}
body.viewer-production .production-hero:not(.has-player-art) .production-hero-watermark {
    display:block;
    right:36px;
    width:250px;
    height:250px;
    opacity:.075;
}

/* ---------------------------------------------------------
   CHORD DECK SIZE SEMANTICS
   What used to be Large is now approximately Small.
--------------------------------------------------------- */
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="small"] {
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="medium"] {
    grid-template-columns:repeat(auto-fit,minmax(246px,1fr));
}
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="large"] {
    grid-template-columns:repeat(auto-fit,minmax(286px,1fr));
}
/* Piano needs enough horizontal room to keep the keyboard legible, but
   short rows should not stretch each card across the entire viewport. */
body.viewer-production .viewer-v2-chord-deck[data-instrument-type="keyboard"][data-diagram-size="small"] {
    grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),250px));
    justify-content:start;
}
body.viewer-production .viewer-v2-chord-deck[data-instrument-type="keyboard"][data-diagram-size="medium"] {
    grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),300px));
    justify-content:start;
}
body.viewer-production .viewer-v2-chord-deck[data-instrument-type="keyboard"][data-diagram-size="large"] {
    grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),360px));
    justify-content:start;
}
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="small"] .chord-card-body {
    min-height:202px;
}
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="small"] .viewer-v2-chord-card:not(.keyboard-card) .chord-card-body canvas {
    width:190px !important;
    height:190px !important;
}
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="medium"] .chord-card-body {
    min-height:232px;
}
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="medium"] .viewer-v2-chord-card:not(.keyboard-card) .chord-card-body canvas {
    width:220px !important;
    height:220px !important;
}
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="large"] .chord-card-body {
    min-height:272px;
}
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="large"] .viewer-v2-chord-card:not(.keyboard-card) .chord-card-body canvas {
    width:260px !important;
    height:260px !important;
}
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="small"] .keyboard-voicing,
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="small"] .chord-unavailable { min-height:176px; }
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="medium"] .keyboard-voicing,
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="medium"] .chord-unavailable { min-height:206px; }
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="large"] .keyboard-voicing,
body.viewer-production .viewer-v2-chord-deck[data-diagram-size="large"] .chord-unavailable { min-height:246px; }

/* ---------------------------------------------------------
   GRILLE TYPOGRAPHY
   Production skin must not turn chord symbols into book-serif text.
--------------------------------------------------------- */
body.viewer-production .viewer-grille,
body.viewer-production .viewer-grille.mode-grille .bar-event:not(.partial-repeat-event),
body.viewer-production .viewer-grille.mode-grid .bar-event:not(.partial-repeat-event),
body.viewer-production .viewer-grille.mode-compact .bar-event:not(.partial-repeat-event) {
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body.viewer-production .viewer-grille.mode-grille .bar-event:not(.partial-repeat-event) {
    font-weight:700;
    letter-spacing:-.015em;
}

/* Small starts at the previous Large size; Medium/Large scale upward. */
body.viewer-production .viewer-grille[data-chord-font-size="small"].mode-grille .bar-event:not(.partial-repeat-event):not(.legacy-micro-event) {
    font-size:clamp(18px,1.75vw,24px);
}
body.viewer-production .viewer-grille[data-chord-font-size="medium"].mode-grille .bar-event:not(.partial-repeat-event):not(.legacy-micro-event) {
    font-size:clamp(22px,2.05vw,30px);
}
body.viewer-production .viewer-grille[data-chord-font-size="large"].mode-grille .bar-event:not(.partial-repeat-event):not(.legacy-micro-event) {
    font-size:clamp(27px,2.45vw,37px);
}
body.viewer-production .viewer-grille[data-chord-font-size="small"].mode-grid .bar-event:not(.partial-repeat-event):not(.legacy-micro-event) {
    font-size:clamp(17px,1.58vw,22px);
}
body.viewer-production .viewer-grille[data-chord-font-size="medium"].mode-grid .bar-event:not(.partial-repeat-event):not(.legacy-micro-event) {
    font-size:clamp(20px,1.82vw,27px);
}
body.viewer-production .viewer-grille[data-chord-font-size="large"].mode-grid .bar-event:not(.partial-repeat-event):not(.legacy-micro-event) {
    font-size:clamp(24px,2.18vw,33px);
}
body.viewer-production .viewer-grille[data-chord-font-size="small"].mode-compact .bar-event:not(.partial-repeat-event) { font-size:16px; }
body.viewer-production .viewer-grille[data-chord-font-size="medium"].mode-compact .bar-event:not(.partial-repeat-event) { font-size:19px; }
body.viewer-production .viewer-grille[data-chord-font-size="large"].mode-compact .bar-event:not(.partial-repeat-event) { font-size:23px; }

/* Repeat signs follow the same visual scale without changing timing/data. */
body.viewer-production .viewer-grille[data-chord-font-size="small"].mode-grille .bar-repeat,
body.viewer-production .viewer-grille[data-chord-font-size="small"].mode-grille .bar-event.partial-repeat-event { font-size:clamp(29px,2.7vw,42px); }
body.viewer-production .viewer-grille[data-chord-font-size="medium"].mode-grille .bar-repeat,
body.viewer-production .viewer-grille[data-chord-font-size="medium"].mode-grille .bar-event.partial-repeat-event { font-size:clamp(34px,3.0vw,48px); }
body.viewer-production .viewer-grille[data-chord-font-size="large"].mode-grille .bar-repeat,
body.viewer-production .viewer-grille[data-chord-font-size="large"].mode-grille .bar-event.partial-repeat-event { font-size:clamp(40px,3.5vw,56px); }

@media (max-width:1100px) {
    body.viewer-production .production-hero-main {
        grid-template-columns:180px minmax(0,1fr);
        width:calc(100% - 220px);
        gap:20px;
        padding:18px;
    }
    body.viewer-production .production-player-mark {
        width:180px;
        height:164px;
    }
    body.viewer-production .production-hero h1 {
        font-size:clamp(42px,6vw,62px);
    }
}

@media (max-width:820px) {
    body.viewer-production .production-hero {
        min-height:210px;
    }
    body.viewer-production .production-hero-main {
        grid-template-columns:116px minmax(0,1fr);
        width:100%;
        min-height:210px;
        padding:15px 15px 58px;
        gap:13px;
    }
    body.viewer-production .production-player-mark {
        width:116px;
        height:142px;
    }
    body.viewer-production .production-hero-eyebrow::before,
    body.viewer-production .production-hero-eyebrow::after {
        width:26px;
        flex-basis:26px;
    }
    body.viewer-production .production-hero h1 {
        font-size:clamp(34px,8vw,50px);
    }
    body.viewer-production .production-nav.production-nav-in-hero {
        right:10px;
        bottom:10px;
    }
    body.viewer-production .viewer-v2-chord-deck[data-diagram-size="small"],
    body.viewer-production .viewer-v2-chord-deck[data-diagram-size="medium"],
    body.viewer-production .viewer-v2-chord-deck[data-diagram-size="large"] {
        grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    }
}

@media (max-width:560px) {
    body.viewer-production .production-hero-main,
    body.viewer-production .production-hero:not(.has-player-art) .production-hero-main {
        grid-template-columns:1fr;
        align-content:end;
        padding:76px 14px 62px;
    }
    body.viewer-production .production-player-mark,
    body.viewer-production .production-instrument-mark {
        display:none;
    }
    body.viewer-production .production-hero-scene {
        opacity:.30;
        background-size:auto 155%;
    }
    body.viewer-production .production-hero::before {
        background:linear-gradient(180deg,rgba(247,236,218,.24),rgba(247,236,218,.94) 52%,rgba(247,236,218,.99));
    }
    body.viewer-production .production-hero-eyebrow::before { display:none; }
    body.viewer-production .production-hero h1 { font-size:40px; }
    body.viewer-production .production-nav.production-nav-in-hero {
        left:10px;
        right:10px;
        width:auto;
        max-width:none;
    }
    body.viewer-production .production-nav.production-nav-in-hero .grille-neighbor-nav {
        justify-content:center;
    }
    body.viewer-production .viewer-v2-chord-deck[data-diagram-size="small"],
    body.viewer-production .viewer-v2-chord-deck[data-diagram-size="medium"],
    body.viewer-production .viewer-v2-chord-deck[data-diagram-size="large"] {
        grid-template-columns:1fr;
    }
}


/* =========================================================
   10.6d.2b.3 — DESKTOP WIDTH + FOOTER CLEANUP
========================================================= */
body.viewer-production .shell,
body.viewer-production .viewer-production-footer {
    max-width:none;
}

/* Footer helper owns content; production skin owns spacing only. */
body.viewer-production .viewer-production-footer {
    margin-top:22px;
}
body.viewer-production .viewer-production-footer .manouke-footer {
    width:100%;
    border-radius:18px;
    overflow:hidden;
}

@media (max-width:1024px) {
    body.viewer-production .viewer-production-footer .manouke-footer-bottom {
        justify-content:flex-start;
    }
}

/* =========================================================
   10.6d.2b.4a — Performance chord card width hotfix
   Production deck cards are width:100%, but Performance uses
   intentionally compact fixed-size diagram cards. Keep those
   cards snug around the diagram instead of stretching across
   the centre performance column.
   ========================================================= */
body.viewer-production .performance-chord-diagram .viewer-v2-chord-card {
    width:174px;
    max-width:174px;
    flex:0 0 174px;
}
body.viewer-production .performance-chord-diagram .viewer-v2-chord-card.keyboard-card {
    width:min(300px,78vw);
    max-width:min(300px,78vw);
    flex-basis:auto;
}
body.viewer-production .performance-chord-diagram-next .viewer-v2-chord-card {
    width:132px;
    max-width:132px;
    flex:0 0 132px;
}
body.viewer-production .performance-chord-diagram-next .viewer-v2-chord-card.keyboard-card {
    width:min(236px,48vw);
    max-width:min(236px,48vw);
    flex-basis:auto;
}

/* =========================================================
   10.6d.2b.4i — Performance Piano uses its card space
   The generic chord-body canvas rule is square and intentionally
   sized for fretted diagrams. Piano must instead keep its natural
   keyboard aspect ratio and use a larger bounded viewport inside
   the Performance card. This applies to Straight and By tones.
   ========================================================= */
body.viewer-production .performance-chord-diagram .viewer-v2-chord-card.keyboard-card .chord-card-body {
    min-height:0;
    padding:8px 8px 6px;
}
body.viewer-production .performance-chord-diagram .viewer-v2-chord-card.keyboard-card .piano-keyboard-wrap {
    gap:4px;
}
body.viewer-production .performance-chord-diagram .viewer-v2-chord-card.keyboard-card .piano-hands-summary {
    margin-bottom:4px !important;
}
body.viewer-production .performance-chord-diagram .viewer-v2-chord-card.keyboard-card .piano-chord-title {
    margin:0 0 3px;
}
body.viewer-production .performance-chord-diagram .viewer-v2-chord-card.keyboard-card .piano-keyboard-canvas {
    width:calc(100% - 18px) !important;
    max-width:calc(100% - 18px) !important;
    height:185px !important;
    max-height:185px !important;
    object-fit:contain !important;
}
body.viewer-production .performance-chord-diagram-next .viewer-v2-chord-card.keyboard-card .chord-card-body {
    padding:7px 7px 5px;
}
body.viewer-production .performance-chord-diagram-next .viewer-v2-chord-card.keyboard-card .piano-hands-summary {
    margin-bottom:3px !important;
    font-size:12px !important;
}
body.viewer-production .performance-chord-diagram-next .viewer-v2-chord-card.keyboard-card .piano-chord-title {
    margin:0 0 2px;
}
body.viewer-production .performance-chord-diagram-next .viewer-v2-chord-card.keyboard-card .piano-keyboard-canvas {
    width:calc(100% - 12px) !important;
    max-width:calc(100% - 12px) !important;
    height:145px !important;
    max-height:145px !important;
}


/* =========================================================
   10.6d.2b.4b — Performance chord labels must never ellipsize
   The runtime measures available space and scales the label down
   only when necessary. CSS keeps the full symbol renderable.
   ========================================================= */
body.viewer-production .performance-current-chord,
body.viewer-production .performance-next-chord {
    overflow:visible;
    text-overflow:clip;
    max-width:none;
}
body.viewer-production .performance-current-chord {
    width:max-content;
    margin-inline:auto;
}
body.viewer-production .performance-next-chord {
    width:max-content;
    max-width:100%;
    margin-inline:auto;
}


/* =========================================================
   10.6d.2b.4d — TRUE FLUID SHELL + FOOTER + NO PHANTOM TAIL
   - no desktop max-width cap
   - footer lives inside the same shell
   - floating player no longer adds 220/270/310px to document height
   ========================================================= */
html,
body.viewer-production {
    width:100%;
    max-width:none;
    min-width:0;
}

body.viewer-production {
    padding:10px 12px 16px;
}

body.viewer-production .shell {
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
}

body.viewer-production.viewer-player-floating {
    padding-bottom:16px !important;
}

body.viewer-production .viewer-production-footer {
    width:100% !important;
    max-width:none !important;
    margin:18px 0 0 !important;
}

body.viewer-production .viewer-production-footer .manouke-footer {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:18px 22px 14px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
        "support top"
        "bottom bottom";
    gap:14px 22px;
}

body.viewer-production .viewer-production-footer .manouke-footer-support {
    width:100%;
    max-width:none !important;
    margin:0 !important;
}

body.viewer-production .viewer-production-footer .manouke-support-content p {
    max-width:1100px;
}

body.viewer-production .viewer-production-footer .manouke-footer-top {
    margin:0 !important;
    align-self:start;
}

body.viewer-production .viewer-production-footer .manouke-footer-bottom {
    width:100%;
    max-width:none !important;
    margin:0 !important;
    padding-top:12px;
}

@media (max-width:820px) {
    body.viewer-production { padding:8px 8px 12px; }
    body.viewer-production.viewer-player-floating { padding-bottom:12px !important; }
    body.viewer-production .viewer-production-footer .manouke-footer {
        padding:16px 14px 13px;
    }
}

/* =========================================================
   10.6d.2b.4e — INSTRUMENT PLAYER ARTWORK
   New isolated Manouke player family for production header.
   Visual-only: no transport/runtime behavior changes.
========================================================= */
body.viewer-production .production-hero.has-player-art {
    isolation:isolate;
    overflow:hidden;
}

body.viewer-production .production-hero.has-player-art .production-hero-scene {
    inset:0;
    z-index:0;
    opacity:.31;
    transform:none;
    background-repeat:no-repeat;
    background-size:auto 265%;
    background-position:calc(100% + 18px) 34%;
}

body.viewer-production .production-hero.has-player-art::before {
    z-index:1;
    background:
        linear-gradient(90deg,
            rgba(247,236,218,.99) 0%,
            rgba(247,236,218,.97) 34%,
            rgba(247,236,218,.88) 52%,
            rgba(247,236,218,.53) 68%,
            rgba(247,236,218,.13) 86%,
            rgba(247,236,218,.03) 100%),
        repeating-linear-gradient(0deg,
            rgba(78,55,35,.016) 0,
            rgba(78,55,35,.016) 1px,
            transparent 1px,
            transparent 4px);
}

body.viewer-production .production-hero.has-player-art .production-player-mark {
    background-repeat:no-repeat;
    background-color:rgba(232,211,181,.78);
    background-size:auto 172%;
    background-position:center 22%;
}

body.viewer-production .production-hero[data-instrument="guitar"] .production-hero-scene {
    background-size:auto 275%;
    background-position:calc(100% + 22px) 28%;
}
body.viewer-production .production-hero[data-instrument="guitar"] .production-player-mark {
    background-size:auto 176%;
    background-position:53% 20%;
}

body.viewer-production .production-hero[data-instrument="ukulele"] .production-hero-scene {
    background-size:auto 270%;
    background-position:calc(100% + 12px) 29%;
}
body.viewer-production .production-hero[data-instrument="ukulele"] .production-player-mark {
    background-size:auto 178%;
    background-position:50% 18%;
}

body.viewer-production .production-hero[data-instrument="cavaquinho"] .production-hero-scene {
    background-size:auto 270%;
    background-position:calc(100% + 10px) 29%;
}
body.viewer-production .production-hero[data-instrument="cavaquinho"] .production-player-mark {
    background-size:auto 178%;
    background-position:50% 18%;
}

body.viewer-production .production-hero[data-instrument="piano"] .production-hero-scene {
    opacity:.27;
    background-size:auto 224%;
    background-position:calc(100% + 8px) 39%;
}
body.viewer-production .production-hero[data-instrument="piano"] .production-player-mark {
    background-size:auto 150%;
    background-position:48% 32%;
}

@media (max-width:900px) {
    body.viewer-production .production-hero.has-player-art .production-hero-scene {
        opacity:.20;
        background-size:auto 225%;
        background-position:calc(100% + 35px) 34%;
    }
}


/* =========================================================
   10.6d.2b.4f — REST GLYPHS + FINAL COMPACT FOOTER
========================================================= */
body.viewer-production .bar-event.rest-event .chord-label.rest-glyph {
    font-family:"Noto Music","Bravura","Segoe UI Symbol",serif;
    font-size:clamp(30px,2.2vw,52px) !important;
    font-weight:400 !important;
    line-height:1;
}
body.viewer-production .bar-event.rest-event .at { opacity:.42; }
body.viewer-production .bar-event.rest-event { color:#362d25; }

body.viewer-production .viewer-production-footer .manouke-footer {
    display:grid !important;
    grid-template-columns:minmax(0,1.45fr) minmax(330px,.9fr) 42px !important;
    grid-template-areas:"support bottom top" !important;
    align-items:center !important;
    gap:18px 28px !important;
    padding:16px 20px !important;
    border-radius:14px !important;
    text-align:left !important;
}
body.viewer-production .viewer-production-footer .manouke-footer-support {
    grid-area:support !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:12px !important;
    max-width:none !important;
    margin:0 !important;
}
body.viewer-production .viewer-production-footer .manouke-footer-bottom {
    grid-area:bottom !important;
    display:grid !important;
    gap:2px !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 24px 0 0 !important;
    border:0 !important;
    border-right:1px solid rgba(255,255,255,.10) !important;
    text-align:right !important;
    font-size:9px !important;
}
body.viewer-production .viewer-production-footer .manouke-footer-top {
    grid-area:top !important;
    margin:0 !important;
}
@media (max-width:900px) {
    body.viewer-production .viewer-production-footer .manouke-footer {
        grid-template-columns:minmax(0,1fr) 42px !important;
        grid-template-areas:"support top" "bottom bottom" !important;
        gap:12px 16px !important;
    }
    body.viewer-production .viewer-production-footer .manouke-footer-bottom {
        padding:10px 0 0 !important;
        border-right:0 !important;
        border-top:1px solid rgba(255,255,255,.10) !important;
        text-align:left !important;
    }
}
@media (max-width:560px) {
    body.viewer-production .viewer-production-footer .manouke-footer-support {
        grid-template-columns:1fr !important;
    }
    body.viewer-production .viewer-production-footer .manouke-support-icon { display:none !important; }
}


/* =========================================================
   10.6d.2b.4g — HERO FAVORITE + CLEAN VIEWER FOOTER
========================================================= */
body.viewer-production .production-hero-actions {
    position:absolute;
    right:18px;
    bottom:15px;
    z-index:15;
    display:flex;
    align-items:center;
    gap:7px;
    max-width:calc(100% - 36px);
}
body.viewer-production .production-hero-actions .production-nav.production-nav-in-hero {
    position:static;
    right:auto;
    bottom:auto;
    width:max-content;
    max-width:none;
    margin:0;
}
body.viewer-production .production-favorite-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 46px;
    width:46px;
    height:46px;
    padding:0;
    border:1px solid rgba(78,58,41,.13);
    border-radius:999px;
    background:rgba(255,253,248,.94);
    color:#171411;
    text-decoration:none;
    box-shadow:0 5px 16px rgba(45,34,25,.07);
    font:inherit;
    font-size:25px;
    line-height:1;
    cursor:pointer;
    transition:transform .15s ease,background .15s ease,color .15s ease,opacity .15s ease;
}
body.viewer-production .production-favorite-button:hover { transform:translateY(-1px); }
body.viewer-production .production-favorite-button.is-favorite { color:#8a3f31; background:#fff8f1; }
body.viewer-production .production-favorite-button.is-busy { opacity:.55; cursor:wait; }
body.viewer-production .production-favorite-button.is-error { animation:viewer-favorite-shake .22s linear 2; }
@keyframes viewer-favorite-shake { 0%,100%{transform:translateX(0)} 50%{transform:translateX(3px)} }

body.viewer-production .viewer-production-footer {
    width:100%;
    margin:14px 0 0;
}
body.viewer-production .viewer-footer-card {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    width:100%;
    margin:0;
    padding:28px 22px 24px;
    border:1px solid rgba(255,255,255,.05);
    border-radius:14px;
    background:#2f2926;
    color:#eee8e3;
    box-shadow:0 8px 22px rgba(40,31,25,.09);
    font-family:Inter,"Segoe UI",sans-serif;
    text-align:center;
}
body.viewer-production .viewer-footer-card * { box-sizing:border-box; }
body.viewer-production .viewer-footer-support {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    min-width:0;
}
body.viewer-production .viewer-footer-heart {
    color:#f3ece6;
    font-size:20px;
    line-height:1;
}
body.viewer-production .viewer-footer-support-copy {
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:0;
    width:100%;
}
body.viewer-production .viewer-footer-support-copy>strong {
    display:block;
    margin:0 0 4px;
    color:#fff;
    font-size:14px;
}
body.viewer-production .viewer-footer-support-copy p {
    max-width:760px;
    margin:0 auto 9px;
    color:#d0c8c2;
    font-size:11px;
    line-height:1.5;
}
body.viewer-production .viewer-footer-support-actions {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:7px 10px;
}
body.viewer-production .viewer-footer-support-actions form { margin:0; }
body.viewer-production .viewer-footer-support-actions button {
    padding:6px 11px;
    border:0;
    border-radius:7px;
    background:#f3ece6;
    color:#342d29;
    font:inherit;
    font-size:11px;
    font-weight:750;
    cursor:pointer;
}
body.viewer-production .viewer-footer-support-actions small {
    color:#9e9690;
    font-size:9px;
}
body.viewer-production .viewer-footer-nav {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px 18px;
    width:100%;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.08);
}
body.viewer-production .viewer-footer-nav a {
    color:#eee8e3;
    text-decoration:none;
    font-size:11px;
    font-weight:700;
}
body.viewer-production .viewer-footer-nav a:hover {
    color:#fff;
    text-decoration:underline;
}
body.viewer-production .viewer-footer-meta {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    width:100%;
    min-width:0;
    color:#bdb5af;
    font-size:9px;
    line-height:1.45;
    text-align:center;
}
body.viewer-production .viewer-footer-meta strong { color:#eee8e3; }
body.viewer-production .viewer-footer-meta a { color:#d8d0ca; }
body.viewer-production .viewer-footer-top {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    margin-top:2px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    color:#d8d0ca;
    text-decoration:none;
    font-size:18px;
}
body.viewer-production .viewer-footer-top:hover {
    color:#fff;
    transform:translateY(-1px);
}
@media (max-width:520px) {
    body.viewer-production .viewer-footer-card {
        gap:12px;
        padding:22px 14px 20px;
    }
    body.viewer-production .viewer-footer-nav { gap:7px 13px; }
    body.viewer-production .viewer-footer-support-copy p { font-size:10px; }
}



/* =========================================================
   10.6d.2b.4h — SONG / ARTIST LINKS + INFO POPOVER
========================================================= */
body.viewer-production .production-hero-title-row {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
body.viewer-production .production-hero-title-row h1 { min-width:0; }
body.viewer-production .production-hero-entity-link {
    color:inherit;
    text-decoration:none;
    text-decoration-thickness:1px;
    text-underline-offset:.12em;
}
body.viewer-production .production-hero-entity-link:hover,
body.viewer-production .production-hero-entity-link:focus-visible {
    text-decoration:underline;
}
body.viewer-production .production-hero-artists {
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
}
body.viewer-production .production-hero-artist {
    display:inline-flex;
    align-items:center;
    gap:5px;
}

body.viewer-production .production-hero-edit-button {
    display:inline-flex;
    align-items:center;
    gap:5px;
    flex:0 0 auto;
    min-height:25px;
    padding:4px 9px;
    border:1px solid rgba(72,54,40,.20);
    border-radius:999px;
    background:rgba(255,253,248,.80);
    color:#514235;
    font:700 11px/1 Inter,"Segoe UI",sans-serif;
    text-decoration:none;
    box-shadow:0 2px 8px rgba(42,31,22,.05);
}
body.viewer-production .production-hero-edit-button:hover,
body.viewer-production .production-hero-edit-button:focus-visible {
    background:#fffdf8;
    color:#2f261f;
    text-decoration:none;
    transform:translateY(-1px);
}
body.viewer-production .production-hero-edit-button > span:first-child {
    font-size:14px;
    line-height:1;
}
body.viewer-production .production-hero-info-button {
    display:inline-grid;
    place-items:center;
    flex:0 0 auto;
    width:25px;
    height:25px;
    padding:0;
    border:1px solid rgba(72,54,40,.20);
    border-radius:999px;
    background:rgba(255,253,248,.80);
    color:#514235;
    font:700 13px/1 Georgia,"Times New Roman",serif;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(42,31,22,.05);
}
body.viewer-production .production-hero-info-button:hover,
body.viewer-production .production-hero-info-button:focus-visible {
    background:#fffdf8;
    transform:translateY(-1px);
}
body.viewer-production .production-hero-info-button-small {
    width:18px;
    height:18px;
    font-size:10px;
    box-shadow:none;
}
body.viewer-production .production-hero-info-popover {
    position:fixed;
    z-index:10050;
    max-width:calc(100vw - 20px);
    padding:16px 38px 15px 16px;
    border:1px solid #d8c9b8;
    border-radius:12px;
    background:#fffaf1;
    color:#2d251f;
    box-shadow:0 16px 44px rgba(35,26,19,.18);
    font-family:Inter,"Segoe UI",sans-serif;
}
body.viewer-production .production-hero-info-popover[hidden] { display:none !important; }
body.viewer-production .production-hero-info-title {
    display:block;
    margin:0 0 7px;
    color:#171411;
    font-size:15px;
}
body.viewer-production .production-hero-info-text {
    margin:0;
    color:#66594e;
    font-size:12px;
    line-height:1.55;
}
body.viewer-production .production-hero-info-link {
    display:inline-block;
    margin-top:10px;
    color:#4c3828;
    font-size:11px;
    font-weight:750;
    text-decoration:none;
}
body.viewer-production .production-hero-info-link:hover { text-decoration:underline; }
body.viewer-production .production-hero-info-link[hidden] { display:none !important; }
body.viewer-production .production-hero-info-close {
    position:absolute;
    top:7px;
    right:8px;
    width:26px;
    height:26px;
    padding:0;
    border:0;
    border-radius:999px;
    background:transparent;
    color:#6d5e52;
    font:700 18px/1 sans-serif;
    cursor:pointer;
}
body.viewer-production .production-hero-info-close:hover { background:rgba(80,58,40,.07); }
@media (max-width:620px) {
    body.viewer-production .production-hero-title-row { gap:7px; }
    body.viewer-production .production-hero-info-button { width:22px; height:22px; }
    body.viewer-production .production-hero-edit-button { min-height:22px; padding:3px 7px; font-size:10px; }
}


/* =========================================================
   10.6d.2b.4h.2 — EDIT GRILLE → V2 EDITOR
========================================================= */
body.viewer-production .production-grille-edit-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex:0 0 auto;
    min-height:46px;
    padding:0 15px;
    border:1px solid rgba(78,58,41,.13);
    border-radius:999px;
    background:rgba(255,253,248,.94);
    color:#2f261f;
    text-decoration:none;
    box-shadow:0 5px 16px rgba(45,34,25,.07);
    font:800 12px/1 Inter,"Segoe UI",sans-serif;
    transition:transform .15s ease,background .15s ease,color .15s ease;
}
body.viewer-production .production-grille-edit-button:hover,
body.viewer-production .production-grille-edit-button:focus-visible {
    transform:translateY(-1px);
    background:#fffdf8;
    color:#171411;
    text-decoration:none;
}
body.viewer-production .production-grille-edit-button > span:first-child {
    font-size:16px;
    line-height:1;
}
@media (max-width:620px) {
    body.viewer-production .production-grille-edit-button {
        min-height:42px;
        padding:0 11px;
        font-size:11px;
    }
}


/* 10.6d.2b.4i — Rhythm V2 preview parity with Rhythm Editor. */
body.viewer-production .viewer-v2-rhythm-cards {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}
body.viewer-production .viewer-v2-rhythm-card {
    width: 100%;
    max-width: none;
    min-width: 0;
}
body.viewer-production .viewer-v2-rhythm-pattern,
body.viewer-production .viewer-v2-rhythm-pattern-bar {
    width: 100%;
    min-width: 0;
}
body.viewer-production .viewer-v2-rhythm-pattern-bar {
    overflow-x: auto;
}
body.viewer-production .viewer-v2-rhythm-pattern-bar svg {
    display: block;
    max-width: none;
    height: auto;
}