/* CHART PATTERN CHALLENGE — page component. Requires s8-tokens.css + s8-ui.css.
   Palette is exposed as --cpc-* so the canvas renderer reads it from CSS. */
.cpc-page{--s8c-w:1180px}
.cpc{--cpc-up:var(--s8-buy-hi);--cpc-down:var(--s8-sell);--cpc-grid:rgba(255,255,255,.05);--cpc-veil:rgba(8,9,11,.62);--cpc-guide:rgba(138,213,255,.5);background:var(--s8-panel);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.cpc__bar{display:flex;align-items:center;gap:var(--s8-3);min-height:var(--s8-toolbar);padding:0 var(--s8-4);background:var(--s8-panel-2);border-bottom:1px solid var(--s8-line)}
.cpc__t{display:flex;align-items:center;gap:8px;font-size:var(--s8-fs-md);font-weight:600;color:#fff;letter-spacing:-.008em}
.cpc__t svg{width:15px;height:15px;flex:none;stroke:var(--s8-accent-fg);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cpc__live{display:inline-flex;align-items:center;gap:6px;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-up)}
.cpc__live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--s8-up);box-shadow:0 0 0 3px var(--s8-up-tint)}
.cpc__meta{display:flex;align-items:center;gap:var(--s8-5);margin-left:auto}
.cpc-stat{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1}
.cpc-stat span{font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-4)}
.cpc-stat b{font-size:var(--s8-fs-lg);font-weight:600;color:#fff;font-variant-numeric:tabular-nums;font-feature-settings:var(--s8-num-feat)}
.cpc-stat--time b{color:var(--s8-warn)}
.cpc-stat--score b em{font-style:normal;color:var(--s8-fg-4);font-weight:500}

/* stage */
.cpc__body{display:grid;grid-template-columns:minmax(0,1fr)}
.cpc__body--split{grid-template-columns:minmax(0,1fr) 306px}
.cpc__stage{position:relative;background:var(--s8-inset);min-width:0}
.cpc__stage canvas{display:block;width:100%;height:100%}
.cpc-canvas{height:clamp(240px,25vw,344px)}
.cpc-canvas--sm{height:224px}
.cpc__clock{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.07);z-index:2}
.cpc__clock i{display:block;height:100%;background:var(--s8-accent-hi)}
.cpc__clock--low i{background:var(--s8-warn)}
.cpc__tag{position:absolute;left:var(--s8-4);top:var(--s8-4);display:inline-flex;align-items:center;gap:7px;height:var(--s8-h-xs);padding:0 10px;border-radius:var(--s8-r-pill);background:rgba(8,9,11,.72);border:1px solid var(--s8-line-2);font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--s8-fg-2);backdrop-filter:blur(6px);z-index:2}
.cpc__hint{position:absolute;right:var(--s8-4);bottom:var(--s8-3);font-family:var(--s8-mono);font-size:var(--s8-fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--s8-fg-4);z-index:2}
.cpc__over{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s8-2);text-align:center;padding:var(--s8-6);background:linear-gradient(180deg,rgba(8,9,11,.58),rgba(8,9,11,.9))}
.cpc__over h3{margin:0;font-size:var(--s8-fs-xl);font-weight:600;color:#fff;letter-spacing:var(--s8-ls-tight)}
.cpc__over p{margin:0;max-width:52ch;font-size:var(--s8-fs-sm);line-height:1.65;color:var(--s8-fg-2);text-wrap:pretty}
.cpc__over .s8-btn{margin-top:var(--s8-3)}

/* answers */
.cpc__rail{display:flex;flex-direction:column;gap:var(--s8-3);padding:var(--s8-4);border-left:1px solid var(--s8-line);min-width:0}
.cpc__rail--under{border-left:0;border-top:1px solid var(--s8-line)}
.cpc__ask{display:flex;align-items:center;justify-content:space-between;gap:var(--s8-3);font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-3)}
.cpc-ans{display:grid;grid-template-columns:1fr;gap:var(--s8-2)}
.cpc-ans--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cpc-ans--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cpc-opt{display:flex;align-items:center;gap:var(--s8-2);min-height:44px;padding:0 var(--s8-3);border:1px solid var(--s8-line-2);border-radius:var(--s8-r);background:var(--s8-panel-2);color:var(--s8-fg);font:inherit;font-size:var(--s8-fs-sm);font-weight:500;text-align:left;cursor:pointer;transition:background var(--s8-t) var(--s8-ease),border-color var(--s8-t) var(--s8-ease),color var(--s8-t) var(--s8-ease)}
.cpc-opt:hover{background:var(--s8-hover);border-color:var(--s8-line-3)}
.cpc-opt kbd{margin-left:auto;flex:none;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;color:var(--s8-fg-4);border:1px solid var(--s8-line-2);border-radius:var(--s8-r-xs);padding:1px 5px}
.cpc-opt.is-correct{border-color:var(--s8-up-line);background:var(--s8-up-tint);color:var(--s8-up)}
.cpc-opt.is-wrong{border-color:var(--s8-down-line);background:var(--s8-down-tint);color:var(--s8-down)}
.cpc-opt.is-correct kbd,.cpc-opt.is-wrong kbd{border-color:currentColor;color:currentColor}
.cpc-opt svg{width:14px;height:14px;flex:none;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cpc-opt--sample{cursor:default;pointer-events:none}
.cpc-streak{display:inline-flex;align-items:center;gap:6px;height:var(--s8-h-xs);padding:0 9px;border-radius:var(--s8-r-pill);background:var(--s8-gold-tint);border:1px solid var(--s8-gold-line);color:var(--s8-gold-fg);font-size:var(--s8-fs-xs);font-weight:600;font-variant-numeric:tabular-nums}
.cpc-streak svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* footer + strip */
.cpc__foot{display:flex;align-items:center;gap:var(--s8-3);padding:9px var(--s8-4);border-top:1px solid var(--s8-line);background:var(--s8-panel-2);flex-wrap:wrap}
.cpc__pw{font-family:var(--s8-mono);font-size:var(--s8-fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--s8-fg-4)}
.cpc__pw a{color:var(--s8-fg-3)}
.cpc__pw a:hover{color:#fff}
.cpc__acts{display:flex;align-items:center;gap:var(--s8-2);margin-left:auto}

/* pattern library */
.cpc-lib{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.cpc-lib--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cpc-lib>figure{margin:0;background:var(--s8-panel);padding:var(--s8-4);transition:background var(--s8-t) var(--s8-ease);--cpc-up:var(--s8-buy-hi);--cpc-down:var(--s8-sell);--cpc-grid:rgba(255,255,255,.04);--cpc-guide:rgba(138,213,255,.5);--cpc-veil:rgba(8,9,11,.62)}
.cpc-lib>figure:hover{background:var(--s8-panel-2)}
.cpc-lib canvas{display:block;width:100%;height:96px;background:var(--s8-inset);border:1px solid var(--s8-line);border-radius:var(--s8-r)}
.cpc-lib figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s8-2);margin-top:11px}
.cpc-lib b{font-size:var(--s8-fs-sm);font-weight:600;color:#fff}
.cpc-lib i{font-style:normal;flex:none;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--s8-fg-4)}
.cpc-lib i.up{color:var(--s8-up)}
.cpc-lib i.down{color:var(--s8-down)}

/* embed block */
.cpc-embed{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s8-7);align-items:start}
.cpc-embed .s8c-code{margin-top:0}
.cpc-why{display:flex;flex-direction:column;gap:var(--s8-3)}
.cpc-why div{display:flex;gap:10px;font-size:var(--s8-fs-sm);color:var(--s8-fg-2);text-wrap:pretty}
.cpc-why svg{width:15px;height:15px;flex:none;margin-top:2px;stroke:var(--s8-accent-fg);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Production game contract: the IDs below are consumed by js/Challenge.js. */
.cpc-game .cpc__stage{height:clamp(300px,34vw,440px)}
.cpc-game #candlestick{height:100%;background:var(--s8-inset)}
.cpc-game #instructions{display:flex}
.cpc-game #instructions br{display:none}
.cpc-game #timer,.cpc-game #score{display:none}
.cpc-game #question:empty{display:none!important}
.cpc-game #question{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))}
.cpc-game #question .option{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;width:100%;margin:0;padding:0 var(--s8-3);border:1px solid var(--s8-line-2);border-radius:var(--s8-r);background:var(--s8-panel-2);color:var(--s8-fg);font:inherit;font-size:var(--s8-fs-sm);font-weight:500;text-transform:capitalize;cursor:pointer;transition:background var(--s8-t) var(--s8-ease),border-color var(--s8-t) var(--s8-ease)}
.cpc-game #question .option:hover{background:var(--s8-hover);border-color:var(--s8-line-3)}
.cpc-game #feedback{position:absolute;left:50%;top:50%;z-index:4;display:none;transform:translate(-50%,-50%);padding:var(--s8-5);border:1px solid var(--s8-line-2);border-radius:var(--s8-r-lg);background:rgba(15,17,21,.96);box-shadow:0 18px 46px rgba(0,0,0,.42);color:var(--s8-fg);font-size:var(--s8-fs-base);line-height:1.6;text-align:center}
.cpc-game #feedback .highlight{color:var(--s8-accent-fg)}
.cpc-game .button-container{display:flex;align-items:center;justify-content:center;gap:var(--s8-2);margin-top:var(--s8-4)}
.cpc-game #startButton1,.cpc-game .share-button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--s8-h-md);padding:0 var(--s8-4);border:1px solid var(--s8-accent-line);border-radius:var(--s8-r);background:var(--s8-accent);color:var(--s8-on-accent);font:inherit;font-size:var(--s8-fs-sm);font-weight:600;cursor:pointer}
.cpc-game .share-button{width:var(--s8-h-md);padding:0}
.cpc-game .share-button svg{width:16px;height:16px;pointer-events:none}
.cpc-game .share-container{position:relative}
.cpc-game .share-dropdown{position:absolute;left:100%;top:0;z-index:5;display:none;min-width:140px;margin-left:var(--s8-2);padding:var(--s8-2);border:1px solid var(--s8-line-2);border-radius:var(--s8-r);background:var(--s8-panel-2);box-shadow:0 18px 46px rgba(0,0,0,.42)}
.cpc-game .share-dropdown.show{display:block}
.cpc-game .share-dropdown a{display:block;padding:7px 9px;border-radius:var(--s8-r-sm);font-size:var(--s8-fs-sm);color:var(--s8-fg-2)}
.cpc-game .share-dropdown a:hover{background:var(--s8-hover);color:#fff}
.cpc-close{border:1px solid var(--s8-gold-line);background:var(--s8-gold-tint);border-radius:var(--s8-r-lg);padding:var(--s8-8);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s8-2)}
.cpc-close .s8c-sub{text-align:center}

@media(max-width:1000px){.cpc__body--split{grid-template-columns:1fr}.cpc__rail{border-left:0;border-top:1px solid var(--s8-line)}.cpc-lib,.cpc-lib--3{grid-template-columns:repeat(2,minmax(0,1fr))}.cpc-embed{grid-template-columns:1fr}}
@media(max-width:700px){.cpc-game #question{grid-template-columns:repeat(2,minmax(0,1fr))}.cpc-game .cpc__stage{height:320px}.cpc__bar{align-items:flex-start;padding-top:var(--s8-3);padding-bottom:var(--s8-3)}.cpc__meta{gap:var(--s8-3)}}
@media(max-width:600px){.cpc-lib,.cpc-lib--3{grid-template-columns:1fr}.cpc-ans--3,.cpc-ans--2{grid-template-columns:1fr}.cpc__meta{gap:var(--s8-3)}.cpc__t{max-width:150px}.cpc-close{padding:var(--s8-6) var(--s8-4)}}