/* Mysterious Matters mobile editorial redesign — 2026-07-29
   Loaded after mobile.css so it can tighten the existing responsive layer
   without changing the desktop identity. */

.mobile-account-link,
.brand-short,
.thread-mobile-status,
.thread-chevron,
.forum-card-chevron { display: none; }

.brand-name { white-space: nowrap; }

.home-filter-tabs,
.discussion-filter-tabs {
  display: flex;
  gap: 5px;
  margin: 0 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.home-filter-tabs::-webkit-scrollbar,
.discussion-filter-tabs::-webkit-scrollbar { display: none; }
.home-filter-tabs a,
.discussion-filter-tabs a {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font: 700 8px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.home-filter-tabs a:hover,
.discussion-filter-tabs a:hover,
.home-filter-tabs a.on,
.discussion-filter-tabs a.on {
  border-color: rgba(95,208,207,.28);
  background: rgba(95,208,207,.07);
  color: var(--teal2);
}

.member-home-summary {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.85fr) auto;
  gap: 22px;
  align-items: center;
  padding: 22px 24px;
  margin-bottom: 14px;
}
.member-home-copy h1 { margin: 3px 0 4px; font: 700 31px/1.05 var(--serif); }
.member-home-copy p { margin: 0; color: var(--muted); }
.member-home-metrics { display: grid; grid-template-columns: repeat(3,1fr); }
.member-home-metrics a { padding: 7px 14px; border-left: 1px solid var(--line); }
.member-home-metrics b { display: block; color: var(--amber2); font: 700 24px/1 var(--serif); }
.member-home-metrics span { display: block; margin-top: 5px; color: var(--muted); font: 700 8px/1.4 var(--mono); text-transform: uppercase; }

.editorial-page { max-width: 850px; padding: 34px; }
.editorial-page h1 { margin: 5px 0 12px; font: 700 clamp(34px,5vw,52px)/1.04 var(--serif); }
.editorial-lead { color: var(--muted); font-size: 19px; line-height: 1.55; }
.editorial-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 24px; background: var(--line); }
.editorial-rules article { padding: 20px; background: var(--deep); }
.editorial-rules b { color: var(--amber2); font: 600 19px var(--serif); }
.editorial-rules p { margin-bottom: 0; color: var(--muted); line-height: 1.55; }

.glass-forum-card { position: relative; color: inherit; }
.forum-card-primary { grid-template-columns: 37px minmax(0,1fr) 18px; }
.forum-card-chevron { align-self: center; color: var(--dim); font: 300 28px/1 var(--serif); }
.forum-card-latest { grid-template-columns: minmax(0,1fr); }

.thread-card-main { grid-template-columns: 38px minmax(0,1fr) 18px; }
.thread-chevron { align-self: center; color: var(--dim); font: 300 30px/1 var(--serif); }

.editorial-thread-head { align-items: flex-end; }
.thread-title-block { min-width: 0; flex: 1; }
.thread-title-meta { display: flex; align-items: center; gap: 9px; color: var(--dim); font: 700 9px var(--mono); }
.thread-primary-state { padding-left: 9px; border-left: 1px solid var(--line); color: var(--teal2); text-transform: uppercase; }
.thread-actions { display: flex; align-items: center; gap: 7px; }
.thread-actions form { margin: 0; }
.thread-overflow,
.post-overflow { position: relative; }
.thread-overflow summary,
.post-overflow summary { list-style: none; cursor: pointer; }
.thread-overflow summary::-webkit-details-marker,
.post-overflow summary::-webkit-details-marker { display: none; }
.thread-overflow-menu,
.post-overflow-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 35;
  width: 220px;
  padding: 7px;
  box-shadow: 0 20px 55px rgba(0,0,0,.5);
}
.thread-overflow-menu a,
.thread-overflow-menu button,
.post-overflow-menu a,
.post-overflow-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 39px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font: 700 9px var(--mono);
  text-transform: uppercase;
  cursor: pointer;
}
.thread-overflow-menu a:hover,
.thread-overflow-menu button:hover,
.post-overflow-menu a:hover,
.post-overflow-menu button:hover { color: var(--amber2); background: rgba(232,180,90,.07); }
.thread-overflow-menu form,
.post-overflow-menu form { margin: 0; }

.investigation-summary { padding: 16px 18px; margin: 0 0 12px; }
.investigation-summary-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 20px; margin: 10px 0 12px; }
.investigation-summary-grid span,
.thread-details-content span { display: block; color: var(--dim); font: 700 8px var(--mono); text-transform: uppercase; }
.investigation-summary-grid b { display: block; margin-top: 4px; font: 600 17px/1.3 var(--serif); }
.investigation-summary nav { display: flex; gap: 6px; }
.investigation-summary nav a { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--teal2); font: 700 8px var(--mono); text-transform: uppercase; }

.thread-details-panel { margin: 0 0 12px; overflow: visible; }
.thread-details-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 16px;
  list-style: none;
  color: var(--muted);
  font: 700 9px var(--mono);
  text-transform: uppercase;
  cursor: pointer;
}
.thread-details-panel > summary::-webkit-details-marker { display: none; }
.thread-details-panel[open] > summary { border-bottom: 1px solid var(--line); color: var(--amber2); }
.thread-details-panel[open] > summary span { transform: rotate(180deg); }
.thread-details-content { display: grid; grid-template-columns: repeat(6,1fr); }
.thread-details-content > div { padding: 13px 16px; border-right: 1px solid var(--line); }
.thread-details-content > div:last-child { border-right: 0; }
.thread-details-content b { display: block; margin-top: 5px; color: var(--text); font: 600 15px var(--serif); }
.thread-content { min-width: 0; }

.post-overflow > summary { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 7px; color: var(--dim); font: 700 15px/1 var(--mono); }
.post-overflow > summary:hover { color: var(--amber2); background: rgba(232,180,90,.06); }
.post-meta-primary { display: flex; align-items: center; gap: 9px; }
.post-reply-action { margin-left: auto; }
.opening-post { border-color: rgba(232,180,90,.28); }
.opening-post::before { background: linear-gradient(90deg,var(--amber),var(--teal),transparent 86%); }

.tab-count {
  position: absolute;
  top: 5px;
  left: calc(50% + 7px);
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: #160b0a;
  font: 700 8px/1 var(--mono);
}
.tabbar a { position: relative; }

@media (max-width: 980px) {
  .member-home-summary { grid-template-columns: 1fr; }
  .member-home-summary .welcome-actions { margin: 0; }
  .thread-details-content { grid-template-columns: repeat(3,1fr); }
  .thread-details-content > div:nth-child(3n) { border-right: 0; }
}

@media (max-width: 780px) {
  :root {
    --bar-h: 76px;
    --tab-h: 62px;
    --dim: #929db3;
    --muted: #b7c0d1;
  }

  body { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 6px); }
  .page { padding-top: 10px; }
  .top { gap: 8px; }
  .nav-toggle { width: 34px; height: 34px; flex-basis: 34px; border-radius: 8px; }
  .brand { font-size: 17px; gap: 8px; }
  .brandmark { width: 24px; height: 24px; flex-basis: 24px; }
  .brandmark::after { width: 12px; height: 5px; left: 7px; top: 8px; }
  .brand-copy { min-width: 0; }
  .brand-name { display: block; overflow: hidden; text-overflow: ellipsis; }

  .actions .alert-button { display: none; }
  .mobile-account-link {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid rgba(95,208,207,.45);
    border-radius: 50%;
    background: var(--deep);
  }
  .mobile-account-link.role-admin { border-color: rgba(232,180,90,.6); }
  .mobile-account-avatar { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: inherit; font: 700 11px var(--mono); }
  .mobile-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .mobile-account-link .alert-count { position: absolute; top: -4px; right: -4px; margin: 0; }
  .guest .actions .btn.primary { min-width: 58px; padding: 0 11px; }

  .drawer-me span { display: flex; flex-direction: column; }
  .drawer-me small { margin-top: 2px; color: var(--dim); font: 700 7px var(--mono); text-transform: uppercase; }
  .mobile-nav .drawer-label { padding-top: 12px; }
  .drawer-logout { padding-top: 7px; border-top: 1px solid var(--line); }

  .tabbar.member-tabbar { grid-template-columns: repeat(5,1fr); }
  .tabbar a { gap: 2px; font-size: 7px; letter-spacing: .035em; }
  .tabbar svg { width: 19px; height: 19px; }
  .tabbar a.compose svg { width: 31px; height: 31px; border-radius: 50%; }

  .glass-welcome { padding: 14px 15px; margin-bottom: 10px; }
  .welcome-copy h1 { font-size: 25px; }
  .welcome-copy p { margin: 5px 0 0; font-size: 15px; line-height: 1.45; }
  .welcome-actions { margin-top: 11px; }
  .welcome-actions .btn { min-height: 40px; }

  .member-home-summary { gap: 13px; padding: 16px; margin-bottom: 10px; }
  .member-home-copy h1 { font-size: 28px; }
  .member-home-copy p { font-size: 14px; line-height: 1.45; }
  .member-home-metrics { grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .member-home-metrics a { padding: 11px 8px; border-left: 1px solid var(--line); }
  .member-home-metrics a:first-child { border-left: 0; }
  .member-home-metrics b { font-size: 21px; }
  .member-home-metrics span { font-size: 6.5px; line-height: 1.35; }
  .member-home-summary .welcome-actions { display: grid; grid-template-columns: 1fr 1fr; }

  .home-filter-tabs,
  .discussion-filter-tabs { margin-bottom: 10px; padding: 0 1px 2px; }
  .home-filter-tabs a,
  .discussion-filter-tabs a { padding: 8px 10px; }

  .glass-forum-shell { gap: 10px; }
  .community-online-module,
  .community-stats-module { display: none; }
  .recent-publications-module { display: block; }
  .glass-utility-rail { order: 2; }
  .recent-publications-module .latest-post-stack > a:nth-child(n+6) { display: none !important; }

  .forum-list-heading { padding-bottom: 8px; }
  .forum-list-heading h2 { font-size: 23px !important; }
  .glass-category { border-radius: 12px; margin-bottom: 10px; }
  .glass-category-head { padding: 11px 13px; background: rgba(255,255,255,.018); }
  .glass-category-head h2 { color: var(--amber2); font: 700 14px/1.25 var(--serif) !important; text-transform: uppercase; letter-spacing: .025em; }
  .glass-category-head p { color: var(--muted); font-size: 11.5px !important; }
  .category-folder { color: var(--amber); opacity: .75; }
  .category-collapse { min-width: 30px; min-height: 30px; }

  .glass-forum-card-grid { background: transparent; gap: 0; }
  .glass-forum-card {
    display: block;
    border-bottom: 1px solid rgba(160,180,215,.10);
    background: rgba(255,255,255,.008);
  }
  .glass-forum-card:last-child { border-bottom: 0; }
  .glass-forum-card:active { background: rgba(95,208,207,.055); }
  .forum-card-primary { grid-template-columns: 27px minmax(0,1fr) 16px; gap: 9px; padding: 12px 13px 7px; }
  .forum-card-icon { width: 25px; height: 25px; font-size: 11px; }
  .forum-title-line h3 { color: var(--teal2); font-size: 20px !important; line-height: 1.15 !important; }
  .forum-title-line em { font-size: 6px; }
  .forum-card-copy p { margin: 4px 0 0 !important; color: var(--muted); font-size: 15px !important; line-height: 1.38; }
  .forum-card-chevron { display: block; }
  .forum-card-latest { display: block; min-height: 0; padding: 0 45px 11px 49px; border-top: 0; background: transparent; }
  .forum-card-latest b { color: var(--text); font: 600 12.5px/1.3 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .forum-card-latest span span,
  .empty-latest { margin-top: 2px; color: var(--dim) !important; font: 700 8px/1.35 var(--mono) !important; }

  .forum-page-hero { padding: 16px; margin-bottom: 10px; }
  .forum-page-hero h1 { font-size: 31px; }
  .forum-page-hero p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; }
  .forum-page-actions { width: 100%; }
  .forum-page-actions .btn { min-height: 38px; }
  .thread-toolbar { padding: 8px; margin-bottom: 9px; }

  .thread-card { display: block; margin-bottom: 0; border: 0; border-bottom: 1px solid rgba(160,180,215,.11); border-radius: 0; background: transparent; box-shadow: none; }
  .thread-card:first-child { border-top: 1px solid rgba(160,180,215,.11); }
  .thread-card:hover { transform: none; box-shadow: none; }
  .thread-card-main { grid-template-columns: 15px minmax(0,1fr) 16px; gap: 9px; padding: 12px 5px; }
  .thread-state { width: 9px; height: 9px; margin-top: 6px; border: 0; background: var(--teal); color: transparent; box-shadow: 0 0 9px rgba(95,208,207,.35); }
  .thread-state.featured { background: var(--amber); }
  .thread-labels { margin: 0 0 2px; }
  .thread-card-copy h2 { margin: 0 0 4px; color: var(--text); font-size: 18px; line-height: 1.24; }
  .thread-card-copy > p { display: none; }
  .thread-byline { color: var(--muted); font-size: 8px; line-height: 1.45; }
  .thread-mobile-status { display: block; margin-top: 4px; color: var(--dim); font: 700 8px var(--mono); }
  .thread-chevron { display: block; }
  .thread-card-stats { display: none; }

  .crumb { display: flex; gap: 5px; margin-bottom: 8px; color: var(--muted); font-size: 8px; }
  .editorial-thread-head { gap: 10px; padding: 0 0 10px; }
  .thread-head h1 { margin: 5px 0 7px; font-size: clamp(32px,9vw,36px); line-height: 1.06; }
  .thread-title-meta { flex-wrap: wrap; gap: 6px; font-size: 8px; }
  .thread-primary-state { padding-left: 7px; }
  .thread-actions { gap: 6px; }
  .thread-actions .btn { min-height: 37px; padding: 0 11px; font-size: 8px; }
  .thread-overflow summary.btn { width: 42px; padding: 0; }
  .thread-overflow-menu { position: fixed; left: var(--gut); right: var(--gut); top: auto; bottom: calc(var(--tab-h) + var(--safe-b) + 8px); width: auto; }

  .investigation-summary { padding: 13px 14px; margin-bottom: 9px; border-color: rgba(95,208,207,.22); }
  .investigation-summary-grid { grid-template-columns: 1fr; gap: 9px; margin: 8px 0 10px; }
  .investigation-summary-grid b { font-size: 15px; }
  .investigation-summary nav { overflow-x: auto; }
  .investigation-summary nav a { flex: 0 0 auto; }

  .thread-details-panel { margin-bottom: 8px; border-radius: 10px; box-shadow: none; background: rgba(255,255,255,.012); }
  .thread-details-panel > summary { min-height: 42px; padding: 0 13px; }
  .thread-details-content { grid-template-columns: repeat(3,1fr); }
  .thread-details-content > div { padding: 11px; }
  .thread-details-content > div:nth-child(3n) { border-right: 0; }
  .thread-details-content b { font-size: 14px; }
  .live-thread-bar { display: none; }

  .discussion-post { margin-bottom: 9px; border-radius: 10px; box-shadow: none; }
  .discussion-post:not(.opening-post) { border-color: rgba(150,165,200,.11); }
  .opening-post { border-color: rgba(232,180,90,.22); }
  .userbox { padding: 9px 12px; border-bottom-color: rgba(150,165,200,.10); }
  .userbox .avatar,
  .userbox .avatar-image { width: 38px; height: 38px; flex-basis: 38px; }
  .userbox h3 { color: var(--amber2); font-size: 16px; }
  .userbox .role { margin-top: 2px; color: var(--muted); font-size: 7px; }
  .role:has(.role-badge) { display: block; }
  .postmeta { flex-direction: row; align-items: center; justify-content: space-between; min-height: 38px; padding: 4px 9px 4px 13px; border-bottom: 0; }
  .post-meta-primary { color: var(--muted); font-size: 8px; }
  .post-number { color: var(--dim); }
  .post-overflow-menu { position: fixed; left: var(--gut); right: var(--gut); top: auto; bottom: calc(var(--tab-h) + var(--safe-b) + 8px); width: auto; }
  .post-overflow-menu .post-tools-drawer { position: fixed; inset: 8vh var(--gut) calc(var(--tab-h) + var(--safe-b) + 8px); z-index: 100; overflow-y: auto; }
  .prose { padding: 5px 14px 15px; color: var(--text); font-size: clamp(18px,4.8vw,20px); line-height: 1.55; }
  .prose p { margin: 0 0 1em; }
  .post-edit-note,
  .post-moderation-notice { margin: 0 13px 8px; }
  .post-actions { min-height: 45px; padding: 5px 8px; border-top-color: rgba(150,165,200,.10); background: rgba(255,255,255,.008); }
  .post-actions .reactions { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; }
  .post-actions .reactions::-webkit-scrollbar { display: none; }
  .post-actions .reaction { min-height: 34px; padding: 0 8px; }
  .post-actions .reaction span { font-size: 7px; }
  .post-reply-action { min-height: 34px !important; color: var(--teal2) !important; }
  .reaction-empty { color: var(--muted); }

  .editorial-page { padding: 20px 17px; }
  .editorial-page h1 { font-size: 34px; }
  .editorial-lead { font-size: 17px; }
  .editorial-rules { grid-template-columns: 1fr; }
  .editorial-rules article { padding: 16px; }

  .rail-fab { display: none !important; }
}

@media (max-width: 360px) {
  .brand-name { display: none; }
  .brand-short { display: block; color: #fff; font: 700 17px var(--serif); }
  .brandmark { width: 22px; height: 22px; flex-basis: 22px; }
  .guest .actions .btn.primary { min-width: 52px; padding: 0 9px; }
  .tabbar a { font-size: 6.5px; }
  .member-home-metrics span { font-size: 6px; }
}