/* =========================================================================
   App content inside the iPhone screen.
   1:1 from DSOPlaner/AtlasTab.swift (FloatingMainCard) + DesignTokens.swift.

   Sizing convention: 1pt on the 440pt iPhone screen = (1/440)*100 ≈ 0.227cqw.
   The .iphone-screen has container-type: size, so cqw/cqh map to the screen
   container — pixel-identical scaling to the real app.
   ========================================================================= */

/* ---------- App root (below status bar) -------------------------------- */
.app-frame {
  position: absolute;
  inset: 0;
  /* Phase 4: Atlas canvas is the base layer; app-frame is transparent so the
     sky shows through everywhere except the MainCard / AIInput / status bar. */
  background: transparent;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;       /* Stack is bottom-anchored (safeAreaInset) */
  padding: 0 2.727cqw 0;           /* h: 12pt (AtlasTab.swift:320), bottom: 0 (safe-area handles it) */
}

/* Outer VStack (AtlasTab.swift:269) — MainCard + AIInputView, spacing 8.
   .padding(.bottom, 0) on the stack + safe-area inset (~34pt home indicator).
   In the mock we approximate the safe area with bottom padding. */
.mc-bottom-stack {
  display: flex;
  flex-direction: column;
  /* spacing 8 (VStack) + 12pt bar-top-padding (AIInputView:340) = 20pt visible gap.
     We use gap 8 and let the bar carry its own internal top padding. */
  gap: 1.818cqw;                   /* 8pt */
  padding-bottom: 7.727cqw;        /* ~34pt home-indicator safe-area approximation */
}

/* =========================================================================
   FloatingMainCard
   AtlasTab.swift:1461 (mainCardBody) + 1757–1762 (background/stroke)
   ========================================================================= */

.maincard {
  width: 100%;
  border-radius: 4.545cqw;         /* 20pt */
  /* Background: ultraThinMaterial + black 0.45 overlay (Swift 1758–1761).
     In an empty black screen there's nothing to blur — the dark tint is what
     visually defines the panel. backdrop-filter will kick in once the atlas
     renders behind it in Phase 4. */
  background: rgba(28, 28, 30, 0.62);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 0.182cqw solid rgba(255, 255, 255, 1); /* 0.8pt fully opaque white (Swift 1762) */
  overflow: hidden;
  isolation: isolate;
}

/* ---- Header block (Swift 1462–1471) ---- */
.mc-header {
  display: flex;
  flex-direction: column;
  gap: 0.909cqw;                   /* 4pt */
  padding: 3.636cqw 3.636cqw 1.818cqw; /* top 16, h 16, bottom 8 */
}

/* ---- Equipment line (Swift 1765–1799) ---- */
.mc-equip {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.mc-equip-name {
  font-size: 3.864cqw;             /* 17pt */
  font-weight: 600;
  color: var(--fg);                /* #E8E4DD */
  letter-spacing: -0.005em;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mc-equip-sep {
  font-size: 2.614cqw;             /* 11.5pt */
  font-weight: 300;
  color: rgba(232, 228, 221, 0.6);
  font-variant-numeric: tabular-nums;
  /* font-family inherited from body (Inter, SF Pro fallback); tabular-nums above keeps digits aligned. */
  white-space: pre;
}

.mc-sampling-dot {
  font-size: 2.614cqw;
  font-weight: 300;
  line-height: 1;
  /* Color set inline per Swift dsoSamplingDotColor thresholds (line 1399–1413) */
}

.mc-sampling-val {
  font-size: 2.614cqw;             /* 11.5pt */
  font-weight: 300;
  color: rgba(232, 228, 221, 0.6);
  font-variant-numeric: tabular-nums;
  /* font-family inherited from body (Inter, SF Pro fallback); tabular-nums above keeps digits aligned. */
}

/* ---- Context line (Swift 1837–1847) ---- */
.mc-context {
  display: flex;
  align-items: center;
  gap: 0.682cqw;                   /* 3pt spacing */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mc-moon {
  width: 2.273cqw;                 /* 10pt */
  height: 2.273cqw;
  opacity: 0.45;
  flex-shrink: 0;
  display: block;
}

.mc-context-text {
  font-size: 2.614cqw;             /* 11.5pt */
  font-weight: 300;
  color: rgba(232, 228, 221, 0.45);
  font-variant-numeric: tabular-nums;
  /* font-family inherited from body (Inter, SF Pro fallback); tabular-nums above keeps digits aligned. */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Chip row (Swift 1473–1629) ---- */
.mc-chips-scroll {
  padding-bottom: 2.727cqw;        /* 12pt (DSPSpacing.md) */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mc-chips-scroll::-webkit-scrollbar { display: none; }

.mc-chips {
  display: flex;
  gap: 1.818cqw;                   /* 8pt */
  padding: 0.455cqw 3.636cqw;      /* v 2pt, h 16pt */
  width: max-content;              /* allow horizontal overflow */
}

/* ---- ChipView (Swift 2309–2337) ---- */
.mc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.818cqw 3.182cqw;      /* v 8pt, h 14pt */
  font-size: 2.955cqw;             /* 13pt */
  font-weight: 400;
  color: rgba(232, 228, 221, 0.8);
  background: rgba(255, 255, 255, 0.05);
  border: 0.227cqw solid rgba(255, 255, 255, 0.12); /* 1pt */
  border-radius: 9999px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.mc-chip:hover {
  background: rgba(255, 255, 255, 0.075);
}

/* Star chip is rendered at 15pt instead of 13pt (Swift 1587). */
.mc-chip-star {
  font-size: 3.409cqw;             /* 15pt */
  line-height: 1;
  padding-top: 1.59cqw;            /* compensate vertical centering */
  padding-bottom: 1.59cqw;
}

/* Active / primary chip — kept here for Phase 3 (no chip is active in default state). */
.mc-chip.is-active,
.mc-chip.is-primary {
  color: var(--accent-green);
  background: rgba(76, 175, 80, 0.12);
  border-color: rgba(76, 175, 80, 0.4);
}

/* =========================================================================
   AIInputView (AIInputView.swift:222–353)
   Default state: no resultText banner, not processing, not focused.
   ========================================================================= */

.mc-input-wrap {
  /* AIInputView.swift:340–341: .padding(.top, 12) .padding(.bottom, 12) on the bar. */
  padding-top: 2.727cqw;           /* 12pt */
  padding-bottom: 2.727cqw;        /* 12pt */
}

.mc-input-bar {
  display: flex;
  align-items: center;
  gap: 2.273cqw;                   /* 10pt HStack spacing (line 270) */
  padding: 3.636cqw 3.636cqw;      /* v 16pt, h 16pt (line 336–337) */
  /* ultraThinMaterial.opacity(0.75) (line 338) — slightly less opaque than MC. */
  background: rgba(28, 28, 30, 0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 0.182cqw solid rgba(255, 255, 255, 1); /* 0.8pt full white (line 339) */
  border-radius: 5.0cqw;           /* 22pt (lines 338–339) */
}

/* Sparkles icon (line 271–273) — SF Symbol "sparkles", 16pt, white 0.5 opacity. */
.mc-input-icon {
  width: 3.636cqw;                 /* 16pt */
  height: 3.636cqw;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
  display: block;
}

/* TextField (line 295–302) — 15pt regular, white, placeholder muted. */
.mc-input-field {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  font-family: inherit;
  font-size: 3.409cqw;             /* 15pt */
  font-weight: 400;
  color: #ffffff;
  caret-color: #ffffff;
  line-height: 1.2;
}

.mc-input-field::placeholder {
  color: rgba(255, 255, 255, 0.4); /* iOS default placeholder tone */
  opacity: 1;                       /* Firefox/Safari reset */
}

/* =========================================================================
   SuggestionsPanel + SuggestionRow
   1:1 from DSOPlaner/AtlasTab.swift:1935–2049 (panel) + 2051–2305 (row)
   Renders inside MainCard between chip row and AIInputView.
   Transition: move(edge:.bottom)+opacity, spring(response:0.4, dampFrac:0.85).
   ========================================================================= */

.mc-suggestions {
  /* Collapsed state: zero height, fully translated down, faded out.
     Open state ([data-open=true]): natural height, settled, opaque.
     We animate grid-template-rows so neighbours (input bar) reflow smoothly. */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.40s cubic-bezier(0.34, 1.12, 0.64, 1),
    opacity 0.30s ease-out;
  will-change: grid-template-rows, opacity;
}

.mc-suggestions > .mc-rows {
  min-height: 0;          /* required for grid 1fr→0fr collapse */
  overflow: hidden;
  transform: translateY(8%);
  transition: transform 0.40s cubic-bezier(0.34, 1.12, 0.64, 1);
}

.mc-suggestions[data-open="true"] {
  grid-template-rows: 1fr;
  opacity: 1;
}

.mc-suggestions[data-open="true"] > .mc-rows {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .mc-suggestions,
  .mc-suggestions > .mc-rows {
    transition-duration: 0.001s;
  }
}

/* ---- Rows list (Swift VStack spacing 0, padding(.bottom, DSPSpacing.md)) ---- */
.mc-rows {
  list-style: none;
  margin: 0;
  padding: 0 0 2.727cqw 0;          /* bottom 12pt (DSPSpacing.md) */
  display: flex;
  flex-direction: column;
}

/* ---- SuggestionRow (Swift HStack, padding h:DSPSpacing.lg v:11pt) ---- */
.mc-row {
  display: flex;
  align-items: center;              /* HStack default alignment */
  gap: 0;                           /* explicit Spacer().frame(width:12) elements below */
  padding: 2.5cqw 3.636cqw;         /* v 11pt, h 16pt (DSPSpacing.lg) */
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

/* Image 45x45, cornerRadius 10 (Swift 2141) */
.mc-row-img {
  width: 10.227cqw;                 /* 45pt */
  height: 10.227cqw;
  border-radius: 2.273cqw;          /* 10pt */
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  background: #1a1a1a;              /* placeholder while loading */
}

/* Text block (Swift Button label - VStack alignment:.leading, spacing:4) */
.mc-row-text {
  flex: 1;
  min-width: 0;
  margin: 0 0 0 2.727cqw;           /* Spacer width 12 (gap before text) */
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.909cqw;                    /* 4pt VStack spacing */
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.mc-row-text:active { opacity: 0.7; }

/* Line 1 — Name + Grade badge (Swift HStack alignment:.center spacing:8) */
.mc-row-line1 {
  display: flex;
  align-items: center;
  gap: 1.818cqw;                    /* 8pt */
  width: 100%;
  min-width: 0;
}

/* Name: 14pt medium, foreground.opacity(0.9), lineLimit(1) (Swift 2152–2156) */
.mc-row-name {
  flex: 1;
  min-width: 0;
  font-size: 3.182cqw;              /* 14pt */
  font-weight: 500;
  color: rgba(232, 228, 221, 0.9);  /* DSPColor.foreground.opacity(0.9) */
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Grade badge: 10pt mono semibold, 18x18 box, bg = gradeColor.opacity(0.2),
   cornerRadius 5 (Swift 2167–2171). Grade A → accentGreen #4CAF50. */
.mc-row-grade {
  flex-shrink: 0;
  width: 4.091cqw;                  /* 18pt */
  height: 4.091cqw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* font-family inherited from body (Inter, SF Pro fallback); tabular-nums above keeps digits aligned. */
  font-size: 2.273cqw;              /* 10pt */
  font-weight: 600;
  border-radius: 1.136cqw;          /* 5pt */
  line-height: 1;
}

.mc-row-grade[data-grade="A"] { color: #4CAF50; background: rgba(76,175,80,0.20); }
.mc-row-grade[data-grade="B"] { color: #FFC107; background: rgba(255,193,7,0.20); }
.mc-row-grade[data-grade="C"] { color: #FF9800; background: rgba(255,152,0,0.20); }
.mc-row-grade[data-grade="D"] { color: #F44336; background: rgba(244,67,54,0.20); }
.mc-row-grade[data-grade="E"] { color: #B71C1C; background: rgba(183,28,28,0.20); }

/* Lines 2 & 3 — 11.5pt light monospacedDigit, 0.6 opacity, lineLimit(1) */
.mc-row-sub {
  font-size: 2.614cqw;              /* 11.5pt */
  font-weight: 300;
  color: rgba(232, 228, 221, 0.6);
  font-variant-numeric: tabular-nums;
  /* font-family inherited from body (Inter, SF Pro fallback); tabular-nums above keeps digits aligned. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  line-height: 1.18;
}

/* Plus / Star buttons — 36x36 tap area, icon 15pt (Swift 2204–2222) */
.mc-row-action {
  flex-shrink: 0;
  width: 8.182cqw;                  /* 36pt */
  height: 8.182cqw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 2.727cqw;            /* Spacer 12 before plus; plus→star no spacer in Swift */
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.mc-row-action + .mc-row-action { margin-left: 0; }  /* star button: no gap after plus */

.mc-row-action svg {
  width: 3.409cqw;                  /* 15pt */
  height: 3.409cqw;
}

/* Plus: foreground.opacity(0.4) inactive (Swift 2206) */
.mc-row-plus      { color: rgba(232, 228, 221, 0.4); }
.mc-row-plus:hover{ color: rgba(232, 228, 221, 0.7); }

/* Star: foreground.opacity(0.2) when not favorite (Swift 2217) */
.mc-row-star      { color: rgba(232, 228, 221, 0.2); }
.mc-row-star:hover{ color: rgba(232, 228, 221, 0.5); }
.mc-row-star.is-fav { color: #FFD60A; }   /* .yellow */

.mc-row-action:active { transform: scale(0.92); }

/* Divider (Swift 2028–2030): white opacity 0.05, padding-h DSPSpacing.lg */
.mc-row-div {
  height: 0.114cqw;                  /* 0.5pt — SwiftUI Divider default */
  background: rgba(255, 255, 255, 0.05);
  margin: 0 3.636cqw;                /* 16pt h */
}

/* Active state for Tonight chip while panel open */
.mc-chip[aria-pressed="true"] {
  color: var(--accent-green);
  background: rgba(76, 175, 80, 0.12);
  border-color: rgba(76, 175, 80, 0.4);
}

/* Other 4 chips: press-down feedback only */
.mc-chip:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.10);
}

/* Plus toggled into +Frames: accentGreen (Swift 2206 isInFrames branch). */
.mc-row-plus.is-in-frames { color: #4CAF50; }
.mc-row-plus.is-in-frames:hover { color: #6FBF73; }

/* =========================================================================
   Chip-Set Swap (Phase 3 fix)
   When the MainCard enters "tonight" mode the default chip set is replaced
   by the type-filter pills (AtlasTab.swift:1476–1501).
   ========================================================================= */

.mc-chips-scroll[data-mode="default"] .mc-chips-default { display: flex; }
.mc-chips-scroll[data-mode="default"] .mc-chips-tonight {
  display: none;
}

.mc-chips-scroll[data-mode="tonight"] .mc-chips-default {
  display: none;
}
.mc-chips-scroll[data-mode="tonight"] .mc-chips-tonight { display: flex; }

/* Active state for type-filter chip (toggled via JS) */
.mc-chips-tonight .mc-chip.is-active {
  color: var(--accent-green);
  background: rgba(76, 175, 80, 0.12);
  border-color: rgba(76, 175, 80, 0.4);
}

/* The pill row scrolls horizontally — fade the right edge to hint at overflow */
.mc-chips-scroll {
  -webkit-mask-image: linear-gradient(to right,
    black calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to right,
    black calc(100% - 18px), transparent 100%);
}

/* Tabular-nums helper — applied wherever we previously declared Menlo. */
.mc-equip-sep, .mc-sampling-dot, .mc-sampling-val,
.mc-context-text, .mc-row-sub {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv11' 1, 'ss01' 1;
}