/* Shared styling for the book's live charts. Design-system tokens only
   (design-system/tokens.css): blue #2769c6, gold #d08700, ink #333,
   muted #7e888b, hairline #e5e5e5, radius 0.625rem. */
:root {
  --ink: #333333; --muted: #7e888b; --border: #e5e5e5;
  --blue: #2769c6; --gold: #d08700;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 14px; background: #fff; color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

.topbar { display: flex; justify-content: space-between; align-items: center;
          gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chips .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
              text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.chip { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em;
        text-transform: uppercase; color: var(--muted); background: #fff;
        border: 1px solid var(--border); border-radius: 999px;
        padding: 4px 12px; cursor: pointer; }
.chip:hover { color: var(--blue); border-color: var(--blue); }
.chip.active { color: var(--blue); border-color: var(--blue); background: #f0f6ff; }

.hint { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.5;
        border-left: 3px solid var(--gold); padding-left: 10px; }

/* ---- chart ---- */
.cvchart-host { border: 1px solid var(--border); border-radius: 10px;
                padding: 6px 6px 10px; }
/* The canvas is absolutely positioned so it never feeds back into the
   wrapper's height: in normal flow JS sets the wrapper's height, and in
   full screen the flex column sets it. Either way the canvas just fills. */
.cvchart-wrap { position: relative; }
.cvchart-canvas { position: absolute; inset: 0; display: block;
                  width: 100%; height: 100%; }
.cvchart-canvas:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.cvchart-tip {
  position: absolute; display: none; pointer-events: none; z-index: 5;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  padding: 8px 10px; min-width: 148px; max-width: 280px;
}
.cvchart-tip-title { font-family: var(--mono); font-size: 11.5px; color: var(--ink);
                     font-weight: 600; margin-bottom: 5px; }
.cvchart-tip-row { display: flex; align-items: baseline; gap: 6px;
                   font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
                   font-variant-numeric: tabular-nums; }
/* a short stroke keys the series — a filled box is data-weight ink here */
.cvchart-tip-key { width: 10px; height: 2px; border-radius: 1px;
                   flex: 0 0 auto; transform: translateY(-3px); }
.cvchart-tip-val { color: var(--ink); font-weight: 600; }
.cvchart-tip-lab { color: var(--muted); }
.cvchart-tip-note { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border);
                    font-size: 11px; line-height: 1.45; color: var(--muted);
                    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

.cvchart-legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
                  margin-top: 8px; padding-left: 6px;
                  font-family: var(--mono); font-size: 11px; color: var(--ink); }
.cvchart-key { display: inline-flex; align-items: center; gap: 6px; }
.cvchart-key-line { width: 16px; height: 2px; border-radius: 1px; }
.cvchart-tablebtn { margin-left: auto; font-family: var(--mono); font-size: 10.5px;
                    letter-spacing: 0.04em; text-transform: uppercase;
                    color: var(--muted); background: #fff; cursor: pointer;
                    border: 1px solid var(--border); border-radius: 999px;
                    padding: 4px 12px; }
.cvchart-tablebtn:hover { color: var(--blue); border-color: var(--blue); }

.cvchart-table { margin-top: 10px; max-height: 260px; overflow: auto; }
.cvchart-table table { border-collapse: collapse; width: 100%;
                       font-family: var(--mono); font-size: 11.5px;
                       font-variant-numeric: tabular-nums; }
.cvchart-table caption { caption-side: top; text-align: left; color: var(--muted);
                         font-size: 11px; padding: 0 0 6px 2px; }
.cvchart-table th, .cvchart-table td { text-align: right; padding: 3px 8px;
                                       border-bottom: 1px solid var(--border);
                                       white-space: nowrap; }
.cvchart-table th:first-child, .cvchart-table td:first-child { text-align: left; }
.cvchart-table th { color: var(--muted); font-weight: 400; position: sticky; top: 0;
                    background: #fff; }

/* Presentation mode: letterbox, never overflow (docs/widgets.md section 2). */
:fullscreen body { padding: 18px; height: 100vh; display: flex; flex-direction: column; }
:fullscreen .hint { display: none; }
:fullscreen .cvchart-table { display: none; }
:fullscreen #stage { flex: 1 1 auto; min-height: 0; display: flex; }
:fullscreen .cvchart-host { flex: 1 1 auto; display: flex; flex-direction: column;
                            min-height: 0; }
:fullscreen .cvchart-wrap { flex: 1 1 auto; min-height: 0; }