/* The connection board: cork, pinned cards, and string whose weight says what the evidence is.
   Strings live in an SVG layer; cards are HTML on top, so logos, links and screen readers all behave. */

.bd-modal{border:0;padding:0;width:98vw;max-width:98vw;max-height:96vh;background:transparent}
.bd-modal::backdrop{background:rgba(12,9,6,.72)}
.bd-shell{background:var(--surface,#fff);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;max-height:96vh}
/* above the fold-out width the shell takes a definite height, so the scroll area has room to give the
   board and the board is not left sizing the box that is meant to size it */
@media (min-width:901px){ .bd-shell{height:96vh} }
.bd-bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:12px 16px;
  border-bottom:1px solid var(--rule,#ddd);background:var(--surface,#fff)}
.bd-bar h2{font-family:var(--f-display,Georgia,serif);font-size:18px;margin:0;flex:1 1 auto}
.bd-bar button,.bd-bar select{font:inherit;font-size:13px;padding:5px 10px;border:1px solid var(--rule,#ccc);
  border-radius:3px;background:var(--surface,#fff);color:var(--ink,#222);cursor:pointer}
.bd-close{font-weight:600}
.bd-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted,#666);align-items:center}
.bd-legend i{display:inline-block;width:26px;height:0;border-top-width:2.5px;margin-right:5px;vertical-align:middle}
.bd-legend .k-filed i{border-top-style:solid;border-top-color:#c8102e}
.bd-legend .k-reported i{border-top-style:dashed;border-top-color:#c07a12}
.bd-legend .k-inferred i{border-top-style:dotted;border-top-color:#8a8a8a}

.bd-scroll{overflow:auto;-webkit-overflow-scrolling:touch;display:flex;justify-content:center;align-items:center;flex:1 1 auto;min-height:0}
.bd-fit{position:relative}
.bd-fit .bd-cork{transform:scale(var(--bd-scale,1));transform-origin:top left}
.bd-cork{position:relative;width:1240px;height:860px;
  background-color:#c9a271;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(120,80,40,.30) 0 2px, transparent 3px),
    radial-gradient(circle at 63% 41%, rgba(120,80,40,.24) 0 2px, transparent 3px),
    radial-gradient(circle at 31% 77%, rgba(140,95,50,.26) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 66%, rgba(110,72,36,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 8%,  rgba(150,105,60,.20) 0 2px, transparent 3px),
    radial-gradient(circle at 8% 52%,  rgba(120,80,40,.20) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 12%, rgba(130,88,45,.22) 0 2px, transparent 3px),
    linear-gradient(158deg,#cfa877,#c09a68 45%,#c8a171);
  box-shadow:inset 0 0 90px rgba(80,50,20,.38);
}
.bd-strings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* thread has to carry against a textured brown ground: heavier stroke, a dark drop so it lifts off
   the cork, and colours picked for contrast rather than for the palette */
.bd-strings path{fill:none;stroke-linecap:round}
.bd-strings .thread{filter:drop-shadow(0 1.5px 1px rgba(45,25,8,.55))}
.bd-strings .s-filed{stroke:#c8102e;stroke-width:3.4}
.bd-strings .s-reported{stroke:#e08a1e;stroke-width:3.2;stroke-dasharray:11 7}
.bd-strings .s-inferred{stroke:#f2ece2;stroke-width:2.8;stroke-dasharray:2 7;opacity:.92}
.bd-strings .hit{stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:pointer}
.bd-strings g.on path.thread{stroke-width:5.5}
.bd-strings g.dim{opacity:.13}

.bd-card{position:absolute;width:184px;box-sizing:border-box;padding:9px 10px 10px;
  background:#fffdf6;border:1px solid rgba(70,45,20,.30);border-radius:2px;
  box-shadow:0 5px 12px rgba(60,38,14,.34),0 1px 0 rgba(255,255,255,.7) inset;
  font-family:var(--f-body,system-ui,sans-serif);cursor:pointer}
.bd-card:focus-visible{outline:3px solid #1E6FB8;outline-offset:2px}
.bd-card.t-manila{background:#f7e3b4}
.bd-card.t-blue{background:#dde9f6}
.bd-card.t-green{background:#dcecd6}
.bd-card.t-kraft{background:#dcc49a}
.bd-card .pin{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:15px;height:15px;
  border-radius:50%;background:radial-gradient(circle at 32% 30%,#f06a5c,#a3241a 70%);
  box-shadow:0 2px 3px rgba(0,0,0,.42)}
.bd-card .nm{font-family:var(--f-display,Georgia,serif);font-weight:600;font-size:13.5px;line-height:1.22;margin:2px 0 3px}
.bd-card .sb{font-size:10.5px;line-height:1.32;color:#5a4a33}
.bd-card img{display:block;max-width:100%;max-height:34px;object-fit:contain;margin:1px 0 5px}
.bd-card.on{outline:2.5px solid #a8322a;outline-offset:1px}
.bd-card.dim{opacity:.3}

/* the panel that opens when a string or card is chosen */
.bd-note{padding:12px 16px;border-top:1px solid var(--rule,#ddd);background:var(--surface,#fff);font-size:14px;min-height:66px}
.bd-note .k{display:inline-block;font-family:var(--f-mono,ui-monospace,monospace);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 7px;border-radius:2px;margin-right:9px;vertical-align:2px}
.bd-note .k-filed{background:#f6e3e1;color:#8b2b23}
.bd-note .k-reported{background:#f8ecd9;color:#8a5716}
.bd-note .k-inferred{background:#eee;color:#555}
.bd-note .ln{color:var(--muted,#666);font-size:12.5px;margin:5px 0 0}
.bd-note a{color:var(--accent,#1E6FB8)}
.bd-hint{color:var(--muted,#777);font-size:13px}

/* the same facts, as a list — this is what mobile and screen readers get */
.bd-list{padding:4px 16px 18px}
.bd-list h3{font-family:var(--f-display,Georgia,serif);font-size:15px;margin:16px 0 6px}
.bd-list ul{margin:0;padding-left:18px}
.bd-list li{font-size:13.5px;line-height:1.5;margin:0 0 5px}
.bd-list .k{font-family:var(--f-mono,ui-monospace,monospace);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted,#666);margin-right:6px}

@media (max-width:900px){
  .bd-scroll{display:none}                     /* a node-link board is unusable at this width */
  .bd-note{display:none}
  .bd-modal{width:96vw}
}
@media (min-width:901px){ .bd-list{display:none} }

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bd-card{background:#f3ead6;color:#241a0e}
  :root:not([data-theme="light"]) .bd-card .sb{color:#5c4a31}
  :root:not([data-theme="light"]) .bd-note .k-inferred{background:#33302c;color:#c9c4bd}
}
:root[data-theme="dark"] .bd-card{background:#f3ead6;color:#241a0e}
:root[data-theme="dark"] .bd-card .sb{color:#5c4a31}
:root[data-theme="dark"] .bd-note .k-inferred{background:#33302c;color:#c9c4bd}

@media print{ .bd-modal{display:none} }
@media (prefers-reduced-motion:reduce){ .bd-card,.bd-strings path{transition:none!important} }


/* --- the controls row: the scrubber is the feature, so it gets room --- */
.bd-controls{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;
  padding:9px 16px;border-bottom:1px solid var(--rule,#ddd);background:var(--surface-sunk,#faf8f4)}
.bd-controls .grp{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted,#666)}
.bd-controls .grp>b{font-weight:600;color:var(--ink,#222);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.bd-when{flex:0 1 560px;max-width:560px;min-width:280px;display:flex;align-items:center;gap:12px}
.bd-when output{font-family:var(--f-display,Georgia,serif);font-size:15px;color:var(--ink,#222);
  min-width:14ch;font-weight:600}
input[type=range].bd-range{-webkit-appearance:none;appearance:none;flex:1 1 auto;height:26px;background:transparent;cursor:pointer}
input[type=range].bd-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(90deg,#c8102e 0%,#c8102e var(--pct,100%),var(--rule,#d8d2c8) var(--pct,100%),var(--rule,#d8d2c8) 100%)}
input[type=range].bd-range::-moz-range-track{height:6px;border-radius:3px;background:var(--rule,#d8d2c8)}
input[type=range].bd-range::-moz-range-progress{height:6px;border-radius:3px;background:#c8102e}
input[type=range].bd-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#f06a5c,#a3241a 70%);border:2px solid #fff;margin-top:-7px;
  box-shadow:0 1px 4px rgba(0,0,0,.4)}
input[type=range].bd-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;border:2px solid #fff;
  background:radial-gradient(circle at 32% 30%,#f06a5c,#a3241a 70%);box-shadow:0 1px 4px rgba(0,0,0,.4)}
input[type=range].bd-range:focus-visible{outline:3px solid var(--accent,#1E6FB8);outline-offset:3px;border-radius:4px}
.bd-controls select{font:inherit;font-size:13px;padding:5px 9px;border:1px solid var(--rule,#ccc);
  border-radius:3px;background:var(--surface,#fff);color:var(--ink,#222)}
.bd-controls .cnt{font-family:var(--f-mono,ui-monospace,monospace);font-size:11.5px;color:var(--muted,#777)}
@media (max-width:900px){ .bd-controls{display:none} }