/* board.css: Ruthie's board (cards beside the conversation).
 *
 * Every color on the board comes from the tokens below. Tone is a word
 * (good, bad, attention, neutral) and maps to a token; nothing else may
 * write a raw color. scripts/check-board-tokens.mjs fails the build if a hex
 * color appears in board files outside the tokens block.
 */

/* tokens:start */
.rb-dark {
  --rb-bg: #0a110e;
  --rb-card: #0f1512;
  --rb-card2: #12241b;
  --rb-txt: #e6efe9;
  --rb-txt2: #b7c7bd;
  --rb-txt3: #8fa89a;
  --rb-line: rgba(127, 224, 166, 0.14);
  --rb-line2: rgba(127, 224, 166, 0.28);
  --rb-good: #7fe0a6;
  --rb-attention: #f0b45a;
  --rb-bad: #ff7b72;
  --rb-neutral: #8fa89a;
  --rb-good-bg: rgba(127, 224, 166, 0.12);
  --rb-attention-bg: rgba(240, 180, 90, 0.14);
  --rb-bad-bg: rgba(255, 123, 114, 0.14);
  --rb-neutral-bg: rgba(143, 168, 154, 0.12);
  --rb-accent: #7fe0a6;
  --rb-s1: #7fe0a6;
  --rb-s2: #6fb3ff;
  --rb-s3: #f0b45a;
  --rb-s4: #c49bff;
  --rb-s5: #8fa89a;
  --rb-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.rb-light {
  --rb-bg: #f3f6f4;
  --rb-card: #ffffff;
  --rb-card2: #eef4f0;
  --rb-txt: #13201a;
  --rb-txt2: #3c5146;
  --rb-txt3: #5c7266;
  --rb-line: rgba(19, 32, 26, 0.12);
  --rb-line2: rgba(19, 32, 26, 0.24);
  --rb-good: #1d8049;
  --rb-attention: #9a5b00;
  --rb-bad: #be3a30;
  --rb-neutral: #5c7266;
  --rb-good-bg: rgba(29, 128, 73, 0.10);
  --rb-attention-bg: rgba(154, 91, 0, 0.10);
  --rb-bad-bg: rgba(190, 58, 48, 0.10);
  --rb-neutral-bg: rgba(92, 114, 102, 0.10);
  --rb-accent: #1d8049;
  --rb-s1: #1d8049;
  --rb-s2: #2f6fbf;
  --rb-s3: #b26a00;
  --rb-s4: #7b4fc4;
  --rb-s5: #5c7266;
  --rb-shadow: 0 6px 22px rgba(19, 32, 26, 0.14);
}
/* Field Mode: sun-readable. Stronger text and lines, bigger numbers. */
.v2-field-on .rb-dark, .rb-dark.rb-field {
  --rb-txt2: #e6efe9;
  --rb-txt3: #c9d6ce;
  --rb-line: rgba(230, 239, 233, 0.30);
  --rb-line2: rgba(230, 239, 233, 0.50);
}
.v2-field-on .rb-light, .rb-light.rb-field {
  --rb-txt2: #13201a;
  --rb-txt3: #2c3c33;
  --rb-line: rgba(19, 32, 26, 0.30);
  --rb-line2: rgba(19, 32, 26, 0.50);
}
/* tokens:end */

.rb-dark, .rb-light { color: var(--rb-txt); font-family: 'IBM Plex Sans', system-ui, sans-serif; }

.rb-card {
  background: var(--rb-card);
  border: 1px solid var(--rb-line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.rb-head { display: flex; flex-direction: column; gap: 2px; }
.rb-title { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--rb-txt); margin: 0; }
.rb-source { font-size: 11.5px; color: var(--rb-txt3); }
.rb-asks { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-ask {
  font: 500 12.5px 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--rb-accent);
  background: transparent;
  border: 1px solid var(--rb-line2);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  min-height: 32px;
}
.rb-ask:hover { background: var(--rb-good-bg); }
.rb-ask:disabled { opacity: .5; cursor: default; }

/* value */
.rb-value { display: flex; flex-direction: column; gap: 2px; }
.rb-value .lab { font-size: 12px; color: var(--rb-txt3); letter-spacing: .02em; }
.rb-value .num { font: 600 30px/1.1 'JetBrains Mono', ui-monospace, monospace; color: var(--rb-txt); letter-spacing: -.01em; }
.v2-field-on .rb-value .num, .rb-field .rb-value .num { font-size: 36px; }
.rb-value .delta { font-size: 12.5px; font-weight: 500; }
.rb-value .hint { font-size: 12px; color: var(--rb-txt3); }

/* tones (text) */
.rb-t-good { color: var(--rb-good); }
.rb-t-bad { color: var(--rb-bad); }
.rb-t-attention { color: var(--rb-attention); }
.rb-t-neutral { color: var(--rb-neutral); }

/* tone pills (chips, facts, rows) */
.rb-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--rb-neutral-bg); color: var(--rb-txt2); }
.rb-pill.rb-p-good { background: var(--rb-good-bg); color: var(--rb-good); }
.rb-pill.rb-p-bad { background: var(--rb-bad-bg); color: var(--rb-bad); }
.rb-pill.rb-p-attention { background: var(--rb-attention-bg); color: var(--rb-attention); }
.rb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rb-neutral); flex-shrink: 0; }
.rb-dot.rb-p-good { background: var(--rb-good); }
.rb-dot.rb-p-bad { background: var(--rb-bad); }
.rb-dot.rb-p-attention { background: var(--rb-attention); }

/* chart */
.rb-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.rb-chart .axis { fill: var(--rb-txt3); font: 10.5px 'JetBrains Mono', ui-monospace, monospace; }
.rb-chart .grid { stroke: var(--rb-line); stroke-width: 1; }
.rb-chart .target { stroke: var(--rb-txt3); stroke-width: 1.2; stroke-dasharray: 4 4; }
.rb-chart .tlab { fill: var(--rb-txt3); font: 10.5px 'IBM Plex Sans', system-ui, sans-serif; }
.rb-chart .ln { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.rb-chart .ar { stroke: none; opacity: .18; }
.rb-chart .pt { stroke: var(--rb-card); stroke-width: 1.5; }
.rb-chart .s1 { stroke: var(--rb-s1); fill: var(--rb-s1); }
.rb-chart .s2 { stroke: var(--rb-s2); fill: var(--rb-s2); }
.rb-chart .s3 { stroke: var(--rb-s3); fill: var(--rb-s3); }
.rb-chart .s4 { stroke: var(--rb-s4); fill: var(--rb-s4); }
.rb-chart .s5 { stroke: var(--rb-s5); fill: var(--rb-s5); }
.rb-chart .ln.s1, .rb-chart .ln.s2, .rb-chart .ln.s3, .rb-chart .ln.s4, .rb-chart .ln.s5 { fill: none; }
.rb-chart .donut-hole { fill: var(--rb-card); }
.rb-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 12px; color: var(--rb-txt2); }
.rb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rb-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.rb-legend i.s1 { background: var(--rb-s1); } .rb-legend i.s2 { background: var(--rb-s2); } .rb-legend i.s3 { background: var(--rb-s3); }
.rb-legend i.s4 { background: var(--rb-s4); } .rb-legend i.s5 { background: var(--rb-s5); }

/* table */
.rb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rb-table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.rb-table th.r { text-align: right; }
.rb-table th { text-align: left; font-weight: 500; font-size: 11.5px; color: var(--rb-txt3); padding: 0 8px 6px 0; border-bottom: 1px solid var(--rb-line); white-space: nowrap; }
.rb-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--rb-line); color: var(--rb-txt); vertical-align: top; }
.rb-table tr:last-child td { border-bottom: none; }
.rb-table .r { text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; }
.rb-table tr.rb-row-good td:first-child { box-shadow: inset 3px 0 0 var(--rb-good); padding-left: 8px; }
.rb-table tr.rb-row-attention td:first-child { box-shadow: inset 3px 0 0 var(--rb-attention); padding-left: 8px; }
.rb-table tr.rb-row-bad td:first-child { box-shadow: inset 3px 0 0 var(--rb-bad); padding-left: 8px; }

/* rows */
.rb-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rb-rows li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--rb-line); }
.rb-rows li:first-child { padding-top: 0; }
.rb-rows li:last-child { border-bottom: none; padding-bottom: 0; }
.rb-rows .rb-dot { margin-top: 6px; }
.rb-rows .main { flex: 1; min-width: 0; }
.rb-rows .t { font-size: 14px; color: var(--rb-txt); line-height: 1.35; }
.rb-rows .t a { color: inherit; text-decoration: underline; text-decoration-color: var(--rb-line2); }
.rb-rows .d { font-size: 12.5px; color: var(--rb-txt2); margin-top: 2px; line-height: 1.4; }
.rb-rows .m { font-size: 11.5px; color: var(--rb-txt3); white-space: nowrap; margin-top: 2px; }
.rb-empty { font-size: 13px; color: var(--rb-txt3); }

/* meter */
.rb-meter { display: flex; flex-direction: column; gap: 6px; }
.rb-meter .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rb-meter .lab { font-size: 12.5px; color: var(--rb-txt2); }
.rb-meter .val { font: 600 15px 'JetBrains Mono', ui-monospace, monospace; color: var(--rb-txt); }
.rb-meter .track { position: relative; height: 10px; border-radius: 999px; background: var(--rb-card2); overflow: visible; }
.rb-meter .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--rb-accent); }
.rb-meter .fill.rb-p-good { background: var(--rb-good); }
.rb-meter .fill.rb-p-attention { background: var(--rb-attention); }
.rb-meter .fill.rb-p-bad { background: var(--rb-bad); }
.rb-meter .fill.rb-p-neutral { background: var(--rb-neutral); }
.rb-meter .mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--rb-txt2); border-radius: 1px; }
.rb-meter .hint { font-size: 12px; color: var(--rb-txt3); }
.rb-ring { display: flex; align-items: center; gap: 14px; }
.rb-ring svg { width: 76px; height: 76px; flex-shrink: 0; }
.rb-ring .bg { fill: none; stroke: var(--rb-card2); stroke-width: 9; }
.rb-ring .fg { fill: none; stroke: var(--rb-accent); stroke-width: 9; stroke-linecap: round; }
.rb-ring .fg.rb-p-good { stroke: var(--rb-good); } .rb-ring .fg.rb-p-attention { stroke: var(--rb-attention); }
.rb-ring .fg.rb-p-bad { stroke: var(--rb-bad); } .rb-ring .fg.rb-p-neutral { stroke: var(--rb-neutral); }

/* timeline */
.rb-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.rb-tl li { position: relative; padding: 0 0 12px 22px; }
.rb-tl li:last-child { padding-bottom: 0; }
.rb-tl li::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: -2px; width: 2px; background: var(--rb-line); }
.rb-tl li:last-child::before { display: none; }
.rb-tl .rb-dot { position: absolute; left: 1px; top: 5px; width: 10px; height: 10px; }
.rb-tl .when { font-size: 11.5px; color: var(--rb-txt3); font-family: 'JetBrains Mono', ui-monospace, monospace; }
.rb-tl .t { font-size: 14px; color: var(--rb-txt); }
.rb-tl .d { font-size: 12.5px; color: var(--rb-txt2); margin-top: 1px; }

/* person */
.rb-person { display: flex; gap: 12px; align-items: center; }
.rb-person .av { width: 38px; height: 38px; border-radius: 50%; background: var(--rb-card2); color: var(--rb-txt2); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; }
.rb-person .n { font-size: 14.5px; font-weight: 600; }
.rb-person .r { font-size: 12.5px; color: var(--rb-txt2); }
.rb-person .d { font-size: 12.5px; color: var(--rb-txt3); }

/* chips, facts, text, quote */
.rb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.rb-fact { background: var(--rb-card2); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rb-fact .lab { font-size: 11.5px; color: var(--rb-txt3); }
.rb-fact .val { font: 600 16px 'JetBrains Mono', ui-monospace, monospace; color: var(--rb-txt); overflow-wrap: anywhere; }
.rb-text { font-size: 13.5px; line-height: 1.5; color: var(--rb-txt2); margin: 0; }
.rb-quote { margin: 0; padding-left: 12px; border-left: 3px solid var(--rb-line2); font-size: 13.5px; line-height: 1.5; color: var(--rb-txt2); }
.rb-quote cite { display: block; font-style: normal; font-size: 12px; color: var(--rb-txt3); margin-top: 4px; }

/* the board itself */
.rb-board { display: flex; flex-direction: column; gap: 12px; }

/* ── the tray in the app (board-tray.js) ──────────────────────────────────── */
#rb-tray {
  position: fixed;
  z-index: 155; /* above the hands-free stage (150), below dialogs */
  right: 8px;
  bottom: var(--rb-bottom, 140px);
  display: flex;
  flex-direction: column;
  background: var(--rb-bg);
  border: 1px solid var(--rb-line2);
  border-radius: 16px;
  box-shadow: var(--rb-shadow);
  overflow: hidden;
  transition: max-height .28s cubic-bezier(.4, 0, .2, 1), width .2s ease;
  max-height: 44px;
  width: auto;
}
#rb-tray[hidden] { display: none; }
#rb-tray.rb-open { left: 8px; max-height: min(62vh, calc(100vh - var(--rb-bottom, 140px) - 64px)); }
.rb-tray-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 0 14px; width: 100%;
  background: transparent; border: 0; cursor: pointer; color: var(--rb-txt2);
  font: 600 12px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase;
  position: relative; flex-shrink: 0;
}
.rb-grip { display: none; }
#rb-tray.rb-open .rb-grip { display: block; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--rb-line2); }
.rb-chev { font-size: 14px; transition: transform .2s; color: var(--rb-txt3); }
#rb-tray.rb-open .rb-chev { transform: rotate(180deg); }
.rb-tray-body { display: none; overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 12px; -webkit-overflow-scrolling: touch; }
#rb-tray.rb-open .rb-tray-body { display: flex; }
#rb-tray.rb-on-stage.rb-open { max-height: 55vh; }

@media (min-width: 1024px) {
  body.rb-board-open #feed { padding-right: 432px; }
  #rb-tray { right: 16px; }
  #rb-tray.rb-open { left: auto; width: 400px; max-height: calc(100vh - var(--rb-bottom, 140px) - 84px); }
  .rb-tray-body { padding: 0 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { #rb-tray, .rb-chev { transition: none; } }