/* states.css — Waiting, nothing, and broken — how every screen says so. */
/* ── waiting, nothing, and broken ─────────────────────────────────────────
   Three states that every screen reaches and none of them had been designed.
   They were grey sentences on an empty page; a person could not tell a screen
   that was still working from one that had finished and found nothing. */

/* Waiting. The copy at each call site is already specific ("Adding up your
   flying…"), so it stays — what it lacked was any sign of progress. An
   indeterminate bar under the words is honest about not knowing how long,
   where a percentage would be a lie. */
.load{color:var(--dim);padding:34px 2px 30px;text-align:center;font-size:13.5px;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.load::after{content:"";width:132px;height:3px;border-radius:999px;
  background:var(--line);position:relative;overflow:hidden;
  background-image:linear-gradient(90deg,transparent,var(--acc),transparent);
  background-size:55% 100%;background-repeat:no-repeat;
  animation:cc-load 1.15s var(--cc-e,ease-in-out) infinite}
@keyframes cc-load{0%{background-position:-60% 0}100%{background-position:160% 0}}
/* Nothing. An empty screen should say what it is empty OF, and look
   deliberate rather than broken — hence a bordered plate rather than loose
   text floating in the middle of nowhere. */
.empty{color:var(--dim);font-size:13.5px;line-height:1.55;text-align:center;
  padding:30px 22px;border:1px dashed var(--line);border-radius:16px;
  background:color-mix(in srgb,var(--surface) 55%,transparent);
  display:flex;flex-direction:column;align-items:center;gap:11px;max-width:420px;
  margin-inline:auto}
.empty::before{content:"";width:26px;height:26px;flex:none;background:var(--faint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2215%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M8%2015h8%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2215%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M8%2015h8%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.empty b{color:var(--txt);font-weight:650;display:block}
.empty .hint{color:var(--faint);font-size:12px}
/* Broken. Distinct from empty on purpose: solid border, the bad hue, and room
   for the recovery line the copy now carries. */
.err{color:var(--txt);font-size:13.5px;line-height:1.55;text-align:center;
  padding:26px 22px;border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);
  border-radius:16px;background:color-mix(in srgb,var(--bad) 8%,transparent);
  display:flex;flex-direction:column;align-items:center;gap:11px;max-width:420px;
  margin-inline:auto}
.err::before{content:"";width:26px;height:26px;flex:none;background:var(--bad);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207.5v5.2M12%2016.3v.1%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207.5v5.2M12%2016.3v.1%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.err .what{color:var(--bad);font-weight:650}
.err .fix{color:var(--dim);font-size:12.5px}
.err .detail{color:var(--faint);font-size:11px;font-family:var(--mono);
  word-break:break-word;max-width:100%}
.err button,.empty button{background:var(--acc);color:var(--on-acc);border:0;
  border-radius:12px;padding:9px 16px;font-weight:700;font-size:12.5px;cursor:pointer}
.err button:active,.empty button:active{transform:scale(.96)}
@media(prefers-reduced-motion:reduce){.load::after{animation:none;background-position:50% 0}}
/* Buttons and inline labels that now carry a drawn mark instead of a glyph
   need to centre it against the text rather than sit it on the baseline. */
.rem,.rosbtn,.seg button,.wabtn{display:inline-flex;align-items:center;gap:6px}
.rem{display:flex;align-items:flex-start}
.rem svg{flex:none;margin-top:1px;opacity:.85}
.lo svg{display:block}
.d-hotel{display:inline-flex;align-items:center;gap:5px}
.d-hotel svg{flex:none;opacity:.85}
.seg button svg{flex:none;opacity:.9}