/* ==========================================================================
   FANG FUTURES — AI Strategy Adoption Scorecard (a tool page under Reinvent work)
   Sits on offering.css and principles.css: the 10 Principles page's Void hero
   and references list come from there unchanged. This file adds the tool in the
   reading column: a light lead with the short accent rule, mono numerals in a
   narrow left column, hairline rows, quiet text links. A survey, at reading size.
   ========================================================================== */

/* --- the screens: one shows at a time --------------------------------------- */
.sc-screen{display:grid;gap:clamp(22px,3vh,32px);scroll-margin-top:120px}
.sc-screen[hidden],.sc [hidden]{display:none!important}   /* .text-link and friends set display; hidden must still win */
.sc-screen.is-entering{animation:sc-in .45s var(--ease-out)}
@keyframes sc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sc-screen :focus:not(:focus-visible){outline:0}   /* headings take focus for screen readers; no ring for the mouse */
.sc-head{display:grid;gap:var(--space-3)}
.sc .sc-title{font-weight:900;font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.12;letter-spacing:-.015em;text-wrap:balance}   /* the principle-title size; .sc outranks offering.css's .o-chapter h2 */
.sc-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-6);margin-top:var(--space-2)}
.sc-nav{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3) var(--space-6)}
.sc .text-link{font-size:var(--text-sm)}
.sc-btn{padding:15px 28px;font-size:var(--text-sm)}   /* the site's gold button, a size down: a tool, not a campaign */
.sc-fine{font-size:var(--text-sm);line-height:1.55;color:var(--fg2);max-width:60ch}
.sc-fine a,.sc-report a{color:var(--fg1);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:1.5px}
.sc-fine a:hover,.sc-report a:hover{text-decoration-color:var(--fg1)}

/* --- the questions: a numbered row, like a principle --------------------------- */
.sc-progress{height:2px;background:var(--hairline)}
.sc-progress i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--accent);transition:width var(--dur-slow) var(--ease-out)}
.sc-step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--space-4)}
.sc-num{font-family:var(--font-mono);font-size:var(--text-chapter-tag);font-weight:500;letter-spacing:.22em;color:var(--accent);padding-top:.3em}
.sc-step-body{display:grid;gap:var(--space-4)}
.sc-count{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3)}
.sc .sc-q{font-weight:600;font-size:clamp(1.12rem,1.35vw,1.3rem);line-height:1.4;letter-spacing:-.005em;color:var(--fg1);text-wrap:pretty;max-width:46ch}
.sc-opts{display:grid;border-top:var(--border-hair);margin-top:var(--space-2)}
.sc-opt{display:grid;grid-template-columns:18px minmax(0,1fr);gap:16px;align-items:baseline;width:100%;text-align:left;padding:15px 12px 15px 4px;border-bottom:var(--border-hair);color:var(--fg2);font-weight:300;font-size:clamp(16px,1.15vw,17px);line-height:1.5;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.sc-opt::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid var(--hairline-strong);transform:translateY(3px);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
@media (hover:hover){ .sc-opt:hover{color:var(--fg1);background:rgba(29,29,29,.025)} .sc-opt:hover::before{border-color:var(--fg1)} }
.sc-opt:focus-visible{color:var(--fg1);background:rgba(29,29,29,.025)}
.sc-opt[aria-pressed="true"]{color:var(--fg1)}
.sc-opt[aria-pressed="true"]::before{border-color:var(--fg1);background:var(--accent);box-shadow:inset 0 0 0 3px var(--bg)}   /* a filled radio: gold dot inside the ring */
.sc-step .sc-nav{margin-top:var(--space-3)}

/* --- the chart: spider (default) or bars, the reader's choice ---------------------- */
.sc-chart{display:grid;gap:var(--space-3);margin:0}
.sc-chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding-bottom:10px;border-bottom:var(--border-hair)}
.sc-chart-cap{font-size:var(--text-sm);line-height:1.5;color:var(--fg2)}
.sc-view{display:flex;gap:4px;flex:none}
.sc-view button{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);padding:4px 8px;border-bottom:1.5px solid transparent;transition:color var(--dur-fast) var(--ease-standard)}
.sc-view button:hover{color:var(--fg1)}
.sc-view button[aria-pressed="true"]{color:var(--fg1);border-bottom-color:var(--accent)}

/* spider */
.sc-spider{display:block;width:100%;max-width:560px;height:auto;margin:var(--space-2) auto 0;overflow:visible}
.sc-spider .grid{fill:none;stroke:var(--hairline);stroke-width:1}
.sc-spider .grid.outer{stroke:var(--hairline-strong)}
.sc-spider .axis{stroke:var(--hairline);stroke-width:1}
.sc-spider .tick{font-family:var(--font-mono);font-size:10px;fill:var(--fg3)}
.sc-spider .shape{fill:rgba(29,29,29,.06);stroke:var(--fg1);stroke-width:1.5;stroke-linejoin:round;transform-origin:var(--cx) var(--cy);animation:sc-bloom .7s var(--ease-out) both}
@keyframes sc-bloom{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
.sc-spider .dot{fill:var(--fg1);stroke:var(--bg);stroke-width:2}
.sc-spider .dot.low{fill:var(--orange-500)}
.sc-spider .name{font-family:var(--font-sans);font-size:14px;font-weight:600;fill:var(--fg1)}

/* bars: one hairline row per dimension, a slim bar on a 0-5 track */
.sc-rows{display:grid}
.sc-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) 40px 88px;gap:var(--space-4);align-items:center;padding:13px 0;border-bottom:var(--border-hair)}
.sc-dim{font-size:var(--text-base);line-height:1.35;color:var(--fg1);text-wrap:balance}
/* the track: hairline ticks where Gap becomes Developing (2.3) and Developing becomes Strength (3.7) */
.sc-track{position:relative;height:6px;background:linear-gradient(to right,transparent calc(46% - .5px),var(--hairline-strong) calc(46% - .5px),var(--hairline-strong) calc(46% + .5px),transparent calc(46% + .5px),transparent calc(74% - .5px),var(--hairline-strong) calc(74% - .5px),var(--hairline-strong) calc(74% + .5px),transparent calc(74% + .5px)),var(--sand-50)}
.sc-track i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v,0) * 100%);background:var(--fg1);border-radius:0 3px 3px 0;transform-origin:left;animation:sc-grow .7s var(--ease-out) both}
@keyframes sc-grow{from{transform:scaleX(0)}to{transform:none}}
.sc-row.is-low .sc-track i{background:var(--orange-500)}
.sc-score{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--fg1);font-variant-numeric:tabular-nums;text-align:right}
.sc-band{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)}
/* under the spider: the same rows as a plain table, no bars */
.sc-rows.is-table{border-top:var(--border-hair);margin-top:var(--space-3)}
.sc-rows.is-table .sc-row{grid-template-columns:minmax(0,1fr) 40px 96px;padding:11px 0}
.sc-row.is-low .sc-dim::after{content:"";display:inline-block;width:7px;height:7px;margin-left:10px;border-radius:50%;background:var(--orange-500);vertical-align:.12em}   /* the same mark as the spider's weakest point */

/* findings: set like the references list, label in mono on the left */
.sc-findings{display:grid;margin:0;border-top:var(--border-hair)}
.sc-findings div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--space-4);padding:14px 0;border-bottom:var(--border-hair)}
.sc-findings dt{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding-top:.35em}
.sc-findings dd{margin:0;font-size:var(--text-base);line-height:1.55;color:var(--fg2)}
.sc-findings strong{font-weight:600;color:var(--fg1)}

/* the gate: an outlined card, like the Scorecard card on the 10 Principles page */
.sc-gate{display:grid;gap:var(--space-4);padding:clamp(24px,2.6vw,36px);margin-top:var(--space-3);border:1px solid var(--fg1);border-radius:var(--radius-soft)}
.sc-gate-title{font-weight:900;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.12;letter-spacing:-.012em}
.sc-gate-lede{font-size:var(--text-base);line-height:1.55;color:var(--fg2);max-width:54ch}
.sc-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-5);align-items:end;margin-top:var(--space-2)}
.sc-form .f{gap:6px}
.sc-form .f input{font-size:var(--text-base)}
.sc-form .btn{margin-bottom:calc(1.2em + 6px)}   /* level with the field's line, above its error slot */
.sc-note{font-size:var(--text-sm);line-height:1.5;color:var(--fg2);max-width:58ch}

/* --- the report: set like the principles themselves --------------------------------- */
.sc-meta{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}
.sc-loading{display:grid;gap:12px;padding:var(--space-4) 0;font-size:var(--text-base);color:var(--fg2)}
.sc-loading[hidden]{display:none}
.sc-loading i{display:block;height:2px;background:var(--hairline);position:relative;overflow:hidden}
.sc-loading i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:var(--accent);animation:sc-scan 1.4s var(--ease-standard) infinite}
@keyframes sc-scan{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.sc-report{display:grid}
.sc-report:empty{display:none}
.sc-report h3{font-weight:900;font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.15;letter-spacing:-.012em;text-wrap:balance;margin:clamp(28px,4vh,40px) 0 12px;padding-top:clamp(24px,3.4vh,34px);border-top:var(--border-hair)}
.sc-report h3:first-child{margin-top:0;padding-top:clamp(20px,3vh,28px)}
.sc-report p{margin:0 0 14px;font-size:clamp(17px,1.2vw,18px);line-height:1.65;color:var(--fg2);text-wrap:pretty}
.sc-report ul,.sc-report ol{display:grid;gap:10px;margin:2px 0 16px}
.sc-report li{position:relative;padding-left:24px;font-size:clamp(16px,1.15vw,17px);line-height:1.6;color:var(--fg2)}
.sc-report ul li::before{content:"";position:absolute;left:0;top:.8em;width:12px;height:1px;background:var(--fg3)}
.sc-report ol{counter-reset:sc}
.sc-report ol li{counter-increment:sc}
.sc-report ol li::before{content:counter(sc,decimal-leading-zero);position:absolute;left:0;top:.25em;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;color:var(--accent)}
.sc-report strong{font-weight:600;color:var(--fg1)}
.sc-report.is-writing>:last-child::after{content:"";display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-.15em;background:var(--accent);animation:sc-blink 1s steps(2) infinite}
@keyframes sc-blink{50%{opacity:0}}
.sc-status{display:grid;gap:8px;justify-items:start;padding:14px 0 14px 18px;border-left:2px solid var(--accent);font-size:var(--text-base);line-height:1.5;color:var(--fg2)}
.sc-status[hidden]{display:none}
.sc-sources{padding-top:var(--space-4)}   /* the references list from 10 Principles (offering.css .sources, principles.css .refs) */
.sc-after{display:grid;gap:var(--space-4);padding-top:var(--space-5);border-top:var(--border-hair)}
.sc-next{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;font-size:var(--text-base);color:var(--fg1)}
.sc-print-head{display:none}

@media (max-width:768px){
  .sc-step{grid-template-columns:1fr;gap:8px}
  .sc-num{display:none}   /* the count above the question carries it */
  .sc-row{grid-template-columns:minmax(0,1fr) auto 84px;gap:6px var(--space-3)}
  .sc-dim{grid-column:1/-1}
  .sc-rows.is-table .sc-row{grid-template-columns:minmax(0,1fr) 36px 88px}
  .sc-rows.is-table .sc-dim{grid-column:auto}
  .sc-band{letter-spacing:.06em}
  .sc-findings div{grid-template-columns:1fr;gap:4px}
  .sc-form{grid-template-columns:1fr}
  .sc-form .btn{margin-bottom:0;justify-self:start}
  .sc-spider .name{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .sc-screen.is-entering,.sc-track i,.sc-spider .shape,.sc-loading i::after,.sc-report.is-writing>:last-child::after{animation:none}
}

/* --- print / save as PDF: the report alone, on white ------------------------------ */
@media print{
  @page{margin:18mm 16mm}
  body{background:#fff;color:#000;font-size:11pt}
  .skip,.progress,.o-field,.bolt-cursor,.nav,.menu,.o-hero,.sc-noprint,.cta,.footer,.soon,.contact,.sc-screen:not(#scReport),.sc-loading,.sc-status,.sc-view{display:none!important}
  .o-body{background:#fff!important;padding:0}
  .o-col{max-width:none}
  .o-chapter{padding:0}
  .sc-print-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid #000;font-family:var(--font-mono);font-size:8pt;letter-spacing:.16em;text-transform:uppercase}
  .sc-print-head img{width:150px;height:auto}
  .sc-spider{max-width:420px}
  .sc-track,.sc-spider{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sc-track i,.sc-spider .shape{animation:none}
  .sc-report h3{break-after:avoid;page-break-after:avoid}
  .sc-report li,.sc-report p,.sc-chart{break-inside:avoid}
  .sc-sources a::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
  .sc-sources a[href^="/"]::after{content:" (fangfutures.com" attr(href) ")"}
}