/* SX Forum phone, tablet and access layer. Loaded after forum.css. Single column everywhere, no aside. */

/* text size and density */
.sxf-page.sxf-fs-s{font-size:14px}.sxf-page.sxf-fs-m{font-size:15px}.sxf-page.sxf-fs-l{font-size:17px}
.sxf-fs-s .sxf-post .pb{font-size:14px}.sxf-fs-l .sxf-post .pb{font-size:17px;line-height:1.6}
.sxf-fs-l .sxf-row .ttl,.sxf-fs-l .sxf-row .mid a{font-size:16.5px}
.sxf-d-compact .sxf-row{padding-top:8px;padding-bottom:8px;gap:10px}
.sxf-d-compact .sxf-row .sxf-av,.sxf-d-compact .sxf-row .sxf-nic{width:32px;height:32px}
.sxf-d-compact .sxf-post .ph{padding-top:8px;padding-bottom:8px}
.sxf-d-compact .sxf-post .pb{padding-top:10px;padding-bottom:10px}
.sxf-d-compact .sxf-post .pf{padding-top:2px;padding-bottom:4px}
.sxf-d-compact .sxf-card{margin-bottom:10px}
.sxf-d-compact .sxf-head{margin-bottom:12px}

/* skip link */
.sxf-skip{position:absolute;left:12px;top:-60px;z-index:80;padding:10px 16px;border-radius:var(--sxf-r2);background:var(--sxf-ac);color:#fff!important;font-weight:600;text-decoration:none}
.sxf-skip:focus{top:10px}
.sxf-c{display:block;height:0;outline:0}
.sxf-post:focus{outline:2px solid var(--sxf-ac2);outline-offset:2px}

/* focus ring that holds on both themes */
.sxf-page :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--sxf-ac2);outline-offset:2px;box-shadow:0 0 0 4px var(--sxf-ring)}
.sxf-page .sxf-sbar input:focus-visible{box-shadow:none;outline:0}

/* contrast: secondary text on light cards */
body.light_mode.sxf-page{--sxf-tx2:color-mix(in srgb,var(--chat-page-tertiary-text-color,#5b4a86) 82%,#000)}

body.light_mode .sxf-pfx{color:color-mix(in srgb,var(--c,var(--sxf-ac)) 52%,#000)}
.sxf-page .sxf-danger{background:color-mix(in srgb,var(--sxf-err) 78%,#000)}
.sxf-latest .mt a{display:inline-flex;align-items:center;min-height:24px}

/* long words and links never push the page wider */
.sxf-page :is(h1,h2,h3,p,li,td,dd,.ttl,.nm,.who b,.pb){overflow-wrap:anywhere}
.sxf-page .pb :is(img,video,iframe,table){max-width:100%}
.sxf-page .pb pre{max-width:100%;overflow-x:auto}

/* wide tables scroll inside their own box; the box takes keyboard focus */
.sxf-mx-wrap:focus-visible{outline:2px solid var(--sxf-ac2);outline-offset:-2px}

/* display button and sheet */
#sxf-view[aria-expanded=true]{color:var(--sxf-tx);border-color:var(--sxf-ac)}
.sxf-sheet-bg{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45)}
.sxf-sheet{position:fixed;z-index:71;top:64px;right:16px;width:360px;max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);display:flex;flex-direction:column;background:var(--sxf-card);color:var(--sxf-tx);border:1px solid var(--sxf-line);border-radius:var(--sxf-r);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.sxf-sheet[hidden],.sxf-sheet-bg[hidden],.sxf-offbar[hidden]{display:none}
.sxf-sheet .sh{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 18px;border-bottom:1px solid var(--sxf-line)}
.sxf-sheet .sh h2{flex:1;margin:0;font-size:17px}
.sxf-sheet .sb{overflow-y:auto;padding:12px 18px 18px;display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain}
.sxf-sheet h3{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--sxf-tx2)}
.sxf-vseg{margin:0;padding:0;border:0;min-width:0}
.sxf-vseg legend{padding:0;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--sxf-tx2)}
.sxf-vseg .opts{display:flex;gap:4px;padding:4px;border:1px solid var(--sxf-line);border-radius:12px;background:var(--sxf-bg2)}
.sxf-vseg label{flex:1 1 0;min-width:0;position:relative;display:flex}
.sxf-vseg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sxf-vseg span{flex:1;display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 8px;border-radius:9px;font-size:14px;color:var(--sxf-tx2);text-align:center;line-height:1.2;cursor:pointer}
.sxf-vseg input:checked+span{background:var(--sxf-card);color:var(--sxf-tx);font-weight:600;box-shadow:var(--sxf-sh1)}
.sxf-vseg input:focus-visible+span{outline:2px solid var(--sxf-ac2);outline-offset:1px}
.sxf-sheet .lk ul{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column}
.sxf-sheet .lk li a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px;border-radius:10px;color:var(--sxf-tx)!important;text-decoration:none;font-size:15px}
.sxf-sheet .lk li a:hover,.sxf-sheet .lk li a.on{background:var(--sxf-hover)}
.sxf-sheet .lk li a .lb{display:inline!important}
.sxf-sheet .lk li a.sxf-btn{border:0;background:none;justify-content:flex-start;height:auto}
.sxf-sheet .lk li a .sxf-cnt{margin-left:auto;position:static}
.sxf-sheet .lk > .sxf-btn{width:100%}
.sxf-sheet .ky dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:14px;align-items:center}
.sxf-sheet .ky dt{white-space:nowrap}.sxf-sheet .ky dd{margin:0;color:var(--sxf-tx2)}
.sxf-sheet kbd{display:inline-block;min-width:24px;padding:1px 6px;border:1px solid var(--sxf-line);border-bottom-width:2px;border-radius:6px;background:var(--sxf-bg2);font:12.5px/1.6 ui-monospace,Menlo,Consolas,monospace;text-align:center}
@media (pointer:coarse){.sxf-sheet .ky{display:none}}

/* counter on the conversations link */
#sxf-convlink .sxf-cnt{display:inline-block;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:999px;background:var(--sxf-err);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}

/* bottom bar: phones only */
.sxf-bnav{display:none}
.sxf-offbar{position:fixed;left:50%;top:12px;z-index:65;transform:translateX(-50%);max-width:calc(100vw - 24px);padding:9px 14px;border-radius:999px;font-size:13.5px;text-align:center;box-shadow:var(--sxf-sh1)}
.sxf-offbar.off{background:#b45309;color:#fff}.sxf-offbar.back{background:var(--sxf-ok);color:#fff}

/* offline reading page */
.sxf-offl{padding:16px 18px}
.sxf-offl h2{margin:0 0 10px;font-size:16px}
.sxf-offl ul{list-style:none;margin:0 0 12px;padding:0}
.sxf-offl li{border-top:1px solid var(--sxf-line)}.sxf-offl li:first-child{border-top:0}
.sxf-offl li a{display:flex;align-items:center;min-height:44px;padding:6px 4px;color:var(--sxf-tx)!important;text-decoration:none;overflow-wrap:anywhere}
.sxf-offl li.none{padding:12px 4px;color:var(--sxf-tx2)}
.sxf-offl .btns{display:flex;flex-wrap:wrap;gap:8px}

/* touch: 44 px targets on phones, tablets and any coarse pointer */
@media (max-width:1024px),(pointer:coarse){
 .sxf-page :is(.sxf-btn,.sxf-act,.sxf-ed-bar .tab,.sxf-tabs a,.sxf-ptabs a){min-height:44px;height:auto}
 .sxf-page :is(.sxf-ic,.sxf-tb,.sxf-pager .pg,.sxf-pager .sxf-ic){min-width:44px;min-height:44px;width:auto;height:auto}
 .sxf-page .sxf-ic:not(.sxf-pager .sxf-ic){width:44px;height:44px}
 .sxf-page .sxf-chip{min-height:36px;height:auto;padding-top:4px;padding-bottom:4px}
 .sxf-page .sxf-chip::after{content:'';position:absolute;inset:-4px 0}
 .sxf-page .sxf-chip{position:relative}
 .sxf-page .sxf-chip > *{position:relative;z-index:1}
 .sxf-page :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]),select,.pv){min-height:44px}
 .sxf-page .sxf-sbar{height:44px}
 .sxf-page .sxf-sbar input{min-height:0}
 .sxf-page .sxf-sw::after{content:'';position:absolute;inset:-11px -4px}
 .sxf-page .sxf-bar nav a{min-height:44px;display:inline-flex;align-items:center}
 .sxf-page .sxf-ed-bar .tools{gap:4px}
 .sxf-page .sxf-sheet .sxf-ic{width:44px;height:44px}
 .sxf-page .sxf-vseg span{min-height:44px}
 .sxf-page :is(.sxf-act,.sxf-ed-bar .tab){min-width:44px;justify-content:center}
 .sxf-page :is(.sxf-sort a,.sxf-seg a){display:inline-flex;align-items:center;min-height:44px}
 .sxf-page summary{min-height:44px;display:flex;align-items:center}
 .sxf-page .sxf-skinds label{min-height:44px}
}

/* tablet: wider gutters, the single column stays */
@media (max-width:1024px){
 .sxf-bar{flex-wrap:wrap;row-gap:6px}
 .sxf-bar nav{order:9;flex:1 0 100%;margin:0 -4px}
}
@media (min-width:641px) and (max-width:1024px){
 .sxf-main{padding:20px 24px 60px}
 .sxf-bar{padding:10px 16px 6px;gap:10px}
 .sxf-sheet{right:12px}
 .sxf-thead{flex-wrap:wrap}
 .sxf-thead > .sxf-vote{flex-direction:row;order:-1;width:100%;justify-content:flex-start;gap:8px}
 .sxf-thead > .tx{flex:1 0 100%;width:100%}
 .sxf-thead > .sxf-th-acts{flex:1 0 100%;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px}
}

/* phone */
@media (max-width:640px){
 .sxf-bar{padding:8px 12px 6px}
 .sxf-bar .sxf-ic{width:44px;height:44px}
 .sxf-bar .sxf-btn{min-height:44px;height:44px}
 #sxf-view{display:none}
 .sxf-bnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:4px 4px calc(4px + env(safe-area-inset-bottom));background:var(--sxf-glass);backdrop-filter:blur(10px);border-top:1px solid var(--sxf-line)}
 .sxf-page .sxf-bnav > *{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:52px;padding:4px 2px;border:0;border-radius:12px;background:none;color:var(--sxf-tx2)!important;font-size:11.5px;line-height:1.15;text-decoration:none;cursor:pointer}
 .sxf-bnav > * span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sxf-bnav i{font-size:20px}
 .sxf-bnav .on,.sxf-bnav [aria-expanded=true]{color:var(--sxf-tx)!important;background:var(--sxf-hover)}
 .sxf-bnav .act.main{color:#fff!important;background:linear-gradient(135deg,var(--sxf-ac),#7c3aed)}
 .sxf-bnav .sxf-cnt{position:absolute;top:2px;left:calc(50% + 4px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--sxf-err);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
 .sxf-page{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
 .sxf-typing .sxf-bnav{display:none}
 .sxf-typing.sxf-page{padding-bottom:0}
 .sxf-toast{bottom:calc(76px + env(safe-area-inset-bottom))}
 .sxf-sheet{top:auto;left:0;right:0;bottom:0;width:auto;max-height:85vh;max-height:85dvh;border-radius:18px 18px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
 .sxf-sheet .sh:before{content:'';position:absolute;left:50%;top:6px;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:var(--sxf-line)}
 .sxf-sheet .sh{position:relative;padding-top:16px}
 .sxf-pop{top:64px}
 .sxf-post{scroll-margin-top:110px}
}

/* motion */
@media (prefers-reduced-motion:reduce){
 .sxf-page *,.sxf-page *::before,.sxf-page *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
html:has(body.sxf-page){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:has(body.sxf-page){scroll-behavior:auto}}

/* print: the thread and its posts, no bars, buttons or editor */
@media print{
 .sxf-page{background:#fff!important;color:#000!important;padding:0!important;font-size:12pt}
 .sxf-page{--sxf-tx:#000;--sxf-tx2:#333;--sxf-card:#fff;--sxf-bg:#fff;--sxf-bg2:#fff;--sxf-line:#bbb}
 .sxf-bar,.sxf-bnav,.sxf-sheet,.sxf-sheet-bg,.sxf-offbar,.sxf-skip,.sxf-toast,.sxf-compose,#sxf-reply-form,.sxf-post .pf,.sxf-pager,.sxf-pager-top,.sxf-pager-bot,.sxf-join,.sxf-sort,.sxf-tools,.sxf-modal,.sxf-pop,button,.sxf-btn{display:none!important}
 .sxf-main{max-width:none;padding:0}
 .sxf-card{box-shadow:none!important;border:1px solid #bbb;break-inside:avoid-page}
 .sxf-post .ph{background:#f2f2f2!important}
 .sxf-page a{color:#000!important;text-decoration:underline}
 .sxf-post .pb a[href^="http"]::after{content:" (" attr(href) ")";font-size:10pt;color:#333;overflow-wrap:anywhere}
 .sxf-post .pb img{max-width:60%!important}
}
@media (max-width:1024px),(pointer:coarse){
 .sxf-page a.sxf-tag{border:11.5px solid transparent;border-left-width:1px;border-right-width:1px;background-clip:padding-box;box-shadow:inset 0 0 0 1px var(--sxf-line);height:47px;margin:-11.5px 0}
 .sxf-page .sxf-tags.sm a.sxf-tag{height:44px}
}