/* Octary global navigation, promo bar and accessibility toolbar styles.
   Extracted from includes/nav.php so browsers can cache it across pages. */

:root {
  --on-bg:#0a0e17;
  --on-surface:#111827;
  --on-surface2:#1a2235;
  --on-border:#1e293b;
  --on-border2:rgba(148,163,184,.18);
  --on-accent:#00d4aa;
  --on-accent2:#06b6d4;
  --on-text:#e2e8f0;
  --on-muted:#64748b;
  --on-muted2:#94a3b8;
  --on-shadow:0 18px 60px rgba(0,0,0,.55);
  --on-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}

/* Promo banner */
#oct-promo-bar {
  position:sticky;
  top:0;
  z-index:1001;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  padding:.45rem 3rem .45rem 1rem;
  background:linear-gradient(90deg,rgba(0,212,170,.16),rgba(99,102,241,.16)),linear-gradient(90deg,#0a0e17,#0d1a24);
  border-bottom:1px solid rgba(0,212,170,.30);
  color:var(--on-text);
  font-family:'Outfit',system-ui,sans-serif;
  text-decoration:none;
  overflow:hidden;
}
#oct-promo-bar::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);
  animation:octPromoShimmer 3.4s linear infinite;
  pointer-events:none;
}
@keyframes octPromoShimmer {
  from { transform:translateX(-100%); }
  to { transform:translateX(100%); }
}
#oct-promo-bar .opb-inner {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  min-width:0;
}
#oct-promo-bar .opb-badge {
  flex-shrink:0;
  border:1px solid rgba(0,212,170,.36);
  background:rgba(0,212,170,.14);
  color:var(--on-accent);
  border-radius:999px;
  padding:.14rem .58rem;
  font-family:var(--on-mono);
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#oct-promo-bar .opb-text {
  font-size:.82rem;
  color:rgba(226,232,240,.88);
  white-space:nowrap;
}
#oct-promo-bar .opb-cta {
  flex-shrink:0;
  border:1px solid rgba(0,212,170,.42);
  color:var(--on-accent);
  border-radius:999px;
  padding:.14rem .68rem;
  font-size:.8rem;
  font-weight:800;
}
#oct-promo-bar:hover .opb-cta {
  background:var(--on-accent);
  color:#061018;
}
#oct-promo-close {
  position:absolute;
  right:.75rem;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  color:rgba(226,232,240,.46);
  cursor:pointer;
  font-size:1.05rem;
  line-height:1;
  padding:.25rem;
}
#oct-promo-close:hover {
  color:var(--on-text);
}

/* Main nav */
#oct-nav {
  position:sticky;
  top:40px;
  z-index:1000;
  min-height:96px;
  display:flex;
  align-items:center;
  gap:1.25rem;
  padding:0 1.5rem;
  background:rgba(10,14,23,.97);
  border-bottom:1px solid var(--on-border);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  font-family:'Outfit',system-ui,sans-serif;
}
body.oct-promo-dismissed #oct-nav,
#oct-nav.oct-no-promo {
  top:0;
}

#oct-nav .on-logo {
  display:flex;
  align-items:center;
  flex-shrink:0;
  margin-right:auto;
  color:var(--on-text);
  text-decoration:none;
}
#oct-nav .on-logo img,
#oct-nav .on-logo svg {
  height:80px;
  width:auto;
  display:block;
}

/* Desktop links */
#oct-nav .on-links {
  display:flex;
  align-items:center;
  gap:.12rem;
  list-style:none;
  margin:0;
  padding:0;
}
#oct-nav .on-links > li {
  position:relative;
}
#oct-nav .on-links > li > a,
#oct-nav .on-links > li > button {
  display:flex;
  align-items:center;
  gap:.32rem;
  padding:.46rem .74rem;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--on-muted2);
  text-decoration:none;
  font-family:'Outfit',system-ui,sans-serif;
  font-size:.84rem;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s,color .15s;
}
#oct-nav .on-links > li > a:hover,
#oct-nav .on-links > li > button:hover,
#oct-nav .on-links > li.on-active > a,
#oct-nav .on-links > li.on-active > button {
  background:var(--on-surface2);
  color:var(--on-text);
}
#oct-nav .on-links > li.on-active > a,
#oct-nav .on-links > li.on-active > button {
  color:var(--on-accent);
}
#oct-nav .on-caret {
  font-size:.66rem;
  opacity:.65;
  transition:transform .2s;
}
#oct-nav .on-open .on-caret {
  transform:rotate(180deg);
}

/* Dropdowns */
#oct-nav .on-drop {
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:240px;
  padding:.55rem;
  border:1px solid var(--on-border);
  border-radius:15px;
  background:var(--on-surface);
  box-shadow:var(--on-shadow);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s,visibility .15s,transform .15s;
  white-space:nowrap;
}
#oct-nav li.on-open > .on-drop {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
#oct-nav .on-drop.on-drop-2col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 .2rem;
  min-width:500px;
}
#oct-nav .on-drop-section {
  grid-column:1/-1;
  display:block;
  padding:.35rem .55rem .2rem;
  margin-top:.25rem;
  color:var(--on-muted);
  font-family:var(--on-mono);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
#oct-nav .on-drop-section:first-child {
  margin-top:0;
}
#oct-nav .on-drop hr {
  grid-column:1/-1;
  border:0;
  border-top:1px solid var(--on-border);
  margin:.42rem 0;
}
#oct-nav .on-drop a {
  display:flex;
  align-items:center;
  gap:.62rem;
  padding:.5rem .65rem;
  border-radius:9px;
  color:var(--on-text);
  text-decoration:none;
  font-size:.82rem;
  font-weight:650;
  transition:background .12s,color .12s;
}
#oct-nav .on-drop a:hover,
#oct-nav .on-drop a.on-drop-active {
  background:rgba(0,212,170,.09);
  color:var(--on-accent);
}
#oct-nav .on-drop .di {
  width:20px;
  flex-shrink:0;
  text-align:center;
  font-size:1rem;
}
#oct-nav .on-drop small {
  display:block;
  margin-top:.05rem;
  color:var(--on-muted);
  font-size:.7rem;
  font-weight:500;
  line-height:1.2;
}

/* Right controls */
#oct-nav .on-right {
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-shrink:0;
}
#oct-nav .on-search-btn,
#oct-burger {
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--on-border);
  border-radius:999px;
  background:transparent;
  color:var(--on-muted2);
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
#oct-nav .on-search-btn:hover,
#oct-burger:hover {
  border-color:rgba(0,212,170,.45);
  color:var(--on-accent);
  background:rgba(0,212,170,.07);
}
#oct-nav .on-signin,
#oct-nav .on-signup {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:.45rem .85rem;
  border-radius:10px;
  text-decoration:none;
  font-size:.84rem;
  font-weight:700;
  white-space:nowrap;
}
#oct-nav .on-signin {
  color:var(--on-muted2);
}
#oct-nav .on-signin:hover {
  color:var(--on-text);
  background:rgba(148,163,184,.08);
}
#oct-nav .on-signup {
  color:#061018;
  background:linear-gradient(135deg,var(--on-accent),var(--on-accent2));
}
#oct-nav .on-signup:hover {
  opacity:.9;
}

/* Share / translate */
#oct-nav .on-nav-util {
  position:relative;
  display:flex;
  align-items:center;
  gap:.28rem;
}
#oct-nav .on-nav-util-btn {
  display:flex;
  align-items:center;
  gap:.25rem;
  border:1px solid rgba(148,163,184,.24);
  border-radius:7px;
  background:rgba(255,255,255,.03);
  color:var(--on-text);
  font-family:'Outfit',system-ui,sans-serif;
  font-size:.78rem;
  font-weight:650;
  padding:.28rem .44rem;
  cursor:pointer;
}
#oct-nav .on-nav-util-btn:hover {
  border-color:rgba(0,212,170,.45);
  color:var(--on-accent);
}
#oct-nav .on-nav-pop {
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:1020;
  min-width:190px;
  max-width:min(320px,calc(100vw - 2rem));
  border:1px solid var(--on-border);
  border-radius:14px;
  background:var(--on-surface);
  box-shadow:var(--on-shadow);
  padding:.5rem;
}
#oct-nav .on-nav-pop[hidden] {
  display:none !important;
}
#oct-nav .on-nav-pop-link {
  display:flex;
  align-items:center;
  gap:.52rem;
  width:100%;
  padding:.48rem .55rem;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--on-text);
  text-decoration:none;
  font-family:'Outfit',system-ui,sans-serif;
  font-size:.82rem;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}
#oct-nav .on-nav-pop-link:hover {
  background:rgba(0,212,170,.08);
  color:var(--on-accent);
}
#oct-nav .on-nav-pop-note {
  margin:.2rem .4rem .45rem;
  color:var(--on-muted);
  font-size:.72rem;
}
#oct-nav .on-nav-pop-langs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.1rem .25rem;
}

/* Burger */
#oct-burger {
  display:none;
  flex-direction:column;
  gap:5px;
  border-radius:10px;
}
#oct-burger span {
  width:18px;
  height:2px;
  display:block;
  border-radius:2px;
  background:currentColor;
  transition:transform .2s,opacity .2s;
}
#oct-burger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
#oct-burger.is-open span:nth-child(2) { opacity:0; }
#oct-burger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
#oct-drawer {
  position:fixed;
  top:136px;
  left:0;
  right:0;
  bottom:0;
  z-index:999;
  background:var(--on-bg);
  border-top:1px solid var(--on-border);
  overflow:auto;
  transform:translateX(-100%);
  transition:transform .25s ease;
  font-family:'Outfit',system-ui,sans-serif;
}
body.oct-promo-dismissed #oct-drawer,
#oct-drawer.oct-no-promo {
  top:96px;
}
#oct-drawer.is-open {
  transform:translateX(0);
}
#oct-drawer .od-inner {
  padding:1rem 1.25rem 4rem;
}
#oct-drawer .od-section {
  display:block;
  margin:.75rem .2rem .25rem;
  color:var(--on-muted);
  font-family:var(--on-mono);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
#oct-drawer .od-section:first-child {
  margin-top:0;
}
#oct-drawer .od-item,
#oct-drawer .od-sub a {
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.72rem .82rem;
  border-radius:10px;
  color:var(--on-text);
  text-decoration:none;
  font-size:.94rem;
  font-weight:650;
}
#oct-drawer .od-item:hover,
#oct-drawer .od-sub a:hover {
  background:var(--on-surface2);
}
#oct-drawer .od-active {
  color:var(--on-accent);
  background:rgba(0,212,170,.08);
}
#oct-drawer .od-sub {
  padding-left:.65rem;
}
#oct-drawer .od-sub a {
  color:var(--on-muted2);
  font-size:.88rem;
}
#oct-drawer .od-divider {
  height:1px;
  background:var(--on-border);
  margin:.75rem 0;
}
#oct-drawer .od-cta {
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:.8rem;
  border:1px solid var(--on-border);
  border-radius:14px;
  background:var(--on-surface);
  margin-top:.9rem;
}
#oct-drawer .od-cta a {
  display:block;
  border-radius:10px;
  padding:.7rem;
  text-align:center;
  text-decoration:none;
  font-weight:750;
}
#oct-drawer .od-login {
  background:var(--on-surface2);
  color:var(--on-text);
}
#oct-drawer .od-register {
  background:linear-gradient(135deg,var(--on-accent),var(--on-accent2));
  color:#061018;
}

/* Search overlay */
#oct-search-overlay {
  position:fixed;
  inset:0;
  z-index:1100;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:5vh 1.5rem 2rem;
  background:rgba(10,14,23,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s,visibility .2s;
  font-family:'Outfit',system-ui,sans-serif;
}
#oct-search-overlay.is-open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
#oct-search-overlay .oso-box {
  width:100%;
  max-width:680px;
  border:1px solid var(--on-border);
  border-radius:17px;
  background:var(--on-surface);
  box-shadow:var(--on-shadow);
  overflow:hidden;
}
#oct-search-overlay .oso-header {
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.95rem 1.2rem;
  border-bottom:1px solid var(--on-border);
}
#oct-search-overlay .oso-header svg {
  color:var(--on-accent);
  flex-shrink:0;
}
#oct-search-input {
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--on-text);
  font-family:'Outfit',system-ui,sans-serif;
  font-size:1.05rem;
  font-weight:600;
}
#oct-search-input::placeholder {
  color:var(--on-muted);
}
#oct-search-overlay .oso-close {
  border:1px solid var(--on-border);
  border-radius:7px;
  background:transparent;
  color:var(--on-muted2);
  padding:.25rem .55rem;
  cursor:pointer;
}
#oct-search-overlay .oso-tabs {
  display:flex;
  border-bottom:1px solid var(--on-border);
}
#oct-search-overlay .oso-tab {
  flex:1;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--on-muted2);
  padding:.62rem;
  cursor:pointer;
  font-family:'Outfit',system-ui,sans-serif;
  font-size:.82rem;
  font-weight:750;
}
#oct-search-overlay .oso-tab.active {
  color:var(--on-accent);
  border-bottom-color:var(--on-accent);
}
#oso-results {
  max-height:54vh;
  overflow:auto;
}
#oct-search-overlay .oso-hint,
#oct-search-overlay .oso-empty {
  padding:1.55rem;
  text-align:center;
  color:var(--on-muted);
  font-size:.86rem;
}
#oct-search-overlay .oso-result {
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  padding:.9rem 1.2rem;
  border-bottom:1px solid var(--on-border);
  color:inherit;
  text-decoration:none;
}
#oct-search-overlay .oso-result:hover {
  background:rgba(0,212,170,.055);
}
#oct-search-overlay .oso-result-icon {
  flex-shrink:0;
  font-size:1.18rem;
  margin-top:.1rem;
}
#oct-search-overlay .oso-result-title {
  margin-bottom:.12rem;
  color:var(--on-text);
  font-size:.9rem;
  font-weight:800;
}
#oct-search-overlay .oso-result-desc {
  color:var(--on-muted2);
  font-size:.78rem;
  line-height:1.42;
}
#oct-search-overlay .oso-result-badge {
  display:inline-flex;
  margin-left:.35rem;
  border-radius:5px;
  background:rgba(0,212,170,.12);
  color:var(--on-accent);
  padding:.08rem .38rem;
  font-family:var(--on-mono);
  font-size:.62rem;
  text-transform:uppercase;
}
.oct-search-hl {
  background:rgba(0,212,170,.28);
  outline:2px solid rgba(0,212,170,.45);
  border-radius:2px;
}
.oct-search-hl-focus {
  background:rgba(0,212,170,.46);
  outline-color:var(--on-accent);
}

/* Safety: old modal overlay must not cover pages unless active */
#modal-overlay {
  display:none;
}
#modal-overlay.active,
#modal-overlay.is-open {
  display:flex;
}

@media (max-width:1080px) {
  #oct-nav .on-links > li > a,
  #oct-nav .on-links > li > button {
    padding:.46rem .55rem;
    font-size:.8rem;
  }
}
@media (max-width:900px) {
  #oct-nav {
    min-height:72px;
    top:40px;
  }
  #oct-nav .on-logo img,
  #oct-nav .on-logo svg {
    height:60px !important;
  }
  #oct-nav .on-links,
  #oct-nav .on-signin,
  #oct-nav .on-signup,
  #oct-nav .on-nav-util {
    display:none;
  }
  #oct-burger {
    display:flex;
  }
  #oct-drawer {
    top:112px;
  }
  body.oct-promo-dismissed #oct-drawer,
  #oct-drawer.oct-no-promo {
    top:72px;
  }
}
@media (max-width:600px) {
  #oct-promo-bar {
    padding-right:2.5rem;
  }
  #oct-promo-bar .opb-text {
    display:none;
  }
  #oct-promo-bar .opb-inner {
    gap:.45rem;
  }
  #oct-promo-bar .opb-cta {
    font-size:.75rem;
  }
}
@media (min-width:901px) {
  #oct-drawer {
    display:none !important;
  }
}

/* ---------------------------------------------------------- */

.oct-a11y * { box-sizing:border-box; }
#oct-a11y-btn{
  position:fixed; left:18px; bottom:18px; z-index:5000;
  width:56px; height:56px; border-radius:50%; border:3px solid #fff;
  background:#1533C4; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28); transition:transform .15s, background .15s;
}
#oct-a11y-btn:hover{ background:#0F248C; transform:scale(1.06); }
#oct-a11y-btn:focus-visible{ outline:3px solid #0A0E17; outline-offset:3px; }
#oct-a11y-btn svg{ width:30px; height:30px; }
#oct-a11y-panel{
  position:fixed; left:18px; bottom:84px; z-index:5001; width:320px; max-width:calc(100vw - 36px);
  max-height:calc(100vh - 110px); overflow:auto; background:#fff; color:#0A0E17;
  border:1px solid #d9d9de; border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.30);
  font-family:'Inter',system-ui,Arial,sans-serif; display:none; padding:16px 16px 18px;
}
#oct-a11y-panel.open{ display:block; }
#oct-a11y-panel h2{ font-size:1.05rem; font-weight:800; margin:0 0 2px; color:#0A0E17; }
#oct-a11y-panel .oct-a11y-sub{ font-size:.78rem; color:#555; margin:0 0 12px; }
.oct-a11y-group{ margin:0 0 14px; }
.oct-a11y-group > .lbl{ font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#444; margin-bottom:7px; display:block; }
.oct-a11y-row{ display:flex; gap:8px; flex-wrap:wrap; }
.oct-a11y-opt{
  flex:1; min-width:64px; text-align:center; padding:9px 8px; border:2px solid #d9d9de; border-radius:10px;
  background:#f6f6f8; color:#0A0E17; font:600 .8rem 'Inter',sans-serif; cursor:pointer;
}
.oct-a11y-opt[aria-pressed="true"], .oct-a11y-opt.active{ background:#1533C4; border-color:#1533C4; color:#fff; }
.oct-a11y-opt:focus-visible{ outline:3px solid #0A0E17; outline-offset:2px; }
.oct-a11y-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 12px; border:2px solid #d9d9de; border-radius:10px; background:#f6f6f8;
  color:#0A0E17; font:600 .88rem 'Inter',sans-serif; cursor:pointer; margin-bottom:8px; text-align:left;
}
.oct-a11y-toggle[aria-pressed="true"]{ background:#eaf0ff; border-color:#1533C4; }
.oct-a11y-toggle .sw{ width:40px; height:22px; border-radius:999px; background:#c4c4cc; position:relative; flex:none; transition:background .15s; }
.oct-a11y-toggle[aria-pressed="true"] .sw{ background:#1533C4; }
.oct-a11y-toggle .sw::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s; }
.oct-a11y-toggle[aria-pressed="true"] .sw::after{ left:20px; }
.oct-a11y-toggle:focus-visible{ outline:3px solid #0A0E17; outline-offset:2px; }
.oct-a11y-read{ display:flex; gap:8px; }
.oct-a11y-read button{ flex:1; padding:11px 8px; border-radius:10px; border:2px solid #1533C4; background:#1533C4; color:#fff; font:700 .85rem 'Inter',sans-serif; cursor:pointer; }
.oct-a11y-read button.ghost{ background:#fff; color:#1533C4; }
.oct-a11y-read button:disabled{ opacity:.45; cursor:not-allowed; }
.oct-a11y-read button:focus-visible{ outline:3px solid #0A0E17; outline-offset:2px; }
#oct-a11y-reset{ width:100%; margin-top:4px; padding:10px; border:2px solid #d9d9de; border-radius:10px; background:#fff; color:#0A0E17; font:600 .82rem 'Inter',sans-serif; cursor:pointer; }
#oct-a11y-close{ position:absolute; top:10px; right:12px; background:none; border:0; font-size:1.4rem; line-height:1; color:#555; cursor:pointer; padding:4px 8px; }
#oct-a11y-close:focus-visible{ outline:3px solid #0A0E17; }
#oct-a11y-skip{ position:absolute; left:-999px; top:0; z-index:6000; background:#1533C4; color:#fff; padding:10px 16px; border-radius:0 0 8px 0; font:700 .9rem 'Inter',sans-serif; text-decoration:none; }
#oct-a11y-skip:focus{ left:0; }
@media(prefers-reduced-motion: reduce){ #oct-a11y-btn{ transition:none; } }

/* ── Applied preference styles (scoped to <html> classes) ── */
html.oc-a11y-fs1 body{ zoom:1.12; } html.oc-a11y-fs2 body{ zoom:1.25; } html.oc-a11y-fs3 body{ zoom:1.40; }
/* ── True high-contrast: black background, white text, yellow links (opt-in) ── */
html.oc-a11y-contrast, html.oc-a11y-contrast body{ background:#000!important; color:#fff!important; }
html.oc-a11y-contrast *:not(svg):not(path):not(circle):not(rect):not(line):not(polygon):not(use):not(img){
  background-color:transparent!important; background-image:none!important;
  color:#fff!important; border-color:#fff!important; box-shadow:none!important; text-shadow:none!important;
}
html.oc-a11y-contrast a, html.oc-a11y-contrast a *{ color:#ffff1a!important; text-decoration:underline!important; }
html.oc-a11y-contrast :is(button,.btn,[class*="btn"],.nav-cta,input,select,textarea){
  background:#000!important; color:#ffff1a!important; border:2px solid #ffff1a!important;
}
html.oc-a11y-contrast img{ border:1px solid #fff!important; }
html.oc-a11y-contrast :focus{ outline:3px solid #ffff1a!important; outline-offset:2px!important; }
/* keep the accessibility widget itself readable */
html.oc-a11y-contrast #oct-a11y-btn{ background:#000!important; border-color:#ffff1a!important; }
html.oc-a11y-contrast #oct-a11y-panel, html.oc-a11y-contrast #oct-a11y-panel *{ background:#000!important; color:#fff!important; border-color:#fff!important; }
html.oc-a11y-contrast .oct-a11y-opt[aria-pressed="true"], html.oc-a11y-contrast .oct-a11y-toggle[aria-pressed="true"] .sw{ background:#ffff1a!important; color:#000!important; }
html.oc-a11y-links a{ text-decoration:underline!important; }
html.oc-a11y-links a:not([class*="btn"]){ outline:1px dotted currentColor; outline-offset:2px; }
html.oc-a11y-readable, html.oc-a11y-readable body, html.oc-a11y-readable :is(p,li,td,th,span,div,a,h1,h2,h3,h4,h5,h6,button,input,label){ font-family:Verdana,Tahoma,'Segoe UI',Arial,sans-serif!important; letter-spacing:.012em!important; }
html.oc-a11y-motion *, html.oc-a11y-motion *::before, html.oc-a11y-motion *::after{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
.oct-a11y-reading-hl{ background:#fff3b0!important; color:#0A0E17!important; box-shadow:0 0 0 2px #f2c200; border-radius:3px; }


/* ---------------------------------------------------------- */
/* Data source freshness panels.
   Rendered by octary_data_status_badge() in includes/octary-data-status.php.
   Loaded here because nav.css is present on every page. */

.data-source-panel{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem;
  margin:1.25rem 0; padding:.85rem 1rem;
  background:var(--bg-card,#fff);
  border:1px solid var(--border,#E7E5DF);
  border-left:4px solid var(--border,#E7E5DF);
  border-radius:var(--radius,12px);
  font-size:.9rem; line-height:1.5;
}
.data-source-panel strong{ flex:0 0 auto; color:var(--text-primary,#0A0E17); }
.data-source-panel small{ flex:1 1 100%; color:var(--text-secondary,#4A5568); }
.data-source-panel small a{ color:var(--accent,#1533C4); }

.data-state{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.15rem .6rem; border-radius:999px;
  font-size:.78rem; font-weight:600; letter-spacing:.01em;
  white-space:nowrap;
}
.data-state::before{
  content:""; width:.5rem; height:.5rem; border-radius:50%;
  background:currentColor; flex:0 0 auto;
}

/* Healthy */
.data-state--current{ background:rgba(34,197,94,.12); color:#15803d; }
.data-source-panel--current{ border-left-color:#22c55e; }

.data-state--manual{ background:rgba(21,51,196,.10); color:#1533C4; }
.data-source-panel--manual{ border-left-color:#1533C4; }

/* Needs attention */
.data-state--delayed{ background:rgba(245,158,11,.14); color:#b45309; }
.data-source-panel--delayed{ border-left-color:#f59e0b; }

.data-state--stale{ background:rgba(245,158,11,.18); color:#92400e; }
.data-source-panel--stale{ border-left-color:#d97706; }

/* Broken or absent. Deliberately visible rather than quietly green. */
.data-state--failed{ background:rgba(239,68,68,.14); color:#b91c1c; }
.data-source-panel--failed{ border-left-color:#ef4444; }

.data-state--never{ background:rgba(107,114,128,.16); color:#374151; }
.data-source-panel--never{ border-left-color:#6b7280; }

.data-state--unknown{ background:rgba(107,114,128,.12); color:#4b5563; }
.data-source-panel--unknown{ border-left-color:#9ca3af; }

@media (prefers-reduced-motion:no-preference){
  .data-state--failed::before{ animation:octDataPulse 2.4s ease-in-out infinite; }
}
@keyframes octDataPulse{ 0%,100%{opacity:1} 50%{opacity:.35} }