/* Offline support (OFFLINE-1): the strip under the top bar, the list of held
 * changes, and the two lists on /app/offline.
 *
 * Every colour is a theme token, so the strip is the same amber the product
 * already uses for "look at this" and follows the Apple skin and dark mode
 * without a second definition. Nothing here carries meaning by colour alone:
 * the strip always says the words, and each held change says "Waiting to be
 * sent — not applied yet" in text. */

/* ── the strip ───────────────────────────────────────────────────────────── */
.netbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:9px 20px;
  background:var(--hold-tint); color:var(--hold);
  border-bottom:1px solid var(--hair);
  font-size:12.5px; line-height:1.45;
}
.netbar .net-state{margin:0; min-width:0; flex:1 1 260px}
/* A role="status" region has to be in the DOM before it has anything to say,
   so it starts empty — and an empty one must not take a line of its own. */
.net-state:empty{display:none}
/* A `.btn.quiet` is systemBlue on nothing, and on the amber strip that measures
   4.39:1 — under the 4.5:1 floor. Giving both of this feature's secondary
   buttons a surface of their own puts them back on white, where the label ink
   is 15:1 and the button also reads as a control rather than as a link. */
.netbar .btn.quiet,
.offline-item .btn.quiet{
  flex:0 0 auto;
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  padding-inline:12px;
}
.netbar .btn.quiet:hover,
.offline-item .btn.quiet:hover{background:var(--surface-2)}

/* ── a held change ───────────────────────────────────────────────────────── */
.offline-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}

.offline-item{
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--hair-2);
  flex-wrap:wrap;
}
.offline-item:last-child{border-bottom:0}
.offline-item-body{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 220px}
.offline-item b{font-weight:500; font-size:13px}
.offline-item .sub{font-size:11.5px; color:var(--ink-3)}
.offline-item > a{font-size:13px}
.offline-item > .sub{flex:1 1 100%}

.offline-state{font-size:11.5px}
.offline-state.wait{color:var(--hold)}
.offline-state.bad{color:var(--bad)}
.offline-item.failed{background:var(--bad-tint); border-radius:var(--r-c); padding-left:10px; padding-right:10px}

/* ── what was typed, put back after a reload (OFFLINE-2) ─────────────────── */
/* The line a restored form carries. Amber, like the strip, because it is the
 * same fact: something is held on this device and has not been sent. The words
 * say it too — nothing here means anything by its colour alone. */
.draft-note{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 12px; padding:8px 10px;
  background:var(--hold-tint); color:var(--hold);
  border:1px solid var(--hair); border-radius:var(--r-c);
  font-size:11.5px; line-height:1.45;
}
.draft-note span{min-width:0; flex:1 1 200px}
.draft-note .btn.quiet{
  flex:0 0 auto;
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
}
.draft-note .btn.quiet:hover{background:var(--surface-2)}

/* ── /app/offline ────────────────────────────────────────────────────────── */
.offline-grid{margin-top:16px}
.offline-storage{margin-top:16px}
.offline-storage .card-body [data-offline-storage]{margin:0}
.offline-storage .card-body .btn{margin-top:12px}
.offline-grid .card-body .hint{margin:10px 0 0; font-size:11.5px; color:var(--ink-3)}
.offline-retry{margin:16px 0 0}

@media (max-width:600px){
  .netbar{padding:9px 16px; gap:8px}
  /* HIG asks for 44pt on a phone, and the two buttons here are the ones an
     operator reaches for exactly when everything else has stopped working. */
  .netbar .btn, .offline-item .btn, .offline-retry .btn{min-height:44px}
  .offline-item{padding:12px 0}
  .draft-note .btn{min-height:44px}
  /* A saved page is opened by tapping its name, so the name is the target and
     it has to be a thumb's worth of it — measured at 19px before this rule. */
  .offline-item > a{display:flex; align-items:center; min-height:44px; flex:1 1 100%}
}