/* ============================================================
   John Andrew Homes — calculators & tools
   Loaded by tools.html and str-calculator.html on top of site.css
   ============================================================ */

/* ---------- Tool picker ----------
   Two controls over the same panels: a tab strip wide enough to show all eight
   at once, and a native select for everything narrower. The strip WRAPS rather
   than scrolling — a horizontally clipped tab row reads as broken, and a hidden
   scrollbar gives the reader no clue anything is missing. */
.tool-nav {
  position: sticky; top: 74px; z-index: 60;
  background: var(--ps-cream);
  border-bottom: 1px solid var(--ps-line);
}
.tool-nav-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.tool-tabs { display: flex; flex-wrap: wrap; gap: 0 2px; }
.tool-tab {
  flex: 0 0 auto;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ps-gray);
  padding: 19px 9px; border: 0; background: none; cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.tool-tab:hover { color: var(--ps-slate); }
.tool-tab[aria-selected="true"] { color: var(--ps-slate-ink); border-bottom-color: var(--ps-sand); }

.tool-select { display: none; align-items: center; gap: 12px; padding: 12px 0; }
.tool-select > span {
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ps-gray);
  flex: 0 0 auto;
}
.tool-select select {
  flex: 1; min-width: 0;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: .06em; color: var(--ps-slate-ink);
  padding: 13px 38px 13px 14px;
  border: 1px solid var(--ps-line); border-radius: 2px; background: var(--ps-white);
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23919290' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.tool-select select:focus {
  outline: none; border-color: var(--ps-sand-deep);
  box-shadow: 0 0 0 3px rgba(193,180,151,.22);
}

/* Below this the eight tabs can no longer sit on two tidy rows. */
@media (max-width: 860px) {
  .tool-tabs { display: none; }
  .tool-select { display: flex; }
}

/* ---------- Panels ---------- */
.tool-panel { padding: 64px 0 78px; }
.tool-panel[hidden] { display: none; }
.tool-head { max-width: 720px; margin-bottom: 38px; }
.tool-head h2 { font-size: clamp(27px, 3.4vw, 38px); margin-bottom: 14px; }
.tool-head p  { color: var(--ps-gray); font-size: 17px; }

/* ---------- Calculator layout ---------- */
.calc {
  display: grid; grid-template-columns: 1fr 400px; gap: 34px; align-items: start;
}
.calc-wide { grid-template-columns: 1fr; }

.calc-inputs {
  background: var(--ps-white);
  border: 1px solid var(--ps-line);
  border-radius: 3px; padding: 30px 30px 34px;
  box-shadow: var(--shadow-sm);
}
.calc-inputs h3,
.calc-out h3 {
  font-size: 13px; letter-spacing: .2em; color: var(--ps-gray);
  margin-bottom: 22px; font-weight: 600;
}
.calc-inputs h3 + .fgrid { margin-top: -4px; }

.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.fgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.f-full { grid-column: 1 / -1; }

.f label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ps-slate); margin-bottom: 7px;
}
.f label .hint { display: block; text-transform: none; letter-spacing: 0; font-weight: 400;
  font-family: 'Source Sans 3', sans-serif; font-size: 12.5px; color: var(--ps-gray); margin-top: 3px; }

.f-in { position: relative; display: flex; align-items: center; }
.f-in .pre, .f-in .post {
  position: absolute; color: var(--ps-gray); font-size: 15px; pointer-events: none;
}
.f-in .pre  { left: 13px; }
.f-in .post { right: 13px; }
.f-in input, .f-in select {
  width: 100%;
  font-family: 'Source Sans 3', sans-serif; font-size: 16.5px; color: var(--ps-slate-ink);
  padding: 12px 13px; border: 1px solid var(--ps-line); border-radius: 2px;
  background: var(--ps-white); transition: border-color .18s, box-shadow .18s;
  -moz-appearance: textfield;
}
.f-in input::-webkit-outer-spin-button,
.f-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.f-in.has-pre  input { padding-left: 27px; }
.f-in.has-post input { padding-right: 34px; }
.f-in input:focus, .f-in select:focus {
  outline: none; border-color: var(--ps-sand-deep);
  box-shadow: 0 0 0 3px rgba(193,180,151,.22);
}
.f-in select { cursor: pointer; appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23919290' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; }

.seg { display: flex; border: 1px solid var(--ps-line); border-radius: 2px; overflow: hidden; }
.seg button {
  flex: 1; border: 0; background: var(--ps-white); cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ps-gray);
  padding: 12px 6px; transition: background .18s, color .18s;
}
.seg button + button { border-left: 1px solid var(--ps-line); }
.seg button[aria-pressed="true"] { background: var(--ps-slate); color: var(--ps-white); }

.calc-reset {
  margin-top: 24px; background: none; border: 0; cursor: pointer; padding: 0;
  font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600; color: var(--ps-gray);
  border-bottom: 1px solid var(--ps-line); transition: color .2s, border-color .2s;
}
.calc-reset:hover { color: var(--ps-slate-ink); border-color: var(--ps-sand); }

/* ---------- Output panel ---------- */
.calc-out {
  position: sticky; top: 146px;
  background: var(--ps-slate); color: var(--ps-white);
  border-radius: 3px; padding: 32px 30px 34px;
  box-shadow: var(--shadow-md);
}
.calc-out h3 { color: var(--ps-sand); }

.headline { margin-bottom: 8px; }
.headline .hl-val {
  font-family: 'Abril Fatface', Georgia, serif;
  font-size: clamp(40px, 5.4vw, 54px); line-height: 1; color: var(--ps-white);
}
.headline .hl-lab {
  font-family: 'Montserrat', sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-top: 11px;
}
.headline.neg .hl-val { color: #e9a9a0; }

.orow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,.13);
}
.orow:first-of-type { border-top: 0; }
.orow dt { color: rgba(255,255,255,.72); font-size: 15.5px; }
.orow dd { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 16px;
  text-align: right; white-space: nowrap; }
.orow.strong { border-top: 1.5px solid var(--ps-sand); margin-top: 6px; }
.orow.strong dt { color: var(--ps-white); font-weight: 600; }
.orow.strong dd { color: var(--ps-sand); font-size: 19px; }
.orow.sub dt, .orow.sub dd { font-size: 14px; color: rgba(255,255,255,.55); }
.orow dd.neg { color: #e9a9a0; }
.orow dd.pos { color: #b9d6bd; }

.onote {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.13);
  font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.62);
}
.out-cta { margin-top: 22px; }
.out-cta .btn { width: 100%; }

/* light variant of the output panel, for the second column of a wide tool */
.calc-out.light { background: var(--ps-white); color: var(--ps-slate);
  border: 1px solid var(--ps-line); box-shadow: var(--shadow-sm); }
.calc-out.light h3 { color: var(--ps-gray); }
.calc-out.light .hl-val { color: var(--ps-slate-ink); }
.calc-out.light .hl-lab { color: var(--ps-gray); }
.calc-out.light .orow { border-color: var(--ps-line); }
.calc-out.light .orow dt { color: var(--ps-gray); }
.calc-out.light .orow.strong dt { color: var(--ps-slate-ink); }
.calc-out.light .orow.strong dd { color: var(--ps-slate-ink); }
.calc-out.light .onote { border-color: var(--ps-line); color: var(--ps-gray); }

/* ---------- Stat strip ---------- */
.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--ps-line); border: 1px solid var(--ps-line);
  border-radius: 3px; overflow: hidden; margin-bottom: 30px;
}
.stat { background: var(--ps-white); padding: 22px 20px; }
.stat .s-val { font-family: 'Abril Fatface', Georgia, serif; font-size: 30px; line-height: 1;
  color: var(--ps-slate-ink); }
.stat .s-lab { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 10.5px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ps-gray); margin-top: 10px; }
.stat .s-sub { font-size: 13px; color: var(--ps-gray); margin-top: 5px; }

/* ---------- Charts ---------- */
.chart-card {
  background: var(--ps-white); border: 1px solid var(--ps-line); border-radius: 3px;
  padding: 28px 30px 24px; box-shadow: var(--shadow-sm); margin-top: 26px;
}
.chart-card h3 { font-size: 13px; letter-spacing: .2em; color: var(--ps-gray);
  margin-bottom: 6px; font-weight: 600; }
.chart-card .chart-sub { font-size: 14px; color: var(--ps-gray); margin-bottom: 24px; }
.chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart-wrap svg { display: block; min-width: 520px; width: 100%; height: auto; }

/* Charts and wide tables keep their minimum width and scroll inside their own
   card. The fade on the right edge is the only thing telling a touch reader
   there is more to see, so it is not decoration. */
.scroll-hint { position: relative; }
.scroll-hint::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34px;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--ps-white));
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.scroll-hint.is-scrollable::after { opacity: 1; }

.legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px;
  font-size: 13.5px; color: var(--ps-gray); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 13px; height: 13px; border-radius: 2px; display: block; }

/* ---------- Amortization / data tables ---------- */
.tbl-wrap { overflow-x: auto; margin-top: 22px; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
table.data th {
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ps-gray);
  text-align: right; padding: 11px 14px; border-bottom: 1.5px solid var(--ps-line);
  white-space: nowrap;
}
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--ps-line);
  text-align: right; white-space: nowrap; }
table.data tbody tr:hover { background: var(--ps-cream); }
table.data tr.year-row td { font-weight: 600; color: var(--ps-slate-ink); }

.tbl-toggle { margin-top: 18px; }

/* ---------- Market source badge ---------- */
.src-badge {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--ps-white); border: 1px solid var(--ps-line); border-radius: 2px;
  padding: 10px 16px; font-size: 13.5px; color: var(--ps-gray); margin-bottom: 26px;
}
.src-badge b { color: var(--ps-slate-ink); font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.src-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ps-sand-deep); }

.tier-flag {
  display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 2px;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
}
.tier-flag.ok   { background: rgba(193,180,151,.26); color: var(--ps-sand); }
.tier-flag.est  { background: rgba(255,255,255,.12); color: rgba(255,255,255,.75); }

/* ---------- Checklist ---------- */
.season-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.season {
  background: var(--ps-white); border: 1px solid var(--ps-line); border-radius: 3px;
  padding: 26px 26px 22px; box-shadow: var(--shadow-sm);
}
.season h3 { font-size: 15px; letter-spacing: .06em; margin-bottom: 4px; }
.season .when { font-family: 'Montserrat', sans-serif; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ps-sand-deep); font-weight: 600; margin-bottom: 18px; }
.season ul { list-style: none; }
.season li { border-top: 1px solid var(--ps-line); }
.season li:first-child { border-top: 0; }
.season label { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0;
  cursor: pointer; font-size: 15.5px; line-height: 1.5; }
.season input[type="checkbox"] { flex: 0 0 auto; margin-top: 4px; width: 17px; height: 17px;
  accent-color: var(--ps-sand-deep); cursor: pointer; }
.season input:checked + span { color: var(--ps-gray); text-decoration: line-through; }
.season .why { display: block; font-size: 13px; color: var(--ps-gray); margin-top: 2px;
  text-decoration: none !important; }

.check-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin-bottom: 28px; padding: 16px 22px;
  background: var(--ps-white); border: 1px solid var(--ps-line); border-radius: 3px;
}
.check-bar .prog { flex: 1 1 220px; height: 7px; background: var(--ps-line); border-radius: 4px;
  overflow: hidden; min-width: 160px; }
.check-bar .prog i { display: block; height: 100%; background: var(--ps-sand-deep); width: 0;
  transition: width .3s ease; }
.check-bar .ptext { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ps-slate); }

/* ---------- Disclaimer ---------- */
.tool-fine {
  margin-top: 34px; padding: 22px 26px; background: var(--ps-cream);
  border-left: 3px solid var(--ps-sand); border-radius: 2px;
  font-size: 14px; line-height: 1.65; color: var(--ps-gray);
}
.tool-fine strong { color: var(--ps-slate); }
.tool-fine p + p { margin-top: 10px; }

/* ---------- Hub cards ----------
   MOVED TO site.css. These are generic cross-link cards used by the tools hub,
   the calculator pages, the guides (guides.py's related()) and the community
   pages — and the guides and community pages do NOT load this stylesheet, so
   living here meant their "Where this goes next" cards rendered as unstyled
   inline text on 12 pages. Generic components belong in site.css. */

/* ---------- Print ---------- */
@media print {
  .site-header, .tool-nav, .site-footer, .cta-band, .out-cta, .check-bar,
  .calc-reset, #contact { display: none !important; }
  .tool-panel[hidden] { display: block !important; }
  .calc { grid-template-columns: 1fr; }
  .calc-out { position: static; background: var(--ps-white); color: var(--ps-slate);
    border: 1px solid var(--ps-line); }
  .calc-out .hl-val, .calc-out .orow dd { color: var(--ps-slate-ink); }
  .calc-out .orow dt, .calc-out .onote, .calc-out .hl-lab { color: #555; }
  .season, .chart-card, .tool-card { break-inside: avoid; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .calc { grid-template-columns: 1fr; }
  .calc-out { position: static; }
}
/* site.css drops the header to position:relative at 980px, so it scrolls away
   on tablet and phone — the tab bar has to stick to the very top there, not to
   a header that is no longer above it. */
@media (max-width: 980px) {
  .tool-nav { top: 0; }
  .calc-out { top: 20px; }
}
@media (max-width: 720px) {
  .tool-panel { padding: 44px 0 56px; }
  .calc-inputs { padding: 24px 20px 28px; }
  .calc-out { padding: 26px 22px 28px; }
  .fgrid, .fgrid-3 { grid-template-columns: 1fr; gap: 16px; }
  .chart-card { padding: 22px 16px 20px; margin-top: 20px; }
  .stat { padding: 16px 14px; }
  .stat .s-val { font-size: 25px; }
  .headline .hl-val { font-size: 38px; }
  .orow { padding: 10px 0; }
  .orow dt { font-size: 15px; }
  .orow dd { font-size: 15px; }
  .season { padding: 22px 20px 18px; }
  .check-bar { padding: 14px 16px; gap: 12px; }
  .tool-fine { padding: 18px 18px; font-size: 13.5px; }
  .src-badge { padding: 12px 14px; font-size: 13px; }
}

/* iPad portrait: two columns still fit comfortably, the sticky result panel
   does not. */
@media (min-width: 721px) and (max-width: 1040px) {
  .calc-out { position: static; }
  .fgrid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- short-term vs long-term comparison ---------- */
/* These live INSIDE .calc-out, which is slate with white text — so the columns
   are a translucent lift off that ground, not white cards. A white card here
   would render .orow's white text invisible. */
.vs-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin: 4px 0 26px;
}
.vs-col {
  min-width: 0;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 3px solid var(--ps-sand);
  border-radius: 3px; padding: 14px 16px 4px;
}
.vs-col h4 {
  font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ps-sand);
  margin-bottom: 6px;
}
.vs-col .orow { padding: 9px 0; gap: 10px; }
.vs-col .orow dt { font-size: 13.5px; }
.vs-col .orow dd { font-size: 14px; }
.vs-col .orow.sub dt, .vs-col .orow.sub dd { font-size: 12.5px; }
.vs-col .orow.strong dd { font-size: 16px; }

/* The callout John asked for. Deliberately the loudest thing in the output —
   sand on slate — because every figure above it is only as good as the
   assumptions behind it. */
.ask-john {
  margin-top: 30px; padding: 24px 26px;
  background: var(--ps-sand); color: var(--ps-slate-ink);
  border-radius: 3px;
}
.ask-john .ask-q {
  font-family: 'Abril Fatface', Georgia, serif; text-transform: none; letter-spacing: 0;
  font-weight: 400; font-size: clamp(19px, 2.4vw, 25px); line-height: 1.22;
  color: var(--ps-slate-ink); margin-bottom: 10px;
}
.ask-john .ask-a {
  font-size: 15px; line-height: 1.6; color: #4a4433; margin-bottom: 18px;
}
.ask-john .btn { margin: 0; }
.ask-john .btn-sand { background: var(--ps-slate-ink); color: var(--ps-white); }
.ask-john .btn-sand:hover { background: #000000; }

@media (max-width: 760px) {
  .vs-grid { grid-template-columns: 1fr; gap: 14px; }
  .ask-john { padding: 20px 18px; }
}

/* A grid child defaults to min-width:auto, so wide content inside .calc-out
   (the 520px-minimum charts) pushed the whole panel — and the page — wider than
   the viewport instead of letting .chart-wrap scroll. Letting the panel shrink
   is what actually arms the overflow-x on the wrapper inside it. */
.calc-out { min-width: 0; }
.calc-out .chart-card { min-width: 0; }
@media (max-width: 760px) {
  .calc-out .chart-card { padding-left: 16px; padding-right: 16px; }
}

/* Says which community's numbers the calculator opened with. */
.prefill-note {
  background: var(--ps-cream); border-left: 3px solid var(--ps-sand);
  padding: 11px 14px; margin: 0 0 20px;
  font-size: 14px; line-height: 1.5; color: var(--ps-slate);
}
.prefill-note strong { color: var(--ps-slate-ink); }