/* Styles for the three tool pages: the printable tracker, the goal calculator, and the
   standalone demo. Kept out of styles.css for the same reason blog.css is: these rules are
   loaded by three pages and would otherwise sit in the stylesheet every page downloads.

   Everything here reads from tokens.css. No colour is written literally, so both themes and any
   future palette change reach these pages without anybody remembering this file exists. */

/* ---------- shared ---------------------------------------------------------------------- */

.tool-lede { max-width: 60ch; }

.tool-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.tool-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* ---------- the goal calculator --------------------------------------------------------- */

.calc { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 860px) { .calc { grid-template-columns: 1fr 1fr; align-items: start; } }

.calc-field { display: block; margin-bottom: var(--space-5); }
.calc-field:last-child { margin-bottom: 0; }
.calc-label {
  display: block;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.calc-hint { display: block; font-weight: 400; color: var(--color-text-faint); margin-top: 2px; }

.calc-money { position: relative; display: flex; align-items: center; }
.calc-money-sign {
  position: absolute; left: 14px;
  color: var(--color-text-faint);
  font-size: var(--font-size-body-lg);
  pointer-events: none;
}
/* Specificity, deliberately matched to the rule below it. `.calc-money input` is (0,1,1) and
   `.calc input[type="number"]` is (0,2,1), so the shorter selector loses and the digits render
   underneath the dollar sign. Seen on the live page rather than reasoned about. */
.calc .calc-money input[type="number"] { padding-left: 30px; }

.calc input[type="number"] {
  width: 100%;
  font: inherit;
  font-size: var(--font-size-body-lg);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  background: var(--color-ground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.calc input[type="number"]:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.calc-out { display: flex; flex-direction: column; gap: var(--space-4); }
.calc-answer {
  font-family: var(--font-display);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-tight);
  color: var(--color-accent-active);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.calc-answer-sub { color: var(--color-text-muted); margin: 0; }
.calc-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.calc-rows li {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: 10px 0; border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-small);
}
.calc-rows span:last-child { font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.calc-rows span:first-child { color: var(--color-text-muted); }
.calc-note { color: var(--color-text-faint); font-size: var(--font-size-small); margin: 0; }

/* ---------- the printable tracker ------------------------------------------------------- */

.sheet {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  color: var(--color-text-primary);
}
.sheet-head { display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--space-6); }
.sheet-title { font-family: var(--font-display); font-size: var(--font-size-h2); margin: 0; line-height: var(--line-height-tight); }
.sheet-sub { color: var(--color-text-muted); margin: var(--space-2) 0 0; font-size: var(--font-size-small); }
.sheet-meta { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.sheet-meta div { min-width: 150px; }
.sheet-meta-label { display: block; font-size: var(--font-size-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 6px; }
.sheet-rule { border-bottom: 1px solid var(--color-text-faint); height: 22px; }

.sheet-table-wrap { overflow-x: auto; }
table.sheet-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-small); min-width: 520px; }
table.sheet-table th {
  text-align: left; font-size: var(--font-size-caption); letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-text-faint); font-weight: 600;
  padding: 0 8px 8px; border-bottom: 1px solid var(--color-border);
}
table.sheet-table th.num, table.sheet-table td.num { text-align: right; }
table.sheet-table td { border-bottom: 1px solid var(--color-border); height: 30px; padding: 0 8px; }
table.sheet-table td.idx { color: var(--color-text-faint); width: 34px; font-variant-numeric: tabular-nums; }
/* The three money columns are fixed so the label column takes the slack. Left to themselves they
   share the table evenly, which on a printed sheet puts "The Diff" against the right margin with a
   hand's width of empty rule before it. */
table.sheet-table th.num, table.sheet-table td.num { width: 116px; }

.sheet-total { display: flex; justify-content: flex-end; gap: var(--space-4); align-items: baseline; margin-top: var(--space-5); }
.sheet-total-label { font-size: var(--font-size-small); color: var(--color-text-muted); }
.sheet-total-box { min-width: 150px; border-bottom: 2px solid var(--color-text-primary); height: 30px; }

.sheet-goal { margin-top: var(--space-8); }
.sheet-goal-label { font-size: var(--font-size-small); color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.sheet-ladder { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.sheet-ladder span { border: 1px solid var(--color-text-faint); border-radius: 3px; aspect-ratio: 1 / 1; display: block; }

.sheet-foot { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--font-size-caption); color: var(--color-text-faint); }

/* ---------- print ------------------------------------------------------------------------
   The whole point of the page. Everything that is not the sheet goes away, the sheet loses its
   card treatment because a border printed round a whole page reads as a mistake, and colour is
   dropped to ink so a home printer is not asked to reproduce the brand cream across an A4 sheet. */

@media print {
  .site-header, .site-footer, .skip-link, .tool-intro, .tool-actions, .print-hide { display: none !important; }
  /* The page's own eyebrow, h1 and lede go too. The sheet carries its own title, so printing the
     page title as well repeats it, and the lede reads "save it as a PDF from the print dialog",
     which is advice nobody needs once they are holding the paper. */
  .post > .container > .section-eyebrow,
  .post > .container > h1,
  .post > .container > .tool-lede { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  main, .container, .container-lg { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .sheet {
    background: #fff !important; color: #000 !important;
    border: 0 !important; border-radius: 0 !important; padding: 0 !important;
    box-shadow: none !important;
  }
  .sheet-title, .sheet-sub, .sheet-meta-label, .sheet-total-label, .sheet-goal-label, .sheet-foot { color: #000 !important; }
  table.sheet-table th { color: #000 !important; border-bottom: 1px solid #000 !important; }
  table.sheet-table td { border-bottom: 1px solid #999 !important; }
  table.sheet-table td.idx { color: #666 !important; }
  .sheet-rule, .sheet-total-box { border-bottom-color: #000 !important; }
  .sheet-ladder span { border-color: #000 !important; }
  .sheet-foot { border-top-color: #999 !important; }
  table.sheet-table { page-break-inside: auto; }
  table.sheet-table tr { page-break-inside: avoid; }
  @page { margin: 14mm; }
}