/* Needs analysis on the plan card (public/needs.js): "Understanding your project", why each service is there, usage
   prices, Set up later and Add a service. Loaded after overlay.css. No hover motion; the findings come in once. */
.nd .live-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.nd .live-h h4 { margin: 0; }
.nd-src { font-size: 12px; color: var(--ink-3); }
.nd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.nd-fact { padding: 10px 14px; border-radius: 14px; background: var(--raised); min-width: 0; }
.nd-fact small { display: block; font-size: 11.5px; color: var(--ink-3); }
.nd-fact b { display: block; font: 500 15px/1.3 var(--display, var(--font)); letter-spacing: -.01em; }
.nd-fact span { display: block; font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 8px; }
.nd-feats li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); min-width: 0; }
.nd-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 99px; background: var(--brand-soft, var(--raised)); color: var(--brand-ink, var(--ink)); }
.nd-t { min-width: 0; display: flex; flex-direction: column; }
.nd-t b { font-weight: 500; font-size: 13px; }
.nd-t span { font-size: 12px; color: var(--ink-2); }
.nd-t small { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-skip, .nd-none { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.nd-skip b { font-weight: 500; color: var(--ink-2); }

/* the findings come in one by one on the first paint, then the services */
@keyframes ndIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.nd-fresh .nd-fact, .nd-fresh .nd-feats li, .nd-fresh .nd-skip, .cost.nd-fresh { animation: ndIn .32s var(--ease, ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { .nd-fresh .nd-fact, .nd-fresh .nd-feats li, .nd-fresh .nd-skip, .cost.nd-fresh { animation: none; } }

/* service rows: why, unit price, later */
.cost-row .prov-t { display: flex; flex-direction: column; min-width: 0; }
.cost-row .prov-t b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost-row .prov-t .why { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.cost-row .prov-t .unit { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cost-row { align-items: start; padding-top: 12px; padding-bottom: 12px; }
.cost-row.head { align-items: center; padding-top: 8px; padding-bottom: 8px; }
.cost-row > .cat, .cost-row > .swap, .cost-row > .live-sw { align-self: center; }
.cost-row.is-later .now { color: var(--ink-3); }
.nd-later { display: inline-flex; align-items: center; height: 24px; margin-top: 6px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 99px; font: 500 11.5px var(--font); color: var(--ink); background: var(--panel); cursor: pointer; }
.cost-row .now small, .cost-row .later small { white-space: normal; }
.nd-later.on { background: var(--ink); color: var(--panel); }
.nd-later:focus-visible { outline: 2px solid var(--brand, #e0682f); outline-offset: 2px; }

.nd-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.nd-add .btn { gap: 6px; }
.nd-add-note { font-size: 12px; color: var(--ink-3); }
.nd-addsel { height: 32px; background: var(--raised); }
.nd-addsel span { font-size: 12.5px; color: var(--ink); }
.nd-assume { margin: 2px 0 12px; font-size: 12px; color: var(--ink-2); }
.nd-assume summary { cursor: pointer; color: var(--ink-2); width: max-content; max-width: 100%; }
.nd-assume ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.nd-assume b { font-weight: 500; }

/* narrow card: the category is a small label with the Real switch, then the service and why on the full width, then prices */
@container (max-width: 620px) {
  .cost-row { grid-template-areas: "cat cat live" "prov prov prov" "now later act"; row-gap: 8px; }
  .cost-row > .cat { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
  .cost-row > .live-sw { align-self: center; }
  .cost-row > .swap { align-self: end; }
}
@media (max-width: 560px) {
  .nd-facts { grid-template-columns: 1fr 1fr; }
  .nd-feats { grid-template-columns: 1fr; }
}
/* Compact (owner 2026-11-12: less scroll): two lines a row in a narrow card: the service, its why and the Real switch, then the
   prices with Change; the category word is left out there, the service's why line already says what it is for */
@container (max-width: 620px) {
  .card.brief .cost-row { grid-template-areas: "prov prov live" "now later act"; row-gap: 6px; }
  .card.brief .cost-row > .cat { display: none; }
  .card.brief .cost-row > .now small, .card.brief .cost-row > .later small { margin-top: 1px; }
}