/* =========================================================
   APP BASE STYLES — RESTORED
   Scope: APP ONLY
   ========================================================= */

/* --- VARIABLES ----------------------------------------------------------- */

:root {
  --bg: #02221a;
  --page-bg: #fdfdfb;
  --emerald: #053827;
  --text-dark: #111827;
  --text-light: #f9fafb;
  --muted: #6b7280;
  --radius-lg: 16px;
  --radius-md: 10px;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* --- GLOBAL BODY (APP) ---------------------------------------------------- */

body {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;

  background-color: var(--bg);
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 56px 56px;

  color: var(--text-light);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- APP HEADER ----------------------------------------------------------- */

.app-header {
  padding: 18px 16px 10px;
  text-align: center;
  background: var(--emerald);
  color: var(--text-light);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.app-header h1 {
  margin: 0;
  font-family: 'Bungee', system-ui, sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}

.app-header p {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8rem;
  opacity: 0.85;
}

/* Header action buttons (coaching / logout) */
.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
}

/* --- MAIN APP LAYOUT ------------------------------------------------------ */

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px 16px;
}

/* --- APP BUTTONS ---------------------------------------------------------- */

.btn,
.action-btn {
  font-family: 'Inter', system-ui, sans-serif;
  border: none;
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  background: #ffffff;
  color: var(--text-dark);

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  will-change: transform;

  transition:
    transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 140ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn:active,
.action-btn:active,
.btn.is-pressed,
.action-btn.is-pressed {
  transform: translateY(3px) scale(0.985);
  filter: brightness(0.985);
}

/* Variants */
.btn-primary {
  background: #f97316;
  color: #111827;
  box-shadow: 0 4px 12px rgba(248,113,22,0.35);
}

.btn-secondary {
  background: #ffffff;
  color: var(--text-dark);
  border: 1px solid rgba(17, 24, 39, 0.2);
}

/* Skool buttons */
.action-btn.skool-btn {
  background: var(--emerald);
  color: var(--text-light);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 6px 18px rgba(5,56,39,0.35);
}

/* --- HOME ICON BUTTON ----------------------------------------------------- */

.icon-btn {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.icon-btn:hover {
  background: rgba(255,255,255,0.08);
}

.icon-btn .home-icon {
  width: 44px;
  height: 44px;
  display: block;
  background: var(--emerald);
  -webkit-mask: url("home-mask.png") center / contain no-repeat;
  mask: url("home-mask.png") center / contain no-repeat;
}

/* White icon in header */
.app-header .icon-btn .home-icon {
  background: #ffffff;
}

/* --- APP VIEWS ------------------------------------------------------------ */

/* Default: hide all views */
.home-screen,
.feedback-screen,
.previous-runs-screen,
.day-list,
.day-content {
  display: none;
}

/* Home view */
body.home-view .home-screen {
  display: flex;
}
body.home-view .app-header {
  display: flex;
}

/* Feedback view */
body.feedback-view .feedback-screen {
  display: block;
}

/* Previous runs view */
body.previous-runs-view .previous-runs-screen {
  display: block;
}

/* Workbook view */
body:not(.home-view):not(.feedback-view):not(.previous-runs-view) .day-list,
body:not(.home-view):not(.feedback-view):not(.previous-runs-view) .day-content {
  display: block;
}

/* --- WARNING / CONFIRM MODAL --------------------------------------------- */

.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

.confirm-overlay.open {
  display: flex;
}

.confirm-modal {
  width: min(520px, 94vw);
  background: #ffffff;
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}

.confirm-modal h3 {
  margin: 0 0 8px;
  font-family: "Bungee", system-ui, sans-serif;
  letter-spacing: 1px;
  color: var(--text-dark);
}

.confirm-modal p {
  margin: 0 0 14px;
  font-family: "Inter", system-ui, sans-serif;
  color: #374151;
  line-height: 1.35;
}

.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* --- FOOTER --------------------------------------------------------------- */

.app-footer {
  text-align: center;
  padding: 6px 0 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  color: var(--muted);
}

/* --- REDUCED MOTION ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .action-btn,
  .icon-btn {
    transition: none !important;
  }
}

/* =========================================================
   SHARED BUTTON IDENTITY (APP ECHOES HOMEPAGE)
   ========================================================= */

:root {
  --btn-radius: 999px;
  --btn-font: 'Bungee', system-ui, sans-serif;
  --btn-letter-spacing: 0.08em;
}

/* App buttons echo homepage buttons */
.btn,
.action-btn {
  font-family: var(--btn-font);
  letter-spacing: var(--btn-letter-spacing);
  border-radius: var(--btn-radius);
}
/* App-specific sizing (smaller than homepage) */
.btn,
.action-btn {
  padding: 8px 14px;
  font-size: 0.85rem;
}
/* Echo homepage white-pill buttons */
.btn,
.action-btn {
  background: #ffffff;
  color: #111827;
  border: 1px solid rgba(17, 24, 39, 0.18);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
/* =========================================================
   APP INTERNAL BUTTONS — VISUAL ALIGNMENT
   ========================================================= */

/* Treat app home buttons like real buttons */
.home-action-btn,
.nav-btn,
button {
  font-family: var(--btn-font);
  letter-spacing: var(--btn-letter-spacing);
  border-radius: var(--btn-radius);

  background: #ffffff;
  color: #111827;

  border: 1px solid rgba(17, 24, 39, 0.18);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);

  padding: 8px 14px;
  font-size: 0.85rem;
}

/* Press feedback */
.home-action-btn:active,
.nav-btn:active,
button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}


/* =========================================================
   Phase 1.5 FIX — Navigation Layout Authority
   Purpose:
   - Remove legacy sidebar / bar behavior from navigation
   - Ensure nav is a single horizontal row
   - Ensure nav scrolls with content (header is sticky)
   ========================================================= */

/* Navigation should be normal flow, horizontal */
.day-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;

  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  width: 100%;
  max-width: none;
  margin: 0;
  padding: 8px 12px;

  background: transparent;
  box-shadow: none;
  border: none;

  overflow: visible;
}

/* Nav container: single row */
.day-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: min(1100px, 100%);
  margin: 0 auto;
}

/* Prevent mobile/desktop grid stacking */
.day-nav > * {
  flex: 0 0 auto !important;
}

/* Disable any sidebar-style assumptions */
@media (min-width: 768px) {
  .app-main {
    flex-direction: column !important;
  }

  .day-list {
    max-width: none !important;
  }
}

/* Ensure content anchors below sticky header */
.day-content {
  scroll-margin-top: 90px;
}

/* =========================================================
   FINAL NAV BEHAVIOR — Sticky under header
   ========================================================= */

/* Header stays at the top */
.app-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Navigation sticks directly under the header */
.day-list {
  position: sticky;
  top: 84px; /* header height — adjust if needed */
  z-index: 900;

  background: var(--bg);
}

/* Ensure content scrolls under both */
.day-content {
  scroll-margin-top: 140px;
}

/* =========================================================
   FINAL: Sticky navigation under sticky header
   ========================================================= */

/* 1. Header sticks to the top */
.app-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* 2. Navigation sticks directly below the header */
.day-list {
  position: sticky;
  top: 96px;              /* header height */
  z-index: 900;

  background: var(--bg);  /* prevent content bleed-through */
}

/* 3. Ensure no parent blocks sticky positioning */
.app-main,
body {
  overflow: visible;
}

/* 4. Content scrolls beneath both */
.day-content {
  scroll-margin-top: 160px;
}