/* ---------------------------------------------------------------------------
   wehumanhuman — "Marker" layer (wabi-sabi humane evolution).
   Loaded after styles.css. The current system, visibly touched by a hand:
   corners wobble, numerals tilt, the highlighter overshoots, cards sit a
   degree off square. Ships on the existing tokens.
   --------------------------------------------------------------------------- */
:root {
  --marker-solid: #F8E56A;   /* selected/filled marker yellow */
  --paper-warm: #FBFBF8;
}

body { background: var(--paper-warm); }

/* --- hand-wobbled corners --------------------------------------------------- */

.card { border-radius: 18px 14px 17px 13px; }
.card:nth-of-type(2n) { transform: rotate(-0.35deg); }
.card:nth-of-type(2n+1) { transform: rotate(0.3deg); }

.btn { border-radius: 12px 10px 13px 11px; }
.text-input { border-radius: 14px 12px 15px 13px; }
.stat { border-radius: 13px 11px 14px 12px; }
.ed-list { border-radius: 16px 13px 17px 12px; }

/* --- tilted numerals -------------------------------------------------------- */

.giant-num { transform: rotate(-2.5deg); }
.slider-value { transform: rotate(-1.5deg); }
.delta-line { transform: rotate(-1.5deg); }
@media (prefers-reduced-motion: reduce) {
  .giant-num, .slider-value, .delta-line,
  .card:nth-of-type(2n), .card:nth-of-type(2n+1) { transform: none; }
}

/* --- marker-yellow chips (overshooting highlighter) ------------------------- */

.chip.added {
  background: var(--marker-solid);
  border-color: var(--marker-solid);
  color: var(--ink);
  transform: rotate(-0.6deg);
}
.entry-pill {
  background: var(--marker-solid);
  transform: rotate(-0.7deg);
}
.entry-pill:nth-child(2n) { transform: rotate(0.6deg); }

/* dashed "suggestion" chip variant */
.chip.hint-chip {
  border-style: dashed;
  color: var(--ink-45);
  font-style: italic;
  background: transparent;
}

/* --- home: greeting + mood card --------------------------------------------- */

.greet {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 11vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 6px 0 20px;
}

.mood-card { align-items: stretch; text-align: center; }
.mood-card .slider-value { margin: 2px auto -2px; }
.quick-row { display: flex; gap: 8px; }
.quick-pill {
  flex: 1;
  text-align: center;
  border: 1px solid var(--ink-12);
  background: var(--paper);
  border-radius: 999px;
  padding: 10px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-70);
}
.quick-pill:hover { border-color: var(--ink); }

/* collapsed challenges summary row */
.chal-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
}
.chal-unfold { font-size: 0.8rem; color: var(--ink-45); white-space: nowrap; }

/* --- contribution heatmap --------------------------------------------------- */

.heat { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.heat-row { display: flex; gap: 3px; }
.heat-cell { flex: 1; aspect-ratio: 1; border-radius: 3px; background: var(--ink-06); }
.heat-cell.l1 { background: #FBF1AC; }
.heat-cell.l2 { background: var(--marker-solid); }
.heat-cell.l3 { background: var(--marker); }
.heat-cell.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.heat-legend { display: flex; justify-content: flex-end; gap: 8px; align-items: center; font-size: 0.7rem; color: var(--ink-45); margin-top: 6px; }

/* --- bottom nav: Today · breathe · Trends ----------------------------------- */

.nav-breathe {
  flex: 0 0 auto;
  align-self: center;
  margin: 0 6px;
}
.nav-breathe button {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  margin-top: -6px;
}

/* --- box-breathing pacer ---------------------------------------------------- */

.breathe-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 22px; flex: 1; justify-content: center;
}
.breathe-box {
  width: 200px; height: 200px;
  border: 2px solid var(--ink);
  border-radius: 22px 18px 21px 17px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.breathe-fill {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--marker-soft);
  border: 2px solid var(--ink);
  animation: box-breathe 16s ease-in-out infinite;
}
@keyframes box-breathe {
  0%   { transform: scale(0.6); }   /* in */
  25%  { transform: scale(1.25); }  /* hold */
  50%  { transform: scale(1.25); }  /* out start */
  75%  { transform: scale(0.6); }   /* hold */
  100% { transform: scale(0.6); }
}
.breathe-phase {
  font-family: var(--serif); font-style: italic; font-size: 1.6rem;
  min-height: 2rem;
}
.breathe-count { font-size: 0.85rem; color: var(--ink-70); }
@media (prefers-reduced-motion: reduce) {
  .breathe-fill { animation: none; }
}

/* --- done insight card ------------------------------------------------------ */

.insight-card {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 14px 17px 13px 16px;
  padding: 16px 18px;
  transform: rotate(-0.4deg);
  text-align: left;
  display: flex; flex-direction: column; gap: 8px;
}
.insight-kicker { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-70); }
.insight-body { font-family: var(--serif); font-style: italic; font-size: 0.95rem; line-height: 1.6; }
.insight-why { font-size: 0.72rem; color: var(--ink-45); }

/* --- 5-point wheel ---------------------------------------------------------- */

.wheel5-scale {
  display: flex; align-items: center; gap: 10px; padding: 0 2px;
}
.wheel5-scale .spacer { width: 78px; flex-shrink: 0; }
.wheel5-scale .marks { flex: 1; display: flex; justify-content: space-between; font-size: 0.55rem; color: var(--ink-45); }

.wheel5-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px; border-top: 1px solid var(--line);
}
.wheel5-label { width: 78px; flex-shrink: 0; }
.wheel5-label b { font-size: 0.82rem; font-weight: 600; display: block; }
.wheel5-label span { font-size: 0.6rem; color: var(--ink-45); }
.wheel5-track {
  flex: 1; display: flex; justify-content: space-between; align-items: center;
  position: relative;
}
.wheel5-track::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 50%;
  height: 1px; background: var(--line);
}
.wheel5-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--ink-12); background: var(--paper);
  position: relative; cursor: pointer; padding: 0;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.wheel5-dot:hover { border-color: var(--ink); }
.wheel5-dot.sel { background: var(--ink); border-color: var(--ink); transform: scale(1.15); }
.wheel5-dot.sel.well { background: var(--marker); border-color: var(--ink); }
.wheel5-note-prompt { font-size: 0.72rem; color: var(--ink-70); margin-top: 4px; }

/* --- journal ---------------------------------------------------------------- */

.jrnl-filters { display: flex; gap: 8px; margin-bottom: 6px; }
.jrnl-entry {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}
.jrnl-entry.hidden { display: none; }
.jrnl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.jrnl-date { font-size: 0.8rem; color: var(--ink-70); }
.jrnl-delta { font-family: var(--serif); font-style: italic; font-size: 1.2rem; }
.jrnl-delta .down { color: var(--ink); }
.jrnl-summary { font-family: var(--serif); font-size: 0.98rem; line-height: 1.5; margin: 6px 0 8px; }
.jrnl-anchors { display: flex; flex-wrap: wrap; gap: 6px; }
.jrnl-anchor {
  font-size: 0.78rem; padding: 4px 10px; border-radius: 999px;
  background: var(--marker-soft);
}
.jrnl-day-strip { width: 6px; border-radius: 3px; align-self: stretch; }

/* --- worth-trying ----------------------------------------------------------- */

.worth-card {
  border: 1px solid var(--line);
  border-radius: 15px 12px 16px 13px;
  padding: 18px;
  margin-bottom: 14px;
  transform: rotate(-0.3deg);
}
.worth-tag { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-45); }
.worth-noticed { font-family: var(--serif); font-size: 1.05rem; line-height: 1.5; margin: 4px 0 12px; }
.worth-so { margin: 10px 0 4px; }
.worth-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.worth-dismiss { font-size: 0.8rem; color: var(--ink-45); }

/* --- data / reminders sheets ------------------------------------------------ */

.data-key {
  font-family: var(--mono, ui-monospace, monospace);
  background: var(--soft); border: 1px solid var(--line);
  border-radius: 8px; padding: 3px 8px; font-size: 0.85rem;
}
.danger-btn {
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.toggle-row.reminder { border-top: 1px solid var(--line); }

/* --- first-run promise ------------------------------------------------------ */

.firstrun {
  position: fixed; inset: 0; z-index: 50;
  background: var(--paper-warm);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px 28px;
  gap: 18px;
}
.firstrun .fr-kicker { font-family: var(--serif); font-style: italic; font-size: 2.6rem; }
.firstrun .fr-line { font-family: var(--serif); font-size: 1.6rem; line-height: 1.25; max-width: 340px; }
.firstrun .fr-sub { color: var(--ink-70); font-size: 0.9rem; max-width: 320px; }
.firstrun .btn { max-width: 320px; }

/* --- bottom sheet ----------------------------------------------------------- */

.sheet-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(17,17,17,0.28);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: var(--maxw);
  background: var(--paper);
  border-radius: 22px 22px 0 0;
  padding: 22px 20px calc(28px + env(safe-area-inset-bottom));
  max-height: 88dvh; overflow-y: auto;
  animation: sheet-up 0.28s ease both;
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
.sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--ink-12); margin: 0 auto 14px; }

/* subhead used across new views */
.sub-head { font-size: 1rem; font-weight: 700; margin: 24px 0 10px; }
.section-lead { font-family: var(--serif); font-size: 1.4rem; line-height: 1.2; margin-bottom: 6px; }