/* Phone / tablet layout. Viewport + pointer only — never user-agent.
   Tiers: 1100 overlay (app.css), 700 compact, 480 phone (A55 ~412, 16 Pro Max 440).
   Small phones keep a wrapping row chrome — do not stack every toolbar into a column. */

html[data-narrow="1"],
html[data-compact="1"],
html[data-phone="1"] { -webkit-text-size-adjust: 100%; }

@media (max-width: 1100px) {
  .shell { height: 100dvh; max-height: 100dvh; }
  .main { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .sidebar-show {
    top: max(12px, env(safe-area-inset-top, 0px));
    left: max(4px, env(safe-area-inset-left, 0px));
  }
  .shell .page, .shell.side-hidden .page {
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-bottom: max(32px, calc(16px + env(safe-area-inset-bottom, 0px)));
    padding-left: max(56px, calc(44px + 8px + env(safe-area-inset-left, 0px)));
  }
  .shell .side { padding-top: env(safe-area-inset-top, 0px); width: min(300px, calc(100vw - 24px)); }
  .side .foot { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .toast { bottom: max(18px, env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 16px); }
  .cmd-veil { padding: max(8px, env(safe-area-inset-top, 0px)) 8px 8px; }
  .cmd-palette { width: min(560px, calc(100vw - 16px)); }
  .cmd-list { max-height: min(70dvh, 520px); }
  .pop .item, .col-menu .item { white-space: normal; }
  .pop .item { min-height: 40px; }
  .lock-menu { width: min(340px, calc(100vw - 24px)); }
  .modal { width: min(980px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); }
  .modal.sm { width: min(520px, calc(100vw - 16px)); }
  .modal header { flex-wrap: wrap; gap: 8px; }
  .drawer { width: min(620px, 100vw); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .veil { padding: max(8px, env(safe-area-inset-top, 0px)); }
  .row { max-width: 100%; }
  .head .btn { flex-shrink: 0; }
  .crumbs { gap: 4px; }
  .chip { max-width: min(260px, 100%); }
  .search-result-kind { width: auto; min-width: 0; flex: 0 1 auto; }
  .search-result-row { flex-wrap: wrap; }
  .series-select, .result-table-title-in, .activity-title-input { min-width: 0; }
  .dt-wrap, .act-list.dt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .bulkbar, .view-options, .pager, .members-controls, .slack-test-ping { flex-wrap: wrap; }
  .view-options-actions { margin-left: 0; }
  .bulkbar .btn { flex-shrink: 0; }
  .filter-chip { max-width: 100%; }
  .kanban { grid-auto-columns: minmax(240px, 42vw); }
  .home-lanes { grid-auto-columns: minmax(200px, 40vw); }
  .timeline { overflow-x: auto; }
  .login-card, .login .card { width: min(420px, 100%); }
  .login-wordmark { width: min(420px, 100%); }
  .login-shell { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
  .app-copyright { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .home-ask-hero { margin: 24px auto 32px; padding: 0; }
  .home-ask-title { font-size: 24px; }
  .home-ask-compose { flex-wrap: wrap; }
  .home-ask-compose .in { flex: 1 1 180px; min-width: 0; }
  .home-ask-compose .btn { min-height: 40px; flex: 0 0 auto; width: auto; }
  .settings-panel-head { min-width: 0; }
  .settings-panel-head h2 { overflow-wrap: anywhere; }
  .notif-all { flex-wrap: wrap; }
  .notif-table td.notif-check, table.dt.notif-table th:not(:first-child) { width: auto; }
  .people-avatars { flex-wrap: wrap; }
  .property-file-item { flex-wrap: wrap; }
  .comment .row { flex-wrap: wrap; }
  .activity-summary-field .row { flex-wrap: wrap; }
  .rich-save-hint { white-space: normal; }
  .mention-suggestion { flex-wrap: wrap; }
  .shortcut-table td:first-child, .shortcut-table th:first-child { width: auto; padding-right: 8px; }
  .empty { padding: 24px 12px; }
  .page.narrow { max-width: 100%; }
  .entity-card-row { gap: 8px; }
  .home-ask-out { overflow-wrap: anywhere; }
  .home-ask-sources { display: flex; flex-wrap: wrap; gap: 6px; }
  .temp-password-inline { max-width: 100%; }
  .merge-refs { max-width: 100%; }
  .side a.nav, .side button.nav { min-height: 40px; }
  .account-menu, .help-menu { min-height: 44px; }
  .pager button.pg { min-width: 36px; min-height: 36px; }
  .tabs { flex-wrap: wrap; }
  .steps { flex-wrap: wrap; }
  .toolgroup { flex-wrap: wrap; }
  .toolgroup .tool { flex: 0 0 auto; }
  .dt-root { min-width: 0; }
  .select-all-banner { overflow-wrap: anywhere; }
  .ask-monitor-main { min-width: 0; }
  .ask-monitor-limits { width: 100%; }
  .activity-detail-drawer { max-width: 100vw; }
  .cell-expand-pop { min-width: 0; max-width: calc(100vw - 24px); }
  .float-menu { max-width: calc(100vw - 24px); }
  .side-help-menu, .side-account-menu { max-width: min(260px, calc(100vw - 16px)); }
  .stat { font-size: 24px; }
  .login-brand h1 { font-size: 22px; }
  .head .muted { overflow-wrap: anywhere; }
  .maptable { display: block; overflow-x: auto; max-width: 100%; }
  .preview { overflow-x: auto; max-width: 100%; }
  .drop { max-width: 100%; }
  .import-wizard, .modal .body { min-width: 0; }
  .bulk-fields { max-height: 50dvh; }
  .lock-opt-text { min-width: 0; }
  .view-list { max-height: 40dvh; }
  .col-menu { min-width: min(220px, calc(100vw - 24px)); }
  .home-add-menu { width: min(420px, calc(100vw - 24px)); }
  .kanban-lane-title, .kanban-card-title { overflow-wrap: anywhere; }
  .project-card { min-width: 0; }
  .member-user { min-width: 0; }
  .members-table-wrap { overflow-x: auto; }
  table.members-table.maptable { display: table; min-width: 1100px; }
  .members-controls { justify-content: flex-start; }
  .channel-chip { min-height: 36px; }
  .help-link { min-width: 32px; min-height: 32px; }
  .brand-lockup { column-gap: 8px; }
  .sec-toggle { min-height: 32px; }
  .asana-egg-tip { max-width: min(var(--sidebar-w, 280px), calc(100vw - 16px)); }
}

@media (max-width: 600px) {
  .shell .side { width: min(300px, 88vw); }
  .shell .page, .shell.side-hidden .page {
    padding-left: max(48px, calc(40px + 8px + env(safe-area-inset-left, 0px)));
  }
  .sidebar-show { width: 40px; height: 40px; }
  .home-ask-hero { margin: 8px 0 16px; padding: 0; text-align: left; }
  .home-ask-hero .home-ask-meta { justify-content: flex-start; }
  .home-ask-title { font-size: 22px; }
  .home-ask-meta { gap: 6px 10px; }
  .home-ask-meta .home-ask-title { flex: 1 1 auto; min-width: 0; }
  .home-ask-resource, .home-ask-model-wrap, .home-ask-meta > label:has(.home-ask-corpus) { display: none; }
  .entity-key-summary { display: none; }
  .home-page .head .muted { display: none; }
  .head { gap: 8px; margin-bottom: 10px; align-items: center; }
  .head > h1 { font-size: 20px; margin: 0; min-width: 0; }
  .head:has(.entity-type-switcher) > h1 { display: none; }
  .entity-type-switcher { max-width: calc(100vw - 148px); }
  /* Settings: one horizontal chip scroller, not a stacked manifesto. */
  .settings-shell { grid-template-columns: 1fr; gap: 12px; }
  .settings-nav {
    display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; position: sticky; top: 0; z-index: 3;
    gap: 4px; padding: 6px;
  }
  .settings-nav-group { display: contents; }
  .settings-nav-group + .settings-nav-group { margin: 0; padding: 0; border: 0; }
  .settings-nav-label { display: none; }
  .settings-nav button {
    flex: 0 0 auto; flex-direction: row; width: auto; min-height: 36px;
    padding: 8px 12px; white-space: nowrap;
  }
  .settings-nav button small { display: none; }
  /* Table tools: labeled row that scrolls, not a wrapping icon tower. */
  .tool {
    flex-direction: row; align-items: center; gap: 4px; flex-shrink: 0;
    font-size: 12px; min-width: max-content; min-height: 36px; padding: 6px 8px;
  }
  .tool-ico { font-size: 14px; line-height: 1; }
  .tool-label { font-size: 12px; line-height: 1.2; white-space: nowrap; }
  .dt-root > .row { align-items: center; }
  .dt-root > .row > .search { flex: 1 1 100%; }
  .dt-root > .row > .search input { width: 100%; max-width: 100%; }
  .dt-root > .row > .toolgroup, .toolgroup {
    display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; min-width: 0;
    -webkit-overflow-scrolling: touch;
  }
  .dt-root .help-link { display: none; }
  .dt-root .lock-toggle-inner > span { display: none; }
  .head-more { display: inline-block; position: relative; }
  .head-more > summary { display: inline-flex; align-items: center; justify-content: center; list-style: none; cursor: pointer; min-width: 40px; min-height: 36px; }
  .head-more > summary::-webkit-details-marker { display: none; }
  .head-more-pop {
    display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 1200;
    flex-direction: column; gap: 4px; min-width: 200px; padding: 6px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  }
  .head-more[open] > .head-more-pop { display: flex; }
  .head-more-pop .btn { width: 100%; justify-content: flex-start; }
  .typeahead > input, .typeahead { width: 100%; max-width: 100%; }
  .series-select, .result-table-title-in, .activity-title-input { width: 100%; }
  .activity-title-input { font-size: 20px; padding: 8px 10px; }
  .bulk-field { grid-template-columns: 1fr; min-height: 0; padding: 8px 10px; }
  .global-search input { width: 100%; }
  .kanban { grid-auto-columns: minmax(220px, 88vw); gap: 10px; }
  .kanban .lane, .kanban-lane { max-height: calc(100dvh - 180px); }
  .card { padding: 12px; }
  .modal header h2 { font-size: 16px; overflow-wrap: anywhere; }
  .crumbs { font-size: 12px; }
  .notif-row { padding: 12px 10px; }
  .stat { font-size: 22px; }
  .pager { gap: 6px; }
  .cmd-input { font-size: 16px; padding: 12px 14px; }
  .typeahead-hint { white-space: normal; }
  .drawer .body { padding: 12px; }
  .modal .body { padding: 12px 14px; }
  .side .ws-brand { font-size: 16px; }
  .home-widget h3 { font-size: 18px; }
  .filter-chip-main { overflow-wrap: anywhere; white-space: normal; }
  .summary-value { white-space: normal; overflow: visible; text-overflow: unset; }
  .act-list .act-title-col { min-width: 140px; max-width: 200px; }
  .section-h { font-size: 16px; }
  h1 { font-size: 22px; }
}

@media (max-width: 480px) {
  h1 { font-size: 20px; }
  .home-ask-title { font-size: 20px; }
  .shell .page, .shell.side-hidden .page {
    padding-left: max(48px, calc(40px + 8px + env(safe-area-inset-left, 0px)));
    padding-right: 12px;
  }
  .shell .side { width: min(88vw, 300px); }
  .cmd-palette { width: min(100%, calc(100vw - 16px)); border-radius: 12px; }
  .modal { width: min(100%, calc(100vw - 16px)); max-height: calc(100dvh - 16px); border-radius: 12px; }
  .login-shell { padding: 12px; }
  .kanban { grid-auto-columns: minmax(200px, calc(100vw - 72px)); }
  .home-lanes { grid-auto-columns: minmax(180px, calc(100vw - 72px)); }
  .activity-title-input { font-size: 18px; }
  .stat { font-size: 20px; }
  .entity-card-row { grid-template-columns: 40px minmax(0, 1fr) 16px; }
  .entity-card-icon-btn, .entity-card-icon-link { width: 40px; height: 40px; }
  .tool { min-width: 40px; min-height: 40px; }
  .home-ask-how, .home-ask-answer, .err-text { overflow-wrap: anywhere; }
  .empty { font-size: 14px; }
  .col-header-name { max-width: 140px; }
}

html[data-compact="1"] .home-ask-compose { flex-direction: row; flex-wrap: wrap; }
html[data-compact="1"] .home-ask-compose .btn { width: auto; }
html[data-phone="1"] .cmd-palette,
html[data-phone="1"] .modal { width: min(100%, calc(100vw - 16px)); border-radius: 12px; }
html[data-coarse="1"] .pop .item { min-height: 40px; }
html[data-coarse="1"] .side a.nav, html[data-coarse="1"] .side button.nav { min-height: 40px; }
html[data-coarse="1"] .settings-nav button { min-height: 40px; }
html[data-coarse="1"] .channel-chip { min-height: 36px; }
html[data-coarse="1"] .pager button.pg { min-width: 36px; min-height: 36px; }
html[data-coarse="1"] a, html[data-coarse="1"] button { touch-action: manipulation; }
html[data-narrow="1"] .activity-title-input,
html[data-narrow="1"] .result-table-title-in,
html[data-narrow="1"] .series-select { min-width: 0; }
html[data-compact="1"] .act-toolbar .typeahead > input { width: 100%; }
html[data-compact="1"] .grid2 { grid-template-columns: minmax(0, 1fr); }
html[data-narrow="1"] .bulkbar, html[data-narrow="1"] .members-controls { flex-wrap: wrap; }
html[data-narrow="1"] .view-options-actions { margin-left: 0; }
html[data-narrow="1"] .kanban { grid-auto-columns: minmax(240px, 42vw); }
html[data-compact="1"] .kanban { grid-auto-columns: minmax(220px, 88vw); }
html[data-narrow="1"] .home-lanes { grid-auto-columns: minmax(200px, 40vw); }
html[data-narrow="1"] .dt-wrap { overflow-x: auto; }
html[data-narrow="1"] .pop .item { white-space: normal; }
html[data-compact="1"] h1 { font-size: 22px; }
html[data-phone="1"] h1 { font-size: 20px; }
html[data-narrow="1"] .page.narrow { max-width: 100%; }
html[data-narrow="1"] .summary-value { white-space: normal; }
html[data-narrow="1"] .login-card { width: min(420px, 100%); }
html[data-narrow="1"] .cmd-palette { width: min(560px, calc(100vw - 16px)); }
html[data-narrow="1"] .drawer { width: min(620px, 100vw); }
html[data-narrow="1"] .modal { max-height: calc(100dvh - 16px); }
html[data-narrow="1"] .home-ask-sources { flex-wrap: wrap; }
html[data-narrow="1"] .filter-chip { max-width: 100%; }
html[data-narrow="1"] .cell-expand-pop, html[data-narrow="1"] .lock-menu { max-width: calc(100vw - 24px); }
html[data-narrow="1"] .col-menu { min-width: min(220px, calc(100vw - 24px)); }
html[data-narrow="1"] .home-add-menu { width: min(420px, calc(100vw - 24px)); }
html[data-compact="1"] .bulk-field { grid-template-columns: 1fr; }
html[data-compact="1"] .activity-title-input { font-size: 20px; }
html[data-phone="1"] .activity-title-input { font-size: 18px; }
html[data-narrow="1"] .empty { padding: 24px 12px; }
html[data-narrow="1"] .toast { max-width: calc(100vw - 16px); }
html[data-narrow="1"] .mention-suggestion-email { white-space: normal; }
html[data-compact="1"] .side .ws-brand { font-size: 16px; }
html[data-narrow="1"] .preview, html[data-narrow="1"] .maptable { overflow-x: auto; }
html[data-phone="1"] .entity-card-row { grid-template-columns: 40px minmax(0, 1fr) 16px; }
html[data-narrow="1"] .shortcut-table td:first-child, html[data-narrow="1"] .shortcut-table th:first-child { width: auto; }
html[data-compact="1"] .login-stack { width: min(460px, 100%); }
html[data-narrow="1"] .ask-monitor-main { min-width: 0; }
html[data-narrow="1"] .temp-password-inline { max-width: 100%; }
html[data-narrow="1"] .people-avatars, html[data-narrow="1"] .comment .row { flex-wrap: wrap; }
html[data-compact="1"] .pager { flex-wrap: wrap; }
html[data-narrow="1"] .select-all-banner, html[data-narrow="1"] .err-text, html[data-narrow="1"] .home-ask-answer { overflow-wrap: anywhere; }
html[data-narrow="1"] .main { overscroll-behavior-y: contain; }
html[data-phone="1"] .view-row { flex-wrap: wrap; }
html[data-compact="1"] .sidebar-show { width: 40px; height: 40px; }
html[data-compact="1"] .shell .page,
html[data-compact="1"] .shell.side-hidden .page { padding-left: 48px; }
html[data-compact="1"] .tool { flex-direction: row; }
html[data-phone="1"] .page, html[data-phone="1"] .head, html[data-phone="1"] .dt-toolbar, html[data-phone="1"] .act-toolbar {
  box-sizing: border-box; max-width: 100%; min-width: 0;
}
html[data-phone="1"] .dt-wrap { overflow-x: auto; }
html[data-phone="1"] .head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
html[data-phone="1"] .head > .spacer { flex: 1 1 8px; min-width: 0; }
html[data-phone="1"] .head > h1, html[data-phone="1"] .head > div:has(> h1) {
  flex: 1 1 auto; min-width: 0;
}
html[data-phone="1"] .head:has(.entity-type-switcher) > .pop-anchor {
  flex: 1 1 auto; min-width: 0;
}
html[data-phone="1"] .head:has(.entity-type-switcher) > .head-more { margin-left: auto; }
html[data-phone="1"] .head:has(.entity-type-switcher) > .pop-anchor .btn,
html[data-phone="1"] .head:has(.entity-type-switcher) .entity-type-switcher { max-width: 100%; }
html[data-phone="1"] .head:has(.entity-type-switcher) > .head-more,
html[data-phone="1"] .head:has(.entity-type-switcher) > .btn.primary { flex: 0 0 auto; }
html[data-phone="1"] .dt-toolbar, html[data-phone="1"] .act-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; min-width: 0;
}
html[data-phone="1"] .act-toolbar { display: grid; }
html[data-phone="1"] .act-toolbar-primary, html[data-phone="1"] .act-toolbar-filters {
  width: 100%; min-width: 0;
}
html[data-phone="1"] .dt-toolbar > .search, html[data-phone="1"] .act-toolbar > .search,
html[data-phone="1"] .act-toolbar-search {
  flex: 1 1 100%; min-width: 0; max-width: 100%;
}
html[data-phone="1"] .dt-toolbar > .search input, html[data-phone="1"] .act-toolbar > .search input,
html[data-phone="1"] .act-toolbar-search input {
  width: 100%; max-width: 100%;
}
html[data-phone="1"] .act-filter { flex: 1 1 140px; }
html[data-phone="1"] .act-filter select.in { max-width: none; width: 100%; }
html[data-phone="1"] .dt-toolbar > .toolgroup {
  flex: 1 1 100%; display: flex; flex-wrap: nowrap; overflow-x: auto; min-width: 0; width: 100%;
}
html[data-phone="1"] .dt-toolbar > .spacer { display: none; }
html[data-phone="1"] .home-ask-compose .in { flex: 1 1 100%; }
html[data-phone="1"] .home-ask-speculate { font-size: 13px; }

/* Touch targets on coarse pointers (final push B): small buttons, compact selects, toggles and the kanban
   "move" control reach ≥36–40 px without changing the desktop (fine-pointer) chrome. */
html[data-coarse="1"] .btn.sm, html[data-coarse="1"] .btn.ghost.sm, html[data-coarse="1"] .btn.xs { min-height: 36px; min-width: 36px; }
html[data-coarse="1"] select.in.compact, html[data-coarse="1"] input.in.compact, html[data-coarse="1"] .status-select { min-height: 36px; }
html[data-coarse="1"] .kanban-move { width: 2.6em; min-height: 36px; opacity: 1; }
html[data-coarse="1"] input[type="checkbox"]:not(table.dt input):not(.check-list input):not(.fieldlist input):not(.entity-filter-popover input) { width: 44px; height: 24px; }
html[data-coarse="1"] input[type="checkbox"]:not(table.dt input):not(.check-list input):not(.fieldlist input):not(.entity-filter-popover input)::before { width: 18px; height: 18px; }
html[data-coarse="1"] input[type="checkbox"]:not(table.dt input):not(.check-list input):not(.fieldlist input):not(.entity-filter-popover input):checked::before { transform: translateX(20px); }
html[data-coarse="1"] table.dt input[type="checkbox"], html[data-coarse="1"] .check-list input[type="checkbox"] { width: 20px; height: 20px; }
html[data-coarse="1"] .entity-card-open { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
html[data-coarse="1"] .cell-expand-btn { min-height: 32px; min-width: 32px; }
html[data-coarse="1"] .dt-root:not(.at-grid) table.dt th .col-header-btn.btn { min-height: 32px; }
html[data-coarse="1"] .dt-root:not(.at-grid) table.dt { --skin-grid-header-h: 36px; }
html[data-coarse="1"] .theme-toggle { min-height: 40px; min-width: 40px; }
html[data-coarse="1"] .home-lane-more { min-height: 40px; display: inline-flex; align-items: center; }
html[data-coarse="1"] select.in.member-role-select, html[data-coarse="1"] select.in.act-view-select, html[data-coarse="1"] select.in.pager-size { min-height: 40px; }
html[data-coarse="1"] .activity-detail-drawer .btn.ghost.sm { min-width: 40px; min-height: 40px; }