/* Responsive overrides for the shipped Windows web bundle. */
.mobile-scroll-hint { display: none; }
.main-column, main { min-width: 0; }

/* Includes the 232px desktop sidebar and the original 1120px page minimum. */
@media (max-width: 1440px) {
  main > *, .doc-workbench, .management-cockpit, .doc-project-center,
  .project-detail-shell { min-width: 0; max-width: 100%; }
  .workbench-board, .detail-overview-grid, .report-overview-grid,
  .master-detail, .unified-overview-grid { grid-template-columns: minmax(0, 1fr); }
  .project-detail-shell { grid-template-columns: 210px minmax(0, 1fr); margin: 0; padding: 0; }
  .project-intro-grid { grid-template-columns: minmax(0, 1fr); }
  .workbench-main-stack, .workbench-side-stack, .detail-main-stack, .detail-side-stack,
  .cockpit-view, .project-detail-content, .knowledge-doc-main, .report-detail-content,
  .requirement-editor-main, .requirement-editor-side { min-width: 0; }
  .table-wrap, .requirements-table-wrap, .gantt-panel, .requirement-gantt {
    min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .gantt-panel > header { position: sticky; left: 0; }
  .gantt-panel > .gantt-scale, .gantt-panel > .gantt-list { min-width: 900px; }
  .management-cockpit .gantt-panel .gantt-scale,
  .management-cockpit .gantt-panel .gantt-row {
    grid-template-columns: 210px 160px 95px minmax(400px, 1fr); min-width: 900px;
  }
  .gantt-panel > .gantt-list { overflow: visible; }
  .requirement-gantt-scale, .requirement-gantt-row { min-width: 780px; }
  .business-node-list { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .approval-config-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .detail-lifecycle { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
  .doc-surface > header, .cockpit-panel > header, .project-section > header,
  .project-detail-heading, .panel-header { flex-wrap: wrap; }
  .header-actions { flex-wrap: wrap; }
  .header-actions > button, .page-heading > button { flex-shrink: 0; }
}

@media (max-width: 800px) {
  :root { --mobile-bottom-space: calc(68px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-top: 76px; scroll-padding-bottom: var(--mobile-bottom-space); }
  body { min-width: 0; }
  html.mobile-overlay-open, body.mobile-overlay-open { overflow: hidden; }
  main { width: 100%; padding: 18px 14px calc(var(--mobile-bottom-space) + 24px); }
  main > *, main section, main article, main form, main aside,
  .dialog form, .dialog fieldset, .dialog label { min-width: 0; }
  main p, main h1, main h2, main h3, main dd, main small,
  .dialog p, .dialog small, .dialog label { overflow-wrap: anywhere; }
  button, input, select, textarea, [contenteditable="true"] { touch-action: manipulation; }
  button { min-width: 44px; min-height: 44px; }
  button svg { flex-shrink: 0; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea,
  [contenteditable="true"] { min-width: 0; max-width: 100%; font-size: 16px !important; }
  input:not([type="checkbox"]):not([type="radio"]), select { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] {
    width: 20px !important; height: 20px !important; min-width: 20px; min-height: 20px;
    max-width: 20px; padding: 0; flex-shrink: 0;
  }
  main label:has(> input[type="checkbox"]), .dialog label:has(> input[type="checkbox"]) {
    display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 44px;
  }
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
  textarea:focus-visible, [contenteditable="true"]:focus-visible, [tabindex="0"]:focus-visible {
    outline: 3px solid #1d659f; outline-offset: 2px;
  }
  .topbar { height: 60px; padding: 0 10px; gap: 8px; }
  .breadcrumb { min-width: 0; flex: 1; justify-content: center; }
  .breadcrumb strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .menu-button, .menu-close, .icon-button { width: 44px; height: 44px; flex-shrink: 0; }
  .top-actions { gap: 2px; }
  .mobile-avatar { display: none; }
  .sidebar { width: min(300px, calc(100vw - 44px)); height: 100vh; height: 100dvh; }
  .sidebar:not(.open) { visibility: hidden; }
  .sidebar.open { visibility: visible; }
  .sidebar .brand { height: 76px; flex-shrink: 0; padding: 0 14px; gap: 10px; }
  .sidebar .brand small { font-size: 11px; white-space: nowrap; }
  .sidebar nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-block: 10px; }
  .sidebar-bottom { flex-shrink: 0; margin-top: 0; }
  .sidebar .account-anchor { flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .account-anchor .profile { margin: 0; padding: 12px 18px; }
  .account-anchor .profile small { font-size: 12px; }
  .mobile-nav { height: var(--mobile-bottom-space); padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .mobile-nav button { min-width: 0; min-height: 52px; font-size: 12px; line-height: 1.2; gap: 5px; }
  .mobile-nav button span { white-space: nowrap; }
  .doc-workbench, .doc-requirements-page, .doc-requirement-detail,
  .project-detail-shell { margin: 0; padding: 0; min-height: auto; }
  .doc-workbench { background: transparent; }
  .page-heading, .requirements-heading, .detail-titlebar, .project-detail-heading,
  .workbench-greeting { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-heading h1, .requirements-heading h1, .detail-titlebar h1,
  .project-detail-heading h1, .workbench-greeting h1 { font-size: 22px; line-height: 1.4; }
  .page-heading p, .requirements-heading p { line-height: 1.6; }
  .page-heading > button, .requirements-heading > div:last-child,
  .detail-titlebar > div:last-child, .workbench-greeting > button { align-self: flex-start; }
  .page-heading > button, .requirements-heading button, .detail-titlebar button,
  .header-actions button, .workbench-greeting > button, .panel-header > button {
    white-space: nowrap; flex-shrink: 0;
  }
  .workbench-greeting > div { min-width: 0; }
  .greeting-avatar { flex-shrink: 0; }
  .workbench-summary, .requirement-stat-strip, .unified-kpi-row,
  .cockpit-stats.count-3, .cockpit-stats.count-4, .cockpit-stats.count-5,
  .unified-metrics, .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .workbench-summary article, .requirement-stat-strip article, .unified-kpi-row article,
  .management-cockpit .cockpit-stats article { padding: 14px; min-height: 106px; }
  .workbench-summary small, .requirement-stat-strip small, .unified-kpi-row small,
  .cockpit-stats small { font-size: 13px; line-height: 1.55; }
  .workspace-tabs, .unified-tabs, .requirement-scope-tabs, .detail-section-tabs {
    min-width: 0; max-width: 100%; display: flex; flex-wrap: nowrap; overflow-x: auto;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
  .workspace-tabs button, .unified-tabs button, .requirement-scope-tabs button,
  .detail-section-tabs button { min-width: max-content; flex: 0 0 auto; white-space: nowrap; }
  .doc-filter-row, .requirement-filter-bar, .requirement-filters {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px;
  }
  .doc-filter-row label, .management-cockpit .cockpit-filters label,
  .requirement-filter-bar label, .requirement-filters label { min-width: 0; width: 100%; }
  .doc-filter-row label:has(input[type="search"]), .doc-filter-row label:has(input[placeholder]),
  .requirement-filter-bar label:first-child, .requirement-filters label:first-child { grid-column: 1 / -1; }
  .doc-filter-row input, .doc-filter-row select, .requirement-filter-bar input,
  .requirement-filter-bar select, .requirement-filters input, .requirement-filters select { width: 100%; }
  .filter-icon-button { width: 44px; height: 44px; }
  .requirements-workspace, .knowledge-doc-layout, .project-detail-shell,
  .report-master-detail, .report-rules-layout, .report-editor-layout,
  .requirement-editor-layout, .three-grid, .two-grid, .wechat-reader-form,
  .wechat-connect-bar, .approval-config-grid { grid-template-columns: minmax(0, 1fr); }
  .product-tree, .knowledge-tree { position: static; max-height: 260px; overflow-y: auto; }
  .project-tree { position: static; max-height: 220px; overflow-y: auto; overscroll-behavior: contain; }
  .project-tree > header { position: sticky; top: -14px; z-index: 1; background: #f1f1f2; padding: 8px 0; }
  .project-tree-group button { width: 100%; }
  .project-tree-group > button > span { flex-shrink: 0; }
  .project-detail-heading .header-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-detail-heading .header-actions > button:last-child { grid-column: 1 / -1; justify-content: center; }
  .project-progress-line { padding-inline: 14px; grid-template-columns: 74px minmax(0,1fr) 42px; gap: 8px; }
  .project-content-head, .project-content-table > div:not(.project-content-head) { grid-template-columns: minmax(0,1fr) minmax(0,2fr) 48px; gap: 8px; }
  .project-content-table { overflow-wrap: anywhere; }
  .business-node-list { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0 14px 14px; }
  .business-node-list button { min-width: 0; padding: 10px; }
  .business-node-item { min-width: 0; }
  .business-node-item button small { font-size: 13px; }
  .detail-overview-grid, .project-intro-grid, .report-overview-grid { grid-template-columns: minmax(0,1fr); }
  .detail-lifecycle { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .detail-lifecycle div { border-radius: 6px; }
  .doc-detail-card dl { gap: 14px; }
  .operation-log > div { grid-template-columns: 1fr; gap: 4px; padding-block: 12px; }
  .detail-breadcrumb { flex-wrap: wrap; }
  .doc-surface > header, .cockpit-panel > header, .project-section > header,
  .panel-header { padding: 14px; gap: 10px; }
  .doc-surface > header > div, .cockpit-panel > header > div, .panel-header > div { min-width: 0; }
  .attention-actions, .header-actions, .gantt-zoom, .cockpit-toolbar,
  .candidate footer, .workbench-report-item footer, .report-editor-meta,
  .report-editor-meta > div, .report-create-toolbar { flex-wrap: wrap; }
  .attention-actions button { white-space: nowrap; }
  .attention-history-filter { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
  .attention-history-filter label, .attention-history-filter input { width: 100%; min-width: 0; }
  .attention-history-filter > span { display: none; }
  .inline-filters { flex-wrap: wrap; padding-inline: 14px; }
  .attention-feed > div { grid-template-columns: 24px minmax(0,1fr); }
  .attention-feed > div > :last-child { grid-column: 2; }
  .table-wrap, .requirements-table-wrap, .gantt-panel, .requirement-gantt { touch-action: pan-x pan-y; }
  .mobile-scroll-hint { display: block; margin: 4px 14px 8px; color: #536579; font-size: 12px; }
  .table-wrap th, .table-wrap td { padding: 12px; }
  .table-wrap table { min-width: 800px; }
  .table-wrap td { white-space: normal; overflow-wrap: anywhere; max-width: 280px; }
  .table-footer { gap: 12px; flex-wrap: wrap; }
  .table-footer div { flex-wrap: wrap; }
  .project-overview-table table, .requirements-table {
    min-width: 0; width: 100%; table-layout: auto; border-collapse: separate;
  }
  .table-wrap table.requirements-table { min-width: 0; }
  .project-overview-table thead, .requirements-table thead { display: none; }
  .project-overview-table tbody, .requirements-table tbody { display: grid; gap: 12px; }
  .project-overview-table tbody tr, .requirements-table tbody tr {
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid #dce4ed;
    border-radius: 12px; background: #fff; overflow: hidden; padding: 4px;
  }
  .project-overview-table td, .requirements-table td {
    display: block; width: auto !important; min-width: 0; max-width: none; padding: 10px !important;
    white-space: normal; overflow-wrap: anywhere; border: 0; text-overflow: clip;
  }
  .project-overview-table td:before, .requirements-table td:before {
    content: attr(data-mobile-label); display: block; color: #637184; font-size: 12px;
    font-weight: 400; line-height: 1.4; margin-bottom: 6px;
  }
  .project-overview-table td:first-child, .requirements-table td:nth-child(2),
  .project-overview-table td[colspan], .requirements-table td[colspan] { grid-column: 1 / -1; }
  .project-overview-name { min-width: 0; width: 100%; }
  .project-overview-name > div { min-width: 0; }
  .project-overview-name strong, .project-overview-name small { white-space: normal; }
  .requirements-table td button { max-width: 100%; white-space: normal; }
  .project-overview-table td:last-child, .requirements-table td:last-child { align-self: end; }
  .knowledge-type-grid > div { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0 14px 14px; }
  .knowledge-type-grid > div button { grid-template-columns: auto minmax(0,1fr); padding: 10px; gap: 8px; }
  .knowledge-type-grid > div button > :last-child { grid-column: 2; }
  .report-master-list { grid-template-columns: minmax(0,1fr); }
  .report-rule-nav { display: flex; flex-direction: row; overflow-x: auto; }
  .report-rule-nav button { flex-shrink: 0; white-space: nowrap; }
  .report-section-grid, .rule-grid, .system-role-options { grid-template-columns: minmax(0,1fr); }
  .report-editor-main, .report-editor-side > section { padding: 14px; }
  .report-editor-layout { padding: 12px; }
  .report-editor-actions { flex-wrap: wrap; padding: 12px; gap: 8px; }
  .report-editor-actions > span { width: 100%; font-size: 12px; }
  .report-editor-actions button { flex: 1; white-space: nowrap; }
  .requirement-create-actions { bottom: var(--mobile-bottom-space); flex-wrap: wrap; z-index: 10; }
  .requirement-create-actions button { flex: 1; white-space: nowrap; }
  .dialog-backdrop { padding: 8px; padding-top: max(8px, env(safe-area-inset-top,0px)); padding-bottom: max(8px,env(safe-area-inset-bottom,0px)); }
  .dialog, .wide-dialog, .requirement-dialog, .knowledge-dialog {
    width: 100%; max-width: 100%; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
    overscroll-behavior: contain; scroll-padding-top: 68px;
  }
  .dialog > header { min-height: 58px; padding: 6px 14px; gap: 8px; }
  .dialog > header h2 { min-width: 0; overflow-wrap: anywhere; }
  .dialog > header button { width: 44px; height: 44px; flex-shrink: 0; }
  .dialog .form-grid { padding: 16px; grid-template-columns: minmax(0,1fr); }
  .dialog-actions { flex-wrap: wrap; gap: 8px; }
  .dialog-actions button { white-space: nowrap; }
  .permission-form > .dialog-actions { margin: 0 -16px -16px; padding: 12px 16px; }
  .permission-node-row, .permission-node-row label { min-width: 0; white-space: normal; flex-wrap: wrap; }
  .permission-node-row.level-two { padding-left: 16px; }
  .permission-tab-buttons .permission-button-node { padding-left: 24px; }
  .permission-button-node > span:last-child { min-width: 0; flex-wrap: wrap; }
  .permission-matrix-row > label { white-space: normal; }
  .permission-node-row label small, .permission-button-node small { font-size: 12px; overflow-wrap: anywhere; }
  .report-editor-dialog { height: calc(100vh - 16px); height: calc(100dvh - 16px); }
  .dialog .report-editor-meta { padding: 10px 14px; gap: 8px; }
  .rich-requirement-editor { min-height: 200px; overflow-wrap: anywhere; }
  .login-shell { padding: 0; min-height: 100vh; min-height: 100dvh; grid-template-columns: minmax(0,1fr); align-content: start; }
  .login-brand-panel { min-height: 0; padding: 24px 20px 20px; gap: 16px; }
  .login-dolphin-mark { width: 44px; height: 44px; flex-shrink: 0; }
  .login-brand strong { font-size: 18px; }
  .login-brand small { font-size: 11px; }
  .login-brand-panel h1 { margin: 0; font-size: 21px; line-height: 1.5; }
  .login-brand-panel p, .login-eyebrow, .login-brand-panel > small { display: none; }
  .login-form-panel { padding: 20px 16px max(24px,env(safe-area-inset-bottom,0px)); }
  .login-card { width: 100%; padding: 24px; gap: 18px; border-radius: 14px; }
  .login-card h2 { font-size: 24px; }
  .login-card p { margin-bottom: 0; }
  .login-card > small { font-size: 13px; }
}

@media (max-width: 360px) {
  main { padding-inline: 10px; }
  .mobile-nav button { font-size: 11px; }
  .workbench-summary article, .requirement-stat-strip article, .unified-kpi-row article { padding: 12px; }
  .doc-filter-row, .requirement-filter-bar, .requirement-filters,
  .knowledge-type-grid > div, .doc-detail-card dl { grid-template-columns: minmax(0,1fr); }
  .login-card { padding: 20px; }
}

@media (max-width: 800px) and (max-height: 540px) {
  .login-brand-panel { padding-block: 14px; }
  .login-brand-panel > div:nth-child(2) { display: none; }
  .dialog > header { min-height: 48px; }
}

/* Compact presentation: keep every field and action, reduce layout-only space. */
main { font-size: 14px; line-height: 1.45; }
.page-heading, .requirements-heading, .workbench-greeting { margin-bottom: 12px; gap: 10px; }
.workbench-greeting { min-height: 54px; }
.page-heading h1, .requirements-heading h1, .detail-titlebar h1,
.project-detail-heading h1, .workbench-greeting h1 { font-size: 21px; line-height: 1.35; }
.page-heading p, .requirements-heading p, .workbench-greeting p { font-size: 13px; line-height: 1.5; }
.workbench-summary, .requirement-stat-strip, .unified-kpi-row { margin-bottom: 12px; gap: 8px; }
.workbench-summary article, .requirement-stat-strip article, .unified-kpi-row article,
.management-cockpit .cockpit-stats article { min-height: 78px; padding: 10px 12px; border-radius: 10px; }
.workbench-summary strong, .requirement-stat-strip strong, .unified-kpi-row strong,
.management-cockpit .cockpit-stats strong { margin: 3px 0 1px; font-size: 19px; }
.workbench-summary small, .requirement-stat-strip small, .unified-kpi-row small,
.cockpit-stats small { font-size: 12px; line-height: 1.45; }
.workbench-board, .workbench-main-stack, .workbench-side-stack,
.project-detail-content, .project-intro-grid { gap: 10px; }
.doc-surface > header, .cockpit-panel > header, .project-section > header,
.requirements-table-surface > header, .panel-header { min-height: 50px; padding: 10px 12px; gap: 8px; }
.doc-surface h2, .project-section h2, .requirements-table-surface h2,
.cockpit-panel h2, .doc-detail-card h2 { font-size: 16px; line-height: 1.4; }
.doc-surface header p, .project-section header p, .requirements-table-surface header p {
  font-size: 13px; line-height: 1.5;
}
main .empty-state { min-height: 88px; padding: 14px; }
main .empty-state p { margin-top: 6px; font-size: 13px; line-height: 1.5; }
.ai-confirm-item, .workbench-report-item { margin-inline: 12px; padding-block: 10px; }
.ai-confirm-item blockquote { margin-block: 8px; padding: 8px 10px; line-height: 1.5; }
.workbench-report-item > p { margin-block: 8px; line-height: 1.5; }
.doc-filter-row, .requirement-filter-bar { margin-bottom: 10px; gap: 8px; }
.doc-filter-row label, .requirement-filter-bar label, .requirement-filters label { gap: 4px; font-size: 13px; }
.project-overview-filters { padding-bottom: 10px; }
.table-wrap th, .table-wrap td, .requirements-table th, .requirements-table td { padding: 8px 10px; }
.project-description { min-height: 0; padding: 0 12px 12px; line-height: 1.6; }
.project-info dl { padding: 0 12px 10px; }
.project-info dl > div { min-height: 32px; padding-block: 4px; }
.project-info dd { overflow-wrap: anywhere; }
.track-progress-summary { margin-top: 6px; gap: 12px; }
.doc-detail-card { padding: 12px; }
.doc-detail-card h2 { margin-bottom: 10px; }
.doc-detail-card dl { gap: 10px 18px; }
.doc-detail-card p, .doc-detail-card li { line-height: 1.6; }
.dialog .form-grid { gap: 10px 14px; }
.project-edit-modal .form-grid { padding: 18px; }
.project-edit-modal .form-grid input, .project-edit-modal .form-grid select { min-height: 44px; padding: 8px 10px; }
.project-edit-modal .form-grid textarea { min-height: 96px; }

@media (min-width: 801px) {
  main { padding: 20px 22px 32px; min-height: calc(100vh - 68px); }
  .doc-workbench, .doc-requirements-page, .doc-requirement-detail { margin: 0; padding: 0; min-height: 0; }
  .project-detail-shell { margin: 0; padding: 0; min-width: 0; grid-template-columns: 200px minmax(0,1fr); }
}

/* Two useful workbench columns fit once the desktop content is about 800px. */
@media (min-width: 1100px) {
  .workbench-board { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workbench-main-stack, .workbench-side-stack { display: contents; }
  .project-intro-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); align-items: start; }
}

@media (max-width: 800px) {
  main { padding: 12px 12px calc(var(--mobile-bottom-space) + 12px); }
  /* Original component selectors otherwise override the generic touch minimum. */
  main button, .dialog button { min-height: 44px !important; }
  main input:not([type="checkbox"]):not([type="radio"]), main select,
  .dialog input:not([type="checkbox"]):not([type="radio"]), .dialog select { min-height: 44px !important; }
  .page-heading, .requirements-heading, .detail-titlebar,
  .project-detail-heading, .workbench-greeting { gap: 8px; }
  .page-heading h1, .requirements-heading h1, .detail-titlebar h1,
  .project-detail-heading h1, .workbench-greeting h1 { font-size: 20px; }
  .workbench-greeting > div { gap: 8px; }
  .greeting-avatar { width: 36px; height: 36px; }
  .workbench-summary article, .requirement-stat-strip article, .unified-kpi-row article,
  .management-cockpit .cockpit-stats article {
    display: grid; grid-template-columns: minmax(0,1fr) auto; align-content: center;
    align-items: baseline; gap: 3px 6px; min-height: 74px; padding: 8px 10px;
  }
  .workbench-summary strong, .requirement-stat-strip strong, .unified-kpi-row strong,
  .management-cockpit .cockpit-stats strong { margin: 0; font-size: 17px; white-space: nowrap; }
  .workbench-summary small, .requirement-stat-strip small, .unified-kpi-row small,
  .cockpit-stats small { grid-column: 1 / -1; font-size: 12px; }
  .workbench-summary article > span, .requirement-stat-strip article > span,
  .unified-kpi-row article > span, .cockpit-stats article > span { font-size: 13px; }
  .doc-filter-row, .requirement-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .requirement-filter-bar { grid-template-columns: repeat(5,minmax(0,1fr)) 44px; gap: 8px; }
  .requirement-filter-bar > label { grid-column: span 3; }
  .requirement-filter-bar > label:first-child { grid-column: 1 / 6; }
  .requirement-filter-bar > .filter-icon-button { grid-column: 6; grid-row: 1; }
  .requirement-filter-bar label > div, .requirement-filters label > div { min-height: 44px; }
  .product-tree, .knowledge-tree { max-height: 154px; padding: 10px; }
  .product-tree { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .product-tree h2 { grid-column: 1 / -1; margin: 0; font-size: 15px; }
  .product-tree button { margin: 0; padding: 6px; font-size: 13px; }
  .product-tree button span { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .project-tree { max-height: 136px; padding: 10px; }
  .project-tree > header { top: -10px; padding: 0; }
  .project-detail-heading .header-actions { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .project-detail-heading .header-actions > button { padding-inline: 4px; font-size: 13px; justify-content: center; }
  .project-detail-heading .header-actions > button:last-child { grid-column: auto; }
  .project-detail-heading .header-actions svg { width: 14px; }
  .project-progress-line { padding-inline: 12px; }
  .track-progress-summary { margin-left: 12px; justify-content: space-between; gap: 8px; }
  .business-node-list { padding: 0 12px 12px; }
  .business-node-list button { padding: 8px; }
  .inline-filters { gap: 2px; padding-inline: 8px; }
  .inline-filters button { padding-inline: 8px; }
  .table-wrap th, .table-wrap td { padding: 8px; }
  .requirements-table-wrap { padding-inline: 8px; }
  .project-overview-table tbody, .requirements-table tbody { gap: 8px; }
  .project-overview-table tbody tr, .requirements-table tbody tr { padding: 6px; gap: 0 8px; border-radius: 10px; }
  .project-overview-table td, .requirements-table td { padding: 5px 2px !important; line-height: 1.4; }
  .project-overview-table td:before, .requirements-table td:before { font-size: 12px; line-height: 1.3; margin-bottom: 2px; }
  .project-overview-name { gap: 8px; }
  .project-overview-name > span { width: 28px; height: 28px; }
  .project-overview-name small, .project-overview-table td > small, .requirements-table td small { margin-top: 2px; }
  /* Share the first row between the identifier and title, without changing DOM order. */
  .requirements-table tbody tr { grid-template-columns: 62px minmax(0,1fr) minmax(0,1fr); }
  .requirements-table td { grid-column: span 1; }
  .requirements-table td:nth-child(2) { grid-column: 2 / -1; }
  .requirements-table td:nth-child(6), .requirements-table td:nth-child(8) { grid-column: span 2; }
  .requirements-table td[colspan] { grid-column: 1 / -1; }
  .knowledge-type-grid > div { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 0 12px 12px; }
  .knowledge-type-grid > div button { gap: 4px 8px; padding: 8px; }
  .dialog .form-grid { padding: 14px; }
  .permission-form > .dialog-actions { margin: 0 -14px -14px; padding: 10px 14px; }
}

@media (max-width: 360px) {
  main { padding-inline: 10px; }
  .project-detail-heading .header-actions > button { font-size: 12px; }
  .requirements-table tbody tr { grid-template-columns: 50px minmax(0,1fr) minmax(0,1fr); }
}