/* The lifespan page. Tokens come from site.css. */

.life-app { display: flex; flex-direction: column; gap: 2rem; }

.honest {
  margin: 0;
  padding: .9rem 1.1rem;
  background: var(--focus-soft);
  border-radius: var(--radius);
  font-size: .95rem;
}

.panel { display: flex; flex-direction: column; gap: .7rem; }
.panel h2 { margin: 0; font-size: 1.2rem; }
.panel h3 { margin: 1.4rem 0 0; font-size: 1.05rem; }

.note { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.note:empty { display: none; }
.note[hidden] { display: none; }

.message { margin: 0; color: var(--accent); font-size: .95rem; }
.message:empty { display: none; }

/* --- the form ------------------------------------------------------------ */

.fields, .factors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .9rem 1rem;
}

.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field > span { font-weight: 600; font-size: .95rem; }

.life-app input,
.life-app select,
.life-app textarea {
  width: 100%;
  padding: .65rem .8rem;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.life-app textarea { resize: vertical; line-height: 1.5; }

.life-app input:focus,
.life-app select:focus,
.life-app textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.evidence { color: var(--accent); font-size: .85rem; overflow-wrap: anywhere; }
.evidence:empty { display: none; }

.segments {
  display: flex;
  padding: .2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.segments button {
  flex: 1;
  padding: .45rem .4rem;
  font: inherit;
  font-size: .95rem;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.segments button[aria-pressed="true"] { color: var(--paper); background: var(--accent); font-weight: 600; }

.actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.actions button {
  flex: 0 1 auto;
  padding: .7rem 1.1rem;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.actions button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .segments button[aria-pressed="true"],
  .actions button.primary { color: #10201b; }
}

/* --- results ------------------------------------------------------------- */

.results [hidden] { display: none; }

.headline { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
#range { margin: .3rem 0 0; color: var(--ink-soft); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .6rem;
  margin: 1rem 0 0;
}

.stats div {
  padding: .7rem .85rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.stats dt { color: var(--ink-soft); font-size: .85rem; }
.stats dd { margin: .15rem 0 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.chart { margin: 1.4rem 0 0; }
.chart figcaption { font-weight: 600; font-size: .95rem; margin-bottom: .4rem; }

.chart-box { position: relative; touch-action: pan-y; }
.chart-box svg { display: block; width: 100%; height: auto; overflow: visible; }

.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--ink-faint); stroke-width: 1; }
.chart .tick { fill: var(--ink-faint); font-size: 12px; font-family: var(--font); }
.chart .area { fill: var(--accent-soft); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.chart .cross { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .dot { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.chart [hidden] { display: none; }

/* --- your life in weeks: shades like a GitHub contribution grid ---------- */

.weeks .headline { margin: 0 0 .2rem; font-size: 1.15rem; }
.weeks .note { margin-bottom: .6rem; }
.weeks .chart-box { max-width: 30rem; }
.weeks .tip { transform: none; }

.week.lived, .swatch.lived { fill: var(--line-strong); background: var(--line-strong); }
.week.l0, .swatch.l0 { fill: var(--line); background: var(--line); }
.week.l1, .swatch.l1 { fill: color-mix(in srgb, var(--accent) 25%, var(--line)); background: color-mix(in srgb, var(--accent) 25%, var(--line)); }
.week.l2, .swatch.l2 { fill: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.week.l3, .swatch.l3 { fill: color-mix(in srgb, var(--accent) 75%, var(--line)); background: color-mix(in srgb, var(--accent) 75%, var(--line)); }
.week.l4, .swatch.l4 { fill: var(--accent); background: var(--accent); }
.weeks .expected { fill: none; stroke: var(--focus); stroke-width: 1.5; }
.swatch.expected { border: 2px solid var(--focus); }

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem 1rem;
  margin-top: .6rem;
  color: var(--ink-soft);
  font-size: .85rem;
}
.legend .swatch { width: .75rem; height: .75rem; border-radius: 2px; flex: none; }
.legend .group { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }

.tip {
  position: absolute;
  top: 0;
  transform: translateX(8px);
  padding: .3rem .55rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: .85rem;
  white-space: nowrap;
  pointer-events: none;
}

.tip.flip { transform: translateX(calc(-100% - 8px)); }

.causes, .improve { margin: .6rem 0 0; padding: 0; list-style: none; display: grid; gap: .65rem; }

.cause-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.cause-head strong { font-variant-numeric: tabular-nums; }

.bar { height: 8px; margin-top: .25rem; background: var(--line); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 4px; }

.causes summary { cursor: pointer; list-style: none; }
.causes summary::-webkit-details-marker { display: none; }
.causes summary .cause-head span::before {
  content: "▶";
  display: inline-block;
  width: 1.2em;
  font-size: .9em;
  color: var(--ink-soft);
  transition: transform .15s;
}
.causes details[open] summary .cause-head span::before { transform: rotate(90deg); }

.why {
  margin-top: .5rem;
  padding: .7rem .9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .9rem;
}

.why p { margin: 0 0 .45rem; }
.why ul { margin: 0 0 .6rem; padding-left: 1.2rem; }
.why li.up { color: var(--warn); }
.why li.down { color: var(--accent); }
.why .reading { color: var(--ink-soft); font-size: .85rem; margin-bottom: 0; }

.shift { display: block; margin-top: .2rem; font-size: .82rem; }
.shift.up { color: var(--warn); }
.shift.down { color: var(--accent); }

.improve li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .3rem 1rem;
  padding: .7rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.improve strong { color: var(--accent); }
.improve .empty { color: var(--ink-soft); display: block; }

.help {
  margin-top: 1.2rem;
  padding: .9rem 1.1rem;
  background: var(--accent-soft);
  border-radius: var(--radius);
}

.help h3 { margin: 0 0 .3rem; }
.help p { margin: 0; font-size: .95rem; }

/* --- how it works -------------------------------------------------------- */

.how summary { cursor: pointer; font-weight: 600; }
.how p { color: var(--ink-soft); font-size: .92rem; }
.how h3 { margin: 1.2rem 0 .2rem; font-size: 1rem; }
.how h4 { margin: .8rem 0 .2rem; font-size: .92rem; }
.refs { margin: 0; padding-left: 1.2rem; color: var(--ink-soft); font-size: .88rem; display: grid; gap: .35rem; }
.refs a { color: var(--accent); overflow-wrap: anywhere; }