/* =====================================================================
   Digital Odyssey — Market Position Chart ("dopc")
   Themed onto the site's design tokens (assets/tokens.css). Follows the
   page theme automatically via [data-theme]. No new fonts, no imports.
   ===================================================================== */
.dopc{
  --dopc-bg:transparent;
  --dopc-panel:var(--surface-inset);
  --dopc-line:var(--border);
  --dopc-ink:var(--text);
  --dopc-ink2:var(--text-2);
  --dopc-ink3:var(--text-3);
  --dopc-accent:var(--cyan-deep);
  --dopc-accent-soft:color-mix(in srgb, var(--cyan-deep) 12%, transparent);
  --dopc-low:color-mix(in srgb, var(--text-3) 20%, transparent);
  --dopc-high:color-mix(in srgb, var(--text-3) 34%, transparent);
  --dopc-radius:var(--radius-md);
  --dopc-font:var(--font-display);
  --dopc-mono:var(--font-mono);

  background:var(--dopc-bg);color:var(--dopc-ink);font-family:var(--dopc-font);
  border:1px solid var(--dopc-line);border-radius:var(--dopc-radius);
  padding:28px 26px 22px;margin:32px 0;box-sizing:border-box;line-height:1.55;
  /* Reserve space so the async render doesn't shift layout. */
  min-height:440px;
}
[data-theme="dark"] .dopc{
  --dopc-accent:var(--cyan);
  --dopc-accent-soft:color-mix(in srgb, var(--cyan) 15%, transparent);
  --dopc-low:color-mix(in srgb, #ffffff 7%, transparent);
  --dopc-high:color-mix(in srgb, #ffffff 12%, transparent);
}
.dopc *{box-sizing:border-box}
/* visually-hidden accessible summary */
.dopc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dopc-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.dopc-t{font-family:var(--dopc-font);font-weight:800;font-size:18px;letter-spacing:-.02em;margin:0}
.dopc-sub{font-family:var(--dopc-mono);font-size:11px;letter-spacing:.06em;color:var(--dopc-ink3);
  font-variant-numeric:tabular-nums}
.dopc-axis{position:relative;height:96px;margin-top:34px}
.dopc-line{position:absolute;left:0;right:0;top:66px;height:1px;background:var(--dopc-line)}
.dopc-tick{position:absolute;top:66px;width:1px;height:7px;background:var(--dopc-line)}
.dopc-tlab{position:absolute;top:78px;transform:translateX(-50%);font-family:var(--dopc-mono);
  font-size:10.5px;color:var(--dopc-ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
.dopc-zone{position:absolute;top:30px;height:34px;border-radius:5px}
.dopc-z-low{background:var(--dopc-low)}
.dopc-z-high{background:var(--dopc-high)}
.dopc-z-us{background:var(--dopc-accent-soft);border:1.5px solid var(--dopc-accent)}
.dopc-zlab{position:absolute;top:24px;transform:translate(-50%,-100%);font-family:var(--dopc-mono);
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;color:var(--dopc-ink3)}
.dopc-zlab.us{color:var(--dopc-accent);font-weight:500}
.dopc-dot{position:absolute;top:42px;width:9px;height:9px;border-radius:50%;transform:translateX(-50%);
  background:var(--dopc-ink3);opacity:.75}
.dopc-dot.us{background:var(--dopc-accent);opacity:1;width:11px;height:11px;top:41px}
.dopc-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--dopc-line);border:1px solid var(--dopc-line);border-radius:10px;overflow:hidden;
  margin-top:40px}
.dopc-col{background:var(--dopc-panel);padding:19px 18px 17px}
.dopc-col.us{background:var(--dopc-accent-soft)}
.dopc-cname{font-family:var(--dopc-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dopc-ink3)}
.dopc-col.us .dopc-cname{color:var(--dopc-accent)}
.dopc-crng{font-family:var(--dopc-font);font-size:22px;font-weight:800;letter-spacing:-.035em;margin-top:7px;
  font-variant-numeric:tabular-nums}
.dopc-col.us .dopc-crng{color:var(--dopc-accent)}
.dopc-col ul{list-style:none;margin:13px 0 0;padding:0}
.dopc-col li{position:relative;padding-left:15px;margin:6px 0;font-size:13.5px;color:var(--dopc-ink2)}
.dopc-col li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;
  background:var(--dopc-ink3)}
.dopc-col.us li::before{background:var(--dopc-accent)}
.dopc-foot{font-family:var(--dopc-mono);font-size:11px;color:var(--dopc-ink3);margin-top:22px;
  line-height:1.6;letter-spacing:.01em}
@media(max-width:560px){
  .dopc{padding:22px 18px 18px;min-height:640px}
  .dopc-axis{height:104px}
  .dopc-zlab{font-size:9px}
}
@media(max-width:400px){
  .dopc-tlab{font-size:9.5px}
  .dopc-t{font-size:16px}
}