/* The stats panel (F3; src/panels/stats_sheet.rs writes it, src/panels/hud.rs shows it): a sheet of
   the HUD's washi (.washi-sheet) in the top left corner. At its head who and where you are, then a
   few titled sections of rows, each name and its value on one line, then what is under way and
   what is wrong. Clicks go through it. */
#hud {
  position: fixed; top: 4px; left: 4px; z-index: 4; width: 360px; max-height: calc(100dvh - 8px); overflow: hidden;
  padding: 4px 10px 6px; pointer-events: none; font: 500 13px/1.35 var(--face); font-variant-numeric: tabular-nums;
  /* One grid for every section's rows (a name, its value, its aside), so the figures line up
     down the whole sheet. */
  display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; column-gap: 10px;
  > * { grid-column: 1 / -1; min-width: 0; }
  section, .rows { display: grid; grid-template-columns: subgrid; }
  section > * { grid-column: 1 / -1; }
  &[hidden] { display: none; }
  header { padding-bottom: 6px; border-bottom: 1px solid var(--sumi-line); }
  header b { display: block; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: italic 400 12px/1.35 var(--face); }
  section { margin-top: 9px; }
  h3 { margin: 0 0 3px; font-size: 10px; }
  /* A name, its value and its aside, each in a column of its own, so the figures line up. */
  .rows { gap: 1px 10px; }
  .rows dt { white-space: nowrap; }
  .rows dd:nth-of-type(even) { overflow: hidden; text-align: left; text-overflow: ellipsis; font-size: 11.5px; }
  .note, .problem { margin-top: 8px; font-size: 12.5px; line-height: 1.3; }
  .problem { padding: 2px 0 2px 16px; border-left: 0; }
  .problem::before { left: 1px; top: 0.55em; }
}