/* datasheet.html - product datasheet components. Depends on home.css tokens. */

.ds-main{max-width:none}
/* Text blocks span the same width as tables and code blocks, justified so
   both edges line up - the datasheet look. Narrow components (callouts,
   cards) opt back out below. */
.ds-main p,.ds-main ul,.ds-main ol,.ds-main .doc-sub{max-width:none}
.ds-main p{text-align:justify}
.ds-main .ds-callout .c-txt{text-align:start;max-width:24ch}
.ds-main .ds-card p,.ds-main .ds-stage p,.ds-main .ds-product li{text-align:start}
.ds-main .doc-foot{text-align:start}

/* The API manual uses the same full-width editorial system as the other
   datasheet pages. Only dense technical surfaces need local readability rules. */
.api-manual .doc-table{
  width:100%;table-layout:auto;
  font-size:15px;line-height:1.62;
}
.api-manual .doc-table th{padding:11px 16px 11px 0;font-size:11px;line-height:1.4}
.api-manual .doc-table td{padding:14px 16px 14px 0}
.api-manual .doc-table td:first-child{font-size:13px;line-height:1.55;white-space:normal}
.api-manual .api-endpoints-table{table-layout:fixed}
.api-manual .api-endpoints-table th:first-child,
.api-manual .api-endpoints-table td:first-child{width:29%}
.api-manual .api-endpoints-table th:nth-child(2),
.api-manual .api-endpoints-table td:nth-child(2){width:13%}
.api-manual .api-mechanisms-table{table-layout:fixed}
.api-manual .api-mechanisms-table th:first-child,
.api-manual .api-mechanisms-table td:first-child{width:24%}
.api-manual .api-mechanisms-table th:nth-child(2),
.api-manual .api-mechanisms-table td:nth-child(2){width:34%}
.api-manual .api-errors-table{table-layout:fixed}
.api-manual .api-errors-table th:first-child,
.api-manual .api-errors-table td:first-child{width:10%}
.api-manual .api-errors-table th:nth-child(2),
.api-manual .api-errors-table td:nth-child(2){width:45%}
.api-manual .doc-table code{overflow-wrap:anywhere;word-break:normal}
.api-manual code{
  font-size:.88em;line-height:inherit;padding:2px 5px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.api-manual pre{
  width:100%;max-width:none;box-sizing:border-box;
  padding:20px 22px;font-size:13.5px;line-height:1.7;
  overflow-x:hidden;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;
}
.api-manual .doc-note{max-width:none;padding:16px 18px;font-size:15px;line-height:1.65}
.api-manual a{text-decoration-thickness:1px;text-underline-offset:3px}
.api-manual ::selection{background:var(--danger-wash);color:var(--ink)}

/* section label pill: ● THE CHALLENGE -------- */
.ds-label{
  display:flex;align-items:center;gap:14px;margin:36px 0 16px;
  scroll-margin-top:24px;
}
.ds-label span{
  background:var(--sov);color:#FFFFFF;font-family:var(--mono);
  font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 16px;border-radius:999px;white-space:nowrap;
}
.ds-label::after{content:"";flex:1;height:1px;background:var(--ink)}

/* two-column prose */
.ds-cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px}
.ds-cols2 p{margin-top:0}

/* solution: text left, funnel right */
.ds-solution{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px;align-items:start}
.ds-solution .ds-kicker{
  font-family:var(--mono);font-size:17px;font-weight:600;color:var(--ink);
  line-height:1.45;margin:0 0 6px;
}
.ds-solution ul{margin-top:10px}

/* funnel */
.ds-funnel-wrap{display:grid;grid-template-columns:1fr;gap:14px;justify-items:center}
.funnel{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}
.f-seg{
  clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,22px 100%);
  text-align:center;padding:10px 30px 12px;
}
.f-seg .f-num{font-family:var(--sans);font-weight:800;font-size:21px;color:var(--ink);letter-spacing:-.01em}
.f-seg .f-lbl{font-family:var(--mono);font-size:11px;color:var(--ink-soft);letter-spacing:.03em;margin-top:1px}
.f-1{width:100%;background:var(--band)}
.f-2{width:76%;background:#E7E8EA}
.f-3{width:54%;background:#D5D7DA}
.f-3 .f-num{font-size:18px}
.f-tip{
  width:34%;height:30px;background:var(--danger);
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.f-exit{text-align:center}
.f-exit .f-num{font-family:var(--sans);font-weight:800;font-size:24px;color:var(--danger)}
.f-exit .f-lbl{font-family:var(--mono);font-size:11.5px;color:var(--danger-ink);letter-spacing:.03em}

/* callouts flanking the funnel */
.ds-callouts{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:18px}
.ds-callout{border-inline-start:3px solid var(--danger);padding:2px 0 2px 14px}
.ds-callout .c-num{font-family:var(--sans);font-weight:800;font-size:34px;color:var(--danger);line-height:1}
.ds-callout .c-txt{font-size:13px;color:var(--ink-soft);line-height:1.5;margin-top:5px;max-width:24ch}
.ds-callout .c-txt b{color:var(--ink)}

/* use-case cards */
.ds-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.ds-card{padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.ds-card h3{font-family:var(--sans);font-weight:800;font-size:15px;color:var(--ink);margin:0}
.ds-card h3::after{content:"";display:block;width:22px;height:2px;background:var(--danger);margin-top:6px}
.ds-card p{font-size:13.5px;line-height:1.6;margin-top:9px}

/* big stat band */
.ds-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:10px;
}
/* Separators are the grid gap showing through, not borders on each tile. Every
   nth-child variant here encoded the column count, so it had to be recomputed
   for 4 tiles, again for 8, and separately inside the 760px breakpoint where
   the grid drops to 2 columns — the 8-tile bottom-border rule was already wrong
   there. Gap-as-rule is agnostic to both counts and needs no rule at all. */
.ds-stat{padding:22px 20px 24px;background:var(--paper)}
.ds-stat .s-num{font-family:var(--sans);font-weight:800;font-size:clamp(26px,3.4vw,40px);color:var(--ink);letter-spacing:-.02em;line-height:1}
.ds-stat .s-txt{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);line-height:1.5;margin-top:9px}

/* maturity ladder stages */
.ds-stages{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 40px;margin-top:6px}
.ds-stage h3{font-family:var(--sans);font-weight:800;font-size:15px;color:var(--ink);margin:0}
.ds-stage h3 .st-n{color:var(--danger);font-family:var(--mono);font-weight:600;margin-right:6px}
.ds-stage p{font-size:13.5px;line-height:1.6;margin-top:8px}
.ds-stage .st-tag{
  display:inline-block;margin-top:9px;font-family:var(--mono);font-size:10.5px;
  font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--danger-ink);
}
.ds-stage h3 .st-accent{color:var(--danger-ink)}

/* product columns */
.ds-products{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:6px}
.ds-product{border-top:3px solid var(--sov);padding-top:12px}
.ds-product h3{font-family:var(--sans);font-weight:800;font-size:14px;color:var(--ink);margin:0;line-height:1.35}
.ds-product ul{margin:10px 0 0 16px;font-size:12.5px;line-height:1.55}
.ds-product li{margin-top:4px}

/* plan matrix: feature rows × tier columns, Pro column highlighted */
.plan-matrix th{text-align:center;font-size:12px;color:var(--ink)}
.plan-matrix th:first-child{text-align:left}
.plan-matrix td{text-align:center;white-space:nowrap}
.plan-matrix td:first-child{
  font-family:inherit;font-size:13.5px;color:var(--ink-soft);
  text-align:left;white-space:normal;padding-inline-end:20px;
}
/* Five columns do not fit a phone. Scroll the TABLE inside its own box so the
   page body never scrolls sideways. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px}
.table-scroll .doc-table{margin-top:0;min-width:640px}

/* Outcome tables: the answer stays first and urgency uses the existing Harpia
   ink/orange tokens. Reusable by any datasheet with decision or SLA rows. */
.outcome-table td:first-child{font-family:var(--sans);font-weight:700;color:var(--ink)}
.outcome-table tr.priority-immediate td:first-child,.outcome-table tr.deadline-3 td:first-child{color:var(--danger);border-inline-start:3px solid var(--danger);padding-inline-start:9px}
.outcome-table tr.priority-ooc td:first-child,.outcome-table tr.deadline-14 td:first-child{color:var(--danger-ink);border-inline-start:3px solid var(--danger-ink);padding-inline-start:9px}
.outcome-table tr.priority-scheduled td:first-child,.outcome-table tr.deadline-60 td:first-child{color:var(--ink);border-inline-start:3px solid var(--ink);padding-inline-start:9px}
.outcome-table tr.priority-defer td:first-child,.outcome-table tr.deadline-upgrade td:first-child{color:var(--ink-mute);border-inline-start:3px solid var(--ink-mute);padding-inline-start:9px}
.bod-reference-table tbody tr:nth-child(4n){border-bottom:2px solid var(--ink)}

/* Two-budget explainer above the plans table — the model has to be stated once
   in plain words, or the numbers in the table read as contradictory. */
.budget-note{
  margin-top:18px;padding:16px 18px;border:1px solid var(--line);
  border-left:3px solid var(--danger);border-radius:var(--radius);
  background:var(--band);
}
.budget-note p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.budget-note p + p{margin-top:10px}
.budget-note b{color:var(--ink)}
.budget-note a{color:var(--danger);font-weight:600;text-decoration:none}
.budget-note a:hover{text-decoration:underline}

.plan-matrix .pm-pro{background:var(--band)}
/* Qualifier on a limit row label - the plan meters browsing and API keys
   separately, so each cap has to say which one it bounds. */
.plan-matrix .pm-note{
  display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.02em;text-transform:none;color:var(--ink-faint);margin-top:2px;
}
.plan-matrix .pm-group td{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--danger-ink);text-align:left;
  padding-top:18px;border-bottom:1px solid var(--ink);background:none;
}

/* CTA band */
.ds-cta{
  margin-top:40px;background:var(--sov);border-radius:18px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:24px 30px;flex-wrap:wrap;
}
.ds-cta .cta-txt{font-family:var(--mono);font-size:15px;color:var(--sov-ink);margin:0}
.ds-cta .cta-txt b{color:#FF8A5E}
.ds-cta .cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.ds-cta a{
  font-family:var(--mono);font-size:13px;font-weight:600;text-decoration:none;
  padding:9px 20px;border-radius:var(--radius);white-space:nowrap;
}
.ds-cta a.cta-primary{background:var(--danger);color:#FFFFFF}
.ds-cta a.cta-primary:hover{background:#D14A24;text-decoration:none}
.ds-cta a.cta-ghost{border:1px solid var(--sov-line);color:var(--sov-ink)}
.ds-cta a.cta-ghost:hover{border-color:var(--sov-ink);text-decoration:none}

@media (max-width:760px){
  .ds-cols2,.ds-solution,.ds-callouts,.ds-stages{grid-template-columns:1fr}
  .ds-cards{grid-template-columns:1fr 1fr}
  .ds-products{grid-template-columns:1fr 1fr}
  .ds-stats{grid-template-columns:1fr 1fr}
  .ds-label span{max-width:100%;white-space:normal;line-height:1.4}

  /* Feed documentation has several comparison tables. Keep wide content in
     its own scroll region so the page chrome and prose never pan sideways. */
  .feed-main .doc-table{
    display:block;width:100%;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .feed-main .doc-table > tbody{
    display:table;width:100%;min-width:640px;border-collapse:collapse;
  }
  .api-manual pre{padding:17px 16px;font-size:12.5px;line-height:1.65}
  .api-manual .table-scroll{overflow:visible;scrollbar-gutter:auto}
  .api-manual .table-scroll .doc-table{
    display:block;width:100%;max-width:100%;min-width:0;table-layout:auto;
    contain:inline-size;border-top:1px solid var(--line);
  }
  .api-manual .doc-table tbody,
  .api-manual .doc-table tr,
  .api-manual .doc-table td{display:block;width:100%}
  .api-manual .doc-table tr:first-child{display:none}
  .api-manual .doc-table tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .api-manual .doc-table td,
  .api-manual .doc-table td:first-child{
    position:relative;display:block;width:100%;box-sizing:border-box;min-width:0;
    padding:5px 0 5px 100px;border:0;font-family:var(--sans);
    font-size:14.5px;line-height:1.6;color:var(--ink-soft);white-space:normal;
  }
  .api-manual .doc-table td::before{
    content:attr(data-label);position:absolute;inset:8px auto auto 0;width:84px;
    font-family:var(--mono);font-size:10.5px;font-weight:600;line-height:1.4;
    letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);
  }
}
@media (max-width:480px){
  .ds-cards,.ds-products{grid-template-columns:1fr}
  .outcome-table-scroll::before{content:"Swipe to see all criteria →";display:block;margin-bottom:8px;font:600 10px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--danger)}
  .outcome-table th:first-child,.outcome-table td:first-child{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--line)}
  .outcome-table th:first-child{background:var(--paper);z-index:2}
}

@media print{
  header,footer,.ds-cta .cta-actions{display:none}
  .ds-main{padding:0;max-width:none}
  .ds-label span{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .f-seg,.f-tip,.ds-stat,.ds-stats,.ds-callout{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ── Cumulative exploitation curve ──────────────────────────────────────────
   One series, so one hue: bar LENGTH carries the magnitude and colour carries
   nothing except the "already exploited by the time it was public" grouping,
   which is a real category rather than a rank. Every bar is directly labelled,
   so the pair never has to be told apart by hue alone (they clear the CVD floor
   at ΔE 8.1 protan, which is close enough to want the labels regardless).
   Fills validated against --paper: both >= 3:1. */
.tte-curve{margin-top:18px;border-top:1px solid var(--line);padding:22px 0 4px}
.tte-row{display:grid;grid-template-columns:182px 1fr 62px;align-items:center;
  gap:14px;padding:5px 0}
.tte-k{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);
  letter-spacing:.02em;text-align:end}
.tte-track{position:relative;height:14px;background:var(--band);border-radius:2px}
.tte-fill{display:block;height:100%;background:var(--danger);border-radius:2px;
  min-width:2px;transition:width .5s ease-out}
.tte-v{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.tte-row.is-gone .tte-k{color:var(--danger-ink);font-weight:600}
/* The 100% reference: recessive, and the only rule on the plot. */
.tte-axis{display:grid;grid-template-columns:182px 1fr 62px;gap:14px;margin-top:8px}
.tte-axis span:nth-child(2){border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;color:var(--ink-mute);
  padding-top:5px;display:flex;justify-content:space-between}
.tte-note{font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  line-height:1.55;margin-top:12px}
@media (max-width:560px){
  .tte-row,.tte-axis{grid-template-columns:110px 1fr 54px;gap:9px}
  .tte-k{font-size:10.5px}
}

/* Bar widths as CLASSES, not inline styles.
   The page is served under `style-src 'self'` with no 'unsafe-inline', so a
   style="width:39.5%" attribute is dropped by the browser and every bar renders
   full width — silently, with the correct number printed beside it. The old JS
   set .style.width through CSSOM, which CSP does not block, so the constraint
   only appeared when the chart moved server-side.
   One class per whole percent: the track is ~660px, so 1% is 6.6px and finer
   granularity would not be visible. ~2KB, and it costs no request. */
.tte-fill.w0{width:0%}.tte-fill.w1{width:1%}.tte-fill.w2{width:2%}.tte-fill.w3{width:3%}.tte-fill.w4{width:4%}.tte-fill.w5{width:5%}.tte-fill.w6{width:6%}.tte-fill.w7{width:7%}.tte-fill.w8{width:8%}.tte-fill.w9{width:9%}
.tte-fill.w10{width:10%}.tte-fill.w11{width:11%}.tte-fill.w12{width:12%}.tte-fill.w13{width:13%}.tte-fill.w14{width:14%}.tte-fill.w15{width:15%}.tte-fill.w16{width:16%}.tte-fill.w17{width:17%}.tte-fill.w18{width:18%}.tte-fill.w19{width:19%}
.tte-fill.w20{width:20%}.tte-fill.w21{width:21%}.tte-fill.w22{width:22%}.tte-fill.w23{width:23%}.tte-fill.w24{width:24%}.tte-fill.w25{width:25%}.tte-fill.w26{width:26%}.tte-fill.w27{width:27%}.tte-fill.w28{width:28%}.tte-fill.w29{width:29%}
.tte-fill.w30{width:30%}.tte-fill.w31{width:31%}.tte-fill.w32{width:32%}.tte-fill.w33{width:33%}.tte-fill.w34{width:34%}.tte-fill.w35{width:35%}.tte-fill.w36{width:36%}.tte-fill.w37{width:37%}.tte-fill.w38{width:38%}.tte-fill.w39{width:39%}
.tte-fill.w40{width:40%}.tte-fill.w41{width:41%}.tte-fill.w42{width:42%}.tte-fill.w43{width:43%}.tte-fill.w44{width:44%}.tte-fill.w45{width:45%}.tte-fill.w46{width:46%}.tte-fill.w47{width:47%}.tte-fill.w48{width:48%}.tte-fill.w49{width:49%}
.tte-fill.w50{width:50%}.tte-fill.w51{width:51%}.tte-fill.w52{width:52%}.tte-fill.w53{width:53%}.tte-fill.w54{width:54%}.tte-fill.w55{width:55%}.tte-fill.w56{width:56%}.tte-fill.w57{width:57%}.tte-fill.w58{width:58%}.tte-fill.w59{width:59%}
.tte-fill.w60{width:60%}.tte-fill.w61{width:61%}.tte-fill.w62{width:62%}.tte-fill.w63{width:63%}.tte-fill.w64{width:64%}.tte-fill.w65{width:65%}.tte-fill.w66{width:66%}.tte-fill.w67{width:67%}.tte-fill.w68{width:68%}.tte-fill.w69{width:69%}
.tte-fill.w70{width:70%}.tte-fill.w71{width:71%}.tte-fill.w72{width:72%}.tte-fill.w73{width:73%}.tte-fill.w74{width:74%}.tte-fill.w75{width:75%}.tte-fill.w76{width:76%}.tte-fill.w77{width:77%}.tte-fill.w78{width:78%}.tte-fill.w79{width:79%}
.tte-fill.w80{width:80%}.tte-fill.w81{width:81%}.tte-fill.w82{width:82%}.tte-fill.w83{width:83%}.tte-fill.w84{width:84%}.tte-fill.w85{width:85%}.tte-fill.w86{width:86%}.tte-fill.w87{width:87%}.tte-fill.w88{width:88%}.tte-fill.w89{width:89%}
.tte-fill.w90{width:90%}.tte-fill.w91{width:91%}.tte-fill.w92{width:92%}.tte-fill.w93{width:93%}.tte-fill.w94{width:94%}.tte-fill.w95{width:95%}.tte-fill.w96{width:96%}.tte-fill.w97{width:97%}.tte-fill.w98{width:98%}.tte-fill.w99{width:99%}
.tte-fill.w100{width:100%}