/* Acutance site refresh CSS
   Purple theme retained: primary #660099
   Alternative test version with stronger description-panel fixes
*/

:root{
  --ac-purple:#660099;
  --ac-purple-dark:#4d0073;
  --ac-purple-soft:#efe6f7;
  --ac-ink:#1f1f24;
  --ac-muted:#5b5b66;
  --ac-bg:#f2f2f6;
  --ac-card:#ffffff;
  --ac-border:rgba(20,20,30,.12);
  --ac-shadow:0 10px 30px rgba(20,20,30,.12);
  --ac-radius:14px;
}

/* Reset */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  text-align:center;
  background: linear-gradient(180deg, var(--ac-bg), #ffffff 55%, var(--ac-bg));
  color:var(--ac-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Arial, Tahoma, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

/* Images */
img{ border:0; max-width:100%; height:auto; }

/* Links */
a{ color:var(--ac-purple); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus{ outline:3px solid rgba(102,0,153,.25); outline-offset:2px; border-radius:6px; }

/* Container */
#container{
  width: min(1100px, calc(100% - 28px));
  margin: 18px auto 26px;
  background: var(--ac-card);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow);
  overflow: hidden;
}

/* Masthead */
#masthead{
  text-align:center;
  background: linear-gradient(135deg, var(--ac-purple), var(--ac-purple-dark));
  padding: 14px 12px;
}
#masthead img{ margin:0; filter: drop-shadow(0 8px 16px rgba(0,0,0,.22)); }

/* Menu */
#page_menu{
  width: 100%;
  height: auto;
  margin: 0;
  padding: 10px 12px 12px;
  background: var(--ac-purple-soft);
  border-bottom: 1px solid var(--ac-border);
}
#page_menu ul{
  list-style:none;
  width: 100%;
  margin: 0;
  overflow: visible;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  justify-content:center;
}
#page_menu li{
  float:none;
  width:auto;
  height:auto;
  margin:0;
  font-size: 12.5px;
  font-weight: 700;
}
#page_menu a{
  display:block;
  padding: 9px 12px;
  background: linear-gradient(135deg, var(--ac-purple), var(--ac-purple-dark));
  color:#fff;
  border-radius: 999px;
  box-shadow: 0 8px 16px rgba(102,0,153,.22);
  letter-spacing: .2px;
}
#page_menu a:hover{ color:#fff; text-decoration:none; filter: brightness(1.03); }
#page_menu li.last{ width:auto; margin-right:0; }

/* Two-column layout */
#mainCol{
  text-align:left;
  width: calc(100% - 260px);
  float:left;
  margin: 18px 0 22px 18px;
}
#sidebar{
  text-align:left;
  background: transparent;
  width: 220px;
  float:right;
  margin: 18px 18px 22px 0;
}
#sidebar img{
  margin: 0 0 14px 0;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(20,20,30,.10);
}

/* Typography */
p{
  text-align: left;
  color: var(--ac-ink);
  margin: 10px 0 10px;
}
h1,h2,h3,h4{
  text-align:left;
  color: var(--ac-ink);
  font-weight: 800;
  line-height: 1.18;
}
h1{ margin-top: 18px; font-size: 1.9em; }
h2{ margin-top: 16px; font-size: 1.55em; }
h3{ margin-top: 14px; font-size: 1.28em; }
h4{ margin-top: 10px; font-size: 1.12em; color: var(--ac-muted); }

/* Tables (site uses ConTable) */
#ConTable{ text-align:left; }
table{
  border-collapse: collapse;
  width: 100%;
}
td, th{
  border: 1px solid rgba(20,20,30,.12);
  padding: 10px 10px;
  vertical-align: top;
}
th{
  background: var(--ac-purple-soft);
  font-weight: 800;
}
#mainCol table a:link,
#mainCol table a:visited{ color: var(--ac-purple); }

/* Footer */
#footer{
  text-align:center;
  background: linear-gradient(135deg, var(--ac-purple), var(--ac-purple-dark));
  color:#fff;
  clear:both;
  padding: 14px 12px;
  font-size: 0.95em;
}
#footer ul{
  list-style:none;
  margin: 10px 0 0;
}
#footer li{
  display:inline-block;
  margin: 0 10px 0 0;
  line-height: 1.6;
}
#footer li a:link,
#footer li a:visited{
  color:#fff;
  font-weight: 800;
}
#footer p{ text-align:center; margin: 6px 0 0; color:#fff; }

/* Responsive */
@media (max-width: 900px){
  #mainCol{
    width: calc(100% - 36px);
    float:none;
    margin: 16px 18px 8px;
  }
  #sidebar{
    width: calc(100% - 36px);
    float:none;
    margin: 0 18px 18px;
  }
}

/* Add Acutance logo2016 into masthead (top-right) */
#masthead{ position: relative; }
#masthead #acutance_logo2016{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  height: 64px;
  width: auto;
  max-width: 40%;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  padding: 6px;
}

@media (max-width: 650px){
  #masthead{ padding-top: 18px; padding-bottom: 18px; }
  #masthead #acutance_logo2016{
    position: static;
    transform: none;
    display: block;
    margin: 10px auto 0;
    height: 58px;
    max-width: 75%;
  }
}

/* =========================================================
   ALTERNATIVE TEST FIX FOR DESCRIPTION PANELS
   Put these at the end so they beat earlier rules.
   ========================================================= */

/* Keep card descriptions bright on dark panels */
details.desc[open] .desc-body{
  background:#0f0f10 !important;
  border:1px solid #4f4f56 !important;
  color:#ffffff !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Force common text elements inside description panels to white */
details.desc[open] .desc-body,
details.desc[open] .desc-body p,
details.desc[open] .desc-body div,
details.desc[open] .desc-body span,
details.desc[open] .desc-body a,
details.desc[open] .desc-body li,
details.desc[open] .desc-body b,
details.desc[open] .desc-body strong,
details.desc[open] .desc-body em,
details.desc[open] .desc-body i,
details.desc[open] .desc-body font,
details.desc[open] .desc-body small{
  color:#ffffff !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  text-shadow:none !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Labels such as Keywords: and Description: */
details.desc[open] .desc-body .k,
details.desc[open] .desc-body .k b,
details.desc[open] .desc-body .k strong{
  color:#ffffff !important;
  font-weight:700 !important;
}

/* If the panel is open, stop paragraph rules elsewhere from dimming it */
details.desc[open] .desc-body p{
  margin: 0 0 10px 0 !important;
}

/* Make summary button text clearly visible too */
details.desc summary{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}