/* The installable app and offline use: the header's connection chip, the
   note above saved mail and the calendar, and Settings > General > Offline. */
.net-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; margin-right: 4px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text-2);
  font: 500 13px var(--font); cursor: pointer; white-space: nowrap;
}
.net-chip[hidden] { display: none; }
.net-chip svg { width: 18px; height: 18px; }
.net-chip.off { background: var(--parchment); border-color: #E2CF9F; color: var(--navy); }
.net-chip .n { color: inherit; opacity: .8; font-weight: 400; }
[data-scheme="dark"] .net-chip.off { background: #3A3628; border-color: #5A5238; color: var(--parchment); }
@media (max-width: 600px) { .net-chip span { display: none; } .net-chip { padding: 0 7px; } }

.offline-note {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 13px;
  background: #FBF4E4; color: #5B4A1E; border-bottom: 1px solid var(--line);
}
.offline-note svg { width: 18px; height: 18px; flex: none; }
[data-scheme="dark"] .offline-note { background: #2B2A20; color: #E8DDBF; }

.offline-gen select { margin: 0 4px; }
.offline-gen .offline-info { margin: 8px 0; font-size: 13px; }
.offline-gen .install-row { margin-top: 12px; }
.offline-gen .install-row p { margin: 0; font-size: 13px; }

.msg .files.muted { color: var(--text-3); }