/* The Aerotto pilots' tally bar (miles flown on a drum odometer, fuel burned), shared by the home page and the account pages.
   Uses the page's colour variables: --lime (or --accent), --surface, --rule, --ink, --muted, --display. */
/* Miles-flown odometer: a mechanical drum counter like an aircraft instrument. */
.tally { margin-inline: -20px; padding: 10px 20px; border-bottom: 1px solid var(--rule); background: var(--surface);
         display: flex; align-items: center; justify-content: center; gap: 10px 14px; flex-wrap: wrap; }
.tally[hidden] { display: none; }
.tally-plane { color: var(--lime, var(--accent)); flex: none; }
.odo-wrap { display: flex; align-items: center; gap: 8px; }
.odo { --h: 30px; display: flex; gap: 2px; padding: 3px; border-radius: 5px; background: #05080C;
       box-shadow: inset 0 1px 3px rgba(0,0,0,.8), 0 0 0 1px #2A3646, 0 1px 0 1px rgba(255,255,255,.04); }
.drum { position: relative; width: 21px; height: var(--h); overflow: hidden; border-radius: 2px; background: #161E29; }
.drum.dp { margin-left: 3px; }                     /* the tenths drum sits apart, like a real odometer */
.drum.tenths { background: var(--lime, var(--accent)); }
.drum::after { content: ""; position: absolute; inset: 0; pointer-events: none;   /* cylinder shading */
               background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.55)); }
.reel { will-change: transform; }
.reel span { display: block; height: var(--h); font: 700 23px/var(--h) var(--display, "Barlow Condensed", "Arial Narrow", sans-serif); text-align: center;
             color: #E8EEF5; font-variant-numeric: tabular-nums; }
.drum.tenths .reel span { color: #0B1320; }
.odo-unit { font: 700 15px/1 var(--display, "Barlow Condensed", "Arial Narrow", sans-serif); letter-spacing: .08em; color: var(--ink); }
/* Fuel burned: whole US gallons on a drum odometer like the miles (tally.js turns #fuelNum into an .odo); .fuel-num is the old plain readout. */
.fuel-wrap { display: flex; align-items: center; gap: 8px; }
.fuel-wrap[hidden] { display: none; }
.fuel-num { padding: 3px 9px; border-radius: 5px; background: #05080C; color: #E8EEF5; font: 700 23px/30px var(--display, "Barlow Condensed", "Arial Narrow", sans-serif);
            font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 3px rgba(0,0,0,.8), 0 0 0 1px #2A3646; }
/* Safe landings in the last 24 hours (tally.js adds it): a lime percentage in the same dark window as the counters. */
.safe-wrap { display: flex; align-items: center; }
.safe-wrap[hidden], .tally-sep[hidden], .tally-label[hidden] { display: none; }
.safe-num { padding: 3px 9px; border-radius: 5px; background: #05080C; color: var(--lime, var(--accent)); font: 700 23px/30px var(--display, "Barlow Condensed", "Arial Narrow", sans-serif);
            font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 3px rgba(0,0,0,.8), 0 0 0 1px #2A3646; }
.tally-sep { width: 1px; align-self: stretch; background: var(--rule); }
.tally-label { font: 600 14px/1.2 var(--display, "Barlow Condensed", "Arial Narrow", sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* The header's sign-out icon (account pages: app/bootstrap.php; static pages: nav.js). */
header nav .logout { display: inline-flex; margin: 0; }
header nav .logout button { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; line-height: 1; }
header nav .logout button:hover { color: var(--ink); }
header nav { align-items: center; }
/* The pilot's money in the header, when signed in. */
header nav a.balance { padding: 1px 9px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink);
                       font-variant-numeric: tabular-nums; font-weight: 600; }
header nav a.balance:hover { border-color: var(--lime, var(--accent)); }