/* PsychicTally — mobile-first finishing pass.
   Loaded LAST so it can resolve earlier breakpoint collisions without
   changing the desktop design system or visual themes. */
.sidebar-mobile-close,.mobile-appearance-action{display:none}

/* Reflow, rather than clip, long usernames, psychic names and post text. */
.thread-heading,.thread-heading h1,.reader-header,.reader-discussion-feature,
.post-body,.reading-prose,.post-header,.review-card,.chat-recipient,
.thread-row>div,.page-head,.profile-summary,.form-card,
.reader-selected-name{min-width:0;overflow-wrap:anywhere}
img,video,iframe{max-width:100%}

@media (max-width:760px){
  :root{--mobile-nav-content-height:64px}
  body{font-size:.9375rem;line-height:1.65}
  /* The router focuses main after navigation; don't draw a giant page outline.
     Links, form fields, dialogs and the skip link retain visible focus. */
  #main:focus{outline:none}
  body.menu-open{overflow:hidden}
  .workspace,html[data-page="thread"] .workspace{
    max-width:100%;min-width:0;margin-inline:0;
    padding:23px 16px calc(104px + env(safe-area-inset-bottom,0px));
  }
  #app,#main,.workspace,.content-columns,.content-columns>div,.split-card>div,
  .directory-grid,.reader-related,.thread-reading-layout,.thread-posts,
  .post-body,.reading-prose{min-width:0;max-width:100%}

  /* A usable iPhone header at 320px, without hiding core navigation. */
  .global-header{
    box-sizing:border-box;display:flex;gap:5px;
    padding-inline:12px;min-width:0;width:100%;
  }
  .global-header .header-leading{min-width:0;flex:1 1 auto;gap:5px}
  .global-header .header-brand{display:block;min-width:0;overflow:hidden;
    white-space:nowrap;text-overflow:ellipsis;font-size:1.25rem}
  .header-brand span{font-size:inherit}
  .global-header .mobile-menu{width:44px;height:44px;min-width:44px;flex-shrink:0}
  .global-header .top-actions{flex-shrink:0;gap:0}
  .global-header .top-actions>.icon-btn{min-width:40px;width:40px;height:44px}
  .global-header .top-actions .account-trigger .avatar{height:32px;width:32px}
  .global-header .top-actions .header-appearance{display:none}
  .sidebar-mobile-close{display:inline-grid!important;place-items:center;
    width:44px;height:44px;min-width:44px;margin-left:auto}
  .mobile-appearance-action{display:flex;align-items:center;gap:12px;width:100%;
    text-align:left;min-height:44px;padding:10px 11px;
    border-radius:9px;font-size:.875rem;color:var(--ink)}
  .mobile-appearance-action .icon{height:18px;width:18px}
  .contextual-rail{
    padding-top:max(16px,env(safe-area-inset-top,0px));
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
    max-width:min(300px,88vw);height:100vh;height:100dvh;
  }
  .contextual-rail .sidebar-scrolling{min-height:0;overscroll-behavior:contain}
  .contextual-rail .sidebar-bottom{flex-shrink:0}
  .contextual-rail .nav-item{font-size:.925rem;min-height:44px}

  /* Bottom navigation respects the iPhone home indicator and touch size. */
  .bottom-nav{
    height:calc(var(--mobile-nav-content-height) + env(safe-area-inset-bottom,0px));
    min-height:var(--mobile-nav-content-height);padding:3px 4px env(safe-area-inset-bottom,0px);
    grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;
  }
  .bottom-nav a{
    min-height:56px;min-width:0;padding:4px 1px;gap:4px;
    font-size:.6875rem;line-height:1.1;white-space:nowrap;
    border-radius:9px;
  }
  .bottom-nav .icon{width:21px;height:21px}
  .bottom-nav .compose-mobile{display:flex;width:auto;height:auto;min-width:0;min-height:56px;
    margin:0;border-radius:9px;background:var(--lavender);color:var(--brand)}
  .bottom-nav .compose-mobile.active{background:var(--brand);color:var(--on-brand)}
  .bottom-nav .compose-mobile .icon{width:23px;height:23px}
  .bottom-nav a:focus-visible{outline-offset:-3px}
  #toast{bottom:calc(var(--mobile-nav-content-height) + env(safe-area-inset-bottom,0px) + 12px);
    max-width:calc(100vw - 28px);font-size:.8125rem;line-height:1.5}

  /* Keep community browsing comfortable, not miniature. */
  .page-head{gap:13px;flex-wrap:wrap}
  .page-head h1{font-size:clamp(1.65rem,6.5vw,2.2rem);line-height:1.22}
  .page-head p,.hero p,.announcement,.reader-card p,.reader-header p,
  .reader-discussion-feature p,.thread-preview,.section-title .text-link,
  .empty-state p,.info-note{font-size:.875rem;line-height:1.65}
  .section-title{align-items:flex-start;flex-wrap:wrap;gap:8px 15px}
  .section-title h2{font-size:1.2rem;line-height:1.3}
  .thread-row{grid-template-columns:42px minmax(0,1fr);gap:11px;padding:18px 0}
  .thread-title{font-size:1rem;line-height:1.5}
  .thread-preview{margin-top:7px;-webkit-line-clamp:2}
  .thread-meta{font-size:.75rem;gap:6px;line-height:1.5;flex-wrap:wrap}
  .thread-tags .pill{font-size:.75rem}
  .thread-stats{font-size:.75rem;gap:10px}
  .thread-stats .icon-btn{height:44px;width:44px}
  .category-row h3{font-size:1rem}
  .category-row p{font-size:.825rem}
  .platform-card strong{font-size:.8rem}
  .platform-card span{font-size:.75rem}
  .reader-card h3{font-size:1.35rem}
  .reader-card .card-foot{font-size:.75rem}
  .reader-card .pill{font-size:.75rem}
  .reader-header{padding:20px 17px}
  .reader-header .row{row-gap:14px}
  .reader-header .btn,.reader-discussion-feature .btn{min-height:44px}
  .reader-discussion-feature{gap:16px}
  .reader-discussion-feature>div{min-width:0;flex:1 1 220px}
  .reader-related .thread-row{margin-top:0}
  .tabs{gap:20px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex-shrink:0;scroll-snap-align:start;min-height:48px;font-size:.875rem}
  .filter-bar{gap:10px}
  .filter-bar .search-input,.filter-bar>input[type=search]{min-width:0;flex:1 1 100%}
  .filter-bar select{min-width:0;max-width:none;flex:1 1 135px;font-size:1rem}
  .filter-bar button{min-height:44px}

  /* Larger, reachable forum controls and readable posts. */
  .thread-reading-layout .breadcrumb{font-size:.8125rem;line-height:1.6;flex-wrap:wrap}
  .thread-heading{margin-bottom:23px;padding-bottom:24px}
  .thread-heading h1{font-size:clamp(1.7rem,6.2vw,2.1rem);line-height:1.28}
  .thread-heading-meta,.thread-category-link,.thread-labels{font-size:.875rem}
  .thread-heading-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:9px;margin-top:20px}
  .thread-heading-actions .btn{min-height:44px;flex:1 1 calc(50% - 9px);
    white-space:normal;text-align:center;justify-content:center;
    font-size:.875rem;line-height:1.4;padding:10px 12px}
  .thread-heading-actions .btn.primary{flex-basis:100%}
  .thread-heading-actions .thread-share{height:44px;width:44px;flex-shrink:0}
  .reading-navigation{font-size:.875rem}
  .reading-jump-links{gap:7px 15px}
  .reading-jump-links a,.reading-jump-links button{min-height:40px;font-size:.8125rem}
  .forum-post{padding:20px 16px}
  .post-body,.reading-prose{font-size:1rem;line-height:1.77}
  .post-header{flex-wrap:wrap;gap:9px}
  .post-byline{font-size:.8125rem;line-height:1.5}
  .post-actions{gap:9px;align-items:stretch;margin-top:22px}
  .post-primary-actions,.post-secondary-actions{flex-wrap:wrap;gap:7px}
  .post-actions .btn,.post-actions .icon-btn{min-height:44px;font-size:.8125rem}
  .post-actions .icon-btn{min-width:44px;width:44px}
  .reply-box{padding:21px 16px}
  .reply-heading{gap:10px;flex-wrap:wrap}
  .reply-heading h2{font-size:1.55rem}
  .editor-toolbar{gap:3px;padding:7px 6px;flex-wrap:wrap}
  .editor-toolbar button{min-width:44px;min-height:44px}
  .editor-toolbar button.text-link{padding-inline:10px}
  .editor-text{font-size:1rem;padding:15px;min-height:195px;max-width:100%}

  /* iOS Safari zooms inputs below 16px; keep controls legible. */
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]),
  textarea,select,.reader-picker input[type=search]{
    font-size:16px;max-width:100%;
  }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=file]),
  select{min-height:44px}
  .reader-picker{isolation:isolate;max-width:100%}
  .reader-picker-results{position:relative;top:auto;left:auto;right:auto;
    max-height:min(35vh,230px);max-height:min(35dvh,230px);
    margin-top:6px;box-shadow:none;overscroll-behavior:contain}
  .reader-result{min-height:50px}
  .reader-selected{min-height:50px}
  .reader-suggest{min-height:40px;text-align:left}
  .form-card,.panel{max-width:100%}
  .form-card{padding:21px 16px}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .form-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .form-actions>div,.form-actions>.row{width:100%;max-width:100%}
  .form-actions>.row{display:flex;flex-wrap:wrap;gap:9px}
  .form-actions>.row .btn{flex:1 1 125px}
  .form-actions select{width:100%;max-width:none;font-size:1rem}
  .form-actions>.btn,.form-actions>button{min-height:44px;width:100%;justify-content:center}
  .checkline{min-height:40px}
  .stepper{gap:4px}
  .step{font-size:.75rem}

  /* Staff tools and messaging should remain usable without sideways page scrolling. */
  .table-wrap{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch}
  .data-table{min-width:550px}
  .social-messages{min-width:0;max-width:100%}
  .social-messages .inbox-item{min-height:58px}
  .chat-header{gap:10px}
  .chat-form .message-compose{display:flex;min-width:0;gap:8px}
  .chat-form textarea{min-width:0;width:100%;font-size:16px}
  .chat-send{flex:0 0 auto;min-height:44px}
  .social-messages .bubble{overflow-wrap:anywhere}
  .settings-nav{max-width:100%;-webkit-overflow-scrolling:touch}
  .settings-nav .nav-item{font-size:.875rem;min-height:44px}
  .removed-thread{padding:20px 16px}
  .staff-action-list .btn{min-height:44px}

  /* Comfortable modals inside the visual viewport, including iOS keyboard/safe areas. */
  dialog{
    width:calc(100% - 20px);max-width:560px;max-height:calc(100vh - 32px);
    max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px));
    padding:19px 17px 22px;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .dialog-head{position:sticky;top:-19px;z-index:2;padding:9px 0 12px;
    background:var(--surface);gap:12px;align-items:flex-start}
  .dialog-head h2{font-size:1.45rem;line-height:1.3}
  .dialog-head .icon-btn{margin:0;width:44px;height:44px;flex-shrink:0}
  dialog .btn{min-height:44px}
  dialog .form-actions{flex-direction:row;flex-wrap:wrap}
  dialog .form-actions .btn{flex:1 1 120px}
  dialog .field{min-width:0}

  .pagination{gap:12px}
  .page-number{min-width:44px;min-height:44px}
  .footer{font-size:.8125rem;line-height:1.7}
  .footer nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
}

@media(max-width:370px){
  .workspace,html[data-page="thread"] .workspace{padding-inline:12px}
  .global-header{padding-inline:7px;gap:2px}
  .global-header .header-brand{font-size:1.07rem}
  .global-header .mobile-menu{width:40px;min-width:40px}
  .global-header .top-actions>.icon-btn{width:37px;min-width:37px}
  .bottom-nav a{font-size:.635rem;letter-spacing:-.012em}
  .thread-heading-actions .btn{font-size:.8125rem;padding-inline:8px}
  .forum-post{padding-inline:13px}
  .post-primary-actions,.post-secondary-actions{gap:3px}
  .post-actions .btn{padding-inline:9px}
  .presence-card{padding:17px 14px}
}

@media (min-width:761px){
 .sidebar-mobile-close,.mobile-appearance-action{display:none!important}
}
@media (prefers-reduced-motion:reduce){
 .bottom-nav,.contextual-rail{transition:none!important}
}

/* Mobile thread feed repair — screenshot QA found stretched stats on Activity.
   The desktop thread-stats layout is column-based; it must be reset explicitly
   when the stats move below the thread copy into a second grid row. */
@media (max-width:760px){
  .thread-row{
    grid-template-columns:42px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:12px;
    row-gap:0;
    align-content:start;
    align-items:start;
    min-height:0;
    height:auto;
    padding:14px 0 16px;
  }
  .thread-row > a:first-child{
    grid-column:1;
    grid-row:1;
    align-self:start;
    display:block;
    width:42px;
    height:42px;
  }
  .thread-row > div:nth-child(2){
    grid-column:2;
    grid-row:1;
    min-width:0;
    align-self:start;
  }
  .thread-row > .thread-stats{
    grid-column:2;
    grid-row:2;
    min-width:0;
    width:100%;
    height:auto;
    min-height:44px;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-start;
    align-self:start;
    gap:13px;
    padding:0;
    margin:7px 0 0;
    font-size:.8125rem;
    line-height:1.4;
  }
  .thread-row .thread-stats .row{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    flex:0 0 auto;
    gap:5px;
    min-height:36px;
    white-space:nowrap;
  }
  .thread-row .thread-stats .icon{height:17px;width:17px}
  .thread-row .thread-stats .icon-btn{
    width:44px;
    height:44px;
    min-width:44px;
    flex:0 0 44px;
    margin:0 0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  /* Small contributor avatars duplicate the byline, get clipped by the
     avatar rules, and are disproportionate to the mobile feed's purpose. */
  .thread-row .recent-avatar-cluster{display:none}
  .thread-row .thread-tags{margin:0 0 7px;gap:7px}
  .thread-row .thread-title{display:inline;line-height:1.45}
  .thread-row .thread-preview{
    margin:6px 0 0;
    max-width:100%;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
    overflow-wrap:anywhere;
  }
  .thread-row .thread-meta{
    margin:8px 0 0;
    display:flex;
    gap:5px 8px;
    align-items:center;
    flex-wrap:wrap;
  }
  .compact .thread-row{padding:13px 0 15px}
  .compact .thread-row .thread-preview{display:none}
}
@media (max-width:370px){
  .thread-row{grid-template-columns:38px minmax(0,1fr);gap:0 10px;padding:15px 0 17px}
  .thread-row > a:first-child{height:38px;width:38px}
  .thread-row > a:first-child .avatar{height:38px;width:38px}
  .thread-row > .thread-stats{gap:10px;margin-top:7px}
  .thread-row .thread-stats .row{font-size:.75rem}
  .thread-row .thread-preview{-webkit-line-clamp:1}
  .thread-row .thread-tags{margin-bottom:5px}
}


/* Brand-specific marks are tied to category IDs, not their order in the grid. */
.platform-card .platform-icon{font-family:var(--serif);font-weight:650;letter-spacing:.015em;line-height:1.2}
.platform-card strong{overflow-wrap:anywhere}
.forum-guide-link{padding:5px 0 3px}
.forum-guide-link .text-link{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;line-height:1.5;font-size:.875rem}
@media(max-width:760px){
 .platform-card .platform-icon{font-size:1.15rem;margin-bottom:14px}
 .platform-card strong{line-height:1.4}
 .forum-guide-link{margin:4px 0 11px}
 .forum-guide-link .text-link{min-height:44px;font-size:.8125rem}
 .category-row>div:nth-child(2){min-width:0}
 .category-row p{line-height:1.6;overflow-wrap:anywhere}
}


/* Moderation & Trust Center: comfortable at all breakpoints. */
.trust-navigation{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:4px 0 20px}
.trust-navigation a{display:inline-flex;align-items:center;min-height:42px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;font-size:.87rem}
.trust-navigation a:hover{background:var(--surface)}
.trust-support-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,400px);gap:22px;align-items:start}
.trust-support-layout>*{min-width:0}
.trust-ticket{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:16px;margin-bottom:11px;overflow-wrap:anywhere}
.trust-ticket .row{align-items:center;gap:9px}
.trust-ticket p{margin:7px 0 0}
.trust-conversation{max-width:800px;margin-inline:auto}
.trust-message{padding:19px;margin:12px 0;overflow-wrap:anywhere}
.trust-message-body{margin:14px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}
.trust-staff-note{border-left:4px solid var(--brand);background:var(--lavender);padding:17px;margin:13px 0;overflow-wrap:anywhere}
.trust-staff-note p{white-space:pre-wrap}
.trust-support-layout .form-card,.trust-conversation .form-card{min-width:0}
@media(max-width:850px){.trust-support-layout{grid-template-columns:1fr}}
@media(max-width:760px){
 .trust-navigation{gap:6px}
 .trust-navigation a{font-size:.8rem;min-height:44px;padding:9px 10px}
 .trust-message{padding:14px 15px}
 .trust-support-layout{gap:18px}
 .trust-support-layout input,.trust-conversation input,
 .trust-support-layout textarea,.trust-conversation textarea{max-width:100%;min-width:0}
}