/* thedeckprofessor.com. The glossary page: a searchable list on the left, the open term and its drawing on the right.
   On a phone the open term unfolds under its own row. Colours for the drawings are the --gl-* variables below; the
   class rules that use them are written by glossary.js from the same palette the static SVG files use. */

:root{
  --gl-sky:#f4f2ec; --gl-earth:#e7dcc6; --gl-fill:#d9c8a4; --gl-fillLine:#b39c70; --gl-grade:#8a7550; --gl-frost:#2f78b0;
  --gl-ice:#cfe6f5; --gl-iceLine:#7fb2d6; --gl-conc:#dcdad3; --gl-concLine:#8b8a82; --gl-wood:#ecdcbc; --gl-woodLine:#9a7e52;
  --gl-deck:#e2cda2; --gl-metal:#bcc3ca; --gl-metalLine:#5d6872; --gl-house:#efece5; --gl-houseLine:#cdc6b8;
  --gl-on:#c2e6d4; --gl-onLine:#14604a; --gl-onText:#0e4c3a; --gl-bad:#fbe1c2; --gl-badLine:#b3471a; --gl-badText:#9a3c0c;
  --gl-water:#2f7fc0; --gl-rot:#5b3a1c; --gl-rust:#a0461a; --gl-ink:#1a2128; --gl-muted:#5b6670;
  --gl-bar:#e3ddcf; --gl-barOk:#a5d3bd; --gl-glass:#d3e9f6; --gl-halo:#f4f2ec; --gl-lot:#eef0e6; --gl-street:#d8d6d0;
  --gl-heart:#c99a5f; --gl-treated:#cfdcb2;
  --gl-info:#1e5f8a; --gl-info-soft:#e3eef6; --gl-info-line:#b8d2e6;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --gl-sky:#1d2427; --gl-earth:#3a3227; --gl-fill:#4d4130; --gl-fillLine:#7a6647; --gl-grade:#b39a6c; --gl-frost:#6fb3e6;
    --gl-ice:#23455c; --gl-iceLine:#4f86ad; --gl-conc:#4a4c4d; --gl-concLine:#8a8c8c; --gl-wood:#5b4a33; --gl-woodLine:#b0946a;
    --gl-deck:#6a5638; --gl-metal:#6f7980; --gl-metalLine:#b4bdc4; --gl-house:#262d30; --gl-houseLine:#3c4549;
    --gl-on:#1f4a3c; --gl-onLine:#63c3a1; --gl-onText:#8ad6ba; --gl-bad:#43301a; --gl-badLine:#f08a50; --gl-badText:#f5a574;
    --gl-water:#5aa6e0; --gl-rot:#a0764a; --gl-rust:#d9793f; --gl-ink:#e6eaed; --gl-muted:#a3adb5;
    --gl-bar:#333b3e; --gl-barOk:#2f5c4b; --gl-glass:#2a4a5e; --gl-halo:#1d2427; --gl-lot:#232b24; --gl-street:#2f3538;
    --gl-heart:#8a643a; --gl-treated:#3f4d33;
    --gl-info:#8cc2ea; --gl-info-soft:#1d2e3a; --gl-info-line:#2f4d63;
  }
}
:root[data-theme="dark"]{
  --gl-sky:#1d2427; --gl-earth:#3a3227; --gl-fill:#4d4130; --gl-fillLine:#7a6647; --gl-grade:#b39a6c; --gl-frost:#6fb3e6;
  --gl-ice:#23455c; --gl-iceLine:#4f86ad; --gl-conc:#4a4c4d; --gl-concLine:#8a8c8c; --gl-wood:#5b4a33; --gl-woodLine:#b0946a;
  --gl-deck:#6a5638; --gl-metal:#6f7980; --gl-metalLine:#b4bdc4; --gl-house:#262d30; --gl-houseLine:#3c4549;
  --gl-on:#1f4a3c; --gl-onLine:#63c3a1; --gl-onText:#8ad6ba; --gl-bad:#43301a; --gl-badLine:#f08a50; --gl-badText:#f5a574;
  --gl-water:#5aa6e0; --gl-rot:#a0764a; --gl-rust:#d9793f; --gl-ink:#e6eaed; --gl-muted:#a3adb5;
  --gl-bar:#333b3e; --gl-barOk:#2f5c4b; --gl-glass:#2a4a5e; --gl-halo:#1d2427; --gl-lot:#232b24; --gl-street:#2f3538;
  --gl-heart:#8a643a; --gl-treated:#3f4d33;
  --gl-info:#8cc2ea; --gl-info-soft:#1d2e3a; --gl-info-line:#2f4d63;
}

/* ---------- page ---------- */
.gl-page{padding-block:var(--s6) var(--s16)}
.gl-head h1{margin:0 0 var(--s1);font-size:clamp(32px,4.4vw,44px)}
.gl-head .gl-sub{color:var(--muted);margin:0 0 var(--s4);font-size:18px}
.gl-js .gl-static{display:none}
.gl-js .gl-nojs{display:none}

/* ---------- tools ---------- */
.gl-tools{display:grid;gap:var(--s3)}
.gl-side{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.gl-side .gl-cats{gap:5px}
.gl-side .gl-cat{font-size:13px;padding:5px 10px}
.gl-srow{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.gl-search{flex:1 1 280px;min-width:0;font:inherit;font-size:16px;padding:11px 16px;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);background:var(--card);color:var(--ink)}
.gl-search:focus{outline:2px solid var(--focus);outline-offset:1px}
.gl-skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.gl-skip:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;padding:10px 16px;border-radius:var(--r-pill);background:var(--ink);color:var(--paper);font-size:14px;font-weight:700;text-decoration:none;outline:2px solid var(--focus);outline-offset:2px}
.gl-quizbtn[aria-pressed="true"],.gl-quizbtn[aria-pressed="true"]:hover,.btn.secondary.gl-quizbtn[aria-pressed="true"]:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.gl-cats{display:flex;gap:6px;flex-wrap:wrap}
.gl-cat{font:inherit;font-size:13.5px;padding:6px 12px;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer;display:inline-flex;gap:7px;align-items:baseline}
.gl-cat:hover{border-color:var(--ink)}
.gl-cat .gl-n{font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.gl-cat[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gl-cat[aria-pressed="true"] .gl-n{color:var(--paper);opacity:.75}
.gl-az{display:flex;flex-wrap:wrap;gap:2px}
.gl-az a{font-family:var(--f-mono);font-size:13px;min-width:28px;height:28px;padding:0 4px;display:inline-grid;place-items:center;border-radius:6px;text-decoration:none;color:var(--accent-ink)}
.gl-az a:hover{background:var(--accent-soft)}
.gl-az a[aria-disabled="true"]{color:var(--faint);opacity:.45;pointer-events:none}
.gl-az a.gl-num{padding:0 8px}
.gl-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:baseline;justify-content:space-between;padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.gl-count{margin:0;font-size:14px;color:var(--muted)}
.gl-pageadv{margin:0;border:0;padding:0}
.gl-pageadv[open]{flex-basis:100%}
.gl-pageadv .advbody{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);align-items:center;padding-top:var(--s3)}
.gl-sw{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer}
.gl-sw input{width:17px;height:17px;accent-color:var(--accent);margin:0}
.gl-unitsw{display:flex;gap:10px;align-items:center}
.gl-swl{font-size:13px;font-weight:700}

/* ---------- list and stage ---------- */
.gl-main{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:var(--s8);align-items:start;margin-top:var(--s4)}
.gl-main>*{min-width:0}
.gl-list{display:flex;flex-direction:column;gap:2px}
.gl-letter{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:var(--s4) 0 2px 12px;scroll-margin-top:84px}
.gl-letter:first-child{margin-top:0}
.gl-row{display:block;width:100%;text-align:left;background:none;border:0;border-radius:var(--r-md);padding:9px 12px 9px 14px;cursor:pointer;font:inherit;color:inherit;position:relative;scroll-margin-top:84px}
.gl-row:hover{background:var(--card-2)}
.gl-row b{display:block;font-size:16px;font-weight:700;line-height:1.3}
.gl-row span{display:block;font-size:13.5px;color:var(--muted);line-height:1.4;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gl-row.seen::before{content:"";position:absolute;left:3px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.55}
.gl-row[aria-current="true"]{background:var(--accent-soft)}
.gl-row[aria-current="true"] b{color:var(--accent-ink)}
.gl-none{color:var(--muted);padding:var(--s4) 12px}
.gl-stage{position:sticky;top:78px;max-height:calc(100vh - 90px);overflow:auto;border-radius:var(--r-lg);scrollbar-width:thin}
.gl-stage-empty{margin:0;padding:var(--s8) var(--s6);border:1px dashed var(--line-strong);border-radius:var(--r-lg);color:var(--muted);text-align:center}

/* ---------- the open term ---------- */
.gl-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.gl-card-head{padding:var(--s5) var(--s6) var(--s3)}
.gl-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 6px}
.gl-card h2{margin:0 0 2px;font-size:clamp(26px,2.6vw,30px)}
.gl-aka{margin:0 0 4px;color:var(--muted);font-size:14.5px}
.gl-def{margin:0;font-size:17px;line-height:1.5;max-width:62ch}
.gl-demo{margin:0;border-top:1px solid var(--line)}
.gl-demo>*{min-width:0}
.gl-pic{background:var(--gl-sky);display:flex;justify-content:center;align-items:flex-start}
.gl-pic svg{display:block;width:100%;height:auto;max-height:60vh}
.gl-panel{padding:var(--s4) var(--s5) var(--s2)}
.gl-panel .gl-verdict{margin:0 0 var(--s4)}
.gl-ctl{min-width:0}
.gl-out{padding:var(--s3) var(--s5) var(--s4);border-top:1px solid var(--line)}
.gl-facts li{break-inside:avoid}
@media (min-width:1100px){
  .gl-stage .gl-demo{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(250px,1fr)}
  .gl-stage .gl-pic{grid-column:1;grid-row:1;border-right:1px solid var(--line);height:100%;align-items:center}
  .gl-stage .gl-panel{grid-column:2;grid-row:1}
  .gl-stage .gl-out{grid-column:1/-1;grid-row:2}
  .gl-stage .gl-facts{columns:2;column-gap:var(--s6)}
  .gl-stage .gl-verdict b{font-size:17.5px}
}
.gl-ctl .ctrl{margin:0 0 var(--s4)}
.gl-ctl .lab{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;font-size:13px;font-weight:700;margin-bottom:6px}
.gl-ctl .lab output{font-family:var(--f-mono);font-weight:400;font-size:13px;color:var(--muted);white-space:nowrap}
.gl-ctl input[type=range]{width:100%;accent-color:var(--accent);margin:0}
.gl-check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;cursor:pointer;margin:0 0 var(--s3)}
.gl-check input{width:17px;height:17px;margin:3px 0 0;flex:none;accent-color:var(--accent)}
.gl-act{margin:0 var(--s2) var(--s3) 0;font-size:14px;padding:8px 16px}
.gl-act::before{content:"\25B6";font-size:10px;margin-right:8px;position:relative;top:-1px}
/* a control switched off because it does nothing yet, with its reason under it */
.gl-actw{display:inline-flex;flex-direction:column;align-items:flex-start;vertical-align:top;margin:0 var(--s2) var(--s3) 0;max-width:100%}
.gl-actw .gl-act{margin:0}
.gl-ckw{margin:0 0 var(--s3)}
.gl-ckw .gl-check{margin:0}
.gl-off{margin:4px 0 0;font-size:12.5px;line-height:1.4;color:var(--muted);max-width:40ch}
.gl-off[hidden]{display:none}
.gl-ctl .is-off>.lab,.gl-ctl .is-off>input[type=range],.gl-ctl .is-off>.seg,.gl-ctl .is-off>.sel,.gl-ctl .is-off>.gl-check,.gl-ctl .is-off>.gl-act{opacity:.5}
.gl-ctl .is-off .seg button,.gl-ctl .is-off input,.gl-ctl .is-off .gl-act{cursor:not-allowed}
.gl-ctl .is-off .seg button:hover{border-color:var(--line-strong)}
.gl-unitseg[hidden]{display:none}
.gl-adv{margin-top:var(--s2)}
.gl-reset{font-size:13.5px;padding:7px 14px}
.gl-verdict{margin:0 0 var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--accent-soft);border:1px solid transparent}
.gl-verdict b{display:block;font-family:var(--f-display);font-size:19px;line-height:1.25;margin-bottom:3px}
.gl-verdict span{display:block;font-size:14px;color:var(--muted);line-height:1.45}
.gl-verdict.warn{background:var(--warn-soft);border-color:var(--warn-line)}
.gl-verdict.warn b{color:var(--warn)}
.gl-verdict.info{background:var(--gl-info-soft);border-color:var(--gl-info-line)}
.gl-verdict.info b{color:var(--gl-info)}
.gl-facts{list-style:none;padding:0;margin:0 0 var(--s3);font-size:14.5px}
.gl-facts li{padding:6px 0;border-bottom:1px dotted var(--line);line-height:1.4}
.gl-facts li:last-child{border-bottom:0}
.gl-facts .k{color:var(--muted)}
.gl-facts .v{font-weight:600}
.gl-facts li.flag .v{color:var(--warn);font-weight:700}
.gl-deck{font-size:13px;color:var(--accent-ink);margin:0 0 6px}
.gl-w3{font-size:12.5px;color:var(--muted);margin:0}
.gl-note{margin:0;padding:var(--s4) var(--s6);border-top:1px solid var(--line);font-size:15.5px;max-width:none}
.gl-more{padding:var(--s4) var(--s6) var(--s5);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s8)}
.gl-more>*{min-width:0}
.gl-show{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;margin:0 0 var(--s3)}
.gl-showt{font-size:14px;color:var(--muted)}
.gl-block h3{font-family:var(--f-body);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:var(--s3) 0 var(--s2)}
.gl-links{list-style:none;padding:0;margin:0;font-size:14.5px}
.gl-links li{margin:0 0 7px;line-height:1.4}
.gl-links .gl-sub{color:var(--muted);font-size:13px}
.gl-rel{display:flex;flex-wrap:wrap;gap:6px}
.gl-relb{font-size:13.5px;padding:5px 11px;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);text-decoration:none;color:var(--ink)}
.gl-relb:hover{border-color:var(--accent);color:var(--accent-ink)}
.gl-pager{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s6) var(--s5);border-top:1px solid var(--line)}
.gl-pager .btn{font-size:13.5px;padding:8px 14px;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- test yourself ---------- */
.gl-qopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);padding:var(--s4) var(--s6)}
.gl-qopt{font:inherit;font-size:16px;font-weight:600;padding:12px 14px;border-radius:var(--r-md);border:1.5px solid var(--line-strong);background:var(--card);color:var(--ink);cursor:pointer;text-align:left}
.gl-qopt:hover:not(:disabled){border-color:var(--accent)}
.gl-qopt.right{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.gl-qopt.wrong{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.gl-qopt:disabled{cursor:default}
.gl-quiz .gl-verdict{margin:0 var(--s6) var(--s3)}
.gl-qnext{display:flex;flex-wrap:wrap;gap:var(--s3);padding:0 var(--s6) var(--s5)}

/* ---------- static list for readers without JavaScript ---------- */
.gl-static{margin-top:var(--s6)}
.gl-static article{border-top:1px solid var(--line);padding:var(--s6) 0}
.gl-static h2{margin:0 0 var(--s2);font-size:26px}
.gl-static figure{margin:var(--s4) 0;max-width:640px}
.gl-static img{display:block;width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--line)}
.gl-static p{max-width:70ch}

/* ---------- phones ---------- */
@media (max-width:900px){
  .gl-main{grid-template-columns:1fr;gap:0}
  .gl-side .gl-cats,.gl-az{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .gl-side .gl-cats::-webkit-scrollbar,.gl-az::-webkit-scrollbar{display:none}
  .gl-side .gl-cat,.gl-az a{flex:none}
  .gl-stage{display:none}
  .gl-list .gl-card{margin:4px 0 var(--s4)}
  .gl-list .gl-card .gl-card-head h2,.gl-list .gl-card .gl-card-head .gl-def{display:none}
  .gl-list .gl-card .gl-card-head{padding-block:var(--s3) var(--s2)}
  .gl-row[aria-current="true"] span{display:block;-webkit-line-clamp:unset;overflow:visible}
  .gl-more{grid-template-columns:1fr}
  .gl-pic svg{max-height:none}
}
@media (max-width:520px){
  .gl-card-head,.gl-note,.gl-more,.gl-pager{padding-inline:var(--s4)}
  .gl-panel,.gl-out{padding-inline:var(--s4)}
  .gl-qopts{grid-template-columns:1fr;padding-inline:var(--s4)}
  .gl-quiz .gl-verdict{margin-inline:var(--s4)}
  .gl-qnext{padding-inline:var(--s4)}
  .gl-az a{min-width:26px;height:30px}
}
@media print{
  .gl-tools,.gl-pager,.gl-ctl,.gl-stage{display:none !important}
  .gl-js .gl-static{display:block}
  .gl-js #gl-ui{display:none}
  .gl-page{padding-block:0}
  .gl-static figure{break-inside:avoid}
  .gl-static h2{break-after:avoid}
}