/* ============================================================
   tools.css
   Styles for the sold prices page and the payment plan calculator.
   Loaded only on those two pages, after styles.css, and it uses
   the same colours and type set out at the top of styles.css.
   Every class here starts with "tl-" so nothing clashes.
   ============================================================ */

/* ---------- Filter bar above the sold table ---------- */
.tl-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 28px; margin: 0 0 26px; }
.tl-bar[hidden] { display: none; }
.tl-pick { display: grid; gap: 7px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tl-pick select,
.tl-field select,
.tl-field input {
  font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 12px 14px; outline: none;
}
.tl-pick select:focus, .tl-field select:focus, .tl-field input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14, 85, 81, .12); }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-chip {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--deep); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 16px; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tl-chip:hover { border-color: var(--teal); }
.tl-chip.is-active { background: var(--deep); border-color: var(--deep); color: var(--white); }
.tl-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* ---------- Sold table (built on the site's .terms table) ---------- */
.tl-sold tr[hidden] { display: none !important; }   /* the phone layout sets rows to display:block, so be firm */
.tl-sold tbody th a { text-decoration: none; border-bottom: 1px solid var(--line); }
.tl-sold tbody th a:hover { border-color: var(--teal); }
.tl-sold td { font-variant-numeric: tabular-nums; }
.tl-sold td[data-label="Price"] { color: var(--ink); white-space: nowrap; }
.tl-note { margin-top: 22px; max-width: 78ch; }
.tl-note a { color: var(--teal); }

/* ---------- Calculator ---------- */
.tl-calc { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.tl-form { display: grid; gap: 22px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.tl-field { display: grid; gap: 8px; }
.tl-field label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tl-field select, .tl-field input { width: 100%; font-variant-numeric: tabular-nums; }
.tl-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.tl-out { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
.tl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 17px 26px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.tl-row small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.tl-row > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; text-align: right; }
.tl-row--total { background: var(--deep); color: var(--white); border-bottom: 0; }
.tl-row--total small { color: rgba(255, 253, 248, .68); }
.tl-row--total > span:last-child { font-family: var(--serif); font-size: 27px; font-weight: 500; color: var(--gold-soft); }
.tl-foot { margin: 0; padding: 18px 26px 22px; font-size: 13px; line-height: 1.6; color: var(--muted); }

@media (max-width: 900px) {
  .tl-calc { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 640px) {
  .tl-bar { gap: 14px; }
  .tl-pick, .tl-pick select { width: 100%; }
  .tl-chip { flex: 1 1 auto; padding: 12px 10px; }
  .tl-form { padding: 22px 18px; }
  .tl-row { padding: 15px 18px; }
  .tl-row > span:last-child { white-space: normal; }
  .tl-foot { padding: 16px 18px 20px; }
}