/* ==========================================================================
   Budget and Bricks — guide page styles
   Loaded after styles.css and calculator.css on guide pages only.
   ========================================================================== */

.guide { max-width: 68ch; }

.guide__meta {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   The short answer box
   -------------------------------------------------------------------------- */

.answer-box {
  padding: 1.4rem 1.6rem;
  margin-bottom: 2.5rem;
  background: var(--surface);
  border: 1px solid #4FD9E84D;
  border-left: 3px solid var(--cyan);
  border-radius: 0 12px 12px 0;
}
.answer-box h2 { font-size: var(--step-1); margin: 0 0 0.75rem; color: var(--ink); }
.answer-box p { color: var(--ink-muted); margin-bottom: 0.75rem; }
.answer-box p:last-child { margin-bottom: 0; }
.answer-box strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   Inline links through to a calculator
   -------------------------------------------------------------------------- */

.tool-link {
  display: block;
  padding: 1.15rem 1.35rem;
  margin: 2rem 0;
  background: #FFFFFF08;
  border: 1px solid var(--rule);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.tool-link:hover { border-color: #7C5CFF80; background: #1B2A6099; }

.tool-link__kicker {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.4rem;
}
.tool-link__title {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--step-1);
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.tool-link__text { font-size: var(--step--1); color: var(--ink-muted); margin: 0; }

/* --------------------------------------------------------------------------
   Comparison tables
   Override the nowrap and mono set by calculator.css, which suit
   amortisation schedules but not prose tables.
   -------------------------------------------------------------------------- */

.compare {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: var(--step--1);
  font-family: var(--body);
  table-layout: fixed;
}
.compare th, .compare td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  white-space: normal;
  font-family: var(--body);
  font-variant-numeric: normal;
}
.compare th {
  color: var(--ink-faint);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.compare td { color: var(--ink-muted); }
.compare td:first-child { color: var(--ink); font-weight: 500; width: 30%; }

@media (max-width: 34rem) {
  .compare, .compare tbody, .compare tr, .compare td { display: block; width: auto; }
  .compare thead { display: none; }
  .compare tr { padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
  .compare td { border: 0; padding: 0.15rem 0; }
  .compare td:first-child { width: auto; font-size: var(--step-0); }
}

/* --------------------------------------------------------------------------
   Step timelines
   -------------------------------------------------------------------------- */

.timeline { margin: 1.75rem 0; display: grid; gap: 0; }

.timeline__step {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.timeline__step:last-child { border-bottom: 0; }

.timeline__when {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--cyan);
  font-weight: 500;
}
.timeline__what { font-size: var(--step--1); color: var(--ink-muted); }
.timeline__what strong { color: var(--ink); display: block; margin-bottom: 0.25rem; }

@media (max-width: 34rem) {
  .timeline__step { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* --------------------------------------------------------------------------
   Callouts within guides
   -------------------------------------------------------------------------- */

.guide-note {
  margin: 2rem 0;
  padding: 1.15rem 1.35rem;
  border-left: 2px solid var(--violet);
  background: #7C5CFF14;
  border-radius: 0 10px 10px 0;
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.guide-note strong { color: var(--ink); }

.guide-warn {
  margin: 2rem 0;
  padding: 1.15rem 1.35rem;
  border-left: 2px solid var(--pink);
  background: #FF6B9A14;
  border-radius: 0 10px 10px 0;
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.guide-warn strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   Prose
   -------------------------------------------------------------------------- */

.guide h2 { font-size: var(--step-2); margin-top: 3rem; margin-bottom: 1rem; }
.guide h3 {
  font-size: var(--step-1);
  font-weight: 500;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}
.guide p { margin-bottom: 1rem; color: var(--ink-muted); }
.guide strong { color: var(--ink); }
.guide ul { margin-bottom: 1.25rem; }
.guide li {
  color: var(--ink-muted);
  margin-bottom: 0.7rem;
  padding-left: 1.35rem;
  position: relative;
}
.guide li::before {
  content: "◆";
  position: absolute;
  left: 0;
  color: var(--violet);
  font-size: 0.65em;
  top: 0.45em;
}

@media print {
  .answer-box, .tool-link, .guide-note, .guide-warn {
    background: none;
    border-color: #ccc;
  }
  .tool-link { display: none; }
  .guide p, .guide li, .compare td { color: #333; }
}