/* builder.css — THE BUILDER page (parent-facing; ads allowed here per
   BUILD-SPEC section 6). Layered on top of the shared site tokens defined
   in ../assets/fcc.css (--fcc-bg, --fcc-text, --fcc-accent, etc.). */

.bld-hero{padding:1.5rem 0 .5rem;}
.bld-hero h1{margin-bottom:.3rem;}
.bld-hero p{color:var(--fcc-text-mute);max-width:62ch;}

.bld-layout{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:start;}
@media (min-width:900px){
  .bld-layout{grid-template-columns:1fr 320px;}
  .bld-summary{position:sticky;top:1rem;}
}

.bld-step{background:var(--fcc-bg-raised);border:1px solid var(--fcc-border);border-radius:12px;
  padding:1.1rem 1.2rem 1.3rem;margin-bottom:1.1rem;box-shadow:var(--fcc-shadow);}
.bld-step[data-disabled="1"]{opacity:.5;pointer-events:none;}
.bld-step h2{display:flex;align-items:center;gap:.6rem;border:none;margin:0 0 .3rem;padding:0;
  font-size:1.15rem;}
.bld-step-num{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;
  border-radius:50%;background:var(--fcc-accent);color:#fff;font-family:-apple-system,sans-serif;
  font-size:.85rem;font-weight:700;flex:none;}
.bld-step-hint{color:var(--fcc-text-mute);font-size:.88rem;margin:0 0 .8rem;}

.bld-pill-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.7rem;}
.bld-pill{background:var(--fcc-bg-inset);border:2px solid var(--fcc-border);border-radius:999px;
  padding:.5rem 1.1rem;font-size:.92rem;font-weight:700;cursor:pointer;color:var(--fcc-text);}
.bld-pill[aria-pressed="true"]{background:var(--fcc-accent);border-color:var(--fcc-accent);color:#fff;}

/* 13 grades read better in bands (Elementary / Middle / High School) than
   as one long undifferentiated row of pills. */
.bld-grade-band-title{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--fcc-text-mute);margin:.9rem 0 .35rem;}
.bld-grade-band-title:first-child{margin-top:0;}

/* High-school grades carry up to 26 subjects; splitting the check-grid into
   Core / Electives sections keeps that scannable instead of one long wall
   of checkboxes. Grades with no electives (K-8) skip these headings. */
.bld-subj-group-title{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--fcc-text-mute);border:none;margin:1rem 0 .5rem;padding:0;}
.bld-subj-group-title:first-child{margin-top:0;}

.bld-quickrow{display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0;}
.bld-quickbtn{background:transparent;border:1px solid var(--fcc-border);border-radius:6px;
  padding:.35rem .7rem;font-size:.8rem;color:var(--fcc-accent);cursor:pointer;}

.bld-check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem;}
.bld-check-card{border:1px solid var(--fcc-border);border-radius:9px;padding:.7rem .85rem;
  background:var(--fcc-bg-inset);cursor:pointer;display:block;}
.bld-check-card input{margin-right:.5rem;}
.bld-check-card.is-checked{border-color:var(--fcc-accent);background:var(--fcc-badge-bg);}
.bld-check-card .name{font-weight:700;}
.bld-check-card .meta{display:block;font-size:.78rem;color:var(--fcc-text-mute);margin-top:.15rem;}
.bld-check-card .affinity{display:inline-block;margin-top:.3rem;font-size:.72rem;font-weight:700;
  color:var(--fcc-accent);}

.bld-empty{color:var(--fcc-text-mute);font-style:italic;padding:.6rem 0;}

.bld-opt-row{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem 0;
  border-bottom:1px dotted var(--fcc-border);}
.bld-opt-row:last-child{border-bottom:none;}
.bld-opt-row input{margin-top:.25rem;flex:none;width:1.1rem;height:1.1rem;}
.bld-opt-row .opt-label{font-weight:700;}
.bld-opt-row .opt-desc{font-size:.82rem;color:var(--fcc-text-mute);}
.bld-opt-row[data-disabled="1"]{opacity:.5;}

.bld-reward-box{border:2px dashed var(--fcc-accent-2);border-radius:9px;padding:.8rem 1rem;
  margin-top:.8rem;background:var(--fcc-have-bg);}
.bld-toggle{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;}
.bld-switch{width:2.6rem;height:1.5rem;border-radius:999px;background:var(--fcc-border);
  position:relative;flex:none;transition:background .15s;}
.bld-switch::after{content:"";position:absolute;top:2px;left:2px;width:1.2rem;height:1.2rem;
  border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.3);}
.bld-toggle[aria-pressed="true"] .bld-switch{background:var(--fcc-accent);}
.bld-toggle[aria-pressed="true"] .bld-switch::after{left:1.3rem;}

/* ---- summary / build panel ---- */
.bld-summary-box{background:var(--fcc-bg-raised);border:1px solid var(--fcc-border);
  border-radius:12px;padding:1.1rem 1.2rem;box-shadow:var(--fcc-shadow);}
.bld-summary-box h2{margin-top:0;font-size:1.05rem;}
.bld-summary-list{list-style:none;margin:0 0 .8rem;padding:0;font-size:.88rem;}
.bld-summary-list li{padding:.25rem 0;border-bottom:1px dotted var(--fcc-border);
  display:flex;justify-content:space-between;gap:.5rem;}
.bld-size{font-family:Georgia,serif;font-size:1.6rem;font-weight:700;color:var(--fcc-accent);}
.bld-size-label{font-size:.78rem;color:var(--fcc-text-mute);}
.bld-size-warn{margin-top:.4rem;font-size:.8rem;padding:.5rem .7rem;border-radius:6px;
  background:var(--fcc-have-bg);border:1px solid var(--fcc-have-border);display:none;}
.bld-size-warn[data-show="1"]{display:block;}
.bld-build-btn{width:100%;background:var(--fcc-accent);color:#fff;border:none;border-radius:8px;
  padding:.85rem 1rem;font-size:1.02rem;font-weight:700;cursor:pointer;margin-top:.7rem;}
.bld-build-btn:disabled{opacity:.5;cursor:not-allowed;}
.bld-build-btn:hover:not(:disabled){filter:brightness(1.07);}

.bld-progress-wrap{margin-top:.8rem;display:none;}
.bld-progress-wrap[data-show="1"]{display:block;}
.bld-progress-track{background:var(--fcc-bg-inset);border-radius:999px;height:.7rem;overflow:hidden;
  border:1px solid var(--fcc-border);}
.bld-progress-fill{background:var(--fcc-accent);height:100%;width:0%;transition:width .25s;}
.bld-progress-label{font-size:.8rem;color:var(--fcc-text-mute);margin-top:.35rem;}

.bld-confirm{display:none;text-align:center;padding:1rem;}
.bld-confirm[data-show="1"]{display:block;}
.bld-confirm .mark{font-size:2.4rem;}
.bld-confirm h2{border:none;}
.bld-confirm .fname{font-family:monospace;background:var(--fcc-bg-inset);padding:.3rem .5rem;
  border-radius:6px;word-break:break-all;display:inline-block;margin:.4rem 0;}

.bld-error{border:1px solid var(--fcc-accent-2);background:var(--fcc-have-bg);border-radius:8px;
  padding:.8rem 1rem;font-size:.9rem;margin-bottom:1rem;}
.bld-error-title{font-weight:700;margin:0 0 .3rem;color:var(--fcc-text);}
.bld-error-body{margin:0;color:var(--fcc-text);}
/* fatal() moves keyboard focus here (tabindex="-1") so the failure is
   announced and visibly landed-on, not just technically present in the DOM. */
.bld-error:focus{outline:2px solid var(--fcc-accent-2);outline-offset:2px;}

.bld-summary-other{margin-top:.5rem;font-size:.78rem;color:var(--fcc-text-mute);
  border-top:1px dotted var(--fcc-border);padding-top:.5rem;}

/* ---- FIX 3: sticky mobile size-estimate bar ----
   The full estimate lives in .bld-summary, which is sticky at >=900px
   (see .bld-layout above) but simply falls to the bottom of the DOM below
   900px, under all 5 steps -- useless for stopping an oversized build
   before a parent taps it. This condensed bar duplicates just the size +
   warning, pinned to the top of the viewport, ONLY below 900px so it never
   doubles up with the sidebar on desktop. */
.bld-sticky-bar{display:none;}
@media (max-width:899px){
  .bld-sticky-bar[data-show="1"]{
    display:block;position:sticky;top:0;z-index:45;
    background:var(--fcc-bg-raised);border-bottom:1px solid var(--fcc-border);
    padding:.5rem .9rem;box-shadow:0 2px 8px rgba(0,0,0,.1);
  }
  .bld-sticky-inner{display:flex;align-items:baseline;justify-content:space-between;
    gap:.5rem;flex-wrap:wrap;}
  .bld-sticky-grade{font-size:.76rem;color:var(--fcc-text-mute);font-weight:600;}
  .bld-sticky-size{font-family:Georgia,serif;font-weight:700;color:var(--fcc-accent);
    font-size:1.05rem;white-space:nowrap;}
  .bld-sticky-warn{margin:.35rem 0 0;font-size:.72rem;line-height:1.4;padding:.35rem .55rem;
    border-radius:6px;background:var(--fcc-have-bg);border:1px solid var(--fcc-have-border);}
}

@media (max-width:480px){
  .bld-step{padding:.9rem .85rem 1.05rem;}
}