/* CutTracker v18 — branded mobile/iPad quality and accessibility pass */
:root {
  --brand-bg: #080b10;
  --brand-panel: #111722;
  --brand-panel-2: #151d29;
  --brand-panel-3: #1a2432;
  --brand-orange: #ff5a1f;
  --brand-orange-bright: #ff8a3d;
  --brand-cyan: #37c8ff;
  --brand-cyan-soft: #8fddff;
  --brand-text: #f8fafc;
  --brand-muted: #b4bfce;
  --brand-subtle: #8e9aac;
  --brand-line: rgba(214, 228, 247, .16);
  --brand-success: #50dda0;
  --brand-danger: #ff7f76;
  --orange: var(--brand-orange);
  --orange-dark: var(--brand-orange-bright);
  --blue: var(--brand-cyan);
  --green: var(--brand-success);
  --ink: var(--brand-text);
  --muted: var(--brand-muted);
  --line: var(--brand-line);
  --bg: var(--brand-bg);
  color-scheme: dark;
}

html, body { background-color: var(--brand-bg); }
body {
  overflow-x: clip;
  color: var(--brand-text);
  background:
    radial-gradient(circle at 8% -8%, rgba(255,90,31,.18), transparent 28rem),
    radial-gradient(circle at 100% 12%, rgba(55,200,255,.10), transparent 31rem),
    linear-gradient(180deg, #080b10 0%, #090d13 55%, #070a0f 100%);
}
body::before { opacity: .14; }

/* Brand identity */
.branded-logo { gap: 12px; }
.brand-logo-mark { width: 48px; height: 48px; flex: 0 0 auto; filter: drop-shadow(0 8px 20px rgba(255,74,17,.28)); }
.brand-wordmark { display: grid; min-width: 0; gap: 2px; }
.brand-wordmark strong {
  color: #f8fafc;
  font-size: 1.18rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.045em;
  line-height: 1;
}
.brand-wordmark strong em { color: var(--brand-orange); font-style: inherit; }
.brand-wordmark small { color: #9aa8ba; font-size: .47rem; font-weight: 850; letter-spacing: .17em; white-space: nowrap; }
.branded-mobile-logo { display: inline-flex !important; align-items: center; gap: 7px; min-width: 0; }
.branded-mobile-logo img { width: 34px; height: 34px; filter: drop-shadow(0 6px 15px rgba(255,74,17,.30)); }
.branded-mobile-logo > span { color: #f8fafc; font-size: 1rem; font-weight: 900; font-style: italic; letter-spacing: -.045em; white-space: nowrap; }
.branded-mobile-logo em { color: var(--brand-orange); font-style: inherit; }

.app-sidebar { background: rgba(6,9,14,.95); border-color: var(--brand-line); }
.side-nav { margin-top: 46px; }
.nav-link { color: #a1adbd; }
.nav-link:hover { color: #fff; }
.nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(255,90,31,.26), rgba(55,200,255,.08));
  box-shadow: inset 0 0 0 1px rgba(255,107,51,.35), 0 9px 28px rgba(0,0,0,.22);
}
.nav-link.active svg { color: var(--brand-orange-bright); }
.sidebar-footer p, .logo-copy small { color: #9aa6b5; }

/* Readability */
.view-header h1 span { color: #a7b2c1; }
.view-header > div > p:last-child,
.master-checklist-head p,
.flow-step-heading p,
.master-task-copy small,
.flow-stretch-copy > small,
.flow-details ol,
.flow-details p,
.master-log-panel-heading small,
.data-card p,
.settings-summary-line span,
.goal-widget p,
.goal-ring span,
.stat-strip small,
.session-list li,
.stretch-steps,
.stretch-tip,
.settings-dialog-head p,
.settings-grid small { color: var(--brand-muted) !important; }
.stat-strip span,
.hero-label-row,
.hero-targets span,
.progress-summary span,
.progress-summary small,
.flow-prescription-grid span,
.cardio-log-grid label > span,
.master-log-fields label > span,
.master-log-wide > span,
.settings-grid label > span { color: #a6b2c2 !important; }
input::placeholder, textarea::placeholder { color: #7f8b9b !important; }

/* Stronger product surfaces */
.hero-card {
  border-color: rgba(225,235,247,.15);
  background:
    radial-gradient(circle at 84% 13%, rgba(255,90,31,.40), transparent 28%),
    radial-gradient(circle at 68% 115%, rgba(55,200,255,.18), transparent 38%),
    linear-gradient(145deg, #1a2230 0%, #0f141d 52%, #080b10 100%);
}
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.035), transparent 34%);
}
.status-pill { color: #110a06; background: linear-gradient(135deg, #ffad72, #ff5a1f); }
.hero-card-copy > p { color: #c0cad7; }
.hero-targets div { border-color: rgba(223,235,250,.14); background: rgba(255,255,255,.055); }
.goal-ring { background: conic-gradient(var(--brand-orange) calc(var(--progress) * 1%), rgba(230,239,252,.11) 0); }

.branded-stat-strip { grid-template-columns: repeat(6, minmax(0,1fr)); }
.cardio-stat { border-color: rgba(255,90,31,.28) !important; background: linear-gradient(160deg, rgba(255,90,31,.12), rgba(17,23,34,.98)) !important; }
.cardio-stat strong { color: #ff9c69 !important; }

.master-checklist-head,
.master-checklist-progress,
.flow-step,
.data-card,
.recovery-banner,
.progress-card,
.stretch-card { border-color: var(--brand-line); }
.master-checklist-head {
  background: linear-gradient(145deg, rgba(25,34,47,.98), rgba(13,18,26,.98));
}
.master-checklist-head > div > span, .flow-step-heading small, .eyebrow { color: var(--brand-orange-bright) !important; }
.flow-step { background: rgba(15,21,30,.96); }
.flow-step > header { background: linear-gradient(180deg, rgba(27,36,49,.98), rgba(19,26,37,.98)); }
.flow-step-body, .master-log-panels { background: #0c1118; }
.flow-step > header > .master-group-count { color: #a1adbd; }
.flow-step-number { background: linear-gradient(145deg, #ff9d59, #ff4b12); }

.master-check { border-color: #7c8898; background: #111923; }
.flow-check-control:hover .master-check { border-color: #b0bdcd; }

.flow-stretch-card,
.flow-exercise-card,
.flow-primary-task,
.inline-log-card,
.master-log-panel { border-color: rgba(218,231,248,.15); background: linear-gradient(145deg, #17202c, #10161f); }
.flow-stretch-copy > strong,
.flow-exercise-copy strong,
.master-task-copy strong,
.master-log-panel-heading strong,
.inline-log-head strong { color: #fff; }
.flow-item-kicker, .flow-exercise-copy small, .stretch-area { color: var(--brand-cyan-soft) !important; }
.flow-details summary { color: #ff9b68; }
.rule-chips span { color: #c1c9d5; border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.065); }
.flow-prescription-grid { background: rgba(5,8,12,.48); }
.flow-prescription-grid strong { color: #f2f5f8; }

/* Accessible controls */
.cardio-log-grid input,
.cardio-log-grid select,
.flow-prescription-grid input,
.master-log-fields input,
.master-log-fields select,
.master-log-fields textarea,
.master-log-wide textarea,
.settings-grid input,
.settings-grid select {
  border-color: rgba(215,229,247,.22);
  color: #fff;
  background: #090e15;
}
.cardio-log-grid input:focus,
.cardio-log-grid select:focus,
.flow-prescription-grid input:focus,
.master-log-fields input:focus,
.master-log-fields select:focus,
.master-log-fields textarea:focus,
.master-log-wide textarea:focus,
.settings-grid input:focus,
.settings-grid select:focus {
  border-color: #ff834d;
  background: #0e151f;
  box-shadow: 0 0 0 4px rgba(255,90,31,.16);
}
select option { color: #fff; background: #101722; }

/* Cardio logging is a primary feature, not a hidden afterthought */
.cardio-inline-log {
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(255,104,47,.42);
  background:
    radial-gradient(circle at 100% 0%, rgba(255,90,31,.16), transparent 17rem),
    linear-gradient(145deg, #18212e, #0e141d);
  box-shadow: 0 18px 45px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.04);
}
.cardio-log-title { align-items: flex-start; }
.cardio-log-title > div { display: grid; gap: 3px; }
.cardio-log-title > div > span { color: #ff9a64; font-size: .61rem; font-weight: 950; letter-spacing: .14em; }
.cardio-log-title > div > strong { font-size: 1.12rem; }
.cardio-log-title > div > small { color: var(--brand-muted); font-size: .69rem; line-height: 1.45; }
.cardio-target-chip {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid rgba(255,122,67,.35);
  border-radius: 999px;
  color: #ffd0b7 !important;
  background: rgba(255,90,31,.11);
  font-size: .63rem !important;
  font-weight: 850;
  white-space: nowrap;
}
.cardio-log-grid { grid-template-columns: 1.18fr .82fr .95fr; gap: 11px; }
.cardio-log-grid label { display: grid; gap: 7px; min-width: 0; }
.cardio-log-grid label > span { font-size: .63rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.cardio-log-grid select { width: 100%; min-width: 0; padding-inline: 13px; }
.metric-input-wrap { position: relative; min-width: 0; }
.metric-input-wrap input { width: 100%; padding-right: 48px; font-size: 1.02rem; font-weight: 850; }
.metric-input-wrap b { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: #9aa8ba; font-size: .66rem; pointer-events: none; }
.calorie-field .metric-input-wrap input { border-color: rgba(255,115,59,.38); }
.cardio-save-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 14px; margin-top: 14px; }
.cardio-save-row .target-meter { min-width: 0; margin: 0; }
.cardio-save-row .target-meter strong { color: #fff; }
.cardio-save-row .target-meter small { color: var(--brand-muted); }
.cardio-save-button {
  min-height: 50px;
  padding: 0 19px;
  border: 0;
  border-radius: 14px;
  color: #130903;
  background: linear-gradient(135deg, #ff9d59, #ff4b12);
  box-shadow: 0 12px 28px rgba(255,75,18,.24), inset 0 1px rgba(255,255,255,.38);
  font-weight: 900;
  touch-action: manipulation;
}
.cardio-save-button:active { transform: scale(.98); }
.cardio-icon { background: linear-gradient(145deg, #ff8648, #ed3e0c); color: #180a03; }

/* Header and navigation */
.mobile-header {
  border-bottom: 1px solid rgba(214,228,247,.13);
  background: rgba(7,10,15,.88);
  box-shadow: 0 12px 35px rgba(0,0,0,.22);
}
.header-action { border: 1px solid rgba(218,231,248,.17); color: #fff; background: #131b26; }
.settings-header-action { font-size: 1.08rem; }
#mobileSaveShortcut { color: #180a03; background: linear-gradient(135deg, #ff9d59, #ff4b12); }
.bottom-nav { border-color: rgba(218,231,248,.16); background: rgba(12,17,24,.93); }
.bottom-nav .nav-link { color: #9aa7b7; }
.bottom-nav .nav-link.active { color: #fff; background: linear-gradient(145deg, rgba(255,90,31,.23), rgba(55,200,255,.08)); box-shadow: inset 0 0 0 1px rgba(255,107,51,.30); }

/* Settings and data */
.settings-dialog { background: #0c121a; }
.settings-grid label { border-color: rgba(218,231,248,.14); background: #131b26; }
.settings-note { color: #c7eefe; border-color: rgba(55,200,255,.30); background: rgba(55,200,255,.10); }
.storage-location { color: #b4bfce; }

/* Mobile and iPad hardening */
@media (max-width: 1199px) {
  body { overscroll-behavior-y: none; }
  .mobile-header {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    min-height: calc(66px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
  #mobileHeaderTitle { display: none; }
  .mobile-header-actions { display: flex; align-items: center; gap: 7px; }
  .header-action { min-width: 44px; min-height: 44px; padding-inline: 12px; }
  .app-main { width: 100%; max-width: 100%; }
  .app-view, .home-log-form, .master-checklist, .flow-step, .flow-step-body { min-width: 0; max-width: 100%; }
  .date-control { backdrop-filter: blur(24px); }
  .branded-stat-strip { grid-template-columns: repeat(6, minmax(148px,1fr)); }
  .flow-stretch-copy, .flow-exercise-copy, .master-task-copy, .flow-step-heading { min-width: 0; }
  .flow-stretch-copy strong, .flow-exercise-copy strong, .master-task-copy strong, .flow-step-heading strong { overflow-wrap: anywhere; }
  .settings-dialog { max-height: calc(100dvh - env(safe-area-inset-top)); }
}

@media (min-width: 700px) and (max-width: 1199px) {
  .mobile-header { padding-inline: 22px; }
  .branded-mobile-logo > span { font-size: 1.16rem; }
  .app-main { padding-inline: 22px; }
  .branded-stat-strip { grid-template-columns: repeat(6, minmax(160px,1fr)); }
  .cardio-inline-log { padding: 20px; }
}

@media (max-width: 699px) {
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .mobile-header { padding-inline: 12px; }
  .branded-mobile-logo img { width: 33px; height: 33px; }
  .branded-mobile-logo > span { font-size: .98rem; }
  #mobileSaveShortcut { min-width: 62px; font-size: .71rem; }
  .app-main { padding-inline: 10px; }
  .hero-card { padding: 22px 17px; }
  .hero-card h2 { font-size: clamp(3rem, 16vw, 4.7rem); }
  .hero-targets { grid-template-columns: 1fr; }
  .hero-targets div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .hero-targets strong { margin-top: 0; text-align: right; }
  .goal-widget { grid-template-columns: 100px minmax(0,1fr); }
  .goal-ring { width: 96px; height: 96px; }
  .goal-ring::before { width: 74px; height: 74px; }
  .branded-stat-strip { grid-template-columns: repeat(6, 142px); }
  .master-checklist-head { gap: 15px; }
  .master-checklist-head h2 { font-size: 1.45rem; }
  .master-checklist-head p { font-size: .75rem; line-height: 1.5; }
  .flow-step > header { grid-template-columns: 44px minmax(0,1fr); }
  .flow-step > header > .master-group-count { grid-column: 2; justify-self: start; }
  .flow-step-number { flex: 0 0 auto; }
  .flow-stretch-card { grid-template-columns: 38px 78px minmax(0,1fr); }
  .flow-stretch-card > img { width: 78px; height: 104px; }
  .flow-stretch-copy > strong { font-size: .83rem; line-height: 1.25; }
  .flow-details summary { color: #ffad82; }
  .flow-primary-task { grid-template-columns: 38px 46px minmax(0,1fr); }
  .cardio-inline-log { padding: 14px; border-radius: 18px; }
  .cardio-log-title { display: grid; gap: 10px; }
  .cardio-target-chip { justify-self: start; }
  .cardio-log-grid { grid-template-columns: 1fr 1fr; }
  .cardio-type-field { grid-column: 1 / -1; }
  .cardio-save-row { grid-template-columns: 1fr; }
  .cardio-save-button { width: 100%; min-height: 52px; }
  .flow-prescription-grid { grid-template-columns: 1fr 1fr; }
  .master-log-fields { grid-template-columns: 1fr 1fr; }
  .master-log-wide { grid-column: 1 / -1; }
  .data-actions { grid-template-columns: 1fr; }
  .data-actions .file-button { grid-column: auto; }
  input, select, textarea { font-size: 16px !important; }
  .bottom-nav { width: calc(100vw - 18px); bottom: calc(6px + env(safe-area-inset-bottom)); border-radius: 22px; }
  .bottom-nav .nav-link { min-width: 0; }
}

@media (max-width: 390px) {
  .branded-mobile-logo > span { font-size: .88rem; }
  .header-action { padding-inline: 10px; }
  #mobileSaveShortcut { min-width: 54px; }
  .date-copy strong { font-size: .70rem; }
  .flow-stretch-card { grid-template-columns: 36px 68px minmax(0,1fr); }
  .flow-stretch-card > img { width: 68px; height: 92px; }
  .cardio-log-grid, .master-log-fields, .flow-prescription-grid { grid-template-columns: 1fr; }
  .cardio-type-field, .master-log-wide { grid-column: auto; }
}

@media (prefers-contrast: more) {
  :root { --brand-line: rgba(235,242,252,.30); --brand-muted: #d5dce5; }
  .master-check { border-width: 2px; }
}
/* Higher-specificity fixes for legacy light-card rules */
.flow-cardio-detail .cardio-inline-log {
  color: var(--brand-text);
  border-color: rgba(255,104,47,.42);
  background:
    radial-gradient(circle at 100% 0%, rgba(255,90,31,.16), transparent 17rem),
    linear-gradient(145deg, #18212e, #0e141d);
}
.save-badge.saved {
  color: #9ceac5;
  border-color: rgba(80,221,160,.28);
  background: rgba(80,221,160,.10);
}