/* Cloud mobile edition; desktop and the Windows companion keep their existing UI. */
#mobile-board[hidden], .mobile-screen[hidden] { display: none !important; }
.mobile-board { display: none; }

@media (max-width: 700px) {
  body.mobile-board-active {
    --mobile-nav-height: 82px;
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
    overflow-x: clip;
  }
  body.mobile-board-active #mobile-board { display: block; }
  body.mobile-board-active #main-content > :not(#mobile-board) { display: none !important; }
  body.mobile-board-active #mobile-board [hidden] { display: none !important; }
  body.is-history-view.mobile-board-active #mobile-board :is(#trash-details, #meetings-details, #custom-sections-details, #custom-sections-list, #soldiers-panel) { display: none !important; }
  body.mobile-board-active #shared-board-banner {
    position: static;
    inset: auto;
    z-index: auto;
    width: auto;
    max-width: none;
    margin: 0 0 20px;
    transform: none;
    font-size: 13px;
    line-height: 1.6;
  }
  body.mobile-board-active .app-credit { display: none; }
  body.mobile-board-active .app-header {
    position: relative;
    top: auto;
    margin: 8px 12px 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    min-height: 64px;
    z-index: 12;
  }
  body.mobile-board-active .header-leading { width: 100%; justify-content: space-between; }
  body.mobile-board-active .brand { gap: 10px; }
  body.mobile-board-active .brand h1 { font-size: 22px; }
  body.mobile-board-active .brand-mark { display: grid; width: 38px; height: 38px; border-radius: 50%; font-size: 24px; }
  body.mobile-board-active #round-date-button { display: none; }
  body.mobile-board-active .app-main { display: block; padding: 24px 16px 20px; width: 100%; max-width: none; margin: 0; }
  body.mobile-board-active .connection-banner { margin: 12px 16px 0; font-size: 13px; }
  body.mobile-board-active .mobile-screen { min-width: 0; }
  body.mobile-board-active .mobile-screen-heading { margin-bottom: 24px; }
  body.mobile-board-active .mobile-screen-heading h2 { margin: 0; font-size: 30px; line-height: 1.25; letter-spacing: 0; }
  body.mobile-board-active .mobile-screen-heading p { margin: 8px 0 0; font-size: 14px; line-height: 1.65; }
  body.mobile-board-active .mobile-bottom-navigation {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 35;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    direction: rtl;
    gap: 2px;
    min-height: var(--mobile-nav-height);
    padding: 8px 5px calc(8px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 -4px 24px rgba(20, 29, 48, .045);
  }
  body.mobile-board-active .mobile-nav-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 62px;
    margin: 0;
    padding: 6px 1px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.mobile-board-active .mobile-nav-button[aria-current="page"] { color: var(--primary); background: var(--primary-soft); }
  body.mobile-board-active .mobile-nav-button:hover { color: var(--primary); }
  .mobile-nav-icon { width: 24px; height: 24px; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-nav-label { font: 500 11px/1.2 var(--font); text-align: center; overflow-wrap: normal; }
  .mobile-nav-button[aria-current="page"] .mobile-nav-label { font-weight: 700; }
  body.mobile-board-active #notification-center-panel { position: fixed; inset: 82px 12px auto; max-height: calc(100dvh - 190px); width: auto; }
  body.mobile-board-active .mobile-placeholder {
    padding: 28px 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface-solid);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 16px;
  }
  body.mobile-board-active .mobile-insights-placeholder { display: grid; justify-items: center; gap: 18px; padding-block: 56px; text-align: center; }
  body.mobile-board-active .mobile-insights-placeholder .mobile-nav-icon { color: var(--primary); width: 44px; height: 44px; }
  body.mobile-board-active .mobile-insights-placeholder strong { font-size: 19px; }
  body.mobile-board-active .mobile-insights-placeholder p { margin: 0; max-width: 26ch; }
  .mobile-coming-soon { font-size: 12px; padding: 4px 12px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); }
  body.mobile-board-active #weekly-scoreboard { margin-top: 16px; display: flex; flex-direction: column; gap: 20px; padding: 20px 16px; }
  body.mobile-board-active #weekly-scoreboard[hidden] { display: none; }
  body.mobile-board-active .scoreboard-heading { width: 100%; }
  body.mobile-board-active .scoreboard-heading h2 { font-size: 23px; }
  body.mobile-board-active .scoreboard-content, body.mobile-board-active .scoreboard-actions { width: 100%; }
  body.mobile-board-active #scoreboard-list { display: flex; flex-direction: column; gap: 10px; }
  body.mobile-board-active .scoreboard-entry { flex-wrap: nowrap; min-height: 64px; width: 100%; }
  body.mobile-board-active .scoreboard-identity { min-width: 0; flex: 1; }
  body.mobile-board-active .scoreboard-identity strong { overflow-wrap: anywhere; }
  body.mobile-board-active .scoreboard-points { white-space: nowrap; }
  body.mobile-board-active .scoreboard-actions { align-items: stretch; }
  body.mobile-board-active .mobile-settings-controls { padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-solid); }
  body.mobile-board-active .mobile-settings-controls .header-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  body.mobile-board-active .mobile-settings-controls .header-actions .button span:last-child { display: inline; }
  body.mobile-board-active .mobile-settings-controls .header-actions > .button,
  body.mobile-board-active .mobile-settings-controls #theme-color-button { width: 100%; justify-content: flex-start; min-height: 48px; }
  body.mobile-board-active #task-selection-mode-button { display: none; }
  body.mobile-board-active #header-more { display: none; }
  body.mobile-board-active .mobile-settings-controls > .header-more-menu { display: flex; flex-direction: column; align-items: stretch; gap: 8px; position: static; width: 100%; min-width: 0; margin-top: 10px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  body.mobile-board-active .mobile-settings-controls > .header-more-menu .button { min-height: 48px; width: 100%; justify-content: flex-start; }
  body.mobile-board-active .mobile-settings-controls .current-user { padding: 10px 8px; overflow-wrap: anywhere; }
  body.mobile-board-active .mobile-settings-controls #save-status { align-self: flex-start; }
  body.mobile-board-active .mobile-settings-controls .theme-color-picker { width: 100%; }
  body.mobile-board-active .mobile-settings-controls #theme-color-menu { position: fixed; inset: auto 12px calc(var(--mobile-nav-height) + 12px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: calc(100dvh - 130px); overflow-y: auto; }
  body.mobile-board-active .mobile-settings-controls #chat-link { position: static; display: inline-flex; margin-top: 12px; }
  body.mobile-board-active .mobile-settings-controls #chat-link[hidden] { display: none; }
  body.mobile-board-active .mobile-settings-tools { margin-top: 20px; }
  body.mobile-board-active .mobile-settings-tools > summary { min-height: 48px; padding-block: 12px; font-size: 16px; font-weight: 600; cursor: pointer; }
  body.mobile-board-active .mobile-settings-extras { display: grid; gap: 18px; margin-top: 12px; }
  body.mobile-board-active .mobile-settings-extras .round-notes-panel { margin: 0; padding: 16px; }
  body.mobile-board-active .mobile-settings-extras .round-notes-heading { flex-wrap: wrap; }
  body.mobile-board-active .mobile-settings-extras #round-notes-toolbar { flex-wrap: wrap; }
  body.mobile-board-active .mobile-settings-extras #round-notes { min-height: 220px; }
  body.mobile-board-active .mobile-settings-extras #custom-sections-details { display: block; }
  body.mobile-board-active .person-add { flex-wrap: wrap; }
  body.mobile-board-active .person-add input { min-width: 140px; }
  body.mobile-board-active .mobile-screen-meetings > details { margin-bottom: 18px; }
  body.mobile-board-active #work-meetings-details > summary { gap: 8px; }
  body.mobile-board-active #work-meetings-details > summary .summary-help { display: none; }
  body.mobile-board-active #work-meetings-details > .details-body { padding: 16px; }
  body.mobile-board-active .meeting-space-heading, body.mobile-board-active .meeting-space-row { flex-direction: column; align-items: stretch; }
  body.mobile-board-active .meeting-space { padding: 0 12px 12px; }
  body.mobile-board-active .meeting-space-actions > .button { min-height: 44px; }
  body.mobile-board-active .selection-toolbar { bottom: calc(var(--mobile-nav-height) + 10px + env(safe-area-inset-bottom, 0px)); max-height: 36dvh; overflow: auto; }
  body.mobile-board-active #toast-region { bottom: calc(var(--mobile-nav-height) + 16px + env(safe-area-inset-bottom, 0px)); }

  /* Preserve every desktop task-edit field in a phone-sized dedicated screen. */
  body.mobile-board-active #edit-dialog,
  body.mobile-board-active #meeting-document-dialog,
  body.mobile-board-active #work-meeting-dialog {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
  }
  body.mobile-board-active #edit-form { height: 100%; max-height: none; }
  body.mobile-board-active #edit-form .modal-body { max-height: none; padding: 20px 16px; overflow-x: hidden; }
  body.mobile-board-active #edit-form .modal-header { padding: max(16px, env(safe-area-inset-top, 0px)) 16px 16px; }
  body.mobile-board-active #edit-form .field-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
  body.mobile-board-active #edit-form .modal-footer { padding: 12px 16px max(12px, env(safe-area-inset-bottom, 0px)); gap: 6px; flex-wrap: wrap; }
  body.mobile-board-active #edit-form .modal-footer .button { min-height: 44px; padding-inline: 12px; }
  body.mobile-board-active #edit-form input,
  body.mobile-board-active #edit-form textarea,
  body.mobile-board-active #edit-form select { font-size: 16px; }
  body.mobile-board-active #edit-form .glass-select-trigger { min-height: 46px; }
  body.mobile-board-active #date-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  body.mobile-board-active #date-form { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
  body.mobile-board-active #date-form .modal-header,
  body.mobile-board-active #date-form .modal-footer { flex: 0 0 auto; padding-inline: 16px; }
  body.mobile-board-active #date-form .modal-body { flex: 1 1 auto; min-height: 0; max-height: none; padding: 18px 16px; overflow-y: auto; }
  body.mobile-board-active #date-form input,
  body.mobile-board-active #date-form select { min-height: 48px; font-size: 16px; }
  body.mobile-board-active #date-form .modal-footer .button { min-height: 44px; }
  body.mobile-board-active .modal .icon-button { min-width: 44px; min-height: 44px; }
  body.mobile-board-active #meeting-document-dialog .meeting-document-workspace { display: flex; flex-direction: column; }
  body.mobile-board-active #meeting-document-dialog .meeting-document-history { flex: 0 0 auto; max-height: 25dvh; overflow-y: auto; border-inline-end: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; }
  body.mobile-board-active #meeting-document-dialog .meeting-thread { display: flex; gap: 8px; overflow-x: auto; }
  body.mobile-board-active #meeting-document-dialog .meeting-thread-message { flex: 0 0 210px; }
  body.mobile-board-active #meeting-document-dialog .meeting-document-controls { gap: 6px; }
  body.mobile-board-active #meeting-document-dialog .meeting-document-controls .button { font-size: 12px; min-height: 44px; }
  /* Keep the contribution panel's own mobile flow: its full footer must take
     space before the document, rather than overflow a capped-height panel. */
  body.mobile-board-active #work-meeting-dialog .work-meeting-workspace { grid-template-columns: minmax(0, 1fr); }
  body.mobile-board-active .mobile-screen button:focus-visible,
  body.mobile-board-active .mobile-bottom-navigation button:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
}

@media (max-width: 350px) {
  body.mobile-board-active .mobile-nav-label { font-size: 10px; }
  body.mobile-board-active .mobile-bottom-navigation { padding-inline: 2px; gap: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  body.mobile-board-active .mobile-bottom-navigation { background: var(--surface-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.mobile-board-active .mobile-screen *, body.mobile-board-active .mobile-bottom-navigation * { scroll-behavior: auto; transition-duration: 0s; animation-duration: 0s; }
}