/* ==========================================================================
   Outreach & Proposal Builder — Wizard UI (Redesign)
   ========================================================================== */

/* Base */
:root{
  --clr-bg:#ffffff; --clr-text:#0f172a; --clr-primary:#2563eb; --clr-secondary:#06b6d4;
  --radius-lg:14px; --shadow-lg:0 10px 30px rgba(2,6,23,.1);
}
[data-theme="dark"]{
  --clr-bg:#0b1220; --clr-text:#e5e7eb; --clr-primary:#3b82f6; --clr-secondary:#22d3ee;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--clr-bg);color:var(--clr-text)}

/* Accessibility helpers */
.skip-link {
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus {
  position:fixed; left:1rem; top:1rem; z-index:1000;
  width:auto; height:auto; padding:.5rem .75rem;
  background:var(--clr-primary); color:#fff; border-radius:.5rem; box-shadow:var(--shadow-lg);
}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid #e5e7eb}
.nav__brand{font-weight:800;letter-spacing:.3px;text-decoration:none}
.nav__brand--primary{color:var(--clr-primary)}
.nav__brand--secondary{color:var(--clr-secondary)}
.nav__links{display:flex;gap:.9rem;align-items:center}
.nav__links a, .theme-toggle{color:inherit;text-decoration:none;border:0;background:transparent}
.theme-toggle{cursor:pointer}

/* Hero */
.hero--proposal{
  padding:6rem 1rem 4rem;
  background:
    radial-gradient(80rem 40rem at 10% -10%, rgba(37,99,235,.20), transparent 60%),
    radial-gradient(80rem 40rem at 90% -10%, rgba(16,185,129,.18), transparent 60%),
    linear-gradient(to bottom, rgba(37, 99, 235, 0.85), rgba(30, 64, 175, 0.9));
  color:#f8fafc; text-align:center; box-shadow:inset 0 -2px 8px rgba(0,0,0,0.1)
}
.hero--proposal .hero__content{max-width:56rem;margin:0 auto;animation:fadeIn .8s ease}
.hero--proposal p{opacity:.96;margin:0 auto 1.5rem}
.hero__cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.hero__badges{margin-top:1.25rem;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));list-style:none;padding:0}
.hero__badges li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:.6rem .8rem;border-radius:999px;font-size:.95rem;display:flex;align-items:center;gap:.5rem;justify-content:center}

/* Builder */
.builder .section__title-wrap{text-align:center;margin:1.75rem 0 .5rem}
.section__kicker{color:#6b7280;font-size:.98rem}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;list-style:none;padding:0;margin:0 0 1rem}
.step{position:relative;padding:.75rem .5rem;border:1px dashed #d1d5db;border-radius:12px;text-align:center;font-weight:600;color:#64748b}
.step.is-active{border-style:solid;color:var(--clr-primary);border-color:var(--clr-primary);background:#eef2ff}
[data-theme="dark"] .step{border-color:rgba(255,255,255,.15)}
[data-theme="dark"] .step.is-active{background:#1e293b}

.wizard{display:grid;gap:1rem}
.card{background:var(--clr-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid #e5e7eb;overflow:hidden}
[data-theme="dark"] .card{border-color:rgba(255,255,255,.12)}
.wizard__header{padding:1rem 1.25rem;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:.6rem}
.wizard__card{display:none}
.wizard__card.is-current{display:block;animation:fadeIn .2s ease}
.wizard__footer{display:flex;gap:.6rem;align-items:center;padding:1rem;border-top:1px solid #e5e7eb}
.wizard__footer .spacer{flex:1}

.form{padding:1rem 1.25rem}
.row{display:grid;gap:.9rem;margin-top:.9rem}
.row.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:48rem){.row.two{grid-template-columns:1fr}}

.form label{font-size:.95rem;color:var(--clr-text);display:flex;flex-direction:column;gap:.45rem}
.form input, .form select{
  padding:.75rem .9rem; border:1px solid #d1d5db; border-radius:12px; background:var(--clr-bg); color:var(--clr-text);
  outline:none; transition:box-shadow .15s,border-color .15s,transform .06s ease
}
.form input:focus, .form select:focus{border-color:var(--clr-primary); box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.form input[type="file"]{padding:.55rem}

.checkboxes{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.check{border:1px solid #e5e7eb;padding:.55rem .7rem;border-radius:12px;background:var(--clr-bg)}
[data-theme="dark"] .check{border-color:rgba(255,255,255,.15)}
.check input{margin-right:.35rem}

/* Results */
.results{margin-top:1.5rem}
.results__bar{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e5e7eb}
.kicker{letter-spacing:.02em;color:#6b7280}

.cards{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:72rem){.cards{grid-template-columns:1fr}}
.proposal-card__header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e5e7eb}
.proposal-card__header h3{margin:0;font-size:1.05rem}
.proposal-body{padding:1.1rem;min-height:220px}
.proposal-card__footer{display:flex;flex-wrap:wrap;gap:.6rem;padding:.8rem;border-top:1px solid #e5e7eb}

.chip{background:#eef2ff;color:var(--clr-primary);border:1px solid #e5e7eb;padding:.25rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600}
[data-theme="dark"] .chip{background:#1e293b;border-color:rgba(255,255,255,.1)}

/* Skeleton shimmer */
.skeleton [data-content]{
  min-height:220px;border-radius:12px;
  background:linear-gradient(90deg, rgba(148,163,184,.22), rgba(148,163,184,.10), rgba(148,163,184,.22));
  background-size:200% 100%; animation:sheen 1.2s linear infinite;
}
@keyframes sheen{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Rich text */
.proposal-body h1,.proposal-body h2,.proposal-body h3{margin:.2em 0}
.proposal-body p{color:#374151}
[data-theme="dark"] .proposal-body p{color:#d1d5db}
.proposal-body ul,.proposal-body ol{padding-left:1.25rem}
.proposal-body li{margin:.25em 0}
.proposal-body .lead{font-size:1.05rem;color:#334155}
[data-theme="dark"] .proposal-body .lead{color:#cbd5e1}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid #e5e7eb;background:#fff;color:#111827;padding:.6rem .85rem;border-radius:10px;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--clr-primary);color:#fff;border-color:transparent}
.btn--secondary{background:#f3f4f6}
.btn--ghost{background:transparent}
button:focus-visible,.btn:focus-visible,a.btn:focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:2px}

/* Console */
.console{margin-top:1rem}
.console summary{cursor:pointer;color:#6b7280}
.console pre{white-space:pre-wrap;border:1px solid #e5e7eb;background:#f9fafb;padding:.9rem;border-radius:12px;max-height:220px;overflow:auto}
[data-theme="dark"] .console pre{background:#0b1220;border-color:rgba(255,255,255,.12);color:var(--clr-text)}

/* Print */
@media print{
  body{background:#fff;color:#000}
  .nav,.hero,.wizard,.steps,.console,.footer,.btn,.theme-toggle{display:none!important}
  .results{box-shadow:none;border:0}
  .cards{grid-template-columns:1fr!important}
  .card{page-break-inside:avoid;border:0;box-shadow:none}
}