/* Public fuel page. One file, no framework: the page is four cards and has to
   load fast on a phone with mobile internet. */
:root {
  --bg: #0b1020; --card: #151b2e; --line: #26304a;
  --text: #e8ecf6; --muted: #98a3bd; --accent: #33b36b; --danger: #e2564a;
  --radius: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.top { max-width: 900px; margin: 0 auto; padding: 2rem 1rem 0.5rem; }
h1 { font-size: 1.6rem; margin: 0 0 .4rem; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
.sub { color: var(--muted); margin: 0; }
main { max-width: 900px; margin: 0 auto; padding: 1rem; display: grid; gap: 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; }
p { margin: 0 0 .8rem; }
.muted { color: var(--muted); }

.state { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .9rem; font-size: 1.05rem; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.on { background: var(--danger); box-shadow: 0 0 0 4px rgba(226,86,74,.18); }

.frame { margin: 0; }
.frame img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  background: #0d1426; aspect-ratio: 16 / 9; object-fit: cover;
}
figcaption { margin-top: .5rem; font-size: .85rem; }

.btn {
  appearance: none; border: 1px solid var(--line); background: #1d2540; color: var(--text);
  font: inherit; padding: .7rem 1.1rem; border-radius: 10px; cursor: pointer; min-height: 44px;
}
.btn:hover { border-color: #3a4a6e; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #06240f; font-weight: 600; }
.btn[disabled] { opacity: .55; cursor: default; }

.log { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.log li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: .45rem; }
.log li:last-child { border-bottom: 0; }
.log time { font-variant-numeric: tabular-nums; }
.badge { background: rgba(226,86,74,.15); color: var(--danger); border-radius: 999px; padding: .1rem .55rem; font-size: .8rem; }

form { display: grid; gap: .75rem; }
label { display: block; font-size: .92rem; color: var(--muted); }
label > input, label > textarea { margin-top: .3rem; }
/* Иначе звёздочка обязательного поля уезжает на свою строку. */
.req { color: var(--danger); }
input, textarea {
  font: inherit; color: var(--text); background: #0f1526;
  border: 1px solid var(--line); border-radius: 10px; padding: .65rem .75rem; width: 100%;
  min-height: 44px;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.req { color: var(--danger); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note { min-height: 1.3rem; font-size: .9rem; margin: 0; }
.note.ok { color: var(--accent); }
.note.err { color: var(--danger); }
.ios-hint { background: rgba(51,179,107,.1); border: 1px solid rgba(51,179,107,.3); border-radius: 10px; padding: .7rem .8rem; font-size: .9rem; }
footer { max-width: 900px; margin: 0 auto; padding: 0 1rem 2.5rem; font-size: .85rem; }
@media (max-width: 560px) {
  .top { padding-top: 1.2rem; }
  h1 { font-size: 1.35rem; }
}

/* Waiting for the first arrival: a drawn tanker pulling in and unloading,
   instead of a line of text saying nothing happened yet. SVG, not a GIF —
   a few kilobytes, sharp on any screen, and it can be stopped for a visitor
   who asked their system for less motion. */
/* `display: grid` overrides the browser's own `[hidden] { display: none }`,
   so without this rule the waiting picture stayed on screen next to the list
   of arrivals it was supposed to replace. Caught by looking at the page, not
   by reading the markup. */
.waiting[hidden], .log[hidden] { display: none; }
.waiting { display: grid; gap: .7rem; justify-items: center; text-align: center; }
.scene { width: 100%; max-width: 420px; height: auto; display: block; }
.scene .ground { fill: #2a355a; }
.scene .canopy { fill: #33b36b; }
.scene .post, .scene .pump { fill: #2a355a; }
.scene .pump-screen { fill: #0f1526; }
.scene .tank { fill: #e8ecf6; }
.scene .stripe { fill: #e2564a; }
.scene .hatch { fill: #c3cade; }
.scene .cab { fill: #e2564a; }
.scene .window { fill: #9fd4ff; }
.scene .wheel { fill: #0d1426; }
.scene .hub { fill: #55617f; }
.scene .inlet { fill: #0d1426; stroke: #55617f; stroke-width: 1.5; opacity: 0; }

/* One timeline, so the parts cannot drift out of step: the truck drives in,
   the hose drops to the filling point, fuel runs, then it pulls away. */
.scene .tanker { animation: drive 12s linear infinite; }
.scene .hose {
  fill: none; stroke: #55617f; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 46; stroke-dashoffset: 46; animation: hose 12s linear infinite;
}
.scene .drop { fill: #33b36b; opacity: 0; }
.scene .drop1 { animation: drip 12s linear infinite; }
.scene .drop2 { animation: drip 12s linear infinite 0.45s; }
.scene .drop3 { animation: drip 12s linear infinite 0.9s; }
.scene .inlet { animation: inlet 12s linear infinite; }

@keyframes drive {
  0%   { transform: translateX(-230px); }
  18%  { transform: translateX(0); }
  86%  { transform: translateX(0); }
  100% { transform: translateX(200px); }
}
@keyframes hose {
  0%, 20%   { stroke-dashoffset: 46; }
  28%, 80%  { stroke-dashoffset: 0; }
  88%, 100% { stroke-dashoffset: 46; }
}
/* The drop falls the short way from the hose end into the ground inlet. */
@keyframes drip {
  0%, 30%   { opacity: 0; transform: translateY(0); }
  33%       { opacity: 1; transform: translateY(0); }
  48%       { opacity: 1; transform: translateY(6px); }
  50%, 100% { opacity: 0; transform: translateY(6px); }
}
@keyframes inlet {
  0%, 18%   { opacity: 0; }
  24%, 84%  { opacity: 1; }
  90%, 100% { opacity: 0; }
}

.waiting-text { margin: 0; }
.countdown { margin: 0; font-size: .95rem; color: var(--muted); }
.countdown b { color: var(--text); font-variant-numeric: tabular-nums; }

/* A moving picture is decoration; nobody should be made ill by it. */
@media (prefers-reduced-motion: reduce) {
  .scene .tanker, .scene .hose, .scene .drop, .scene .inlet { animation: none; }
  .scene .hose { stroke-dashoffset: 0; }
  .scene .inlet { opacity: 1; }
  .scene .drop1 { opacity: .8; }
}