/* ============================================================
   SkinSignal / flex
   The free dashboard, led by status. Loaded by dashboard.html only, and
   everything here is scoped to what renderFlex() in js/app.js turns on
   for a signed in free account: the status hero, the arena, the case,
   the line, and .dash--free on <body> for the desk below it.

   ONE HAND ON THE PAGE. The hero is a player card, the calling card as
   one 3:1 banner with the rank on it, then the climb to the next rank. Its
   gold is spent on the emblems, the rank name, the rail and the one
   primary ask, and the close is the page's other gold moment. The arena
   is steel and has no panel. The case is a shelf between two hairlines.
   The desk is small, dense and quiet, because it is private utility and
   not the point of the page. Nothing here loops.
   ============================================================ */

/* ---------- 1. The status hero ----------
   The read, then the climb, then the player card. Band one is the
   intelligence: what the server already tells a free caller about their
   own inventory, the sentence on the left and the numbers on the right,
   under the page's one solid gold ask. Band two is the climb (a mono
   figure, "to" the next tier, and a rail from the emblem held to the
   emblem ahead), then a footnote. Band three is the identity strip: the
   calling card at its true 3:1, with the emblem, the rank, the name and
   the counts on the art, smaller than it was and outlined rather than
   filled, because it is no longer the pitch. Under the plate, on the
   page: the case chip and two quiet links.

   A CALLING CARD IS ALWAYS 3:1, and its right side is the part people
   flex: the cluster stops at 60 percent and the side scrim has faded out
   by 68. Gold is spent on the emblems' light, the rank name, the rail's
   fill and the primary ask. Nothing loops. */

.statushero {
  position: relative;
  padding: clamp(14px, 2.4vw, 30px) 0 clamp(20px, 3vw, 40px);
}

/* THE ONE AMBIENT ON THE PAGE. A cold light behind the plate, so the top
   of the page has air around it rather than sitting on a flat field. It is
   a radial gradient rather than a blurred layer because a gradient is
   already soft and costs nothing to paint. Nowhere else gets this. */
.statushero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -8%;
  left: 50%;
  width: min(1240px, 128%);
  height: 128%;
  transform: translateX(-50%);
  /* Centred on the plate's top edge rather than on the plate: sat in the
     middle, the whole of it hides behind the panel and lights nothing. */
  background: radial-gradient(62% 46% at 50% 8%,
    rgba(var(--glow-accent), 0.1),
    rgba(var(--glow-accent), 0) 100%);
  pointer-events: none;
}

/* The page's slot. The visible plate is the panel inside it, so the quiet
   row can sit under the plate, on the page. Above the ambient. */
.statushero__plate { position: relative; z-index: 1; }

/* The panel is a size container: the player card measures itself in cqi,
   a share of the panel's own content width. */
.statushero__panel {
  --gold: 240, 180, 41;
  --panel-px: clamp(22px, 3.6vw, 46px);
  --panel-py: clamp(22px, 3.2vw, 40px);

  position: relative;
  overflow: hidden;
  padding: var(--panel-py) var(--panel-px);
  border: 1px solid var(--edge);
  border-radius: var(--r-panel);
  background: var(--surface-panel);
  box-shadow: var(--lift-panel), 0 40px 100px -50px rgba(0, 0, 0, 1);
  container-type: inline-size;
}

/* BAND 1: THE READ.
   The loudest thing on the page, because it is the only thing on it a
   trader would pay for. The column on the left is the sentence, the tiles
   on the right are the numbers it was built from, and both are the
   server's own tease: nothing here is computed on the client, and a field
   the server did not send is not drawn. */
.statushero__read {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

/* The sentence stops at a readable measure, so the movement rows do not
   stretch the width of the plate. */
.statushero__readcol {
  max-width: 62ch;
  min-width: 0;
}

.statushero__eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* The headline and, beside it, the one figure the read turns on. */
.statushero__lead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 32px);
}

.statushero__leadmain { min-width: 0; }

.statushero__leadfig {
  flex: none;
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: right;
  color: var(--risk);
  font-variant-numeric: tabular-nums;
}

.statushero__leadunit {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* The item the read is about: the signal list's thumbnail, smaller. */
.statushero__item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  min-width: 0;
}

.statushero__item .signal__thumb { width: 40px; height: 40px; border-radius: 8px; }
.statushero__item .signal__thumb img { width: 100%; height: 100%; object-fit: contain; }

.statushero__itemname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-stretch: var(--display-header);
  font-weight: 600;
  font-size: clamp(14px, 1.3vw, 16px);
  color: rgba(255, 255, 255, 0.9);
}

.statushero__itemnote {
  flex: none;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}

/* The signal card's meter, handed the risk tone its fill reads from. */
.statushero__meter {
  --signal-tone: var(--risk);

  margin-top: 16px;
}

.statushero__meter .signal__meter { margin-top: 0; max-width: none; }
.statushero__meter .signal__track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.statushero__meter .signal__fill { opacity: 1; }
.statushero__meter .signal__scale { color: rgba(255, 255, 255, 0.55); }

.statushero__readline {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-stretch: var(--display-hero);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.95);
}

/* The two movers. A row the server did not send is omitted, never filled. */
.statushero__moves {
  list-style: none;
  margin: clamp(16px, 2.2vw, 26px) 0 0;
  padding: 0;
}

.statushero__move {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.statushero__move:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.statushero__movelabel {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.statushero__movename {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-stretch: var(--display-header);
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(255, 255, 255, 0.9);
}

.statushero__movepct {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.statushero__move--up .statushero__movepct { color: #3ecf8e; }
.statushero__move--down .statushero__movepct { color: var(--risk); }

.statushero__readsub {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

/* THE ASK: the hero's one solid gold button, with what is waiting behind
   it beside it, or the button alone when there is no count to give. */
.statushero__readask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: clamp(14px, 1.8vw, 20px);
}

.statushero__readlock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 4px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: var(--lift-tile);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
}

.statushero__readlock .lock-icon { color: rgba(255, 255, 255, 0.6); }

/* THE FOUR TILES ARE A RAIL. Four numbers in four boxes said nothing a
   number cannot say on its own, so they are four rows with a label, a
   figure and a small graphic now (.factrail, css/shell.css). The rail is
   a module in the page grid rather than part of the hero plate, so its
   rules belong with the grid. */

/* BAND 3: THE PLAYER CARD, one banner.
   The calling card fills the band and everything else sits on the art.
   Positions are in cqi, shares of the panel's content width, which is the
   banner's own width: the banner is 33.333cqi tall, so the emblem at 62
   percent of that is 20.667cqi, centred 6.333cqi from the top. The
   cluster, the chip row and the ask share one left edge, --hero-col, just
   past the emblem. */
.statushero__player {
  --hero-col: calc(23.667cqi + clamp(10px, 1.6cqi, 20px));

  position: relative;
  /* The identity strip, not the pitch: a little under three fifths of the
     plate, centred, and still exactly 3:1, because the width is capped
     rather than the height. The banner is its own size container, so the
     emblem and the cluster measure this width and not the panel's. */
  container-type: inline-size;
  width: 58%;
  margin: clamp(26px, 3vw, 40px) auto 0;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  border-radius: var(--r-tile);
  background: var(--surface-panel);
  box-shadow: var(--lift-tile), 0 24px 60px -30px rgba(0, 0, 0, 0.95);
}

/* The hairline, over the art: an inset shadow on the banner itself would
   paint under the image. */
.statushero__player::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 var(--edge-top), inset 0 0 0 1px var(--edge);
  pointer-events: none;
}

/* The art fills the whole band, so cover crops nothing. */
.statushero__cardart {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 33.333cqi;
  overflow: hidden;
  background: var(--surface-panel);
}

.statushero__cardart picture,
.statushero__cardimg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
}

/* Earned and not worn: a little less saturated than a worn card, never buried. */
.statushero__cardimg--held { filter: saturate(0.85); }

/* A readable bed at the left, where the cluster sits, gone by 68 percent,
   and a fade along the bottom under the chip and the ask. */
.statushero__cardscrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 10, 14, 0) 58%, rgba(8, 10, 14, 0.8) 100%),
    linear-gradient(90deg, rgba(8, 10, 14, 0.94) 0%, rgba(8, 10, 14, 0.82) 30%, rgba(8, 10, 14, 0.35) 52%, rgba(8, 10, 14, 0) 68%);
}

/* No card: no image, a dark panel at the same 3:1. The hairline weave
   that used to sit on it is gone. A 135 degree repeating gradient is the
   universal sign for an image that failed to load, and nothing here has
   failed: this is an account that has not earned a card yet, and it
   should read as an empty shelf, not as a broken one. */
.statushero__cardart--empty {
  background: var(--surface-raised);
}

/* The emblem, on the art at the left, lit. */
.statushero__emblem {
  position: absolute;
  z-index: 1;
  top: 6.333cqi;
  left: 3cqi;
  display: block;
  width: 20.667cqi;
  height: 20.667cqi;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(240, 180, 41, 0.55));
}

/* The cluster beside it: rank, name row, counts, 4px apart, centred on
   the emblem, and never into the right 40 percent. */
.statushero__ident {
  position: absolute;
  z-index: 1;
  top: 0;
  left: var(--hero-col);
  right: 40cqi;
  height: 33.333cqi;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.statushero__ranklabel {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--display-hero);
  font-weight: 700;
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff3cf 0%, #f5c451 68%, #d9a02a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.statushero__sign {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}

.statushero__avatar {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.statushero__name {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-stretch: var(--display-header);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.95);
}

.statushero__micro {
  margin: 0;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* 0.76, not 0.62: the line runs out to where the scrim has thinned, and
     over bright art 0.62 fell under 4.5:1. */
  color: rgba(255, 255, 255, 0.76);
}

/* Along the bottom, on the cluster's left edge: the chip, then the ask at the right. */
.statushero__cardbottom {
  position: absolute;
  z-index: 1;
  left: var(--hero-col);
  right: 3cqi;
  bottom: clamp(12px, 2.2cqi, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.statushero__cardbottom .cta { flex: none; }

.statushero__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 4px 9px 3px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  /* Dark enough to carry its own contrast: it sits past the name, where
     the banner's left scrim has thinned over the art. */
  background: rgba(10, 12, 17, 0.72);
  font-family: var(--font-display);
  font-stretch: var(--display-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.statushero__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6b6b66;
}

.statushero__tag.is-on { color: rgba(255, 255, 255, 0.82); }
.statushero__tag.is-on .statushero__dot { background: #3ddc84; box-shadow: 0 0 8px rgba(61, 220, 132, 0.8); }

/* The chip row: the card's state, and its name beside it. */
.statushero__cardrow {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  min-width: 0;
}

.statushero__cardstate {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 4px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.statushero__cardstate .lock-icon { color: rgba(255, 255, 255, 0.6); }

.statushero__cardname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-stretch: var(--display-header);
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
}

/* No card: the chip row holds the "No card worn" line, a lock before it. */
.statushero__emptynote { gap: 10px; }
.statushero__emptymark { display: inline-flex; }
.statushero__emptymark .lock-icon { width: 14px; height: 15px; color: rgba(255, 255, 255, 0.45); }

/* THE CLIMB LEFT THIS FILE. The hero's lockup, its rail and both rail
   emblems are gone: the page had three ladder shaped things within one
   screen, so the climb figure and the rungs now live together in the
   Standing module (.arena__climb-line and .arena__tiers below). What is
   left here is the read, and the footnote under it. */

/* The footnote: two quiet lines, tight to each other. */
.statushero__foot { margin-top: clamp(26px, 3vw, 40px); }

.statushero__whisper {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.52);
}

.statushero__public {
  margin: 6px 0 0;
  max-width: 44ch;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.48);
}

/* UNDER THE PLATE, on the page: the case chip, then the two quiet links. */
.statushero__below {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 14px;
}

.statushero__case {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 6px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: var(--lift-tile);
  font-family: var(--font-display);
  font-stretch: var(--display-header);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

.statushero__case::before {
  content: "";
  width: 11px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-top-width: 3px;
  border-radius: 2px;
  opacity: 0.8;
}

.statushero__case .mono { color: #fff; }
.statushero__case:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.statushero__case:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- 2. The arena: steel, no panel ---------- */

.arena { padding: clamp(6px, 1.4vw, 18px) 0 clamp(26px, 3.6vw, 44px); }

.arena__body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(22px, 4vw, 64px);
}

.arena__title {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--display-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a93a6;
}

/* THE RUNGS LEFT THIS FILE. They were four tiers across, emblem above
   name, and they are a vertical ladder in css/shell.css now. The display
   rules here were already overridden by that file, but the two that
   named the element (.arena__tier img) carried a type selector and
   therefore outranked .arena__tier .arena__tieremblem: the held rung kept
   a 64px emblem in a 32px grid track, and the 20px that overflowed sat on
   top of the tier name. Ape read as "e". The ladder owns its own emblem
   size now, in one place. */

.arena__ladderhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.arena__meta { font-size: 11px; color: #6f7686; }

.arena__rows { margin: 10px 0 0; padding: 0; list-style: none; }

.arena__row {
  display: grid;
  grid-template-columns: 22px 28px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(168, 196, 255, 0.08);
}

.arena__pos { font-size: 13px; text-align: right; color: #a8c4ff; }

.arena__avatar {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #141821;
}

.arena__who { display: flex; flex-direction: column; min-width: 0; }

.arena__who b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
  color: #e9edf5;
}

.arena__who span { font-size: 12px; color: #7d8596; }

.arena__muted { margin: 12px 0 0; font-size: 13.5px; color: #7d8596; }

.arena__link {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  color: #a8c4ff;
  text-decoration: none;
}

.arena__link:hover { color: #dce7ff; }
.arena__link:focus-visible { outline: 2px solid #a8c4ff; outline-offset: 3px; }

/* ---------- 3. The case: a shelf between two hairlines ---------- */

.dash-case .case {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(16px, 2vw, 22px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.case__title {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--display-header);
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}

.case__sub { margin: 6px 0 0; font-size: 13.5px; color: #9a968d; }

.case__open {
  margin-top: 12px;
  padding: 9px 15px;
  border: 1px solid rgba(236, 235, 230, 0.28);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-display);
  font-stretch: var(--display-header);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1;
  color: #ecebe6;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

.case__open:hover { border-color: rgba(236, 235, 230, 0.6); }
.case__open:focus-visible { outline: 2px solid #ecebe6; outline-offset: 2px; }

.case__shelf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case__card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.case__card picture,
.case__card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border-radius: 8px;
}

.case__card img {
  filter: saturate(0.5) brightness(0.72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.case__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #9a968d;
}

.case__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 3 / 1;
  border: 1px dashed rgba(236, 235, 230, 0.22);
  border-radius: 8px;
  font-size: 15px;
  color: #b9b5ab;
}

.case__wait { margin: 0; padding: 16px 0; font-size: 13.5px; color: #9a968d; }

/* ---------- The line, and the desk below it ---------- */

.deskmark { padding: clamp(30px, 4.4vw, 56px) 0 0; }

.deskmark__inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.deskmark__inner::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.deskmark__label {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--display-hero);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #6b6b66;
}

.deskmark__note { margin: 0; font-size: 12px; color: #55534e; }

/* The desk: the old hero keeps its figure and chart and gives its banner,
   rail and ladder to the hero and the arena above. Denser, smaller heads. */
/* The rank card has nothing left to draw on this page. Its banner and
   ladder are hidden below, its value figure and chart moved into the
   chart module (mountValueChart), and Standing carries the climb, so
   what reached the page was .herorank as an empty 101px panel with an
   empty 61px .progression box inside it. A member keeps the whole card:
   this is scoped to the free page, like every rule in this file. */
.dash--free .herorank { display: none; }

/* .ladder is not in this list any more, and not on the page either: the
   horizontal strip was deleted from buildRankCard when Standing became
   the climb for both views, so a rule hiding it was hiding nothing. */
/* THE IDENTITY BANNER IS THE FREE HERO NOW (phase 3). It used to be
   hidden here so the flex read could lead; the read is retired, and the
   banner, the rank rail, the gap and the note all show for a free reader,
   the same cockpit a member gets, with the intelligence around it locked. */

.dash--free .progression__figure { font-size: clamp(26px, 3vw, 36px); }
/* The free value chart plot now matches the member height: it carries
   the real recorded line, so it no longer needs the shorter flex-era box. */

/* The chart's goal line and chip were gold. On this page the climb
   already lives in the arena, and gold is the hero's, so they go steel. */
.dash--free .vchart__goal { border-color: rgba(168, 196, 255, 0.45); color: #dce7ff; box-shadow: none; }
.dash--free .vchart__goalline { stroke: #a8c4ff; }
.dash--free .vchart__goalglow { stroke: #a8c4ff; stroke-opacity: 0.1; }
.dash--free .vchart__key--goal { color: #a8c4ff; }

.dash--free main > .section.dash-section { padding: clamp(10px, 1.4vw, 18px) 0; }
.dash--free main > .section.dash-case { padding-top: 0; }

.dash--free .dash-sechead__title { font-size: 15px; letter-spacing: 0.01em; }

@media (max-width: 900px) {
  .arena__body { grid-template-columns: minmax(0, 1fr); }
  .arena__ladder { padding-top: 16px; border-top: 1px solid rgba(168, 196, 255, 0.14); }
}

@media (min-width: 901px) {
  .arena__ladder { padding-left: clamp(22px, 3vw, 46px); border-left: 1px solid rgba(168, 196, 255, 0.14); }
}

/* One column. The banner keeps its 3:1 at the full width with the emblem,
   rank and name on it; the name row may wrap under the rank. The counts
   line steps aside (the footnote under the climb carries the same counts),
   and the chip and the ask move under the art instead of over it. The
   row under the plate wraps as it needs to. */
@media (max-width: 760px) {
  .statushero__panel { border-radius: var(--r-panel); }
  .statushero__player { width: 100%; aspect-ratio: auto; padding-top: 33.333cqi; }
  .statushero__read { grid-template-columns: minmax(0, 1fr); }
  /* The value drops under the name instead of squeezing it to nothing. */
  .statushero__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "thumb name" "thumb note";
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
  }
  .statushero__item .signal__thumb { grid-area: thumb; }
  .statushero__itemname { grid-area: name; }
  .statushero__itemnote { grid-area: note; }
  /* Under its own headline on a phone, where the headline bottoms out. */
  .statushero__leadfig { font-size: 28px; margin-top: 6px; }
  .statushero__ident { right: 3cqi; }
  .statushero__ranklabel { font-size: clamp(18px, 5.4vw, 22px); }
  .statushero__sign { flex-wrap: wrap; row-gap: 4px; }
  /* A phone's banner is under 100px tall and the cluster is narrow: the
     chip tightens so it stays whole on the art down to 320px. */
  .statushero__tag { gap: 5px; padding: 3px 7px 2px; font-size: 9px; letter-spacing: 0.08em; }
  .statushero__micro { display: none; }
  .statushero__cardbottom {
    position: static;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 14px 14px;
    background: var(--surface-panel);
  }
  .statushero__cardbottom .cta { width: 100%; justify-content: center; }
}

@media (max-width: 720px) {
  .dash-case .case { grid-template-columns: minmax(0, 1fr); }
  .case__shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Share your profile, under the plate: quiet links ----------
   On the dark page rather than over card art, so plain underlined links
   read at AA without a pill. */
.statushero__share,
.statushero__profile {
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 4px;
}

.statushero__share {
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

.statushero__share:hover,
.statushero__profile:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.6); }
.statushero__share:focus-visible,
.statushero__profile:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.statushero__share.is-copied { color: #7ef0b4; text-decoration-color: rgba(126, 240, 180, 0.5); }

.statushero__sharestatus {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The equip affordance moved to css/shell.css with the compact banner
   (phase: banner match): a free reader now shows the member .statushero
   banner, not the .rank__banner this rule targeted. */