/* Kinema — design tokens */

:root {
  --bone: #F7F4EE;
  --bone-2: #EFEAE0;
  --paper: #FBF9F5;
  --ink: #1B1814;
  --ink-2: #3A342C;
  --muted: #7A7268;
  --muted-2: #A39A8E;
  --line: #E6E0D4;
  --line-2: #D8D0C0;

  --clay: #B85C38;        /* primary action — warm clay */
  --clay-2: #9C4A28;
  --clay-soft: #F2D9CC;

  --sage: #6B8E63;        /* progress / success */
  --sage-2: #547349;
  --sage-soft: #DCE6D5;

  --amber: #C8923A;       /* streak / warmth */
  --amber-soft: #F2E2C2;

  --bone-card: #FFFEFB;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(27,24,20,0.04), 0 2px 6px rgba(27,24,20,0.04);
  --shadow-md: 0 2px 6px rgba(27,24,20,0.05), 0 8px 24px rgba(27,24,20,0.06);
  --shadow-lg: 0 8px 24px rgba(27,24,20,0.08), 0 24px 60px rgba(27,24,20,0.10);

  --font-display: "Inter Tight", "Inter", -apple-system, system-ui, sans-serif;
  --font-body: "Inter", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: #2A2722;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 0%, #3a342a 0%, #211e19 40%, #1a1714 100%);
}

/* App canvas */
.app-canvas {
  width: 100vw; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 24px 80px;
  gap: 28px;
}

.canvas-header {
  width: 100%;
  max-width: 1200px;
  display: flex; align-items: baseline; justify-content: space-between;
  color: rgba(255,255,255,0.85);
}
.canvas-header h1 {
  font-family: var(--font-display);
  font-weight: 600; letter-spacing: -0.02em;
  font-size: 22px; margin: 0;
}
.canvas-header .meta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* Screen-strip layout: row of devices side-by-side */
.screens-row {
  display: flex; gap: 36px; flex-wrap: wrap; justify-content: center;
  align-items: flex-start;
}
.screen-cell {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.screen-cell .label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.screen-cell .label strong {
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}

/* App body — fills inside the iOS frame */
.app-body {
  background: var(--bone);
  height: 100%;
  width: 100%;
  font-family: var(--font-body);
  color: var(--ink);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.app-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-top: 60px; /* status bar */
  padding-bottom: 110px; /* tab bar + indicator */
}
.app-scroll::-webkit-scrollbar { width: 0; }

/* Tab bar */
.tabbar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 92px;
  padding: 8px 16px 30px;
  display: flex; gap: 4px;
  background: rgba(251,249,245,0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 0.5px solid rgba(0,0,0,0.06);
  z-index: 5;
}
.tabbar button {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: transparent; border: 0; padding: 6px 0 0;
  font-family: var(--font-body);
  font-size: 10px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
}
.tabbar button.active { color: var(--ink); }
.tabbar button .ic { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }

/* Page header */
.page-head {
  padding: 6px 22px 10px;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.page-head h1 {
  font-family: var(--font-display);
  font-weight: 600; letter-spacing: -0.025em;
  font-size: 30px; line-height: 1.05;
  margin: 0;
}
.page-head .sub {
  font-size: 12px; color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.005em;
}
.page-head .right-meta {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted);
}

/* Section title */
.sect-title {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  padding: 0 24px 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.sect-title a, .sect-title button {
  font-family: var(--font-body);
  font-size: 12px; text-transform: none; letter-spacing: 0;
  color: var(--clay); text-decoration: none;
  background: transparent; border: 0; cursor: pointer;
  font-weight: 500;
}

/* Card */
.card {
  background: var(--bone-card);
  border-radius: var(--r-lg);
  border: 0.5px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* Pill */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.005em;
  background: var(--bone-2); color: var(--ink-2);
}
.pill.clay { background: var(--clay-soft); color: var(--clay-2); }
.pill.sage { background: var(--sage-soft); color: var(--sage-2); }
.pill.amber { background: var(--amber-soft); color: #8B5E1A; }
.pill.ghost { background: transparent; border: 0.5px solid var(--line-2); color: var(--ink-2); }
.pill .dot {
  width: 6px; height: 6px; border-radius: 999px; background: currentColor;
}

/* Big number */
.bignum {
  font-family: var(--font-display);
  font-weight: 600; letter-spacing: -0.04em;
  font-feature-settings: "ss01", "tnum";
  font-variant-numeric: tabular-nums;
}

/* Mono mini */
.mono { font-family: var(--font-mono); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 18px;
  border-radius: 999px;
  border: 0; cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600;
  letter-spacing: 0;
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.clay { background: var(--clay); color: white; }
.btn.ghost { background: var(--bone-2); color: var(--ink); }
.btn.outline { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn.full { width: 100%; }
.btn:active { transform: translateY(0.5px); }

/* Phase rail (Progress) */
.phase-rail {
  position: relative;
  padding: 0 24px;
}

/* Compliance ring */
.ring-wrap {
  position: relative;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* Video placeholder block */
.video-ph {
  background:
    repeating-linear-gradient(135deg,
      rgba(0,0,0,0.04) 0 1px, transparent 1px 8px),
    linear-gradient(160deg, #2a2722 0%, #3a342a 100%);
  color: rgba(255,255,255,0.6);
  display: flex; align-items: flex-end;
  position: relative;
  overflow: hidden;
}
.video-ph .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 999px;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.video-ph .play svg { margin-left: 3px; }
.video-ph .badge {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.4); backdrop-filter: blur(10px);
  padding: 4px 8px; border-radius: 6px;
}
.video-ph .duration {
  position: absolute; bottom: 12px; right: 12px;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.4);
  padding: 3px 7px; border-radius: 5px;
}

/* Image placeholder (for Matt) */
.img-ph {
  background:
    repeating-linear-gradient(135deg,
      rgba(184,92,56,0.05) 0 1px, transparent 1px 6px),
    linear-gradient(160deg, var(--clay-soft), var(--bone-2));
  color: var(--clay-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Streak flame container */
.streak-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform 0.12s ease;
}
.streak-cell:active { transform: scale(0.92); }
.streak-cell .day {
  font-family: var(--font-mono); font-size: 9px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.streak-cell .dot-day {
  width: 26px; height: 26px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bone-2); color: var(--muted-2);
  font-size: 11px; font-weight: 600;
}
.streak-cell.done .dot-day {
  background: var(--ink); color: white;
}
.streak-cell.today .dot-day {
  background: var(--clay); color: white;
  box-shadow: 0 0 0 4px rgba(184,92,56,0.18);
}
.streak-cell.miss .dot-day {
  background: transparent; border: 1px dashed var(--line-2);
}

/* Phase node */
.phase-node {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0;
  position: relative;
}
.phase-node .node-dot {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--bone-2); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  flex-shrink: 0;
  position: relative; z-index: 2;
}
.phase-node.done .node-dot { background: var(--sage); color: white; }
.phase-node.current .node-dot { background: var(--ink); color: white; box-shadow: 0 0 0 5px rgba(27,24,20,0.08); }
.phase-node .stem {
  position: absolute; left: 13px; top: 36px; bottom: -14px;
  width: 2px; background: var(--line);
}
.phase-node:last-child .stem { display: none; }
.phase-node.done .stem { background: var(--sage); }

/* Progress bar */
.prog-bar {
  height: 6px; border-radius: 999px;
  background: var(--bone-2);
  overflow: hidden;
}
.prog-bar > div {
  height: 100%;
  border-radius: 999px;
  background: var(--ink);
}
.prog-bar.sage > div { background: var(--sage); }
.prog-bar.clay > div { background: var(--clay); }

/* Chip nav */
.chip-row {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 0 22px 16px;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-row .chip {
  flex-shrink: 0;
  height: 32px; padding: 0 14px;
  display: flex; align-items: center; gap: 6px;
  border-radius: 999px;
  border: 0.5px solid var(--line-2);
  background: transparent;
  font-size: 13px; font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}
.chip-row .chip.active {
  background: var(--ink); color: white; border-color: var(--ink);
}

/* Bottom sheet */
.sheet-overlay {
  position: absolute; inset: 0;
  background: rgba(20,18,15,0.45);
  backdrop-filter: blur(2px);
  z-index: 40;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.sheet-overlay.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--paper);
  border-radius: 28px 28px 0 0;
  z-index: 41;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: 30px;
  max-height: 88%;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sheet.open { transform: translateY(0); }
.sheet .grabber {
  width: 36px; height: 5px; border-radius: 3px;
  background: var(--line-2);
  margin: 8px auto 6px;
}

/* Tier ladder */
.tier-step {
  display: flex; gap: 12px; padding: 16px;
  border-radius: var(--r-md);
  background: var(--bone-card);
  border: 1px solid var(--line);
}
.tier-step.active {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
}
.tier-step.next {
  border: 1.5px solid var(--clay);
  background: linear-gradient(180deg, #FFF5EE 0%, #FFFEFB 100%);
}

/* Animations */
@keyframes pop-in {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}
.pop { animation: pop-in 0.4s ease-out; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 0.4s ease-out; }

/* Compliance check anim */
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* Toast */
.toast-wrap {
  position: absolute; left: 16px; right: 16px; bottom: 96px;
  z-index: 50; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: rgba(27,24,20,0.94);
  backdrop-filter: blur(20px);
  color: white;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  animation: toast-in 0.32s cubic-bezier(0.32,0.72,0,1);
  display: flex; align-items: center; gap: 10px;
}
.toast.exit { animation: toast-out 0.28s ease-in forwards; }
.toast .ic {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--sage);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
@keyframes toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes toast-out {
  to { transform: translateY(20px); opacity: 0; }
}

@keyframes liveDot {
  0%   { box-shadow: 0 0 0 0 rgba(123, 168, 136, 0.55); opacity: 1; }
  70%  { box-shadow: 0 0 0 10px rgba(123, 168, 136, 0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(123, 168, 136, 0); opacity: 1; }
}

/* Reorder mode */
.reorder-handle {
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px;
  cursor: grab;
}
.reorder-handle span {
  width: 14px; height: 1.5px; background: var(--muted-2); border-radius: 2px;
}
.exrow.reorder { background: var(--bone-2); }
.exrow.dragging { opacity: 0.5; }

/* Generic */
.divider { height: 0.5px; background: var(--line); }
.row { display: flex; align-items: center; gap: 12px; }
.spread { display: flex; align-items: center; justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.px { padding-left: 22px; padding-right: 22px; }
.text-muted { color: var(--muted); }
.text-clay { color: var(--clay); }
.text-sage { color: var(--sage); }
.f-display { font-family: var(--font-display); }
.f-mono { font-family: var(--font-mono); }