/* AOA FlightDesk — dark, glove-friendly, mobile-first. Grows over phases. */
:root {
  --navy: #0E1B2E;
  --navy-2: #16273d;
  --panel: #1b2c44;
  --orange: #F47321;
  --orange-dim: #c85f1b;
  --cream: #F5EFE2;
  --text: #E9EEF6;
  --muted: #9fb0c6;
  --green: #3ecf8e;
  --amber: #f0b429;
  --red: #ef5f5f;
  --radius: 14px;
  --tap: 56px; /* minimum touch target */
  --maxw: 560px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--navy);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.app { max-width: var(--maxw); margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.boot { padding: 40px; text-align: center; color: var(--muted); }

.screen { padding: 20px 18px 96px; flex: 1; }
.brand { display: flex; align-items: center; gap: 10px; margin: 8px 0 22px; }
.brand .logo { width: 34px; height: 34px; border-radius: 8px; background: var(--orange); display: grid; place-items: center; font-weight: 800; color: var(--navy); }
.brand h1 { font-size: 20px; margin: 0; letter-spacing: .3px; }
.brand .sub { color: var(--muted); font-size: 13px; }

h2 { font-size: 18px; margin: 0 0 14px; }
.card { background: var(--panel); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; min-height: var(--tap); padding: 12px 14px; margin-bottom: 14px;
  background: var(--navy-2); border: 1px solid #2b3d58; border-radius: 10px;
  color: var(--text); font-size: 17px; /* 17px avoids iOS zoom-on-focus */
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); border-color: var(--orange); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--tap); border: none; border-radius: 12px;
  background: var(--orange); color: var(--navy); font-weight: 800; font-size: 17px;
  cursor: pointer; padding: 0 18px;
}
.btn:active { background: var(--orange-dim); }
.btn[disabled] { opacity: .5; }
.btn.secondary { background: transparent; color: var(--text); border: 1px solid #2b3d58; }
.btn.ghost { background: transparent; color: var(--muted); border: none; }

.msg { padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; }
.msg.err { background: rgba(239,95,95,.14); color: #ffb4b4; border: 1px solid rgba(239,95,95,.4); }
.msg.ok  { background: rgba(62,207,142,.14); color: #b6f2d6; border: 1px solid rgba(62,207,142,.4); }

.row { display: flex; gap: 12px; align-items: center; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.center { text-align: center; }
.footer-badge { text-align: center; color: var(--muted); font-size: 12px; padding: 20px 0; }

/* --- shell + tab bar --- */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.screen-host { flex: 1; }
.tabbar {
  position: sticky; bottom: 0; display: flex; gap: 2px;
  background: var(--navy-2); border-top: 1px solid #24374f;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}
.tab {
  flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: transparent; border: none; color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 10px;
}
.tab .ic { font-size: 20px; line-height: 1; }
.tab.active { color: var(--orange); background: rgba(244,115,33,.10); }

/* --- section header with action --- */
.sec-head { display: flex; align-items: center; margin: 6px 0 14px; }
.sec-head h2 { margin: 0; }
.iconbtn { min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid #2b3d58; background: var(--navy-2); color: var(--text); font-size: 22px; cursor: pointer; }

/* --- list rows --- */
.list { display: flex; flex-direction: column; gap: 10px; }
.rowcard { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: 12px; padding: 14px 16px; min-height: var(--tap); cursor: pointer; border: none; width: 100%; text-align: left; color: var(--text); }
.rowcard:active { background: #22344f; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--navy-2); display: grid; place-items: center; font-weight: 800; color: var(--orange); flex: none; }
.rowcard .main { flex: 1; min-width: 0; }
.rowcard .name { font-weight: 700; }
.rowcard .meta { color: var(--muted); font-size: 13px; }
.pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--navy-2); color: var(--muted); }
.pill.goal { color: var(--cream); }
.pill.stale { color: var(--amber); }

.thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--navy-2); flex: none; }
.empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.stub { text-align: center; color: var(--muted); padding: 48px 24px; }
.stub .big { font-size: 40px; margin-bottom: 10px; }

/* --- modal sheet --- */
.sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.sheet { background: var(--navy-2); width: 100%; max-width: var(--maxw); border-radius: 18px 18px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
.sheet h2 { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #2b3d58; background: var(--navy-2); color: var(--text); font-weight: 600; cursor: pointer; }
.chip.on { background: var(--orange); color: var(--navy); border-color: var(--orange); }