/* ============================================================================
   ATOMIC LAB — WHICH ELEMENT AM I? (riddle solver)
   Same visual language as the element decoder (game.css): a glass panel for
   the answer, mono labels, family colour on element cards. Logical properties
   throughout so the Arabic page mirrors without overrides.
   ========================================================================== */

.pg-solver { --sect-y: clamp(2.5rem, 4vw, 4rem); }

.sv-head { padding-top: calc(var(--nav-h) + clamp(1.5rem, 3.5vw, 2.75rem)); padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.sv-head .eyebrow { margin-top: 0.75rem; margin-bottom: 0.55rem; }
.sv-head .lede { margin-top: 0.7rem; max-width: 62ch; }

/* --- Solver: riddle box beside the answer, stacked on narrow screens ------ */
.sv {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1rem, 2.4vw, 1.75rem);
  align-items: start;
}
@media (max-width: 900px) { .sv { grid-template-columns: minmax(0, 1fr); } }

.sv__form { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.sv__label { font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.sv__q { min-height: 6.5rem; font-size: var(--t-md); }
.sv__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.sv__fields {
  margin-top: 0.4rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-3);
  background: rgba(255,255,255,0.02);
}
.sv__summary {
  cursor: pointer;
  padding: 0.8rem 1rem;
  min-height: 24px;
  font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--beam);
}
.sv__summary:focus-visible { outline: 2px solid var(--beam); outline-offset: 2px; border-radius: var(--r-2); }
.sv__hint { padding-inline: 1rem; font-size: var(--t-2xs); color: var(--ink-2); line-height: 1.55; }
.sv__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem 0.9rem;
  padding: 0.9rem 1rem 1rem;
}
.sv__f { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.sv__f label, .sv__f legend { font-size: var(--t-2xs); color: var(--ink-2); line-height: 1.4; }
.sv__f .field { padding: 0.6rem 0.8rem; }
.sv__f--wide { grid-column: 1 / -1; }
.sv__f--pair { flex-direction: row; gap: 0.6rem; }
.sv__f--pair > div { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 0; }
.sv__rel legend { margin-bottom: 0.3rem; }
.sv__relrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0.6rem; align-items: end; }
.sv__reln, .sv__relel { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.sv__reln[hidden] { display: none; }
.sv__err { font-size: var(--t-2xs); color: var(--warn); }

/* --- Answer panel --------------------------------------------------------- */
.sv__out {
  position: sticky; top: calc(var(--nav-h) + 1.5rem);
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  border: 1px solid var(--edge);
  border-radius: var(--r-4);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  min-width: 0;
}
@media (max-width: 900px) { .sv__out { position: static; } }
.sv__h { font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.sv__sub { margin-top: 1.1rem; font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.sv__empty { margin-top: 0.6rem; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }

.sv-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.sv-chip {
  display: inline-flex; align-items: stretch;
  border: 1px solid rgba(89,230,255,0.35);
  border-radius: var(--r-pill);
  background: rgba(89,230,255,0.08);
  overflow: hidden;
}
.sv-chip__body {
  padding: 0.35rem 0.4rem 0.35rem 0.75rem;
  padding-inline: 0.75rem 0.4rem;
  min-height: 28px;
  font-size: var(--t-2xs); line-height: 1.3; color: var(--ink);
  text-align: start;
}
/* The server-rendered chip (no JavaScript yet): the label sits in the item
   itself, with the same box as the interactive chip's body. */
.sv-chip--static { align-items: center; padding: 0.35rem 0.75rem; min-height: 28px; font-size: var(--t-2xs); line-height: 1.3; color: var(--ink); }
.sv-chip__x {
  min-width: 28px; min-height: 28px;
  padding-inline: 0.45rem 0.6rem;
  font-size: 1rem; line-height: 1; color: var(--ink-2);
  border-inline-start: 1px solid rgba(89,230,255,0.25);
}
.sv-chip__body:hover, .sv-chip__x:hover { background: rgba(89,230,255,0.14); color: var(--ink); }
.sv-chip__x:hover { color: var(--danger); }
.sv-chip__body:focus-visible, .sv-chip__x:focus-visible { outline: 2px solid var(--beam); outline-offset: -2px; }

.sv-answer {
  margin-top: 1rem;
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; line-height: 1.35;
  color: var(--ok);
}
.sv-answer--many { color: var(--beam); }
.sv-answer--none { color: var(--warn); }

.sv-cands {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.45rem;
  margin-top: 0.7rem;
}
.sv-cand {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.45rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--fam, var(--beam)) 40%, transparent);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--fam, var(--beam)) 10%, transparent);
  color: var(--ink);
  transition: background var(--d-2), border-color var(--d-2);
}
.sv-cand:hover { background: color-mix(in srgb, var(--fam, var(--beam)) 18%, transparent); }
.sv-cand:focus-visible { outline: 2px solid var(--beam); outline-offset: 2px; }
.sv-cand__sym { font-family: var(--font-display); font-weight: 700; color: color-mix(in srgb, var(--fam, var(--beam)) 80%, white); min-width: 2ch; }
.sv-cand__name { font-size: var(--t-2xs); min-width: 0; overflow-wrap: anywhere; }
.sv-cand__z { font-size: var(--t-3xs); color: var(--ink-3); }
.sv-cands--one { grid-template-columns: 1fr; }
.sv-cands--one .sv-cand { padding: 0.8rem 1rem; }
.sv-cands--one .sv-cand__sym { font-size: 1.6rem; }
.sv-cands--one .sv-cand__name { font-size: var(--t-md); font-family: var(--font-display); font-weight: 600; }
.sv__more { margin-top: 0.5rem; font-size: var(--t-3xs); color: var(--ink-3); }

.sv-steps { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.55rem; counter-reset: step; }
.sv-step { font-size: var(--t-2xs); line-height: 1.6; color: var(--ink-2); padding-inline-start: 1.1rem; position: relative; }
.sv-step::before {
  content: ''; position: absolute; inset-inline-start: 0.2rem; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--beam); opacity: 0.7;
}
.sv-step--detail { color: var(--ink-3); padding-inline-start: 1.9rem; }
.sv-step--detail::before { inset-inline-start: 1rem; background: var(--ink-3); }
.sv-step--none, .sv-step--ignored { color: var(--warn); }
.sv-step--none::before, .sv-step--ignored::before { background: var(--warn); }

/* --- Worked examples (the crawlable half of the page) --------------------- */
.sv-ex__lede { margin-top: 0.5rem; max-width: 62ch; }
.sv-ex { margin-top: 1.25rem; }
.sv-ex .qa__q > span:last-child { min-width: 0; }
.sv-ex .qa__a p + p { margin-top: 0.55rem; }
.sv-ex__answer { color: var(--ink); }
.sv-ex__answer a { color: color-mix(in srgb, var(--fam, var(--beam)) 75%, white); text-decoration: underline; text-underline-offset: 3px; }
.sv-ex__label { font-size: var(--t-3xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-inline-end: 0.4rem; }
.sv-ex__try {
  display: inline-flex; align-items: center; min-height: 24px;
  font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--beam); text-decoration: underline; text-underline-offset: 3px;
}

.sv-note { max-width: 70ch; }
.sv-note p { margin-top: 0.7rem; font-size: var(--t-sm); line-height: 1.7; color: var(--ink-2); }
.sv-note a { color: var(--beam); text-decoration: underline; text-underline-offset: 3px; }

.sv-endcap__lede { margin-inline: auto; text-align: center; }
.sv-endcap__row { justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }