/* the drawing theme (same as dashkit's): grid paper shows through, thin drafting lines with small
     corners, no shadows, numbers in the sans with tabular figures, bars hatched with a thin ink outline */
  .tiles { gap: 0; border-block: 1px solid var(--rule); }
  .tile { background: transparent; border: 0; border-radius: 0; padding: 14px 16px 14px 0; }
  .tile + .tile { border-inline-start: 1px solid var(--rule); padding-inline-start: 16px; }
  .tile .lbl { font-weight: 600; }
  .tile .val, .fact b { font-family: var(--text); font-weight: 700; font-size: 30px; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
  @media (max-width: 560px) { .tile, .tile + .tile { padding: 12px 0; border-inline-start: 0; } .tile + .tile { border-top: 1px solid var(--rule); } }
  .fact { background: transparent; border: 1px solid var(--rule); border-radius: 3px; }
  .bar-row { border-radius: 3px; }
  .bar { border-radius: 0 2px 2px 0; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c) 70%, var(--ink)) 0 1.2px, transparent 1.2px 5px), color-mix(in srgb, var(--c) 58%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 75%, transparent); }
  /* the value right at the bar's end (room for it kept at the far end of every track) */
  .bar-row { grid-template-columns: minmax(7.5rem, 26%) minmax(0, 1fr); }
  .bar-track { display: flex; align-items: center; gap: 6px; height: 18px; padding-inline-end: 3ch; }
  .bar { flex: none; }
  .bar-val { flex: none; text-align: start; }
  .strip-bar { border-radius: 3px; border: 1px solid var(--ink); gap: 0; }
  .strip-bar > div { background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.16) 0 1.2px, transparent 1.2px 5px) !important; }
  .strip-bar > div + div { border-inline-start: 1px solid var(--ink); }
  .legend i { border-radius: 2px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 60%, transparent); }
  .tip { border-color: var(--ink); border-radius: 3px; box-shadow: none; }