/* Shared Barnacle palette, based on Live operations. */
:root{color-scheme:dark;--bg:#0c121b;--panel:#141f2c;--muted:#93a6b9;--line:#2a3b4d;--green:#5de2ab;--blue:#67c9f1;--amber:#ffc879;--red:#ff8a93;--text:#e7eff7;--control-border:#40556d}
html,body{background:var(--bg);color:var(--text);font-family:system-ui,sans-serif}
a{color:var(--blue)}a:hover{color:#a8e5ff}
input,select,textarea,button{font-family:inherit;color:var(--text);background:var(--panel);border:1px solid var(--control-border);border-radius:6px;accent-color:var(--blue)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
button{cursor:pointer}button:hover:not(:disabled){background:#203247;border-color:var(--blue)}button:disabled{opacity:.55;cursor:default}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
small,.hint{color:var(--muted)}nav{border-color:var(--line)}
.brand{display:block;color:var(--blue);font-size:12px;letter-spacing:2px;text-decoration:none;margin-bottom:8px}
.home-page main,.account-page main{box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:12px;width:calc(100% - 32px);max-width:760px;padding:32px}
.home-page h1,.account-page h1{font-size:32px;line-height:1.2;margin-top:8px}
.home-page input,.account-page input{background:var(--bg);border:1px solid var(--control-border)}
.home-page button,.account-page button{background:#1b384b;color:var(--text);border:1px solid #47748c}
.home-page nav,.account-page nav{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.home-page #error{color:var(--red)}.account-page output{background:var(--bg);border:1px solid var(--line);color:var(--text)}
#explorer,#toolbar,#chartToolbar,#settings-panel,#searchResults{background:var(--panel);color:var(--text);border-color:var(--line);font-family:inherit}
#main,#chartMessage{background:var(--bg);color:var(--text)}
#settings-panel{border-radius:8px}#settings-panel h3{border-color:var(--line)}
#explorer a,#settings-panel a,#toggleExplorer{color:var(--blue)}
#searchBox,#chartToolbar button,#chartToolbar select,#chartToolbar input,#rangeForm input,#rangeForm select,#rangeForm button{background:var(--bg);color:var(--text);border:1px solid var(--control-border);border-radius:6px}
#chartToolbar button:hover,.search-item:hover,.search-item.active{background:#203247;color:var(--text)}
#chartToolbar button.active{background:#1b485d;border-color:var(--blue);color:var(--text)}
#chartStatus,#visibleRange,.drill-navigation,#rangeForm label,.search-exch{color:var(--muted)}
#chartDialog,#annotationTextDialog,.profile-date-dialog{background:var(--panel);color:var(--text);border-color:var(--control-border)}
.report-page{margin:0;padding:24px 32px;font:14px/1.5 system-ui,sans-serif}
.report-page main{max-width:1400px;margin:auto;padding:0;overflow-x:auto}
.report-page h1{font-size:32px}.report-page h2{color:var(--text)}
.report-page table{background:var(--panel)!important;border-collapse:collapse}
.report-page th,.report-page td{border-color:var(--line)!important;color:var(--text)!important}
.report-page th{background:#203247!important}.report-page td{background:var(--panel)!important}
.report-page a{color:var(--blue)!important}.report-page .hint{color:var(--muted)}
.health nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 16px;max-width:520px;margin-top:8px}
@media(max-width:650px){.home-page main,.account-page main{padding:24px;margin:24px auto}.report-page{padding:18px}.health nav{justify-content:flex-start}}
/* Closed-by-default sliding sidebar reserves space beside the chart. */
.chart-page #container{overflow-x:hidden}
.chart-page #explorer{position:relative;inset:auto;box-sizing:border-box;flex:0 0 min(340px,80vw);width:min(340px,80vw);height:100%;padding:18px;box-shadow:none;z-index:10;visibility:visible;transition:flex-basis .22s ease,width .22s ease,padding .22s ease,visibility .22s}
.chart-page #explorer.hidden{display:block;flex-basis:0;width:0;padding:18px 0;border:0;overflow:hidden;visibility:hidden}
.quote-header-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.quote-header-row .quote-identity{flex:1;min-width:0}
.quote-header-row #visibleRange{margin-left:auto;text-align:right;white-space:normal;font-size:13px}
@media(prefers-reduced-motion:reduce){.chart-page #explorer{transition:none}}
.explorer-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
#quoteSummary{padding:14px 24px 16px;border-bottom:1px solid var(--line);background:var(--bg);flex-shrink:0}
.quote-identity{display:flex;align-items:center;gap:12px}
#companyMonogram{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--blue);font-size:18px;font-weight:700}
#quoteMarket{color:var(--muted);font-size:12px}
#companyTitle{margin:2px 0 0;font-size:22px;line-height:1.25;overflow-wrap:anywhere}
.quote-values{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-variant-numeric:tabular-nums;margin-top:5px}
[data-quote-price]{font-size:40px;line-height:1.2;letter-spacing:-1px}
[data-quote-change]{font-size:23px;font-weight:650}
[data-quote-change][data-direction=up]{color:var(--green)}
[data-quote-change][data-direction=down]{color:var(--red)}
[data-quote-change][data-direction=flat]{color:var(--muted)}
[data-quote-stamp]{margin:5px 0 0;color:var(--muted);font-size:12px}
@media(max-width:650px){#quoteSummary{padding:10px 14px}#companyTitle{font-size:18px}[data-quote-price]{font-size:32px}[data-quote-change]{font-size:18px}.quote-header-row{gap:10px}.quote-header-row #visibleRange{flex-basis:100%}}
/* Shared ticker/company autocomplete on the home page and chart drawer. */
#search-container{position:relative;display:block;min-width:0}
#searchResults{box-sizing:border-box;position:absolute;top:calc(100% + 6px);left:0;width:100%;max-height:320px;overflow-y:auto;z-index:62;background:var(--panel);border:1px solid var(--control-border);border-radius:8px;box-shadow:0 12px 28px #0006}
#searchResults.hidden{display:none}
#searchResults .search-item{display:grid;grid-template-columns:6.5ch minmax(0,1fr) 6ch;gap:10px;align-items:center;min-height:44px;padding:8px 10px;box-sizing:border-box;color:var(--text);cursor:pointer;border-bottom:1px solid var(--line)}
#searchResults .search-symbol,#searchResults .search-name,#searchResults .search-exch{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;padding:0}
#searchResults .search-symbol{font-weight:700;font-size:14px}
#searchResults .search-name{font-size:12px;color:var(--text);opacity:1}
#searchResults .search-exch{font-size:11px;text-align:right;color:var(--muted);opacity:1}
#searchResults .search-item:hover,#searchResults .search-item.active{background:#203247}
#searchResults .search-empty{padding:12px;color:var(--muted);font-size:13px}
.home-page #search-container{flex:1 1 260px}
.home-page #symbol{box-sizing:border-box;width:100%;min-width:0;text-transform:none}
.home-page #searchResults .search-item{grid-template-columns:8ch minmax(0,1fr) 7ch}
@media(max-width:450px){.home-page #searchResults .search-item{grid-template-columns:6.5ch minmax(0,1fr) 6ch;gap:8px}}

/* Narrow handle travels with the sidebar boundary without covering the chart. */
#explorerEdge{position:relative;flex:0 0 16px;background:var(--bg);border-right:1px solid var(--line);z-index:11}
#explorerEdge #toggleExplorer{position:absolute;top:26px;left:0;box-sizing:border-box;width:16px;height:52px;padding:0;border:1px solid var(--line);border-left:0;border-radius:0 5px 5px 0;background:var(--panel);color:var(--muted);font:24px/1 system-ui,sans-serif;display:grid;place-items:center;cursor:pointer}
#explorerEdge #toggleExplorer:hover,#explorerEdge #toggleExplorer:focus-visible{color:var(--blue);border-color:var(--blue);background:#203247}
#explorerEdge #toggleExplorer:focus-visible{outline-offset:-2px}
@media(pointer:coarse){#explorerEdge{flex-basis:28px}#explorerEdge #toggleExplorer{width:28px;height:56px}}
/* Sculpted edge grip: recessed rail, rounded shoulders and a raised face. */
#explorerEdge{flex-basis:20px;background:linear-gradient(90deg,#080e16,var(--bg) 65%);border-right-color:#223345}
#explorerEdge #toggleExplorer{top:28px;left:1px;width:19px;height:72px;border:1px solid #40556a;border-left-color:#182635;border-radius:3px 11px 11px 3px;background:linear-gradient(100deg,#172432 0%,#30475a 42%,#253b4e 64%,#162635 100%);color:#a9c5d7;box-shadow:inset 1px 0 1px #ffffff12,inset 0 1px 1px #ffffff24,inset 0 -2px 2px #0008,2px 1px 4px #0007;font-size:20px;text-shadow:0 1px 2px #000;transition:filter .15s,box-shadow .15s}
#explorerEdge #toggleExplorer::before,#explorerEdge #toggleExplorer::after{content:'';position:absolute;left:5px;right:5px;height:2px;border-top:1px solid #0a1520;border-bottom:1px solid #ffffff18;border-radius:2px;pointer-events:none}
#explorerEdge #toggleExplorer::before{top:15px}
#explorerEdge #toggleExplorer::after{bottom:15px}
#explorerEdge #toggleExplorer:hover,#explorerEdge #toggleExplorer:focus-visible{background:linear-gradient(100deg,#1d3040,#3c5a70 45%,#21394d);color:#bcecff;border-color:#5a829b}
#explorerEdge #toggleExplorer:active{filter:brightness(.9);box-shadow:inset 1px 1px 4px #0008}
@media(pointer:coarse){#explorerEdge{flex-basis:28px}#explorerEdge #toggleExplorer{width:27px;height:76px}}
@media(prefers-reduced-motion:reduce){#explorerEdge #toggleExplorer{transition:none}}
/* Full-height sculpted rail, with the toggle and grip marks centered. */
#explorerEdge #toggleExplorer{top:0;bottom:0;height:100%;border-radius:0 7px 7px 0}
#explorerEdge #toggleExplorer::before{top:calc(50% - 22px)}
#explorerEdge #toggleExplorer::after{top:calc(50% + 20px);bottom:auto}
/* Slim rail with its arrow near the top. */
#explorerEdge{flex-basis:10px}
#explorerEdge #toggleExplorer{left:0;width:10px;border-radius:0 4px 4px 0;align-items:start;padding-top:24px;font-size:16px}
#explorerEdge #toggleExplorer::before,#explorerEdge #toggleExplorer::after{left:2px;right:2px}
#explorerEdge #toggleExplorer::before{top:17px}
#explorerEdge #toggleExplorer::after{top:47px}
@media(pointer:coarse){#explorerEdge{flex-basis:14px}#explorerEdge #toggleExplorer{width:14px}}
/* Navigation stays with the chart column as the sidebar expands. */
#chartNavigation{display:flex;align-items:center;gap:18px;flex:0 0 auto;margin:0;padding:6px 18px;min-height:20px;overflow-x:auto;white-space:nowrap;background:var(--panel);border-bottom:1px solid var(--line);font-size:12px;line-height:20px}
#chartNavigation a{color:var(--blue);text-decoration:none}
#chartNavigation a:hover{text-decoration:underline}
/* Site navigation spans both columns and stays outside the sliding layout. */
body.chart-page{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.chart-page>#chartNavigation{width:100%;box-sizing:border-box}
.chart-page>#container{flex:1;min-height:0;height:auto}
/* Fixed grip spans the navigation and chart without covering either. */
body.chart-page{--grip-width:10px;padding-left:var(--grip-width);box-sizing:border-box}
.chart-page>#explorerEdge{position:fixed;inset:0 auto 0 0;width:var(--grip-width);box-sizing:border-box;z-index:63}
.chart-page>#explorerEdge #toggleExplorer{width:100%}
@media(pointer:coarse){body.chart-page{--grip-width:14px}}

/* Keep the arrow level with the company badge, including wrapped headers. */
#explorerEdge #toggleExplorer{padding-top:0}
#explorerEdge #toggleExplorer>span{position:absolute;top:var(--grip-arrow-y,70px);left:0;right:0;text-align:center;transform:translateY(-50%)}
#explorerEdge #toggleExplorer::before{top:calc(var(--grip-arrow-y,70px) - 22px)}
#explorerEdge #toggleExplorer::after{top:calc(var(--grip-arrow-y,70px) + 20px)}
#companyMonogram{overflow:hidden}
#companyMonogram img{display:block;width:100%;height:100%;object-fit:contain;background:white}

/* One continuous header and edge surface; no dividing seam. */
.chart-page>#explorerEdge{background:var(--panel);border:0}
.chart-page>#explorerEdge #toggleExplorer{border:0;border-radius:0;background:var(--panel);box-shadow:none}
.chart-page>#explorerEdge #toggleExplorer::before,.chart-page>#explorerEdge #toggleExplorer::after{display:none}
.chart-page>#explorerEdge #toggleExplorer:hover{background:var(--panel);color:var(--blue)}

/* Shared top navigation for every page, including generated reports. */
body>.site-navigation,body>#chartNavigation.site-navigation{display:flex;flex-wrap:nowrap;align-items:center;gap:18px;box-sizing:border-box;width:100%;min-height:33px;flex:0 0 auto;margin:0;padding:6px 18px;border:0;border-bottom:1px solid var(--line);background:var(--panel);font:12px/20px system-ui,sans-serif;white-space:nowrap;overflow-x:auto;position:sticky;top:0;z-index:62}
body>.site-navigation a{color:var(--blue);text-decoration:none;flex-shrink:0}
body>.site-navigation a:hover{text-decoration:underline}
body.report-page{padding:0 32px 24px}
body.report-page>.site-navigation{width:calc(100% + 64px);margin:0 -32px 24px}
@media(max-width:650px){body.report-page{padding:0 18px 18px}body.report-page>.site-navigation{width:calc(100% + 36px);margin:0 -18px 18px}}
/* Home and report drawers push the content beside the stationary grip. */
body.drawer-page{--grip-width:10px;display:flex;flex-direction:column;height:100dvh;overflow:hidden;box-sizing:border-box;margin:0;padding:0 0 0 var(--grip-width)}
body.drawer-page>.site-navigation{width:100%;margin:0;position:relative}
.drawer-page>#explorerEdge{position:fixed;inset:0 auto 0 0;width:var(--grip-width);z-index:63;background:var(--panel);border:0}
.drawer-page>#explorerEdge #toggleExplorer{width:100%;border:0;border-radius:0;background:var(--panel);box-shadow:none;margin:0}
.drawer-page>#explorerEdge #toggleExplorer::before,.drawer-page>#explorerEdge #toggleExplorer::after{display:none}
.page-layout{display:flex;flex:1;min-height:0;overflow:hidden}
#pageDrawer{box-sizing:border-box;flex:0 0 0;width:0;overflow:hidden;visibility:hidden;background:var(--panel);padding:18px 0;transition:flex-basis .22s,width .22s,padding .22s,visibility .22s}
.drawer-open #pageDrawer{flex-basis:min(340px,80vw);width:min(340px,80vw);padding:18px;visibility:visible}
#pageDrawer>strong{display:block;white-space:nowrap;margin-bottom:18px}
#pageDrawer nav{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0;padding:0;border:0;white-space:nowrap}
#pageDrawer a{display:block;padding:10px 12px;border-radius:6px;text-decoration:none}
#pageDrawer a:hover{background:#203247}
#pageContent{flex:1;min-width:0;overflow:auto}
.report-page #pageContent{padding:24px 32px}
@media(max-width:650px){.report-page #pageContent{padding:18px}}
@media(pointer:coarse){body.drawer-page{--grip-width:14px}}
@media(prefers-reduced-motion:reduce){#pageDrawer{transition:none}}

/* Collapsible chart controls above an always-visible bottom status strip. */
.chart-page #main{min-height:0;overflow:hidden}
.chart-page #chartContainer{min-height:0}
#chartControlsDrawer{display:grid;grid-template-rows:0fr;flex:0 0 auto;visibility:hidden;transition:grid-template-rows .22s ease,visibility .22s}
#chartControlsDrawer.open{grid-template-rows:1fr;visibility:visible}
.chart-controls-inner{min-height:0;overflow:hidden}
#chartControlsDrawer #chartToolbar{box-sizing:border-box;max-height:40dvh;overflow:auto;margin:0}
#chartFooter{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-height:32px;box-sizing:border-box;padding:3px 12px;background:var(--panel);border-top:1px solid var(--line)}
#chartFooter #chartStatus{flex:1;min-width:0;padding:0;font-size:12px}
.footer-toggle{display:flex;align-items:center;gap:8px;flex-shrink:0;margin:0;padding:3px 8px;border:0;background:transparent;color:var(--blue);font-size:12px}
.footer-toggle:hover{background:#203247}
@media(prefers-reduced-motion:reduce){#chartControlsDrawer{transition:none}}

.footer-panel[hidden]{display:none!important}
#studiesPanel{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.footer-toggle[aria-expanded="true"]{background:#203247;color:var(--text)}
@media(max-width:650px){#chartFooter{flex-wrap:wrap;gap:4px}#chartFooter #chartStatus{flex-basis:100%}}

#indicatorsPanel{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 20px}
#indicatorsPanel>label{display:flex;align-items:center;gap:8px;font-size:14px}
#indicatorsPanel input[type="range"]{min-width:70px;max-width:150px}
#indicatorsPanel .color-box{flex-shrink:0}

#settings-panel input.indicator-color,#indicatorsPanel input.indicator-color{appearance:none;box-sizing:border-box;width:20px;height:20px;min-width:20px;flex:0 0 20px;padding:0;margin:0;border:1px solid var(--control-border);border-radius:2px;background:transparent;cursor:pointer}
.indicator-color::-webkit-color-swatch-wrapper{padding:0}
.indicator-color::-webkit-color-swatch{border:0}
.indicator-color::-moz-color-swatch{border:0}
