/* The treemap chart. Plain CSS in a file of its own for each chart form (decision 0012), so that
   changing one form never changes another form's frozen embeds (decision 0009). Uses the house
   tokens. */

.tm {
  font-size: 14px;
}

.tm .area {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface);
}

.tm .tile {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  border: 2px solid var(--surface);
  background: var(--grid);
  color: var(--ink);
}

/* What the headline names: a tint and a frame, so it never depends on colour alone. */
.tm .tile.hl {
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.tm .tn {
  position: absolute;
  top: 4px;
  right: 6px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.tm .tl {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.tm .tl b {
  padding-right: 14px;
  font-weight: 600;
}

.tm .tl span {
  color: var(--ink-2);
}

.tm .key {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: part;
}

.tm .key li {
  display: grid;
  grid-template-columns: 2.25ch 1fr auto auto;
  column-gap: 10px;
  align-items: baseline;
  color: var(--ink-2);
  counter-increment: part;
}

.tm .key li::before {
  color: var(--muted);
  content: counter(part);
  font-size: 12px;
  text-align: right;
}

.tm .key .kv,
.tm .key .ks {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tm .key .ks {
  min-width: 4ch;
  text-align: right;
}

.tm .key .hl .kn,
.tm .key .hl .kv {
  font-weight: 600;
}

/* On a narrow screen only the largest tile has room for its name; every tile keeps its number
   and is named in the list below. */
@container (max-width: 30rem) {
  .tm .tile:not(.hl) .tl {
    display: none;
  }
}

/* The share card: the tiles alone, in larger type. */
.tm-card .area {
  height: 660px;
}

.tm-card .tl {
  padding: 10px 14px;
  font-size: 21px;
  overflow-wrap: break-word;
}

.tm-card .tn {
  top: 8px;
  right: 10px;
  font-size: 18px;
}