/* ============================================================
   RingBRP — visual system v2

   Corrected after design critique. The governing principle:
   USE THE COVER FOR IDENTITY, THE INTERIOR AND THE ORIGINAL
   CHARACTER SHEET FOR INFORMATION ARCHITECTURE.
   v1 used the cover for everything, which produced a branding
   exercise rather than a working tool.

   Sources, sampled not guessed:
   · Cover  — ultramarine #18268d, lemon yellow (hue 57°), white.
   · Interior — Swiss grid; heavy rule above a section head and a
     thin rule below; Helvetica body; multi-column category boxes.
   · Explorer sheet — characteristics paired with their derived
     rolls on one line; skills in columnar category boxes; the
     weapons table always visible at the foot, never hidden.

   Type — four registers, two families, one webfont:
   · Display   Michroma, ONLY at the 18px name and 11px section heads.
   · Utility   Helvetica Bold 10px caps — every small label.
   · Body      Helvetica 13px/1.3.
   · Data      Helvetica Bold with tabular figures. Mono is reserved
               for band strings and dice output.

   Colour roles are separated. YELLOW MEANS ROLLABLE OR ACTIVE.
   Passive numbers are white. That distinction is the whole point,
   and v1 lost it by making every value yellow.
   ============================================================ */

@font-face {
  font-family: "Michroma";
  src: url("../fonts/Michroma-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

.ringbrp-sheet,
.ringbrp-chat,
.ringbrp-window {
  /* sampled from the 1984 Explorer Book cover */
  --rb-void:      #0c125b;
  --rb-deep:      #101a6e;
  --rb-blue:      #18268d;
  --rb-panel:     #16215f;

  /* structure — lifted so non-text contrast is actually visible */
  --rb-line:      #6674d8;   /* 3.1:1 on the page ground */
  --rb-hairline:  #4d5ac0;   /* 2.2:1 — decorative separators only */

  --rb-yellow:     #f2ea72;
  --rb-yellow-dim: rgba(242, 234, 114, 0.45);
  --rb-white:      #ecefee;
  --rb-muted:      #a8b2e3;   /* 5.96:1 on the lightest ground */

  --rb-danger:    #ff7a5c;
  --rb-good:      #86e5b0;

  --rb-display: "Michroma", "Eurostile", sans-serif;
  --rb-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rb-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ============================================================
   Frame — flat spot colour, no gradients
   ============================================================ */

.ringbrp-sheet {
  background: var(--rb-deep);
  color: var(--rb-white);
  font-family: var(--rb-body);
  font-size: 13px;
  line-height: 1.3;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 0 1px var(--rb-yellow-dim);
}

.ringbrp-sheet input,
.ringbrp-sheet select,
.ringbrp-sheet textarea {
  background: var(--rb-void);
  border: 1px solid var(--rb-line);
  color: var(--rb-white);
  border-radius: 0;
  padding: 2px 5px;
  font-family: var(--rb-body);
  font-size: 13px;
}
.ringbrp-sheet input:focus,
.ringbrp-sheet select:focus,
.ringbrp-sheet textarea:focus {
  border-color: var(--rb-yellow);
  box-shadow: none;
  outline: 1px solid var(--rb-yellow);
}
.ringbrp-sheet a { color: var(--rb-white); cursor: pointer; text-decoration: none; }
.ringbrp-sheet a[data-action^='roll'], .ringbrp-sheet .rb-char-x5,
.ringbrp-sheet .rb-skill-name, .ringbrp-sheet .rb-add { color: var(--rb-yellow); }
.ringbrp-sheet a:hover { color: #fff; text-shadow: none; }
.ringbrp-sheet ::-webkit-scrollbar { width: 10px; }
.ringbrp-sheet ::-webkit-scrollbar-thumb { background: var(--rb-line); }
.ringbrp-sheet ::-webkit-scrollbar-track { background: var(--rb-void); }

/* --- the utility register: every small label --- */
.rb-origin label, .rb-ages label, .rb-vital-label, .rb-dl,
.rb-table th, .rb-block, .rb-track-label, .rb-type, .rb-grid2 label,
.rb-strip-label {
  font-family: var(--rb-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rb-muted);
}

/* --- data: tabular figures in the body face, not mono --- */
.rb-char input, .rb-hp input, .rb-big, .rb-armour input,
.rb-skill-val, .rb-dv, .rb-track-val, .rb-standing, .rb-char-x5 {
  font-family: var(--rb-body);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ============================================================
   Header — identity
   ============================================================ */

.rb-header {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 14px 10px;
  background: transparent;
  border-bottom: 3px solid var(--rb-yellow);
}
.rb-portrait {
  width: 84px; height: 84px; flex: 0 0 84px; object-fit: cover;
  border: 1px solid var(--rb-line); background: var(--rb-void);
}
.rb-headline { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.rb-name {
  font-family: var(--rb-display);
  font-size: 18px;
  letter-spacing: .02em;
  color: var(--rb-white);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rb-hairline);
  padding: 0 0 4px;
}
.rb-name:focus { border-bottom-color: var(--rb-yellow); outline: none; }
.rb-role { font-size: 12px; color: var(--rb-muted); background: transparent; border: none; }

.rb-origin, .rb-ages { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.rb-origin label, .rb-ages label { display: flex; align-items: center; gap: 5px; }
.rb-origin input, .rb-ages input { width: 92px; }
.rb-origin select { width: 116px; }
.rb-origin input, .rb-ages input, .rb-origin select { font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--rb-white); font-size: 12px;
}
.rb-ages input { width: 54px; }
.rb-style-fixed {
  font-family: var(--rb-body); font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--rb-void); background: var(--rb-yellow);
  padding: 3px 8px; text-transform: uppercase;
}

/* --- vitals: HP reads as one expression --- */
.rb-vitals { display: flex; gap: 8px; align-items: stretch; }
.rb-vitals > div {
  min-width: 78px; padding: 6px 10px; text-align: center;
  background: var(--rb-void); border: 1px solid var(--rb-line);
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.rb-vitals > .rb-hp {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  align-items: baseline; justify-content: center; column-gap: 3px;
}
.rb-hp .rb-vital-label { grid-column: 1 / -1; }
.rb-hp input {
  width: 42px; text-align: right; font-size: 24px;
  background: transparent; border: none; padding: 0; color: var(--rb-white);
}
.rb-hp input:focus { outline: none; background: var(--rb-blue); }
.rb-slash { color: var(--rb-muted); font-size: 16px; }
.rb-max { font-size: 15px; color: var(--rb-muted); font-weight: 700; }
.rb-big { font-size: 24px; color: var(--rb-white); }
.rb-armour input {
  width: 44px; text-align: center; font-size: 24px;
  background: transparent; border: none; padding: 0; color: var(--rb-white);
}
.rb-wounded { border-color: var(--rb-danger) !important; }
.rb-wound-flag {
  font-family: var(--rb-body); font-size: 10px; font-weight: 700;
  color: var(--rb-danger); text-transform: uppercase; letter-spacing: .04em;
}

/* ============================================================
   Characteristics — the roll target is the dominant number
   ============================================================ */

.rb-characteristics {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px;
  padding: 0; background: var(--rb-hairline);
  border-top: 2px solid var(--rb-yellow);
  border-bottom: 2px solid var(--rb-yellow);
}
.rb-char { text-align: center; background: var(--rb-deep); padding: 9px 2px 7px; }
.rb-char-label {
  display: block; width: 100%;
  font-family: var(--rb-body); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; color: var(--rb-line); cursor: pointer;
}
.rb-char:hover .rb-char-label { color: var(--rb-white); }
/* The characteristic itself. It was set smaller than the skill ratings beneath
   it, so the eight numbers the whole system derives from read as a caption. */
.rb-char input {
  width: 100%; text-align: center;
  font-family: var(--rb-display); font-size: 26px; font-weight: 700;
  line-height: 1.05; letter-spacing: -.01em;
  background: transparent; border: none; padding: 2px 0 3px; color: var(--rb-white);
}
.rb-char input:focus { outline: 1px solid var(--rb-yellow); color: var(--rb-white); }
/* the ×5 chip — the actual roll target, so it keeps parity with the raw score */
.rb-char-x5 {
  display: block; min-height: 30px; line-height: 30px;
  font-size: 22px; color: var(--rb-yellow); cursor: pointer;
  border-top: 1px solid var(--rb-hairline);
}
.rb-char-x5::before {
  content: "×5 "; font-size: 10px; font-weight: 700;
  color: var(--rb-muted); letter-spacing: .04em;
}
.rb-char-x5:hover { background: var(--rb-yellow); color: var(--rb-void); }
.rb-char-x5:hover::before { color: var(--rb-void); }

/* ============================================================
   Derived strip
   ============================================================ */

.rb-derived {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  padding: 7px 14px; border-bottom: 1px solid var(--rb-hairline);
}
.rb-dl { margin-right: 5px; }
.rb-dv { font-size: 13px; color: var(--rb-white); }
.rb-warn { color: var(--rb-danger); }
.rb-rolls { margin-left: auto; display: flex; gap: 6px; }
.rb-rolls button {
  font-family: var(--rb-body); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: transparent; border: 1px solid var(--rb-yellow-dim);
  color: var(--rb-yellow); padding: 4px 10px; border-radius: 0;
  width: auto; line-height: 1.3; cursor: pointer; text-transform: uppercase;
}
.rb-rolls button:hover { background: var(--rb-yellow); border-color: var(--rb-yellow); color: var(--rb-void); }

/* ============================================================
   Persistent weapon strip — the original sheet never hides weapons
   ============================================================ */

.rb-weaponstrip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 6px 14px; border-bottom: 1px solid var(--rb-hairline);
  background: var(--rb-panel);
}
.rb-strip-label { flex: 0 0 auto; }
.rb-strip-weapon { display: flex; align-items: baseline; gap: 7px; font-size: 12px; }
.rb-strip-weapon a { font-weight: 700; }
.rb-strip-dmg { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rb-white); }
.rb-strip-range, .rb-strip-ammo { font-size: 11px; color: var(--rb-muted); font-variant-numeric: tabular-nums; }
.rb-strip-empty { font-size: 12px; color: var(--rb-muted); font-style: italic; }

/* ============================================================
   Tabs — solid active state, not a Material underline
   ============================================================ */

.rb-tabs {
  display: flex; padding: 0 14px;
  background: var(--rb-void);
  border-bottom: 1px solid var(--rb-line);
}
.rb-tabs .item {
  font-family: var(--rb-body); font-weight: 700; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rb-muted);
  padding: 9px 14px 8px;
}
.rb-tabs .item:hover { color: var(--rb-white); }
.rb-tabs .item.active { color: var(--rb-void); background: var(--rb-yellow); }

.rb-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px 16px; }

/* ============================================================
   Section heads — the book's rule treatment
   ============================================================ */

.rb-cat { margin-bottom: 14px; break-inside: avoid; }
.rb-cat-head {
  display: flex; align-items: baseline; gap: 9px; margin: 0 0 4px;
  font-family: var(--rb-display); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rb-white);
  border: none;
  border-top: 2px solid var(--rb-yellow);
  border-bottom: 1px solid var(--rb-hairline);
  padding: 5px 0 4px;
}
.rb-catbonus {
  font-family: var(--rb-body); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rb-yellow); background: transparent;
  border: 1px solid var(--rb-yellow-dim); padding: 0 5px;
}
.rb-add { margin-left: auto; font-size: 12px; }
.rb-add-wide {
  display: block; text-align: center; padding: 6px; margin-top: 8px;
  border: 1px dashed var(--rb-line);
  font-family: var(--rb-body); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ============================================================
   Skills — two columns, the original sheet's search pattern
   ============================================================ */

.rb-body .tab[data-tab="skills"].active {
  display: block;
  column-count: 2;
  column-gap: 22px;
  column-fill: balance;
}
@media (max-width: 720px) {
  .rb-body .tab[data-tab="skills"].active { column-count: 1; }
}
.rb-skills { list-style: none; margin: 0; padding: 0; }
.rb-skill {
  display: grid; grid-template-columns: 13px 20px minmax(0,1fr) 44px 104px 15px 15px;
  gap: 5px; align-items: center; min-height: 26px; padding: 0;
  border-bottom: 1px solid var(--rb-hairline);
}
.rb-skill:hover { background: var(--rb-blue); }
.rb-tick { width: 12px; height: 12px; border: 1px solid var(--rb-muted); display: inline-block; }
.rb-tick.on { background: var(--rb-yellow); border-color: var(--rb-yellow); }
.rb-skill-name { font-size: 13px; color: var(--rb-white); }
.rb-skill-name:hover { color: var(--rb-yellow); }
/* passive datum, therefore white. The NAME carries the roll affordance. */
.rb-skill-val { text-align: right; font-size: 13px; color: var(--rb-white); }
.rb-skill-bands {
  font-family: var(--rb-mono); font-size: 9.5px; color: var(--rb-muted);
  text-align: right; letter-spacing: -.03em;
  white-space: nowrap; overflow: hidden;
}

/* roll affordance: underline whatever rolls */
.ringbrp-sheet a[data-action^="roll"] {
  text-decoration: underline;
  text-decoration-color: var(--rb-yellow-dim);
  text-underline-offset: 2px;
}
.rb-char-x5, .rb-char-label { text-decoration: none !important; }

/* ============================================================
   Tables & lists
   ============================================================ */

.rb-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
.rb-table th { text-align: left; border-bottom: 1px solid var(--rb-line); padding: 4px 5px; }
.rb-table td { padding: 5px; border-bottom: 1px solid var(--rb-hairline); }
.rb-table tbody tr:hover { background: var(--rb-blue); }
.rb-actions { text-align: right; white-space: nowrap; }
.rb-list { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; }
.rb-list li {
  display: flex; align-items: center; gap: 10px; min-height: 26px;
  border-bottom: 1px solid var(--rb-hairline);
}
.rb-strong { font-weight: 700; color: var(--rb-white); }
.rb-dim { color: var(--rb-muted); font-size: 12px; }
.rb-empty { color: var(--rb-muted); font-style: italic; text-align: center; padding: 26px; }
.rb-equip { color: var(--rb-muted); }
.rb-equip.on { color: var(--rb-yellow); }
.rb-block { margin: 12px 0 4px; border-top: 1px solid var(--rb-hairline); padding-top: 7px; }
.rb-wounds li { border-left: 3px solid var(--rb-danger); padding-left: 8px; }

/* ============================================================
   Expedition
   ============================================================ */

.rb-tracks { display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--rb-hairline); }
.rb-track {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--rb-void); border: 1px solid var(--rb-line); padding: 9px;
}
.rb-track-val { font-size: 26px; color: var(--rb-white); min-width: 32px; text-align: center; }
.rb-track-max { font-size: 12px; color: var(--rb-muted); font-weight: 700; }
.rb-tracks.rb-crisis .rb-track-val { color: var(--rb-danger); }
.rb-crisis-note { color: var(--rb-danger); text-align: center; font-size: 13px; margin: 7px 14px; }
.rb-bigbutton {
  width: 100%; padding: 10px; margin-bottom: 12px;
  font-family: var(--rb-body); font-weight: 700; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; background: transparent;
  border: 2px solid var(--rb-yellow); color: var(--rb-yellow); border-radius: 0; cursor: pointer;
}
.rb-bigbutton:hover { background: var(--rb-yellow); color: var(--rb-void); }
.rb-table tr.rb-done td { opacity: .45; }
.rb-table tr.rb-current td { box-shadow: inset 3px 0 0 var(--rb-yellow); }
.rb-standing { font-size: 13px; color: var(--rb-white); }
.rb-objective { font-size: 12px; color: var(--rb-muted); font-style: italic; width: 100%; }

/* ============================================================
   Item sheet
   ============================================================ */

.rb-item-header {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px;
  border-bottom: 3px solid var(--rb-yellow); background: transparent;
}
.rb-item-img { width: 52px; height: 52px; border: 1px solid var(--rb-line); }
.rb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.rb-grid2 label { display: flex; flex-direction: column; gap: 3px; }
.rb-grid2 label input, .rb-grid2 label select {
  font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--rb-white);
}
.rb-check { flex-direction: row !important; align-items: center; gap: 7px; }
.rb-hint { font-size: 12px; color: var(--rb-muted); margin-top: 10px; }
.rb-fn { border: 1px solid var(--rb-line); padding: 8px 10px; margin-bottom: 10px; }
.rb-fn legend {
  font-family: var(--rb-body); font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rb-yellow); padding: 0 5px;
}

/* ============================================================
   Chat — flat card
   ============================================================ */

.ringbrp-chat {
  background: var(--rb-void);
  border: 1px solid var(--rb-line);
  box-shadow: inset 0 0 0 1px var(--rb-yellow-dim);
  padding: 10px 12px;
  color: var(--rb-white);
  font-family: var(--rb-body);
}
.rb-chat-title {
  font-family: var(--rb-display); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rb-yellow); margin: 0 0 7px;
  border: none; border-bottom: 1px solid var(--rb-hairline); padding-bottom: 6px;
}
.rb-chat-line {
  font-size: 12px; color: var(--rb-muted); font-variant-numeric: tabular-nums;
  display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap;
}
.rb-chat-eff { color: var(--rb-white); font-weight: 700; }
.rb-chat-flavour { list-style: none; margin: 7px 0 0; padding: 0; font-size: 12px; color: var(--rb-muted); }
.rb-chat-flavour li:before { content: "› "; color: var(--rb-yellow); }
.rb-chat-result { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.rb-chat-roll { font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rb-chat-level {
  font-family: var(--rb-display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.rb-chat-bands {
  display: flex; gap: 14px; font-family: var(--rb-mono); font-size: 10px;
  color: var(--rb-muted); margin-top: 7px;
  border-top: 1px solid var(--rb-hairline); padding-top: 6px;
}
.rb-roll.rb-critical .rb-chat-level, .rb-roll.rb-critical .rb-chat-roll { color: var(--rb-yellow); }
.rb-roll.rb-special  .rb-chat-level, .rb-roll.rb-special  .rb-chat-roll { color: var(--rb-good); }
.rb-roll.rb-success  .rb-chat-level { color: var(--rb-good); }
.rb-roll.rb-failure  .rb-chat-level { color: var(--rb-muted); }
.rb-roll.rb-fumble   .rb-chat-level, .rb-roll.rb-fumble .rb-chat-roll { color: var(--rb-danger); }
.rb-wound-title {
  font-family: var(--rb-display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rb-danger); margin: 8px 0 4px; border: none;
}
.rb-wound-text { font-size: 13px; margin: 0 0 5px; }
.rb-wound-loss { font-size: 13px; color: var(--rb-yellow); margin: 0 0 5px; font-weight: 700; }
.rb-wound-stamina { font-size: 11px; color: var(--rb-muted); font-style: italic; margin: 0; }
.rb-dialog .notes { font-size: 12px; color: var(--rb-muted); }

/* ============================================================
   ITEM SHEET — the statline, after the 1984 weapons table
   ============================================================ */

.rb-item-ident { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.rb-item .rb-name { font-size: 18px; }

.rb-statline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: var(--rb-void);
  border-top: 2px solid var(--rb-yellow);
  border-bottom: 1px solid var(--rb-line);
}
.rb-stat {
  min-width: 0; padding: 6px 10px;
  border-right: 1px solid var(--rb-line);
  display: flex; flex-direction: column; gap: 2px;
}
.rb-stat:last-child { border-right: none; }
.rb-stat-wide { grid-column: span 3; }
/* the actionable datum dominates — the mistake corrected on the character sheet */
.rb-stat-primary { grid-column: span 2; }
.rb-stat-primary .rb-stat-value { font-size: 22px; line-height: 1.05; color: var(--rb-yellow); }
.rb-stat-label {
  font-family: var(--rb-body); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--rb-muted);
}
.rb-stat-value {
  font-family: var(--rb-body); font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--rb-white);
}
.rb-stat-big { font-size: 20px; line-height: 1.1; color: var(--rb-white); }
.rb-stat-of { font-size: 13px; color: var(--rb-muted); }
.rb-stat-mono { font-family: var(--rb-mono); font-size: 12px; font-weight: 400; color: var(--rb-muted); }
.rb-stat-question { font-size: 13px; font-weight: 400; font-style: italic; color: var(--rb-white); }
.rb-stat-roll { color: var(--rb-yellow); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--rb-yellow-dim); text-underline-offset: 3px; }
.rb-stat-roll:hover { color: #fff; }
.rb-statline-locked { box-shadow: inset 3px 0 0 var(--rb-danger); }

.rb-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
.rb-grid3 label {
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--rb-body); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--rb-muted);
}
.rb-grid3 label input, .rb-grid3 label select {
  font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--rb-white);
}
.rb-wide { width: 100%; }
.rb-hint-warn { color: var(--rb-danger); }
.rb-fnbody { margin-bottom: 12px; }
.rb-fn-effect {
  font-size: 12px; color: var(--rb-muted); margin: 0 0 8px;
  border-left: 2px solid var(--rb-line); padding-left: 9px;
}
.rb-locked-chip {
  font-family: var(--rb-body); font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--rb-void); background: var(--rb-danger); padding: 1px 6px;
}
.rb-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.rb-tag {
  font-family: var(--rb-body); font-size: 11px; font-weight: 700; color: var(--rb-white);
  border: 1px solid var(--rb-line); padding: 1px 6px;
}
.rb-taboo { color: var(--rb-danger); font-size: 12px; }
.rb-desire { color: var(--rb-good); font-size: 12px; }
.rb-offerform { color: var(--rb-white); font-size: 12px; }
.rb-standing-chip {
  font-family: var(--rb-body); font-size: 11px; font-weight: 700;
  color: var(--rb-void); background: var(--rb-yellow); padding: 0 6px; min-width: 26px; text-align: center;
}

/* --- research steps --- */
.rb-steps { list-style: none; margin: 0 0 12px; padding: 0; }
.rb-step {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 9px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--rb-hairline);
}
.rb-step-n {
  font-family: var(--rb-body); font-size: 12px; font-weight: 700; text-align: center;
  color: var(--rb-muted); border: 1px solid var(--rb-line); line-height: 20px;
}
.rb-step-current { box-shadow: inset 3px 0 0 var(--rb-yellow); padding-left: 8px; }
.rb-step-current .rb-step-n { color: var(--rb-void); background: var(--rb-yellow); border-color: var(--rb-yellow); }
.rb-step-done { opacity: .5; }
.rb-step-body { display: flex; flex-direction: column; gap: 2px; }
.rb-step-type {
  font-family: var(--rb-body); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--rb-white);
}
.rb-step-state { font-size: 11px; color: var(--rb-muted); text-transform: uppercase; letter-spacing: .04em; }
.rb-steps-compact .rb-step { grid-template-columns: 22px auto 1fr; padding: 4px 0; }

/* ============================================================
   EXPEDITION — tracks, next leg, standings
   ============================================================ */

.rb-track { flex-direction: column; gap: 3px; padding: 9px 8px; }
.rb-track-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.rb-track-btn {
  font-family: var(--rb-body); font-size: 16px; font-weight: 700; line-height: 1;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rb-line); color: var(--rb-muted);
}
.rb-track-btn:hover { background: var(--rb-yellow); border-color: var(--rb-yellow); color: var(--rb-void); }
.rb-track-val { font-size: 30px; line-height: 1; }
.rb-track-max { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rb-muted); }
.rb-track-pips { display: none; }
.rb-track-low .rb-track-val { color: var(--rb-white); }
.rb-track-low { border-color: var(--rb-yellow); }
.rb-track-crisis { border-color: var(--rb-danger); }
.rb-track-crisis .rb-track-val { color: var(--rb-danger); }
.rb-track-crisis .rb-pip.on { background: var(--rb-danger); }

.rb-progress { font-size: 11px; color: var(--rb-muted); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700; display: flex; gap: 5px; align-items: center; }
.rb-progress strong { color: var(--rb-white); font-size: 13px; }

.rb-nextleg {
  border: 1px solid var(--rb-yellow-dim);
  background: var(--rb-void);
  padding: 12px; margin-bottom: 16px;
}
.rb-nextleg-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rb-nextleg-n {
  font-family: var(--rb-body); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--rb-void); background: var(--rb-yellow); padding: 2px 7px;
}
.rb-nextleg-terrain { font-size: 14px; font-weight: 700; color: var(--rb-white); }
.rb-unexplored {
  margin-left: auto; font-family: var(--rb-body); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--rb-white);
  border: 1px solid var(--rb-line); padding: 1px 6px;
}
.rb-nextleg-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px 14px; margin-bottom: 10px;
}
.rb-rolltarget {
  display: flex; align-items: baseline; gap: 9px;
  border-top: 1px solid var(--rb-line); border-bottom: 1px solid var(--rb-line);
  padding: 7px 0; margin-bottom: 10px;
}
.rb-rolltarget-label {
  font-family: var(--rb-body); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--rb-muted);
}
.rb-rolltarget-val {
  font-family: var(--rb-body); font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--rb-yellow); line-height: 1;
}
.rb-rolltarget-note { font-size: 11px; color: var(--rb-muted); margin-left: auto; }
.rb-bigbutton[disabled] {
  border-color: var(--rb-line); color: var(--rb-muted); cursor: not-allowed; opacity: .55;
}
.rb-bigbutton[disabled]:hover { background: transparent; color: var(--rb-muted); }
.rb-nextleg-stats > span { display: flex; align-items: baseline; gap: 5px; }
.rb-nextleg-encounter {
  font-size: 12px; color: var(--rb-danger); margin: 0 0 10px;
  border-left: 3px solid var(--rb-danger); padding-left: 9px;
}
.rb-nextleg .rb-bigbutton { margin-bottom: 0; }

.rb-itinerary td { font-size: 12px; }
.rb-leg-n { font-weight: 700; color: var(--rb-muted); width: 24px; }
.rb-leg-event { font-size: 11px; color: var(--rb-danger); }
.rb-yes { color: var(--rb-good); }
.rb-no { color: var(--rb-muted); }

.rb-project, .rb-group {
  border: 1px solid var(--rb-hairline); padding: 10px 12px; margin-bottom: 12px;
}
.rb-project-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.rb-project-status {
  margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--rb-muted);
}
.rb-project-q { font-size: 12px; font-style: italic; color: var(--rb-muted); margin: 0 0 8px; }
.rb-disc-state {
  width: 10px; height: 10px; border: 1px solid var(--rb-muted); display: inline-block; flex: 0 0 10px;
}
.rb-disc-state.on { background: var(--rb-good); border-color: var(--rb-good); }

.rb-standings li { flex-wrap: wrap; }
.rb-standing-scale { display: flex; gap: 2px; margin-left: auto; }
.rb-scale-cell {
  font-family: var(--rb-body); font-size: 10px; font-weight: 700;
  width: 24px; text-align: center; line-height: 18px;
  border: 1px solid var(--rb-hairline); color: var(--rb-muted);
}
.rb-scale-cell.on { color: var(--rb-void); }
.rb-scale-good.on { background: var(--rb-yellow); border-color: var(--rb-yellow); }
.rb-scale-bad.on { background: var(--rb-danger); border-color: var(--rb-danger); }

/* standing as a signed value plus its word, not a seven-box rating widget */
.rb-standing-value {
  font-family: var(--rb-body); font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--rb-white);
  min-width: 30px; text-align: right;
}
.rb-standing-good { color: var(--rb-white); }
.rb-standing-bad { color: var(--rb-danger); }
.rb-standing-scale { display: none; }
.rb-stat-small { font-size: 12px; font-weight: 400; color: var(--rb-muted); }

/* ---- hit locations ---- */
.rb-species-select { width: 130px; font-size: 12px; margin-left: 4px; }
.rb-loctable td { font-size: 12px; }
.rb-mono-cell { font-family: var(--rb-mono); font-size: 11px; color: var(--rb-muted); text-align: right; }
/* was display:flex on a <td>, which takes the cell out of table layout entirely */
.rb-loc-cell { white-space: nowrap; }
.rb-loc-flag {
  font-family: var(--rb-body); font-size: 9px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--rb-void); background: var(--rb-yellow); padding: 0 5px;
}
.rb-loc-flag-x { background: var(--rb-danger); }
.rb-loc-row-disabled td { color: var(--rb-yellow); }
.rb-loc-row-destroyed td { color: var(--rb-danger); }
.rb-location .rb-loc-name { font-size: 17px; font-weight: 700; color: var(--rb-white); }
.rb-location .rb-loc-dmg { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rb-yellow); }
.rb-location .rb-loc-of { font-family: var(--rb-mono); font-size: 12px; color: var(--rb-muted); }
.rb-loc-effect { font-size: 12px; margin: 8px 0 0; border-left: 3px solid var(--rb-yellow); padding-left: 9px; }
.rb-loc-disabled .rb-loc-effect { border-left-color: var(--rb-yellow); }
.rb-loc-destroyed .rb-loc-effect { border-left-color: var(--rb-danger); color: var(--rb-danger); }
.rb-sr-action {
  display: block; font-family: var(--rb-body); font-size: 9px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--rb-yellow);
}
.rb-sr-action.rb-sr-default { color: var(--rb-muted); font-weight: 400; font-style: italic; }


/* --- House dice ---------------------------------------------------------
   Two chips, tens and units, read the way the table reads a percentile roll.
   Squared, flat, no gradient — the same discipline as every other panel. */
.rb-chat-result { display: flex; align-items: center; gap: 12px; }
.rb-dice { display: flex; gap: 5px; }
.rb-die {
  position: relative;
  min-width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rb-deep);
  border: 1px solid var(--rb-line);
  box-shadow: inset 0 0 0 1px var(--rb-void);
  font-family: var(--rb-display); font-size: 14px; line-height: 1;
  color: var(--rb-yellow);
  font-variant-numeric: tabular-nums;
}
/* The tens die carries the arc: one yellow hairline, the shape everyone knows. */
.rb-die-tens::after {
  content: ""; position: absolute; left: 3px; right: 3px; bottom: 3px; height: 7px;
  border-top: 1px solid var(--rb-hairline);
  border-radius: 60% 60% 0 0 / 100% 100% 0 0;
}
.rb-die-units { background: var(--rb-blue); }
.rb-chat-outcome { display: flex; flex-direction: column; gap: 1px; }
.rb-axis { font-size: 10px; color: var(--rb-muted); margin: 3px 0 0; }

/* --- Coherence -----------------------------------------------------------
   The one place red is allowed: it marks a character coming apart. */
.rb-coherence .rb-coh-reason { font-size: 11px; color: var(--rb-muted); }
.rb-coh-track { display: flex; gap: 3px; margin: 7px 0; }
.rb-coh-track .rb-pip {
  width: 12px; height: 12px; background: transparent; border: 1px solid var(--rb-line);
}
.rb-coh-track .rb-pip.on { background: var(--rb-yellow); border-color: var(--rb-yellow); }
.rb-coh-crossed {
  margin: 6px 0 0; padding: 5px 7px; border-left: 2px solid var(--rb-yellow);
  font-size: 11px; color: var(--rb-white);
}
.rb-coh-unmoored .rb-coh-track .rb-pip.on,
.rb-coh-displaced .rb-coh-track .rb-pip.on { background: #e2564d; border-color: #e2564d; }
.rb-cohgroup .rb-cohband {
  display: block; font-family: var(--rb-body); font-size: 8px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rb-muted);
}
.rb-cohbtn { color: var(--rb-yellow); padding: 0 5px; cursor: pointer; }
.rb-cohgroup.rb-coh-unmoored .rb-cohband,
.rb-cohgroup.rb-coh-displaced .rb-cohband { color: #e2564d; }
.rb-rank {
  display: block; width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--rb-hairline); padding: 1px 0 2px;
  font-family: var(--rb-body); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rb-muted);
}
.rb-rank:focus { outline: none; border-bottom-color: var(--rb-yellow); color: var(--rb-white); }
.rb-caseline { display: flex; gap: 8px; margin: 0 0 8px; }
.rb-across, .rb-debrief, .rb-closecase {
  font-family: var(--rb-body); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px;
  border: 1px solid var(--rb-line); color: var(--rb-muted); cursor: pointer;
}
.rb-across.on { background: var(--rb-yellow); border-color: var(--rb-yellow); color: var(--rb-void); }
.rb-closecase { margin-left: auto; border-color: var(--rb-yellow); color: var(--rb-yellow); }
.rb-disabled { opacity: .4; pointer-events: none; }

/* --- Talents ------------------------------------------------------------- */
.rb-talents { list-style: none; margin: 0 0 14px; padding: 0; }
.rb-talent {
  display: grid; grid-template-columns: 40px 1fr auto 18px;
  gap: 10px; align-items: start;
  padding: 8px 6px; border-bottom: 1px solid var(--rb-hairline);
}
.rb-talent-icon { width: 38px; height: 38px; border: 1px solid var(--rb-line); }
.rb-talent-name {
  display: block; font-family: var(--rb-body); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--rb-yellow);
}
.rb-talent-summary { font-size: 12px; color: var(--rb-white); margin: 2px 0 3px; }
.rb-talent-rule { font-size: 11px; color: var(--rb-muted); line-height: 1.35; }
.rb-talent-cost { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.rb-talent-coh {
  font-family: var(--rb-body); font-size: 11px; font-weight: 700;
  color: #e2564d; border: 1px solid #e2564d; padding: 1px 5px;
}
.rb-talent-uses, .rb-talent-bonus {
  font-family: var(--rb-body); font-size: 10px; font-weight: 700;
  color: var(--rb-muted); font-variant-numeric: tabular-nums;
}

/* Item icons in lists: small, square, never competing with the value beside them */
.rb-li-icon {
  width: 22px; height: 22px; vertical-align: middle;
  margin-right: 7px; border: 1px solid var(--rb-hairline); flex: 0 0 auto;
}
.rb-td-icon { white-space: nowrap; }
.rb-skill .rb-li-icon { width: 18px; height: 18px; margin: 0; }

/* --- Contact and device controls ---------------------------------------- */
.rb-contact-bar, .rb-devicebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 7px 0 2px; padding: 6px 0 0; border-top: 1px solid var(--rb-hairline);
}
.rb-cbtn {
  font-family: var(--rb-body); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border: 1px solid var(--rb-line);
  color: var(--rb-yellow); cursor: pointer;
}
.rb-cbtn:hover { background: var(--rb-yellow); color: var(--rb-void); border-color: var(--rb-yellow); }
.rb-cbtn-alt { color: var(--rb-muted); }
.rb-cstate { font-size: 11px; color: var(--rb-muted); margin-left: auto; }
.rb-devfn { display: flex; align-items: center; gap: 6px; }
.rb-devfn-why { font-size: 10px; color: var(--rb-muted); }
.rb-devfn-blocked .rb-devfn-why { color: #e2564d; }
.rb-talent-passive {
  font-family: var(--rb-body); font-size: 9px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rb-muted);
}

/* --- Generator buttons --------------------------------------------------- */
.rb-genbar { display: flex; gap: 6px; padding: 6px 4px; }
.rb-genbtn {
  flex: 1; font-family: var(--rb-body); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 8px; background: var(--rb-deep);
  border: 1px solid var(--rb-line); color: var(--rb-yellow); cursor: pointer;
}
.rb-genbtn:hover { background: var(--rb-yellow); color: var(--rb-void); border-color: var(--rb-yellow); }
.rb-gen .form-group { margin-bottom: 6px; }
.rb-skillbar { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.rb-skillbar .rb-dim { margin-right: auto; font-size: 11px; }
.rb-skill-empty { font-size: 11px; color: var(--rb-muted); padding: 3px 0 3px 20px; font-style: italic; }

/* --- Reaction rail -------------------------------------------------------
   The paper sheet's seven boxes, on screen. The base is the only number the
   player ever calculates; the rail is filled in once and clipped thereafter. */
.rb-railbox { border: 1px solid var(--rb-hairline); padding: 10px; margin: 0 0 14px; }
.rb-rail-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rb-rail-base {
  font-family: var(--rb-display); font-size: 26px; color: var(--rb-yellow);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.rb-rail-cap {
  font-family: var(--rb-body); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rb-white);
}
.rb-rail-head .rb-dim { margin-left: auto; font-size: 11px; }
.rb-rail { border-collapse: collapse; width: 100%; }
.rb-rail th, .rb-rail td {
  border: 1px solid var(--rb-hairline); padding: 4px 0; text-align: center;
  font-variant-numeric: tabular-nums;
}
.rb-rail th { font-family: var(--rb-body); font-size: 10px; color: var(--rb-muted); font-weight: 700; }
.rb-rail td { font-family: var(--rb-body); font-size: 15px; color: var(--rb-white); }
.rb-rail th.on, .rb-rail td.on { background: var(--rb-yellow); color: var(--rb-void); border-color: var(--rb-yellow); }

/* --- Reaction chat card --- */
.rb-reactlist { list-style: none; margin: 6px 0 0; padding: 0; }
.rb-reactrow {
  display: grid; grid-template-columns: 34px 1fr auto auto; gap: 8px;
  align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--rb-hairline);
}
.rb-react-total {
  font-family: var(--rb-body); font-size: 16px; font-weight: 700;
  color: var(--rb-yellow); text-align: right; font-variant-numeric: tabular-nums;
}
.rb-react-name { font-size: 12px; color: var(--rb-white); }
.rb-react-calc { font-family: var(--rb-mono); font-size: 10px; color: var(--rb-muted); }
.rb-react-flag, .rb-misfiled .rb-sr-action {
  font-family: var(--rb-body); font-size: 9px; font-weight: 700;
  letter-spacing: .08em; color: #e2564d;
}
.rb-checkrow { display: flex; gap: 16px; }
.rb-reactdlg .rb-rail { margin-bottom: 8px; }

/* Damage offered by a successful attack card */
.rb-chat-damage { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; flex-wrap: wrap; }
.rb-dmg-btn {
  flex: 0 1 auto; padding: 3px 10px; cursor: pointer;
  background: var(--rb-panel, #1b2a5e); color: var(--rb-accent, #ffd75e);
  border: 1px solid var(--rb-accent, #ffd75e); border-radius: 3px;
  font-family: inherit; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.rb-dmg-btn:hover:not(:disabled) { background: var(--rb-accent, #ffd75e); color: var(--rb-panel, #1b2a5e); }
.rb-dmg-btn:disabled { opacity: 0.45; cursor: default; }
.rb-dmg-note { font-size: 0.75rem; font-style: italic; color: var(--rb-muted, #9fb0d9); }

/* Carried but not worn — the ARMOUR box says why it reads zero */
.rb-armour.rb-unworn { position: relative; border-color: var(--rb-danger, #d9534f); }
.rb-armour.rb-unworn .rb-big { color: var(--rb-danger, #d9534f); }
.rb-unworn-flag {
  display: block; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rb-danger, #d9534f); margin-top: -2px;
}

/* Reaction — the working, so the printed number is not a magic figure */
.rb-react-work { margin: 4px 0 2px; font-size: 0.78rem; }
.rb-react-work summary { cursor: pointer; color: var(--rb-accent, #ffd75e); letter-spacing: 0.03em; }
.rb-worktable { width: 100%; border-collapse: collapse; margin-top: 4px; }
.rb-worktable th { text-align: left; font-weight: 600; padding: 1px 6px 1px 0; white-space: nowrap; }
.rb-worktable td { padding: 1px 0; color: var(--rb-muted, #9fb0d9); }
.rb-worknum { text-align: right; font-weight: 700; color: var(--rb-text, #e8eeff); width: 3em; }
.rb-worknote td { font-style: italic; font-size: 0.72rem; padding-bottom: 3px; }
.rb-workload .rb-worknum { color: var(--rb-danger, #d9534f); }
.rb-worktotal th, .rb-worktotal .rb-worknum { border-top: 1px solid var(--rb-line, #3b4a80); padding-top: 3px; }
.rb-worktotal .rb-worknum { color: var(--rb-accent, #ffd75e); font-size: 1rem; }

/* ============================================================
   The figure, and the hit-location table beside it
   ============================================================ */
.rb-bodyblock {
  display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr);
  gap: 18px; align-items: start; margin-bottom: 12px;
}
/* On a wide sheet the table used to stretch the full window, throwing the numbers
   a foot away from the names they belong to. */
.rb-bodyside { max-width: 560px; }
.rb-figure { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rb-body-svg { width: 100%; max-width: 180px; height: auto; display: block; }
.rb-figure-species {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rb-muted, #9fb0d9);
}
.rb-figure-roll { font-size: 0.72rem; }

/* Damage state. Read at a glance: pale = whole, red = gone. */
.rb-part {
  stroke: var(--rb-line, #3b4a80); stroke-width: 1.5;
  fill: var(--rb-panel-2, #24356b); transition: fill 120ms ease;
}
.rb-part-whole     { fill: var(--rb-panel-2, #24356b); }
.rb-part-grazed    { fill: #6d7a3f; }
.rb-part-hurt      { fill: #a8722c; }
.rb-part-disabled  { fill: #b2402f; stroke: #e08b7c; }
.rb-part-destroyed { fill: #5d1b16; stroke: #e08b7c; stroke-dasharray: 3 2; }
.rb-part:hover     { stroke: var(--rb-accent, #ffd75e); stroke-width: 2.2; }

/* The table was ragged because every column sized itself to its content.
   Fixed layout plus tabular numerals lines the digits up. */
/* Auto layout, not fixed. Fixed sized every column from the HEADER row, where the
   font is smaller, so 3.6em came out at ~39px and "RANGED" overflowed into its
   neighbour — which is why the header read MELEERANGETAKENARMO. Auto layout sizes
   each column to its widest cell instead, and nowrap stops the ranges breaking
   across two lines. The name column takes 99% so it absorbs all the slack and the
   numbers stay gathered on the right. */
.rb-loctable { table-layout: auto; width: auto; border-collapse: collapse; }
.rb-loctable th, .rb-loctable td {
  padding: 3px 10px; vertical-align: middle; white-space: nowrap;
}
.rb-loctable th:first-child, .rb-loctable td:first-child { padding-left: 2px; }
.rb-loctable th:last-child,  .rb-loctable td:last-child  { padding-right: 2px; }
/* Content-sized, not stretched. Giving the name column the slack pushed the
   numbers to the far edge of the panel, a hand's width from the row they describe.
   The table is now only as wide as it needs to be and the gutter is a fixed
   readable gap. */
.rb-col-loc { width: auto; text-align: left; padding-right: 22px; min-width: 6.5em; }
.rb-col-num { width: auto; text-align: right; font-variant-numeric: tabular-nums; }
.rb-loctable thead th {
  font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--rb-muted, #9fb0d9); border-bottom: 1px solid var(--rb-line, #3b4a80);
  padding-bottom: 4px;
}
.rb-loctable tbody td { font-size: 0.8rem; border-bottom: 1px solid var(--rb-hairline, #2a3763); }
.rb-loctable tbody tr:last-child td { border-bottom: none; }
.rb-loctable-compact th, .rb-loctable-compact td { padding: 2px 8px; }
.rb-loctable-compact tbody td { font-size: 0.76rem; }
.rb-locrow-disabled  td { color: #e8a99e; }
.rb-locrow-destroyed td { color: #e08b7c; text-decoration: line-through; }
.rb-locrow.rb-hi td { background: rgba(255, 215, 94, 0.12); }

.rb-sub-head {
  margin: 8px 0 3px; font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rb-accent, #ffd75e);
  border-bottom: 1px solid var(--rb-line, #3b4a80); padding-bottom: 2px;
}
.rb-wounds-compact li { font-size: 0.78rem; padding: 2px 0; }

/* Wounded banner on the skills tab — you cannot miss what is modifying every roll */
.rb-woundbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 8px; padding: 5px 9px; border-radius: 3px;
  background: rgba(178, 64, 47, 0.16); border: 1px solid var(--rb-danger, #b2402f);
}
.rb-woundbar-title {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rb-danger, #d9534f); font-weight: 700;
}
.rb-woundchip {
  font-size: 0.72rem; padding: 1px 7px; border-radius: 9px;
  background: rgba(0, 0, 0, 0.28); color: var(--rb-text, #e8eeff);
}
.rb-woundbar-pen { font-size: 0.72rem; color: var(--rb-muted, #9fb0d9); margin-left: auto; }

@media (max-width: 620px) { .rb-bodyblock { grid-template-columns: 1fr; } }

/* The figure's roll button was carrying a full sentence and wrapped to three
   lines. Short label, sentence moved to the tooltip. */
.rb-figure-roll {
  display: inline-block; white-space: nowrap; text-align: center;
  font-size: 0.7rem; letter-spacing: 0.04em; padding: 3px 10px; margin-top: 2px;
}
/* "No active wounds." was centred in a wide empty box, floating in the middle of
   nothing. It belongs on the left, under its heading, like every other row. */
.rb-bodyside .rb-empty {
  text-align: left; margin: 2px 0 0; font-size: 0.76rem; font-style: italic;
  color: var(--rb-muted, #9fb0d9);
}
.rb-bodyside .rb-sub-head { margin-top: 12px; }

/* ============================================================
   Dialogs — the callout boxes, dressed as the sheet
   Foundry's default is parchment and a serif face, which read as
   a different application sitting on top of the character sheet.
   ============================================================ */
.ringbrp-window.window-app,
.ringbrp-window.application {
  background: var(--rb-deep);
  color: var(--rb-white);
  font-family: var(--rb-body);
  border: 1px solid var(--rb-line);
  border-radius: 3px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}
.ringbrp-window .window-header {
  background: var(--rb-void);
  border-bottom: 1px solid var(--rb-line);
  color: var(--rb-yellow);
  font-family: var(--rb-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 10px;
}
.ringbrp-window .window-header .window-title { font-family: var(--rb-display); font-size: 11px; }
.ringbrp-window .window-header a,
.ringbrp-window .window-header .header-button { color: var(--rb-muted); text-transform: none; }
.ringbrp-window .window-header a:hover { color: var(--rb-yellow); }
.ringbrp-window .window-content {
  background: var(--rb-deep);
  color: var(--rb-white);
  font-family: var(--rb-body);
  font-size: 13px;
  padding: 12px 14px;
}

/* form rows: label left, control right, note beneath in muted small caps */
.ringbrp-window .form-group { display: block; margin-bottom: 12px; }
.ringbrp-window .form-group > label {
  display: block; margin-bottom: 4px;
  font-family: var(--rb-body); font-weight: 700;
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--rb-muted);
}
.ringbrp-window .form-group > label.rb-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: 0; text-transform: none;
  font-weight: 400; color: var(--rb-white); margin-bottom: 0;
}
.ringbrp-window input[type="text"],
.ringbrp-window input[type="number"],
.ringbrp-window select,
.ringbrp-window textarea {
  width: 100%; box-sizing: border-box;
  background: var(--rb-panel);
  color: var(--rb-white);
  border: 1px solid var(--rb-line);
  border-radius: 2px;
  padding: 5px 8px;
  font-family: var(--rb-body); font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.ringbrp-window select option { background: var(--rb-panel); color: var(--rb-white); }
.ringbrp-window input:focus, .ringbrp-window select:focus {
  outline: none; border-color: var(--rb-yellow);
  box-shadow: 0 0 0 2px var(--rb-yellow-dim);
}
.ringbrp-window input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--rb-yellow); margin: 0; flex: 0 0 auto;
}
.ringbrp-window .notes, .ringbrp-window .hint, .ringbrp-window p.notes {
  margin: 4px 0 0; font-size: 11px; line-height: 1.35;
  color: var(--rb-muted); font-style: normal;
}

/* buttons: yellow means the thing that commits */
.ringbrp-window .dialog-buttons { gap: 8px; margin-top: 4px; }
.ringbrp-window .dialog-button, .ringbrp-window button {
  background: var(--rb-panel);
  color: var(--rb-white);
  border: 1px solid var(--rb-line);
  border-radius: 2px;
  font-family: var(--rb-body); font-weight: 700;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 12px; line-height: 1;
}
.ringbrp-window .dialog-button:hover, .ringbrp-window button:hover {
  background: var(--rb-blue); border-color: var(--rb-yellow); color: var(--rb-yellow);
}
.ringbrp-window .dialog-button.default,
.ringbrp-window .dialog-buttons button:first-child {
  background: var(--rb-yellow); color: var(--rb-void); border-color: var(--rb-yellow);
}
.ringbrp-window .dialog-button.default:hover,
.ringbrp-window .dialog-buttons button:first-child:hover {
  background: var(--rb-white); color: var(--rb-void);
}
.ringbrp-window a { color: var(--rb-yellow); }
.ringbrp-window hr { border: none; border-top: 1px solid var(--rb-hairline); margin: 10px 0; }

/* Defending — the counter is the point: it shows what the next one costs */
.rb-defbar { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; flex-wrap: wrap; }
.rb-defbar-label {
  font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--rb-muted); font-weight: 700;
}
.rb-defbar-count { font-size: 0.74rem; color: var(--rb-muted); margin-left: auto; }

/* Weight sits with the rest of an item's numbers, tabular so a kit list scans */
.rb-mass { font-variant-numeric: tabular-nums; }
.rb-table .rb-col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The Quiet Arts — read as documents, not as a spell list */
.rb-powers > li { padding: 8px 0 10px; border-bottom: 1px solid var(--rb-hairline); }
.rb-powers > li:last-child { border-bottom: none; }
.rb-power-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rb-power-name { font-family: var(--rb-display); font-size: 12px; letter-spacing: 0.04em; }
.rb-power-val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rb-yellow); }
.rb-power-cost {
  font-size: 0.72rem; padding: 1px 7px; border-radius: 9px;
  background: rgba(0,0,0,0.28); color: var(--rb-danger);
}
.rb-power-push { margin-left: auto; }
.rb-power-summary { margin: 5px 0 2px; font-style: italic; color: var(--rb-white); font-size: 12px; }
.rb-power-rule { margin: 0; color: var(--rb-muted); font-size: 12px; line-height: 1.4; }
.rb-power-origin { margin: 4px 0 0; font-size: 11px; color: var(--rb-yellow-dim); }
.rb-power-granted, .rb-misfiled .rb-power-granted { border-left: 3px solid var(--rb-yellow); padding-left: 8px; }

/* The crossing panel — the one control the whole premise runs through */
.rb-crossbox {
  margin: 8px 0 12px; padding: 8px 10px; border-radius: 3px;
  border: 1px solid var(--rb-line); background: var(--rb-panel);
}
.rb-crossbox-across { border-color: var(--rb-yellow); }
.rb-crossbox-head { display: flex; align-items: center; gap: 10px; }
.rb-crossbox-title {
  font-family: var(--rb-display); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rb-yellow);
}
.rb-crossbox .rb-cross-all { margin-left: auto; }
.rb-crossbox .rb-hint { margin: 6px 0 8px; }
.rb-crosstable { width: 100%; }
.rb-crosstable .rb-actions { text-align: right; white-space: nowrap; }
.rb-crosstable .rb-actions .rb-cbtn { margin-left: 4px; }
.rb-artmark { color: var(--rb-yellow); font-size: 0.8em; }

/* --- Marksmanship: say what the choice buys ------------------------------ */
/* Both styles are shown, not just the chosen one — the point of the block is to
   make the choice comparable at the moment it is made. */
.rb-style-compare {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: grid; gap: 2px;
}
.rb-style-compare li {
  font-family: var(--rb-body); font-size: 9px; line-height: 1.4;
  color: var(--rb-muted); padding: 2px 5px;
  border-left: 2px solid var(--rb-hairline);
}
.rb-style-compare li.on { color: var(--rb-white); border-left-color: var(--rb-yellow); }
.rb-style-compare b { color: var(--rb-line); font-weight: 700; letter-spacing: .06em; }
.rb-style-compare li.on b { color: var(--rb-yellow); }

/* --- Defence outcome ------------------------------------------------------ */
.rb-defence { border-left: 3px solid var(--rb-line); padding-left: 8px; }
.rb-defence.rb-aside { border-left-color: var(--rb-yellow); }
.rb-defence.rb-through { border-left-color: var(--rb-red, #ff7a5c); }

/* --- Role card in the creation dialog ------------------------------------ */
.rb-rolecard {
  margin: 6px 0 10px; padding: 8px 10px;
  border-left: 2px solid var(--rb-yellow); background: var(--rb-deep);
}
.rb-rolecard-blurb {
  margin: 0; font-family: var(--rb-body); font-size: 11px; line-height: 1.45;
  color: var(--rb-white);
}
.rb-rolecard-facts {
  display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px;
  margin: 7px 0 0; font-family: var(--rb-body); font-size: 10px; line-height: 1.4;
}
.rb-rolecard-facts dt {
  color: var(--rb-muted); text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; white-space: nowrap;
}
.rb-rolecard-facts dd { margin: 0; color: var(--rb-line); }

/* --- Transport on the gear tab -------------------------------------------- */
.rb-vehicles li { display: flex; gap: 10px; align-items: center; }
.rb-vehicles .rb-strong { flex: 1 1 auto; }

/* --- Borrowed Authority --------------------------------------------------- */
.rb-authorities li {
  display: grid; gap: 3px; padding: 8px 6px;
  border-bottom: 1px solid var(--rb-hairline);
  border-left: 2px solid var(--rb-line);
}
.rb-authorities li.rb-auth-flagged { border-left-color: var(--rb-yellow); }
.rb-authorities li.rb-auth-dead { border-left-color: var(--rb-red, #ff7a5c); opacity: .55; }
.rb-auth-head { display: flex; gap: 8px; align-items: center; }
.rb-auth-head .rb-strong { flex: 0 0 auto; }
.rb-auth-trust {
  margin-left: auto; font-family: var(--rb-body); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; color: var(--rb-yellow);
}
.rb-auth-tag {
  font-family: var(--rb-body); font-size: 9px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 1px 6px; border: 1px solid var(--rb-yellow);
  color: var(--rb-yellow);
}
.rb-auth-body { display: flex; gap: 12px; flex-wrap: wrap; font-size: 10px; }
.rb-auth-flags, .rb-auth-merge-tag {
  font-family: var(--rb-body); font-size: 10px; color: var(--rb-yellow);
}
.rb-auth-acts { display: flex; gap: 6px; margin-top: 2px; }
.rb-auth-merge { margin: 6px 0 0; font-style: italic; color: var(--rb-yellow); }
.rb-auth.rb-auth-yes { border-left: 3px solid var(--rb-yellow); padding-left: 8px; }
.rb-auth.rb-auth-no { border-left: 3px solid var(--rb-line); padding-left: 8px; }
.rb-dossier { border-left: 3px solid var(--rb-line); padding-left: 8px; }
.rb-dossier-miss { opacity: .7; }
.rb-authuse .rb-check { display: block; font-size: 11px; margin: 2px 0; }