/* ═══════════════════════════════════════════════════════════════════════
   Builder frame (static/js/builder_frame.js): the layout every builder page
   shares — the Cover Letter Builder and the Résumé Builder (2026-10-12).
   Colours come from the tool (var(--color-primary), --tool-*; the school
   colour for school students). Text floor: 12px labels, 14px body, 16px
   inputs; tap targets 44px.
   Desktop (900px+): an editor — thin header, steps panel on the left with
   its own scroll, the document on the tinted canvas. 721–899px: one column,
   step bar on top (sticky). (Was 1100px until the live pages audit,
   2026-10-15: tablets and zoomed laptops got the editing panel under the
   document.) 720px and below: the document fills the screen
   and the steps sit in a sheet dragged to any height.
   Page-specific rules live in each page's own stylesheet.
   ═══════════════════════════════════════════════════════════════════════ */

/* The PDF's own fallback fonts (static/fonts). When a chosen family has no
   TTF there, the PDF uses these, so the preview does too. */
@font-face { font-family: "Builder DejaVu Sans"; src: url("/static/fonts/DejaVuSans.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Builder DejaVu Sans"; src: url("/static/fonts/DejaVuSans-Bold.ttf") format("truetype"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Builder DejaVu Sans"; src: url("/static/fonts/DejaVuSans-Oblique.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Builder DejaVu Serif"; src: url("/static/fonts/DejaVuSerif.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Builder DejaVu Serif"; src: url("/static/fonts/DejaVuSerif-Bold.ttf") format("truetype"); font-weight: 600 900; font-style: normal; font-display: swap; }

.bf {
  --bf-ink: var(--color-text-primary, #0f172a);
  --bf-muted: var(--color-text-secondary, #475569);
  --bf-faint: var(--color-text-tertiary, #64748b);
  --bf-line: var(--color-border-default, #e5e7eb);
  --bf-card: var(--color-bg-card, #fff);
  --bf-soft: var(--color-gray-50, #f8fafc);
  /* The document sits on the tool's tint, like the designs' canvases. */
  --bf-canvas: var(--tool-page, var(--bf-soft));
  --bf-accent: var(--color-primary, #2563eb);
  /* Accent-coloured TEXT and focus rings: the tool's readable "ink" shade. */
  --bf-accent-text: var(--tool-ink, var(--bf-accent));
  --bf-accent-soft: color-mix(in srgb, var(--color-primary, #2563eb) 10%, #fff);
  --bf-accent-line: color-mix(in srgb, var(--color-primary, #2563eb) 35%, #fff);
  --bf-ok: var(--color-success, #16a34a);
  color: var(--bf-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding: 24px 28px 48px;
  box-sizing: border-box;
}
.bf *, .bf *::before, .bf *::after { box-sizing: border-box; }
.bf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Header ── */
.bf-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.bf-dl-short { display: none; }
.bf-head-text { flex: 1; min-width: 0; }
.bf-head .bf-download { flex-shrink: 0; white-space: nowrap; }
.bf-kitpick { min-width: 0; max-width: 100%; }
.bf-kitpick select { width: 100%; text-overflow: ellipsis; }
.bf-head h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
/* The page title in the tool's colour (Nate, 2026-10-12): bold coloured text
   everywhere; on desktop also a coloured icon tile and a coloured line under
   the header. Phones keep just the coloured title so it stays on one line. */
.bf-head h1.bf-title { color: var(--bf-accent-text); display: inline-flex; align-items: center; gap: 10px; }
.bf-title-ic { display: none; }
.bf-head-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 4px; font-size: 14px; color: var(--bf-muted); }
.bf-save { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--bf-ok); }
.bf-save-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bf-save.saving { color: var(--bf-faint); }
.bf-save.error { color: var(--color-danger-text, #b91c1c); }
.bf-kitname { font-weight: 600; color: var(--bf-ink); }
.bf-kitpick select { font: inherit; font-size: 16px; font-weight: 600; color: var(--bf-ink); border: 1px solid var(--bf-line); border-radius: 10px; padding: 6px 10px; min-height: 40px; background: var(--bf-card); max-width: 260px; }

/* ── Buttons ── */
.bf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent;
  font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.bf-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.bf-btn-primary { background: var(--bf-accent); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--bf-accent) 28%, transparent); }
.bf-btn-primary:hover { background: var(--color-primary-hover, #1d4ed8); }
.bf-btn-secondary { background: var(--bf-card); color: var(--bf-accent-text); border-color: var(--bf-accent-line); }
.bf-btn-secondary:hover { background: var(--bf-accent-soft); }
.bf-btn-ghost { background: transparent; color: var(--bf-muted); border-color: var(--bf-line); }
.bf-btn-ghost:hover { background: var(--bf-soft); color: var(--bf-ink); }
.bf-btn-block { width: 100%; }
.bf-btn:focus-visible, .bf-tool:focus-visible, .bf-step-tab:focus-visible, .bf-chip:focus-visible, .bf-tpl:focus-visible, .bf-font:focus-visible, .bf-sw:focus-visible,
.bf-action:focus-visible, .bf-subtab:focus-visible, .bf-sec > summary:focus-visible, .bf-mini:focus-visible {
  outline: 2px solid var(--bf-accent-text); outline-offset: 2px;
}
.bf-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Layout ── */
.bf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "steps" "doc" "panel";
  gap: 16px;
}
.bf-sheet, .bf-sheet-head { display: contents; }
.bf-handle { display: none; }
.bf-steps { grid-area: steps; }
.bf-doc   { grid-area: doc; min-width: 0; }
.bf-panel { grid-area: panel; min-width: 0; }

@media (min-width: 900px) {
  /* Desktop is an editor, as in Nate's designs (2026-10-11): one thin header
     row, the steps panel full height on the left with its own scroll, and
     the document filling everything to the right on the tinted canvas. */
  .bf { display: flex; flex-direction: column; height: 100vh; padding: 0; overflow: hidden; }
  .bf .bf-head { margin: 0; padding: 12px 24px; background: var(--bf-card); border-bottom: 1px solid var(--bf-line); }
  .bf .bf-head-text { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; }
  .bf .bf-head h1 { font-size: 22px; }
  .bf .bf-head { border-bottom: 3px solid var(--bf-accent); }
  .bf .bf-title-ic {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 10px; background: var(--bf-accent); color: #fff;
  }
  .bf .bf-title-ic svg { width: 20px; height: 20px; }
  .bf .bf-head-meta { margin-top: 0; }
  .bf .bf-grid {
    flex: 1; min-height: 0; gap: 0; align-items: stretch;
    grid-template-columns: clamp(300px, 28vw, 400px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "steps doc" "panel doc";
  }
  .bf .bf-steps {
    border: 0; border-radius: 0; padding: 10px 12px;
    border-right: 1px solid var(--bf-line); border-bottom: 1px solid var(--bf-line);
    background: var(--bf-card);
  }
  .bf .bf-panel {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px;
    background: var(--tool-panel, var(--bf-soft)); border-right: 1px solid var(--bf-line);
  }
  .bf .bf-doc { border: 0; border-radius: 0; display: flex; flex-direction: column; min-height: 0; }
  .bf .bf-toolbar { padding: 10px 16px; background: rgba(255, 255, 255, .75); }
  .bf .bf-paper-viewport { flex: 1; min-height: 0; padding: 32px 28px 48px; }
}

/* Tablets in portrait (721–899px, live pages audit 2026-10-15): too narrow
   for side by side next to the app menu, so the document takes the top half
   and the editing panel the bottom half, each with its own scroll. Before,
   the panel sat under the whole document, out of sight while you typed. */
@media (min-width: 721px) and (max-width: 899px) {
  .bf { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding: 0; overflow: hidden; }
  .bf .bf-head { margin: 0; padding: 10px 20px; background: var(--bf-card); border-bottom: 3px solid var(--bf-accent); }
  .bf .bf-grid {
    flex: 1; min-height: 0; gap: 0;
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
  }
  .bf .bf-steps { position: static; border: 0; border-radius: 0; border-bottom: 1px solid var(--bf-line); }
  .bf .bf-doc { border: 0; border-radius: 0; display: flex; flex-direction: column; min-height: 0; border-bottom: 1px solid var(--bf-line); }
  .bf .bf-paper-viewport { flex: 1; min-height: 0; padding: 16px; }
  .bf .bf-panel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; background: var(--tool-panel, var(--bf-soft)); }
}

/* ── Step bar ── */
.bf-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  padding: 6px; background: var(--bf-card); border: 1px solid var(--bf-line); border-radius: 16px;
  position: sticky; top: 0; z-index: 30;
}
@media (min-width: 900px) { .bf-steps { position: static; } }
.bf-tool-gap-lead { flex: 1; }
/* Numbered steps (2026-10-13, Nate): each icon sits in a tinted tile; the
   current step is filled in the tool colour with white icon and text, and a
   line under the row says what the step is for. */
.bf-step-tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 60px; padding: 6px 4px; border: 0; border-radius: 12px; background: transparent;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--bf-ink, #0f172a); cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.bf-step-icon {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 30px; border-radius: 10px;
  background: var(--bf-accent-soft); color: var(--bf-accent-text);
}
.bf-step-icon svg { width: 20px; height: 20px; }
.bf-step-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bf-step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%;
  font-size: 11px; font-weight: 800; line-height: 1; background: var(--bf-line); color: var(--bf-muted);
}
.bf-step-tab:hover { background: var(--bf-soft); }
.bf-step-tab[aria-selected="true"], .bf-step-tab[aria-selected="true"]:hover {
  background: var(--bf-accent); color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--bf-accent) 30%, transparent);
}
.bf-step-tab[aria-selected="true"] .bf-step-icon { background: rgba(255, 255, 255, .2); color: #fff; }
.bf-step-tab[aria-selected="true"] .bf-step-num { background: #fff; color: var(--bf-accent); }
.bf-step-tab[aria-selected="true"]:focus-visible { outline-color: var(--bf-accent); outline-offset: 3px; }
.bf-step-desc { grid-column: 1 / -1; margin: 4px 4px 0; font-size: 13px; font-weight: 600; color: var(--bf-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .bf-step-tab { transition: none; } }

/* ── Cards, text, fields ── */
.bf-step { display: flex; flex-direction: column; gap: 14px; }
.bf-step[hidden] { display: none; }
.bf-card { background: var(--bf-card); border: 1px solid var(--bf-line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.bf-card h2, .bf-dialog h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.bf-sub { margin: 0; font-size: 14px; color: var(--bf-muted); }
.bf-label { margin: 4px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--bf-faint); display: flex; align-items: center; gap: 8px; }
.bf-hint { margin: 0; font-size: 13px; color: var(--bf-faint); display: flex; align-items: flex-start; gap: 6px; }
.bf-hint svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.bf-opt { font-weight: 500; color: var(--bf-faint); }
/* Plan badges (Starter / Plus / Pro) are gold everywhere (Nate, 2026-10-15). */
.bf-pill { font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 1px 8px; border-radius: 999px; border: 1px solid #e9c262; background: #fdf0c4; color: #7a4d00; }
.bf-pill.bf-pill-neutral { font-weight: 600; border-color: var(--bf-line); background: var(--bf-soft); color: var(--bf-muted); }
.bf-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--bf-ink); }
.bf-field input, .bf-field textarea, .bf-field select, .bf-sec textarea, .bf-sec input {
  font: inherit; font-size: 16px; font-weight: 400; color: var(--bf-ink);
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--color-border-strong, #cbd5e1);
  border-radius: 10px; background: #fff;
}
.bf-field textarea, .bf-sec textarea { resize: vertical; line-height: 1.5; }
.bf-field input:focus, .bf-field textarea:focus, .bf-field select:focus, .bf-sec textarea:focus, .bf-sec input:focus {
  outline: none; border-color: var(--bf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-accent) 18%, transparent);
}
.bf-polish { margin: 0; font-size: 13px; font-weight: 600; color: var(--bf-muted); }
.bf-polish:empty { display: none; }
.bf-polish-dlg { margin-top: -4px; }
.bf-polish a { color: var(--bf-accent-text); }

/* ── Section editor ── */
.bf-sections { display: flex; flex-direction: column; gap: 8px; }
.bf-sec { border: 1px solid var(--bf-line); border-radius: 12px; background: var(--bf-card); }
.bf-sec > summary {
  list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px;
  cursor: pointer; font-size: 15px; font-weight: 600;
}
.bf-sec > summary::-webkit-details-marker { display: none; }
.bf-sec-name { flex: 1; min-width: 0; }
.bf-sec-ok { width: 18px; height: 18px; color: var(--bf-ok); flex-shrink: 0; }
.bf-sec-ok.empty { color: var(--color-border-strong, #cbd5e1); }
.bf-sec-chev { width: 18px; height: 18px; color: var(--bf-faint); transition: transform .15s; flex-shrink: 0; }
.bf-sec[open] .bf-sec-chev { transform: rotate(180deg); }
.bf-sec-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.bf-sec-body label { font-size: 13px; font-weight: 600; color: var(--bf-muted); display: flex; flex-direction: column; gap: 4px; }
.bf-sec-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-mini {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px;
  border: 1px solid var(--bf-accent-line); border-radius: 10px; background: var(--bf-card);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--bf-accent-text); cursor: pointer;
}
.bf-mini svg { width: 16px; height: 16px; }
.bf-mini:hover { background: var(--bf-accent-soft); }
.bf-mini.bf-mini-danger { color: var(--color-danger-text, #b91c1c); border-color: #fecaca; margin-left: auto; }
/* An AI call is running: AI buttons wait. */
.bf-busy .bf-action, .bf-busy .bf-mini, .bf-busy [data-bf-ai] { opacity: .6; pointer-events: none; }

/* ── Design: sub tabs, chips, templates ── */
/* Templates | Style: a two-button switch, so the second option reads as a
   real, tappable choice (Nate, 2026-10-13: the underline tabs were easy to miss). */
.bf-subtabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: var(--color-bg-subtle, #eef2f7); border: 1px solid var(--bf-line); border-radius: 14px;
}
.bf-subtab {
  min-height: 48px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 16px; font-weight: 700;
  color: var(--bf-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.bf-subtab svg { width: 20px; height: 20px; flex-shrink: 0; }
.bf-subtab:hover:not([aria-selected="true"]) { color: var(--bf-ink); background: rgba(255, 255, 255, .6); }
.bf-subtab[aria-selected="true"] {
  background: var(--bf-card); color: var(--bf-accent-text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .14), 0 0 0 1px var(--bf-accent-line);
}
[data-bf-sub-panel] { display: flex; flex-direction: column; gap: 12px; }
[data-bf-sub-panel][hidden] { display: none; }
/* Wrap onto a second row rather than scroll out of sight (Nate, 2026-10-13:
   the last filter was cut off, "Moder…"). */
.bf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-chip {
  flex: 0 0 auto; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bf-line);
  background: var(--bf-card); font: inherit; font-size: 14px; font-weight: 600; color: var(--bf-muted); cursor: pointer; white-space: nowrap;
}
.bf-chip[aria-pressed="true"] { background: var(--bf-accent-soft); border-color: var(--bf-accent); color: var(--bf-accent-text); }
.bf-tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bf-tpl {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none;
  text-align: left; font: inherit; color: var(--bf-ink); cursor: pointer;
}
.bf-tpl-thumb {
  position: relative; width: 100%; aspect-ratio: 8.5 / 11; overflow: hidden; border-radius: 10px;
  border: 2px solid var(--bf-line); background: #fff;
}
.bf-tpl-thumb-inner { position: absolute; top: 0; left: 0; width: 816px; transform-origin: top left; pointer-events: none; }
.bf-tpl[aria-pressed="true"] .bf-tpl-thumb { border-color: var(--bf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-accent) 20%, transparent); }
.bf-tpl:hover .bf-tpl-thumb { border-color: var(--bf-accent-line); }
.bf-tpl-name { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.bf-tpl-desc { font-size: 13px; color: var(--bf-muted); margin-top: -4px; }
.bf-tpl-lock {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .55);
}
.bf-tpl-lock span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(15, 23, 42, .18); }
.bf-tpl-lock svg { width: 18px; height: 18px; color: var(--bf-muted); }

/* ── Design: style ── */
.bf-style-group { display: flex; flex-direction: column; gap: 8px; }
.bf-fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bf-font {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 12px;
  border: 1.5px solid var(--bf-line); border-radius: 12px; background: var(--bf-card); cursor: pointer; font: inherit; color: var(--bf-ink);
}
.bf-font-aa { font-size: 22px; line-height: 1.1; }
.bf-font-name { font-size: 14px; font-weight: 600; color: var(--bf-muted); font-family: 'Inter', sans-serif; }
.bf-font[aria-pressed="true"] { border-color: var(--bf-accent); background: var(--bf-accent-soft); }
.bf-font[disabled] { opacity: .45; cursor: not-allowed; }
.bf-size { display: flex; align-items: center; gap: 10px; }
.bf-size input[type="range"] { flex: 1; accent-color: var(--bf-accent); min-height: 44px; }
.bf-size-btn { min-width: 44px; min-height: 44px; border: 1px solid var(--bf-line); border-radius: 10px; background: var(--bf-card); font: inherit; font-size: 15px; font-weight: 700; color: var(--bf-ink); cursor: pointer; }
.bf-size-btn[disabled], .bf-size input[disabled] { opacity: .45; cursor: not-allowed; }
.bf-size-val { min-width: 52px; text-align: right; font-size: 14px; font-weight: 600; color: var(--bf-muted); }
.bf-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.bf-sw {
  position: relative; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--bf-line); cursor: pointer; padding: 0; overflow: hidden;
}
.bf-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bf-ink); }
.bf-sw[disabled] { opacity: .4; cursor: not-allowed; }
.bf-sw-default { background: #fff; color: var(--bf-muted); font-size: 18px; font-weight: 700; border: 1.5px dashed var(--color-border-strong, #cbd5e1); }
.bf-sw-custom { background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444); }
.bf-sw-custom[data-on] { box-shadow: 0 0 0 2px var(--bf-ink); }
.bf-sw-custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.bf-hint[hidden] { display: none; }
.bf-hint-warn { color: var(--color-warning-text, #92400e); }
/* "Use my school colors" (school students only; never applied on its own). */
.bf-school {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  min-height: 44px; padding: 8px 16px 8px 10px; border: 1px solid var(--bf-line); border-radius: 999px;
  background: var(--bf-card); font: inherit; font-size: 14px; font-weight: 600; color: var(--bf-ink); cursor: pointer;
}
.bf-school:hover:not([disabled]) { border-color: var(--bf-accent-line); }
.bf-school[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bf-ink); border-color: transparent; }
.bf-school[disabled] { opacity: .45; cursor: not-allowed; }
.bf-school-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--bf-line); flex-shrink: 0; }
.bf-upsell { margin: 0; font-size: 14px; color: var(--bf-muted); }
.bf-upsell a { color: var(--bf-accent-text); font-weight: 600; }

/* ── Improve ── */
.bf-ready { flex-direction: row; align-items: center; gap: 14px; }
.bf-ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.bf-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.bf-ring-bg { fill: none; stroke: var(--color-gray-200, #e5e7eb); stroke-width: 4; }
.bf-ring-fg { fill: none; stroke: var(--bf-ok); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transition: stroke-dashoffset .3s; }
.bf-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--bf-ink); }
.bf-checks { list-style: none; margin: 0; padding: 4px 16px; background: var(--bf-card); border: 1px solid var(--bf-line); border-radius: 16px; }
.bf-check { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bf-line); }
.bf-check:last-child { border-bottom: 0; }
.bf-check svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.bf-check.ok svg { color: var(--bf-ok); }
.bf-check.todo svg { color: var(--color-warning, #d97706); }
.bf-check-name { font-size: 15px; font-weight: 600; }
.bf-check-desc { font-size: 13px; color: var(--bf-muted); }
.bf-actions { display: flex; flex-direction: column; gap: 8px; }
.bf-action {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: 10px 14px 10px 44px;
  border: 1px solid var(--bf-line); border-radius: 12px; background: var(--bf-card); cursor: pointer; font: inherit; color: var(--bf-ink); text-align: left; position: relative;
}
.bf-action::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  background: var(--bf-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bf-action:hover { border-color: var(--bf-accent-line); background: var(--bf-accent-soft); }
.bf-action-name { font-size: 15px; font-weight: 700; }
.bf-action-desc { font-size: 13px; color: var(--bf-muted); }

/* ── The document ── */
.bf-doc { background: var(--bf-canvas); border: 1px solid var(--bf-line); border-radius: 16px; overflow: hidden; container-type: inline-size; }


.bf-toolbar { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; padding: 8px; background: var(--bf-card); border-bottom: 1px solid var(--bf-line); }
.bf-tool {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--bf-line);
  border-radius: 10px; background: var(--bf-card); font: inherit; font-size: 14px; font-weight: 600; color: var(--bf-ink); cursor: pointer;
}
.bf-tool svg { width: 16px; height: 16px; }
.bf-tool[disabled] { opacity: .45; cursor: not-allowed; }
.bf-tool:hover:not([disabled]) { background: var(--bf-soft); }
.bf-tool-sq { justify-content: center; min-width: 40px; padding: 6px; font-size: 18px; }
.bf-tool-gap { flex: 1; }
.bf-zoom { display: inline-flex; align-items: center; gap: 4px; }
.bf-zoom-val { min-width: 48px; text-align: center; font-size: 14px; font-weight: 600; color: var(--bf-muted); }
.bf-paper-viewport { overflow: auto; padding: 20px; }
.bf-paper-frame { position: relative; margin: 0 auto; }
.bf-paper {
  position: absolute; top: 0; left: 0; width: 816px; transform-origin: top left; background: #fff; overflow: hidden;
  box-shadow: 0 10px 30px -8px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .06);
}
/* The gap between two pages (builder_frame.js, Nate 2026-10-14): the canvas
   colour shows through, with a soft edge on each sheet. */
.bf-pagegap { position: absolute; left: -2px; right: -2px; pointer-events: none; z-index: 5;
  background: var(--bf-canvas, #eef2f7);
  box-shadow: inset 0 8px 8px -8px rgba(16, 24, 40, .22), inset 0 -8px 8px -8px rgba(16, 24, 40, .22); }
.bf-pagegap span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 700 12px 'Inter', sans-serif;
  color: var(--bf-muted, #64748b); letter-spacing: .04em; }
.bf-doc-note { margin: 0; padding: 0 20px 16px; font-size: 14px; color: var(--color-warning-text, #92400e); display: flex; align-items: flex-start; gap: 8px; }
.bf-doc-note[hidden] { display: none; }
.bf-doc-note > span { flex: 1; min-width: 0; }
.bf-note-short { display: none; }
.bf-note-x { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px -6px 0; border: 0; border-radius: 8px;
  background: transparent; color: inherit; cursor: pointer; }
.bf-note-x:hover { background: rgba(146, 64, 14, .1); }
.bf-note-x svg { width: 16px; height: 16px; }

/* Full preview: the document alone, filling the window. */
.bf.bf-full .bf-doc {
  position: fixed; inset: 0; z-index: 3000; border-radius: 0; border: 0; display: flex; flex-direction: column;
}
.bf.bf-full .bf-paper-viewport { flex: 1; max-height: none; }
.bf-full-close { display: none; }
.bf.bf-full .bf-full-close { display: inline-flex; }
.bf.bf-full .bf-full-open,
.bf.bf-full .bf-edit-only { display: none; }
.bf.bf-full .bf-full-close span { display: inline !important; }   /* always say "Close preview" */

/* ── Dialogs ── */
.bf-dialog {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .3); color: var(--bf-ink, #0f172a); font-family: 'Inter', sans-serif;
}
.bf-dialog::backdrop { background: rgba(15, 23, 42, .5); }
.bf-dialog-body { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.bf-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.bf-choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1.5px solid var(--color-border-default, #e5e7eb); border-radius: 12px; cursor: pointer; }
.bf-choice:has(input:checked) { border-color: var(--color-primary, #2563eb); background: color-mix(in srgb, var(--color-primary, #2563eb) 8%, #fff); }
.bf-choice input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-primary, #2563eb); }
.bf-choice > span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--color-text-secondary, #475569); }
.bf-choice strong { font-size: 15px; color: var(--color-text-primary, #0f172a); }
.bf-compare { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .bf-compare { grid-template-columns: 1fr 1fr; } }
.bf-compare-text { font-size: 15px; line-height: 1.55; padding: 12px; border-radius: 12px; background: var(--color-gray-50, #f8fafc); border: 1px solid var(--color-border-default, #e5e7eb); min-height: 80px; white-space: pre-wrap; }
.bf-compare-ai { background: color-mix(in srgb, var(--color-primary, #2563eb) 6%, #fff); border-color: color-mix(in srgb, var(--color-primary, #2563eb) 30%, #fff); }
.bf-compare-ai.loading { color: var(--color-text-tertiary, #64748b); font-style: italic; }

/* ── Toast ── */
.bf-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px); z-index: 4000;
  background: #0f172a; color: #fff; font-size: 14px; font-weight: 600; padding: 12px 18px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  max-width: calc(100vw - 32px); text-align: center;
}
.bf-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.bf-toast a { color: #93c5fd; margin-left: 6px; }

/* ── Empty state (no kit yet) ── */
.bf-empty { max-width: 520px; margin: 48px auto; text-align: center; background: var(--bf-card); border: 1px solid var(--bf-line); border-radius: 20px; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bf-empty h1 { margin: 0; font-size: 22px; font-weight: 800; }
.bf-empty p { margin: 0; color: var(--bf-muted); }
.bf-empty-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--bf-accent-soft); color: var(--bf-accent-text); display: flex; align-items: center; justify-content: center; }
.bf-empty-icon svg { width: 28px; height: 28px; }

/* ── Phone ── */
@media (max-width: 720px) {
  /* Phone: a full-height workspace between the app's top bar (60px) and its
     bottom bar (66px). The document fills it; the steps sit in a sheet on top
     that the person drags to any height (builder_frame.js). */
  .bf {
    display: flex; flex-direction: column; padding: 0; overflow: hidden;
    height: calc(100vh - 126px - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - 126px - env(safe-area-inset-bottom, 0px));
    min-height: 380px;
  }
  .bf-head { align-items: center; margin: 0; padding: 10px 16px; background: var(--bf-card); border-bottom: 1px solid var(--bf-line); }
  .bf-head h1 { font-size: 18px; }
  .bf-head-meta { margin-top: 2px; font-size: 13px; }
  .bf-head .bf-download { padding: 8px 14px; min-height: 40px; white-space: nowrap; }
  .bf-dl-long { display: none; }
  .bf-dl-short { display: inline; }

  .bf-grid { display: block; position: relative; flex: 1; min-height: 0; }
  .bf-doc {
    position: absolute; inset: 0; border: 0; border-radius: 0;
    display: flex; flex-direction: column;
  }
  .bf-paper-viewport { flex: 1; min-height: 0; padding: 12px 12px 120px; }
  .bf-toolbar .bf-tool span { display: none; }
  .bf-toolbar .bf-tool { padding: 6px 10px; min-width: 40px; justify-content: center; }
  /* A slim strip above the page, not over it (Nate, 2026-10-17). It leaves
     room on the right for the tools pill, and it can be closed. */
  .bf-doc-note { position: static; order: -1; margin: 8px 12px 0; padding: 6px 86px 6px 10px; min-height: 44px; align-items: center;
    font-size: 12.5px; line-height: 1.35; background: var(--color-warning-bg, #fef3c7); border-radius: 10px; }
  .bf-doc-note .bf-note-x { margin: -4px 0; }
  .bf-doc-note .bf-note-long { display: none; }
  .bf-doc-note .bf-note-short { display: inline; }

  /* The sheet */
  .bf-sheet {
    display: flex; flex-direction: column;
    position: absolute; left: 0; right: 0; bottom: 0; top: var(--bf-sheet-top, 45%);
    z-index: 20; background: var(--bf-card);
    border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(15, 23, 42, .16);
    transition: top .22s ease;
  }
  .bf-sheet.dragging { transition: none; }
  .bf-sheet-head { display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
  .bf-sheet.dragging .bf-sheet-head { cursor: grabbing; }
  .bf-handle {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 26px;
    cursor: inherit; border-radius: 20px 20px 0 0;
  }
  .bf-handle span { width: 44px; height: 5px; border-radius: 999px; background: var(--color-border-strong, #cbd5e1); }
  .bf-handle:focus-visible { outline: 2px solid var(--bf-accent-text); outline-offset: -4px; }
  .bf-steps { position: static; border: 0; border-radius: 0; padding: 0 8px 6px; background: transparent; border-bottom: 1px solid var(--bf-line); }
  .bf-step-tab { min-height: 56px; }
  .bf-step-desc { margin-top: 2px; font-size: 12px; }
  .bf-panel {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding: 14px 16px 24px;
  }

  .bf-dialog { margin: auto auto 0; width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; }
  .bf-dialog-actions .bf-btn { flex: 1 1 auto; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) { .bf-sheet { transition: none; } }
@media (max-width: 380px) {
  .bf-step-tab { font-size: 12px; }
  .bf-step-label { gap: 3px; }
  .bf-step-num { width: 15px; height: 15px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-toast, .bf-ring-fg, .bf-sec-chev { transition: none; }
}

/* (Kept last so it wins over the base rules above.) Toolbar labels go when the document column is narrow; zoom goes on phones
   (pinch-zoom does that job there). */
@container (max-width: 700px) {
  .bf-tool-gap-lead { display: none; }
  .bf-toolbar .bf-tool span { display: none; }
  .bf-toolbar .bf-tool { min-width: 40px; justify-content: center; padding: 6px 8px; }
}
@container (max-width: 420px) {
  .bf-zoom { display: none; }
}
/* Full-screen preview is for reading, so zoom shows even on phones. */
.bf.bf-full .bf-zoom { display: inline-flex; }

/* ── Three-way choice (margins on both builders; the résumé's spacing uses
   the same look as .rb-seg) ── */
.bf-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--bf-line); border-radius: 12px; overflow: hidden; }
.bf-seg button { min-height: 44px; border: 0; border-right: 1px solid var(--bf-line); background: var(--bf-card); font: inherit; font-size: 14px; font-weight: 600; color: var(--bf-muted); cursor: pointer; }
.bf-seg button:last-child { border-right: 0; }
.bf-seg button[aria-pressed="true"] { background: var(--bf-accent-soft); color: var(--bf-accent-text); }
.bf-seg button[disabled] { opacity: .5; cursor: not-allowed; }
.bf-seg button:focus-visible { outline: 2px solid var(--bf-accent-text); outline-offset: -2px; }

/* ═══ Compact pass (live pages audit B1/B2, 2026-10-15) ═══════════════════
   Nate: the steps, the Style controls and the phone chrome took too much
   room. Kept last so it wins over the rules above. */
.bf-more { display: none; }
.bf-steps { container-type: inline-size; }
.bf-step-tab { flex-direction: row; justify-content: center; gap: 6px; min-height: 42px; padding: 6px 4px; }
.bf-step-icon, .bf-step-tab[aria-selected="true"] .bf-step-icon { width: auto; height: auto; background: transparent; border-radius: 0; }
.bf-step-icon svg { width: 17px; height: 17px; }
.bf-step-num { display: none; }
.bf-step-desc { margin: 2px 4px 0; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 330px) { .bf-step-icon { display: none; } }

.bf-subtabs { padding: 3px; border-radius: 12px; }
.bf-subtab { min-height: 40px; font-size: 14px; gap: 6px; }
.bf-subtab svg { width: 16px; height: 16px; }
.bf-font { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; }
.bf-font-aa { font-size: 18px; }
.bf-font-name { font-size: 13px; }
@media (min-width: 900px) {
  .bf .bf-steps { padding: 6px 10px; }
  .bf-sw { width: 34px; height: 34px; }
  .bf-size-btn { min-width: 38px; min-height: 38px; }
  .bf-size input[type="range"] { min-height: 38px; }
  .bf-seg button { min-height: 38px; font-size: 13.5px; }
  .bf-chip { min-height: 32px; padding: 4px 12px; font-size: 13px; }
}

@media (max-width: 720px) {
  /* Header in two rows: title, (score), PDF; then Saved and the kit. */
  .bf .bf-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 8px; padding: 8px 14px; }
  .bf .bf-head-text { display: contents; }
  .bf .bf-head h1 { grid-column: 1; grid-row: 1; min-width: 0; }
  .bf .bf-head > :not(.bf-head-text):not(.bf-download) { grid-column: 2; grid-row: 1; }
  .bf .bf-head .bf-download { grid-column: 3; grid-row: 1; }
  .bf .bf-head-meta { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; }
  .bf .bf-kitpick { flex: 1 1 auto; }
  .bf .bf-kitpick select { max-width: none; }
  .bf .bf-head h1 { font-size: 17px; }
  .bf .bf-head-meta { margin-top: 1px; font-size: 12.5px; gap: 4px 10px; }
  .bf .bf-head .bf-download { min-height: 36px; padding: 6px 12px; }
  .bf .bf-kitpick select { min-height: 34px; padding: 2px 8px; }
  .bf .bf-handle { height: 18px; }
  .bf .bf-steps { padding: 0 8px 8px; gap: 4px; }
  .bf .bf-step-tab { min-height: 40px; font-size: 12.5px; gap: 5px; border-radius: 10px; }
  .bf .bf-step-desc { display: none; }
  .bf-card { padding: 14px; }

  /* The toolbar floats in the document's top-right corner. */
  .bf .bf-doc .bf-toolbar {
    position: absolute; top: 8px; right: 8px; z-index: 15; width: auto; gap: 2px; padding: 3px;
    border: 1px solid var(--bf-line); border-radius: 12px; background: var(--bf-card);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
  }
  .bf .bf-toolbar > :not(.bf-tool):not(.bf-zoom) { display: none; }
  /* No band reserved for it any more (Nate, 2026-10-17): the pill sits over
     the page's own top margin, so the page starts right under the header. */
  .bf .bf-paper-viewport { padding-top: 8px; }
  .bf .bf-doc .bf-toolbar { top: 12px; right: 14px; padding: 2px; border-radius: 10px; background: rgba(255, 255, 255, .94); }
  .bf .bf-toolbar .bf-tool { min-width: 34px; min-height: 34px; padding: 3px; border-color: transparent; background: transparent; }
  .bf .bf-toolbar .bf-tool svg { width: 18px; height: 18px; }
  .bf-more { display: inline-flex; align-items: center; justify-content: center; }
  /* Undo and "more" only (Nate, 2026-10-17): a narrow pill clears a centred
     name; Redo, full screen and the rest are one tap away under "more". */
  .bf-toolbar:not(.bf-more-open) > .bf-tool:not([data-bf="undo"]):not(.bf-full-close):not(.bf-more) { display: none; }
  .bf-toolbar.bf-more-open .bf-more { color: var(--bf-accent-text); background: var(--bf-accent-soft); }
  .bf.bf-full .bf-more { display: none; }
}


/* Design pass C (Nate, round 4: "the top bar takes too much space"): on a
   phone the header is one row: title, a "Saved" dot, the kit picker (compact),
   the score, PDF. The kit name text hides (it's in the menu). */
@media (max-width: 720px) {
  .bf .bf-head { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px; padding: 8px 12px; }
  .bf .bf-head .bf-head-meta { grid-column: 2; grid-row: 1; margin: 0; gap: 6px; }
  .bf .bf-head > :not(.bf-head-text):not(.bf-download) { grid-column: 3; grid-row: 1; }
  .bf .bf-head .bf-download { grid-column: 4; }
  .bf .bf-save [data-bf="save-text"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bf .bf-save-dot { width: 9px; height: 9px; }
  .bf .bf-kitname { display: none; }
  .bf .bf-kitpick { flex: 0 1 auto; }
  .bf .bf-kitpick select { max-width: 112px; font-size: 12.5px; }
  .bf .bf-head h1 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bf .bf-head .bf-download { min-height: 34px; padding: 4px 10px; font-size: 13px; }
}