/* Typo Token Language: Platform Lab */
.tk-labx{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;padding-bottom:20px;scroll-margin-top:84px}
.tk-labx-main{border-radius:30px;padding:28px;min-width:0}
.tk-seg{border:0;padding:0;margin:0 0 20px;min-width:0}
.tk-seg legend,.tk-pane-label{display:block;padding:0;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#8c8074;font-weight:750;margin-bottom:8px}
.tk-seg-row{display:flex;flex-wrap:wrap;gap:8px}
.tk-seg-opt{position:relative}
.tk-seg-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.tk-seg-opt span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid #efe0d6;background:#ffffff;font-weight:650;font-size:14px;color:#5e4e3f;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tk-seg-opt span:hover{border-color:#e9b893}
.tk-seg-opt input:checked+span{background:#db742f;color:#ffffff;border-color:#db742f}
.tk-seg-opt input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.tk-mode-purpose{margin:10px 0 0;color:var(--muted);font-size:14px;min-height:21px}
.tk-labx-level{border-top:1px solid var(--line);padding-top:18px;margin-bottom:6px}
.tk-labx-level .tk-lvdesc{margin:10px 0 8px;min-height:0}
.tk-suggest{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px;font-size:13.5px;color:#5d554c}
.tk-mini{min-height:32px;padding:0 14px;font-size:12.5px}
.tk-plainout{white-space:pre-wrap;background:linear-gradient(135deg,#f1faf6,#fcf8f4)}
.tk-msg{font-size:13px;color:var(--muted);min-height:20px;margin:8px 0 0}
.tk-warns{display:grid;gap:8px;margin-top:12px}.tk-warns:empty{display:none}
.tk-warn{margin:0;background:#fff4e8;border:1px solid #f3d2b6;color:#713a12;border-radius:14px;padding:10px 14px;font-size:13.5px}
.tk-warn.bad{background:#fdeaea;border-color:#f1c3c3;color:#8a1f2b;font-weight:650}
.tk-difbox{margin-top:20px}.tk-difbox h3{margin:0 0 8px;font-size:14px;letter-spacing:-.01em}
.tk-diff{min-height:96px;white-space:pre-wrap}
.tk-privacy{margin-top:18px}
.tk-advice{border-radius:26px;padding:24px;min-width:0}
.tk-advice h2{font-size:23px;letter-spacing:-.035em;margin:2px 0 6px;line-height:1.2}
.tk-advice h3{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#8c8074;font-weight:780;margin:20px 0 8px}
.tk-advice p{margin:0;color:#5d554c;font-size:14px;line-height:1.55}
.tk-advice .kicker{margin:0;color:#a0582a}
.tk-advice-list,.tk-advice-src,.tk-checks{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;color:#43382d}
.tk-advice-list li{padding-left:22px;position:relative;line-height:1.5}.tk-advice-list li:before{content:'✓';position:absolute;left:0;top:0;color:var(--success);font-weight:900}
.tk-advice-src a{color:#8f3b00;font-weight:620;font-size:13.5px;text-decoration:none}.tk-advice-src a:hover{text-decoration:underline}
.tk-check-note{font-size:12.5px!important;color:#7c7065!important;margin-bottom:8px!important}
.tk-checks li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;line-height:1.45}
.tk-checks b{display:block;font-size:13.5px}.tk-checks small{display:block;color:#7c7065;font-size:12.5px}
.tk-checks .pill{font-size:11px;font-weight:750;padding:3px 9px;border-radius:99px;white-space:nowrap;margin-top:1px}
.tk-checks .pill.ok{background:#e2f6e9;color:#1c6a37}.tk-checks .pill.add{background:#ffe9d9;color:#86360a}.tk-checks .pill.opt{background:#f1ede9;color:#6a5f55}
.tk-adv-guide{margin-top:22px;width:100%;text-align:center;line-height:1.3;padding:10px 16px;min-height:44px}
@media(max-width:1040px){.tk-labx{grid-template-columns:1fr}}
@media(max-width:560px){.tk-labx-main{padding:18px;border-radius:24px}.tk-advice{padding:20px}.tk-seg-opt span{min-height:38px;padding:0 13px;font-size:13.5px}.tk-pane-foot{flex-wrap:wrap}}

/* mobile-overflow-guard */
/* Root cause of the sideways scrolling on phones (9 Nov 2026): grid and flex children default to min-width:auto, so one wide child
   (a demo window, a no-wrap row, a long word) made the whole column wider than the screen. Children of every grid may shrink. */
.tk-labx>*,.tk-warns>*,.tk-advice-list>*,.tk-advice-src>*,.tk-checks>*,.tk-checks li>*{min-width:0}
