/* Sector Map page.
   Shares the hero, bands, chips and accordions with the Sustainable Dividend page
   (css/sustainable-dividends.css, loaded first); this file adds the market strip, the treemap, the
   value-vs-profit chart, the strip-a-sector-out readout, the crash bars and the story cards.

   Colour: one diverging pair, red (hotter, more stretched) against blue (cooler), neutral grey between,
   on the map; and red (fell) against blue (rose) on the crash bars. Every tile and bar also carries an
   arrow and its number in plain ink, so colour is never the only signal. */

.sm-notes{ grid-template-columns: minmax(0,1fr); }

/* ---------------- the market strip (what the Crash Indicator sees) ---------------- */
.sm-market{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin: 0 0 26px; }
.sm-mk{ display:flex; flex-direction:column; gap:5px; padding:16px 18px; border-radius:var(--radius-sm); text-decoration:none; background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); transition: border-color .15s ease, background .15s ease; }
.sm-mk:hover{ border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.08); }
.sm-mk:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.sm-mk b{ font-family:'Instrument Sans', sans-serif; font-size:clamp(24px, 3vw, 32px); font-weight:600; line-height:1.05; color:#fff; font-variant-numeric: tabular-nums; }
.sm-mk span{ font-size:13px; line-height:1.35; color:#fff; }
.sm-mk small{ font-size:11.5px; line-height:1.4; color: rgba(255,255,255,0.55); }
.sm-market-cap{ margin:-12px 0 24px; font-size:12.5px; line-height:1.55; color: rgba(255,255,255,0.6); }

/* ---------------- the map ---------------- */
.sm-map-wrap{ position:relative; z-index:1; }
.sm-map{ position:relative; width:100%; min-height:280px; border-radius:var(--radius-sm); overflow:hidden; background: rgba(255,255,255,0.03); }
.sm-tile{
  position:absolute; box-sizing:border-box; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:3px;
  padding:9px 11px; margin:0; text-align:left; font:inherit; color:#fff; cursor:pointer; overflow:hidden;
  border:2px solid #121220; border-radius:6px; transition: filter .15s ease, border-color .15s ease;
}
.sm-tile:hover{ filter:brightness(1.18); }
.sm-tile:focus-visible{ outline:3px solid #fff; outline-offset:-3px; z-index:2; }
.sm-tile--on{ border-color:#fff; z-index:1; }
.sm-tile--na{ background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 6px, transparent 6px 12px); }
.sm-tile-name{ font-size:13px; font-weight:800; line-height:1.2; letter-spacing:.01em; }
.sm-tile--big .sm-tile-name{ font-size:15px; }
.sm-tile--sm{ padding:6px 7px; }
.sm-tile--sm .sm-tile-name{ font-size:11px; }
.sm-tile-val{ display:flex; align-items:center; gap:5px; font-size:15px; font-weight:800; font-variant-numeric: tabular-nums; }
.sm-tile--big .sm-tile-val{ font-size:22px; }
.sm-tile-sub{ font-size:11.5px; line-height:1.3; color: rgba(255,255,255,0.78); }
.sm-tile-w{ margin-top:auto; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: rgba(255,255,255,0.62); }
.sm-gl{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:15px; font-style:normal; font-size:11px; line-height:1; }
.sm-map-why{ margin:12px 2px 0; font-size:13px; line-height:1.55; color: rgba(255,255,255,0.68); }
.sm-legend{ display:flex; align-items:center; gap:3px; margin:14px 2px 0; font-size:11.5px; color: rgba(255,255,255,0.6); }
.sm-leg-sw{ display:inline-block; width:26px; height:10px; border-radius:2px; }
.sm-leg-end{ margin:0 8px; }
.sm-legend-note{ margin:6px 2px 0; font-size:11.5px; color: rgba(255,255,255,0.5); }

/* the panel under the map */
.sm-detail{ position:relative; z-index:1; margin-top:22px; padding:22px; border-radius:var(--radius-sm); background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); min-height:120px; }
.sm-detail-hint{ margin:0; font-size:14px; color: rgba(255,255,255,0.6); }
.sm-detail-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin-bottom:16px; }
.sm-detail-head h3{ margin:0; font-family:'Instrument Sans', sans-serif; font-weight:600; font-size:26px; color:#fff; }
.sm-detail-head span{ font-size:13px; color: rgba(255,255,255,0.6); }
.sm-detail-grid{ display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap:24px; align-items:start; }
.sm-detail h4{ margin:0 0 8px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: rgba(255,255,255,0.5); }
.sm-detail h4:not(:first-child){ margin-top:16px; }
.sm-table{ width:100%; border-collapse:collapse; font-size:13px; line-height:1.4; }
.sm-table th, .sm-table td{ padding:8px 8px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.1); vertical-align:top; }
.sm-table thead th{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: rgba(255,255,255,0.5); }
.sm-table tbody th{ font-weight:700; color:#fff; }
.sm-table td{ color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sm-table td:nth-child(2){ color:#fff; font-weight:700; }
.sm-stands{ margin:0; padding-left:18px; font-size:13.5px; line-height:1.6; color: rgba(255,255,255,0.78); }
.sm-stands li{ margin-bottom:7px; }
.sm-note{ margin:8px 0 0; font-size:12.5px; line-height:1.55; color: rgba(255,255,255,0.6); }
.sm-stocks{ display:flex; flex-wrap:wrap; gap:7px; }
.sm-stock{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; padding:7px 11px; border-radius:var(--radius-sm); font:inherit; font-size:13px; font-weight:800; color:#fff; cursor:pointer; background: rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.2); }
.sm-stock small{ font-size:11px; font-weight:600; color: rgba(255,255,255,0.55); }
.sm-stock:hover{ border-color:#fff; }
.sm-stock:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.sm-sr{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------------- value share vs profit share ---------------- */
.sm-db{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,0.1); }
.sm-db-key{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:6px 22px; margin:0 2px 10px; font-size:12px; color: rgba(255,255,255,0.65); }
.sm-db-sw{ display:inline-block; width:11px; height:11px; margin-right:7px; border-radius:50%; vertical-align:-1px; }
.sm-db-sw--val{ background:#3987E5; }
.sm-db-sw--prof{ background:#F0A44B; }
.sm-db-row{ display:grid; grid-template-columns: 150px minmax(0,1fr) 84px; align-items:center; column-gap:16px; padding:11px 4px; border-bottom:1px solid rgba(255,255,255,0.08); }
.sm-db-name{ font-size:13.5px; font-weight:700; color:#fff; }
.sm-db-track{ position:relative; display:block; height:20px; }
.sm-db-track::before{ content:""; position:absolute; left:0; right:0; top:9px; height:2px; background: rgba(255,255,255,0.08); border-radius:1px; }
.sm-db-link{ position:absolute; top:8px; height:4px; background: rgba(255,255,255,0.35); border-radius:2px; }
.sm-db-dot{ position:absolute; top:3px; width:14px; height:14px; margin-left:-7px; border-radius:50%; border:2px solid #121220; }
.sm-db-dot--val{ background:#3987E5; }
.sm-db-dot--prof{ background:#F0A44B; }
.sm-db-num{ display:flex; align-items:center; justify-content:flex-end; gap:4px; font-size:14px; font-weight:800; color:#fff; font-variant-numeric: tabular-nums; }

/* ---------------- take a sector out ---------------- */
.sm-strip{ position:relative; z-index:1; display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:start; }
.sm-strip-out{ padding:18px 20px; border-radius:var(--radius-sm); background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.sm-strip-row{ display:grid; grid-template-columns: minmax(0,1.3fr) auto auto auto minmax(70px,auto); align-items:baseline; column-gap:10px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.08); font-size:13px; color: rgba(255,255,255,0.7); cursor:help; }
.sm-strip-row b{ font-size:18px; font-weight:800; color:#fff; font-variant-numeric: tabular-nums; }
.sm-strip-row i{ font-style:normal; color: rgba(255,255,255,0.4); }
.sm-strip-row small{ font-size:11px; color: rgba(255,255,255,0.5); text-align:right; }

/* ---------------- the crashes ---------------- */
.sm-ep-ctl{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px 28px; margin-bottom:16px; }
.sm-ep{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,0.1); }
.sm-ep-row{ display:grid; grid-template-columns: 170px minmax(0,1fr) 80px; align-items:center; column-gap:14px; padding:9px 4px; border-bottom:1px solid rgba(255,255,255,0.08); }
.sm-ep-row--spy{ background: rgba(255,255,255,0.04); }
.sm-ep-name{ display:flex; flex-direction:column; font-size:13.5px; font-weight:700; color:#fff; }
.sm-ep-name small{ font-size:11px; font-weight:600; color: rgba(255,255,255,0.45); }
.sm-ep-track{ position:relative; display:block; height:16px; }
.sm-ep-zero{ position:absolute; top:-3px; bottom:-3px; width:1.5px; background: rgba(255,255,255,0.45); }
.sm-ep-bar{ position:absolute; top:2px; bottom:2px; border-radius:2px; }
.sm-ep-bar--neg{ background:#E66767; }
.sm-ep-bar--pos{ background:#3987E5; }
.sm-ep-bar--spy{ background: repeating-linear-gradient(135deg, #F2F0EA 0 4px, #8a8aa0 4px 8px); }
.sm-ep-val{ display:flex; align-items:center; justify-content:flex-end; gap:4px; font-size:14px; font-weight:800; color:#fff; font-variant-numeric: tabular-nums; }
.sm-ep-text{ position:relative; z-index:1; margin-top:18px; max-width:760px; }
.sm-ep-text p{ margin:0 0 10px; font-size:14px; line-height:1.65; color: rgba(255,255,255,0.74); }
.sm-ep-live{ padding:14px 18px; border-radius:var(--radius-sm); background: rgba(57,135,229,0.10); border:1px solid rgba(57,135,229,0.35); color: rgba(255,255,255,0.82) !important; }
.sm-ep-live b{ color:#fff; }

/* ---------------- the story: how a sector bubble builds ---------------- */
.sm-steps{ position:relative; z-index:1; display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:12px; margin:6px 0 0; padding:0; list-style:none; counter-reset: step; }
.sm-step{ position:relative; counter-increment: step; padding:18px 16px 16px; border-radius:var(--radius-sm); background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.sm-step::before{ content: counter(step); display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin-bottom:10px; border-radius:50%; font-size:13px; font-weight:800; color:#11161A; background:#fff; }
.sm-step h3{ margin:0 0 6px; font-family:'Instrument Sans', sans-serif; font-weight:600; font-size:17px; line-height:1.25; color:#fff; }
.sm-step p{ margin:0 0 8px; font-size:12.5px; line-height:1.6; color: rgba(255,255,255,0.7); }
.sm-step p:last-child{ margin-bottom:0; }
.sm-step em{ font-style:normal; font-weight:700; color:#fff; }
.sm-live{ position:relative; z-index:1; margin:16px 0 0; padding:16px 20px; border-radius:var(--radius-sm); background: rgba(230,103,103,0.10); border:1px solid rgba(230,103,103,0.38); font-size:14px; line-height:1.65; color: rgba(255,255,255,0.82); }
.sm-live b{ color:#fff; }
.sm-two{ position:relative; z-index:1; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; margin-top:6px; }
.sm-card{ padding:20px 22px; border-radius:var(--radius-sm); background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.sm-card h3{ margin:0 0 8px; font-family:'Instrument Sans', sans-serif; font-weight:600; font-size:20px; line-height:1.2; color:#fff; }
.sm-card p{ margin:0 0 8px; font-size:13.5px; line-height:1.6; color: rgba(255,255,255,0.72); }
.sm-card p:last-child{ margin-bottom:0; }
.sm-card b{ color:#fff; }
.sm-card a{ color:#fff; text-decoration:underline; }

/* ---------------- responsive ---------------- */
@media (max-width: 1080px){
  .sm-steps{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 960px){
  .sm-market{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm-detail-grid, .sm-strip, .sm-two{ grid-template-columns: minmax(0,1fr); }
  .sm-steps{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .sm-db-row{ grid-template-columns: 92px minmax(0,1fr) 70px; column-gap:10px; }
  .sm-ep-row{ grid-template-columns: 104px minmax(0,1fr) 62px; column-gap:10px; }
  .sm-strip-row{ grid-template-columns: minmax(0,1fr) auto auto auto; }
  .sm-strip-row small{ display:none; }
  .sm-detail{ padding:16px; }
}
@media (max-width: 480px){
  .sm-market, .sm-steps{ grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce){ .sm-tile{ transition:none; } }