/* ============================================================
   FREE CALCULATORS — embed builder layout.

   Ported from the Claude Design "Free Calculators" project. The design
   was authored against TrailScope's own token names, so every colour,
   radius and font here resolves out of css/ts-design.css — there are no
   literal palette values below except the code block, which is
   deliberately dark on both themes the way a terminal is.

   Loaded only by free-calculators.astro. Scoped to .fc-* / #fc-builder
   so it cannot leak into the rest of the marketing site.

   Two things from the design are deliberately absent:

   - `.tsw-*`, the mock calculator widget. The design previews a
     hardcoded loan-repayment mock whatever calculator you pick, so
     choosing "Stamp duty" still showed "Monthly repayment". This page
     frames the REAL embed instead, which is why vercel.json relaxes
     frame-src to 'self' here and nowhere else.
   - `.fc-logo-drop`, the logo upload. See EmbedBuilder.jsx — the embed
     takes no `logo`, `brand` free-text or `radius` parameter, and a
     control that silently does nothing is worse than no control.
   ============================================================ */

/* ── Builder shell ─────────────────────────────────────────── */
.fc-builder {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
}

.fc-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.fc-panel-h {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fc-panel-h .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* ── Picker ────────────────────────────────────────────────── */
.fc-search {
  display: block;
  margin: 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font: inherit;
  font-size: 13px;
  width: calc(100% - 24px);
  color: var(--text);
  background: var(--bg-elev-2);
}
.fc-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15);
}

.fc-cats {
  max-height: 560px;
  overflow-y: auto;
  padding: 0 8px 12px;
}
.fc-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 14px 10px 6px;
}
.fc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: none;
  border-radius: var(--r-md);
  font: inherit;
  font-size: 13.5px;
  font-weight: 450;
  color: var(--text-dim);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.fc-item:hover { background: rgba(8, 12, 24, 0.04); color: var(--text); }
.fc-item.on {
  background: rgba(79, 124, 255, 0.09);
  color: var(--accent);
  font-weight: 500;
}
.fc-item svg { flex: none; opacity: 0.75; }
.fc-empty {
  padding: 18px 10px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Brand controls ────────────────────────────────────────── */
.fc-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 18px;
}
.fc-lab {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: -0.005em;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.fc-lab .hint { font-size: 11px; color: var(--text-faint); font-weight: 400; }

.fc-swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fc-sw {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform 0.12s;
}
.fc-sw:hover { transform: scale(1.1); }
.fc-sw.on {
  border-color: var(--text);
  box-shadow: 0 0 0 2px #fff inset;
}
/* The custom-colour well wraps a native <input type="color"> so the OS
   picker still opens; the input is stretched over the circle at zero
   opacity the same way the design's file input was. */
.fc-sw-custom {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px dashed var(--border-strong);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--bg-elev-2);
  position: relative;
  flex: none;
}
.fc-sw-custom input {
  position: absolute;
  inset: -4px;
  opacity: 0;
  cursor: pointer;
  padding: 0;
  border: 0;
}

.fc-seg {
  display: flex;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}
.fc-seg button {
  flex: 1;
  padding: 7px 4px;
  border: 0;
  background: none;
  border-radius: 7px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.fc-seg button.on {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(8, 12, 24, 0.12);
}

.fc-text {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
  color: var(--text);
  background: var(--bg-elev-2);
}
.fc-text:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15);
}
.fc-text[aria-invalid='true'] { border-color: var(--rose); }
.fc-hex { margin-top: 10px; }
.fc-err { margin: 6px 0 0; font-size: 12px; color: var(--rose); line-height: 1.5; }
.fc-note { margin: 8px 0 0; font-size: 11.5px; color: var(--text-muted); line-height: 1.55; }

/* ── Preview stage ─────────────────────────────────────────── */
.fc-preview-wrap { display: flex; flex-direction: column; gap: 20px; }
.fc-stage {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    linear-gradient(rgba(8, 12, 24, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 12, 24, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  padding: 36px 28px;
  display: flex;
  justify-content: center;
}
.fc-stage.dark { background: #0e1322; border-color: rgba(255, 255, 255, 0.08); }
/* The embed reports its own height and /js/embed.js grows the frame to
   match, exactly as it will on a broker's page — a long calculator like
   stamp duty comes out near 1900px. Letting the stage grow to that would
   bury step 3 below a screen and a half of preview, so the stage is a
   fixed window onto the full-size render rather than a shrunken copy of
   it. The embed still lays out at its true width and height; you scroll
   the window to see the rest. */
.fc-stage {
  max-height: 640px;
  overflow-y: auto;
  align-items: flex-start;
}
.fc-stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* No background on the frame itself. Painting one here made the preview
   lie once before: it supplied the backdrop the embed was failing to
   paint, hiding a bug that only surfaced on a real host page. */
.fc-stage iframe {
  width: 100%;
  max-width: 460px;
  flex: none;
  border: 0;
  border-radius: var(--r-md);
  display: block;
}

/* ── Snippet ───────────────────────────────────────────────── */
.fc-snippet {
  background: #0b1020;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.fc-snippet-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.fc-snippet-h span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
/* The primary action on the page. It measured 93x27 — under the comfortable
   touch size — everywhere above 600px, and only cleared 32px on a phone
   because the label wrapped onto two lines, which both looked wrong and hid
   the problem from a min-height sweep. min-height plus nowrap fixes the size
   and the wrap together. */
.fc-copy {
  padding: 6px 14px;
  min-height: 36px;
  white-space: nowrap;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}
.fc-copy:hover { background: var(--accent-bright); }
.fc-copy.ok { background: var(--emerald); }
/* Not defined in ts-design.css, so it ships here. Announces the copy result to
   screen readers, which otherwise get nothing from a button label change. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.fc-snippet pre {
  margin: 0;
  padding: 16px 18px;
  cursor: text;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: #c8d3f0;
  white-space: pre-wrap;
  word-break: break-all;
}
.fc-snippet .tag { color: #7cc7ff; }
.fc-snippet .attr { color: #9db4e8; }
.fc-snippet .val { color: #a5e9c0; }

/* ── Steps strip ───────────────────────────────────────────── */
.fc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 56px 0 8px;
}
.fc-step { display: flex; gap: 14px; align-items: start; }
.fc-step .n {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
}
.fc-step h4 { margin: 2px 0 4px; font-size: 14.5px; font-weight: 540; letter-spacing: -0.01em; }
.fc-step p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; }

/* ── FAQ accordion ─────────────────────────────────────────── */
.fc-faq { display: flex; flex-direction: column; }
.fc-faq details { border-top: 1px solid var(--border); padding: 18px 4px; }
.fc-faq summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 540;
  letter-spacing: -0.01em;
  list-style: none;
}
.fc-faq summary::-webkit-details-marker { display: none; }
.fc-faq summary::after {
  content: '+';
  float: right;
  font-family: var(--font-mono);
  color: var(--text-faint);
  font-weight: 400;
}
.fc-faq details[open] summary::after { content: '−'; }
.fc-faq p {
  margin: 10px 0 0;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 64ch;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 960px) {
  .fc-builder { grid-template-columns: 1fr; }
  .fc-cats { max-height: 320px; }

  /* The design's 30px circles and 29px segments are desktop proportions. On
     touch they clear WCAG 2.5.8 AA (24px) but are meaningfully harder to hit
     than the 44px targets this builder used before the redesign, so the
     comfortable size comes back on small screens only. */
  .fc-sw,
  .fc-sw-custom { width: 44px; height: 44px; }
  .fc-seg button { padding: 12px 4px; }
  .fc-item { padding: 11px 10px; }
  .fc-copy { min-height: 44px; }
}
@media (max-width: 820px) {
  .fc-steps { grid-template-columns: 1fr; }
}