/* Pass 19: Fracture Cosmology shell + consolidated responsive/portable theme layer.
   Core forum interaction remains deliberately dense and Whirlpool-like. */
:root{
  --forum-max:1180px;
  --forum-pad:18px;
  --surface-glass:rgba(10,14,24,.82);
  --surface-soft:rgba(126,156,214,.035);
  --surface-hover:rgba(126,156,214,.055);
  --surface-gold:rgba(207,168,96,.07);
  --focus-ring:rgba(255,232,168,.92);
}

/* Large displays retain a clear reading viewport instead of stretching with WQHD/4K. */
.wrap,.sitebar-in,.footer-in,.footer-bottom{width:min(var(--forum-max),calc(100% - (var(--forum-pad) * 2)));margin-left:auto;margin-right:auto}
.sitebar-in{max-width:none;padding-left:0;padding-right:0}
.sitebar{background:rgba(8,11,20,.84);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%)}
.brand{min-width:0}.brand-full{display:block}.brand-compact{display:none}
.desktop-nav{min-width:0}.desktop-auth{flex:0 0 auto;min-width:0}.desktop-auth>a:first-child{display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.mobile-shell{display:none;align-items:center;gap:9px;margin-left:auto}

/* Keyboard focus is as obvious as hover without painting rings around mouse clicks. */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:3px
}

/* Mobile menu uses native details: no JS state, no invisible sideways navigation. */
.mobile-menu{position:relative}
.mobile-menu>summary{list-style:none;cursor:pointer;border:1px solid var(--hair-strong);border-radius:6px;padding:7px 10px;font:600 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-dim);background:rgba(125,159,216,.05)}
.mobile-menu>summary::-webkit-details-marker{display:none}
.mobile-menu[open]>summary{border-color:var(--brand-dim);color:var(--brand-bright);background:var(--surface-gold)}
.mobile-menu-panel{position:absolute;z-index:40;right:0;top:calc(100% + 9px);width:min(310px,calc(100vw - 20px));padding:10px;border:1px solid var(--hair-strong);border-radius:8px;background:rgba(7,10,17,.98);box-shadow:0 22px 55px rgba(0,0,0,.48)}
.mobile-menu-panel nav{display:grid!important;width:auto!important;overflow:visible!important;gap:0!important;padding:0!important}
.mobile-menu-panel nav a,.mobile-auth>a,.mobile-menu-link{display:block;width:100%;padding:10px 9px;border-radius:5px;text-align:left;color:var(--ink-dim);font:500 12px var(--sans);letter-spacing:.04em;text-transform:none}
.mobile-menu-panel nav a:hover,.mobile-auth>a:hover,.mobile-menu-link:hover{background:var(--surface-hover);color:var(--brand-bright)}
.mobile-auth{margin-top:7px;padding-top:7px;border-top:1px solid var(--hair)}
.mobile-auth form{margin:0}.mobile-menu-link{border:0;background:none;cursor:pointer}
.mobile-priority{display:inline-flex;align-items:center;min-height:34px;padding:5px 7px;color:var(--ink-dim);font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.05em}

/* Main-site-style footer shell. */
.site-footer{margin-top:58px;border-top:1px solid var(--hair);background:linear-gradient(180deg,rgba(7,10,17,.45),rgba(5,7,12,.92));color:var(--ink-muted)}
.footer-in{display:grid;grid-template-columns:minmax(220px,1.25fr) 2fr;gap:42px;padding-top:38px;padding-bottom:30px}
.footer-brand-lockup{display:inline-flex;align-items:center;gap:12px;color:var(--ink)}
.footer-brand-lockup strong{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--brand-dim);border-radius:50%;font:600 13px Cinzel,serif;color:var(--brand-bright)}
.footer-brand-lockup span{font:600 15px Cinzel,serif;letter-spacing:.055em;color:var(--brand)}
.footer-brand p{max-width:390px;margin:13px 0 0;font:15px/1.55 var(--serif);color:var(--ink-dim)}
.footer-links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.footer-col h2{margin:0 0 10px;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink)}
.footer-col ul{list-style:none;margin:0;padding:0}.footer-col li{margin:0 0 7px}.footer-col a{font-size:12px;color:var(--ink-muted)}.footer-col a:hover{color:var(--brand-bright)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:22px;border-top:1px solid var(--hair);font:10px/1.5 var(--mono);color:var(--ink-muted)}

/* Utility classes replace scattered inline layout styles. */
.section-rule{border:0;border-top:1px solid var(--hair);margin:22px 0}
.list-gap-bottom{margin-bottom:18px}
.toolbar-search{flex:1 1 300px;max-width:520px}
.toolbar-search.medium{max-width:420px}.toolbar-search.small{max-width:380px}
.compact-number{width:80px!important}
.stack-gap-top{margin-top:18px}.negative-panel-gap{margin-top:-12px!important}.field-gap-top{margin-top:20px}
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Tables scroll inside their panel, never the whole page. */
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table.admin{min-width:660px}

/* Long content must yield to the viewport. */
.badge{max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.forum-title,.thread-title,.post-user,.profile-tag,.last-meta,.thread-meta,.forum-desc,.footer-col a{overflow-wrap:anywhere;word-break:break-word}
.post-body img,.panel img{max-width:100%;height:auto}
.post-body pre{max-width:100%}

/* First-run setup should look like part of the product, not a stray PHP utility. */
.setup-main{padding-top:34px;padding-bottom:44px}
.setup-panel{box-shadow:0 22px 70px rgba(0,0,0,.28)}
.setup-label{margin-left:auto;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.setup-kicker{margin-bottom:8px;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.setup-intro{margin:0 0 24px;font:17px/1.55 var(--serif);color:var(--ink-dim)}
.setup-section{padding-top:20px;margin-top:20px;border-top:1px solid var(--hair)}
.setup-section:first-of-type{padding-top:0;margin-top:0;border-top:0}
.setup-actions{display:block;margin-top:22px}.setup-actions .muted{display:block;margin-top:10px}

/* Header becomes compact before the content layout does. */
@media(max-width:1080px){
  .desktop-nav,.desktop-auth{display:none!important}
  .mobile-shell{display:flex}
  .sitebar-in{min-height:58px}
}

/* Tablet: keep desktop-like density but stop three-column metadata squeezing. */
@media(max-width:900px){
  :root{--forum-pad:14px}
  .forum-row,.thread-row{grid-template-columns:minmax(0,1fr) 90px 180px;gap:13px;padding:14px}
  .post{grid-template-columns:155px minmax(0,1fr)}
  .post-side{padding:14px}
  .post-body{padding:16px 17px}
  .footer-in{grid-template-columns:1fr;gap:26px}
}

/* Tablet portrait / large phones: author rail becomes a compact header. */
@media(max-width:820px){
  .sitebar-in{flex-wrap:nowrap}
  .forum-row,.thread-row{grid-template-columns:1fr}
  .count,.last{text-align:left}.forum-row>.count{display:none}.last{border-top:1px dashed var(--hair);padding-top:7px}
  .post{grid-template-columns:1fr}.post-side{border-right:0;border-bottom:1px solid var(--hair);padding:10px 13px}
  .post-joined,.post-count{display:inline;margin-right:10px}
  .footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-bottom{flex-direction:column;gap:5px}
  .whim-message.mine,.whim-message.theirs{margin-left:0;margin-right:0}
  .profile-activity{grid-template-columns:1fr}
  .profile-activity .last{text-align:left}
}

/* Phones: controls wrap visibly; nothing important lives in a hidden horizontal strip. */
@media(max-width:600px){
  :root{--forum-pad:9px}
  .sitebar-in{gap:8px}.brand-full{display:none}.brand-compact{display:block!important;font-size:16px!important;letter-spacing:.12em!important}.brand small{display:none}
  .mobile-shell{gap:4px}.mobile-priority{padding-left:5px;padding-right:5px}
  .hero{padding:22px 0 16px}.hero h1,.panel h1{font-size:clamp(23px,8vw,31px)}.hero p{font-size:16px}
  .panel{padding:16px;margin:14px 0}.forum-row,.thread-row{padding:12px}
  .post-head{padding:9px 11px;flex-wrap:wrap}.post-body{font-size:16px;line-height:1.58;padding:15px 13px}.post-actions{padding:9px 11px}
  .toolbar>.btn,.toolbar>form.inline>.btn{min-height:38px}
  .pagination{flex-wrap:wrap}
  .join-strip,.section-head{align-items:flex-start;flex-direction:column}
  .join-strip .btn,.section-head .btn{margin-left:0;width:100%}
  .thread-toolbar>.btn,.thread-toolbar>form.inline>.btn{min-height:36px}
  .mod-controls,.mod-title{display:flex;width:100%;margin-top:6px}
  .compact-select,.compact-input{width:100%;max-width:none}
  .mod-controls .btn,.mod-title .btn{flex:1 1 auto}
  .post-head{align-items:flex-start}
  .post-actions{text-align:left;display:flex;gap:12px;flex-wrap:wrap}
  .post-actions a,.post-actions button{margin-left:0}
  .setting-row{align-items:flex-start;flex-direction:column}
  .setup-main{padding-top:20px}
  .setup-label{font-size:9px}
  .footer-links{grid-template-columns:1fr 1fr;gap:22px 16px}.footer-in{padding-top:30px}
}

/* Narrow fallback: preserve identity without sacrificing controls/content. */
@media(max-width:390px){
  .dm-unread-count{min-width:18px;height:18px}
  .mobile-menu>summary{padding-left:8px;padding-right:8px}
  .footer-links{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}