/* Free tools: shared page styling. Built Logic brand only.
   Colours: Charcoal #232A31, Off-White #FAFAF8, Consulting Blue #1B3A5B, Light Blue #AFC4DD,
   Steel Grey #586069, Soft Stone #E5E5E2, Hover #17314D.
   Fonts: Fraunces (display), Source Sans 3 (body, UI), IBM Plex Mono (figures only).
   The site has no amber token, so placeholders use Soft Stone with a Steel Grey dashed border. */

.blt {
  --blt-ink: #232A31;
  --blt-paper: #FAFAF8;
  --blt-blue: #1B3A5B;
  --blt-light: #AFC4DD;
  --blt-steel: #586069;
  --blt-stone: #E5E5E2;
  --blt-hover: #17314D;
  --blt-radius: 16px;
  color: var(--blt-ink);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}
.blt *, .blt-modal * { box-sizing: border-box; }

/* Layout */
.blt-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.blt-grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .blt-grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

/* Headings */
.blt-h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.15; color: var(--blt-ink); margin: 0 0 12px; }
.blt-h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--blt-ink); margin: 0 0 12px; }
.blt-intro { font-size: 19px; color: var(--blt-steel); margin: 0 0 20px; }

/* Cards */
.blt-card { background: var(--blt-paper); border: 1px solid var(--blt-stone); border-radius: var(--blt-radius); padding: 24px; position: relative; }
.blt-card--lift { border-top: 3px solid var(--blt-stone); transition: border-color 200ms ease-out; }
.blt-card--tint { background: rgba(175, 196, 221, 0.22); border-color: transparent; }
.blt-card--dark { background: var(--blt-ink); color: var(--blt-paper); border-color: var(--blt-ink); }
.blt-card--dark .blt-h3, .blt-card--dark .blt-h2 { color: var(--blt-paper); }
.blt-card--dark .blt-hint { color: var(--blt-light); }
@media (max-width: 600px) { .blt-card { padding: 18px 16px; } }

/* Stepper */
.blt-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; }
.blt-steps li { font-size: 14px; color: var(--blt-steel); padding: 6px 12px; border-radius: 999px; background: var(--blt-stone); }
.blt-steps li[aria-current="step"] { background: var(--blt-blue); color: var(--blt-paper); font-weight: 600; }
.blt-steps li.is-done { background: rgba(175, 196, 221, 0.45); color: var(--blt-blue); }
.blt-step-count { font-size: 14px; color: var(--blt-steel); margin: 0 0 8px; }

/* Forms */
.blt-label { display: block; font-weight: 600; font-size: 16px; color: var(--blt-ink); margin: 14px 0 6px; }
.blt-label:first-child { margin-top: 0; }
.blt-input, .blt select, .blt textarea, .blt-modal .blt-input {
  display: block; width: 100%; min-height: 46px; padding: 10px 12px;
  font: 400 17px/1.4 "Source Sans 3", system-ui, sans-serif; color: var(--blt-ink);
  background: var(--blt-paper); border: 1.5px solid #586069; border-radius: 10px;
}
.blt textarea, textarea.blt-input { min-height: 96px; resize: vertical; }
.blt-input:focus-visible, .blt select:focus-visible, .blt textarea:focus-visible, .blt-btn:focus-visible, .blt-link:focus-visible, .blt-check input:focus-visible {
  outline: 3px solid #AFC4DD; outline-offset: 2px; border-color: var(--blt-blue);
}
.blt-hint { font-size: 14px; color: var(--blt-steel); margin: 6px 0 0; }
.blt-note { font-size: 14px; color: var(--blt-ink); background: var(--blt-stone); border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; }
.blt-status { font-size: 14px; color: var(--blt-blue); margin: 8px 0 0; min-height: 1.2em; }
.blt-error { color: var(--blt-ink); border-left: 3px solid var(--blt-ink); padding-left: 10px; }
.blt-check { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; margin: 14px 0 0; cursor: pointer; }
.blt-fine { font-size: 12px; line-height: 1.4; color: #586069; margin: 6px 0 0 30px; }
.blt-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: #1B3A5B; }
.blt-choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.blt-choice { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1.5px solid var(--blt-stone); border-radius: 12px; background: var(--blt-paper); cursor: pointer; font-size: 16px; }
.blt-choice:has(input:checked) { border-color: var(--blt-blue); background: rgba(175, 196, 221, 0.22); }
.blt-choice input { accent-color: #1B3A5B; margin-top: 3px; }
.blt-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.blt-inline .blt-input { flex: 1 1 220px; width: auto; }
.blt-inline--tight { margin-top: 10px; gap: 12px; }
fieldset.blt-fieldset { border: 0; padding: 0; margin: 0 0 18px; }
fieldset.blt-fieldset legend { font-weight: 600; font-size: 16px; padding: 0; margin-bottom: 8px; }

/* Buttons */
.blt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 22px;
  border: 1.5px solid var(--blt-ink); border-radius: 11px; background: var(--blt-ink); color: var(--blt-paper);
  font: 600 16px "Source Sans 3", system-ui, sans-serif; text-decoration: none; cursor: pointer;
  box-shadow: 0 14px 30px -16px rgba(35, 42, 49, 0.55);
  transition: background-color 200ms ease, color 200ms ease, transform 160ms ease-out;
}
.blt-btn[disabled] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.blt-btn--ghost { background: transparent; color: var(--blt-ink); box-shadow: none; }
.blt-btn--small { min-height: 38px; padding: 7px 14px; font-size: 15px; }
.blt-link { background: none; border: 0; padding: 4px 0; font: 600 15px "Source Sans 3", system-ui, sans-serif; color: var(--blt-blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.blt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (hover: hover) and (pointer: fine) {
  .blt-btn:not([disabled]):hover { background: #AFC4DD; color: var(--blt-ink); border-color: #AFC4DD; }
  .blt-btn--ghost:not([disabled]):hover { background: var(--blt-ink); color: var(--blt-paper); border-color: var(--blt-ink); }
  .blt-card--dark .blt-btn--ghost:not([disabled]):hover { background: #AFC4DD; color: var(--blt-ink); border-color: #AFC4DD; }
  .blt-link:hover { color: var(--blt-hover); }
  .blt-card--lift:hover { border-top-color: var(--blt-blue); }
}
.blt-card--dark .blt-btn--ghost { color: var(--blt-paper); border-color: var(--blt-paper); }
.blt-file { position: relative; overflow: hidden; }
.blt-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Export bar */
.blt-exports { display: flex; flex-wrap: wrap; gap: 8px; }
.blt-exports .blt-btn { flex: 1 1 150px; }

/* Result preview: the generated document shown as a page */
.blt-preview { background: var(--blt-stone); border-radius: var(--blt-radius); padding: 16px; }
.blt-preview iframe { display: block; width: 100%; min-height: 70vh; border: 0; border-radius: 6px; background: #FAFAF8; }
.blt-preview__sheet { background: var(--blt-paper); border-radius: 6px; padding: 28px; max-height: 75vh; overflow: auto; font-size: 15px; }
@media (max-width: 600px) { .blt-preview { padding: 8px; } .blt-preview__sheet { padding: 16px; } }

/* Checks and scores */
.blt-list { margin: 0; padding-left: 20px; } .blt-list li { margin: 0 0 6px; }
.blt-score { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 40px; line-height: 1; color: var(--blt-blue); }
.blt-flag { display: inline-block; font-size: 14px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--blt-stone); color: var(--blt-ink); }
.blt-flag--ok { background: rgba(175, 196, 221, 0.45); color: var(--blt-blue); }
.blt-flag--warn { background: var(--blt-ink); color: var(--blt-paper); }
.blt-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.blt-table th, .blt-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--blt-stone); vertical-align: top; }
.blt-table th { font-weight: 600; color: var(--blt-steel); }
.blt-scroll { overflow-x: auto; }

/* Amber placeholder: anything the user has not given yet */
.blt-ph, .blt mark.ph { background: var(--blt-stone); color: var(--blt-ink); border: 1.5px dashed #586069; border-radius: 4px; padding: 0 4px; }

/* Brand set-up */
.blt-brand-grid { display: grid; gap: 20px; }
@media (min-width: 720px) { .blt-brand-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.blt-logo-box { display: flex; align-items: center; justify-content: center; min-height: 110px; padding: 14px; background: var(--blt-paper); border: 1.5px dashed #586069; border-radius: 12px; }
.blt-logo-box img { max-width: 100%; max-height: 90px; object-fit: contain; }
.blt-colours { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.blt-colour { display: grid; gap: 6px; align-content: start; }
.blt-colour .blt-label { margin: 0; }
.blt-colour input[type="color"] { width: 100%; height: 46px; padding: 2px; border: 1.5px solid #586069; border-radius: 10px; background: var(--blt-paper); cursor: pointer; }
.blt-colour code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 14px; color: var(--blt-steel); }
.blt-brand-preview { display: grid; gap: 6px; margin-top: 18px; padding: 14px; border-radius: 12px; background: var(--blt-paper); border: 1px solid var(--blt-stone); }
.blt-brand-preview__title { font-weight: 700; font-size: 18px; }
.blt-brand-preview__bar { display: block; height: 14px; border-radius: 4px; }
.blt-brand-preview__bar--thin { height: 6px; width: 40%; }
.blt-brand-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.blt-brand-saved__logo { display: flex; align-items: center; min-height: 56px; max-width: 180px; }
.blt-brand-saved__logo img { max-height: 56px; max-width: 180px; object-fit: contain; }
.blt-brand-saved__text { flex: 1 1 160px; }
.blt-brand-saved__name { font-weight: 600; margin: 0; }
.blt-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; border: 1px solid rgba(35, 42, 49, 0.2); }

/* Modal (native dialog) */
.blt-modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 18px; background: var(--blt-ink); color: var(--blt-paper); font-family: "Source Sans 3", system-ui, sans-serif; font-size: 17px; }
.blt-modal::backdrop { background: rgba(35, 42, 49, 0.6); }
.blt-modal__body { padding: 24px; }
.blt-modal .blt-h3, .blt-modal .blt-label { color: var(--blt-paper); }
.blt-modal .blt-hint, .blt-modal .blt-status { color: var(--blt-light); }
.blt-modal .blt-hint a { color: var(--blt-light); }
.blt-modal .blt-btn { background: var(--blt-paper); color: var(--blt-ink); border-color: var(--blt-paper); box-shadow: none; }
.blt-modal .blt-btn--ghost { background: transparent; color: var(--blt-paper); border-color: var(--blt-paper); }
@media (hover: hover) and (pointer: fine) {
  .blt-modal .blt-btn:hover, .blt-modal .blt-btn--ghost:hover { background: #AFC4DD; color: var(--blt-ink); border-color: #AFC4DD; }
}
@media (max-width: 600px) { .blt-modal__body { padding: 18px 16px; } }

/* Bridge after export */
.blt-bridge { background: var(--blt-ink); color: var(--blt-paper); border-radius: var(--blt-radius); padding: 24px; }
.blt-bridge p { margin: 0 0 14px; }
.blt-bridge a { color: var(--blt-light); }

.blt-hidden { display: none !important; }
.blt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .blt-btn { transition: none; } }
@media print { .blt-actions, .blt-exports, .blt-steps { display: none; } }
.blt-gate-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 0; }
@media (max-width: 520px) { .blt-gate-pair { grid-template-columns: 1fr; } }