@import url('/stories/situations.css');

/* Charts are plain HTML: the public CSP forbids inline styles, so every bar width
   and dot position is a generated class. Regenerate, don't hand-edit the number blocks. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pipeline{list-style:none;margin:0;padding:0}
.pipeline li{padding:14px 0;border-top:1px solid #ffffff30}
.pipeline li:first-child{border-top:0;padding-top:0}
.pipeline strong{display:block;font-family:Georgia,serif;font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1.15;letter-spacing:-.025em;color:#d6e98d}
.pipeline span{display:block;font-size:12px;line-height:1.6;color:#d2dccb;margin-top:4px}
.pipeline a{color:inherit;text-decoration:none}.pipeline a:hover strong{text-decoration:underline;text-decoration-thickness:1px}

.chart{margin:28px 0;padding:24px;background:#fcfbf6;border:1px solid var(--line);border-radius:4px}
.chart>.eyebrow{color:var(--coral);margin:0 0 18px}
.chart figcaption{font-size:11px;line-height:1.8;color:var(--muted);margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.bars{list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums}
.bars li{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr) 7.5rem;gap:14px;align-items:center;padding:7px 0;font-size:13px;line-height:1.4}
.bar-label{font-weight:600}.bar-value{text-align:right;color:var(--muted)}
.bar-track{display:flex;height:16px;background:#ecebdf;border-radius:2px;overflow:hidden}
.bar{display:block;height:100%}.bar.tour{background:var(--ink)}.bar.other{background:#7e9a8b}.bar.ext{background:repeating-linear-gradient(135deg,#6f9382 0 4px,#c9d6cd 4px 8px)}
.best li.counted .bar-track{background:#ecebdf}.bar.counted{background:var(--ink)}.bar.dropped{background:#b9bfb3}
.best li.dropped{color:var(--muted)}.best small{font-size:11px;color:var(--muted)}
.best .cut{display:block;padding:6px 0;border-top:2px dashed var(--coral)}.best .cut span{font-size:11px;color:var(--coral);font-weight:700;letter-spacing:.06em;text-transform:uppercase}

.dots{display:block}
.axis{position:relative;height:20px;margin-left:calc(8.5rem + 14px);font-size:11px;color:var(--muted)}
.tick{position:absolute;top:0;transform:translateX(-50%)}.tick.t0{transform:none}.tick.t12000{transform:translateX(-85%)}
.strips{list-style:none;margin:0;padding:0}
.strips li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:14px;align-items:center;padding:6px 0;font-size:13px;font-weight:600}
.strip{position:relative;display:block;height:26px}
.strip::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--line)}
.strip::after{content:'';position:absolute;top:-4px;bottom:-4px;border-left:2px dashed var(--coral);left:56%}
.dot{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--ink);z-index:1}
.dot.hi{background:var(--coral)}.dot.win{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;box-shadow:0 0 0 2px #fcfbf6,0 0 0 3px currentColor}
.dot.win{color:var(--ink)}.dot.win.hi{color:var(--coral)}
.legend-line{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 16px;font-size:12px;color:var(--muted)}.legend-line span{display:inline-flex;align-items:center;gap:8px}
.legend-line i{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--ink)}.legend-line i.hi{background:var(--coral)}.legend-line i.win{box-shadow:0 0 0 2px #fcfbf6,0 0 0 3px var(--ink)}

.notes{padding-left:20px;font-size:15px}.notes li{margin:0 0 10px}
.pair-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0}
.pair-card{padding:20px;background:#fcfbf6;border:1px solid var(--line);border-top:3px solid var(--ink);border-radius:4px;min-width:0}
.pair-card h3{font-size:14px;line-height:1.5;margin:0 0 12px}.pair-card ol{margin:0 0 14px;padding-left:20px;font-size:13px;line-height:1.7;color:var(--muted)}
.pair-card .result{display:block;font-family:Georgia,serif;font-size:32px;letter-spacing:-.03em;line-height:1.2;color:var(--ink)}
.pair-card .result small{display:block;font-family:Inter,system-ui,sans-serif;font-size:12px;letter-spacing:0;color:var(--muted);margin-top:4px}

.draw-map{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.half-label{margin:0 0 8px!important;font-size:10px!important;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--coral)}
.quarters{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quarter h4{margin:0 0 6px;font-size:12px;font-weight:600}
.quarter ol{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.slot{display:flex;gap:8px;align-items:center;min-height:30px;padding:5px 8px;border-radius:3px;font-size:11px;line-height:1.3;border:1px solid var(--line);background:#fff;color:var(--muted)}
.slot b{flex:0 0 auto;min-width:1.4em;font-variant-numeric:tabular-nums}
.slot span{font-weight:650}
.slot.s1{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.slot.s34{background:var(--coral);border-color:var(--coral);color:#fff}
.slot.s58{background:#d6e98d;border-color:#b9cf6a;color:var(--ink)}
.draw-key{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 16px;font-size:12px;color:var(--muted)}.draw-key span{display:inline-flex;align-items:center;gap:8px}
.draw-key i{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--line)}
.draw-key .s1{background:var(--ink);border-color:var(--ink)}.draw-key .s34{background:var(--coral);border-color:var(--coral)}.draw-key .s58{background:#d6e98d;border-color:#b9cf6a}
.table-wrap.narrow{max-width:420px}
.table-wrap.scroll{overflow-x:auto}.table-wrap.scroll table{min-width:640px}
.table-wrap td:last-child,.table-wrap td:nth-child(n+3){font-variant-numeric:tabular-nums}
.callout{font-family:Georgia,serif;font-size:21px!important;line-height:1.5;padding:18px 22px;border-left:3px solid var(--coral);background:#fcfbf6}
.sources{font-size:13px;line-height:1.7;padding-left:20px}.sources li{margin-bottom:10px}

@media(max-width:700px){
  .chart{padding:18px}
  .bars li{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .bars .bar-track{grid-column:1/-1;order:3}
  .bars .bar-value{order:2}
  .axis{margin-left:0;margin-top:2px}
  .strips li{grid-template-columns:1fr;gap:2px;padding:8px 0}
  .pair-cards{grid-template-columns:1fr}
  .draw-map{grid-template-columns:1fr;gap:18px}
  .callout{font-size:18px!important;padding:14px 16px}
}
@media(max-width:380px){.slot{padding:5px 6px;gap:6px}}

/* generated: bar widths and dot positions */
.w1500{width:10.34%}
.w1700{width:11.72%}
.w2500{width:17.24%}
.w4000{width:27.59%}
.w5500{width:37.93%}
.w7000{width:48.28%}
.w9200{width:63.45%}
.w11000{width:75.86%}
.w12000{width:82.76%}
.w14000{width:96.55%}
.w14500{width:100.00%}
.v1670{width:18.15%}
.v2660{width:28.91%}
.v3600{width:39.13%}
.v3850{width:41.85%}
.v4320{width:46.96%}
.v4800{width:52.17%}
.v4900{width:53.26%}
.v5040{width:54.78%}
.v5950{width:64.67%}
.v6050{width:65.76%}
.v8400{width:91.30%}
.v9200{width:100.00%}
.d510{left:4.08%}
.d660{left:5.28%}
.d880{left:7.04%}
.d1060{left:8.48%}
.d1200{left:9.60%}
.d1290{left:10.32%}
.d1670{left:13.36%}
.d2110{left:16.88%}
.d2220{left:17.76%}
.d2660{left:21.28%}
.d2750{left:22.00%}
.d3000{left:24.00%}
.d3030{left:24.24%}
.d3600{left:28.80%}
.d3850{left:30.80%}
.d4320{left:34.56%}
.d4680{left:37.44%}
.d4800{left:38.40%}
.d4900{left:39.20%}
.d5040{left:40.32%}
.d5500{left:44.00%}
.d5950{left:47.60%}
.d6050{left:48.40%}
.d6420{left:51.36%}
.d6600{left:52.80%}
.d7000{left:56.00%}
.d7700{left:61.60%}
.d7800{left:62.40%}
.d8400{left:67.20%}
.d9200{left:73.60%}
.d9350{left:74.80%}
.d10200{left:81.60%}
.d11000{left:88.00%}
.d12000{left:96.00%}
.t0{left:0.00%}
.t3000{left:24.00%}
.t6000{left:48.00%}
.t9000{left:72.00%}
.t12000{left:96.00%}