/* The Brain tab (26.31). public/brain.js draws everything inside .brPage.

   Built on the kit in dd.css: .ddCard, .ddChip and its tones, .ddTile,
   .ddBtn, .ddMeta, .ddSkel, and the fund model's .fmSwitch for the four
   connection switches (the kit's one switch; its teal is its "on" state).
   Nothing here declares a palette: every colour is a dd.css token, so the
   dark theme re-resolves on its own.

   The map is a five-column grid: sources, the wires in, the brain, the wires
   out, the readers. The wires are SVGs whose curves end at each card's
   middle, which public/brain.js computes from a fixed card height and gap:
   .brNode's height and .brCol's gap below are NODE_H and NODE_GAP there, and
   scripts/test_brain_page_dom.js fails if the two files disagree. On a phone
   the wires go and the three columns stack. */

.brPage { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 0 24px; font-size: 13.5px; line-height: 1.45; color: var(--ddInk); }
.brPage h1, .brPage h2, .brPage h3, .brPage p { margin: 0; }
.brPage :focus-visible { outline: 2px solid var(--ddLive); outline-offset: 2px; }

.brHead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-bottom: 20px; }
.brHead h1 { font-size: 28px; font-weight: 600; letter-spacing: -.035em; line-height: 1.25; margin-top: 3px; }
.brEyebrow { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ddDim); font-weight: 500; }
.brHeadActions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.brBanner { border: 1px solid var(--ddGrid); border-radius: 10px; padding: 10px 14px; margin: 0 0 18px; font-size: 13px; background: var(--ddSurface); }
.brBanner b { font-weight: 600; }
.brBanner.bad { border-color: color-mix(in srgb, var(--ddWarn) 45%, transparent); background: color-mix(in srgb, var(--ddWarn) 6%, var(--ddSurface)); }
.brBanner.mid { border-color: rgba(197, 138, 0, .45); background: rgba(197, 138, 0, .06); }

.brSection { margin: 0 0 26px; }
.brSecHd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 10px; }
.brSecHd h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.brH3 { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }

/* ---- the state colour, one token per state, read by the dot and the wire ---- */
.brPage .s-ok { --brTone: var(--ddWon); }
.brPage .s-error { --brTone: var(--ddWarn); }
.brPage .s-waiting { --brTone: var(--ddAmberText); }
.brPage .s-soon { --brTone: var(--ddLive); }
.brPage .s-off { --brTone: var(--ddFaint); }
.brPage .s-unknown { --brTone: var(--ddGrid); }
.brPage .s-reader { --brTone: var(--ddLive); }
.brPage .s-later { --brTone: var(--ddGrid); }
.brDot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--brTone, var(--ddGrid)); }

.brLegend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--ddDim); }
.brLegend span { display: inline-flex; align-items: center; gap: 5px; }

/* ---- the map ---- */
.brMap { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(150px, 190px) 56px minmax(0, .72fr); align-items: center; }
.brCol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.brNode { height: 64px; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 11px; background: var(--ddSurface); border: 1px solid var(--ddGrid); border-radius: 10px; box-shadow: var(--ddShadow); min-width: 0; }
.brNode.s-off, .brNode.s-later, .brNode.s-unknown { background: transparent; box-shadow: none; }
.brNode.s-error { border-color: color-mix(in srgb, var(--ddWarn) 45%, transparent); }
.brNodeTop { display: flex; align-items: center; gap: 7px; min-width: 0; }
.brNodeName { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.brNodeTop .ddChip { flex: 0 0 auto; }
.brNodeNote, .brNodeMeta { font-size: 11.5px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brNodeNote { color: var(--ddInk); }
.brNodeMeta { color: var(--ddDim); font-size: 11px; }

.brWires { display: block; width: 56px; overflow: visible; }
.brWires path { fill: none; stroke: var(--ddGrid); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.brWires .w-ok { stroke: var(--ddWon); }
.brWires .w-error { stroke: var(--ddWarn); }
.brWires .w-waiting { stroke: var(--ddAmberText); stroke-dasharray: 4 4; }
.brWires .w-soon { stroke: var(--ddLive); stroke-dasharray: 4 4; }
.brWires .w-off { stroke: var(--ddFaint); stroke-dasharray: 2 5; opacity: .7; }
.brWires .w-unknown { stroke: var(--ddFaint); stroke-dasharray: 1 5; opacity: .6; }
.brWires .w-reader { stroke: var(--ddLive); }
.brWires .w-later { stroke: var(--ddFaint); stroke-dasharray: 2 5; opacity: .7; }

.brHub { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 12px; background: var(--ddSurface); border: 1px solid var(--ddInk); border-radius: 10px; box-shadow: var(--ddShadow); }
.brHubName { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.brHubMeta { font-size: 11.5px; color: var(--ddDim); }
.brHubCell { min-width: 0; }
.brDown { display: none; }

/* ---- your connections ---- */
.brConns { padding: 4px 14px; }
.brPage p.brConnScope { margin: 10px 0 0; }
.brConn { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--ddGrid); }
.brConn:last-child { border-bottom: 0; }
.brConn .fmSwitch { margin-top: 1px; }
.brConn .fmSwitch:disabled { opacity: .45; cursor: not-allowed; }
.brConnName { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.brPage p.brConnReads { font-size: 12.5px; color: var(--ddInk); margin: 3px 0 4px; max-width: 72ch; }
.brConfirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; padding: 9px 11px; border: 1px solid var(--ddGrid); border-radius: 8px; background: color-mix(in srgb, var(--ddLive) 5%, var(--ddSurface)); font-size: 12.5px; }
.brConfirm span { flex: 1 1 220px; }

/* ---- everyone's connections (admin) ---- */
.brAdmin { padding: 4px 14px; }
/* Every track has fixed bounds, so each row (its own grid) lands on the same columns. */
.brAdminRow { display: grid; grid-template-columns: minmax(120px, 180px) 104px minmax(0, 1fr) minmax(90px, 210px); gap: 6px 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--ddGrid); font-size: 13px; }
.brAdminRow:last-child { border-bottom: 0; }
.brAdminWho b { font-weight: 600; }
.brAdminRow > .ddChip { justify-self: start; }
.brAdminAct { justify-self: end; text-align: right; }

/* ---- health ---- */
.brTiles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.brTiles .ddTile .s { white-space: normal; }
.brMeter { height: 4px; margin-top: 8px; border-radius: 2px; background: var(--ddGrid); overflow: hidden; }
.brMeter i { display: block; height: 100%; background: var(--ddWon); }
.ddTile.mid .brMeter i { background: var(--ddAmberText); }
.ddTile.bad .brMeter i { background: var(--ddWarn); }
.brTwo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.brTwo .ddCard { margin: 0; }
.brList { margin: 0; padding: 0 0 0 16px; font-size: 12.5px; }
.brList li { margin: 3px 0; }
.brList.bad li::marker { color: var(--ddWarn); }

@media (max-width: 900px) {
  .brMap { grid-template-columns: minmax(0, 1fr) 40px minmax(130px, 160px) 40px minmax(0, .8fr); }
  .brWires { width: 40px; }
}
/* A phone: the three columns stack and a short rule stands in for the wires. */
@media (max-width: 680px) {
  .brHead h1 { font-size: 23px; }
  .brMap { grid-template-columns: minmax(0, 1fr); }
  .brWires { display: none; }
  .brDown { display: block; width: 1px; height: 14px; margin: 0 auto 8px; background: var(--ddFaint); }
  .brHubCell { margin: 0 0 8px; }
  .brHub { padding: 12px; }
  .brAdminRow { grid-template-columns: minmax(0, 1fr) auto; }
  .brAdminWhen { grid-column: 1 / -1; }
  .brAdminAct { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .brTwo { grid-template-columns: minmax(0, 1fr); }
}