/* ============================================================
   study.css: ekisde.dev /<lang>/study/, /<lang>/study/lewis/ and /<lang>/study/orbitals/
   Page add-on for the yorha skin (static/css/yorha.css): colours, fonts and
   both themes come from its tokens, so dark and light both work.
   Every class is prefixed st-. Selectors start with [data-yorha] so they win
   over the skin's own heading, card and paragraph rules. No inline styles are
   needed: the SVG colours come from the classes below.
   Essential text uses --text and --text-muted (never --text-faint).
   ============================================================ */

[data-yorha] .st-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Hub ─────────────────────────────────────────────────── */

[data-yorha] .st-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

[data-yorha] .st-card { display: block; text-decoration: none; color: var(--text); }
[data-yorha] .st-card:hover, [data-yorha] .st-card:focus-visible { color: var(--text); }
[data-yorha] .st-card > span { display: block; }
[data-yorha] .st-card-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
[data-yorha] .st-card-title {
  margin: 0.55rem 0 0.7rem;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.1rem, 4.5vw, 1.35rem);
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}
[data-yorha] .st-card-text { color: var(--text-muted); font-size: 0.96rem; line-height: 1.7; margin-bottom: 1.1rem; }
[data-yorha] .st-card-open {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Tool: form ──────────────────────────────────────────── */

[data-yorha] .st-wrap { width: min(100% - 2.5rem, 760px); margin: 0 auto; }
[data-yorha] .st-back { margin-bottom: 1.25rem; }

[data-yorha] .st-label {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

[data-yorha] .st-inputrow { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: flex-end; }
/* the skin already gives inputs the transparent, bottom-border look; this only sets the size */
[data-yorha] .st-input { flex: 1 1 11rem; min-width: 0; min-height: 48px; font-size: 1.1rem; letter-spacing: 0.06em; }
[data-yorha] .st-input::placeholder { color: var(--text-muted); opacity: 0.7; }
[data-yorha] .st-submit { min-height: 48px; }

[data-yorha] .st-hint { margin: 0.7rem 0 1.1rem; font-size: 0.86rem; color: var(--text-muted); overflow-wrap: anywhere; }

[data-yorha] .st-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
[data-yorha] .st-examples-label {
  margin-right: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
[data-yorha] .st-chip {
  min-width: 44px;
  min-height: 44px;
  padding: 0.35rem 0.85rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text-muted);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
[data-yorha] .st-chip:hover, [data-yorha] .st-chip:focus-visible {
  background: var(--yo-fill);
  color: var(--yo-ink);
  border-color: var(--yo-fill);
}

[data-yorha] .st-toggle {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  margin-top: 0.25rem;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
[data-yorha] .st-toggle input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); cursor: pointer; }

[data-yorha] .st-error {
  margin: 1.25rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--bad);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
[data-yorha] .st-error[hidden] { display: none; }

/* ── Tool: result ────────────────────────────────────────── */

[data-yorha] .st-result { margin-top: 1.5rem; }
[data-yorha] .st-result:empty { display: none; }

/* formulas keep their capitals (Cl is not CL), so no uppercase here */
[data-yorha] .st-result-title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(2rem, 9vw, 2.8rem);
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: none;
}
[data-yorha] .st-formula sub, [data-yorha] .st-formula sup { font-size: 0.55em; line-height: 0; }
[data-yorha] .st-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; }
[data-yorha] .st-badge {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border: 1px solid var(--text-muted);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[data-yorha] .st-step { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px dashed var(--border); }
[data-yorha] .st-step-title {
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
}
[data-yorha] .st-step-title::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.7rem;
  background: var(--text-muted);
  vertical-align: 0.05em;
}

[data-yorha] .st-electrons { margin: 0 0 1rem; color: var(--text); overflow-wrap: anywhere; }
[data-yorha] .st-electrons strong, [data-yorha] .st-row strong {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

[data-yorha] .st-forms { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
[data-yorha] .st-fig {
  margin: 0;
  max-width: 100%;
  padding: 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
[data-yorha] .st-svg { display: block; max-width: 100%; height: auto; }
/* drawn lines and dots: --text and --warn are at least 4.5:1 on --bg-elevated in both themes */
.st-bond { stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.st-dot { fill: var(--warn); }
.st-atom { fill: var(--text); font-family: var(--font-mono); font-size: 22px; font-weight: 400; text-transform: none; }
.st-bracket { fill: none; stroke: var(--text-muted); stroke-width: 2; }
.st-charge { fill: var(--text); font-family: var(--font-mono); font-size: 18px; font-weight: 400; text-transform: none; }
[data-yorha] .st-arrow { display: inline-block; font-family: var(--font-mono); font-size: 1.7rem; line-height: 1; color: var(--text-muted); transform: rotate(90deg); }

[data-yorha] .st-note { margin: 0.9rem 0 0; max-width: 62ch; font-size: 0.92rem; color: var(--text-muted); overflow-wrap: anywhere; }

[data-yorha] .st-text { margin-top: 1.25rem; font-size: 0.92rem; color: var(--text-muted); }
[data-yorha] .st-text-title, [data-yorha] .st-den-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
[data-yorha] .st-text-form, [data-yorha] .st-text-charge { margin: 0.5rem 0 0.25rem; font-size: 0.92rem; }
[data-yorha] .st-list { list-style: square; margin: 0 0 0.5rem; padding-left: 1.25rem; }
[data-yorha] .st-list li { overflow-wrap: anywhere; }

[data-yorha] .st-rows { list-style: none; margin: 0; padding: 0; }
[data-yorha] .st-row { padding: 0.55rem 0; border-bottom: 1px dashed var(--border-soft); color: var(--text); overflow-wrap: anywhere; }
[data-yorha] .st-den { margin-top: 1.25rem; }

@media (min-width: 640px) {
  [data-yorha] .st-forms { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 0.75rem 1rem; }
  [data-yorha] .st-arrow { transform: none; }
}

/* ── Orbitals page: MO diagram ────────────────────────────── */

/* levels, dashed lines and arrows: --text, --text-muted and --warn are at least 4.5:1 on --bg-elevated in both themes */
.st-lvl { stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.st-lvl-ao { stroke: var(--text-muted); }
.st-dash { fill: none; stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 4; }
.st-axis { fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.st-e { fill: none; stroke: var(--warn); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-mo-label { fill: var(--text); font-family: var(--font-mono); font-size: 15px; font-weight: 400; text-transform: none; }
.st-ao-label { fill: var(--text-muted); font-family: var(--font-mono); font-size: 14px; font-weight: 400; text-transform: none; }
.st-sup { font-size: 70%; }

[data-yorha] .st-step > .st-fig { width: fit-content; margin-top: 0.9rem; }

/* orbital names and electron counts as superscripts: σ1s*, σ2p² */
[data-yorha] .st-mo, [data-yorha] .st-cfg, [data-yorha] .st-sym { text-transform: none; }
[data-yorha] .st-mo sup, [data-yorha] .st-cfg sup { font-size: 0.7em; line-height: 0; }
[data-yorha] .st-mo + sup { margin-left: 0.12em; }
[data-yorha] .st-cfg { font-family: var(--font-mono); letter-spacing: 0.04em; }