/* =========================================
   Theme and base
   ========================================= */
:root{
  --brand:#2563eb; --brand-weak:#e8efff; --ring:#c7d7fe;
  --surface:#ffffff; --surface-2:#f7f8fa; --ink:#0f172a; --muted-ink:#475569; --line:#e6e9ef;
  --shadow:0 6px 18px rgba(9,16,31,.08);
  --app-w:768px; --pad:clamp(14px,4vw,28px);
  --brand-h:124px; --nav-h:64px;
}
@media (prefers-color-scheme: dark){
  :root{
    --surface:#0b1220; --surface-2:#101929; --ink:#e2e8f0; --muted-ink:#96a2b4; --line:#1d2a42;
    --brand-weak:#0f1f3f; --shadow:0 8px 22px rgba(0,0,0,.35);
  }
}
*{ box-sizing:border-box }
html,body{ height:auto; overscroll-behavior:none }
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 600px at 10% -10%, #eef2ff 0%, #f8fafc 45%, #f8fafc 100%);
}
main.scroll{ max-width:var(--app-w); margin:0 auto; padding-inline:var(--pad); padding-top:calc(var(--brand-h) + 12px) }
h1{ margin:0 0 6px; font-size:30px; letter-spacing:-.02em }
p{ color:var(--muted-ink) }

/* Header */
header.brand{
  position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:1001;
  width:min(var(--app-w),100vw); padding:12px var(--pad); background:var(--surface);
  border:1px solid var(--line); border-radius:0; box-shadow:var(--shadow);
  text-align:initial; min-height:88px;
}
.brand-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.brand-pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:9999px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink); font-weight:700;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-actions{ display:inline-flex; align-items:center; gap:8px }
.icon-btn{
  appearance:none; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; background:var(--surface); border:1px solid var(--line); color:var(--ink); cursor:pointer;
  transition: transform .04s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.icon-btn:hover{ border-color:var(--ring); box-shadow:0 0 0 4px var(--brand-weak) }
.icon-btn:active{ transform:translateY(1px) }

/* Footer */
.navbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); z-index:1000;
  width:min(var(--app-w),100vw); height:var(--nav-h); padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-top:1px solid var(--line); backdrop-filter:saturate(120%) blur(6px);
}
#steps{ padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom)) }

/* Steps and cards */
.step{ display:none }
.step.active{ display:block; margin:14px 0; padding:0; height:auto }
.step .screen{
  width:100%; max-width:calc(var(--app-w) - 2 * var(--pad)); margin:0 auto; padding:18px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
}
.card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow) }
.grid{ display:grid; gap:10px }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.divider{ height:3px; background:var(--line); margin:14px 0 }
.label{ display:block; font-size:13px; font-weight:600; color:var(--muted-ink) }

/* Buttons */
.btn{
  appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  padding:10px 14px; border-radius:12px; font-weight:700; cursor:pointer;
}
.btn.primary{ background:var(--brand); border-color:transparent; color:#fff }
.btn[disabled]{ opacity:.5; cursor:not-allowed }

/* Camera row */
.cam-wrap{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:12px 0; padding-right:2px }
.cam-thumb{ width:84px; height:84px; object-fit:cover; background:var(--surface-2); border:1px solid var(--line); border-radius:14px }
.cam-btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); font-weight:700; cursor:pointer;
  transition: transform .04s ease, box-shadow .12s ease, border-color .12s ease;
}
.cam-btn:hover{ border-color:var(--ring); box-shadow:0 0 0 4px var(--brand-weak) }
.cam-btn:active{ transform:translateY(1px) }
.cam-btn svg{ width:20px; height:20px }

/* Inputs */
.step .screen input[type="text"]{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface-2); color:var(--ink); font:inherit; line-height:1.35; outline:none;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.02); transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.step .screen input[type="text"]:focus{ background:var(--surface); border-color:var(--ring); box-shadow:0 0 0 4px var(--brand-weak) }

/* Segmented control */
.seg{ display:inline-flex; gap:8px; flex-wrap:wrap }
.seg-btn{ padding:8px 12px; border-radius:9999px; line-height:1 }
.seg-btn.is-active{ background:var(--brand); color:#fff; border-color:transparent }
.seg-btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--brand-weak) }

/* Toggles */
.tog{ display:grid; gap:8px }
.tog-row{ display:flex; align-items:center; gap:10px; font-weight:600; color:var(--ink) }
.tog-row input{ width:18px; height:18px; accent-color:var(--brand) }

/* Tag chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:9999px; background:var(--surface-2); border:1px solid var(--line); font-size:12px; font-weight:700 }
.chip .x{ font-weight:900; cursor:pointer; opacity:.7 }
.chip .x:hover{ opacity:1 }

/* =========================================
   Icon pills (CSS masks)
   ========================================= */
.ic{
  width: 28px; height: 28px; border-radius: 8px;
  display:inline-grid; place-items:center;
  background: var(--brand-weak); color: var(--brand);
  position: relative; margin-right:8px;
}
.ic::before{
  content:""; display:block; width:18px; height:18px;
  mask-size:contain; mask-repeat:no-repeat; mask-position:center;
  -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
  background: currentColor;
}
/* Project */
.ic-proj::before{
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 4h18v4H3V4Zm0 6h18v10H3V10Zm6 2v6h6v-6H9Z"/></svg>');
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 4h18v4H3V4Zm0 6h18v10H3V10Zm6 2v6h6v-6H9Z'/></svg>");
}
/* Stage */
.ic-stage::before{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 12h16v2H4v-2Zm0-6h16v2H4V6Zm0 12h16v2H4v-2Z"/></svg>');
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 12h16v2H4v-2Zm0-6h16v2H4V6Zm0 12h16v2H4v-2Z'/></svg>");
}
/* Tags */
.ic-tags::before{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 12l8-8h6l4 4v6l-8 8-10-10Zm13-5a2 2 0 1 0 4 0 2 2 0 0 0-4 0Z"/></svg>');
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 12l8-8h6l4 4v6l-8 8-10-10Zm13-5a2 2 0 1 0 4 0 2 2 0 0 0-4 0Z'/></svg>");
}
/* Bearing */
.ic-bearing::before{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="m12 2 3 8 8 3-8 3-3 8-3-8-8-3 8-3 3-8Z"/></svg>');
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='m12 2 3 8 8 3-8 3-3 8-3-8-8-3 8-3 3-8Z'/></svg>");
}
/* Elevation */
.ic-elev::before{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="m3 17 6-8 4 5 3-4 5 7H3Z"/></svg>');
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='m3 17 6-8 4 5 3-4 5 7H3Z'/></svg>");
}
/* GPS / address / weather / lsd icons */
.ic-gps::before{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2v3m0 14v3m9-9h-3M6 12H3m9-7a7 7 0 1 1 0 14 7 7 0 0 1 0-14Z"/></svg>');
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2v3m0 14v3m9-9h-3M6 12H3m9-7a7 7 0 1 1 0 14 7 7 0 0 1 0-14Z'/></svg>");
}
.ic-addr::before{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 21s-7-6.1-7-11a7 7 0 1 1 14 0c0 4.9-7 11-7 11Zm0-9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/></svg>');
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 21s-7-6.1-7-11a7 7 0 1 1 14 0c0 4.9-7 11-7 11Zm0-9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/></svg>");
}
.ic-weather::before{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M6 19h10a4 4 0 0 0 0-8h-.3A5.5 5.5 0 1 0 6 19Z"/></svg>');
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M6 19h10a4 4 0 0 0 0-8h-.3A5.5 5.5 0 1 0 6 19Z'/></svg>");
}
.ic-lsd::before{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 3l9 4v10l-9 4-9-4V7l9-4Zm0 2.2L5 8v8l7 2.8L19 16V8l-7-2.8Z"/></svg>');
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3l9 4v10l-9 4-9-4V7l9-4Zm0 2.2L5 8v8l7 2.8L19 16V8l-7-2.8Z'/></svg>");
}

/* Camera overlay & review */
.fc-overlay{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.85) }
.fc-panel{ width:min(520px,92vw); max-height:min(80svh,80vh); background:#000; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.35); overflow:hidden; display:flex; flex-direction:column }
.fc-video{ width:100%; height:calc(min(80svh,80vh) - 112px); background:#000; object-fit:contain }
.fc-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; background:#0b0b0b; border-top:1px solid rgba(255,255,255,.08); color:#fff }
.fc-zoom{ display:flex; align-items:center; gap:8px }
.fc-zoom input[type="range"]{ width:140px }

.review-wrap{ position:fixed; inset:0; z-index:100001; background:#000; display:flex; flex-direction:column }
.review-img{ flex:1; object-fit:contain; width:100%; background:#000 }
.review-bar{ display:flex; gap:10px; padding:10px; background:#0b0b0b; border-top:1px solid rgba(255,255,255,.08) }
.review-bar .btn{ color:#fff; border-color:rgba(255,255,255,.18); background:#111 }
.review-bar .btn.primary{ background:var(--brand) }

/* Keep width consistent */
:root{ --app-w:768px }
main.scroll{ max-width:var(--app-w) !important }
.navbar{ width:min(var(--app-w),100vw) !important }
.step .screen{ max-width:calc(var(--app-w) - 2 * var(--pad)) !important }
/* ===== Brand header ===== */

.brand {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

/* Flex bar that matches your page width cap */
.brand .brand-bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Left pill: icon + text */
.brand .brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* Project name inside pill can shrink gracefully */
#proj-pill { max-width: 52vw; overflow: hidden; text-overflow: ellipsis; }

/* Right logo image */
.brand .logo {
  width: 36px;
  height: 36px;
  display: block;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 2px;
}

/* Force the camera overlay to fill the entire viewport */
.fc-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  background: #000 !important;
  display: block !important;          /* not centered */
  padding: 0 !important;
}

/* Make the panel edge to edge without corners or max size caps */
.fc-panel{
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
}
@supports (height: 100dvh){
  .fc-panel{ height: 100dvh !important; }
}

/* Video occupies all space between the top and bottom bars */
.fc-video{
  flex: 1 1 0 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Bars stay visible at edges */
.fc-bar{ flex: 0 0 auto !important; }


/* Make the camera overlay truly full-screen and keep the bottom buttons visible */

/* Overlay fills the window */
.fc-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  background: #000 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Panel has no max size or rounding and uses the real viewport height */
.fc-panel{
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
@supports (height: 100dvh){
  .fc-panel{ height: 100dvh !important; }
}
@supports (height: 100svh){
  .fc-panel{ height: 100svh !important; } /* avoids iOS pushing bottom off-screen */
}

/* Video consumes all space between bars */
.fc-video{
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}

/* Pin the bottom bar inside the safe area */
.fc-panel > .fc-bar:last-of-type{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  display: flex !important;
  justify-content: space-between !important; /* buttons to corners */
}

/* Optional: keep the top bar flush to the top safe area */
.fc-panel > .fc-bar:first-of-type{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px !important;
}


/* Make panel a stacking context */
.fc-panel{
  position: relative !important;
  isolation: isolate !important;
}

/* Video sits behind the controls */
.fc-video{
  position: relative !important;
  z-index: 1 !important;
}

/* Bars are absolutely positioned and on top */
.fc-panel > .fc-bar{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}

/* Top bar pinned to safe top */
.fc-panel > .fc-bar:first-of-type{
  top: 0 !important;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px !important;
}

/* Bottom bar pinned to safe bottom */
.fc-panel > .fc-bar:last-of-type{
  bottom: 0 !important;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
}

/* If iOS still steals taps through the video, uncomment this:
.fc-video{ pointer-events: none !important; }
*/


/* Header + gap trim */
:root{
  --brand-h: 92px;     /* was 124px */
  --header-h: 52px;    /* bar height */
}

header.brand{ padding: 8px var(--pad); min-height: var(--brand-h); }
.brand .brand-bar{ height: var(--header-h); }

/* Reduce the offset below the fixed header */
main.scroll{ padding-top: calc(var(--brand-h) + 4px); }

/* Optional: nudge the first card closer if needed */
main.scroll > *:first-child{ margin-top: 6px; }