/* bzhchart — house styling for the interactive charts. Project-local classes
   only; no shared bzh.css class is restyled. Text colours follow the same rule
   as the rest of the site: --paper-dim for anything read, --muted for marks. */

.bzc{border:1px solid var(--line);background:var(--panel);
  border-radius:var(--radius-card,10px);overflow:hidden}
.bzc-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;
  padding:9px 11px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.bzc-ctl,.bzc-save{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.bzc-head button{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.03em;padding:4px 9px;border:1px solid var(--line);background:var(--panel);
  color:var(--paper-dim);border-radius:var(--radius-sm,6px);cursor:pointer;transition:.12s;
  white-space:nowrap}
.bzc-head button:hover{border-color:var(--teal);color:var(--paper)}
.bzc-head button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.bzc-head button.on{border-color:var(--gold);color:var(--gold)}
.bzc-save button{color:var(--paper-dim)}
.bzc-save button:hover{border-color:var(--gold);color:var(--gold)}

.bzc-body{position:relative}
.bzc-svg{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none}

.bzc-readout{display:none;position:absolute;top:10px;pointer-events:none;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-sm,6px);
  padding:7px 9px;font-size:11.5px;line-height:1.5;color:var(--paper-dim);
  box-shadow:0 6px 22px rgba(0,0,0,.45);min-width:132px;z-index:2}
.bzc-readout b{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px;color:var(--paper);margin-bottom:4px;letter-spacing:.03em}
.bzc-readout div{display:flex;align-items:center;gap:6px}
.bzc-readout i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.bzc-readout span{margin-left:auto;font-family:'IBM Plex Mono',ui-monospace,monospace;
  color:var(--paper);white-space:nowrap}

.bzc-foot{padding:8px 11px 10px;border-top:1px solid var(--line);background:var(--panel-2)}
.bzc-legend{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.bzc-key{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Sans',sans-serif;
  font-size:11.5px;color:var(--paper-dim);background:none;border:1px solid transparent;
  padding:3px 7px;border-radius:var(--radius-sm,6px);cursor:pointer}
.bzc-key:hover{border-color:var(--line);color:var(--paper)}
.bzc-key i{width:11px;height:3px;border-radius:2px;flex:0 0 auto}
.bzc-key.off{opacity:.42;text-decoration:line-through}
/* year swatches: square chips, so a colour ramp reads as a ramp */
.bzc-key.bzc-year{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;
  gap:5px;padding:3px 6px}
.bzc-key.bzc-year i{width:9px;height:9px;border-radius:2px}
.bzc-key-note{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.04em;color:var(--paper-dim);margin-left:4px}
.bzc-src{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.03em;color:var(--paper-dim);margin-top:6px;line-height:1.55}

/* the gallery: one card per exhibit */
.exh{margin:0 0 18px}
.exh-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 7px}
.exh-head .tag{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.exh-head h3{margin:0;font-size:15.5px;color:var(--paper);font-weight:600}
.exh p.cap{margin:7px 0 0;font-size:13px;line-height:1.6;color:var(--paper-dim);max-width:92ch}

.chart-stack{display:grid;gap:20px;margin-top:14px}
@media(min-width:1180px){.chart-stack.two{grid-template-columns:1fr 1fr}}

.data-note{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.03em;color:var(--paper-dim)}
.data-note .pill{border:1px solid var(--line);background:var(--panel-2);
  border-radius:999px;padding:3px 10px}
.data-note button{font-family:inherit;font-size:10.5px;padding:4px 10px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--paper-dim);
  border-radius:var(--radius-sm,6px);cursor:pointer;transition:.12s}
.data-note button:hover{border-color:var(--teal);color:var(--paper)}
.data-note button[disabled]{opacity:.5;cursor:default}
.data-note .ok{color:var(--teal)}
.data-note .warn{color:var(--gold)}

@media print{.bzc-head,.bzc-legend,.data-note{display:none}}