/* Restore interactive chart interfaces and the research FAQ from the earlier approved sample.
   Does not replace data, filters, market formulas, or the approved visual design. */
/* Production regression fix: the original nav-links overflow-x:auto
   clipped the absolutely positioned More dropdown even while open.
   Restore visible overflow on desktop; retain vertical scrolling in mobile menu. */
@media(min-width:1161px){
  body.raro-modern .site-header .nav-links{
    overflow:visible;
    max-height:none;
    max-width:none;
  }
  body.raro-modern .nav-more{
    position:relative;
    z-index:30;
  }
  body.raro-modern .nav-more[open] .nav-more-list{
    position:absolute;
    z-index:100;
    top:calc(100% + 9px);
  }
}
@media(max-width:1160px){
  body.raro-modern .site-header .nav-links.open{
    overflow-x:hidden;
    overflow-y:auto;
  }
  body.raro-modern .nav-more[open] .nav-more-list{
    position:static;
    max-width:100%;
  }
}
body.raro-modern .scan-chart-grid .chart-card{min-width:0;}
body.raro-modern .scan-context{color:#c3d1df!important;font-size:13px!important;}
body.raro-modern .scan-method,
body.raro-modern .scan-takeaway{font-size:13px;line-height:1.6;}
body.raro-modern .scan-bar-row:focus-visible,
body.raro-modern .scan-volume-switch button:focus-visible,
body.raro-modern .scan-values summary:focus-visible{
  outline:3px solid #f6d395!important;outline-offset:2px!important;
}
body.raro-modern .scan-values{
  border-color:#45596a;
  color:#c5d4e2;
}
body.raro-modern .scan-bar-value{position:relative;}
body.raro-modern .scan-sector-head strong{font-size:13px;}
body.raro-modern .scan-sector-head span{font-size:12px;}
body.raro-modern .scan-sector-list .scan-breadth-up{
  background:repeating-linear-gradient(135deg,#21856b,#21856b 7px,#75cdb3 7px,#75cdb3 9px);
}
body.raro-modern .scan-sector-list .scan-breadth-down{
  background:repeating-linear-gradient(45deg,#9d4857,#9d4857 7px,#ec9aa7 7px,#ec9aa7 9px);
}
body.raro-modern .raro-faq details{background:#111e2c;border-color:#324b5e;}
body.raro-modern .raro-faq summary{font-size:14px;min-height:24px;color:#eef4fa;}
body.raro-modern .raro-faq p{font-size:13px;color:#c1d0df;}
@media(max-width:660px){
  body.raro-modern .scan-bar-row{grid-template-columns:55px minmax(0,1fr) 85px;}
  body.raro-modern .scan-bar-value{font-size:12px;}
}

.scan-context{font-size:12px!important;color:var(--muted)!important;margin:8px 0 0!important}
.scan-chart-grid .chart-card{min-height:0;display:flex;flex-direction:column;gap:4px}
.scan-chart-grid .chart{min-height:0;display:block;flex:1}
.scan-title-row{align-items:center;flex-wrap:wrap}
.scan-bar-list,.scan-sector-list{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.scan-bar-list li,.scan-sector-list li{min-width:0}
.scan-bar-row{
  display:grid;grid-template-columns:65px minmax(0,1fr) 86px;
  align-items:center;gap:10px;min-height:44px;width:100%;padding:7px 8px;
  background:transparent;color:var(--text);border:1px solid transparent;
  border-radius:8px;text-align:left;transition:background .12s,border-color .12s;
}
.scan-bar-row:hover{background:rgba(153,183,212,.09);border-color:rgba(153,183,212,.23)}
.scan-bar-row:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.scan-symbol{font-weight:790;font-size:12px;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scan-bar-track{display:block;width:100%;height:15px;background:rgba(132,154,175,.12);border-radius:4px;overflow:hidden;position:relative}
.scan-bar-fill{display:block;height:100%;background:var(--green);border-radius:4px;min-width:2px}
.scan-bar-row.down .scan-bar-fill{background:repeating-linear-gradient(135deg,var(--red),var(--red) 5px,#ffb0ae 5px,#ffb0ae 7px)}
.scan-bar-row.flat .scan-bar-fill{background:#8496a8}
.scan-bar-value{text-align:right;font-size:12px;font-weight:800;white-space:nowrap}
.scan-bar-row.up .scan-bar-value{color:var(--green)}
.scan-bar-row.down .scan-bar-value{color:var(--red)}
.scan-takeaway{font-size:12px;color:var(--muted);line-height:1.45;margin:1px 0 11px}
.scan-takeaway strong{color:var(--text)}
.scan-method{font-size:12px;color:var(--muted);line-height:1.45;margin:4px 0 12px}
.scan-sector-list{gap:13px}
.scan-sector-item{display:grid;gap:5px}
.scan-sector-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px}
.scan-sector-head strong{font-size:12px;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scan-sector-head span{color:var(--muted);white-space:nowrap}
.scan-breadth-track{height:11px;display:flex;background:rgba(132,154,175,.12);border-radius:4px;overflow:hidden}
.scan-breadth-up{background:var(--green)}
.scan-breadth-down{background:var(--red)}
.scan-volume-switch{display:flex;gap:3px;background:rgba(132,154,175,.12);padding:3px;border-radius:9px}
 .scan-volume-switch button{font:inherit;font-weight:770;font-size:12px;min-height:44px;border:1px solid transparent;background:transparent;color:var(--muted);padding:8px 10px;border-radius:7px;white-space:nowrap}
.scan-volume-switch button[aria-pressed="true"]{background:rgba(231,188,112,.19);border-color:rgba(231,188,112,.4);color:var(--text)}
.scan-volume-switch button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.scan-values{border-top:1px solid var(--border-soft);margin-top:12px;padding-top:9px;font-size:12px;color:var(--muted)}
.scan-values summary{cursor:pointer;font-size:13px;font-weight:720;min-height:32px;padding:5px 0}
.scan-values summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.scan-table-scroll{overflow-x:auto;max-width:100%}
.scan-values table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px;min-width:330px}
.scan-values caption{text-align:left;font-size:12px;margin:0 0 6px}
.scan-values th,.scan-values td{padding:7px 6px;border-bottom:1px solid var(--border-soft);text-align:left}
.scan-values thead th{font-weight:800;color:var(--text)}
.scan-values td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.raro-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.raro-faq details{border:1px solid var(--border-soft);border-radius:12px;padding:13px 16px;background:var(--panel);align-self:start}
.raro-faq summary{font-size:13px;font-weight:800;line-height:1.4;cursor:pointer}
.raro-faq summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.raro-faq p{font-size:12px;line-height:1.6;margin:12px 0 0;color:var(--muted)}
.raro-faq a{color:var(--gold)}
@media(max-width:700px){
  .raro-faq{grid-template-columns:1fr}
  .scan-bar-row{grid-template-columns:58px minmax(0,1fr) 75px;gap:7px;padding:5px 3px}
  .scan-symbol,.scan-bar-value{font-size:12px}
  .scan-volume-switch{width:100%}
  .scan-volume-switch button{flex:1}
  .scan-title-row{align-items:stretch}
}
@media(prefers-reduced-motion:reduce){.scan-bar-row{transition:none}}


/* Navigation brand: reuse the existing RaRo chart favicon instead of initials. */
body.raro-modern .brand-mark.brand-mark-image{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:11px;
  background:transparent;
  box-shadow:none;
}
body.raro-modern .brand-mark-image .brand-icon{
  display:block;
  width:40px;
  height:40px;
  object-fit:contain;
  background:transparent;
}
body.raro-modern .brand:focus-visible{
  outline:3px solid #f6d395;
  outline-offset:4px;
  border-radius:8px;
}

/* Desktop-only More menu: align with the primary tabs, then anchor the menu
   directly below the trigger. The mobile disclosure remains untouched. */
@media(min-width:1081px){
  body.raro-modern .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  body.raro-modern .nav .brand{flex:0 0 auto}
  body.raro-modern .nav-toggle{display:none!important}
  body.raro-modern .site-header .nav-links{
    position:static!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center;
    justify-content:flex-end;
    flex:0 1 auto;
    width:auto;
    min-width:0;
    max-width:none!important;
    max-height:none!important;
    margin-left:auto;
    overflow:visible!important;
    gap:4px;
    padding:5px 7px;
    border-radius:12px;
    background:rgba(255,255,255,.035);
    box-shadow:none;
    transform:none;
    white-space:nowrap;
    scrollbar-width:none;
  }
  body.raro-modern .site-header .nav-links>a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:9px 11px;
    line-height:1.25;
    font-size:13px;
    border-radius:8px;
  }
  body.raro-modern .nav-more{
    width:auto;
    position:relative;
    display:block;
    flex:0 0 auto;
    align-self:center;
    margin:0;
    z-index:10;
  }
  body.raro-modern .nav-more summary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:40px;
    min-height:40px;
    padding:9px 12px;
    gap:8px;
    line-height:1.25;
    font-size:13px;
    font-weight:700;
    color:#dbe8f4;
    background:#1b3042;
    border:1px solid #426077;
    border-radius:8px;
    white-space:nowrap;
  }
  body.raro-modern .nav-more summary:hover,
  body.raro-modern .nav-more[open] summary{
    background:#283e52;
    color:#fff0cc;
    border-color:#d9ae6b;
  }
  body.raro-modern .nav-more[open] .nav-more-list{
    position:absolute;
    left:auto;
    right:0;
    top:calc(100% + 10px);
    display:grid;
    min-width:220px;
    max-width:min(320px, calc(100vw - 30px));
    gap:4px;
    padding:9px;
    margin:0;
    border:1px solid #466075;
    border-radius:12px;
    background:#122434;
    box-shadow:0 18px 40px rgba(0,0,0,.65);
    z-index:150;
    box-shadow:0 18px 40px rgba(0,0,0,.65);
  }
  body.raro-modern .nav-more-list a{
    display:flex;
    min-height:44px;
    align-items:center;
    padding:10px 13px;
    font-size:13px;
    font-weight:700;
    border-radius:8px;
    white-space:normal;
    line-height:1.4;
  }
  body.raro-modern .nav-more-list a:hover,
  body.raro-modern .nav-more-list a:focus-visible{
    background:#253f55;
    color:#fff;
  }
}