/* Shared visual refresh for MeloSignal's analysis/catalog pages.
   Loaded after each page's existing styles so this only changes presentation,
   not the analysis/data logic. */

.longterm-shell,
.all-shell{
  --page-bg:#f6f7fb;
  --page-bg-2:#eef2f7;
  --ink:#23262f;
  --muted:#727986;
  --line:rgba(55,62,76,.09);
  --accent:#ed70a9;
  --accent-2:#a98aee;
  --accent-dark:#c64d85;
  --accent-soft:#f7d7e6;
  --accent-pale:#fff7fb;
  --signal:#58cbdc;
  --signal-soft:#dff7fa;
  --shadow:0 10px 30px rgba(52,61,76,.07);
  position:relative;
  isolation:isolate;
  color:var(--ink);
  /* Match the Japanese typography used by the ranking dashboard exactly. */
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
}
.longterm-shell::before,
.all-shell::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 0%,rgba(237,112,169,.09),transparent 27%),
    radial-gradient(circle at 94% 8%,rgba(88,203,220,.10),transparent 27%),
    radial-gradient(circle at 76% 44%,rgba(169,138,238,.055),transparent 25%),
    linear-gradient(180deg,#fafbfc 0%,#f4f6f9 50%,#fafbfc 100%);
}
body[data-market="bl"] .longterm-shell,
body[data-market="bl"] .all-shell{
  --accent:#65c9f5;
  --accent-2:#8aa9ef;
  --accent-dark:#369bc9;
  --accent-soft:#d6eef9;
  --accent-pale:#f6fcff;
  --signal:#70c7e8;
  --signal-soft:#e1f5fb;
}
body[data-market="bl"] .longterm-shell::before,
body[data-market="bl"] .all-shell::before{
  background:
    radial-gradient(circle at 8% 0%,rgba(101,201,245,.10),transparent 27%),
    radial-gradient(circle at 94% 8%,rgba(138,169,239,.10),transparent 27%),
    linear-gradient(180deg,#fafcfd 0%,#f2f7fa 50%,#fafcfd 100%);
}

/* Cards become quieter so charts and numbers, not glass effects, lead. */
.longterm-shell .card,
.all-shell .card{
  border:1px solid rgba(55,62,76,.075);
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px) saturate(1.04);
  -webkit-backdrop-filter:blur(12px) saturate(1.04);
  border-radius:20px;
}
.longterm-shell .eyebrow,
.all-shell .eyebrow{
  color:var(--signal);
  letter-spacing:.17em;
}
.longterm-shell .section-block,
.all-shell .section-block{margin-top:30px}
.longterm-shell .section-heading,
.all-shell .section-heading{margin:0 3px 11px}
.longterm-shell .section-heading h3,
.all-shell .section-heading h3{
  margin-top:5px;
  color:var(--ink);
  font-size:21px;
  letter-spacing:-.035em;
}
.longterm-shell .section-note,
.all-shell .section-note{color:var(--muted);font-size:11px;line-height:1.7}

/* Page top: compact utility bar. */
.longterm-shell .longterm-top{
  margin-bottom:13px;
  padding:0 2px;
}
.longterm-shell .back-link{
  padding:8px 11px;
  border:1px solid rgba(55,62,76,.08);
  background:rgba(255,255,255,.78);
  box-shadow:0 5px 14px rgba(52,61,76,.045);
  color:#5d6571;
}
.longterm-shell .sync-status,
.all-shell .sync-status{
  border:1px solid rgba(55,62,76,.07);
  background:rgba(255,255,255,.76);
  box-shadow:none;
  color:var(--muted);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Analysis-page hero = clearly a page header, not another data card. */
.longterm-shell .longterm-hero{
  position:relative;
  overflow:hidden;
  padding:24px 24px 22px;
  border:1px solid rgba(88,203,220,.14);
  background:
    radial-gradient(circle at 96% 4%,rgba(88,203,220,.10),transparent 28%),
    radial-gradient(circle at 82% 0%,rgba(169,138,238,.08),transparent 26%),
    rgba(255,255,255,.90);
  box-shadow:0 16px 42px rgba(52,61,76,.075);
}
.longterm-shell .longterm-hero::before{
  content:"";
  position:absolute;
  left:0;
  top:21px;
  bottom:21px;
  width:3px;
  border-radius:3px;
  background:linear-gradient(180deg,var(--signal),var(--accent-2));
}
.longterm-shell .longterm-hero h1{
  margin:6px 0 9px;
  color:var(--ink);
  font-size:clamp(28px,6vw,38px);
  line-height:1.12;
  letter-spacing:-.045em;
}
.longterm-shell .longterm-hero p{
  max-width:800px;
  color:var(--muted);
  font-size:12px;
  line-height:1.8;
}
.longterm-shell .compare-kpis{gap:8px;margin-top:17px}
.longterm-shell .compare-kpi{
  border:1px solid rgba(55,62,76,.055);
  background:rgba(248,250,252,.82);
  box-shadow:none;
}
.longterm-shell .compare-kpi strong{color:var(--ink)}
.longterm-shell .compare-kpi span{color:var(--accent-dark)}

/* Segmented controls: gray tray + white selected item, matching refreshed home. */
.longterm-shell .compact-segments,
.all-shell .compact-segments,
.all-shell .period-tabs{
  gap:4px;
  padding:4px;
  border:1px solid rgba(55,62,76,.08);
  background:#edf0f4;
  box-shadow:inset 0 1px 2px rgba(45,55,72,.025);
}
.longterm-shell .mini-segment,
.all-shell .mini-segment,
.all-shell .period-button{color:#626b78}
.longterm-shell .mini-segment.active,
.all-shell .mini-segment.active,
.all-shell .period-button.active{
  border:1px solid rgba(55,62,76,.055);
  background:#fff;
  box-shadow:0 3px 10px rgba(45,55,72,.08);
  color:var(--accent-dark);
}
.longterm-shell .forecast-market-switch{max-width:260px}

/* Internal analysis cards and rows get visible neutral dividers. */
.longterm-shell .change-card,
.longterm-shell .year-pair-card,
.longterm-shell .axis-history,
.longterm-shell .forecast-narrative,
.longterm-shell .history-ranking,
.longterm-shell .work-history-card,
.all-shell .chart-card,
.all-shell .catalog-table,
.all-shell .catalog-controls{
  border-color:rgba(55,62,76,.07);
  background:rgba(255,255,255,.80);
  box-shadow:0 7px 22px rgba(52,61,76,.055);
}
.longterm-shell .change-row,
.longterm-shell .history-row,
.longterm-shell .trend-item,
.longterm-shell .rank-row{
  border-top-color:rgba(55,62,76,.075);
}
.longterm-shell .forecast-recent{
  background:#f4f6f8;
  color:var(--muted);
}
.longterm-shell .method-note{
  border:1px dashed rgba(55,62,76,.12);
  background:rgba(247,249,251,.75);
  box-shadow:none;
}

/* Cross-page navigation cards: aligned arrow rail instead of floating circles. */
.longterm-shell .longterm-link{
  min-height:112px;
  margin-top:12px;
  padding:17px 74px 17px 18px;
  border-color:rgba(55,62,76,.065);
  background:rgba(255,255,255,.76);
  box-shadow:0 7px 22px rgba(52,61,76,.05);
}
.longterm-shell .longterm-link::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:54px;
  height:auto;
  border-radius:0;
  background:linear-gradient(180deg,rgba(88,203,220,.11),rgba(169,138,238,.09));
  opacity:1;
}
.longterm-shell .longterm-link strong{font-size:15px;letter-spacing:-.025em}
.longterm-shell .longterm-link p{max-width:none;margin-top:5px;font-size:10px;line-height:1.6}
.longterm-shell .longterm-link .arrow{
  right:15px;
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
  width:25px;
  height:25px;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:#71808f;
  box-shadow:0 3px 10px rgba(52,61,76,.08);
  font-size:13px;
}

/* History controls. */
.longterm-shell select{
  border:1px solid rgba(55,62,76,.10);
  background:#fff;
  color:var(--ink);
  box-shadow:0 3px 10px rgba(52,61,76,.04);
}
.longterm-shell .history-date-row{
  border-top-color:rgba(55,62,76,.07);
}

/* All-catalog page: same visual language, but keep its richer navigation. */
.all-shell .all-topbar{
  padding-top:4px;
  padding-bottom:10px;
}
.all-shell .all-logo{filter:saturate(.92)}
.all-shell .history-link{
  border:1px solid rgba(55,62,76,.07);
  background:rgba(255,255,255,.76);
  box-shadow:none;
}
.all-shell .all-scope-summary{
  border:1px solid rgba(55,62,76,.075);
  background:rgba(255,255,255,.78);
  box-shadow:0 7px 22px rgba(52,61,76,.05);
}
.all-shell .all-scope-summary-text{color:#646d79}
.all-shell #allScopeToggle{
  border:1px solid rgba(88,203,220,.18);
  background:var(--signal-soft);
  color:#377f8b;
}
.all-shell .all-control-bar{
  border-color:rgba(55,62,76,.075);
  background:rgba(255,255,255,.79);
  box-shadow:0 8px 24px rgba(52,61,76,.055);
}
.all-shell .window-control{border-top-color:rgba(55,62,76,.08)}

.all-shell .all-hero{
  margin:15px 0 13px;
  padding:18px 19px;
  border:1px solid rgba(55,62,76,.06);
  border-left:3px solid var(--signal);
  border-radius:18px;
  background:rgba(255,255,255,.63);
  box-shadow:0 6px 20px rgba(52,61,76,.045);
}
.all-shell .all-hero::before,
.all-shell .all-hero::after{display:none}
.all-shell .all-hero h2{
  margin:4px 0 4px;
  max-width:none;
  color:var(--ink);
  font-size:23px;
}
.all-shell .all-hero p{max-width:none;color:var(--muted);font-size:11px}
.all-shell .all-hero .hero-status{margin-top:7px;padding:0;background:transparent;color:var(--muted)}

.all-shell .all-tabs{
  border:1px solid rgba(55,62,76,.075);
  background:rgba(244,246,249,.90);
  box-shadow:0 7px 22px rgba(52,61,76,.055);
}
.all-shell .all-tab{color:#68717e}
.all-shell .all-tab.active{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  box-shadow:0 6px 16px rgba(169,96,157,.15);
}
.all-shell .all-kpi,
.all-shell .coverage-card{
  border-color:rgba(55,62,76,.065);
  background:rgba(255,255,255,.78);
  box-shadow:0 6px 18px rgba(52,61,76,.05);
}
.all-shell .catalog-row,
.all-shell .table-row{border-top-color:rgba(55,62,76,.07)}

.all-shell .search-status{color:var(--muted)}

/* Heatmaps/charts keep color meaning but lose pink-on-pink tracks. */
.longterm-shell .heatmap td{background:rgba(255,255,255,.74)}
.longterm-shell .heatmap th{color:var(--muted)}
.longterm-shell .sparkline{filter:saturate(.88)}

@media(max-width:680px){
  .longterm-shell,
  .all-shell{padding-left:14px!important;padding-right:14px!important}
  .longterm-shell .longterm-hero{padding:20px 18px 18px}
  .longterm-shell .longterm-hero::before{top:18px;bottom:18px}
  .longterm-shell .longterm-hero h1{font-size:29px}
  .longterm-shell .longterm-hero p{font-size:11px;line-height:1.72}
  .longterm-shell .longterm-link{min-height:104px;padding-right:66px}
  .all-shell .all-hero{padding:16px 15px}
  .all-shell .all-hero h2{font-size:21px}
  .all-shell .all-tabs{gap:3px}
  .all-shell .all-tab{padding-left:7px;padding-right:7px;font-size:10px}
}

@supports(-webkit-touch-callout:none){
  .longterm-shell::before,
  .all-shell::before{background-color:#f6f7fb}
  body[data-market="bl"] .longterm-shell::before,
  body[data-market="bl"] .all-shell::before{background-color:#f4f9fb}
}