@import url("./style.css");
/* RESEARCH DETAIL SYSTEM: ONLY the former gold accent family varies with --phase-accent.
   Obsidian backgrounds, silver/white copy, typography, image styling, layout structure remain constant. */
:root{--detail-accent:#dda778;--detail-line:rgba(221,167,120,.44);--detail-fog:rgba(221,167,120,.10)}
.theme-phase-1{--detail-accent:#dda778;--detail-line:rgba(221,167,120,.44);--detail-fog:rgba(221,167,120,.10)}
.theme-phase-2{--detail-accent:#8dc5aa;--detail-line:rgba(141,197,170,.44);--detail-fog:rgba(141,197,170,.10)}
.theme-phase-3{--detail-accent:#91c8d1;--detail-line:rgba(145,200,209,.44);--detail-fog:rgba(145,200,209,.10)}
.theme-phase-4{--detail-accent:#b7add8;--detail-line:rgba(183,173,216,.44);--detail-fog:rgba(183,173,216,.10)}
.theme-phase-5{--detail-accent:#8fcbbf;--detail-line:rgba(143,203,191,.44);--detail-fog:rgba(143,203,191,.10)}
.theme-phase-6{--detail-accent:#b8c6d1;--detail-line:rgba(184,198,209,.44);--detail-fog:rgba(184,198,209,.10)}
.theme-phase-7{--detail-accent:#a8b8da;--detail-line:rgba(168,184,218,.44);--detail-fog:rgba(168,184,218,.10)}
.theme-phase-8{--detail-accent:#d6ac9f;--detail-line:rgba(214,172,159,.44);--detail-fog:rgba(214,172,159,.10)}
.theme-phase-9{--detail-accent:#c5c9a4;--detail-line:rgba(197,201,164,.44);--detail-fog:rgba(197,201,164,.10)}
body.research-detail{color:#ede8dc;background:#050709 url('assets/matrix-bg.jpg') center top / 1086px auto repeat;font-family:var(--sans)}
.research-detail *{box-sizing:border-box}
.research-detail a:focus-visible,.research-detail button:focus-visible,.research-detail summary:focus-visible{outline:2px solid var(--detail-accent);outline-offset:4px}
.detail-shell{width:min(1060px,calc(100% - 48px));margin:auto}
.detail-topline{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 14px;border-bottom:1px solid var(--detail-line)}
.detail-brand{display:flex;align-items:center;gap:11px;min-width:0}
.detail-brand img{width:47px;height:47px;object-fit:contain}
.detail-brand-word{display:flex;flex-direction:column;gap:3px;min-width:0}
.detail-brand strong{font-family:var(--display);font-size:16px;color:var(--detail-accent);letter-spacing:2px;white-space:nowrap}
.detail-brand small{font-family:var(--subheading);color:#d0d0ca;font-size:9px;letter-spacing:2px}
.detail-topnav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.detail-action{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:39px;padding:9px 14px;border:1px solid var(--detail-line);border-radius:7px;background:rgba(12,17,21,.88);font-family:var(--subheading);font-size:11px;letter-spacing:.4px;color:var(--detail-accent);text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s}
.detail-action:hover{background:var(--detail-fog);border-color:var(--detail-accent)}
.detail-action[aria-disabled="true"]{color:#a6a7a6;opacity:.6;pointer-events:none}
.detail-hero{display:grid;grid-template-columns:1.08fr .92fr;gap:30px;align-items:center;padding:34px 0 23px}
.hero-eyebrow,.detail-kicker{font-family:var(--subheading);color:var(--detail-accent);letter-spacing:2.5px;font-size:10px;font-weight:700;text-transform:uppercase}
.detail-hero h1{font-family:var(--display);color:var(--detail-accent);font-size:clamp(34px,4.4vw,54px);font-weight:600;line-height:1.09;margin:13px 0 16px;text-shadow:none}
.detail-lede{font-family:var(--serif);color:#e4dfd6;font-size:18px;line-height:1.65;margin:0 0 21px}
.status-line{display:flex;align-items:center;gap:9px;font-family:var(--subheading);font-size:10px;letter-spacing:1.1px;color:var(--detail-accent);font-weight:600;text-transform:uppercase}
.status-dot{display:block;flex:0 0 auto;width:8px;height:8px;transform:rotate(45deg);border:1px solid var(--detail-accent);background:var(--detail-fog)}
.hero-image{border:1px solid var(--detail-line);border-radius:13px;overflow:hidden;position:relative;margin:0;box-shadow:0 18px 38px rgba(0,0,0,.36)}
.hero-image img{width:100%;height:310px;object-fit:cover;filter:saturate(.90) brightness(.93)}
.hero-image figcaption{padding:9px 13px;font-family:var(--sans);font-size:11px;line-height:1.45;background:#10161a;color:#c8c4be}
.data-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:25px}
.data-metric{border:1px solid var(--detail-line);background:#0d1317ee;border-radius:10px;padding:17px 16px;min-width:0}
.data-metric strong{font-family:var(--display);font-size:24px;line-height:1.15;display:block;color:var(--detail-accent);margin-bottom:8px;overflow-wrap:anywhere}
.data-metric span{font-size:11px;color:#d0cec9;line-height:1.45;display:block}
.detail-layout{display:grid;grid-template-columns: minmax(0, 1fr) 290px;gap:18px;align-items:start}
.content-panel{background:#0b1115f1;border:1px solid var(--detail-line);border-radius:11px;padding:24px 26px;margin-bottom:18px;box-shadow:0 9px 25px rgba(0,0,0,.20)}
.content-panel h2{font-family:var(--serif);font-size:25px;line-height:1.35;font-weight:700;color:var(--detail-accent);margin:7px 0 15px}
.content-panel h3{font-family:var(--subheading);font-size:16px;line-height:1.35;font-weight:600;color:var(--detail-accent);margin:19px 0 7px}
.content-panel p,.content-panel li{font-family:var(--sans);font-size:14px;line-height:1.75;color:#dedbd5}
.content-panel p{margin:9px 0 11px}
.content-panel ul{padding-left:21px;margin:9px 0}
.plain-meaning{background:rgba(15,20,25,.82);border-left:3px solid var(--detail-accent);padding:16px 17px;margin-top:17px;border-radius:0 9px 9px 0}
.plain-meaning strong{color:var(--detail-accent);font-family:var(--subheading);font-size:11px;letter-spacing:1px;text-transform:uppercase}
.plain-meaning p{margin:7px 0 0;font-size:13px}
.question-quote{font-family:var(--serif);font-size:19px!important;line-height:1.55!important;color:#efe7d9!important}
.finding{padding:12px 0 11px;border-bottom:1px solid rgba(197,192,183,.16)}
.finding:last-child{border-bottom:0;padding-bottom:0}
.finding .mini-explain{color:#c9c4bc;font-size:13px;margin-top:3px}
.finding .mini-explain b{color:var(--detail-accent)}
.sidebar{position:sticky;top:14px}
.sidebar .content-panel{padding:20px}
.sidebar .content-panel h2{font-size:19px}
.sidebar .content-panel p{font-size:12.5px}
.sidebar ol{margin:0;padding-left:18px}
.sidebar li{padding:6px 0;font-size:12px}
.sidebar a:hover{text-decoration:underline;text-decoration-color:var(--detail-accent);text-underline-offset:4px}
.glossary details{border-top:1px solid rgba(180,180,177,.17);padding:11px 0;color:#d5d2cd}
.glossary details:first-of-type{margin-top:2px}
.glossary summary{cursor:pointer;font-family:var(--subheading);font-size:12px;color:var(--detail-accent);font-weight:600;line-height:1.5;list-style-position:inside}
.glossary details p{font-size:12px;margin:6px 0 0}
.chart-controls{display:flex;gap:8px;flex-wrap:wrap;margin:5px 0 13px}
.chart-option{font-family:var(--subheading);font-size:11px;background:#151c20;border:1px solid rgba(198,198,198,.30);color:#c7c5bf;border-radius:7px;padding:9px 12px;cursor:pointer}
.chart-option[aria-pressed="true"]{border-color:var(--detail-accent);background:var(--detail-fog);color:var(--detail-accent);font-weight:700}
.graph-holder{min-height:258px;background:#080e12;border:1px solid rgba(188,188,188,.15);border-radius:8px;padding:8px;overflow:hidden}
.graph-holder svg{width:100%;height:auto;display:block}
.chart-caption{font-size:11px!important;color:#beb8b0!important;margin:10px 0 0!important}
.chart-a11y-table{margin-top:10px;max-height:0;overflow:hidden;transition:max-height .2s}
.chart-a11y-table.is-open{max-height:450px;overflow:auto}
.chart-a11y-table table{width:100%;border-collapse:collapse;font-size:12px;color:#d5d1c9}
.chart-a11y-table th,.chart-a11y-table td{border-bottom:1px solid #495057;padding:8px;text-align:left}
.table-toggle{border:0;background:transparent;font:600 11px var(--subheading);color:var(--detail-accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px;margin-top:10px;padding:4px 0}
.quiz-box details{border:1px solid var(--detail-line);border-radius:8px;padding:14px 17px;background:#11181d}
.quiz-box summary{cursor:pointer;color:var(--detail-accent);font:600 13px var(--subheading)}
.quiz-box details p{margin-bottom:0}
.source-item{padding:6px 0;overflow-wrap:anywhere}
.source-item a{color:var(--detail-accent);text-decoration:underline;text-decoration-color:var(--detail-line);text-underline-offset:3px}
.source-item small{display:block;color:#aaa69f;line-height:1.5;margin-top:2px}
.research-footer{margin:21px 0 28px;padding:17px 0;display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid var(--detail-line);color:#d8d2c9;font-size:11px;letter-spacing:.7px}
.research-footer .footer-actions{display:flex;gap:10px;flex-wrap:wrap}
.template-placeholder{border:1px dashed var(--detail-line);border-radius:9px;padding:28px 22px;background:#0b1216;text-align:center;margin-top:14px}
.template-placeholder strong{font:600 13px var(--subheading);color:var(--detail-accent);display:block}
.template-placeholder p{font-size:12px;max-width:460px;margin:10px auto 0;color:#ccc5bd}
.phase-swatches{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.phase-swatches .color-chip{width:19px;height:19px;transform:rotate(45deg);border-radius:3px;background:var(--detail-accent);border:1px solid rgba(255,255,255,.3)}
.preview-note{background:#121920;border:1px solid var(--detail-line);border-radius:8px;padding:13px 15px;color:#d6d1cb;font-size:12px;line-height:1.55;margin:0 0 22px}
.preview-note b{color:var(--detail-accent)}
@media(max-width:900px){.detail-layout{grid-template-columns:1fr}.sidebar{position:static}.sidebar .content-panel{padding:22px}}
@media(max-width:720px){.detail-shell{width:calc(100% - 26px)}.detail-topline{flex-wrap:wrap;gap:10px}.detail-topnav{justify-content:flex-start}.detail-hero{grid-template-columns:1fr;gap:18px;padding-top:21px}.hero-image img{height:240px}.data-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.content-panel{padding:20px 18px}.content-panel h2{font-size:22px}.detail-lede{font-size:17px}.research-footer{align-items:flex-start;flex-direction:column}}
@media(max-width:390px){.detail-action{font-size:10px;padding:8px 10px}.detail-brand strong{font-size:13px}.data-metric strong{font-size:20px}.hero-image img{height:185px}}
@media(prefers-reduced-motion:reduce){.detail-action,.chart-a11y-table{transition:none!important}}


/* Research-question copyright: same centered copy and flanking rules as Home.
   Only its former gold accent is recolored using the current phase token. */
.research-detail .research-footer--navigation{
  justify-content:center;
  margin:20px 0 8px;
  padding:18px 0 7px;
}
.research-detail .research-footer--navigation .footer-actions{
  justify-content:center;
}
.research-detail .research-copyright{
  width:min(100%,1000px);
  margin:18px auto 28px;
  color:var(--detail-accent);
}
.research-detail .research-copyright::before,
.research-detail .research-copyright::after{
  background:linear-gradient(90deg,var(--detail-line),var(--detail-accent),var(--detail-line));
  box-shadow:0 0 4px var(--detail-fog);
}
@media(max-width:720px){
  .research-detail .research-footer--navigation{align-items:center;}
}
@media(max-width:620px){
  .research-detail .research-copyright{gap:9px;letter-spacing:.25px;font-size:9px;}
}


body.research-detail { background: #050709; }
body.research-detail::before {
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--detail-accent),var(--detail-accent)),url('assets/matrix-bg.jpg');
  background-position:center center,center top;
  background-size:100% 100%,1086px auto;
  background-repeat:no-repeat,repeat;
  background-blend-mode:color,normal;
  opacity:var(--matrix-opacity,.42);
}
.research-detail .detail-shell {position:relative;z-index:1}
/* Tint the same original gold research emblem without altering its linework. */
.theme-phase-1 { --logo-hue:-7deg; }
.theme-phase-2 { --logo-hue:120deg; }
.theme-phase-3 { --logo-hue:159deg; }
.theme-phase-4 { --logo-hue:223deg; }
.theme-phase-5 { --logo-hue:137deg; }
.theme-phase-6 { --logo-hue:174deg; }
.theme-phase-7 { --logo-hue:192deg; }
.theme-phase-8 { --logo-hue:-17deg; }
.theme-phase-9 { --logo-hue:34deg; }
.research-detail .detail-brand img {
 width:58px;height:58px;object-fit:contain;flex:none;
 filter:hue-rotate(var(--logo-hue,0deg)) saturate(1.17);
}
.research-detail .detail-topnav .detail-home-link {
 border-color:var(--detail-accent);color:var(--detail-accent);
 font-weight:700;white-space:nowrap;
}
/* Readability: scientific text is enlarged, not reduced to a decorative caption. */
.research-detail .content-panel p,
.research-detail .content-panel li {font-size:16px;line-height:1.82}
.research-detail .content-panel .question-quote {font-size:20px!important}
.research-detail .content-panel .mini-explain,
.research-detail .content-panel .plain-meaning p {font-size:15.5px}
.research-detail .sidebar .content-panel p,
.research-detail .sidebar .content-panel li {font-size:14.5px;line-height:1.8}
.research-detail .sidebar .glossary details p {font-size:14.5px}
.research-detail .detail-lede {font-size:19px}
.research-detail .data-metric span,
.research-detail .hero-image figcaption,
.research-detail .preview-note {font-size:13px;line-height:1.65}
.research-detail .chart-caption,
.research-detail .source-item small {font-size:13px!important;line-height:1.6}
@media(max-width:640px){
 .research-detail .detail-brand img{width:52px;height:52px}
 .research-detail .detail-topnav{justify-content:flex-end;width:100%}
 .research-detail .content-panel p,.research-detail .content-panel li{font-size:15.5px}
}

/* The only six phase intensity refinements the user requested. */
.theme-phase-2,.theme-phase-3,.theme-phase-5,.theme-phase-6,.theme-phase-7,.theme-phase-9 {--matrix-opacity:.66;}
/* Page-specific logos are already tinted images, not further filtered. */
.research-detail .detail-brand img{filter:none!important;}