/* Soft engineering surfaces for the mobile workspace and legal documents.
   Layout, modal scrolling, safe areas and hidden states remain in page CSS. */
body:has(.mobile-shell),
body:has(.legal-shell) {
  --bg: var(--nm-bg, #e8edf2);
  --panel: var(--nm-surface, #e8edf2);
  --panel-2: var(--nm-surface, #e8edf2);
  --bg-2: var(--nm-surface, #e8edf2);
  --text: var(--nm-text, #243442);
  --muted: var(--nm-muted, #526171);
  --line-soft: var(--nm-divider, #c2ccd6);
  color: var(--nm-text, #243442);
  background: var(--nm-bg, #e8edf2);
}

.mobile-header {
  background: var(--nm-bg, #e8edf2);
  border-bottom-color: var(--nm-divider, #c2ccd6);
  box-shadow: 0 5px 12px rgb(119 140 160 / 10%);
  backdrop-filter: none;
}
.mobile-shell .panel,
.mobile-shell .controls-card,
.mobile-shell .task-card,
.mobile-shell .status-card,
.mobile-shell .metric-card,
.mobile-shell .actions-panel,
.sheet-section,
.push-platform-card,
.legal-card,
.privacy-panel {
  color: var(--nm-text, #243442);
  background: var(--nm-surface, #e8edf2);
  border-color: var(--nm-edge, rgb(255 255 255 / 70%));
  box-shadow: var(--nm-raised, 8px 8px 18px #c9d2db, -8px -8px 18px #fff);
}
.mobile-shell .summary-item,
.mobile-push-launch,
.mobile-loading-card,
.quantity-item,
.role-task-card {
  background: var(--nm-surface, #e8edf2);
  border-color: var(--nm-edge, rgb(255 255 255 / 70%));
  box-shadow: var(--nm-raised-sm, 4px 4px 8px #c9d2db, -4px -4px 8px #fff);
}
.mobile-shell .task-list { gap: 18px; }
.mobile-shell .summary-strip { gap: 10px; }
.mobile-shell .mobile-tabs {
  background: var(--nm-surface, #e8edf2);
  border-color: var(--nm-edge, rgb(255 255 255 / 70%));
  box-shadow: var(--nm-inset, inset 3px 3px 7px #c9d2db, inset -3px -3px 7px #fff);
}
.mobile-tab {
  color: var(--nm-muted, #526171);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.mobile-tab.is-active {
  color: var(--nm-accent, #006eb6);
  border-color: var(--nm-edge, rgb(255 255 255 / 70%));
  background: var(--nm-surface, #e8edf2);
  box-shadow: var(--nm-raised-sm, 4px 4px 8px #c9d2db, -4px -4px 8px #fff);
}
.secondary-button,
.mini-button,
.icon-button,
.status-filter,
.push-onboarding-close,
.legal-button {
  color: var(--nm-text, #243442);
  border-color: #a8b5c1;
  background: var(--nm-surface, #e8edf2);
  box-shadow: var(--nm-raised-sm, 4px 4px 8px #c9d2db, -4px -4px 8px #fff);
}
.primary-button,
.action-button,
.status-filter.is-active,
.legal-button.is-primary {
  color: #fff;
  border-color: #005b98;
  background: var(--nm-primary, linear-gradient(145deg, #087cbc, #0065a8));
  box-shadow: var(--nm-primary-shadow, 4px 4px 9px rgb(82 110 137 / 28%), -4px -4px 9px rgb(255 255 255 / 86%));
}
.danger-button {
  color: #fff;
  border-color: #a52232;
  background: linear-gradient(145deg, #c62e3f, #ac2233);
  box-shadow: var(--nm-raised-sm, 4px 4px 8px #c9d2db, -4px -4px 8px #fff);
}
.manager-all-in-work-button.is-active {
  color: var(--nm-accent, #006eb6);
  border-color: #9cb8cd;
  background: var(--nm-surface, #e8edf2);
  box-shadow: var(--nm-inset, inset 3px 3px 7px #c9d2db, inset -3px -3px 7px #fff);
}
.mobile-shell input:not([type="checkbox"]):not([type="range"]),
.mobile-shell select,
.mobile-shell textarea,
.sheet-panel input:not([type="checkbox"]):not([type="range"]),
.sheet-panel select,
.sheet-panel textarea,
.privacy-form input,
.privacy-form select,
.privacy-form textarea {
  color: var(--nm-text, #243442);
  border-color: var(--nm-field-border, #78899b);
  background: var(--nm-surface, #e8edf2);
  box-shadow: var(--nm-inset, inset 3px 3px 7px #c9d2db, inset -3px -3px 7px #fff);
}
.mobile-shell :is(input, select, textarea):focus,
.sheet-panel :is(input, select, textarea):focus,
.privacy-form :is(input, select, textarea):focus {
  border-color: var(--nm-accent, #006eb6);
  box-shadow: var(--nm-inset, inset 3px 3px 7px #c9d2db, inset -3px -3px 7px #fff);
}
.mobile-shell :is(input, select, textarea):disabled,
.sheet-panel :is(input, select, textarea):disabled,
.privacy-form :is(input, select, textarea):disabled {
  color: #627181;
  -webkit-text-fill-color: #627181;
  border-color: #c4ced7;
  background: #e4e9ef;
  box-shadow: inset 2px 2px 4px rgb(136 155 173 / 15%), inset -2px -2px 4px rgb(255 255 255 / 50%);
}
.mobile-shell :is(input, select, textarea):user-invalid,
.sheet-panel :is(input, select, textarea):user-invalid,
.privacy-form :is(input, select, textarea):user-invalid,
.mobile-shell [aria-invalid="true"],
.sheet-panel [aria-invalid="true"] { border-color: #b42332; }
.progress-track,
.mobile-loading-progress,
.range-row strong,
.done-toggle,
.role-step,
.push-onboarding-flow,
.push-device-preview,
.legal-meta,
.legal-notice {
  background: var(--nm-surface, #e8edf2);
  border-color: var(--nm-divider, #c2ccd6);
  box-shadow: var(--nm-inset, inset 3px 3px 7px #c9d2db, inset -3px -3px 7px #fff);
}
.progress-track span,
.task-progress-fill,
.mobile-loading-progress > span {
  background: linear-gradient(90deg, #0065a8, #0786c7);
  box-shadow: inset 0 1px 2px rgb(255 255 255 / 28%);
}
.badge { color: var(--nm-muted, #526171); background: #e3e9ef; border-color: #c7d2dc; }
.status-badge { color: #005b98; background: #deebf4; border-color: #b5cddd; }
.urgency-badge { color: #745000; background: #f5ecd7; border-color: #d8c79e; }
.mobile-push-launch-icon,
.push-onboarding-bell {
  color: var(--nm-accent, #006eb6);
  background: var(--nm-surface, #e8edf2);
  box-shadow: var(--nm-inset, inset 3px 3px 7px #c9d2db, inset -3px -3px 7px #fff);
}
.mobile-push-launch.is-active { border-color: #a8c7b8; background: #e5eee9; }
.mobile-push-launch strong,
.mobile-loading-copy strong { color: var(--nm-text, #243442); }
.mobile-loading-overlay { background: rgb(232 237 242 / 90%); }
.sheet-panel,
.push-onboarding-panel {
  background: var(--nm-surface, #e8edf2);
  border-color: var(--nm-edge, rgb(255 255 255 / 70%));
  box-shadow: 0 -12px 40px rgb(72 89 106 / 23%), inset 1px 1px 0 rgb(255 255 255 / 80%);
}
.sheet-header,
.sheet-actions,
.push-onboarding-actions {
  color: var(--nm-text, #243442);
  background: var(--nm-surface, #e8edf2);
  border-color: var(--nm-divider, #c2ccd6);
}
.sheet-header { box-shadow: 0 4px 12px rgb(125 145 164 / 9%); }
.sheet-actions,
.push-onboarding-actions { box-shadow: 0 -4px 12px rgb(125 145 164 / 13%); }
.notice,
.notice.is-error,
.legal-notice.is-error { box-shadow: inset 2px 2px 5px rgb(102 79 62 / 7%), inset -2px -2px 5px rgb(255 255 255 / 50%); }
.legal-notice.is-error { color: #922333; border-color: #ddb9bf; background: #f4e5e8; }
.metric-ok { border-color: #abcbb9; }
.metric-warning { border-color: #d8c69e; }
.metric-error { border-color: #ddb9bf; }
.mobile-shell .empty-state { background: var(--nm-surface, #e8edf2); box-shadow: var(--nm-inset, inset 3px 3px 7px #c9d2db, inset -3px -3px 7px #fff); }
.legal-kicker,
.legal-shell dt,
.privacy-form label,
.privacy-muted { color: var(--nm-muted, #526171); }
.legal-actions { border-color: var(--nm-divider, #c2ccd6); }
.legal-button:disabled { color: #627181; border-color: #c4ced7; background: #e4e9ef; box-shadow: none; }

@media (hover: hover) {
  .mobile-shell .task-card:hover {
    border-color: #a8b8c6;
    background: var(--nm-surface, #e8edf2);
    box-shadow: 6px 6px 14px #c3cdd7, -6px -6px 14px #fff;
  }
  .secondary-button:hover:not(:disabled),
  .mini-button:hover:not(:disabled),
  .icon-button:hover:not(:disabled),
  .status-filter:hover:not(.is-active),
  .legal-button:hover:not(:disabled):not(.is-primary) {
    background: #edf1f5;
    border-color: #879bab;
    box-shadow: var(--nm-raised-sm, 4px 4px 8px #c9d2db, -4px -4px 8px #fff);
  }
  .primary-button:hover:not(:disabled),
  .action-button:hover:not(:disabled),
  .legal-button.is-primary:hover:not(:disabled) { background: linear-gradient(145deg, #0074b5, #005b98); border-color: #005b98; }
}
.secondary-button:active:not(:disabled),
.mini-button:active:not(:disabled),
.icon-button:active:not(:disabled),
.mobile-shell .task-card:active,
.legal-button:active:not(:disabled):not(.is-primary) {
  background: var(--nm-surface, #e8edf2);
  box-shadow: var(--nm-inset, inset 3px 3px 7px #c9d2db, inset -3px -3px 7px #fff);
}
.primary-button:active:not(:disabled),
.action-button:active:not(:disabled),
.legal-button.is-primary:active:not(:disabled) { box-shadow: inset 3px 3px 7px rgb(0 50 91 / 35%), inset -2px -2px 5px rgb(88 168 217 / 35%); }
@media (max-width: 350px) {
  .mobile-shell .summary-strip { gap: 6px; }
  .mobile-shell .summary-item { box-shadow: 3px 3px 6px #c9d2db, -3px -3px 6px #fff; }
}
@media print {
  body:has(.legal-shell), .legal-card { color: #000; background: #fff; }
  .legal-shell *, .legal-shell *::before, .legal-shell *::after { box-shadow: none !important; }
}