/* The readout, in place of the control wall.

   Twelve sliders, three selects and a button at identical visual weight across three
   rows, with the single most striking fact the piece owns set in the same 13 px grey as
   "grain 6 px". This gives the panel a hierarchy: a headline, a second read, a legend,
   and everything that is a parameter moved behind a button.

   It sits in the strip the letterboxed band leaves, so it costs the field nothing. */

#hud{
  display:block;padding:0;background:linear-gradient(to top,rgba(7,8,11,.985) 62%,rgba(7,8,11,0));
  padding:18px 24px 20px}
#ax-panel{display:flex;gap:clamp(20px,4vw,64px);align-items:flex-end;
  max-width:1520px;margin:0 auto}

/* ---- headline -------------------------------------------------------------- */
#ax-lead{flex:0 0 auto;min-width:0}
#ax-big{font-size:clamp(38px,4.6vw,68px);line-height:.92;font-weight:600;
  letter-spacing:-.025em;color:var(--ax-fg);font-variant-numeric:tabular-nums;
  font-family:var(--ax-num)}
#ax-lead .unit{font-size:12px;letter-spacing:var(--ax-caps);color:var(--ax-fg-2);
  margin-top:9px;font-family:var(--ax-mono)}
#ax-lead .disc{font-size:11px;letter-spacing:.02em;color:var(--ax-fg-4);margin-top:6px;
  font-family:var(--ax-mono)}
#ax-lead .disc a{color:#6b7079;text-decoration:none;border-bottom:1px solid #2a2e35}
#ax-lead .disc a:hover{color:var(--ax-link);border-bottom-color:var(--ax-link)}

/* ---- ranked chart ---------------------------------------------------------- */
#ax-chart{flex:1 1 auto;min-width:0;max-width:660px}
#ax-chart .hd{display:flex;align-items:baseline;gap:12px;margin-bottom:9px;
  font-size:11px;letter-spacing:var(--ax-caps);color:var(--ax-fg-3);font-family:var(--ax-mono)}
/* The continent and country switch sits beside the title rather than pushed out to the
   right edge, where the settings panel opens over it. Reading order is better too: what
   the chart is, then how to cut it. */
#ax-chart .hd .sw{display:flex;gap:2px}
#ax-chart .hd button{background:none;border:1px solid var(--ax-line);color:var(--ax-fg-3);
  border-radius:var(--ax-radius);padding:2px 8px;font-size:11px;letter-spacing:var(--ax-caps);
  font-family:var(--ax-mono);cursor:pointer}
#ax-chart .hd button[aria-pressed=true]{color:var(--ax-fg);border-color:#3a3f47}

#ax-rows{display:grid;grid-template-columns:auto 1fr auto;gap:3px 12px;align-items:center}
#ax-rows .lb,#ax-rows .vl{line-height:1.3}
#ax-rows .lb{font-size:12px;color:var(--ax-fg-2);white-space:nowrap;font-family:var(--ax-mono)}
#ax-rows .lb.soft{border-bottom:1px dotted #5a6069}
#ax-rows .bar{height:9px;position:relative}
/* The bar is monochrome on purpose. The field owns the colour, and a second colour system
   next to it would fight the one channel that is carrying information. */
#ax-rows .bar i{position:absolute;top:0;bottom:0;left:0;background:#c9ccd1;display:block}
/* The modelled part of a row is drawn as an outline rather than a fill. China is about a
   sixth of the world in this model and cannot be verified from public data; Russia and
   Iran are flagged the same way. Moving the china dial visibly shortens or lengthens the
   hollow section, which is the point: it is a dial, not a measurement. */
#ax-rows .bar u{position:absolute;top:0;bottom:0;display:block;border:1px solid #7d838c;
  border-left:0;background:repeating-linear-gradient(135deg,rgba(201,204,209,.30) 0 2px,
    transparent 2px 4px)}
#ax-rows .vl{font-size:12px;color:var(--ax-fg);font-variant-numeric:tabular-nums;
  text-align:right;min-width:4.6em;font-family:var(--ax-num)}
#ax-rows .vl small{color:var(--ax-fg-3);font-size:11px}
#ax-note{margin-top:9px;font-size:11px;color:var(--ax-fg-4);letter-spacing:.02em;
  font-family:var(--ax-mono);line-height:1.5}

/* ---- legend and the way out ------------------------------------------------ */
#ax-side{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  font-size:11px;letter-spacing:var(--ax-caps);color:var(--ax-fg-3);font-family:var(--ax-mono)}
#ax-side .lgrow{display:flex;align-items:center;gap:7px}
#ax-side .dcdot{width:9px;height:9px;background:#bfe4ff;display:inline-block}
#ax-side a{color:#6b7079;text-decoration:none;border-bottom:1px solid #2a2e35}
#ax-side a:hover{color:var(--ax-link);border-bottom-color:var(--ax-link)}
/* The two buttons sit bottom right. This is the rightmost column, so it stops short of
   them rather than having its last row disappear behind one. */
#ax-side{padding-bottom:36px}
@media (max-width:760px){ #ax-side{padding-bottom:0} }

/* The settings panel and its button live in the shared shell, because every page has them.
   All that is added here is where the renderer diagnostics go once they are inside it. */
#ax-adv #ax-diag{margin-top:14px;padding-top:12px;border-top:1px solid var(--ax-line);
  display:flex;flex-wrap:wrap;gap:6px 18px;font-size:11px;color:var(--ax-fg-3);
  font-family:var(--ax-mono)}
#ax-adv #ax-diag b{color:var(--ax-fg-2);font-weight:400}

/* Between about 900 and 1250 the strip under the band is short and the note wraps. Trim
   the type and the padding rather than letting the readout climb over the field. */
@media (max-width:1250px){
  #hud{padding:12px 18px 14px}
  #ax-panel{gap:22px}
  #ax-note{margin-top:7px;max-width:56ch}
  #ax-rows .bar{height:8px}
}

/* ---- narrow ---------------------------------------------------------------- */
/* At 375 the chart has to stop being a second wall of numbers. Continents only, four
   rows, and the country breakdown is a tap away.

   Height is in the query as well as width, because stacking trades height for width and a
   phone on its side has none to trade. At 812 x 375 the stack took about 300 px of a 375 px
   window, which left the readout covering the field with no room above it to move the field
   into: the band, the lockup and the headline all landed on each other. Wide and short
   keeps the side-by-side layout, which is what the shape of the window is asking for. */
@media (max-width:900px) and (min-height:640px){
  #ax-panel{flex-direction:column;align-items:stretch;gap:16px}
  #ax-side{flex-direction:row;flex-wrap:wrap;gap:8px 16px}
  #hud{max-height:none;overflow:visible;padding:14px 16px 62px}
  #ax-chart{max-width:none}
}
/* Short, whichever way it got that way: a landscape phone, or a desktop window dragged
   down to a strip. The panel can never be allowed to grow into the field. */
@media (max-height:639px){
  #hud{max-height:62vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  #ax-panel{align-items:flex-end}
}
/* On a phone the strip under the band is about 350 px and the two buttons were taking 50
   of it. The top right is empty at this width, because the pointer hint that lives there
   is for a mouse, so they go there and the strip goes to the readout. */
@media (max-width:760px){
  #ax-advbtn{top:14px;bottom:auto;right:14px;padding:6px 10px;font-size:11px}
  #panel-toggle{top:14px;right:88px;bottom:auto;padding:6px 10px;font-size:11px}
  #ax-adv{bottom:auto;top:52px}
  #hud{padding:14px 16px}
  /* the lockup gives way, because the two buttons now share its row */
  #brand svg{width:32px;height:18px}
  .wm{font-size:17px}
}
@media (max-width:560px){
  #ax-big{font-size:clamp(32px,10.5vw,46px)}
  #ax-lead .unit{margin-top:7px}
  #ax-lead .disc{margin-top:4px}
  #ax-rows .lb{font-size:11px}
  #ax-note{font-size:10px}
}