/* The life-events page. It reuses the lifespan page's form, bars and stats
   from lifespan.css; this file adds only what that page does not have. */

.parents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .9rem;
}

.parent {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-width: 0;
  margin: 0;
  padding: .8rem .9rem .9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.parent legend { padding: 0 .3rem; font-weight: 600; }
.parent .fields { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.parent .segments { background: var(--paper); }

.results [hidden],
.panel [hidden] { display: none; }

/* --- the parents table ----------------------------------------------------- */

.table-scroll { overflow-x: auto; }

.chances {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.chances th,
.chances td { padding: .5rem .6rem; text-align: right; border-bottom: 1px solid var(--line); }
.chances th[scope="row"] { text-align: left; font-weight: 600; }
.chances th[scope="col"] { color: var(--ink-soft); font-size: .88rem; font-weight: 600; }
.chances tr.any { background: var(--accent-soft); }
.chances td { font-weight: 700; }

.facts { margin: .8rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; }

#marry-half { margin: .8rem 0 0; }

/* --- activities ------------------------------------------------------------ */

.risks { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; gap: .9rem; }

.risk-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .3rem 1rem;
  margin-top: .3rem;
}

.risk-days { color: var(--ink-soft); font-size: .85rem; }

.count { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--ink-soft); }
.life-app .count input { width: 5.5rem; padding: .35rem .5rem; }

.risk.ordinary {
  padding: .6rem .8rem;
  background: var(--focus-soft);
  border-radius: var(--radius);
}
.risk.ordinary .bar-fill { background: var(--focus); }

.risk-total {
  padding: .9rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.risk-total p { margin: 0; }
.risk-total p + p { margin-top: .3rem; color: var(--ink-soft); }