/* The working side of TandaClara: the homepage's type, palette and open edges,
   with denser controls for finding a recording and keeping a dance night. */
html[data-theme][data-theme-page="home"] {
  #workspaceToolsJump { display: none; }
  /* site-refined.css hides the viewing preferences whenever the home panel is
     hidden, which left the workspace with no language or font-size control. */
  &[data-design-direction] body:has(#workspace:not([hidden])) header > .home-preferences.home-preferences { display: block; }
  body:has(#workspace:not([hidden])) {
    --page-gutter: clamp(20px, 4vw, 64px);

    > header {
      max-width: calc(1384px + 2 * var(--page-gutter));
      margin-inline: auto;
      min-height: 84px;
      padding-block: calc(12px + env(safe-area-inset-top)) 12px;
      gap: 8px;
      flex-wrap: wrap;
    }
    > header h1 { width: auto; height: 44px; margin-right: auto; }
    #headerTandaBuilderLink, #headerLanguagePick { display: none; }
    > header > .home-preferences { display: block; }
    > header :is(.home-preferences > summary, .theme-toggle, #guideBtn, #headerAuthBtn, #workspaceToolsJump) {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      height: auto;
      margin: 0;
      padding: 8px 11px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--ui-muted);
      font: 500 calc(13px * var(--app-font-scale))/1.4 var(--ui-font);
      letter-spacing: 0;
      cursor: pointer;
    }
    > header .home-preferences > summary { gap: 7px; }
    > header .home-preferences > summary > span { font: inherit; letter-spacing: 0; }
    > header .home-preferences > summary .home-preferences-plus { font-size: 17px; }
    > header .theme-toggle { width: 44px; min-width: 44px; padding: 0; }
    > header #headerAuthBtn { border: 1px solid var(--ui-line); color: var(--ui-text); }
    > header :is(.home-preferences > summary, .theme-toggle, #guideBtn, #headerAuthBtn, #workspaceToolsJump):hover {
      background: var(--ui-soft);
      color: var(--ui-text);
    }
    /* A status line ("sign in to identify", "listening…") takes its own row
       under the controls instead of splitting them. */
    > header #status { order: 9; flex-basis: 100%; text-align: right; font-size: 12px; }
    > header #status:empty { display: none; }
    #controls { z-index: 17; }
    #identifyBtn { background: var(--ui-soft); color: var(--ui-text); }
  }

  #workspace {
    max-width: 1384px;
    margin-inline: auto;
    padding-top: 22px;
    color: var(--ui-text);

    .workspace-heading { display: flex; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 24px; }
    .workspace-heading h2 { margin: 0; font-size: calc(28px * var(--app-font-scale)); font-weight: 500; line-height: 1.35; letter-spacing: -.035em; }
    .workspace-heading p { max-width: 62ch; margin: 0; font-size: calc(13px * var(--app-font-scale)); line-height: 1.7; color: var(--ui-muted); }

    #searchBar { gap: 10px 12px; margin: 0 0 18px; }
    #searchInput {
      min-height: 76px;
      padding: 14px 16px;
      border: 1px solid var(--ui-line);
      border-radius: 8px;
      background: transparent;
      color: var(--ui-text);
      font-size: calc(15px * var(--app-font-scale));
      line-height: 1.55;
      box-shadow: none;
    }
    #searchInput::placeholder { color: var(--ui-muted); opacity: .8; }
    #searchInput:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 2px var(--ui-soft); }
    .search-primary-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .search-primary-actions .random-button, #searchClear {
      flex: none;
      min-height: 44px;
      padding: 9px 15px;
      border: 1px solid var(--ui-line);
      border-radius: 7px;
      background: transparent;
      color: var(--ui-text);
      font-size: calc(13px * var(--app-font-scale));
      font-weight: 500;
      line-height: 1.5;
      white-space: normal;
      box-shadow: none;
    }
    .search-primary-actions .random-button:hover, #searchClear:hover { background: var(--ui-soft); border-color: var(--ui-muted); }
    .search-primary-actions .random-button:focus-visible, #searchClear:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
    .search-primary-actions .random-button:disabled { opacity: .45; cursor: not-allowed; }
    #searchClear { color: var(--ui-muted); margin-left: auto; }
    #searchNote { color: var(--ui-muted); margin: 0 0 16px; }

    /* A single night, with its status, controls and optional Bingo board. */
    .workspace-milonga {
      display: grid;
      /* Title, then its two actions beside it, then Bingo at the far edge. */
      grid-template-columns: minmax(120px, auto) auto minmax(230px, 1fr);
      align-items: center;
      gap: 12px 24px;
      margin: 28px 0 34px;
      padding: 19px 0;
      border-block: 1px solid var(--ui-line);
    }
    .workspace-section-head { min-width: 0; }
    .workspace-section-head h2 { margin: 0; font-size: calc(18px * var(--app-font-scale)); line-height: 1.4; font-weight: 550; }
    .workspace-section-head p { margin: 5px 0 0; color: var(--ui-muted); font-size: calc(12px * var(--app-font-scale)); line-height: 1.65; }
    #sessionInfo { display: block; margin-top: 5px; color: var(--ui-muted); font-size: calc(12px * var(--app-font-scale)); line-height: 1.6; overflow-wrap: anywhere; }
    #sessionInfo:empty { display: none; }
    .workspace-milonga-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .workspace-milonga-actions button, .workspace-library-head > button, .workspace-library-actions > button {
      min-height: 44px;
      padding: 9px 14px;
      border: 1px solid var(--ui-line);
      border-radius: 7px;
      background: transparent;
      color: var(--ui-text);
      font: 500 calc(13px * var(--app-font-scale))/1.5 var(--ui-font);
      cursor: pointer;
    }
    .workspace-milonga-actions button:hover, .workspace-library-head > button:hover, .workspace-library-actions > button:hover { background: var(--ui-soft); border-color: var(--ui-muted); }
    .workspace-milonga-actions button:disabled { opacity: .45; cursor: not-allowed; }
    .workspace-milonga-actions #milongaBtn { background: var(--ui-soft); font-weight: 550; }
    .workspace-milonga-actions #milongaBtn.recording { border-color: var(--ui-accent); color: var(--ui-accent); }
    #milongaBingo { min-width: 0; margin: 0; justify-self: end; }
    #milongaBingo .milonga-bingo { max-width: none; border: 0; border-radius: 0; background: transparent; }
    #milongaBingo .bingo-toggle { min-height: 44px; gap: 10px; padding: 9px 0 9px 20px; border-left: 1px solid var(--ui-line); font-size: calc(13px * var(--app-font-scale)); }
    #milongaBingo .bingo-title { font-weight: 500; }
    #milongaBingo .bingo-tally { font-size: calc(12px * var(--app-font-scale)); }
    #milongaBingo .bingo-chevron { font-size: 20px; color: var(--ui-muted); }
    #milongaBingo:has(.bingo-body:not([hidden])) { grid-column: 1 / -1; justify-self: stretch; border-top: 1px solid var(--ui-line); padding-top: 10px; }
    #milongaBingo:has(.bingo-body:not([hidden])) .bingo-toggle { border-left: 0; padding-left: 0; }
    #milongaBingo .bingo-body { max-width: 680px; padding: 12px 0 8px; }
    #milongaPanel { grid-column: 1 / -1; width: 100%; margin: 0; padding: 20px 0 0; border-color: var(--ui-line); border-bottom: 0; }

    .workspace-library-head, .workspace-explore-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px 20px;
      margin-bottom: 16px;
    }
    .workspace-library-head h2, .workspace-explore-head h2 { margin: 0; font-size: calc(22px * var(--app-font-scale)); line-height: 1.4; font-weight: 500; letter-spacing: -.025em; }
    .workspace-library-head h2 { margin-right: auto; }
    .workspace-library-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
    .workspace-library-actions > button:disabled, .workspace-library-menu #clearBtn:disabled { opacity: .45; cursor: not-allowed; }
    .workspace-library-menu { position: relative; }
    .workspace-library-menu[open] { background: transparent; }
    .workspace-library-menu > summary {
      display: flex; align-items: center; justify-content: center;
      min-width: 44px; min-height: 44px; margin: 0; padding: 8px 12px;
      border: 1px solid var(--ui-line); border-radius: 7px;
      list-style: none; color: var(--ui-muted); cursor: pointer;
      font-size: calc(13px * var(--app-font-scale));
    }
    .workspace-library-menu[open] > summary { margin-bottom: 0; color: var(--ui-text); }
    .workspace-library-menu > summary::-webkit-details-marker { display: none; }
    .workspace-library-menu #clearBtn {
      position: absolute; right: 0; top: calc(100% + 6px); z-index: 8;
      min-width: 180px; max-width: min(300px, 80vw); min-height: 48px;
      padding: 12px 16px; border: 1px solid var(--ui-line); border-radius: 8px;
      background: var(--ui-surface); color: light-dark(#943e3d, #f0a79c);
      text-align: left; font: inherit; font-size: calc(13px * var(--app-font-scale)); cursor: pointer;
      box-shadow: 0 6px 18px #00000012;
    }
    .workspace-library-menu:not([open]) #clearBtn { display: none; }
    #appShell { gap: 28px; }
    .folder-sidebar { padding-top: 5px; }
    .folder-sidebar-title { margin-bottom: 12px; font-weight: 500; font-size: calc(12px * var(--app-font-scale)); }
    #folderBar { gap: 3px; }
    #folderBar > button { min-height: 40px; padding: 8px 10px; font-weight: 450; }
    #folderBar .folder-chip.active { background: var(--ui-soft); color: var(--ui-text); border-color: var(--ui-line); font-weight: 600; }
    #folderBar .folder-chip.favorite.active { color: light-dark(#914151, #f29aa8); }
    .date-heading { padding-top: 10px; color: var(--ui-muted); font-weight: 500; font-size: calc(12px * var(--app-font-scale)); }
    .date-heading::after { background: var(--ui-line); }
    #empty { margin: 0; padding: 45px 16px; color: var(--ui-muted); text-align: center; font-size: calc(14px * var(--app-font-scale)); }
    #guestStorageNotice { margin: 8px 0 18px; padding: 10px 14px; background: var(--ui-soft); border-color: var(--ui-line); color: var(--ui-muted); border-radius: 7px; }

    /* A small index rather than another row of competing primary buttons. */
    #workspaceExplore { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--ui-line); scroll-margin-top: 24px; }
    #workspaceLibrary { scroll-margin-top: 24px; }
    .workspace-explore-head { align-items: baseline; margin-bottom: 24px; }
    .workspace-explore-head p { color: var(--ui-muted); font-size: calc(13px * var(--app-font-scale)); line-height: 1.7; max-width: 70ch; margin: 8px 0 0; }
    .workspace-explore-head > :is(button, a) {
      flex: none; min-height: 44px; padding: 8px 0; border: 0; background: transparent;
      color: var(--ui-muted); font: 500 calc(12px * var(--app-font-scale))/1.5 var(--ui-font); text-decoration: none; cursor: pointer;
    }
    .workspace-explore-head > :is(button, a):hover { color: var(--ui-text); text-decoration: underline; text-underline-offset: 4px; }
    .workspace-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; align-items: start; }
    .workspace-tool-group {
      display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-content: start;
      min-width: 0; margin: 0; padding: 22px 0; border: 0; border-top: 1px solid var(--ui-line); border-radius: 0; background: transparent; box-shadow: none;
    }
    .workspace-tool-group > :not(.workspace-tool-mark) { grid-column: 2; }
    /* The same marks the home page gives these sections, in the same ink. */
    .workspace-tool-mark { grid-row: 1 / span 3; display: grid; place-items: center; width: 26px; height: 26px; color: var(--ui-accent); }
    .workspace-tool-mark svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
    .workspace-tool-group h3 { margin: 0; color: var(--ui-text); font-size: calc(17px * var(--app-font-scale)); font-weight: 550; line-height: 1.5; }
    .workspace-tool-group p { margin: 6px 0 12px; max-width: 64ch; color: var(--ui-muted); font-size: calc(12px * var(--app-font-scale)); line-height: 1.75; }
    .workspace-tool-group[open] { background: transparent; }
    .workspace-tool-group > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; margin: -7px 0; padding: 7px 0; list-style: none; color: var(--ui-text); }
    .workspace-tool-group > summary::-webkit-details-marker { display: none; }
    .workspace-tool-group > summary::after { content: "+"; flex: none; color: var(--ui-muted); font-size: 20px; font-weight: 400; }
    .workspace-tool-group[open] > summary { color: var(--ui-text); margin-bottom: 8px; }
    .workspace-tool-group[open] > summary::after { content: "−"; }
    .workspace-tool-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; }
    .workspace-tool-links > :is(a, button) {
      display: inline-flex; align-items: center; justify-content: flex-start;
      flex: none; max-width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 8px 0;
      border: 0; border-radius: 4px; background: transparent; box-shadow: none;
      color: var(--ui-link); font: 500 calc(13px * var(--app-font-scale))/1.65 var(--ui-font);
      white-space: normal; overflow-wrap: anywhere; text-align: left; text-decoration: none; cursor: pointer;
    }
    .workspace-tool-links > :is(a, button):hover { background: transparent; color: var(--ui-text); text-decoration: underline; text-underline-offset: 4px; }
    .workspace-tool-links > :is(a, button):disabled { opacity: .45; cursor: not-allowed; }
    .workspace-tool-links > :is(a, button):focus-visible { outline: 2px solid var(--ui-link); outline-offset: 4px; }
    #lyricExplorerPanel { margin-top: 16px; border-color: var(--ui-line); scroll-margin-top: 24px; }

    .workspace-settings { margin-top: 28px; padding: 16px 0 4px; border-top: 1px solid var(--ui-line); }
    .workspace-settings #workspaceTools { background: transparent; }
    .workspace-settings #workspaceTools > summary {
      display: inline-flex; align-items: center; justify-content: flex-start; gap: 12px;
      min-height: 44px; padding: 8px 0; margin: 0; border: 0; background: transparent;
      color: var(--ui-muted); font-size: calc(12px * var(--app-font-scale)); font-weight: 500; list-style: none;
    }
    .workspace-settings #workspaceTools > summary::-webkit-details-marker { display: none; }
    .workspace-settings #workspaceTools > summary::after { content: "+"; font-size: 17px; color: var(--ui-muted); }
    .workspace-settings #workspaceTools[open] > summary::after { content: "−"; }
    .workspace-settings #toolbar { gap: 10px 12px; margin-top: 10px; padding-bottom: 16px; }
    .workspace-settings #toolbar button { min-height: 44px; padding: 8px 12px; border-color: var(--ui-line); background: transparent; color: var(--ui-text); font-size: calc(12px * var(--app-font-scale)); font-weight: 500; }
    .workspace-settings #toolbar button:hover { background: var(--ui-soft); }
    .workspace-settings #authInfo { color: var(--ui-muted); font-size: calc(12px * var(--app-font-scale)); }
    :is(#workspaceExploreTitle, #workspaceLibraryTitle):focus { outline: none; }
  }
}

@media (max-width: 1100px) {
  html[data-theme][data-theme-page="home"] #workspace {
    .workspace-milonga { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; }
    #milongaBingo { grid-column: 1 / -1; justify-self: stretch; border-top: 1px solid var(--ui-line); padding-top: 9px; }
    #milongaBingo .bingo-toggle { border-left: 0; padding-left: 0; }
    .workspace-tool-grid { column-gap: 28px; }
  }
}

@media (max-width: 760px) {
  html[data-theme][data-theme-page="home"] {
    body:has(#workspace:not([hidden])) {
      --page-gutter: 18px;
      /* Two deliberate rows: brand and account on top, then the page's own
         shortcuts — the tools jump on the left, language and size on the right. */
      > header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        grid-template-areas: "brand theme help auth" "jump jump prefs prefs" "status status status status";
        align-items: center;
        gap: 0 2px;
        min-height: 0;
        padding: calc(8px + env(safe-area-inset-top)) 14px 4px;
      }
      > header h1 { grid-area: brand; margin-right: 8px; }
      > header .theme-toggle { grid-area: theme; width: 36px; min-width: 36px; }
      > header #guideBtn { grid-area: help; }
      > header #headerAuthBtn { grid-area: auth; }
      > header #workspaceToolsJump { grid-area: jump; justify-self: start; padding: 5px 4px; min-height: 40px; font-size: calc(12px * var(--app-font-scale)); }
      > header > .home-preferences { grid-area: prefs; justify-self: end; }
      > header :is(.home-preferences > summary, #guideBtn, #headerAuthBtn) { padding-inline: 7px; font-size: calc(11px * var(--app-font-scale)); }
      > header .home-preferences > summary { min-height: 40px; font-size: calc(12px * var(--app-font-scale)); }
      > header .home-preferences > summary > span:first-child { display: none; }
      > header .home-language-picker { top: calc(104px + env(safe-area-inset-top)); }
      > header #status { grid-area: status; text-align: left; padding-left: 4px; }
    }
    #workspace {
      padding-top: 20px;
      .workspace-heading { display: block; margin-bottom: 20px; }
      .workspace-heading h2 { font-size: calc(25px * var(--app-font-scale)); }
      .workspace-heading p { margin-top: 7px; font-size: calc(12px * var(--app-font-scale)); }
      #searchInput { min-height: 82px; padding: 12px; font-size: max(16px, calc(15px * var(--app-font-scale))); }
      .search-primary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 7px; }
      .search-primary-actions .random-button { width: 100%; min-width: 0; min-height: 44px; padding: 8px; font-size: calc(12px * var(--app-font-scale)); }
      .workspace-milonga { margin: 24px 0 28px; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 0; }
      .workspace-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 14px; }
      .workspace-section-head h2 { font-size: calc(17px * var(--app-font-scale)); }
      #sessionInfo { margin-top: 0; }
      .workspace-milonga-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
      .workspace-milonga-actions button { min-width: 0; padding: 8px; font-size: calc(12px * var(--app-font-scale)); }
      #milongaBingo .bingo-toggle { gap: 8px; font-size: calc(12px * var(--app-font-scale)); }
      #milongaBingo .bingo-tally { font-size: calc(11px * var(--app-font-scale)); }
      .workspace-library-head { gap: 10px; margin-bottom: 12px; }
      .workspace-library-head h2, .workspace-explore-head h2 { font-size: calc(21px * var(--app-font-scale)); }
      .workspace-library-head > button, .workspace-library-actions > button { padding-inline: 10px; font-size: calc(12px * var(--app-font-scale)); }
      .mobile-folder-launcher { min-height: 64px; border-color: var(--ui-line); border-radius: 8px; background: var(--ui-soft); color: var(--ui-text); }
      .mobile-folder-launcher-name { color: var(--ui-text); }
      :is(.mobile-folder-launcher-kicker, .mobile-folder-launcher-note, .mobile-folder-launcher-chevron) { color: var(--ui-muted); }
      .mobile-folder-launcher-kicker { font-weight: 500; letter-spacing: 0; text-transform: none; }
      .mobile-folder-launcher-count { background: var(--ui-surface); color: var(--ui-text); }
      #folderBar { gap: 4px; }
      #folderBar > button { min-height: 44px; padding-inline: 8px; font-size: calc(12px * var(--app-font-scale)); }
      .workspace-tool-group { column-gap: 12px; }
      .workspace-tool-mark { width: 22px; height: 22px; margin-top: 1px; }
      .workspace-tool-mark svg { width: 19px; height: 19px; }
      #workspaceExplore { margin-top: 36px; padding-top: 24px; }
      .workspace-explore-head { gap: 8px 16px; margin-bottom: 14px; }
      .workspace-explore-head > :is(button, a) { min-height: 44px; }
      .workspace-tool-grid { grid-template-columns: minmax(0, 1fr); }
      .workspace-tool-group { padding: 18px 0; }
      .workspace-tool-group h3 { font-size: calc(16px * var(--app-font-scale)); }
      .workspace-tool-links { column-gap: 22px; row-gap: 0; }
      .workspace-tool-links > :is(a, button) { font-size: calc(13px * var(--app-font-scale)); }
      .workspace-settings { margin-top: 18px; }
    }
  }
}

/* The milonga summary in the workspace's own language: open rows and rules,
   brand ink for the tanda number, semantic tints for confidence. */
html[data-theme][data-theme-page="home"] #workspace #milongaPanel {
  color: var(--ui-text);

  .milonga-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  .milonga-title { color: var(--ui-text); font-size: calc(17px * var(--app-font-scale)); font-weight: 550; }
  :is(.milonga-refresh, .milonga-count-settings button, .milonga-name-cancel, .tanda-style-edit-save, .tanda-style-edit-cancel) {
    min-height: 36px; padding: 6px 12px;
    border: 1px solid var(--ui-line); border-radius: 7px;
    background: transparent; color: var(--ui-text);
    font: 500 calc(12px * var(--app-font-scale))/1.4 var(--ui-font); cursor: pointer;
  }
  :is(.milonga-refresh, .milonga-count-settings button, .milonga-name-cancel, .tanda-style-edit-save, .tanda-style-edit-cancel):hover { background: var(--ui-soft); border-color: var(--ui-muted); color: var(--ui-text); }
  .milonga-count-settings { padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; background: transparent; color: var(--ui-muted); }
  .milonga-count-settings > strong { color: var(--ui-text); font-weight: 550; }
  .milonga-count-settings input { min-height: 32px; border: 1px solid var(--ui-line); border-radius: 6px; background: transparent; color: var(--ui-text); }
  .milonga-count-note { color: var(--ui-muted); }
  .milonga-headline { color: var(--ui-text); font-size: calc(15px * var(--app-font-scale)); line-height: 1.6; }
  .milonga-stat { padding: 10px 0 0; border: 0; border-top: 1px solid var(--ui-line); border-radius: 0; background: transparent; }
  .milonga-stat-number { color: var(--ui-text); font-size: calc(22px * var(--app-font-scale)); font-weight: 500; }
  .milonga-stat-label, .milonga-source, .milonga-caveat, .milonga-empty, .milonga-folder-counts { color: var(--ui-muted); }
  .milonga-caveat.corrected { color: var(--ui-confirm); }
  .milonga-section-title { margin-top: 22px; color: var(--ui-text); font-weight: 550; }
  :is(.tanda-block, .milonga-folder-card) { padding: 14px 0; border: 0; border-top: 1px solid var(--ui-line); border-radius: 0; background: transparent; }
  .tanda-block.incomplete { border-top-color: var(--ui-review); }
  .tanda-number { padding: 0; background: transparent; color: var(--ui-accent); font-size: calc(13px * var(--app-font-scale)); font-weight: 600; }
  .tanda-name, .milonga-folder-name { color: var(--ui-text); font-weight: 550; }
  .milonga-folder-name:hover { color: var(--ui-link); }
  .tanda-meta, .tanda-note, .tanda-song-head::before, .tanda-song-meta, .tanda-version, .milonga-folder-line { color: var(--ui-muted); }
  .tanda-confidence { padding: 1px 7px; border-radius: 999px; background: var(--ui-confirm-soft); color: var(--ui-confirm); font-weight: 550; }
  .tanda-confidence.medium { background: var(--ui-review-soft); color: var(--ui-review); }
  .tanda-confidence.low { background: var(--ui-soft); color: var(--ui-muted); }
  .tanda-incomplete { border-color: var(--ui-review); background: transparent; color: var(--ui-review); }
  .tanda-style-edit-toggle { color: var(--ui-link); }
  .tanda-style-editor { border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-soft); }
  .tanda-style-edit-label, .tanda-style-edit-status { color: var(--ui-muted); }
  .tanda-style-edit-select { border: 1px solid var(--ui-line); background: var(--ui-surface); color: var(--ui-text); }
  .tanda-style-edit-save { color: var(--ui-confirm); }
  .tanda-songs { color: var(--ui-text); }
  :is(.tanda-songs a, .tanda-song-head):hover { color: var(--ui-link); }
  .tanda-version.matched { color: var(--ui-confirm); }
  .tanda-song-details { background: var(--ui-soft); border-radius: 8px; }
  .personal-note-toggle { border: 1px solid var(--ui-line); background: transparent; color: var(--ui-muted); }
  .personal-note-toggle:hover { color: var(--ui-text); border-color: var(--ui-muted); }
  .cortina-block { padding: 10px 12px; border: 1px dashed var(--ui-line); border-radius: 8px; background: transparent; color: var(--ui-muted); }
  .cortina-label { background: var(--ui-soft); color: var(--ui-text); }
  .cortina-detail { color: var(--ui-text); }
  .cortina-note { color: var(--ui-muted); }
}

/* A draggable edge between the folders and the songs. */
@media (min-width: 821px) {
  html[data-theme][data-theme-page="home"] #workspace {
    #appShell:not(.sidebar-hidden) {
      grid-template-columns: var(--folder-sidebar-width, 240px) 13px minmax(0, 1fr);
      column-gap: 10px;
    }
    .folder-sidebar-resizer {
      position: relative; align-self: stretch; width: 13px; margin: 0;
      cursor: col-resize; touch-action: none; outline: none;
    }
    .folder-sidebar-resizer::before {
      content: ""; position: sticky; top: 10px; display: block;
      width: 1px; height: min(100%, calc(100vh - 112px)); margin-inline: auto;
      background: var(--ui-line); transition: background-color .15s, width .15s;
    }
    .folder-sidebar-resizer:is(:hover, :focus-visible)::before,
    .resizing-sidebar > .folder-sidebar-resizer::before { width: 3px; border-radius: 2px; background: var(--ui-accent); }
    .resizing-sidebar { cursor: col-resize; user-select: none; }
  }
}
html[data-theme][data-theme-page="home"] #workspace :is(.sidebar-hidden > .folder-sidebar-resizer) { display: none; }
@media (max-width: 820px) {
  html[data-theme][data-theme-page="home"] #workspace .folder-sidebar-resizer { display: none; }
}

/* Light theme. index.html's inline styles are written for the dark theme and
   theme.css re-colours them one selector at a time; these are the ones it
   never reached, which left dark tiles and near-white text on the light page. */
html[data-theme="light"][data-theme-page="home"] {
  --ws-ink-2: #4f4741;
  --ws-dim: #7d746d;
  --ws-danger: #a3413a;

  #status, .song time, .rep-count, .recording-timeline-heading span, .introduction-evidence-description,
  .introduction-metrics, .introduction-facts, .introduction-evidence-sources, .song-content .content-source, .lunfardo dd,
  .youtube-import-sample-copy span, .auth-close, .folder-item, .lyric-explorer-note { color: var(--ui-muted); }
  .introduction-metrics dt, .introduction-fact-meta, .facet-chip .facet-count,
  .lyric-explorer-sample-translation.missing { color: var(--ws-dim); }
  .introduction-heading, .introduction-sources-title, .introduction-evidence-title, .introduction-fact-claim,
  .translation-editor-title, .title-names, .md em, .cortina-detail, .auth-invite-hint { color: var(--ws-ink-2); }
  .introduction-evidence-status, .person-zh-body, .recognizer-result-value, .youtube-import-intro, .neo-submit-intro,
  .recording-timeline-heading strong, .md strong,
  :is(.person-bio, .introduction-body, .translation-note) strong { color: var(--ui-text); }

  /* Links and navigation stay blue; review, rank and source marks stay amber. */
  .rec-line a, .recordings .rline a, .neo-playlist a, .neo-links a, .rep-name .rep-singer, .tanda-style-edit-toggle,
  .introduction-evidence > summary, .introduction-fact-refs a, .folder-item.new, .search-badge.on { color: var(--ui-link); }
  .search-badge.on { border-color: var(--ui-link); }
  .panel-title, .neo-rank, .folder-item.on, .search-badge.on.zh, .lyric-explorer-popular-rank,
  .youtube-import-sample-copy strong, .song-content a, .song-introduction a, .guide-sample-actions a { color: var(--ui-review); }
  .search-badge.on.zh { border-color: var(--ui-review); }
  .search-badge, .facet-chip, .rep-head, .recordings .rblock + .rblock, .song-introduction, .introduction-evidence,
  .translation-support, .lyric-similar, .lyric-version-choices, .folder-tag, .folder-pick > summary, .folder-item.new,
  .recording-comparison-table, .neo-results, .neo-pagination, .modern-orchestra-neo,
  .modern-orchestra-panel[open] > .modern-orchestra-chip, .modern-orchestra-links a { border-color: var(--ui-line); }
  .folder-item:hover { background: var(--ui-soft); }

  /* Chips that were dark plates. */
  .person-kind { background: var(--ui-soft); color: var(--ui-muted); }
  .md code { background: var(--ui-soft); color: var(--ui-link); }
  .introduction-evidence-chip { border-color: var(--ui-line); background: var(--ui-soft); color: var(--ui-link); }
  .folder-tag { background: var(--ui-soft); }
  .lyric-lang { background: var(--ui-group-soft); color: var(--ui-group); }
  .lyric-similar > summary, .lyric-similar-name, .translation-support-chinese .translation-language-label { color: var(--ui-group); }
  .lyric-aligned-table thead .lyric-column-korean, .translation-language-label, .recognizer-result.local .recognizer-result-source,
  .youtube-folder-history, .youtube-folder-success, .imported-tanda-stats, .neo-results > summary,
  .modern-orchestra-name, .modern-orchestra-section-title, .modern-orchestra-notes { color: var(--ui-confirm); }
  .recognition-source-badge, .modern-orchestra-chip, .youtube-folder-success button { background: var(--ui-confirm-soft); color: var(--ui-confirm); }
  .modern-orchestra-detail { background: var(--ui-soft); color: var(--ui-text); }
  .modern-orchestra-country { color: var(--ws-ink-2); }
  .modern-orchestra-links a:hover { color: var(--ui-link); }
  .facet-chip { color: var(--ui-muted); }
  .facet-chip:hover { border-color: var(--ui-link); }
  .facet-chip.on { background: var(--ui-link); border-color: var(--ui-link); color: #fff; }
  .facet-chip.on .facet-count { color: #dce7f0; }
  .select-all-box { border-color: var(--ui-line); background: var(--ui-surface); }
  .personal-note-editor textarea { border-color: var(--ui-line); background: var(--ui-surface); color: var(--ui-text); }
  .personal-note-actions .personal-note-save { background: var(--ui-link-soft); color: var(--ui-link); }
  :is(.personal-note-actions .personal-note-clear, .lyric-explorer-sample-retry) { color: var(--ws-danger); }
  :is(#toolbar button.danger, .neo-filter-button.clear) { border-color: #e3c6c1; color: var(--ws-danger); }
  .notification-badge { border-color: var(--ui-bg); }
  .youtube-import-sample { border-color: #e2d2b6; background: var(--ui-review-soft); }
  .youtube-import-sample button { border-color: var(--ui-review); color: var(--ui-review); }

  /* theme.css greys every star, which also hid the rating you gave. */
  .dance-rating-star { color: #9d948d; }
  .dance-rating-star:is(.active, :hover, :focus-visible) { color: #b27a22; }
  .dance-rating-star.selected { color: #98651a; }

  /* The help dialog, shared with the home page. */
  .guide-intro, .guide-hint, .guide-sample p { color: var(--ui-text); }
  .guide-pwa-install { border-color: #e2d2b6; background: linear-gradient(135deg, #f6efe3, #f3f0f3); }
  .guide-pwa-install h3, .guide-sample h3 { color: var(--ui-text); }
  .guide-pwa-install p { color: var(--ws-ink-2); }
  .guide-pwa-install .guide-pwa-step { color: var(--ui-muted); }
  .pwa-install-steps-title, .guide-feedback-heading, .guide-signoff { color: var(--ui-review); }
  .guide-image img { border-color: var(--ui-line); background: var(--ui-surface); }
  .guide-sample-stats li { border-color: var(--ui-line); background: var(--ui-surface); color: var(--ui-text); }
  .guide-feedback-actions button { border-color: var(--ui-line); background: var(--ui-soft); color: var(--ui-text); }

  /* The lyrics map: tinted paper tiles instead of dark plates. */
  .lyric-explorer-mosaic { background: var(--ui-bg); }
  .lyric-explorer-tile { border-color: var(--ui-bg); background: #efe8de; color: var(--ui-text); }
  .lyric-explorer-tile.band-1 { background: #f1e2cb; }
  .lyric-explorer-tile.band-2 { background: #dfe9ef; }
  .lyric-explorer-tile.band-3 { background: #e9e2ef; }
  .lyric-explorer-tile.band-4 { background: #e0ebe3; }
  .lyric-explorer-tile-translation { color: var(--ws-ink-2); }
  :is(.lyric-explorer-tile-rank, .lyric-explorer-tile-value) { color: var(--ws-dim); }
  .lyric-explorer-tile:hover { filter: brightness(.97); }
  .lyric-explorer-tile.active { background: var(--ui-accent); color: #fff; }
  .lyric-explorer-tile.active :is(.lyric-explorer-tile-rank, .lyric-explorer-tile-translation, .lyric-explorer-tile-value) { color: #f3e7d4; }
  .lyric-explorer-bar:is(:hover, .active) .lyric-explorer-name, .lyric-explorer-word-song:hover .lyric-explorer-popular-title { color: var(--ui-link); }
  .lyric-explorer-fill { background: var(--ui-link); }
  .lyric-explorer-bar.word .lyric-explorer-fill { background: #c4933f; }
}
/* A saved-on-device receipt stays visible even while viewing another folder. */
.recognition-save-status:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--ui-line, #66594b);
  color: var(--ui-text, inherit);
}
.recognition-save-status button {
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--ui-line, #66594b);
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.recognition-save-status button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.recognition-save-badge { display: inline-block; margin-top: 6px; font-size: .85em; }