/* Opening dashboard: house tokens (python/make_figs.py palette). Light only,
   like the site theme (ember.scss / litera). */
:root {
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --surface: #ffffff;
  --surface-2: #f6f5f1;
  --c-white: #2a78d6;   /* W, White */
  --c-black: #eb6834;   /* B, Black */
  --c-reach: #1baf7a;   /* true reach */
  --c-prod: #52514e;    /* W x B, gray dashed */
}

body { background: var(--surface); color: var(--ink); }
/* width + min-width: auto margins on a Quarto page-grid item would otherwise
   size main to its content (the search table's ~620px min-content), so phones
   laid the page out at ~640px and zoomed out. Wide tables scroll instead.
   (Adopted from the site session's fix, davidnield.github.io 6060b0d.) */
main.content { max-width: 1180px; margin: 0 auto; width: 100%; min-width: 0; }
main.content form:has(> table) { max-width: 100%; overflow-x: auto; }
@media (max-width: 767.98px) {
  table.dash-path { display: block; overflow-x: auto; }
}

/* search box: on narrow screens the input takes the full width and the
   "N results" count wraps onto its own line */
.dash-picker form:not(:has(> table)) { max-width: 100%; }
@media (max-width: 767.98px) {
  .dash-picker form:not(:has(> table)),
  .dash-picker form:not(:has(> table)) > div { display: flex; flex-wrap: wrap; width: 100% !important; }
  .dash-picker form:not(:has(> table)) input[type="search"] { width: 100% !important; max-width: 100%; flex: 1 1 100%; }
  .dash-picker form:not(:has(> table)) output { flex: 1 1 100%; margin: 0.15rem 0 0; }
}

.dash-lede { color: var(--ink-2); max-width: 70ch; }

.dash-picker table { font-size: 0.9rem; }
.dash-chosen { font-size: 1.35rem; font-weight: 700; color: var(--ink); margin: 0.25rem 0 0; }
.dash-chosen .eco { color: var(--muted); font-weight: 400; margin-right: 0.4rem; }
.dash-moves { font-family: "Fira Code", ui-monospace, monospace; color: var(--ink-2); font-size: 0.95rem; }

.dash-panel { border-top: 1px solid var(--grid); padding-top: 1rem; margin-top: 1.5rem; }
.dash-panel h2 { font-size: 1.25rem; margin: 0 0 0.25rem; border: none; }
.dash-sub { color: var(--ink-2); margin: 0 0 0.5rem; max-width: 75ch; }
.dash-note { color: var(--muted); font-size: 0.8rem; margin-top: 0.25rem; }
.dash-copy { color: var(--ink-2); font-size: 0.92rem; max-width: 75ch; }

.dash-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.85rem; color: var(--ink-2); margin: 0.25rem 0; }
.dash-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.dash-key { display: inline-block; width: 18px; height: 0; border-top: 2px solid; }
.dash-key.dashed { border-top-style: dashed; }
.dash-key.box { width: 12px; height: 12px; border: none; border-radius: 2px; }

.dash-tiles { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.5rem 0 0.75rem; }
.dash-tile { background: var(--surface-2); border-radius: 6px; padding: 0.6rem 0.9rem; min-width: 12rem; flex: 1 1 12rem; }
.dash-tile .k { font-size: 0.8rem; color: var(--ink-2); display: flex; align-items: center; gap: 0.4rem; }
.dash-tile .v { font-size: 1.6rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.dash-tile .s { font-size: 0.78rem; color: var(--muted); }

table.dash-path { border-collapse: collapse; font-size: 0.9rem; width: 100%; max-width: 760px; }
table.dash-path th { text-align: left; color: var(--ink-2); font-weight: 700; border-bottom: 1px solid var(--grid); padding: 0.25rem 0.5rem; }
table.dash-path td { padding: 0.2rem 0.5rem; border-bottom: 1px solid var(--surface-2); font-variant-numeric: tabular-nums; }
table.dash-path td.num { text-align: right; }
table.dash-path tr.rare td { background: #fff4ec; }
.dash-bar { display: inline-block; height: 8px; border-radius: 0 4px 4px 0; vertical-align: middle; }
.dash-gap { color: var(--muted); }

/* ---- v1.1: filters row, board + explorer, compact dropdowns ---- */
.dash-filters { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center;
  border-bottom: 1px solid var(--grid); padding: 0.5rem 0 0.75rem; margin-bottom: 1rem; }
.dash-filters > .cell { margin: 0; }
.dash-filters form { width: auto !important; max-width: none; margin: 0 !important; }
.dash-filters form > label:first-child { width: auto; font-weight: 700; color: var(--ink-2); margin-right: 0.5rem; }
.dash-filters form select { width: auto; }
.dash-filters .observablehq > div { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; }

.ms { position: relative; display: inline-block; }
.ms-btn { font: inherit; font-weight: 700; color: var(--ink-2); background: var(--surface); border: 1px solid #c9c8c0;
  border-radius: 4px; padding: 0.2rem 0.6rem; cursor: pointer; white-space: nowrap; }
.ms-btn:hover { border-color: var(--ink-2); }
.ms-menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 12rem; background: var(--surface);
  border: 1px solid #c9c8c0; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 0.4rem 0.6rem; }
.ms-menu label { display: block; white-space: nowrap; padding: 0.1rem 0; cursor: pointer; font-weight: 400; }
.ms-tools { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--grid); padding-bottom: 0.3rem; margin-bottom: 0.3rem; }
.ms-tools button { font: inherit; font-size: 0.85rem; background: none; border: none; color: var(--c-white); cursor: pointer; padding: 0; }

.dash-explorer { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 1.25rem 2rem; align-items: start; margin-bottom: 1rem; }
@media (max-width: 991.98px) { .dash-explorer { grid-template-columns: minmax(0, 1fr); } }
.dash-board-col, .dash-table-col { min-width: 0; }

.cb { width: 100%; max-width: 480px; }
.cb-board svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; border-radius: 3px; outline: none; }
/* board: Lichess's default brown theme (colours only; no lila board images) */
.cb-light { fill: #f0d9b5; } .cb-dark { fill: #b58863; }
.cb-last { fill: rgba(155, 199, 0, .41); } .cb-sel { fill: rgba(20, 85, 30, .5); }
.cb-hint { fill: rgba(20, 85, 30, .5); } .cb-hint-cap { fill: none; stroke: rgba(20, 85, 30, .5); stroke-width: .08; }
.cb-coord { font-size: .2px; font-family: sans-serif; font-weight: 700; } .cb-coord.on-light { fill: #b58863; } .cb-coord.on-dark { fill: #f0d9b5; }
.cb-piece { cursor: grab; }
.cb-dragging { pointer-events: none; cursor: grabbing; }
.cb-dim { fill: rgba(250, 250, 250, .7); }
.cb-promo { cursor: pointer; }
.cb-promo-bg { fill: #b0b0b0; } .cb-promo:hover .cb-promo-bg { fill: #d64f00; }
.cb-bar { display: flex; gap: 0.3rem; margin: 0.4rem 0; flex-wrap: wrap; }
.cb-bar button { font: inherit; line-height: 1.4; color: var(--ink); background: var(--surface-2); border: 1px solid #c9c8c0; border-radius: 4px; padding: 0.1rem 0.7rem; cursor: pointer; }
.cb-bar button:hover:not(:disabled) { border-color: var(--ink-2); background: #ecebe5; }
.cb-bar button:disabled { color: var(--ink); opacity: .35; cursor: default; }
.cb-moves { font-family: "Fira Code", ui-monospace, monospace; font-size: 0.9rem; line-height: 1.8; }
.cb-num { color: var(--muted); margin: 0 0.2rem 0 0.4rem; }
.cb-mv { font: inherit; background: none; border: none; padding: 0 0.15rem; cursor: pointer; color: var(--ink); border-radius: 3px; }
.cb-mv.cur { background: #e4eefb; font-weight: 700; } .cb-mv.future { color: var(--muted); }
.cb-empty { color: var(--muted); font-family: inherit; }

.dash-after { color: var(--muted); font-weight: 400; font-size: 1rem; }
.dash-off { background: #fff4ec; border-left: 3px solid var(--c-black); padding: 0.4rem 0.6rem; margin: 0.5rem 0; font-size: 0.9rem; color: var(--ink-2); }
.dash-off.back { background: #eef7f2; border-left-color: var(--c-reach); }
.dash-link { font: inherit; background: none; border: none; padding: 0; color: var(--c-white); text-decoration: underline; cursor: pointer; }
.dash-callout { background: var(--surface-2); padding: 0.6rem 0.8rem; border-radius: 6px; color: var(--ink-2); }
.dash-h3 { font-size: 1.05rem; margin: 0.5rem 0 0.25rem; color: var(--ink-2); }

table.dash-ex { border-collapse: collapse; font-size: 0.9rem; width: 100%; margin-top: 0.5rem; }
table.dash-ex th { text-align: left; color: var(--ink-2); font-weight: 700; border-bottom: 1px solid var(--grid); padding: 0.2rem 0.4rem; }
table.dash-ex td { padding: 0.15rem 0.4rem; border-bottom: 1px solid var(--surface-2); font-variant-numeric: tabular-nums; }
table.dash-ex td.num, table.dash-ex th.num { text-align: right; }
table.dash-ex tr.other td { color: var(--muted); }
.dash-mv { font-family: "Fira Code", ui-monospace, monospace; background: none; border: none; padding: 0; color: var(--c-white); cursor: pointer; }
.dash-mv:hover { text-decoration: underline; }
.dash-wdl { display: flex; width: 100%; min-width: 90px; height: 16px; border-radius: 3px; overflow: hidden; font-size: 10px; line-height: 16px; }
.dash-wdl span { display: block; text-align: center; overflow: hidden; white-space: nowrap; }
.dash-wdl .w { background: #ffffff; color: #333; box-shadow: inset 0 0 0 1px #c9c8c0; }
.dash-wdl .d { background: #b9b8b0; color: #222; }
.dash-wdl .b { background: #2b2b2b; color: #eee; }
.dash-wdl.empty { background: var(--surface-2); }

/* ---- v1.4: one-button PNG export, top-right of each chart ---- */
.dash-chart { position: relative; }
.dash-dl { position: absolute; top: 0; right: 0; z-index: 2; display: inline-flex; align-items: center; gap: 0.3rem;
  font: inherit; font-size: 0.78rem; line-height: 1; color: var(--ink-2); background: rgba(255, 255, 255, .9);
  border: 1px solid #d3d2ca; border-radius: 4px; padding: 0.25rem 0.45rem; cursor: pointer; }
.dash-dl:hover { color: var(--ink); border-color: var(--ink-2); }
.dash-dl:focus-visible { outline: 2px solid var(--c-white); outline-offset: 1px; }
.dash-dl:disabled { opacity: .5; cursor: progress; }
@media (max-width: 575.98px) {
  .dash-dl span { display: none; }   /* icon only on phones; the aria-label still names it */
  .dash-dl { padding: 0.3rem; }
}