/* ==========================================================================
   SUPPLY-BUILD CANADA — SKILLS GAP SCORECARD
   Companion stylesheet for scorecard.html
   Breakpoints match responsive_supply.css (1199 / 991 / 767 / 575).
   Buttons reuse the site classes .btn .btnGold.
   ========================================================================== */

/* Site-wide clearfix rules (.row:before/:after and similar) turn into real
   grid/flex items inside these containers, adding a phantom cell that pushes
   everything along. Neutralized here. */
.sbc-grid::before,.sbc-grid::after,
.sbc-roles::before,.sbc-roles::after,
.sbc-opts::before,.sbc-opts::after,
.sbc-q-head::before,.sbc-q-head::after,
.sbc-gaprow::before,.sbc-gaprow::after,
.sbc-scorerow::before,.sbc-scorerow::after{content:none;display:none}

.sbc-sc{max-width:1160px;margin:0 auto;padding:28px 24px 60px;font-family:'breton-regular',sans-serif;color:#330a2b}
.sbc-sc h2{font-family:'breton-bold',serif;font-size:43px;line-height:48px;margin:0 0 14px}
.sbc-lede{font-size:21px;line-height:29px;margin:0 0 30px;max-width:62ch}

.sbc-grid{display:grid;grid-template-columns:1fr 380px;gap:34px;align-items:start}

/* ---------- Role picker ---------- */
.sbc-rolewrap{border-top:1px solid #e8ded6;padding-top:24px;margin-bottom:30px}
.sbc-rolewrap-title{font-family:'breton-semibold',sans-serif;font-size:19px;line-height:25px;margin-bottom:4px}
.sbc-note{font-size:15px;line-height:21px;color:#6b6070}
.sbc-rolewrap .sbc-note{margin-bottom:14px}
.sbc-roles{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:row;gap:10px}
.sbc-role{width:100%;box-sizing:border-box;text-align:left;cursor:pointer;border-radius:0;padding:13px 14px;background:#fff;border:1px solid #cfc4bb}
.sbc-role:hover{border-color:#471fb0}
.sbc-role.is-on{border:2px solid #471fb0;padding:12px 13px}
.sbc-role-name{display:block;font-family:'breton-semibold',sans-serif;font-size:17px;line-height:22px;margin-bottom:3px}
.sbc-role-note{display:block;font-size:14px;line-height:19px;color:#6b6070}

/* ---------- Questions ---------- */
.sbc-q{border-top:1px solid #e8ded6;padding:22px 0 4px}
.sbc-q-head{display:flex;gap:12px;align-items:baseline;margin-bottom:4px}
.sbc-q-num{font-family:'breton-bold',serif;font-size:17px;color:#471fb0;min-width:26px}
.sbc-q-text{font-family:'breton-semibold',sans-serif;font-size:20px;line-height:27px}
.sbc-q-area{font-size:15px;line-height:21px;color:#6b6070;margin:0 0 14px 38px}
.sbc-opts{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:row;gap:8px;margin-left:38px;margin-bottom:20px}
.sbc-opt{width:100%;box-sizing:border-box;text-align:left;cursor:pointer;border-radius:0;padding:11px 13px;font-family:'breton-regular',sans-serif;font-size:16px;line-height:22px;background:#fff;color:#330a2b;border:1px solid #cfc4bb}
.sbc-opt:hover{border-color:#471fb0}
.sbc-opt.is-on{background:#330a2b;color:#fff;border-color:#330a2b}

/* ---------- Side panel ---------- */
.sbc-side{position:sticky;top:20px}

.sbc-progress{background:#e8ded6;padding:26px 26px 28px}
.sbc-eyebrow-purple{font-family:'breton-semibold',sans-serif;font-size:15px;line-height:20px;letter-spacing:.14em;text-transform:uppercase;color:#471fb0;margin-bottom:12px}
.sbc-bar{height:6px;background:#fff;margin-bottom:18px}
.sbc-bar span{display:block;height:6px;background:#471fb0;width:0}
.sbc-progress p{font-size:17px;line-height:24px;margin:0}

.sbc-headline{background:#330a2b;padding:30px 28px}
.sbc-eyebrow-gold{font-family:'breton-semibold',sans-serif;font-size:15px;line-height:20px;letter-spacing:.14em;text-transform:uppercase;color:#faa82b;margin-bottom:14px}
.sbc-scorerow{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.sbc-score{font-family:'breton-bold',serif;font-size:56px;line-height:58px;color:#faa82b}
.sbc-outof{font-family:'breton-semibold',sans-serif;font-size:21px;color:#e8ded6}
.sbc-band{font-family:'breton-semibold',sans-serif;font-size:23px;line-height:30px;color:#fff;margin-bottom:12px}
.sbc-bandnote{font-size:17px;line-height:24px;color:#e8ded6;margin:0}

.sbc-detail{border:1px solid #330a2b;border-top:none;padding:26px 28px}
.sbc-detail .sbc-eyebrow-purple{margin-bottom:16px}
.sbc-topgap{font-family:'breton-bold',serif;font-size:27px;line-height:33px;margin-bottom:8px}
.sbc-topgap-note{font-size:17px;line-height:24px;margin:0 0 20px}

.sbc-gaps{border-top:1px solid #e8ded6;padding-top:18px;margin-bottom:22px}
.sbc-gaprow{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:7px 0}
.sbc-gapname{font-size:17px;line-height:23px}
.sbc-gapstatus{font-family:'breton-semibold',sans-serif;font-size:15px}
.sbc-gaprow.is-weak .sbc-gapname,.sbc-gaprow.is-weak .sbc-gapstatus{color:#471fb0}
.sbc-gaprow.is-mid .sbc-gapname,.sbc-gaprow.is-mid .sbc-gapstatus{color:#330a2b}
.sbc-gaprow.is-ok .sbc-gapname,.sbc-gaprow.is-ok .sbc-gapstatus{color:#6b6070}

.sbc-teaser{background:#f7f4f1;padding:20px 20px 22px;margin-bottom:20px}
.sbc-teaser-head{font-family:'breton-semibold',sans-serif;font-size:19px;line-height:26px;margin-bottom:8px}
.sbc-teaser p{font-size:16px;line-height:23px;margin:0;color:#6b6070}

/* ---------- Email step ---------- */
.sbc-sc label{display:block;font-family:'breton-semibold',sans-serif;font-size:17px;line-height:23px;margin-bottom:7px}
.sbc-sc input[type=email],.sbc-sc input[type=text]{-webkit-appearance:none;width:100%;box-sizing:border-box;font-family:'breton-regular',sans-serif;font-size:19px;padding:13px 15px;border:1px solid #330a2b;border-radius:0;background:#fff;color:#330a2b;margin-bottom:12px}
.sbc-sc input[type=text]+label,.sbc-sc input[type=email]+label{margin-top:4px}
.sbc-sc .btn{display:block;width:100%;box-sizing:border-box;text-align:center;cursor:pointer}
.sbc-sc .btn[disabled]{opacity:.6;cursor:default}
.sbc-err{font-size:15px;line-height:21px;color:#471fb0;margin:0 0 12px}

.sbc-nomail{border-left:3px solid #faa82b;padding:12px 0 12px 14px;margin-top:14px}
.sbc-nomail-head{font-family:'breton-semibold',sans-serif;font-size:16px;line-height:22px;margin-bottom:5px}
.sbc-nomail p{font-size:15px;line-height:21px;color:#6b6070;margin:0}

.sbc-thanks{background:#e8ded6;padding:20px}
.sbc-thanks-head{font-family:'breton-semibold',sans-serif;font-size:19px;line-height:26px;margin-bottom:8px}
.sbc-thanks p{font-size:16px;line-height:23px;margin:0 0 12px}
.sbc-thanks strong{font-family:'breton-semibold',sans-serif}
.sbc-thanks .sbc-note{margin:0 0 12px}
.sbc-thanks a{font-family:'breton-semibold',sans-serif;font-size:17px;line-height:24px}

.sbc-foot{border-top:1px solid #e8ded6;margin-top:20px;padding-top:16px;font-size:15px;line-height:21px;color:#6b6070}
.sbc-restart{display:block;width:100%;box-sizing:border-box;text-align:center;margin-top:12px;background:none;border:none;font-family:'breton-semibold',sans-serif;font-size:16px;color:#471fb0;cursor:pointer;padding:10px}

.sbc-hidden{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1199px){
  .sbc-grid{grid-template-columns:1fr 330px;gap:26px}
}
@media (max-width:991px){
  .sbc-grid{grid-template-columns:1fr;gap:28px}
  .sbc-side{position:static}
}
@media (max-width:767px){
  .sbc-sc h2{font-size:30px;line-height:35px}
  .sbc-lede{font-size:19px;line-height:26px}
  .sbc-opts{grid-template-columns:1fr 1fr}
  .sbc-roles{grid-template-columns:1fr 1fr}
}
@media (max-width:575px){
  .sbc-sc h2{font-size:25px;line-height:30px}
  .sbc-opts{grid-template-columns:1fr;margin-left:0}
  .sbc-q-area{margin-left:0}
  .sbc-score{font-size:46px;line-height:50px}
}


.sbc-grid::before,.sbc-grid::after,
.sbc-roles::before,.sbc-roles::after,
.sbc-opts::before,.sbc-opts::after,
.sbc-q-head::before,.sbc-q-head::after,
.sbc-gaprow::before,.sbc-gaprow::after,
.sbc-scorerow::before,.sbc-scorerow::after{content:none !important;display:none !important}
.sbc-roles{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:10px}
.sbc-opts{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:8px}
.sbc-roles>*:nth-child(1),.sbc-opts>*:nth-child(1){grid-column:1;grid-row:1}
.sbc-roles>*:nth-child(2),.sbc-opts>*:nth-child(2){grid-column:2;grid-row:1}
.sbc-roles>*:nth-child(3),.sbc-opts>*:nth-child(3){grid-column:3;grid-row:1}
.sbc-roles>*:nth-child(4),.sbc-opts>*:nth-child(4){grid-column:4;grid-row:1}
@media (max-width:767px){
  .sbc-roles,.sbc-opts{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .sbc-roles>*:nth-child(1),.sbc-opts>*:nth-child(1){grid-column:1;grid-row:1}
  .sbc-roles>*:nth-child(2),.sbc-opts>*:nth-child(2){grid-column:2;grid-row:1}
  .sbc-roles>*:nth-child(3),.sbc-opts>*:nth-child(3){grid-column:1;grid-row:2}
  .sbc-roles>*:nth-child(4),.sbc-opts>*:nth-child(4){grid-column:2;grid-row:2}
}
@media (max-width:575px){
  .sbc-opts{grid-template-columns:minmax(0,1fr) !important}
  .sbc-opts>*:nth-child(1){grid-column:1;grid-row:1}
  .sbc-opts>*:nth-child(2){grid-column:1;grid-row:2}
  .sbc-opts>*:nth-child(3){grid-column:1;grid-row:3}
  .sbc-opts>*:nth-child(4){grid-column:1;grid-row:4}
}