/* /traffic.html — รถติด */
.trom{font-size:.5em;font-weight:400;color:var(--mute);letter-spacing:.02em}
.tnow{border:3px solid var(--b);border-radius:16px;padding:14px 16px;margin:10px 0 14px;
 background:linear-gradient(180deg,color-mix(in srgb,var(--b) 14%,#fff) 0%,var(--card,#fffdf7) 70%);
 box-shadow:4px 4px 0 var(--b)}
.tnow p{margin:0}
.twhen{font-size:1rem;color:var(--ink-soft)}
.tbig{font-size:2rem;font-weight:700;line-height:1.2;margin:4px 0!important}
.tword{display:inline-block;background:var(--b);color:var(--bi);border-radius:12px;padding:2px 14px}
.tmin{font-size:1.35rem;font-weight:700;margin-top:2px!important}
.tsub{font-size:1rem;color:var(--ink-soft);margin-top:4px!important}
.tctx{margin-top:10px!important;font-size:1rem}
.tctx span.tline{display:block;padding:6px 10px;margin-top:6px;border-radius:10px;background:var(--card-alt,#f8f0dd)}
.tctx .rowicon{vertical-align:-4px;margin-right:4px}
.tdays{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}
.tday{flex:0 0 auto;border:2px solid var(--ink);background:var(--paper);border-radius:999px;
 padding:8px 14px;font:inherit;font-size:1rem;min-height:44px;cursor:pointer}
.tday[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.tstrip{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;align-items:end;height:92px;
 padding:4px 0;border-bottom:2px solid var(--rule)}
.tbar{height:var(--h);min-height:6px;background:var(--b);border:0;border-radius:4px 4px 0 0;padding:0;
 cursor:pointer;opacity:.8}
.tbar.on{opacity:1;outline:3px solid var(--ink);outline-offset:1px}
.tbar.now{box-shadow:inset 0 3px 0 var(--ink)}
.thours{display:grid;grid-template-columns:repeat(24,1fr);font-size:.8rem;color:var(--mute)}
.tstep{display:flex;gap:8px;justify-content:space-between;margin:8px 0}
.tbtn{flex:1;border:2px solid var(--ink);background:var(--paper);border-radius:12px;min-height:44px;
 font:inherit;font-size:1rem;cursor:pointer;padding:6px 8px}
.tbtn .rowicon{vertical-align:-4px;margin-right:4px}
.twait{font-size:1.05rem;padding:8px 12px;border-left:5px solid var(--jade,#1f6b57);background:var(--card-alt,#f8f0dd);
 border-radius:0 10px 10px 0;margin:4px 0 12px}
.tmap{margin-top:8px;aspect-ratio:4/5;max-height:78vh}
@media (min-width:760px){.tmap{aspect-ratio:4/3}}
.tviews{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.tview{border:2px solid var(--ink);background:var(--paper);border-radius:999px;padding:6px 12px;
 min-height:44px;font:inherit;font-size:.95rem;cursor:pointer}
.tview[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.tlegend{display:grid;gap:10px;margin:10px 0 18px}
@media (min-width:760px){.tlegend{grid-template-columns:1fr 1fr}}
.tlegend>div{min-width:0}
.tlegend .bi,.tkey .bi,.tnow .bi,.twait .bi,.tbtn .bi{white-space:normal}
.tlegend h3{font-size:1rem;margin:0 0 4px}
.tkey{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px}
.tkey li{display:flex;align-items:center;gap:6px;font-size:.95rem}
.tkey i{display:inline-block;width:22px;height:12px;border-radius:3px}
.tweek{border-collapse:separate;border-spacing:2px;width:100%;margin:18px 0 6px;table-layout:fixed}
.tweek caption{text-align:left;font-weight:700;font-size:1.05rem;padding-bottom:6px}
.tweek th{font-weight:400;font-size:.8rem;color:var(--mute);padding:0}
.tweek tbody th{text-align:left;width:34px;font-size:.72rem;line-height:1.1;color:var(--ink)}
.tweek tbody th span{display:block}
.tweek tr>th:first-child{width:34px}
.tweek .tmon{display:block;font-weight:400;font-size:.95rem}
.tweek td{padding:0}
.tcell{width:100%;aspect-ratio:1;min-height:18px;border:0;border-radius:4px;background:var(--b);
 color:#fff;font:inherit;font-size:.7rem;font-weight:700;padding:0;cursor:pointer;text-shadow:0 0 2px rgba(0,0,0,.6)}
.tcell.on{outline:3px solid var(--ink);outline-offset:1px}
@media (max-width:420px){.tcell{font-size:0}}
.tfacts{padding-left:1.1em;font-size:1.05rem}
.tscroll{overflow-x:auto;margin:14px 0}
.troads{width:100%;min-width:320px;border-collapse:collapse;margin:14px 0;font-size:.95rem}
.troads caption{text-align:left;font-weight:700;font-size:1.05rem;padding-bottom:6px}
.troads .tcap{display:block;font-weight:400;font-size:.9rem}
.troads th,.troads td{padding:6px 4px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.troads .n{text-align:right;font-variant-numeric:tabular-nums}
.tg{display:inline-block;min-width:1.6em;text-align:center;border-radius:6px;background:var(--g);color:#fff;font-weight:700}
.thow ul{padding-left:1.1em}
.thow li{margin-bottom:6px}