.arial-row td{background:#1a2335}
.num{font-variant-numeric:tabular-nums}
.hint{font-size:12px;color:var(--muted);margin:4px 0 12px}
.pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700}
.pill.ok{background:var(--goodbg);color:var(--pillok);border:1px solid var(--good)}
.pill.warn{background:var(--warnbg);color:var(--pillwarn);border:1px solid var(--warn)}
.pill.err{background:var(--badbg);color:var(--pillerr);border:1px solid var(--bad)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:8px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.swatch{width:14px;height:14px;border-radius:3px;display:inline-block;border:1px solid var(--line)}
.perfgrid td,.perfgrid th{padding:4px 6px;font-size:12px}
.perfgrid .hl{outline:3px solid var(--accent);outline-offset:-3px;background:var(--perfhl)!important;color:var(--perfhltext);font-weight:800}
.perfgrid .rowhdr,.perfgrid .colhdr{background:var(--head);font-weight:700}
/* ===== Day jump strip (HESLO + fuel log) =====
   Sits beside "+ Add day": one chip per day the tab holds, each with the day's own headline
   figure, and pressing one scrolls to that day. Wraps onto as many lines as it needs rather
   than scrolling sideways — a day hidden off the right edge would defeat the point, which is
   seeing at a glance what is already logged. */
.dayjump-row{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.dayjump{display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex:1;min-width:0}
.dayjump-chip{display:inline-flex;align-items:center;gap:6px;
  background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  padding:5px 10px;border-radius:20px;cursor:pointer;font-size:12px;font-weight:600;
  line-height:1.3;white-space:nowrap;min-height:30px}
.dayjump-chip:hover{background:var(--btnhover);border-color:var(--accent)}
.dayjump-chip .dj-n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--muted);
  font-size:11px;padding-left:6px;border-left:1px solid var(--line)}
/* The day currently on screen — set as you scroll as well as when a chip is pressed. */
.dayjump-chip.on{background:var(--liftbg);border-color:var(--accent);color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent)}
.dayjump-chip.on .dj-n{color:var(--accent);border-left-color:var(--accent)}
/* Panels clear the pinned toolbar when jumped to, and flash briefly on arrival so the eye
   lands on the right one when several days look alike. The bar is not a fixed height — it
   wraps, and in the installed app it stands clear of the status bar as well — so what a day
   clears is the height measured by syncTopbarHeight in js/app.js, not a number written here. */
#hesloDays .panel,#fuelLogDays .panel,#jobsDays .panel{scroll-margin-top:calc(var(--topbar-h,110px) + 20px)}
.panel.dayjump-target{animation:dayjump-flash 1.5s ease-out}
@keyframes dayjump-flash{
  0%{box-shadow:0 0 0 2px var(--accent)}
  70%{box-shadow:0 0 0 2px var(--accent)}
  100%{box-shadow:var(--shadow)}
}
@media (prefers-reduced-motion:reduce){.panel.dayjump-target{animation:none}}
/* ===== Plan sections =====
   A pilot can hold several plans at once, so both ladders are a stack of sections rather
   than one table. Sections after the first are separated by a rule and a generous gap:
   the failure to avoid is a pilot reading the bottom of one plan and the top of the next
   as one continuous route, which is why the separation is deliberately larger than any gap
   inside a section. */
.plan-sec+.plan-sec{margin-top:26px;padding-top:20px;border-top:2px solid var(--line)}
.plan-head{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.plan-head .spacer{flex:1}
.plan-name{max-width:260px;min-width:150px}
.plan-name label{font-weight:700}
@media print{
  /* Each plan starts a new page. A flight plan cut across a page break is the kind of thing
     that gets flown wrong, and plans are independent — there is no reading order that needs
     two of them side by side. */
  .plan-sec{break-before:page;page-break-before:always}
  .plan-sec:first-child{break-before:auto;page-break-before:auto}
  .plan-sec{break-inside:auto}
  /* The name is a heading on paper, not a form field. */
  .plan-head{margin-bottom:6px}
  .plan-name input{border:none!important;background:none!important;font-weight:700;
    font-size:15px;padding-left:0}
}