/* ============================================================================
   ToolAdda — 3D Molecular Structure Viewer
   Page-scoped design system.

   Visual idea: an instrument, not a document. The canvas is a dark optical
   stage that stays dark in both themes — the same reason a microscope eyepiece
   is black. Atom colours follow the CPK convention chemists already read, so
   the chrome must not compete with them: a cool graphite shell with one jade
   accent, a hue CPK never uses.

   Deliberately not the violet of the periodic table, nor the sky blue of the
   electron configuration builder.

   Contents
     1. Tokens (light)          7. Molecule selector
     2. Tokens (dark)           8. Info panels
     3. Base + layout           9. Educational content + FAQ
     4. Hero                   10. Responsive
     5. Canvas stage           11. Reduced motion / print
     6. Viewer controls
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS — LIGHT
   --------------------------------------------------------------------------- */
.msv-page {
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;

  --bg: #eef3f4;
  --surface: #ffffff;
  --surface-raised: #f7fafa;
  --surface-hover: #e9f1f1;
  --surface-sunken: #e4edee;
  --border: rgba(15, 40, 45, .13);
  --border-strong: rgba(15, 40, 45, .26);

  --text-primary: #0f2226;
  --text-secondary: #3c5257;
  --muted: #63797e;

  --accent: #0d9488;
  --accent-deep: #0f766e;
  --accent-soft: rgba(13, 148, 136, .11);
  --accent-contrast: #ffffff;

  --danger: #b3261e;
  --focus: #0d9488;

  /* the stage is dark in both themes */
  --stage-bg: #070b14;
  --stage-bg-2: #0d1524;
  --stage-grid: rgba(120, 200, 210, .07);
  --stage-border: rgba(140, 220, 225, .18);
  --stage-text: #e7f2f3;
  --stage-muted: #8ba3a8;

  /* atom colours — CPK convention, tuned for a dark stage.
     Kept here as well as in molecules.js so the legend swatches and the
     canvas spheres are driven by the same values. */
  --hydrogen: #f4f7fb;
  --carbon: #4b5565;
  --nitrogen: #4f7bf0;
  --oxygen: #e5484d;
  --fluorine: #5bd6a4;
  --phosphorus: #f08b3c;
  --sulfur: #e3c23c;
  --chlorine: #67d16a;
  --atom-fallback: #c0a8d8;

  --shadow-sm: 0 1px 2px rgba(15, 40, 45, .06);
  --shadow-md: 0 2px 8px rgba(15, 40, 45, .07), 0 14px 34px rgba(15, 40, 45, .08);
  --shadow-lg: 0 26px 64px rgba(15, 40, 45, .18);

  color: var(--text-primary);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 12% 0%, rgba(13, 148, 136, .10), transparent 460px),
    radial-gradient(circle at 92% 8%, rgba(56, 132, 189, .09), transparent 420px);
  padding-bottom: 3rem;
}

/* ---------------------------------------------------------------------------
   2. TOKENS — DARK
   --------------------------------------------------------------------------- */
[data-theme="dark"] .msv-page {
  --bg: #070d10;
  --surface: #0f1a1e;
  --surface-raised: #142329;
  --surface-hover: #1c3037;
  --surface-sunken: #0a1418;
  --border: rgba(190, 230, 235, .14);
  --border-strong: rgba(190, 230, 235, .28);

  --text-primary: #e8f4f5;
  --text-secondary: #b3cace;
  --muted: #85a1a7;

  --accent: #2dd4bf;
  --accent-deep: #5eead4;
  --accent-soft: rgba(45, 212, 191, .15);
  --accent-contrast: #06231f;

  --danger: #fca5a5;
  --focus: #2dd4bf;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, .5), 0 18px 44px rgba(0, 0, 0, .45);
  --shadow-lg: 0 30px 72px rgba(0, 0, 0, .68);

  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, .12), transparent 460px),
    radial-gradient(circle at 92% 8%, rgba(56, 132, 189, .10), transparent 420px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .msv-page {
    --bg: #070d10;
    --surface: #0f1a1e;
    --surface-raised: #142329;
    --surface-hover: #1c3037;
    --surface-sunken: #0a1418;
    --border: rgba(190, 230, 235, .14);
    --border-strong: rgba(190, 230, 235, .28);
    --text-primary: #e8f4f5;
    --text-secondary: #b3cace;
    --muted: #85a1a7;
    --accent: #2dd4bf;
    --accent-deep: #5eead4;
    --accent-soft: rgba(45, 212, 191, .15);
    --accent-contrast: #06231f;
    --danger: #fca5a5;
    --focus: #2dd4bf;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, .5), 0 18px 44px rgba(0, 0, 0, .45);
    --shadow-lg: 0 30px 72px rgba(0, 0, 0, .68);
    background-color: var(--bg);
    background-image:
      radial-gradient(circle at 12% 0%, rgba(45, 212, 191, .12), transparent 460px),
      radial-gradient(circle at 92% 8%, rgba(56, 132, 189, .10), transparent 420px);
  }
}

/* ---------------------------------------------------------------------------
   3. BASE + LAYOUT
   --------------------------------------------------------------------------- */
.msv-page *, .msv-page *::before, .msv-page *::after { box-sizing: border-box; }
.msv-page [hidden] { display: none !important; }
.msv-page :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }

.msv-wrap { max-width: 1360px; margin: 0 auto; padding: 0 1rem; }
.msv-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.msv-page p { color: var(--text-secondary); line-height: 1.7; }
.msv-page h2, .msv-page h3, .msv-page h4 { color: var(--text-primary); line-height: 1.25; }

.msv-btn {
  font: inherit; font-weight: 650; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem .85rem; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary);
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.msv-btn:hover { background: var(--surface-hover); border-color: var(--accent); }
.msv-btn:active { transform: translateY(1px); }
.msv-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.msv-btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.msv-btn--sm { padding: .36rem .6rem; font-size: .84rem; }
.msv-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }

/* ---------------------------------------------------------------------------
   4. HERO
   --------------------------------------------------------------------------- */
.msv-crumb {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  padding: .7rem 0 .1rem; font-size: .82rem; color: var(--muted);
}
.msv-crumb a { color: var(--accent); font-weight: 600; text-decoration: none; }
.msv-crumb a:hover { text-decoration: underline; }
.msv-crumb span[aria-hidden] { opacity: .5; }

.msv-hero { padding: .5rem 0 1rem; }
.msv-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: .28rem .65rem; border-radius: 999px;
}
.msv-h1 {
  margin: .5rem 0 .35rem; font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.08; letter-spacing: -.025em;
}
.msv-lede { margin: 0; font-size: clamp(.94rem, 1.8vw, 1.04rem); max-width: 54rem; }
.msv-badges { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .85rem 0 0; padding: 0; }
.msv-badges li {
  font-size: .78rem; font-weight: 650; color: var(--text-secondary);
  background: var(--surface); border: 1px solid var(--border);
  padding: .3rem .65rem; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.msv-badges li::before { content: "◆"; color: var(--accent); margin-right: .35rem; font-size: .7em; }

/* ---------------------------------------------------------------------------
   5. CANVAS STAGE
   --------------------------------------------------------------------------- */
.msv-app {
  display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1rem;
  align-items: start;
}

.msv-stage {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--stage-border);
  background: radial-gradient(ellipse 120% 100% at 50% 0%, var(--stage-bg-2), var(--stage-bg));
  box-shadow: var(--shadow-md);
}
/* the canvas and its overlays; the toolbar is a sibling below this */
.msv-viewport { position: relative; }

.msv-stage__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--stage-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--stage-grid) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 40%, transparent 100%);
}

.msv-canvas {
  display: block; width: 100%; height: clamp(360px, 56vh, 620px);
  touch-action: none;                 /* gestures belong to the viewer */
  cursor: grab;
}
.msv-canvas:active { cursor: grabbing; }
.msv-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* corner overlays */
.msv-stage__tag {
  position: absolute; top: .8rem; left: .9rem; pointer-events: none;
  display: flex; align-items: baseline; gap: .5rem;
}
.msv-stage__formula { font-size: 1.5rem; font-weight: 800; color: var(--stage-text); letter-spacing: -.02em; }
.msv-stage__formula sub { font-size: .62em; font-weight: 700; }
.msv-stage__name { font-size: .82rem; font-weight: 600; color: var(--stage-muted); }

.msv-stage__hint {
  position: absolute; bottom: .7rem; left: 50%; transform: translateX(-50%);
  font-size: .74rem; color: var(--stage-muted); pointer-events: none;
  background: rgba(7, 11, 20, .55); padding: .25rem .7rem; border-radius: 999px;
  border: 1px solid rgba(140, 220, 225, .12); white-space: nowrap;
}

.msv-stage__error {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; text-align: center; color: var(--stage-text);
  background: rgba(7, 11, 20, .92); font-weight: 600;
}

/* ---------------------------------------------------------------------------
   6. VIEWER CONTROLS
   --------------------------------------------------------------------------- */
.msv-toolbar {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  padding: .6rem .8rem; border-top: 1px solid var(--stage-border);
  background: rgba(7, 11, 20, .7);
}
.msv-toolbar .msv-btn {
  background: rgba(255, 255, 255, .06); border-color: rgba(140, 220, 225, .2); color: var(--stage-text);
}
.msv-toolbar .msv-btn:hover { background: rgba(255, 255, 255, .13); border-color: var(--accent); }
.msv-toolbar .msv-btn[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-contrast);
}
.msv-toolbar__sep { width: 1px; height: 1.4rem; background: var(--stage-border); margin: 0 .2rem; }
.msv-toolbar__spacer { flex: 1 1 auto; }
.msv-speed {
  font: inherit; font-size: .82rem; font-weight: 650; cursor: pointer;
  padding: .34rem .5rem; border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .06); color: var(--stage-text);
  border: 1px solid rgba(140, 220, 225, .2);
}
.msv-speed option { color: #111; }

/* ---------------------------------------------------------------------------
   7. MOLECULE SELECTOR
   --------------------------------------------------------------------------- */
.msv-side { display: grid; gap: .8rem; }

.msv-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.msv-card__head {
  padding: .65rem .85rem; border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.msv-card__body { padding: .8rem .85rem; }

.msv-search { position: relative; margin: .8rem .85rem 0; }
.msv-search input {
  width: 100%; font: inherit; color: var(--text-primary);
  padding: .5rem .6rem .5rem 2rem;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
}
.msv-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.msv-search__icon { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .9rem; }

.msv-quick { display: flex; flex-wrap: wrap; gap: .32rem; padding: .7rem .85rem 0; }
.msv-quick button {
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  padding: .3rem .55rem; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-secondary);
}
.msv-quick button:hover { border-color: var(--accent); color: var(--text-primary); }
.msv-quick button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.msv-quick sub { font-size: .7em; }

.msv-list { max-height: 21rem; overflow-y: auto; padding: .6rem .85rem .85rem; display: grid; gap: .32rem; }
.msv-item {
  display: grid; grid-template-columns: 3.1rem 1fr auto; align-items: center; gap: .55rem;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: .45rem .55rem; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-primary);
  transition: border-color .14s ease, background-color .14s ease;
}
.msv-item:hover { background: var(--surface-hover); border-color: var(--accent); }
.msv-item__f { font-weight: 800; font-size: .92rem; color: var(--accent); }
.msv-item__f sub { font-size: .7em; }
.msv-item__n { font-size: .88rem; font-weight: 650; }
.msv-item__g { font-size: .72rem; color: var(--muted); }
.msv-item__check { font-size: .9rem; color: var(--accent); opacity: 0; }
.msv-item[aria-current="true"] {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.msv-item[aria-current="true"] .msv-item__check { opacity: 1; }
.msv-empty { padding: .9rem; text-align: center; color: var(--muted); font-size: .88rem; }

/* ---------------------------------------------------------------------------
   8. INFO PANELS
   --------------------------------------------------------------------------- */
.msv-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr)); gap: .45rem; margin: 0; }
.msv-prop {
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: .45rem .6rem;
}
.msv-prop dt { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.msv-prop dd { margin: .15rem 0 0; font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.msv-prop dd small { font-weight: 500; color: var(--muted); font-size: .76rem; }

.msv-about { margin: .7rem 0 0; font-size: .9rem; }
.msv-note {
  margin: .6rem 0 0; padding: .5rem .65rem; font-size: .8rem;
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 var(--r-xs) var(--r-xs) 0; color: var(--text-primary);
}

.msv-atominfo { display: flex; align-items: center; gap: .75rem; }
.msv-atominfo__ball {
  width: 3rem; height: 3rem; border-radius: 50%; flex: none;
  border: 2px solid rgba(255, 255, 255, .35);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; color: #08121a;
  box-shadow: inset -4px -5px 10px rgba(0, 0, 0, .38), inset 3px 3px 8px rgba(255, 255, 255, .5);
}
.msv-atominfo__meta { min-width: 0; }
.msv-atominfo__name { font-weight: 750; font-size: 1rem; }
.msv-atominfo__sub { font-size: .8rem; color: var(--muted); }
.msv-hintbox { color: var(--muted); font-size: .86rem; }

.msv-legend { display: flex; flex-wrap: wrap; gap: .3rem .7rem; }
.msv-legend span { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--text-secondary); font-weight: 600; }
.msv-legend i {
  width: .85rem; height: .85rem; border-radius: 50%; background: var(--sw);
  border: 1px solid rgba(0, 0, 0, .25); flex: none;
}

.msv-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.msv-keys li { display: flex; justify-content: space-between; gap: .8rem; font-size: .84rem; color: var(--text-secondary); }
.msv-keys kbd {
  font-family: var(--mono); font-size: .74rem; font-weight: 700;
  background: var(--surface-sunken); border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: 5px; padding: .1rem .35rem; color: var(--text-primary);
}

/* ---------------------------------------------------------------------------
   9. EDUCATIONAL CONTENT + FAQ
   --------------------------------------------------------------------------- */
.msv-content { max-width: 62rem; margin: 2rem auto 0; }
.msv-content section { margin-top: 2.2rem; }
.msv-content h2 { font-size: clamp(1.25rem, 2.8vw, 1.6rem); letter-spacing: -.015em; margin: 0 0 .3rem; }
.msv-content h3 { font-size: 1.03rem; margin: 1.2rem 0 .25rem; }
.msv-content p { margin: .5rem 0; }
.msv-content ul, .msv-content ol { color: var(--text-secondary); line-height: 1.7; padding-left: 1.2rem; }
.msv-content li { margin: .22rem 0; }
.msv-content a { color: var(--accent); font-weight: 600; }

.msv-answer {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: .65rem .85rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: .45rem 0 .75rem;
}
.msv-answer p { margin: 0; color: var(--text-primary); font-weight: 500; }

.msv-geo { width: 100%; border-collapse: collapse; margin-top: .8rem; font-size: .9rem; }
.msv-geo th, .msv-geo td { padding: .5rem .65rem; border-bottom: 1px solid var(--border); text-align: left; }
.msv-geo thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface-raised); }
.msv-geo td { color: var(--text-secondary); }
.msv-geo td:first-child { color: var(--text-primary); font-weight: 700; }
.msv-geo sub { font-size: .75em; }
.msv-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }

.msv-disclaimer {
  margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--r-md);
  border: 1px dashed var(--border-strong); background: var(--surface-raised);
  font-size: .88rem; color: var(--text-secondary);
}

.msv-faq details {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); margin-bottom: .45rem; box-shadow: var(--shadow-sm);
}
.msv-faq summary {
  cursor: pointer; padding: .7rem .85rem; font-weight: 650; color: var(--text-primary);
  list-style: none; display: flex; gap: .55rem; align-items: flex-start;
}
.msv-faq summary::-webkit-details-marker { display: none; }
.msv-faq summary::before { content: "+"; color: var(--accent); font-weight: 800; flex: none; width: .9rem; }
.msv-faq details[open] summary::before { content: "−"; }
.msv-faq details[open] summary { border-bottom: 1px solid var(--border); }
.msv-faq details p { margin: 0; padding: .65rem .85rem .8rem 2.3rem; font-size: .92rem; }

.msv-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .65rem; margin-top: .8rem; }
.msv-related a {
  display: block; padding: .8rem .9rem; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface); text-decoration: none;
  box-shadow: var(--shadow-sm); transition: transform .14s ease, border-color .14s ease;
}
.msv-related a:hover { transform: translateY(-2px); border-color: var(--accent); }
.msv-related b { display: block; color: var(--text-primary); font-size: .96rem; }
.msv-related span { display: block; color: var(--muted); font-size: .82rem; margin-top: .12rem; }

/* ---------------------------------------------------------------------------
   10. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .msv-app { grid-template-columns: minmax(0, 1fr); }
  .msv-side { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
  .msv-list { max-height: 15rem; }
}
@media (max-width: 640px) {
  .msv-wrap { padding: 0 .7rem; }
  .msv-canvas { height: clamp(300px, 48vh, 420px); }
  .msv-stage__formula { font-size: 1.2rem; }
  .msv-stage__hint { font-size: .68rem; padding: .2rem .55rem; }
  .msv-toolbar { padding: .5rem .55rem; gap: .3rem; }
  .msv-toolbar .msv-btn { padding: .34rem .5rem; font-size: .8rem; }
  .msv-side { grid-template-columns: minmax(0, 1fr); }
  .msv-props { grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr)); }
}
@media (max-width: 380px) {
  .msv-toolbar__label { display: none; }   /* icon-only buttons on tiny screens */
}

/* ---------------------------------------------------------------------------
   11. REDUCED MOTION / PRINT
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .msv-page *, .msv-page *::before, .msv-page *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .msv-related a:hover { transform: none; }
}

@media print {
  .msv-toolbar, .msv-search, .msv-quick, .msv-stage__hint { display: none !important; }
  .msv-page { background: #fff; }
}