/* ============================================================
   BASE RATE — board + detail panel
   Scoped to #br-board and #br-modal. Matches the existing card
   language: rgba(16,22,36,.6) surface, white-alpha borders,
   16px radius. Violet is the magnitude/measurement accent.
   ============================================================ */

   #br-board {
    --br-line:   rgba(255,255,255,.07);
    --br-line-2: rgba(255,255,255,.12);
    --br-dim:    rgba(255,255,255,.42);
    --br-dim-2:  rgba(255,255,255,.28);
    --br-volt:   #818cf8;
    --br-up:     #34d399;
    --br-warn:   #fbbf24;
    --br-down:   #f87171;
  
    width: 82%;
    max-width: 1400px;
    margin: 18px auto 0;
    border: 1px solid var(--br-line);
    border-radius: 16px;
    background: rgba(16, 22, 36, .6);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 18px 55px rgba(0,0,0,.22);
    padding: 22px 26px 16px;
    box-sizing: border-box;
  }
  @media (max-width: 1200px) { #br-board { width: 72%; } }
  @media (max-width: 900px)  { #br-board { width: 92%; padding: 16px 14px 12px; border-radius: 12px; } }
  
  /* ── head ── */
  #br-board .br-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
  #br-board .br-head-left { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
  #br-board .br-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: #eef1f6; }
  #br-board .br-sub { font-size: .82rem; color: var(--br-dim); }
  #br-board .br-stamp { font-size: .7rem; color: var(--br-dim-2); font-variant-numeric: tabular-nums; }
  #br-board .br-lede { margin: 0 0 14px; font-size: .84rem; color: var(--br-dim); line-height: 1.5; max-width: 74ch; }
  
  /* ── filter chips ── */
  #br-board .br-filters { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
  #br-board .br-chip {
    border: 1px solid var(--br-line); background: rgba(255,255,255,.03);
    color: var(--br-dim); font-size: .74rem; font-weight: 600;
    padding: 5px 12px; border-radius: 7px; cursor: pointer; transition: .15s;
  }
  #br-board .br-chip:hover { color: #fff; border-color: var(--br-line-2); }
  #br-board .br-chip.on { background: rgba(129,140,248,.14); border-color: rgba(129,140,248,.35); color: #a5b4fc; }
  
  /* ── table ── */
  #br-board .br-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  #br-board .br-table th {
    text-align: right; padding: 8px 10px; font-size: .62rem; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; color: var(--br-dim-2);
    border-bottom: 1px solid var(--br-line); white-space: nowrap;
  }
  #br-board .br-table th:first-child, #br-board .br-table td:first-child { text-align: left; }
  #br-board .br-table td { padding: 10px; font-size: .82rem; text-align: right; border-bottom: 1px solid rgba(255,255,255,.04); white-space: nowrap; }
  #br-board .br-row { cursor: pointer; transition: background .12s; }
  #br-board .br-row:hover td { background: rgba(255,255,255,.025); }
  
  #br-board .br-sym { font-weight: 750; color: #f2f4f8; letter-spacing: .02em; font-size: .88rem; }
  #br-board .br-name { font-size: .68rem; color: var(--br-dim-2); font-weight: 400; margin-top: 1px; }
  #br-board .br-lev {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
    font-size: .56rem; font-weight: 700; letter-spacing: .05em;
    color: var(--br-volt); background: rgba(129,140,248,.12); border: 1px solid rgba(129,140,248,.3);
    vertical-align: middle;
  }
  #br-board .br-lev.br-lev-inv { color: var(--br-down); background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.28); }
  
  #br-board .br-off { font-weight: 700; }
  #br-board .br-off-calm { color: var(--br-up); }
  #br-board .br-off-mid  { color: var(--br-warn); }
  #br-board .br-off-deep { color: var(--br-down); }
  
  #br-board .br-band { color: rgba(255,255,255,.72); font-size: .76rem; }
  #br-board .br-win  { font-weight: 700; color: #fff; }
  #br-board .br-edge { font-size: .72rem; }
  #br-board .br-edge-pos { color: var(--br-up); }
  #br-board .br-edge-neg { color: var(--br-down); }
  #br-board .br-dip  { color: var(--br-warn); font-size: .78rem; }
  #br-board .br-mute { color: var(--br-dim-2); }
  
  #br-board .br-eras { font-size: .7rem; font-weight: 600; }
  #br-board .br-eras-3 { color: var(--br-up); }
  #br-board .br-eras-2 { color: var(--br-dim); }
  #br-board .br-eras-1 { color: var(--br-warn); }
  
  /* inverse row treatment — decays by design */
  #br-board .br-row-inverse td { background: rgba(248,113,113,.035); }
  #br-board .br-row-inverse:hover td { background: rgba(248,113,113,.06); }
  #br-board .br-decay {
    display: inline-block; margin-left: 6px; font-size: .56rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--br-down);
  }
  
  #br-board .br-foot {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--br-line);
    font-size: .7rem; color: var(--br-dim-2); line-height: 1.5;
  }
  #br-board .br-empty { padding: 30px; text-align: center; color: var(--br-dim); font-size: .85rem; }
  
  /* mobile: drop the middle columns */
  @media (max-width: 760px) {
    #br-board .br-table th:nth-child(n+4):nth-child(-n+6),
    #br-board .br-table td:nth-child(n+4):nth-child(-n+6) { display: none; }
    #br-board .br-table td { padding: 9px 6px; font-size: .76rem; }
  }
  
  /* ============================================================
     DETAIL MODAL
     ============================================================ */
  #br-modal {
    position: fixed; inset: 0; z-index: 1200; display: none;
    align-items: flex-start; justify-content: center;
    background: rgba(8,12,20,.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    padding: 40px 16px;
    overflow-y: auto;
  }
  #br-modal.is-open { display: flex; }
  #br-modal .br-panel {
    width: 100%; max-width: 720px; border-radius: 18px;
    border: 1px solid rgba(255,255,255,.1); background: #0e131c;
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
    position: relative; padding: 24px 26px 18px;
    font-variant-numeric: tabular-nums;
  }
  @media (max-width: 600px) { #br-modal { padding: 16px 8px; } #br-modal .br-panel { padding: 18px 14px 12px; border-radius: 12px; } }
  
  #br-modal .br-x {
    position: absolute; top: 12px; right: 14px; background: none; border: none;
    color: rgba(255,255,255,.4); font-size: 20px; cursor: pointer; line-height: 1; padding: 4px 8px;
  }
  #br-modal .br-x:hover { color: #fff; }
  
  #br-modal .br-p-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
  #br-modal .br-p-sym { font-size: 1.5rem; font-weight: 800; color: #f2f4f8; letter-spacing: -.01em; }
  #br-modal .br-p-name { font-size: .84rem; color: rgba(255,255,255,.45); }
  #br-modal .br-p-state { font-size: .86rem; color: #a5b4fc; margin-bottom: 16px; }
  
  /* source toggle: actual vs simulated */
  #br-modal .br-toggle { display: inline-flex; gap: 3px; padding: 3px; border-radius: 9px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; }
  #br-modal .br-tg { border: none; background: none; color: rgba(255,255,255,.5);
    font-size: .76rem; font-weight: 650; padding: 6px 14px; border-radius: 7px; cursor: pointer; }
  #br-modal .br-tg.on { background: #312e81; color: #fff; }
  
  #br-modal .br-sec {
    font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.35); margin: 18px 0 8px; padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  #br-modal .br-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; }
  #br-modal .br-l-label { font-size: .82rem; color: rgba(255,255,255,.62); }
  #br-modal .br-l-val { font-size: .95rem; font-weight: 700; color: #fff; white-space: nowrap; }
  #br-modal .br-l-note { font-size: .72rem; color: rgba(255,255,255,.3); }
  #br-modal .br-v-up { color: var(--br-up, #34d399); }
  #br-modal .br-v-warn { color: #fbbf24; }
  #br-modal .br-v-down { color: #f87171; }
  #br-modal .br-v-mute { color: rgba(255,255,255,.35); }
  
  #br-modal .br-grid { width: 100%; border-collapse: collapse; font-size: .78rem; }
  #br-modal .br-grid th { text-align: right; font-size: .6rem; letter-spacing: .05em; text-transform: uppercase;
    color: rgba(255,255,255,.3); font-weight: 600; padding: 6px 7px; border-bottom: 1px solid rgba(255,255,255,.08); }
  #br-modal .br-grid th:first-child, #br-modal .br-grid td:first-child { text-align: left; }
  #br-modal .br-grid td { text-align: right; padding: 7px; border-bottom: 1px solid rgba(255,255,255,.04); color: rgba(255,255,255,.8); }
  #br-modal .br-grid tr.br-here td { background: rgba(129,140,248,.12); color: #fff; font-weight: 650; }
  
  #br-modal .br-warn-box {
    margin-top: 16px; padding: 12px 14px; border-radius: 10px;
    background: rgba(248,113,113,.06); border: 1px solid rgba(248,113,113,.2);
    font-size: .78rem; color: rgba(255,255,255,.7); line-height: 1.55;
  }
  #br-modal .br-warn-box strong { color: #f87171; }
  #br-modal .br-note-box {
    margin-top: 12px; padding: 11px 14px; border-radius: 10px;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
    font-size: .74rem; color: rgba(255,255,255,.45); line-height: 1.55;
  }
  #br-modal .br-p-foot { margin-top: 16px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.06);
    font-size: .68rem; color: rgba(255,255,255,.28); line-height: 1.55; }