/* Analysis and Compare, in the Flight Deck style. Tokens, title bar, chamfered
   panels (.card, .tile), selects and footer come from the deck block of
   template.html, which build.py embeds in the page. Chart series colours are set
   in analysis.js and are not restyled here. */
a{color:inherit;text-underline-offset:3px}
.workspace{padding-bottom:28px}
main{display:block}

.heading{position:relative;display:flex;gap:24px;align-items:flex-end;justify-content:space-between;margin:0 0 16px;padding:18px 2px 14px}
.heading::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--B),transparent 55%,var(--A));opacity:.45}
.eyebrow{margin:0;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--B);text-shadow:0 0 12px var(--B-g)}
h1{margin:10px 0 6px;font-size:26px;font-weight:600;line-height:1.15;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-shadow:0 0 20px var(--A-g)}
h2{margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);text-shadow:0 0 14px var(--acc-g)}
h3{margin:0 0 10px;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--B)}
.lede{margin:6px 0 0;color:var(--dim);font-size:11.5px}
.badge{white-space:nowrap;padding:6px 12px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--D);background:var(--D-w);border:1px solid rgba(92,255,138,.45);text-shadow:0 0 8px var(--D-g);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.notice{margin:0;padding:11px 16px;font-size:11.5px;line-height:1.65;color:#F2CF95;background:rgba(255,180,60,.06);border-left:2px solid var(--gate);box-shadow:-6px 0 18px -10px var(--gate-g)}

/* section tabs */
.sections{display:flex;gap:4px 20px;flex-wrap:wrap;margin:18px 0 14px;padding:0 2px;border-bottom:1px solid var(--line-2)}
.sections button{min-height:0;padding:10px 0;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--dim);font-size:10px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.sections button:hover{color:var(--ink);background:none}
.sections button[aria-pressed=true]{color:var(--gate);border-bottom-color:var(--gate);text-shadow:0 0 10px var(--gate-g);background:none}

/* fields and buttons */
button,select,input{font-family:inherit;color:var(--ink);background-color:var(--s1);border:1px solid var(--line-2);border-radius:0;min-height:34px;padding:7px 10px}
button{cursor:pointer;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
button:hover{color:var(--B);border-color:var(--line);background-color:var(--s1)}
button:disabled{cursor:wait;opacity:.6}
button.primary{color:var(--B);border-color:var(--B);background:var(--B-w);box-shadow:0 0 12px -3px var(--B-g);text-shadow:0 0 8px var(--B-g)}
button.primary:hover{color:#04191F;background:var(--B);text-shadow:none}
select{padding-right:30px}
input::placeholder{color:var(--faint)}
input[type=date]{color-scheme:dark}
label{display:flex;flex-direction:column;gap:5px;font-size:9.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
input,select{font-size:11px;letter-spacing:.04em;text-transform:none;max-width:100%}
input:focus,select:focus{border-color:var(--B);box-shadow:0 0 12px -4px var(--B-g);outline:none}
input:focus-visible,select:focus-visible{outline:2px solid var(--B);outline-offset:3px}
input[type=number]{width:150px}

.toolbar,.inline{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.toolbar{padding:10px 12px 10px 16px;background:rgba(19,14,36,.78);border:1px solid var(--line-2);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.toolbar select{min-width:170px}
.presets{display:flex;gap:3px}
.presets button{padding:7px 10px}
.status{min-height:20px;margin:10px 0;font-size:10.5px;letter-spacing:.04em;color:var(--quiet)}
.error{color:var(--A)}

/* panels */
.panel{display:grid;gap:14px}
.panel[hidden]{display:none}
.card{padding:20px 22px;min-width:0}
.card p{color:var(--quiet);font-size:11px;line-height:1.6;margin:6px 0 16px;max-width:90ch}
.card-head{display:flex;align-items:start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.card-head label{min-width:190px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{--c:10px;padding:16px 18px 14px}
.tile:nth-child(4n+1){--acc:var(--B);--acc-g:var(--B-g)}
.tile:nth-child(4n+2){--acc:var(--C);--acc-g:var(--C-g)}
.tile:nth-child(4n+3){--acc:var(--gate);--acc-g:var(--gate-g)}
.tile:nth-child(4n){--acc:var(--D);--acc-g:var(--D-g)}
.tile .k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);text-shadow:0 0 10px var(--acc-g)}
.tile .v{font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.01em;margin:10px 0 5px;color:var(--ink)}
.tile .d{font-size:10.5px;color:var(--quiet)}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* charts: the canvas keeps its own pinned palette (see the deck block) */
.chart{position:relative;min-height:90px;margin:14px 0}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font:11px 'IBM Plex Mono',monospace;fill:var(--ink-2)}
.legend{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.legend span{display:flex;gap:7px;align-items:center}
.legend i{width:16px;height:3px;display:inline-block}
.chart-readout{font-size:10.5px;color:var(--dim);padding:8px 0;min-height:30px}
.chart details{font-size:11px;color:var(--dim);margin:6px 0}
.chart details summary{cursor:pointer;color:var(--C);letter-spacing:.08em}
.chart details .table-scroll{max-height:250px}

/* tables */
.table-scroll{overflow:auto;max-width:100%}
table{border-collapse:collapse;width:100%;font-size:11.5px;font-variant-numeric:tabular-nums}
th,td{text-align:right;padding:9px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap;color:var(--ink)}
th{font-size:9.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);background:rgba(11,7,22,.55);border-top:1px solid var(--line-2)}
th:first-child,td:first-child{text-align:left}
tbody tr:hover td{background:rgba(36,26,66,.35)}
td small{display:block;color:var(--quiet);font-size:10px}
.heat-pos{background:rgba(92,255,138,.12)}
.heat-neg{background:rgba(255,61,166,.14)}
.note{font-size:11px;line-height:1.6;color:var(--quiet)}
.empty{padding:26px 12px;border:1px dashed var(--line);text-align:center;color:var(--quiet);font-size:11px}
.picks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-height:190px;overflow:auto;margin:8px 0 20px}
.picks label{display:flex;flex-direction:row;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--s1);padding:5px 8px;font-size:11px;letter-spacing:.02em;text-transform:none;color:var(--ink);cursor:pointer;min-width:0}
.picks label:hover{border-color:var(--line)}
.picks label:has(input:checked){border-color:var(--B);background:var(--B-w)}
.picks label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picks input{min-height:0;padding:0;accent-color:var(--B)}
.method{padding-left:20px;font-size:11.5px;line-height:1.9;color:var(--dim)}
.upgrade-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:22px 0}
.upgrade-grid article{padding-left:16px;border-left:2px solid var(--C);box-shadow:-6px 0 18px -12px var(--C-g)}
.upgrade-grid strong{color:var(--ink)}
footer:not(.deck-foot){margin-top:26px;border-top:1px solid var(--line-2);padding-top:15px;color:var(--quiet);font-size:10.5px;line-height:1.7}
footer:not(.deck-foot) p{max-width:110ch}
footer:not(.deck-foot) a{color:var(--B)}
.breadth-row{display:grid;grid-template-columns:1fr auto;gap:5px;margin:16px 0;font-size:11px}
.breadth-row progress{width:100%;height:8px;grid-column:1/-1;accent-color:var(--B)}
.pill-small{background:var(--s3);border:1px solid var(--line);padding:1px 5px;font-size:9.5px;letter-spacing:.1em;color:var(--dim)}
.inline{margin:12px 0}

@media(max-width:850px){.tiles{grid-template-columns:repeat(2,1fr)}.two-up{grid-template-columns:1fr}.picks{grid-template-columns:repeat(3,1fr)}.heading .badge{display:none}}
@media(max-width:720px){.heading{margin-bottom:12px;padding-top:14px}h1{font-size:20px;letter-spacing:.12em}.card{padding:15px 14px}.tiles{gap:10px}.tile{padding:12px}.tile .v{font-size:19px}.toolbar{gap:9px;padding:10px}.toolbar label{flex:1;min-width:120px}.toolbar input,.toolbar select{width:100%;min-width:0}.toolbar #asset-control{flex-basis:100%}.sections{flex-wrap:nowrap;overflow-x:auto;gap:18px}.sections button{white-space:nowrap}.picks{grid-template-columns:repeat(2,1fr)}.upgrade-grid{grid-template-columns:1fr}.inline label{max-width:100%}th,td{padding:8px}.card-head label{width:100%}}
[hidden]{display:none!important}

#panel-long>.two-up{grid-template-columns:1fr}
#monthly th:first-child,#monthly td:first-child{position:sticky;left:0;background:#120D22}