/* The vocal trainer uses the shared utility controls and modal/bottom sheet. */
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-host { min-width:0; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-warmup { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);gap:16px;max-width:1000px;margin:0 auto;padding:24px;border:1px solid var(--theme-line,#b8cbdc);border-radius:20px;background:var(--panel,#fff); }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-toolbar { grid-column:1/-1;display:flex;align-items:end;gap:12px;min-width:0; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-toolbar .utility-field { flex:1;min-width:0; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-toolbar .utility-field select { appearance:none;-webkit-appearance:none;height:48px!important;min-height:48px!important;padding:10px 32px 10px 12px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234d6d8e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-toolbar .utility-settings-button { position:static;width:44px;min-width:44px;height:44px;margin:0;padding:8px; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-live { grid-row:2/4;display:flex;flex-direction:column;justify-content:center;min-width:0;gap:8px;padding:16px;border-radius:16px;background:var(--theme-softbg,#edf4fa);text-align:center; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-caption { margin:0;color:var(--muted);font-size:13px; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-live h2 { font-size:clamp(28px,4vw,44px);margin:0;line-height:1.15;overflow-wrap:anywhere;letter-spacing:-.8px; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-register { margin:0 0 8px;color:var(--muted);font-size:14px; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-navigation { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-warmup button { min-height:44px!important;touch-action:manipulation;scroll-margin-block:140px 112px; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-navigation button { padding:8px 4px!important;font-size:13px!important;white-space:normal;overflow-wrap:anywhere; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-tempo { align-self:center;min-width:0; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-tempo .utility-stepper { gap:8px;margin:8px 0; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-tempo .utility-number-value input { font-size:44px!important; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-tempo input[type=range] { width:100%;min-height:36px; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-transport { display:grid;grid-template-columns:1.5fr 1fr;gap:8px; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-transport button { min-height:48px!important;font-size:17px; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-sequence { grid-column:1/-1;min-width:0;border-top:1px solid var(--theme-line,#b8cbdc);padding-top:16px; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-sequence h3 { margin:0 0 12px;font-size:16px; }
:is(#app.registro-wordpress-app,#utility-focus-layer) [data-vocal-sequence] { display:flex;flex-wrap:wrap;gap:8px; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-note { display:flex;align-items:baseline;justify-content:center;gap:3px;min-width:44px;padding:10px 8px;border:1px solid var(--theme-line,#b8cbdc);border-radius:10px;background:var(--panel,#fff);line-height:1.2; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-note strong { font-size:20px; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-note small { color:var(--muted);font-size:12px; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-note.is-current { background:var(--forest,#003b64);border-color:var(--forest,#003b64);color:#fff; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-note.is-current small { color:inherit; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-playing-note { margin:8px 0 0;min-height:20px;color:var(--muted);font-size:13px; }
:is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-warmup .utility-status { grid-column:1/-1;margin:0; }
#vocal-settings-modal.registro-popup-backdrop { z-index:2147483100!important; }
#vocal-settings-modal :is(input,select) { min-width:0; }
#vocal-settings-modal .utility-help { font-size:13px;line-height:1.5;color:var(--muted); }
#vocal-settings-modal [data-vocal-config-error]:not(:empty) { color:var(--danger,#e93565); }
@media(max-width:700px) {
 :is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-warmup { grid-template-columns:minmax(0,1fr);padding:12px;gap:12px; }
 :is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-live { grid-row:auto;padding:12px; }
 :is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-toolbar { gap:8px; }
 :is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-live h2 { font-size:32px; }
 :is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-navigation { gap:4px; }
 :is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-navigation button span { display:block; }
 :is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-sequence { padding-top:12px; }
 :is(#app.registro-wordpress-app,#utility-focus-layer) .vocal-note { padding:8px 6px; }
}