/*
 * Inventively Witty — /agreement and /hire-request.
 *
 * Loaded ALONGSIDE brand.css, never instead of it. Every var() carries a literal
 * fallback: this network runs three competing token vocabularies and an undefined
 * var() drops its whole declaration silently, at a clean 200 (root CLAUDE.md).
 *
 * 🔴 Numbering is CSS counters, not markup. The clause numbers must not be typed into
 * includes/agreement.php — that file is hashed, and renumbering after an inserted
 * clause would move the hash of every clause below it and invalidate acceptances that
 * agreed to unchanged words.
 *
 * 🔴 Print is not an afterthought here. A contract gets printed and filed; the brand
 * bar, the footer and the call-to-action are chrome, not terms, so they are dropped
 * and the URL of the page is printed instead so the paper says where it came from.
 */

.iw-agreement {
  max-width: 46rem;
}

/* ── The version / effective / reference block ───────────────────────────────── */
.iw-agreement-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--iw-surface-alt, #F7F2FB);
  border: 1px solid var(--iw-line, #E7DEF0);
  border-radius: var(--iw-radius, 14px);
}

@media (min-width: 34rem) {
  .iw-agreement-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.iw-agreement-meta > div { display: flex; gap: .5rem; flex-wrap: wrap; }

.iw-agreement-meta dt {
  font-weight: 700;
  color: var(--iw-ink, #35155D);
}

.iw-agreement-meta dd {
  margin: 0;
  color: var(--iw-muted, #6B5B7E);
}

.iw-agreement-meta code {
  font-size: .95em;
  word-break: break-all;
}

/* ── The clauses ─────────────────────────────────────────────────────────────── */
.iw-clauses {
  counter-reset: clause;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.iw-clause {
  counter-increment: clause;
  margin: 0 0 1.75rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--iw-line, #E7DEF0);
}

.iw-clause:last-child { border-bottom: 0; }

.iw-clause h2 {
  font-size: 1.1rem;
  margin: 0 0 .6rem;
  color: var(--iw-ink, #35155D);
}

.iw-clause h2::before {
  content: counter(clause) ". ";
  color: var(--iw-muted, #6B5B7E);
  font-variant-numeric: tabular-nums;
}

.iw-clause p {
  margin: 0 0 .75rem;
  line-height: 1.65;
}

.iw-clause p:last-child { margin-bottom: 0; }

.iw-clause-list,
.iw-clause-items {
  margin: .5rem 0 0;
  padding-left: 1.25rem;
  line-height: 1.65;
}

.iw-clause-list li,
.iw-clause-items li { margin-bottom: .4rem; }

/* Two columns for the 21-item checklist once there is room; one at 320px. */
@media (min-width: 40rem) {
  .iw-clause-items { columns: 2; column-gap: 2rem; }
  .iw-clause-items li { break-inside: avoid; }
}

.iw-agreement-qty {
  color: var(--iw-muted, #6B5B7E);
  font-size: .875rem;
}

.iw-agreement-notes {
  margin: 2rem 0 0;
  padding: 1.25rem;
  background: var(--iw-surface-alt, #F7F2FB);
  border-radius: var(--iw-radius, 14px);
}

.iw-agreement-notes h2 { font-size: 1.05rem; margin: 0 0 .6rem; color: var(--iw-ink, #35155D); }
.iw-agreement-notes ul { margin: 0 0 .75rem; padding-left: 1.25rem; line-height: 1.65; }
.iw-agreement-notes li { margin-bottom: .4rem; }

.iw-agreement-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* brand.css sets .iw-btn { width: 100% } at narrow widths. Side by side once the row
   can hold both without either becoming a sliver. */
@media (min-width: 30rem) {
  .iw-agreement-cta .iw-btn { width: auto; }
}

/* ══ /hire-request ═══════════════════════════════════════════════════════════ */

.iw-hire-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin: 0;
  padding: 0;
  border: 0;
}

@media (min-width: 40rem) {
  .iw-hire-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.iw-hire-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem .65rem;
  align-items: start;
  padding: .85rem 1rem;
  background: var(--iw-card, #ffffff);
  /* A control boundary, so --iw-control-line (3.28:1), never the decorative hairline. */
  border: 1px solid var(--iw-control-line, #9A86B0);
  border-radius: var(--iw-radius-sm, 8px);
}

.iw-hire-item input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: .15rem 0 0;
  accent-color: var(--dark-purple, #35155D);
}

.iw-hire-item-name {
  font-weight: 600;
  color: var(--iw-ink, #35155D);
  cursor: pointer;
}

.iw-hire-item-price {
  display: block;
  margin-top: .15rem;
  font-weight: 400;
  font-size: .875rem;
  /* --iw-muted is 6.14:1 on white. NOT --primary-pink: that is a FILL, and pink text
     on white is 2.69:1 — this site has shipped exactly that mistake before. */
  color: var(--iw-muted, #6B5B7E);
}

.iw-hire-item-blurb {
  grid-column: 2;
  margin: 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--iw-muted, #6B5B7E);
}

.iw-hire-item-qty {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--iw-muted, #6B5B7E);
}

.iw-hire-item-qty input {
  width: 5rem;
  padding: .35rem .5rem;
  font: inherit;
  color: var(--iw-ink, #35155D);
  background: var(--iw-card, #ffffff);
  border: 1px solid var(--iw-control-line, #9A86B0);
  border-radius: var(--iw-radius-sm, 8px);
}

/* The free-text "anything specific?" line wants the whole column; the numeric
   quantity beside it does not. Same row shape, different field width — in the
   stylesheet rather than a style="" attribute, because this host's CSP is shared
   across the network and an inline style is a one-off nobody can lint. */
.iw-hire-item-detail { display: grid; gap: .25rem; }
.iw-hire-item-detail input { width: 100%; }

.iw-hire-item-qty input:focus-visible {
  outline: 3px solid var(--iw-ink, #35155D);
  outline-offset: 1px;
}

/* The acceptance block is the one thing on the page that must not be skimmed past. */
.iw-accept {
  margin: 1.5rem 0 0;
  padding: 1.25rem;
  background: var(--iw-surface-alt, #F7F2FB);
  border: 2px solid var(--dark-purple, #35155D);
  border-radius: var(--iw-radius, 14px);
}

.iw-accept h2 { font-size: 1.05rem; margin: 0 0 .6rem; color: var(--iw-ink, #35155D); }

.iw-accept-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
  margin: 0 0 1rem;
  line-height: 1.55;
  cursor: pointer;
}

.iw-accept-check input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: .15rem 0 0;
  accent-color: var(--dark-purple, #35155D);
}

.iw-accept-check input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--iw-ink, #35155D);
  outline-offset: 2px;
}

.iw-accept-ref {
  display: block;
  margin: .75rem 0 0;
  font-size: .85rem;
  color: var(--iw-muted, #6B5B7E);
}

.iw-hire-summary {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  background: var(--iw-success-bg, #EDF9F1);
  border: 1px solid var(--iw-success, #166534);
  border-radius: var(--iw-radius, 14px);
}

.iw-hire-summary h2 { font-size: 1.05rem; margin: 0 0 .5rem; color: var(--iw-success, #166534); }
.iw-hire-summary ul { margin: .5rem 0 0; padding-left: 1.25rem; line-height: 1.6; }

/* ══ Print ═══════════════════════════════════════════════════════════════════ */
@media print {
  .iw-header,
  .iw-footer,
  .iw-skip,
  .iw-agreement-cta,
  .iw-agreement-notes { display: none; }

  .iw-agreement { max-width: none; }

  .iw-main { padding-block: 0; }

  .iw-clause { break-inside: avoid; }

  .iw-agreement-meta {
    background: none;
    border: 1px solid #767676;
  }

  /* Paper has no address bar. Say where this came from. */
  .iw-agreement h1::after {
    content: "inventivelywitty.com/agreement";
    display: block;
    margin-top: .35rem;
    font-size: .8rem;
    font-weight: 400;
    color: #444444;
  }
}