/* Shared mobile surfaces. Desktop layouts and state colours stay component-owned. */
@media (max-width:760px) {
    body {
        --mobile-surface: radial-gradient(ellipse at top right, #9172ec10, transparent 65%), linear-gradient(150deg, #191d2a, #121620);
        --mobile-border: var(--surface-border, #625d78);
        background: radial-gradient(ellipse at 90% 0, #7560d412, transparent 40%), #0b0e14;
    }
    body > .container {padding:16px 12px 28px;min-width:0}
    .container :is(.page-head,.object-page-head,.task-page-head) {gap:12px;margin-bottom:16px}
    .container h1 {font-size:24px;line-height:1.25;letter-spacing:-.5px;overflow-wrap:anywhere}
    .container h2 {font-size:18px;line-height:1.35;letter-spacing:-.2px;margin-bottom:12px}
    .container :is(.panel,.auth-card,.visit-card,.settings-card,.team-member,.task-card,.action-task-card,
        .object-focus-card,.object-section,.object-side-card,.object-create-card,.object-edit-card,
        .client-focus-card,.client-section,.client-object-card,.dash-panel,.dash-stat,.personal-card,
        .personal-panel,.attention-card,.task-form-section,.team-settings-section,.push-card,.push-hero) {
        background:var(--mobile-surface);
        border:1px solid var(--mobile-border);
        border-radius:20px;
        box-shadow:0 8px 26px #00000016;
        padding:16px;
        min-width:0;
        box-sizing:border-box;
    }
    .container .panel {margin-bottom:12px}
    .container :is(.grid,.visit-grid,.form-grid,.settings-menu,.team-list) {gap:12px}
    .container :is(.settings-card,.personal-card) {min-height:0}
    .container .settings-card {gap:12px}
    .container .settings-card strong {font-size:16px;line-height:1.35}
    .container .settings-card small {font-size:12px;line-height:1.45}
    .container .settings-card__icon {width:40px;height:40px;flex-basis:40px;border-radius:12px}
    .container :is(.object-section,.client-section) > :is(header,.section-head) {margin-bottom:14px;gap:12px}
    .container .stack {margin-top:14px;gap:10px}
    .container .stack label {gap:6px}
    .container :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]),select,textarea) {
        font-size:16px;
        background-color:#0c1019;
        border-color:var(--line);
        border-radius:12px;
        padding:10px 12px;
        max-width:100%;
    }
    .container :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]),select) {min-height:44px}
    .container :is(input,select,textarea):focus-visible {outline:2px solid #ad94ff80;outline-offset:2px}
    .container :is(.button,.settings-nav-item) {min-height:44px}
    .container .button {border-radius:12px;font-size:13px;line-height:1.35;padding:11px 14px}
    .container .button.secondary {background:linear-gradient(145deg,#ffffff07,#ffffff03);border-color:var(--line)}
    .container :is(.table-wrap,.object-filters) {background:var(--mobile-surface);border-color:var(--mobile-border);border-radius:18px}
    .container .table-wrap {overflow-x:auto;max-width:100%}
    .container :is(th,td) {padding:10px 12px}
    .container .object-table td {padding:4px 0}
    .container .filters {gap:10px;margin-bottom:14px}
    .container .empty {padding:24px 16px}
    .container .back {margin-bottom:14px;font-size:13px}
    .container .auth-card {margin:24px auto}
    /* Preserve the compact task contact rows and icon-only action geometry. */
    .container .ordinary-header-contacts .panel {padding:0;border:0;background:none;box-shadow:none;border-radius:0;margin:0}
    .container .ordinary-header-contacts .stack {margin-top:0}
    .container .ordinary-header-contacts .task-contact-copy {gap:2px}
    .container .ordinary-header-contacts .task-contact-call {padding:0;width:44px;height:44px;background:linear-gradient(145deg,#a58aff22,#a58aff0c);border-color:#aa94ef40}
    .container .ordinary-task-edit a {padding:0;width:36px;height:36px;min-height:36px}
    .container .simple-task-discussion form.stack {margin-top:0}
    .container .task-inline-description {padding:0;background:none;border:0;box-shadow:none}
}
@media(max-width:760px){
    .container .panel.conflict{border-color:#5d3038}
    .container .attention-summary .critical{border-color:rgba(239,102,115,.45);box-shadow:inset 0 0 28px rgba(239,102,115,.055)}
}