/* ---------------------------------------------------------------------------
   What SN25-intel needs that the design system in theme.css does not have.

   The system now covers a great deal that this file used to: .cbar for the
   concentration bar, .kv for its rows, .info, th.sort for a sortable header,
   .flag for a notice, .eyebrow and .dash-h for the page head. Those are gone
   from here. What is left is the holder taxonomy, a wallet identity, a
   share-of-supply bar, the 25-row table on a phone, and the two charts.

   One rule governs every line: no literal colour. The system ships light and
   dark from the same tokens, and a hex here would be right in one of them and
   wrong in the other. Transparency is mixed from a token with color-mix.
   --------------------------------------------------------------------------- */

/* ---- contrast floor ---------------------------------------------------
   Five of the system's tokens carry text that does not clear WCAG AA on the
   system's own surfaces. Measured against the worst surface each sits on
   (--card-hi in dark, --card in light), then lifted by the smallest step along
   its own hue that clears 4.5. --text-3 is the one that matters most: it
   carries every address, caption, hint and axis label on these pages, and it
   lands at 3.89 in dark and 2.77 in light.

   The dark palette is otherwise clean; four of the five are light-mode only.
   Overridden here rather than in theme.css, which is a verbatim copy and has
   to stay replaceable wholesale. ---------------------------------------- */
:root{--text-3:#7a868e}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --text-3:#666d7f;--up:#2b7d1a;--down:#c13e2b;--warn:#956319;
  }
}
:root[data-theme="light"]{
  --text-3:#666d7f;--up:#2b7d1a;--down:#c13e2b;--warn:#956319;
}

/* ---- page furniture --------------------------------------------------- */
.find{background:transparent;border:1px solid var(--border);border-radius:2px;color:var(--text);
  font:400 12.5px var(--sans);padding:8px 11px;min-width:220px}
.find::placeholder{color:var(--text-3)}
.find:hover,.find:focus{border-color:var(--border-hi);outline:none}
@media(max-width:760px){.find{font-size:16px;min-width:0;flex:1}}

/* The sort control the card layout needs, because a card has no column head to
   click. Hidden until the table becomes cards. */
.sortby{display:none;align-items:center;gap:8px}
.sortby select{background:transparent;border:1px solid var(--border);border-radius:2px;
  color:var(--text);font:600 11.5px var(--sans);letter-spacing:1px;padding:7px 10px}

/* ---- who a wallet is ---------------------------------------------------
   A name over its address. The badges say what a wallet does; this says whose
   it is, which is what a reader scans a column of addresses for. */
.w{display:flex;flex-direction:column;gap:1px;min-width:0}
.w .name{font:600 13px var(--sans);color:var(--text)}
.w .name.hl-gold{color:var(--warn)}
.w .name.hl-purple{color:var(--accent)}
.w .name.hl-gray{color:var(--text-2)}
.w .addr{font:400 11px var(--mono);color:var(--text-3)}
a.w:hover .name{color:var(--accent)}
a.w:hover .addr{color:var(--text-2)}

/* ---- the holder taxonomy -----------------------------------------------
   The system's .badge, given the four stances, the roles and the origins. Each
   borrows the hue its meaning already has elsewhere on the page: a buy is --up
   in every table, so an accumulating wallet is --up here. */
.badge.buy{color:var(--up);border-color:color-mix(in srgb,var(--up) 40%,var(--border))}
.badge.sell{color:var(--down);border-color:color-mix(in srgb,var(--down) 40%,var(--border))}
.badge.move{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.badge.own{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--border))}
.badge.got{color:var(--ui);border-color:color-mix(in srgb,var(--ui) 40%,var(--border))}
/* The record cannot say where this position came from. A dashed edge for a
   verdict that is an absence of evidence rather than a finding. */
.badge.old{border-style:dashed}
/* A verdict the ledger has already overtaken: it keeps its shape and loses its
   colour, because the type it names may no longer be the right one. */
.badge.stale{color:var(--text-3);border-style:dashed}
.badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ---- share of supply ---------------------------------------------------- */
.sb{height:3px;background:var(--grid);margin-top:5px;overflow:hidden}
.sb i{display:block;height:100%;background:var(--ui)}

/* The second line under a figure: the other unit, or the denominator a
   percentage is a percentage of. */
.sub2{font:400 11px var(--mono);color:var(--text-3);margin-top:3px}

/* ---- into and out of the top 25 ----------------------------------------
   Two columns of the system's own .kv rows; only the grid and the link colour
   are ours. */
.churn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
@media(max-width:760px){.churn{grid-template-columns:minmax(0,1fr)}}
.churn-c>.lbl{display:block;margin-bottom:2px}
.churn .nm{color:var(--ui)}
.churn a.w{display:inline;color:var(--ui)}
.churn a.w:hover .nm{color:var(--accent)}

/* ---- the wallet summary -------------------------------------------------
   What kind of wallet this is, before the numbers rather than two screens
   under them. */
.sum-h{font:400 clamp(22px,2.2vw,28px)/1.2 var(--sans);letter-spacing:-.5px;color:var(--text)}
.sum p{margin-top:9px;font-size:13px;line-height:1.6;color:var(--text-2);max-width:78ch}
.sum-h+p{margin-top:12px}

/* ---- the wallet panel --------------------------------------------------- */
.det-in{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:24px}
@media(max-width:900px){.det-in{grid-template-columns:minmax(0,1fr);gap:20px}}
/* A wallet with nothing on the ledger has no chart for the wide column. */
.det-in.bare{grid-template-columns:minmax(0,1fr);gap:14px}
.det-note{font-size:13px;line-height:1.6;color:var(--text-2);margin-top:8px}
.det-facts{margin-top:16px}
/* The system's .kv row is a nowrap flex pair. These values carry a count and an
   average beside them ("17 orders · avg $1.9964"), which at 320 cannot sit on
   the same line as its label and pushed the page 35px past the frame. */
.det-facts div{flex-wrap:wrap}
.det-facts span{min-width:0}
/* The system keeps a .kv value on one line. These values are a figure plus a
   clause — "nothing · 171,993 α moved in the ledger" — and on the busiest
   wallet that one row pushed the page 9px past a 320px frame. */
.det-facts > div > span:last-child{white-space:normal}

/* ---- the charts ---------------------------------------------------------
   The system styles .chart text; these hosts carry it, so the axis and the
   empty-state line inherit from it. Only what it has no equivalent of is here. */
.ochart svg{display:block;width:100%;overflow:visible}
.ochart .empty{font:12.5px var(--sans);fill:var(--text-3)}
.ochart .odl{font:600 10.5px var(--sans);letter-spacing:.06em;fill:var(--text-2)}
.obar{transition:opacity .12s}
.ohit{fill:transparent}
/* While one period is lit the rest recede. The flag is set on the frame by the
   chart, not by :has(), so the bars stay at full strength when the pointer is
   over the gutter or the axis with no column picked out. */
.ochart svg.focus g.ocol:not(.on) .obar{opacity:.42}
/* The caption over each panel of the order figure. Two panels on one axis need
   to say which is which; the chart heading can only name one of them. */
.ochart .pcap{font:600 9.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;
  fill:var(--text-3)}
/* Alpha that left with no order behind it is on the sell side of the axis but
   is a different kind of fact, so it carries a hatch rather than a second hue. */
.hatch{background:
  repeating-linear-gradient(45deg,var(--down) 0 2px,transparent 2px 5px),var(--card)}
.ochart-l{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--text-2)}
.ochart-l i{display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:-1px}
/* Which grain the frame settled on, and in what unit. A reader who cannot tell
   whether a column is a day or a month cannot read the chart at all. */
.ochart-s{margin-top:4px;color:var(--text-3)}

/* ---- readouts that follow the pointer ----------------------------------
   The system's .tip is positioned against a chart frame; these two are placed
   by hand against the cursor. */
.tip.wide,.otip{position:fixed;display:none;z-index:60;background:var(--card-hi);
  border:1px solid var(--border-hi);border-radius:4px;padding:10px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);font-family:var(--sans)}
.tip.wide{max-width:min(340px,calc(100vw - 20px));opacity:1;min-width:0}
.tip.wide .t,.otip .t{font:600 10.5px var(--sans);letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-2);margin-bottom:6px}
.tip.wide p{color:var(--text-2);line-height:1.55;font-size:12.5px}
.tip.wide p+p{margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
.tip.wide p.w{color:var(--warn)}
.otip{min-width:160px;font-size:12px}
.otip .r{display:flex;justify-content:space-between;gap:14px;color:var(--text-2)}
.otip .r b{color:var(--text);font-weight:600;font-family:var(--mono)}
.otip .r i.k{width:8px;height:8px;display:inline-block;margin-right:6px}

/* The system's .info is a cursor:help span; this one is a button, because a
   finger cannot hover and the bubble has to open on a tap. */
.info{appearance:none;background:none;padding:0;cursor:pointer}
.info[aria-expanded="true"]{color:var(--text);border-color:var(--accent)}
.infopop{position:fixed;z-index:60;display:none;width:max-content;
  max-width:min(320px,calc(100vw - 20px));background:var(--card-hi);
  border:1px solid var(--border-hi);border-radius:4px;padding:11px 13px;font-size:12.5px;
  line-height:1.55;color:var(--text-2);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.infopop.on{display:block}

/* ---- every order and transfer ------------------------------------------ */
.otable-n{margin-top:10px}

/* ---- the date bar ------------------------------------------------------- */
.datebar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.datebar input[type=date]{background:transparent;border:1px solid var(--border);border-radius:2px;
  color:var(--text);font:400 12.5px var(--mono);padding:7px 10px}
.datebar input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.6)}
:root[data-theme="light"] .datebar input[type=date]::-webkit-calendar-picker-indicator{filter:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .datebar input[type=date]::-webkit-calendar-picker-indicator{filter:none}
}
@media(max-width:760px){.datebar input[type=date]{font-size:16px}}
.icon-btn[disabled]{opacity:.35;cursor:default}
.icon-btn[disabled]:hover{color:var(--text-2);border-color:var(--border)}

/* ---- the filter strip --------------------------------------------------
   Eight filters in a control the system builds for two or three. It scrolls
   sideways rather than wrapping, so the row stays one line. */
#filters.seg{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none}
#filters.seg::-webkit-scrollbar{display:none}
#filters.seg button{flex:none;white-space:nowrap}

/* ---- the holders table on a phone --------------------------------------
   Twenty-five rows of nine columns do not fit, and a sideways scroll hides the
   figures people came for. Each row becomes a card, with the column head
   printed as the label of its own line. */
@media(max-width:1090px){
  .sortby{display:flex}
  .tbl-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl-cards tbody tr.wrow{display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:2px 14px;padding:14px 4px;border-bottom:1px solid var(--border)}
  .tbl-cards tbody tr.wrow:hover td{background:none}
  .tbl-cards tr.wrow td{border:0;padding:2px 0;white-space:normal;text-align:left}
  .tbl-cards tr.wrow td:nth-child(1){grid-row:1;align-self:center;color:var(--text-3)}
  .tbl-cards tr.wrow td:nth-child(2){grid-row:1}
  .tbl-cards tr.wrow td:nth-child(3){grid-column:2;padding-top:7px}
  /* flex-wrap, because the share cell puts its bar on a line of its own: a
     flex:0 0 100% item in a nowrap row adds its width to the others rather than
     taking a new line. */
  .tbl-cards tr.wrow td:nth-child(n+4){grid-column:2;display:flex;flex-wrap:wrap;
    justify-content:space-between;align-items:baseline;gap:2px 12px;padding:6px 0;
    border-top:1px solid var(--grid);font-family:var(--mono)}
  .tbl-cards tr.wrow td:nth-child(n+4)::before{content:attr(data-h);font-family:var(--sans);
    font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text-2);white-space:nowrap}
  .tbl-cards tr.wrow td:nth-child(5) .sb{flex:1 0 100%;order:3;margin-top:3px}
  /* Three labelled zero rows become one sentence. Said, not omitted: a missing
     row would read as "not measured", which on these pages means something
     else entirely. */
  .tbl-cards tr.wrow.quiet td:nth-child(n+7){display:none}
  .tbl-cards tr.wrow.quiet td:nth-child(6)::after{content:"No orders in the last 30 days";
    flex:1 0 100%;order:4;margin-top:8px;padding-top:8px;border-top:1px solid var(--grid);
    font-family:var(--sans);font-size:12px;color:var(--text-3)}
  .tbl-cards .tbl-wrap{overflow-x:visible}
}

/* ---- the nav, between the phone rule and the sidebar ---------------------
   The system lets .links scroll sideways below 560px, and above 1000px the
   sidebar replaces the header entirely. With four links nothing lived in the
   gap. This dashboard's nav has six, and between 561 and 999 every one of the
   seven pages pushed its theme toggle past the right edge -- 117px over at 640.
   The same rule, applied up to the width where the sidebar takes over. */
@media (max-width:999px){
  nav{gap:12px}
  .links{min-width:0;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;gap:14px}
  .links::-webkit-scrollbar{display:none}
  .links a{white-space:nowrap}
}

/* ---- the week's lede ----------------------------------------------------
   The top-holders page leads with what changed, in sentences, because a pair of
   lists makes a reader derive it. Set larger than body copy and narrower than
   the card, which is what makes it read as the summary rather than as a note. */
.lead-card{border-color:color-mix(in srgb,var(--ui) 24%,var(--border))}
.lede{font:400 clamp(16px,1.5vw,19px)/1.55 var(--sans);color:var(--text);
  letter-spacing:-.1px;max-width:72ch;margin:6px 0 16px}
.lede b{font-weight:600;color:var(--text)}
.lede .nm{color:var(--ui)}
@media(max-width:560px){.lede{font-size:15.5px}}

/* ---- the concentration donut ------------------------------------------- */
/* The table is capped rather than stretched. Given the whole remaining width it
   ran 786px wide, which put 593px of nothing between "Top 5" and its figure —
   four rows a reader has to cross with no leader and no anchor. Capped, the
   pair reads as one block and the chart gets the room instead. */
.pie-wrap{display:grid;grid-template-columns:auto minmax(0,560px);gap:32px;
  align-items:center;justify-content:start}
@media(max-width:700px){.pie-wrap{grid-template-columns:minmax(0,1fr);gap:14px;
    justify-items:center;justify-content:stretch}
  .pie-wrap .kv{width:100%}}
.pie-wrap .chart{width:340px;max-width:100%}
.slice{transition:opacity .12s;cursor:default}
svg:hover .slice:not(.on){opacity:.55}
.slice-l{font:600 11.5px var(--sans);fill:var(--text);letter-spacing:.3px}
.hole-v{font:400 21px var(--sans);fill:var(--text);letter-spacing:-.5px}
.hole-l{font:10.5px var(--sans);fill:var(--text-2);letter-spacing:1.1px;text-transform:uppercase}

/* ---- UX audit fixes ------------------------------------------------------
   Found by running every page at 390 and 1440 in both themes and following
   every link and control. */

/* The system's .ccard sets display:grid, which outranks the browser's own
   [hidden] rule. Every section this dashboard hides is a card, so a quiet day
   on the by-date page drew an empty 86px box with a heading and nothing under
   it, and the holder page would do the same for a wallet with no summary. */
[hidden]{display:none!important}

/* An ellipsised address is one token to a reader and two to a line-breaker:
   the lede was printing "5GQfxJ…" at the end of one line and "ABh8 is the
   largest arrival" at the start of the next. */
.nb{white-space:nowrap}

/* ---- targets a finger can hit ------------------------------------------
   WCAG 2.5.8 asks 24x24 of any control that is not inline in a sentence. */

/* The freshness dot loses its label under 640 and became a 15x19 button that
   still opens a popover on tap. The padding grows the target, not the mark. */
@media (max-width:640px){.fresh{padding:9px 10px;margin:0}}

/* Icon-only brand under 560: exactly 24x24, which is the floor rather than a
   target. The padding is negative space the header already had. */
@media (max-width:560px){.brand{padding:6px 4px;margin-left:-4px}}

/* A wallet link with no name is a single 13px line, and it is the way into
   every wallet on two pages. The padding is inside the cell's own leading. */
a.w{padding:6px 0}
.churn a.w{padding:4px 0}

/* The system's segmented control is 23px tall on a pointer screen (it already
   grows to 40x44 on a phone), and an info dot is a 16px glyph that opens a
   bubble on tap. Both clear 24x24 now without the mark moving. */
.seg button,.legend button{min-height:24px}
.info{position:relative}
.info::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;
  transform:translate(-50%,-50%)}

/* The one standalone link above the fold on a holder page. */
.eyebrow a{display:inline-block;padding:5px 0}

/* ---- a movement, linked to its transaction ------------------------------
   The date cell carries the link, the way a block explorer makes the age of a
   row its link: the table gains a way to open the transaction without gaining a
   column. The arrow marks it as outbound, as the footer links already do. Rows
   collected before the chain reference was kept, and exits read off the balance
   rather than off a ledger row, have no transaction and stay plain text. */
a.tx{color:inherit;border-bottom:1px dotted var(--text-3);white-space:nowrap;
  padding:6px 0;display:inline-block}
a.tx:hover{color:var(--accent);border-bottom-color:var(--accent)}
a.tx .ext{color:var(--text-3);font-size:.85em}
a.tx:hover .ext{color:var(--accent)}