/* Visual system. Layout and behavior remain in styles.css; print stays plain. */
@media screen {
  .plan-sheet-header { background: #edf3ee; border-radius: 16px; padding: 24px; }
  .plan-toolbar { flex-wrap: wrap; gap: 12px; }
  .service-items > li { border-left: 3px solid #d8e3da; padding-inline: 12px; margin-block: 8px; }
  .service-items > li[data-item-type="song"] { border-left-color: #57826b; background: #f7faf7; }
  .service-items > li[data-item-type="reading"] { border-left-color: #a78b55; }
  .service-items > .plan-heading-item { border-left-color: var(--green); }
  .plan-key { display: inline-block; min-width: 32px; padding: 3px 9px; border-radius: 7px; background: #dfece3; color: #205544; font: 600 12px/1.5 var(--sans); text-align: center; }
  .plan-key.key-unset { background: #edf0ed; color: var(--muted); font-weight: 400; }
  .evaluation-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .evaluation-choices fieldset, .evaluation-criteria { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #f7faf7; }
  .evaluation-choices fieldset { max-height: 240px; overflow-y: auto; overscroll-behavior-y: auto; }
  .evaluation-choices .check-label { overflow-wrap: anywhere; }
  .evaluation-criteria { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-block: 16px; gap: 8px 16px; }
  .evaluation-boundary, .evaluation-coverage { padding: 12px 16px; background: var(--green-light); border-radius: 12px; }
  .evaluation-cohort { margin-block: 20px; padding-top: 16px; border-top: 2px solid #d8e3da; }
  .scope-chart-count { display: block; padding-top: 4px; color: var(--muted); font-size: 12px; font-weight: 400; }
  .index-toolbar { background: #edf3ee; padding: 16px; border-radius: 12px; }
  .collection-row[open] > summary { background: #edf3ee; border-radius: 14px; }
  .evaluation-finding { border-left: 3px solid #57826b; padding: 12px 16px; margin-block: 16px; background: #f7faf7; border-radius: 0 12px 12px 0; }
  .evaluation-finding h5, .audit-chart h5 { font: 600 15px/1.5 var(--sans); margin: 0 0 8px; }
  .plan-list .selected { border-left: 3px solid var(--green); }
}
@media screen and (max-width: 600px) {
  .evaluation-choices, .evaluation-criteria { grid-template-columns: 1fr; }
  .plan-sheet-header { padding: 16px; }
}
@media screen {
  :root {
    --ink: #203b34;
    --muted: #5f7169;
    --green: #205544;
    --green-light: #eaf2ed;
    --paper: #f5f6f2;
    --line: #dce5de;
    --gold: #a78b55;
    --white: #ffffff;
    --sans: "Segoe UI", Arial, sans-serif;
    --radius-control: 12px;
    --radius-panel: 22px;
    --shadow-panel: 0 4px 24px #1a3d2f06;
    --shadow-menu: 0 12px 36px #193d321a;
  }
  body {
    background: #f6f7f3;
  }
  h1, h2 { letter-spacing: -0.035em; }
  h1 { font-size: 42px; }
  h3 { font-weight: 600; }
  .sidebar {
    inset: 16px auto 16px 16px;
    width: 244px;
    padding: 30px 18px 22px;
    border: 1px solid #ffffff18;
    border-radius: 26px;
    background: #21493c;
    box-shadow: 0 12px 44px #173b3220;
  }
  .brand { color: #f7faf6; font-size: 25px; gap: 12px; padding: 4px 10px; }
  .brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 46px;
    border: 1px solid #ffffff1a;
    border-radius: 14px;
    background: #ffffff0b;
    color: #d4e2c9;
    font-size: 35px;
    flex-shrink: 0;
  }
  .workspace-label { color: #bdcec2; margin: 46px 12px 16px; letter-spacing: 1.5px; }
  .nav-item {
    color: #dce7df;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 14px;
    min-height: 48px;
    font-size: 13px;
    transition: background 140ms ease, color 140ms ease;
  }
  .nav-item > .nav-icon { width: 20px; display: flex; align-items: center; flex-shrink: 0; }
  .nav-item > .nav-label { width: auto; min-width: 0; font-size: inherit; line-height: inherit; }
  .nav-icon svg { width: 20px; height: 20px; }
  .nav-item:hover { background: #ffffff0e; color: #fff; }
  .nav-item.active, .nav-item.active:hover {
    background: #eaf2e5;
    color: #204b3c;
    box-shadow: 0 2px 8px #071f2210;
  }
  .nav-item b { border-radius: 8px; background: #ffffffb3; }
  .sidebar-bottom { padding: 22px 12px 0; border-top: 1px solid #ffffff18; }
  .sidebar-bottom .text-button { color: #d7e4db; font-size: 12px; }
  main { margin-left: 276px; width: calc(100% - 276px); }
  .topbar {
    height: 72px;
    background: transparent;
    border-bottom: 1px solid #dce5de80;
    padding: 0 36px;
    color: var(--muted);
    font-size: 12px;
  }
  .topbar-actions { gap: 10px; }
  .topbar-actions .button { min-height: 38px; padding: 8px 14px; font-size: 12px; }
  .page { padding: 24px 32px 40px; max-width: 1500px; }
  .page-heading { margin-bottom: 20px; align-items: center; }
  .page-heading h1 { margin-bottom: 4px; }
  .eyebrow { color: #637c6d; letter-spacing: 1.3px; }
  .button, .more-menu > summary, .library-tabs button {
    border-radius: var(--radius-control);
    border-color: #d7e2d9;
    font-size: 12px;
    min-height: 40px;
    padding: 10px 16px;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  }
  .button { background: #ffffffed; }
  .button:hover { background: #f1f6f0; border-color: #91ae9a; }
  .button.primary {
    background: #205544;
    border-color: #255d48;
    box-shadow: 0 3px 8px #1f554415;
    color: #fff;
  }
  .button.primary:hover { background: #173f33; }
  .text-button { font-size: 12px; }
  .icon-button { border-radius: 9px; }
  button:focus-visible, a:focus-visible, input:focus-visible,
  textarea:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 3px solid #ad8f4d;
    outline-offset: 3px;
  }
  .search-box {
    height: 50px;
    border-radius: 16px;
    border-color: #d5e2d8;
    box-shadow: 0 3px 12px #193d3204;
  }
  .search-box:focus-within { border-color: #759a85; box-shadow: 0 0 0 3px #2055440c; }
  .search-box input { font-size: 14px; }
  .result-count, .catalog-note { font-size: 12px; }
  .song-workspace { gap: 24px; grid-template-columns: minmax(240px, 0.72fr) minmax(340px, 1.28fr); }
  .song-list { gap: 12px; }
  .song-card {
    border-radius: 18px;
    padding: 20px;
    border-color: #dfe7df;
    box-shadow: var(--shadow-panel);
  }
  .song-card:hover { border-color: #98b3a1; box-shadow: 0 5px 20px #214d3a0c; }
  .song-card.selected {
    border-color: #789b87;
    background: #f4f8f1;
    box-shadow: inset 3px 0 0 #2e6650, 0 5px 20px #214d3a08;
  }
  .song-card h3 { font-size: 23px; }
  .song-card p { font-size: 12px; line-height: 1.65; color: var(--muted); }
  .card-score { font-size: 22px; font-variant-numeric: tabular-nums; }
  .card-score small, .card-bottom { font-size: 11px; color: var(--muted); }
  .song-symbol { border-radius: 10px; color: #5f7964; background: #eef4eb; }
  .tag { border-radius: 8px; color: #526c5a; background: #edf3eb; padding: 5px 9px; font-size: 11px; }
  .detail-panel, .plan-sheet, .profile-panel, .catalog-matches, .empty {
    border-radius: var(--radius-panel);
    border-color: #dce5dd;
    box-shadow: var(--shadow-panel);
    background: #fff;
  }
  .detail-panel { padding: 28px; }
  .detail-panel h2 { font-size: 36px; }
  .author, .version { color: var(--muted); font-size: 12px; }
  .status-badge, .subtle-badge { background: #edf3e9; color: #51664e; padding: 6px 10px; font-size: 10px; }
  .detail-section p, .detail-list { color: #4e6559; line-height: 1.8; }
  .detail-section h3 { color: var(--ink); }
  .rating-banner {
    border-radius: 16px;
    background: #edf4e9;
    border: 1px solid #dce9d7;
  }
  .rating-banner p, .rating-banner small { color: #526b58; font-size: 11px; }
  .overall-score { font-variant-numeric: tabular-nums; }
  .church-decision, .plan-notice, .check-label, .draft-scores { border-radius: 14px; }
  .onboarding-prompt {
    border-radius: 20px;
    background: #edf3e6;
    border: 1px solid #dce6d2;
  }
  .onboarding-prompt h2 { color: #254a39; }
  .collection-prompt { border: 0; padding: 0 0 8px; margin-bottom: 12px; }
  .search-row { margin-bottom: 16px; }
  .filter-panel, .library-toolbar, .saved-index-views, .index-filter-panel {
    border: 1px solid #dce5dd;
    border-radius: 14px;
    padding: 12px 16px;
    background: #ffffff9c;
    margin-bottom: 16px;
  }
  .filter-panel > summary, .library-toolbar > summary,
  .saved-index-views > summary, .index-filter-panel > summary { padding: 2px 0; color: #435e4f; }
  .filter-panel[open] > summary, .library-toolbar[open] > summary { margin-bottom: 12px; }
  .library-tabs button { color: #5b7162; }
  .library-tabs button.selected { background: #eaf3e8; border-color: #a6bda9; }
  .index-table-wrap { border-radius: 18px; border: 1px solid var(--line); background: white; box-shadow: var(--shadow-panel); }
  .index-table { border: 0; }
  .index-table thead { background: #eff4ee; }
  .index-table th, .index-table td { border-color: #e5ebe4; }
  .index-table tbody tr:hover { background: #f8fbf7; }
  .index-rules li { border-radius: 10px; background: #f2f6ef; }
  .collection-levels { border: 0; border-radius: 18px; padding: 20px 24px; background: #eef3e8; }
  .collection-row { border-radius: 18px; background: #fff; border: 1px solid var(--line); padding: 22px 24px; margin: 12px 0; box-shadow: var(--shadow-panel); }
  .collection-row h2 { font-size: 25px; }
  .plan-list button { border-radius: 16px; padding: 18px; }
  .plan-list button.selected { background: #edf3e7; border-color: #a2b8a7; }
  .plan-sheet { padding: 28px; }
  .plan-sheet-header { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 20px; }
  .duration-total { padding: 12px 18px; border-radius: 16px; background: #eef4ea; flex-shrink: 0; align-self: flex-start; }
  .duration-total strong { font-size: 36px; }
  .service-items li { border-radius: 12px; }
  input:not([type="checkbox"]):not([type="radio"]), textarea, select,
  .index-tools input, .index-tools select, .saved-view-controls select, .collection-levels select {
    border-radius: var(--radius-control);
    border-color: #ceddd1;
    color: var(--ink);
  }
  .search-box input { border-radius: 0; }
  dialog { border-radius: 24px; border-color: #dce5dd; box-shadow: 0 24px 90px #153a3330; padding: 28px 32px; }
  dialog::backdrop { background: #142f2852; backdrop-filter: blur(4px); }
  .form-actions { background: white; gap: 10px; }
  .more-menu[open] { border-radius: 12px; }
  .more-menu .menu-items, .sync-menu-content { border-radius: 16px; box-shadow: var(--shadow-menu); border-color: #dbe5dc; padding: 8px; }
  .more-menu .menu-items .text-button { border-radius: 9px; }
  .more-menu .menu-items .text-button:hover { background: #f0f5ed; text-decoration: none; }
  #toast { border-radius: 14px; background: #204e3e; box-shadow: var(--shadow-menu); }
  footer { color: #60776a; border-color: #dce5de80; padding: 24px 36px; }
  .connect-page { background: #f2f5ed; padding: 48px 20px; }
  .connect-page main.connect-card { border-radius: 24px; box-shadow: 0 12px 48px #1c423110; border-color: #d8e4d8; }
}
@media screen and (max-width: 1150px) and (min-width: 851px) {
  .sidebar { width: 214px; padding-inline: 14px; }
  main { margin-left: 244px; width: calc(100% - 244px); }
  .page, .topbar { padding-inline: 24px; }
  .song-workspace { grid-template-columns: minmax(200px, .8fr) minmax(280px, 1.2fr); gap: 18px; }
  .detail-panel { padding: 22px; }
}
@media screen and (max-width: 850px) and (min-width: 551px) {
  .sidebar { width: 150px; inset: 12px auto 12px 12px; padding: 22px 10px; border-radius: 20px; }
  .brand { display: flex; padding: 0; justify-content: center; }
  .brand > span:last-child { display: none; }
  .sidebar nav { margin-top: 30px; }
  .nav-item { font-size: 12px; padding: 12px 9px; line-height: 1.4; gap: 8px; justify-content: start; }
  .nav-icon svg { width: 18px; height: 18px; }
  main { margin-left: 176px; width: calc(100% - 176px); }
  .page { padding: 24px; }
  .topbar { padding-inline: 24px; height: auto; min-height: 72px; gap: 10px; }
  .song-workspace { grid-template-columns: 1fr; }
}
@media screen and (max-width: 550px) {
  .sidebar {
    inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px;
    width: auto;
    height: auto;
    border-radius: 20px;
    padding: 7px;
    background: #21493c;
    box-shadow: 0 8px 32px #15392e32;
  }
  .brand { display: none; }
  .sidebar nav { gap: 2px; }
  .nav-item { width: calc(100% / 7); min-width: 0; min-height: 56px; padding: 7px 2px; gap: 5px; font-size: 10px; line-height: 1.2; border-radius: 12px; }
  .nav-item > .nav-icon { width: 19px; }
  .nav-icon svg { width: 19px; height: 19px; }
  main { margin-left: 0; width: 100%; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .page { padding: 22px 16px 30px; }
  .topbar { padding: 14px 16px; height: auto; min-height: 72px; align-items: start; gap: 8px; flex-wrap: wrap; }
  .topbar > span { font-size: 11px; }
  .topbar-actions { gap: 6px; margin-left: auto; }
  .topbar-actions .button, .topbar-actions .more-menu > summary { min-height: 36px; padding: 8px 11px; }
  .page-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 20px; }
  .page-heading h1 { font-size: 32px; }
  .page-heading .button { margin-top: 0; }
  .song-workspace { grid-template-columns: 1fr; }
  .song-list { grid-template-columns: 1fr; gap: 10px; }
  .song-list {
    max-height: min(420px, 48svh);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 2px;
    scrollbar-width: thin;
    scrollbar-color: #aec4b3 transparent;
  }
  .song-card { padding: 18px; border-radius: 16px; }
  .song-card h3 { font-size: 23px; }
  .song-card p { font-size: 12px; }
  .song-card .tag { font-size: 10px; padding: 5px 8px; }
  .song-card-top { margin-bottom: 10px; }
  .detail-panel { padding: 22px 20px; }
  .detail-panel h2 { font-size: 32px; }
  .rating-banner { padding: 16px; }
  .search-row { gap: 10px; }
  .result-count { font-size: 11px; }
  .plan-sheet { padding: 22px 18px; }
  .duration-total { padding: 10px 14px; }
  .duration-total strong { font-size: 30px; }
  .collection-row { padding: 20px; }
  .collection-levels { padding: 18px; }
  dialog { padding: 24px 20px; border-radius: 22px; max-height: 88dvh; }
  .form-actions { flex-wrap: wrap; }
  .button { max-width: 100%; }
  .button, .icon-button { min-height: 44px; }
  .icon-button { min-width: 40px; }
  #toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
  footer { padding-inline: 16px; }
}
@media screen {
  .score-grid small, .detail-section small, .item-number,
  .item-time, .plan-notice, .service-item-content .eyebrow {
    color: #596d60;
  }
  .song-card h3, .song-card p, .detail-panel h2,
  .service-item-content h3, .plan-list strong {
    overflow-wrap: anywhere;
  }
  .attribute-panel > summary, .rating-details > summary {
    min-height: 44px;
  }
}
/* Expand over the page so hovering never shifts the reading position. */
@media screen and (min-width: 551px) and (hover: hover) and (pointer: fine) {
  #app { --rail-inset: 16px; }
  .sidebar {
    inset: var(--rail-inset) auto auto var(--rail-inset);
    width: 80px;
    height: auto;
    padding: 24px 14px 20px;
    overflow: hidden;
    border-radius: 22px;
    z-index: 40;
    transition: width 180ms ease, box-shadow 180ms ease;
  }
  .sidebar .brand {
    width: 100%;
    padding: 0;
    gap: 0;
    justify-content: center;
    min-height: 60px;
  }
  .sidebar .brand-name, .sidebar .nav-label,
  .sidebar .nav-item b, .sidebar .sidebar-bottom { display: none; }
  .sidebar nav { margin-top: 32px; }
  .sidebar .nav-item { gap: 0; padding: 13px 14px; justify-content: center; }
  .sidebar .nav-icon { width: 22px; }
  .sidebar .nav-icon svg { width: 22px; height: 22px; }
  .sidebar:is(:hover, :has(:focus-visible)) {
    width: 244px;
    box-shadow: 0 14px 44px #173b3229;
  }
  .sidebar:is(:hover, :has(:focus-visible)) .brand { justify-content: start; gap: 12px; }
  .sidebar:is(:hover, :has(:focus-visible)) .brand-name,
  .sidebar:is(:hover, :has(:focus-visible)) .nav-label,
  .sidebar:is(:hover, :has(:focus-visible)) .nav-item b,
  .sidebar:is(:hover, :has(:focus-visible)) .sidebar-bottom { display: block; }
  .sidebar:is(:hover, :has(:focus-visible)) .nav-item { justify-content: start; gap: 12px; }
  .sidebar .nav-label { white-space: nowrap; }
  .sidebar-bottom { white-space: nowrap; }
  #app > main {
    margin-left: calc(var(--rail-inset) + 96px);
    width: calc(100% - var(--rail-inset) - 96px);
  }
}
@media screen and (min-width: 551px) and (max-width: 850px) and (hover: hover) and (pointer: fine) {
  #app { --rail-inset: 12px; }
}
@media screen and (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media screen {
  .song-resources { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
  .song-resources .button { font-size: .82rem; }
  .closest-matches { padding: 16px; border-top: 1px solid var(--border, #dce4dd); }
  .closest-matches h3 { margin: 0 0 8px; font-size: 1rem; }
  .closest-matches ul { list-style: none; padding: 0; margin: 0; }
  .closest-matches .text-button { width: 100%; text-align: left; padding: 10px 8px; border-radius: 10px; }
  .closest-matches small { display: block; color: #596d60; font-weight: 400; margin-top: 4px; }
  .closest-matches button:hover { background: #edf3ed; }
  .evaluation-request { margin: 16px 0; }
  .evaluation-request summary { cursor: pointer; padding: 10px 0; }
  #evaluation-preview:has(h3) { border-top: 1px solid #dce4dd; padding-top: 16px; margin-top: 16px; }
  #evaluation-error { color: #8b3329; }
}
@media screen {
  .collection-browse-controls { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin: 20px 0; }
  .collection-dropdown { display: block; padding: 0; overflow: visible; }
  .collection-dropdown > summary { display: flex; gap: 16px; justify-content: space-between; align-items: center; cursor: pointer; padding: 20px 24px; list-style: none; }
  .collection-dropdown > summary::after { content: "+"; font-size: 24px; color: #596d60; }
  .collection-dropdown[open] > summary::after { content: "−"; }
  .collection-dropdown > summary::-webkit-details-marker { display: none; }
  .collection-dropdown h2 { margin: 0 0 4px; font-size: 23px; }
  .collection-dropdown .collection-count { margin-left: auto; }
  .collection-body { padding: 0 24px 20px; }
  .collection-bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
  .collection-songs { list-style: none; padding: 0; margin: 0; }
  .collection-songs > li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid #dce5de; }
  .collection-songs small { display: block; color: #596d60; margin-top: 4px; }
  .collection-song-title { padding: 0; font-weight: 600; text-align: left; }
  .collection-songs .menu-items { width: 220px; }
  .objective-facts { margin: 16px 0 20px; font-size: .88rem; }
  .objective-facts > div { display: flex; gap: 12px; margin: 8px 0; align-items: baseline; }
  .objective-facts dt { min-width: 120px; color: #596d60; }
  .objective-facts dd { margin: 0; }
  .fact-confidence { font-size: .72rem; background: #f3ebdb; color: #75542a; border-radius: 6px; margin-left: 6px; padding: 3px 6px; }
  .objective-facts .text-button { font-size: .72rem; padding: 3px 5px; }
  .evaluation-box { margin: 18px 0; border: 1px solid #dce5de; border-radius: 16px; background: #fafcf9; }
  .evaluation-box > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; gap: 16px; padding: 18px; font-weight: 600; }
  .evaluation-box > summary::after { content: "+"; }
  .evaluation-box[open] > summary::after { content: "−"; }
  .evaluation-box .ai-mark { margin-left: 6px; }
  .evaluation-content { padding: 0 18px 18px; }
  .evaluation-content section { padding-top: 12px; }
  .evaluation-content h3 { margin: 8px 0; font-size: .94rem; }
  .secondary-evaluation { background: transparent; font-size: .85rem; }
  .song-file-list { list-style: none; padding: 0; }
  .song-file-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
  .recording-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
  .recording-links .button { display: flex; flex-direction: column; align-items: start; justify-content: center; gap: 5px; padding: 12px; font-size: .8rem; background: #fff; }
  .recording-links small { font-size: .68rem; font-weight: 400; color: #596d60; }
  .recording-links [data-recording-kind="saved"] { border-color: #91b4a1; background: #f1f7f2; }
  .saved-recordings { list-style: none; padding: 0; margin: 20px 0; }
  .saved-recordings li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid #dce5de; }
  .saved-recordings li > div { flex: 1; min-width: 160px; overflow-wrap: anywhere; }
  .saved-recordings small { display: block; color: #596d60; margin-top: 4px; }
  #recording-error { color: #8b3329; }
}
@media screen and (max-width: 700px) {
  .collection-browse-controls { grid-template-columns: 1fr; gap: 10px; }
  .collection-dropdown > summary { padding: 16px; }
  .collection-body { padding: 0 16px 16px; }
  .objective-facts > div { flex-wrap: wrap; gap: 4px 12px; }
  .objective-facts dt { min-width: 90px; }
}
@media screen and (max-width: 390px) {
  .recording-links { grid-template-columns: 1fr; }
  .recording-links .button { flex-direction: row; justify-content: space-between; align-items: center; }
}
/* Only results scroll independently; wheel movement over details scrolls the page. */
.song-list { overscroll-behavior-y: auto; }
.song-workspace > .detail-panel { max-height: none; overflow: visible; position: static; scroll-margin-top: 24px; }
@media (min-width: 1000px) {
  .song-workspace { align-items: start; }
  .song-list {
    position: sticky; top: 24px; max-height: calc(100dvh - 48px);
    overflow-y: auto; overscroll-behavior-y: auto; scrollbar-gutter: stable;
  }
  .song-list { padding: 4px; }
}
.song-heading { display: flex; align-items: start; flex-wrap: wrap; gap: 16px; }
.song-title { flex: 1 1 220px; min-width: 0; }
.song-title h2 { margin: 0 0 8px; font-size: 30px; }
.song-title .author { margin: 0; font-size: 13px; }
.song-primary-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.song-options > summary { display: grid; place-items: center; font-size: 22px; font-weight: 600; width: 40px; padding: 0; list-style: none; }
.song-options > summary::-webkit-details-marker { display: none; }
.song-options .menu-items { width: min(260px, calc(100vw - 64px)); }
.song-tabs { display: flex; margin-top: 24px; border-bottom: 1px solid var(--line); gap: 4px; }
.song-tabs button { flex: 1; min-width: 0; padding: 12px 8px; min-height: 48px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: 500 13px/1.4 var(--sans); cursor: pointer; }
.song-tabs button:hover { background: var(--green-light); }
.song-tabs button[aria-selected="true"] { color: var(--green); border-bottom-color: var(--green); }
.song-tabs button:focus-visible, .song-tab-panel:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.song-tab-panel { padding-top: 8px; }
.song-tab-panel[hidden] { display: none; }
.song-tab-panel .detail-section:first-child { margin-top: 8px; }
.evaluation-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; }
.song-files-section .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media screen and (max-width: 550px) {
  .song-title { flex-basis: 100%; }
  .song-title h2 { font-size: 28px; }
  .song-tabs { margin-top: 20px; }
  .song-tabs button { padding-inline: 4px; font-size: 12px; }
}
dialog { overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
dialog textarea { max-height: 26dvh; resize: vertical; }
.modal-top { position: sticky; top: -1px; z-index: 3; background: var(--paper, #fafbf8); padding-block: 8px; }
#evaluation-preview, #audit-preview, #scope-preview { scroll-margin-top: 56px; }
#scope-preview { scroll-margin-top: 104px; }
#evaluation-progress { padding: 12px; background: #eef4ed; border-radius: 12px; }
.pagination { flex-wrap: wrap; }
.pagination label { display: flex; align-items: center; gap: 6px; margin: 0; }
.page-jump { width: 75px; min-height: 40px; }
.blacklist-notice { padding: 12px; border: 1px solid #dce5dd; border-radius: 12px; }
.criterion-row { margin-block: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.criterion-row .check-label { display: flex; }
.score-rubric table { width: 100%; table-layout: fixed; font-size: 14px; }
.score-rubric td, .score-rubric th { padding: 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.audit-charts { display: grid; gap: 18px; }
.audit-chart { border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.audit-bar-row { display: grid; grid-template-columns: minmax(100px, 1fr) 1.5fr auto; gap: 10px; align-items: center; margin-block: 10px; }
.audit-bar-row meter { width: 100%; height: 22px; }
.audit-bar-row strong { font-size: 12px; }
.login-screen { margin: 0 auto; max-width: 650px; min-height: 100dvh; padding: 40px 20px; }
.login-screen form { display: grid; gap: 10px; }
/* Settings use grouped rows, with secondary help outside the controls. */
.settings-page { max-width: 760px; margin-inline: auto; }
.settings-page .page-heading { margin-bottom: 28px; }
.settings-page section { margin-bottom: 28px; }
.settings-group-title { margin: 0 16px 8px; font: 600 13px/1.5 var(--sans); color: var(--muted); letter-spacing: 0; }
.settings-group { overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 56px; padding: 14px 18px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 15px/1.4 var(--sans); text-align: left; }
.setting-row + .setting-row { border-top: 1px solid var(--line); }
button.setting-row { cursor: pointer; }
button.setting-row:hover { background: var(--green-light); }
button.setting-row:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }
button.setting-row:disabled { opacity: .55; cursor: default; }
.setting-copy { display: grid; gap: 3px; min-width: 0; }
.setting-label { font-weight: 500; }
.setting-description { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.setting-trailing { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 45%; }
.setting-value { color: var(--muted); font-size: 13px; text-align: right; overflow-wrap: anywhere; }
.setting-chevron { color: #829087; font-size: 24px; line-height: 1; }
.settings-footnote { margin: 8px 16px 0; color: var(--muted); font: 12px/1.6 var(--sans); }
.settings-advanced { margin-top: 32px; }
.settings-advanced > summary { padding: 10px 16px; color: var(--muted); font: 600 13px/1.5 var(--sans); cursor: pointer; }
.settings-advanced > .settings-group { margin-top: 8px; }
.setting-switch { width: 44px; height: 26px; padding: 3px; border-radius: 20px; background: #a8b3ac; flex-shrink: 0; transition: background 150ms ease; }
.setting-switch::after { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #18332c30; transition: transform 150ms ease; }
.setting-row[aria-checked="true"] .setting-switch { background: var(--green); }
.setting-row[aria-checked="true"] .setting-switch::after { transform: translateX(18px); }
.account-startup { width: 100%; min-height: 100dvh; margin: 0; display: grid; place-items: center; padding: 32px 24px; }
.account-startup-content { width: 100%; max-width: 420px; text-align: center; }
.startup-brand { margin-bottom: 40px; color: var(--muted); font: 500 14px/1.5 var(--sans); }
.startup-indicator { width: 32px; height: 32px; margin: 0 auto 24px; border: 3px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: startup-spin 900ms linear infinite; }
.account-startup h1 { margin: 0 0 16px; font-size: 30px; }
.account-startup p { font: 14px/1.6 var(--sans); margin: 8px 0; }
.account-startup .startup-caption { color: var(--muted); font-size: 13px; }
.startup-actions { display: grid; justify-items: center; gap: 12px; margin-top: 24px; }
.connection-notice { padding: 12px; border-left: 3px solid var(--green); background: var(--green-light); }
@keyframes startup-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .startup-indicator { animation: none; }
  .setting-switch, .setting-switch::after { transition: none; }
}
@media screen and (max-width: 550px) {
  .settings-page .page-heading { margin-bottom: 20px; }
  .setting-row { padding: 14px; gap: 12px; }
  .settings-group-title, .settings-footnote { margin-inline: 14px; }
}
.guest-banner { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #eef4ed; }
@media screen and (min-width: 551px) and (hover: hover) and (pointer: fine) {
  .sidebar.suppress-hover:not(:has(:focus-visible)) { width: 80px; box-shadow: none; }
  .sidebar.suppress-hover:not(:has(:focus-visible)) .brand-name,
  .sidebar.suppress-hover:not(:has(:focus-visible)) .nav-label,
  .sidebar.suppress-hover:not(:has(:focus-visible)) .nav-item b,
  .sidebar.suppress-hover:not(:has(:focus-visible)) .sidebar-bottom { display: none; }
  .sidebar.suppress-hover:not(:has(:focus-visible)) .brand,
  .sidebar.suppress-hover:not(:has(:focus-visible)) .nav-item { justify-content: center; gap: 0; }
}
/* Artwork and direct attribution editing remain quiet reference details. */
.album-art { display: block; object-fit: cover; flex-shrink: 0; border-radius: 10px; background: var(--paper); }
.album-art[hidden] { display: none; }
.card-art { width: 64px; height: 64px; }
.detail-art { width: 80px; height: 80px; }
.inline-attribution { display: inline-flex; align-items: center; gap: 8px; padding: 0; text-align: left; font-size: 13px; color: var(--muted); }
.inline-attribution:hover { text-decoration: underline; }
#inline-attribution-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#inline-attribution-form input { flex: 1; min-width: 160px; }
.service-items > li { grid-template-columns: 24px 28px minmax(0,1fr) 64px auto; }
.service-items > .plan-heading-item { grid-template-columns: 24px minmax(0,1fr) auto; background: var(--green-light); border-radius: 12px; padding: 12px; margin-block: 16px 8px; }
.plan-heading-item .item-number { display: none; }
.plan-heading-item h3 { font: 600 15px/1.5 var(--sans); margin: 0; }
.plan-drag-handle { touch-action: none; cursor: grab; user-select: none; }
.plan-drag-handle:active { cursor: grabbing; }
.service-items > li.drop-before { box-shadow: 0 -3px 0 var(--green); }
.service-items > li.drop-after { box-shadow: 0 3px 0 var(--green); }
.picker-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.picker-songs { max-height: min(48dvh,480px); min-height: 100px; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; margin-block: 16px; }
.picker-song { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.picker-song:last-child { border-bottom: 0; }
.picker-song.selected { background: var(--green-light); }
.picker-song input { width: 18px; height: 18px; flex-shrink: 0; }
.picker-song span { min-width: 0; }
.picker-song strong, .picker-song small { display: block; overflow-wrap: anywhere; }
.picker-song small { color: var(--muted); margin-top: 4px; }
.import-plan-rows { padding-left: 24px; }
.import-plan-rows > li { padding: 12px 0; border-bottom: 1px solid var(--line); }
#plan-import-review { scroll-margin-top: 56px; }
@media screen and (max-width: 550px) {
  .detail-art { width: 64px; height: 64px; }
  .song-heading:has(.detail-art) .song-title { flex: 1; }
  .picker-controls { grid-template-columns: 1fr; }
  .service-items > li { grid-template-columns: 24px minmax(0,1fr) auto; gap: 8px; }
  .service-items .item-number { display: none; }
  .service-items .item-buttons { grid-column: 2 / -1; justify-self: end; }
  .service-items .item-time { grid-column: 3; grid-row: 1; }
}
.workspace-switch { margin: 0; }
.workspace-switch select { max-width: 230px; min-height: 38px; padding: 8px 12px; font-size: 12px; }
.organization-banner { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--green-light); font-size: 13px; }
.organization-list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.organization-row, .organization-members > li, .organization-invites > li { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px; border-bottom: 1px solid var(--line); }
.organization-row > .text-button:first-child, .organization-members > li > div, .organization-invites > li > div { flex: 1; min-width: 160px; text-align: left; overflow-wrap: anywhere; }
.organization-row small, .organization-members small, .organization-invites small { display: block; margin-top: 4px; color: var(--muted); }
.organization-members, .organization-invites { list-style: none; margin: 16px 0; padding: 0; }
.organization-members select { width: auto; max-width: 170px; }
@media screen and (max-width:550px) { .workspace-switch select { max-width: 180px; } }
.topbar-actions, .index-heading-actions { flex-wrap: wrap; min-width: 0; }
@media screen and (max-width:550px) {
  .topbar-actions { width: 100%; margin-left: 0; justify-content: flex-start; }
}
.picker-art { width: 44px; height: 44px; }
@media print {
  .plan-drag-handle { display: none !important; }
  .service-items > li { grid-template-columns: 28px minmax(0,1fr) 64px; }
  .service-items > .plan-heading-item { grid-template-columns: 1fr; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.page-heading:has(> h1) .index-heading-actions { flex-direction: row; justify-content: flex-end; }
.workspace-label-small { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
/* Search controls stay mounted; result regions update independently. */
.collection-local-controls { display:grid; grid-template-columns:minmax(180px,2fr) minmax(100px,1fr) minmax(180px,1.3fr); gap:14px; margin:16px 0; }
.collection-local-controls input,.collection-local-controls select { width:100%; }
.collection-dropdown > summary { display:flex; align-items:center; gap:18px; }
.collection-dropdown > summary > div:nth-child(2) { flex:1; min-width:0; }
.collection-portrait { width:96px; height:96px; border-radius:14px; flex:0 0 96px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(135deg,#dce7df,#c6d6dc); color:#3d5951; font:600 26px/1 Georgia,serif; }
.collection-emblem { background:linear-gradient(135deg,#ede5d6,#d9e4dc); }
.collection-portrait img { width:100%; height:100%; object-fit:cover; }
.collection-portrait:has(img+img) img { width:50%; }
.portrait-credit { display:block; font-size:11px; margin-top:6px; }
.portrait-credit a { color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
.collection-title-matches { padding:20px 24px; border:1px solid var(--line); border-radius:16px; background:#fff; margin:18px 0; }
.collection-songs > li { gap:12px; }
.collection-songs > li > div { flex:1; min-width:0; }
.collection-song-art { width:44px; height:44px; flex:0 0 44px; border-radius:7px; }
.collection-song-results .pagination input { width:64px; }
.collection-sort-help { font-size:12px; margin-top:12px; }
.account-save-strip { border:1px solid transparent; border-radius:9px; position:relative; }
.account-save-strip > summary { display:flex; align-items:center; gap:6px; padding:8px 11px; cursor:pointer; list-style:none; font-size:12px; font-weight:650; white-space:nowrap; }
.account-save-strip > summary::-webkit-details-marker { display:none; }
.account-save-strip.save-unsaved { color:#972e26; background:#fff0ed; border-color:#eeb9b2; }
.account-save-strip.save-saving { color:#765113; background:#fff4dc; border-color:#e4ce97; }
.account-save-strip.save-saved { color:#295f40; background:#eaf4ed; border-color:#b9d9c2; }
.account-save-strip.save-readonly { color:#475368; background:#edf0f5; border-color:#cbd2de; }
.save-status-icon { font-size:17px; line-height:1; width:16px; text-align:center; }
.save-saving .save-status-icon { animation:save-status-spin 1.2s linear infinite; }
@keyframes save-status-spin { to { transform:rotate(360deg); } }
.account-save-strip .sync-menu-content { color:var(--ink); }
.remember-sign-in { margin:14px 0 5px; }
.sign-in-hint { font-size:12px; line-height:1.6; color:var(--muted); margin:0 0 8px; }
@media (prefers-reduced-motion:reduce) { .save-saving .save-status-icon { animation:none; } }
@media (max-width:760px) {
  .collection-local-controls { grid-template-columns:1fr; }
  .collection-dropdown > summary { gap:12px; }
  .collection-portrait { width:68px; height:68px; flex-basis:68px; border-radius:10px; font-size:21px; }
  .collection-dropdown > summary h2 { font-size:19px; }
  .collection-title-matches { padding:16px; }
  .collection-title-matches .collection-songs > li { flex-wrap:wrap; }
  .collection-sort-help { line-height:1.6; }
}
.collection-portrait.has-portrait { position:relative; }
.collection-portrait.has-portrait > span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.portrait-credit { overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Compact reference rows: artwork, title and rating share the same line. */
@media screen {
  .song-list { grid-template-columns: minmax(0,1fr); gap: 8px; align-content: start; }
  .song-card { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: start; gap: 12px; padding: 12px; border-radius: 12px; box-shadow: none; }
  .song-card-art { display: grid; place-items: center; width: 40px; min-height: 40px; }
  .song-card-art:has(.album-art[hidden])::after { content: "♫"; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: #5f7964; background: #eef4eb; font-size: 20px; }
  .song-card .card-art { width: 40px; height: 40px; border-radius: 7px; }
  .song-card .song-symbol { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 8px; font-size: 20px; }
  .song-card-copy { min-width: 0; }
  .song-card h3 { font-size: 18px; line-height: 1.3; margin: 0 0 4px; overflow-wrap: anywhere; }
  .song-card p { font-size: 12px; line-height: 1.4; margin: 0; overflow-wrap: anywhere; }
  .song-card-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 8px; }
  .song-card .card-status { font-size: 10px; line-height: 1.5; color: var(--muted); }
  .song-card .tags { gap: 4px; }
  .song-card .tag { font-size: 10px; padding: 2px 6px; overflow-wrap: anywhere; }
  .song-card .card-score { display: flex; flex-direction: column; align-items: end; gap: 4px; font-size: 18px; line-height: 1.3; white-space: nowrap; }
  .song-card .card-score small { font-size: 9px; }
  .song-card .card-score .ai-mark { margin: 0; }
}
@media screen and (min-width: 1000px) {
  .song-workspace { grid-template-columns: clamp(280px,25vw,380px) minmax(0,1fr); }
}
@media screen and (min-width: 551px) and (max-width: 999px) {
  .song-list { max-height: min(520px,60svh); overflow-y: auto; }
}
@media screen and (max-width: 550px) {
  .song-card { gap: 8px; padding: 12px 10px; }
  .song-card h3 { font-size: 17px; }
}

/* Page sections use an attached tab edge, distinct from action buttons. */
.workspace-tabs { display:flex; flex-wrap:nowrap; align-items:stretch; gap:4px; margin:0 0 20px; padding:0 2px; border-bottom:1px solid #b9ccbf; overflow-x:auto; scrollbar-width:thin; }
.workspace-tab { appearance:none; flex:0 0 auto; position:relative; min-height:44px; padding:12px 18px; border:1px solid transparent; border-bottom:0; border-radius:9px 9px 0 0; background:transparent; color:var(--muted); font:500 14px/1.4 var(--sans); white-space:nowrap; cursor:pointer; box-shadow:none; }
.workspace-tab:hover { background:#eaf0e8; color:var(--ink); }
.workspace-tab.selected { border-color:#b9ccbf; border-top:3px solid var(--green); padding-top:10px; background:white; color:var(--green); font-weight:700; }
.workspace-tab.selected::after { content:""; position:absolute; inset:auto 0 -1px; height:2px; background:white; }
.workspace-tab:focus-visible { outline:2px solid var(--green); outline-offset:-5px; }
@media (prefers-reduced-motion:no-preference) { .workspace-tab { transition:background 120ms ease; } }
.settings-gear { font-size:23px; line-height:1; min-width:44px; padding:10px; }
.about-page { max-width:760px; margin-inline:auto; line-height:1.7; overflow-wrap:anywhere; }
.about-page h1 { line-height:1.15; }
.about-intro { font-size:20px; }
.about-flow { padding-left:24px; }
.about-flow li { padding:8px 0; }
.public-about { margin:0 auto; padding:40px 24px; }
@media screen and (max-width:550px) {
  .page { padding:16px 12px; }
  .page-heading { margin-bottom:16px; gap:10px; }
  .page-heading h1, .about-page h1 { font-size:28px; }
  .page-heading p { font-size:14px; }
  .sidebar { padding:10px 8px; }
  .sidebar nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
  .sidebar .nav-item { min-width:0; padding:9px 3px; min-height:44px; gap:5px; font-size:12px; }
  .sidebar .nav-icon { display:none; }
  .sidebar .nav-item b { display:none; }
  .topbar { padding:10px 12px; gap:8px; }
  .topbar-actions { gap:6px; flex-wrap:wrap; }
  .workspace-tabs { gap:6px; margin-bottom:14px; }
  .workspace-tabs .workspace-tab { padding:10px 12px; font-size:13px; }
  .workspace-tabs .workspace-tab.selected { padding-top:8px; }
  .detail-panel { padding:16px 12px; border-radius:14px; }
  .song-title h2 { font-size:25px; }
  .song-tabs { margin-top:12px; }
  .collection-card { border-radius:14px; }
  .collection-cover { width:48px; height:48px; }
  .criterion-row, .audit-chart { padding:12px; border-radius:12px; }
  .score-grid { gap:8px; }
  dialog { width:calc(100% - 16px); max-width:calc(100% - 16px); padding:14px; border-radius:16px; }
  dialog h2 { font-size:24px; }
  .profile-panel { padding:18px 14px; border-radius:16px; }
  .public-about { padding:24px 16px; }
  input, select, textarea { max-width:100%; }
}
@media screen and (max-width:550px) {
  .sidebar .nav-item { width:100%; justify-content:center; }
  .sidebar .nav-label { white-space:nowrap; }
  .onboarding-prompt { padding:16px; gap:12px; border-radius:14px; }
  .onboarding-prompt h2 { font-size:23px; margin:6px 0; }
  .onboarding-prompt p { font-size:13px; margin:6px 0; }
  .onboarding-prompt .eyebrow { font-size:9px; }
  .collection-browse-controls { gap:10px; }
}
@media screen and (max-width:550px) {
  .plan-list { display:grid; max-height:180px; overflow:auto; gap:6px; }
  .plan-list button { min-width:0; padding:10px 12px; border-radius:10px; }
  .plan-list strong { font:600 16px/1.35 var(--sans); }
  .plan-list span { margin-top:3px; font-size:11px; }
  .plan-sheet { padding:14px 12px; border-radius:14px; }
  .plan-sheet-header { padding:12px; gap:10px; }
  .plan-sheet-header h2 { font-size:25px; }
  .duration-total { padding:8px 10px; border-radius:10px; }
  .duration-total strong { font-size:27px; }
  .collection-dropdown > summary { padding:12px; gap:10px; }
  .collection-dropdown h2 { font-size:19px; }
  .collection-portrait { width:48px; height:48px; flex-basis:48px; border-radius:10px; font-size:20px; }
  .collection-body { padding:0 12px 12px; }
}

.catalog-analysis { margin-top:20px; border-top:1px solid var(--line); padding-top:14px; }
.catalog-analysis > summary { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; min-height:44px; font-weight:600; cursor:pointer; }
.catalog-analysis > summary span { color:var(--muted); font-size:12px; font-weight:400; }
.catalog-analysis > div { padding-block:12px; }
.catalog-analysis h4 { margin:20px 0 8px; }
.analysis-reasons { display:grid; gap:14px; }
.analysis-reasons dt { font-weight:600; }
.analysis-reasons dd { margin:4px 0 0; line-height:1.65; }
.analysis-excerpt { border-left:3px solid #8ca995; padding:10px 14px; background:#f0f4ee; }
.analysis-excerpt strong { display:block; margin-bottom:6px; font-size:12px; }
.analysis-themes { display:flex; flex-wrap:wrap; gap:6px; }
.analysis-scriptures blockquote { margin:8px 0; padding-left:12px; border-left:2px solid var(--line); }
@media screen and (max-width:550px) { .catalog-analysis { margin-top:14px; } }

.lens-switch {display:flex;align-items:center;gap:8px;font-size:.8rem;min-width:0}.lens-switch select {max-width:190px;padding:6px 10px}.recommended-use li {margin-bottom:16px;line-height:1.65}@media(max-width:700px){.topbar-actions{flex-wrap:wrap}.lens-switch{flex-basis:100%}.lens-switch select{max-width:100%;flex:1}}

@media screen {
  .about-link { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:10px 18px; border:1px solid #b3c7b8; border-radius:12px; background:#e9f0e8; color:#214d3c; font:600 14px/1.3 var(--sans); text-decoration:none; white-space:nowrap; }
  .about-link:hover,.about-link[aria-current="page"] { background:#dbe9dc; border-color:#789e83; }
  .about-link:focus-visible { outline:3px solid #709b7e; outline-offset:3px; }
  .about-entry { width:100%; margin-top:8px; min-height:50px; }
  .collection-browse-controls { grid-template-columns:minmax(200px,2fr) repeat(3,minmax(130px,1fr)); }
  .collection-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:start; }
  .collection-card { min-width:0; margin:0; padding:0; overflow:visible; border-radius:18px; }
  .collection-card > summary { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:0; padding:0; position:relative; border-radius:18px; }
  .collection-card > summary:hover { background:#f4f7f1; }
  .collection-card > summary::after { position:absolute; right:18px; bottom:21px; font:400 24px/1 var(--sans); }
  .collection-card .collection-portrait { position:relative; grid-column:1/-1; width:100%; height:170px; flex-basis:auto; border-radius:17px 17px 0 0; background:#dbe5dc; display:flex; }
  .collection-card .collection-illustration { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .collection-album-mosaic { position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; height:100%; background:#dbe5dc; }
  .collection-album-mosaic.mosaic-1 { grid-template-columns:1fr; }
  .collection-album-mosaic.mosaic-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .collection-album-mosaic.mosaic-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .collection-card .collection-portrait .collection-album-mosaic img { width:100%; height:100%; min-width:0; object-fit:cover; }
  .collection-card .collection-portrait.has-portrait > img { flex:1; min-width:0; width:0; height:100%; object-fit:cover; object-position:center 30%; }
  .collection-heading { padding:18px 0 20px 20px; min-width:0; }
  .collection-kicker { display:block; color:#5c7162; font:500 11px/1.5 var(--sans); margin-bottom:7px; }
  .collection-card h2 { font:400 24px/1.16 Georgia,serif; margin:0 0 9px; overflow-wrap:anywhere; }
  .collection-card .collection-subtitle { display:block; font:400 11px/1.5 var(--sans); color:#647568; }
  .collection-card .collection-count { align-self:end; padding:20px 45px 20px 12px; margin:0; white-space:nowrap; text-align:right; }
  .collection-card .collection-count strong { font:600 16px/1.3 var(--sans); }
  .collection-card .collection-count span { display:block; font-size:11px; }
  .collection-card .portrait-credit { display:block; font-size:9px; line-height:1.4; margin-top:8px; }
  .collection-card[open] { grid-column:1/-1; }
  .collection-card[open] > summary { grid-template-columns:180px minmax(0,1fr) auto; align-items:center; background:#edf3ee; border-radius:18px 18px 0 0; }
  .collection-card[open] .collection-portrait { grid-column:auto; height:130px; border-radius:17px 0 0 0; }
  .collection-card[open] > summary::after { bottom:calc(50% - 12px); }
  .collection-card .collection-body { padding:4px 24px 24px; }
  .collection-card .collection-songs .more-menu { flex-shrink:0; }
}
@media screen and (max-width:1200px) {
  .collection-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .collection-browse-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media screen and (max-width:700px) {
  .topbar-actions > .about-link { order:-2; margin-right:auto; }
  .topbar-actions > .lens-switch { order:1; }
}
@media screen and (max-width:600px) {
  .topbar-actions { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; width:100%; }
  .topbar-actions > .about-link { order:0; margin:0; padding:10px; }
  .topbar-actions > .lens-switch { grid-column:1/-1; grid-row:2; order:0; margin-top:6px; }
  .topbar-actions > .workspace-switch { grid-column:1/-1; }
  .topbar-actions > .account-save-strip { min-width:0; }
  .topbar-actions .account-save-strip > summary { white-space:normal; padding:8px; font-size:11px; min-height:44px; }
  .topbar-actions > .button { min-height:44px; padding:8px; font-size:11px; }
  .collection-list { grid-template-columns:1fr; gap:18px; }
  .collection-browse-controls { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .collection-browse-controls > label:first-child { grid-column:1/-1; }
  .collection-card .collection-portrait { height:170px; }
  .collection-card h2 { font-size:25px; }
  .collection-card[open] > summary { grid-template-columns:minmax(0,1fr) auto; }
  .collection-card[open] .collection-portrait { grid-column:1/-1; height:150px; border-radius:17px 17px 0 0; }
  .collection-card[open] > summary::after { bottom:21px; }
  .collection-card .collection-body { padding:4px 16px 18px; }
}
/* A standalone review keeps catalog-trimming choices separate from workspaces. */
.shortlist-review .review-header { max-width: 1120px; margin: auto; padding: 24px; display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); }
.shortlist-review .review-header a { color:var(--green); font-weight:600; text-decoration:none; }
.shortlist-review .review-header span { color:var(--muted); }
.shortlist-review .review-main { width:min(100%, 880px); margin:0 auto; padding:32px 24px 64px; }
.shortlist-review .review-intro { max-width:680px; margin-bottom:24px; }
.shortlist-review .review-intro h1 { margin:4px 0 12px; font-family:var(--serif); font-size:clamp(28px,5vw,40px); line-height:1.15; }
.shortlist-review .review-intro p { color:var(--muted); }
.shortlist-review .review-eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.shortlist-review button, .shortlist-review .review-file { padding:10px 16px; min-height:44px; background:var(--white); border:1px solid var(--line); border-radius:12px; color:var(--ink); font-weight:600; cursor:pointer; }
.shortlist-review button:hover, .shortlist-review .review-file:hover { background:var(--green-light); }
.shortlist-review button:disabled { opacity:.45; cursor:default; }
.shortlist-review :is(button,a,input,textarea,select,summary):focus-visible { outline:3px solid #9d7837; outline-offset:3px; }
.shortlist-review :is(h2):focus { outline:none; }
.shortlist-review .review-progress { padding:20px 24px; border:1px solid var(--line); border-radius:18px; background:#edf2eb; }
.shortlist-review #review-counts { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.shortlist-review #review-counts span { color:var(--muted); font-size:13px; }
.shortlist-review progress { display:block; width:100%; height:8px; margin:12px 0; accent-color:var(--green); border:0; border-radius:8px; overflow:hidden; }
.shortlist-review progress::-webkit-progress-bar { background:#d7e2d7; }
.shortlist-review progress::-webkit-progress-value { background:var(--green); }
.shortlist-review #review-save { margin:0; color:var(--muted); font-size:12px; }
.shortlist-review .review-filters { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin:24px 0 16px; }
.shortlist-review label { display:block; color:var(--ink); font-size:13px; font-weight:600; }
.shortlist-review :is(input[type="search"],select,textarea) { display:block; width:100%; max-width:100%; margin-top:6px; border:1px solid var(--line); background:var(--white); color:var(--ink); border-radius:12px; padding:10px 12px; min-height:44px; }
.shortlist-review .review-search { flex:1; min-width:160px; }
.shortlist-review label.review-check { display:flex; align-items:center; gap:8px; min-height:44px; font-weight:400; }
.shortlist-review .review-check input { width:18px; height:18px; accent-color:var(--green); margin:0; }
.shortlist-review .review-navigation { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; }
.shortlist-review #review-position { color:var(--muted); font-size:13px; text-align:center; }
.shortlist-review .review-flashcard, .shortlist-review .review-empty { padding:28px; border:1px solid var(--line); border-radius:24px; background:var(--white); box-shadow:0 8px 32px #1a3d2f0a; overflow-wrap:anywhere; }
.shortlist-review .review-card-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; color:var(--muted); font-size:12px; }
.shortlist-review .review-choice-status { color:var(--green); font-weight:600; }
.shortlist-review #review-card { scroll-margin-top:16px; }
.shortlist-review .review-identity { text-align:center; padding:24px 0 8px; }
.shortlist-review .review-identity img { display:block; width:88px; height:88px; border-radius:14px; margin:0 auto 16px; object-fit:cover; }
.shortlist-review .review-identity h2 { font-family:var(--serif); font-size:clamp(27px,5vw,38px); line-height:1.2; margin:0 0 10px; }
.shortlist-review .review-identity p { color:var(--muted); margin:0; }
.shortlist-review .review-rating { margin:12px auto; width:fit-content; padding:6px 12px; background:#f3f5f0; border-radius:8px; font-size:13px; }
.shortlist-review .review-rating-high { color:#705321; background:#f7efdd; }
.shortlist-review .review-resources { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 20px; margin:20px 0; }
.shortlist-review .review-resources a { color:var(--green); font-weight:600; font-size:13px; padding:8px 0; }
.shortlist-review #review-evaluation[hidden] { display:none; }
.shortlist-review #review-evaluation { margin:20px 0; border-top:1px solid var(--line); }
.shortlist-review .review-score-context { font-size:12px; color:var(--muted); }
.shortlist-review .catalog-analysis { max-width:100%; background:#f8faf6; }
.shortlist-review .catalog-analysis a { overflow-wrap:anywhere; }
.shortlist-review .review-note-label span { font-weight:400; color:var(--muted); }
.shortlist-review textarea { resize:vertical; }
.shortlist-review .review-decisions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:20px; }
.shortlist-review .review-decisions button { min-height:56px; padding:12px 8px; }
.shortlist-review .review-decisions .review-keep { background:var(--green); color:white; border-color:var(--green); }
.shortlist-review .review-decisions .review-keep:hover { background:#163f32; }
.shortlist-review .review-decisions .review-remove { color:#8a3e36; border-color:#ddc5c0; background:#fcf7f5; }
.shortlist-review .review-decisions [aria-pressed="true"] { box-shadow:0 0 0 2px #acbda9; }
.shortlist-review kbd { font:inherit; font-size:11px; opacity:.7; margin-left:8px; }
.shortlist-review .review-draft-note { color:var(--muted); font-size:12px; margin:12px 0 0; text-align:center; }
.shortlist-review .review-after { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; }
.shortlist-review .review-shortcuts { color:var(--muted); font-size:12px; text-align:center; }
.shortlist-review .review-results { margin-top:28px; padding:20px 24px; background:var(--white); border:1px solid var(--line); border-radius:18px; }
.shortlist-review summary { cursor:pointer; padding:8px 0; font-weight:600; }
.shortlist-review .review-results p { color:var(--muted); font-size:13px; }
.shortlist-review .review-export-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.shortlist-review .review-file { position:relative; overflow:hidden; }
.shortlist-review .review-file input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.shortlist-review .review-file:focus-within { outline:3px solid #9d7837; outline-offset:3px; }
.shortlist-review #review-summary { margin-top:20px; }
.shortlist-review #review-summary details { border-top:1px solid var(--line); }
.shortlist-review #review-summary ul { padding-left:20px; }
.shortlist-review #review-summary li { padding:8px 0; }
.shortlist-review #review-summary li button { border:0; padding:0; min-height:40px; text-align:left; color:var(--green); }
.shortlist-review #review-summary li span { display:block; color:var(--muted); font-size:12px; }
.shortlist-review #review-summary li p { white-space:pre-wrap; }
.shortlist-review .review-message { min-height:24px; color:var(--green); }
@media screen and (max-width:600px) {
  .shortlist-review .review-header { padding:16px; font-size:12px; }
  .shortlist-review .review-main { padding:24px 16px 40px; }
  .shortlist-review .review-flashcard, .shortlist-review .review-empty { padding:20px 16px; }
  .shortlist-review .review-progress, .shortlist-review .review-results { padding:16px; }
  .shortlist-review .review-filters>label:first-child { width:100%; }
  .shortlist-review .review-decisions { gap:8px; }
  .shortlist-review kbd { display:none; }
  .shortlist-review .review-check { font-size:12px; }
  .shortlist-review .review-navigation button { padding:8px 10px; }
}