/* Native-only presentation. Web colors and layout remain in style.css. */
html.native-onyx {
  --forest: #262628;
  --forest-dark: #171719;
  --forest-light: #505053;
  --brand-rgb: 28,28,30;
  --brand-deep-rgb: 17,17,19;
  --deep-green: #1d1d20;
  --positive-green: #424246;
  --light-green: #ecebea;
  --soft-green: #747477;
  --ink-green: #29292b;
  --bright-green: #76767a;
  --cream: #f1eee8;
  --cream-soft: #faf9f6;
  --paper: #faf9f6;
  --surface: #faf9f6;
  --rule: rgba(25,25,28,.1);
  --shadow: 0 10px 30px rgba(20,20,23,.08);
  background: #f5f3ef;
}
html.native-onyx body { background: linear-gradient(155deg, #fdfcf9, #f2f0eb); }
html.native-onyx .bottom-nav { background: rgba(250,249,246,.96); border-top-color: #dedcd7; }
html.native-onyx .bottom-nav .active { background: linear-gradient(145deg,#343437,#131315); color: #fff; box-shadow: inset 0 1px 0 #5d5d60; }
html.native-onyx .bottom-nav .active svg { color: #fff; }
html.native-onyx #home-content.native-today > .hero-card {
  display: flex;
  align-items: center;
  padding: 22px;
  gap: 16px;
  background: linear-gradient(150deg,#55555b 0%,#2c2c31 24%,#17171a 62%,#09090b 100%);
  border-color: #45454b;
  box-shadow: inset 0 1px 0 #8d8d95, inset 0 -1px 0 #070709, 0 10px 22px #18181b24;
}
html.native-onyx .hero-card > div:first-child { min-width: 0; }
html.native-onyx .hero-card h2 { font-size: 27px; line-height: 1.08; margin: 6px 0; letter-spacing: 0; }
html.native-onyx .hero-card #today-note { font-size: 14px; line-height: 1.5; color: #dedee1; }
html.native-onyx .hero-card .hero-kicker { color: #c5c5ca; font-size: 10px; letter-spacing: 0; }
html.native-onyx .hero-card .score-ring { flex-shrink: 0; }
html.native-onyx .quick-grid {
  grid-template-rows: repeat(2, minmax(118px, 1fr));
  margin-top: 16px;
  gap: 1px;
  background: #d9d9dd;
  border: 1px solid #dedee2;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(20,20,23,.1), 0 2px 3px rgba(20,20,23,.04), inset 0 1px 0 #fff;
}
html.native-onyx .quick-grid .metric-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  min-width: 0;
  min-height: 118px;
  padding: 18px 16px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(155deg,#fff 0%,#fdfdfe 38%,#e5e5eb 100%);
  box-shadow: inset 0 1px 0 #fff;
  color: #202023;
}
html.native-onyx .quick-grid .metric-card:first-child { border-radius: 17px 0 0 0; }
html.native-onyx .quick-grid .metric-card:nth-child(2) { border-radius: 0 17px 0 0; }
html.native-onyx .quick-grid .metric-card:nth-child(3) { border-radius: 0 0 0 17px; }
html.native-onyx .quick-grid .metric-card:nth-child(4),
html.native-onyx .quick-grid #home-cardio-tile { border-radius: 0 0 17px 0; }
html.native-onyx .quick-grid .metric-card.slab-hidden { display: none; }
html.native-onyx .quick-grid .metric-label { color: #626267; font-size: 10px; font-weight: 650; letter-spacing: 0; margin-bottom: 10px; }
html.native-onyx .quick-grid strong { color: #202023; font-size: 27px; font-weight: 650; letter-spacing: 0; font-variant-numeric: tabular-nums; line-height: 1.15; margin-bottom: 5px; }
html.native-onyx #home-cardio-status .cardio-unit { color: #626267; font-size: 12px; }
html.native-onyx .quick-grid small, html.native-onyx .quick-grid .cardio-unit { color: #626267; font-size: 11px; line-height: 1.4; }
html.native-onyx .quick-grid .metric-ring { width: 24px; height: 24px; top: auto; bottom: 12px; right: 12px; }
html.native-onyx .quick-grid .metric-ring svg { width: 24px; height: 24px; }
html.native-onyx .quick-grid .metric-ring circle:first-child { stroke: #d9d9de; }
html.native-onyx .quick-grid .metric-ring circle:last-child { stroke: #343438; }
html.native-onyx .quick-grid.slab-mode .metric-card:nth-child(3),
html.native-onyx .quick-grid.slab-mode #home-cardio-tile { padding-top: 18px; padding-bottom: 32px; }
html.native-onyx .slab-hub { background: linear-gradient(145deg,#555559,#202022); border-color: #f4f2ed; box-shadow: 0 4px 12px #0005; }
html.native-onyx .slab-hub .hub-day { color: #e6e4e0; letter-spacing: 0; }
html.native-onyx .slab-hub.due { background: linear-gradient(140deg,#ff9e4b,#ed6c1e 50%,#cf4913); box-shadow: 0 5px 16px #ad400d45,inset 0 1px 0 #ffc48c; }
/* The larger due control keeps its central location without covering tile text. */
html.native-onyx .quick-grid.slab-mode:has(.slab-hub.due) { row-gap: 76px; background: linear-gradient(120deg,#f6f6f8,#e6e6eb); }
html.native-onyx .quick-grid.slab-mode:has(.slab-hub.due) .metric-card { min-height: 128px; }
html.native-onyx .native-activity {
  margin: 14px 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #28282b;
  border: 0;
}
html.native-onyx .native-activity-heading,
html.native-onyx .native-activity-stats small { display: none; }
html.native-onyx .native-activity-stats {
  margin: 0;
  gap: 12px;
  padding: 13px 20px;
  border-radius: 28px;
  border: 1px solid #424247;
  background: linear-gradient(145deg,#36363b,#151518 65%,#0d0d10);
  box-shadow: inset 0 1px 0 #626269, 0 4px 10px #18181b12;
}
html.native-onyx .native-activity-stats > div { display: grid; gap: 3px; }
html.native-onyx .native-activity-stats > div + div { border-color: #54545b; padding-left: 14px; }
html.native-onyx .native-activity-stats span { color: #d4d4da; font-size: 10px; }
html.native-onyx .native-activity .native-activity-stats strong { color: #fff; font-size: 19px; font-weight: 650; }
html.native-onyx .native-activity-footer { margin-top: 10px; border-color: #dcdad5; padding-top: 8px; }
html.native-onyx .native-activity-footer small { color: #616166; }
html.native-onyx .native-activity-footer button { color: #252527; border-color: #ceccc7; background: linear-gradient(#fff,#eeece7); }
html.native-onyx .native-nutrition {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  column-gap: 10px;
  margin-top: 18px;
  padding-bottom: 90px;
}
html.native-onyx .native-nutrition #open-trackr,
html.native-onyx .native-nutrition #open-macro-journal {
  min-height: 52px;
  margin: 0;
  padding: 12px 10px;
  font-size: 12px;
  line-height: 1.3;
  justify-content: center;
  gap: 7px;
  text-align: left;
  overflow-wrap: anywhere;
}
html.native-onyx .native-nutrition #open-trackr::after,
html.native-onyx .native-nutrition #open-macro-journal::after { content: none; }
html.native-onyx .native-nutrition #open-trackr::before,
html.native-onyx .native-nutrition #open-macro-journal::before {
  content: '';
  display: block;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  background: currentColor;
  -webkit-mask: var(--macro-icon) center / contain no-repeat;
  mask: var(--macro-icon) center / contain no-repeat;
}
html.native-onyx .native-nutrition #open-trackr { --macro-icon: url('/client-app/assets/utensils.svg?v=327'); }
html.native-onyx .native-nutrition #open-macro-journal { --macro-icon: url('/client-app/assets/notebook-pen.svg?v=327'); }
html.native-onyx .native-nutrition:has(#open-trackr[hidden]) #open-macro-journal { grid-column: 1 / -1; }
html.native-onyx .native-nutrition #open-trackr {
  border: 1px solid #47474b;
  background: linear-gradient(160deg,#68686e 0%,#343438 18%,#1e1e21 54%,#111113 100%);
  box-shadow: inset 0 1px 0 #77777b, inset 0 -1px 0 #050506, 0 7px 14px #18181b1c;
}
html.native-onyx .native-nutrition #open-macro-journal {
  min-height: 52px;
  background: linear-gradient(155deg,#fff,#f5f5f8 55%,#e5e5ea);
  border-color: #d1d1d7;
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px #18181b0a;
}
html.native-onyx .native-nutrition .macro-journal-card-stats { grid-column: 1 / -1; padding: 18px 0; }
html.native-onyx .native-nutrition .macro-journal-card-stats strong { font-size: 23px; font-weight: 650; }
html.native-onyx .native-nutrition .macro-journal-card-stats span + span { border-color: #dedcd7; }
html.native-onyx .native-nutrition button:active { transform: translateY(1px); }
html.native-onyx .ssv3-hero,
html.native-onyx .ssv2-hero { background: linear-gradient(145deg,#363639,#171719); }
html.native-onyx .ssv3-count,
html.native-onyx .ssv3-gain,
html.native-onyx .cardio-chip.sel { background: #eeede9; color: #333336; }
html.native-onyx button:focus-visible { outline: 2px solid #bc632c; outline-offset: 3px; }
/* Keep the hit area comfortable without painting a disc over page content. */
html.native-onyx .quick-add-toggle {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--cta);
  font-size: 46px;
  font-weight: 650;
  box-shadow: none;
  text-shadow: 0 1px 2px #fff, 0 3px 6px #0003;
}
html.native-onyx .quick-add-toggle:active { transform: scale(.94); }
html.native-onyx .bubble.coach {
  background: linear-gradient(150deg,#29292d,#121215);
  color: #fff;
  border: 1px solid #37373d;
  box-shadow: inset 0 1px 0 #ffffff0d;
}
html.native-onyx .bubble.client {
  background: linear-gradient(145deg,#fff,#eaeaf0);
  color: #202023;
}
html.native-onyx .bubble.coach a { color: #fff; text-decoration: underline; }
html.native-onyx .bubble.coach .kickoff-message > strong,
html.native-onyx .bubble.coach .kickoff-message h4 { color: #fff; }
html.native-onyx .bubble.coach .kickoff-message p,
html.native-onyx .bubble.coach.checkin-message > span { color: #dedee4; }
html.native-onyx .bubble.coach .kickoff-message small { color: #ffba8e; letter-spacing: 0; }
html.native-onyx .bubble.coach .kickoff-message section {
  background: none;
  border: 0;
  border-top: 1px solid #494950;
  border-radius: 0;
  padding: 12px 0 0;
}
html.native-onyx .bubble.coach .message-action-btn,
html.native-onyx .bubble.coach.checkin-message button {
  background: #f4f4f7;
  color: #202023;
  border: 1px solid #d9d9e0;
}
html.native-onyx .bubble.coach .message-attachment-card {
  background: #f4f4f7;
  color: #202023;
  text-decoration: none;
}
html.native-onyx .bubble.coach .message-attachment-card small { color: #606069; }
@media (max-width: 360px) {
  html.native-onyx #home-content.native-today > .hero-card { padding: 18px; gap: 12px; }
  html.native-onyx .hero-card h2 { font-size: 24px; }
  html.native-onyx .hero-card #today-note { font-size: 13px; }
  html.native-onyx .hero-card .score-ring { width: 66px; height: 66px; border-width: 5px; }
  html.native-onyx .native-activity-stats > div { display: grid; gap: 2px; }
  html.native-onyx .quick-grid .metric-card { padding: 19px 13px; }
  html.native-onyx .quick-grid strong { font-size: 25px; }
  html.native-onyx .quick-grid #home-cardio-status { font-size: 22px; }
}