/* The vehicle page's head (slice 65c): the head line's chips and driver, the period switch and the four tiles of one
   anatomy - design-v2/css/46-head-tiles.css (draw-65 piece P, OD-199..OD-204) carried over rule for rule. The cell scopes
   them to #p-vehicle and shows a second state by a page class; the product draws exactly the state the server sent, so
   the rules are scoped to the head's own wrapper `.vhd` and the drawn second states are not needed. The period switch is
   the one class the wrapper toggles: `wk-cal`. */

/* the head line: plate, chips and driver on one line; it wraps by itself, never overflows */
.pt.vhead.vh65{flex-wrap:wrap;gap:6px 12px}
.pt.vhead .hchip{cursor:default}
.pt.vhead .hchip.go{cursor:pointer}
.pt.vhead .vdrv{font-size:13px;color:var(--tx2);white-space:nowrap}
.pt.vhead .vdrv .lnk{color:var(--tx1)}
.pt.vhead a.tel{color:inherit;text-decoration:none;border-bottom:1px dotted var(--tx3);white-space:nowrap}
.pt.vhead a.tel:hover{color:var(--tx1);border-bottom-color:var(--tx2)}

/* ── the period switch (REQ-UIX-221) ── */
.vhd .ht-wk{display:flex;justify-content:flex-end;margin:-8px 0 8px}
.vhd .ht-wk .chr{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.vhd .ht-wk .pill{cursor:pointer}
.vhd .ht-wk .pill:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.vhd:not(.wk-cal) .htp[data-period="cal"], .vhd.wk-cal .htp[data-period="7"]{display:none!important}

/* ── the surface ── */
[data-theme="night"] .vhd .ht4{--ht-top:#181D25;--ht-e1:rgba(255,255,255,.15);--ht-e2:rgba(255,255,255,.035);--ht-e1h:rgba(255,255,255,.26);
  --ht-sh:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.45),0 18px 40px -18px rgba(0,0,0,.7);--ht-tip:#0B0E12;--ht-tipt:#E9EDF2;--ht-bar:rgba(63,196,147,.30)}
[data-theme="day"] .vhd .ht4{--ht-top:#FFFFFF;--ht-e1:rgba(20,24,28,.13);--ht-e2:rgba(20,24,28,.07);--ht-e1h:rgba(20,24,28,.26);
  --ht-sh:0 1px 2px rgba(20,24,28,.05),0 14px 32px -16px rgba(20,24,28,.18);--ht-tip:#15191D;--ht-tipt:#FFFFFF;--ht-bar:rgba(14,107,84,.24)}
.vhd .ht4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px;align-items:stretch}
.vhd .ht4 > .ht{position:relative;display:flex;flex-direction:column;min-width:0;padding:24px;border-radius:16px;
  font-variant-numeric:tabular-nums;transition:transform .16s ease,box-shadow .16s ease}
html:not([data-mat="glass"]) .vhd .ht4 > .ht{border:1px solid transparent;box-shadow:var(--ht-sh);
  background:linear-gradient(180deg,var(--ht-top),var(--s1) 70%) padding-box,linear-gradient(180deg,var(--ht-e1),var(--ht-e2)) border-box}
html:not([data-mat="glass"]) .vhd .ht4 > .ht.go:hover{transform:translateY(-1px);box-shadow:var(--ht-sh);
  background:linear-gradient(180deg,var(--ht-top),var(--s1) 70%) padding-box,linear-gradient(180deg,var(--ht-e1h),var(--ht-e1)) border-box}
.vhd .ht4 > .ht.go{cursor:pointer}
.vhd .ht4 > .ht:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.vhd .htp{display:flex;flex-direction:column;flex:1;min-width:0}

/* ── the five rows ── */
.vhd .ht-top{display:flex;align-items:center;justify-content:space-between;gap:8px;height:24px}
.vhd .ht-l{font-size:11px;font-weight:660;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);white-space:nowrap}
.vhd .ht-c{font-size:12px;color:var(--tx2);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.vhd .chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;font-size:12px;font-weight:640;white-space:nowrap;border:1px solid transparent}
.vhd .chip-z{color:var(--tx2);background:var(--s3);border-color:var(--line)}
.vhd .chip-up{color:var(--wn);background:var(--wn-d);border-color:rgba(232,168,60,.35)}
.vhd .chip-dn{color:var(--ok);background:var(--ok-d);border-color:var(--ok-b)}
.vhd .ht-hero{display:flex;align-items:baseline;gap:8px;height:48px;margin-top:16px;white-space:nowrap;min-width:0}
.vhd .ht-v{font-size:44px;line-height:48px;font-weight:680;letter-spacing:-.035em;color:var(--tx1)}
.vhd .ht-v.ht-wn{color:var(--wn)}
.vhd .ht-v.ht-na{font-size:24px;color:var(--tx2);letter-spacing:-.01em;white-space:normal;line-height:28px}
.vhd .ht-u{font-size:15px;font-weight:500;color:var(--tx3);letter-spacing:0}
.vhd .ht-u.ht-u2{display:inline-block;font-size:12px;line-height:16px;white-space:nowrap;align-self:flex-end;margin-bottom:7px}
.vhd .ht-ap{font-size:30px;font-weight:500;color:var(--tx2);margin-right:4px}
.vhd [data-tile="work"] .ht-hero{gap:6px}
.vhd .ht-sub{height:24px;line-height:24px;margin-top:8px;font-size:13px;font-weight:540;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vhd .ht-sub b{color:var(--tx1);font-weight:660}
.vhd .hs-ok{color:var(--ok);font-weight:660}
.vhd .hs-dg{color:var(--dg);font-weight:660}
.vhd .hs-wn{color:var(--wn);font-weight:640}
.vhd .ht-vis{position:relative;height:80px;margin-top:16px}
.vhd .ht-ft{display:flex;flex-direction:column;justify-content:flex-start;height:40px;margin-top:16px;padding-top:0;white-space:nowrap;min-width:0}
.vhd .ht-fk{display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:16px;color:var(--tx3)}
.vhd .ht-fv{font-size:13px;line-height:20px;margin-top:4px;font-weight:600;color:var(--tx1);overflow:hidden;text-overflow:ellipsis}
.vhd .ht-fm{font-weight:500;color:var(--tx2)}
.vhd .hloss{color:var(--dg);font-weight:660}
.vhd .hloss.go{cursor:pointer}

/* ── the visual band: plot 0..56, labels 64..80 ── */
.vhd .hcols{position:absolute;inset:0}
.vhd .hplot{position:absolute;left:0;right:0;top:8px;height:48px;display:flex;align-items:flex-end;gap:0;border-bottom:1px solid var(--line-s)}
.vhd .hc{position:relative;flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px}
.vhd .hc.j::before{content:"";position:absolute;inset:-8px 3px -25px;border-radius:8px;background:var(--s3);opacity:.7;z-index:0}
.vhd .hb{position:relative;z-index:1;display:block;width:min(14px,52%);height:calc(var(--h) * 100%);border-radius:3px 3px 1px 1px;background:var(--ht-bar)}
.vhd .hb-j-z{background:var(--tx1)}
.vhd .hb-j-ok{background:var(--ok)}
.vhd .hb-w{background:var(--wn)}
.vhd .hb-t{opacity:.6}
.vhd .hb-drv{background:var(--ht-bar)}
.vhd .hc.j .hb-drv{background:var(--ok)}
.vhd .hb-idle{background:var(--wn)}
.vhd .hc:hover .hb{filter:brightness(1.25)}
.vhd .hul{position:absolute;left:0;right:0;bottom:calc(var(--y) * 100%);border-top:1px dashed var(--tx2);opacity:.85;z-index:2;pointer-events:none}
.vhd .hul em{position:absolute;right:calc(100% + 6px);top:0;transform:translateY(-50%);width:44px;text-align:right;font-style:normal;font-size:10.5px;line-height:12px;font-weight:600;color:var(--tx2)}
.vhd .hcols-c .hplot, .vhd .hcols-c .hdays{left:48px}
.vhd .hdays{position:absolute;left:0;right:0;top:64px;height:16px;display:flex}
.vhd .hdays span{flex:1;text-align:center;font-size:11px;line-height:16px;color:var(--tx3);font-family:var(--mono)}
.vhd .hdays span.j{color:var(--tx1);font-weight:700}
.vhd .hdays span.f{color:var(--tx3);opacity:.55}
/* a day of the week still ahead: an empty dashed outline */
.vhd .hb-f{display:block;width:min(14px,52%);height:100%;border:1px dashed var(--line-s);border-radius:3px 3px 1px 1px;box-sizing:border-box}

/* the refuel columns: Nm³ per day, settled solid, the one still settling outlined, an empty day a tick on the base line */
.vhd .hb-rf{background:var(--in);opacity:.8;width:min(12px,44%)}
.vhd .hc.j .hb-rf{opacity:1}
.vhd .hb-set{background:repeating-linear-gradient(135deg,var(--in-d) 0 3px,transparent 3px 6px);border:1.5px solid var(--in);opacity:1;box-sizing:border-box}
.vhd .hb-tick{display:block;width:10px;height:2px;border-radius:1px;background:var(--line-s);margin-bottom:-1px}
.vhd .hv{position:relative;z-index:1;font-style:normal;font-size:10.5px;line-height:12px;font-weight:600;color:var(--tx2);font-family:var(--mono);white-space:nowrap}
.vhd .hcols-r .hplot{border-bottom-color:var(--line)}

/* ── the value under the pointer: one crisp line ── */
.vhd .ht4 [data-tip]{cursor:inherit}
.vhd .ht4 [data-tip]:hover::after{content:attr(data-tip);position:absolute;z-index:20;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  padding:6px 10px;border-radius:8px;background:var(--ht-tip);color:var(--ht-tipt);font-size:12px;line-height:16px;font-weight:600;white-space:nowrap;
  font-family:var(--font);box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:none;letter-spacing:0;filter:none}
.vhd .ht4 .tipl[data-tip]:hover::after{left:0;transform:none}
.vhd .ht4 .tipr[data-tip]:hover::after{left:auto;right:0;transform:none}
.vhd .ht4 .hc[data-tip]:hover::after{bottom:calc(100% + 14px)}
.vhd .ht-sub [data-tip]{position:relative}
.vhd .ht-sub:hover{overflow:visible}

/* ── «Газ в баллоне»: the share as the figure, the cylinder filled to it in the band below, like a phone battery
   (OD-201; layout of 476bfc76 restored by OD-205) ── */
.vhd .hcyl{position:absolute;left:0;right:0;top:8px;height:48px;display:flex;align-items:center}
.vhd .hcy-b{position:relative;flex:1;height:48px;border-radius:24px;border:2px solid var(--line-s);background:var(--s3);overflow:hidden;box-shadow:inset 0 2px 8px rgba(0,0,0,.22)}
.vhd .hcy-f{position:absolute;left:0;top:0;bottom:0;width:calc(var(--f) * 100%);background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 48%),var(--ok)}
.vhd .hcy-wn{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 48%),var(--wn)}
.vhd .hcy-dg{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 48%),var(--dg)}
.vhd .hcy-r{position:absolute;left:calc(var(--r, .01) * 100%);top:6px;bottom:6px;width:2px;margin-left:4px;border-radius:1px;background:var(--tx1);opacity:.55}
.vhd .hcy-n{flex:none;width:8px;height:18px;background:var(--line-s)}
.vhd .hcy-v{flex:none;width:8px;height:30px;border-radius:3px;background:var(--tx3);opacity:.8}

/* ── narrower than four across: 2 × 2, then one column; never a horizontal scroll (REQ-UIX-214) ── */
@media (max-width:1439px){
  .vhd .ht4 > .ht{padding:24px 16px}
}
@media (max-width:1279px){
  .vhd .ht4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vhd .ht4 > .ht{padding:24px}
}
@media (max-width:719px){
  .vhd .ht4{grid-template-columns:minmax(0,1fr)}
  .vhd .ht4 > .ht{padding:16px}
}