/* ============================================================
   Steady v2 — design tokens
   Sourced 1:1 from packages/app/constants/colours.ts,
   typography.ts, and session-types.ts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=DM+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* Surfaces & ink */
  --cream:   #F4EFE6;
  --surface: #FDFAF5;
  --card:    #F0EAE0;
  --border:  #E5DDD0;
  --ink:     #1C1510;
  --ink2:    #3D3028;
  --muted:   #9A8E7E;

  /* Session accents */
  --forest:   #2A5C45;  --forest-bg: #EEF4F1;  /* EASY  */
  --clay:     #C4522A;  --clay-bg:   #FDF0EB;  /* INTERVAL */
  --amber:    #D4882A;  --amber-bg:  #FDF6EB;  /* TEMPO */
  --navy:     #1B3A6B;  --navy-bg:   #EDF1F8;  /* LONG  */
  --slate:    #8A8E9A;  --slate-bg:  #F2F2F4;  /* REST  */

  /* Type */
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'DM Sans', -apple-system, sans-serif;
  --mono:  'Space Mono', ui-monospace, monospace;

  /* Geometry */
  --radius-card:   16px;
  --radius-inner:  10px;
  --radius-pill:   999px;
  --pad-card:      20px;
  --pad-inner:     14px;
  --hairline:      1px solid var(--border);
}

/* ------------------------------------------------------------
   Page shell — paper-cream background, phone frame centred
   ------------------------------------------------------------ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--cream);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-smooth: always;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px 96px;
  gap: 32px;
}

/* Phone frame */
.phone {
  width: 390px;
  min-height: 844px;
  background: var(--surface);
  border-radius: 44px;
  border: 1px solid var(--border);
  box-shadow:
    0 1px 0 rgba(28,21,16,0.04),
    0 24px 60px -24px rgba(28,21,16,0.18);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.phone::before {
  content: '';
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 28px;
  background: var(--ink);
  border-radius: 999px;
  z-index: 10;
}

.status-bar {
  height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 28px 6px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.status-bar .icons { letter-spacing: 2px; font-size: 12px; }

/* Screen body (scroll area) */
.screen {
  flex: 1;
  padding: 12px 20px 28px;
  overflow: hidden;
  background: var(--cream);
}

/* Nav headers (for modal-style screens) */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 18px;
}
.nav .back, .nav .close {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink2);
  font-weight: 500;
}
.nav .title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.nav .save {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--forest);
}

/* ------------------------------------------------------------
   Primitives
   ------------------------------------------------------------ */

.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: var(--pad-card);
  border: 1px solid var(--border);
}

.label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--muted);
}

.data {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--ink);
}

.serif-title {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--ink);
}

.body-text {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 20px;
  color: var(--ink2);
}

.meta {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
}

/* Session chip */
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  border: 1.5px solid currentColor;
}

.chip.easy     { color: var(--forest); background: var(--forest-bg); }
.chip.interval { color: var(--clay);   background: var(--clay-bg); }
.chip.tempo    { color: var(--amber);  background: var(--amber-bg); }
.chip.long     { color: var(--navy);   background: var(--navy-bg); }

/* Filled chip (inverse) */
.chip.filled.easy     { color: var(--surface); background: var(--forest); border-color: var(--forest); }
.chip.filled.interval { color: var(--surface); background: var(--clay);   border-color: var(--clay); }
.chip.filled.tempo    { color: var(--surface); background: var(--amber);  border-color: var(--amber); }
.chip.filled.long     { color: var(--surface); background: var(--navy);   border-color: var(--navy); }

/* Pill button (selectable option) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(28,21,16,0.18);
  background: rgba(255,255,255,0.55);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
}
.pill.selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

/* Primary CTA */
.cta {
  display: block;
  width: 100%;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  padding: 16px 18px;
  border: none;
  border-radius: var(--radius-pill);
  letter-spacing: 0.2px;
}
.cta.accent.easy     { background: var(--forest); }
.cta.accent.interval { background: var(--clay); }
.cta.accent.tempo    { background: var(--amber); }
.cta.accent.long     { background: var(--navy); }

.cta-sub {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.3px;
}

/* ------------------------------------------------------------
   Annotation / design-doc sidebar
   ------------------------------------------------------------ */

.annotations {
  width: 280px;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 17px;
  color: var(--ink2);
  padding-top: 68px;
}
.annotations h3 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}
.annotations ul { list-style: none; padding: 0; }
.annotations li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
}
.annotations li b { color: var(--ink); font-weight: 600; }
.annotations li code {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--card);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Component map footer (under each phone) */
.comp-map {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.4px;
}

/* ------------------------------------------------------------
   Screen footer label
   ------------------------------------------------------------ */
.frame-label {
  position: absolute;
  top: -28px;
  left: 0;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink2);
  letter-spacing: 0.3px;
}

.phone-wrap { position: relative; }

/* ------------------------------------------------------------
   Week header — "APR 6 – 12 · 2026 / Week 14 · Build Phase"
   Sits above load bar on every Home-style screen.
   ------------------------------------------------------------ */
.week-header {
  padding: 6px 2px 10px;
}
.week-meta {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 3px;
}
.week-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 12px;
}

/* ------------------------------------------------------------
   WEEKLY LOAD CARD
   Already implemented in the live app. Shows actual vs planned
   km for the current week. Sits at the very top of Home, under
   the week header, above the TodayHeroCard.
   ------------------------------------------------------------ */
.load-bar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.load-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.load-header .label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.load-header .values {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}
.load-header .values .actual  { color: var(--forest); }
.load-header .values .planned { color: var(--muted); font-weight: 400; }

.progress-track {
  height: 5px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--forest);
  border-radius: 999px;
}

/* ------------------------------------------------------------
   THIS WEEK — compact vertical day list
   Lives under the Today hero on Home. Each row is one day of
   the current week (today excluded — today sits in the hero).
   Three columns: day label, session name, status + km.
   ------------------------------------------------------------ */
.list-divider {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 14px 10px 6px;
}

.day-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.day-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
}

.day-left {
  width: 48px;
  flex-shrink: 0;
}
.day-left .day-name {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.day-left .day-date {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
}

.day-center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.day-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.day-dot.easy     { background: var(--forest); }
.day-dot.interval { background: var(--clay); }
.day-dot.tempo    { background: var(--amber); }
.day-dot.long     { background: var(--navy); }
.day-dot.rest     { background: var(--border); }

.day-session-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.day-row.rest .day-session-name {
  color: var(--muted);
  font-weight: 400;
}

.day-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.day-status {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.day-status.ok    { color: var(--forest); }
.day-status.warn  { color: var(--amber); }
.day-status.miss  { color: var(--clay); }
.day-km {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}
.day-row.upcoming .day-km {
  color: var(--border);
}