/* Stock chart document workspace. Layout only; chart data and interactions stay in the template script. */
html, body {
  height: auto !important;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body { background: #f4f4f5 !important; }
body:has(#chart-page) .sp-navbar { display:none !important; }
body#sp-app[data-ui="components"]:has(#chart-page) { padding-top:0 !important; margin-top:0 !important; }
body#sp-app[data-ui="components"]:has(#chart-page) #chart-page { margin-top:0 !important; }

#chart-page {
  --sp-up:#dc2626;
  --sp-down:#2563eb;
  position: relative !important;
  inset: auto !important;
  width: 100%;
  min-height: calc(100vh - 48px) !important;
  height: auto !important;
  margin: 0 auto;
  padding: 10px 14px 18px;
  overflow: visible !important;
  display: block !important;
  background: #f4f4f5 !important;
  color: #09090b;
  font-size: 15px;
  line-height: 1.6;
}

#chart-page *, #chart-page *::before, #chart-page *::after { box-sizing: border-box; }
#chart-page button, #chart-page a { font: inherit; }
#chart-page button:focus-visible, #chart-page a:focus-visible, #chart-page [tabindex="0"]:focus-visible {
  outline: 2px solid #71717a;
  outline-offset: 2px;
}

.chart-summary-shell { margin-bottom: 16px; }
.chart-summary-card,
.chart-workspace-card,
.chart-document-card {
  background: #fff !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.chart-summary-card {
  min-height: 72px;
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.chart-summary-actions .rt-live-box { display:none !important; }
.chart-summary-status { display:none !important; }
.chart-summary-card { flex-wrap:nowrap; }
.chart-price-asof { display:none !important; }

.chart-summary-identity { min-width: 0; }
.chart-summary-title,
.chart-summary-status,
.chart-summary-actions,
.chart-nav-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.chart-summary-title { gap: 12px; }
.chart-stock-name { font-size: 24px !important; line-height: 1.25; font-weight: 600 !important; letter-spacing: -.02em; }
.chart-global-theme-mark { color: #6b46c1; margin-right: 4px; }
.chart-stock-meta, .chart-price-asof, .chart-observation-note { color: #52525b; font-size: 14px; }
#chart-page .chart-detail-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #e4e4e7;
  border-radius: 6px !important;
  color: #27272a;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.chart-summary-status { margin-top: 10px; gap: 12px; }
#hdr-mcap { color: #52525b; font-size: 14px; font-variant-numeric: tabular-nums; }
#chart-page .wave-state-badge {
  padding: 3px 8px !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 6px !important;
  background: #f4f4f5 !important;
  color: #27272a !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.chart-summary-actions { justify-content: flex-end; flex: 0 0 auto; }
.chart-current-quote { min-width: 210px; text-align: right; font-variant-numeric: tabular-nums; }
#hdr-price { font-size: 30px !important; line-height: 1.2; font-weight: 600 !important; }
#hdr-chg { min-height: 24px; font-size: 14px !important; }
.chart-nav-actions button,
.chart-toolbar button {
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  cursor: pointer;
}
.chart-nav-actions button { background: #fff; border: 1px solid #e4e4e7; color: #27272a; font-weight: 500; }

.rt-live-box { min-width: 210px; padding: 8px 10px; border-radius: 6px; background: #fafafa; font-size: 12px; }
.rt-live-detail { font-size: 12px; }
.rt-live-box a { font-size: 12px !important; }

.chart-workspace-card { overflow: hidden; }
.chart-toolbar {
  min-height: 60px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid #e4e4e7;
  background: #fff;
}
.chart-toolbar-separator { width: 1px; height: 24px; margin: 0 2px; background: #e4e4e7; }
#chart-page .chart-toolbar button:not(.kc-tf):not(#kc-dual):not(#kc-ohlc){background:#fff!important;border:1px solid #e4e4e7!important;font-weight:500!important;}
.chart-readout {
  min-height: 40px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  border-bottom: 1px solid #e4e4e7;
  background: #fff;
  color: #52525b;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.chart-readout b { color: #18181b; font-weight: 500; }
#chart-readout-date { color: #18181b; font-weight: 600; }
#chart-source-date-note {width:100%;color:#52525b;font-size:14px;}
#chart-band-controls {
  padding: 10px 16px;
  border-bottom: 1px solid #e4e4e7;
  background: #fafafa;
  font-size: 14px;
  color: #27272a;
}
#chart-band-controls > div { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 12px; }
#chart-band-controls input { width: 100px; }

#cw {
  width: 100%;
  position: relative;
  height: calc(100dvh - 170px);
  min-height: 420px;
  overflow: hidden;
  position: relative;
  background: #fff;
}
.chart-cycle-inset{position:absolute;z-index:8;top:14px;right:18px;width:202px;padding:9px 10px;border:1px solid rgba(161,161,170,.58);border-radius:7px;background:rgba(255,255,255,.91);color:#3f3f46;font-size:10px;line-height:1.35;box-shadow:0 1px 3px rgba(0,0,0,.06);pointer-events:none;font-variant-numeric:tabular-nums}.chart-cycle-inset-title{margin-bottom:7px;color:#18181b;font-size:10px;font-weight:700}.chart-cycle-line,.chart-cycle-bar{display:grid;align-items:center;gap:7px;min-height:18px}.chart-cycle-line{grid-template-columns:1fr auto}.chart-cycle-line b,.chart-cycle-bar b{color:#18181b;font-weight:700}.chart-cycle-line.weak{color:#71717a}.chart-cycle-bar{grid-template-columns:56px 1fr 37px}.chart-cycle-bar i{display:block;height:5px;overflow:hidden;background:#e4e4e7;border-radius:999px}.chart-cycle-bar em{display:block;height:100%;background:#d97706;border-radius:inherit}.chart-cycle-inset small{display:block;margin-top:7px;padding-top:6px;border-top:1px solid #e4e4e7;color:#71717a;font-size:9px}@media(max-width:760px){.chart-cycle-inset{display:none!important}}
#mainChart { width: 100%; height: 100%; min-height: 420px; background: #fff; }

/* Standalone chart view: preserve legacy DOM sinks for inline scripts while
   keeping the viewport focused on the price canvas. */
#chart-page > .chart-analysis-nav,
#chart-page > #quarterly-performance,
#chart-page > #annual-valuation,
#chart-page > #signal-analysis,
#chart-page > #market-theme-analysis { display:none !important; }
.chart-header-search { display:flex; align-items:center; gap:4px; margin-right:8px; }
.chart-header-search input { width:150px; height:30px; padding:4px 8px; border:1px solid #d4d4d8; border-radius:5px; font-size:14px; }
.chart-header-search button { min-height:30px !important; padding:0 8px !important; font-size:14px !important; }
.chart-summary-actions { flex-wrap:wrap; }
.chart-annual-inset { position:absolute; left:18px; top:92px; z-index:4; width:min(300px,32vw); padding:7px 9px; border:1px solid #e4e4e7; border-radius:6px; background:rgb(255 255 255 / 92%); font-size:12px; }
.chart-annual-inset-title { display:flex; justify-content:space-between; align-items:center; color:#18181b; font-weight:600; }
.chart-annual-inset-title button { min-height:22px !important; padding:0 5px !important; border:1px solid #d4d4d8; border-radius:4px; background:#fff; font-size:12px !important; }
.chart-annual-inset-body { display:flex; flex-direction:column; gap:2px; margin-top:4px; color:#52525b; }
.chart-summary-identity #hdr-smartselect { display:flex; gap:6px; flex-wrap:nowrap; margin-top:4px; }
.chart-summary-identity #hdr-smartselect .chart-metric-label { display:none; }
.chart-summary-identity #hdr-smartselect > span { padding:2px 6px !important; font-size:12px !important; }
#chart-page.chart-font-small { font-size:13px; }
#chart-page.chart-font-large { font-size:17px; }

.chart-analysis-nav {
  margin: 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chart-analysis-nav a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  background: #fff;
  color: #27272a;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.chart-document-card { margin-bottom: 16px; padding: 20px; scroll-margin-top: 16px; }
.chart-section-heading { margin-bottom: 16px; display: flex; justify-content: space-between; gap: 16px; }
.chart-section-heading h2 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 600; }
.chart-section-heading p { margin: 3px 0 0; color: #52525b; font-size: 14px; }
.chart-analysis-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; }
.chart-table-scroll, #bottom-data { width: 100%; overflow-x: auto !important; overflow-y: hidden !important; }

#bottom-data {
  height: auto !important;
  min-height: 150px;
  padding: 0 !important;
  color: #18181b !important;
  font-size: 14px !important;
  border: 0 !important;
  background: #fff !important;
}
#bottom-data > table { min-width: 1480px; }
#bottom-data > div:first-child { min-height: 130px; font-size: 14px !important; }
#bottom-data table, .chart-table-scroll table, #rating-box table { border-collapse: collapse; width: 100%; font-size: 14px !important; }
#bottom-data th, #bottom-data td, .chart-table-scroll th, .chart-table-scroll td, #rating-box td {
  padding: 10px 12px !important;
  border-bottom: 1px solid #e4e4e7 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  font-variant-numeric: tabular-nums;
}
.chart-table-scroll table { min-width: 650px; }
.chart-table-scroll th { background: #fafafa; color: #52525b !important; font-weight: 500 !important; }
.chart-table-scroll th:first-child, .chart-table-scroll td:first-child { text-align: left !important; }
.chart-table-scroll th:not(:first-child), .chart-table-scroll td:not(:first-child) { text-align: right !important; }

.chart-rating-card { min-width: 0; }
.chart-smartselect { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.chart-smartselect > span {
  padding: 8px 10px !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 6px !important;
  background: #fafafa !important;
  color: #52525b !important;
  font-size: 14px !important;
}
.chart-smartselect .chart-metric-label { grid-column: 1 / -1; border: 0 !important; padding: 0 !important; background: transparent !important; color: #18181b !important; font-weight: 600; }
.chart-smartselect strong { float: right; color: #18181b !important; font-weight: 600; }
#rating-box { margin: 0 0 12px; color: #18181b; font-size: 14px !important; line-height: 1.6; }
#rating-box td:first-child { color: #52525b !important; text-align: left; }
#hdr-consensus { min-height: 24px; margin: 10px 0; color: #52525b !important; font-size: 14px !important; }
#per-chart { min-height: 170px; margin-top: 10px; overflow-x: auto; }
#per-chart svg { display: block; width: 396px; min-width: 396px; height: 168px; }

#signal-legend-modal {
  position: static !important;
  min-width: 0 !important;
  width: 100%;
  margin-top: 16px;
  padding: 16px !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 8px !important;
  background: #fafafa !important;
  box-shadow: none !important;
  color: #27272a !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
#signal-legend-modal div, #signal-legend-modal span, #signal-legend-modal button { font-size: 14px !important; }
#hdr-theme { min-height: 24px; color: #52525b !important; font-size: 15px !important; line-height: 24px; }
.chart-market-status {
  margin: 0 0 16px;
  padding: 12px 14px !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 8px;
  background: #fafafa !important;
  color: #52525b !important;
  font-size: 14px !important;
  line-height: 22px;
}
.chart-market-status span { font-size: 14px !important; }

@media (max-width: 1100px) {
  #chart-page { padding: 20px; }
  .chart-analysis-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .chart-summary-card { align-items: flex-start; flex-wrap: wrap; }
  .chart-summary-actions { width: 100%; justify-content: space-between; }
}

@media (max-width: 700px) {
  #chart-page { padding: 12px; }
  .chart-summary-card, .chart-document-card { padding: 16px; }
  .chart-summary-actions { align-items: flex-start; }
  .chart-current-quote { min-width: 0; text-align: left; }
  .chart-nav-actions { width: 100%; }
  .chart-nav-actions button { flex: 1; }
  .chart-toolbar { align-items: stretch; }
  .chart-toolbar-separator { display: none; }
  #cw, #mainChart { height: 640px; min-height: 640px; }
  .chart-smartselect { grid-template-columns: 1fr; }
  .chart-smartselect .chart-metric-label { grid-column: auto; }
}

/* Full-viewport chart terminal. Kept last to win over shared workspace rules. */
html:has(#chart-page), body:has(#chart-page) {
  height: 100% !important;
  overflow: hidden !important;
}
body:has(#chart-page) { background:#fff !important; }
#chart-page {
  width:100vw !important;
  height:100dvh !important;
  min-height:0 !important;
  margin:0 !important;
  padding:6px 8px !important;
  overflow:hidden !important;
  font-size:12px !important;
  line-height:1.35 !important;
}
.chart-summary-shell { margin:0 0 5px !important; }
.chart-summary-card {
  min-height:78px !important;
  padding:6px 8px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto 240px;
  align-items:start !important;
  gap:8px !important;
  border-radius:7px !important;
}
.chart-header-search { position:relative; width:240px; margin:0 !important; align-self:start; }
.chart-header-search-form { width:100%; height:36px; display:flex !important; align-items:center !important; gap:8px !important; }
#chart-page #global-search {
  width:176px !important;
  height:36px !important;
  min-height:36px !important;
  padding:8px 12px !important;
  border:1px solid var(--border,#e4e4e7) !important;
  border-radius:var(--radius,6px) !important;
  background:var(--card,#fff) !important;
  color:var(--foreground,#18181b) !important;
  font-size:14px !important;
  line-height:20px !important;
}
#chart-page .chart-header-search-form button {
  width:56px !important;
  height:36px !important;
  min-height:36px !important;
  padding:8px 10px !important;
  border:1px solid var(--border,#e4e4e7) !important;
  border-radius:var(--radius,6px) !important;
  background:var(--card,#fff) !important;
  color:var(--foreground,#18181b) !important;
  font-size:14px !important;
}
#chart-page #search-dropdown {
  top:40px !important;
  right:0 !important;
  left:auto !important;
  width:380px !important;
  max-width:min(380px,calc(100vw - 24px)) !important;
  border:1px solid #d4d4d8 !important;
  border-radius:7px !important;
  background:#fff !important;
  box-shadow:0 8px 24px rgba(0,0,0,.12) !important;
  font-size:11px !important;
}
.chart-summary-identity { display:flex; min-width:0; flex-direction:column; gap:4px; }
.chart-summary-identity .chart-nav-actions { justify-content:flex-start; }
.chart-summary-title { min-height:28px; flex-wrap:nowrap !important; gap:7px !important; white-space:nowrap; }
.chart-stock-name { font-size:19px !important; line-height:24px !important; }
.chart-stock-meta { min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:11px !important; }
#chart-page .chart-detail-link { min-height:24px !important; height:24px; padding:0 8px !important; border-radius:12px !important; font-size:10px !important; }
.chart-summary-status {
  display:flex !important;
  min-height:22px;
  margin:0 !important;
  flex-wrap:wrap !important;
  gap:3px 5px !important;
}
#hdr-mcap, #chart-page .wave-state-badge, .chart-context-chip {
  display:inline-flex !important;
  align-items:center;
  min-height:20px;
  padding:1px 5px !important;
  border:1px solid #e4e4e7 !important;
  border-radius:4px !important;
  background:#fafafa !important;
  color:#3f3f46 !important;
  font-size:9px !important;
  font-weight:600 !important;
  line-height:16px !important;
  white-space:nowrap;
}
.chart-context-chip.is-missing, .chart-annual-per.is-missing { color:#71717a !important; font-weight:400 !important; }
#chart-market-mount { display:inline-flex; min-width:0; }
#chart-market-mount .chart-market-status {
  margin:0 !important;
  padding:1px 5px !important;
  border:1px solid #e4e4e7 !important;
  border-radius:4px !important;
  background:#fafafa !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:16px !important;
}
#chart-market-mount .chart-market-status span { font-size:9px !important; }
#chart-page .chart-summary-identity #hdr-smartselect {
  display:flex !important;
  margin:0 !important;
  flex-wrap:nowrap !important;
  gap:3px !important;
}
#chart-page .chart-summary-identity #hdr-smartselect > span {
  min-height:20px;
  padding:1px 5px !important;
  border:1px solid #e4e4e7 !important;
  border-radius:4px !important;
  background:#fafafa !important;
  color:#52525b !important;
  font-size:9px !important;
  line-height:16px !important;
  white-space:nowrap;
}
#chart-page #hdr-smartselect strong { margin-left:2px; color:#18181b !important; font-weight:700; }
.chart-summary-actions { display:flex !important; flex-direction:column; align-items:flex-end !important; flex-wrap:nowrap !important; gap:4px !important; }
.chart-current-quote { min-width:112px !important; display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right; }
.chart-quote-detail { display:flex; align-items:center; justify-content:flex-end; gap:8px; white-space:nowrap; }
.chart-summary-actions .chart-header-search { align-self:flex-end; }
#hdr-price { font-size:20px !important; line-height:23px !important; }
#hdr-chg { min-height:20px !important; font-size:16px !important; line-height:20px; font-weight:600; }
.chart-price-asof { display:block !important; color:#52525b !important; font-size:10px !important; line-height:14px; white-space:nowrap; }
.chart-display-actions, .chart-nav-actions { display:flex; align-items:center; flex-wrap:nowrap !important; gap:2px !important; }
#chart-page .chart-display-actions button, #chart-page .chart-nav-actions button {
  min-width:29px;
  min-height:28px !important;
  height:28px;
  padding:0 6px !important;
  border:1px solid #d4d4d8 !important;
  border-radius:4px !important;
  background:#fff !important;
  color:#3f3f46 !important;
  font-size:10px !important;
  line-height:1 !important;
}
#chart-page .chart-nav-actions button { min-width:48px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#chart-page #kc-signals[aria-pressed="false"], #chart-page #kc-channels[aria-pressed="false"] { color:#71717a !important; background:#f4f4f5 !important; }
#chart-page button:disabled { cursor:not-allowed !important; opacity:.48; }
.chart-workspace-card { position:relative; border-radius:7px !important; }
.chart-toolbar {
  min-height:33px !important;
  height:33px;
  padding:2px 6px !important;
  flex-wrap:nowrap !important;
  gap:3px !important;
  overflow-x:auto;
  overflow-y:hidden;
}
#chart-page .chart-toolbar button {
  min-height:27px !important;
  height:27px;
  padding:0 7px !important;
  border-radius:4px !important;
  font-size:10px !important;
  white-space:nowrap;
}
.chart-toolbar-separator { height:18px !important; }
.chart-readout {
  min-height:27px !important;
  height:27px;
  margin-left:auto;
  padding:0 2px 0 12px !important;
  gap:12px !important;
  flex:0 0 auto;
  flex-wrap:nowrap !important;
  white-space:nowrap;
  border-bottom:0;
  font-size:10px !important;
  line-height:20px;
}
.chart-toolbar > button, .chart-toolbar > .chart-toolbar-separator { flex-shrink:0; }
.chart-data-notes { display:flex; flex-wrap:wrap; gap:3px 12px; }
.chart-data-notes:has(> span:not([hidden])) { padding:3px 8px; }
#chart-source-date-note, #chart-context-note { width:auto !important; color:#a16207 !important; font-size:9px !important; }
#cw { min-height:360px !important; }
#mainChart { min-height:360px !important; }
.chart-annual-inset {
  left:8px !important;
  top:8px !important;
  width:auto !important;
  min-width:248px;
  max-width:330px;
  padding:4px 6px !important;
  border-radius:4px !important;
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  font-size:9px !important;
  line-height:1.35;
}
.chart-annual-inset-title { font-size:9px !important; }
.chart-annual-inset-title button { min-height:18px !important; height:18px; padding:0 4px !important; font-size:9px !important; }
.chart-annual-inset-body { margin-top:2px !important; gap:1px !important; }
.chart-annual-per { margin-top:2px; padding-top:2px; border-top:1px solid #e4e4e7; color:#18181b; font-weight:600; }
#signal-legend-modal {
  position:absolute !important;
  z-index:30;
  top:66px;
  right:8px;
  width:min(430px,calc(100% - 16px)) !important;
  max-height:calc(100dvh - 150px);
  margin:0 !important;
  padding:10px !important;
  overflow:auto;
  border-radius:6px !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.14) !important;
  font-size:11px !important;
}
#signal-legend-modal div, #signal-legend-modal span, #signal-legend-modal button { font-size:11px !important; }
#chart-legacy-sinks { display:none !important; }

@media (max-width: 1500px) {
  .chart-summary-card { grid-template-columns:minmax(0,1fr) auto 240px; }
  .chart-summary-title { gap:5px !important; }
  #chart-market-mount { display:none; }
}
@media (max-width: 1050px) {
  #chart-page { padding:4px !important; }
  .chart-summary-card { grid-template-columns:minmax(0,1fr) auto 240px; }
  .chart-summary-actions { justify-content:flex-end !important; }
  .chart-header-search { width:240px; }
  #chart-page #global-search { width:176px !important; }
}