/* Colour is used sparingly: navy for what is required, grey for the rest,
   blue for what is in place, red only when a plan is over its limit. */
[data-priority="must"], [data-tone="paid"] { --tone: var(--heading); }
[data-priority="should"], [data-priority="later"], [data-priority="skip"], [data-tone="muted"] { --tone: var(--muted); }
[data-priority="done"], [data-tone="free"] { --tone: var(--blue); }
[data-tone="warn"] { --tone: var(--warn); }
.status { color: var(--tone, var(--muted)); font-weight: 700; font-size: var(--step-0); }
.count {
  display: inline-grid; place-items: center; flex: none;
  min-inline-size: 2rem; block-size: 2rem; padding-inline: 0.4rem; border-radius: 100px;
  background: var(--sky); color: var(--navy); font-weight: 700; font-size: 0.9rem;
}

/* Readiness */
.readiness { display: grid; gap: 0.6rem; max-width: 36rem; }
.readiness-figure { color: var(--muted); }
.big { display: block; font-size: 2.6rem; font-weight: 800; line-height: 1.05; color: var(--heading); font-variant-numeric: tabular-nums; }
.meter { block-size: 0.6rem; border-radius: 100px; background: var(--grey); overflow: hidden; }
.meter-fill { display: block; block-size: 100%; border-radius: 100px; background: var(--sky); transition: inline-size 0.3s ease; }
.readiness-note { font-size: var(--step-0); color: var(--muted); }

/* Plan sections: a chevron that turns when the section opens. */
.plan-section { border-block-start: 1px solid var(--line); }
.plan-section summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; cursor: pointer; list-style: none; padding-block: 1.1rem; }
.plan-section summary::-webkit-details-marker { display: none; }
.plan-section summary::after {
  content: ''; margin-inline-start: auto; inline-size: 0.6rem; block-size: 0.6rem;
  border-inline-end: 2.5px solid var(--sky); border-block-end: 2.5px solid var(--sky);
  transform: rotate(-45deg); transition: transform 0.15s ease;
}
.plan-section[open] summary::after { transform: rotate(45deg); }
.section-title { font-size: var(--step-3); font-weight: 700; color: var(--heading); }
.section-hint { color: var(--muted); font-size: var(--step-0); flex-basis: 100%; }
@media (min-width: 46rem) { .section-hint { flex-basis: auto; } }

/* Checklist rows */
.punch-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.item { display: grid; gap: 0.5rem 1.5rem; grid-template-columns: 1fr; padding-block: 1.25rem; border-block-start: 1px solid var(--line); }
@media (min-width: 46rem) { .item { grid-template-columns: 2rem minmax(0, 1fr) 13rem; } }
.item-check { display: flex; gap: 0.6rem; align-items: center; align-self: start; font-size: var(--step-0); font-weight: 600; }
@media (min-width: 46rem) { .item-check label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.item-check input { inline-size: 1.4rem; block-size: 1.4rem; margin: 0.1rem 0 0; accent-color: var(--blue); cursor: pointer; }
.item-check label { cursor: pointer; }
.item-body { display: grid; gap: 0.35rem; max-width: 62ch; }
.item-title { font-size: 1.15rem; font-weight: 700; }
.item-why { font-weight: 500; }
.item-how { color: var(--muted); }
.item-tools { color: var(--muted); font-size: var(--step-0); }
.item-meta { margin: 0; display: grid; gap: 0.3rem; align-content: start; font-size: var(--step-0); }
.item-meta div { display: grid; grid-template-columns: 4rem 1fr; gap: 0.5rem; }
.item-meta dt { color: var(--muted); }
.item-meta dd { margin: 0; }
.item[data-priority="done"] .item-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--sky); text-decoration-thickness: 2px; }
.compact-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.compact-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding-block: 0.75rem; border-block-start: 1px solid var(--line); }
.compact-when { color: var(--muted); font-size: var(--step-0); }

/* Who does what: four bordered boxes, each led by its count. */
.lanes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.lane { display: grid; gap: 0.6rem; align-content: start; border: 1px solid var(--line); padding: 1.4rem 1.25rem; }
.lane .count { inline-size: 3rem; block-size: 3rem; font-size: 1.2rem; }
.lane-title { font-size: 1.2rem; }
.lane-rule { color: var(--muted); font-size: var(--step-0); }
.lane-list { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.lane-item { display: grid; gap: 0.1rem; padding-block: 0.7rem; border-block-start: 1px solid var(--line); }
.lane-name { font-weight: 600; }
.lane-tools { color: var(--muted); font-size: var(--step-0); }
.lane-empty { color: var(--muted); }
.traps { display: grid; gap: 0.6rem; background: var(--grey); padding: 1.75rem 1.5rem; }
.traps-title { font-size: var(--step-3); }
.trap-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.trap { display: grid; gap: 0.3rem; align-content: start; padding-block: 1rem; border-block-start: 1px solid var(--line); font-size: var(--step-0); }
.trap-title { font-size: 1.05rem; }
.trap-revisit { color: var(--muted); }

/* Cost calculator */
.cost-layout { display: grid; gap: 2rem; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) { .cost-layout { grid-template-columns: 19rem minmax(0, 1fr); } }
.cost-form { display: grid; gap: 1.1rem; background: var(--grey); padding: 1.5rem 1.25rem; }
.field-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.field-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 0.3rem; min-width: 0; }
.field label { font-weight: 700; font-size: var(--step-0); color: var(--heading); }
.hint { color: var(--muted); font-size: 0.8rem; }
input[type="number"], select {
  font: inherit; color: var(--text); background: var(--page);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.55rem 0.7rem; min-width: 0; inline-size: 100%;
}
input[type="number"]:focus, select:focus { border-color: var(--sky); }
input[type="number"] { font-variant-numeric: tabular-nums; }
.check { display: flex; gap: 0.6rem; align-items: center; font-size: var(--step-0); font-weight: 600; }
.check input { inline-size: 1.2rem; block-size: 1.2rem; accent-color: var(--blue); }
.button-quiet {
  font: inherit; font-size: var(--step-0); font-weight: 700; color: var(--heading); background: transparent; cursor: pointer;
  border: 2px solid var(--sky); border-radius: 100px; padding: 0.55rem 1.1rem; justify-self: start; text-align: start;
}
.button-quiet:hover { background: var(--sky-tint); }

.totals { display: grid; gap: 0.4rem; background: var(--navy); color: #ffffff; padding: 1.5rem 1.5rem 1.6rem; }
.total-figure { font-size: clamp(2.4rem, 1.8rem + 2.5vw, 3.4rem); font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.total-unit { font-size: 0.4em; font-weight: 600; color: var(--sky); }
.total-sub { color: var(--navy-soft); }

.table-scroll { overflow-x: auto; }
.cost-table { inline-size: 100%; border-collapse: collapse; min-inline-size: 36rem; }
.cost-table th, .cost-table td { text-align: start; vertical-align: top; padding: 0.9rem 0.75rem; border-block-end: 1px solid var(--line); }
.cost-table thead th { font-size: var(--step-0); color: var(--muted); font-weight: 600; }
.cost-table tbody th { font-weight: 700; color: var(--heading); inline-size: 10rem; padding-inline-start: 0; }
.cost-table tr[data-tone="muted"] .need { color: var(--muted); }
.need, .need-from { display: block; }
.need-from { font-size: 0.8rem; color: var(--muted); font-weight: 400; padding-block-start: 0.2rem; }
.choice-cell { min-inline-size: 15rem; }
.option-note, .breach { display: block; margin-block-start: 0.4rem; font-size: 0.85rem; line-height: 1.45; }
.option-note { color: var(--muted); }
.breach { color: var(--warn); font-weight: 700; }
.cost-table .money { text-align: end; white-space: nowrap; padding-inline-end: 0; }
.cost-table td.money { font-size: 1.15rem; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.cost-table td.money .status { display: block; font-size: 0.8rem; padding-block-start: 0.15rem; }
.footnotes { display: grid; gap: 0.5rem; color: var(--muted); font-size: var(--step-0); max-width: 72ch; }

/* Phones: each need becomes a block with the price beside its name. */
@media (max-width: 40rem) {
  .cost-table { min-inline-size: 0; }
  .cost-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cost-table tbody, .cost-table tr { display: block; }
  .cost-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; padding-block: 1rem; border-block-end: 1px solid var(--line); }
  .cost-table tbody th, .cost-table tbody td { display: block; padding: 0; border: 0; inline-size: auto; }
  .cost-table .choice-cell { grid-column: 1 / -1; min-inline-size: 0; }
  .cost-table td.money { grid-row: 1; grid-column: 2; }
}

/* Resources */
.res-group { display: grid; gap: 0.4rem; border-block-start: 1px solid var(--line); padding-block-start: 1.25rem; }
.res-title { font-size: var(--step-2); }
.res-intro { color: var(--muted); font-size: var(--step-0); }
.res-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.res-item { display: grid; gap: 0.1rem; padding-block: 0.6rem; }
.res-link { color: var(--blue); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.res-link:hover { text-decoration-thickness: 2px; }
.res-note { color: var(--muted); font-size: var(--step-0); }