/* spec.css — rules used only by the Raku++ Specification.
   Everything shared with the rest of raku.online lives in base.css;
   this file is loaded after it, on spec pages only. */

/* ---- dashboard -------------------------------------------------------- */
/* Series colors validated (CVD + contrast) for both surfaces; the Rakudo
   reference line is muted ink, dashed — a baseline, not a competitor. */
:root {
  --dash-s1:  #2a78d6;   /* interpreter / primary metric */
  --dash-s2:  #1baf7a;   /* native --exe / secondary metric */
  --dash-ref: #898781;   /* Rakudo reference */
  --dash-ok:    #2da44e;  /* all three agree      (matches .dot.st-full) */
  --dash-bad:   #e5534b;  /* Raku++ is wrong      (matches .dot.st-div)  */
  --dash-drift: #d4a72c;  /* documentation stale  (matches .dot.st-part) */
  --dash-rdif:  #8250df;  /* Rakudo is the outlier */
  --dash-human: #9aa0ad;  /* needs a human        (matches .dot.st-ni)   */
}

.dash-chart { margin: .6rem 0 1.6rem; }

.dash-svg { width: 100%; height: auto; display: block; }

.dash-grid  { stroke: var(--border); stroke-width: 1; }

.dash-cross { stroke: var(--muted);  stroke-width: 1; stroke-dasharray: 3 3; }

.dash-tick  { fill: var(--muted); font-size: 11px; }

.dash-line  { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

.dash-line.dashed { stroke-dasharray: 5 4; }

.s1   { stroke: var(--dash-s1); }

.s2   { stroke: var(--dash-s2); }

.sref { stroke: var(--dash-ref); }

/* Conformance verdicts — the same reading as the dots on the conformance page:
   green agrees, red is ours to fix, amber/grey are not. */
.sok  { stroke: var(--dash-ok); }

.sbad { stroke: var(--dash-bad); }

.sdrift { stroke: var(--dash-drift); }

.srdif  { stroke: var(--dash-rdif); }

.shuman { stroke: var(--dash-human); }

/* Dots after the series classes so their fill + surface ring win the cascade
   (paths must stay fill:none — a filled line path renders as a wedge). */
.dash-dot { stroke: var(--bg); stroke-width: 1.5; }

.dash-dot.s1   { fill: var(--dash-s1); }

.dash-dot.s2   { fill: var(--dash-s2); }

.dash-dot.sref { fill: var(--dash-ref); }

.dash-dot.sok    { fill: var(--dash-ok); }

.dash-dot.sbad   { fill: var(--dash-bad); }

.dash-dot.sdrift { fill: var(--dash-drift); }

.dash-dot.srdif  { fill: var(--dash-rdif); }

.dash-dot.shuman { fill: var(--dash-human); }

.dash-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .2rem 0 .3rem; }

.dash-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted); }

.dash-swatch {
  display: inline-block; width: 14px; height: 3px; border-radius: 2px;
  background: currentColor;
}

.dash-swatch.s1 { background: var(--dash-s1); }

.dash-swatch.s2 { background: var(--dash-s2); }

.dash-swatch.sref { background: var(--dash-ref); }

.dash-swatch.sok    { background: var(--dash-ok); }

.dash-swatch.sbad   { background: var(--dash-bad); }

.dash-swatch.sdrift { background: var(--dash-drift); }

.dash-swatch.srdif  { background: var(--dash-rdif); }

.dash-swatch.shuman { background: var(--dash-human); }

.dash-swatch.dashed {
  background: repeating-linear-gradient(90deg, var(--dash-ref) 0 4px, transparent 4px 7px);
}

.dash-tip {
  position: absolute; z-index: 40; pointer-events: none;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: .45rem .65rem; font-size: .8rem; color: var(--fg);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

.dash-tip-head { font-weight: 700; margin-bottom: .25rem; }

.dash-tip-row { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }

.dash-note { color: var(--muted); font-size: .9rem; }

.dash-table { margin: .1rem 0 1.6rem; }

.dash-table > summary { cursor: pointer; color: var(--muted); font-size: .82rem; user-select: none; }

.dash-table > summary:hover { color: var(--accent); }

.dash-table table { font-size: .82rem; margin-top: .5rem; }

.dash-table td, .dash-table th { font-variant-numeric: tabular-nums; }

.dash-bench {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.dash-bench-card { min-width: 0; }

.dash-bench-title { font-weight: 700; margin-bottom: .1rem; font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: .9rem; }

.dash-card-title { font-weight: 700; margin-bottom: .1rem; font-size: .9rem; }

.dash-bench .dash-chart { margin-bottom: .4rem; }

.dash-bench .dash-table { margin-top: 0; }

/* Cross-links at the foot of the sidebar (to the Rules site). */
.nav-extra {
  display: flex; flex-direction: column; gap: .1rem;
  margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--border);
}

.nav-extra a { font-size: .82rem; padding: .2rem .5rem; color: var(--muted); }

.nav-extra a:hover { color: var(--accent); }

/* ---- site switcher ------------------------------------------------------
   Two sites share this sidebar, so the header names both and marks which one
   you are in. It replaces the single brand badge: the way back is a click on a
   thing that is always there, not a link at the bottom of the page. */
.brandbar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}

.wordmark {
  font-weight: 700; font-size: 1.15rem; color: var(--fg); letter-spacing: -0.01em;
}

.siteswitch {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--code-bg); border-radius: 7px;
}

.siteswitch .sw {
  display: inline-block; padding: .1rem .5rem; border-radius: 5px;
  font-size: .78rem; font-weight: 600; color: var(--muted);
  text-decoration: none; line-height: 1.5;
}

.siteswitch .sw:hover { color: var(--fg); text-decoration: none; }

.siteswitch .sw.active {
  background: var(--accent); color: var(--accent-fg);
}