/* LAST YEAR'S MONTHS — styles for pages/lastyear.js (Monthly statements → "Last year's months" tab). */

/* ---------- header and view switch ---------- */
.ly-head h2 { font-size: 26px; margin: 2px 0 6px; }
.ly-seg { margin-top: var(--space-4); display: inline-flex; }
.ly-badge {
  display: inline-block;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--amber-dot);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

/* ---------- a timing question ---------- */
.ly-item.open { border-color: color-mix(in srgb, var(--amber-dot) 55%, var(--line)); }
.ly-item.decided { background: color-mix(in srgb, var(--green) 4%, var(--surface)); }
.ly-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.ly-name { font-size: 19px; font-weight: 900; letter-spacing: -.01em; }
.ly-compare {
  display: grid;
  grid-template-columns: 260px 260px 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, #7c58bb 4%, var(--surface));
}
.ly-why p { margin: 0 0 8px; font-size: 14.5px; }
.ly-act { margin-top: var(--space-4); align-items: center; }

/* ---------- twelve-month shape ---------- */
.ly-shape { display: grid; gap: 4px; }
.ly-bars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  align-items: end;
  height: 72px;
  padding: 0 2px;
  border-bottom: 2px solid var(--line);
}
.ly-bars i {
  display: block;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #7c58bb, #3b8aa8);
}
.ly-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; padding: 0 2px; }
.ly-months span { font-size: 10.5px; font-weight: 700; color: var(--muted); text-align: center; }
.ly-cap { font-size: 12.5px; font-weight: 700; color: var(--ink); }

/* ---------- agreeing lines and the full table ---------- */
.ly-agree h3 { margin: 0 0 4px; font-size: 18px; }
.ly-list { columns: 2; margin: var(--space-3) 0 0; padding-left: 18px; font-size: 14px; }
.ly-list li { margin-bottom: 4px; break-inside: avoid; }
.ly-tbl { width: 100%; table-layout: fixed; }
.ly-tbl th, .ly-tbl td { padding: 9px 10px; vertical-align: middle; overflow-wrap: anywhere; }
.ly-tbl th:nth-child(1) { width: 20%; }
.ly-tbl th:nth-child(2) { width: 11%; }
.ly-tbl th:nth-child(3) { width: 16%; }
.ly-tbl th:nth-child(4) { width: 20%; }
.ly-tbl th:nth-child(5) { width: 11%; }
.ly-tbl th:nth-child(6) { width: 13%; }
.ly-tbl th:nth-child(7) { width: 9%; }
.ly-tbl .chip { white-space: normal; line-height: 1.25; }
.ly-tbl tbody tr:nth-child(odd) td { background: color-mix(in srgb, #7c58bb 3%, var(--surface)); }