/* ══════════════════════════════════
   intro (/dashboard/overview) — "Blueprint" skin
   Shared logic: intro-core.js (iv2-* element hooks). Skin: technical blueprint
   — grid, corner-bracket panels, mono accents, and a live pipeline schematic
   for the Ego → Agent → Portfolio spine. Skin-only classes use the iv4-* prefix.
   Readability tuned to editorial standard (Sora titles / Inter body; mono for
   codes & values).
   ══════════════════════════════════ */

.live-skeleton{color:var(--text-dim);font-style:italic;opacity:.6}
.tone-pos{color:var(--positive)}.tone-neg{color:var(--negative)}
.mono{font-family:'JetBrains Mono',monospace}

/* reading tier — one narrative spine, so the shell stays narrow (common.css) */
.iv4-page{position:relative;z-index:1;--shell:var(--shell-reading);padding:8px 30px 90px}
/* full-viewport blueprint grid — fixed layer so it fills the entire
   background instead of being clipped to the max-width content box */
.iv4-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(var(--b2-rgb),.05) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--b2-rgb),.05) 1px,transparent 1px);
  background-size:40px 40px}

.iv4-sys{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono';font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--b2);margin:16px 0 14px}
.iv4-d{width:8px;height:8px;border-radius:50%;background:var(--positive);box-shadow:0 0 9px var(--positive);animation:iv4p 1.6s infinite}
@keyframes iv4p{0%,100%{opacity:.4}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.iv4-d{animation:none}}
.iv4-title{font-family:Sora;font-weight:800;font-size:34px;margin:0;letter-spacing:-.02em;line-height:1.05}
.iv4-a{font-family:Georgia,serif;font-style:italic;color:var(--mint);text-shadow:0 0 22px rgba(52,211,153,.4)}
.iv4-tagline{font-size:15px;color:var(--text-muted);margin:12px 0 30px;max-width:620px;word-break:keep-all}

/* section / block code-labels — "// " added by CSS so i18n text stays clean */
.iv4-blk{font-family:'JetBrains Mono';font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--b2)}
.iv4-blk::before{content:"// "}
.iv4-blk--section{margin-top:34px}
.iv4-sub{font-size:13px;color:var(--text-muted);margin:6px 0 14px}

.iv4-shead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:32px 0 14px}

/* #1 spec sheet — corner brackets.
   Blueprint depth: an opaque vertical gradient (dark→darker, no glass — the
   panel stays solid so the background grid never shows through) plus a soft
   border glow that reads as a "powered-on" schematic block — no float/blur. */
.iv4-spec{position:relative;padding:24px 28px;margin-bottom:8px;
  background:linear-gradient(162deg,rgba(16,23,31,.95) 0%,rgba(14,20,28,.95) 100%);
  border:1px solid rgba(var(--b2-rgb),.28);
  box-shadow:0 0 20px rgba(var(--b2-rgb),.05),inset 0 1px 0 rgba(255,255,255,.04)}
.iv4-spec::before,.iv4-spec::after{content:"";position:absolute;width:15px;height:15px;border:2px solid var(--b2)}
.iv4-spec::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.iv4-spec::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.iv4-spec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.iv2-win{display:inline-flex;background:rgba(255,255,255,.04);border:1px solid rgba(var(--b2-rgb),.16);border-radius:8px;padding:2px}
.iv2-win button{font-family:'JetBrains Mono';font-weight:700;font-size:11px;letter-spacing:.06em;color:var(--text-dim);background:none;border:0;padding:7px 12px;border-radius:6px;cursor:pointer;min-width:42px;min-height:32px}
.iv2-win button.active{color:#fff;background:rgba(var(--b2-rgb),.18)}
.iv4-spec-k{font-family:'JetBrains Mono';font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tier-major)}
.iv4-spec-k::before{content:"// "}
/* 각주 앵커 — .iv4-foot 의 * 와 짝. JetBrains Mono 의 * 는 글자 높이 한가운데
   놓여 그대로 두면 연산 기호처럼 읽히므로 위첨자 위치로 올린다. */
.iv4-spec-k::after{content:"*";vertical-align:.3em;font-size:.9em;letter-spacing:0}
.iv4-spec-grid{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;text-decoration:none;color:inherit}
.iv4-idrow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.iv4-ego{font-family:Sora;font-weight:800;font-size:46px;line-height:1;letter-spacing:-.02em}
.iv4-coin{font-family:'JetBrains Mono';font-weight:500;font-size:15px;color:var(--text-muted)}
.iv4-coin b{color:var(--mint);margin-right:6px}
.iv4-stats{display:flex;gap:34px;margin-top:20px}
.iv4-k{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px}
.iv4-v{font-family:Sora;font-weight:700;font-size:17px;color:var(--positive);font-variant-numeric:tabular-nums}
/* One row per window. Desktop shows the selected one; narrow screens drop the
   control and stack both (see isNarrow() in intro-core.js). */
.iv4-v-row{display:flex;align-items:baseline;gap:6px}
.iv4-v-row+.iv4-v-row{margin-top:4px}
.iv4-v-win{font-family:'JetBrains Mono';font-weight:600;font-size:10px;letter-spacing:.1em;color:var(--text-dim)}
.iv4-v-num{display:inline-block;transform-origin:left center}   /* inline-block so the toggle pulse transform applies */
@keyframes iv2-v-pulse{0%{transform:scale(1);filter:brightness(1)}28%{transform:scale(1.18);filter:brightness(1.4)}100%{transform:scale(1);filter:brightness(1)}}
.iv4-v-num.iv2-v-pulse{animation:iv2-v-pulse .34s ease}
@media(prefers-reduced-motion:reduce){.iv4-v-num.iv2-v-pulse{animation:none}}
.iv4-score{font-family:Sora;font-weight:900;font-size:60px;line-height:.85;color:var(--positive);font-variant-numeric:tabular-nums;text-align:right}
.iv4-score-c{display:block;font-family:'JetBrains Mono';font-weight:500;font-size:10px;letter-spacing:.16em;color:var(--text-dim);margin-top:8px}
.iv4-spark-wrap{position:relative;margin-top:28px}
.iv4-spark{display:block;width:100%;height:38px}
.iv4-spark .spk-line{stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.spk-dot{position:absolute;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);display:none;pointer-events:none}
.spk-ping{position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid;opacity:0;transform:translate(-50%,-50%) scale(.4);display:none;pointer-events:none;animation:spkPing 2s ease-out infinite}
@keyframes spkPing{0%{opacity:.55;transform:translate(-50%,-50%) scale(.3)}70%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
@media(prefers-reduced-motion:reduce){.spk-ping{animation:none;display:none!important}}
/* spark time axis — matches the champion trajectory (4w ago → now) */
.iv4-spark-axis{display:flex;justify-content:space-between;margin-top:5px;
  font-family:'JetBrains Mono';font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.iv4-spec-cta{display:inline-block;margin-top:22px;font-family:'JetBrains Mono';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--positive);text-decoration:none}
/* score footnote — outside the card, deliberately quiet. Cuts the "#1 = today's
   biggest earner" misreading without spending first-impression space. The *
   pairs with the marker on the card's "by score" label, so the note reads as
   annotating the ranking basis rather than the number. Markers are pseudo-
   elements because data-i18n overwrites textContent (child nodes would be lost).
   One line at page width; wraps only on narrow screens. Tight above (it belongs
   to the card), open below (the digest is a separate block). */
.iv4-foot{margin:10px 0 28px;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.02em;line-height:1.6;color:var(--text-dim)}
.iv4-foot::before{content:"* "}

.iv2-tier{font-family:'JetBrains Mono';font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:5px;display:inline-block}
.iv2-tier-major{color:var(--tier-major);background:rgba(var(--tier-major-rgb),.16)}
.iv2-tier-minor{color:var(--tier-minor);background:rgba(var(--tier-minor-rgb),.16)}
.iv2-tier-bench{color:var(--tier-bench);background:rgba(var(--tier-bench-rgb),.18)}

/* digest — blueprint rowed list */
.iv4-list{counter-reset:mv;display:block;margin:14px 0 8px;border-top:1px solid rgba(var(--b2-rgb),.14)}
.iv4-list .iv2-lens{counter-increment:mv;position:relative;display:block;padding:15px 4px 15px 46px;border-bottom:1px solid rgba(255,255,255,.06);text-decoration:none;color:inherit}
.iv4-list .iv2-lens::before{content:counter(mv,decimal-leading-zero);position:absolute;left:2px;top:16px;font-family:'JetBrains Mono';font-weight:700;font-size:15px;color:var(--b2)}
.iv4-list .iv2-lens-icon{display:none}
.iv4-list .iv2-lens-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.iv4-list .iv2-lens-title{font-family:Sora;font-weight:700;font-size:17px;color:var(--text-primary)}
.iv4-list .iv2-lens-link{margin-left:auto;font-family:'JetBrains Mono';font-weight:500;font-size:10px;letter-spacing:.06em;color:var(--text-dim)}
.iv4-list .iv2-lens-body{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;color:var(--text-muted);font-size:14px}
.iv4-list .iv2-lens-val{font-family:Sora;font-weight:800;font-size:18px;color:var(--positive);font-variant-numeric:tabular-nums}
/* Non-P&L figure in the value slot (e.g. Sharpe). Two rules keep it level with the
   P&L row above it rather than louder: azure instead of the aqua/coral pair, which
   stays reserved for gains and losses (and matches .iv2-watch-score, the other
   non-P&L figure on this page); and the metric's name sits in the small label
   style so only the number occupies the display size — same silhouette as a
   return row. Near-white here read as the loudest thing in the digest. */
.iv4-list .iv2-lens-val--metric{color:var(--b2-soft)}
.iv4-list .iv2-lens-unit{font-family:'JetBrains Mono';font-weight:600;font-size:10px;letter-spacing:.1em;color:var(--text-dim);margin-right:7px}
/* Distribution rows (league mix, position mix) carry no single headline figure,
   so they had nothing to scan and read as a sentence. Splitting count from label
   gives them the same silhouette the return rows already have: the number in the
   display face, its name in the small mono caption. */
.iv4-list .iv2-lens-pair{display:inline-flex;align-items:baseline}
.iv4-list .iv2-lens-n{font-family:Sora;font-weight:700;font-size:16px;color:var(--text-primary);font-variant-numeric:tabular-nums}
.iv4-list .iv2-lens-u{font-family:'JetBrains Mono';font-weight:600;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-left:3px}
.iv4-list .iv2-lens-sep{color:rgba(255,255,255,.18);margin:0 7px}
.iv4-list .iv2-feed-empty{padding:20px 0;color:var(--text-dim);border:0}

/* pipeline schematic — the identity centrepiece */
.iv4-pipe{position:relative;display:grid;grid-template-columns:1fr 64px 1fr 64px 1fr;align-items:stretch}
/* column flex so the CTA can pin to the bottom edge regardless of how many
   lines the description wraps to — the three nodes' links stay on one line. */
.iv4-node{padding:22px 20px;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  background:linear-gradient(162deg,rgba(15,22,30,.82) 0%,rgba(13,19,27,.82) 100%);
  border:1px solid rgba(var(--b2-rgb),.20);transition:border-color .15s,box-shadow .15s}
.iv4-node .iv4-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#0c131b;margin-bottom:14px;border:2px solid var(--b2);color:var(--b2)}
.iv4-node .iv4-nm{font-family:Sora;font-weight:800;font-size:20px}
.iv4-node p{font-size:13px;color:var(--text-muted);line-height:1.55;margin:9px 0 12px;word-break:keep-all}
.iv4-node .iv4-m{font-family:'JetBrains Mono';font-weight:500;font-size:12px;color:var(--b2);font-variant-numeric:tabular-nums}
/* bottom-right anchor. margin-top:auto absorbs the slack; padding-top keeps a
   floor gap for the case where content already fills the node. */
.iv4-node .iv4-cta{margin-top:auto;align-self:flex-end;padding-top:14px;font-family:'JetBrains Mono';font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--positive)}
.iv4-node.n1{border-color:rgba(99,102,241,.34)}.iv4-node.n1 .iv4-ic{border-color:var(--indigo);color:var(--indigo)}.iv4-node.n1 .iv4-m{color:var(--indigo)}
.iv4-node.n2{border-color:rgba(68,170,192,.34)}.iv4-node.n2 .iv4-ic{border-color:#44aac0;color:#44aac0}.iv4-node.n2 .iv4-m{color:#44aac0}
.iv4-node.n3{border-color:rgba(52,211,153,.34)}.iv4-node.n3 .iv4-ic{border-color:var(--mint);color:var(--mint)}.iv4-node.n3 .iv4-m{color:var(--mint)}
.iv4-node:hover{border-color:rgba(var(--b2-rgb),.6);box-shadow:0 0 16px rgba(var(--b2-rgb),.05)}
.iv4-node.n1:hover{box-shadow:0 0 16px rgba(99,102,241,.07)}
.iv4-node.n2:hover{box-shadow:0 0 16px rgba(68,170,192,.07)}
.iv4-node.n3:hover{box-shadow:0 0 16px rgba(52,211,153,.07)}
.iv4-edge{position:relative;display:flex;align-items:center;justify-content:center}
.iv4-line{position:absolute;top:50%;left:0;right:0;height:2px;background:linear-gradient(90deg,rgba(var(--b2-rgb),.15),rgba(var(--b2-rgb),.55),rgba(var(--b2-rgb),.15))}
.iv4-pulse{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px var(--positive);transform:translateY(-3px);animation:iv4flow 2.4s linear infinite}
@keyframes iv4flow{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.iv4-pulse{animation:none;left:50%;opacity:.6}}
.iv4-cap{position:relative;top:16px;font-family:'JetBrains Mono';font-weight:500;font-size:10px;letter-spacing:.04em;color:var(--text-muted);background:var(--bg-dark,#0a1016);padding:2px 6px;white-space:nowrap}

.iv4-updated{margin-top:30px;text-align:right;font-family:'JetBrains Mono';font-size:11px;color:var(--text-dim)}

/* orientation slot — blueprint */
.iv2-orient{margin:6px 0 22px}
.iv2-orient--welcome{position:relative;padding:22px 26px 20px;border:1px solid rgba(99,102,241,.30);
  background:linear-gradient(162deg,rgba(17,20,34,.95) 0%,rgba(15,18,31,.95) 100%);
  box-shadow:0 0 18px rgba(99,102,241,.06),inset 0 1px 0 rgba(255,255,255,.04)}
.iv2-orient--welcome::before{content:"";position:absolute;top:-1px;left:-1px;width:15px;height:15px;border:2px solid var(--indigo);border-right:0;border-bottom:0}
.iv2-welcome-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono';font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--b2-soft);margin-bottom:11px}
.engine-live-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--positive);box-shadow:0 0 8px var(--positive);animation:iv4p 1.6s infinite}
@media(prefers-reduced-motion:reduce){.engine-live-dot{animation:none}}
.iv2-welcome-title{font-family:Sora;font-weight:800;font-size:22px;color:#fff;margin:0 0 9px}
.iv2-welcome-body{font-size:14px;line-height:1.6;color:var(--text-muted);margin:0 0 18px;max-width:620px;word-break:keep-all}
.iv2-welcome-body strong{color:var(--text-primary);font-weight:600}
.iv2-welcome-dismiss{font-family:'JetBrains Mono';font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--indigo);border:0;border-radius:6px;padding:11px 20px;min-height:42px;cursor:pointer}
.iv2-orient--away{position:relative;padding:15px 20px;border:1px solid rgba(var(--b2-rgb),.24);
  background:linear-gradient(162deg,rgba(15,22,30,.94) 0%,rgba(13,19,27,.94) 100%);
  box-shadow:0 0 16px rgba(var(--b2-rgb),.04),inset 0 1px 0 rgba(255,255,255,.03)}
.iv2-orient--away::before{content:"";position:absolute;top:-1px;left:-1px;width:14px;height:14px;border:2px solid var(--b2);border-right:0;border-bottom:0}
.iv2-away-title{font-family:'JetBrains Mono';font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--b2-soft);margin-bottom:12px}
.iv2-away-list{margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.iv2-away-item{display:flex;align-items:center;gap:10px;font-size:13.5px;flex-wrap:wrap;
  text-decoration:none;color:inherit;border-radius:6px;padding:3px 8px;margin:0 -8px}
.iv2-away-item:hover{background:rgba(var(--b2-rgb),.07)}
.iv2-away-item[hidden]{display:none}   /* class display:flex would otherwise beat the [hidden] UA rule */
.iv2-away-icon{font-size:17px;flex:none}
.iv2-away-promoted .iv2-away-icon{color:var(--positive)}.iv2-away-relegated .iv2-away-icon{color:var(--negative)}
.iv2-away-arrived .iv2-away-icon{color:var(--text-muted)}
.iv2-away-text{color:var(--text-muted);display:inline-flex;align-items:center;gap:7px}
/* group eyebrow (chrome = azure) — separates the section label from neutral row content */
.iv2-away-grp{display:flex;align-items:center;gap:9px;font-family:'JetBrains Mono';font-weight:700;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--b2)}
.iv2-away-grp--sep{margin-top:6px}
.iv2-away-grp-cnt{color:var(--b2-soft);font-variant-numeric:tabular-nums}
.iv2-away-grp::after{content:"";flex:1;height:1px;background:rgba(var(--b2-rgb),.18)}
/* in-place expander: "+N more" (growth) / "N slipped" rollup (relegations) */
.iv2-away-more{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;border:0;background:none;
  cursor:pointer;padding:2px 0;font-family:'JetBrains Mono';font-weight:600;font-size:11.5px;
  letter-spacing:.02em;color:var(--text-dim)}
.iv2-away-more:hover{color:var(--b2-soft)}
.iv2-away-more--dn:hover{color:var(--negative)}
.iv2-away-chev{font-size:16px;transition:transform .18s ease}
.iv2-away-more.is-open .iv2-away-chev{transform:rotate(90deg)}
.iv2-away-rule{height:1px;background:var(--border);margin:2px 0}
@media(prefers-reduced-motion:reduce){.iv2-away-chev{transition:none}}
.iv2-orient--back .iv2-back-line{font-family:'JetBrains Mono';font-size:12px;color:var(--text-dim)}

@media(max-width:768px){
  .iv4-page{padding:8px 16px 90px}
  .iv4-spec-grid{grid-template-columns:1fr}
  .iv4-score{text-align:left;margin-top:8px}
  .iv4-stats{flex-wrap:wrap;gap:22px}
  /* Drop the window control and show both returns instead — it had to share the
     spec header with the label, which wrapped to two lines at 375px. Paired with
     isNarrow() in intro-core.js; keep the two breakpoints in sync. */
  .iv2-win{display:none}
  .iv4-pipe{grid-template-columns:1fr}
  .iv4-edge{height:46px}
  .iv4-line{top:0;bottom:0;left:50%;right:auto;width:2px;height:auto}
  .iv4-pulse{display:none}
  .iv4-cap{top:0}
}

/* My Watchlist — followed egos strip */
.iv2-watch{display:flex;flex-direction:column;gap:6px;margin-top:12px;max-height:405px;overflow-y:auto;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgba(var(--b2-rgb),.25) transparent}
.iv2-watch::-webkit-scrollbar{width:6px}
.iv2-watch::-webkit-scrollbar-thumb{background:rgba(var(--b2-rgb),.25);border-radius:3px}
.iv2-watch::-webkit-scrollbar-thumb:hover{background:rgba(var(--b2-rgb),.4)}
.iv2-watch-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid rgba(var(--b2-rgb),.12);
  text-decoration:none;transition:border-color .15s,background .15s}
.iv2-watch-row:hover{border-color:rgba(var(--b2-rgb),.28);background:rgba(var(--b2-rgb),.06)}
.iv2-watch-ego{flex:1;min-width:0;font-weight:700;color:#fff;font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iv2-watch-meta{flex-shrink:0;font-size:11px;color:var(--text-dim)}
.iv2-watch-ret{flex-shrink:0;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.iv2-watch-score{flex-shrink:0;font-size:16px;font-weight:800;color:var(--b2-soft);
  font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.iv2-watch-row--quiet .iv2-watch-quiet{flex-shrink:0;font-size:11px;color:var(--text-dim)}
/* league-move chip — shares the tier-chip geometry (see .iv2-tier) so it reads as
   one family; colour carries the meaning. Move events use the amethyst pair (a
   material family apart from the tier medals): promotion pops, relegation recedes. */
.iv2-watch-delta{flex-shrink:0;font-family:'JetBrains Mono';font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.iv2-watch-delta.up{color:var(--move-up);background:rgba(var(--move-up-rgb),.18)}
.iv2-watch-delta.down{color:var(--move-down);background:rgba(var(--move-down-rgb),.14)}
.iv2-watch-tier{flex-shrink:0}
/* current position — plain mono token, not a filled pill: the tier chip stays the
   row's only badge. Direction carries tone colour (it is signal); FLAT stays dim. */
.iv2-watch-pos{flex-shrink:0;font-family:'JetBrains Mono';font-weight:700;font-size:10px;letter-spacing:.08em}
.iv2-watch-pos.long{color:var(--positive)}
.iv2-watch-pos.short{color:var(--negative)}
.iv2-watch-pos.flat{color:var(--text-dim)}
.iv2-watch-per{font-size:9px;color:var(--text-dim);margin-left:3px;font-weight:600;letter-spacing:.03em}
.iv2-watch-grouplabel{font-family:'JetBrains Mono';font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-top:8px}
.iv2-watch-grouplabel:first-child{margin-top:0}
/* in-row unfollow — filled star, revealed on hover (always shown on touch) */
.iv2-watch-row .follow-star{flex-shrink:0;opacity:0;width:26px;height:26px;margin:0 -2px 0 2px;transition:opacity .12s}
.iv2-watch-row:hover .follow-star,.iv2-watch-row .follow-star:focus-visible{opacity:1}
@media(hover:none){.iv2-watch-row .follow-star{opacity:.6}}
/* Narrow screens: the row carries one more token (position) than it used to, so
   tighten the gaps to keep the identity's coin pill from ellipsing away. Must sit
   AFTER the base .iv2-watch-row rule — a media query adds no specificity. */
@media(max-width:768px){.iv2-watch-row{gap:7px;padding:11px 10px}}

/* Phones: below ~430px the six tokens no longer fit on one line — the identity
   collapses to ~75px, which clips the ego name and drops the coin pill entirely,
   and an agent without its coin isn't identifiable (rclm×PENGU and rclm×BNB read
   the same). So the row breaks in two: the identity owns the first line, its
   readings sit on the second. The widest row needs 396px, which the tightened
   gaps above clear down to ~395px of viewport — 480 keeps headroom for a league-
   move chip (wider than the tier chip) without breaking the row early on a
   tablet, where a two-line row reads as wasted space. */
@media(max-width:480px){
  .iv2-watch-row{
    display:grid;
    grid-template-columns:auto auto auto 1fr auto;
    column-gap:8px;row-gap:8px;
    padding:12px 12px}
  .iv2-watch-ego{grid-column:1/5;grid-row:1;
    white-space:normal;overflow:visible;text-overflow:clip}
  /* The star belongs to the row, not to either line — span both and centre. */
  .iv2-watch-row .follow-star{grid-column:5;grid-row:1/3;align-self:center;justify-self:end;margin:0}
  .iv2-watch-pos{grid-column:1;grid-row:2}
  .iv2-watch-tier,.iv2-watch-delta{grid-column:2;grid-row:2}
  .iv2-watch-ret{grid-column:3;grid-row:2}
  /* Score sits with the readings rather than pinned to the far edge — stranded
     at the right it read as a second column the two-line row doesn't have. */
  .iv2-watch-score{grid-column:4;grid-row:2;justify-self:start;min-width:0;text-align:left}
  /* Quiet rows carry only a name and a note — no readings to move down. */
  .iv2-watch-row--quiet{display:flex;gap:7px}
}