/* Character sheet (js/sheet.js), shared by the player portal and the GM's
   Characters screen. Phone-first: one column, big touch targets; wider
   screens get side-by-side cards. Uses the app's colour tokens (app.css). */
.cs-sheet { display: flex; flex-direction: column; gap: 1.1rem; color: var(--text); font-family: var(--font-body); }
.cs-section { display: flex; flex-direction: column; gap: 0.9rem; }
.cs-h {
  margin: 0.3rem 0 0; font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold);
}
.cs-label { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-display); }
.cs-hint { margin: 0; font-size: 0.85rem; color: var(--text-dim); line-height: 1.4; }
.cs-empty { color: var(--text-dim); font-style: italic; font-size: 0.9rem; }
.cs-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.cs-field.cs-inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.6rem; }
.cs-text, .cs-select, .cs-num { width: 100%; font-size: 1rem; }
.cs-num { width: 5rem; text-align: center; }
.cs-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--text-dim); }
.cs-check input { width: auto; min-height: unset; }
.cs-row { display: flex; gap: 0.5rem; align-items: center; }
.cs-row .cs-text { flex: 1 1 auto; }
.cs-row button { flex: 0 0 auto; }

/* identity */
.cs-identity { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.7rem 0.9rem; align-items: end; }
.cs-level { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; grid-column: 1 / -1; }
.cs-tier { font-size: 0.85rem; color: var(--text-dim); }

/* steppers */
.cs-stepper { display: inline-flex; align-items: center; gap: 0.35rem; }
.cs-step-btn {
  width: 2.6rem; height: 2.6rem; min-height: unset; padding: 0; border-radius: 50%;
  font-size: 1.3rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.cs-step-val { min-width: 1.8rem; text-align: center; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--gold-bright); }

/* pools */
.cs-pools { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.5rem; }
.cs-pool {
  display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.8rem; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--border-gold);
}
.cs-pool.hp { border-top-color: #c1584f; }
.cs-pool.focus { border-top-color: #6ec6ff; }
.cs-pool.inv { border-top-color: #e8d27a; }
.cs-pool.deflect { border-top-color: #9aa3b8; }
.cs-pool-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-display); }
.cs-pool-nums { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-dim); }
.cs-pool-cur { font-size: 1.6rem; font-weight: 700; color: var(--text); }
.cs-pools-hint { margin-top: -0.4rem; font-size: 0.78rem; }

/* attributes & defenses */
.cs-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.6rem; }
.cs-cat { padding: 0.6rem 0.8rem 0.7rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.45rem; }
.cs-cat-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; }
.cs-cat-physical .cs-cat-head { color: var(--cs-phys, #e0a36b); }
.cs-cat-cognitive .cs-cat-head { color: var(--cs-cog, #8fc7ff); }
.cs-cat-spiritual .cs-cat-head { color: var(--cs-spi, #c9a8f0); }
.cs-defense { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.cs-defense b { font-size: 1.7rem; color: var(--text); }
.cs-defense small { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); font-weight: 400; }
.cs-attr { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cs-attr-name { display: flex; flex-direction: column; font-weight: 600; }
.cs-attr-name small { font-size: 0.72rem; color: var(--text-dim); font-weight: 400; }

/* derived stats */
.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.5rem; }
.cs-stat { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.7rem; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--border); }
.cs-stat b { font-size: 1.05rem; }

/* level guide */
.cs-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.5rem; }
.cs-meter { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.5rem 0.7rem; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--border);
  width: 100%; min-height: unset; text-align: left; font: inherit; color: inherit; cursor: pointer; text-transform: none; letter-spacing: normal; }
.cs-meter:hover, .cs-meter:focus-visible { border-color: var(--border-gold); }
.cs-meter-go { color: var(--gold); }
/* where a Level guide box jumped to */
.cs-sheet .cs-h, .cs-sheet .cs-block, .cs-sheet .cs-section { scroll-margin-top: 5rem; }
@keyframes cs-glow { 0% { box-shadow: 0 0 0 2px var(--gold); } 100% { box-shadow: 0 0 0 2px transparent; } }
.cs-glow { animation: cs-glow 1.6s ease-out; border-radius: var(--radius); }
.cs-meter-val { font-weight: 600; }
.cs-meter-val[data-state="ok"] { color: var(--cs-ok, #8fe3a4); }
.cs-meter-val[data-state="under"] { color: var(--gold-bright); }
.cs-meter-val[data-state="over"] { color: var(--cs-warn, #ffb38a); }

/* skills */
.cs-skill-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)); gap: 0.4rem 1rem; }
.cs-skill-group { display: flex; flex-direction: column; gap: 0.3rem; }
.cs-skill-group .cs-h { margin-bottom: 0.2rem; }
.cs-skill {
  display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.5rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border);
}
.cs-mod {
  display: inline-flex; align-items: center; justify-content: center; height: 2.3rem; border-radius: 6px;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--gold-bright);
  background: var(--cs-accent-soft, rgba(240, 207, 106, 0.08)); border: 1px solid var(--border-gold);
}
.cs-skill-name { display: flex; flex-direction: column; font-weight: 600; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
.cs-skill-name small { font-size: 0.72rem; color: var(--text-dim); font-weight: 400; }
.cs-dots { display: inline-flex; gap: 0.1rem; }
.cs-dot {
  width: 2rem; height: 2.4rem; min-height: unset; padding: 0; border: none; background: none; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.cs-dot::before {
  content: ""; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  border: 2px solid var(--gold-dim); background: transparent; transition: background 0.12s ease, transform 0.12s ease;
}
.cs-dot.on::before { background: var(--gold-bright); border-color: var(--gold-bright); box-shadow: 0 0 8px var(--cs-accent-soft, rgba(240, 207, 106, 0.55)); }
.cs-dot.locked::before { border-style: dotted; border-color: rgba(156, 129, 68, 0.45); }
.cs-dot:hover { box-shadow: none; }
.cs-dot:hover:not(:disabled)::before { transform: scale(1.12); }
.cs-dot:disabled { opacity: 1; cursor: default; }
.cs-surges .cs-mod { color: #cfeaff; border-color: rgba(110, 198, 255, 0.55); background: rgba(110, 198, 255, 0.08); }
.cs-flash { min-height: 1.2em; color: var(--gold-bright); }

/* lists, chips */
.cs-block { display: flex; flex-direction: column; gap: 0.55rem; }
.cs-list { display: flex; flex-direction: column; gap: 0.5rem; }
.cs-item { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.55rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); }
.cs-item-top { display: flex; gap: 0.4rem; }
.cs-item-name { font-weight: 600; }
.cs-del { flex: 0 0 auto; width: 2.6rem; min-height: 2.6rem; padding: 0; font-size: 1.2rem; }
.cs-add { align-self: flex-start; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cs-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.4rem 0.3rem 0.75rem; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border-gold); font-size: 0.92rem;
}
.cs-chip button { min-height: unset; width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%; border: none; background: none; color: var(--text-dim); font-size: 1rem; }
.cs-details { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.8rem; background: var(--bg-2); }
.cs-details summary { cursor: pointer; font-family: var(--font-display); color: var(--gold); letter-spacing: 0.04em; min-height: 2.2rem; display: flex; align-items: center; }
.cs-details[open] { display: flex; flex-direction: column; gap: 0.6rem; }
.cs-bonus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.4rem 0.8rem; }
.cs-bonus { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.9rem; }
.cs-skill-bonuses { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cs-sub { margin-top: 0.3rem; }

/* read-only (e.g. a player's sheet you're only viewing) */
.cs-readonly .cs-step-btn, .cs-readonly .cs-add, .cs-readonly .cs-del { display: none; }

/* The "rank 3 opens at level 6" hint floats where it can be seen. */
.cs-flash:not(:empty) {
  position: sticky; bottom: 0.6rem; z-index: 2; padding: 0.55rem 0.8rem; border-radius: var(--radius);
  background: rgba(22, 28, 48, 0.97); border: 1px solid var(--border-gold); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* A themed sheet in the GM app gets its own backdrop so the look shows. */
#gm-sheet.themed { padding: 1rem; border-radius: var(--radius); border: 1px solid var(--border); }

/* ---------------------------------------------------------- actions ---
   js/actions.js: pools with spend buttons, filter + search, then cards. */
.ac-pools { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.5rem; }
.ac-pool {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.6rem; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--border-gold);
}
.ac-pool-hp { border-left-color: #c1584f; }
.ac-pool-focus { border-left-color: #6ec6ff; }
.ac-pool-investiture { border-left-color: #e8d27a; }
.ac-pool-label { flex: 1 1 auto; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-display); }
.ac-pool-val { font-family: var(--font-display); color: var(--text-dim); white-space: nowrap; }
.ac-pool-val b { font-size: 1.35rem; color: var(--text); }
.ac-pool-btn {
  width: 2.3rem; height: 2.3rem; min-height: unset; padding: 0; border-radius: 50%; flex: 0 0 auto;
  font-size: 1.2rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.ac-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ac-search { flex: 1 1 12rem; min-width: 0; font-size: 1rem; }
.ac-filters { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.ac-filter {
  min-height: 2.4rem; min-width: 2.6rem; padding: 0.2rem 0.55rem; font-size: 0.85rem; letter-spacing: -0.08em;
  background: var(--panel); color: var(--text-dim); border: 1px solid var(--border); box-shadow: none;
}
.ac-filter.on { color: var(--bg, #0b0e1a); background: var(--gold); border-color: var(--gold); }
/* Newspaper columns on wide screens so short and long sections pack together. */
.ac-cols { columns: 24rem 3; column-gap: 1.1rem; }
.ac-section { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; margin-bottom: 0.9rem; }
.ac-head { break-after: avoid; }
.ac-card, .ac-surge-head { break-inside: avoid; }
.ac-section.hidden, .ac-card.hidden { display: none; }
.ac-head {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 2.2rem; padding: 0.1rem 0;
  background: none; border: none; box-shadow: none; color: var(--gold); text-align: left;
  font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.ac-head::after { content: ""; order: 2; flex: 1 1 auto; height: 1px; background: var(--border-gold); opacity: 0.6; }
.ac-head > span:first-child { order: 1; }
.ac-chev { order: 3; transition: transform 0.15s; }
.ac-section.collapsed .ac-chev { transform: rotate(180deg); }
.ac-section.collapsed .ac-body { display: none; }
.ac-body { display: flex; flex-direction: column; gap: 0.45rem; }
.ac-card {
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--border-gold);
  border-radius: var(--radius); padding: 0.5rem 0.4rem 0.5rem 0.65rem;
}
.ac-main { display: flex; align-items: flex-start; gap: 0.5rem; }
.ac-text { flex: 1 1 auto; min-width: 0; line-height: 1.35; font-size: 0.9rem; color: var(--text-dim); }
.ac-icon { color: var(--gold); margin-right: 0.3rem; font-size: 0.8rem; letter-spacing: -0.12em; }
.ac-card[data-kind="reaction"] .ac-icon { color: #6ec6ff; }
.ac-card[data-kind="free"] .ac-icon { color: #8fd18f; }
.ac-card[data-kind="passive"] .ac-icon { color: #c9a8f0; }
.ac-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text); }
.ac-right { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; flex: 0 0 auto; max-width: 55%; }
.ac-skill, .ac-scale, .ac-atk, .ac-dmg {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
  min-width: 3.2rem; padding: 0.2rem 0.45rem; border-radius: 4px; background: rgba(255, 255, 255, 0.07);
}
.ac-skill b, .ac-atk b, .ac-dmg b, .ac-scale b { font-family: var(--font-display); font-size: 1rem; color: var(--text); white-space: nowrap; }
.ac-skill small, .ac-atk small, .ac-dmg small, .ac-scale small {
  font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap;
}
.ac-attack { display: inline-flex; gap: 2px; }
.ac-atk { border-radius: 4px 0 0 4px; background: rgba(255, 255, 255, 0.12); }
.ac-dmg { border-radius: 0 4px 4px 0; background: rgba(110, 198, 255, 0.14); }
.ac-cost {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
  min-height: 2.6rem; min-width: 3.6rem; padding: 0.2rem 0.45rem; border-radius: 4px; box-shadow: none;
  background: transparent; border: 1.5px solid #c1584f; color: #ef8a80;
}
.ac-cost b { font-size: 0.85rem; white-space: nowrap; }
.ac-cost small { font-size: 0.62rem; opacity: 0.85; white-space: nowrap; }
.ac-cost-investiture { border-color: #d9bf5c; color: #f0d77a; }
.ac-cost:not(:disabled):active { transform: scale(0.96); }
.ac-cost:disabled { opacity: 0.45; }
.ac-more {
  flex: 0 0 auto; width: 2.2rem; height: 2.4rem; min-height: unset; padding: 0; background: none; border: none; box-shadow: none;
  color: var(--text-dim); font-size: 1.1rem; transition: transform 0.15s;
}
.ac-card.open .ac-more { transform: rotate(180deg); }
.ac-detail { display: none; flex-wrap: wrap; gap: 0.35rem 0.9rem; align-items: center; margin-top: 0.45rem; padding-top: 0.4rem; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-dim); }
.ac-card.open .ac-detail { display: flex; }
.ac-detail .ac-cost { min-height: 2.2rem; }
.ac-page { color: var(--gold-dim, var(--gold)); font-style: italic; }
.ac-surge { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.55rem; border-radius: var(--radius); background: rgba(0, 0, 0, 0.22); border: 1px solid var(--border-gold); }
.ac-surge-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ac-surge-name { flex: 1 1 auto; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-bright, var(--gold)); }
.ac-scale { background: rgba(232, 210, 122, 0.16); }
.ac-surge-note { font-size: 0.8rem; }

/* ----------------------------------------------------- talent picker --- */
.tp-root { gap: 0.6rem; }
.cs-budget { margin: 0; font-size: 0.9rem; color: var(--text-dim); }
.cs-budget b[data-state="over"] { color: #ef8a80; }
.cs-budget b[data-state="under"] { color: var(--gold-bright, var(--gold)); }
.tp-paths { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tp-path {
  min-height: 2.5rem; padding: 0.3rem 0.9rem; border-radius: 999px; background: var(--panel); color: var(--text-dim);
  border: 1px solid var(--border); box-shadow: none;
}
.tp-path.on { background: var(--gold); border-color: var(--gold); color: var(--bg, #0b0e1a); font-weight: 700; }
.tp-tree { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border-gold); }
.tp-tree-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 0.8rem; }
.tp-tree-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.06em; color: var(--gold-bright, var(--gold)); }
.tp-spec { border-top: 1px solid var(--border); padding-top: 0.3rem; }
.tp-spec > summary {
  display: flex; justify-content: space-between; align-items: center; min-height: 2.4rem; cursor: pointer;
  font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; color: var(--gold);
}
.tp-list { display: flex; flex-direction: column; gap: 0.35rem; padding-bottom: 0.3rem; }
.tp-talent {
  display: flex; align-items: flex-start; gap: 0.6rem; width: 100%; text-align: left; min-height: 3rem;
  padding: 0.5rem 0.6rem; border-radius: var(--radius); box-shadow: none; font-weight: 400;
  background: rgba(0, 0, 0, 0.18); border: 1px solid var(--border); color: var(--text);
}
.tp-talent.taken { border-color: var(--gold); background: rgba(232, 210, 122, 0.12); }
.tp-talent.locked { opacity: 0.6; }
.tp-talent:disabled { cursor: default; }
.tp-check {
  flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-gold); color: var(--gold); font-weight: 700;
}
.tp-talent.taken .tp-check { background: var(--gold); color: var(--bg, #0b0e1a); border-color: var(--gold); }
.tp-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.tp-name { font-family: var(--font-display); font-weight: 700; }
.tp-name small { font-weight: 400; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.tp-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; font-size: 0.75rem; color: var(--text-dim); }
.tp-icon { color: var(--gold); letter-spacing: -0.12em; }
.tp-cost.focus { color: #8fd0ff; }
.tp-cost.investiture { color: #f0d77a; }
.tp-needs { color: #ef8a80; }
.tp-sum { font-size: 0.85rem; color: var(--text-dim); line-height: 1.35; }

/* ------------------------------------------------- level up (limits) --- */
.cs-step-btn.blocked { opacity: 0.4; }
.cs-levelup-btn {
  min-height: 2.4rem; padding: 0.3rem 0.9rem; border-radius: 999px; font-weight: 700;
  background: var(--gold); border-color: var(--gold); color: var(--bg, #0b0e1a);
}
.tp-talent.fixed { cursor: default; }

/* ---------------------------------------------- walkthrough (levelup.js) --- */
body.lu-open { overflow: hidden; }
.lu-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--bg, #0b0e1a); color: var(--text); font-family: var(--font-body);
}
.lu-head { flex: 0 0 auto; padding: 0.7rem 1rem 0.5rem; border-bottom: 1px solid var(--border-gold); background: var(--bg-2, var(--bg)); }
.lu-title { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--gold-bright, var(--gold)); }
.lu-close { width: 2.6rem; height: 2.6rem; min-height: unset; padding: 0; font-size: 1.5rem; line-height: 1; background: none; border: none; box-shadow: none; color: var(--text-dim); }
.lu-steps { display: flex; gap: 0.3rem; margin: 0.45rem 0 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.lu-steps li {
  flex: 0 0 auto; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.04em;
  border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap;
}
.lu-steps li.done { color: var(--gold); border-color: var(--border-gold); }
.lu-steps li.on { background: var(--gold); border-color: var(--gold); color: var(--bg, #0b0e1a); font-weight: 700; }
.lu-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.8rem; max-width: 56rem; width: 100%; margin: 0 auto; box-sizing: border-box; }
.lu-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-gold); background: var(--bg-2, var(--bg));
}
.lu-foot button { min-height: 2.9rem; min-width: 6rem; }
.lu-next { margin-left: auto; }
.lu-status { flex: 1 1 auto; margin: 0; font-size: 0.85rem; color: var(--gold-bright, var(--gold)); text-align: center; min-width: 0; }
.lu-status.bad { color: #ef8a80; }
.lu-lead { margin: 0; font-size: 1rem; line-height: 1.45; }
.lu-left { align-self: flex-start; padding: 0.35rem 0.8rem; border-radius: var(--radius); background: rgba(232, 210, 122, 0.14); border: 1px solid var(--gold); color: var(--text); }
.lu-left b { font-size: 1.3rem; color: var(--gold-bright, var(--gold)); font-family: var(--font-display); }
.lu-left.done { border-color: var(--border); background: var(--panel); }
.lu-left.done b { color: var(--text-dim); }
.lu-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.5rem; }
.lu-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; text-align: left; padding: 0.7rem 0.8rem;
  min-height: 4rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); color: var(--text); box-shadow: none; font-weight: 400;
}
.lu-card b { font-family: var(--font-display); font-size: 1.05rem; }
.lu-card span { font-size: 0.85rem; color: var(--text-dim); line-height: 1.35; }
.lu-card small { font-size: 0.75rem; color: var(--gold); }
.lu-card.on { border-color: var(--gold); background: rgba(232, 210, 122, 0.14); box-shadow: inset 0 0 0 1px var(--gold); }
.lu-gains { margin: 0; padding-left: 1.2rem; line-height: 1.6; }
.lu-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.5rem; }
.lu-stat { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.7rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); }
.lu-stat b { font-family: var(--font-display); font-size: 1.15rem; }
.lu-stat small { font-size: 0.72rem; color: var(--text-dim); }
.lu-attrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.6rem; }
.lu-attr-cat { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem 0.8rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); }
.lu-row { display: flex; align-items: center; gap: 0.45rem; min-height: 2.8rem; }
.lu-row-name { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.lu-row-name small { margin-left: 0.35rem; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--text-dim); font-weight: 400; }
.lu-skill-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 0.4rem 1.2rem; }
.lu-skill-group { display: flex; flex-direction: column; }
.lu-skill { border-bottom: 1px solid var(--border); }
.lu-skill.raised .lu-row-name { color: var(--gold-bright, var(--gold)); }
.lu-mod { width: 2.3rem; text-align: center; font-family: var(--font-display); font-weight: 700; }
.lu-pips { display: inline-flex; gap: 3px; }
.lu-pips i { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 1.5px solid var(--border-gold); }
.lu-pips i.on { background: var(--gold); border-color: var(--gold); }
.lu-pips i.locked { opacity: 0.3; border-style: dashed; }
.lu-picker { display: flex; flex-direction: column; gap: 0.6rem; }
.lu-review { margin: 0; padding: 0.8rem 0.8rem 0.8rem 1.8rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border-gold); line-height: 1.6; }
.lu-warn { margin: 0; padding: 0.6rem 0.8rem; border-radius: var(--radius); border: 1px solid #c1584f; color: #ef8a80; }
.lu-row .cs-step-btn:disabled { opacity: 0.3; }

/* ---------------------------------------------------------- equipment --- */
.eq-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.5rem; }
.eq-sum { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.7rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); }
.eq-sum b { font-family: var(--font-display); font-size: 1.2rem; }
.eq-list { display: flex; flex-direction: column; gap: 0.5rem; }
.eq-item {
  display: flex; flex-direction: column; gap: 0.45rem; padding: 0.6rem 0.7rem; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--border);
}
.eq-item.equipped { border-left-color: var(--gold); }
.eq-item-top { display: flex; align-items: center; gap: 0.5rem; }
.eq-name { flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-weight: 700; }
.eq-hands { display: inline-flex; flex: 0 0 auto; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-gold); }
.eq-hand, .ac-hand {
  min-height: 2.3rem; padding: 0.15rem 0.6rem; border: none; border-radius: 0; box-shadow: none;
  background: transparent; color: var(--text-dim); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
}
.eq-hand + .eq-hand, .ac-hand + .ac-hand { border-left: 1px solid var(--border-gold); }
.eq-hand.on, .ac-hand.on { background: var(--gold); color: var(--bg, #0b0e1a); }
.eq-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.eq-kind {
  min-height: unset; padding: 0; background: none; border: none; box-shadow: none; font-weight: 400;
  color: var(--text-dim); font-size: 0.85rem; text-decoration: underline dotted; text-underline-offset: 3px; text-align: left;
}
.eq-expert { min-height: 2rem; padding: 0.1rem 0.7rem; font-size: 0.78rem; border-radius: 999px; }
.eq-expert.on { display: inline-flex; align-items: center; color: var(--gold-bright, var(--gold)); font-size: 0.8rem; font-weight: 700; }
.eq-traits { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.eq-trait {
  min-height: 1.9rem; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; box-shadow: none;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); color: var(--text);
}
.eq-trait.expert { border-color: var(--gold); color: var(--gold-bright, var(--gold)); background: rgba(232, 210, 122, 0.1); }
.eq-trait.locked { opacity: 0.45; border-style: dashed; }
.eq-trait.removed { text-decoration: line-through; opacity: 0.55; }
.eq-notes { font-size: 0.9rem; }
.eq-add-select { max-width: 22rem; }
.eq-custom { margin-top: 0.3rem; }
.eq-gear { display: flex; flex-direction: column; gap: 0.35rem; }
.eq-gear-row { display: grid; grid-template-columns: 4.2rem minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 0.4rem; align-items: center; }
.eq-qty { width: 100%; }
@media (max-width: 520px) {
  .eq-gear-row { grid-template-columns: 3.6rem minmax(0, 1fr) auto; }
  .eq-gear-row > input:nth-child(3) { grid-column: 2 / 3; }
}

/* Weapon cards on the Actions tab */
.ac-weapon.unequipped { opacity: 0.8; }
.ac-name-btn {
  display: inline; min-height: unset; padding: 0; background: none; border: none; box-shadow: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text); text-align: left;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.ac-traits { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; margin-top: 0.25rem; }
.ac-range { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-right: 0.2rem; }
.ac-traits .eq-trait { min-height: 1.7rem; padding: 0 0.5rem; font-size: 0.72rem; }
.ac-hands { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.ac-hand-btns { display: inline-flex; border: 1px solid var(--border-gold); border-radius: 6px; overflow: hidden; }
.ac-hand { min-height: 1.9rem; padding: 0 0.5rem; font-size: 0.66rem; }
.ac-hands small { font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.ac-pool-deflect { border-left-color: #9aa3b8; }

/* Side card (traits, weapons, armor) */
.eq-side {
  position: fixed; z-index: 70; top: 0; right: 0; bottom: 0; width: min(24rem, 100vw);
  display: flex; flex-direction: column; background: var(--panel, #161c30); color: var(--text);
  border-left: 1px solid var(--border-gold); box-shadow: -12px 0 32px rgba(0, 0, 0, 0.5);
  animation: eq-side-in 0.18s ease-out;
}
.eq-side.hidden { display: none; }
@keyframes eq-side-in { from { transform: translateX(1.5rem); opacity: 0; } }
.eq-side-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem;
  padding: calc(0.8rem + env(safe-area-inset-top)) 1rem 0.7rem; background: var(--bg-2, var(--bg)); border-bottom: 1px solid var(--border-gold);
}
.eq-side-title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--gold-bright, var(--gold)); letter-spacing: 0.04em; }
.eq-side-kind { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-top: 0.15rem; }
.eq-side-close { min-height: 2.4rem; width: 2.4rem; padding: 0; font-size: 1.4rem; background: none; border: none; box-shadow: none; color: var(--text-dim); }
.eq-side-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; line-height: 1.5; }
.eq-side-body p { margin: 0; }
.eq-side-note { color: var(--text-dim); font-size: 0.88rem; }
.eq-side-notes { font-style: italic; }
.eq-side-sub { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-top: 0.3rem; }
.eq-side-page { padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); color: var(--gold-dim, var(--gold)); font-style: italic; font-size: 0.85rem; }
.eq-stats { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin: 0; }
.eq-stats dt { color: var(--text-dim); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; align-self: center; }
.eq-stats dd { margin: 0; font-weight: 600; }
@media (max-width: 600px) {
  .eq-side { top: auto; left: 0; width: auto; max-height: 72vh; border-left: none; border-top: 1px solid var(--border-gold);
    border-radius: 14px 14px 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.55); animation-name: eq-side-up; }
  @keyframes eq-side-up { from { transform: translateY(2rem); opacity: 0; } }
}
.eq-trait { white-space: nowrap; }
.ac-pool { min-width: 0; }
@media (max-width: 480px) {
  .ac-pools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-pool { flex-wrap: wrap; row-gap: 0.2rem; justify-content: space-between; }
  .ac-pool-label { flex: 1 0 100%; }
}

/* ------------------------------------------------ expertises & goals --- */
.cs-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.cs-count { font-family: var(--font-display); font-weight: 700; color: var(--text-dim); font-size: 0.9rem; }
.cs-count[data-state="over"] { color: #ef8a80; }
.cs-count[data-state="under"] { color: var(--gold-bright, var(--gold)); }
.cs-exp { gap: 0.35rem; }
.cs-exp small {
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.05rem 0.35rem; border-radius: 4px;
  background: rgba(255, 255, 255, 0.08); color: var(--text-dim);
}
.cs-exp-weapon small { color: #ef9a7a; background: rgba(239, 154, 122, 0.12); }
.cs-exp-armor small { color: #9ab8ef; background: rgba(154, 184, 239, 0.12); }
.cs-exp-cultural small { color: #c9a8f0; background: rgba(201, 168, 240, 0.12); }
.cs-exp-utility small { color: #8fd18f; background: rgba(143, 209, 143, 0.12); }
.cs-goals.hidden { display: none; }
.cs-goal-list { display: flex; flex-direction: column; gap: 0.5rem; }
.cs-goal {
  display: flex; flex-direction: column; gap: 0.45rem; padding: 0.6rem 0.7rem; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--border-gold);
}
.cs-goal.done { border-left-color: #8fe3a4; }
.cs-goal-top { display: flex; align-items: flex-start; gap: 0.5rem; }
.cs-goal-text { flex: 1 1 auto; min-width: 0; resize: vertical; font-size: 0.98rem; }
.cs-goal.done .cs-goal-text { color: var(--text-dim); }
.cs-goal-boxes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.cs-goal-box {
  width: 2.2rem; height: 2.2rem; min-height: unset; padding: 0; border-radius: 6px; box-shadow: none;
  background: transparent; border: 2px solid var(--border-gold); color: var(--bg, #0b0e1a); font-weight: 800;
}
.cs-goal-box.on { background: var(--gold); border-color: var(--gold); }
.cs-goal.done .cs-goal-box.on { background: #8fe3a4; border-color: #8fe3a4; }
.cs-goal-adj { width: 2rem; height: 2rem; min-height: unset; padding: 0; border-radius: 50%; font-size: 1rem; }
.cs-goal-state { margin-left: auto; font-size: 0.8rem; color: var(--text-dim); font-family: var(--font-display); letter-spacing: 0.04em; }
.cs-goal.done .cs-goal-state { color: #8fe3a4; font-weight: 700; }
.cs-sheet .cs-goal-text { min-height: 2.9rem; height: auto; field-sizing: content; max-height: 10rem; }

/* Expertise type picker, browse list and chips that open a side card */
.cs-exp-add { flex-wrap: wrap; }
.cs-exp-add .cs-text { flex: 1 1 12rem; }
.cs-exp-type { width: auto; flex: 0 0 auto; }
.cs-exp-open { display: inline-flex; align-items: center; gap: 0.35rem; min-height: unset; padding: 0; background: none; border: none; box-shadow: none; color: inherit; font: inherit; }
.cs-exp-specialist small { color: var(--gold-bright, var(--gold)); background: rgba(232, 210, 122, 0.14); }
.cs-exp-browse { display: flex; flex-direction: column; gap: 0.4rem; }
.cs-exp-options { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cs-exp-option { min-height: 2.2rem; padding: 0.15rem 0.7rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; box-shadow: none; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--text); }
.cs-exp-option.got { opacity: 0.55; }
/* Story sub-tabs */
.cs-subtabs { display: flex; gap: 0.3rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); padding-bottom: 0.1rem; }
.cs-subtab {
  flex: 0 0 auto; min-height: 2.5rem; padding: 0.3rem 0.9rem; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; box-shadow: none; color: var(--text-dim); font-family: var(--font-display); letter-spacing: 0.05em;
}
.cs-subtab.on { color: var(--gold-bright, var(--gold)); border-bottom-color: var(--gold); }
.cs-subpane { display: flex; flex-direction: column; gap: 0.9rem; }
.cs-subpane.hidden { display: none; }
.cs-chip .cs-exp-open { width: auto; height: auto; border-radius: 0; color: var(--text); font-size: inherit; text-align: left; }
.eq-side-body .cs-text { box-sizing: border-box; max-width: 100%; }
/* Extras allowed by the GM (Level guide) */
.cs-extras-note { color: var(--gold-bright, var(--gold)); }
.cs-extras .cs-field { margin-top: 0.5rem; }
/* health: take damage / heal / rests */
.cs-hp { display: flex; flex-direction: column; gap: 0.5rem; }
.cs-hp-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.cs-hp-btn { padding: 0.5rem 0.3rem; font-size: 0.85rem; line-height: 1.15; }
.cs-hp-btn.dmg { border-color: #c1584f; }
.cs-hp-btn.heal { border-color: #6fae7c; }
.cs-hp-btn.active { background: var(--gold); color: var(--bg, #0b0f1a); }
.cs-hp-panel { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem 0.8rem; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--border-gold); }
.cs-hp-num { width: 6rem; font-size: 1.2rem; }
.cs-hp-preview { margin: 0; font-family: var(--font-display); color: var(--gold-bright, var(--gold)); }
.cs-hp-split { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; }
.cs-hp-share { display: inline-flex; align-items: center; gap: 0.4rem; }
.cs-hp-share b { min-width: 1.6rem; text-align: center; font-size: 1.3rem; }
.cs-hp-actions { gap: 0.5rem; }
@media (max-width: 420px) { .cs-hp-bar { grid-template-columns: repeat(2, 1fr); } }
/* − / + on the Focus and Investiture boxes */
.cs-pool-adj { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.cs-pool-btn { width: 2.4rem; height: 2.2rem; min-height: unset; padding: 0; border-radius: 999px; font-size: 1.2rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; }

/* ---- talent tree diagram (actions.js renderDiagram) ---- */
.tp-view { display: inline-flex; align-self: flex-start; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.tp-view-btn { min-height: unset; padding: 0.3rem 0.9rem; border: none; border-radius: 0; background: transparent; font-size: 0.85rem; }
.tp-view-btn.on { background: var(--gold); color: var(--bg, #0b0e1a); font-weight: 700; }
.tp-spec-tabs { display: flex; gap: 0.3rem; overflow-x: auto; scrollbar-width: none; }
.tp-spec-tab { flex: 1 0 auto; min-height: unset; padding: 0.4rem 0.6rem; font-size: 0.82rem; border-radius: var(--radius); }
.tp-spec-tab small { color: var(--text-dim); }
.tp-spec-tab.on { border-color: var(--gold); background: rgba(232, 210, 122, 0.14); color: var(--gold-bright, var(--gold)); }
.tp-canvas { position: relative; display: flex; flex-direction: column; gap: 1.6rem; padding: 0.4rem 0 0.2rem; }
.tp-lines { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.tp-line { fill: none; stroke: var(--border, #3a4258); stroke-width: 1.6; }
.tp-line.next { stroke: var(--gold-dim, #8a7a44); }
.tp-line.lit { stroke: var(--gold); stroke-width: 2.4; }
.tp-line.any { stroke-dasharray: 4 4; }
.tp-keyrow { display: flex; justify-content: center; position: relative; z-index: 1; }
.tp-cols { display: grid; grid-template-columns: 1fr; gap: 1rem; position: relative; z-index: 1; }
.tp-col { display: none; flex-direction: column; gap: 1.6rem; }
.tp-col.on { display: flex; }
.tp-col-head { display: none; }
.tp-row { display: flex; justify-content: center; gap: 0.4rem; }
.tp-wide .tp-spec-tabs { display: none; }
.tp-wide .tp-cols { grid-template-columns: var(--tp-cols, repeat(var(--tp-n, 3), 1fr)); }
.tp-wide .tp-col { display: flex; }
.tp-wide .tp-col-head { display: flex; justify-content: center; gap: 0.4rem; align-items: baseline; font-family: var(--font-display);
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: -0.8rem;
  width: fit-content; margin-inline: auto; background: var(--panel); padding: 0 0.4rem; border-radius: 0.3rem; }
.tp-wide .tp-col-head small { color: var(--text-dim); letter-spacing: 0; text-transform: none; }

.tp-node {
  flex: 1 1 0; min-width: 0; max-width: 9.5rem; min-height: 3.6rem; padding: 0.35rem 0.4rem 0.3rem; border-radius: 0.7rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; text-align: center;
  background: var(--bg-2, #141a2a); border: 1px solid var(--border); color: var(--text); position: relative; line-height: 1.15;
}
.tp-node-name { font-family: var(--font-display); font-weight: 700; font-size: 0.76rem; overflow-wrap: break-word; hyphens: auto; }
.tp-node-meta { display: flex; gap: 0.3rem; font-size: 0.66rem; color: var(--text-dim); }
.tp-node-mark { position: absolute; top: -0.55rem; right: -0.35rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.66rem; background: var(--panel); border: 1px solid var(--border); }
.tp-node.taken { border-color: var(--gold); background: rgba(232, 210, 122, 0.18); }
.tp-node.taken .tp-node-mark { background: var(--gold); color: var(--bg, #0b0e1a); border-color: var(--gold); }
.tp-node.avail { border-color: var(--gold-dim, #8a7a44); box-shadow: 0 0 0 1px rgba(232, 210, 122, 0.25), 0 0 12px rgba(232, 210, 122, 0.18); }
.tp-node.avail .tp-node-mark { color: var(--gold); border-color: var(--gold-dim, #8a7a44); }
.tp-node.locked { opacity: 0.55; }
.tp-node.locked .tp-node-mark { font-size: 0.55rem; }
.tp-node.key { max-width: 12rem; min-width: 9rem; flex: 0 1 auto; padding-inline: 0.9rem; }
.tp-node.key .tp-node-name { font-size: 0.86rem; }
.tp-legend { font-size: 0.75rem; margin: 0; }
.tp-lg { display: inline-block; min-width: 1rem; text-align: center; }
.tp-lg.taken, .tp-lg.avail { color: var(--gold); }
.tp-side-state { font-weight: 700; }
.tp-side-state.taken, .tp-side-state.avail { color: var(--gold-bright, var(--gold)); }
.tp-side-state.locked { color: #ef8a80; }
.tp-side-meta { color: var(--text-dim); }
.tp-side-rel b { color: var(--gold); font-weight: 600; }
.tp-side-btn { width: 100%; margin-top: 0.4rem; background: var(--gold); color: var(--bg, #0b0e1a); border-color: var(--gold); font-weight: 700; }
.tp-side-btn.remove { background: transparent; color: #ef8a80; border-color: #ef8a80; }
.tp-side-btn.blocked { background: transparent; color: var(--text-dim); border-color: var(--border); }
.tp-dot { margin-left: 0.3rem; font-size: 0.55rem; vertical-align: middle; color: var(--gold); }