/* =============================================================================
   pricing.css
   Page-scoped styles for /pricing and /pricing-guide. Loaded after main.css and
   only from those two pages. Everything here is a small extension of the shared
   .rate-table and .inbox-frame components, not a replacement for them.

   01  Package table
   02  Guide capture
   03  The simulated email frame
   04  The printable guide
============================================================================= */

/* -----------------------------------------------------------------------------
   01  Package table
   Each package is its own <tbody>: a headline row carrying the name, the hours
   and the sample price, then a full-width row holding what is included. The
   rule between packages is drawn by the inclusions row so the two rows read as
   one block.
----------------------------------------------------------------------------- */

.packages tbody tr:first-child th,
.packages tbody tr:first-child td {
  border-bottom: 0;
  padding-bottom: 0.6rem;
}

.packages__sub {
  display: block;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
  margin-top: 0.4rem;
}

.packages__includes {
  padding-top: 0.35rem;
  padding-bottom: 1.9rem;
}

.packages__includes .dot-list {
  margin: 0;
}

.packages__includes .dot-list li {
  font-size: var(--t-body);
}

.packages tbody:last-child .packages__includes {
  border-bottom-color: var(--brass);
}

.packages__foot {
  margin-top: 1.5rem;
  max-width: 72ch;
}

/* Stacked rows under 600px.

   main.css blocks out the row heading and the price, but a table with a visible
   thead keeps sizing its columns from those headers, so on a 375px screen the
   stacked content was being squeezed into a 164px column. Dropping the column
   headers and blocking out every body cell lets each row run the full width.
   The row headings and the figures read on their own, and the caption above the
   table still says what the numbers are. */
@media (max-width: 599px) {
  .rate-table thead {
    display: none;
  }

  .rate-table tbody th,
  .rate-table tbody td {
    display: block;
    width: auto;
    text-align: left;
    padding-right: 0;
  }

  .rate-table tbody th,
  .rate-table tbody td:not(:last-child) {
    border-bottom: 0;
    padding-bottom: 0.35rem;
  }

  .rate-table tbody td:last-child {
    padding-top: 0.4rem;
    border-bottom: 0;
  }

  /* Stacked, each add-on is a block with its own hairline underneath, so the
     name, the line about it and the figure read as one entry. */
  .rate-table tbody tr {
    display: block;
    padding: 1rem 0 1.1rem;
    border-bottom: 1px solid var(--hairline);
  }

  .packages tbody tr {
    padding: 0;
    border-bottom: 0;
  }

  /* In the package table the headline row hands its rule down to the
     inclusions row, so the two read as one block. */
  .packages tbody tr:first-child td:last-child {
    border-bottom: 0;
    padding-bottom: 0.35rem;
  }

  .packages__includes {
    padding-top: 0.75rem;
    padding-bottom: 1.5rem;
  }
}

/* -----------------------------------------------------------------------------
   02  Guide capture
----------------------------------------------------------------------------- */

.guide-form .field {
  max-width: 30rem;
}

.guide-form__actions {
  margin: 0.5rem 0 0;
}

.guide-sent,
.guide-error {
  margin-top: 1.5rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--brass);
  max-width: 52ch;
}

.guide-sent {
  font-weight: 600;
}

.guide-alt {
  margin-top: 1.25rem;
}

/* -----------------------------------------------------------------------------
   03  The simulated email frame
   The email body is server-rendered HTML, so it is dropped into a sandboxed
   iframe rather than the page. No scripts are allowed inside it; the height is
   set from the document it renders.
----------------------------------------------------------------------------- */

.inbox-frame__body--email {
  padding: 0;
}

.email-frame {
  display: block;
  width: 100%;
  min-height: 360px;
  border: 0;
  background: var(--cream);
}

/* -----------------------------------------------------------------------------
   04  The printable guide
   On screen it reads as a plain document. main.css section 20 handles paper.
----------------------------------------------------------------------------- */

/* The guide is a plain document: no pairings, no bands, just headings, lists
   and two tables. It sets its own rhythm rather than borrowing a section head. */
.guide-page > .wrap > * + * {
  margin-top: 1.25rem;
}

.guide-page > .wrap > h2 {
  margin-top: 3rem;
}

.guide-page > .wrap > h2:first-child {
  margin-top: 0;
}

.guide-page > .wrap > .rate-table {
  margin-top: 2rem;
}

.guide-page > .wrap > .rule {
  margin-top: 3rem;
}

.guide-page__meta {
  font-size: var(--t-small);
  color: var(--muted);
}

.guide-page__meta p + p {
  margin-top: 0.2rem;
}

.guide-page__terms li {
  margin-bottom: 0.75rem;
}

.guide-page .btn-row {
  margin-bottom: 0.5rem;
}

@media print {
  .guide-page__meta {
    color: #000;
  }

  .guide-page .dot-list li::before {
    background: #000;
  }

  /* Paper is tighter than a screen. Keep the same order, less air. */
  .guide-page > .wrap > * + * {
    margin-top: 0.25cm;
  }

  .guide-page > .wrap > h2 {
    margin-top: 0.7cm;
  }

  .guide-page > .wrap > .rate-table,
  .guide-page > .wrap > .rule {
    margin-top: 0.4cm;
  }
}