/* ====================
   v3 Song Workspace: Liner Notes
   Loaded last on song-workspace.html only. Every rule is scoped to the Song
   Workspace body and to screen media, so the print layout and every other
   page keep their current styles.
   ==================== */

@media screen {

/* Selections use cocoa; the ink theme lifts it so it stands out on dark panels. */
html[data-theme] body[data-vue-page="song-workspace"] {
    --workspace-selected: var(--band);
}

html[data-theme="default"] body[data-vue-page="song-workspace"] {
    --workspace-selected: #5c4b3f;
}

/* Page heading ------------------------------------------------------------- */
/* Same column as the tool pages: 1200px of content inside 40px gutters (16px
   on phones), and the heading starts as high as theirs. */
html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-page {
    box-sizing: content-box;
    width: auto;
    max-width: 1200px;
    margin-top: 56px;
    margin-inline: auto;
    padding-inline: 40px;
}

html[data-theme] body[data-vue-page="song-workspace"]:not(.song-workspace-read-mode) .song-workspace-page {
    padding-top: 0;
}

html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-hero {
    max-width: none;
    margin: 0 0 48px;
    padding: 0;
    text-align: left;
}

html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-hero > .result-kicker {
    display: block;
    margin: 0 0 18px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-hero h1 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: clamp(46px, 6vw, 76px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.02em;
}

html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-hero .hero-tagline {
    margin: 10px 0 0;
    color: var(--accent);
    font-family: var(--font-serif);
    font-size: clamp(19px, 2vw, 24px);
    font-style: italic;
    font-weight: 400;
    text-align: left;
}

html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-lead {
    max-width: 680px;
    margin: 18px 0 0;
    color: var(--text-body);
    font-size: 17px;
    line-height: 1.65;
}

/* The four promise chips become one liner-notes line under a double rule. */
html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-promises {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 28px;
    padding-top: 10px;
    border-top: 3px double var(--ink);
}

html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-promises > span {
    min-height: 0;
    padding: 0;
    color: var(--text-muted);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-promises > span:not(.workspace-save-state):not(:nth-last-child(2))::after {
    content: "\00a0\00a0·";
}

html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-promises > .workspace-save-state {
    margin-left: auto;
    color: var(--success);
}

html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-promises > .workspace-save-state[data-state="neutral"]::before {
    content: "✓\00a0";
}

html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-promises > .workspace-save-state:is([data-state="unavailable"], [data-state="error"]) {
    color: var(--danger);
}

html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-promises > .workspace-save-state[data-state="saving"] {
    color: var(--text-muted);
}

html[data-theme]:lang(zh) body[data-vue-page="song-workspace"] :is(.song-workspace-hero > .result-kicker, .song-workspace-promises > span) {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: none;
}

html[data-theme]:lang(zh) body[data-vue-page="song-workspace"] .song-workspace-hero h1 {
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: 0;
}

html[data-theme]:lang(zh) body[data-vue-page="song-workspace"] .song-workspace-hero .hero-tagline {
    font-style: normal;
    font-weight: 600;
}

/* Section headings and buttons --------------------------------------------- */
html[data-theme] body[data-vue-page="song-workspace"] .workspace-section-heading {
    align-items: flex-end;
    margin-bottom: 18px;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-section-heading .result-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

html[data-theme]:lang(zh) body[data-vue-page="song-workspace"] .workspace-section-heading .result-kicker {
    font-size: 13px;
    letter-spacing: 0.08em;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-section-heading h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.08;
}

html[data-theme]:lang(zh) body[data-vue-page="song-workspace"] :is(.workspace-section-heading h2, .workspace-import-card h3, .workspace-song-card h3) {
    font-weight: 600;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-button {
    min-height: 46px;
    padding: 0 18px;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: var(--radius-control);
    box-shadow: none;
    font-size: 15px;
    font-weight: 600;
    transform: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-button:hover:not(:disabled) {
    color: var(--paper);
    background: var(--ink);
    border-color: var(--ink);
    box-shadow: none;
    transform: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-button-primary {
    color: var(--paper);
    background: var(--ink);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-button-primary:hover:not(:disabled) {
    color: var(--on-accent);
    background: var(--accent);
    border-color: var(--accent);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-button-danger {
    color: var(--danger);
    background: transparent;
    border-color: var(--danger);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-button-danger:hover:not(:disabled) {
    color: var(--paper);
    background: var(--danger);
    border-color: var(--danger);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-button-subtle {
    border-color: transparent;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-button-compact {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
}

html[data-theme] body[data-vue-page="song-workspace"] :is(.workspace-button, .workspace-entry-card, .workspace-line, select, input, textarea, summary):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

/* Create Song: a numbered tracklist ---------------------------------------- */
html[data-theme] body[data-vue-page="song-workspace"] .workspace-create-area {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
    gap: 0 24px;
    margin: 0 0 56px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-create-area > .workspace-section-heading {
    grid-column: 1 / -1;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-entry-grid {
    display: block;
    margin: 0;
    border-top: 1px solid var(--ink);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-entry-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 46px;
    grid-template-areas: "index title go" "index copy go";
    align-items: center;
    gap: 2px 16px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 22px 20px;
    color: var(--text-body);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    transform: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-entry-card::before {
    display: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-entry-card::after {
    content: "→";
    grid-area: go;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: var(--radius-control);
    font-size: 18px;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-entry-index {
    grid-area: index;
    align-self: center;
    margin: 0;
    color: var(--accent);
    font-family: var(--font-serif);
    font-size: 30px;
    letter-spacing: 0;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-entry-card strong {
    grid-area: title;
    margin: 0;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.1;
}

html[data-theme]:lang(zh) body[data-vue-page="song-workspace"] .workspace-entry-card strong {
    font-weight: 600;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-entry-card > span:last-child {
    grid-area: copy;
    margin: 0;
    color: var(--text-body);
    font-size: 15px;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-entry-card:hover {
    background: color-mix(in srgb, var(--band) 8%, transparent);
    box-shadow: none;
    transform: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-entry-card:hover::after {
    color: var(--on-band);
    background: var(--workspace-selected);
    border-color: var(--workspace-selected);
}

html[data-theme] body[data-vue-page="song-workspace"] :is(.workspace-main-disclosure, .workspace-local-note) {
    margin: 0;
    padding: 22px;
    color: var(--text-body);
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-local-note {
    margin-top: 24px;
    border-top: 3px double var(--ink);
}

html[data-theme] body[data-vue-page="song-workspace"] :is(.workspace-main-disclosure, .workspace-local-note) strong {
    color: var(--ink);
    font-size: 15px;
}

html[data-theme] body[data-vue-page="song-workspace"] :is(.workspace-main-disclosure, .workspace-local-note) p {
    margin: 8px 0 0;
    color: var(--text-body);
    font-size: 14px;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-disclosure-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
}

/* Import options ------------------------------------------------------------- */
html[data-theme] body[data-vue-page="song-workspace"] .workspace-import-area {
    margin: 0 0 56px;
    padding: 0;
    border: 0;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-import-grid {
    gap: 24px;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-import-card {
    gap: 12px;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-import-type {
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-import-card h3 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-chordpro-example {
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-import-help summary {
    color: var(--ink);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-import-note {
    color: var(--text-muted);
}

/* My Songs: catalog rows ------------------------------------------------------ */
html[data-theme] body[data-vue-page="song-workspace"] .workspace-library {
    padding: 0;
    border: 0;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-song-grid {
    display: block;
    border-top: 1px solid var(--ink);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-song-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "identity actions" "meta actions" "menu menu";
    align-items: center;
    gap: 10px 20px;
    min-height: 0;
    padding: 22px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-song-card-identity {
    grid-area: identity;
    padding: 0;
    border: 0;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-song-card h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.1;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-song-title-block p {
    margin: 2px 0 0;
    color: var(--text-body);
    font-size: 15px;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-song-meta-summary {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-song-meta-row {
    display: inline-flex;
    align-items: center;
    height: 28px;
    margin: 0;
    padding: 0 10px;
    color: var(--ink);
    background: var(--surface-sunken);
    border: 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-song-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-song-actions .workspace-button {
    width: auto;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-song-download-menu {
    grid-area: menu;
    justify-self: end;
}

/* Editor: a compact heading while a song is open ---------------------------- */
html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-page:has(#workspaceEditorView:not([hidden])) .song-workspace-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 3px double var(--ink);
}

html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-page:has(#workspaceEditorView:not([hidden])) .song-workspace-hero > .result-kicker {
    flex-basis: 100%;
    margin-bottom: 0;
}

html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-page:has(#workspaceEditorView:not([hidden])) .song-workspace-hero h1 {
    font-size: 40px;
    line-height: 1;
}

html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-page:has(#workspaceEditorView:not([hidden])) :is(.song-workspace-hero .hero-tagline, .song-workspace-lead, .song-workspace-promises > span:not(.workspace-save-state)) {
    display: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-page:has(#workspaceEditorView:not([hidden])) .song-workspace-promises {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Song settings ------------------------------------------------------------------ */
html[data-theme] body[data-vue-page="song-workspace"] .workspace-settings-disclosure {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-settings-disclosure > summary {
    color: var(--ink);
    background: none;
    border-radius: 0;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-settings-panel {
    background: none;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] :is(.workspace-setting-label, .workspace-reading-control-label, .workspace-field > span) {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html[data-theme] body[data-vue-page="song-workspace"] :is(.workspace-field select, .workspace-field input, .workspace-field textarea) {
    color: var(--ink);
    background-color: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] :is(.workspace-field select, .workspace-field input):is(:hover, :focus) {
    border-color: var(--ink);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-readonly-field strong {
    color: var(--ink);
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-setting-help-trigger {
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] :is(.workspace-reading-stepper, .workspace-read-stepper) {
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] :is(.workspace-reading-step-button, .workspace-read-stepper button) {
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] :is(.workspace-reading-step-button, .workspace-read-stepper button):hover {
    background: var(--surface-sunken);
}

/* Chord view: a segmented control with a cocoa selection ----------------------- */
html[data-theme] body[data-vue-page="song-workspace"] .workspace-segmented {
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: var(--radius-control);
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-segmented button {
    min-height: 44px;
    padding: 0 16px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    transform: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-segmented button:first-child {
    border-left: 0;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-segmented button:hover {
    background: var(--surface-sunken);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-segmented button:is(.is-selected, [aria-pressed="true"]),
html[data-theme] body[data-vue-page="song-workspace"] .workspace-segmented button:is(.is-selected, [aria-pressed="true"]):hover {
    color: var(--on-band);
    background: var(--workspace-selected);
}

html[data-theme] body[data-vue-page="song-workspace"] #chordHintsButton[aria-pressed="true"] {
    color: var(--on-band);
    background: var(--workspace-selected);
    border-color: var(--workspace-selected);
}

/* Chart ------------------------------------------------------------------------------ */
html[data-theme] body[data-vue-page="song-workspace"] .workspace-chart-panel {
    padding: 32px 36px 36px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-score-header {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-score-kicker-row .result-kicker {
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

html[data-theme] body[data-vue-page="song-workspace"] #songChartTitle {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 400;
    line-height: 1.04;
}

html[data-theme]:lang(zh) body[data-vue-page="song-workspace"] #songChartTitle {
    font-weight: 600;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-title-trigger {
    color: inherit;
    font: inherit;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-title-trigger small,
html[data-theme] body[data-vue-page="song-workspace"] .workspace-inline-edit-button {
    color: var(--accent);
    font-family: var(--font-sans);
    font-weight: 600;
}

html[data-theme] body[data-vue-page="song-workspace"] #songMetadataSummary {
    color: var(--text-muted);
}

html[data-theme] body[data-vue-page="song-workspace"] #chartKeySummary {
    padding: 8px 12px;
    color: var(--on-band);
    background: var(--band);
    border: 0;
    border-radius: var(--radius-control);
    font-size: 13px;
    font-weight: 600;
}

/* Sections are numbered like tracks and ruled to the edge. */
html[data-theme] body[data-vue-page="song-workspace"] .workspace-chart {
    counter-reset: workspace-section;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-section {
    counter-increment: workspace-section;
    border-top: 0;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-section-heading-row h3 {
    display: flex;
    flex: 1;
    align-items: baseline;
    gap: 12px;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 400;
}

html[data-theme]:lang(zh) body[data-vue-page="song-workspace"] .workspace-section-heading-row h3 {
    font-weight: 600;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-section-heading-row h3::before {
    content: counter(workspace-section, decimal-leading-zero);
    color: var(--accent);
    font-size: 18px;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-section-heading-row h3::after {
    content: "";
    flex: 1;
    align-self: center;
    border-top: 1px solid var(--line);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-section-title-trigger {
    color: inherit;
    font: inherit;
}

/* Lines show an edit pencil on hover and keyboard focus. */
html[data-theme] body[data-vue-page="song-workspace"] button.workspace-line {
    position: relative;
    padding-right: 48px;
    border-radius: var(--radius-control);
}

html[data-theme] body[data-vue-page="song-workspace"] button.workspace-line:is(:hover, :focus-visible) {
    background: var(--surface-sunken);
}

html[data-theme] body[data-vue-page="song-workspace"] button.workspace-line::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 20px;
    height: 20px;
    background: var(--ink);
    opacity: 0;
    transform: translateY(-50%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

html[data-theme] body[data-vue-page="song-workspace"] button.workspace-line:is(:hover, :focus-visible)::after {
    opacity: 1;
}

html[data-theme] body[data-vue-page="song-workspace"] :is(.workspace-chord-annotation, .workspace-chord-chip, .workspace-instrumental-chord) {
    color: var(--accent);
    font-weight: 700;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-lyric-flow {
    color: var(--ink);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-add-trigger {
    color: var(--text-muted);
    background: transparent;
    border-radius: var(--radius-control);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-add-trigger:is(:hover, :focus-visible) {
    color: var(--accent);
}

/* Chord shapes ------------------------------------------------------------------------ */
html[data-theme] body[data-vue-page="song-workspace"] .workspace-shapes-panel {
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] #chordShapesTitle {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 400;
}

html[data-theme]:lang(zh) body[data-vue-page="song-workspace"] #chordShapesTitle {
    font-weight: 600;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-shape-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-shape-card h3 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
}

/* Read mode: just the chart and its toolbar --------------------------------------- */
html[data-theme] body[data-vue-page="song-workspace"].song-workspace-read-mode .song-workspace-page:has(#workspaceEditorView:not([hidden])) .song-workspace-hero {
    display: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-read-toolbar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] #exitReadModeButton {
    color: var(--ink);
    background: transparent;
    border-color: var(--ink);
}

html[data-theme] body[data-vue-page="song-workspace"] #exitReadModeButton::before {
    content: "←\00a0";
}

html[data-theme] body[data-vue-page="song-workspace"] #exitReadModeButton:hover {
    color: var(--paper);
    background: var(--ink);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-read-summary {
    flex: 0 1 auto;
    margin-right: auto;
    padding: 8px 12px;
    color: var(--on-band);
    background: var(--band);
    border-radius: var(--radius-control);
    font-size: 13px;
    font-weight: 600;
}

html[data-theme] body[data-vue-page="song-workspace"].song-workspace-read-mode :is(#songChartTitle, #songChartTitle .workspace-title-trigger) {
    color: var(--ink);
    opacity: 1;
}

/* Performance mode: a full-page stage in the current theme -------------------------- */
html[data-theme] body[data-vue-page="song-workspace"] .workspace-performance {
    color: var(--ink);
    background: var(--paper);
}

html[data-theme] body[data-vue-page="song-workspace"] .performance-header {
    background: var(--paper);
    border-bottom: 3px double var(--line);
}

html[data-theme] body[data-vue-page="song-workspace"] .performance-header .result-kicker {
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

html[data-theme] body[data-vue-page="song-workspace"] #performanceTitle {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 400;
}

html[data-theme] body[data-vue-page="song-workspace"] .performance-speed-help summary {
    color: var(--accent);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-performance .workspace-line:hover {
    background: color-mix(in srgb, var(--band) 8%, transparent);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-performance :is(.workspace-icon-button, .workspace-button) {
    color: var(--ink);
    background: transparent;
    border-color: var(--ink);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-performance .workspace-button-primary,
html[data-theme] body[data-vue-page="song-workspace"] .workspace-performance #scrollToggleButton {
    color: var(--on-band);
    background: var(--workspace-selected);
    border-color: var(--workspace-selected);
}

html[data-theme] body[data-vue-page="song-workspace"] .performance-toolbar {
    background: var(--surface);
    border-color: var(--line);
    border-radius: 10px;
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .performance-toolbar label {
    background: transparent;
    border-color: var(--line);
    border-radius: var(--radius-control);
}

/* Dialogs ------------------------------------------------------------------------------ */
html[data-theme] body[data-vue-page="song-workspace"] .workspace-dialog:not(.workspace-performance) {
    color: var(--text-body);
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px double var(--ink);
    border-radius: 0;
    box-shadow: 0 24px 60px rgba(15, 13, 11, 0.28);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-dialog-heading .result-kicker {
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-dialog-heading h2 {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.05;
}

html[data-theme]:lang(zh) body[data-vue-page="song-workspace"] .workspace-dialog-heading h2 {
    font-weight: 600;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-icon-button {
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: var(--radius-control);
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] #createSourceInput {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 14px;
    line-height: 1.55;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-dialog-disclosure {
    color: var(--text-muted);
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-dialog-actions {
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

html[data-theme] body[data-vue-page="song-workspace"] :is(.workspace-global-add-type, .workspace-line-card, .workspace-anchor-item) {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    box-shadow: none;
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-global-add-type:hover {
    border-color: var(--ink);
}

html[data-theme] body[data-vue-page="song-workspace"] .workspace-anchor-preview button.is-selected {
    color: var(--on-band);
    background: var(--workspace-selected);
    border-color: var(--workspace-selected);
}

/* Line editor on tablets and desktops: a heading, a word strip and a chord tracklist */
@media (min-width: 721px) {
    html[data-theme] body[data-vue-page="song-workspace"] .workspace-line-dialog .workspace-dialog-heading {
        align-items: flex-start;
        margin-bottom: 22px;
        padding-bottom: 18px;
        border-bottom: 1px solid var(--line);
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-line-dialog .workspace-line-dialog-subtitle {
        display: block;
        margin: 8px 0 0;
        color: var(--text-muted);
        font-size: 14px;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-line-dialog .workspace-anchor-preview {
        gap: 6px;
        min-height: 0;
        margin: 14px 0 22px;
        padding: 12px;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-line-dialog .workspace-anchor-preview button {
        min-width: 0;
        min-height: 36px;
        padding: 0 12px;
        color: var(--ink);
        background: var(--surface-sunken);
        border: 1px solid transparent;
        border-radius: var(--radius-control);
        font-size: 14px;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-line-dialog .workspace-anchor-preview button:hover {
        border-color: var(--ink);
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-line-dialog #addAnchorButton {
        min-height: 48px;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-line-dialog .workspace-anchor-list-heading {
        display: flex;
        flex: 1 0 100%;
        justify-content: space-between;
        gap: 12px;
        margin-top: 24px;
        padding-bottom: 8px;
        color: var(--accent);
        border-bottom: 1px solid var(--ink);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-line-dialog #anchorChordCount {
        color: var(--text-muted);
        letter-spacing: 0.04em;
        text-transform: none;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-line-dialog .workspace-anchor-list {
        gap: 0;
        margin-top: 0;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-line-dialog .workspace-anchor-item {
        gap: 8px;
        padding: 10px 0;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-line-dialog .workspace-anchor-item strong {
        color: var(--ink);
        font-weight: 600;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-line-dialog .workspace-anchor-item [data-action="edit-anchor"] {
        color: var(--ink);
        border-color: var(--line);
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-line-dialog .workspace-anchor-item [data-action="edit-anchor"]:hover:not(:disabled) {
        color: var(--on-band);
        background: var(--workspace-selected);
        border-color: var(--workspace-selected);
    }
}

/* Phones -------------------------------------------------------------------------------- */
@media (max-width: 760px) {
    html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-page {
        margin-top: 32px;
        padding-inline: 16px;
    }

    /* The start screen gets the tool pages' compact, centred phone heading. */
    html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-page:not(:has(#workspaceEditorView:not([hidden]))) .song-workspace-hero {
        text-align: center;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-page:not(:has(#workspaceEditorView:not([hidden]))) .song-workspace-hero > .result-kicker {
        margin-bottom: 8px;
        font-size: 10.5px;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-page:not(:has(#workspaceEditorView:not([hidden]))) .song-workspace-hero h1 {
        font-size: 34px;
        line-height: 1.08;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-page:not(:has(#workspaceEditorView:not([hidden]))) .song-workspace-hero .hero-tagline {
        margin-top: 6px;
        font-size: 16px;
        text-align: center;
        text-wrap: balance;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-page:not(:has(#workspaceEditorView:not([hidden]))) .song-workspace-lead {
        max-width: 34ch;
        margin-inline: auto;
        text-wrap: balance;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-page:not(:has(#workspaceEditorView:not([hidden]))) .song-workspace-promises {
        justify-content: center;
        margin-top: 16px;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .song-workspace-page:not(:has(#workspaceEditorView:not([hidden]))) .song-workspace-promises > .workspace-save-state {
        margin-left: 0;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-section-heading {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-section-heading h2 {
        font-size: 24px;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-create-area {
        grid-template-columns: minmax(0, 1fr);
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-main-disclosure {
        margin-top: 16px;
        padding: 16px;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-entry-card {
        grid-template-columns: 40px minmax(0, 1fr) 44px;
        gap: 2px 12px;
        padding: 16px 12px;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-entry-card::after {
        width: 44px;
        height: 44px;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-entry-index {
        font-size: 24px;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-entry-card strong {
        font-size: 22px;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-entry-card > span:last-child {
        font-size: 14px;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-import-card {
        padding: 20px;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-song-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "identity" "meta" "actions" "menu";
        padding: 18px 0;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-song-card h3 {
        font-size: 24px;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-song-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-song-actions .workspace-button {
        width: 100%;
        min-height: 46px;
        border-radius: var(--radius-control);
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-song-download-menu {
        justify-self: stretch;
    }

    /* The chord view and the chord shapes scroll sideways instead of wrapping. */
    html[data-theme] body[data-vue-page="song-workspace"] .workspace-segmented {
        display: flex;
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-segmented button {
        flex: none;
        white-space: nowrap;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-chart-panel {
        padding: 20px;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-shapes-panel {
        padding: 18px;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-editor:not(.is-read-mode) .workspace-shape-cards {
        display: flex;
        gap: 10px;
        margin: 0 -18px;
        padding: 0 18px 4px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    html[data-theme] body[data-vue-page="song-workspace"] .workspace-editor:not(.is-read-mode) .workspace-shape-card {
        flex: 0 0 200px;
        scroll-snap-align: start;
    }
}

}