/* RBX Growth Readiness Scorecard: components.
   Loads AFTER styles.css. Uses live brand tokens only (see rbx-tokens.css).
   New roles introduced here: bar track / fill / weak. No second accent. */

.sc{max-width:760px;margin:0 auto;padding:0 24px}
.sc-stage{min-height:60vh;display:flex;flex-direction:column;justify-content:center;padding:56px 0}

/* progress */
.sc-prog{position:sticky;top:0;z-index:20;background:var(--ink);padding:18px 0 14px;border-bottom:1px solid var(--line)}
.sc-prog .bar{height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.sc-prog .bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .35s ease}
.sc-prog .meta{display:flex;justify-content:space-between;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* question */
.sc-sec{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.sc-q{font-family:var(--display);font-size:clamp(24px,3.4vw,34px);line-height:1.25;margin:0 0 28px;color:var(--text)}
.sc-opts{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.sc-opt{display:flex;gap:16px;align-items:flex-start;text-align:left;width:100%;padding:16px 18px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-md,4px);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.5;cursor:pointer;transition:border-color .18s,background .18s}
.sc-opt:hover{border-color:rgba(43,226,194,.5);background:var(--surface)}
.sc-opt[aria-checked="true"]{border-color:var(--accent);background:var(--surface)}
.sc-opt .n{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:16px;padding-top:2px}
.sc-opt[aria-checked="true"] .n{color:var(--accent)}

/* "what I usually see" */
.sc-see{border-left:2px solid var(--line);padding:12px 0 12px 16px;margin-bottom:30px;color:var(--muted);font-size:14px;line-height:1.65}
.sc-see b{color:var(--text);font-weight:600}

.sc-nav{display:flex;gap:12px;align-items:center}
.sc-back{background:none;border:0;color:var(--muted);font-family:var(--mono);font-size:12px;cursor:pointer;padding:8px 0}
.sc-back:hover{color:var(--text)}

/* result */
.sc-score{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.sc-score .big{font-family:var(--display);font-size:clamp(56px,9vw,88px);line-height:1;color:var(--accent)}
.sc-score .of{font-family:var(--mono);font-size:16px;color:var(--muted)}
.sc-band{font-family:var(--display);font-size:24px;margin:0 0 12px;color:var(--text)}
.sc-bandcopy{color:var(--muted);font-size:16px;line-height:1.7;margin-bottom:8px}
.sc-start{border:1px solid var(--line);border-left:2px solid var(--accent);background:var(--ink-2);padding:14px 18px;border-radius:var(--r-sm,3px);margin:22px 0 34px;font-size:15px;color:var(--text)}
.sc-start b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}

/* dimension bars: accent = present, empty track = the gap. No alert colour. */
.sc-dims{display:flex;flex-direction:column;gap:18px;margin-bottom:34px}
.sc-dim .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.sc-dim .name{font-size:15px;color:var(--text)}
.sc-dim .val{font-family:var(--mono);font-size:12px;color:var(--muted)}
.sc-dim .track{height:8px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.sc-dim .fill{display:block;height:100%;width:0;background:var(--accent);border-radius:2px;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.sc-dim.weak .fill{background:rgba(255,255,255,.22)}
.sc-dim.weak .name:after{content:" · your leak";font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
@media (prefers-reduced-motion:reduce){.sc-dim .fill,.sc-prog .bar i{transition:none}}

/* full read-out */
.sc-readout{display:block}
.sc-ro{border-top:1px solid var(--line);padding:22px 0}
.sc-ro h4{font-family:var(--display);font-size:18px;margin:0 0 4px;display:flex;justify-content:space-between;align-items:baseline}
.sc-ro h4 span{font-family:var(--mono);font-size:12px;color:var(--muted)}
.sc-ro .typ{font-family:var(--mono);font-size:11px;color:var(--accent);margin-bottom:8px}
.sc-ro p{color:var(--muted);font-size:15px;line-height:1.7;margin:0}

/* bridge */
.sc-bridge{border:1px solid var(--line);border-radius:var(--r-md,4px);background:var(--ink-2);padding:32px;margin-top:40px;margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}
.sc-bridge h3{font-family:var(--display);font-size:clamp(22px,3vw,28px);margin:0 0 14px}
.sc-bridge p{color:var(--muted);font-size:15px;line-height:1.75;margin-bottom:14px}
.sc-bridge .small{font-family:var(--mono);font-size:11px;color:var(--muted);margin:18px 0 22px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Server-rendered benchmark. Real content and a real table: this is the only original
   data on the site and AI crawlers do not run JS. */
#sc-benchmark{border-top:1px solid var(--line)}
.sc-table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:8px}
.sc-table caption{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-bottom:10px}
.sc-table th,.sc-table td{text-align:left;padding:12px 14px 12px 0;border-top:1px solid var(--line);vertical-align:top}
.sc-table thead th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-top:none}
.sc-table tbody th{color:var(--text);font-weight:600;white-space:nowrap;padding-right:20px}
.sc-table td:nth-child(2){font-family:var(--mono);color:var(--accent);white-space:nowrap;padding-right:20px}
.sc-table td:nth-child(3){color:var(--muted);line-height:1.6}
.sc-table tr.tot th,.sc-table tr.tot td{border-top:1px solid var(--accent);color:var(--text)}
.sc-ref{border-top:1px solid var(--line);padding:22px 0}
.sc-ref h3{font-family:var(--display);font-size:17px;margin:6px 0 12px;line-height:1.4}
.sc-ref-opts{list-style:none;padding:0;margin:0 0 14px}
.sc-ref-opts li{display:flex;gap:12px;color:var(--muted);font-size:14px;line-height:1.6;padding:5px 0}
.sc-ref-opts .n{font-family:var(--mono);font-size:11px;color:var(--muted);padding-top:3px;flex-shrink:0}
.sc-ref-see{color:var(--muted);font-size:14px;line-height:1.7;border-left:2px solid var(--accent);padding-left:14px}
.sc-ref-see b{color:var(--text)}
@media(max-width:600px){
  .sc-table thead{position:absolute;left:-9999px}
  .sc-table tbody th,.sc-table td{display:block;padding:4px 0;border-top:none}
  .sc-table tbody tr{display:block;border-top:1px solid var(--line);padding:14px 0}
  .sc-table tr.tot{border-top:1px solid var(--accent)}
}

.sc-bridge-stage{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}

/* The ask, placed where the leak lands. Same door as the bridge, earlier. */
.sc-cta{display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border:1px solid var(--line);border-left:2px solid var(--accent);background:var(--ink-2);
  border-radius:var(--r-sm,3px);padding:18px 20px;margin:0 0 34px}
.sc-cta-t{color:var(--text);font-size:15px;line-height:1.6;flex:1;min-width:220px}
.sc-cta .btn{flex-shrink:0}
@media(max-width:600px){.sc-cta .btn{width:100%;justify-content:center}}

/* Enquiry, in place, carrying the result. */
.sc-enquiry{border:1px solid var(--line);background:var(--ink-2);border-radius:0 0 var(--r-md,4px) var(--r-md,4px);padding:28px;margin-top:0;scroll-margin-top:90px}
.sc-enquiry h3{font-family:var(--display);font-size:22px;margin:12px 0 8px}
.sc-enquiry p{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:18px}
.sc-enq-ctx{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:var(--r-sm,3px);padding:12px 14px;margin-bottom:20px;line-height:1.9}
.sc-enq-ctx b{color:var(--text);font-weight:500}

/* Questions stay in the HTML for crawlers, collapsed for humans. */
.sc-qs{margin-top:44px;border-top:1px solid var(--line);padding-top:22px}
.sc-qs>summary{cursor:pointer;font-family:var(--display);font-size:18px;color:var(--text);list-style:none;display:flex;align-items:center;gap:10px}
.sc-qs>summary::-webkit-details-marker{display:none}
.sc-qs>summary:before{content:"+";font-family:var(--mono);color:var(--accent);font-size:16px}
.sc-qs[open]>summary:before{content:"\2212"}
.sc-qs>summary:hover{color:var(--accent)}

/* The call, offered at the decision point rather than as a footnote. */
.sc-alt{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.sc-alt span{color:var(--muted);font-size:14px}
@media(max-width:600px){.sc-alt{flex-direction:column;align-items:stretch}.sc-alt .btn{justify-content:center}}

/* Inline booking. They pick a time here, not on a Google tab. */
.sc-cal{margin-top:18px}
.sc-cal .btn{margin-bottom:10px}
.sc-cal-fb{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:10px}
.sc-cal-fb a{color:var(--accent)}
.field label .opt{font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:none;letter-spacing:0;margin-left:6px;opacity:.8}