/* Language — page layout only: the word cards, the concept map diagram, the state-question strip, the "never" words. */
@layer page {
  .lx-words { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r4); overflow: hidden; box-shadow: var(--shadow-1); }
  .lx-word { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--s2); align-content: start; padding: var(--s4); background: var(--sheet); }
  .lx-word__m { min-height: 3.6em; }
  .lx-word > :first-child { align-self: end; justify-self: start; }
  .lx-plain { font-weight: 400; }
  .lx-do { display: block; margin-top: 2px; font-weight: 400; }
  .lx-states { --min: 320px; }

  /* The concept map (page diagram). */
  .lx-map { position: relative; overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r4); background: var(--sheet); }
  .lx-map svg { display: block; min-width: 880px; width: 100%; height: auto; overflow: hidden; }
  .lx-edge { fill: none; stroke: var(--line-2); stroke-width: 1.25; }
  .lx-elabel { font: 500 10.5px var(--font-ui); fill: var(--text-3); opacity: 0; }
  .lx-node rect { fill: var(--sheet); stroke: var(--gc); stroke-width: 1.25; }
  .lx-node text { font: 600 12.5px var(--font-ui); fill: var(--text); pointer-events: none; }
  .lx-node { cursor: pointer; outline: none; }
  .lx-node:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .lx-node:focus-visible rect { stroke-width: 3; }
  .lx-colhead { font: 700 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; fill: var(--text-3); }
  .lx-map[data-lit] .lx-edge { opacity: .12; }
  .lx-map[data-lit] .lx-node { opacity: .35; }
  .lx-map[data-lit] .lx-edge[data-on] { opacity: 1; stroke: var(--accent); stroke-width: 2; }
  .lx-map[data-lit] .lx-elabel[data-on] { opacity: 1; fill: var(--accent-text); }
  .lx-map[data-lit] .lx-node[data-on] { opacity: 1; }
  .lx-node[aria-pressed="true"] rect { fill: var(--gc); }
  .lx-node[aria-pressed="true"] text { fill: #fff; }
  .lx-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2) var(--s8); align-items: start; }
  .lx-side__t { grid-column: 1 / -1; }

  .lx-which { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lx-which > div { padding: var(--s4); }
  .lx-which > div + div { border-left: 1px solid var(--line); }
  .lx-which q { quotes: none; }
  .lx-never { display: flex; flex-wrap: wrap; gap: 4px; }
  .lx-strike { font-size: var(--t-cap); padding: 1px 6px; border-radius: var(--r1); background: var(--sheet-sunk); border: 1px solid var(--line); color: var(--text-3); text-decoration-color: var(--bad-dot); }
  .lx-tpl { display: block; font-size: 12.5px; color: var(--text-2); background: var(--sheet-sunk); padding: var(--s2) var(--s3); border-radius: var(--r2); white-space: normal; }
  .lx-order { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s6); margin: 0 0 var(--s4); padding: 0; list-style: none; color: var(--text-2); }
  .lx-order b { color: var(--text); }
  .lx-cov { max-width: 720px; }
  .lx-find { width: min(320px, 100%); min-width: min(320px, 100%); }
  .lx-example { max-width: 520px; }
  .lx-before td:first-child { color: var(--text-3); }

  @media (max-width: 1100px) {
    .lx-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lx-which { grid-template-columns: minmax(0, 1fr); }
    .lx-which > div + div { border-left: 0; border-top: 1px solid var(--line); }
  }
  @media (max-width: 700px) { .lx-map-wrap { display: none; } .lx-words { grid-template-columns: minmax(0, 1fr); } }
  /* Printed (the shell hides its chrome): the card prints two words across. */
  @media print { .lx-words { grid-template-columns: repeat(2, 1fr); } }
}