/* The parts the Computer Science challenge pages share (cs-challenge.js): the bar with the question picker
   and the score chip, the question's source tag, and the panels' headings. Theme tokens only. */

.rp-main{gap:10px}
.ch-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:none}
.ch-bar label{font:600 12px/1 var(--font-display);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ch-bar select{font:600 14px/1.3 var(--font-body);color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:5px;padding:7px 9px;max-width:min(100%, 440px);cursor:pointer}
.ch-bar select:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.ch-done{font-size:13px;color:var(--muted)}
.score-chip{margin-left:auto;font:600 13px/1 var(--font-mono);background:var(--panel);border:1px solid var(--line-strong);padding:7px 12px;border-radius:999px;color:var(--ink-soft);white-space:nowrap}
.score-chip strong{color:var(--ink)}
.source-tag{display:inline-block;font:12px/1.4 var(--font-mono);color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:2px 8px;margin-bottom:4px}
/* these pages' panel headings sit a little tighter, with space under them */
.panel h2{margin:0 0 8px;line-height:1}

@media (max-width:900px),(max-height:620px){
  .score-chip{margin-left:0}
}
@media (max-width:560px){
  .ch-bar select{width:100%}
}

/* the E-R diagram (CsChallenge.erd: Normal Form or Not, Schema Architect): a navy blueprint in both themes, from the
   fixed brand and display colours */
figure.erd{
  --erd-bg:var(--brand-navy);--erd-bg2:color-mix(in srgb, var(--brand-navy) 85%, var(--brand-blue));
  --erd-line:color-mix(in srgb, var(--neon-cyan) 55%, var(--screen-ink));--erd-line-strong:var(--screen-ink);
  --erd-pk:color-mix(in srgb, var(--neon-amber) 70%, var(--screen-ink));--erd-fk:var(--screen-muted);
  margin:0;border-radius:5px;overflow:hidden;border:1px solid var(--line-strong);background:var(--erd-bg)
}
figure.erd .erd-scroll{overflow-x:auto}
figure.erd svg{display:block;width:100%;height:auto;min-width:min(100%, 520px)}
figure.erd figcaption{padding:8px 12px;font-size:12.5px;color:var(--ink-soft);background:var(--panel);border-top:1px solid var(--line)}
.erd-link{stroke:var(--erd-line);stroke-width:1.6;fill:none}
.erd-box{fill:var(--erd-bg2);stroke:var(--erd-line-strong);stroke-width:1.2}
.erd-head{fill:var(--erd-line-strong)}
.erd-name{fill:var(--erd-bg)}
.erd-attr{fill:var(--erd-line)}
.erd-attr.pk{fill:var(--erd-pk)}
.erd-attr.fk{fill:var(--erd-fk)}