/* The owner's screen, the hero's lead on a laptop: a picture of the app, laid out at 1180px and scaled to its column, on invented values.
   It sits in a Console hairline panel (1px rule, 10px radius, paper-2). Its colours are the app's own and live in tokens.css under .ovb.
   Colours, sizes and radii follow the owner dashboard design. */
/* fit: js/overview.js sets --ovb-s (the scale), --ovb-w (the picture's width in its own pixels) and --ovb-wh (the window's height) from the slot the hero leaves for it.
   The slot (.ovb) takes no border; the window inside it is the panel. */
.ovb{--ovb-s:.38;position:relative;box-sizing:border-box;width:100%;margin:0;overflow:visible;-webkit-user-select:none;user-select:none;
  color:var(--ovb-ink);font:400 16px/normal var(--font-body);font-variant-numeric:tabular-nums;font-stretch:100%;letter-spacing:normal;text-align:left;text-transform:none}
.ovb *,.ovb *::before,.ovb *::after{box-sizing:content-box;margin:0;padding:0}
.ovb svg{display:block;flex:none}
/* without script the picture is fitted in steps to the panel's width (js/overview.js then sets the exact scale) */
@media (min-width:64rem){.ovb{--ovb-s:.75}}
@media (min-width:68.75rem){.ovb{--ovb-s:.82}}
@media (min-width:75rem){.ovb{--ovb-s:.9}}
@media (min-width:80rem){.ovb{--ovb-s:.97}}
@media (min-width:85.375rem){.ovb{--ovb-s:1.04}}
@media (min-width:90rem){.ovb{--ovb-s:1.1}}

/* the window: the picture's top fills the panel and the rest is reached by scrolling it (a focusable, scrollable region without script or under
   "reduce motion"). With motion, js/overview.js adds .is-run: the window stops taking the pointer and the page's scroll moves the app's main column
   instead; the sidebar stays put, as it does in the app. */
.ovb .ovb-win{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:var(--ovb-wh,100%);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper-2);overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--color-rule-2) transparent}
.ovb .ovb-win:focus-visible{outline:2px solid var(--color-focus);outline-offset:-4px}
.ovb.is-run .ovb-win{overflow:hidden;pointer-events:none}
.ovb .ovb-scale{position:absolute;left:0;top:0;width:var(--ovb-w,1180px);transform-origin:0 0;transform:scale(var(--ovb-s))}
.ovb.is-live .ovb-main{will-change:transform}

/* the "Sample data" chip sits on the panel's top edge like a tab, outside the window so nothing scrolls under it and it keeps its size */
.ovb .ovb-chip{position:absolute;bottom:100%;right:var(--space-lg);z-index:var(--z-raised);padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-pill) var(--radius-pill) 0 0;background:var(--color-accent);color:var(--color-accent-ink);font-size:var(--text-xs);font-weight:500;line-height:1.3;white-space:nowrap}

.ovb .ovb-frame{box-sizing:border-box;width:100%;background:var(--ovb-ground)}
.ovb .ovb-app{display:flex;align-items:stretch}

/* sidebar (plain, in the board's colours) */
.ovb .ovb-side{flex:0 0 232px;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--ovb-s32);padding:var(--ovb-s28) var(--ovb-s16);background:var(--ovb-ink)}
.ovb .ovb-brand{display:flex;align-items:center;gap:var(--ovb-s12);padding:0 var(--ovb-s8);color:var(--ovb-white)}
.ovb .ovb-brand-name{font-size:20px;font-weight:500;letter-spacing:-.01em}
.ovb .ovb-nav{display:flex;flex-direction:column;gap:var(--ovb-s4)}
.ovb .ovb-nav-i{display:flex;align-items:center;gap:var(--ovb-s12);height:40px;padding:0 var(--ovb-s12);border-radius:8px;color:var(--ovb-faint);font-size:14px;font-weight:500;white-space:nowrap}
.ovb .ovb-nav-i.on{background:var(--ovb-side-on);color:var(--ovb-white)}

/* main column */
.ovb .ovb-main{flex:1 1 0;min-width:0;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--ovb-s36);padding:var(--ovb-s32) var(--ovb-s36) var(--ovb-s48)}
.ovb .ovb-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--ovb-s16)}
.ovb .ovb-hl{display:flex;flex-direction:column;gap:var(--ovb-s4)}
.ovb .ovb-date{font-size:13px;color:var(--ovb-mute)}
.ovb .ovb-h1{font-size:30px;line-height:1.15;font-weight:500;letter-spacing:-.015em}
.ovb .ovb-rates{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ovb-s8);min-height:40px;padding:0 var(--ovb-s14);border:1px solid var(--ovb-edge);border-radius:999px;background:var(--ovb-white);font-size:13px}
.ovb .ovb-mute{color:var(--ovb-mute)}
.ovb .ovb-b{font-weight:500}
.ovb .ovb-b.dk{color:var(--ovb-ink)}
.ovb .ovb-sep{color:var(--ovb-faint)}

.ovb .ovb-sec{display:flex;flex-direction:column;gap:var(--ovb-s12)}
.ovb .ovb-sec.lg{gap:var(--ovb-s16)}
.ovb .ovb-sec-h{display:flex;align-items:center;gap:var(--ovb-s10)}
.ovb .ovb-h2{font-size:16px;font-weight:500}
.ovb .ovb-h2.xl{font-size:20px;letter-spacing:-.01em}
.ovb .ovb-badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:22px;height:22px;padding:0 var(--ovb-s6);border-radius:999px;background:var(--ovb-ink);color:var(--ovb-white);font-size:12px;font-weight:500}

/* needs your attention */
.ovb .ovb-list{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--ovb-edge);border-radius:12px;background:var(--ovb-white)}
.ovb .ovb-item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ovb-s16);padding:var(--ovb-s16) var(--ovb-s20)}
.ovb .ovb-item+.ovb-item{border-top:1px solid var(--ovb-edge-3)}
.ovb .ovb-tile{display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border-radius:10px}
.ovb .ovb-tile.amb{background:var(--ovb-amber-soft)}
.ovb .ovb-tile.red{background:var(--ovb-red-soft)}
.ovb .ovb-txt{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:var(--ovb-s3)}
.ovb .ovb-stk{display:flex;flex-direction:column;gap:var(--ovb-s4)}
.ovb .ovb-t{font-size:15px;font-weight:500}
.ovb .ovb-s{font-size:13px;line-height:1.45;color:var(--ovb-mute)}
.ovb .ovb-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ovb-s8);min-height:44px;padding:0 var(--ovb-s16);border:1px solid var(--ovb-edge-2);border-radius:8px;background:var(--ovb-white);color:var(--ovb-ink);font-size:14px;font-weight:500;white-space:nowrap}

/* yesterday */
.ovb .ovb-yh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ovb-s12)}
.ovb .ovb-yl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ovb-s10)}
.ovb .ovb-sub{font-size:14px;color:var(--ovb-mute)}
.ovb .ovb-pill{display:inline-flex;align-items:center;gap:var(--ovb-s6);height:26px;padding:0 var(--ovb-s10);border-radius:999px;background:var(--ovb-amber-soft);color:var(--ovb-amber-ink);font-size:12px;font-weight:500}
.ovb .ovb-link{display:inline-flex;align-items:center;gap:var(--ovb-s6);min-height:44px;color:var(--ovb-teal);font-size:14px;font-weight:500}

.ovb .ovb-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ovb-s16)}
.ovb .ovb-card{display:flex;flex-direction:column;gap:var(--ovb-s6);padding:var(--ovb-s20);border:1px solid var(--ovb-edge);border-radius:12px;background:var(--ovb-white)}
.ovb .ovb-lab{font-size:13px;color:var(--ovb-mute)}
.ovb .ovb-card .ovb-lab{text-wrap:balance}
.ovb .nb{white-space:nowrap}
.ovb .ovb-val{font-size:30px;line-height:1.1;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.ovb .neg{color:var(--ovb-red-ink)}

.ovb .ovb-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ovb-s16)}
.ovb .ovb-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ovb-s16)}
.ovb .ovb-card2{display:flex;flex-direction:column;gap:var(--ovb-s18);min-width:0;padding:var(--ovb-s20) var(--ovb-s24) var(--ovb-s24);border:1px solid var(--ovb-edge);border-radius:12px;background:var(--ovb-white)}
.ovb .ovb-card2.gap16{gap:var(--ovb-s16)}
.ovb .ovb-card2.gap14{gap:var(--ovb-s14)}
.ovb .ovb-ch{display:flex;flex-direction:column;gap:var(--ovb-s2)}
.ovb .ovb-ct{font-size:15px;font-weight:500}
.ovb .ovb-cap{font-size:12px;font-weight:500;color:var(--ovb-mute)}

/* money bars */
.ovb .ovb-grp{display:flex;flex-direction:column;gap:var(--ovb-s10)}
.ovb .ovb-grp.ovb-split{padding-top:var(--ovb-s14);border-top:1px solid var(--ovb-edge-3)}
.ovb .ovb-line{display:grid;grid-template-columns:minmax(110px,1.1fr) minmax(70px,2fr) 122px;align-items:center;gap:var(--ovb-s12);font-size:14px}
.ovb .ovb-track{display:block;height:8px;border-radius:4px;background:var(--ovb-track);overflow:hidden}
.ovb .ovb-fill{display:block;height:100%;min-width:2px;background:var(--ovb-teal)}
.ovb .ovb-fill.amb{background:var(--ovb-amber)}
.ovb .ovb-fill.gry{background:var(--ovb-grey)}
.ovb .ovb-fill.red{background:var(--ovb-red)}
.ovb .ovb-amt{text-align:right;font-weight:500;white-space:nowrap}
.ovb abbr{text-decoration:none}
.ovb .ovb-pc{color:var(--ovb-mute);font-weight:400;font-size:12px}

/* litres chart */
.ovb .ovb-chh{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--ovb-s12)}
.ovb .ovb-legend{display:flex;align-items:center;gap:var(--ovb-s14);font-size:13px}
.ovb .ovb-lg{display:inline-flex;align-items:center;gap:var(--ovb-s6)}
.ovb .ovb-sw{width:10px;height:10px;border-radius:2px;background:var(--ovb-teal)}
.ovb .ovb-sw.amb{background:var(--ovb-amber)}
.ovb .ovb-chart{display:flex;flex-direction:column;gap:var(--ovb-s8)}
.ovb .ovb-plot{position:relative;display:flex;align-items:flex-end;gap:var(--ovb-s12);height:204px;padding-left:var(--ovb-s44);border-bottom:1px solid var(--ovb-edge-2)}
.ovb .ovb-gl{position:absolute;left:44px;right:0;border-top:1px dashed var(--ovb-edge)}
.ovb .ovb-gl.g5{bottom:170px}
.ovb .ovb-gl.g25{bottom:85px}
.ovb .ovb-ax{position:absolute;left:0;font-size:11px;color:var(--ovb-mute)}
.ovb .ovb-ax.a5{bottom:163px}
.ovb .ovb-ax.a25{bottom:78px}
.ovb .ovb-col{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:var(--ovb-s4)}
.ovb .ovb-tot{font-size:11px;color:var(--ovb-mute)}
.ovb .ovb-stack{width:100%;max-width:44px;display:flex;flex-direction:column;gap:var(--ovb-s2)}
.ovb .ovb-hsd{background:var(--ovb-amber);border-radius:4px 4px 0 0}
.ovb .ovb-ms{background:var(--ovb-teal)}
.ovb .ovb-col.cur .ovb-tot,.ovb .ovb-xl .cur{color:var(--ovb-ink);font-weight:500}
.ovb .ovb-xl{display:flex;gap:var(--ovb-s12);padding-left:var(--ovb-s44)}
.ovb .ovb-xl span{flex:1 1 0;min-width:0;text-align:center;font-size:12px;color:var(--ovb-mute);white-space:nowrap}

/* today so far */
.ovb .ovb-shifts{display:flex;flex-direction:column;gap:var(--ovb-s8)}
.ovb .ovb-strip{display:flex;gap:var(--ovb-s4)}
.ovb .ovb-strip.lbl{font-size:12px;color:var(--ovb-mute)}
.ovb .ovb-strip.lbl span{flex:1 1 0}
.ovb .ovb-seg{flex:1 1 0;height:10px;border-radius:5px;background:var(--ovb-edge-3);overflow:hidden}
.ovb .ovb-seg.run{background:var(--ovb-teal-soft)}
.ovb .ovb-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ovb-s16)}
.ovb .ovb-big{font-size:24px;font-weight:500;letter-spacing:-.015em}
.ovb .ovb-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ovb-s8);padding-top:var(--ovb-s12);border-top:1px solid var(--ovb-edge-3)}
.ovb .ovb-tankh{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ovb-s8)}
.ovb .ovb-note{font-size:12px;color:var(--ovb-mute)}
.ovb .ovb-tank{display:flex;flex-direction:column;gap:var(--ovb-s6)}
.ovb .ovb-tl{display:flex;justify-content:space-between;gap:var(--ovb-s8);font-size:13px}
.ovb .ovb-mono{font-family:var(--font-outlier);font-weight:500}

/* entrance: hidden only when JS will animate (html.js, not set under reduce motion); overview.js adds .is-in to each piece once it has played */
.js .ovb[data-ov]:not(.is-in),.js .ovb [data-ov=r]:not(.is-in),.js .ovb [data-ov=n]:not(.is-in),.js .ovb [data-ov=p]:not(.is-in){opacity:0}
.js .ovb [data-ov=p]:not(.is-in){transform:scale(.9)}
.js .ovb [data-ov=x]:not(.is-in){transform:scaleX(0);transform-origin:0 50%}
.js .ovb [data-ov=y]:not(.is-in){transform:scaleY(0);transform-origin:50% 100%}

/* icons take their colour from the tile or row that holds them */
.ovb .ovb-rates svg{color:var(--ovb-mute)}
.ovb .ovb-tile.amb{color:var(--ovb-amber-ink)}
.ovb .ovb-tile.red{color:var(--ovb-red-ink)}
.ovb .ovb-brand svg{color:var(--ovb-ground)}

/* bar and column sizes: litres at 170px per 5,000 L (heights), shares of sales (widths) */
.ovb .h65{height:65px}.ovb .h66{height:66px}.ovb .h67{height:67px}.ovb .h107{height:107px}.ovb .h108{height:108px}.ovb .h113{height:113px}.ovb .h114{height:114px}.ovb .h116{height:116px}.ovb .h118{height:118px}
.ovb .w04{width:.4%}.ovb .w11{width:1.1%}.ovb .w25{width:2.5%}.ovb .w28{width:2.8%}.ovb .w35{width:35%}.ovb .w45{width:45%}.ovb .w68{width:68%}
.ovb .w76{width:76%}.ovb .w81{width:8.1%}.ovb .w89{width:8.9%}.ovb .w374{width:37.4%}.ovb .w392{width:39.2%}