/* WEEK MODAL */
.week-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:50;align-items:flex-end;justify-content:center}
:root[data-theme="light"] .week-modal-overlay{background:rgba(0,0,0,.3)}
.week-modal-overlay.open{display:flex}
.week-modal{background:var(--modal-bg);border:1px solid var(--border);border-radius:20px 20px 0 0;width:100%;padding:0 0 env(safe-area-inset-bottom,16px);animation:slideUp .25s cubic-bezier(.34,1.56,.64,1);max-height:88vh;overflow-y:auto}
.week-modal-header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 14px;border-bottom:1px solid var(--border)}
.week-modal-title{font-family:'Syne',sans-serif;font-size:17px;font-weight:800}
:root[data-theme="light"] .week-modal-title{font-family:-apple-system,'SF Pro Display','Helvetica Neue',sans-serif}
.week-modal-close{background:var(--border);border:none;color:var(--text);width:32px;height:32px;border-radius:50%;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* WEEK GRID */
.week-grid{padding:12px;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:8px;max-width:100%;overflow:hidden;box-sizing:border-box}
.week-day-col{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;overflow:hidden}
.week-day-name{font-size:9px;color:var(--muted);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.week-day-num{font-size:11px;color:var(--text)}
.week-bar-wrap{width:100%;height:100px;background:var(--border);border-radius:6px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.week-bar-fill{width:100%;border-radius:4px;background:var(--accent);opacity:.25;transition:height .5s ease}
.week-bar-fill.today{opacity:1}.week-bar-fill.good{opacity:.65}
:root[data-theme="light"] .week-bar-fill{opacity:.35}
:root[data-theme="light"] .week-bar-fill.today{opacity:1}
:root[data-theme="light"] .week-bar-fill.good{opacity:.75}
.week-bar-pct{font-size:10px;color:var(--muted);margin-top:4px}

@media (max-width: 380px) {
  .week-grid { padding: 8px 4px; gap: 2px; }
  .week-day-num { font-size: 10px; }
  .week-bar-pct { font-size: 9px; }
}

/* WEEK COMPARE */
.week-compare{margin:0 20px 20px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;max-width:100%;box-sizing:border-box;overflow:hidden}
.compare-title{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:14px}
.compare-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:4px}
.compare-label{font-size:12px;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.compare-vals{display:flex;gap:8px;align-items:center;flex-shrink:0}
.compare-val{font-family:'Syne',sans-serif;font-size:18px;font-weight:700}
.compare-val.cur{color:var(--accent)}.compare-val.prev{color:var(--muted)}
.up{color:var(--accent)}.down{color:var(--accent2)}.same{color:var(--muted)}

/* WEEKLY REFLECTION & SYSTEM STYLING */
.reflection-subnav {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  width: 100%;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.reflection-subnav::-webkit-scrollbar {
  display: none;
}
.subnav-pill {
  background: none;
  border: none;
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.subnav-pill.active {
  background: var(--accent) !important;
  color: var(--bg) !important;
  box-shadow: 0 4px 14px rgba(255, 238, 181, 0.08);
}
.reflection-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  transition: all 0.25s ease;
}
.reflection-card-title {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.reflection-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.reflection-list-item {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.reflection-list-item::before {
  content: '•';
  color: var(--accent);
  font-weight: bold;
}
.r-btn {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  outline: none;
}
.r-btn.primary {
  background: var(--accent);
  color: var(--bg);
}
.r-btn.primary:active {
  transform: scale(0.97);
}
.r-btn.secondary {
  background: var(--border);
  color: var(--text);
  border: 1px solid var(--border);
  margin-top: 8px;
}
.r-btn.secondary:active {
  transform: scale(0.97);
}

/* CHRONICLE TIMELINE STYLING */
.timeline-container {
  position: relative;
  padding-left: 24px;
  border-left: 2px dashed var(--border);
  margin: 16px 8px;
}
.timeline-item {
  position: relative;
  margin-bottom: 28px;
  animation: cardIn 0.35s ease;
}
.timeline-dot {
  position: absolute;
  left: -31px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 8px var(--accent);
}
.timeline-date {
  font-size: 9px;
  font-family: 'DM Mono', monospace;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
  letter-spacing: 1px;
}
.timeline-title {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.timeline-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}