/* =============================================================================================================
   ProjectManager R2 - the phone layout (v3.42)

   Every rule here applies only while body.layout-mobile is on (a phone, a narrow window, or the Mobile choice of
   the layout button) - plus the sign-in page on a small screen at the end.  The desktop stylesheet is untouched.

   The system: one app bar (menu · page and its scope · actions), a bar of four pages and "More" at the bottom,
   the sidebar as a drawer with the account and the theme / view / layout switches at its head, sheets that
   slide up from the bottom in place of menus and pickers, full-screen dialogs with the buttons in reach of a
   thumb, 16 px text in every field (no zooming in), 44 px touch targets, 12 px gutters, cards with 14 px
   corners, and the whiteboard as a canvas with a floating dock of tools.
   ============================================================================================================= */

/* ------------------------------------------------------------------------------------------------ tokens
   body.layout-mobile = the phone layout.  body.m-ui = the touch parts (sheets, the whiteboard's dock) - on a phone, and on
   an iPad / Android tablet in the desktop layout too (the desktop toolbar of the whiteboard steps aside for the dock). */
body.layout-mobile, body.m-ui {
  --m-bg: #f2f4f8;
  --m-card: #ffffff;
  --m-line: #e6e9ef;
  --m-line-2: #d5dae3;
  --m-text: #111827;
  --m-text-2: #4b5563;
  --m-muted: #6b7280;
  --m-accent: #2f6fd6;
  --m-accent-2: #1f4f9e;
  --m-accent-soft: #e8f0fc;
  --m-danger: #d9433d;
  --m-danger-soft: #fdecea;
  --m-ok: #2e8b3d;
  --m-chrome: rgba(255,255,255,0.92);
  --m-shadow: 0 1px 2px rgba(17,24,39,0.06), 0 4px 14px rgba(17,24,39,0.06);
  --m-shadow-lg: 0 12px 40px rgba(17,24,39,0.22);
  --m-r: 14px;
  --m-r-sm: 10px;
  --m-tap: 44px;
  --m-nav-h: 58px;
  --m-safe-b: env(safe-area-inset-bottom, 0px);
  --m-safe-t: env(safe-area-inset-top, 0px);
  --m-dock-b: 12px;
}
body.layout-mobile {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-size: 15px;
  background: var(--m-bg);
}
body.theme-dark.layout-mobile, body.theme-dark.m-ui {
  --m-bg: #0f141b;
  --m-card: #1a2029;
  --m-line: #26303c;
  --m-line-2: #33404f;
  --m-text: #eef2f7;
  --m-text-2: #c3ccd8;
  --m-muted: #8d99a8;
  --m-accent: #6ea8ff;
  --m-accent-2: #a9c8ff;
  --m-accent-soft: #1d3050;
  --m-danger: #ff6b6b;
  --m-danger-soft: #3a2224;
  --m-ok: #5fd77a;
  --m-chrome: rgba(26,32,41,0.94);
  --m-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.35);
  --m-shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
}
body.layout-mobile * { -webkit-tap-highlight-color: transparent; }
body.layout-mobile button, body.layout-mobile .btn, body.layout-mobile a, body.layout-mobile label { touch-action: manipulation; }
body.layout-mobile .app { height: 100vh; height: 100dvh; height: var(--m-vh, 100vh); background: var(--m-bg); }   /* v3.73: --m-vh = the window's real height, measured (iOS Safari: 100vh is the tallest the window gets, dvh lags, the keyboard shoves the page) */
body.layout-mobile .app-body { position: relative; }
body.layout-mobile .content { background: var(--m-bg); }
body.layout-mobile .m-svg { width: 22px; height: 22px; display: block; }

/* ------------------------------------------------------------------------------------------------ the desktop's chrome steps aside */
body.layout-mobile .titlebar, body.layout-mobile .statusbar, body.layout-mobile .legend-row, body.layout-mobile .sb-foot { display: none; }
body.layout-mobile .tab-content > .toolbar { display: none; }
body.layout-mobile .m-appbar, body.layout-mobile .m-drawer-head, body.layout-mobile .m-pagehead, body.layout-mobile .m-tasklist, body.layout-mobile .m-daystrip { display: block; }
body.layout-mobile .m-appbar[hidden], body.layout-mobile .m-pagehead[hidden], body.layout-mobile .m-daystrip[hidden], body.layout-mobile .m-fab[hidden], body.m-ui .m-wbdock[hidden], body.m-ui .m-wbpills[hidden], body.m-ui .m-wbopts[hidden] { display: none; }

/* ------------------------------------------------------------------------------------------------ the app bar */
body.layout-mobile .m-appbar { display: flex; align-items: center; gap: 2px; flex-shrink: 0; height: calc(54px + var(--m-safe-t)); padding: var(--m-safe-t) 6px 0 4px; background: var(--m-chrome); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--m-line); position: relative; z-index: 40; }
body.layout-mobile .m-iconbtn { width: var(--m-tap); height: var(--m-tap); border: 0; border-radius: 12px; background: transparent; color: var(--m-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 22px; line-height: 1; padding: 0; flex-shrink: 0; position: relative; }
body.layout-mobile .m-iconbtn:active { background: var(--m-accent-soft); }
body.layout-mobile .m-iconbtn.m-textbtn { width: auto; padding: 0 12px; font-size: 14px; font-weight: 700; color: var(--m-accent); }
body.layout-mobile .m-iconbtn.m-dirty::after { content: ''; position: absolute; right: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #f0a020; box-shadow: 0 0 0 2px var(--m-card); }
body.layout-mobile .m-burger { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; }
body.layout-mobile .m-burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
body.layout-mobile .m-titles { flex: 1 1 auto; min-width: 0; padding: 0 4px; cursor: pointer; }
body.layout-mobile .m-title { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; color: var(--m-text); line-height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.layout-mobile .m-sub { font-size: 12px; font-weight: 600; color: var(--m-muted); line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; margin-top: 1px; }
body.layout-mobile .m-sub:empty { display: none; }
body.layout-mobile .m-sub-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #8a94a3; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
body.layout-mobile .m-sub-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.layout-mobile .m-sub-more { font-weight: 500; }
body.layout-mobile .m-actions { display: flex; align-items: center; flex-shrink: 0; }
body.layout-mobile .m-fullbtn { color: var(--m-danger); }

/* ------------------------------------------------------------------------------------------------ the drawer */
body.layout-mobile .sidebar, body.layout-mobile .app.sb-hidden .sidebar { display: flex; position: fixed; left: 0; top: 0; bottom: 0; width: min(320px, 86vw); z-index: 1200; transform: translateX(-104%); transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: none; padding: 0 0 var(--m-safe-b); border-right: 0; border-radius: 0 20px 20px 0; background: var(--m-card); overscroll-behavior: contain; }
body.layout-mobile .app.sb-open .sidebar { transform: none; box-shadow: var(--m-shadow-lg); }
body.layout-mobile .sb-backdrop { display: block; position: fixed; inset: 0; z-index: 1190; background: rgba(15,23,42,0.5); opacity: 0; pointer-events: none; transition: opacity 0.24s; }
body.layout-mobile .app.sb-open .sb-backdrop { opacity: 1; pointer-events: auto; }
body.layout-mobile .m-drawer-head { padding: calc(14px + var(--m-safe-t)) 14px 10px; border-bottom: 1px solid var(--m-line); background: linear-gradient(var(--m-accent-soft), var(--m-card)); }
body.layout-mobile .m-me { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; cursor: pointer; }
body.layout-mobile .m-avatar { width: 46px; height: 46px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; text-shadow: 0 1px 1px rgba(0,0,0,0.25); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35), 0 2px 6px rgba(0,0,0,0.15); flex-shrink: 0; }
body.layout-mobile .m-me-txt { min-width: 0; }
body.layout-mobile .m-me-txt b { display: block; font-size: 16px; line-height: 20px; color: var(--m-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.layout-mobile .m-me-txt b .pill { vertical-align: 2px; margin-left: 4px; }
body.layout-mobile .m-me-txt small { display: block; font-size: 12.5px; color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
body.layout-mobile .m-toggles { display: flex; gap: 6px; }
body.layout-mobile .m-tog { flex: 1 1 0; min-width: 0; height: 36px; border: 1px solid var(--m-line-2); border-radius: 10px; background: var(--m-card); color: var(--m-text-2); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; cursor: pointer; }
body.layout-mobile .m-tog:active { background: var(--m-accent-soft); }
body.layout-mobile .sb-group { padding: 8px 8px 4px; }
body.layout-mobile .sb-head { font-size: 11px; letter-spacing: 0.8px; padding: 8px 8px 6px; color: var(--m-muted); text-shadow: none; }
body.layout-mobile .sb-add { width: 28px; height: 28px; line-height: 24px; font-size: 18px; border-radius: 8px; }
body.layout-mobile .sb-item { padding: 0 10px 0 10px; min-height: 44px; font-size: 15px; line-height: 20px; border-radius: 12px; border: 0; color: var(--m-text); margin: 1px 0; gap: 10px; }
body.layout-mobile .sb-item .sb-ico { width: 26px; height: 26px; border-radius: 8px; background-size: 16px 16px; }
body.layout-mobile .sb-item:hover { background: transparent; }
body.layout-mobile .sb-item.active { background: var(--m-accent-soft); color: var(--m-accent-2); text-shadow: none; box-shadow: none; font-weight: 700; }
body.theme-dark.layout-mobile .sb-item.active { color: #fff; }
body.layout-mobile .sb-item.active .sb-badge { background: var(--m-accent); color: #fff; }
body.layout-mobile .sb-item.active .sb-badge.red { background: #ffe0de; color: #b71c1c; }
body.layout-mobile .sb-badge { height: 22px; line-height: 22px; font-size: 12px; min-width: 24px; border-radius: 11px; padding: 0 7px; }
body.layout-mobile .sb-dot { width: 12px; height: 12px; }
body.layout-mobile .sb-mobile-user { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 14px 12px; border-top: 1px solid var(--m-line); font-size: 13px; }
body.layout-mobile .sb-mobile-user .user-chip { display: none; }
body.layout-mobile .sb-mobile-user a { flex: 1 1 0; text-align: center; min-height: 40px; line-height: 40px; border-radius: 10px; background: var(--m-bg); color: var(--m-accent); text-decoration: none; font-weight: 700; font-size: 14px; }
body.layout-mobile .sb-mobile-user a:last-child { color: var(--m-danger); }

/* ------------------------------------------------------------------------------------------------ the bar of pages */
body.layout-mobile .bottom-nav { display: flex; flex-shrink: 0; height: calc(var(--m-nav-h) + var(--m-safe-b)); padding: 0 4px var(--m-safe-b); background: var(--m-chrome); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--m-line); box-shadow: none; position: relative; z-index: 40; }
body.layout-mobile .bn-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: transparent; color: var(--m-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1px; padding: 6px 2px 4px; cursor: pointer; }
body.layout-mobile .bn-ico { width: 52px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; transition: background 0.18s; }
body.layout-mobile .bn-item .sb-ico { width: 24px; height: 24px; border-radius: 7px; background-size: 16px 16px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); opacity: 0.55; filter: saturate(0.6); transition: opacity 0.18s, transform 0.18s, filter 0.18s; }
body.layout-mobile .bn-item.active { color: var(--m-accent); }
body.layout-mobile .bn-item.active .bn-ico { background: var(--m-accent-soft); }
body.layout-mobile .bn-item.active .sb-ico { opacity: 1; filter: none; transform: scale(1.06); }
body.layout-mobile .bn-item .bn-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.layout-mobile .bn-more-ico { display: flex; flex-direction: column; gap: 3px; width: 18px; }
body.layout-mobile .bn-more-ico i { display: block; height: 2.5px; border-radius: 2px; background: currentColor; }
body.layout-mobile .m-tab-wb .bottom-nav { transition: transform 0.2s; }

/* ------------------------------------------------------------------------------------------------ sheets */
body.m-ui .m-sheet-wrap { position: fixed; inset: 0; z-index: 1400; display: block; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; margin: 0; max-width: none; max-height: none; overflow: visible; }
body.m-ui .m-sheet-back { position: absolute; inset: 0; background: rgba(15,23,42,0.45); opacity: 0; transition: opacity 0.2s; }
body.m-ui .m-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: min(82vh, 82dvh); max-height: calc(var(--m-vh, 100vh) * 0.82); display: flex; flex-direction: column; background: var(--m-card); border-radius: 20px 20px 0 0; padding: 6px 0 calc(8px + var(--m-safe-b)); box-shadow: var(--m-shadow-lg); transform: translateY(100%); transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
body.m-ui .m-sheet-wrap.show .m-sheet-back { opacity: 1; }
body.m-ui .m-sheet-wrap.show .m-sheet { transform: none; }
body.m-ui .m-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--m-line-2); margin: 4px auto 8px; flex-shrink: 0; }
body.m-ui .m-sheet-title { font-size: 13px; font-weight: 700; color: var(--m-muted); padding: 2px 20px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
body.m-ui .m-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 8px; min-height: 0; overscroll-behavior: contain; }
body.m-ui .m-sheet-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--m-text); font-size: 15.5px; text-align: left; cursor: pointer; }
body.m-ui .m-sheet-item:active { background: var(--m-accent-soft); }
body.m-ui .m-sheet-item:disabled { opacity: 0.45; }
body.m-ui .m-sheet-item.danger { color: var(--m-danger); }
body.m-ui .m-sheet-item.on { color: var(--m-accent-2); font-weight: 700; }
body.theme-dark.m-ui .m-sheet-item.on { color: #fff; }
body.m-ui .m-sheet-item.st-item { font-weight: 700; }
body.m-ui .m-sheet-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--m-bg); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; color: var(--m-text-2); }
body.m-ui .m-sheet-item.danger .m-sheet-ico { background: var(--m-danger-soft); color: var(--m-danger); }
body.m-ui .m-sheet-ico .wb-svg { width: 20px; height: 20px; }
body.m-ui .m-sheet-txt { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
body.m-ui .m-sheet-txt small { display: block; font-size: 12px; color: var(--m-muted); font-weight: 400; margin-top: 2px; line-height: 1.3; }
body.m-ui .m-sheet-check { width: 22px; text-align: right; color: var(--m-accent); font-weight: 800; flex-shrink: 0; }
body.m-ui .m-sheet-more { color: var(--m-muted); font-size: 20px; flex-shrink: 0; }
body.m-ui .m-sheet-sw { width: 40px; height: 24px; border-radius: 12px; background: var(--m-line-2); position: relative; flex-shrink: 0; transition: background 0.18s; }
body.m-ui .m-sheet-sw i { position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.18s; }
body.m-ui .m-sheet-sw.on { background: var(--m-ok); }
body.m-ui .m-sheet-sw.on i { transform: translateX(16px); }
body.m-ui .m-sheet-sep { height: 1px; background: var(--m-line); margin: 6px 12px; }
body.m-ui .m-sheet-head { font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--m-muted); padding: 12px 12px 4px; }
body.m-ui .m-sheet-html { padding: 6px 12px; }
body.m-ui .m-sheet-cancel { margin: 8px 12px 0; min-height: 48px; border: 0; border-radius: 14px; background: var(--m-bg); color: var(--m-accent); font-size: 16px; font-weight: 700; flex-shrink: 0; cursor: pointer; }
body.m-ui .m-sheet-cancel:active { background: var(--m-accent-soft); }
/* the desktop's popovers that are not menus (the colour picker, the assignee picker …) stay where they open, but never off the glass */
body.layout-mobile .popover:not(.m-sheet-wrap) { max-width: calc(100vw - 16px); max-height: 70vh; overflow: auto; }

/* ------------------------------------------------------------------------------------------------ dialogs */
body.layout-mobile .modal-overlay { align-items: stretch; justify-content: stretch; }
body.layout-mobile .modal-box, body.layout-mobile .modal-box.modal-wide, body.layout-mobile .modal-box.modal-xl, body.layout-mobile .modal-box.modal-share, body.layout-mobile .modal-box.modal-grade, body.layout-mobile .modal-box.modal-lesson, body.layout-mobile .modal-xl.modal-nudge, body.layout-mobile .modal-xl.modal-account { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; height: var(--m-vh, 100vh); max-height: 100dvh; max-height: var(--m-vh, 100vh); border-radius: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--m-bg); }
body.layout-mobile .modal-head { border-radius: 0; padding: calc(8px + var(--m-safe-t)) 8px 8px 16px; min-height: 52px; display: flex; align-items: center; background: var(--m-card); border-bottom: 1px solid var(--m-line); }
body.layout-mobile .modal-head h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.layout-mobile .modal-close { width: 40px; height: 40px; font-size: 28px; line-height: 1; padding: 0; border-radius: 12px; }
body.layout-mobile .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 20px; background: var(--m-bg); }
body.layout-mobile .modal-actions { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; padding: 10px 16px calc(10px + var(--m-safe-b)); border-radius: 0; background: var(--m-card); border-top: 1px solid var(--m-line); }
body.layout-mobile .modal-actions .spacer { display: none; }
body.layout-mobile .m-modal-main { display: flex; gap: 10px; }
body.layout-mobile .m-modal-main .btn { flex: 1 1 0; min-height: 48px; font-size: 16px; font-weight: 700; border-radius: 12px; }
body.layout-mobile .m-modal-main .btn-success, body.layout-mobile .m-modal-main .btn-primary { flex: 1.6 1 0; }
body.layout-mobile .m-modal-extra { display: flex; flex-wrap: wrap; gap: 8px; }
body.layout-mobile .m-modal-extra .btn { flex: 1 1 auto; min-height: 40px; font-size: 13px; border-radius: 10px; }
body.layout-mobile .modal-actions > .btn { min-height: 44px; }
/* a plain question (no fields) is a card in the middle, not a whole screen */
body.layout-mobile .modal-box.m-compact, body.layout-mobile .modal-box.modal-discard { width: calc(100vw - 32px); max-width: 420px; height: auto; max-height: 80vh; margin: auto; border-radius: 18px; }
body.layout-mobile .modal-box.m-compact .modal-head, body.layout-mobile .modal-box.modal-discard .modal-head { padding-top: 12px; border-radius: 18px 18px 0 0; }
body.layout-mobile .modal-box.m-compact .modal-body, body.layout-mobile .modal-box.modal-discard .modal-body { padding: 14px 16px; font-size: 15px; line-height: 1.45; }
body.layout-mobile .modal-box.m-compact .modal-actions, body.layout-mobile .modal-box.modal-discard .modal-actions { padding-bottom: 12px; border-radius: 0 0 18px 18px; }
body.layout-mobile .modal-box.modal-discard .modal-actions { flex-direction: row; }
body.layout-mobile .modal-box.modal-discard .modal-actions .btn { flex: 1 1 0; min-height: 46px; border-radius: 12px; font-weight: 700; }
/* fields */
body.layout-mobile .form-grid, body.layout-mobile .form-grid.settings-grid, body.layout-mobile .pe-grid, body.layout-mobile .acct-grid, body.layout-mobile .nudge-layout, body.layout-mobile .rep-list, body.layout-mobile .adm-limits, body.layout-mobile .proj-cards, body.layout-mobile .two-col, body.layout-mobile .wb-br-grid, body.layout-mobile .wb-inv-list { grid-template-columns: 1fr !important; }
body.layout-mobile .form-grid .span2, body.layout-mobile .settings-grid .span2, body.layout-mobile .settings-grid .span3 { grid-column: 1 / -1; }
body.layout-mobile .form-grid .field, body.layout-mobile .settings-grid .field { min-width: 0; }
body.layout-mobile .hold-row { grid-template-columns: 1fr 1fr; }
body.layout-mobile .field { margin-bottom: 12px; }
body.layout-mobile .field label { font-size: 13px; font-weight: 700; color: var(--m-text-2); margin-bottom: 5px; display: block; }
body.layout-mobile .field label .hint { font-weight: 400; }
body.layout-mobile .field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), body.layout-mobile .field select, body.layout-mobile .field textarea, body.layout-mobile .modal-body input[type=text], body.layout-mobile .modal-body input[type=search], body.layout-mobile .modal-body input[type=date], body.layout-mobile .modal-body input[type=number], body.layout-mobile .modal-body input[type=email], body.layout-mobile .modal-body input[type=password], body.layout-mobile .modal-body select, body.layout-mobile .modal-body textarea { font-size: 16px; min-height: 44px; padding: 8px 12px; border-radius: var(--m-r-sm); border: 1px solid var(--m-line-2); background: var(--m-card); width: 100%; }
body.layout-mobile .field input[type=color] { width: 60px; height: 44px; border-radius: var(--m-r-sm); padding: 2px; }
body.layout-mobile .field input:focus, body.layout-mobile .field select:focus, body.layout-mobile .field textarea:focus, body.layout-mobile .modal-body input:focus, body.layout-mobile .modal-body select:focus, body.layout-mobile .modal-body textarea:focus { outline: none; border-color: var(--m-accent); box-shadow: 0 0 0 3px rgba(47,111,214,0.18); }
body.layout-mobile .modal-body .check-item, body.layout-mobile .modal-body label.check-item { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; }
body.layout-mobile .modal-body input[type=checkbox], body.layout-mobile .check-item input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--m-accent); }
body.layout-mobile .modal-body input[type=range] { width: 100%; accent-color: var(--m-accent); }
body.layout-mobile .pct-row { display: flex; align-items: center; gap: 12px; }
body.layout-mobile .pct-row input[type=range] { flex: 1 1 auto; min-width: 0; }
body.layout-mobile .pct-row input[type=number] { flex: 0 0 84px; width: 84px; text-align: center; }
body.layout-mobile .modal-body input[type=checkbox] + label, body.layout-mobile .modal-body .assignee-list label, body.layout-mobile .modal-body .chk-list label { min-height: 40px; }
body.layout-mobile .modal-body .btn { min-height: 40px; }
body.layout-mobile #ngFrame { min-height: 320px; }
body.layout-mobile .modal-body table { max-width: 100%; }
body.layout-mobile .modal-body .tbl-wrap, body.layout-mobile .modal-body .att-list { max-width: 100%; overflow-x: auto; }

/* ------------------------------------------------------------------------------------------------ the head row of a page, chips, search, the add button, toasts */
body.layout-mobile .m-pagehead { padding: 8px 12px 6px; background: var(--m-bg); flex-shrink: 0; }
body.layout-mobile .m-pagehead[hidden] { display: none; }
body.layout-mobile .m-search { position: relative; display: flex; align-items: center; }
body.layout-mobile .m-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--m-muted); pointer-events: none; display: flex; }
body.layout-mobile .m-search-ico .m-svg { width: 18px; height: 18px; }
body.layout-mobile .m-search input { width: 100%; height: 42px; border: 0; border-radius: 12px; background: var(--m-card); box-shadow: inset 0 0 0 1px var(--m-line); padding: 0 40px 0 38px; font-size: 16px; color: var(--m-text); -webkit-appearance: none; appearance: none; }
body.layout-mobile .m-search input::-webkit-search-cancel-button { display: none; }
body.layout-mobile .m-search input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--m-accent); }
body.layout-mobile .m-search-x { position: absolute; right: 4px; top: 3px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--m-muted); font-size: 24px; line-height: 1; }
body.layout-mobile .m-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px 0 2px; -webkit-overflow-scrolling: touch; }
body.layout-mobile .m-chips::-webkit-scrollbar { display: none; }
body.layout-mobile .m-chips-line { padding-top: 0; }
body.layout-mobile .m-chip { flex: 0 0 auto; height: 34px; padding: 0 13px; border-radius: 17px; border: 1px solid var(--m-line-2); background: var(--m-card); color: var(--m-text-2); font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
body.layout-mobile .m-chip.on { background: var(--m-accent); border-color: var(--m-accent); color: #fff; }
body.layout-mobile .m-chip.on::before { content: '\2713'; font-size: 12px; }
body.layout-mobile .m-chip-ico { width: 38px; padding: 0; justify-content: center; font-size: 18px; }
body.layout-mobile .m-fab { display: flex; position: absolute; right: 16px; bottom: calc(var(--m-nav-h) + var(--m-safe-b) + 16px); width: 56px; height: 56px; border-radius: 18px; border: 0; background: linear-gradient(#4b8ae6, var(--m-accent)); color: #fff; font-size: 32px; line-height: 1; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(47,111,214,0.42), inset 0 1px 0 rgba(255,255,255,0.35); z-index: 45; cursor: pointer; }
body.layout-mobile .m-fab:active { transform: scale(0.96); }
body.layout-mobile .m-fab span { margin-top: -3px; }
body.layout-mobile .toast { left: 16px; right: 16px; top: auto; bottom: calc(var(--m-nav-h) + var(--m-safe-b) + 14px); max-width: none; transform: translateY(8px); text-align: center; border-radius: 14px; font-size: 14px; padding: 12px 16px; box-shadow: var(--m-shadow-lg); }
body.layout-mobile .toast.show { transform: none; }
body.layout-mobile .m-tab-wb .toast { bottom: calc(var(--m-nav-h) + var(--m-safe-b) + 84px); }
body.layout-mobile.wb-fs .toast { bottom: calc(var(--m-safe-b) + 84px); }
body.layout-mobile .m-empty { padding: 60px 24px; text-align: center; color: var(--m-muted); font-size: 15px; line-height: 1.5; }
body.layout-mobile .m-empty-ico { display: block; font-size: 34px; margin-bottom: 10px; opacity: 0.5; }
body.layout-mobile .btn { min-height: 38px; border-radius: 10px; }
body.layout-mobile .btn-small { min-height: 32px; }

/* ------------------------------------------------------------------------------------------------ the task list */
body.layout-mobile .data-scroll { background: var(--m-bg); }
body.layout-mobile .data-table { display: none; }
body.layout-mobile .project-info { margin: 0 12px 8px; padding: 12px 14px; border-radius: var(--m-r); background: var(--m-card); box-shadow: var(--m-shadow); border: 0; }
body.layout-mobile .pi-main { flex-wrap: wrap; gap: 6px 8px; }
body.layout-mobile .pi-title { font-size: 16px; }
body.layout-mobile .pi-desc { flex: 1 1 100%; font-size: 12.5px; }
body.layout-mobile .pi-stats { flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; margin-top: 6px; }
body.layout-mobile .pi-progress { flex: 1 1 100%; }
body.layout-mobile .pi-progress .pbar { flex: 1; }
body.layout-mobile .m-tasklist { padding: 0 12px calc(var(--m-nav-h) + 90px); }
body.layout-mobile .m-tgroup { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 12px 4px 6px; background: var(--m-bg); font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--m-text-2); }
body.layout-mobile .m-tgroup-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.layout-mobile .m-tgroup-n { font-size: 11.5px; font-weight: 700; color: var(--m-muted); background: var(--m-card); border-radius: 10px; padding: 1px 8px; box-shadow: inset 0 0 0 1px var(--m-line); }
body.layout-mobile .m-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
body.layout-mobile .m-trow { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 11px 8px 11px 14px; border-radius: var(--m-r); background: var(--m-card); box-shadow: var(--m-shadow); position: relative; overflow: hidden; cursor: pointer; }
body.layout-mobile .m-trow::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--pc, #9e9e9e); }
body.layout-mobile .m-trow:active { background: var(--m-accent-soft); }
body.layout-mobile .m-trow.selected { box-shadow: 0 0 0 2px var(--m-accent), var(--m-shadow); }
body.layout-mobile .m-trow-main { flex: 1 1 auto; min-width: 0; }
body.layout-mobile .m-trow-top { display: flex; align-items: baseline; gap: 6px; }
body.layout-mobile .m-tid { font-family: Consolas, 'Courier New', monospace; font-size: 11px; font-weight: 700; color: var(--m-muted); flex-shrink: 0; }
body.layout-mobile .m-trow-top .type-icon { font-size: 12px; flex-shrink: 0; align-self: center; }
body.layout-mobile .m-tname { font-size: 15.5px; font-weight: 600; color: var(--m-text); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.layout-mobile .m-trow.complete .m-tname { color: var(--m-muted); font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(107,114,128,0.55); }
body.layout-mobile .m-trow.section { padding-top: 9px; padding-bottom: 9px; background: transparent; box-shadow: none; }
body.layout-mobile .m-trow.section::before { width: 3px; }
body.layout-mobile .m-trow.section .m-tname { font-size: 13px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--m-text-2); }
body.layout-mobile .m-trow.section .m-chev { display: none; }
body.layout-mobile .m-trow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin-top: 7px; font-size: 12.5px; color: var(--m-text-2); }
body.layout-mobile .m-status { height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; font-weight: 700; border: 0; background: #eef1f5; color: #3b4652; }
body.layout-mobile .m-status.st-inprogress { background: #dcebff; color: #1d4fa3; }
body.layout-mobile .m-status.st-complete { background: #dcf3de; color: #1f7a2a; }
body.layout-mobile .m-status.st-onhold { background: #eee2f5; color: #6a1b9a; }
body.layout-mobile .m-status.st-notstarted { background: #eef1f5; color: #3b4652; }
body.layout-mobile .m-who { display: inline-flex; align-items: center; gap: 4px; }
body.layout-mobile .m-who-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--m-card); margin-right: -5px; }
body.layout-mobile .m-who-dot:last-of-type { margin-right: 2px; }
body.layout-mobile .m-who-none { color: var(--m-muted); font-style: italic; }
body.layout-mobile .m-when { color: var(--m-text-2); white-space: nowrap; }
body.layout-mobile .m-when.late { color: var(--m-danger); font-weight: 600; }
body.layout-mobile .m-when b { font-weight: 800; }
body.layout-mobile .m-tag { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--m-bg); font-size: 11.5px; font-weight: 600; color: var(--m-text-2); white-space: nowrap; border-left: 3px solid transparent; }
body.layout-mobile .m-pbar { height: 4px; border-radius: 2px; background: var(--m-line); margin-top: 8px; overflow: hidden; }
body.layout-mobile .m-pbar span { display: block; height: 100%; background: var(--pc, var(--m-accent)); border-radius: 2px; }
body.layout-mobile .m-chev { color: var(--m-line-2); font-size: 26px; line-height: 1; flex-shrink: 0; padding: 0 2px; }
body.layout-mobile .m-trow.overdue::before { background: var(--m-danger); }
body.layout-mobile .m-trow.milestone .m-tname { font-weight: 700; }
body.layout-mobile .m-score { font-weight: 800; color: var(--g, var(--m-text-2)); background: var(--gb, var(--m-bg)); }

/* ------------------------------------------------------------------------------------------------ the weekly board */
body.layout-mobile .m-weeknav { display: flex; align-items: center; gap: 4px; }
body.layout-mobile .m-weeknav .m-iconbtn { width: 40px; height: 40px; background: var(--m-card); box-shadow: var(--m-shadow); font-size: 26px; color: var(--m-accent); }
body.layout-mobile .m-weeklbl { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 15px; font-weight: 800; color: var(--m-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.layout-mobile .m-daystrip { display: flex; gap: 6px; padding: 4px 12px 10px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; background: var(--m-bg); }
body.layout-mobile .m-daystrip::-webkit-scrollbar { display: none; }
body.layout-mobile .m-day { flex: 1 1 46px; min-width: 46px; height: 62px; border: 0; border-radius: 14px; background: var(--m-card); box-shadow: var(--m-shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--m-text-2); cursor: pointer; position: relative; }
body.layout-mobile .m-day-dn { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
body.layout-mobile .m-day-dd { font-size: 19px; font-weight: 800; color: var(--m-text); line-height: 1.1; }
body.layout-mobile .m-day-n { font-size: 10.5px; font-weight: 700; min-width: 18px; height: 16px; line-height: 16px; border-radius: 8px; background: var(--m-bg); color: var(--m-muted); padding: 0 5px; margin-top: 2px; }
body.layout-mobile .m-day-0 { visibility: hidden; }
body.layout-mobile .m-day.weekend { opacity: 0.7; }
body.layout-mobile .m-day.today .m-day-dd { color: var(--m-accent); }
body.layout-mobile .m-day.today .m-day-dn { color: var(--m-accent); }
body.layout-mobile .m-day.today { box-shadow: 0 0 0 1.5px var(--m-accent), var(--m-shadow); }
body.layout-mobile .m-day.active { background: var(--m-accent); color: rgba(255,255,255,0.85); box-shadow: 0 4px 12px rgba(47,111,214,0.35); }
body.layout-mobile .m-day.active .m-day-dd, body.layout-mobile .m-day.active.today .m-day-dd { color: #fff; }
body.layout-mobile .m-day.active .m-day-n { background: rgba(255,255,255,0.25); color: #fff; }
body.layout-mobile .board-scroll { padding: 0 12px calc(var(--m-nav-h) + 80px); background: var(--m-bg); }
body.layout-mobile .board-week-head { font-size: 13px; padding: 10px 4px 4px; }
body.layout-mobile .board-days { flex-direction: column; gap: 10px; }
body.layout-mobile .board-day { min-height: 0; flex: 0 0 auto; border-radius: var(--m-r); box-shadow: var(--m-shadow); border: 0; overflow: hidden; scroll-margin-top: 4px; }
body.layout-mobile .board-day-head { position: sticky; top: 0; z-index: 2; flex-wrap: wrap; row-gap: 2px; padding: 9px 12px; min-height: 44px; }
body.layout-mobile .board-day-head .dn { font-size: 15px; }
body.layout-mobile .board-day-head .dd { font-size: 13px; }
body.layout-mobile .board-day-head .day-hours { margin-right: 6px; }
body.layout-mobile .board-day-head .day-add { width: 34px; height: 34px; line-height: 32px; font-size: 20px; margin-left: auto; border-radius: 10px; }
body.layout-mobile .board-day-body { min-height: 40px; padding: 8px 10px 10px; }
body.layout-mobile .board-day.past:not(.today) .board-day-body:empty { min-height: 0; }
body.layout-mobile .card { font-size: 13.5px; border-radius: 12px; }
body.layout-mobile .card .card-title { font-size: 14px; }
body.layout-mobile .group-head { font-size: 11.5px; }

/* ------------------------------------------------------------------------------------------------ the timeline */
body.layout-mobile .gantt-container { background: var(--m-card); }
body.layout-mobile .gantt-scroll { -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
body.layout-mobile .g-bar, body.layout-mobile .g-ms { touch-action: pan-x pan-y; }
body.layout-mobile .g-resizer { display: none; }
body.layout-mobile #gZoomLabel { display: none; }

/* ------------------------------------------------------------------------------------------------ history */
body.layout-mobile .history-wrap { padding: 4px 12px calc(var(--m-nav-h) + 24px); background: var(--m-bg); }
body.layout-mobile .h-day { font-size: 12px; letter-spacing: 0.6px; padding: 12px 4px 6px; color: var(--m-muted); border: 0; }
body.layout-mobile .h-entry { flex-wrap: wrap; row-gap: 3px; padding: 10px 12px 10px 14px; margin-bottom: 8px; border-radius: 12px; background: var(--m-card); box-shadow: var(--m-shadow); border: 0; }
body.layout-mobile .h-entry .h-time { width: auto; font-size: 12px; }
body.layout-mobile .h-detail { flex: 1 1 100%; order: 5; font-size: 14px; line-height: 1.4; color: var(--m-text); }
body.layout-mobile .h-proj { max-width: 50%; }
body.layout-mobile .h-actions { min-width: 0; margin-left: auto; }
body.layout-mobile .h-actions .btn { min-height: 34px; }

/* ------------------------------------------------------------------------------------------------ stats, quality objectives, settings, admin, gradebook */
body.layout-mobile .stats-wrap { padding: 8px 12px calc(var(--m-nav-h) + 24px); background: var(--m-bg); }
body.layout-mobile .sec-title { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.2px; margin: 22px 0 10px; padding: 0 0 6px; border-bottom: 0; }
body.layout-mobile .sec-title .hint { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.4; margin-top: 2px; color: var(--m-muted); }
body.layout-mobile .collapsible-head .sec-title { margin: 0; padding: 0; }
body.layout-mobile .stats-wrap .panel, body.layout-mobile .stats-wrap .proj-card, body.layout-mobile .stats-wrap .adm-panel { border-radius: var(--m-r); }
body.layout-mobile .tiles { gap: 8px; }
body.layout-mobile .tile { min-width: 0; flex: 1 1 calc(50% - 4px); padding: 12px 12px 10px; border-radius: var(--m-r); }
body.layout-mobile .tile .tile-v { font-size: 24px; }
body.layout-mobile .tile .tile-l { font-size: 10.5px; }
body.layout-mobile .phase-strip { min-width: 0; }
body.layout-mobile .panel { border-radius: var(--m-r); }
body.layout-mobile .panel.phase-panel { overflow-x: auto; }
body.layout-mobile .stats-wrap table.tbl, body.layout-mobile .panel table.tbl { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.layout-mobile .tbl-wrap { max-width: 100%; overflow-x: auto; }
body.layout-mobile .q-banner { padding: 12px 14px; border-radius: var(--m-r); gap: 10px; }
body.layout-mobile .q-banner-main { min-width: 0; gap: 10px; }
body.layout-mobile .q-banner-title { font-size: 17px; }
body.layout-mobile .q-banner-sub { font-size: 12.5px; }
body.layout-mobile .q-score { flex-wrap: wrap; gap: 6px; width: 100%; }
body.layout-mobile .q-score-tile { flex: 1 1 calc(33.33% - 4px); min-width: 0; padding: 8px 4px 6px; }
body.layout-mobile .q-score-big { min-width: 0; flex: 1 1 100%; }
body.layout-mobile .q-cards, body.view-simple.layout-mobile .q-cards { grid-template-columns: 1fr !important; gap: 10px; }
body.layout-mobile .q-card { border-radius: var(--m-r); padding: 10px 12px; }
body.layout-mobile .q-body { flex-wrap: wrap; }
body.layout-mobile .q-hero { flex: 0 0 64px; }
body.layout-mobile .q-trend { padding: 12px 12px 8px; border-radius: var(--m-r); }
body.layout-mobile .q-trend-head { flex-wrap: wrap; gap: 8px 10px; }
body.layout-mobile .q-trend-ico { width: 32px; height: 32px; flex: 0 0 32px; }
body.layout-mobile .q-trend-text { flex: 1 1 0; min-width: 0; }
body.layout-mobile .q-trend-title { font-size: 15px; }
body.layout-mobile .q-verdict { margin-left: 6px; }
body.layout-mobile .q-trend-tools { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; }
body.layout-mobile .q-trend-tools .btn { min-height: 34px; }
body.layout-mobile .q-trend-chart { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 4px -12px 0; padding: 0 12px; width: auto; }
body.layout-mobile .q-trend-chart::-webkit-scrollbar { display: none; }
body.layout-mobile .q-trend-svg { max-width: none; }
body.layout-mobile .adm-reg-row { flex-wrap: wrap; }
body.layout-mobile .adm-kv td:first-child { width: auto; }
body.layout-mobile .wp-row input[type=range] { width: 100%; }
body.layout-mobile .wp-preview { max-width: 100%; }
body.layout-mobile .settings-grid .field input, body.layout-mobile .stats-wrap .field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), body.layout-mobile .stats-wrap .field select, body.layout-mobile .stats-wrap .field textarea { font-size: 16px; min-height: 44px; border-radius: var(--m-r-sm); }
body.layout-mobile .stats-wrap input[type=text], body.layout-mobile .stats-wrap input[type=number], body.layout-mobile .stats-wrap input[type=email], body.layout-mobile .stats-wrap select { font-size: 16px; min-height: 40px; max-width: 100%; }
body.layout-mobile .stats-wrap .btn { min-height: 40px; }
body.layout-mobile .ps-band { flex-wrap: wrap; }
body.layout-mobile td.ps-course { min-width: 140px; }
body.layout-mobile .btn-group { flex-wrap: wrap; max-width: 100%; }
body.layout-mobile .btn-group.seg { gap: 4px; }
body.layout-mobile .btn-group.seg .btn { border-radius: 10px; margin-left: 0; }

/* ------------------------------------------------------------------------------------------------ the whiteboard */
body.m-ui #tabWb .wb-tools { display: none; }
body.layout-mobile #tabWb .wb-toolbar { display: none; }
body.layout-mobile .wb-layout { position: relative; }
body.m-ui .wb-main { position: relative; }
body.layout-mobile .wb-stage { padding: 58px 0 84px; background: #dfe3e9; }
body.theme-dark.layout-mobile .wb-stage { background: #0b0f14; }
body.layout-mobile .wb-page { margin: 0; box-shadow: none; }
body.layout-mobile .wb-side { position: absolute; left: 0; top: 0; bottom: 0; z-index: 72; width: min(320px, 86vw); box-shadow: var(--m-shadow-lg); border-right: 0; border-radius: 0 18px 18px 0; background: var(--m-card); padding-top: 6px; }
body.layout-mobile .m-wbside-back { display: none; position: absolute; inset: 0; z-index: 71; background: rgba(15,23,42,0.45); }
body.layout-mobile .m-wbside-back.show { display: block; }
body.layout-mobile .m-wbside-close { display: block; position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--m-bg); color: var(--m-text-2); font-size: 24px; line-height: 1; z-index: 2; }
body.layout-mobile .wb-side-head { padding: 10px 46px 4px 14px; font-size: 11px; }
body.layout-mobile .wb-side-filters { padding: 4px 10px 8px; }
body.layout-mobile .wb-side-filters .preset { font-size: 14px; min-height: 36px; }
body.layout-mobile .wb-list .wb-item, body.layout-mobile .wb-list .wb-li { min-height: 48px; font-size: 14px; }
body.layout-mobile .wb-join { font-size: 13px; }
/* the dock */
body.m-ui .m-wbdock { display: flex; position: absolute; left: 50%; transform: translateX(-50%); bottom: var(--m-dock-b); z-index: 60; gap: 2px; padding: 5px; border-radius: 22px; background: var(--m-chrome); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 8px 28px rgba(17,24,39,0.25), 0 0 0 1px rgba(17,24,39,0.06); max-width: calc(100vw - 16px); }
body.m-ui #tabWb.wb-max .m-wbdock, body.m-ui.wb-fs .m-wbdock { bottom: calc(var(--m-safe-b) + 12px); }
body.m-ui .m-dk { width: 38px; height: 40px; border: 0; border-radius: 14px; background: transparent; color: var(--m-text); display: inline-flex; align-items: center; justify-content: center; padding: 0; position: relative; flex-shrink: 0; cursor: pointer; }
body.m-ui .m-dk .wb-svg { width: 24px; height: 24px; }
body.m-ui .m-dk.active { background: var(--m-accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
body.m-ui .m-dk.active .wb-cico { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }
body.m-ui .m-dk-col { position: absolute; right: 5px; bottom: 5px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--m-card); }
body.m-ui .m-dk.active .m-dk-col { box-shadow: 0 0 0 1.5px #fff; }
body.m-ui .m-dk-hand .wb-svg { width: 22px; height: 22px; }
body.m-ui .m-dk-more { width: 36px; }
body.m-ui .m-dk[hidden] { display: none; }
@media (max-width: 360px) { body.m-ui .m-dk { width: 34px; } body.m-ui .m-dk-more { width: 32px; } }
/* the pills at the top of the board */
body.m-ui .m-wbpills { display: block; position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 55; pointer-events: none; }
body.m-ui .m-wbpill { position: absolute; top: 10px; display: flex; gap: 0; padding: 3px; border-radius: 14px; background: var(--m-chrome); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 4px 14px rgba(17,24,39,0.18), 0 0 0 1px rgba(17,24,39,0.06); pointer-events: auto; }
body.m-ui .m-wbpill-l { left: 10px; }
body.m-ui .m-wbpill-r { right: 10px; }
body.m-ui .m-pl { min-width: 36px; height: 34px; border: 0; border-radius: 11px; background: transparent; color: var(--m-text); font-size: 20px; line-height: 1; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
body.m-ui .m-pl:disabled { opacity: 0.3; }
body.m-ui .m-pl:active:not(:disabled) { background: var(--m-accent-soft); }
body.m-ui .m-pl-page { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 40px; }
body.m-ui .m-pl-exit { color: var(--m-danger); font-size: 14px; font-weight: 800; padding: 0 10px; }
body.m-ui .m-pl-exit[hidden] { display: none; }
/* the colour / width options over the dock */
body.m-ui .m-wbopts { display: block; position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--m-dock-b) + 58px); z-index: 61; padding: 10px 12px; border-radius: 18px; background: var(--m-chrome); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 8px 28px rgba(17,24,39,0.25), 0 0 0 1px rgba(17,24,39,0.06); max-width: calc(100vw - 16px); }
body.m-ui #tabWb.wb-max .m-wbopts, body.m-ui.wb-fs .m-wbopts { bottom: calc(var(--m-safe-b) + 70px); }
body.m-ui .m-wbrow { display: flex; align-items: center; justify-content: center; gap: 8px; }
body.m-ui .m-wbrow + .m-wbrow { margin-top: 10px; }
body.m-ui .m-swatch { width: 30px; height: 30px; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); padding: 0; cursor: pointer; position: relative; flex-shrink: 0; }
body.m-ui .m-swatch.on { box-shadow: 0 0 0 2px var(--m-card), 0 0 0 4px var(--m-accent); }
body.m-ui .m-swatch-any { background: conic-gradient(#e53935, #fb8c00, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935); overflow: hidden; }
body.m-ui .m-swatch-any input { opacity: 0; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
body.m-ui .m-width { width: 44px; height: 36px; border: 0; border-radius: 12px; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
body.m-ui .m-width i { display: block; border-radius: 50%; background: var(--m-text); }
body.m-ui .m-width.on { background: var(--m-accent-soft); }
body.m-ui .m-width.on i { background: var(--m-accent); }
/* the notes bar sits over the board above the dock */
body.m-ui #wbFmt { position: absolute; left: 8px; right: 8px; bottom: calc(var(--m-dock-b) + 54px); z-index: 58; border: 0; border-radius: 14px; background: var(--m-chrome); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 4px 16px rgba(17,24,39,0.2), 0 0 0 1px rgba(17,24,39,0.06); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 5px 8px; gap: 4px 8px; }
body.m-ui #wbFmt::-webkit-scrollbar { display: none; }
body.m-ui #wbFmt .wb-group { flex: 0 0 auto; flex-wrap: nowrap; }
body.m-ui #wbFmt .wb-fmt-lbl { display: none; }
body.m-ui .wb-fmtbtn { height: 32px; min-width: 34px; border-radius: 9px; font-size: 13px; }
body.layout-mobile .wb-margins { min-width: 0; width: calc(100vw - 32px); }
body.layout-mobile .wb-mg-range { min-width: 0; }
body.m-ui #tabWb.wb-max #wbFmt, body.m-ui.wb-fs #wbFmt { bottom: calc(var(--m-safe-b) + 66px); }
body.layout-mobile.wb-fs .m-appbar, body.layout-mobile.wb-fs .bottom-nav, body.layout-mobile.wb-fs .m-fab { display: none; }
body.layout-mobile.wb-fs #tabWb.wb-max { padding-top: 0; }
body.m-ui .wb-stage { padding-bottom: 84px; padding-top: 58px; }   /* room under the page for the dock, and above it for the pills (they must not cover the first line of writing, v3.43) */
body.m-ui:not(.layout-mobile) .m-wbpill { top: 10px; }
body.m-ui:not(.layout-mobile) .m-wbpill-l { left: 14px; }
body.m-ui:not(.layout-mobile) .m-wbpill-r { right: 14px; }
/* a tablet-sized whiteboard in this layout: the stage keeps the page in the middle */
body.m-ui .wb-max .wb-maxexit { display: none; }

/* ------------------------------------------------------------------------------------------------ larger phones and small tablets held upright */
@media (min-width: 700px) {
  body.layout-mobile .m-tasklist, body.layout-mobile .board-scroll, body.layout-mobile .history-wrap, body.layout-mobile .stats-wrap, body.layout-mobile .m-pagehead, body.layout-mobile .m-daystrip, body.layout-mobile .project-info { padding-left: 20px; padding-right: 20px; }
  body.layout-mobile .project-info { margin-left: 20px; margin-right: 20px; }
  body.layout-mobile .tile { flex-basis: calc(33.33% - 6px); }
  body.layout-mobile .q-cards, body.view-simple.layout-mobile .q-cards { grid-template-columns: 1fr 1fr !important; }
  body.layout-mobile .modal-box:not(.m-compact):not(.modal-discard), body.layout-mobile .modal-box.modal-wide, body.layout-mobile .modal-box.modal-xl { width: min(720px, calc(100vw - 40px)); max-width: 720px; height: auto; max-height: calc(100dvh - 40px); max-height: calc(var(--m-vh, 100vh) - 40px); margin: auto; border-radius: 20px; }
  body.layout-mobile .modal-box:not(.m-compact) .modal-head { border-radius: 20px 20px 0 0; padding-top: 10px; }
  body.layout-mobile .modal-box:not(.m-compact) .modal-actions { border-radius: 0 0 20px 20px; padding-bottom: 12px; }
  body.m-ui .m-sheet { left: 50%; right: auto; width: 560px; transform: translate(-50%, 100%); border-radius: 20px; bottom: 16px; }
  body.m-ui .m-sheet-wrap.show .m-sheet { transform: translate(-50%, 0); }
  body.layout-mobile .sidebar { width: 340px; }
  body.layout-mobile .m-fab { right: 24px; }
  /* the weekly board: two cards side by side */
  body.layout-mobile .board-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: start; }
  body.layout-mobile .board-group-head { grid-column: 1 / -1; }
  body.layout-mobile .board-group .card { margin: 0; }
  /* the task list: two columns of rows */
  body.layout-mobile .m-tasklist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-content: start; }
  body.layout-mobile .m-tgroup { grid-column: 1 / -1; }
  body.layout-mobile .m-trow.section { grid-column: 1 / -1; }
  body.layout-mobile .m-empty { grid-column: 1 / -1; }
  body.layout-mobile .project-info { grid-column: 1 / -1; }
  body.layout-mobile .m-day { height: 66px; }
}

/* ------------------------------------------------------------------------------------------------ the dark theme */
body.theme-dark.layout-mobile .m-status { background: #2a3442; color: #cdd6e1; }
body.theme-dark.layout-mobile .m-status.st-inprogress { background: #1d3050; color: #8ab6ff; }
body.theme-dark.layout-mobile .m-status.st-complete { background: #1b3a24; color: #7fe08f; }
body.theme-dark.layout-mobile .m-status.st-onhold { background: #35213f; color: #d9a3ee; }
body.theme-dark.layout-mobile .m-fab { background: linear-gradient(#5b93e6, #2f6fd6); color: #fff; }
body.theme-dark.layout-mobile .m-chip.on { color: #0b1220; }
body.theme-dark.layout-mobile .m-day.active { color: rgba(10,18,32,0.75); }
body.theme-dark.layout-mobile .m-day.active .m-day-dd, body.theme-dark.layout-mobile .m-day.active .m-day-n { color: #0b1220; }
body.theme-dark.layout-mobile .m-day.active .m-day-n { background: rgba(0,0,0,0.15); }
body.theme-dark.m-ui .m-dk.active { color: #0b1220; }
body.theme-dark.m-ui .m-dk.active .m-dk-col { box-shadow: 0 0 0 1.5px #0b1220; }
body.theme-dark.m-ui .m-width i { background: #e6eaf0; }
body.theme-dark.m-ui .m-swatch { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
body.theme-dark.m-ui .m-sheet-check { color: #8ab6ff; }
body.theme-dark.layout-mobile .m-sub-dot { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
body.theme-dark.layout-mobile .m-me-txt b .pill { color: #4e342e; }
body.theme-dark.layout-mobile .m-drawer-head { background: linear-gradient(#1d3050, var(--m-card)); }

/* ------------------------------------------------------------------------------------------------ the sign-in page on a phone */
@media (max-width: 600px) {
  .login-page { align-items: flex-start; overflow-y: auto; height: 100vh; height: 100dvh; padding: 0; }
  .login-box { width: 100%; max-width: 100%; min-height: 100%; padding: calc(28px + env(safe-area-inset-top, 0px)) 22px 32px; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; justify-content: center; }
  .login-box .form-grid { grid-template-columns: 1fr; }
  .login-box .field { margin-bottom: 14px; }
  .login-box label { font-size: 13.5px; font-weight: 700; }
  .login-box input, .login-box select, .login-box .field input, .login-box .field select { font-size: 16px; min-height: 48px; height: 48px; border-radius: 12px; padding: 8px 14px; }
  .login-box .btn, .login-box button[type=submit] { min-height: 50px; font-size: 17px; border-radius: 14px; }
  .login-box .login-links, .login-box .hint { font-size: 14px; line-height: 1.6; }
}

/* v3.46: the split highlight button on a touch screen (its arrow stays a finger-sized target) */
body.m-ui .wb-fmt-split .wb-fmtbtn[data-fmt="hilite"] { border-radius: 9px 0 0 9px; }
body.m-ui .wb-fmt-split .wb-fmtbtn[data-fmt="hlcolor"] { border-radius: 0 9px 9px 0; min-width: 30px; }
body.m-ui .wb-hlpick { width: 256px; } body.m-ui .wb-hl-sw { width: 48px; height: 40px; }

/* v3.47: the recording block on a touch screen - finger-sized Pause / Stop */
body.m-ui .wb-au-btn { min-height: 38px; padding: 6px 12px; font-size: 14px; }
body.m-ui .wb-au-done audio { height: 44px; }

/* v3.73: the whiteboard over the whole phone screen - the measured height too */
body.layout-mobile #tabWb.wb-max { height: var(--m-vh, 100vh); }