/* SnagTracker — dark, one-handed, on-site UI. */
:root {
  --bg: #0e0f11;
  --surface: #1b1c1f;
  --surface-2: #26272b;
  --surface-3: #313236;
  --text: #e9e9ec;
  --text-dim: #9b9ca3;
  --text-faint: #6f7076;
  --line: #33343a;
  --accent: #c9cbe0;
  --fab: #5b6079;
  --high-bg: #4a1f1f;   --high-fg: #ff8f8f;
  --med-bg:  #4a3315;   --med-fg:  #ffb057;
  --low-bg:  #1e3d24;   --low-fg:  #79d68a;
  --open-bg: #f6c9c9;   --open-fg: #7a2020;
  --prog-bg: #c9d8f6;   --prog-fg: #1f3a7a;
  --closed-bg: #cfe9d2; --closed-fg: #1f5127;
  --danger: #e0574a;
  --radius: 14px;
  --tap: 48px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  overscroll-behavior-y: none;
}

/* iOS: keep content clear of the notch and the home indicator. */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100vh;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* ---------- App bar ---------- */
.appbar {
  position: sticky;
  top: env(safe-area-inset-top);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 12px;
  background: var(--bg);
}
.appbar h1 {
  flex: 1;
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
}
.appbar .icon-btn { width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: 50%; }
.appbar .icon-btn:active { background: var(--surface-2); }
.appbar svg { width: 24px; height: 24px; stroke: var(--text); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Screens ---------- */
.screen { display: none; padding: 0 12px 120px; }
.screen.active { display: block; }

/* ---------- Cards ---------- */
.card {
  position: relative;
  display: flex;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  overflow: hidden;
}
.card:active { background: var(--surface-2); }
.card-body { flex: 1; min-width: 0; }
.card-title { font-size: 17px; line-height: 1.35; margin: 0 0 6px; word-break: break-word; }
.card-meta { font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.card-meta .row { display: flex; align-items: center; gap: 6px; }
.card-meta svg { width: 15px; height: 15px; stroke: var(--text-faint); fill: none; stroke-width: 2; flex: none; }

/* Priority stripe down the left edge of a snag card. */
.snag-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--stripe, var(--text-faint));
}
.snag-card.p-high { --stripe: #e05252; }
.snag-card.p-medium { --stripe: #e08b3a; }
.snag-card.p-low { --stripe: #4caf6a; }

.thumb {
  width: 68px; height: 68px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-3);
  flex: none;
}

.kebab { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; margin: -6px -6px 0 0; }
.kebab:active { background: var(--surface-3); }
.kebab svg { width: 20px; height: 20px; stroke: var(--text-dim); fill: none; stroke-width: 2.5; stroke-linecap: round; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
.chip.s-open { background: var(--open-bg); color: var(--open-fg); }
.chip.s-in_progress { background: var(--prog-bg); color: var(--prog-fg); }
.chip.s-closed { background: var(--closed-bg); color: var(--closed-fg); }
.chip.p-high { background: var(--high-bg); color: var(--high-fg); }
.chip.p-medium { background: var(--med-bg); color: var(--med-fg); }
.chip.p-low { background: var(--low-bg); color: var(--low-fg); }

/* ---------- FAB ---------- */
.fab {
  position: fixed;
  right: 20px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: 64px; height: 64px;
  border-radius: 20px;
  background: var(--fab);
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  z-index: 25;
}
.fab:active { transform: scale(.94); }
.fab svg { width: 30px; height: 30px; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; fill: none; }

/* ---------- Forms ---------- */
.section-label { font-size: 14px; color: var(--text-dim); margin: 22px 0 10px; }
.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.input, textarea.input, select.input {
  width: 100%;
  min-height: var(--tap);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.input:focus { border-color: var(--accent); }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.45; }
select.input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b9ca3' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 42px;
}
.hint { font-size: 12px; color: var(--text-faint); margin-top: 6px; line-height: 1.4; }

/* Segmented control — Status / Priority. */
.segmented { display: flex; gap: 10px; }
.segmented button {
  flex: 1;
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 15px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.segmented button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); border-color: var(--text-faint); }
.segmented.prio button[aria-pressed="true"][data-v="high"]   { border-color: #e05252; color: #ff8f8f; background: transparent; }
.segmented.prio button[aria-pressed="true"][data-v="medium"] { border-color: #e08b3a; color: #ffb057; background: transparent; }
.segmented.prio button[aria-pressed="true"][data-v="low"]    { border-color: #4caf6a; color: #79d68a; background: transparent; }
.segmented button .tick { display: none; }
.segmented button[aria-pressed="true"] .tick { display: inline; }

/* Settings groups */
.group { background: var(--surface); border-radius: var(--radius); padding: 4px 16px; margin-bottom: 16px; }
.group-head { display: flex; align-items: center; gap: 10px; padding: 14px 0 4px; font-size: 16px; }
.group-head svg { width: 20px; height: 20px; stroke: var(--text-dim); fill: none; stroke-width: 2; }
.group-desc { font-size: 13px; color: var(--text-dim); padding-bottom: 10px; line-height: 1.45; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-top: 1px solid var(--line); }
.toggle-row:first-of-type { border-top: none; }
.toggle-row .lbl { flex: 1; }
.toggle-row .sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.switch { position: relative; width: 52px; height: 30px; border-radius: 15px; background: var(--surface-3); flex: none; transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--text-faint); transition: transform .15s, background .15s; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(22px); background: #1b2340; }

/* ---------- Photos ---------- */
.photo-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.photo-item { position: relative; width: 88px; height: 88px; }
.photo-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; background: var(--surface-3); }
.photo-del {
  position: absolute; top: -8px; right: -8px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--danger); color: #fff;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* ---------- Buttons ---------- */
.btn {
  width: 100%;
  min-height: var(--tap);
  border-radius: 12px;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px;
}
.btn:active { background: var(--surface-2); }
.btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: var(--accent); color: #1a1c24; border-color: var(--accent); font-weight: 600; }
.btn-primary:active { background: #b3b6cd; }
.btn-danger { color: var(--danger); border-color: #5a2b26; }

/* Sticky save bar at the bottom of edit screens. */
.save-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 62%, transparent);
  z-index: 26;
}

/* ---------- Sheets / dialogs ---------- */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 40; display: none; }
.scrim.open { display: block; }
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 41;
  background: var(--surface-2);
  border-radius: 18px 18px 0 0;
  padding: 8px 0 calc(16px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .2s ease;
  max-height: 85vh;
  overflow-y: auto;
}
.sheet.open { transform: translateY(0); }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--text-faint); margin: 8px auto 12px; }
.sheet-item { display: flex; align-items: center; gap: 16px; padding: 16px 22px; font-size: 16px; min-height: var(--tap); }
.sheet-item:active { background: var(--surface-3); }
.sheet-item svg { width: 22px; height: 22px; stroke: var(--text-dim); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sheet-item.danger { color: var(--danger); }
.sheet-item.danger svg { stroke: var(--danger); }
.sheet-title { padding: 6px 22px 12px; font-size: 13px; color: var(--text-dim); }

.dialog {
  position: fixed;
  z-index: 41;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(94vw, 460px);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface-2);
  border-radius: 16px;
  padding: 20px;
  display: none;
}
.dialog.open { display: block; }
.dialog h2 { margin: 0 0 16px; font-size: 19px; font-weight: 600; }
.dialog-actions { display: flex; gap: 10px; margin-top: 20px; }
.dialog-actions .btn { flex: 1; }

/* ---------- Misc ---------- */
.empty { text-align: center; color: var(--text-dim); padding: 72px 24px; line-height: 1.6; }
.empty svg { width: 56px; height: 56px; stroke: var(--surface-3); fill: none; stroke-width: 1.5; margin-bottom: 16px; }
.toast {
  position: fixed;
  left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--surface-3);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 24px;
  font-size: 14px;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  max-width: 90vw;
  text-align: center;
}
.toast.show { opacity: 1; }
.about { text-align: center; color: var(--text-dim); font-size: 14px; padding: 24px 0 8px; line-height: 1.7; }
.about .name { font-size: 26px; color: var(--text); font-weight: 400; }
.about hr { border: none; border-top: 1px solid var(--line); margin: 14px 32px; }
.appbar svg.filter-active { stroke: var(--accent); }
.busy { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 70; display: none; place-items: center; text-align: center; }
.busy.open { display: grid; }
.spinner { width: 42px; height: 42px; border: 3px solid var(--surface-3); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Annotation canvas */
.annot-wrap { position: relative; background: #000; border-radius: 10px; overflow: hidden; touch-action: none; }
.annot-wrap canvas { display: block; width: 100%; touch-action: none; }
.annot-tools { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.annot-tools .swatch { width: 38px; height: 38px; border-radius: 50%; border: 2px solid transparent; flex: none; }
.annot-tools .swatch[aria-pressed="true"] { border-color: #fff; }