/* 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 */
#dash-root { --cds-radius: 3px; --color-panel: transparent; --cds-shadow-popover: none; }
.tr-card { background: transparent; }
.tr-tiles { gap: 0; border-block: 1px solid var(--color-border-line); }
.tr-tiles > .tr-card { border: 0; border-radius: 0; padding-inline: 0 16px; }
.tr-tiles > .tr-card + .tr-card { border-inline-start: 1px solid var(--color-border-line); padding-inline-start: 16px; }
@media (max-width: 560px) { .tr-tiles > .tr-card, .tr-tiles > .tr-card + .tr-card { border-inline-start: 0; padding-inline: 0; } .tr-tiles > .tr-card + .tr-card { border-top: 1px solid var(--color-border-line); } }
.tr-tile-label { font-weight: 600; }
.tr-tile-value { font-family: var(--font-anthropic-sans); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.tr-bar { border-radius: 0 2px 2px 0; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tr-c, var(--cds-chart-muted)) 70%, var(--color-fg)) 0 1.2px, transparent 1.2px 5px), color-mix(in srgb, var(--tr-c, var(--cds-chart-muted)) 58%, var(--color-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-fg) 75%, transparent); }
.tr-stack { border-radius: 2px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-fg) 75%, transparent); }
.tr-stack > span { background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0 1.2px, transparent 1.2px 5px); }
.tr-legend i, .tr-swatch { border-radius: 2px; }
.tr-zoom button, .tr-seg button, .tr-pill { border-radius: 3px; }
.tr-pop { border-color: var(--color-fg); }
/* the value right at the bar's end (room for it kept at the far end of every track) */
.tr-bar-row { grid-template-columns: minmax(6rem, 36%) minmax(0, 1fr); }
.tr-bar-track { display: flex; align-items: center; gap: 6px; padding-inline-end: 7rem; }
.tr-bar, .tr-stack { flex: none; }
.tr-bar-val { flex: none; min-width: 0; text-align: start; }
/* the map, drawn: a light wash for the land, a thin ink coastline, country borders in drafting gray */
#map path.land { fill: color-mix(in srgb, var(--color-fg) 6%, transparent); stroke: color-mix(in srgb, var(--color-fg) 55%, transparent); stroke-width: .6px; vector-effect: non-scaling-stroke; }
#map path.borders { stroke: color-mix(in srgb, var(--color-fg) 28%, transparent); stroke-width: .5px; vector-effect: non-scaling-stroke; }