/* Stage 4 — Capture Today UI. Phone-first, dark (camera app register).
   Palette: warm skin tones — a dark espresso/brown base with light-skin
   text and a tan accent, fitting for a skin-tracking app. Boundaries are
   drawn with a clear-but-subtle warm border (var(--border)), never by fill
   colour alone; corners keep only a minimal rounding (var(--radius)). */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* display:flex on panels/sections must never beat the hidden attribute */
[hidden] { display: none !important; }

:root {
  --bg: #1b1410;        /* dark skin — deep warm espresso */
  --panel: #271d17;     /* raised warm-brown surface */
  --raised: #33261e;    /* button / control surface, a touch lighter */
  --input: #150f0b;     /* recessed field */
  --text: #f3e7db;      /* light skin — warm off-white */
  --muted: #b7a493;     /* warm taupe */
  --accent: #d99a63;    /* mid tan — the accent skin tone */
  --on-accent: #241610; /* dark warm text/ink on accent & status fills */
  --ok: #7fb069;        /* warm sage */
  --warn: #e0a34f;      /* amber */
  --danger: #d76a5c;    /* terracotta */
  --border: #4d3a2d;    /* clear-but-subtle warm border */
  --radius: 6px;        /* minimal corner rounding */
}

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
}

/* ---- chrome ---- */

#topbar {
  display: flex;
  gap: 6px;
  padding: calc(8px + env(safe-area-inset-top)) 10px 6px;
}

#spot-select {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  font-size: 16px;
}

#new-spot-btn {
  width: 44px;
  background: var(--panel);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 24px;
  line-height: 1;
}
#new-spot-btn:disabled { color: var(--muted); opacity: 0.6; }

#spot-menu-btn {
  width: 44px;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 18px;
}

#cap-note { padding: 0 12px 5px; color: var(--muted); font-size: 13px; }

main { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
section { flex: 1; display: flex; flex-direction: column; padding: 8px 10px; gap: 8px; }

/* ---- camera stage ---- */

#capture-pane { overflow: hidden; } /* fit the viewport; children shrink */

#camera-stage {
  position: relative;
  flex: 1;
  min-height: 35vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

#camera, #overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#camera { object-fit: cover; transform-origin: 50% 50%; }

/* the just-shot frame, shown over the live feed while processing */
#freeze {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stage 6 — onion-skin ghost of the previous image (§10.3, [D10]).
   Cover-fit like the live video, but NOT scaled by the digital zoom: it is
   the previous framing, shown as a fixed target the user moves towards. */
#ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

#ghost-controls,
#align-ghost-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  border-radius: var(--radius);
  font-size: 12px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

#ghost-toggle,
#align-ghost-toggle {
  padding: 2px 8px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  font-size: 12px;
}
#ghost-toggle[aria-pressed="true"],
#align-ghost-toggle[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

#ghost-opacity,
#align-ghost-opacity { width: 80px; accent-color: var(--accent); }

#capture-close {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 16px;
}
#capture-close:disabled { opacity: 0.4; }

#shutter {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: rgba(255, 255, 255, 0.25);
}
#shutter:active { background: #fff; }
#shutter:disabled { opacity: 0.4; }

.zoom-btn {
  position: absolute;
  bottom: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 26px;
  line-height: 1;
}
#zoom-out { left: calc(50% - 106px); }
#zoom-in { right: calc(50% - 106px); }
.zoom-btn:disabled { opacity: 0.35; }

#zoom-level {
  position: absolute;
  left: 50%;
  bottom: 94px;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: var(--radius);
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

#busy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.65);
  font-size: 15px;
}

.spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- panels ---- */

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
}
.panel.warn { border-color: var(--warn); }
#error-text { color: var(--warn); }

#done-panel { flex: 1; min-height: 0; }

#done-img {
  width: 100%;
  flex: 1;
  min-height: 0; /* shrink so Re-take/Delete always stay on screen */
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #000;
}

#done-reason, #done-meta, #view-meta { color: var(--muted); font-size: 13px; }

/* one line, always — a wrapping meta line resizes the canvas mid-scrub */
#view-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The elapsed part of the caption ("+5 days") — tap to make the current
   frame the reference (baseline) image. Inline with the caption text. */
#meta-elapsed {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline dotted;
}
#meta-elapsed:disabled { color: inherit; text-decoration: none; }

.row { display: flex; gap: 8px; }
.row button, #error-dismiss {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--raised);
  color: var(--text);
  font-size: 15px;
}
button.danger { color: var(--danger); }

/* ---- view pane ----
   The pane must FIT the viewport: the canvas takes the remaining height and
   the slider/tools never scroll away. */

#view-pane { overflow: hidden; }

#view-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#timeline-row { display: flex; align-items: center; gap: 8px; }

#view-slider { flex: 1; width: 100%; accent-color: var(--accent); }

/* + opens today's capture; done for today it turns into a quiet green ✓. */
#capture-today-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--accent);
  border: 1px solid var(--border);
  font-size: 24px;
}
#capture-today-btn.done {
  color: var(--on-accent);
  background: var(--ok);
  border-color: var(--ok);
  font-size: 20px;
  opacity: 1;
}

/* Wastebin on today's frame — the delete/retake path. */
#delete-today-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.55);
  font-size: 18px;
}

#view-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: 1;
  text-align: center;
}
#view-empty[hidden] { display: none; }

#first-capture-btn {
  padding: 12px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--panel);
  color: var(--accent);
  font-size: 16px;
}

#view-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

#view-canvas {
  display: block;
  margin: auto; /* centred; element box equals the displayed image */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  touch-action: none; /* pointer gestures own the surface; the pane doesn't scroll */
}

#flag-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 22px;
  background: none;
  border: none;
}

/* Newer-pipeline scale suggestion (background re-analysis, >5% off). */
#rescan-badge {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 22px;
  background: none;
  border: none;
}

.warn-text { color: var(--warn); font-size: 13px; }

/* Viewing/alignment toolbar: a row of uniform square icon buttons, edges
   flush with the slider row above. Each keeps its border in every state, so
   the pressed (Align on) state reads by more than colour alone. */
#view-tools { justify-content: space-between; gap: 8px; }
#view-tools button {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
#view-tools button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
#view-tools button:disabled { opacity: 0.4; }

/* ---- new spot dialog ---- */

dialog {
  margin: auto;
  width: min(92vw, 420px);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }

/* ---- welcome menu (⋯), language picker, user guide, account ---- */

#menu-list, #language-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
#menu-list button, #language-list button {
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--raised);
  color: var(--text);
  font-size: 15px;
  text-align: left;
}
#menu-list button:disabled { opacity: 0.4; }
#language-list button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

.guide-steps { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.guide-steps ul { padding-left: 16px; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.guide-notes { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; margin-bottom: 10px; }
#guide-dialog h3 { font-size: 15px; margin: 14px 0 8px; }
#about-photo {
  display: block;
  width: 70%;
  margin: 0 auto 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.guide-media {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.guide-media img {
  width: calc(50% - 4px);
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
video.guide-media {
  display: block;
  width: 100%;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

#new-spot-form { display: flex; flex-direction: column; gap: 10px; }
#new-spot-form h2 { font-size: 18px; }
#new-spot-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
#new-spot-form .opt { color: var(--muted); font-weight: normal; }
#new-spot-form input, #new-spot-form textarea {
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 10px;
  font-size: 16px; /* prevents iOS zoom-on-focus */
  font-family: inherit;
}

/* ---- sync & account UI (sync-account plan §2, §4, §6) ---- */

#sync-light {
  width: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--raised);
  color: var(--on-accent);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sync-light[data-light="red"]    { background: var(--danger); border-color: var(--danger); }
#sync-light[data-light="orange"] { background: var(--warn); border-color: var(--warn); }
#sync-light[data-light="green"]  { background: var(--ok); border-color: var(--ok); }

/* Colour never alone: ⚠ / ✓ text badges, spinner ring while backing up. */
#sync-badge.spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-top-color: var(--on-accent);
  animation: spin 0.9s linear infinite;
}

dialog h2 { font-size: 18px; margin-bottom: 10px; }
dialog p { font-size: 14px; margin-bottom: 10px; }
dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; margin-bottom: 10px; }
dialog label.check { flex-direction: row; align-items: center; gap: 8px; }
dialog input {
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 10px;
  font-size: 16px; /* prevents iOS zoom-on-focus */
  font-family: inherit;
}
dialog .row { margin-top: 6px; }
.warn-text { color: var(--warn); font-size: 13px; }
.muted { color: var(--muted); font-size: 13px; }
button.danger { color: var(--danger); }
button.linkish {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 14px;
  padding: 8px 0;
  text-decoration: underline;
}

.recovery-code {
  background: var(--input);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 12px;
  font-size: 15px;
  letter-spacing: 1px;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
  margin-bottom: 10px;
}

.code-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 10px; }
.code-row .recovery-code { flex: 1; margin-bottom: 0; display: flex; align-items: center; }
.copy-btn {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 18px;
  padding: 0 14px;
}

.merge-list { list-style: none; max-height: 40vh; overflow-y: auto; margin-bottom: 10px; }
.merge-list li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.merge-list label { flex-direction: row; align-items: center; gap: 8px; margin: 0; }

#wiz-busy { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
#wiz-busy .spinner { width: 24px; height: 24px; border-width: 3px; }

#status-notices { list-style: none; margin-bottom: 6px; }
#status-notices li { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--muted); }
#status-notices li.alert { color: var(--warn); }

/* ---- feedback thread (menu → Feedback) ---- */

/* Unread dot on the menu button: replies are pull-only, this is the nudge. */
#menu-feedback.notify::after { content: ' ●'; color: var(--accent); }

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 48px;
  max-height: 45vh;
  overflow-y: auto;
  margin-bottom: 10px;
}
.chat-msg {
  max-width: 85%;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.chat-msg.user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--on-accent);
  border-bottom-right-radius: 3px;
}
.chat-msg.dev {
  align-self: flex-start;
  background: var(--raised);
  border: 1px solid var(--border);
  border-bottom-left-radius: 3px;
}
.chat-msg time { display: block; font-size: 11px; opacity: 0.7; margin-top: 2px; }
.chat-msg.deleted span { font-style: italic; opacity: 0.7; }

#feedback-input {
  width: 100%;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 9px 11px;
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
}
.chat-controls { align-items: center; }
.chat-controls #feedback-count { flex: 1; font-variant-numeric: tabular-nums; }

#toasts {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
  width: min(92vw, 420px);
}
.toast {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--ok);
  border-radius: var(--radius);
  padding: 12px;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.toast.warn { border-left-color: var(--warn); }