/* Requests 50/52, OB-098: six role glyphs and inks, shared by every card context. */
.role-flow { --role-ink: #8cdde9; }
.role-clarity { --role-ink: #ceb1ff; }
.role-strike { --role-ink: #ff9a92; }
.role-noise { --role-ink: #9ce4bd; }
.role-resource { --role-ink: #f2d28a; }
.role-burden { --role-ink: #c4bbc8; }
/* OB-122: keep effect highlights readable on dark cards, also after feedback.css. */
.card:not(.kind-crisis) .text .tx-energy { color: #ffb6a2; }
.card:not(.kind-crisis) .text .tx-trust { color: #d9c0ff; }
.card:not(.kind-crisis) .text .tx-st { color: var(--stc); }
/* The role is a colour and an open glyph, shared by hand, field, deck and inspector. */
.card .card-role { display: inline-flex; align-items: center; gap: calc(4px * var(--s)); max-width: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--role-ink); font-size: calc(9px * var(--s)); line-height: 1.15; }
.card-role svg { width: calc(14px * var(--s)); height: calc(14px * var(--s)); flex: none; }
.card-role svg, .ins-role svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card[data-role] .stats { flex-wrap: wrap; row-gap: calc(3px * var(--s)); }
.card .card-fate { width: 100%; color: var(--muted); font-size: calc(8px * var(--s)); line-height: 1.2; }
.card .trait-owner { color: var(--paper); }
.card .trait-keep, .card .trait-fragile, .card .trait-exhaust { border: 0; background: none; padding: 0; }
.ins-role { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; border: 0; background: none; padding: 12px 0; margin: 16px 0; color: var(--role-ink); font-size: calc(16px * var(--fs) / 1.12); line-height: 1.5; }
.ins-role svg { width: 28px; height: 28px; }
.ins-role span { flex-basis: 100%; color: var(--paper-2); }
.ins-practice { font-size: calc(15px * var(--fs) / 1.12); color: #cfb5f4; }
@media (pointer: coarse) and (orientation: portrait) and (max-device-width: 700px) {
  .inspect .ins-stage { position: relative; }
  .inspect .ins-role, .inspect .ins-week, .inspect .ins-practice, .inspect .model-note, .inspect .pg-v, .inspect .pg-v small, .inspect .pg-v code, .inspect .pg-v b, .inspect .pg-v b.up { font-size: calc(48px * var(--fs) / 1.12); }
  .inspect .ins-role { gap: 20px; padding: 26px; margin: 30px 0; }
  .inspect .ins-role svg { width: 72px; height: 72px; }
  .inspect .ins-up { font-size: calc(48px * var(--fs) / 1.12); padding: 20px 28px; }
  .inspect .pgrid { grid-template-columns: 1fr; gap: 14px; }
  .inspect .pg-k { font-size: calc(40px * var(--fs) / 1.12); padding-top: 32px !important; }
  .inspect .ins-nav { width: 90px; height: 140px; font-size: 84px; }
}
/* The hand already owns its detailed fate row from feedback.js. */
.card.in-hand .card-fate { display: none; }
/* A zero focus price can still spend energy: show that payment beside the focus diamond. */
.card-costs { display: inline-flex; flex-direction: column; align-items: center; flex: none; gap: calc(3px * var(--s)); }
.card:has(.energy-price) .hd { align-items: flex-start; }
.card .energy-price { display: inline-flex; align-items: center; gap: calc(2px * var(--s)); font-size: calc(9px * var(--s)); line-height: 1.1; color: #ffd0a3; white-space: nowrap; }
.card .energy-price .picon { width: calc(10px * var(--s)); height: calc(10px * var(--s)); }
/* Compact cards reserve space for their role and numbers; the full inspector carries every rule line. */
.card[data-role] .text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ins-flow-note, .ins-risk { font-size: calc(15px * var(--fs) / 1.12); line-height: 1.55; padding: 12px; border-left: 2px solid #8cdde9; background: #100d1b; }
.ins-risk { border-color: #f2b786; background: #1b100d; }
@media (pointer: coarse) and (orientation: portrait) and (max-device-width: 700px) {
  .inspect .ins-flow-note, .inspect .ins-risk { font-size: calc(48px * var(--fs) / 1.12); padding: 26px; }
}

/* The hand's fate comes from feedback.js; the same quiet footer in every context. */
.card .fate { border: 0; outline: 0; background: none; box-shadow: none; padding: 0; }
.card.in-hand .fate { justify-self: start; margin: 0 calc(10px * var(--s)) calc(7px * var(--s)); font-size: calc(8px * var(--s)); color: var(--muted); }
.card.in-hand:has(.fate) { grid-template-rows: auto minmax(calc(48px * var(--s)),1fr) auto auto auto auto; }
.card.on-board .cap-now { border: 0; background: #130e1be0; color: var(--role-ink); box-shadow: none; border-radius: 0; }
.card.crisis-actor.targetable { outline: 0; filter: brightness(1.2); }
.card.crisis-actor.targetable .threat-mark { color: var(--cyan); filter: drop-shadow(0 0 12px #1fb6d177); }
.card.on-board:not(.kind-crisis)::before { content: ''; }

.card.on-board .practice { border: 0; background: none; padding: 0; gap: calc(4px * var(--s)); font-size: calc(8px * var(--s)); }
.card.on-board .practice .pm i { border: 0; background: var(--stc, var(--violet-hot)); opacity: .2; box-shadow: none; }
.card.on-board .practice .pm i.on { opacity: 1; box-shadow: none; }
#hand .card.kind-lit, #hand .card.watch-pick { outline: 0; box-shadow: 0 22px 34px -14px #000; filter: brightness(1.2); }
.card.crisis-actor.decoy { outline: 0; }
.card.crisis-actor.decoy .threat-mark { color: #f2d28a; }
.card.crisis-actor .decoy-tag { border: 0; background: none; }

.card .card-fate, .card.on-board .practice, .card.on-board .cap-now { outline: 0; }
.db-grid .card.in-deck, #hand .card.drop-over { outline: 0; filter: brightness(1.15); }
.card.coach-lit, .card.term-lit { outline: 0 !important; box-shadow: 0 16px 30px -12px #000 !important; }

/* The process fate remains a dedicated strip in every context, including the actual hand footer. */
.card.kind-process .card-fate, .card.kind-process.in-hand .fate { color: var(--paper-2); background: #21192e; border: 0; padding: calc(2px * var(--s)) calc(4px * var(--s)); }
.card.kind-process.in-hand .fate { justify-self: stretch; margin: 0 calc(7px * var(--s)) calc(6px * var(--s)); }