/* Churpie brand + shared layout tokens. Bootstrap draws the components;
   these tokens govern the frame (golden ratio) and colours. */
:root {
  --churpie: #17a2b8;
  --churpie-dark: #0f7c8c;
  --phi: 1.618;
}

body {
  background: #f4f6f8;
  color: #212529;
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.brand {
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--churpie);
}

.btn-churpie {
  background: var(--churpie);
  border-color: var(--churpie);
  color: #fff;
}
.btn-churpie:hover { background: var(--churpie-dark); border-color: var(--churpie-dark); color: #fff; }

.card-flow { max-width: 640px; margin: 24px auto; border: none; box-shadow: 0 2px 14px rgba(0,0,0,.06); }
.card-flow .card-body { padding: 28px; }

/* Glass light-blue theme (adapted from the iseestudios landing look) */
:root {
  --blue: #5b9bff;
  --blue-deep: #3d82f0;
  --blue-glow: #b9d6ff;
  --line: #d2d2d7;
  --panel: #f5f5f7;
}
/* glossy blue button */
.btn-glass {
  position: relative; color: #fff; font-weight: 600;
  padding: 10px 20px; border-radius: 12px; border: 1px solid var(--blue-deep);
  background: linear-gradient(180deg, #b3d1ff 0%, var(--blue) 48%, var(--blue-deep) 52%, #5a97f5 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.10), 0 2px 6px rgba(61,130,240,.25);
  transition: transform .08s ease, box-shadow .12s ease;
}
.btn-glass:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 12px rgba(61,130,240,.35), 0 0 0 3px var(--blue-glow); }
.btn-glass:active { transform: translateY(1px); }
/* secondary: glossy white with blue text */
.btn-glass-secondary {
  position: relative; color: var(--blue-deep); font-weight: 600;
  padding: 10px 20px; border-radius: 12px; border: 1px solid var(--blue);
  background: linear-gradient(180deg, #f0f6ff 0%, #dbe8fc 48%, #d0e0fa 52%, #dbe8fc 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px rgba(61,130,240,.15);
  transition: transform .08s ease, box-shadow .12s ease;
}
.btn-glass-secondary:hover { color: var(--blue-deep); box-shadow: inset 0 1px 0 #fff, 0 0 0 3px var(--blue-glow); }
.btn-glass-secondary:active { transform: translateY(1px); }

/* colored glass variants - same glossy build, keep each button's own colour */
.btn-glass-red, .btn-glass-black, .btn-glass-yellow {
  position: relative; font-weight: 600; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.2);
  transition: transform .08s ease, box-shadow .12s ease;
}
.btn-glass-red:active, .btn-glass-black:active, .btn-glass-yellow:active { transform: translateY(1px); }

.btn-glass-red {
  color: #fff; border: 1px solid #b02a37;
  background: linear-gradient(180deg, #ff9aa2 0%, #dc3545 48%, #c82333 52%, #d33a48 100%);
}
.btn-glass-red:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px rgba(220,53,69,.4); }

.btn-glass-black {
  color: #fff; border: 1px solid #16191c;
  background: linear-gradient(180deg, #5c636a 0%, #343a40 48%, #212529 52%, #2b3035 100%);
}
.btn-glass-black:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(0,0,0,.35); }

.btn-glass-yellow {
  color: #4d3b00; border: 1px solid #d39e00;
  background: linear-gradient(180deg, #ffe89a 0%, #ffc107 48%, #e0a800 52%, #f0b400 100%);
}
.btn-glass-yellow:hover { color: #4d3b00; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 12px rgba(224,168,0,.4); }
/* frosted glass panel */
.glass-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(245,248,255,.6));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(185,214,255,.6); border-radius: 16px;
  box-shadow: 0 8px 24px rgba(61,130,240,.10);
}
.churpie-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }

/* step indicator (1-2-3) */
ul.steps { list-style: none; display: flex; justify-content: center; padding: 0; margin: 8px 0 20px; }
ul.steps li { display: flex; align-items: center; }
ul.steps .dots { color: #ccc; padding: 0 6px; }
ul.steps li:first-child .dots { visibility: hidden; }
ul.steps .number { width: 34px; height: 34px; border-radius: 50%; background: #e2e6ea; color: #868e96;
                   display: flex; align-items: center; justify-content: center; font-weight: 700; }
ul.steps .number.active { background: var(--churpie); color: #fff; }

/* golden-ratio capture frame: square clip, smaller control band */
.capture { max-width: 380px; margin: 0 auto; position: relative; }

/* pre-roll countdown ring (3-2-1 before recording). NOT the dispatch loading
   spinner - a standalone sweep-per-second ring shown over the camera. */
.cd-overlay {
  position: fixed; inset: 0;                     /* full page while it counts down */
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); z-index: 2000;
}
.cd-ring { width: 140px; height: 140px; transform: rotate(-90deg); }
.cd-ring .cd-track { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 8; }
.cd-ring .cd-fg { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round;
                  stroke-dasharray: 326.726; stroke-dashoffset: 326.726; }
.cd-ring.run .cd-fg { animation: cd-sweep 1s linear forwards; }
@keyframes cd-sweep { from { stroke-dashoffset: 326.726; } to { stroke-dashoffset: 0; } }
.cd-num { position: absolute; color: #fff; font-size: 56px; font-weight: 800; text-shadow: 0 2px 6px rgba(0,0,0,.4); }
.snap { border: 16px solid #ddd; border-radius: 8px; width: 100%; background: #111; aspect-ratio: 1 / 1; object-fit: cover; }
.control-band { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }

/* invite screen: roster + share buttons */
.roster li { display: flex; align-items: center; justify-content: space-between;
             padding: 10px 0; border-bottom: 1px solid rgba(210,210,215,.6); }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.share-row .btn { flex: 1 1 auto; min-width: 130px; }
/* native share sheet button: hidden unless the browser supports navigator.share */
.share-native { display: none; }
body.can-share .share-native { display: inline-flex; align-items: center; justify-content: center; }