/* Words you'll hear (/commons/words, build/pages/commons_words.py). Colors are org.css tokens, so dark mode follows. */

.gl-wrap .wrap{max-width:60rem}
.gl-tools{display:grid;gap:1.4rem;margin:0 0 2.4rem;padding:1.4rem 1.5rem;border:1px solid var(--line);border-radius:18px;background:var(--paper-3)}
.gl-tools ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.gl-label{display:block;margin:0 0 .55rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* A to Z */
.gl-az ul{gap:.3rem}
.gl-az a,.gl-az span{display:inline-flex;align-items:center;justify-content:center;min-width:2.3rem;height:2.3rem;border-radius:8px;font-family:var(--f-mono);font-size:.9rem}
.gl-az a{color:var(--text);text-decoration:none;border:1px solid var(--line-2);transition:background .2s,border-color .2s}
.gl-az a:hover{background:var(--paper);border-color:var(--text)}
.gl-az span{color:var(--muted);opacity:.55}
.gl-az .gl-off a{opacity:.45;border-style:dashed}

/* Subject chips: links without JavaScript, filter buttons with it (words.js) */
.gl-filter ul{gap:.5rem}
.gl-chip{display:inline-flex;align-items:center;gap:.5rem;min-height:2.6rem;padding:.4rem 1rem;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--text);font:500 .92rem/1.2 var(--f-sans);text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.gl-chip:hover{border-color:var(--text)}
.gl-chip[aria-pressed=true]{background:var(--ink-bg);border-color:var(--ink-bg);color:var(--ink-fg)}
.gl-n{font-family:var(--f-mono);font-size:.72rem;color:var(--muted)}
.gl-chip[aria-pressed=true] .gl-n{color:inherit;opacity:.75}

.gl-intro{max-width:46rem;margin:0 0 1rem;color:var(--body)}
.gl-intro .print-only{display:none}

/* The list */
.gl-letter{margin:0;padding:1.6rem 0 0}
.gl-L{display:flex;align-items:center;gap:1rem;margin:0 0 .4rem;font-family:var(--f-display);font-weight:300;font-size:2.6rem;line-height:1;color:var(--sun-ink)}
.gl-L::after{content:"";flex:1;height:1px;background:var(--line-2)}
.gl-term{padding:1.3rem 0;border-bottom:1px solid var(--line);max-width:46rem}
.gl-term:last-child{border-bottom:0}
.gl-term:target{background:linear-gradient(90deg,var(--callout),transparent);margin-left:-1rem;padding-left:1rem;border-radius:8px 0 0 8px}
.gl-word{margin:0 0 .35rem;font-family:var(--f-display);font-weight:400;font-size:1.5rem;line-height:1.25;letter-spacing:-.01em;color:var(--text)}
.gl-country{display:inline-block;vertical-align:.25em;margin-left:.35rem;padding:.15rem .55rem;border:1px solid var(--line-2);border-radius:999px;font-family:var(--f-mono);font-size:.66rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gl-also{margin:0 0 .4rem;font-size:.9rem;font-style:italic;color:var(--muted)}
.gl-def{margin:0 0 .7rem;color:var(--body);font-size:1.02rem}
.gl-src,.gl-rel{margin:0 0 .35rem;font-size:.88rem;color:var(--muted);overflow-wrap:anywhere}
.gl-src a,.gl-rel a{color:var(--text)}
.gl-src a{text-decoration-color:var(--sun)}

/* By subject (also the no-JavaScript target of the chips) */
.gl-bycause{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--line-2)}
.gl-bycause h2{margin:0 0 .4rem}
.gl-by-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;margin-top:1.4rem}
.gl-by h3{margin:0 0 .6rem}
.gl-by-list{list-style:none;margin:0;padding:0;font-size:.93rem;line-height:1.45}
.gl-by-list li{padding:.3rem 0;border-bottom:1px solid var(--line)}
.gl-by-list a{color:var(--text)}
.gl-by:target{outline:2px solid var(--sun);outline-offset:8px;border-radius:6px}
@media (max-width:820px){.gl-by-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){
  .gl-tools{padding:1.1rem 1rem}
  .gl-az a,.gl-az span{min-width:2.1rem;height:2.1rem}
  .gl-word{font-size:1.32rem}
  .gl-term:target{margin-left:-.5rem;padding-left:.5rem}
}

/* Print: every word, two compact columns, sources at the end */
@media print{
  .gl-tools,.gl-bycause{display:none!important}
  .gl-term[hidden],.gl-letter[hidden]{display:block!important}
  .gl-wrap .wrap{max-width:none}
  .gl-intro{max-width:none;font-size:9pt;margin-bottom:6pt}
  .gl-intro .print-only{display:block}
  .gl-list{columns:2;column-gap:14pt;column-rule:.5pt solid #ccc}
  .gl-letter{padding:4pt 0 0}
  .gl-L{font-size:15pt;color:#000;margin:0 0 2pt;break-after:avoid}
  .gl-L::after{background:#999}
  .gl-term{padding:4pt 0;border-color:#ddd;break-inside:avoid;page-break-inside:avoid;max-width:none}
  .gl-term:target{background:none;margin:0;padding-left:0}
  .gl-word{font-size:11pt;margin:0 0 1pt;color:#000}
  .gl-country{border-color:#000;color:#000;font-size:6pt;padding:0 3pt}
  .gl-also{font-size:8pt;margin:0;color:#333}
  .gl-def{font-size:9pt;line-height:1.35;margin:0 0 1pt;color:#000}
  .gl-src,.gl-rel{font-size:7.5pt;margin:0;color:#333}
  .gl-src a,.gl-rel a{text-decoration:none;color:#000}
  #sources .gd-sources{columns:2;column-gap:14pt;font-size:8pt}
  #sources .gd-sources li{break-inside:avoid;padding:3pt 0 3pt 1.8rem}
}