/* Holders: the supply by kind of holder, linked groups, the team, what is
   burned and locked, the largest accounts. Colours of the page come from the
   tokens in app.css. The colours of the kinds of holder are set here, one set
   per theme.

   Measured on 2026-09-27 in OKLab x 100, every pair of the six colours:
   dark, on the card: at least 12.5 apart with red or green blindness, 11.3
   with blue blindness, 21.9 without one, contrast with the card 3.7 or more.
   light, on the card: at least 10.3, 8.5 and 19.6, contrast 3.1 or more.
   Colour is never the only sign: every kind is also written in words. */

.hd {
  --hd-linked: #f59e0b;
  --hd-linked-soft: rgba(245, 158, 11, .34);
  --hd-creator: #d55181;
  --hd-wallet: #e2e8f0;
  --hd-other: #008300;
  --hd-pool: #3987e5;
  --hd-locker: #34d399;
  --hd-on-linked: #0a0a0a;
  --hd-on-creator: #0a0a0a;
  --hd-on-wallet: #0a0a0a;
  --hd-on-other: #ffffff;
  --hd-on-pool: #0a0a0a;
  --hd-on-locker: #0a0a0a;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
}
:root[data-theme="light"] .hd {
  --hd-linked: #d97706;
  --hd-linked-soft: rgba(217, 119, 6, .34);
  --hd-creator: #db2777;
  --hd-wallet: #1f2937;
  --hd-other: #166534;
  --hd-pool: #1d4ed8;
  --hd-locker: #0891b2;
  --hd-on-linked: #0a0a0a;
  --hd-on-creator: #ffffff;
  --hd-on-wallet: #ffffff;
  --hd-on-other: #ffffff;
  --hd-on-pool: #ffffff;
  --hd-on-locker: #0a0a0a;
}

/* One colour per kind. The g- names are the parts of the bar, the k- names the kinds of account. */
.hd .g-linked, .hd .k-linked { --k: var(--hd-linked); --on: var(--hd-on-linked); }
.hd .g-creator, .hd .k-creator { --k: var(--hd-creator); --on: var(--hd-on-creator); }
.hd .g-wallets, .hd .k-wallet { --k: var(--hd-wallet); --on: var(--hd-on-wallet); }
.hd .g-other, .hd .k-other { --k: var(--hd-other); --on: var(--hd-on-other); }
.hd .g-pools, .hd .k-pool { --k: var(--hd-pool); --on: var(--hd-on-pool); }
.hd .g-lockers, .hd .k-locker { --k: var(--hd-locker); --on: var(--hd-on-locker); }
.hd .g-rest { --k: var(--track); --on: var(--dim); }
.hd .liq { --k: var(--text); }
/* Burned supply is hatched: it is there, and nobody holds it. */
.hd .g-burned, .hd .k-burned { --k: transparent; --on: var(--text); }
.hd .hd-seg.g-burned, .hd .hd-sw.g-burned, .hd .hd-mt i.g-burned, .hd .k-burned .hd-bl i { background: repeating-linear-gradient(135deg, var(--dim) 0 1.5px, transparent 1.5px 5px); box-shadow: inset 0 0 0 1px var(--faint); }

/* ---------- the numbers to read first ---------- */
.hd-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hd-tile:only-child, .hd-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hd-tile { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 11px 12px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
/* The mark before the words is the mark of the legend below, so a number is tied to its colour in the drawings. */
.hd-tile span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 3px; background: var(--k, var(--line-3)); }
.hd-tile.soft span::before { border-radius: 50%; background: var(--hd-linked-soft); box-shadow: inset 0 0 0 1.3px var(--hd-linked); }
.hd-tile b { font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: -.025em; color: var(--ink); font-variant-numeric: normal; }
.hd-tile span { font-size: var(--t-small); color: var(--text); line-height: 1.3; }
.hd-tile em { font-style: normal; font-size: var(--t-label); color: var(--faint); line-height: 1.3; }
.hd-say { display: grid; gap: 6px; max-width: 72ch; }
.hd-say p { margin: 0; font-size: var(--t-body); color: var(--text); }
.hd-say p:last-child { color: var(--dim); }

/* ---------- blocks ---------- */
.hd-blk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.hd-blk h4 { margin: 0 0 2px; font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.hd .chartnote { margin-top: 0; }
.hd details.alt { margin-top: 2px; }
/* The parts that wait behind a row stand together as one list: no room between two rows, and no second line
   under a row that is open. */
.hd > details.alt.drawn { margin-top: 0; }
.hd > details.alt.drawn + details.alt.drawn { margin-top: -18px; }
.hd details.drawn > .hd-blk { padding-top: 0; border-top: 0; }
.hd .legend { margin-top: 0; }
.hd-ad { font-family: var(--mono); font-weight: 500; font-size: var(--t-small); color: var(--ink); white-space: nowrap; }
.hd-sw { display: block; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--k); }
.hd-sw.round { border-radius: 50%; width: 10px; height: 10px; }
.hd .lg .hd-sw { width: 12px; height: 12px; }

/* ---------- supply ---------- */
.hd-bar { display: flex; gap: 2px; height: 22px; min-width: 0; }
.hd-seg { display: grid; place-items: center; flex: 0 1 0; min-width: 3px; height: 100%; background: var(--k); color: var(--on); font-style: normal; }
.hd-seg:first-child { border-radius: 5px 0 0 5px; }
.hd-seg:last-child { border-radius: 0 5px 5px 0; }
.hd-seg:only-child { border-radius: 5px; }
.hd-seg b { font-size: var(--t-label); font-weight: 600; line-height: 1; }
.hd-key { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px 22px; font-size: var(--t-small); }
.hd-key li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-width: 0; }
.hd-key span { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-key b { color: var(--ink); font-weight: 500; white-space: nowrap; }

/* ---------- linked groups ---------- */
.hd-draw { min-width: 0; }
.hc { display: block; width: 100%; height: auto; }
.hc text { font-family: var(--face); font-size: var(--t-label); fill: var(--dim); }
.hc .hc-t1 { font-size: var(--t-small); font-weight: 500; fill: var(--ink); }
.hc .hc-l { stroke: var(--line-3); stroke-width: 1; }
.hc .hc-b { fill: var(--card); }
.hc .hc-c { fill: var(--k); fill-opacity: .24; stroke: var(--k); stroke-width: 1.3; }
.hc .hc-n { fill: var(--k); stroke: var(--card); stroke-width: 2; }
.hc .hc-e { fill: var(--card); stroke: var(--k, var(--dim)); stroke-width: 1.3; }
.hc .hc-x { fill: var(--card); stroke: var(--faint); stroke-width: 1.2; }
.hc .hc-in { fill: var(--on); font-size: var(--t-tag); font-weight: 600; }
.hc .hc-on { fill: var(--ink); font-size: var(--t-tag); font-weight: 600; }
.hc.hd-gl { width: 16px; height: 16px; flex: none; }
.hc.hd-gl .hc-n { stroke-width: 0; }
.hd-gt { display: grid; gap: 0; min-width: 0; font-size: var(--t-small); }
.hd-gh, .hd-grp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, 1.35fr); gap: 10px; align-items: start; padding: 7px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.hd-gh { padding-top: 0; font-size: var(--t-label); color: var(--faint); }
/* On a narrow phone every column keeps the width of its own head and of its longest number. */
@container (max-width: 300px) {
  .hd-gh, .hd-grp { grid-template-columns: minmax(58px, 1fr) minmax(44px, .9fr) minmax(48px, .8fr) minmax(0, 1.2fr); gap: 6px; }
}
.hd-grp:last-child { border-bottom: 0; }
.hd-grp span { display: grid; gap: 1px; min-width: 0; }
.hd-grp b { color: var(--ink); font-weight: 500; white-space: nowrap; }
.hd-grp em { font-style: normal; font-size: var(--t-label); color: var(--faint); line-height: 1.3; }
.hd .hd-tb { min-width: 0; font-size: var(--t-small); }
.hd .hd-tb th, .hd .hd-tb td { padding: 8px 6px; }
.hd .hd-tb td:last-child { white-space: normal; }
.hd .hd-tb th[colspan] { text-align: left; color: var(--text); font-weight: 500; padding-top: 14px; }
.hd .hd-tb td em { font-style: normal; font-family: var(--face); font-weight: 400; color: var(--faint); font-size: var(--t-label); }
.hd .tablebox { margin: 0; }

/* ---------- facts about the team ---------- */
.hd-facts { display: grid; gap: 0; }
.hd-f { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--t-body); color: var(--text); }
.hd-f:first-child { padding-top: 2px; }
.hd-f:last-child { border-bottom: 0; padding-bottom: 0; }
.hd-mk { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; justify-self: center; background: var(--k, var(--faint)); }
.hd-f .more { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--faint); }
.hd-f .by { padding-top: 2px; font-size: var(--t-label); color: var(--faint); white-space: nowrap; }

/* ---------- burned and locked ---------- */
.hd-locks { display: grid; gap: 14px; }
.hd-lk { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name value" "meter meter" "text text"; gap: 5px 10px; align-items: baseline; min-width: 0; }
.hd-ln { grid-area: name; font-size: var(--t-small); color: var(--text); }
.hd-lk b { grid-area: value; font-size: var(--t-base); font-weight: 500; color: var(--ink); white-space: nowrap; }
.hd-mt { grid-area: meter; display: block; height: 8px; border-radius: var(--pill); background: var(--track); overflow: hidden; }
.hd-mt i { display: block; height: 100%; border-radius: var(--pill); background: var(--k); }
.hd-lk em { grid-area: text; font-style: normal; font-size: var(--t-small); color: var(--dim); }
.hd-lk.none { grid-template-areas: "name name" "text text"; }

/* ---------- largest accounts ---------- */
.hd-rows { display: grid; gap: 0; min-width: 0; }
.hd-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) minmax(44px, 24%) 56px; gap: 10px; align-items: center; min-height: 40px; padding: 3px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.hd-rows:last-child .hd-row:last-child, details .hd-row:last-child { border-bottom: 0; }
.hd-rk { font-size: var(--t-label); color: var(--faint); text-align: right; }
.hd-who { display: grid; gap: 1px; min-width: 0; }
.hd-kd { font-size: var(--t-label); color: var(--dim); overflow-wrap: anywhere; }
.hd-bl { display: block; height: 10px; min-width: 0; }
.hd-bl i { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--k); }
.hd-pc { font-size: var(--t-small); font-weight: 500; color: var(--ink); text-align: right; white-space: nowrap; }

/* ---------- wide boxes ---------- */
@container (min-width: 560px) {
  .hd-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
  .hd-tile:only-child, .hd-tile:last-child:nth-child(odd) { grid-column: auto; }
  .hd-tile b { font-size: 28px; }
  .hd-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-row { grid-template-columns: 22px minmax(0, 1.2fr) minmax(0, 1fr) 64px; gap: 14px; min-height: 40px; }
  .hd-lk { grid-template-columns: 200px minmax(0, 1fr) 64px; grid-template-areas: "name meter value" "text text text"; align-items: center; gap: 4px 14px; }
  .hd-lk b { text-align: right; }
  .hd-lk.none { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "text"; }
  .hd-locks { gap: 12px; }
}

/* ---------- the map of the holders ---------- */
.bm-box { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.bm { display: block; width: 100%; height: auto; touch-action: manipulation; }
.bm-o { fill: var(--hd-linked-soft); fill-opacity: .22; stroke: var(--hd-linked); stroke-width: 1.2; stroke-dasharray: 4 4; }
.bm-n { fill: var(--hd-linked); }
.bm-nt { fill: var(--hd-on-linked); font-family: var(--face); font-size: var(--t-tag); font-weight: 600; }
.bm-l { stroke: var(--hd-linked); stroke-width: 1; stroke-opacity: .55; }
.bm-b { cursor: pointer; outline: none; }
.bm-c { fill: var(--k); stroke: var(--bg); stroke-width: 1.5; transition: stroke .15s, stroke-width .15s; }
.bm-b.k-burned .bm-c { fill: var(--line-2); stroke: var(--dim); stroke-dasharray: 3 3; }
.bm-b.unlisted .bm-c { fill: transparent; stroke: var(--hd-linked); stroke-width: 1.2; }
.bm-b:hover .bm-c, .bm-b:focus-visible .bm-c { stroke: var(--ink); stroke-width: 2; }
.bm-b.picked .bm-c { stroke: var(--ink); stroke-width: 2.5; }
.bm-t { fill: var(--on); font-family: var(--face); font-size: var(--t-tag); font-weight: 600; pointer-events: none; }
.bm-r { fill: none; stroke-width: 2; }
.bm-r.sold { stroke: var(--down); }
.bm-r.bought { stroke: var(--up); stroke-dasharray: 2 3; }
/* The marks of the legend are round, as the bubbles are. */
.hd .lg i.bm-k { width: 12px; height: 12px; border-radius: 50%; }
.hd .lg i.bm-k.unlisted { width: 8px; height: 8px; box-shadow: inset 0 0 0 1.3px var(--hd-linked); }
.hd .lg i.bm-k.outline { box-shadow: inset 0 0 0 1.3px var(--hd-linked); background: var(--hd-linked-soft); }
.hd .lg i.bm-k.sold { box-shadow: inset 0 0 0 2px var(--down); }
.hd .lg i.bm-k.bought { box-shadow: inset 0 0 0 2px var(--up); }
.bm-hint { margin-top: 10px; }
.bm-card { display: grid; gap: 8px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card-2); }
.bm-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--t-small); color: var(--dim); min-width: 0; }
.bm-ad { min-width: 0; font-family: var(--mono); font-weight: 500; font-size: var(--t-small); color: var(--ink); overflow-wrap: anywhere; }
.bm-say { display: grid; gap: 4px; font-size: var(--t-body); line-height: 1.45; color: var(--text); }
.bm-say b { color: var(--ink); font-weight: 600; }
.bm-say .sold { color: var(--down); }
.bm-card .lk { justify-self: start; }