/* Reuse the calculator's surfaces, fields and theme tokens within its reference layout. */
.purchase-plan { margin-top: 20px; word-break: keep-all; overflow-wrap: anywhere; }
.purchase-plan h2 { color: var(--text-dim); margin-bottom: .75rem; }
.purchase-copy, .purchase-basis, .purchase-storage-list {
  font-size: 1rem; line-height: var(--content-leading-body); color: var(--text-dim);
  max-width: var(--content-prose); margin: .75rem 0;
}
.purchase-items { margin-top: 1.5rem; }
.purchase-item { padding: 1.5rem 0; border-top: 1px solid var(--border); min-width: 0; }
.purchase-item:last-child { padding-bottom: 0; }
.purchase-item-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; align-items: baseline; }
.purchase-item h3 { font-size: 1.125rem; margin: 0; }
.purchase-daily { margin: 0; font-size: 1rem; font-weight: 650; color: var(--text); }
.purchase-source { grid-column: 1 / -1; margin: 0; font-size: .9375rem; color: var(--text-dim); line-height: 1.7; }
.purchase-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 15rem)); gap: 1rem; margin: 1rem 0; }
.purchase-field { min-width: 0; }
.purchase-field label { display: block; font-size: .9375rem; color: var(--text-dim); font-weight: 600; margin-bottom: .5rem; }
.purchase-plan input[type="number"] { font-size: 1rem; min-height: 44px; min-width: 0; }
.purchase-input-hint { display: block; min-height: 0; margin-top: .3rem; font-size: .9375rem; line-height: 1.6; color: var(--text-dim); }
.purchase-input-hint:empty { display: none; }
.purchase-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.purchase-metric { border-left: 2px solid var(--border); padding-left: .875rem; }
.purchase-metric:first-child { border-color: var(--accent); }
.purchase-metric dt { font-size: .9375rem; color: var(--text-dim); margin-bottom: .4rem; }
.purchase-metric dd { font-size: clamp(1.125rem, 1.65vw, 1.5rem); font-weight: 750; line-height: 1.45; margin: 0; font-variant-numeric: tabular-nums; }
.purchase-metric dd.purchase-metric-sub { font-size: .9375rem; font-weight: 500; color: var(--text-dim); margin-top: .35rem; }
.purchase-details > summary { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .75rem; padding: .75rem 0; min-height: 44px; font-size: 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.purchase-details > summary::-webkit-details-marker { display: none; }
.purchase-details > summary::before { content: "+"; color: var(--text-dim); width: 1rem; text-align: center; }
.purchase-details[open] > summary::before { content: "−"; }
.purchase-summary-hint { color: var(--text-dim); font-size: .9375rem; font-weight: 400; }
.purchase-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.purchase-details-body { border-top: 1px solid var(--border); padding-top: .5rem; }
.purchase-details h4, .purchase-table caption { font-size: 1rem; font-weight: 700; text-align: left; margin: 1.5rem 0 .75rem; color: var(--text); }
.purchase-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: .75rem 0; font-variant-numeric: tabular-nums; }
.purchase-table th, .purchase-table td { padding: .7rem .5rem; border-bottom: 1px solid var(--border); font-size: 1rem; line-height: 1.6; text-align: right; }
.purchase-table th { color: var(--text-dim); font-weight: 500; }
.purchase-table th:first-child { text-align: left; padding-left: 0; width: 40%; }
.purchase-table td:last-child, .purchase-table th:last-child { padding-right: 0; }
.purchase-storage-list { padding-left: 1.35rem; }
.purchase-storage-list li + li { margin-top: .5rem; }
.purchase-price > .purchase-field { max-width: 20rem; }
.purchase-costs { margin: 1rem 0; }
.purchase-costs > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--border); font-size: 1rem; line-height: 1.6; }
.purchase-costs dt { color: var(--text-dim); min-width: 0; }
.purchase-costs dd { margin: 0; flex: 0 0 auto; max-width: 100%; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.purchase-error { color: var(--text); border-left: 3px solid var(--warn-border); padding-left: .75rem; line-height: 1.7; }
.purchase-plan [aria-invalid="true"] { border-color: var(--warn-text); }
@media (max-width: 600px) {
  :lang(en) .purchase-fields label { min-height: 3em; }
  .purchase-item-head { grid-template-columns: minmax(0, 1fr); }
  .purchase-metrics { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .purchase-metric { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .2rem .75rem; align-items: baseline; }
  .purchase-metric dt { margin: 0; }
  .purchase-metric dd.purchase-metric-sub { grid-column: 2; margin: 0; }
  .purchase-summary-hint { flex-basis: 100%; padding-left: 1.75rem; }
}
@media (max-width: 380px) {
  .purchase-table th, .purchase-table td { padding-inline: .25rem; font-size: .9375rem; }
  .purchase-table th:first-child { width: 36%; }
  .purchase-fields { grid-template-columns: minmax(0, 1fr); }
  .purchase-metric { grid-template-columns: minmax(0, 1fr); }
  .purchase-metric dd.purchase-metric-sub { grid-column: auto; }
  .purchase-costs > div { flex-direction: column; gap: .25rem; }
  .purchase-costs dd { text-align: left; }
}