/* MyGeneLog™ — dark-first, three-tone neon (cyan / lime / magenta).
   "DNA gel under UV light." See SITE_SPEC.md §6. */

:root {
  --mgl-bg: #0a0d13;
  --mgl-bg-alt: #0d1119;
  --mgl-card: #12161f;
  --mgl-border: #232a38;
  --mgl-text: #e6e6f0;
  --mgl-muted: #9aa3b2;
  --mgl-cyan: #2af0e0;
  --mgl-lime: #c6ff3d;
  --mgl-magenta: #ff3ec9;
  --mgl-cyan-ink: #04121b;
  --mgl-radius: 14px;

  /* One monospace stack, because it is set in four places and they have to
     agree. The old var(--mgl-mono) was Apple-only twice over:
     SF Mono is a system font browsers do not expose to page CSS, so even a Mac
     landed on Menlo, and Windows fell through to the generic monospace —
     Courier New — under gene symbols and rsIDs on every card. `ui-monospace`
     is how a browser is asked for the platform's real UI monospace (SF Mono on
     Apple), with named faces behind it for the platforms that have no such
     keyword. */
  --mgl-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
              'Liberation Mono', 'Roboto Mono', monospace;

  /* Hangul is picked up per character by whichever family here first
     has the glyph. Inter has none, so Korean falls to the Apple faces on
     macOS and iOS — the rendering this site is tuned against. Pretendard
     sits immediately after them rather than in front: Apple platforms
     never reach it and are left exactly as they were, while Windows and
     Android — where the next stop is Malgun Gothic — get a face that
     belongs beside Inter. */
  --mgl-sans: 'Inter', -apple-system, BlinkMacSystemFont,
              'Pretendard Variable', Pretendard,
              'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

body.mgl {
  margin: 0;
  background: var(--mgl-bg);
  color: var(--mgl-text);
  font-family: var(--mgl-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Korean already puts spaces between 어절, but a browser treats every
     syllable of a CJK script as a break opportunity anyway — so a line ends
     mid-word and reads as a typo rather than a wrap. `keep-all` moves the
     break to the spaces that are already there. The spec makes it a no-op for
     non-CJK text, so it is set once here rather than only under :lang(ko):
     Korean also appears inside lang="en" documents, all through the admin
     translation desk.

     `overflow-wrap` is the escape hatch that keep-all needs. With breaking
     forbidden inside a word, one token longer than its container — a URL, an
     unspaced run of Hangul — would otherwise push the whole page sideways.
     Code and citation blocks below opt back into breaking anywhere; setting
     this on `body` and letting it inherit leaves those rules untouched, since
     an element's own declaration always beats an inherited one. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.mgl-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3, .mgl-logo, .mgl-eyebrow {
  font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  letter-spacing: -0.01em;
}

/* Korean headings use the body's family and no negative tracking.
   Two things went wrong with the display stack on Korean pages, and both were
   loudest on the list pages, where every card is a Korean <h3> sitting
   directly on top of a Korean <p>:

   - Space Grotesk has no Hangul and, unlike the body stack, no Apple face
     behind it, so the two stacks could resolve Korean to different substitutes
     — two typefaces per card, twenty cards to a page.
   - -0.01em is tracking drawn for Latin. Hangul syllable blocks are already
     set tight inside their own em box, so pulling them closer makes them
     collide rather than tighten.

   The wordmark keeps the display face: it is always Latin. */
body.mgl-lang-ko h1,
body.mgl-lang-ko h2,
body.mgl-lang-ko h3,
body.mgl-lang-ko .mgl-eyebrow {
  font-family: var(--mgl-sans);
  letter-spacing: normal;
}

/* Background: faint double-helix wash */
body.mgl {
  background-image:
    radial-gradient(60% 50% at 15% 0%, rgba(42,240,224,0.10), transparent 60%),
    radial-gradient(50% 40% at 100% 20%, rgba(255,62,201,0.08), transparent 60%),
    radial-gradient(40% 40% at 50% 100%, rgba(198,255,61,0.06), transparent 60%);
  background-repeat: no-repeat;
}

a { color: var(--mgl-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

.mgl-nav {
  position: sticky; top: 0; z-index: 20;
  /* Frosted, not solid. The bar was already semi-transparent at 0.75, but it
     sat over a hero of almost exactly the same colour, so the transparency was
     real and invisible. Thinning the tint and raising the blur lets the
     gradient and the helix read through it. The saturate() is the part that
     matters for colour: blurring alone washes what is behind the bar toward
     grey, and pushing saturation back up is what keeps the cyan and magenta
     recognisable through the veil rather than merely present. */
  background: rgba(10, 13, 19, 0.62);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);   /* Safari and iOS */
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* No backdrop-filter means no blur separating the links from whatever scrolls
   under them, and a thin tint alone will not hold that contrast. Those
   browsers get a nearly opaque bar — readable beats pretty. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mgl-nav { background: rgba(10, 13, 19, 0.94); }
}

/* The open mobile menu drops the links below the bar and over page content,
   where a 0.58 tint is not enough to read against. Closing over it while the
   menu is open costs nothing, since the page behind is hidden anyway. */
.mgl-nav:has(.mgl-nav-checkbox:checked) { background: rgba(10, 13, 19, 0.92); }
.mgl-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: 1120px; margin: 0 auto; }
.mgl-logo {
  display: inline-flex; align-items: center; gap: 0;
  font-weight: 800; font-size: 1.05rem; line-height: 1;
  background: var(--mgl-cyan); color: var(--mgl-cyan-ink);
  padding: 9px 16px; border-radius: 10px;
}
/* The logo is a flex container, so vertical-align does nothing on the ™ —
   raise it with align-self instead, and keep it flush against the wordmark. */
.mgl-logo .tm {
  /* The ™ glyph sits small inside its own em box, so 0.8em rendered as a
     whisper next to an 800-weight wordmark. Sized up until the mark is
     actually legible at nav scale. */
  font-size: 1.05em; font-weight: 800; align-self: flex-start;
  margin-top: -0.02em; margin-left: 1px; letter-spacing: 0;
}
.mgl-logo:hover { text-decoration: none; }
.mgl-nav-links { display: flex; gap: 22px; align-items: center; }
/* Brighter than --mgl-muted, and only here. Once the bar is glass, the links
   are read against whatever scrolls under it, not against a fixed panel.
   Measured against the worst realistic backdrop — a cover image passing
   beneath — #9aa3b2 falls to about 2.8:1, under the 4.5:1 floor, while this
   holds 4.9:1 there and better than 10:1 over the hero. The bar can be
   see-through or the links can be dim; it cannot be both. */
.mgl-nav-links a { color: #c3c9d4; font-weight: 600; font-size: 0.95rem; }
.mgl-nav-links a:hover { color: var(--mgl-cyan); text-decoration: none; }
.mgl-nav-links a.mgl-btn { color: var(--mgl-cyan-ink); }
.mgl-nav-links a.mgl-btn:hover { color: var(--mgl-cyan-ink); text-decoration: none; }
.mgl-nav-links a.mgl-btn-donate { color: var(--mgl-magenta); }

.mgl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px; font-weight: 700; font-size: 0.95rem;
  border: 1px solid transparent; cursor: pointer;
}
.mgl-btn:hover { text-decoration: none; }
.mgl-btn-primary { background: linear-gradient(135deg, var(--mgl-cyan), #17b6a9); color: var(--mgl-cyan-ink); box-shadow: 0 0 24px rgba(42,240,224,0.35); }
.mgl-btn-primary:hover { filter: brightness(1.08); }
.mgl-btn-ghost { background: transparent; color: var(--mgl-text); border-color: var(--mgl-border); }
.mgl-btn-ghost:hover { border-color: var(--mgl-cyan); color: var(--mgl-cyan); }
.mgl-btn-donate { background: transparent; color: var(--mgl-magenta); border-color: rgba(255,62,201,0.4); }
.mgl-btn-donate:hover { border-color: var(--mgl-magenta); }

.mgl-hero-outer { position: relative; overflow: hidden; }
.mgl-dna-wrap {
  position: absolute; inset: 0 0 0 auto; width: 480px; pointer-events: none; opacity: 0.85;
  -webkit-mask-image: radial-gradient(ellipse 62% 88% at 68% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 88% at 68% 50%, #000 30%, transparent 78%);
}
.mgl-dna-wrap canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 1100px) { .mgl-dna-wrap { display: none; } }

/* Ball-and-stick base-pair illustration (CPK-colored atoms + brand glow) */
.mgl-molecule-wrap {
  position: absolute; inset: 0 0 0 auto; width: 440px; pointer-events: none; opacity: 0.95;
  perspective: 1100px;
  -webkit-mask-image: radial-gradient(ellipse 62% 88% at 66% 50%, #000 32%, transparent 80%);
  mask-image: radial-gradient(ellipse 62% 88% at 66% 50%, #000 32%, transparent 80%);
}
.mgl-molecule-wrap::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 62% 50%, rgba(120,140,255,0.16), transparent 72%);
}
.mgl-molecule-wrap svg {
  position: relative; width: 100%; height: 100%; display: block;
  transform-style: preserve-3d; animation: mgl-mol-tilt 13s ease-in-out infinite;
}
@keyframes mgl-mol-tilt {
  0%, 100% { transform: rotateX(0deg) rotateY(0deg); }
  45% { transform: rotateX(58deg) rotateY(9deg); }
  55% { transform: rotateX(58deg) rotateY(-7deg); }
}
@media (max-width: 1100px) { .mgl-molecule-wrap { display: none; } }
@media (prefers-reduced-motion: reduce) { .mgl-molecule-wrap svg { animation: none; } }

.mgl-mol-sway { transform-origin: 120px 240px; transform-style: preserve-3d; animation: mgl-mol-drift 8s ease-in-out infinite; }
@keyframes mgl-mol-drift {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50% { transform: translateY(-12px) rotate(2.5deg); }
}
.mgl-mol-back { transform: translateZ(-22px); }
.mgl-mol-front { transform: translateZ(20px); }

.mgl-mol-backbone { stroke: rgba(210,226,255,0.4); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.mgl-mol-bond { stroke: rgba(205,215,230,0.65); stroke-width: 2.1; stroke-linecap: round; }
.mgl-mol-bond-thin { stroke: rgba(205,215,230,0.55); stroke-width: 1.5; stroke-linecap: round; }
.mgl-mol-label, .mgl-mol-baselabel {
  fill: #e6f0ff; font: 700 12px "Space Grotesk", Inter, sans-serif; text-anchor: middle; dominant-baseline: middle;
  paint-order: stroke; stroke: rgba(8,11,16,0.75); stroke-width: 3px;
}
.mgl-mol-baselabel { fill: #fff; font-weight: 800; font-size: 13px; }

.mgl-atom-h { fill: url(#gradH); }
.mgl-atom-o { fill: url(#gradO); }
.mgl-atom-n { fill: url(#gradN); }
.mgl-atom-c { fill: url(#gradC); }
.mgl-atom-p { fill: url(#gradP); }
.mgl-atom-s { fill: url(#gradS); }

/* The connections strip on a variant page: the three axes one position reaches.
   Bordered rather than bare so it reads as a map of the page's edges, not as
   another paragraph of body copy. */
.mgl-connections {
  border: 1px solid var(--mgl-border); border-left: 3px solid var(--mgl-cyan);
  border-radius: 10px; padding: 14px 16px; margin: -6px 0 28px;
  background: rgba(255, 255, 255, 0.02);
}
.mgl-connections-lede {
  margin: 0 0 8px; font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mgl-muted); font-weight: 700;
}
.mgl-connections p:not(.mgl-connections-lede) {
  margin: 0 0 6px; font-size: 0.92rem; color: var(--mgl-muted);
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.mgl-connections p:last-child { margin-bottom: 0; }
.mgl-connections p > span { color: var(--mgl-text); font-weight: 600; }
.mgl-connections i { width: 15px; text-align: center; }

/* The per-variant connection graph, drawn under the text strip that carries
   the same links. Below 640px the 700-wide diagram would shrink its labels
   past legibility, so it hides and the strip above stands alone. */
.mgl-graph { margin: -4px 0 30px; padding: 0; }
.mgl-graph svg { display: block; max-width: 100%; overflow: visible; }
.mgl-graph a { text-decoration: none; }
.mgl-graph a:hover .mgl-graph-node { text-decoration: underline; }
.mgl-graph-hub {
  fill: var(--mgl-text); font: 700 15px var(--mgl-mono); text-anchor: middle;
}
.mgl-graph-node { font: 600 14px var(--mgl-sans); dominant-baseline: middle; }
/* The axis label sits under its node, so it needs enough size to be read at a
   glance rather than squinted at — it is what tells you which of the three
   kinds of connection you are looking at. */
.mgl-graph-axis {
  fill: var(--mgl-muted); font: 700 11.5px var(--mgl-sans); letter-spacing: 0.06em;
}
/* The gene symbol under the rsID: the part of the hub a reader recognises. */
.mgl-graph-hub-sub {
  fill: var(--mgl-muted); font: 700 12.5px var(--mgl-mono);
  text-anchor: middle; letter-spacing: 0.02em;
}
@media (max-width: 640px) { .mgl-graph { display: none; } }
/* The delocalised ring: one faint circle inside the sigma frame, which is how
   an aromatic system is drawn in every textbook the reader may have seen. */
.mgl-mol-aromatic { fill: none; stroke: rgba(198,255,61,0.45); stroke-width: 1.6; }
.mgl-mol-formula { fill: rgba(210,226,255,0.62); font-family: var(--mgl-mono);
  font-size: 10px; text-anchor: middle; letter-spacing: 0.04em; }

.mgl-base-glow { animation: mgl-mol-basepulse 3.4s ease-in-out infinite; }
@keyframes mgl-mol-basepulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; } }
.mgl-base-t.mgl-base-glow { filter: drop-shadow(0 0 7px rgba(42,210,240,0.8)); }
.mgl-base-a.mgl-base-glow { filter: drop-shadow(0 0 7px rgba(255,79,145,0.8)); }
.mgl-base-g.mgl-base-glow { filter: drop-shadow(0 0 7px rgba(255,176,32,0.8)); }
.mgl-base-c.mgl-base-glow { filter: drop-shadow(0 0 7px rgba(58,214,140,0.8)); }

.mgl-mol-hbond { stroke: rgba(255,255,255,0.85); stroke-width: 2; stroke-dasharray: 4 3; stroke-linecap: round; animation: mgl-mol-flow 1.2s linear infinite; }
@keyframes mgl-mol-flow { to { stroke-dashoffset: -14; } }

.mgl-glint { fill: #fff; opacity: 0; animation: mgl-mol-glint 3.2s ease-in-out infinite; }
@keyframes mgl-mol-glint { 0%, 100% { opacity: 0; } 50% { opacity: 0.95; } }

/* Filter chips (conditions list) */
.mgl-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px; font-size: 0.86rem; font-weight: 600;
  background: var(--mgl-bg-alt); border: 1px solid var(--mgl-border); color: var(--mgl-muted);
  transition: border-color .15s ease, color .15s ease;
}
.mgl-chip:hover { border-color: var(--mgl-cyan); color: var(--mgl-cyan); text-decoration: none; }
.mgl-chip-active {
  background: rgba(42,240,224,0.12); border-color: var(--mgl-cyan); color: var(--mgl-cyan);
}
.mgl-chip-n { font-size: 0.76rem; opacity: 0.7; font-variant-numeric: tabular-nums; }
.mgl-chip-off { opacity: 0.35; pointer-events: none; }

/* Pager */
.mgl-pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 32px; }
.mgl-pager-gap { color: var(--mgl-muted); padding: 0 2px; }
.mgl-pager-count { color: var(--mgl-muted); font-size: 0.82rem; margin: 12px 0 0; }

/* "Continuously updated" freshness badge */
.mgl-live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: rgba(198,255,61,0.08); border: 1px solid rgba(198,255,61,0.28); color: var(--mgl-lime);
}
.mgl-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mgl-lime); flex: none;
  box-shadow: 0 0 0 0 rgba(198,255,61,0.6); animation: mgl-live-pulse 2.4s ease-out infinite;
}
@keyframes mgl-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(198,255,61,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(198,255,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(198,255,61,0); }
}
@media (prefers-reduced-motion: reduce) { .mgl-live-dot { animation: none; } }
.mgl-live-badge small { color: var(--mgl-muted); font-weight: 500; }

/* An entry revised since it was first published.
   Correcting a page when the evidence moves is the whole premise of the
   Updates section, so a revision is the thing worth showing — not a word
   quietly prefixed to a date. Cyan rather than the lime of .mgl-live-badge:
   that one says the section is alive, this one says this particular entry
   changed, and the two should not read as the same signal. */
.mgl-badge-updated {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  padding: 2px 9px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6;
  background: rgba(42, 240, 224, 0.10); border: 1px solid rgba(42, 240, 224, 0.30);
  color: var(--mgl-cyan);
}
.mgl-badge-updated i { font-size: 0.62rem; opacity: 0.85; }

/* "Reviewed <date>" — the fact-check stamp, deliberately prominent */
.mgl-reviewed-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px; font-size: 0.86rem; font-weight: 700;
  background: rgba(198,255,61,0.1); border: 1px solid rgba(198,255,61,0.35); color: var(--mgl-lime);
}
.mgl-reviewed-badge i { font-size: 0.95em; }

/* Growth curve on /data — draws itself in on load, then the head pulses. */
.mgl-growth-line {
  stroke-dasharray: 3000; stroke-dashoffset: 3000;
  animation: mgl-draw 1.8s cubic-bezier(.22,.9,.3,1) forwards;
  filter: drop-shadow(0 0 6px rgba(42,240,224,0.45));
}
@keyframes mgl-draw { to { stroke-dashoffset: 0; } }
.mgl-growth-dot { opacity: 0; animation: mgl-dot-in .5s ease-out 1.6s forwards, mgl-dot-pulse 2.4s ease-in-out 2.1s infinite; }
@keyframes mgl-dot-in { to { opacity: 1; } }
@keyframes mgl-dot-pulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(198,255,61,0.7)); }
  50% { filter: drop-shadow(0 0 12px rgba(198,255,61,0.95)); }
}
@media (prefers-reduced-motion: reduce) {
  .mgl-growth-line { animation: none; stroke-dashoffset: 0; }
  .mgl-growth-dot { animation: none; opacity: 1; }
}

.mgl-hero { padding: 100px 0 60px; text-align: center; }
.mgl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mgl-lime); border: 1px solid rgba(198,255,61,0.3);
  background: rgba(198,255,61,0.06);
  border-radius: 999px; padding: 7px 16px; margin-bottom: 24px;
}
.mgl-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; margin: 0 0 20px; letter-spacing: -0.03em; line-height: 1.08; }
.mgl-hero h1 .grad {
  background: linear-gradient(135deg, var(--mgl-cyan) 10%, var(--mgl-magenta) 60%, var(--mgl-lime) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mgl-gradshift 6s ease-in-out infinite;
}
@keyframes mgl-gradshift { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }
.mgl-hero p.lead { font-size: 1.2rem; color: var(--mgl-muted); max-width: 640px; margin: 0 auto 36px; }
.mgl-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.mgl-privacy-strip {
  margin: 56px auto 0; max-width: 760px; display: flex; gap: 14px; align-items: flex-start;
  background: var(--mgl-card); border: 1px solid var(--mgl-border); border-radius: var(--mgl-radius);
  padding: 18px 22px; text-align: left;
}
.mgl-privacy-strip i { color: var(--mgl-lime); font-size: 1.1rem; margin-top: 3px; }
.mgl-privacy-strip p { margin: 0; color: var(--mgl-muted); font-size: 0.92rem; }
.mgl-privacy-strip strong { color: var(--mgl-text); }

.mgl-section { padding: 56px 0; }
.mgl-section h2 { font-size: 1.6rem; font-weight: 800; margin: 0 0 8px; }
.mgl-section p.section-sub { color: var(--mgl-muted); margin: 0 0 32px; }

.mgl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }

.mgl-card {
  background: var(--mgl-card); border: 1px solid var(--mgl-border); border-radius: var(--mgl-radius);
  padding: 22px; transition: border-color .15s ease, transform .15s ease;
}
.mgl-card:hover { border-color: var(--mgl-cyan); transform: translateY(-2px); }
/* Pill shape applies wherever the badge is used — it was previously scoped to
   .mgl-card, so the same badge on a detail page rendered as a bare color block. */
.tier-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 4px 12px; border-radius: 999px; line-height: 1.5;
}
.mgl-card .tier-badge { margin-bottom: 12px; }
.tier-standard { background: rgba(42,240,224,0.12); color: var(--mgl-cyan); }
.tier-sensitive { background: rgba(255,62,201,0.12); color: var(--mgl-magenta); }
.mgl-card h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--mgl-text); }
/* .gene is for identifiers — a gene symbol, an rsID — so it is monospaced.
   Card *summaries* are prose and must not borrow it: set in monospace, an
   English sentence merely looks odd, but Korean has no monospaced Hangul to
   fall back on, so the whole summary drops to yet another substitute face. */
.mgl-card .gene { color: var(--mgl-muted); font-size: 0.85rem; margin: 0 0 12px; font-family: var(--mgl-mono); }
.mgl-card .summary { color: var(--mgl-muted); font-size: 0.9rem; line-height: 1.65; margin: 0 0 12px; }
/* The "added <date>" tail rides on the end of the identifier line, but a
   date is prose, not an identifier — and in Korean it is Hangul (9월 5일
   추가), which monospace has no glyphs for, so it dropped to a substitute
   face partway along the line. */
.mgl-card .gene .added { font-family: var(--mgl-sans); }
.mgl-card a.view-more { font-size: 0.88rem; font-weight: 700; }

/* Whole-card link: the entire card is the click target, not just "Read more". */
a.mgl-card-link { display: block; color: inherit; }
a.mgl-card-link:hover { text-decoration: none; }
a.mgl-card-link .view-more { display: inline-block; font-size: 0.88rem; font-weight: 700; color: var(--mgl-cyan); }
a.mgl-card-link:hover .view-more { text-decoration: underline; }
a.mgl-card-link:focus-visible { outline: 2px solid var(--mgl-cyan); outline-offset: 2px; }

.mgl-footer { border-top: 1px solid var(--mgl-border); padding: 40px 0; margin-top: 40px; }
.mgl-footer .mgl-wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.mgl-footer-links { display: flex; gap: 20px; }
.mgl-footer-links a { color: var(--mgl-muted); font-size: 0.88rem; }
.mgl-footer-links a:hover { color: var(--mgl-cyan); }
.mgl-footer small { color: var(--mgl-muted); font-size: 0.82rem; }

/* Variant detail page */
.mgl-genotype { background: var(--mgl-bg-alt); border: 1px solid var(--mgl-border); border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; }
.mgl-genotype .g-key { font-family: var(--mgl-mono); color: var(--mgl-lime); font-weight: 700; margin-right: 10px; }
.mgl-source-note { color: var(--mgl-muted); font-size: 0.85rem; border-top: 1px solid var(--mgl-border); padding-top: 16px; margin-top: 24px; }
.mgl-guideline { background: rgba(198,255,61,0.06); border: 1px solid rgba(198,255,61,0.25); border-radius: 10px; padding: 14px 18px; margin: 20px 0; font-size: 0.92rem; }

/* Forms (contact / admin) */
.mgl-field { margin-bottom: 16px; }
.mgl-field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--mgl-muted); margin-bottom: 6px; }
.mgl-field input:not([type="checkbox"]):not([type="radio"]), .mgl-field select, .mgl-field textarea {
  width: 100%; background: var(--mgl-bg-alt); border: 1px solid var(--mgl-border); border-radius: 8px;
  padding: 10px 12px; color: var(--mgl-text); font-size: 0.95rem; font-family: inherit;
}
.mgl-field input:not([type="checkbox"]):not([type="radio"]):focus, .mgl-field select:focus, .mgl-field textarea:focus { outline: none; border-color: var(--mgl-cyan); }
.mgl-field input[type="checkbox"], .mgl-field input[type="radio"] {
  width: 16px; height: 16px; flex: none; accent-color: var(--mgl-cyan); cursor: pointer;
}
.mgl-field:has(input[type="checkbox"]) label,
.mgl-field:has(input[type="radio"]) label { display: inline; margin-bottom: 0; cursor: pointer; }
.mgl-flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.9rem; }
.mgl-flash-success { background: rgba(198,255,61,0.1); color: var(--mgl-lime); border: 1px solid rgba(198,255,61,0.3); }
.mgl-flash-danger { background: rgba(255,62,201,0.1); color: var(--mgl-magenta); border: 1px solid rgba(255,62,201,0.3); }
.mgl-flash-info { background: rgba(42,240,224,0.1); color: var(--mgl-cyan); border: 1px solid rgba(42,240,224,0.3); }

/* Admin dashboard */
.mgl-admin { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.mgl-admin-side { background: var(--mgl-bg-alt); border-right: 1px solid var(--mgl-border); padding: 20px 14px; }
.mgl-admin-side a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--mgl-muted); font-weight: 600; font-size: 0.9rem; margin-bottom: 2px; }
.mgl-admin-side a:hover, .mgl-admin-side a.active { background: rgba(42,240,224,0.1); color: var(--mgl-cyan); text-decoration: none; }
/* Sidebar group heading — separates the System section from content admin. */
.mgl-admin-section {
  margin: 18px 12px 6px; padding-top: 14px; border-top: 1px solid var(--mgl-border);
  color: var(--mgl-muted); font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75;
}
.mgl-admin-main { padding: 28px 32px; }
.mgl-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mgl-table th { text-align: left; color: var(--mgl-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--mgl-border); }
.mgl-table td { padding: 10px; border-bottom: 1px solid var(--mgl-border); }
.mgl-table tr:hover td { background: rgba(255,255,255,0.02); }
.mgl-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.mgl-badge-open { background: rgba(255,62,201,0.15); color: var(--mgl-magenta); }
.mgl-badge-ok { background: rgba(198,255,61,0.15); color: var(--mgl-lime); }

/* Copy-paste blocks that must never cause a horizontal scrollbar.
   Long URLs and BibTeX lines wrap at any character rather than pushing the
   page sideways — on a phone a scrolling code block reads as broken layout. */
.mgl-endpoint {
  display: block; margin-top: 8px; padding: 12px 14px;
  background: var(--mgl-bg-alt); border: 1px solid var(--mgl-border); border-radius: 8px;
  color: var(--mgl-text); font-family: var(--mgl-mono); font-size: 0.76rem;
  line-height: 1.5; overflow-wrap: anywhere; word-break: break-word;
}
.mgl-cite {
  background: var(--mgl-bg-alt); border: 1px solid var(--mgl-border); border-radius: 8px;
  padding: 14px 16px; font-size: 0.8rem; color: var(--mgl-text);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; margin: 0;
}

/* ===========================================================
   Responsive layout
   The site shipped with no layout breakpoints — only the decorative DNA
   panels were hidden on small screens — so the nav (6 links + a button +
   the logo in one non-wrapping flex row) and the footer both overflowed
   on a phone. Everything below is about small screens only; the desktop
   rules above are untouched.
   =========================================================== */

/* -----------------------------------------------------------
   Language switcher (top right of the nav)
   <details>/<summary> instead of JS, matching the mobile menu: it works with
   scripts disabled and gets keyboard and screen-reader behaviour for free.
   ----------------------------------------------------------- */
/* The bar has three children (logo, links, tools) but `space-between` would
   drop the tools into the middle — explicit order keeps the switcher hard
   right on desktop, and beside the burger on mobile. */
.mgl-nav-tools { display: flex; align-items: center; gap: 10px; order: 3; }
.mgl-logo { order: 1; }
.mgl-nav-links { order: 2; margin-left: auto; margin-right: 18px; }
.mgl-lang { position: relative; }
.mgl-lang > summary {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 9px; border: 1px solid var(--mgl-border); border-radius: 999px;
  color: var(--mgl-muted); font-size: 0.8rem; font-weight: 700;
  list-style: none; user-select: none; transition: border-color .15s ease, color .15s ease;
}
.mgl-lang > summary::-webkit-details-marker { display: none; }  /* Safari's triangle */
.mgl-lang > summary:hover { border-color: var(--mgl-cyan); color: var(--mgl-text); }
.mgl-lang > summary:focus-visible { outline: 2px solid var(--mgl-cyan); outline-offset: 2px; }
.mgl-lang-code { letter-spacing: 0.04em; }
.mgl-lang-caret { font-size: 0.62rem; opacity: 0.65; transition: transform .18s ease; }
.mgl-lang[open] > summary { border-color: var(--mgl-cyan); color: var(--mgl-text); }
.mgl-lang[open] .mgl-lang-caret { transform: rotate(180deg); }

.mgl-lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 170px; padding: 6px;
  background: var(--mgl-card); border: 1px solid var(--mgl-border);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.mgl-lang-menu a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 8px; color: var(--mgl-muted); font-size: 0.9rem; font-weight: 600;
}
.mgl-lang-menu a:hover { background: rgba(255, 255, 255, 0.05); color: var(--mgl-text); text-decoration: none; }
.mgl-lang-menu a.is-active { color: var(--mgl-cyan); }
.mgl-lang-menu a.is-active .fa-check { margin-left: auto; font-size: 0.72rem; }
.mgl-lang-name { white-space: nowrap; }
.mgl-flag { display: block; flex: none; border-radius: 2px; }

/* A "not yet translated" page is a real answer, not an error — it explains the
   policy and hands the reader the English original. */
.mgl-untranslated { max-width: 620px; margin: 90px auto; text-align: center; }

.mgl-nav-burger { display: none; }
/* Visually hidden but still focusable — `hidden`/display:none would drop the
   checkbox out of the accessibility tree, leaving the mobile menu unopenable
   by keyboard. This way Tab reaches it and Space toggles it. */
.mgl-nav-checkbox {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}

@media (max-width: 900px) {
  .mgl-nav-inner { flex-wrap: wrap; padding: 12px 18px; }

  /* Hamburger: three bars that become an X when the menu is open. */
  .mgl-nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 10px; cursor: pointer;
    border: 1px solid var(--mgl-border); border-radius: 10px;
  }
  .mgl-nav-burger span {
    display: block; height: 2px; width: 100%; background: var(--mgl-text);
    border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
  }
  .mgl-nav-checkbox:checked ~ .mgl-nav-inner .mgl-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mgl-nav-checkbox:checked ~ .mgl-nav-inner .mgl-nav-burger span:nth-child(2) { opacity: 0; }
  .mgl-nav-checkbox:checked ~ .mgl-nav-inner .mgl-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Show focus on the burger when the hidden checkbox behind it has focus. */
  .mgl-nav-checkbox:focus-visible ~ .mgl-nav-inner .mgl-nav-burger {
    outline: 2px solid var(--mgl-cyan); outline-offset: 2px;
  }

  /* Tools (language + burger) stay on the bar; links drop below it. */
  .mgl-nav-tools { order: 2; }
  .mgl-nav-links {
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    width: 100%; order: 3; margin: 10px 0 0;
    border-top: 1px solid var(--mgl-border); padding-top: 8px;
  }
  .mgl-nav-checkbox:checked ~ .mgl-nav-inner .mgl-nav-links { display: flex; }
  .mgl-nav-links a { padding: 12px 4px; font-size: 1rem; }
  .mgl-nav-links a.mgl-btn { justify-content: center; margin-top: 8px; padding: 12px 18px; }
}

@media (max-width: 900px) {
  .mgl-footer .mgl-wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  .mgl-footer-links { flex-wrap: wrap; gap: 14px 18px; }
}

@media (max-width: 640px) {
  .mgl-wrap { padding: 0 18px; }
  .mgl-hero { padding: 56px 0 40px; }
  .mgl-hero h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .mgl-hero p.lead { font-size: 1.02rem; }
  .mgl-cta-row { flex-wrap: wrap; }
  .mgl-cta-row .mgl-btn { width: 100%; justify-content: center; }
  .mgl-section { padding: 42px 0; }
  .mgl-card { padding: 18px; }
  /* Wide content must scroll inside its own box, never the page. */
  .mgl-table { display: block; overflow-x: auto; white-space: nowrap; }
  .mgl-footer { padding: 28px 0; }
}

/* Admin: the fixed 220px sidebar leaves no room for content on a phone,
   so it becomes a horizontal strip above the page instead. */
@media (max-width: 860px) {
  .mgl-admin { grid-template-columns: 1fr; }
  .mgl-admin-side {
    border-right: none; border-bottom: 1px solid var(--mgl-border);
    display: flex; flex-wrap: wrap; gap: 4px; padding: 12px;
  }
  .mgl-admin-side > div:first-child { width: 100%; padding: 0 0 10px !important; }
  .mgl-admin-side a { margin-bottom: 0; padding: 8px 10px; font-size: 0.85rem; }
  .mgl-admin-section { width: 100%; margin: 8px 0 2px; padding-top: 10px; }
  .mgl-admin-main { padding: 20px 16px; }
}