/* ============================================================
   HARD THINGS DAILY — Tactical Mobile Design System
   Program 1: Design System Foundation
   Palette + type locked to approved HTD mock (#07 Brand System)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Saira+Condensed:wght@500;600;700&family=Barlow+Semi+Condensed:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* — Surfaces — */
  --void:        #030403;
  --panel:       #0A0D0A;
  --raised:      #101510;
  --raised-2:    #161B15;
  --hairline:    rgba(244,241,232,0.10);
  --hairline-2:  rgba(244,241,232,0.16);
  --border-active: rgba(152,255,16,0.50);

  /* — Acid proof green — */
  --acid:        #98FF10;
  --acid-bright: #B7FF2A;
  --acid-deep:   #6FB600;
  --acid-glow:   rgba(152,255,16,0.22);

  /* — Text — */
  --bone:        #F4F1E8;
  --bone-muted:  #A7A39A;
  --steel:       #74766F;
  --steel-dim:   #4A4C46;

  /* — Signal — */
  --danger:      #FF3B30;
  --amber:       #FFC107;
  --cyan:        #00B2CA;

  /* — Heatmap — */
  --hm-complete: #98FF10;
  --hm-complete-dim: #5b7d18;
  --hm-partial:  #FFC107;
  --hm-missed:   #FF3B30;
  --hm-nodata:   #1a1f18;

  /* — Type — */
  --display: 'Oswald', sans-serif;
  --ui:      'Barlow Semi Condensed', sans-serif;
  --mono:    'JetBrains Mono', monospace;

  /* — Geometry — */
  --r-sm: 6px;
  --r:    9px;
  --r-lg: 14px;

  /* — Layout — */
  --screen-w: 390px;
  --screen-h: 844px;
  --nav-h: 76px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

button { color: inherit; font-family: inherit; }

body {
  margin: 0;
  background: #000;
  font-family: var(--ui);
  color: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* ============================================================
   STAGE + DEVICE FRAME (Program 2 — App Shell)
   ============================================================ */
.htd-stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 80% at 50% -10%, #0c0f0b 0%, #060706 55%, #000 100%);
  overflow: hidden;
}
.htd-scaler { transform-origin: center center; }

.device {
  width: calc(var(--screen-w) + 24px);
  height: calc(var(--screen-h) + 24px);
  background: linear-gradient(145deg, #2a2d28, #0c0e0b 40%, #181b16);
  border-radius: 58px;
  padding: 12px;
  box-shadow:
    0 0 0 2px #000,
    0 40px 90px -20px rgba(0,0,0,0.9),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  position: relative;
}
.device-screen {
  position: relative;
  width: var(--screen-w);
  height: var(--screen-h);
  background: var(--void);
  border-radius: 46px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* subtle tactical grid texture on every screen */
.grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(244,241,232,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,232,0.022) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   STATUS BAR
   ============================================================ */
.statusbar {
  height: 50px;
  flex: 0 0 50px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 28px 8px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 15px;
  color: var(--bone);
  position: relative;
  z-index: 5;
}
.statusbar .sb-time { letter-spacing: 0.3px; font-variant-numeric: tabular-nums; }
.statusbar .notch {
  position: absolute;
  left: 50%; top: 9px;
  transform: translateX(-50%);
  width: 116px; height: 30px;
  background: #000;
  border-radius: 16px;
}
.sb-right { display: flex; align-items: center; gap: 6px; }
.sb-right svg { display: block; }

/* ============================================================
   APP HEADER
   ============================================================ */
.appbar {
  flex: 0 0 auto;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  position: relative;
  z-index: 5;
}
.appbar-title {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--bone);
}
.appbar-title.wordmark { font-size: 19px; letter-spacing: 5px; }
.iconbtn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--bone-muted);
  background: none; border: none; cursor: pointer;
  border-radius: var(--r-sm);
  transition: color .15s, background .15s;
}
.iconbtn:active { background: rgba(244,241,232,0.06); color: var(--bone); }
.appbar-side { display: flex; align-items: center; gap: 2px; }

/* ============================================================
   SCROLL BODY
   ============================================================ */
.screen-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
  padding: 4px 16px calc(var(--nav-h) + 28px);
  scrollbar-width: none;
}
.screen-body::-webkit-scrollbar { display: none; }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bone-muted);
}
.label-mono {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--steel);
}
.display-xl {
  font-family: var(--display);
  font-weight: 700;
  font-size: 40px;
  line-height: 0.92;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bone);
}
.display-lg {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  line-height: 0.95;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.num-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   PANELS
   ============================================================ */
.panel {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  position: relative;
}
.panel-pad { padding: 14px; }
.panel-glow {
  border-color: var(--border-active);
  box-shadow: 0 0 0 1px var(--acid-glow), 0 0 24px -6px var(--acid-glow);
}

/* ============================================================
   CHIPS
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bone-muted);
}

/* ============================================================
   BUTTONS / CONTROL SURFACES
   ============================================================ */
.btn-primary {
  width: 100%;
  border: none;
  cursor: pointer;
  background: var(--acid);
  color: #0a1400;
  border-radius: var(--r);
  padding: 17px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 0 28px -6px var(--acid-glow);
  transition: transform .12s, filter .12s;
  position: relative;
  overflow: hidden;
}
.btn-primary:active { transform: scale(0.985); filter: brightness(1.08); }
.btn-primary .sub {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 2px;
  margin-top: 6px;
  opacity: 0.62;
}
.btn-ghost {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--hairline-2);
  color: var(--bone);
  border-radius: var(--r);
  padding: 14px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: border-color .15s, background .15s;
}
.btn-ghost:active { border-color: var(--border-active); background: rgba(152,255,16,0.05); }

/* ============================================================
   BOTTOM COMMAND TABS
   ============================================================ */
.tabbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--nav-h);
  padding-bottom: 16px;
  display: flex;
  background: linear-gradient(180deg, rgba(3,4,3,0.4), var(--void) 38%);
  border-top: 1px solid var(--hairline);
  backdrop-filter: blur(8px);
  z-index: 10;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none; border: none; cursor: pointer;
  color: var(--steel);
  position: relative;
  transition: color .15s;
}
.tab .tab-label {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.tab.active { color: var(--acid); }
.tab.active::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 2px;
  background: var(--acid);
  box-shadow: 0 0 8px var(--acid);
}

/* ============================================================
   METRIC GRID + TILES
   ============================================================ */
.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  overflow: hidden;
}
.metric-tile {
  background: var(--panel);
  padding: 13px 14px 14px;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.metric-tile .m-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--steel);
}

/* ============================================================
   HEATMAP CALENDAR
   ============================================================ */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-head {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--steel);
  text-align: center;
  padding-bottom: 2px;
}
.cal-cell {
  aspect-ratio: 1.1 / 1;
  border-radius: 3px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: rgba(0,0,0,0.6);
  background: var(--hm-nodata);
  color-scheme: dark;
}
.cal-cell.complete { background: var(--hm-complete); color: #0a1400; }
.cal-cell.complete-dim { background: var(--hm-complete-dim); color: #0a1400; }
.cal-cell.partial  { background: var(--hm-partial);  color: #2a1c00; }
.cal-cell.missed   { background: var(--hm-missed);   color: #2a0000; }
.cal-cell.nodata   { color: var(--steel-dim); }

/* ============================================================
   STREAK RISK BAR
   ============================================================ */
.streak-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 30px;
  flex: 1;
}
.streak-bars .sb {
  flex: 1;
  background: var(--danger);
  border-radius: 1px;
  opacity: 0.8;
}
.streak-bars .sb.marker { background: var(--bone); opacity: 1; }

/* ============================================================
   AVATARS
   ============================================================ */
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--raised-2);
  border: 1px solid var(--hairline-2);
  object-fit: cover;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 600;
  color: var(--bone-muted);
  overflow: hidden;
  flex: 0 0 auto;
}

/* ============================================================
   SEGMENTED TABS (feed filters etc.)
   ============================================================ */
.seg {
  display: flex;
  gap: 8px;
  padding: 2px 0 4px;
}
.seg-item {
  height: 30px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--steel);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}
.seg-item.active { border-color: var(--acid); color: var(--acid); }

/* underline-style tabs (challenge / AI) */
.utabs { display: flex; gap: 26px; padding: 6px 2px 0; border-bottom: 1px solid var(--hairline); }
.utab {
  background: none; border: none; cursor: pointer;
  padding: 6px 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--steel);
  position: relative;
}
.utab.active { color: var(--acid); }
.utab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--acid);
}

/* ============================================================
   MISC
   ============================================================ */
.divider { height: 1px; background: var(--hairline); border: none; margin: 0; }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.muted { color: var(--bone-muted); }
.steel { color: var(--steel); }
.acid  { color: var(--acid); }
.danger-c { color: var(--danger); }
.amber-c { color: var(--amber); }

@keyframes scanIn {
  from { transform: scale(.992); }
  to   { transform: none; }
}
/* transform-only + scale-based: content is always painted and never clipped,
   even if the animation clock is throttled */
.screen-enter { opacity: 1; animation: scanIn .3s cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .screen-enter { animation: none; }
}

/* push-screen entrance — scale-based from-state: if the animation clock freezes,
   a held frame is a harmless 1.5% shrink (never a translate clip) */
@keyframes pushIn { from { transform: scale(.985); } to { transform: none; } }
.pushview { animation: pushIn .26s cubic-bezier(.2,.7,.2,1); }

/* range slider */
.htd-range { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px;
  background: var(--raised-2); outline: none; border: 1px solid var(--hairline); }
.htd-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
  border-radius: 50%; background: var(--acid); cursor: pointer; border: 3px solid var(--void);
  box-shadow: 0 0 10px var(--acid-glow); }
.htd-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--acid);
  cursor: pointer; border: 3px solid var(--void); }

/* loading skeleton */
@keyframes skelPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.skel {
  border-radius: var(--r);
  background: linear-gradient(100deg, var(--panel) 30%, var(--raised-2) 50%, var(--panel) 70%);
  background-size: 200% 100%;
  animation: skelPulse 1.3s ease-in-out infinite;
  border: 1px solid var(--hairline);
}
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* tactical toast */
.htd-toast {
  position: absolute;
  left: 50%; bottom: 104px;
  transform: translateX(-50%) translateY(0);
  max-width: 320px;
  background: var(--raised);
  border: 1px solid var(--border-active);
  border-radius: var(--r-sm);
  box-shadow: 0 0 22px -6px var(--acid-glow), 0 8px 24px rgba(0,0,0,0.6);
  color: var(--acid);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 11px 16px;
  z-index: 99;
  text-align: center;
  animation: toastIn .22s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.htd-toast.out { opacity: 0; transform: translateX(-50%) translateY(6px); transition: opacity .3s, transform .3s; }
@keyframes toastIn { from { transform: translateX(-50%) translateY(10px); } to { transform: translateX(-50%) translateY(0); } }

/* ============================================================
   MOTION SYSTEM
   Every keyframe's FROM-state is already visible, so even if the
   animation clock is throttled the UI never blanks. Foreground
   browsers play the full motion and rest on the visible end-state.
   ============================================================ */

/* proof / proven badge: icon pops in (starts small+dim, never invisible) */
@keyframes lockPop  { 0% { transform: scale(.62); opacity: .45; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.lock-pop  { animation: lockPop .55s .05s cubic-bezier(.3,1.4,.5,1); }
/* acid rings render full at rest; a subtle fade keeps a frozen clock safe */
@keyframes ringFade { from { opacity: .35; } to { opacity: 1; } }
.proven-ring, .lock-ring, .ring-sweep { animation: ringFade .7s ease-out; }

/* AI radar polygon: subtle scale-up from a still-visible 0.9 */
@keyframes radarIn { from { transform: scale(.9); opacity: .45; } to { transform: scale(1); opacity: 1; } }
.radar-you { transform-box: fill-box; transform-origin: center; animation: radarIn .6s cubic-bezier(.2,.7,.2,1); }

/* mission-reveal scan line sweep (decorative; safe if it never runs) */
@keyframes scanSweep { 0% { transform: translateY(-12%); opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } 100% { transform: translateY(1100%); opacity: 0; } }
.scan-host { position: relative; overflow: hidden; }
.scan-host::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14%;
  background: linear-gradient(180deg, transparent, var(--acid-glow), transparent);
  animation: scanSweep 1.1s .15s ease-in-out 1; pointer-events: none; }

/* rank / delta pulse (starts at scale 1 — always visible) */
@keyframes deltaPulse { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
.delta-pulse { animation: deltaPulse .6s .2s ease-out; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .lock-pop, .proven-ring, .lock-ring, .ring-sweep, .radar-you, .scan-host::after, .delta-pulse { animation: none !important; }
}

/* Premium app-preview framing polish */
.htd-stage::before,
.htd-stage::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

.htd-stage::before {
  inset: 0;
  background:
    linear-gradient(rgba(244,241,232,0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,232,0.024) 1px, transparent 1px),
    radial-gradient(circle at 50% 6%, rgba(152,255,16,0.16), transparent 34rem),
    radial-gradient(circle at 18% 86%, rgba(244,241,232,0.06), transparent 26rem);
  background-size: 30px 30px, 30px 30px, auto, auto;
}

.htd-stage::after {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.72), transparent 34%, transparent 66%, rgba(0,0,0,0.72)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018), rgba(255,255,255,0.018) 1px, transparent 1px, transparent 6px);
}

.device {
  border: 1px solid rgba(244,241,232,0.18);
  transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s cubic-bezier(.2,.7,.2,1);
}

.device::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border-radius: 46px;
  box-shadow: inset 0 0 0 1px rgba(244,241,232,0.045), inset 0 -42px 80px rgba(152,255,16,0.035);
}

button,
[role="button"],
.tab,
.seg-item,
.utab,
.iconbtn {
  cursor: pointer;
}

button:focus-visible,
[role="button"]:focus-visible,
.tab:focus-visible,
.seg-item:focus-visible,
.utab:focus-visible,
.iconbtn:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

.iconbtn:hover,
.tab:hover,
.seg-item:hover,
.utab:hover,
.btn-ghost:hover {
  color: var(--acid);
}

.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 34px -4px var(--acid-glow), 0 10px 26px rgba(0,0,0,0.4);
}

.panel,
.metric-tile,
.proof-card,
.mission-block {
  transition: border-color .18s cubic-bezier(.2,.7,.2,1), background .18s cubic-bezier(.2,.7,.2,1), transform .18s cubic-bezier(.2,.7,.2,1);
}

.panel:hover,
.metric-tile:hover {
  border-color: var(--border-active);
  background: linear-gradient(180deg, rgba(152,255,16,0.04), var(--panel));
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .device:hover {
    transform: translateY(-4px) scale(1.003);
    box-shadow:
      0 0 0 2px #000,
      0 52px 110px -22px rgba(0,0,0,0.95),
      0 0 54px -24px var(--acid-glow),
      inset 0 0 0 1px rgba(255,255,255,0.06);
  }
}

@media (max-width: 520px) {
  .htd-stage {
    place-items: start center;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .device {
    box-shadow:
      0 0 0 2px #000,
      0 28px 72px -20px rgba(0,0,0,0.9),
      inset 0 0 0 1px rgba(255,255,255,0.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .device,
  .panel,
  .metric-tile,
  .proof-card,
  .mission-block {
    transition: none !important;
  }
}