/* WARDOGS NOW app-like mobile shell.
   Public pages only. The site administrator console does not load this file. */

.mobile-shell-root,
.mobile-foot-links { display:none; }

@media (max-width:1024px) {
  body.site {
    --mobile-gutter:16px;
    --mobile-panel-pad:24px;
    --mobile-app-bar:60px;
    --mobile-tabbar:68px;
    --mobile-safe-bottom:env(safe-area-inset-bottom,0px);
    --mobile-visible-height:100dvh;
    min-width:320px;
    overflow-x:clip;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  body.site .shell,
  body.site.support-site .wrap {
    width:100%;
    max-width:none;
    padding-inline:var(--mobile-gutter);
  }
  body.site .shell :is(div,section,article,header,aside,nav,form) { min-width:0; }
  body.site p,
  body.site li,
  body.site dd { max-width:100%; overflow-wrap:break-word; }

  body.site .site-head {
    position:sticky;
    z-index:900;
    top:0;
    min-height:var(--mobile-app-bar);
    border-bottom:1px solid var(--line);
    background:#0b0e10;
  }

  body.site .site-desktop-head,
  body.site .site-mobile-nav { display:none!important; }

  .mobile-shell-root { display:block; }
  .mobile-app-bar {
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px;
    align-items:center;
    min-height:var(--mobile-app-bar);
    padding:0 10px;
    background:#0b0e10;
  }
  .mobile-app-brand,
  .mobile-app-back,
  .mobile-app-bar-spacer {
    display:grid;
    width:44px;
    height:44px;
    place-items:center;
  }
  .mobile-app-brand { justify-content:start; }
  .mobile-app-brand .wd-logo { width:28px!important; max-width:28px; height:28px!important; overflow:hidden; }
  .mobile-app-back {
    border:0;
    color:var(--text-hi);
    text-decoration:none;
  }
  .mobile-app-back svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-app-title {
    min-width:0;
    overflow:hidden;
    color:var(--text-hi);
    font:600 15px/1.2 var(--sans);
    letter-spacing:.01em;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body.site:has(.mobile-shell-root[data-mode="standard"]) {
    padding-bottom:calc(var(--mobile-tabbar) + var(--mobile-safe-bottom));
  }
  body.site:has(.mobile-shell-root[data-mode="workspace"]),
  body.site:has(.mobile-shell-root[data-mode="entry"]) { padding-bottom:0; }

  .mobile-shell-root[data-mode="standard"] .mobile-app-title { text-align:left; padding-left:10px; }
  .mobile-shell-root[data-mode="workspace"] .mobile-app-bar,
  .mobile-shell-root[data-mode="entry"] .mobile-app-bar { border-bottom:0; }

  .mobile-tabbar {
    position:fixed;
    z-index:920;
    right:0;
    bottom:0;
    left:0;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    min-height:calc(var(--mobile-tabbar) + var(--mobile-safe-bottom));
    padding:0 4px var(--mobile-safe-bottom);
    border-top:1px solid var(--line2);
    background:#101418;
  }
  .mobile-tabbar a,
  .mobile-tabbar button {
    position:relative;
    display:flex;
    min-width:0;
    min-height:var(--mobile-tabbar);
    padding:8px 2px 6px;
    align-items:center;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--text-dim);
    font:500 10px/1.1 var(--sans);
    letter-spacing:0;
    text-align:center;
    text-decoration:none;
    text-transform:none;
    touch-action:manipulation;
  }
  .mobile-tabbar a::before,
  .mobile-tabbar button::before {
    content:"";
    position:absolute;
    top:0;
    right:12px;
    left:12px;
    height:2px;
    background:transparent;
  }
  .mobile-tabbar svg {
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .mobile-tabbar .is-active { background:#171d22; color:var(--accent); }
  .mobile-tabbar .is-active::before { background:var(--accent); }
  .mobile-tabbar small {
    position:absolute;
    top:4px;
    left:50%;
    width:7px;
    height:7px;
    overflow:hidden;
    margin-left:7px;
    border-radius:50%;
    background:var(--accent);
    color:transparent;
    font-size:0!important;
  }

  body.mobile-keyboard-open .mobile-tabbar { display:none; }
  body.mobile-keyboard-open:has(.mobile-shell-root[data-mode="standard"]) { padding-bottom:0; }

  .mobile-more-layer {
    position:fixed;
    z-index:1200;
    inset:0;
  }
  .mobile-more-layer[hidden] { display:none!important; }
  .mobile-sheet-backdrop {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    background:rgba(2,4,5,.72);
  }
  .mobile-more-sheet {
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    display:flex;
    max-height:min(82dvh,720px);
    flex-direction:column;
    border:1px solid var(--line2);
    border-bottom:0;
    border-radius:12px 12px 0 0;
    background:#101418;
    box-shadow:0 -18px 48px rgba(0,0,0,.38);
  }
  .mobile-more-sheet > header {
    display:flex;
    min-height:72px;
    padding:18px 20px;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border-bottom:1px solid var(--line);
  }
  .mobile-more-sheet > header span,
  .mobile-more-sheet section h3 {
    display:block;
    margin:0 0 4px;
    color:var(--accent);
    font:600 11px/1.2 var(--technical,var(--sans));
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .mobile-more-sheet > header h2 {
    margin:0;
    font-size:22px;
    line-height:1.1;
    text-transform:none;
  }
  .mobile-more-sheet > header button {
    display:grid;
    width:44px;
    min-width:44px;
    height:44px;
    padding:0;
    place-items:center;
    border:1px solid var(--line2);
    border-radius:4px;
    background:#171d22;
    color:var(--text-hi);
  }
  .mobile-more-sheet > header svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
  .mobile-more-scroll {
    overflow:auto;
    padding:8px 20px calc(24px + var(--mobile-safe-bottom));
    overscroll-behavior:contain;
  }
  .mobile-more-sheet section { padding:18px 0 12px; border-bottom:1px solid var(--line); }
  .mobile-more-sheet section > a {
    display:flex;
    min-height:48px;
    padding:12px 0;
    align-items:center;
    color:var(--text-hi);
    font:500 16px/1.35 var(--sans);
    text-decoration:none;
  }
  .mobile-more-sheet section > a + a { border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent); }
  .mobile-more-sheet label { display:grid; gap:8px; color:var(--text-mid); font-size:14px; }
  .mobile-more-sheet select { width:100%; }
  .mobile-signin,
  .mobile-signout button {
    display:flex;
    width:100%;
    min-height:48px;
    margin-top:20px;
    align-items:center;
    justify-content:center;
    border:1px solid var(--accent);
    border-radius:4px;
    background:var(--accent);
    color:#0b0e10;
    font:600 15px/1 var(--sans);
    text-decoration:none;
  }
  .mobile-signout { margin:0; }
  body.mobile-sheet-open { overflow:hidden; touch-action:none; }

  /* Mobile content rhythm */
  body.site > section,
  body.site > main > section { padding-block:40px; }
  body.site h1 { max-width:100%; overflow-wrap:break-word; font-size:clamp(2.25rem,10vw,3.25rem); line-height:1.04; }
  body.site h2 { max-width:100%; overflow-wrap:break-word; font-size:clamp(1.75rem,7vw,2.75rem); }
  body.site h3 { font-size:clamp(1.15rem,5.5vw,1.5rem); }
  body.site p,
  body.site li,
  body.site dd { line-height:1.62; }
  body.site .eyebrow { font-size:11px; letter-spacing:.14em; }

  body.site .panel:not(.tight),
  body.site .card,
  body.site .tile,
  body.site .pulse-panel,
  body.site .manage-panel,
  body.site .community-manage-panel,
  body.site .support-panel,
  body.site .poll-compose,
  body.site .poll-library,
  body.site .pulse-page-head,
  body.site .pulse-community-head,
  body.site .hq-command-head,
  body.site .community-manage-head,
  body.site .pulse-console-section,
  body.site .pulse-editor,
  body.site .poll-builder,
  body.site .pulse-library,
  body.site .onboarding-manage-card,
  body.site .hq-readiness,
  body.site .hq-brief,
  body.site .hq-lower-grid > .panel,
  body.site .hq-content-grid > .panel,
  body.site .lfg-card,
  body.site .lfg-builder,
  body.site .manage-section > .panel,
  body.site .manage-subsection > .panel,
  body.site .manage-form,
  body.site .manage-library,
  body.site .manage-command-card,
  body.site .manage-access-card,
  body.site .manage-application,
  body.site .manage-compact-form,
  body.site .forum-hero,
  body.site .forum-compose,
  body.site .forum-reply,
  body.site .op-command-header,
  body.site .ops-editor-panel,
  body.site .op-briefing,
  body.site.support-site .card,
  body.site .community-access-dialog { padding:var(--mobile-panel-pad); }

  body.site input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body.site select,
  body.site textarea { width:100%; max-width:100%; min-height:48px; font-size:16px!important; }
  body.site textarea { min-height:132px; }
  body.site .b,
  body.site button,
  body.site [role="button"] { min-height:44px; touch-action:manipulation; }
  body.site form { min-width:0; }
  body.site img,
  body.site video,
  body.site iframe { max-width:100%; }

  /* Dialogs become dependable bottom sheets without covering their own actions. */
  body.site dialog:not(.lightbox-dialog),
  body.site .legal-reader,
  body.site .approval-welcome-modal,
  body.site .community-access-modal {
    padding:0;
  }
  body.site .legal-reader-dialog,
  body.site .approval-welcome-dialog,
  body.site .community-access-dialog,
  body.site .auth-action-dialog {
    width:100%;
    max-width:none;
    max-height:calc(var(--mobile-visible-height) - 24px);
    margin:auto 0 0;
    padding:var(--mobile-panel-pad);
    overflow:auto;
    border-radius:12px 12px 0 0;
    overscroll-behavior:contain;
  }

  /* Page families */
  body.site .hero,
  body.site .landing-hero { min-height:calc(100dvh - var(--mobile-app-bar)); }
  body.site .hero .shell,
  body.site .landing-hero .shell { min-height:inherit; align-items:end; padding-bottom:48px; }
  body.site .hero-actions,
  body.site .landing-actions,
  body.site .cta-row,
  body.site .form-actions { display:flex; flex-wrap:wrap; gap:10px; }
  body.site .hero-actions .b,
  body.site .landing-actions .b { flex:1 1 160px; }

  body.site .server-grid,
  body.site .community-grid,
  body.site .creator-grid,
  body.site .news-grid,
  body.site .search-results,
  body.site .hq-content-grid,
  body.site .hq-lower-grid,
  body.site .manage-grid,
  body.site .ops-grid,
  body.site .poll-grid,
  body.site .support-grid,
  body.site .account-grid,
  body.site .profile-grid { grid-template-columns:minmax(0,1fr)!important; }

  body.site .community-subnav,
  body.site .category-filter,
  body.site .armory-nav,
  body.site .manage-tabs,
  body.site .rcon-tabs {
    overflow-x:auto;
    max-width:100%;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
  }
  body.site .community-subnav::-webkit-scrollbar,
  body.site .category-filter::-webkit-scrollbar,
  body.site .armory-nav::-webkit-scrollbar,
  body.site .manage-tabs::-webkit-scrollbar,
  body.site .rcon-tabs::-webkit-scrollbar { display:none; }

  body.site .mobile-table-scroll {
    overflow-x:auto;
    max-width:100%;
    border:1px solid var(--line);
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  body.site .mobile-table-scroll table { width:max-content; min-width:100%; }
  body.site .mobile-record-table table,
  body.site table.mobile-record-table { display:block; }
  body.site .mobile-record-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  body.site .mobile-record-table tbody,
  body.site .mobile-record-table tr,
  body.site .mobile-record-table td { display:block; width:100%; }
  body.site .mobile-record-table tr { padding:10px 16px; border-bottom:1px solid var(--line); }
  body.site .mobile-record-table td {
    display:grid;
    grid-template-columns:minmax(92px,36%) minmax(0,1fr);
    gap:12px;
    padding:8px 0;
    border:0;
    overflow-wrap:anywhere;
  }
  body.site .mobile-record-table td::before {
    content:attr(data-label);
    color:var(--text-dim);
    font:600 11px/1.4 var(--technical,var(--sans));
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  body.site .forum-post,
  body.site .thread-post,
  body.site .notification-item,
  body.site .search-result,
  body.site .server-card { overflow-wrap:anywhere; }
  body.site .community-hero,
  body.site .com-hero,
  body.site .profile-hero { min-height:0; }
  body.site .community-actions,
  body.site .member-actions,
  body.site .server-actions { flex-wrap:wrap; }
  body.site .community-actions .b,
  body.site .member-actions .b,
  body.site .server-actions .b { flex:1 1 140px; }
  body.site .community-index-head { align-items:stretch!important; flex-direction:column; }
  body.site .community-index-head .b { width:100%; }
  body.site .matcher-invite > div { width:100%; min-width:0; }
  body.site .matcher-invite p { width:100%; }

  body.site .flash,
  body.site .notice,
  body.site .alert { margin-block:14px; padding:16px; }

  /* Compact footer on every page except the landing page. */
  .mobile-foot-links { display:none; }
  body.site:has(.site-foot-mobile-compact) .site-sponsor { display:none; }
  body.site .site-foot-mobile-compact {
    padding:20px 0 calc(18px + var(--mobile-safe-bottom));
    border-top:1px solid var(--line);
  }
  body.site .site-foot-mobile-compact .foot-command,
  body.site .site-foot-mobile-compact .foot-resources,
  body.site .site-foot-mobile-compact .foot-socials,
  body.site .site-foot-mobile-compact .foot-lower { display:none; }
  body.site .site-foot-mobile-compact .mobile-foot-links {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }
  body.site .mobile-foot-links strong {
    color:var(--text-dim);
    font:600 10px/1.4 var(--technical,var(--sans));
    letter-spacing:.05em;
  }
  body.site .mobile-foot-links nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:14px; }
  body.site .mobile-foot-links a { color:var(--text-mid); font:500 12px/1.4 var(--sans); text-decoration:none; }
  body.site .site-foot-mobile-full { padding:44px 0 calc(24px + var(--mobile-safe-bottom)); }
  body.site .site-foot-mobile-full .foot-command,
  body.site .site-foot-mobile-full .foot-resources,
  body.site .site-foot-mobile-full .foot-lower { gap:24px; }
  body.site .site-foot-mobile-full .foot-resources { grid-template-columns:1fr 1fr; }
}

@media (max-width:560px) {
  body.site { --mobile-gutter:16px; --mobile-panel-pad:20px; }
  body.site .site-foot-mobile-full .foot-resources { grid-template-columns:1fr; }
  body.site .site-foot-mobile-compact .mobile-foot-links { align-items:flex-start; flex-direction:column; }
  body.site .mobile-foot-links nav { justify-content:flex-start; }
  body.site .form-actions > .b,
  body.site .form-actions > button,
  body.site .cta-row > .b { width:100%; flex:1 1 100%; }
  body.site .filters-head { align-items:flex-start; flex-direction:column; }
  body.site .filters-state { max-width:100%; white-space:normal; }
}

@media (prefers-reduced-motion:reduce) {
  .mobile-more-sheet,
  .mobile-tabbar,
  .mobile-app-bar { scroll-behavior:auto; transition:none!important; animation:none!important; }
}
