/* site.css
   Shared stylesheet for index/all/composer pages.
*/
:root{
  --text:#111;
  --muted:#666;
  --lightgray:#bbb;
  --line:#ddd;
  --chip-bg:#eee;
  --chip-text:#333;
  --link:#0b57d0;

  --date-w: 92px;
  --level-w: 28px;
  --skillcol-w: 190px;
  --icon: 18px;
  --stroke: 1.8;

  --maxw: 980px;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  margin: 16px;
  line-height: 1.35;
}

.wrap{ max-width: var(--maxw); margin: 0 auto; }

a{ color: var(--link); text-decoration: none; }
a:hover{ text-decoration: underline; }

header{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
h1{ font-size: 1.35rem; margin:0; }
.subhead{ color:var(--muted); font-size: 0.95rem; }

h2{
  margin: 18px 0 8px 0;
  font-size: 1.05rem;
  color: var(--muted);
}

.chip{
  display:inline-block;
  background: var(--chip-bg);
  color: var(--chip-text);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.82rem;
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
}
.chip--meta{ margin-left: 6px; }

/* Folding primitives */
details{ margin: 0; }
summary{ cursor: pointer; list-style: none; }
summary::-webkit-details-marker{ display:none; }

/* Lucide base */
.lucide{
  width: var(--icon);
  height: var(--icon);
  stroke: currentColor;
  fill: none;
  stroke-width: var(--stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -3px;
}

/* Caret */
.caret{ display:inline-flex; align-items:center; }
details[open] > summary .caret{ transform: rotate(90deg); transform-origin: 50% 50%; }

.node{ margin-top: 10px; }
.children{ margin-left: 18px; padding-left: 12px; }

.row{
  display:flex;
  align-items: baseline;
  gap: 10px;
  padding: 1px 0;
}

.label{
  flex: 1 1 auto;
  min-width: 220px;
}
.cat-title{ font-weight: 700; }
.work-title{
  font-weight: 500;
  font-size: 1.01rem;
  color: var(--text);
}
a.work-title{ color: var(--link); position: relative; }
a.work-title::before{
  content: "";
  position: absolute;
  left: calc(-1 * (var(--icon) + 8px));
  top: 1px;
  width: var(--icon);
  height: var(--icon);
  background: url("IMSLP.svg") no-repeat center / contain;
  opacity: 0;
  transform: translateX(4px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
a.work-title:hover::before,
a.work-title:focus-visible::before{
  opacity: 0.95;
  transform: translateX(0);
}
.arranger{ font-weight: 400; margin-left: 6px; }
.nickname{ font-weight: 400; margin-left: 6px; }
.authorship-uncertain{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1;
  vertical-align: middle;
}

/* Meta: responsive grid (single markup) */
.meta{
  flex: 0 0 auto;
  display:grid;
  grid-template-columns: auto auto var(--level-w) var(--date-w) var(--skillcol-w);
  grid-template-areas: "links editions level date skill";
  column-gap: 12px;
  align-items: baseline;
  justify-content: end;
}
.meta-links{ grid-area: links; display:inline-flex; align-items:center; gap: 6px; }
.meta-editions{ grid-area: editions; display:inline-flex; align-items:center; gap: 8px; justify-content: flex-end; }
.meta-level{ grid-area: level; width: var(--level-w); text-align: left; }
.meta-date{ grid-area: date; width: var(--date-w); text-align: left; white-space: nowrap; }
.meta-skillrec{
  grid-area: skill;
  width: var(--skillcol-w);
  display:inline-flex;
  align-items:center;
  gap: 10px;
  justify-content: flex-start;
  min-width: 0;
}

/* Logos (IMSLP/WP/YT) */
.logo{
  width: var(--icon);
  height: var(--icon);
  display:inline-block;
  vertical-align: -3px;
}

/* icon buttons */
.iconlink{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 2px 4px;
  border-radius: 6px;
  color: inherit;
  vertical-align: middle;
}
.iconlink:hover{ background: rgba(0,0,0,0.05); text-decoration: none; }

.edtext{ color: var(--muted); font-size: 0.86rem; white-space: nowrap; }
.edlink .edtext{
  color: var(--muted);
  color: color-mix(in srgb, var(--muted) 70%, var(--link) 30%);
}
.level-link{
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}
a.level-link{ color: color-mix(in srgb, var(--muted) 60%, var(--link) 40%); }
a.level-link:hover{ color: var(--link); text-decoration: underline; }

/* stars */
.stars{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.6px;
  white-space: nowrap;
}
.stars-top{
  position: relative;
  display: inline-block;
  color: var(--lightgray);
}
.stars-top::after{
  content: attr(data-outline);
  position: absolute;
  left: 0;
  top: 0;
  color: #000;
  white-space: nowrap;
  pointer-events: none;
}

/* Category summary row */
.cat-summary{
  display:flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
}

/* Legend */
.legend{
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.legend-summary{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 650;
}
.legend-summary::before{
  content: "▸";
  color: var(--muted);
  transition: transform 160ms ease;
}
details[open].legend > .legend-summary::before{ transform: rotate(90deg); }
.legend-body{ margin-top: 10px; display:flex; flex-direction: column; gap: 14px; }
.legend-heading{ font-weight: 600; }
.legend-text{ color: var(--muted); }
.legend-scale{ margin-top: 6px; display:flex; flex-direction: column; gap: 6px; }
.legend-row{
  display:grid;
  grid-template-columns: 92px 160px 1fr;
  gap: 12px;
  align-items: baseline;
}
.legend-stars{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.6px;
  white-space: nowrap;
}
.legend-imslp{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 600;
  color: var(--text);
}
.legend-icon{ width: 40px; height: 12px; }

/* Movement rows */
.movement-row{ padding-left: 8px; }
.movno{
  display:inline-block;
  min-width: 2.2em;
  color: var(--muted);
}

/* Aggregate fields hidden (space preserved) when open */
details[data-node="work"][open] .agg{ visibility: hidden; }

/* Index list */
.composer-list{ list-style:none; padding:0; margin:0; }
.composer-item{
  display:grid;
  grid-template-columns: 1fr 64px;
  gap: 12px;
  align-items: baseline;
  padding: 4px 0;
}
.composer-left{ display:flex; align-items: baseline; gap: 10px; min-width: 0; }
.composer-left .iconlink{ align-self: center; }
.composer-left a{ font-weight: 650; white-space: nowrap; }
.composer-dates{ color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.composer-count{ text-align:right; }

/* Mobile */
@media (max-width: 650px){
  .row{ flex-direction: column; align-items: stretch; gap: 6px; }

  .label{ display:flex; flex-direction: column; gap: 3px; }
  .chip--meta{ margin-left: 0; align-self: flex-start; }

  .meta{
    grid-template-columns: auto auto var(--level-w) var(--date-w);
    grid-template-areas:
      "links editions level date"
      "skill skill skill";
    row-gap: 6px;
    justify-content: end;
  }
  .meta-links{ justify-self: end; }
  .meta-editions{ justify-self: end; }
  .meta-level{ justify-self: end; }
  .meta-date{ justify-self: end; }
  .meta-skillrec{ justify-self: end; }

  .children{ margin-left: 12px; padding-left: 10px; }

  .composer-item{ grid-template-columns: 1fr auto; }
  .composer-left{ flex-wrap: wrap; }

  .legend-row{ grid-template-columns: 86px 1fr; }
  .legend-desc{ grid-column: 1 / -1; }
}