/* ============================================================
   TITUS  ·  app.css

   Two grounds, two ink sets:
     --bg / --on-bg      the hull. Chrome, gutters, section labels.
     --surface / --ink   the chart. Everything you actually read.

   Two solid-control pairs, because a filled control on the hull
   and a filled control on a card cannot share one colour:
     --fill / --on-fill            controls inside cards and sheets
     --accent-solid / --on-accent  controls sitting on the hull
   ============================================================ */

/* --- DAY: painted hull navy, white chart cards. Default at the helm. --- */
[data-theme="day"] {
  --bg:#050F1B;
  --chrome:#07182A;
  --surface:#FFFFFF;
  --surface-2:#F0EEE7;
  --inset:#050F1B;
  --on-inset:#FFFFFF;

  --ink:#0B1620;
  --ink-2:#45545C;
  --ink-3:#6B7981;

  --on-bg:#DFE9F2;
  --on-bg-dim:#82A0B8;

  --rule:#DFDBD0;
  --rule-strong:#BEB6A4;
  --rule-chrome:#153050;

  --fill:#050F1B;
  --on-fill:#FFFFFF;
  --accent-solid:#FFFFFF;
  --on-accent:#050F1B;

  --port:#B23A22;
  --stbd:#2C6B4F;
  --brass:#8A6520;
  --info:#1F5D80;

  --shadow:0 1px 2px rgba(0,0,0,.28), 0 6px 20px rgba(0,0,0,.30);
  --border-w:1.5px;
}

/* --- DUSK: cabin and evening. Warm charcoal, no blue in it. --- */
[data-theme="dusk"] {
  --bg:#15171B;
  --chrome:#1B1E23;
  --surface:#1F2329;
  --surface-2:#2A2F36;
  --inset:#0C0E11;
  --on-inset:#F0EAE0;

  --ink:#F0EAE0;
  --ink-2:#B4AEA3;
  --ink-3:#877F74;

  --on-bg:#F0EAE0;
  --on-bg-dim:#877F74;

  --rule:#343A42;
  --rule-strong:#4A515A;
  --rule-chrome:#343A42;

  --fill:#F0EAE0;
  --on-fill:#15171B;
  --accent-solid:#F0EAE0;
  --on-accent:#15171B;

  --port:#DB6B52;
  --stbd:#5FA982;
  --brass:#D2A24C;
  --info:#6FA8CC;

  --shadow:none;
  --border-w:1px;
}

/* --- NIGHT: the helm after dark. Red-shifted, preserves dark adaptation. --- */
[data-theme="night"] {
  --bg:#0A0806;
  --chrome:#100C09;
  --surface:#150F0C;
  --surface-2:#1F1813;
  --inset:#060403;
  --on-inset:#E9C6A8;

  --ink:#E9C6A8;
  --ink-2:#B08D74;
  --ink-3:#806754;

  --on-bg:#E9C6A8;
  --on-bg-dim:#806754;

  --rule:#2B211A;
  --rule-strong:#3D2E24;
  --rule-chrome:#2B211A;

  --fill:#E9C6A8;
  --on-fill:#0A0806;
  --accent-solid:#E9C6A8;
  --on-accent:#0A0806;

  --port:#D9634A;
  --stbd:#96A06B;
  --brass:#C79A50;
  --info:#A88C6E;

  --shadow:none;
  --border-w:1px;
}

:root {
  --ok:var(--stbd);
  --soon:var(--brass);
  --overdue:var(--port);

  --font-prose:"Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,"Helvetica Neue",sans-serif;
  --font-data:"Ubuntu Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --r-card:14px;
  --r-chip:999px;
  --tap:48px;
  --ease:cubic-bezier(.2,0,0,1);
  --t-fast:180ms;
  --t-view:240ms;
  --scale:1;

  /* Sheer profile line weight. Constant on screen at any render size,
     because the path uses vector-effect: non-scaling-stroke. */
  --profile-stroke:0.75px;

  font-size:calc(18px * var(--scale));
}

*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }

body {
  margin:0;
  background:var(--bg);
  color:var(--on-bg);
  font-family:var(--font-prose);
  font-size:1rem; font-weight:500; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  transition:background var(--t-view) var(--ease), color var(--t-view) var(--ease);
}

button { font:inherit; color:inherit; background:none; border:none; cursor:pointer }
:focus-visible { outline:3px solid var(--info); outline-offset:3px; border-radius:6px }
::-webkit-scrollbar { width:0; height:0 }
[hidden] { display:none !important }

/* ============================================================
   PIN GATE
   ============================================================ */
.gate {
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.4rem; padding:2rem 1.5rem; background:var(--bg);
}
.gate-mark { width:min(18rem,80vw); color:var(--on-bg); opacity:.9 }
.gate-profile { display:block; width:100%; height:auto; stroke-width:var(--profile-stroke) }
.gate h1 { margin:0; font-size:2rem; font-weight:600; letter-spacing:.06em }
.gate p { margin:0; max-width:20rem; text-align:center; color:var(--on-bg-dim); font-size:.92rem }
.pin-dots { display:flex; gap:.9rem }
.pin-dot {
  width:.95rem; height:.95rem; border-radius:50%;
  border:2px solid var(--on-bg-dim);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pin-dot.is-set { background:var(--on-bg); border-color:var(--on-bg) }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; width:min(19rem,88vw) }
.key {
  min-height:4rem; border-radius:14px;
  border:var(--border-w) solid var(--rule-chrome);
  color:var(--on-bg);
  font-family:var(--font-data); font-size:1.6rem; font-weight:700;
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.key:active { background:color-mix(in srgb, var(--on-bg) 16%, transparent); transform:scale(.96) }
.key--util { font-family:var(--font-prose); font-size:.9rem; font-weight:600; color:var(--on-bg-dim); border-color:transparent }
.gate-error { color:var(--port); font-weight:600; font-size:.92rem; min-height:1.4rem }

/* ============================================================
   SHELL
   ============================================================ */
.app { min-height:100dvh; display:flex; flex-direction:column }

.topbar {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:.35rem;
  padding:calc(env(safe-area-inset-top) + .7rem) .85rem .7rem 1rem;
  background:color-mix(in srgb, var(--chrome) 90%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:var(--border-w) solid var(--rule-chrome);
  color:var(--on-bg);
}
.topbar h1 { margin:0; font-size:1.34rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.topbar .eyebrow {
  display:block; font-family:var(--font-data); font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--on-bg-dim); line-height:1.4;
}

.modebtn {
  min-width:4.2rem; height:2.5rem; padding:0 .7rem; display:grid; place-items:center;
  border:var(--border-w) solid var(--rule-chrome); border-radius:var(--r-chip);
  font-family:var(--font-data); font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-bg-dim);
  transition:all var(--t-fast) var(--ease);
}
.iconbtn {
  width:2.8rem; height:2.8rem; flex:0 0 auto; display:grid; place-items:center;
  border-radius:12px; color:var(--on-bg-dim);
  font-weight:700; font-size:.95rem; letter-spacing:-.02em;
  transition:all var(--t-fast) var(--ease);
}
.iconbtn svg { width:24px; height:24px }
.modebtn:active,.iconbtn:active { background:color-mix(in srgb, var(--on-bg) 16%, transparent); color:var(--on-bg) }

main { flex:1; padding:1rem 1rem calc(6.5rem + env(safe-area-inset-bottom)); max-width:52rem; width:100%; margin:0 auto }

.view { display:none }
.view.is-active { display:block; animation:viewIn var(--t-view) var(--ease) both }
@keyframes viewIn { from { opacity:0; transform:translate3d(0,10px,0) } to { opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background:var(--surface); color:var(--ink);
  border:var(--border-w) solid var(--rule);
  border-radius:var(--r-card);
  box-shadow:var(--shadow);
  padding:1.15rem; margin-bottom:.85rem;
}
.card--flush { padding:0; overflow:hidden }

.card-head { display:flex; align-items:center; gap:.7rem; margin-bottom:.85rem }
.card-head svg { width:24px; height:24px; flex:0 0 auto; color:var(--ink-2) }
.card-head h2 { margin:0; flex:1; min-width:0; font-size:1.16rem; font-weight:600; letter-spacing:-.01em }

.section-label {
  font-family:var(--font-data); font-size:.95rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--on-bg); margin:1.8rem .3rem .7rem;
}
.section-label:first-child { margin-top:.2rem }

/* ============================================================
   VESSEL CARD
   ============================================================ */
.vessel { border-color:var(--rule-strong) }
/* Centred at 62% so she reads as a mark above the name rather than a hero
   image across the top of the card. */
.vessel-profile {
  display:block; width:70%; height:auto;
  margin:.2rem auto .9rem;
  color:var(--ink); opacity:.92;
  stroke-width:var(--profile-stroke);
}
.vessel-name { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin:0 0 .15rem; font-size:1.7rem; font-weight:600; letter-spacing:.02em }
.vessel-name .flag {
  font-family:var(--font-data); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  color:var(--ink-2); border:var(--border-w) solid var(--rule-strong); border-radius:5px; padding:.12rem .42rem;
}
.vessel-sub { margin:0 0 1rem; font-size:.86rem; color:var(--ink-2); font-weight:500 }

.meters { display:grid; grid-template-columns:1fr 1fr; gap:.6rem }
.meter {
  background:var(--inset); color:var(--on-inset);
  border-radius:10px; padding:.6rem .7rem .55rem;
  border-left:4px solid var(--rule-strong);
  text-align:left; width:100%;
}
.meter--port { border-left-color:var(--port) }
.meter--stbd { border-left-color:var(--stbd) }
.meter-label { font-family:var(--font-data); font-size:.66rem; font-weight:700; letter-spacing:.2em; opacity:.62; margin-bottom:.1rem }
.meter-value { font-family:var(--font-data); font-weight:700; font-size:1.85rem; line-height:1.05; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:.05em }
.meter-value .frac { font-size:1.1rem; opacity:.66 }
.meter-unit { font-family:var(--font-data); font-size:.66rem; font-weight:700; letter-spacing:.14em; opacity:.52; margin-top:.1rem }

/* ============================================================
   CAPTURE PROGRESS
   ============================================================ */
.progress-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.6rem }
.progress-num { font-family:var(--font-data); font-weight:700; font-size:1.6rem; font-variant-numeric:tabular-nums }
.progress-cap { font-size:.84rem; color:var(--ink-2) }
.bar { height:.65rem; border-radius:999px; background:var(--surface-2); border:1px solid var(--rule); overflow:hidden }
.bar > i { display:block; height:100%; background:var(--fill); transition:width var(--t-view) var(--ease) }
[data-theme="day"] .bar > i { background:var(--stbd) }

/* ============================================================
   CHIPS AND ROWS
   ============================================================ */
.chip {
  display:inline-flex; align-items:center; gap:.38rem;
  font-family:var(--font-data); font-size:.7rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  padding:.24rem .6rem .24rem .5rem;
  border-radius:var(--r-chip); border:var(--border-w) solid currentColor; white-space:nowrap;
}
.chip::before { content:""; width:.5rem; height:.5rem; border-radius:2px; background:currentColor; flex:0 0 auto }
.chip--ok { color:var(--ok) }
.chip--soon { color:var(--soon) }
.chip--overdue { color:var(--overdue) }
.chip--info { color:var(--info) }
.chip--mute { color:var(--ink-3) }
.chip--mute::before { border-radius:999px }

.rows { list-style:none; margin:0; padding:0 }
.rows li { border-top:var(--border-w) solid var(--rule) }
.rows li:first-child { border-top:none }
.row {
  display:flex; align-items:center; gap:.85rem; width:100%; text-align:left;
  min-height:var(--tap); padding:.85rem 1.15rem;
  transition:background var(--t-fast) var(--ease);
}
.row:active { background:var(--surface-2) }
.row > svg:first-child { width:24px; height:24px; flex:0 0 auto; color:var(--ink-2) }
.row-body { flex:1; min-width:0 }
.row-title { font-size:1rem; font-weight:600; line-height:1.35 }
.row-meta { font-size:.82rem; color:var(--ink-2); font-weight:500; margin-top:.12rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
.row-meta .num { font-family:var(--font-data); font-weight:700; color:var(--ink) }
.row-chev { width:22px; height:22px; flex:0 0 auto; color:var(--ink-3) }
.row--port { box-shadow:inset 4px 0 0 var(--port) }
.row--stbd { box-shadow:inset 4px 0 0 var(--stbd) }

/* ============================================================
   QUICK ACTIONS
   ============================================================ */
.quick { display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem }
.qbtn {
  display:flex; align-items:center; gap:.7rem; min-height:3.4rem; padding:.7rem .85rem;
  background:var(--surface); color:var(--ink);
  border:var(--border-w) solid var(--rule); border-radius:12px; box-shadow:var(--shadow);
  font-size:.94rem; font-weight:600; text-align:left;
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.qbtn svg { width:24px; height:24px; flex:0 0 auto; color:var(--ink-2) }
.qbtn:active { background:var(--surface-2); border-color:var(--rule-strong); transform:scale(.97) }

/* ============================================================
   DETAIL AND PLATE
   ============================================================ */
.detail-hero {
  padding:1.15rem; margin-bottom:.85rem;
  background:var(--surface); color:var(--ink);
  border:var(--border-w) solid var(--rule); border-left:5px solid var(--rule-strong);
  border-radius:var(--r-card); box-shadow:var(--shadow);
}
.detail-hero.is-port { border-left-color:var(--port) }
.detail-hero.is-stbd { border-left-color:var(--stbd) }
.detail-hero h2 { margin:0 0 .2rem; font-size:1.32rem; font-weight:600; letter-spacing:-.01em }
.detail-hero p { margin:0; font-size:.88rem; color:var(--ink-2) }

.plate {
  background:var(--surface); color:var(--ink);
  border:var(--border-w) solid var(--rule); border-radius:var(--r-card);
  box-shadow:var(--shadow); padding:.2rem 1.15rem; margin-bottom:.85rem;
}
.plate .prow {
  display:flex; align-items:baseline; gap:1rem; width:100%; text-align:left;
  padding:.62rem 0; border-top:1px dashed var(--rule-strong);
}
.plate .prow:first-child { border-top:none }
.plate .pk {
  flex:0 0 8.4rem; font-family:var(--font-data); font-size:.72rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.plate .pv { flex:1; min-width:0; font-family:var(--font-data); font-size:1rem; font-weight:700; word-break:break-word }
.plate .pv.is-pending { color:var(--soon); font-weight:400 }

.tabs { display:flex; gap:.4rem; margin-bottom:.85rem; overflow-x:auto; padding-bottom:.2rem; scrollbar-width:none }
.tab {
  flex:0 0 auto; min-height:2.6rem; padding:.4rem 1rem;
  border:var(--border-w) solid var(--rule-chrome); border-radius:var(--r-chip);
  font-size:.88rem; font-weight:600; color:var(--on-bg-dim); white-space:nowrap;
  transition:all var(--t-fast) var(--ease);
}
.tab[aria-selected="true"] { background:var(--accent-solid); color:var(--on-accent); border-color:var(--accent-solid) }

/* ============================================================
   PHOTOS
   ============================================================ */
.photos { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem }
.photo {
  position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden;
  border:var(--border-w) solid var(--rule); background:var(--surface-2); padding:0;
}
.photo img { width:100%; height:100%; object-fit:cover; display:block }
.photo .pending-mark {
  position:absolute; right:.3rem; bottom:.3rem;
  width:.7rem; height:.7rem; border-radius:50%; background:var(--soon);
  border:2px solid var(--surface);
}
.photo--add {
  display:grid; place-items:center; color:var(--ink-3);
  border-style:dashed; border-color:var(--rule-strong);
}
.photo--add svg { width:28px; height:28px }

/* ============================================================
   INVENTORY
   ============================================================ */
.toolbar { display:flex; gap:.5rem; margin-bottom:.7rem }
.searchbox {
  flex:1; display:flex; align-items:center; gap:.6rem;
  background:var(--surface); border:var(--border-w) solid var(--rule);
  border-radius:12px; padding:0 .85rem; min-height:3.2rem; box-shadow:var(--shadow);
  color:var(--ink-3);
}
.searchbox svg { width:22px; height:22px; flex:0 0 auto }
.searchbox input {
  flex:1; min-width:0; border:none; background:none; outline:none;
  font-family:var(--font-prose); font-size:1rem; font-weight:500; color:var(--ink);
  padding:.6rem 0;
}
.searchbox input::placeholder { color:var(--ink-3) }
.searchbox input::-webkit-search-cancel-button { filter:grayscale(1) opacity(.6) }

.iconbtn--solid {
  width:3.2rem; height:3.2rem; border-radius:12px;
  background:var(--surface); color:var(--ink);
  border:var(--border-w) solid var(--rule); box-shadow:var(--shadow);
}
.iconbtn--solid svg { width:24px; height:24px }

.qty {
  flex:0 0 auto; font-family:var(--font-data); font-weight:700; font-size:1.05rem;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.qty-of { color:var(--ink-3); font-size:.82rem }

.field-pair { display:grid; grid-template-columns:1fr 1fr; gap:.7rem }
.input-row { display:flex; gap:.5rem; align-items:stretch }
.input-row input { flex:1; min-width:0 }
.btn-inline {
  flex:0 0 auto; display:flex; align-items:center; gap:.4rem;
  padding:0 .9rem; min-height:3.1rem;
  border:var(--border-w) solid var(--rule-strong); border-radius:10px;
  font-size:.9rem; font-weight:600; color:var(--ink-2); white-space:nowrap;
}
.btn-inline svg { width:20px; height:20px }
.btn-inline:active { background:var(--surface-2) }

.checklist { display:flex; flex-wrap:wrap; gap:.4rem }
.checkitem {
  padding:.45rem .8rem; min-height:2.6rem;
  border:var(--border-w) solid var(--rule-strong); border-radius:var(--r-chip);
  font-size:.86rem; font-weight:600; color:var(--ink-2);
  transition:all var(--t-fast) var(--ease);
}
.checkitem[aria-pressed="true"] { background:var(--fill); color:var(--on-fill); border-color:var(--fill) }

.want-pn { color:var(--soon); font-weight:600 }

.catgroup { margin-bottom:1.3rem }
.catgroup-head { display:flex; align-items:baseline; gap:.7rem; margin-bottom:.5rem }
.catgroup-head h3 { margin:0; flex:1; font-size:1rem; font-weight:600 }
.catgroup-head p { margin:0; flex:0 0 100%; order:3; font-size:.8rem; color:var(--ink-3) }
.catgroup-head .btn-inline { min-height:2.3rem; padding:0 .8rem; font-size:.82rem }

.checkrows {
  border:var(--border-w) solid var(--rule); border-radius:12px;
  overflow:hidden; background:var(--surface-2);
}
.checkrow {
  display:flex; align-items:center; gap:.8rem; width:100%; text-align:left;
  min-height:var(--tap); padding:.7rem .85rem;
  border-top:var(--border-w) solid var(--rule);
  transition:background var(--t-fast) var(--ease);
}
.checkrow:first-child { border-top:none }
.checkrow:disabled { opacity:.5 }
.checkrow-body { flex:1; min-width:0 }
.checkrow-title { display:block; font-size:.95rem; font-weight:600; line-height:1.3 }
.checkrow-meta { display:block; font-size:.78rem; color:var(--ink-2); margin-top:.1rem }
.checkrow-mark {
  flex:0 0 auto; width:1.5rem; height:1.5rem; border-radius:6px;
  border:2px solid var(--rule-strong); position:relative;
}
.checkrow[aria-pressed="true"] .checkrow-mark { background:var(--fill); border-color:var(--fill) }
.checkrow[aria-pressed="true"] .checkrow-mark::after {
  content:""; position:absolute; left:.42rem; top:.16rem;
  width:.32rem; height:.68rem;
  border:solid var(--on-fill); border-width:0 2.5px 2.5px 0; transform:rotate(42deg);
}

/* ============================================================
   SCANNER
   ============================================================ */
.scanner {
  position:fixed; inset:0; z-index:120; background:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.scanner video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.scanner-frame {
  position:relative; z-index:2;
  width:min(78vw,22rem); aspect-ratio:1.6;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.55);
  border-radius:14px;
}
.scanner-frame span {
  position:absolute; width:2rem; height:2rem;
  border:3px solid #fff; border-radius:4px;
}
.scanner-frame span:nth-child(1){ top:-3px; left:-3px; border-right:none; border-bottom:none; border-radius:14px 0 0 0 }
.scanner-frame span:nth-child(2){ top:-3px; right:-3px; border-left:none; border-bottom:none; border-radius:0 14px 0 0 }
.scanner-frame span:nth-child(3){ bottom:-3px; left:-3px; border-right:none; border-top:none; border-radius:0 0 0 14px }
.scanner-frame span:nth-child(4){ bottom:-3px; right:-3px; border-left:none; border-top:none; border-radius:0 0 14px 0 }
.scanner-hint {
  position:relative; z-index:2; margin:1.4rem 0 0;
  color:#fff; font-size:.95rem; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.scanner-close {
  position:absolute; z-index:3; left:50%; transform:translateX(-50%);
  bottom:calc(2rem + env(safe-area-inset-bottom));
  min-height:3.4rem; padding:0 2.2rem; border-radius:var(--r-chip);
  background:#fff; color:#000; font-size:1rem; font-weight:700;
}

/* ============================================================
   SHEET AND FORMS
   ============================================================ */
.scrim {
  position:fixed; inset:0; z-index:60; background:rgba(2,6,11,.7);
  backdrop-filter:blur(3px); opacity:0; pointer-events:none;
  transition:opacity var(--t-view) var(--ease);
}
.scrim.is-open { opacity:1; pointer-events:auto }

.sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--surface); color:var(--ink);
  border-top:var(--border-w) solid var(--rule-strong); border-radius:20px 20px 0 0;
  padding:.6rem 1.15rem calc(1.4rem + env(safe-area-inset-bottom));
  max-height:88dvh; overflow-y:auto;
  transform:translate3d(0,101%,0); transition:transform var(--t-view) var(--ease);
  max-width:52rem; margin:0 auto;
}
.sheet.is-open { transform:none }
/* The only drag-to-dismiss target, so it needs a real touch area around the
   visible bar rather than being 4px tall. */
.sheet-grab {
  width:100%; height:2rem; margin:0 0 .6rem;
  display:flex; align-items:center; justify-content:center;
  cursor:grab; touch-action:none;
}
.sheet-grab::before {
  content:""; width:2.6rem; height:.28rem; border-radius:999px; background:var(--rule-strong);
}
.sheet-grab:active { cursor:grabbing }
.sheet h2 { margin:0 0 1rem; font-size:1.24rem; font-weight:600 }

.field { margin-bottom:1rem }
.field > label { display:block; margin-bottom:.4rem; font-size:.88rem; font-weight:600; color:var(--ink-2) }
/* Spin buttons are a desktop-only affordance that nobody uses and that
   narrows the field. Quantities are typed or corrected, not nudged. */
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0 }
.field input[type=number] { -moz-appearance:textfield; appearance:textfield }

.field input, .field textarea, .field select {
  width:100%; min-height:3.1rem; padding:.7rem .85rem;
  background:var(--surface-2); border:var(--border-w) solid var(--rule-strong); border-radius:10px;
  color:var(--ink); font-family:var(--font-prose); font-size:1rem; font-weight:500;
}
.field textarea { min-height:5.5rem; resize:vertical; line-height:1.5 }
.field.is-data input { font-family:var(--font-data); font-weight:700 }
.field input::placeholder, .field textarea::placeholder { color:var(--ink-3) }
.field-hint { margin:.35rem 0 0; font-size:.8rem; color:var(--ink-3) }

.segmented { display:grid; grid-template-columns:repeat(2,1fr); gap:.45rem }
.segmented--3 { grid-template-columns:repeat(3,1fr) }
.segmented--4 { grid-template-columns:repeat(4,1fr) }
.seg {
  min-height:3.1rem; padding:.5rem;
  border:var(--border-w) solid var(--rule-strong); border-radius:10px;
  font-size:.92rem; font-weight:600; color:var(--ink-2);
  transition:all var(--t-fast) var(--ease);
}
.seg[aria-pressed="true"] { background:var(--fill); color:var(--on-fill); border-color:var(--fill) }

.btn {
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  width:100%; min-height:3.5rem; border-radius:12px;
  font-size:1.02rem; font-weight:700;
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn svg { width:22px; height:22px }
.btn:active { transform:scale(.98) }
.btn--primary { background:var(--fill); color:var(--on-fill) }
.btn--ghost { border:var(--border-w) solid var(--rule-strong); color:var(--ink-2); margin-top:.5rem }
.btn--danger { border:var(--border-w) solid var(--port); color:var(--port); margin-top:.5rem }
.btn--primary.btn--on-hull { background:var(--accent-solid); color:var(--on-accent) }
.btn--ghost.btn--on-hull { border-color:var(--rule-chrome); color:var(--on-bg) }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:color-mix(in srgb, var(--chrome) 94%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:var(--border-w) solid var(--rule-chrome);
  padding-bottom:env(safe-area-inset-bottom);
}
.navbtn {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.18rem;
  min-height:3.9rem; color:var(--on-bg-dim);
  font-size:.72rem; font-weight:600; position:relative;
  transition:color var(--t-fast) var(--ease);
}
.navbtn svg { width:26px; height:26px }
.navbtn[aria-current="page"] { color:var(--on-bg) }
.navbtn[aria-current="page"]::before {
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:2.1rem; height:3px; background:var(--on-bg); border-radius:0 0 2px 2px;
}

/* ============================================================
   MISC
   ============================================================ */
.syncpill {
  display:inline-flex; align-items:center; gap:.45rem; flex:0 0 auto;
  font-family:var(--font-data); font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  padding:.22rem .65rem; border:1px solid var(--rule-strong); border-radius:var(--r-chip);
}
.syncpill::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:currentColor }
.syncpill.is-synced { color:var(--stbd) }
.syncpill.is-pending { color:var(--brass) }
.syncpill.is-offline { color:var(--on-bg-dim) }

.empty {
  text-align:center; padding:2.5rem 1.5rem;
  background:var(--surface); color:var(--ink);
  border:var(--border-w) solid var(--rule); border-radius:var(--r-card); box-shadow:var(--shadow);
}
.empty svg { width:36px; height:36px; color:var(--ink-3); margin-bottom:.6rem }
.empty p { margin:0 0 1rem; color:var(--ink-2); font-size:.95rem }

.toast {
  position:fixed; left:50%; bottom:calc(5.6rem + env(safe-area-inset-bottom));
  transform:translate3d(-50%,1.5rem,0); z-index:80;
  background:var(--accent-solid); color:var(--on-accent);
  font-size:.92rem; font-weight:700; padding:.75rem 1.15rem; border-radius:12px;
  opacity:0; pointer-events:none;
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  max-width:22rem; box-shadow:var(--shadow);
}
.toast.is-open { opacity:1; transform:translate3d(-50%,0,0) }

.lightbox {
  position:fixed; inset:0; z-index:90; background:rgba(2,6,11,.94);
  display:none; align-items:center; justify-content:center; padding:1rem;
}
.lightbox.is-open { display:flex }
.lightbox img { max-width:100%; max-height:88dvh; border-radius:10px }
.lightbox .close {
  position:absolute; top:calc(env(safe-area-inset-top) + .8rem); right:1rem;
  width:3rem; height:3rem; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.14); color:#fff;
}
.lightbox .close svg { width:26px; height:26px }

/* ============================================================
   WIDER SCREENS
   ============================================================ */
@media (min-width:700px) {
  .quick { grid-template-columns:repeat(4,1fr) }
  .meters { gap:.85rem }
  .photos { grid-template-columns:repeat(5,1fr) }
}
@media (min-width:1024px) {
  main { max-width:58rem; padding-bottom:3rem }
  .nav {
    top:0; bottom:auto; right:auto; width:13rem; height:100dvh;
    grid-template-columns:1fr; grid-auto-rows:min-content; align-content:start; gap:.2rem;
    border-top:none; border-right:var(--border-w) solid var(--rule-chrome);
    padding:5.6rem .7rem 0;
  }
  .navbtn { flex-direction:row; justify-content:flex-start; gap:.85rem; padding:0 .9rem; border-radius:10px; font-size:.95rem }
  .navbtn[aria-current="page"] { background:color-mix(in srgb, var(--on-bg) 12%, transparent) }
  .navbtn[aria-current="page"]::before { top:50%; left:0; transform:translateY(-50%); width:3px; height:1.6rem; border-radius:0 2px 2px 0 }
  .app { padding-left:13rem }
  .topbar { padding-left:1.4rem }
  .sheet { max-width:34rem; left:auto; right:auto; margin-left:calc(50% + 6.5rem); transform:translate3d(-50%,101%,0) }
  .sheet.is-open { transform:translate3d(-50%,0,0) }
}