:root{
  --navy:#0a1826;
  --navy-2:#10263c;
  --ink:#17222e;
  --muted:#5b6b7a;
  --line:#d7dee5;
  --bg:#eef2f5;
  --card:#ffffff;
  --accent:#e8a33d;
  --ok:#1e7d46;
  --radius:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:84px; /* tabbar clearance */
}
.hidden{display:none !important}

/* ---- App bar ---- */
.appbar{
  position:sticky; top:0; z-index:10;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px calc(10px + env(safe-area-inset-top)*0) 16px;
  padding-top:calc(10px + env(safe-area-inset-top));
}
.wordmark{
  font-size:28px; font-weight:800; letter-spacing:.14em; line-height:1;
  font-family:"Arial Narrow",Arial,sans-serif; text-transform:lowercase;
}
.brand-sub{font-size:10px; letter-spacing:.32em; color:var(--accent); margin-top:2px}
.whoami{font-size:13px; color:#c9d6e2; margin-right:10px}

/* ---- Layout ---- */
main{max-width:860px; margin:0 auto; padding:16px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; margin-bottom:16px;
}
.card.narrow{max-width:440px; margin:24px auto}
h1{font-size:20px; margin:0 0 8px}
.muted{color:var(--muted)}
.note{font-size:13px; color:var(--muted)}
.error-note{color:#b3261e; font-weight:600}
.stub-note{border-top:1px dashed var(--line); padding-top:8px; margin-top:14px}
.appfoot{
  text-align:center; color:var(--muted); font-size:12.5px;
  padding:4px 16px 10px; letter-spacing:.02em;
}

/* ---- Forms ---- */
.field{display:block; margin:12px 0}
.field span{display:block; font-size:13px; font-weight:600; margin-bottom:4px}
.field input,.field textarea,.row input{
  width:100%; font-size:16px; /* 16px prevents iOS zoom-on-focus */
  padding:10px; border:1px solid var(--line); border-radius:8px; background:#fff;
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
fieldset{border:1px solid var(--line); border-radius:8px; margin:14px 0; padding:12px}
legend{font-size:13px; font-weight:700; padding:0 6px}
.row{display:grid; gap:8px; margin-bottom:8px; align-items:center}
.crew-row{grid-template-columns:2fr 1fr 1fr 1fr auto}
.equip-row{grid-template-columns:2fr 1.4fr auto}
@media (max-width:560px){.crew-row{grid-template-columns:1fr 1fr}.equip-row{grid-template-columns:1fr auto}}
.checkline{display:flex; gap:10px; align-items:flex-start; margin:12px 0; font-size:15px}
.checkline input{width:20px; height:20px; margin-top:1px}

/* ---- Notes front screen ---- */
.card-h2{font-size:17px; margin:0 0 8px}
.notes-textarea{
  min-height:180px; font-size:17px; line-height:1.45; resize:vertical;
}
.hint{
  font-size:14px; color:var(--muted); background:#f4f7f9;
  border:1px dashed var(--line); border-radius:8px; padding:10px 12px; margin:2px 0 10px;
}
.btn-big{padding:16px; font-size:17px; min-height:56px}

/* ---- Buttons / tabs ---- */
.btn{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:8px; padding:10px 14px; font-size:15px; cursor:pointer; min-height:44px;
}
.btn-primary{background:var(--navy); border-color:var(--navy); color:#fff; font-weight:700}
.btn-block{width:100%; margin-top:14px}
.btn-ghost{background:transparent}
.btn-x{min-height:38px; padding:6px 10px}
.appbar .btn-ghost{color:#fff; border-color:#33506e}
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  background:var(--navy); display:flex;
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  flex:1; background:transparent; border:0; color:#9fb4c7; font-size:15px;
  padding:14px 6px; cursor:pointer; min-height:52px;
}
.tab.active{color:#fff; font-weight:700; box-shadow:inset 0 3px 0 var(--accent)}
.badge{
  background:var(--accent); color:var(--navy); border-radius:999px;
  font-size:12px; font-weight:800; padding:1px 7px; margin-left:4px;
}

/* ---- Inbox ---- */
.inbox-item{border:1px solid var(--line); border-radius:8px; padding:12px; margin:10px 0}
.inbox-item h3{margin:0 0 4px; font-size:16px}
.pill{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em;
  border-radius:999px; padding:2px 8px; text-transform:uppercase;
}
.pill-new{background:#fdf0d9; color:#8a5c07}
.pill-pending{background:#dbe7fd; color:#1f4e9c}
.pill-rejected{background:#fbe3e3; color:#8c2626}
.badge-pending{background:#c0392b; color:#fff}
.sep{border:0; border-top:1px solid var(--line); margin:16px 0}
.appr-actions{display:flex; gap:10px; margin-top:10px}
.btn-deny{background:#fff; border:1px solid #c0392b; color:#c0392b; font-weight:700}

/* ---- Approval pop-up ---- */
.modal{
  position:fixed; inset:0; z-index:50; background:rgba(6,17,28,.66);
  display:flex; align-items:flex-end; justify-content:center;
}
.modal-card{
  background:#fff; width:100%; max-width:520px; max-height:88vh; overflow:auto;
  border-radius:16px 16px 0 0; padding:18px;
}
@media (min-width:560px){
  .modal{align-items:center; padding:20px}
  .modal-card{border-radius:16px}
}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.modal-head h2{font-size:18px; margin:0}
.modal-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.modal-actions .btn{min-height:56px; font-size:17px}
#appr-work{white-space:pre-wrap}
.photo-preview,.thumbs{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.thumbs img,.photo-preview img{width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--line)}

/* ---- Book ---- */
.week{margin:22px 0}
.week h2{font-size:16px; color:var(--navy); border-bottom:2px solid var(--navy); padding-bottom:4px}
.day{border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin:12px 0}
.day h3{margin:0 0 6px; font-size:16px}
.day .meta{font-size:14px; color:var(--muted); margin-bottom:6px}
.day ul{margin:6px 0; padding-left:18px}
.day p{margin:6px 0}
.week-totals{
  background:var(--navy); color:#fff; border-radius:8px; padding:12px 14px; margin-top:12px;
}
.week-totals h3{margin:0 0 6px; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.week-totals ul{margin:0; padding-left:18px}