.sc-wrap { max-width: 1180px; }
.sc-intro { color: var(--color-text-muted); max-width: 74ch; }
.sc-bar { display: flex; flex-wrap: wrap; gap: .75rem 1.1rem; align-items: flex-end;
  padding: .9rem 1rem; margin: 1.2rem 0; border: 1px solid var(--color-border);
  border-radius: 10px; background: var(--color-surface); }
.sc-bar label { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.sc-bar select, .sc-bar input { font-size: .95rem; padding: .35rem .5rem; text-transform: none;
  letter-spacing: 0; border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-bg); color: var(--color-text); }
.sc-bar input[type=number] { width: 6.5rem; }
.sc-bar #sc-book { min-width: 12rem; } .sc-bar #sc-publication { max-width: 17rem; }
.sc-bar button, .sc-dl { align-self: flex-end; padding: .4rem .8rem; border-radius: 6px;
  border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text);
  font-size: .9rem; cursor: pointer; text-decoration: none; }
.sc-chartwrap { margin: 0 0 1.5rem; }
#sc-chart { width: 100%; height: auto; display: block; border: 1px solid var(--color-border);
  border-radius: 10px; background: var(--color-surface); }
#sc-cap { font-size: .88rem; color: var(--color-text-muted); margin-top: .5rem; }
.sc-lists h2 { font-size: 1rem; margin-bottom: .6rem; }
.sc-lists select { font-size: .95rem; }
#sc-top { columns: 2; column-gap: 2.5rem; padding-left: 1.2rem; }
#sc-top li { margin: .15rem 0; break-inside: avoid; }
#sc-top span { color: var(--color-text-muted); }
.sc-note { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--color-border);
  font-size: .85rem; color: var(--color-text-muted); line-height: 1.55; }
@media (max-width: 640px) { #sc-top { columns: 1; } .sc-bar { gap: .6rem .8rem; } }

/* the year range is two inputs in one control; without this the label and the second field
   wrapped onto separate rows */
.sc-years span { display: inline-flex; align-items: center; gap: .4rem; }
.sc-years em { font-style: normal; text-transform: none; letter-spacing: 0; }
.sc-years input { width: 5.5rem; }

/* hover readout — positioned against the chart figure, which must therefore be a containing block */
.sc-chartwrap { position: relative; }
#sc-chart { cursor: crosshair; }
.sc-tip { position: absolute; pointer-events: none; z-index: 5;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.16); padding: .45rem .65rem;
  font-size: .95rem; line-height: 1.35; white-space: nowrap; }
.sc-tip b { display: block; font-size: .9rem; }
.sc-tip span { color: var(--color-text-muted); }

#sc-more { margin-top: .8rem; padding: .45rem .9rem; border-radius: 6px;
  border: 1px solid var(--color-border); background: var(--color-bg);
  color: var(--color-text); font-size: .9rem; cursor: pointer; }
#sc-more:hover { background: var(--color-surface); }
#sc-more:disabled { opacity: .55; cursor: default; }

/* ---- view switch + themes ---- */
.sc-views { display: flex; gap: .5rem; margin: 0 0 1rem; }
.sc-view { padding: .5rem 1rem; border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-bg); color: var(--color-text); font-size: .95rem; cursor: pointer; }
.sc-view.on { background: #c9a227; border-color: #c9a227; color: #14202e; font-weight: 600; }
.sc-themeintro { font-size: .95rem; margin: 0 0 .7rem; opacity: .9; }
#sc-preset { margin-left: .4rem; padding: .25rem .6rem; border: 1px solid #c9a227;
  border-radius: 5px; background: transparent; color: inherit; font-size: .85rem; cursor: pointer; }
#sc-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .7rem; }
.sc-chip { padding: .35rem .7rem; border: 1px solid var(--color-border); border-radius: 999px;
  background: var(--color-bg); color: var(--color-text); font-size: .85rem; cursor: pointer;
  opacity: .55; }
.sc-chip.on { opacity: 1; border-color: var(--c); box-shadow: inset 3px 0 0 var(--c); }
.sc-chip span { opacity: .6; font-variant-numeric: tabular-nums; }
#sc-verses { font-size: .82rem; line-height: 1.6; margin-bottom: .7rem; }
.sc-vlist { margin-bottom: .3rem; }
.sc-vlist b { margin-right: .35rem; }
.sc-vlist a { color: inherit; opacity: .75; text-decoration: none; border-bottom: 1px dotted; }
.sc-vlist a:hover { opacity: 1; }
.sc-lock { font-size: .85rem; opacity: .8; margin: 0 0 1rem; }
.sc-lock label { margin-left: .5rem; white-space: nowrap; }
/* the theme tooltip stacks one line per theme, each in its own colour */
.sc-tip.multi span { display: block; color: inherit; }
/* the [hidden] attribute loses to the bar's own display rule, so the passage-only controls
   stayed on screen in the themes view until this */
.sc-bar label[hidden], .sc-bar a[hidden], .sc-lists[hidden] { display: none !important; }