/* Uses the existing Tools page shell, colors and shared cozy controls. */
.learning-choice .learning-choice-image { height: 300px; flex-shrink: 0; background: var(--theme-surface-2, #eaf1ff); }
.learning-choice-image.learning-pdf-image { padding: 16px; }
@media(max-width:750px) { .learning-choice .learning-choice-image { height: 240px; } }
html { color-scheme: light only; }
body { background: var(--page); }
.hero { background: #1d4ed8; }
.brand-icon, .side-link.active { background: #2563eb; }
.mini-card, .tool-image-wrap { background: #eff6ff; }
.resource-filters, .resource-card, .resource-empty {
  background: var(--theme-surface, white); border: 1px solid var(--border);
  border-radius: 18px; color: var(--theme-text, var(--text));
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}
.resource-filters { padding: 20px; margin-bottom: 24px; }
.resource-filter-grid { display: grid; grid-template-columns: 1.4fr repeat(3,minmax(0,1fr)); gap: 12px; }
.resource-filter-field { min-width: 0; }
.resource-filter-field label { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 700; color: var(--theme-muted,var(--muted)); }
.resource-filter-field :is(input,select) {
  width: 100%; min-height: 42px; padding: 10px 12px; font: inherit; font-size: 12px;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--theme-surface,white); color: var(--theme-text,var(--text));
}
.resource-filter-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.resource-filter-footer p { margin: 0; font-size: 12px; color: var(--theme-muted,var(--muted)); }
.resource-reset { border: 1px solid var(--border); background: transparent; color: var(--theme-primary,var(--blue)); padding: 8px 12px; cursor: pointer; border-radius: 11px; font: inherit; font-size: 11px; font-weight: 700; }
.resource-category { margin-bottom: 28px; }
.resource-category .section-heading { align-items: flex-start; }
.resource-category h2 { display: flex; align-items: center; gap: 9px; }
.resource-category h2 i { font-size: 17px; width: 1.25em; text-align: center; }
.resource-category-description { margin: 0 0 15px; font-size: 12px; line-height: 1.7; color: var(--theme-muted,var(--muted)); }
.resource-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 36px 15px; }
.resource-card { display: flex; flex-direction: column; min-width: 0; padding: 0; position: relative; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.resource-card { text-decoration: none; color: var(--text); transition: transform .2s ease; }
.resource-card:hover { transform: translateY(-4px); }
.resource-cover { display: grid; place-items: center; width: calc(100% + 8px); aspect-ratio: 3 / 4; margin: 0 -4px 14px; overflow: hidden; border-radius: 2px; box-shadow: 0 5px 15px rgba(15,23,42,.10); }
.resource-cover > i { font-size: 42px; color: var(--blue); }
.resource-info { min-width: 0; }
.resource-catalog-line { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 11px; color: var(--muted); }
.resource-level { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 7px; font-size: 10.5px; font-weight: 800; line-height: 1; background: #eff6ff; color: #2563eb; }
#resourceCategories .grade-1-label { background: #dcfce7 !important; color: #166534 !important; }
#resourceCategories .grade-2-label { background: #e0e7ff !important; color: #4338ca !important; }
#resourceCategories .grade-3-label { background: #fef9c3 !important; color: #854d0e !important; }
#resourceCategories .grade-4-label { background: #dbeafe !important; color: #172554 !important; }
.resource-open { margin-left: auto; color: var(--blue); font-size: 9.5px; font-weight: 700; }
.resource-meta { align-items: center; }
.resource-card h3 { margin: 0 0 9px; font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.22px; color: var(--theme-text,var(--text)); }
.resource-thumbnail { display: block; width: 100%; height: 100%; object-fit: cover; }
.resource-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.resource-meta .tag { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 8px; background: var(--theme-surface-2,#eff6ff); color: var(--theme-primary,#2563eb); font-size: 10px; font-weight: 600; }
.resource-empty { padding: 22px; border-style: dashed; display: flex; align-items: center; gap: 13px; }
.resource-empty > i { color: var(--theme-primary,var(--blue)); font-size: 20px; }
.resource-empty strong { display: block; font-size: 13px; margin-bottom: 4px; }
.resource-empty p { margin: 0; font-size: 11px; line-height: 1.7; color: var(--theme-muted,var(--muted)); }
.resource-noscript { padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--theme-surface,white); font-size: 13px; }
.resource-tip { font-size: 12px; line-height: 1.8; color: var(--theme-muted,var(--muted)); }
.resource-related { display: grid; gap: 10px; }
.resource-related a { display: flex; align-items: center; gap: 9px; color: var(--theme-primary,var(--blue)); font-size: 12px; font-weight: 600; text-decoration: none; }
.resource-related a:hover { text-decoration: underline; }
@media(max-width:1200px) { .resource-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:1320px) { .resource-grid { grid-template-columns: repeat(5,minmax(0,1fr)); } }
@media(max-width:1120px) { .resource-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media(max-width:900px) { .resource-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:650px) { .resource-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.resource-card h3 { font-size: 15px; } }
@media(max-width:450px) { .resource-filter-grid { grid-template-columns: 1fr; }.resource-category .section-heading { flex-wrap: wrap; } }
@media(max-width:390px) { .resource-grid { grid-template-columns: 1fr; }.resource-card { max-width: 210px; } }
@media(prefers-reduced-motion:reduce) { .resource-card { transition: none; }.resource-card:hover { transform: none; } }

/* Instrument guides use compact editorial cards rather than sheet-music covers. */
#resourceCategories .resource-instrument-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
#resourceCategories .resource-article-card{background:var(--theme-surface,#fff);border:1px solid var(--theme-border,#dbe4f3);border-radius:18px;overflow:hidden;box-shadow:0 4px 14px rgba(15,23,42,.04)}
#resourceCategories .resource-article-card .resource-cover{width:100%;height:150px;aspect-ratio:auto;margin:0;padding:16px 24px;background:#fff;border-radius:0;box-shadow:none}
#resourceCategories .resource-article-card .resource-thumbnail{width:100%;height:100%;object-fit:contain;object-position:center}
#resourceCategories .resource-article-card .resource-info{padding:18px;display:flex;flex-direction:column;flex:1}
#resourceCategories .resource-article-card h3{font-size:20px;line-height:1.35;margin:0 0 9px}
#resourceCategories .resource-article-description{font-size:14px;line-height:1.7;color:var(--theme-muted,#637ba5);margin:0 0 18px}
#resourceCategories .resource-article-card .resource-catalog-line:empty{display:none}
#resourceCategories .resource-article-card .resource-meta{margin:auto 0 0;gap:7px;align-items:center}
#resourceCategories .resource-article-card .resource-meta .tag{font-size:11px;padding:6px 9px}
#resourceCategories .resource-article-card .resource-open{font-size:12px;margin:10px 0 0;width:100%;color:var(--theme-primary,#2563eb)}
@media(min-width:1700px){#resourceCategories .resource-instrument-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:550px){#resourceCategories .resource-instrument-grid{grid-template-columns:1fr}}
#resourceCategories .resource-instrument-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
#resourceCategories .resource-article-card{border-top:3px solid var(--theme-primary,#2563eb)}
#resourceCategories .resource-article-card .resource-info{padding:24px}
#resourceCategories .resource-article-label{font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--theme-primary,#2563eb);margin-bottom:13px}
#resourceCategories .resource-article-card h3{font-size:23px}
#resourceCategories .resource-article-card .resource-meta .tag{display:none}
#resourceCategories .resource-article-card .resource-open{font-size:14px;margin-top:2px}
.learning-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:28px}.learning-choice{border:1px solid var(--theme-border,#d8e3f7);border-radius:22px;overflow:hidden;background:var(--theme-surface,#fff);color:var(--theme-text,#123477);text-decoration:none;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(15,23,42,.05)}.learning-choice-image{height:240px;background:#eaf1ff;overflow:hidden}.learning-choice-image img{display:block;width:100%;height:100%;object-fit:cover}.learning-pdf-image{padding:20px;background:#eaf1ff}.learning-pdf-image img{object-fit:contain}.learning-choice-copy{padding:28px;display:flex;flex-direction:column;flex:1}.learning-choice-copy>span{font-size:12px;font-weight:800;letter-spacing:.07em;color:var(--theme-primary,#2563eb)}.learning-choice h2{font-size:28px;line-height:1.25;margin:12px 0}.learning-choice p{font-size:16px;line-height:1.8;color:var(--theme-muted,#637ba5);margin:0 0 24px}.learning-choice strong{margin-top:auto;font-size:15px;display:flex;gap:10px;align-items:center;color:var(--theme-primary,#2563eb)}.learning-choice:hover{border-color:var(--theme-primary,#2563eb)}.learning-choice:focus-visible{outline:3px solid var(--theme-primary,#2563eb);outline-offset:4px}.learning-back a{display:inline-block;padding:10px 15px;border:1px solid var(--theme-border,#d8e3f7);border-radius:10px;color:var(--theme-primary,#2563eb);background:var(--theme-surface,#fff);text-decoration:none;margin:18px 0}@media(max-width:750px){.learning-choices{grid-template-columns:1fr}.learning-choice-image{height:210px}}