/* The loading card both pages use (status.js): counters, a progress line along its top edge and a line of what's
   happening now. It floats over the page so it never shifts the layout. */
.status { position: fixed; right: var(--gutter); top: 20px; z-index: 30; width: min(480px, calc(100vw - 2 * var(--gutter)));
          background: var(--card); padding: 18px 22px 4px; box-shadow: 0 18px 50px rgba(32,19,0,.12);
          transition: transform .45s var(--ease), opacity .35s; }
.status.folded { transform: translateY(-10px); opacity: 0; pointer-events: none; }
.status .progress { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--orange); opacity: 0;
                    transition: width .4s var(--ease), opacity .3s; }
.status .progress.on { opacity: 1; }
.ctrs { display: flex; flex-wrap: wrap; gap: 12px 40px; padding: 0 0 14px; }
.ctr b { display: inline-flex; align-items: baseline; font-size: 26px; font-weight: 500; line-height: 1; color: var(--orange); transition: color .3s; }
.ctr .n { display: inline-block; min-width: .6em; }
.ctr .of { font-size: 16px; color: var(--muted); margin-left: 3px; }
.ctr .check { width: 16px; height: 16px; margin-left: 8px; color: var(--good); align-self: center; transform: scale(0); transition: transform .35s var(--ease); }
.ctr.done b { color: var(--ink); font-weight: 400; }
.ctr.done .check { transform: scale(1); }
.ctr.off { display: none; }
.ctr .label { color: var(--muted); margin-top: 6px; }
.status.ticker-only .ctrs { display: none; }   /* e.g. a timetable load: just the line of what's happening */
.status.ticker-only .nowline { border-top: 0; }
.nowline { display: flex; align-items: center; gap: 12px; border-top: 1px dashed var(--line); padding: 12px 0 14px; font-size: 15px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; position: relative; }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--orange); animation: pulse 1.4s ease-out infinite; }
.status.finished .pulse { background: var(--good); }
.status.finished .pulse::after { animation: none; opacity: 0; }
.ticker { position: relative; height: 22px; overflow: hidden; flex: 1; }
.ticker span { position: absolute; left: 0; top: 0; white-space: nowrap; }
@keyframes pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

@media (max-width: 640px) {
  .status { top: 10px; left: 12px; right: 12px; width: auto; padding: 12px 16px 0; }
  .ctrs { flex-wrap: nowrap; gap: 0; justify-content: space-between; padding-bottom: 10px; }
  .ctr b { font-size: 21px; } .ctr .of { font-size: 13px; } .ctr .check { width: 13px; height: 13px; margin-left: 5px; }
  .ctr .label { font-size: 10px; margin-top: 4px; }
  .nowline { font-size: 13px; padding: 9px 0 11px; }
}