/* E46 / Tessera theme for Furo: deep-space navy, radium green, lane blue, gold.
   Normal modes follow Furo's light/dark toggle; "High contrast" (html.e46-hc) is a
   colour-blind-safe override using the Okabe–Ito palette and underlined links. */

:root {
  --e46-navy-0: #060a14;
  --e46-navy-1: #0b1222;
  --e46-navy-2: #121b31;
  --e46-blue:   #4cc3ff;   /* lane light */
  --e46-blue-d: #1f7fd1;
  --e46-green:  #9be15d;   /* radium glow */
  --e46-green-d:#3f8f1f;
  --e46-gold:   #e8c27a;
}

/* ---------- typography shared by all modes ---------- */
h1, h2, h3, .sidebar-brand-text { font-family: Georgia, "Times New Roman", serif; }
h1 { letter-spacing: 0.06em; }
.sidebar-brand-text { letter-spacing: 0.18em; text-transform: uppercase; font-size: 1.05rem; }

/* ---------- dark mode: the E46 look ---------- */
body[data-theme="dark"], body:not([data-theme="light"]) {
  --e46-glow-green: 0 0 12px rgba(155, 225, 93, 0.35);
  --e46-glow-blue:  0 0 12px rgba(76, 195, 255, 0.35);
}
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) h1 { color: var(--e46-gold); text-shadow: 0 0 18px rgba(232,194,122,.25); }
  body:not([data-theme="light"]) h2 { color: var(--e46-green); text-shadow: var(--e46-glow-green); }
  body:not([data-theme="light"]) h3 { color: var(--e46-blue);  text-shadow: var(--e46-glow-blue); }
  body:not([data-theme="light"]) { background:
      radial-gradient(ellipse at 80% -10%, rgba(76,195,255,.10), transparent 55%),
      radial-gradient(ellipse at 10% 110%, rgba(155,225,93,.08), transparent 50%),
      var(--e46-navy-0); }
}
body[data-theme="dark"] h1 { color: var(--e46-gold); text-shadow: 0 0 18px rgba(232,194,122,.25); }
body[data-theme="dark"] h2 { color: var(--e46-green); text-shadow: var(--e46-glow-green); }
body[data-theme="dark"] h3 { color: var(--e46-blue);  text-shadow: var(--e46-glow-blue); }
body[data-theme="dark"] { background:
    radial-gradient(ellipse at 80% -10%, rgba(76,195,255,.10), transparent 55%),
    radial-gradient(ellipse at 10% 110%, rgba(155,225,93,.08), transparent 50%),
    var(--e46-navy-0); }

/* links: blue, turning radium green on hover; visited stays blue-green */
.content a.reference, article a { transition: color .15s, text-shadow .15s; }
body[data-theme="dark"] article a:hover, body:not([data-theme="light"]) article a:hover { text-shadow: var(--e46-glow-green); }
article a:visited { color: var(--color-brand-visited, var(--color-brand-content)); }

/* light mode: same accents, darker shades for contrast on white */
body[data-theme="light"] h1 { color: #7a5a14; }
body[data-theme="light"] h2 { color: var(--e46-green-d); }
body[data-theme="light"] h3 { color: var(--e46-blue-d); }

/* tables and code blocks: subtle green/blue frame */
article table.docutils { border: 1px solid rgba(76,195,255,.35); }
article table.docutils th { border-bottom: 2px solid rgba(155,225,93,.55); }
article div.highlight { border-left: 3px solid var(--e46-blue); }

/* ---------- homepage hero and doorway cards ---------- */
.e46-hero { position: relative; border-radius: 14px; overflow: hidden; margin: 0 0 1.5rem;
            box-shadow: 0 0 0 1px rgba(76,195,255,.25), 0 10px 40px rgba(0,0,0,.45); }
.e46-hero img { display: block; width: 100%; height: auto; }
.e46-genesis-figure { margin: 1.25rem 0 1.75rem; }
.e46-genesis-figure img { display: block; width: 100%; height: auto; border-radius: 12px;
            box-shadow: 0 0 0 1px rgba(76,195,255,.25), 0 10px 32px rgba(0,0,0,.35); }
.e46-genesis-figure figcaption { margin-top: .5rem; color: var(--color-foreground-secondary); font-size: .9rem; }
.e46-hero .e46-hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.25rem;
            background: linear-gradient(transparent, rgba(6,10,20,.92)); color: #f3f6ff; }
.e46-hero .e46-hero-text strong { color: var(--e46-gold); letter-spacing: .25em; font-family: Georgia, serif; }

.e46-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 1rem 0 2rem; }
.e46-card { display: block; border-radius: 12px; overflow: hidden; text-decoration: none !important;
            background: var(--e46-navy-1); border: 1px solid rgba(76,195,255,.25);
            transition: transform .15s, box-shadow .15s, border-color .15s; }
.e46-card:hover { transform: translateY(-3px); border-color: var(--e46-green);
            box-shadow: 0 0 18px rgba(155,225,93,.30); }
.e46-card img { display: block; width: 100%; height: 120px; object-fit: cover; }
.e46-card .e46-card-body { padding: .7rem .85rem .85rem; color: #dbe4f7; font-size: .9rem; line-height: 1.35; }
.e46-card .e46-card-tag { display: inline-block; font-weight: 700; letter-spacing: .14em; font-size: .78rem;
            padding: .1rem .45rem; border-radius: 6px; margin-bottom: .35rem; }
.e46-card.full    .e46-card-tag { background: rgba(232,194,122,.18); color: var(--e46-gold); }
.e46-card.complex .e46-card-tag { background: rgba(76,195,255,.18);  color: var(--e46-blue); }
.e46-card.simple  .e46-card-tag { background: rgba(155,225,93,.18);  color: var(--e46-green); }
.e46-card.safu    .e46-card-tag { background: rgba(255,255,255,.12); color: #f3f6ff; }

/* lead line and quote under the hero */
.e46-lead { font-size: 1.15rem; line-height: 1.5; margin: 0 0 .9rem; }
.e46-quote { margin: 0 0 1.6rem; padding: .9rem 1.2rem; border-left: 4px solid var(--e46-green);
            border-radius: 0 10px 10px 0; font-family: Georgia, serif; font-style: italic; font-size: 1.2rem;
            background: linear-gradient(90deg, rgba(155,225,93,.12), rgba(76,195,255,.06) 70%, transparent);
            color: var(--e46-gold); text-shadow: 0 0 14px rgba(232,194,122,.25); }
body[data-theme="light"] .e46-quote { color: #7a5a14; text-shadow: none; }
html.e46-hc .e46-quote { background: #000; color: #fff !important; border-left: 4px solid #f0e442; text-shadow: none; }

/* ---------- high-contrast / colour-blind-safe toggle button ---------- */
#e46-hc-wrap { position: fixed; right: 16px; bottom: 16px; z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; }
#e46-hc-tip { display: none; max-width: min(18rem, calc(100vw - 32px)); margin-bottom: .5rem; padding: .6rem .8rem; border-radius: 10px;
            font: 500 .85rem/1.4 system-ui, sans-serif; background: var(--e46-navy-1); color: #f3f6ff; border: 2px solid var(--e46-blue); }
#e46-hc-tip a { color: #f0e442; text-decoration: underline; }
#e46-hc-wrap:hover #e46-hc-tip, #e46-hc-wrap:focus-within #e46-hc-tip { display: block; }
html.e46-hc #e46-hc-tip { background: #000; color: #fff; border-color: #fff; }
#e46-hc-toggle { cursor: pointer;
            font: 600 .85rem/1 system-ui, sans-serif; padding: .55rem .8rem; border-radius: 999px;
            border: 2px solid var(--e46-blue); background: var(--e46-navy-1); color: #f3f6ff; }
#e46-hc-toggle:hover { border-color: var(--e46-green); }
#e46-hc-toggle:focus-visible { outline: 3px solid #f0e442; outline-offset: 2px; }

/* ---------- HIGH CONTRAST (Okabe–Ito palette, colour-blind safe) ---------- */
html.e46-hc body, html.e46-hc body[data-theme] {
  --color-background-primary: #000000;
  --color-background-secondary: #000000;
  --color-background-hover: #1a1a1a;
  --color-background-border: #ffffff;
  --color-foreground-primary: #ffffff;
  --color-foreground-secondary: #ffffff;
  --color-foreground-muted: #e6e6e6;
  --color-brand-primary: #f0e442;     /* yellow */
  --color-brand-content: #56b4e9;     /* sky blue */
  --color-brand-visited: #e69f00;     /* orange */
  --color-sidebar-background: #000000;
  --color-sidebar-link-text: #ffffff;
  --color-sidebar-link-text--top-level: #f0e442;
  --color-code-background: #0d0d0d;
  --color-code-foreground: #ffffff;
  --color-inline-code-background: #1a1a1a;
  background: #000 !important;
}
html.e46-hc h1, html.e46-hc h2, html.e46-hc h3 { color: #ffffff !important; text-shadow: none !important; }
html.e46-hc h2 { border-bottom: 3px solid #f0e442; padding-bottom: .2rem; }
html.e46-hc h3 { border-bottom: 2px dashed #56b4e9; padding-bottom: .15rem; }
html.e46-hc a, html.e46-hc a:visited { text-decoration: underline !important; text-underline-offset: 3px;
            text-decoration-thickness: 2px !important; text-shadow: none !important; }
html.e46-hc a:hover, html.e46-hc a:focus { color: #000 !important; background: #f0e442; }
html.e46-hc table.docutils, html.e46-hc table.docutils td, html.e46-hc table.docutils th { border: 1px solid #fff !important; }
html.e46-hc .e46-card { background: #000; border: 2px solid #fff; }
html.e46-hc .e46-card .e46-card-tag { background: #fff !important; color: #000 !important; }
html.e46-hc .e46-card .e46-card-body { color: #fff; }
html.e46-hc .e46-card img, html.e46-hc .e46-hero img { filter: contrast(1.1) saturate(.6); }
html.e46-hc #e46-hc-toggle { background: #f0e442; color: #000; border-color: #fff; }

/* ---------- homepage: centred white-paper button ---------- */
.e46-center { text-align: center; margin: 1.5rem 0 2rem; }
.e46-wp-button { display: inline-block; padding: .8rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: 1.1rem;
            background: var(--e46-gold); color: #10131c !important; text-decoration: none !important; }
.e46-wp-button:hover { filter: brightness(1.1); }
.e46-wp-button:focus-visible { outline: 3px solid #f0e442; outline-offset: 3px; }
.e46-small { font-size: .9rem; opacity: .85; margin-top: .6rem; }

/* ---------- QTL wallet-entrance toy ---------- */
.e46-toy { border: 2px solid var(--e46-blue); border-radius: 14px; padding: 1rem; margin: 1rem 0 1.5rem; background: #0b0f1a; color: #dfe7ff; }
.e46-toy-screen { margin: 0 0 1rem; padding: .75rem; background: #05070d; color: #8ab4ff; border-radius: 8px;
            font: .78rem/1.25 ui-monospace, Menlo, monospace; overflow-x: auto; white-space: pre; }
.e46-toy-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.e46-toy-controls input { flex: 1 1 10rem; min-width: 0; padding: .5rem; border-radius: 8px; border: 1px solid var(--e46-blue);
            background: #05070d; color: #fff; font-size: 1rem; }
.e46-toy-controls button { padding: .5rem 1rem; border-radius: 8px; border: 2px solid var(--e46-blue); cursor: pointer;
            background: var(--e46-blue); color: #05070d; font-weight: 700; }
.e46-toy-controls button.secondary { background: transparent; color: #dfe7ff; }
.e46-toy-controls button:disabled { opacity: .5; cursor: wait; }
.e46-toy-steps { margin: 1rem 0 0; padding-left: 0; list-style: none; }
.e46-toy-steps li.ok { color: #7ee2a8; }
.e46-toy-steps li.bad { color: #ffb86b; }
html.e46-hc .e46-toy, html.e46-hc .e46-toy-screen { background: #000; color: #fff; border-color: #fff; }
html.e46-hc .e46-toy-steps li.ok { color: #56b4e9; }
html.e46-hc .e46-toy-steps li.bad { color: #e69f00; }
html.e46-hc .e46-wp-button { background: #f0e442; color: #000 !important; }

/* ---------- tooltip popover (hover or keyboard focus) ---------- */
.e46-tip { position: relative; cursor: help; border-bottom: 1px dotted currentColor; white-space: nowrap; }
.e46-tip:focus-visible { outline: 3px solid #f0e442; outline-offset: 2px; }
.e46-tip-body { display: none; position: absolute; z-index: 50; left: 0; top: calc(100% + 6px); width: min(20rem, 80vw);
            white-space: normal; padding: .6rem .8rem; border-radius: 10px; font-size: .85rem; line-height: 1.4; font-weight: 400;
            background: var(--e46-navy-1); color: #f3f6ff; border: 2px solid var(--e46-blue); }
.e46-tip-body a { color: #f0e442; text-decoration: underline; }
.e46-tip:hover .e46-tip-body, .e46-tip:focus-within .e46-tip-body { display: block; }
html.e46-hc .e46-tip-body { background: #000; color: #fff; border-color: #fff; }
.table-wrapper:has(.e46-tip) { overflow: visible !important; }   /* don't clip the popover inside a table */

/* ---------- homepage banner (above the header art) ---------- */
.e46-banner { margin: 0 0 1rem; border-radius: 10px; overflow: hidden; background: #000; }
.e46-banner img { display: block; width: 100%; height: auto; }

/* ---------- About page easter egg: a tiny rocket that opens the comic ---------- */
.e46-egg { margin-top: 3rem; }
.e46-egg summary { list-style: none; cursor: pointer; width: max-content; opacity: .35; font-size: 1.1rem; }
.e46-egg summary::-webkit-details-marker { display: none; }
.e46-egg summary:hover, .e46-egg summary:focus-visible { opacity: 1; }
.e46-egg img { display: block; width: 100%; height: auto; margin-top: .75rem; border-radius: 10px; }

/* ---------- "Warp to Explore" button, beside the white paper button ---------- */
.e46-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.e46-warp { background: transparent; color: var(--e46-gold) !important; border: 2px solid var(--e46-gold); }
.e46-warp:hover { background: rgba(232,194,122,.12); filter: none; }
html.e46-hc .e46-warp { background: #000; color: #f0e442 !important; border-color: #f0e442; }