/* Calendar math (/calendar-math, added 2026-10-27): the booked-calls
   calculator. Layers on styles.css (tokens, header, hero, buttons, fields,
   the week calendar, the closing panel and form, footer) and only adds what
   this page needs. The standalone build lives in
   ~/Business/active/UE-LEADMAGNETS/calendar-math; this copy is the one that ships. */

:root { --fs-number: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }

/* ============ SHARED BITS THE HOME PAGE KEEPS IN home.css ============ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-mock);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before {
  content: "";
  inline-size: 24px;
  block-size: 2px;
  background: var(--accent);
}
.dim { color: var(--muted); font-weight: 400; }
.hint { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.text-btn {
  min-block-size: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.text-btn:hover { color: var(--muted); }

/* ============ LAYOUT ============ */
.hero { padding-block-end: var(--s-7); }
.hero .display { margin-block-start: var(--s-4); }
.tool-layout {
  display: grid;
  gap: var(--s-7);
  max-inline-size: 1200px;
  margin-inline: auto;
}
.closing { padding-block-start: var(--section); }
.closing-copy { display: grid; gap: var(--s-4); justify-items: start; }
.closing-note { margin-block-start: 0; }
.closing-copy .btn { margin-block-start: var(--s-2); }
.notes { padding-block: 0 var(--s-7); }
.notes .hint { max-inline-size: 48em; }

/* ============ INPUTS ============ */
/* the grey panel from styles.css, white fields, groups split by hairlines */
.inputs { display: grid; gap: var(--s-4); align-content: start; }
.inputs .h3 { margin-block-end: var(--s-1); }
/* a unit sits inside the field: "$" before, "%" after */
.unit { position: relative; }
.unit::after {
  content: attr(data-unit);
  position: absolute;
  inset-block: 0;
  inset-inline-end: 14px;
  display: grid;
  align-items: center;
  color: var(--muted);
  pointer-events: none;
}
.unit input { padding-inline-end: 36px; }
.unit-prefix::after { inset-inline: 14px auto; }
.unit-prefix input { padding-inline: 30px 14px; }
.inputs input[type="number"] { appearance: textfield; }
.inputs input[type="number"]::-webkit-outer-spin-button,
.inputs input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }
.more { border-block-start: 1px solid var(--line-3); }
.more summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--s-3);
  min-block-size: 56px;
  padding-block: var(--s-3);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  letter-spacing: var(--track-snug);
}
.more summary::-webkit-details-marker { display: none; }
.more summary .dim { grid-column: 1; font-size: var(--fs-sm); letter-spacing: 0; }
.more summary::after {
  content: "+";
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--muted);
  transition: rotate 200ms var(--ease-out);
}
.more[open] summary::after { rotate: 45deg; }
.more-body { display: grid; gap: var(--s-4); padding-block: var(--s-2) var(--s-5); }
.ready { display: grid; gap: var(--s-3); padding-block-start: var(--s-4); border-block-start: 1px solid var(--line-3); }
.ready legend { margin-block-end: var(--s-2); }
.ready .hint { margin-block-end: var(--s-1); }
/* .tick, not .check: styles.css uses .check for the process tiles' ✕/✓ rows */
.tick {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: center;
  min-block-size: 44px;
  padding-block: var(--s-1);
  font-size: var(--fs-sm);
  line-height: 1.4;
  cursor: pointer;
}
/* a 44px hit area drawing a 22px box, so the tap target passes without a huge control */
.tick input {
  appearance: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin: -11px;
  border: 0;
  background: none;
  cursor: pointer;
}
.tick input::before {
  content: "";
  inline-size: 22px;
  block-size: 22px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-xs);
  background: var(--bg);
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.tick:hover input::before { border-color: var(--faint); }
.tick input:checked::before {
  content: "✓";
  display: grid;
  place-items: center;
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-dark);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
}
.tick input:focus-visible { outline: 2px solid var(--blue); outline-offset: -9px; border-radius: var(--r-sm); }

/* ============ RESULTS ============ */
.results { display: grid; gap: var(--s-7); align-content: start; }
.results-body { display: grid; gap: var(--s-7); }
.empty { padding: var(--s-6) 0; color: var(--muted); }

/* the week calendar from styles.css, but slots toggle instead of all filling on load */
.results .week { inline-size: 100%; margin-block-start: 0; }
.week-grid .slot > span { transition: opacity 200ms var(--ease-out), scale 200ms var(--ease-out); }
.week-grid .slot-open { opacity: 1; animation: none; }
.week-grid .slot-booked { opacity: 0; scale: 0.9; animation: none; }
.week-grid .is-booked .slot-open { opacity: 0; }
.week-grid .is-booked .slot-booked { opacity: 1; scale: 1; }
.week-caption { padding: var(--s-4) var(--s-1) 0; font-size: var(--fs-sm); color: var(--muted); }

/* key numbers: a ruled grid, numerals carry it */
.key-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-block-start: 2px solid var(--ink);
}
.key-numbers div {
  display: flex;
  flex-direction: column;
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--line-2);
}
.key-numbers div:nth-child(odd) { padding-inline-end: var(--s-4); }
.key-numbers div:nth-child(even) { padding-inline-start: var(--s-4); border-inline-start: 1px solid var(--line-2); }
.key-numbers dt { font-size: var(--fs-sm); color: var(--muted); }
.key-numbers dd {
  margin: auto 0 0;
  padding-block-start: var(--s-1);
  font-size: var(--fs-number);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
}
.key-numbers small { display: block; margin-block-start: 2px; font-size: var(--fs-sm); color: var(--muted); }

/* funnel table */
.result-block { display: grid; gap: var(--s-4); }
.funnel {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.funnel th,
.funnel td {
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-block-end: 1px solid var(--line-2);
  text-align: start;
  vertical-align: top;
  line-height: 1.35;
}
.funnel thead th { border-block-end: 2px solid var(--ink); font-weight: 600; color: var(--muted); }
.funnel tbody th { font-weight: 600; }
.funnel td:nth-child(2) { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.funnel td:nth-child(3) { color: var(--muted); }
.funnel tbody tr:last-child th,
.funnel tbody tr:last-child td { border-block-end: 0; }
.research { padding-block-start: var(--s-2); color: var(--ink-2); max-inline-size: 40em; text-wrap: pretty; }

/* timeline: a dot per item on one line; setup items first, then dates, the first call in orange */
.timeline {
  position: relative;
  display: grid;
  gap: var(--s-4);
  padding-inline-start: 28px;
}
.timeline::before {
  content: "";
  position: absolute;
  inset-block: 10px 10px;
  inset-inline-start: 5px;
  inline-size: 2px;
  background: var(--line-3);
}
.timeline li { position: relative; display: grid; gap: 2px; font-size: var(--fs-sm); line-height: 1.4; }
.timeline li::before {
  content: "";
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: -28px;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--faint);
}
.timeline b { font-weight: 600; color: var(--ink); }
.timeline span { color: var(--muted); }
.timeline .tl-ready::before { box-shadow: inset 0 0 0 2px var(--green); }
.timeline .tl-ready span { color: var(--green); }
.timeline .tl-todo::before { box-shadow: inset 0 0 0 2px var(--ink); }
.timeline .tl-date::before { background: var(--ink); box-shadow: none; }
.timeline .tl-date span { color: var(--ink-2); }
.timeline .tl-key::before { background: var(--accent); box-shadow: none; }
.timeline .tl-key b,
.timeline .tl-key span { color: var(--ink); font-weight: 600; }
.share { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }

/* the "Sent" line after n8n redirects back */
.sent {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--peach);
  font-weight: 600;
}

/* ============ BREAKPOINTS ============ */
@media (min-width: 600px) {
  .more-body { grid-template-columns: 1fr 1fr; }
  .key-numbers { grid-template-columns: repeat(4, 1fr); }
  .key-numbers div { padding-inline: var(--s-4); }
  .key-numbers div:first-child { padding-inline-start: 0; }
  .key-numbers div + div { border-inline-start: 1px solid var(--line-2); }
  .key-numbers div:nth-child(odd) { padding-inline-end: var(--s-4); }
}
@media (min-width: 768px) {
  .hero { padding-block-end: var(--s-8); }
  .inputs.panel { padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); }
  .funnel th,
  .funnel td { padding-inline-end: var(--s-5); }
}
@media (min-width: 1024px) {
  .tool-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-8); align-items: start; }
  .inputs { position: sticky; inset-block-start: 100px; }
  .inputs.panel { padding: var(--s-6) var(--s-5); }
}

/* ============ MOTION ============ */
/* Booked slots pop in one after another on first paint; later changes use the
   plain transition. Reduced motion shows the finished calendar. */
@media (prefers-reduced-motion: no-preference) {
  .week-grid .is-booked .slot-booked {
    animation: slot-book 320ms var(--ease-out) both;
    animation-delay: calc(400ms + var(--i) * 90ms);
  }
  .week-grid.settled .is-booked .slot-booked { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .week-grid .slot > span { transition: none; }
}

/* ============ PRINT ============ */
@media print {
  .site-header, .closing, .notes, .site-footer, .share, .skip-link { display: none; }
  .tool-layout { display: block; }
  .panel { background: none; padding: 0; }
  .week { box-shadow: none; border: 1px solid var(--line-3); }
}