/* ===== woorden (sectie /thai-phrases/; hoort bij tools/phrases_src.py). Alleen klassen met ph-; bouwt op de gedeelde tokens/componenten uit shared.css ===== */
.t-woorden{--acc:#4cc9f0;--acc-soft:#e3f6ff;--hero:#e3f6ff}
/* Thais schrift: systeemlettertypen met Thaise glyphs (geen externe download); ruime regelhoogte voor toon- en klinkertekens boven/onder de regel */
.t-woorden [lang="th"]{font-family:"Noto Sans Thai","Noto Sans Thai UI","Noto Looped Thai","Leelawadee UI","Leelawadee","Thonburi","Sukhumvit Set","Krungthep","Sarabun","Tahoma","Itim",sans-serif;line-height:1.6;font-weight:600}
.t-woorden .c-hero{background-color:var(--hero)}
.t-woorden .ph-th-hero{background-color:var(--tc);background-image:radial-gradient(rgba(255,255,255,.45) 3px,transparent 3.5px);background-size:30px 30px}
.t-woorden .c-photo .main.art{aspect-ratio:auto;object-fit:contain;border:0;box-shadow:none;background:none;transform:rotate(2deg);max-height:300px;margin:0 auto}
.ph-sun{background:#fff6d6;background-image:radial-gradient(rgba(255,210,63,.35) 2.5px,transparent 3px);background-size:30px 30px}
/* grote tekstballon in de hero van een onderwerp */
.ph-big{position:relative;justify-self:center;align-self:center;max-width:100%;min-width:220px;background:#fff;border:5px solid var(--ink);border-radius:34px;box-shadow:8px 10px 0 var(--shadow);padding:22px 26px 18px;text-align:center;transform:rotate(2.5deg)}
.ph-big::after{content:"";position:absolute;left:46px;bottom:-26px;width:34px;height:34px;background:#fff;border-right:5px solid var(--ink);border-bottom:5px solid var(--ink);transform:skewX(30deg) rotate(45deg)}
.ph-big-e{position:absolute;right:-16px;top:-22px;width:56px;height:56px;display:grid;place-items:center;font-size:30px;background:var(--yellow,#ffd23f);border:4px solid var(--ink);border-radius:50%;transform:rotate(-12deg)}
.ph-big-t{display:block;font-size:44px;line-height:1.5;overflow-wrap:anywhere}
.ph-big-p{display:block;font-size:20px;font-weight:600;opacity:.85}
/* uitspraakuitleg */
.ph-how{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ph-how-b{background:#fff;border:4px solid var(--ink);border-radius:24px;padding:14px 18px;box-shadow:6px 7px 0 var(--tc);min-width:0}
.ph-how-b:nth-child(odd){transform:rotate(-.5deg)}.ph-how-b:nth-child(even){transform:rotate(.5deg)}
.ph-how-b h3{margin:0 0 6px;font-size:20px}.ph-how-b p{margin:0 0 6px;line-height:1.5}
.ph-tones{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ph-tones li{background:var(--tc);border:3px solid var(--ink);border-radius:14px;padding:3px 10px;font-weight:700;font-size:15px;box-shadow:2px 3px 0 var(--shadow)}
.ph-vcd{margin-top:18px;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:10px 16px}
.ph-vcd summary{font-weight:700;cursor:pointer}
.ph-vcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:10px}
.ph-vc h3{margin:0 0 6px;font-size:18px}.ph-vc dl{margin:0;display:grid;gap:6px}
.ph-vc dl div{display:grid;grid-template-columns:minmax(90px,30%) 1fr;gap:8px;font-size:15px;border-bottom:2px dashed rgba(35,35,59,.15);padding-bottom:4px}
.ph-vc dt{font-weight:700}.ph-vc dd{margin:0}
.ph-slot{display:inline-block;min-width:2.6em;height:.9em;border-bottom:3px dashed currentColor;margin:0 .15em;vertical-align:baseline;background:rgba(255,210,63,.35);border-radius:4px 4px 0 0}
/* tegels overzicht: de HELE tegel is een <a> (geen losse knop; les van de maandknop-bug) */
.ph-tiles{list-style:none;margin:0;padding:6px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}
.ph-tile{transform:rotate(var(--rot));min-width:0}
.ph-tile:hover{transform:rotate(0) translateY(-4px)}
.ph-tl{display:flex;flex-direction:column;height:100%;box-sizing:border-box;background:#fff;border:4px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:6px 8px 0 var(--shadow);text-decoration:none;color:var(--ink)}
.ph-tl:focus-visible{outline:4px solid var(--focus);outline-offset:3px}
.ph-tt{display:flex;align-items:center;gap:10px;background:var(--tc);border-bottom:4px solid var(--ink);padding:12px 14px;min-height:74px;background-image:radial-gradient(rgba(255,255,255,.5) 2.5px,transparent 3px);background-size:24px 24px}
.ph-ic{flex:none;width:46px;height:46px;display:grid;place-items:center;background:#fff;border:3px solid var(--ink);border-radius:50%;font-size:24px;transform:rotate(-8deg)}
.ph-tn{font-size:19px;font-weight:700;line-height:1.2}
.ph-tb{display:flex;flex-direction:column;gap:6px;padding:10px 14px 14px;flex:1}
.ph-cnt{font-weight:700;font-size:14px}
.ph-ex{display:flex;flex-direction:column;background:var(--acc-soft);border:2px dashed var(--ink);border-radius:14px;padding:6px 10px}
.ph-ex [lang="th"]{font-size:22px;line-height:1.5}.ph-ex i{font-style:normal;font-weight:600;font-size:14px}.ph-ex small{font-size:13.5px;opacity:.85}
.ph-go{margin-top:auto;align-self:flex-start;background:var(--tc);border:2px solid var(--ink);border-radius:999px;padding:1px 12px;font-weight:700;font-size:14px}
.ph-tl:hover .ph-go{transform:translateX(3px)}
/* top 20 */
.ph-tops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ph-top a{position:relative;display:flex;flex-direction:column;height:100%;box-sizing:border-box;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:12px 14px 12px 28px;text-decoration:none;color:var(--ink);box-shadow:4px 5px 0 var(--tc)}
.ph-top a:hover{transform:translateY(-3px) rotate(-1deg)}
.ph-n{position:absolute;left:-10px;top:-12px;width:32px;height:32px;display:grid;place-items:center;background:var(--tc);border:3px solid var(--ink);border-radius:50%;font-size:15px}
.ph-top .ph-th{font-size:24px}.ph-top .ph-pr{font-weight:600;font-size:15px}.ph-top .ph-mean{font-size:14.5px}
.ph-top .ph-pol{margin-top:6px}
/* kaarten op een onderwerppagina */
.ph-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ph-card{position:relative;display:flex;flex-direction:column;background:#fff;border:3px solid var(--ink);border-radius:22px;padding:12px 16px 14px;box-shadow:5px 6px 0 var(--tc,var(--shadow));min-width:0;scroll-margin-top:90px}
.ph-cards .ph-card:nth-child(4n+1){--tc:#ff8fc7}.ph-cards .ph-card:nth-child(4n+2){--tc:#ffd23f}.ph-cards .ph-card:nth-child(4n+3){--tc:#7be0a8}.ph-cards .ph-card:nth-child(4n+4){--tc:#4cc9f0}
.ph-card:target{outline:4px solid var(--ink);outline-offset:3px;background:#fffbe6}
.ph-card .ph-th{margin:0;font-size:30px;line-height:1.5;overflow-wrap:anywhere;padding-right:0}
.ph-card .ph-pr{margin:0 0 6px;font-size:17px;font-weight:700;color:#3b3b6b}
.ph-card .ph-mean{margin:0 0 6px;font-size:16px;line-height:1.4;border-top:3px dotted var(--tc);padding-top:6px}
.ph-note{margin:auto 0 0;font-size:14px;line-height:1.45;background:var(--acc-soft);border-radius:12px;padding:5px 9px}
.ph-pol{align-self:flex-start;display:inline-block;background:#fff1c2;border:2px solid var(--ink);border-radius:999px;padding:0 9px;font-size:12.5px;font-weight:700;white-space:nowrap;line-height:1.6}
.ph-card .ph-pol{position:absolute;right:10px;top:-12px;transform:rotate(3deg)}
.ph-pol-i{vertical-align:middle}
.ph-thl{color:var(--ink);text-decoration:underline dotted 3px;text-underline-offset:6px}
.ph-thl::after{content:" ↗";font-size:.55em;vertical-align:super;font-family:inherit}
/* onderwerpen-strip + vorige/volgende */
.ph-strip ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0;padding:0}
.ph-chip{display:inline-block;background:var(--tc);border:3px solid var(--ink);border-radius:14px;padding:4px 10px;font-weight:700;font-size:15px;text-decoration:none;color:var(--ink);box-shadow:3px 3px 0 var(--shadow)}
.ph-chip.on{outline:4px solid var(--ink);outline-offset:2px;transform:scale(1.06) rotate(-2deg)}
.ph-pn{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:stretch;margin:0 0 18px}
.ph-pn a{display:flex;flex-direction:column;justify-content:center;background:var(--tc,#fff);border:3px solid var(--ink);border-radius:18px;padding:6px 16px;font-weight:700;font-size:17px;text-decoration:none;color:var(--ink);box-shadow:4px 5px 0 var(--shadow)}
.ph-pn a small{font-size:12px;font-weight:600;opacity:.85}
.ph-pn .ph-all{background:#fff;align-self:center}.ph-pn .ph-nx{text-align:right}
/* FAQ: zichtbare tekst */
.ph-faq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ph-q{background:#fff;border:4px solid var(--ink);border-radius:24px;padding:14px 18px;box-shadow:6px 7px 0 var(--tc);border-top-width:12px;border-top-color:var(--tc)}
.ph-q h3{margin:0 0 6px;font-size:19px;line-height:1.3}.ph-q p{margin:0;line-height:1.5}
@media (max-width:1100px){.ph-tiles,.ph-tops{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.t-woorden .c-dec.cld1{display:none}.ph-cards,.ph-faq{grid-template-columns:repeat(2,minmax(0,1fr))}.ph-how,.ph-vcs{grid-template-columns:1fr}}
@media (max-width:700px){.ph-tiles,.ph-tops{grid-template-columns:repeat(2,minmax(0,1fr))}.ph-tiles{gap:18px 14px}.ph-tn{font-size:17px}.ph-big-t{font-size:34px}.ph-pn a{font-size:15px;padding:5px 12px}}
@media (max-width:520px){.ph-cards,.ph-faq,.ph-tops{grid-template-columns:1fr}.ph-tiles{grid-template-columns:1fr}.ph-tt{min-height:0}.ph-pn .ph-all{order:3;width:100%;text-align:center}.ph-big{min-width:0;padding:16px 18px 14px}.ph-big-t{font-size:30px}.ph-card .ph-th{font-size:28px}}
@media (prefers-reduced-motion:reduce){.ph-tile,.ph-how-b,.ph-big,.ph-chip.on{transform:none!important}}
/* naamsvermelding (meta.attribution_<lg>, CC BY-SA 4.0) in de voet van elke woordenpagina */
.c-foot .ph-attr{font-size:.9em;max-width:62em;margin-left:auto;margin-right:auto;line-height:1.5}
.c-foot .ph-attr a{color:inherit;text-decoration:underline;text-underline-offset:2px}