/**
 * Range Card - Combined Styles for KNOMAD Integration
 *
 * Single CSS file containing all Range Card styling:
 * - Core paper card appearance
 * - Target grids and overlays
 * - Handwritten notes
 * - Compare modal
 * - Coaching panel
 *
 * @version 1.0.0
 * @author Black Team LLC
 */

/* ========== CSS VARIABLES ========== */
:root {
  /* Paper & Ink Colors */
  --paper-bg: #f5f0dc;
  --paper-bg-alt: #ebe6d2;
  --paper-grid: rgba(180, 195, 210, 0.3);
  --paper-border: rgba(80, 70, 60, 0.4);
  --paper-shadow: rgba(60, 50, 40, 0.15);
  --ink-black: #1a1a1a;
  --ink-blue: #1a3a5c;
  --ink-pencil: #3a3a3a;
  --ink-faded: rgba(30, 30, 30, 0.7);
  --ink-red: #8b0000;

  /* Font Families */
  --font-handwriting: 'Caveat', cursive;
  --font-form: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Scaling factor - updated by JS on resize */
  --rc-scale: 1;

  /* ========== TYPOGRAPHY SCALE ========== */
  /* Handwriting sizes (scaled with card) - User-entered data */
  --hw-xl: calc(18px * var(--rc-scale));   /* Session title, header inputs */
  --hw-lg: calc(14px * var(--rc-scale));   /* Env inputs, target notes, data fields */
  --hw-md: calc(12px * var(--rc-scale));   /* Secondary notes, corrections */
  --hw-sm: calc(10px * var(--rc-scale));   /* Math work, small annotations */
  --hw-xs: calc(9px * var(--rc-scale));    /* Shot labels, compare notes */

  /* Form label sizes (fixed) - Printed on the form */
  --label-lg: 11px;                         /* Header/env field labels */
  --label-md: 9px;                          /* Target data labels (min) */
  --label-sm: 8px;                          /* Units, footer labels */
  --label-xs: 7px;                          /* Grid info, metadata */
}

/* ========== DA DELTA BANNER ========== */
.da-delta-banner {
  background: linear-gradient(135deg, #1a3a5c 0%, #0d2137 100%);
  padding: 8px 12px;
  border-bottom: 2px solid rgba(255, 200, 0, 0.3);
}

.da-delta-banner__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #fff;
}

.da-delta-banner__label {
  color: rgba(255, 255, 255, 0.7);
}

.da-delta-banner__value {
  font-weight: 600;
  color: #fff;
}

.da-delta-banner__value--current {
  color: #00E5FF;
}

.da-delta-banner__separator {
  color: rgba(255, 255, 255, 0.4);
}

.da-delta-banner__delta {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
}

.da-delta-banner__delta--pos {
  background: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
}

.da-delta-banner__delta--neg {
  background: rgba(244, 67, 54, 0.2);
  color: #F44336;
}

.da-delta-banner__delta--zero {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

/* ========== RC-007: OFFLINE ESTIMATE STYLES ========== */
.da-delta-banner--offline {
  background: linear-gradient(135deg, #5c4a1a 0%, #3d310d 100%);
  border-bottom-color: rgba(255, 200, 0, 0.5);
}

.da-delta-banner__offline {
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 200, 0, 0.2);
  color: #FFD700;
  font-size: 10px;
  font-weight: 600;
  font-style: italic;
  margin-left: 8px;
}

.offline-estimate-label {
  display: block;
  font-size: 9px;
  color: #b45309;
  font-style: italic;
  margin-top: 2px;
  text-align: center;
}

.has-offline-estimate {
  border-bottom-color: #b45309 !important;
  border-bottom-style: dashed !important;
}

.has-offline-estimate::after {
  content: '≈';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #b45309;
}

/* ========== TARGET DELTA DISPLAY ========== */
.target-delta-display {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
}

.target-delta-display__baseline {
  color: var(--ink-pencil, #3a3a3a);
  font-weight: 500;
}

.target-delta-display__delta {
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 10px;
}

.target-delta-display__delta--pos {
  background: rgba(76, 175, 80, 0.15);
  color: #2E7D32;
}

.target-delta-display__delta--neg {
  background: rgba(244, 67, 54, 0.15);
  color: #C62828;
}

.target-delta-display__delta--zero {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.4);
}

/* ========== PROFILE TYPE BADGES ========== */
.profile-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-type-badge--calibrated {
  background: linear-gradient(135deg, #1a5f1a 0%, #0d3d0d 100%);
  color: #90EE90;
  border: 1px solid rgba(144, 238, 144, 0.3);
}

.profile-type-badge--field_zero {
  background: linear-gradient(135deg, #1a3a5c 0%, #0d2137 100%);
  color: #87CEEB;
  border: 1px solid rgba(135, 206, 235, 0.3);
}

.profile-type-badge--training {
  background: rgba(128, 128, 128, 0.2);
  color: #888;
  border: 1px solid rgba(128, 128, 128, 0.3);
}

.profile-type-badge--g2 {
  background: linear-gradient(135deg, #5c3a1a 0%, #37210d 100%);
  color: #DEB887;
  border: 1px solid rgba(222, 184, 135, 0.3);
}

/* ========== PROTECTION DIALOG ========== */
.profile-protection-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.profile-protection-dialog {
  background: linear-gradient(180deg, #1a1a2e 0%, #0d0d1a 100%);
  border-radius: 12px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 200, 0, 0.2);
  overflow: hidden;
}

.profile-protection-dialog__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #2a1a0a 0%, #1a1000 100%);
  border-bottom: 1px solid rgba(255, 200, 0, 0.2);
}

.profile-protection-dialog__icon {
  font-size: 24px;
}

.profile-protection-dialog__header h3 {
  margin: 0;
  color: #FFD700;
  font-size: 16px;
  font-weight: 600;
}

.profile-protection-dialog__body {
  padding: 20px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.6;
}

.profile-protection-dialog__body p {
  margin: 0 0 16px 0;
}

.profile-protection-dialog__profile-name {
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 14px;
  border-radius: 6px;
  border-left: 3px solid #FFD700;
  color: #fff;
}

.profile-protection-dialog__actions {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-protection-dialog__actions button {
  flex: 1;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-protection-dialog__actions .btn-cancel {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
}

.profile-protection-dialog__actions .btn-cancel:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.profile-protection-dialog__actions .btn-create-variant {
  background: linear-gradient(135deg, #1a5f1a 0%, #0d3d0d 100%);
  border: 1px solid rgba(144, 238, 144, 0.3);
  color: #90EE90;
}

.profile-protection-dialog__actions .btn-create-variant:hover {
  background: linear-gradient(135deg, #2a7f2a 0%, #1a5f1a 100%);
}

/* ========== SAVE AS ZERO MENU ITEM ========== */
.kebab-item--zero {
  background: linear-gradient(135deg, rgba(26, 95, 26, 0.2) 0%, rgba(13, 61, 13, 0.2) 100%);
  border-left: 3px solid #4CAF50;
  font-weight: 600;
}

.kebab-item--zero:hover {
  background: linear-gradient(135deg, rgba(26, 95, 26, 0.4) 0%, rgba(13, 61, 13, 0.4) 100%);
}

/* Kebab section for grouped content */
.kebab-section {
  padding: 8px 12px;
}

.kebab-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-pencil, #5a5040);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 6px;
}

.kebab-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  font-size: 13px;
}

.kebab-mode input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink-pencil, #5a5040);
  border-radius: 50%;
  margin: 0;
  cursor: pointer;
}
.kebab-mode input[type="radio"]:checked {
  border-color: var(--ink-blue, #1a3a5c);
  background: var(--ink-blue, #1a3a5c);
}

/* Target menu label and modes */
.target-menu-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-pencil, #5a5040);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 12px 2px;
}

.target-menu-modes {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 4px 12px 8px;
}

.target-menu-mode {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 16px;
}

.target-menu-mode input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink-pencil, #5a5040);
  border-radius: 50%;
  margin: 0;
  cursor: pointer;
}
.target-menu-mode input[type="radio"]:checked {
  border-color: var(--ink-blue, #1a3a5c);
  background: var(--ink-blue, #1a3a5c);
}

/* ========== HAMBURGER MENU (3-line, LEFT side) ========== */
.hamburger-menu {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 8px;
  z-index: 500;
}

/* Mobile: ensure hamburger is visible in safe area */
.mobile-app .range-card .hamburger-menu {
  left: 12px;
}

.hamburger-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0.85;
  transition: opacity 0.2s;
  align-items: center;
  justify-content: center;
}
.hamburger-btn:hover {
  opacity: 1;
}

.hamburger-line {
  width: 18px;
  height: 2.5px;
  background: var(--ink-black, #1a1a1a);
  border-radius: 1px;
}

.hamburger-dropdown {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 8px;
  top: 44px;
  background: var(--paper-bg, #f5f0dc);
  border: 1px solid var(--paper-border, rgba(80,70,60,0.3));
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  min-width: 200px;
  overflow: hidden;
}
.hamburger-dropdown.open {
  display: block;
}

.hamburger-section {
  padding: 10px 14px;
  border-bottom: 1px solid var(--paper-border, rgba(80,70,60,0.15));
}
.hamburger-section:last-of-type {
  border-bottom: none;
}

.hamburger-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-pencil, #5a5040);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 4px;
}

.hamburger-section .session-title {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(0,0,0,0.15);
  font-family: var(--font-handwriting, Georgia, serif);
  font-size: 14px;
  color: var(--ink-blue, #1a3a5c);
  padding: 4px 0;
}

.hamburger-section .header-counts {
  font-family: var(--font-handwriting, Georgia, serif);
  font-size: 16px;
  color: var(--ink-pencil, #5a5040);
}
.hamburger-section .header-counts .count-value {
  color: var(--ink-blue, #1a3a5c);
  font-weight: 500;
}

.hamburger-divider {
  height: 1px;
  background: var(--paper-border, rgba(80,70,60,0.2));
  margin: 0;
}

.hamburger-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-body, sans-serif);
  font-size: 13px;
  color: var(--ink-black, #1a1a1a);
  cursor: pointer;
  transition: background 0.15s;
}
.hamburger-item:hover {
  background: var(--paper-bg-alt, #ebe6d3);
}

/* Mode selection in hamburger */
.hamburger-mode-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hamburger-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.hamburger-mode:hover {
  background: var(--paper-bg-alt, #ebe6d3);
}

.hamburger-mode input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink-pencil, #5a5040);
  border-radius: 50%;
  margin: 0;
  position: relative;
  cursor: pointer;
}
.hamburger-mode input[type="radio"]:checked {
  border-color: var(--ink-blue, #1a3a5c);
  background: var(--ink-blue, #1a3a5c);
}
.hamburger-mode input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
}

.hamburger-mode span {
  font-size: 13px;
  color: var(--ink-black, #1a1a1a);
}

/* Mode badge next to hamburger */
.rc-mode-badge {
  font-size: 14px;
  margin-left: 4px;
  opacity: 0.8;
}

/* Compact header layout */
.card-header--compact {
  min-height: 36px;
  padding: 4px 40px;
  justify-content: center;
}

/* Hide mobile distance tabs - use per-target dropdown instead */
.mobile-target-selector {
  display: none;
}

/* RC header menus visible on mobile */

/* Minimal RC header on mobile */
.mobile-app .range-card > .card-header {
  min-height: 32px;
  padding: 4px 12px 4px 8px;
}

/* Compact target header */
.mobile-app .target-header {
  padding: 4px 8px;
  min-height: 28px;
}

/* ========== KEBAB MENU (3-dot) ========== */
.kebab-menu {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  z-index: 500;
}

.kebab-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2.5px;
  opacity: 0.85;
  transition: opacity 0.2s;
  align-items: center;
  justify-content: center;
}

.kebab-btn:hover {
  opacity: 1;
}

.kebab-dot {
  width: 3.5px;
  height: 3.5px;
  background: var(--ink-black);
  border-radius: 50%;
}

/* Mobile: ensure kebab is clearly visible */
.mobile-app .kebab-menu {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 500;
  transform: none;
}
.mobile-app .kebab-btn {
  opacity: 0.85;
}
.mobile-app .kebab-dot {
  width: 3.5px;
  height: 3.5px;
}

.kebab-dropdown {
  display: none;
  position: fixed;
  z-index: 10000;
  background: #fff;
  border: 1px solid var(--paper-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 180px;
  overflow: hidden;
}

.kebab-dropdown.open {
  display: block;
}

.kebab-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--ink-black);
  cursor: pointer;
  transition: background 0.15s;
}

.kebab-item:hover {
  background: var(--paper-bg-alt);
}
.kebab-item--danger {
  color: var(--ink-red);
}

/* Suppressed toggle in kebab menu */
.kebab-item--toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.kebab-item--toggle input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--paper-border);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.kebab-item--toggle input[type="checkbox"]:checked {
  border-color: var(--ink-blue);
  background: var(--ink-blue);
}

.kebab-item--toggle input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: #fff;
  line-height: 1;
}

.kebab-divider {
  height: 1px;
  background: var(--paper-border);
  margin: 4px 0;
}

/* Auto-populated indicator */
.auto-filled {
  position: relative;
}

.auto-filled::after {
  content: '*';
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  opacity: 0.5;
}

/* ========== RANGE CARD CONTAINER ========== */
.range-card {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 280px; /* Reduced to allow more compression */
  box-sizing: border-box;
  background: var(--paper-bg);
  resize: none;
  background-image:
    radial-gradient(ellipse at top left, rgba(139, 119, 90, 0.12) 0%, transparent 35%),
    radial-gradient(ellipse at top right, rgba(139, 119, 90, 0.08) 0%, transparent 30%),
    radial-gradient(ellipse at bottom left, rgba(139, 119, 90, 0.09) 0%, transparent 32%),
    radial-gradient(ellipse at bottom right, rgba(139, 119, 90, 0.14) 0%, transparent 40%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 23px,
      var(--paper-grid) 23px,
      var(--paper-grid) 24px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 23px,
      var(--paper-grid) 23px,
      var(--paper-grid) 24px
    );
  border: 1px solid var(--paper-border);
  border-radius: 8px;
  box-shadow:
    2px 3px 12px var(--paper-shadow),
    inset 0 0 60px rgba(0, 0, 0, 0.03),
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 0 0 1px rgba(0, 0, 0, 0.04);
  font-family: var(--font-form);
  color: var(--ink-black);
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* KNOMAD watermark */
.range-card::before {
  content: 'KNOMAD';
  position: absolute;
  bottom: 8px;
  left: 12px;
  font-family: var(--font-form);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(0, 0, 0, 0.06);
  pointer-events: none;
  z-index: 50;
}

/* Oracle spade watermark */
.range-card::after {
  content: '';
  position: absolute;
  top: -33%;
  right: -33%;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='90' fill='%236b7c4a' stroke='%23000000' stroke-width='6' opacity='0.025'/%3E%3Cpath d='M100 50 C90 62 78 76 66 92 C54 108 50 118 54 130 C58 142 70 148 82 146 C78 152 76 158 84 162 L100 162 L116 162 C124 158 122 152 118 146 C130 148 142 142 146 130 C150 118 146 108 134 92 C122 76 110 62 100 50 Z' fill='%23000000' stroke='%23c1272d' stroke-width='4' opacity='0.025'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 50;
  transform: rotate(-8deg);
}

/* ========== HEADER ROW ========== */
.card-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 10px;
  background: var(--paper-bg-alt);
  border-bottom: 1px solid var(--paper-border);
  min-height: 24px;
}

/* Compact round counter: session/lifetime format */
.header-counts {
  font-family: var(--font-handwriting);
  font-size: var(--hw-md);
  color: var(--ink-pencil);
  white-space: nowrap;
}

.header-counts .count-value {
  color: var(--ink-blue);
  font-weight: 500;
}

.session-title {
  flex: 1;
  text-align: center;
  min-width: 0;
  max-width: 300px;
}

.card-header input {
  background: transparent;
  border: none;
  font-family: var(--font-handwriting);
  font-size: var(--hw-xl);
  color: var(--ink-blue);
  outline: none;
  padding: 2px 0;
}

.card-header input::placeholder {
  color: var(--ink-faded);
  font-size: var(--hw-lg);
}

.header-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-field label {
  font-size: var(--label-lg);
  font-weight: 600;
  color: var(--ink-pencil);
  text-transform: uppercase;
}

.header-field input {
  width: 100px;
  font-size: var(--hw-lg);
}

.header-field input.input-mv {
  width: 50px;
}

.header-field.header-rounds {
  background: rgba(0, 0, 0, 0.03);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px dashed rgba(0, 0, 0, 0.1);
}

.header-field.header-rounds input {
  width: 50px;
  text-align: center;
  font-size: var(--hw-lg);
}

.header-field.header-rounds .unit {
  font-size: var(--label-sm);
  color: var(--ink-faded);
}

/* ========== ENV-BAR TOGGLE BUTTON ========== */
.env-toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 10px;
  color: var(--ink-pencil, #5a5040);
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
  line-height: 1;
}
.env-toggle-btn:hover {
  opacity: 1;
}
.env-toggle-chevron {
  display: inline-block;
  transition: transform 0.25s ease;
}
.env-toggle-btn.env-toggle--collapsed .env-toggle-chevron {
  transform: rotate(-90deg);
}

/* ========== ENV-BAR COLLAPSIBLE WRAPPER ========== */
.env-bar-wrapper {
  overflow: hidden;
  max-height: 80px;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  opacity: 1;
}
.env-bar-wrapper--collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ========== ENVIRONMENT BAR ========== */
.env-bar {
  display: flex;
  gap: 12px;
  padding: 14px 14px;
  background: var(--paper-bg);
  border-bottom: 1px solid var(--paper-border);
  flex-wrap: wrap;
}

.env-field {
  display: flex;
  align-items: center;
  gap: 4px;
}

.env-field label {
  font-size: var(--label-lg);
  font-weight: 600;
  color: var(--ink-pencil);
  text-transform: uppercase;
}

.env-field input {
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
  font-family: var(--font-handwriting);
  font-size: var(--hw-lg);
  color: var(--ink-blue);
  width: auto;
  min-width: 50px;
  max-width: 85px;
  text-align: center;
  outline: none;
  flex-shrink: 0;
  /* Handwritten field - underline only, blends with paper */
  padding: 2px 4px;
}

.env-field .unit {
  font-size: var(--label-sm);
  color: var(--ink-faded);
}

/* Specific env field widths - sized for typical content */
.input-da {
  min-width: 60px;
  max-width: 80px;
}
.input-rifle {
  min-width: 70px;
  max-width: 100px;
}
.input-mv {
  min-width: 55px;
  max-width: 75px;
}
.input-ammo {
  min-width: 80px;
  max-width: 120px;
}

.env-spacer {
  flex: 1;
}

.env-separator {
  width: 1px;
  height: 20px;
  background: var(--paper-border);
}


/* Mirage angle scale - pencil bubble sheet style */
.mirage-scale {
  display: flex;
  gap: 3px;
  align-items: center;
}

.mirage-dot {
  /* Larger touch target, paper-like bubble */
  width: 22px;
  height: 22px;
  border: 1px solid var(--paper-border);
  border-radius: 50%;  /* Circular like scantron bubbles */
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-handwriting);
  color: var(--ink-pencil);
  background: rgba(255, 255, 255, 0.4);
}

.mirage-dot:hover {
  border-color: var(--ink-pencil);
  background: rgba(26, 58, 92, 0.08);
}

.mirage-dot.active {
  /* Filled in with pencil - not solid, scribbled look */
  background: linear-gradient(135deg, 
    var(--ink-pencil) 0%, 
    rgba(58, 58, 58, 0.85) 50%,
    var(--ink-pencil) 100%);
  border-color: var(--ink-pencil);
  color: var(--paper-bg);
}

.mirage-boil {
  width: 26px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  border-radius: 50%;
}

.mirage-boil.active {
  background: linear-gradient(135deg, 
    var(--ink-pencil) 0%, 
    rgba(58, 58, 58, 0.85) 50%,
    var(--ink-pencil) 100%);
  border-color: var(--ink-pencil);
}

.mirage-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: var(--label-xs);
  color: var(--ink-faded);
  margin-left: 4px;
  gap: 80px;
}

/* ========== RESPONSIVE: ENV BAR STACKING ========== */
@media (max-width: 560px) {
  .env-bar {
    gap: 8px 12px;
    padding: 10px 12px;
  }
  
  .env-field {
    /* Allow fields to wrap more gracefully */
    flex: 0 0 auto;
  }
  
  .env-field input {
    min-width: 45px;
    max-width: 70px;
    font-size: var(--hw-md);
  }
  
  .env-separator {
    display: none;  /* Hide vertical separators on mobile */
  }
  
  .env-spacer {
    flex-basis: 100%;  /* Force line break after spacer */
    height: 0;
  }
}

/* ========== TARGET GRID SECTION ========== */
.target-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 12px 14px;
  min-height: 0;
}

/* Individual target card */
.target-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid var(--paper-border);
  border-radius: 3px;
  overflow: visible;
  min-width: 0; /* Allow grid to shrink cards */
}

.target-card-header {
  background: var(--paper-bg-alt);
  padding: clamp(8px, 2vw, 18px) clamp(6px, 1.5vw, 10px) clamp(4px, 1vw, 8px);
  border-bottom: 1px solid var(--paper-border);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  min-height: clamp(28px, 5vw, 46px);
  box-sizing: border-box;
  overflow: visible;
  z-index: 200;
}

/* Distance selector dropdown - handwritten style */
.distance-selector {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.distance-dropdown {
  font-family: var(--font-handwriting);
  font-size: var(--hw-xl);
  color: var(--ink-blue);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--paper-border);
  cursor: pointer;
  padding: 0 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  min-width: 45px;
  text-align: center;
}

.distance-dropdown:hover {
  border-bottom-color: var(--ink-blue);
}

.distance-dropdown:focus {
  border-bottom-style: solid;
  border-bottom-color: var(--ink-blue);
}

.distance-dropdown option {
  font-family: var(--font-handwriting);
  font-size: 18px;
  color: var(--ink-blue);
  background: var(--paper-bg);
  padding: 8px;
}

.distance-unit {
  font-family: var(--font-handwriting);
  font-size: var(--hw-md);
  color: var(--ink-pencil);
}

/* Target identity block - shooter name, date, target label (center of header) */
.target-identity {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-handwriting);
  font-size: var(--hw-sm);
  color: var(--ink-pencil);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}

.target-shooter {
  color: var(--ink-blue);
  font-weight: 500;
}

.target-date {
  color: var(--ink-pencil);
  opacity: 0.8;
}

/* Only show target label for reshoots (T-2, T-3, etc) */
.target-label {
  color: var(--ink-red);
  font-weight: 500;
}

.target-label:empty {
  display: none;
}

.target-card-header h3 {
  font-size: clamp(8px, 1.2vw, 11px);
  font-weight: 600;
  color: var(--ink-pencil);
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}

/* Decision label in target header */
.target-decision {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-handwriting);
  font-size: calc(18px * var(--rc-scale));
  font-weight: 500;
  white-space: nowrap;
  z-index: 50;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.95);
}

.target-decision.advance {
  color: var(--ink-blue);
}
.target-decision.reshoot {
  color: var(--ink-red);
}
.target-decision.rezero {
  color: #b45309;
}
.target-decision.check-tables {
  color: #7c3aed;
}
.target-decision.drop-only {
  color: #059669;
}
.target-decision.complete {
  color: #059669;
}

/* Target 3-dot menu */
.target-menu {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 6px;
  z-index: 500;
}

.target-menu-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2.5px;
  opacity: 0.85;
  transition: opacity 0.2s;
  /* iOS Safari touch fix: ensure button receives touch events */
  position: relative;
  z-index: 10;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  justify-content: center;
}

.target-menu-btn:hover {
  opacity: 1;
}

.target-menu-btn .menu-dot {
  width: 3.5px;
  height: 3.5px;
  background: var(--ink-black);
  border-radius: 50%;
}

.target-menu-dropdown {
  display: none;
  position: fixed;
  background: #fff;
  border: 1px solid var(--paper-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 6px 8px;
  z-index: 9999;
  white-space: nowrap;
  right: 8px;
  max-width: calc(100vw - 16px);
}

.target-menu-dropdown.open {
  display: block;
}

.target-menu-dropdown .mirage-scale {
  margin-bottom: 2px;
}

.target-menu-dropdown .mirage-labels {
  font-size: 6px;
  gap: 70px;
  margin-left: 0;
  justify-content: space-around;
}

/* Target sketch area */
.target-sketch {
  flex: 1;
  position: relative;
  background: #f8f5eb;
  min-height: 100px;
  cursor: crosshair;
  z-index: 50;
  overflow: visible;
}

/* Scope-ready visual cue — active when inputMode === SCOPE_FIRE */
.target-sketch.rc-target--scope-ready {
  box-shadow: 0 0 6px 1px rgba(34, 197, 94, 0.35);
  animation: scope-ready-pulse 2.4s ease-in-out infinite;
  cursor: crosshair;
}

@keyframes scope-ready-pulse {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(34, 197, 94, 0.25); }
  50%      { box-shadow: 0 0 10px 3px rgba(34, 197, 94, 0.50); }
}

.target-sketch.rc-target--scope-ready::after {
  content: '+';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: rgba(34, 197, 94, 0.7);
  border: 1.5px solid rgba(34, 197, 94, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 11;
}

/* Undo button - paper-style, just an arrow */
.undo-btn {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--paper-border);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, color 0.2s;
  z-index: 10;
}

.undo-btn:hover {
  opacity: 0.9;
  color: var(--ink-pencil);
}

.undo-btn:active {
  transform: scale(0.9);
}

/* ========== MOA/MIL GRID OVERLAY ========== */
.target-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 5;
}

.target-grid-overlay svg {
  width: 100%;
  height: 100%;
}

/* Grid scale label */
.grid-scale-label {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: var(--label-xs);
  font-family: var(--font-form);
  color: var(--ink-pencil);
  opacity: 0.6;
  pointer-events: none;
}

/* Grid info tooltip */
.grid-info {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: var(--label-xs);
  font-family: var(--font-form);
  color: var(--ink-pencil);
  opacity: 0.6;
  pointer-events: none;
}

/* ========== MIRAGE WAVY LINES OVERLAY ========== */
.mirage-waves {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.3s;
}

.mirage-waves.active {
  opacity: 1;
}

.mirage-waves svg {
  width: 100%;
  height: 100%;
}

/* ========== POI SHIFT INDICATOR ========== */
.poi-shift-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(139, 0, 0, 0.08);
  border: 1px dashed rgba(139, 0, 0, 0.3);
  border-radius: 3px;
  font-size: 9px;
  color: var(--ink-red);
  cursor: help;
  position: relative;
}

.poi-shift-badge:hover .poi-tooltip {
  display: block;
}

.poi-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
  margin-bottom: 6px;
  z-index: 200;
}

.poi-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1a1a1a;
}

/* ========== GROUP SIZE LABEL ========== */
.group-size-label {
  position: absolute;
  bottom: calc(8px * var(--rc-scale));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-handwriting);
  font-size: var(--hw-lg);
  color: var(--ink-pencil);
  opacity: 0.5;
  pointer-events: none;
  z-index: 8;
  white-space: nowrap;
}

/* Correction recommendation label */
.correction-label {
  position: absolute;
  top: calc(4px * var(--rc-scale));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-handwriting);
  font-size: var(--hw-md);
  color: var(--ink-red);
  opacity: 0.6;
  pointer-events: none;
  z-index: 8;
  white-space: nowrap;
}

/* ========== HANDWRITTEN NOTES ON TARGET ========== */
.target-note {
  position: absolute;
  font-family: var(--font-handwriting);
  font-size: var(--hw-lg);
  color: var(--ink-pencil);
  opacity: 0.9;
  pointer-events: none;
  z-index: 150;
  max-width: 35%;
  line-height: 1.15;
  letter-spacing: 0.3px;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Slot-based positioning for notes */
.top-left-1 {
  top: 4% !important;
  bottom: auto !important;
  left: 4% !important;
  right: auto !important;
  transform: rotate(-6deg) !important;
}
.top-left-2 {
  top: 20% !important;
  bottom: auto !important;
  left: 4% !important;
  right: auto !important;
  transform: rotate(-3deg) !important;
}
.top-left-3 {
  top: 36% !important;
  bottom: auto !important;
  left: 4% !important;
  right: auto !important;
  transform: rotate(-8deg) !important;
}

.top-right-1 {
  top: 4% !important;
  bottom: auto !important;
  left: auto !important;
  right: 4% !important;
  transform: rotate(5deg) !important;
  text-align: right !important;
}
.top-right-2 {
  top: 20% !important;
  bottom: auto !important;
  left: auto !important;
  right: 4% !important;
  transform: rotate(2deg) !important;
  text-align: right !important;
}
.top-right-3 {
  top: 36% !important;
  bottom: auto !important;
  left: auto !important;
  right: 4% !important;
  transform: rotate(7deg) !important;
  text-align: right !important;
}

.bottom-left-1 {
  top: auto !important;
  bottom: 12% !important;
  left: 4% !important;
  right: auto !important;
  transform: rotate(-4deg) !important;
}
.bottom-left-2 {
  top: auto !important;
  bottom: 28% !important;
  left: 4% !important;
  right: auto !important;
  transform: rotate(-7deg) !important;
}
.bottom-left-3 {
  top: auto !important;
  bottom: 44% !important;
  left: 4% !important;
  right: auto !important;
  transform: rotate(-2deg) !important;
}

.bottom-right-1 {
  top: auto !important;
  bottom: 12% !important;
  left: auto !important;
  right: 4% !important;
  transform: rotate(6deg) !important;
  text-align: right !important;
}
.bottom-right-2 {
  top: auto !important;
  bottom: 28% !important;
  left: auto !important;
  right: 4% !important;
  transform: rotate(3deg) !important;
  text-align: right !important;
}
.bottom-right-3 {
  top: auto !important;
  bottom: 44% !important;
  left: auto !important;
  right: 4% !important;
  transform: rotate(8deg) !important;
  text-align: right !important;
}

.target-note.plan {
  color: var(--ink-blue);
  font-size: var(--hw-lg);
}
.target-note.offset {
  color: #444;
  font-size: var(--hw-md);
  font-style: italic;
  opacity: 0.9;
}
.target-note.projected {
  color: var(--ink-red);
  font-size: var(--hw-md);
  font-weight: 500;
  opacity: 0.95;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--ink-red);
  border-radius: 8px;
  padding: 2px 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.target-note.center-bottom-1,
.target-note.center-bottom {
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  text-align: center;
}

.offset-line {
  z-index: 5;
}

/* ========== IMPACT MARKERS ========== */
.impact {
  position: absolute;
  width: calc(8px * var(--rc-scale));
  height: calc(8px * var(--rc-scale));
  background: var(--ink-red);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;
}

/* When JS sets aspect-ratio for caliber-scaled impacts, let height be auto */
.impact[style*="aspect-ratio"] {
  height: auto;
}

.impact::after {
  content: attr(data-shot);
  position: absolute;
  top: calc(-12px * var(--rc-scale));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-handwriting);
  font-size: var(--hw-xs);
  color: var(--ink-black);
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.95);
  white-space: nowrap;
}

/* Shot heat progression */
.impact.shot-cold-bore {
  background: #3b82f6;
  box-shadow: 0 0 calc(4px * var(--rc-scale)) rgba(59, 130, 246, 0.5);
}
.impact.shot-cold-bore::after {
  color: #3b82f6;
  font-weight: 600;
}
.impact.shot-heat-1 {
  background: #22c55e;
}
.impact.shot-heat-2 {
  background: #eab308;
}
.impact.shot-heat-3 {
  background: #f97316;
}
.impact.shot-heat-4 {
  background: #dc2626;
}

/* ========== SHOT-CALLER MARKS ========== */
/* Bright pinpoint showing where reticle was held at trigger break */
.shot-caller {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fff;
  border: 1.5px solid #facc15;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px 2px rgba(250, 204, 21, 0.8), 0 0 12px 4px rgba(250, 204, 21, 0.3);
  pointer-events: none;
  z-index: 9;
  animation: shot-caller-fade 6s ease-out forwards;
}

@keyframes shot-caller-fade {
  0%   { opacity: 1; box-shadow: 0 0 6px 2px rgba(250, 204, 21, 0.8), 0 0 12px 4px rgba(250, 204, 21, 0.3); }
  15%  { opacity: 0.9; }
  60%  { opacity: 0.4; box-shadow: 0 0 3px 1px rgba(250, 204, 21, 0.3); }
  100% { opacity: 0; box-shadow: none; }
}

/* AAR mode: persistent, no fade, slightly dimmer */
.shot-caller--aar {
  animation: none;
  opacity: 0.85;
  pointer-events: auto;
  cursor: help;
  box-shadow: 0 0 4px 1px rgba(250, 204, 21, 0.6);
}

/* Thin line connecting shot-caller to its impact hole (AAR only) */
.shot-caller-line {
  position: absolute;
  height: 1px;
  background: rgba(250, 204, 21, 0.45);
  transform-origin: 0 0;
  pointer-events: none;
  z-index: 8;
}

/* AAR toggle button in provenance panel */
.aar-caller-toggle {
  display: inline-block;
  margin: 8px 0;
  padding: 4px 12px;
  background: rgba(250, 204, 21, 0.15);
  border: 1px solid rgba(250, 204, 21, 0.4);
  border-radius: 4px;
  color: #b8860b;
  font-family: var(--font-form);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.2s;
}

.aar-caller-toggle:hover {
  background: rgba(250, 204, 21, 0.25);
}

.aar-caller-toggle--active {
  background: rgba(250, 204, 21, 0.3);
  border-color: rgba(250, 204, 21, 0.6);
  font-weight: 600;
}

/* ========== MATH WORK ========== */
.math-work {
  position: absolute;
  bottom: 2%;
  left: 2%;
  max-width: 50%;
  max-height: 40%;
  font-family: var(--font-handwriting);
  font-size: var(--hw-sm);
  color: var(--ink-pencil);
  line-height: 1.2;
  z-index: 150;
  pointer-events: none;
  white-space: pre-line;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.95);
  transform: rotate(-1deg);
  overflow: hidden;
}

.math-work:empty {
  display: none;
}
.math-work .math-line {
  display: block;
  transform: rotate(-0.5deg);
}
.math-work .math-result {
  color: var(--ink-blue);
  text-decoration: underline;
}

/* ========== TARGET DATA GRID (3x3) ========== */
.target-data {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 1px;
  background: var(--paper-border);
  border-top: 1px solid var(--paper-border);
  position: relative;
  z-index: 1;
  min-width: 0; /* Allow shrinking below content size */
}

.target-data-field {
  background: var(--paper-bg);
  padding: clamp(2px, 0.5vw, 6px) clamp(3px, 0.8vw, 6px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 1px;
  overflow: hidden;
  min-width: 0;
}

.target-data-field label {
  font-size: clamp(var(--label-xs), 1.2vw, var(--label-lg));
  font-weight: 600;
  color: var(--ink-pencil);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hold fields with baseline reference */
.hold-field {
  position: relative;
}

.baseline-ref {
  position: absolute;
  top: -2px;
  right: 4px;
  font-family: var(--font-handwriting);
  font-size: var(--hw-sm);
  color: var(--ink-faded);
  opacity: 0.8;
  white-space: nowrap;
}

.input-corrected {
  color: var(--ink-blue);
  font-weight: 500;
}

.input-corrected.has-delta {
  color: var(--ink-green, #2a6d3a);
  text-shadow: 0 0 1px rgba(42, 109, 58, 0.3);
}

.target-data-field .field-value {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.target-data-field input {
  flex: 1;
  background: transparent;
  border: none;
  font-family: var(--font-handwriting);
  font-size: var(--hw-lg);
  color: var(--ink-blue);
  text-align: center;
  outline: none;
  min-width: 0;
  width: 100%;
}

.target-data-field .unit {
  font-size: var(--label-xs);
  color: var(--ink-faded);
  flex-shrink: 0;
}

/* GROUP/STD combined field */
.group-std-field {
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
}

.group-std-field label {
  width: 100%;
  margin-bottom: 2px;
}

.group-std-field input {
  width: 35px;
  flex: 0 0 auto;
}

.group-std-field .std-divider {
  font-size: var(--hw-md);
  color: var(--ink-faded);
  margin: 0 2px;
}

.group-std-field .std-value {
  font-family: var(--font-handwriting);
  font-size: var(--hw-md);
  color: var(--ink-pencil);
}

/* POI Delta field - highlighted, now textarea for 2-line display */
.input-poi-delta {
  font-weight: 500;
  color: var(--ink-blue) !important;
  background: transparent !important;
  resize: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.2;
  height: 2.6em;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

.poi-delta-field {
  min-height: 3.2em;
}

.target-data-full {
  grid-column: 1 / -1;
}

/* ========== FOOTER ROW ========== */
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
  background: var(--paper-bg-alt);
  border-top: 1px solid var(--paper-border);
  position: relative;
}

.footer-fields {
  display: flex;
  gap: 16px;
}

.footer-field {
  display: flex;
  align-items: center;
  gap: 4px;
}

.footer-field label {
  font-size: var(--label-sm);
  font-weight: 500;
  color: var(--ink-pencil);
  text-transform: uppercase;
}

.footer-field input {
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
  font-family: var(--font-handwriting);
  font-size: var(--hw-lg);
  color: var(--ink-blue);
  width: 80px;
  outline: none;
}

.card-footer::after {
  content: 'Black Team LLC';
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1px;
  color: rgba(0, 0, 0, 0.06);
}

/* ========== INPUT WIDTH CLASSES ========== */
.input-wide {
  width: 120px;
}
.input-da {
  width: 50px;
}
.input-wind {
  width: 30px;
}
.input-wind-dir {
  width: 40px;
}
.input-humidity {
  width: 35px;
}
.input-time {
  width: 45px;
}
.input-sun-az {
  width: 35px;
}
.input-rnds {
  width: 30px;
}
.input-shot-az {
  width: 35px;
}
.input-sun-pos {
  width: 45px;
}
.input-session {
  width: 35px;
  text-align: center;
}
.input-lifetime {
  width: 50px;
  text-align: center;
}
.select-light {
  font-size: 10px;
  padding: 2px;
}

/* ========== TARGET MENU ITEMS ========== */
.target-menu-sep {
  height: 1px;
  background: var(--paper-border);
  margin: 6px 0;
}

.target-menu-item {
  display: block;
  width: 100%;
  padding: 6px 10px;
  text-align: left;
  background: none;
  border: none;
  font-size: var(--label-lg);
  color: var(--ink-black);
  cursor: pointer;
  transition: background 0.15s;
}

.target-menu-item:hover {
  background: var(--paper-bg-alt);
}

/* Target selector in dropdown */
.target-selector {
  padding: 4px 8px;
}
.target-selector-label {
  font-size: 9px;
  color: var(--ink-faded);
  margin-bottom: 4px;
}
.target-selector-list {
  display: flex;
  gap: 4px;
}
.target-selector-btn {
  width: 24px;
  height: 20px;
  border: 1px solid var(--paper-border);
  border-radius: 3px;
  background: #fff;
  font-size: 9px;
  cursor: pointer;
  transition: all 0.15s;
}
.target-selector-btn:hover {
  background: var(--paper-bg-alt);
}
.target-selector-btn.active {
  background: var(--ink-blue);
  color: #fff;
  border-color: var(--ink-blue);
}

/* ========== GHOST IMPACT PROJECTION ========== */
.ghost-impact {
  position: absolute;
  width: calc(10px * var(--rc-scale));
  height: calc(10px * var(--rc-scale));
  background: transparent;
  border: calc(2px * var(--rc-scale)) dashed rgba(180, 80, 80, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
  animation: ghost-pulse 2s ease-in-out infinite;
}

.ghost-impact::after {
  content: attr(data-shot);
  position: absolute;
  top: calc(-14px * var(--rc-scale));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-handwriting);
  font-size: var(--hw-xs);
  color: rgba(180, 80, 80, 0.7);
  font-style: italic;
  white-space: nowrap;
}

@keyframes ghost-pulse {
  0%,
  100% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.ghost-impact.off-grid {
  border-color: var(--ink-red);
  border-width: 2px;
  background: rgba(200, 50, 50, 0.15);
}

/* ========== COMPARE MODAL ========== */
.compare-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

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

.compare-modal-content {
  background: var(--paper-bg);
  border-radius: 8px;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.compare-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--paper-border);
}

.compare-modal-header h3 {
  margin: 0;
  font-size: 14px;
  color: var(--ink-black);
}

.compare-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.6;
}

.compare-close:hover {
  opacity: 1;
}

.compare-grid {
  display: flex;
  gap: 12px;
  padding: 16px;
  flex-wrap: wrap;
}

.compare-target-card {
  width: 220px;
  border: 1px solid var(--paper-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper-bg);
  box-shadow: 1px 1px 4px var(--paper-shadow);
}

.compare-target-header {
  padding: 8px 12px;
  background: var(--paper-bg-alt);
  font-family: var(--font-handwriting);
  font-size: var(--hw-lg);
  color: var(--ink-blue);
  border-bottom: 1px solid var(--paper-border);
  transform: rotate(-1deg);
}

.compare-target-sketch {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: var(--paper-bg);
}

.compare-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 24px,
      rgba(180, 195, 210, 0.25) 24px,
      rgba(180, 195, 210, 0.25) 25px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 24px,
      rgba(180, 195, 210, 0.25) 24px,
      rgba(180, 195, 210, 0.25) 25px
    );
}

.compare-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  z-index: 2;
}

.compare-crosshair::before,
.compare-crosshair::after {
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, 0.12);
}

.compare-crosshair::before {
  top: 50%;
  left: -8px;
  right: -8px;
  height: 1px;
}
.compare-crosshair::after {
  left: 50%;
  top: -8px;
  bottom: -8px;
  width: 1px;
}

.compare-impact {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--ink-red);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.compare-impact::after {
  content: attr(data-shot);
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-handwriting);
  font-size: var(--hw-xs);
  color: var(--ink-black);
}

.compare-note {
  position: absolute;
  font-family: var(--font-handwriting);
  font-size: var(--hw-xs);
  color: var(--ink-pencil);
  opacity: 0.85;
  max-width: 45%;
  line-height: 1.2;
  z-index: 6;
}

.compare-note.trend {
  top: 5%;
  left: 3%;
  transform: rotate(-3deg);
}
.compare-note.plan {
  top: 5%;
  right: 3%;
  text-align: right;
  transform: rotate(2deg);
  color: var(--ink-blue);
}
.compare-note.offset {
  bottom: 18%;
  left: 3%;
  font-size: var(--label-sm);
  font-style: italic;
}
.compare-note.projected {
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--label-sm);
  color: var(--ink-red);
  background: rgba(255, 255, 255, 0.7);
  padding: 1px 4px;
  border-radius: 6px;
  border: 1px solid var(--ink-red);
}

.compare-target-data {
  padding: 8px 10px;
  font-size: 10px;
  color: var(--ink-pencil);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  border-top: 1px solid var(--paper-border);
  background: rgba(255, 255, 255, 0.5);
}

.compare-data-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.compare-label {
  font-size: 8px;
  text-transform: uppercase;
  color: var(--ink-faded);
}
.compare-value {
  font-family: var(--font-handwriting);
  font-size: var(--hw-xs);
  color: var(--ink-blue);
}
.compare-target-timestamp {
  padding: 4px 10px;
  font-size: 8px;
  color: var(--ink-faded);
  border-top: 1px dashed var(--paper-border);
  text-align: center;
}

/* Pattern badge */
.pattern-badge {
  display: inline-block;
  font-size: 8px;
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  margin-left: 6px;
  color: var(--ink-pencil);
}

/* ========== COACHING PANEL ========== */
.coaching-panel {
  padding: 16px;
  border-top: 2px solid var(--paper-border);
  background: linear-gradient(to bottom, #fefefe, #f8f6f0);
}

.coaching-panel:empty {
  display: none;
}
.coaching-empty {
  text-align: center;
  color: var(--ink-faded);
  font-style: italic;
  padding: 12px;
}
.coaching-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--paper-border);
}
.coaching-pattern {
  font-family: var(--font-handwriting);
  font-size: var(--hw-xl);
  font-weight: 600;
  color: var(--ink-blue);
}
.coaching-desc {
  font-size: 11px;
  color: var(--ink-pencil);
  font-style: italic;
}

.coaching-causes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.coaching-cause {
  padding: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--paper-border);
  border-radius: 6px;
  border-left: 3px solid var(--ink-blue);
}
.cause-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cause-rank {
  font-size: 10px;
  font-weight: 600;
  color: white;
  background: var(--ink-blue);
  padding: 2px 6px;
  border-radius: 4px;
}
.cause-name {
  font-family: var(--font-handwriting);
  font-size: var(--hw-lg);
  font-weight: 600;
  color: var(--ink-black);
}
.cause-prob {
  font-size: 10px;
  color: var(--ink-pencil);
  margin-left: auto;
}
.cause-questions {
  margin: 8px 0;
  padding-left: 4px;
}
.coaching-question {
  font-size: 11px;
  color: var(--ink-pencil);
  margin: 4px 0;
  line-height: 1.4;
}
.cause-fix {
  font-size: 10px;
  color: var(--ink-blue);
  background: rgba(59, 130, 246, 0.08);
  padding: 8px 10px;
  border-radius: 4px;
  margin-top: 8px;
  line-height: 1.4;
}
.cause-fix strong {
  color: var(--ink-black);
}

/* ========== RESIZE HANDLE ========== */
.resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  z-index: 100;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.resize-handle:hover {
  opacity: 0.8;
}

.resize-handle::before,
.resize-handle::after {
  content: '';
  position: absolute;
  background: var(--ink-pencil);
  border-radius: 1px;
}

.resize-handle::before {
  bottom: 4px;
  right: 4px;
  width: 10px;
  height: 2px;
  transform: rotate(-45deg);
}
.resize-handle::after {
  bottom: 8px;
  right: 4px;
  width: 6px;
  height: 2px;
  transform: rotate(-45deg);
}

.range-card.resizing {
  -webkit-user-select: none;
  user-select: none;
}

/* ========== LIGHT CONDITION CIRCLE ========== */
.light-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
}

.light-circle {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--paper-border);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: var(--paper-bg);
  transition: border-color 0.15s;
}

.light-circle:hover {
  border-color: #5a4a3a; /* Warm sepia hover */
}

.light-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--ink-pencil);
  transition: height 0.2s ease;
}

.light-circle[data-level='0'] .light-fill {
  height: 0%;
}
.light-circle[data-level='1'] .light-fill {
  height: 25%;
  background: repeating-linear-gradient(
    45deg,
    var(--ink-pencil),
    var(--ink-pencil) 1px,
    transparent 1px,
    transparent 3px
  );
}
.light-circle[data-level='2'] .light-fill {
  height: 50%;
  background: repeating-linear-gradient(
    45deg,
    var(--ink-pencil),
    var(--ink-pencil) 1px,
    transparent 1px,
    transparent 2px
  );
}
.light-circle[data-level='3'] .light-fill {
  height: 75%;
  background: var(--ink-pencil);
  opacity: 0.7;
}
.light-circle[data-level='4'] .light-fill {
  height: 100%;
  background: var(--ink-black);
}

/* ========== STANDARD FIELD ========== */
.standard-field {
  position: relative;
}
.standard-value {
  font-family: var(--font-handwriting);
  font-size: var(--hw-md);
  color: var(--ink-blue);
  cursor: help;
}

.standard-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
  margin-bottom: 8px;
  z-index: 200;
  line-height: 1.5;
}

.standard-tooltip strong {
  color: #7cb3f0;
}
.standard-tooltip em {
  color: #aaa;
  font-size: 9px;
}
.standard-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1a1a1a;
}
.standard-field:hover .standard-tooltip {
  display: block;
}

/* ========== AZIMUTH + LIGHT CELL ========== */
.azimuth-light-cell {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
}
.azimuth-light-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  gap: 8px;
}
.az-circle-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}
.az-label {
  font-size: 8px;
  font-weight: 600;
  color: var(--ink-pencil);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.azimuth-light-cell .light-circle {
  /* Larger for mobile tap targets */
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--paper-border);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: var(--paper-bg);
  transition: border-color 0.15s;
  flex-shrink: 0;
}

.azimuth-light-cell .light-circle:hover {
  border-color: #5a4a3a; /* Warm sepia hover */
}

/* RC-011: Dynamic Light Level Fill */
.light-circle .light-fill {
  transition: height 0.3s ease, background-color 0.3s ease;
}

/* RC-013: Shadow Dial (pencil shadow on data book) 
   Larger touch target, organic pencil-circle aesthetic */
.shadow-dial {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  background: var(--paper-white, #faf8f5);
  /* Subtle paper texture shadow */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.shadow-dial-ring {
  position: absolute;
  inset: 0;
  /* Hand-drawn circle feel - slightly uneven border */
  border: 1.5px solid var(--paper-border);
  border-radius: 50%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.shadow-dial:hover .shadow-dial-ring {
  border-color: #5a4a3a; /* Warm sepia hover */
}

/* The dark line representing where the pencil shadow falls */
.shadow-line {
  position: absolute;
  width: 2px;
  height: 45%;
  left: calc(50% - 1px);
  bottom: 50%;
  background: #4a4a4a; /* Pencil gray, not harsh black */
  transform-origin: bottom center;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
  /* Pencil line imperfection */
  opacity: 0.85;
}

/* Dot at the end of the shadow line */
.shadow-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--ink-black, #1a1a1a);
  border-radius: 50%;
  top: 3px;
  left: calc(50% - 2.5px);
  transform-origin: center calc(100% + 8px);
  transition: transform 0.3s ease;
  pointer-events: none;
}

/* Center point (represents the pencil standing up) */
.shadow-center {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--ink-pencil);
  border-radius: 50%;
  top: calc(50% - 2.5px);
  left: calc(50% - 2.5px);
  pointer-events: none;
}

/* Visual indicator when manually set - dashed = user override */
.shadow-dial.shadow-manual .shadow-dial-ring {
  border-style: dashed;
  border-color: var(--ink-blue);
}

.shadow-dial.shadow-manual .shadow-line {
  background: var(--ink-blue);
  opacity: 1;
}

.shadow-dial.shadow-manual .shadow-dot {
  background: var(--ink-blue);
}

/* Orientation arrow (tiny up arrow showing "toward target" direction) */
.shadow-dial::before {
  content: '▲';
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6px;
  color: var(--ink-pencil);
  opacity: 0.4;
  pointer-events: none;
}

/* RC-012: Wind Value Display */
.firing-direction {
  font-size: 9px;
  color: var(--ink-pencil);
  margin-left: 8px;
  white-space: nowrap;
}

.wind-value-label {
  font-size: 10px;
  color: var(--ink-blue);
  font-weight: 500;
  padding: 2px 6px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 3px;
}

.compass-wind-vector {
  position: absolute;
  width: 2px;
  height: 40%;
  left: calc(50% - 1px);
  bottom: 50%;
  background: var(--ink-blue);
  transform-origin: bottom center;
  pointer-events: none;
}

.compass-wind-vector::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -2px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 5px solid var(--ink-blue);
}

/* ========== COMPARE TARGETS MODAL ========== */
.compare-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.compare-modal-content {
  background: var(--paper-bg);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  min-width: 500px;
  max-width: 90%;
  max-height: 80vh;
  overflow: auto;
}

.compare-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--paper-border);
  background: var(--paper-bg-alt);
}

.compare-modal-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-black);
}

.compare-close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--ink-faded);
  padding: 0 4px;
}

.compare-close-btn:hover {
  color: var(--ink-red);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.compare-table th,
.compare-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--paper-border);
}

.compare-table th {
  background: var(--paper-bg-alt);
  font-weight: 600;
  color: var(--ink-pencil);
  text-transform: uppercase;
  font-size: 10px;
}

.compare-table td {
  color: var(--ink-black);
}

.compare-row-active {
  background: rgba(26, 58, 92, 0.1);
}

.compare-row-active td:first-child {
  border-left: 3px solid var(--ink-blue);
}

.compare-select-btn {
  padding: 4px 10px;
  background: var(--ink-blue);
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 10px;
  cursor: pointer;
}

.compare-select-btn:hover {
  background: #2a5a8a;
}

.compare-modal-footer {
  padding: 12px 16px;
  text-align: right;
  border-top: 1px solid var(--paper-border);
}

.compare-btn-primary {
  padding: 8px 16px;
  background: var(--ink-blue);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.compare-btn-primary:hover {
  background: #2a5a8a;
}

/* Visual comparison layout */
.compare-visual {
  min-width: 700px;
  max-width: 95vw;
}

.compare-layout {
  padding: 16px;
}

.compare-targets-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.compare-target-card {
  background: var(--paper-bg);
  border: 2px solid var(--paper-border);
  border-radius: 6px;
  width: 200px;
  cursor: pointer;
  transition: all 0.2s;
}

.compare-target-card:hover {
  border-color: var(--ink-blue);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.compare-target-card.active {
  border-color: var(--ink-blue);
  box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.2);
}

.compare-target-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--paper-bg-alt);
  border-bottom: 1px solid var(--paper-border);
}

.compare-target-label {
  font-weight: 600;
  font-size: 11px;
  color: var(--ink-black);
}

.compare-target-shots {
  font-size: 10px;
  color: var(--ink-faded);
}

.compare-target-sketch {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #fff;
  overflow: hidden;
}

.compare-grid-overlay {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 24px,
      var(--paper-grid) 24px,
      var(--paper-grid) 25px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 24px,
      var(--paper-grid) 24px,
      var(--paper-grid) 25px
    );
}

.compare-crosshair-h,
.compare-crosshair-v {
  position: absolute;
  background: var(--ink-pencil);
  opacity: 0.3;
}

.compare-crosshair-h {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

.compare-crosshair-v {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.compare-impact {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-black);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.compare-impact.shot-cold-bore {
  background: #3498db;
}
.compare-impact.shot-heat-1 {
  background: #2ecc71;
}
.compare-impact.shot-heat-2 {
  background: #f1c40f;
}
.compare-impact.shot-heat-3 {
  background: #e67e22;
}
.compare-impact.shot-heat-4 {
  background: #e74c3c;
}

.compare-target-stats {
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  font-size: 10px;
  border-top: 1px solid var(--paper-border);
}

.compare-stat span {
  color: var(--ink-faded);
}

.compare-coaching-panel {
  background: var(--paper-bg-alt);
  border: 1px solid var(--paper-border);
  border-radius: 6px;
  padding: 12px 16px;
}

.coaching-header {
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-black);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.coaching-notes {
  margin-bottom: 8px;
}

.coaching-note {
  font-size: var(--hw-md);
  color: var(--ink-black);
  padding: 4px 0;
  font-family: var(--font-handwriting);
}

.coaching-placeholder {
  font-size: 10px;
  color: var(--ink-faded);
  border-top: 1px solid var(--paper-border);
  padding-top: 8px;
  margin-top: 8px;
}

.compare-hint {
  font-size: 11px;
  color: var(--ink-faded);
}

/* ========== INLINE COMPARE MODE ========== */
.compare-notes-panel {
  background: var(--paper-bg);
  border: 1px solid var(--paper-border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.compare-notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--paper-bg-alt);
  border-bottom: 1px solid var(--paper-border);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-black);
}

.compare-exit-btn {
  background: var(--ink-red);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 10px;
  cursor: pointer;
}

.compare-exit-btn:hover {
  background: #c0392b;
}

.compare-notes-body {
  flex: 1;
  position: relative;
  padding: 16px;
  min-height: 200px;
}

/* Paper texture and dashed lines for handwriting */
.compare-notes-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 23px,
    var(--paper-grid) 23px,
    var(--paper-grid) 24px
  );
}

.compare-notes-lines::before {
  content: '';
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(200, 100, 100, 0.3);
}

.compare-coaching-content {
  position: relative;
  z-index: 1;
}

.compare-coaching-content .coaching-header {
  font-family: var(--font-handwriting);
  font-size: var(--hw-lg);
  color: var(--ink-blue);
  margin-bottom: 12px;
}

.compare-coaching-content .coaching-note {
  font-family: var(--font-handwriting);
  font-size: var(--hw-lg);
  line-height: 24px;
  color: var(--ink-pencil);
}

.compare-coaching-content .coaching-placeholder {
  margin-top: 16px;
  font-family: var(--font-handwriting);
  font-style: italic;
  color: var(--ink-faded);
  font-size: var(--hw-xs);
}

.compare-target-selector {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--paper-border);
  background: var(--paper-bg-alt);
}

.compare-target-btn {
  flex: 1;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--paper-border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.compare-target-btn span {
  font-weight: 400;
  color: var(--ink-faded);
}

.compare-target-btn:hover {
  border-color: var(--ink-blue);
}

.compare-target-btn.active {
  background: var(--ink-blue);
  color: #fff;
  border-color: var(--ink-blue);
}

.compare-target-btn.active span {
  color: rgba(255, 255, 255, 0.7);
}

/* Compare mode adjustments */
.range-card.compare-mode .targets-container {
  gap: 8px;
}

/* ============================================================
   FIELD TOOLTIPS (RC-015)
   ============================================================ */

.rc-tooltip-trigger {
  cursor: help;
  position: relative;
}

.rc-tooltip-trigger::after {
  content: '?';
  position: absolute;
  top: -2px;
  right: -8px;
  width: 10px;
  height: 10px;
  font-size: 7px;
  line-height: 10px;
  text-align: center;
  background: var(--ink-faded);
  color: #fff;
  border-radius: 50%;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.rc-tooltip-trigger:hover::after,
.rc-tooltip-trigger:focus::after {
  opacity: 0.8;
}

.rc-field-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: 280px;
  padding: 10px 12px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.rc-field-tooltip.rc-tooltip-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.rc-tooltip-header {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 6px;
}

.rc-tooltip-body p {
  margin: 0 0 6px 0;
}

.rc-tooltip-body p:last-child {
  margin-bottom: 0;
}

.rc-tooltip-purpose {
  color: rgba(255, 255, 255, 0.9);
}

.rc-tooltip-coaching {
  color: #7dd3fc;
  font-style: italic;
  font-size: 11px;
}

.rc-tooltip-example {
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
}

/* ==========================================================================
   MOBILE OVERRIDES — moved from mobile.css per PRD-64
   One owner per component: all RC mobile styles live here.
   ========================================================================== */

/* ===========================================
   Range Card Container
   =========================================== */
.mobile-range-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===========================================
   Mobile Range Card Component
   =========================================== */
.mobile-card {
  background: rgba(20, 20, 20, 0.95);
  border-radius: 12px;
  margin: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-card--empty {
  text-align: center;
  padding: 3rem 1rem;
  color: rgba(255, 255, 255, 0.5);
}

.mobile-card--empty p:first-child {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.mobile-card__hint {
  font-size: 0.875rem;
  opacity: 0.7;
}

.mobile-card__header {
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 229, 255, 0.05);
}

.mobile-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--luminova-primary, #00E5FF);
  margin-bottom: 0.25rem;
}

.mobile-card__subtitle {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}

.mobile-card__conditions {
  display: flex;
  justify-content: space-around;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
}

.mobile-card__dope-grid {
  padding: 0.5rem 0;
}

.mobile-card__dope-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-card__dope-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-card__dope-row:last-child {
  border-bottom: none;
}

.mobile-card__range {
  font-weight: 600;
  color: var(--luminova-primary, #00E5FF);
}

.mobile-card__elev {
  text-align: center;
  color: #fff;
}

.mobile-card__wind {
  text-align: right;
  color: rgba(255, 255, 255, 0.8);
}

/* ===========================================
   Mobile Range Card (Calibration Card)
   Portrait: 1 target at a time with selector
   Landscape: all 3 targets side-by-side
   =========================================== */

/* Container styling within mobile app */
.mobile-app .mobile-range-card {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-app .range-card {
  background: var(--paper-bg, #f5f0dc);
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Compact header for mobile */
.mobile-app .card-header {
  padding: 8px 12px;
  flex-wrap: wrap;
  gap: 4px;
}

.mobile-app .card-header .header-field {
  flex: 0 0 auto;
}

.mobile-app .card-header .session-title {
  flex: 1 1 100%;
  order: 10;
  margin-top: 4px;
}

/* Compact environment bar */
.mobile-app .env-bar {
  padding: 6px 8px;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.mobile-app .env-field {
  flex: 0 0 auto;
}

/* Ensure specific input widths on mobile */
.mobile-app .input-da {
  width: 65px !important;
  min-width: 65px !important;
}
.mobile-app .input-mv {
  width: 65px !important;
  min-width: 65px !important;
}
.mobile-app .input-rifle {
  width: 75px !important;
  min-width: 75px !important;
}

.mobile-app .env-spacer,
.mobile-app .env-separator {
  display: none;
}

/* Target selector for portrait mode — shows 100/300/600 yd tabs */
.mobile-target-selector {
  padding: 4px 8px;
  background: var(--paper-bg, #f5f0dc);
  border-bottom: 1px solid var(--paper-border, rgba(80,70,60,0.3));
}

.mobile-target-selector__tabs {
  display: flex;
  gap: 4px;
}

.mobile-target-selector__tab {
  flex: 1;
  padding: 10px 8px;
  border: 1px solid var(--paper-border, rgba(80,70,60,0.4));
  border-radius: 6px;
  background: var(--paper-bg, #f5f0dc);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-pencil, #3a3a3a);
  cursor: pointer;
  transition: all 0.2s;
}

.mobile-target-selector__tab--active {
  background: var(--ink-blue, #1a3a5c);
  color: #fff;
  border-color: var(--ink-blue, #1a3a5c);
}

/* ===========================================
   PRD-58/59: Range Card Input Mode Selector
   PLOT (click), SCOPE_FIRE (sim), BARRIER (glass)
   =========================================== */
.rc-input-mode-bar {
  padding: 6px 8px;
  background: var(--paper-bg, #f5f0dc);
  border-bottom: 1px solid var(--paper-border, rgba(80,70,60,0.3));
}

.rc-input-mode-tabs {
  display: flex;
  gap: 6px;
}

.rc-input-mode-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid var(--paper-border, rgba(80,70,60,0.4));
  border-radius: 8px;
  background: var(--paper-bg, #f5f0dc);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-pencil, #3a3a3a);
  cursor: pointer;
  transition: all 0.2s ease;
}

.rc-input-mode-tab:hover {
  background: rgba(80,70,60,0.08);
}

.rc-input-mode-tab--active {
  background: var(--ink-blue, #1a3a5c);
  color: #fff;
  border-color: var(--ink-blue, #1a3a5c);
}

.rc-input-mode-tab--active:hover {
  background: var(--ink-blue, #1a3a5c);
}

.rc-input-mode-icon {
  font-size: 14px;
}

.rc-input-mode-label {
  letter-spacing: 0.4px;
}

/* Mode-specific indicators */
.rc-input-mode-tab[data-mode="SCOPE_FIRE"]::after {
  content: '';
}

.rc-input-mode-tab[data-mode="BARRIER"].rc-input-mode-tab--active {
  background: var(--ink-green, #2a5c3a);
  border-color: var(--ink-green, #2a5c3a);
}

/* Session info badge for active sim modes */
.rc-input-mode-tab .session-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.2);
  margin-left: 4px;
}

/* ===========================================
   PRD-58: Shot Receipt/Provenance Modal
   Shows WHY each shot landed where it did
   =========================================== */
.shot-receipt-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.shot-receipt-content {
  background: var(--paper-bg, #f5f0dc);
  border-radius: 12px;
  max-width: 400px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.shot-receipt-content pre {
  margin: 0;
  padding: 16px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--ink-pencil, #3a3a3a);
}

.shot-receipt-close {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-top: 1px solid var(--paper-border, rgba(80,70,60,0.3));
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-blue, #1a3a5c);
  cursor: pointer;
}

.shot-receipt-close:hover {
  background: rgba(80,70,60,0.05);
}

/* Impact with provenance - clickable */
.impact--has-provenance {
  cursor: pointer;
}

.impact--has-provenance::after {
  content: '?';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  font-size: 8px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  background: var(--ink-blue, #1a3a5c);
  color: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}

.impact--has-provenance:hover::after {
  opacity: 1;
}

/* =============================================
   Glass Penetration Proof / Validation Display
   Shows the MATH behind glass deflection - "not a magic 8-ball"
   ============================================= */
.glass-proof {
  margin: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--paper-border, rgba(80,70,60,0.3));
  background: var(--paper-bg-alt, #f0ead6);
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-pencil, #3a3a3a);
}

.glass-proof-header {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink-blue, #1a3a5c);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--paper-border, rgba(80,70,60,0.3));
}

.glass-proof-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.proof-section {
  padding: 8px;
  background: rgba(255,255,255,0.5);
  border-radius: 6px;
  border-left: 3px solid var(--ink-blue, #1a3a5c);
}

.proof-label {
  display: block;
  font-weight: 700;
  font-size: 11px;
  color: var(--ink-heading, #2c2c2c);
  margin-bottom: 4px;
}

.proof-formula {
  display: block;
  font-size: 10px;
  font-style: italic;
  color: var(--ink-subtle, #666);
  margin-bottom: 4px;
}

.proof-values {
  font-size: 10px;
  white-space: pre-wrap;
}

.proof-values strong {
  color: var(--success-green, #228b22);
}

/* LE Verdict styling */
.proof-section.verdict-go {
  border-left-color: var(--success-green, #228b22);
  background: rgba(34, 139, 34, 0.1);
}

.proof-section.verdict-conditional {
  border-left-color: var(--warning-amber, #d4a700);
  background: rgba(212, 167, 0, 0.1);
}

.proof-section.verdict-no-go {
  border-left-color: var(--error-red, #c41e3a);
  background: rgba(196, 30, 58, 0.1);
}

.verdict-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  margin-left: 6px;
}

.verdict-go .verdict-badge {
  background: var(--success-green, #228b22);
  color: #fff;
}

.verdict-conditional .verdict-badge {
  background: var(--warning-amber, #d4a700);
  color: #000;
}

.verdict-no-go .verdict-badge {
  background: var(--error-red, #c41e3a);
  color: #fff;
}

.verdict-reasons {
  margin-top: 6px;
  font-size: 10px;
  color: var(--ink-subtle, #666);
}

.proof-warnings {
  margin-top: 8px;
  padding: 6px;
  background: rgba(212, 167, 0, 0.15);
  border-radius: 4px;
  font-size: 10px;
  color: var(--warning-amber-dark, #a07c00);
}

/* =============================================
   PRD-59 Phase 10.6: Barrier Config Panel
   Glass type selection, rake/AOI sliders, presets
   ============================================= */
.rc-barrier-config-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: min(90%, 320px);
  background: var(--paper-bg, #f5f0dc);
  border: 1px solid var(--paper-border, rgba(80,70,60,0.4));
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  overflow: hidden;
}

.rc-barrier-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--ink-green, #2a5c3a);
  color: #fff;
}

.rc-barrier-config-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.rc-barrier-config-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.rc-barrier-config-close:hover {
  background: rgba(255,255,255,0.3);
}

.rc-barrier-config-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rc-barrier-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rc-barrier-field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--ink-heading, #2c2c2c);
  text-transform: uppercase;
}

.rc-barrier-field select,
.rc-barrier-field input[type="range"] {
  width: 100%;
}

.rc-barrier-field select {
  padding: 8px 10px;
  border: 1px solid var(--paper-border, rgba(80,70,60,0.4));
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
}

.rc-barrier-field input[type="range"] {
  -webkit-appearance: none;
  height: 8px;
  border-radius: 4px;
  background: var(--paper-border, rgba(80,70,60,0.3));
}
.rc-barrier-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink-green, #2a5c3a);
  cursor: pointer;
}

/* Slider value display */
.rc-barrier-dist-glass-val,
.rc-barrier-dist-target-val,
.rc-barrier-rake-val,
.rc-barrier-aoi-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-blue, #1a3a5c);
  text-align: right;
}

/* AOI Readout box */
.rc-barrier-aoi-readout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(80,70,60,0.08);
  border-radius: 8px;
  border: 1px solid var(--paper-border, rgba(80,70,60,0.3));
}

.rc-barrier-aoi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-subtle, #666);
}

.rc-barrier-aoi-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-blue, #1a3a5c);
}

.rc-barrier-aoi-risk {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
}

.risk-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.risk-badge--low {
  background: var(--success-green, #228b22);
  color: #fff;
}
.risk-badge--moderate {
  background: var(--warning-amber, #d4a700);
  color: #000;
}
.risk-badge--elevated {
  background: #ff8c00;
  color: #000;
}
.risk-badge--high {
  background: var(--error-red, #c41e3a);
  color: #fff;
}

.rc-barrier-config-footer {
  padding: 14px 16px;
  background: rgba(80,70,60,0.05);
  border-top: 1px solid var(--paper-border, rgba(80,70,60,0.3));
}

.rc-barrier-start-btn {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  background: var(--ink-green, #2a5c3a);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}
.rc-barrier-start-btn:hover {
  background: #1e4a2e;
}

/* =============================================
   PRD-58 Phase 11: Session Picker Panel
   Session type cards with profile status
   ============================================= */
.rc-session-picker-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: min(92%, 340px);
  background: var(--paper-bg, #f5f0dc);
  border: 1px solid var(--paper-border, rgba(80,70,60,0.4));
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  overflow: hidden;
}

.rc-session-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--ink-blue, #1a3a5c);
  color: #fff;
}

.rc-session-picker-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.rc-session-picker-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.rc-session-picker-close:hover {
  background: rgba(255,255,255,0.3);
}

.rc-session-picker-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
}

/* Session type cards */
.rc-session-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--paper-border, rgba(80,70,60,0.3));
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rc-session-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.rc-session-card:active {
  transform: translateY(0);
}

.rc-session-card-icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(80,70,60,0.08);
  border-radius: 8px;
  flex-shrink: 0;
}

.rc-session-card-info {
  flex: 1;
  min-width: 0;
}

.rc-session-card-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-heading, #2c2c2c);
  margin-bottom: 2px;
}

.rc-session-card-desc {
  font-size: 11px;
  color: var(--ink-subtle, #666);
  margin-bottom: 4px;
}

.rc-session-card-stages {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-blue, #1a3a5c);
  letter-spacing: 0.2px;
}

/* Position selector row */
.rc-position-selector {
  padding: 10px 14px;
  border-top: 1px solid var(--paper-border, rgba(80,70,60,0.2));
}

.rc-position-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-subtle, #666);
  margin-bottom: 8px;
}

.rc-position-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rc-position-pill {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 4px;
  border: 1px solid var(--paper-border, rgba(80,70,60,0.3));
  border-radius: 6px;
  background: #fff;
  color: var(--ink-black, #2c2c2c);
  font-family: var(--font-form, inherit);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.rc-position-pill:hover {
  background: rgba(26, 58, 92, 0.06);
  border-color: rgba(26, 58, 92, 0.3);
}

.rc-position-pill--active {
  background: var(--ink-blue, #1a3a5c);
  color: #fff;
  border-color: var(--ink-blue, #1a3a5c);
}

.rc-position-pill--active:hover {
  background: var(--ink-blue, #1a3a5c);
}

/* =============================================
   PRD-66 Feature 1: IMU Calibration Settings
   =============================================
   PURPOSE: UI for zeroing phone IMU baseline.
   DISCOVERY: Search "rc-imu-settings" to find this section.
   JS HANDLER: sim-fire-sessions.js → _bindIMUCalibrationEvents()
   ============================================= */
.rc-imu-settings {
  padding: 10px 14px;
  border-top: 1px solid var(--paper-border, rgba(80,70,60,0.2));
  background: rgba(26, 58, 92, 0.03);
}

.rc-imu-settings-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-subtle, #666);
  margin-bottom: 8px;
}

.rc-imu-settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rc-imu-status {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
}

.rc-imu-status--calibrated {
  color: var(--success-green, #228b22);
}

.rc-imu-status--ready {
  color: var(--ink-blue, #1a3a5c);
}

.rc-imu-status--unavailable {
  color: var(--ink-subtle, #999);
}

.rc-imu-status--calibrating {
  color: var(--warning-amber, #d4a700);
}

.rc-imu-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-form, inherit);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.rc-imu-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rc-imu-btn--zero {
  background: var(--ink-blue, #1a3a5c);
  color: #fff;
  border: none;
}

.rc-imu-btn--zero:hover:not(:disabled) {
  background: #2a4a6c;
}

.rc-imu-btn--reset {
  background: transparent;
  color: var(--ink-subtle, #666);
  border: 1px solid var(--paper-border, rgba(80,70,60,0.3));
}

.rc-imu-btn--reset:hover:not(:disabled) {
  background: rgba(80,70,60,0.08);
}

/* Session picker footer with profile status */
.rc-session-picker-footer {
  padding: 10px 14px;
  background: rgba(80,70,60,0.05);
  border-top: 1px solid var(--paper-border, rgba(80,70,60,0.3));
}

.rc-profile-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-subtle, #666);
}

.profile-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.profile-status--green {
  background: var(--success-green, #228b22);
  box-shadow: 0 0 4px rgba(34,139,34,0.5);
}
.profile-status--yellow {
  background: var(--warning-amber, #d4a700);
  box-shadow: 0 0 4px rgba(212,167,0,0.5);
}
.profile-status--red {
  background: var(--error-red, #c41e3a);
  box-shadow: 0 0 4px rgba(196,30,58,0.5);
}

/* =============================================
   PRD-58 Phase 11.2: Stage Briefing & Summary
   Multi-stage session progression UI
   ============================================= */
.rc-stage-briefing {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: min(85%, 280px);
  padding: 24px 20px;
  background: var(--paper-bg, #f5f0dc);
  border: 2px solid var(--ink-blue, #1a3a5c);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  text-align: center;
}

.rc-stage-briefing-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.rc-stage-icon {
  font-size: 24px;
}

.rc-stage-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--ink-blue, #1a3a5c);
  text-transform: uppercase;
}

.rc-stage-distance {
  font-size: 36px;
  font-weight: 800;
  color: var(--ink-heading, #2c2c2c);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.rc-stage-shots {
  font-size: 12px;
  color: var(--ink-subtle, #666);
  margin-bottom: 20px;
}

.rc-stage-start-btn {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  background: var(--ink-blue, #1a3a5c);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}
.rc-stage-start-btn:hover {
  background: #142e4a;
}

/* Stage Summary Overlay */
.rc-stage-summary-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rc-stage-summary {
  width: min(85%, 280px);
  padding: 24px 20px;
  background: var(--paper-bg, #f5f0dc);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  text-align: center;
}

.rc-stage-summary-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.rc-stage-summary-header .rc-stage-icon {
  width: 32px;
  height: 32px;
  background: var(--success-green, #228b22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}

.rc-stage-summary-distance {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-heading, #2c2c2c);
  margin-bottom: 16px;
}

.rc-stage-summary-stats {
  background: rgba(80,70,60,0.08);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.rc-stage-summary-stats .stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
}
.rc-stage-summary-stats .stat-row span:first-child {
  font-weight: 600;
  color: var(--ink-subtle, #666);
}
.rc-stage-summary-stats .stat-row span:last-child {
  font-weight: 700;
  color: var(--ink-blue, #1a3a5c);
}

.rc-stage-next-btn {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  background: var(--ink-green, #2a5c3a);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}
.rc-stage-next-btn:hover {
  background: #1e4a2e;
}

/* PORTRAIT MODE: Single target view */
@media (orientation: portrait) {
  .mobile-app .target-grid {
    display: block;
    overflow: visible;
  }

  .mobile-app .target-card {
    display: none !important;
  }

  .mobile-app .target-card--active {
    display: flex !important;
    overflow: visible !important;
  }
  
  /* Show first card by default if no card is explicitly active */
  .mobile-app .target-grid:not(:has(.target-card--active)) .target-card:first-child {
    display: flex !important;
  }

  /* Touch-friendly target sketch area */
  .mobile-app .target-sketch {
    min-height: 280px;
    touch-action: none;
    overflow: visible !important;
  }

  /* Larger touch targets for data fields - thin dividers */
  .mobile-app .target-data {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    padding: 0;
    background: rgba(80, 70, 60, 0.2); /* Subtle divider color */
  }

  .mobile-app .target-data-field {
    background: var(--paper-bg, #f5f0dc);
    padding: 8px 6px;
  }

  .mobile-app .target-data-field input {
    font-size: 16px;
    padding: 4px;
    min-height: 36px;
  }
}

/* LANDSCAPE MODE: All 3 targets */
@media (orientation: landscape) {
  .mobile-app .mobile-target-selector {
    display: none;
  }

  .mobile-app .target-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  .mobile-app .target-card {
    display: flex;
  }

  /* Compact header in landscape */
  .mobile-app .card-header {
    padding: 4px 8px;
  }

  .mobile-app .env-bar {
    padding: 4px 8px;
  }

  /* Smaller target area in landscape */
  .mobile-app .target-sketch {
    min-height: 150px;
  }

  .mobile-app .target-data {
    font-size: 10px;
    gap: 1px;
    padding: 0;
    background: rgba(80, 70, 60, 0.2);
  }

  .mobile-app .target-data-field {
    background: var(--paper-bg, #f5f0dc);
    padding: 4px 3px;
  }

  .mobile-app .target-data-field input {
    font-size: 11px;
    padding: 2px;
  }
}