/* ─── Hawser phone capture: app-only styles ──────────────────────────
 *
 * Loaded on top of /assets/css/site.css, which brings the design tokens
 * (colors, radii, Inter) so this thing looks like the rest of Hawser.
 * Everything here is phone-first: big tap targets, thumb-reachable
 * controls, no marketing chrome.
 *
 * This file lives under /app/ and NOT under /assets/*, so it is never
 * immutable-cached and can be changed without a ?v= dance.
 * ─────────────────────────────────────────────────────────────────── */

body {
  background: var(--bg-1);
  /* Room for the home-bar / notch on phones. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.app-shell {
  max-width: 620px;
  margin: 0 auto;
  padding: 14px 16px 40px;
}

/* ── Top bar ─────────────────────────────────────────────────────── */

.app-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.app-bar .mark {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}

.app-bar .where {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-0);
  letter-spacing: -0.01em;
}

.app-bar .spacer { flex: 1 1 auto; }

.app-tab {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-faint);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
}
.app-tab:hover { color: var(--text-0); }
.app-tab[aria-current="page"] {
  background: var(--accent-soft);
  border-color: var(--border-soft);
  color: var(--accent-text);
}

/* ── Status pill ─────────────────────────────────────────────────── */

.app-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  border: 1px solid var(--border-faint);
  background: var(--bg-2);
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.35;
}
.app-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex: 0 0 8px;
}
.app-status.is-ok    { color: var(--success); border-color: rgba(61,220,151,.28); }
.app-status.is-ok    .dot { background: var(--success); }
.app-status.is-wait  { color: var(--amber-text); border-color: rgba(242,194,48,.3); }
.app-status.is-wait  .dot { background: var(--amber); }
.app-status.is-error { color: #ffacb5; border-color: rgba(227,82,95,.35); }
.app-status.is-error .dot { background: var(--danger); }
.app-status .status-act {
  margin-left: auto;
  background: none;
  border: none;
  padding: 6px 2px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-text);
  white-space: nowrap;
  cursor: pointer;
}

/* ── Beta note ───────────────────────────────────────────────────── */
/* Deliberately plain and un-dismissable.  It is short, it sits above the
   fold once, and while this thing really is half-built it should not be
   possible to use it without having been told so. */

.app-beta {
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  border: 1px solid rgba(242,194,48,.28);
  background: rgba(242,194,48,.07);
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.55;
}
.app-beta strong { color: var(--amber-text); }
.app-beta a { color: var(--accent-text); text-decoration: underline; }

/* ── Composer ────────────────────────────────────────────────────── */

.composer textarea,
.composer input[type="text"] {
  width: 100%;
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-lg);
  padding: 14px;
  /* 17px keeps iOS Safari from zooming the page on focus. */
  font-size: 17px;
  line-height: 1.5;
  font-family: inherit;
  resize: none;
  -webkit-appearance: none;
}
.composer textarea:focus,
.composer input[type="text"]:focus {
  outline: none;
  border-color: var(--border-soft);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.composer textarea::placeholder,
.composer input[type="text"]::placeholder { color: var(--text-muted); }

.composer textarea.big { min-height: 38vh; }
.composer input[type="text"] { margin-bottom: 10px; }

.btn-save {
  width: 100%;
  min-height: 56px;
  margin-top: 12px;
  border: none;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: #06222a;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-save:active { background: var(--accent-pressed); }
.btn-save:disabled { opacity: .5; cursor: default; }

.btn-quiet {
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-faint);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.btn-quiet:active { background: var(--bg-3); }

.hint {
  margin: 10px 2px 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Lists ───────────────────────────────────────────────────────── */

.list-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 26px 2px 10px;
}
.list-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.list-head .count { font-size: 13px; color: var(--text-muted); }
.list-head .refresh {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: none;
  color: var(--accent-text);
  font-family: inherit;
  cursor: pointer;
  padding: 6px 4px;
}

.rows { display: flex; flex-direction: column; gap: 8px; }

.row {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-md);
  padding: 12px 14px;
  color: var(--text-1);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
}
button.row { cursor: pointer; }
.row .row-title { font-weight: 600; color: var(--text-1); }
.row .row-snip {
  margin-top: 3px;
  font-size: 14px;
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.row .row-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.row .row-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-faint);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 15px;
  color: var(--text-2);
}
.row.pending { border-color: rgba(242,194,48,.3); background: rgba(242,194,48,.06); }
.row.failed  { border-color: rgba(227,82,95,.35); background: rgba(227,82,95,.06); }

.chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.chip.wait  { background: var(--amber-soft); color: var(--amber-text); }
.chip.bad   { background: rgba(227,82,95,.16); color: #ffacb5; }
.chip.pin   { background: var(--accent-soft); color: var(--accent-text); }

.empty {
  padding: 18px 4px;
  color: var(--text-muted);
  font-size: 14px;
}

/* ── Sign-in card + footer ───────────────────────────────────────── */

.gate {
  background: var(--bg-2);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-lg);
  padding: 20px;
  text-align: center;
}
.gate h1 { font-size: 22px; margin-bottom: 8px; }
.gate p { color: var(--text-3); font-size: 15px; }
.gate .btn-save { max-width: 320px; margin-left: auto; margin-right: auto; }

.app-foot {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--border-faint);
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.app-foot button {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 0;
}

.hidden { display: none !important; }