/* =========================================================================
   ORBEVA · entityRow scoped stylesheet (docs/SHARED-COMPONENT-ARCHITECTURE.md).
   The canonical account/card/merchant/holding/goal row's own CSS, shipped as a
   scoped file so the shared component is self-contained without editing the
   app-wide components.css (Wave-4 folds these rules into components.css @layer
   o-primitives). Token-only — no hex/rgb literals; theme-safe + AA via semantic
   tokens; 44px tap floor; tabular-nums money. Load AFTER components.css.
   ========================================================================= */
.entity-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-3, 10px);
  align-items: center;
  width: 100%;
  text-align: left;
  min-height: var(--tap, 44px);
  padding: var(--sp-2, 8px) var(--sp-3, 10px);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  background: var(--surface);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
a.entity-row, button.entity-row { cursor: pointer; }
/* N6: hover gated — a touch tap otherwise leaves the row raised + accent-edged (sticky hover) */
@media (hover:hover) { a.entity-row:hover, button.entity-row:hover { transform: translateY(-1px); border-color: color-mix(in srgb,var(--accent) 38%,var(--line)); } }
/* N7: the bespoke :active (.995) died — interactive entityRows now carry .pressable (base.css M9 row
   press, .97). Keeping both would let this higher-specificity rule mute the shared press law. */
/* variant 'plain' — borderless list-item for lists that own their own separators (networth accounts,
   holdings). Keeps the art|body|value grid + 44px tap floor, drops the card chrome. */
.entity-row--plain { border: 0; border-radius: 0; background: transparent; padding-left: 0; padding-right: 0; }
@media (hover:hover) { a.entity-row--plain:hover, button.entity-row--plain:hover { transform: none; border-color: transparent; background: color-mix(in oklch, var(--accent) 6%, transparent); } }
.entity-row > * { min-width: 0; }
.entity-row__bd { min-width: 0; }
.entity-row__title { font-size: var(--text-sm); font-weight: 850; overflow-wrap: break-word; }
.entity-row__sub { margin-top: 2px; font-size: var(--text-2xs); color: var(--ink-dim); overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.entity-row__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; min-width: 0; }
.entity-row__chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-row__chip.is-pos { color: var(--pos); background: var(--pos-tint); }
.entity-row__chip.is-warn { color: var(--warn); background: var(--warn-tint); }
.entity-row__chip.is-neg { color: var(--neg); background: var(--neg-tint); }
.entity-row__val {
  text-align: right;
  font-size: var(--text-base);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  max-width: 120px;
}
.entity-row__val.metric--pos { color: var(--pos); }
.entity-row__val.metric--warn { color: var(--warn); }
.entity-row__val.metric--neg { color: var(--neg); }
.entity-row__val > span { display: block; margin-top: 2px; font-size: var(--text-3xs); color: var(--ink-faint); font-weight: 750; }
@media (max-width: 520px) {
  .entity-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .entity-row__val { grid-column: 2; text-align: left; max-width: 100%; margin-top: 4px; }
}

/* ── DESIGN-LANGUAGE §4/§5 F8 — the Bus banner + due-timeline wear the Card grammar (P31) ──────
   Every top-level element on a tab is a Card, Row, Rail, Strip, or Sheet; these two floated as
   naked rows between cards (capture 01/11). Shell = the standard card recipe (surface · hairline
   ·  --r-card 16); rows divide with hairlines. Classes/markup unchanged (the banner golden pins
   the module source; this is chrome only). Shared file → all four banner tabs get it at once. */
.tab-signal,
.tab-signal-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 4px 14px;
}
.tab-signal-list { padding: 12px 14px 4px; }
.tab-signal-list__eyebrow { padding: 0 2px 6px; }
.tab-signal-list .entity-row + .entity-row { border-top: 1px solid var(--line); }

/* CardIdentity (CARD-IDENTITY-COMPONENT-SPEC) — the reusable card view: art|monogram + name + ··mask.
   Token-only; the monogram tints from var(--card-id-acc, --accent) so a tab can scope an issuer hue. */
.card-id { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; vertical-align: middle; }
.card-id > :first-child { flex: none; } /* art|monogram never shrinks (CI-2 parity with the old cards.html .card-inline .ci-art) */
.card-id__name { font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-id__mask { font-style: normal; color: var(--ink-faint); font-weight: 750; font-variant-numeric: tabular-nums; flex: none; }
.card-id__mono { flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; letter-spacing: .02em; color: var(--ink); background: color-mix(in oklch, var(--card-id-acc, var(--accent)) 20%, var(--surface-2)); border: 1px solid color-mix(in oklch, var(--card-id-acc, var(--accent)) 40%, var(--line)); }
/* D12 8-hue monogram unification (ui/monogram-hue.js): the fallback monogram's accent derives from
   its deterministic --mono-hue NUMBER through ONE fixed-L/C oklch recipe (accent stop 62%/0.11 —
   must match OrbevaMonogramHue's ACC_L/ACC_C; locked by bin/monogram-hue-golden.mjs). Still tinted
   through the same color-mix as any caller-scoped --card-id-acc — fallback-only, identity-only. */
.card-id__mono[data-mono-hue] { --card-id-acc: oklch(62% 0.11 var(--mono-hue)); }
.card-id--swatch .card-id__mono { width: 24px; height: 16px; font-size: 8px; border-radius: 5px; }
.card-id--swatch .card-id__name { font-size: var(--text-sm); font-weight: 850; white-space: normal; overflow: visible; overflow-wrap: anywhere; } /* CI-2: swatch = the inline card entity — wraps at 850 like the original cards.html .card-inline b */
.card-id--chip { gap: 8px; } .card-id--chip .card-id__mono { width: 32px; height: 21px; font-size: 10px; border-radius: 6px; } .card-id--chip .card-id__name { font-size: var(--text-sm); }
.card-id--tile { gap: 10px; } .card-id--tile .card-id__mono { width: 48px; height: 32px; font-size: 13px; border-radius: 8px; } .card-id--tile .card-id__name { font-size: var(--text-base); }

/* ── RC4 · tab signal banner chrome (Release One recon §1) ─────────────────────────────────────
   The banner row itself is the shared timelineItem/.entity-row above; these rules style ONLY the
   banner-local additions: a tone tint on the section (data-tone ∈ warn|neg|info — the closed set
   the module stamps) and the consequence line under the fact row. Token-only; text glyph carries
   the tone alongside colour (never colour-only). */
.tab-signal { display: block; border-radius: var(--r-md, 12px); }
.tab-signal[data-tone="warn"] { background: color-mix(in oklch, var(--warn) 6%, transparent); }
.tab-signal[data-tone="neg"] { background: color-mix(in oklch, var(--neg) 6%, transparent); }
.tab-signal[data-tone] { padding: 0 var(--sp-2, 8px); }
.tab-signal__why { display: flex; gap: 6px; align-items: baseline; padding: 0 0 var(--sp-2, 8px); font-size: var(--text-2xs); color: var(--ink-dim); overflow-wrap: break-word; }
.tab-signal__why .tsw-ic { flex: none; font-weight: 800; font-style: normal; }
.tab-signal[data-tone="warn"] .tsw-ic { color: var(--warn); }
.tab-signal[data-tone="neg"] .tsw-ic { color: var(--neg); }
.tab-signal[data-tone="info"] .tsw-ic { color: var(--ink-faint); }

/* RT-1 / R3 — the shared signal shell becomes the price-hike ritual without inventing a second
   card grammar. Count+duration leads, decisions meet the 44px floor, and the quiet dismiss belongs
   to this price point. Token-only; no notification/badge/streak treatment. */
.tab-signal[data-ritual="subscription-hike"] { padding: var(--sp-2, 8px); }
.tab-signal[data-ritual="bill-confirmation"] { padding: var(--sp-2, 8px); overflow: hidden; }
.tab-signal__bill-swipe { position: relative; overflow: hidden; border-radius: var(--r-sm, 10px); background: var(--surface-2); }
.tab-signal__bill-swipe [data-bill-ritual-row] { position: relative; z-index: 1; background: var(--surface); will-change: transform; }
.tab-signal__bill-action { position: absolute; inset-block: 0; display: flex; align-items: center; padding: 0 var(--sp-3, 12px); color: var(--ink); font-size: var(--text-2xs); font-weight: 850; }
.tab-signal__bill-action--left { inset-inline-start: 0; background: color-mix(in oklch, var(--pos) 20%, var(--surface-2)); }
.tab-signal__bill-action--right { inset-inline-end: 0; background: color-mix(in oklch, var(--warn) 20%, var(--surface-2)); }
.tab-signal__bill-swipe[data-direction="right"] .tab-signal__bill-action--right,
.tab-signal__bill-swipe[data-direction="left"] .tab-signal__bill-action--left { opacity: 0; }
.tab-signal__ritual-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2, 8px); color: var(--ink-dim); font-size: var(--text-2xs); }
.tab-signal__ritual-head strong { font-weight: 850; font-variant-numeric: tabular-nums; }
.tab-signal__ritual-head button { display: inline-flex; align-items: center; justify-content: center; width: var(--tap, 44px); height: var(--tap, 44px); margin: calc(var(--sp-2, 8px) * -1) calc(var(--sp-2, 8px) * -1) 0 0; border: 0; background: transparent; color: var(--ink-faint); font: inherit; font-size: var(--text-lg); cursor: pointer; }
.tab-signal__ritual-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2, 8px); padding-top: var(--sp-2, 8px); border-top: 1px solid var(--line); }
.tab-signal__ritual-actions button { min-height: var(--tap, 44px); padding: 0 var(--sp-3, 12px); border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--text-xs); font-weight: 850; cursor: pointer; }
.tab-signal__ritual-actions button:first-child { border-color: color-mix(in srgb,var(--accent) 45%,var(--line)); background: var(--accent); color: var(--accent-ink); }
.tab-signal__ritual-actions button:disabled { opacity: .55; cursor: wait; }
.tab-signal__ritual-actions [data-ritual-status] { flex-basis: 100%; min-height: 1.2em; color: var(--neg); font-size: var(--text-2xs); }
.tab-signal--ritual-tally { padding: var(--sp-3, 12px); }
.tab-signal__tally { color: var(--pos); font-size: var(--text-sm); font-weight: 800; }
.tab-signal__ritual-secondary { display: inline-flex; align-items: center; min-height: var(--tap, 44px); margin-top: var(--sp-2, 8px); color: var(--accent-text); font-size: var(--text-xs); font-weight: 850; text-decoration: none; }
.tab-signal--ritual-tally[data-tally-tone="neutral"] .tab-signal__tally { color: var(--ink-dim); }
@media (max-width: 420px) { .tab-signal__ritual-actions button { flex: 1 1 calc(50% - var(--sp-2, 8px)); } }