/* ==========================================================================
   SMART SLATE PRO - GA-TI DESIGN SYSTEM SPECIFICATION
   Audio / Film Production Smart Slate & SMPTE Clapperboard
   
   Color Tokens:
   - Light Mode (Default):
       Background Base:     #FDFBF7 (Warm cream)
       Surface / Panels:    #F4F2EE (Slightly darker cream for contrast)
       Surface Elevated:    #FFFFFF (Pure white for floating dialogs)
       Borders:             #E5E2DC (Soft structural lines)
       Text Primary:        #2D2B2A (Charcoal, avoiding harsh pure black)
       Text Muted:          #6F6B68 (Deep taupe for secondary labels)
   - Dark Mode:
       Background Base:     #1E1D1C (Deep warm gray)
       Surface / Panels:    #2A2928
       Surface Elevated:    #353332
       Borders:             #454341
       Text Primary:        #EBE9E4
       Text Muted:          #969490
   - Semantic Accents (Pastels):
       Primary Action / Success:           #57877A (Muted Sage Green)
       Warning / Processing / Notes:       #D29E55 (Warm Ochre)
       Danger / Destructive / Peak Clip:   #C47463 (Muted Terracotta)
       Active Parameter (Knobs & Sliders): #8E9CA3 (Soft Slate Blue)
   - GaTi Scale Floors:
       Hit targets: minimum 44px on touch interfaces.
       Rotary/interactive controls: scale floor >= 48px touch.
       Corner radii: 4px (sm), 8px (md), 12px (lg), 24px (pill).
       Grid system: 8px base grid.
   ========================================================================== */

:root {
  /* Spatial Geometry & Grid Tokens */
  --grid-base: 8px;
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 24px;

  /* Typography Hierarchy */
  --font-serif: "Georgia", "Merriweather", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;

  /* Semantic Accents */
  --accent-sage: #57877A;
  --accent-ochre: #D29E55;
  --accent-terracotta: #C47463;
  --accent-slate: #8E9CA3;

  /* Touch Hit Target Floor */
  --touch-target-min: 44px;
}

/* ==========================================================================
   THEME DEFINITIONS: LIGHT (Default) & DARK
   ========================================================================== */

body.theme-light {
  --bg-base: #FDFBF7;
  --surface-panel: #F4F2EE;
  --surface-elevated: #FFFFFF;
  --surface-active: #E8E5DD;
  --border-subtle: #E5E2DC;
  --border-strong: #CDC9C0;
  --text-primary: #2D2B2A;
  --text-muted: #6F6B68;
  --text-dim: #9C9790;
  --tc-color: #2D2B2A;
  --tc-shadow: rgba(0, 0, 0, 0.08);
  --stick-stripe-white: #FFFFFF;
  --stick-stripe-black: #2D2B2A;
  --recessed-surface: #EDEAE4;
}

body.theme-dark {
  --bg-base: #1E1D1C;
  --surface-panel: #2A2928;
  --surface-elevated: #353332;
  --surface-active: #3F3D3B;
  --border-subtle: #454341;
  --border-strong: #5C5956;
  --text-primary: #EBE9E4;
  --text-muted: #969490;
  --text-dim: #706E6B;
  --tc-color: #EBE9E4;
  --tc-shadow: rgba(0, 0, 0, 0.5);
  --stick-stripe-white: #FDFBF7;
  --stick-stripe-black: #141312;
  --recessed-surface: #181716;
}

/* ==========================================================================
   RESET & TOUCH OPTIMIZATION FOR IPAD
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100vw;
  height: 100vh;
  /* Use dvh / svh to avoid iOS Safari dynamic browser bars */
  height: 100dvh;
  overflow: hidden;
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

/* ==========================================================================
   FULLSCREEN 1-FRAME VISUAL SYNC FLASH OVERLAY
   ========================================================================== */

.flash-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: #FFFFFF;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: none !important;
}

.flash-overlay.active {
  opacity: 1 !important;
}

/* ==========================================================================
   MAIN SLATE CONTAINER (IPAD ADAPTIVE CONTAINER)
   ========================================================================== */

.slate-container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: var(--bg-base);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: center center;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* 180° Tail Slate Flip */
.slate-container.tail-slate-active {
  transform: rotate(180deg);
}

/* TAIL SLATE BANNER */
.tail-slate-banner {
  display: none;
  background-color: var(--accent-terracotta);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 20px;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.slate-container.tail-slate-active .tail-slate-banner {
  display: flex;
}

.tail-sub {
  font-size: 11px;
  letter-spacing: 1px;
  opacity: 0.95;
}

/* M.O.S. DIAGONAL BADGE */
.mos-ribbon {
  display: none;
  position: absolute;
  top: 45%;
  left: -20%;
  width: 140%;
  height: 72px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(196, 116, 99, 0.95),
    rgba(196, 116, 99, 0.95) 20px,
    rgba(168, 86, 70, 0.98) 20px,
    rgba(168, 86, 70, 0.98) 40px
  );
  transform: rotate(-16deg);
  z-index: 80;
  pointer-events: none;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  border-top: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  justify-content: center;
  align-items: center;
}

.slate-container.mos-active .mos-ribbon {
  display: flex;
}

.mos-inner {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 6px;
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* ==========================================================================
   TOP CLAPPER STICKS (ANIMATED CHEVRONS & SNAP)
   ========================================================================== */

.clapper-stick-area {
  position: relative;
  width: 100%;
  height: 84px;
  background-color: var(--stick-stripe-black);
  cursor: pointer;
  flex-shrink: 0;
  border-bottom: 2px solid var(--border-strong);
  overflow: visible;
  touch-action: manipulation;
}

/* Hinge Pin on Top Left */
.stick-hinge-pin {
  position: absolute;
  top: 16px;
  left: 20px;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle, #E5E2DC 30%, #969490 70%, #2A2928 100%);
  border-radius: 50%;
  z-index: 50;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  border: 1px solid var(--border-strong);
}

.clapper-stick {
  width: 100%;
  height: 41px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Top Stick with Hinge Rotation */
.clapper-top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  border-bottom: 1.5px solid var(--border-strong);
  transform-origin: 29px 25px;
  transition: transform 0.12s cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* Clap Open State */
.clapper-stick-area.clapping .clapper-top {
  animation: clapperSnap 0.22s ease-in-out;
}

@keyframes clapperSnap {
  0% {
    transform: rotate(0deg);
  }
  35% {
    transform: rotate(-18deg);
  }
  80% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.clapper-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
}

/* Authentic Chevron Pattern (Diagonal Stripes) */
.chevron-stripes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--stick-stripe-white),
    var(--stick-stripe-white) 32px,
    var(--stick-stripe-black) 32px,
    var(--stick-stripe-black) 64px
  );
}

.chevron-stripes.inverted {
  background: repeating-linear-gradient(
    -45deg,
    var(--stick-stripe-white),
    var(--stick-stripe-white) 32px,
    var(--stick-stripe-black) 32px,
    var(--stick-stripe-black) 64px
  );
}

.stick-label, .stick-meta {
  position: relative;
  z-index: 5;
  background-color: var(--surface-panel);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  padding: 4px 12px;
  margin-left: 56px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.stick-meta {
  font-size: 10px;
  color: var(--text-muted);
}

/* ==========================================================================
   SLATE BODY
   ========================================================================== */

.slate-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--gap-md) var(--gap-lg);
  gap: var(--gap-md);
  overflow: hidden;
}

/* ==========================================================================
   HEADER ROW: PRODUCTION, DIRECTOR, DOP, DATE
   ========================================================================== */

.slate-header-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr 1.3fr;
  gap: var(--gap-md);
  background-color: var(--surface-panel);
  padding: 10px var(--gap-md);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-subtle);
  border-left: 5px solid var(--accent-slate);
  flex-shrink: 0;
}

.meta-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meta-field label, .card-label, .group-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.production-field label {
  color: var(--accent-slate);
}

.slate-input {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.5px;
  outline: none;
  padding: 4px 0;
  min-height: 36px;
  transition: border-color 0.15s ease;
}

.slate-input:focus {
  border-bottom-color: var(--accent-sage);
}

.date-field label {
  color: var(--accent-ochre);
}

.date-input {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text-primary);
  cursor: pointer;
  min-height: 36px;
}

/* ==========================================================================
   PRIMARY GRID: ROLL, SCENE, TAKE (HIGH CONTRAST & DISTANT VISIBILITY)
   ========================================================================== */

.slate-primary-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1.7fr;
  gap: var(--gap-md);
  flex: 1;
  min-height: 160px;
}

.grid-card {
  background-color: var(--surface-panel);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 12px var(--gap-md) 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

/* Color Accent Bars for Primary Cards */
.roll-card {
  border-top: 5px solid var(--accent-slate);
}
.roll-card .card-label {
  color: var(--accent-slate);
}

.scene-card {
  border-top: 5px solid var(--accent-ochre);
}
.scene-card .card-label {
  color: var(--accent-ochre);
}

.take-card {
  border-top: 5px solid var(--accent-sage);
  background: linear-gradient(180deg, var(--surface-panel) 0%, rgba(87, 135, 122, 0.06) 100%);
}
.take-card .card-label {
  color: var(--accent-sage);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.card-header-right {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.lock-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  background-color: var(--surface-elevated);
  transition: all 0.2s ease;
}

.locked-field .lock-badge {
  color: var(--accent-ochre);
  border-color: var(--accent-ochre);
  background: rgba(210, 158, 85, 0.12);
}

.locked-field.unlocked .lock-badge {
  color: #FFFFFF;
  border-color: var(--accent-sage);
  background: var(--accent-sage);
}

.card-lock-hint {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-top: 2px;
  transition: opacity 0.2s ease, color 0.2s ease;
  position: relative;
  z-index: 2;
}

.locked-field.unlocked .card-lock-hint {
  color: var(--accent-sage);
}

/* Hold-to-unlock progress overlay per card */
.card-hold-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: rgba(210, 158, 85, 0.18);
  pointer-events: none;
  transition: width 0.04s linear;
  z-index: 1;
}

.locked-field.holding {
  border-color: var(--accent-ochre) !important;
  box-shadow: 0 0 16px rgba(210, 158, 85, 0.25);
}

.locked-field.unlocked {
  border-color: var(--accent-sage) !important;
  box-shadow: 0 0 16px rgba(87, 135, 122, 0.3);
}

.locked-field.unlocked .card-hold-progress {
  display: none;
}

/* Readonly vs Editable visual distinction */
.grid-card.locked-field input[readonly] {
  cursor: pointer;
  user-select: none;
}

.grid-card.locked-field.unlocked input {
  cursor: text;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
}

/* Disabled stepper styling when field is locked */
.mini-step-btn:disabled, .large-step-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed !important;
  pointer-events: none;
}

.card-quick-actions {
  display: flex;
  gap: var(--gap-xs);
  position: relative;
  z-index: 2;
}

/* iPad Touch Compliant Steppers (Scale Floor >= 44px) */
.mini-step-btn {
  background-color: var(--surface-elevated);
  border: 1.5px solid var(--border-subtle);
  color: var(--text-primary);
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  touch-action: manipulation;
}

.mini-step-btn:hover {
  background-color: var(--surface-active);
  border-color: var(--accent-slate);
  color: var(--accent-slate);
}

.mini-step-btn:active {
  transform: scale(0.94);
}

.card-display {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin-top: var(--gap-xs);
}

.grid-input {
  width: 100%;
  background: transparent;
  border: none;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 68px;
  font-weight: 900;
  color: var(--text-primary);
  outline: none;
  letter-spacing: 3px;
  text-shadow: 0 2px 4px var(--tc-shadow);
}

.roll-card .grid-input {
  color: var(--text-primary);
}

.scene-card .grid-input {
  color: var(--text-primary);
}

.take-status-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #FFFFFF;
  background: var(--accent-sage);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px rgba(87, 135, 122, 0.35);
}

.take-status-tag.ft-tag {
  color: #FFFFFF;
  background: var(--accent-terracotta);
  box-shadow: 0 2px 6px rgba(196, 116, 99, 0.4);
}

.take-display-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  width: 100%;
}

.take-input {
  font-size: 80px;
  font-weight: 900;
  max-width: 220px;
  color: var(--text-primary);
}

body.theme-light .take-input {
  color: #1e3d34;
}

body.theme-dark .take-input {
  color: #8ed6c0;
}

.take-input::-webkit-outer-spin-button,
.take-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.take-input[type=number] {
  -moz-appearance: textfield;
}

/* Large Steppers for iPad One-Handed Operation */
.large-step-btn {
  background-color: var(--surface-elevated);
  border: 2px solid var(--border-subtle);
  color: var(--text-primary);
  width: 60px;
  height: 60px;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  border-radius: var(--radius-md);
  font-size: 34px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  touch-action: manipulation;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.large-step-btn:hover {
  background-color: var(--surface-active);
  border-color: var(--accent-sage);
  color: var(--accent-sage);
}

.large-step-btn:active {
  transform: scale(0.94);
  background-color: var(--surface-active);
}

/* ==========================================================================
   TIMECODE SECTION (SMPTE RUNNER - HIGH INTENSITY DISPLAY)
   ========================================================================== */

.timecode-section {
  background: linear-gradient(180deg, var(--surface-panel) 0%, var(--surface-panel) 100%);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 12px var(--gap-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.tc-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}

.tc-mode-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--accent-slate);
}

.pill-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--accent-sage);
  box-shadow: 0 0 8px var(--accent-sage);
  transition: background-color 0.2s, box-shadow 0.2s;
}

.pill-indicator.running {
  background-color: var(--accent-sage);
  box-shadow: 0 0 10px var(--accent-sage);
  animation: pulse-dot 1.5s infinite ease-in-out;
}

.pill-indicator.paused {
  background-color: var(--accent-ochre);
  box-shadow: 0 0 8px var(--accent-ochre);
  animation: none;
}

.pill-indicator.stopped {
  background-color: var(--accent-terracotta);
  box-shadow: 0 0 8px var(--accent-terracotta);
  animation: none;
}

@keyframes pulse-dot {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}

.tc-fps-indicator {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 13px;
}

.tc-fps-indicator #tc-fps-val {
  color: var(--accent-ochre);
  font-weight: 800;
}

.tc-fps-indicator #tc-df-val {
  color: var(--text-primary);
  font-weight: 800;
}

.tc-sync-beacon {
  color: #FFFFFF;
  background-color: var(--accent-sage);
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  letter-spacing: 1.5px;
  box-shadow: 0 2px 6px rgba(87, 135, 122, 0.35);
}

/* SMPTE Digits Display - Massive, Ultra-Bold, Distant Legibility */
.tc-display-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  background-color: var(--recessed-surface);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-subtle);
}

.tc-digits {
  font-family: var(--font-mono);
  font-size: 88px;
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--tc-color);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 3px 12px var(--tc-shadow);
}

body.theme-dark .tc-digits {
  color: #F8F9FA;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.12), 0 3px 12px rgba(0, 0, 0, 0.7);
}

body.theme-light .tc-digits {
  color: #171615;
}

.tc-sub-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 620px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-slate);
  letter-spacing: 3px;
  margin-top: 6px;
  padding: 0 20px;
}

.tc-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1.5px solid var(--border-subtle);
}

.tc-mode-toggles, .tc-manual-actions {
  display: flex;
  gap: var(--gap-sm);
}

.btn-tc-mode, .btn-tc-action {
  background-color: var(--surface-elevated);
  border: 1.5px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 8px 16px;
  min-height: 38px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
}

.btn-tc-mode.active {
  background-color: var(--surface-active);
  color: var(--text-primary);
  border-color: var(--accent-sage);
  font-weight: 800;
  box-shadow: inset 0 -2px 0 var(--accent-sage);
}

.btn-tc-action {
  color: var(--text-primary);
  font-weight: 800;
}

.btn-tc-action:hover {
  background-color: var(--surface-active);
  border-color: var(--accent-ochre);
}

/* ==========================================================================
   PRODUCTION FLAGS & SETTINGS ROW (COLOR ACCENTED)
   ========================================================================== */

.slate-flags-row {
  display: flex;
  gap: var(--gap-md);
  align-items: center;
  background-color: var(--surface-panel);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px var(--gap-md);
  flex-shrink: 0;
}

.flag-group {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.group-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-slate);
}

.toggle-pair {
  display: flex;
  background-color: var(--surface-elevated);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-subtle);
  overflow: hidden;
}

.flag-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 8px 18px;
  min-height: var(--touch-target-min);
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
}

.flag-btn.active {
  background-color: var(--surface-active);
  color: var(--text-primary);
  box-shadow: inset 0 -3px 0 var(--accent-sage);
}

#flag-int.active {
  color: var(--accent-slate);
  box-shadow: inset 0 -3px 0 var(--accent-slate);
}

#flag-ext.active {
  color: var(--accent-ochre);
  box-shadow: inset 0 -3px 0 var(--accent-ochre);
}

#flag-day.active {
  color: var(--accent-ochre);
  box-shadow: inset 0 -3px 0 var(--accent-ochre);
}

#flag-night.active {
  color: var(--accent-slate);
  box-shadow: inset 0 -3px 0 var(--accent-slate);
}

#flag-sync.active {
  color: var(--accent-sage);
  box-shadow: inset 0 -3px 0 var(--accent-sage);
}

#flag-mos.active {
  background-color: rgba(196, 116, 99, 0.15);
  color: var(--accent-terracotta);
  font-weight: 900;
  box-shadow: inset 0 -3px 0 var(--accent-terracotta);
}

.slate-select {
  background-color: var(--surface-elevated);
  border: 1.5px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  padding: 6px 12px;
  min-height: var(--touch-target-min);
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
}

.slate-select:focus {
  border-color: var(--accent-ochre);
}

.flag-filter-group {
  flex: 1;
}

.filter-input {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  border-bottom: 2px solid var(--border-subtle);
  padding: 4px 8px;
}

.filter-input:focus {
  border-bottom-color: var(--accent-slate);
}

/* ==========================================================================
   FOOTER UTILITIES TOOLBAR (HIT TARGET FLOOR >= 44px)
   ========================================================================== */

.slate-footer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0 2px;
  flex-shrink: 0;
}

.utility-left, .utility-right {
  display: flex;
  gap: var(--gap-sm);
  align-items: center;
}

.util-btn {
  background-color: var(--surface-panel);
  border: 1.5px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 10px 16px;
  min-height: var(--touch-target-min);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
  touch-action: manipulation;
}

.util-btn:hover {
  background-color: var(--surface-elevated);
  border-color: var(--border-strong);
}

.util-btn:active {
  transform: translateY(1px);
}

.util-primary {
  background-color: var(--accent-sage);
  color: #FFFFFF;
  border-color: var(--accent-sage);
  box-shadow: 0 2px 6px rgba(87, 135, 122, 0.3);
}

.util-primary:hover {
  background-color: #487267;
}

.util-tail.active {
  background-color: var(--accent-terracotta);
  color: #FFFFFF;
  border-color: var(--accent-terracotta);
}

.util-ft {
  color: var(--accent-ochre);
}

.util-danger {
  color: var(--accent-terracotta);
  border-color: rgba(196, 116, 99, 0.4);
}

.util-hold-clear {
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.util-hold-clear.holding {
  border-color: var(--accent-terracotta);
  background-color: var(--surface-active);
}

.hold-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: rgba(196, 116, 99, 0.4);
  pointer-events: none;
  transition: width 0.05s linear;
  z-index: 1;
}

.hold-text {
  position: relative;
  z-index: 2;
  font-weight: 800;
  letter-spacing: 1px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-dim);
}

.wakelock-dot.active {
  background-color: var(--accent-sage);
}

/* ==========================================================================
   SHOT LOGGER MODAL / DRAWER
   ========================================================================== */

.modal-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 1000;
  display: none;
}

.modal-drawer.open {
  display: flex;
}

.drawer-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}

.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 840px;
  max-width: 90vw;
  height: 100%;
  height: 100dvh;
  background-color: var(--bg-base);
  border-left: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  z-index: 10;
  box-shadow: -8px 0 24px rgba(0,0,0,0.2);
  animation: slideDrawer 0.22s ease-out;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

@keyframes slideDrawer {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gap-md) var(--gap-lg);
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--surface-panel);
}

.drawer-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.drawer-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}

.drawer-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 28px;
  line-height: 1;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-actions-bar {
  display: flex;
  gap: var(--gap-sm);
  align-items: center;
  padding: var(--gap-sm) var(--gap-lg);
  background-color: var(--surface-elevated);
  border-bottom: 1px solid var(--border-subtle);
}

.log-action-btn {
  background-color: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 8px 14px;
  min-height: var(--touch-target-min);
  border-radius: var(--radius-sm);
  cursor: pointer;
  touch-action: manipulation;
}

.btn-export-csv {
  background-color: var(--accent-sage);
  color: #FFFFFF;
  border-color: var(--accent-sage);
}

.log-stats {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.drawer-table-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: var(--gap-sm) var(--gap-lg);
}

.shot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: var(--font-mono);
}

.shot-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong);
  background-color: var(--bg-base);
  position: sticky;
  top: 0;
}

.shot-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.shot-table tr:hover {
  background-color: var(--surface-panel);
}

.shot-table tr.row-ft {
  background-color: rgba(196, 116, 99, 0.08);
}

.shot-table tr.row-ft td:first-child {
  border-left: 3px solid var(--accent-terracotta);
}

/* ==========================================================================
   ABOUT MODAL DIALOG (GaTi Design System Specification)
   ========================================================================== */

.modal-center {
  align-items: center;
  justify-content: center;
}

.modal-card {
  position: relative;
  z-index: 10;
  width: 520px;
  max-width: 90vw;
  background-color: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 36px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeInModal 0.2s ease-out;
}

@keyframes fadeInModal {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.card-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gap-md) var(--gap-lg);
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--surface-panel);
}

.modal-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.version-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-sage);
  background: rgba(87, 135, 122, 0.12);
  border: 1px solid var(--accent-sage);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.modal-body-content {
  padding: var(--gap-lg);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.modal-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.spec-list {
  background-color: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--gap-sm) var(--gap-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.spec-item {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
}

.spec-label {
  color: var(--text-muted);
}

.spec-val {
  color: var(--text-primary);
  font-weight: 600;
}

.about-dev-section {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about-link {
  color: var(--accent-sage);
  text-decoration: none;
}

.about-link:hover {
  text-decoration: underline;
}

.about-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap-sm);
  margin-top: var(--gap-xs);
}

.about-btn {
  text-align: center;
  background-color: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 10px 12px;
  min-height: var(--touch-target-min);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-btn:hover {
  background-color: var(--surface-active);
  border-color: var(--border-strong);
}

.donate-btn {
  color: var(--accent-ochre);
}

.store-btn {
  color: var(--accent-sage);
}

.modal-footer {
  padding: var(--gap-md) var(--gap-lg);
  border-top: 1px solid var(--border-subtle);
  background-color: var(--surface-panel);
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   IPAD & TABLET ADAPTATIONS (4:3, 10.2", 11", 12.9" Pro)
   ========================================================================== */

/* iPad Landscape (1024x768, 1194x834, 1366x1024) */
@media screen and (min-width: 768px) and (max-width: 1366px) {
  .slate-body {
    padding: var(--gap-md) var(--gap-lg);
    gap: var(--gap-md);
  }

  .grid-input {
    font-size: 72px;
  }

  .take-input {
    font-size: 86px;
  }

  .tc-digits {
    font-size: 96px;
  }
}

/* Compact Height devices (Landscape mobile or iPad split-view) */
@media (max-height: 640px) {
  .clapper-stick-area {
    height: 64px;
  }
  .clapper-stick {
    height: 32px;
  }
  .tc-digits {
    font-size: 58px;
  }
  .grid-input {
    font-size: 48px;
  }
  .take-input {
    font-size: 58px;
  }
  .large-step-btn {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    font-size: 26px;
  }
  .slate-body {
    padding: var(--gap-xs) var(--gap-sm);
    gap: var(--gap-xs);
  }
  .timecode-section {
    padding: var(--gap-xs) var(--gap-md);
  }
}

@media (max-width: 768px) {
  .slate-header-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
  }
  .slate-flags-row {
    flex-wrap: wrap;
    gap: var(--gap-sm);
  }
  .tc-digits {
    font-size: 54px;
  }
}