.chart-guide-button { position:absolute; right:36px; bottom:74px; display:flex; align-items:center; gap:8px; min-height:44px; padding:10px 14px; border:1px solid #bbd6dc; border-radius:8px; background:#fff; color:#125669; font:700 .85rem/1.3 "Segoe UI",sans-serif; box-shadow:0 3px 14px #15384f26; z-index:1800; cursor:pointer; }
.chart-guide-button svg { flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.chart-guide-button:hover { background:#e8f5f4; border-color:#0b7580; }
dialog.chart-tool-guide { position:fixed; inset:auto; top:var(--guide-top,5vh); left:var(--guide-left,5vw); width:var(--guide-width,90vw); height:var(--guide-height,90dvh); max-width:none; max-height:none; margin:0; padding:0; border:1px solid #bcd2db; border-radius:14px; background:#f7fafb; color:#284658; box-shadow:0 16px 70px #102b4659; overflow:hidden; font:400 15px/1.5 "Segoe UI",sans-serif; }
dialog.chart-tool-guide[open] { display:flex; flex-direction:column; }
.chart-tool-guide::backdrop { background:#122d4666; }
.chart-guide-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px 10px; background:#fff; flex-shrink:0; }
.chart-guide-eyebrow { color:#0b7580; font-size:.67rem; font-weight:800; letter-spacing:.12em; }
.chart-guide-header h2 { margin:4px 0 0; color:#173a50; font-size:clamp(1.15rem,2vw,1.6rem); line-height:1.3; }
.chart-guide-close { min-height:40px; min-width:40px; border:1px solid #c8d9e1; border-radius:6px; color:#275368; background:#fff; cursor:pointer; font:600 .85rem/1.4 "Segoe UI",sans-serif; padding:8px 12px; }
.chart-guide-header .chart-guide-close { font-size:1.5rem; padding:2px; align-self:flex-start; }
#chart-guide-description { margin:0; padding:0 24px 14px; background:#fff; font-size:.85rem; color:#546d7b; flex-shrink:0; }
.chart-guide-filters { padding:0 24px 12px; background:#fff; border-bottom:1px solid #dce7eb; flex-shrink:0; }
.chart-guide-filters label { display:block; font-size:.72rem; color:#4d6879; margin-bottom:4px; }
.chart-guide-filters input { display:block; width:100%; height:40px; padding:8px 12px; border:1px solid #c4d7df; border-radius:6px; background:#f8fbfc; color:#234559; font:inherit; font-size:.9rem; }
.chart-guide-categories { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.chart-guide-categories button { min-height:36px; padding:6px 10px; border:1px solid #d4e1e7; border-radius:6px; background:#fff; color:#3b5d70; cursor:pointer; font:600 .75rem/1.4 "Segoe UI",sans-serif; }
.chart-guide-categories button[aria-pressed=true] { color:#075c63; background:#dff1ef; border-color:#94c9c4; }
.chart-guide-count { padding:10px 24px 0; margin:0; color:#607784; font-size:.75rem; flex-shrink:0; }
.chart-guide-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr)); align-content:start; align-items:start; gap:12px; padding:12px 24px 20px; overflow-y:auto; overscroll-behavior:contain; min-height:0; flex:1; }
.chart-guide-card { display:flex; flex-direction:column; gap:8px; padding:16px; background:#fff; border:1px solid #d5e3e8; border-radius:10px; min-width:0; }
.chart-guide-card-heading { display:flex; align-items:center; gap:10px; }
.chart-guide-symbol { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; color:#087784; background:#e8f5f4; border-radius:8px; font-size:1.25rem; }
.chart-guide-card h3 { margin:0; font-size:1rem; line-height:1.35; color:#20495d; }
.chart-guide-card p { font-size:.83rem; line-height:1.6; margin:0; color:#4c6574; }
.chart-guide-card details { padding-top:4px; }
.chart-guide-card summary { color:#14657a; font-weight:700; font-size:.8rem; cursor:pointer; padding:5px 0; }
.chart-guide-card ol { margin:8px 0; padding-left:21px; list-style:decimal; font-size:.82rem; line-height:1.65; }
.chart-guide-card li + li { margin-top:6px; }
.chart-guide-card img { display:block; width:100%; height:auto; max-height:240px; object-fit:contain; border-radius:6px; border:1px solid #dce6eb; margin-top:10px; background:#f0f5f7; }
.chart-guide-example { padding-top:8px; color:#315e67 !important; }
.chart-guide-controls { margin-top:auto; align-self:flex-start; min-height:36px; padding:6px 0; background:none; border:0; color:#086578; font:700 .8rem/1.5 "Segoe UI",sans-serif; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.chart-guide-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 24px; border-top:1px solid #dce7eb; background:#fff; flex-shrink:0; }
.chart-guide-footer span { color:#617783; font-size:.75rem; }
.chart-guide-empty { padding:24px; color:#566f80; flex:1; }
.chart-tool-guide [hidden] { display:none !important; }
.chart-tool-guide :focus-visible, .chart-guide-button:focus-visible { outline:3px solid #d39a27; outline-offset:2px; }
.chart-guide-highlight { outline:3px solid #d49614 !important; outline-offset:3px; background:#fff4c9 !important; color:#5d4205 !important; }
.ruler-controls.chart-guide-located { max-height:var(--guide-controls-height,60vh) !important; overflow-y:auto !important; }
@media(max-width:760px) {
    .chart-guide-button { right:32px; bottom:62px; padding:8px 10px; font-size:.76rem; }
    .chart-guide-header { padding:14px 16px 8px; }
    #chart-guide-description { padding:0 16px 10px; font-size:.78rem; }
    .chart-guide-filters { padding:0 16px 10px; }
    .chart-guide-categories { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
    .chart-guide-categories button { flex-shrink:0; }
    .chart-guide-list { padding:10px 16px; grid-template-columns:1fr; }
    .chart-guide-count { padding:8px 16px 0; }
    .chart-guide-footer { padding:10px 16px; }
    .chart-guide-footer span { max-width:52%; }
}
@media(max-height:500px) { #chart-guide-description, .chart-guide-eyebrow, .chart-guide-filters label, .chart-guide-count { display:none; } .chart-guide-header { padding:8px 16px; } .chart-guide-footer { padding:6px 16px; } }