(base.html): a 1320px column whose children are spaced apart. .wrap the same column without the spacing (the top bar). .is-narrow on (base.html, for visitors and stations): the top bar and

are a 34rem column. A page that needs the full width (a bento page) empties it: {% block layout %}{% endblock %}. .narrow 34rem column; on a staff page wrap a form in

. .stack spaces the children of any wrapper. .cols two equal columns from 900px. .pagehead title row:

…

. .toolbar filters and actions that wrap; pushes the rest right. .actions a row of buttons that wraps. .push margin-left: auto. .grow takes the rest of a flex row. .bento 12-column grid of tiles. Children span .span-2 … .span-9, .span-12 columns (full by default); .row-2 is two rows tall. Up to 1020px: 6 columns, span-2…5 are half, the rest full. Up to 760px: 2 columns, all full except .phone-half. .back «Орқага» pill with a chevron. TILES .tile white, 28px radius, a flex column. On the whole tile is the link. .tile-night the dark tile. .tile-mtu the МТУ tint (needs .mtu-N on it or above). .t-head title row (wraps): .t-title, .t-sub, and anything with .push on the right. .t-title-lg is the bigger name of an МТУ tile. .t-body a ring, seal or .ibox beside the numbers:

…

(the middle of an МТУ tile). .panel inner panel of a tile. .empty dashed box for «nothing here». --raise background of anything raised on the current surface (rows, station tiles, «Орқага», the pager): white on the page, the panel colour inside a tile. Use it for a page's own raised items. --hover is the matching hover fill (the МТУ tint; white inside an МТУ tile). --field is the fill of inputs: white on the page, the panel colour inside a tile, .num-field or details. .ibox 44px icon box: .ibox-round .ibox-night .ibox-alert .ibox-mtu .ibox-lg. .go round arrow in a tile's corner: . .card the previous tile, still styled: .card-head .card-title .card-sub, and .card-grid. NUMBERS .big KPI numeral, 76px: .big-xl 132px (hero), .big-md 44px (the hero's % and, with .muted, its «/ M»), .big-sm 30px.

175вагон

. .stat number + caption:

14 / 18 топширди

; .is-negative / .is-missing colour the number. .stat-row .stat side by side, each as wide as its caption; a stat that does not fit wraps to the next line. .stat-row.boxed: three equal panels, caption on top (a period's numbers on a station card). .ring N / M:

21/ 24

, in the --deep of its МТУ. The sprite's #seal is the «Ҳаммаси топширди» state (.seal). .dots one dot per station: ; a filled dot топширди, .o топширмаган. 24 to a row; .dots-12 for 12 (the --cols variable). .dot-row label, dots, value:

Тошкент… 21/24

. .share segment bar: . progress thin bar under an «N / M» stat: . .legend

Тошкент 118

; .legend-grid (

): six items 3 × 2 (2 × 3 on a phone), not 5 + 1; is the hollow «топширмаган» dot (the key line above .dot-row rows), marks a line series, a cell state. (th.key is something else: the sticky header cell of a table.) BUTTONS, CHIPS, ICONS .btn 44px pill, outlined;