/* =====================================================================
   TripMate - budget planner. Charts are plain CSS so no chart library
   is loaded and the page works without JavaScript.
   ===================================================================== */

.budget-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-5); align-items: start; }

/* ---- Category share bar ------------------------------------------ */
.cat-bar {
  display: flex; height: 14px; border-radius: var(--r-pill);
  overflow: hidden; background: var(--surface-3); margin-bottom: var(--sp-4);
}
.cat-bar span { display: block; height: 100%; }

.cat-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.cat-legend li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.cat-legend i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.cat-legend strong { color: var(--navy-900); }

/* ---- Planned vs actual ------------------------------------------- */
.compare { margin-bottom: var(--sp-4); }
.compare:last-child { margin-bottom: 0; }
.compare__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--navy-900); margin-bottom: var(--sp-2); }
.compare__row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.compare__label { width: 3.2rem; font-size: var(--fs-xs); color: var(--ink-500); flex-shrink: 0; }
.compare__track { flex: 1; height: 8px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.compare__fill { display: block; height: 100%; background: var(--teal-600); border-radius: var(--r-pill); }
.compare__fill--plan { background: var(--ink-400); }
.compare__fill--over { background: var(--danger-600); }
.compare__value { width: 5.5rem; text-align: right; font-size: var(--fs-xs); color: var(--ink-700); flex-shrink: 0; }

/* ---- Recommendations --------------------------------------------- */
.tip { padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--line-200); }
.tip:last-of-type { border-bottom: 0; }
.tip strong { display: block; color: var(--navy-900); font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.tip p { margin: 0; font-size: var(--fs-sm); color: var(--ink-700); }

/* ---- Total-budget slider ----------------------------------------- */
.budget-range { display: flex; flex-direction: column; gap: var(--sp-2); }
.budget-range__top { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.budget-range__top .input { flex: 1 1 8rem; min-width: 0; }
.budget-range__out { font-weight: 700; color: var(--teal-700); font-size: var(--fs-sm); white-space: nowrap; }

.budget-range__slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: var(--sp-1) 0 0;
  border-radius: var(--r-pill); background: var(--surface-3); cursor: pointer;
}
.budget-range__slider:focus-visible { outline: none; box-shadow: var(--ring); }
.budget-range__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal-600); border: 2px solid #fff; box-shadow: var(--shadow-sm);
  cursor: pointer; transition: transform var(--transition);
}
.budget-range__slider:active::-webkit-slider-thumb { transform: scale(1.12); }
.budget-range__slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--teal-600);
  border: 2px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer;
}
.budget-range__slider::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); }
/* Firefox fills the passed portion natively; WebKit gets a gradient set in ui.js. */
.budget-range__slider::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--teal-600); }
.budget-range__scale { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-400); }

/* ---- Travel-style radio cards ------------------------------------
   Single column inside the ~520px budget modal (two only when a wider
   container actually has room), so the title + tagline never clip. */
.ts-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); }
.ts-option { display: block; cursor: pointer; }
.ts-option__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ts-option__body {
  display: block; height: 100%; padding: var(--sp-3);
  border: 1.5px solid var(--line-300); border-radius: var(--r-md); background: var(--surface);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.ts-option:hover .ts-option__body { border-color: var(--teal-600); transform: translateY(-1px); }
.ts-option__input:checked + .ts-option__body { border-color: var(--teal-600); background: var(--sky-100); }
.ts-option__input:focus-visible + .ts-option__body { box-shadow: var(--ring); }
/* No space-between + wrap: the tagline follows the title and can never be
   clipped off the edge of a narrow card. */
.ts-option__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--sp-2); margin-bottom: var(--sp-1); }
.ts-option__head strong { color: var(--navy-900); font-size: var(--fs-base); }
.ts-option__tag { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tm-link); }
.ts-option__desc { display: block; font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .ts-option__body, .budget-range__slider::-webkit-slider-thumb { transition: none; }
  .ts-option:hover .ts-option__body { transform: none; }
}

/* ---- Estimated budget table -------------------------------------- */
.estimate-head-actions { display: flex; align-items: center; gap: var(--sp-3); }
.estimate-head-total { font-size: var(--fs-lg); color: var(--navy-900); white-space: nowrap; }

.estimate-table { width: 100%; }
.estimate-table td[data-cell="amount"],
.estimate-table [data-estimate-total-cell] { font-variant-numeric: tabular-nums; }
.estimate-table tbody td { background: transparent; }
.estimate-table tbody tr:hover td { background: transparent; }
.estimate-table td[data-label="Category"] { font-weight: 600; color: var(--navy-900); }
.estimate-table td[data-cell="amount"] { font-weight: 700; color: var(--navy-900); }

/* Each row's share is drawn as a proportional bar behind the share cell.
   The width comes from the --share custom property the estimator sets when
   it writes the same figure as text, so the bar can never disagree with the
   number beside it, and the table still reads correctly with no CSS. */
.estimate-table td[data-cell="share"] {
  position: relative; color: var(--ink-500); font-weight: 600;
  min-width: 8rem;
}
.estimate-table td[data-cell="share"]::before {
  content: ""; position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: .45rem;
  height: 3px; border-radius: var(--r-pill); background: var(--line-200);
}
.estimate-table td[data-cell="share"]::after {
  content: ""; position: absolute; left: var(--sp-4); bottom: .45rem;
  /* Shares top out around 30%, so the bar is scaled to fill its track at
     a third of the budget; it compares categories, not absolute width. */
  width: min(calc(var(--share, 0%) * 3), calc(100% - var(--sp-4) * 2));
  height: 3px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--teal-700), var(--sky-500));
  transition: width 300ms var(--ease);
}
.estimate-table tfoot .estimate-total-row td {
  border-top: 2px solid var(--line-300); font-weight: 700;
  color: var(--navy-900); background: transparent; font-size: var(--fs-base);
}
.estimate-table tfoot .estimate-total-row td[data-cell="share"]::before,
.estimate-table tfoot .estimate-total-row td[data-cell="share"]::after { display: none; }

/* Below 720px .table--cards restacks every row and reuses td::before to
   print the column label. The bar has to give that pseudo-element back or
   the Share rows lose their heading on mobile. */
@media (max-width: 720px) {
  .estimate-table td[data-cell="share"] { min-width: 0; }
  .estimate-table td[data-cell="share"]::before {
    content: attr(data-label);
    position: static; height: auto; background: none; border-radius: 0;
  }
  .estimate-table td[data-cell="share"]::after { display: none; }
}

/* Printed-only trip summary line. */
.print-only { display: none; }
.estimate-caption { font-weight: 600; color: var(--navy-900); margin: 0 0 var(--sp-3); }

@media (max-width: 960px) {
  .budget-layout { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .budget-layout { display: block; }
  .panel { break-inside: avoid; box-shadow: none; }
  /* Print just the estimate: drop the inputs, the sidebar, and the hero. */
  #trip-inputs, .budget-layout aside, .listing-hero { display: none !important; }
  .print-only { display: block !important; }
  .estimate-table tbody tr:nth-child(even) td { background: transparent; }
}