/* ================= USER TRAFFIC — THE CHARTS, THE HEATMAP AND THE RANKED BARS =================
   One prefix, not negotiable: `ut-` is alt-user-traffic.css (the pane shell), `utc-` is this
   file (everything inside a panel body) — two sheets on one page may not both declare a bare
   rule for the same name, or the later one wins silently (css-class-collision-check.py).
   Reuses the Admin Console's `sx-*` panel/card vocabulary rather than copying it; the two `sx-`
   rules here are a MODIFIER and a DESCENDANT, which the collision check treats as extension,
   not redefinition. No colour literals — every colour is an `--a-*` role, so the charts stay
   legible in dark, light and a custom palette. Colour is never the message: every value is also
   text, every selected state also a border and a ✓. Everything wide scrolls inside its own box
   (`.utc-scroll`/`.utc-tablewrap`), never the page. */

/* ---------- screen-reader-only, this file's own ----------
   Same rule as `.a-sr` (alt-components.css) under this sheet's own prefix — the collision check
   forbids extending a shared name from here, and a <caption> needs naming without being drawn. */
.alt-app .utc-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- a panel's body, and the controls in its head ---------- */

.alt-app .utc-body{ min-width:0; }
/* A body focused because a card sent the reader to it is a DESTINATION, not a control — it
   takes the ring and nothing else changes (same rule as `.sx-view:focus-visible`). */
.alt-app .utc-body:focus{ outline:none; }
.alt-app .utc-body:focus-visible{ outline:2px solid var(--a-ring); outline-offset:4px; }

.alt-app .utc-ctls{
  display:flex; align-items:center; gap:var(--a-2); flex-wrap:wrap;
  min-width:0; align-self:flex-start;
}
.alt-app .utc-ctl{ display:flex; align-items:center; gap:var(--a-1); min-width:0; }
.alt-app .utc-ctl-gap{ width:var(--a-1); flex:0 0 auto; }
.alt-app .utc-grain-host{ display:contents; }

/* ---------- the two-up row ----------
   Its own grid, not `.sx-grid` (that one becomes three columns at 1480px for the treemap's
   named panels — two children would leave an empty track). Steps are the PANE's width via
   container query, not the window's, since this pane sits in a console rail of variable width. */
.alt-app .utc-two{
  display:grid; gap:var(--a-4); align-items:start;
  grid-template-columns:minmax(0, 1fr); min-width:0;
}
.alt-app .utc-two > *{ min-width:0; }
@container sxpane (min-width: 860px){
  .alt-app .utc-two{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ---------- the four states ----------
   `.utc-state` is the shared shell; the modifier is what keeps a loading state from reusing the
   empty state's markup, which would make a slow fetch look like an empty result. */
.alt-app .utc-state{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--a-1);
  padding:var(--a-5); min-width:0;
  border:1px solid var(--a-line-soft); border-radius:var(--a-r);
  background:var(--a-bg);
}
/* Empty is dashed and error is amber-edged, so the two are not one box with different words. */
.alt-app .utc-state.is-empty{ border-style:dashed; border-color:var(--a-line); }
.alt-app .utc-state.is-error{ border-color:var(--a-amber); background:var(--a-amber-soft); }
.alt-app .utc-state-t{ margin:0; font-weight:600; color:var(--a-text); }
.alt-app .utc-state-d{ margin:0; font-size:12px; line-height:1.6; color:var(--a-dim); max-width:70ch; }
.alt-app .utc-state-btn{ margin-top:var(--a-2); }
/* The cards row is a grid, so its loading/error blocks have to span it — one column of "reading
   the summary" beside three empty tracks reads as one card that failed. */
.alt-app .sx-cards > .utc-state{ grid-column:1 / -1; }

/* A caveat is not a warning band: it is the sentence that keeps a figure honest, and it sits
   under the figure in the dim role every other note on this console uses. */
.alt-app .utc-note{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--a-1) var(--a-2);
  margin:var(--a-2) 0 0; font-size:11.5px; line-height:1.55; color:var(--a-dim);
  max-width:78ch;
}
.alt-app .utc-note.is-warn{ color:var(--a-amber); }
/* Why an earlier period is empty — the one note not attached to a single panel, since it
   qualifies every figure below it; reads as a banner, not a footnote. */
.alt-app .utc-horizon{
  margin:0; padding:var(--a-2) var(--a-3);
  border:1px solid var(--a-line); border-inline-start:3px solid var(--a-blue);
  border-radius:var(--a-r-sm);
  background:var(--a-raised); color:var(--a-text);
  font-size:12px; line-height:1.6; max-width:88ch;
}
.alt-app .utc-horizon[hidden]{ display:none; }
/* The cards' own scope sentence: present only while a filter is active, so it must collapse
   entirely rather than hold a blank line. */
.alt-app .utc-cardnote{ margin:0; max-width:88ch; }
.alt-app .utc-cardnote:empty{ display:none; }

/* The selected mark — a glyph rather than an icon: it survives a stylesheet that failed to
   load, and it is the half of "selected" that is not colour. */
.alt-app .utc-tick{
  flex:0 0 auto; font-size:11px; line-height:1; color:var(--a-blue-text);
  margin-inline-end:var(--a-1);
}
.alt-app .utc-tag{
  flex:0 0 auto; font-size:9.5px; letter-spacing:.03em; text-transform:uppercase;
  padding:0 4px; border-radius:var(--a-r-pill);
  color:var(--a-dim); border:1px solid var(--a-line);
}

/* ---------- the metric cards ----------
   Total Users is not a button — nothing in this pane for it to open, it counts every account
   that exists. `.sx-card` is a control by default (pointer, hover border); the one
   non-interactive card opts out of both rather than promise a press that does nothing. */
.alt-app .sx-card.utc-static{ cursor:default; }
.alt-app .sx-card.utc-static:hover{
  border-color:var(--a-line-soft); background:var(--a-panel);
}
/* The period-over-period line, absent today — utDelta() returns null against a zero baseline,
   so the element isn't created; the rule just gives the figure a home for when it is. */
.alt-app .utc-delta{
  font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--a-dim);
  font-variant-numeric:tabular-nums;
}

/* ============ 1 · ACTIVITY OVER TIME ============ */

/* The overflow box — everything wide sits in one, so the page itself never scrolls sideways;
   `overscroll-behavior-x` keeps a trackpad flick inside the chart. */
.alt-app .utc-scroll{
  width:100%; min-width:0; overflow-x:auto; overscroll-behavior-x:contain;
  padding-bottom:var(--a-1);
}

/* An explicit grid of equal tracks, not flex — grid rows cannot be overrun by a tall bar, which
   is how bars once drew on top of the date labels (sys_design-system §10). `--utc-cols` comes
   from the renderer's real bucket count, so the strip and its scroll box agree. */
.alt-app .utc-series{
  display:grid; gap:2px; align-items:end;
  grid-template-columns:repeat(var(--utc-cols, 30), minmax(14px, 1fr));
  min-width:min(100%, calc(var(--utc-cols, 30) * 26px));
}
.alt-app .utc-col{ min-width:0; display:flex; }
.alt-app .utc-col-btn{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:var(--a-1);
  padding:var(--a-1) 0; font:inherit; cursor:pointer;
  color:var(--a-text); background:none;
  border:1px solid transparent; border-radius:var(--a-r-sm);
}
.alt-app .utc-col-btn:hover{ background:var(--a-raised); }
.alt-app .utc-col-btn:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }
.alt-app .utc-col-track{
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  gap:2px; height:150px; min-width:0;
}
/* The figure sits inside the track, directly above its bar, so it rises with the bar. */
.alt-app .utc-col-val{
  font-size:10px; font-variant-numeric:tabular-nums; color:var(--a-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.alt-app .utc-col-fill{
  width:100%; height:var(--utc-v, 0%); min-height:0;
  background:var(--a-blue); border-radius:var(--a-r-sm) var(--a-r-sm) 0 0;
}
/* A bucket with nothing in it keeps its place and loses its fill — an absent column reads as
   uncounted; a hairline at the axis reads as the zero it is. */
.alt-app .utc-col-btn.is-zero > .utc-col-track > .utc-col-fill{
  height:1px; min-height:1px; background:var(--a-line-strong);
}
.alt-app .utc-col-lab{
  font-size:10px; line-height:1.3; text-align:center; color:var(--a-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ============ 2 · ACTIVITY BY FEATURE — the donut ============ */

.alt-app .utc-donut{
  display:grid; grid-template-columns:minmax(0, 160px) minmax(0, 1fr);
  gap:var(--a-4); align-items:center; min-width:0;
}
.alt-app .utc-donut-svg{ width:100%; height:auto; max-width:160px; display:block; }
.alt-app .utc-slice{ fill:none; stroke-width:14; stroke:var(--a-line-strong); }
.alt-app .utc-slice.is-live{ cursor:pointer; }
/* The selected segment thickens AND its legend carries the word — two signals plus the ✓, so
   nothing depends on fill alone. Unselected segments dim, not disappear (sys_design-system §7). */
.alt-app .utc-slice.is-on{ stroke-width:19; }
.alt-app .utc-s0{ stroke:var(--a-faint); }
.alt-app .utc-s1{ stroke:var(--a-blue); }
.alt-app .utc-s2{ stroke:var(--a-purple); }
.alt-app .utc-s3{ stroke:var(--a-gold); }
.alt-app .utc-s4{ stroke:var(--a-green); }
.alt-app .utc-s5{ stroke:var(--a-amber); }
.alt-app .utc-donut-val{
  fill:var(--a-text); font-size:9px; font-weight:700; font-family:var(--a-display, inherit);
}
.alt-app .utc-donut-cap{ fill:var(--a-dim); font-size:4.6px; letter-spacing:.06em; }

.alt-app .utc-legend{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.alt-app .utc-lg{
  display:flex; align-items:flex-start; gap:var(--a-2);
  width:100%; padding:var(--a-1) var(--a-2);
  font:inherit; font-size:12px; text-align:left;
  color:var(--a-text); background:none;
  border:1px solid transparent; border-radius:var(--a-r-sm);
}
.alt-app button.utc-lg{ cursor:pointer; }
.alt-app button.utc-lg:hover{ background:var(--a-raised); }
.alt-app button.utc-lg:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }
.alt-app .utc-lg.is-on{ border-color:var(--a-blue); border-width:2px; background:var(--a-blue-soft); }
/* "Other" is not a control — there is no filter value meaning "every feature outside the top
   five", so it is drawn as text and reads as text. */
.alt-app .utc-lg.is-inert{ color:var(--a-dim); }
.alt-app .utc-sw{
  flex:0 0 auto; width:11px; height:11px; margin-top:3px; border-radius:3px;
  border:1px solid var(--a-line-strong);
}
/* The swatch takes its series colour from the same class the segment does — one declaration, so
   a legend can never disagree with the ring it labels. */
.alt-app .utc-sw.utc-s0{ background:var(--a-faint); }
.alt-app .utc-sw.utc-s1{ background:var(--a-blue); }
.alt-app .utc-sw.utc-s2{ background:var(--a-purple); }
.alt-app .utc-sw.utc-s3{ background:var(--a-gold); }
.alt-app .utc-sw.utc-s4{ background:var(--a-green); }
.alt-app .utc-sw.utc-s5{ background:var(--a-amber); }
.alt-app .utc-lg-b{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.alt-app .utc-lg-l{ display:flex; align-items:center; gap:var(--a-1); min-width:0; }
.alt-app .utc-lg-l > span{ overflow:hidden; text-overflow:ellipsis; }
.alt-app .utc-lg-v{ font-size:11px; color:var(--a-dim); font-variant-numeric:tabular-nums; }

/* ============ 3 · RANKED BARS — teams, activity types and people ============ */

.alt-app .utc-bars{ display:flex; flex-direction:column; gap:var(--a-2); min-width:0; }
.alt-app .utc-bar{
  display:flex; flex-direction:column; gap:var(--a-1);
  width:100%; padding:var(--a-2) var(--a-3); min-width:0;
  font:inherit; text-align:left;
  color:var(--a-text); background:var(--a-panel);
  border:1px solid var(--a-line-soft); border-radius:var(--a-r);
}
.alt-app button.utc-bar{ cursor:pointer; }
.alt-app button.utc-bar:hover{ background:var(--a-raised); border-color:var(--a-line-strong); }
.alt-app button.utc-bar:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }
/* A row that narrows nothing is a div, and it must not look like a control. */
.alt-app .utc-bar.is-inert{ background:var(--a-bg); }
.alt-app .utc-bar.is-on{
  border-color:var(--a-blue); border-width:2px;
  box-shadow:0 0 0 1px var(--a-blue) inset;
}
.alt-app .utc-bar-top{ display:flex; align-items:baseline; gap:var(--a-2); min-width:0; }
.alt-app .utc-bar-l{
  flex:1 1 auto; min-width:0; font-weight:600; font-size:13px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.alt-app .utc-bar-v{
  flex:0 0 auto; font-size:13px; font-weight:650; font-variant-numeric:tabular-nums;
}
/* The track is a row of its own height, so a fill can never be drawn over the label beneath it. */
.alt-app .utc-bar-track{
  display:flex; width:100%; height:8px; border-radius:var(--a-r-pill);
  background:var(--a-bg); border:1px solid var(--a-line-soft); overflow:hidden;
}
.alt-app .utc-bar-fill{ width:var(--utc-v, 0%); height:100%; background:var(--a-blue); }
.alt-app .utc-bar.is-on .utc-bar-fill{ background:var(--a-blue-text); }
.alt-app .utc-bar-sub{ font-size:11px; color:var(--a-dim); overflow-wrap:anywhere; }

/* ============ 4 · THE HEATMAP ============ */

/* An explicit grid: one label track, 24 equal hour tracks. `minmax(0,1fr)` stops a wide row
   pushing past the container; a real per-cell minimum lets the box scroll instead of collapsing. */
.alt-app .utc-heat{
  display:flex; flex-direction:column; gap:2px;
  min-width:min(100%, 700px);
}
.alt-app .utc-heat-row{
  display:grid; gap:2px; align-items:stretch;
  grid-template-columns:5.5em repeat(24, minmax(16px, 1fr));
  min-width:0;
}
.alt-app .utc-heat-day{
  display:flex; align-items:center; justify-content:space-between; gap:var(--a-1);
  min-width:0; padding-inline-end:var(--a-2);
  font-size:11px; color:var(--a-dim);
}
.alt-app .utc-heat-day-n{ font-weight:650; color:var(--a-text); }
/* The row total is text, at every width — what makes this grid readable with no colour at all:
   seven figures a reader can compare directly. */
.alt-app .utc-heat-day-v{ font-variant-numeric:tabular-nums; }
.alt-app .utc-heat-h{
  font-size:9.5px; line-height:1.2; text-align:center; color:var(--a-faint);
  overflow:hidden; white-space:nowrap;
}
.alt-app .utc-heat-c{
  display:flex; align-items:center; justify-content:center;
  min-width:0; height:22px; padding:0;
  font:inherit; font-size:9.5px; font-variant-numeric:tabular-nums; cursor:pointer;
  color:var(--a-text); border:1px solid var(--a-line-soft); border-radius:3px;
  background:var(--a-bg);
}
.alt-app .utc-heat-c:hover{ border-color:var(--a-blue); }
.alt-app .utc-heat-c:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }
.alt-app .utc-heat-v{ overflow:hidden; white-space:nowrap; }

/* Six bands mixed from one role, not six new colours — one accent composites correctly in
   dark/light/custom without a second set of measured values. NOT `opacity` (the first attempt):
   opacity dims the cell's TEXT too, and the count must never fade. Plain declaration first,
   always — an engine without color-mix() discards the whole rule otherwise (same pattern as
   alt-tasks.css/alt-embed-task.css). Band 0 is deliberately not a pale blue: "nothing happened"
   is a different kind of thing from "quiet", and the palest ramp tint reads as the latter. */
.alt-app .utc-h0{ background:var(--a-bg); }
.alt-app .utc-h1{
  background:var(--a-blue-soft);
  background:color-mix(in srgb, var(--a-blue) 20%, var(--a-panel));
}
.alt-app .utc-h2{
  background:var(--a-blue-soft);
  background:color-mix(in srgb, var(--a-blue) 40%, var(--a-panel));
}
.alt-app .utc-h3{
  background:var(--a-blue-fill, var(--a-blue-soft));
  background:color-mix(in srgb, var(--a-blue) 60%, var(--a-panel));
}
.alt-app .utc-h4{
  background:var(--a-blue);
  background:color-mix(in srgb, var(--a-blue) 80%, var(--a-panel));
}
.alt-app .utc-h5{ background:var(--a-blue); }
/* The number in a strongly-tinted cell reads against the tint, so the two darkest bands take
   the paired surface role rather than body text colour — both tokens, not measured here. */
.alt-app .utc-h4 > .utc-heat-v,
.alt-app .utc-h5 > .utc-heat-v{ color:var(--a-panel); font-weight:650; }

/* The band key beside the "busiest hour" figure. Swatches, not words: "low" and "high" are a
   judgment, and the sentence next to them carries the actual numbers. */
.alt-app .utc-key{
  width:14px; height:10px; border-radius:2px; flex:0 0 auto;
  border:1px solid var(--a-line-strong);
}
.alt-app .utc-key-l{ margin-inline:var(--a-1); }

/* ============ 5 · RECENT ACTIVITY ============ */

/* Its own scroller and a real minimum width — seven columns of mixed text don't fit a phone,
   and a table that widens the PAGE scrolls every other section sideways too. */
.alt-app .utc-tablewrap{ width:100%; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; }
.alt-app .utc-table{
  width:100%; border-collapse:collapse; font-size:12.5px; min-width:620px;
}
.alt-app .utc-table th,
.alt-app .utc-table td{
  padding:var(--a-2) var(--a-3); text-align:left;
  border-bottom:1px solid var(--a-line-soft); vertical-align:top;
}
.alt-app .utc-table thead th{
  font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--a-dim); border-bottom:1px solid var(--a-line); white-space:nowrap;
}
.alt-app .utc-table tbody tr:hover{ background:var(--a-raised); }
.alt-app .utc-num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
/* A result that is not success is named, not tinted — the word is already in the cell; the
   amber role is the second signal, and the cell reads correctly with no colour at all. */
.alt-app .utc-res.is-off{ color:var(--a-amber); font-weight:650; }

/* ============ 6 · SECURITY & ANOMALIES ============
   user-traffic-security.js owns this markup; every class starts `utc-` for the same reason as
   the rest of the file. The four rule cards are `.a-stat.sx-card`, extended not redeclared; the
   gap list, severity badge and raw-device string are the only things here with no home in the
   shared vocabulary. */

/* The gap callout is a heading over a body, not an icon beside one — `.a-callout` is
   `display:flex` for an icon column, and this caller passes no icon. Without this override the
   section label sat as an unintended second flex column beside the list, squeezing to a sliver
   under 620px. Column makes it a heading, then the list it introduces, at every width. */
.alt-app .utc-gaps{ flex-direction:column; align-items:stretch; }
.alt-app .utc-gaps > .a-sec-h{ margin-bottom:var(--a-1); }

/* The list itself — a native `<dl>` with no rule renders at the UA's own block spacing (a 40px
   indent, dt/dd at equal weight), which is the "several short stacked lines" look this pane was
   built to avoid. Weight is the only thing separating what from why; the badge language (colour
   plus border) stays reserved for the four named RULES, not for sentences about what wasn't
   observed. */
.alt-app .utc-gap-list{ display:flex; flex-direction:column; gap:var(--a-2); margin:var(--a-2) 0 0; }
.alt-app .utc-gap{ margin:0; }
.alt-app .utc-gap dt{ margin:0; font-weight:650; color:var(--a-text); font-size:12.5px; }
.alt-app .utc-gap dd{ margin:2px 0 0; color:var(--a-dim); font-size:12px; line-height:1.6; }

/* The selected rule card keys on `[aria-pressed="true"]` rather than a new class — the state
   the button already carries for a reader who can't see colour, the same choice
   `.sx-view-tab[aria-selected="true"]` makes in alt-storage.css. Without it, four filterable
   cards toggled the attribute on every click and looked identical before and after. */
.alt-app .utc-sig-card[aria-pressed="true"]{
  border-color:var(--a-blue); background:var(--a-blue-soft);
  box-shadow:0 0 0 1px var(--a-blue) inset;
}
.alt-app .utc-sig-card[aria-pressed="true"] .sx-card-lbl{ color:var(--a-blue-text); }

/* The severity badge — two values ever, `UTSEC_SEVERITY_LABEL` (JS) is the only source of the
   word; this only adds colour and shape. Low is the neutral pill every other tag here wears;
   High borrows the amber role (a thing to watch, not an incident — same distinction as
   `.utc-note.is-warn`). The word is always in the badge too; colour is never the only signal. */
.alt-app .utc-sev{
  display:inline-flex; align-items:center;
  padding:1px 8px; border-radius:var(--a-r-pill);
  font-size:11px; font-weight:650; letter-spacing:.02em;
  border:1px solid var(--a-line); color:var(--a-dim); background:var(--a-raised);
}
.alt-app .utc-sev-high{
  color:var(--a-amber); border-color:var(--a-amber);
  background:var(--a-amber-soft);
  background:color-mix(in srgb, var(--a-amber) 14%, var(--a-panel));
}

/* The raw user-agent string — the fact beside the guess, often 100+ characters nobody chose the
   length of. `anywhere` breaks it rather than forcing the table's scroller wider than its other
   columns need. */
.alt-app .utc-ua{ display:inline-block; overflow-wrap:anywhere; max-width:100%; }

/* ---------- motion ----------
   Only colour and border transition, dropped under reduced motion — nothing animates size or
   position, because a bar that eases into place is a bar whose length briefly lies. */
.alt-app .utc-col-btn,
.alt-app .utc-bar,
.alt-app .utc-lg,
.alt-app .utc-heat-c,
.alt-app .sx-card.utc-static{
  transition:background-color var(--a-quick) var(--a-ease), border-color var(--a-quick) var(--a-ease);
}
@media (prefers-reduced-motion: reduce){
  .alt-app .utc-col-btn,
  .alt-app .utc-bar,
  .alt-app .utc-lg,
  .alt-app .utc-heat-c,
  .alt-app .sx-card.utc-static{ transition:none; }
}

/* ---------- narrow ----------
   Container queries on the PANE, not media queries on the window — this pane's width is the
   console rail's, not the browser's. */
@container sxpane (max-width: 620px){
  /* The donut stacks rather than shrinking — at 320px a 160px ring would leave the legend about
     110px, not enough for a feature name and two figures. */
  .alt-app .utc-donut{ grid-template-columns:minmax(0, 1fr); justify-items:center; }
  .alt-app .utc-donut-svg{ max-width:190px; }
  .alt-app .utc-legend{ width:100%; }

  /* Series columns get shorter, not narrower — the strip already scrolls, and a 150px track is
     most of a phone viewport for one panel. */
  .alt-app .utc-col-track{ height:110px; }

  /* The heatmap keeps every cell and scrolls — dropping hours or days would drop data at the
     width where a reader has the least of it. Only the in-cell count goes (two digits don't fit
     16px); it stays in each cell's accessible name, the readout, and the seven row totals. */
  .alt-app .utc-heat-row{ grid-template-columns:4.4em repeat(24, minmax(15px, 1fr)); }
  .alt-app .utc-heat-day{ flex-direction:column; align-items:flex-start; gap:0; }
  .alt-app .utc-heat-v{ display:none; }
}