/* ============================================================================
   Freight Paperwork Generator — page-specific styles only.
   Tokens, reset, nav, buttons, cards and footer all come from /css/site.css.
   Scoped classes below use an `fd-` / `dg-` prefix so nothing here can collide
   with any other page's local styles.
   ========================================================================= */

section{scroll-margin-top:110px}

.fd-hero{padding-bottom:var(--s6)}
.fd-hero h1{margin:var(--s4) 0 var(--s4)}

.fd-note{border:1px solid var(--line-soft);border-left:3px solid var(--gold);
  border-radius:var(--radius);background:rgba(212,175,55,.05);
  padding:var(--s4) var(--s5);font-size:var(--t-small);color:var(--muted);max-width:72ch}
.fd-note b{color:var(--ink)}

.fd-priv{display:grid;gap:var(--s4);margin-top:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.fd-priv h2,.fd-priv h3{font-size:15px;letter-spacing:.4px;color:var(--gold-2);margin:0 0 var(--s2)}
.fd-priv p{color:var(--muted);font-size:var(--t-small);margin:0;line-height:1.7}

.fd-toc{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5);padding:0;list-style:none}
.fd-toc a{display:inline-block;padding:8px 15px;border:1px solid var(--line-soft);
  border-radius:var(--radius);font-size:13.5px;color:var(--muted);
  background:rgba(255,255,255,.02);transition:border-color .25s var(--ease),color .25s var(--ease)}
.fd-toc a:hover{border-color:var(--gold);color:var(--gold-2)}

/* ---------- workspace: form + tabbed preview ------------------------------- */
.fd-workspace{padding-top:var(--s6)}
.fd-grid{display:grid;gap:var(--s6);grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:start}
@media(max-width:980px){.fd-grid{grid-template-columns:1fr}}

.fd-form{display:flex;flex-direction:column;gap:var(--s4)}
.fd-form__head h2{font-size:clamp(20px,2.4vw,26px);margin:0 0 var(--s2)}
.fd-form__sub{color:var(--muted);font-size:var(--t-small);max-width:52ch;line-height:1.6}

.fd-sec{border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--panel),var(--panel2));overflow:hidden}
.fd-sec + .fd-sec{margin-top:0}
.fd-sec summary{cursor:pointer;list-style:none;padding:var(--s4) var(--s5);
  font-family:var(--display-pro);font-weight:600;font-size:15px;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4)}
.fd-sec summary::-webkit-details-marker{display:none}
.fd-sec summary::after{content:"+";font-size:20px;line-height:1;color:var(--gold);flex:none}
.fd-sec[open] summary::after{content:"\2013"}
.fd-sec summary:hover{color:var(--gold-2)}
.fd-sec summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.fd-sec__body{padding:0 var(--s5) var(--s5)}
.fd-sec__hint{color:var(--faint);font-size:12.5px;margin:0 0 var(--s4);line-height:1.6}

.dg-fields{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr))}
.dg-field{display:flex;flex-direction:column}
.dg-field label{font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.dg-field .req{color:var(--gold-2)}
.dg-field input,.dg-field select,.dg-field textarea{font-size:15px}
.dg-field textarea{resize:vertical;min-height:64px;font-family:inherit;line-height:1.5}
.dg-field .hint{display:block;margin-top:5px;font-size:11px;color:var(--faint);line-height:1.4}
.dg-field--wide{grid-column:1/-1}
.dg-field input[aria-invalid="true"],.dg-field select[aria-invalid="true"]{border-color:var(--bad)}

.dg-checks{display:flex;flex-direction:column;gap:var(--s3)}
.dg-check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ink);cursor:pointer}
.dg-check input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--gold)}

.fd-total{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  margin-top:var(--s4);padding:var(--s3) var(--s4);border:1px dashed var(--line);
  border-radius:var(--radius);background:rgba(212,175,55,.05)}
.fd-total span{font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.fd-total strong{font-family:var(--display-pro);font-weight:800;color:var(--gold-2);
  font-size:clamp(18px,2vw,22px)}

.fd-form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s2)}
.fd-note-text{font-size:12.5px;color:var(--faint)}

/* ---------- output column -------------------------------------------------- */
.fd-output{position:sticky;top:88px;display:flex;flex-direction:column;gap:var(--s4)}
@media(max-width:980px){.fd-output{position:static}}

.fd-tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line-soft);padding-bottom:0}
.fd-tab{padding:11px 16px;border:1px solid var(--line-soft);border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0;background:rgba(255,255,255,.02);
  color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;
  transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.fd-tab:hover{color:var(--gold-2)}
.fd-tab.is-active{color:var(--bg);background:linear-gradient(135deg,var(--gold),var(--gold-2));
  border-color:var(--gold)}
.fd-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.fd-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.fd-copied{font-size:12.5px;color:var(--gold-2)}

.fd-validation{border:1px solid rgba(224,104,95,.4);background:rgba(224,104,95,.08);
  border-radius:var(--radius);padding:var(--s3) var(--s4);font-size:12.5px;color:var(--ink)}
.fd-validation[hidden]{display:none}

/* ---------- the generated document itself ----------------------------------
   Deliberately paper-styled (light) even inside the dark page, because this is
   the exact thing that gets printed — what you see here is what prints. */
.fd-preview-wrap{border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.7)}
.fd-doc{
  background:#fbfaf7;color:#14140f;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  font-size:12.5px;line-height:1.6;
  padding:clamp(22px,4vw,44px);min-height:360px;
  animation:fd-doc-in .28s var(--ease);
}
@keyframes fd-doc-in{from{opacity:.35}to{opacity:1}}
.fd-doc h1,.fd-doc h2,.fd-doc h3{font-family:Georgia,"Times New Roman",serif;margin:0;color:#14140f}
.fd-doc .fd-gold-rule{height:2px;border:0;margin:14px 0 20px;
  background:linear-gradient(90deg,#e9c96a,#d4af37,#8a7328)}
.fd-doc .fd-eyebrow{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  color:#836d26;font-weight:700}
.fd-doc__letterhead{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--s4);margin-bottom:6px;flex-wrap:wrap}
.fd-doc__brand{font-size:18px;letter-spacing:-.2px}
.fd-doc__brand-sub{font-size:10.5px;color:#6b675c;margin-top:3px;line-height:1.6}
.fd-doc__doctag{text-align:right}
.fd-doc__doctag h1{font-size:22px;letter-spacing:-.4px}
.fd-doc__doctag p{font-size:10.5px;color:#6b675c;margin-top:2px}

.fd-doc__meta{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  border:1px solid rgba(20,20,15,.12);border-radius:8px;padding:12px 16px;margin-bottom:18px}
.fd-doc__meta .lbl{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;
  color:#836d26;font-weight:700;margin-bottom:2px}
.fd-doc__meta .val{font-size:13px;font-weight:700}

.fd-doc__cols{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-bottom:16px}
.fd-doc__card{border:1px solid rgba(20,20,15,.12);border-radius:8px;padding:12px 15px;
  break-inside:avoid}
.fd-doc__card h3{font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;
  color:#836d26;margin-bottom:6px;font-family:-apple-system,sans-serif;font-weight:700}
.fd-doc__card .name{font-weight:700;font-size:13px}
.fd-doc__card p{margin:0 0 2px;font-size:11.5px}
.fd-doc__card .window{margin-top:5px;font-size:11px}
.fd-doc__card .window b{color:#6b675c;font-weight:600}

table.fd-doc__table{width:100%;border-collapse:collapse;margin-bottom:16px}
table.fd-doc__table td{padding:7px 4px;font-size:12px;border-bottom:1px solid rgba(20,20,15,.12)}
table.fd-doc__table td.num{text-align:right;font-variant-numeric:tabular-nums}
table.fd-doc__table tr.total td{border-top:1.5px solid #d4af37;border-bottom:none;
  font-family:Georgia,serif;font-size:15px;font-weight:700;padding-top:11px}

.fd-doc__list{margin:0 0 16px;padding-left:0;list-style:none}
.fd-doc__list li{font-size:12px;margin-bottom:6px;padding-left:20px;position:relative}
.fd-doc__list li::before{content:"\2610";position:absolute;left:0;color:#836d26}

.fd-doc__note{border:1px solid rgba(20,20,15,.12);border-radius:8px;padding:12px 15px;
  margin-bottom:16px;font-size:11.5px;color:#3a382f}
.fd-doc__terms{font-size:11px;color:#6b675c;line-height:1.65;margin-bottom:18px}

.fd-doc__sig-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-top:14px}
.fd-doc__sig-line{border-bottom:1px solid #14140f;height:34px;margin-bottom:6px}
.fd-doc__sig-label{font-size:10px;color:#6b675c}

.fd-doc__legal{margin-top:20px;padding-top:14px;border-top:1px solid rgba(20,20,15,.16);
  font-size:9.5px;line-height:1.6;color:#6b675c;font-style:italic}

.fd-doc__blank{color:#b1462f;font-style:italic}

/* tender-specific layout: email letter block + sms strip */
.fd-doc__tenderblock{border:1px solid rgba(20,20,15,.12);border-radius:8px;
  padding:16px 18px;margin-bottom:16px;white-space:pre-wrap;font-size:12px}
.fd-doc__tenderblock h3{font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;
  color:#836d26;margin-bottom:8px;font-family:-apple-system,sans-serif;font-weight:700}
.fd-doc__tendersms{font-family:var(--mono);font-size:12.5px;background:rgba(20,20,15,.04);
  border:1px dashed rgba(20,20,15,.2);border-radius:6px;padding:12px 14px}

/* ---------- CTA / FAQ (shared shape with freight-tools.html) --------------- */
.fd-cta{border:1px solid var(--line);border-radius:var(--radius-lg);
  background:radial-gradient(70% 130% at 50% 0%,rgba(212,175,55,.10),transparent),
    linear-gradient(180deg,var(--panel),var(--panel2));
  padding:clamp(28px,4.5vw,52px) clamp(20px,4vw,44px);box-shadow:var(--shadow)}
.fd-cta h2{margin:var(--s3) 0}
.fd-cta p{color:var(--muted);max-width:62ch}
.fd-cta ul{margin:var(--s4) 0 0;padding-left:1.15em;color:var(--muted);font-size:var(--t-small)}
.fd-cta li+li{margin-top:6px}
.fd-cta .btnrow{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

.fd-rel{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);padding:0;list-style:none}
.fd-rel a{display:inline-block;padding:8px 15px;border:1px solid var(--line-soft);
  border-radius:var(--radius);font-size:13.5px;color:var(--muted);
  background:rgba(255,255,255,.02);transition:border-color .25s var(--ease),color .25s var(--ease)}
.fd-rel a:hover{border-color:var(--gold);color:var(--gold-2)}

/* iOS Safari zooms the page when a focused field is under 16px */
.fd-form input,.fd-form select,.fd-form textarea{font-size:16px}

/* ---------- motion opt-out (scoped, in addition to site.css's global one) -- */
@media(prefers-reduced-motion:reduce){
  .fd-doc{animation:none!important}
  .fd-tab,.fd-toc a,.fd-rel a,.fd-sec summary{transition:none!important}
}

/* ---------- print: only the active document, nothing else ------------------ */
@media print{
  @page{size:letter;margin:0.55in}
  body *{visibility:hidden}
  .fd-preview-wrap,.fd-preview-wrap *{visibility:visible}
  .fd-preview-wrap{position:absolute;left:0;top:0;width:100%;box-shadow:none;border-radius:0}
  .fd-doc{padding:0;min-height:0;animation:none}
  .fd-doc__legal{color:#555}
}