/* Year 9 Science: the Lewis diagram guide (1.5b).
 *
 * Builds on science-ix.css (same tokens, same `.ix` size container, same
 * `.ix-card`, `.ix-eqn`, `.ix-chip`, `.ix-btn`, `.ix-legend`). Tokens only.
 * Colours keep one meaning each: the atom's own electrons are dots in ink,
 * an electron gained from another atom is a cross in the proton orange, and
 * the working keeps protons orange and electrons teal as everywhere else.
 * The diagram is plain HTML (a grid of four sides round the symbol), so every
 * side can be a real button and nothing is drawn from state each frame. */

.ix-lewis [hidden] { display: none; }
.ix-lwstage { grid-template-columns: minmax(0, 1fr) clamp(250px, 40cqi, 340px); }

/* ------------------------------------------------------------- diagram */

.ix-lw-holder { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.ix-lw-pic {
    position: relative;
    display: inline-grid;
    grid-template-columns: auto auto auto;
    grid-template-areas:
        ". n ."
        "w c e"
        ". s .";
    align-items: center;
    justify-items: center;
    gap: 0.25em;
    padding: 0.2em 3.5em 0.2em 1.6em;
    font-size: 1rem;
    line-height: 1;
}
.ix-lw-sym {
    grid-area: c;
    padding: 0 0.1em;
    color: var(--ink);
    font-size: 3.2em;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.ix-lw-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-width: max(44px, 2.75em);
    min-height: max(44px, 2.75em);
    margin: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    background: none;
    color: inherit;
    font: inherit;
}
.ix-lw-zone.is-n { grid-area: n; flex-direction: row; }
.ix-lw-zone.is-s { grid-area: s; flex-direction: row; }
.ix-lw-zone.is-e { grid-area: e; flex-direction: column; }
.ix-lw-zone.is-w { grid-area: w; flex-direction: column; }
button.ix-lw-zone { border-color: var(--line); border-style: dashed; cursor: pointer; }
button.ix-lw-zone:hover { border-color: var(--teal-deep); background: var(--ix-cyan-soft); }
.ix-lw-dot {
    display: block;
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    background: var(--ink);
}
/* the cross for an electron gained: two bars, drawn in CSS */
.ix-lw-x { position: relative; display: block; width: 1em; height: 1em; }
.ix-lw-x::before, .ix-lw-x::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -0.1em;
    width: 1.2em;
    height: 0.2em;
    border-radius: 0.1em;
    background: var(--ix-p);
    transform: translateY(-50%) rotate(45deg);
}
.ix-lw-x::after { transform: translateY(-50%) rotate(-45deg); }

/* square brackets round an ion, and its charge outside the right-hand one */
.ix-lw-pic.is-bracketed::before, .ix-lw-pic.is-bracketed::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.7em;
    border: 0.19em solid var(--ink);
}
.ix-lw-pic.is-bracketed::before { left: 0.2em; border-right: 0; }
.ix-lw-pic.is-bracketed::after { right: 2em; border-left: 0; }
.ix-lw-q {
    position: absolute;
    top: -0.15em;
    right: 0;
    font-size: 1.5em;
    font-weight: 800;
    line-height: 1;
}
.ix-lw-q.is-pos { color: var(--ix-m); }
.ix-lw-q.is-neg { color: var(--ix-p); }

/* the key under the diagram */
.ix-lw-key { gap: 4px 16px; }
.ix-legend .ix-lw-ld { background: var(--ink); }
.ix-legend .ix-lw-x { width: 12px; height: 12px; }
.ix-legend .ix-lw-x::before, .ix-legend .ix-lw-x::after { left: -1px; width: 14px; height: 2.5px; }

/* ---------------------------------------------------------------- steps */

.ix-lw-arr { gap: 4px 12px; margin: 0 0 14px; font-size: clamp(2rem, 8cqi, 3.2rem); }
.ix-lw-num { padding: 0 0.15em; border-radius: 0.2em; color: var(--ix-e); }
.ix-lw-num.is-last { background: var(--gold); color: var(--ink); }
.ix-lw-ask { margin: 0 0 8px; font-weight: 700; }
.ix-lw-nums { display: flex; flex-wrap: wrap; gap: 8px; }
.ix-lw-n { padding: 0; font-size: 1.1rem; }
.ix-lw-n:disabled { cursor: default; opacity: 0.5; }
.ix-lw-n.is-ok:disabled { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--paper); opacity: 1; }
.ix-lw-n.is-no { border-color: var(--ix-bad); color: var(--ix-bad); }
.ix-lw-fb { margin: 10px 0 0; font-weight: 700; }
.ix-lw-fb:empty { display: none; }
.ix-lw-fb.is-ok { color: var(--teal-deep); }
.ix-lw-fb.is-no { color: var(--ix-bad); }
.ix-lw-rule:empty { display: none; }
.ix-lw-rule { margin-top: 4px; }
.ix-lw-count { margin: 0 0 6px; color: var(--muted); font-weight: 700; }
.ix-lw-msg { margin: 0 0 8px; color: var(--ix-bad); font-weight: 600; }
.ix-lw-msg:empty { display: none; }
.ix-lw-prog { margin: 0 0 8px; color: var(--muted); font-weight: 700; }
.ix-lw-working { margin-top: 6px; }
.ix-lw-eqn { gap: 2px 10px; margin: 0 0 8px; font-size: clamp(1.1rem, 3cqi, 1.7rem); }
.ix-lw-eqn .ix-grp { flex-wrap: wrap; min-width: 0; }
.ix-lw-res.is-pos { color: var(--ix-m); }
.ix-lw-res.is-neg { color: var(--ix-p); }
.ix-lw-same, .ix-lw-none { color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.ix-lw-none { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    .ix-lewis * { transition: none; }
}