/* The offline layer's own indicators (§47, plan S1).
 *
 * A separate sheet rather than more of `app.css`: this is the one part of the
 * interface that has to render when the network is gone, so the service worker
 * caches it as a unit, and it stays legible as the thing to look at when
 * something is queued. It uses `app.css`'s tokens and adds none of its own.
 */

/* `hidden` has to actually hide.

   Both panels below set `display: flex`, and a class selector with `display`
   beats the browser's own `[hidden] { display: none }` — so `el.hidden = true`
   did nothing and the empty outbox sat on screen saying "0 waiting to send"
   while the offline banner announced a connection that was fine. The script
   was right the whole time; the stylesheet was quietly ignoring it.

   Kept as its own rule above the two it fixes, because the next flex panel
   with a `hidden` attribute would have the same bug. */
.offline-banner[hidden], .outbox[hidden] { display: none !important; }

/* "You are not connected" — stated once, at the top, and never implied by a
   control quietly failing instead. */
.offline-banner {
  display: flex; align-items: center; gap: var(--gap-sm);
  padding: var(--gap-sm) var(--gap-md);
  margin-block-end: var(--gap-md);
  border-inline-start: 3px solid var(--warning);
  border-radius: var(--radius-control);
  background: var(--plane);
  color: var(--text-primary);
  font-size: 14px;
}

/* What is waiting to be sent. Visible on every screen of the work journey,
   because "did my work save?" is the question this whole feature exists to
   answer. */
.outbox {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--gap-sm);
  padding: var(--gap-sm) var(--gap-md);
  margin-block-end: var(--gap-md);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--brand-blue-ink);
  border-radius: var(--radius-control);
  background: var(--surface-1);
  font-size: 14px;
}

/* A refusal is not a pending item. The task moved on, or access went away, and
   that needs to read differently from "still sending". */
.outbox.is-refused { border-inline-start-color: var(--critical); }

.outbox-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 28px; min-block-size: 28px; padding: 0 8px;
  border-radius: 999px;
  background: var(--brand-blue-ink); color: #fff;
  font-variant-numeric: tabular-nums; font-weight: 650;
}
.outbox.is-refused .outbox-count { background: var(--critical); }

.outbox-detail { flex: 1 1 12ch; min-inline-size: 0; }

.outbox-retry {
  font: inherit; font-size: 14px; cursor: pointer;
  min-block-size: 44px; padding: 0 var(--gap-md);
  border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--surface-1); color: var(--text-primary);
}
.outbox-retry:hover { border-color: var(--brand-blue-ink); }

/* Confirmation that something went into the queue rather than nowhere. */
.offline-queued {
  padding: var(--gap-sm) var(--gap-md);
  margin-block: var(--gap-sm);
  border-radius: var(--radius-control);
  background: var(--plane);
  font-size: 14px;
}

/* ---------- the per-item list (U7) ----------
   The badge counts; this names. Four states, each one a *word* before it is a
   colour, because the worker who most needs this is outdoors in sunlight and
   may not be able to tell the border colours apart at all. */
.synclist[hidden] { display: none !important; }
.synclist {
  display: block;
  padding: var(--gap-md);
  margin-block-end: var(--gap-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-1);
}
.syncitems { list-style: none; margin: var(--gap-sm) 0; padding: 0;
  display: grid; gap: var(--gap-sm); }

.syncitem {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-sm);
  padding: var(--gap-sm) var(--gap-md);
  border-inline-start: 3px solid var(--axis);
  border-radius: var(--radius-control);
  background: var(--plane);
  font-size: 14px;
}
.syncstate { font-weight: 650; }
.syncwhat { flex: 1 1 10ch; min-inline-size: 0; color: var(--text-secondary); }

/* Kept on the handset because there is no connection — patience, not a fault. */
.syncitem.is-savedHere { border-inline-start-color: var(--warning); }
/* Online, queued, a send is scheduled. */
.syncitem.is-waiting { border-inline-start-color: var(--brand-blue-ink); }
/* The server has it. Not "verified" — see `offline.notVerified` beside this. */
.syncitem.is-synced { border-inline-start-color: var(--good); }
/* A real answer came back and the worker has to go and read it. */
.syncitem.is-needsAttention { border-inline-start-color: var(--critical); }

.synclink { font-weight: 600; }
.syncbtn {
  font: inherit; font-size: 14px; cursor: pointer;
  min-block-size: 44px; padding: 0 var(--gap-md);
  border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--surface-1); color: var(--text-primary);
}

/* ---------- evidence preview (U7) ----------
   Sized so a photograph is checkable but never pushes the submit button off a
   small screen — UI.md §10: keep the next action reachable "without covering
   evidence or focused inputs". */
.evpreview[hidden] { display: none !important; }
.evpreview {
  display: grid; gap: var(--gap-sm); margin-block-start: var(--gap-sm);
}
.evpreview img {
  max-inline-size: 100%; max-block-size: 220px;
  inline-size: auto; block-size: auto;
  justify-self: start;
  border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--plane);
}
.evpreview img[hidden] { display: none !important; }
.evpreview figcaption {
  display: flex; align-items: center; gap: var(--gap-sm); flex-wrap: wrap;
}

@media (max-width: 380px) {
  .outbox, .offline-banner { padding: var(--gap-sm); font-size: 13px; }
  .outbox-retry { inline-size: 100%; }
  .synclist { padding: var(--gap-sm); }
  .syncitem { font-size: 13px; }
  .evpreview img { max-block-size: 160px; }
}