/* The deep dive (round six, 5 October 2026): two-pass loading, for the technical visitor.
 * Part 1: its card on the page, in Why it is better (Ken moved it up from the tours in round seven). Part 2: the pop-up, a tour-sized dialog
 * built on the tour frame (tours.css). Role tokens only. The two series are an emphasis pair (the method
 * in the accent, the baseline in the brand grey), checked with the palette validator in light and dark;
 * every value is also written on the chart and in the table. */

/* ---------- Part 1: on the page ---------- */
.deep{margin:0 0 20px}
.deep-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;grid-template-areas:"fig txt go";gap:24px 40px;align-items:center;width:100%;padding:24px 26px 24px 24px;text-align:left;font:inherit;color:var(--axis-fg);background:var(--axis-raised);border:1.5px solid var(--axis-border);border-radius:var(--axis-radius-lg);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.deep-card:hover{border-color:var(--axis-link);box-shadow:0 14px 40px rgba(11,18,32,.09)}
.deep-card:focus-visible{outline:3px solid var(--axis-link);outline-offset:3px}
.deep-card .door-go{grid-area:go}
.deep-card:hover .door-go{transform:translateX(3px)}
.deep-fig{grid-area:fig;display:grid;gap:12px;padding:20px 22px 22px;background:var(--axis-band);border-radius:var(--axis-radius)}
.deep-fig-k{font:700 11px/1.4 var(--axis-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--axis-fg-muted)}
.deep-row{display:grid;grid-template-columns:11.4em minmax(0,1fr) 3.4em;gap:12px;align-items:center;font-size:14px}
.deep-fn{font-size:12.5px;line-height:1.45;color:var(--axis-fg-muted);text-wrap:balance}
.deep-fig sup{font-size:.78em;line-height:0;vertical-align:.45em}
/* open source, under the card (Ken, round eleven) */
.oss{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 40px;align-items:center;margin:0 0 72px;padding:26px 30px;background:var(--axis-band);border-radius:var(--axis-radius-lg)}
.axis-root .oss h3{font:800 clamp(22px,2.2vw,28px)/1.15 var(--axis-font-display);letter-spacing:-.03em;color:var(--axis-heading);margin:0 0 6px}
.axis-root .oss p{margin:0;font-size:16.5px;line-height:1.6;color:var(--axis-fg);max-width:none}
.oss-go{white-space:nowrap}
:root[data-axis-theme="dark"] .oss{background:var(--axis-raised)}
@media (prefers-color-scheme:dark){:root:not([data-axis-theme="light"]) .oss{background:var(--axis-raised)}}
.deep-row-l{font-weight:600;color:var(--axis-heading);white-space:nowrap}
.deep-row-b{height:16px}
.deep-row-b i{display:block;height:100%;border-radius:0 4px 4px 0}
.deep-row.std i,.tp-tb.std i{background:var(--axis-muted)}
.deep-row.two i,.tp-tb.two i{background:var(--axis-link)}
.deep-row-v{font:600 13.5px var(--axis-font-mono);color:var(--axis-fg);text-align:right}
.deep-txt{grid-area:txt;display:flex;flex-direction:column;gap:6px;min-width:0}
.deep-stat{font:800 clamp(22px,2.2vw,30px)/1.1 var(--axis-font-display);letter-spacing:-.035em;color:var(--axis-heading)}
.deep-stat b{color:var(--axis-link);font-size:1.55em;letter-spacing:-.05em;margin-right:.1em}
.deep-q{font-size:15px;line-height:1.45;color:var(--axis-fg-muted)}
.deep-x{font-size:16px;line-height:1.5;color:var(--axis-fg);margin-top:6px}
.deep-m{font:500 12.5px var(--axis-font-mono);color:var(--axis-fg-muted);margin-top:6px}
:root[data-axis-theme="dark"] .deep-fig{background:var(--axis-bg)}
@media (prefers-color-scheme:dark){:root:not([data-axis-theme="light"]) .deep-fig{background:var(--axis-bg)}}
@media (prefers-reduced-motion:reduce){.deep-card,.deep-card .door-go{transition:none}.deep-card:hover .door-go{transform:none}}

/* ---------- Part 2: the pop-up ---------- */
.tp-badge{display:inline-block;margin:0 0 18px;padding:5px 11px;border:1.5px solid var(--axis-link);border-radius:999px;font:700 11.5px/1.2 var(--axis-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--axis-link)}
.axis-root .deep-doc .tp-lead{font-size:18px;line-height:1.6;color:var(--axis-fg);margin:0;max-width:34em}
/* the opening: the claim across the width, then three numbers in a row */
.deep-doc .tour-hero .hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}
.deep-doc .tour-hero .sub{max-width:30em}
.axis-root .deep-doc .tp-lead{max-width:40em}

/* three numbers, each with its qualifier beside it */
.tp-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tp-stats li{display:flex;flex-direction:column;gap:3px;padding:16px 22px 18px;background:var(--axis-band);border-left:3px solid var(--axis-link);border-radius:0 var(--axis-radius) var(--axis-radius) 0}
.tp-stats b{font:800 clamp(40px,4vw,54px)/1 var(--axis-font-display);letter-spacing:-.05em;color:var(--axis-link)}
.tp-stats b.w{font-size:clamp(28px,2.6vw,36px);letter-spacing:-.04em;padding:4px 0 2px}
.tp-stats .st{font:700 17px/1.3 var(--axis-font-display);color:var(--axis-heading);letter-spacing:-.01em}
.tp-stats .sq{font:500 12.5px/1.45 var(--axis-font-mono);color:var(--axis-fg-muted)}
:root[data-axis-theme="dark"] .tp-stats li{background:var(--axis-raised)}
@media (prefers-color-scheme:dark){:root:not([data-axis-theme="light"]) .tp-stats li{background:var(--axis-raised)}}

/* how it works: two little projects, read two ways */
.tp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tp-panel{background:var(--axis-raised);border:1.5px solid var(--axis-border);border-radius:var(--axis-radius);padding:22px 24px 26px}
.tp-panel.tp-two{border:2px solid var(--axis-link)}
.axis-root .tp-k{font:700 12px/1.4 var(--axis-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--axis-fg-muted);margin:0 0 6px}
.axis-root .tp-two .tp-k{color:var(--axis-link)}
.axis-root .tp-t{font:600 17px/1.4 var(--axis-font-display);letter-spacing:-.01em;color:var(--axis-heading);margin:0 0 20px}
.tp-art{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:22px;align-items:start}
.tp-col{display:grid;gap:10px;align-content:start}
.tp-lab{font:600 13px/1.35 var(--axis-font-body);color:var(--axis-fg-muted);min-height:2.7em}
.tp-lab b{display:block;font:700 11px/1.5 var(--axis-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--axis-link)}
.tp-idx{display:grid;gap:8px;padding:13px 12px;border:1.5px solid var(--axis-border);border-radius:8px}
.tp-idx i{position:relative;display:block;height:7px;border-radius:4px;background:var(--axis-border)}
.tp-idx i:nth-child(3n+2){width:76%}
.tp-idx i:nth-child(3n){width:88%}
.tp-idx i.rd{background:var(--axis-muted);opacity:.55}
.tp-idx i.sc{background:var(--axis-link);opacity:.3}
.tp-idx i.pk{opacity:1}
.tp-idx i.pk::after{content:"";position:absolute;right:-10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--axis-link)}
.tp-recs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tp-recs i{display:block;aspect-ratio:3/4;border:1.5px solid var(--axis-border);border-radius:4px}
.tp-recs i.rd{background:var(--axis-muted);border-color:var(--axis-muted);opacity:.55}
.tp-recs i.op{background:var(--axis-link);border-color:var(--axis-link)}
.tp-passes{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.tp-passes li{display:grid;gap:4px;padding:16px 20px;border-left:3px solid var(--axis-link);background:var(--axis-raised);border-radius:0 10px 10px 0}
.tp-passes b{font:700 12px/1.5 var(--axis-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--axis-link)}
.tp-passes span{font-size:16px;line-height:1.55}

/* the results: the chart, the long sessions, the table */
.tp-results{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;align-items:stretch}
.tp-chart{margin:0;padding:22px 24px 16px;background:var(--axis-raised);border:1.5px solid var(--axis-border);border-radius:var(--axis-radius);min-width:0}
.tp-chart figcaption{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;margin:0 0 10px}
.tp-chart-t{font:700 17px/1.3 var(--axis-font-display);letter-spacing:-.01em;color:var(--axis-heading)}
.tp-chart-s{font:500 12.5px var(--axis-font-mono);color:var(--axis-fg-muted)}
.tp-legend{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px;color:var(--axis-fg)}
.tp-legend li{display:inline-flex;align-items:center;gap:8px}
.tp-legend li::before{content:"";width:16px;height:10px;border-radius:0 3px 3px 0}
.tp-legend .std::before{background:var(--axis-muted)}
.tp-legend .two::before{background:var(--axis-link)}
.tp-plot{position:relative;min-height:220px}
.tp-plot svg{display:block;width:100%;height:auto;overflow:visible}
.tp-plot .gr{stroke:var(--axis-border);stroke-width:1}
.tp-plot .g0{stroke:var(--axis-fg-muted);stroke-opacity:.55;stroke-width:1}
.tp-plot .tick{fill:var(--axis-fg-muted);font:500 11.5px var(--axis-font-mono)}
.tp-plot .cat{fill:var(--axis-heading);font:600 13.5px var(--axis-font-body)}
.tp-plot .cat2{fill:var(--axis-fg-muted);font:500 12px var(--axis-font-body)}
.tp-plot .bs{fill:var(--axis-muted)}
.tp-plot .bt{fill:var(--axis-link)}
.tp-plot .val{fill:var(--axis-fg);font:600 12px var(--axis-font-mono)}
.tp-plot .sav{fill:var(--axis-link);font:700 13px var(--axis-font-mono)}
.tp-plot .hit{fill:var(--axis-highlight);opacity:0}
.tp-plot .row.on .hit{opacity:1}
.tp-tip{position:absolute;z-index:2;left:0;top:0;pointer-events:none;width:230px;padding:11px 13px 12px;background:var(--axis-raised);border:1.5px solid var(--axis-border);border-radius:10px;box-shadow:0 10px 30px rgba(11,18,32,.14);font-size:13.5px;line-height:1.45;color:var(--axis-fg)}
.tp-tip[hidden]{display:none}
.tp-tip b{display:block;font-weight:700;color:var(--axis-heading)}
.tp-tip .m{display:block;font-size:12.5px;color:var(--axis-fg-muted);margin-bottom:6px}
.tp-tip .r{display:flex;align-items:center;gap:8px}
.tp-tip .r::before{content:"";flex:none;width:12px;height:8px;border-radius:0 2px 2px 0}
.tp-tip .r.std::before{background:var(--axis-muted)}
.tp-tip .r.two::before{background:var(--axis-link)}
.tp-tip .r span{margin-left:auto;font:600 12.5px var(--axis-font-mono)}
.tp-tip .s{display:block;margin-top:6px;padding-top:6px;border-top:var(--axis-hairline);font-weight:700;color:var(--axis-link)}
.tp-total{display:flex;flex-direction:column;gap:10px;padding:22px 24px;background:var(--axis-raised);border:2px solid var(--axis-link);border-radius:var(--axis-radius);min-width:0}
.axis-root .tp-total-k{font:700 12px/1.4 var(--axis-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--axis-link);margin:0}
.axis-root .tp-total-h{font:600 15.5px/1.45 var(--axis-font-body);color:var(--axis-fg-muted);margin:0}
.tp-total-bars{display:grid;gap:12px;margin-top:6px}
.tp-tb{display:grid;grid-template-columns:minmax(0,1fr) 3.6em;grid-template-areas:"l l" "b v";gap:5px 10px;align-items:center}
.tp-tb .l{grid-area:l;font-size:14px;font-weight:600;color:var(--axis-heading)}
.tp-tb .b{grid-area:b;height:18px}
.tp-tb i{display:block;height:100%;border-radius:0 4px 4px 0}
.tp-tb .v{grid-area:v;font:600 13.5px var(--axis-font-mono);text-align:right}
.tp-total-stats{list-style:none;margin:auto 0 0;padding:16px 0 0;border-top:var(--axis-hairline);display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tp-total-stats li{display:flex;flex-direction:column;gap:4px}
.tp-total-stats b{font:800 clamp(34px,3.4vw,46px)/1 var(--axis-font-display);letter-spacing:-.05em;color:var(--axis-link)}
.tp-total-stats span{font-size:14.5px;color:var(--axis-fg-muted)}
.tp-table-wrap{margin-top:20px;overflow-x:auto;border:var(--axis-hairline);border-radius:var(--axis-radius);background:var(--axis-raised)}
.tp-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:760px}
.tp-table caption{caption-side:top;text-align:left;padding:14px 16px 10px;font:700 12px/1.4 var(--axis-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--axis-fg-muted)}
.tp-table th,.tp-table td{padding:11px 16px;border-top:var(--axis-hairline);text-align:left;vertical-align:top}
.tp-table thead th{font:600 12.5px/1.35 var(--axis-font-body);color:var(--axis-fg-muted);background:var(--axis-band)}
.tp-table thead th:nth-child(n+3){text-align:right}
.tp-table tbody th,.tp-table tbody td{white-space:nowrap}
.tp-table tbody th{font-weight:600;color:var(--axis-heading)}
.tp-table .n{text-align:right;font-family:var(--axis-font-mono);font-size:14px;white-space:nowrap}
.tp-table .hl{background:var(--axis-highlight);color:var(--axis-link);font-weight:700}
:root[data-axis-theme="dark"] .tp-table thead th{background:var(--axis-bg)}
@media (prefers-color-scheme:dark){:root:not([data-axis-theme="light"]) .tp-table thead th{background:var(--axis-bg)}}

/* no trade-off: the three kinds of hard question */
.tp-qs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tp-qs li{padding:22px 24px 24px;background:var(--axis-raised);border:1.5px solid var(--axis-border);border-radius:var(--axis-radius)}
.tp-ico{display:block;width:48px;height:48px;margin-bottom:14px}
.tp-ico svg{display:block;width:100%;height:100%}
.tp-ico .i-w{fill:var(--axis-raised);stroke:var(--axis-fg-muted);stroke-width:1.8}
.tp-ico .i-m{fill:none;stroke:var(--axis-fg-muted);stroke-width:1.8;stroke-linecap:round;opacity:.7}
.tp-ico .i-x{fill:none;stroke:var(--axis-fg-muted);stroke-width:2;stroke-linecap:round}
.tp-ico .i-a{fill:var(--axis-raised);stroke:var(--axis-link);stroke-width:2}
.tp-ico .i-al{fill:none;stroke:var(--axis-link);stroke-width:1.8;stroke-linecap:round}
.tp-ico .i-ok{fill:none;stroke:var(--axis-link);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tp-ico .i-hl{fill:var(--axis-link)}
.tp-qs h4{font:700 19px/1.3 var(--axis-font-display);letter-spacing:-.02em;color:var(--axis-heading);margin:0 0 6px}
.tp-qs p{margin:0;font-size:15.5px;line-height:1.55;color:var(--axis-fg-muted)}

/* Claude and Codex */
.tp-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tp-vs-col{padding:26px 28px 24px;border-radius:var(--axis-radius);background:var(--axis-raised)}
.tp-vs-col.yes{border:2px solid var(--axis-link)}
.tp-vs-col.no{border:1.5px dashed var(--axis-fg-muted)}
.axis-root .tp-vs-k{font:700 12px/1.4 var(--axis-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--axis-fg-muted);margin:0 0 10px}
.axis-root .tp-vs-col.yes .tp-vs-k{color:var(--axis-link)}
.axis-root .tp-vs-big{font:800 clamp(30px,3.2vw,44px)/1.05 var(--axis-font-display);letter-spacing:-.045em;color:var(--axis-heading);margin:0 0 6px}
.axis-root .tp-vs-col.yes .tp-vs-big{color:var(--axis-link)}
.axis-root .tp-vs-sub{font-size:15.5px;line-height:1.5;color:var(--axis-fg-muted);margin:0 0 18px}
.axis-root .tp-vs-v{display:flex;align-items:center;gap:10px;margin:0;padding-top:14px;border-top:var(--axis-hairline);font-weight:600;color:var(--axis-heading)}
.tp-vs-v .mk{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;font-size:13px;font-weight:800;line-height:1}
.tp-vs-col.yes .mk{background:var(--axis-link);color:var(--axis-bg)}
.tp-vs-col.no .mk{border:1.5px solid var(--axis-fg-muted);color:var(--axis-fg-muted)}

/* the fine print */
.tp-print{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tp-print > div{padding:24px 26px;background:var(--axis-raised);border:1.5px solid var(--axis-border);border-radius:var(--axis-radius)}
.tp-print h4{font:700 18px/1.3 var(--axis-font-display);letter-spacing:-.015em;color:var(--axis-heading);margin:0 0 12px}
.tp-print ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tp-print li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.55}
.tp-print li::before{content:"";position:absolute;left:3px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--axis-link)}
.tp-print ul.no li::before{content:"\2715";top:0;left:1px;width:auto;height:auto;border-radius:0;background:none;font-weight:800;font-size:13px;color:var(--axis-fg-muted)}
.axis-root .tp-foot{margin:22px 0 0;font:500 12.5px/1.6 var(--axis-font-mono);color:var(--axis-fg-muted);max-width:none}

@media (max-width:1060px){
  .tp-results{grid-template-columns:1fr}
}
@media (max-width:860px){
  .deep-card{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"txt go" "fig fig"}
}
@media (max-width:760px){
  .oss{grid-template-columns:1fr;padding:22px 20px;margin-bottom:52px}
  .deep-card{padding:18px 16px 18px 18px;gap:18px 14px}
  .deep-row{grid-template-columns:minmax(0,1fr) 3.4em;grid-template-areas:"l l" "b v";gap:4px 10px;font-size:13.5px}
  .deep-row-l{grid-area:l}
  .deep-row-b{grid-area:b}
  .deep-row-v{grid-area:v}
  .tp,.tp-qs,.tp-vs,.tp-print,.tp-passes,.tp-stats{grid-template-columns:1fr}
  .tp-panel{padding:18px 18px 22px}
  .tp-chart{padding:18px 14px 12px}
  .tp-print > div,.tp-vs-col{padding:20px 20px}
}