/* Mobile uses larger type and less empty space, independently of desktop. */
@media (max-width: 800px) {
  :root { font-size:18px; font-weight:500; --muted:#485970; }
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body { font-size:18px; font-weight:500; line-height:1.4; }
  .shell,.main,.content,.two-col,.panel { min-width:0; }
  .content { padding:16px 12px 22px; }
  .topbar { min-height:60px; padding:8px 10px; gap:8px; }
  .topbar .breadcrumbs { font-size:15px; font-weight:600; gap:5px; min-width:0; }
  .breadcrumbs b { overflow-wrap:anywhere; }
  .top-right { gap:4px; }
  .top-right>.icon-btn[data-action="about"] { display:none; }
  .icon-btn { width:40px; min-width:40px; height:40px; padding:8px; }
  .icon-btn svg { width:22px; height:22px; }
  .avatar { font-size:14px; width:32px; height:32px; }
  .avatar.sm { font-size:12px; width:28px; height:28px; }
  .avatar.md { font-size:14px; width:36px; height:36px; }
  .sidebar { width:min(290px,88vw); padding:16px 12px; }
  .sidebar,.sidebar.open { z-index:50; box-shadow:none; }
  .menu-backdrop { position:fixed; inset:0; z-index:40; width:100%; height:100%; padding:0; margin:0; border:0; border-radius:0; background:#14223866; cursor:pointer; touch-action:none; }
  .shell.menu-open>.menu-backdrop { display:block; }
  .sidebar .brand { padding-bottom:18px; }
  .sidebar .workspace { margin-bottom:12px; }
  .sidebar .workspace b { font-size:16px; }
  .sidebar .workspace small { font-size:13px; }
  .sidebar .nav-label { font-size:13px; margin:12px 0 6px; }
  .sidebar .nav-item { font-size:17px; font-weight:600; padding:10px 12px; margin:2px 0; }
  .sidebar .side-project { font-size:16px; }
  .sidebar .demo-indicator,.sidebar .profile small { font-size:14px; }
  .sidebar .profile b { font-size:16px; }
  .eyebrow { font-size:13px; margin-bottom:4px; letter-spacing:1px; }
  .page-heading { margin-bottom:14px; gap:9px; }
  h1,.page-heading h1 { font-size:28px; margin-bottom:5px; line-height:1.2; }
  h2,.panel-head h2 { font-size:20px; font-weight:700; }
  .subtitle { font-size:16px; font-weight:500; line-height:1.4; color:#485970; }
  .heading-actions { gap:8px; }
  .btn,.page-heading .btn { min-height:42px; padding:8px 12px; font-size:16px; font-weight:700; }
  .btn.sm { min-height:38px; font-size:15px; padding:7px 10px; }
  .text-btn { font-size:16px; font-weight:600; }
  .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
  .stat-grid .stat-card { padding:10px 12px; min-width:0; }
  .stat-card .stat-icon { display:none; }
  .stat-grid .stat-card .label { font-size:15px; font-weight:600; padding-right:0; margin-bottom:4px; line-height:1.3; color:#44566e; }
  .stat-card .stat-value { font-size:29px; font-weight:700; line-height:1.15; gap:5px; }
  .stat-card .stat-value small { font-size:16px; font-weight:600; }
  .stat-card .stat-note { font-size:14px; line-height:1.3; font-weight:500; margin-top:4px; color:#4d5e74; }
  .toolbar { margin-bottom:12px; gap:9px; padding:8px 10px; }
  .toolbar-left,.toolbar-right { gap:8px; width:100%; margin-left:0; justify-content:flex-start; }
  .toolbar .separator { display:none; }
  .project-selector { max-width:100%; font-size:18px; font-weight:700; min-height:40px; padding-top:4px; padding-bottom:4px; }
  .toolbar .search-box { min-width:160px; flex:1; padding:8px 10px; }
  .search-box input { font-size:17px; font-weight:500; }
  .filter-select,.my-toggle { font-size:16px; font-weight:600; min-height:42px; padding:8px 10px; max-width:100%; }
  .toolbar-right .filter-select { flex:1 1 125px; min-width:0; }
  .tabs { margin-bottom:12px; gap:18px; }
  .tab { font-size:17px; font-weight:600; padding:10px 1px; }
  .tab span { font-size:14px; }
  .board { display:flex; align-items:flex-start; gap:10px; padding-bottom:10px; scroll-snap-type:x proximity; overscroll-behavior-x:contain; }
  .board .column { flex:0 0 min(360px,calc(100vw - 36px)); min-width:0; min-height:0; padding:10px 8px 6px; scroll-snap-align:start; }
  .column-head { font-size:15px; margin:0 2px 9px; letter-spacing:0; }
  .column-head .count { font-size:14px; }
  .column-head .icon-btn { width:34px; min-width:34px; height:34px; }
  .issue-card { padding:11px 12px 9px; margin-bottom:8px; }
  .issue-card .issue-title { font-size:18px; font-weight:700; line-height:1.35; margin-bottom:7px; color:#26384f; }
  .issue-key { font-size:14px; font-weight:600; color:#4d6079; }
  .card-meta { gap:6px; margin-bottom:6px; }
  .priority { font-size:14px; font-weight:600; }
  .pill { font-size:14px; font-weight:600; padding:4px 7px; }
  .card-release { font-size:14px; font-weight:500; line-height:1.3; margin-top:6px; }
  .card-bottom { font-size:14px; font-weight:600; margin-top:7px; padding-top:7px; gap:6px; line-height:1.3; }
  .card-bottom svg { width:16px; height:16px; }
  .add-card { font-size:16px; font-weight:600; padding:8px 4px; min-height:38px; }
  .board-caption { font-size:14px; line-height:1.4; margin-top:4px; }
  .panel { margin-bottom:12px; }
  .panel-head { padding:12px; gap:8px; }
  .panel-head p { font-size:15px; line-height:1.35; margin-top:4px; }
  .overview-release { padding:12px; }
  .two-col,.release-grid,.project-grid,.permission-grid { gap:12px; }
  .release-grid,.project-grid,.permission-grid { grid-template-columns:1fr; }
  .release-card,.project-card,.role-card { padding:14px; }
  .release-card h3,.project-card h3 { font-size:21px; font-weight:700; margin:10px 0 5px; line-height:1.3; }
  .release-card p,.project-card p { font-size:17px; font-weight:500; line-height:1.4; margin-bottom:10px; min-height:0; }
  .release-icon,.project-icon { width:32px; height:32px; }
  .release-footer { font-size:16px; margin-top:9px; padding-top:8px; gap:8px; }
  .progress-label { font-size:15px; font-weight:600; gap:8px; }
  .progress { margin:7px 0; height:6px; }
  .role-card h3 { font-size:18px; margin-bottom:6px; }
  .role-card p { font-size:16px; line-height:1.4; font-weight:500; }
  .report-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; gap:10px; }
  .report-filters label { font-size:15px; font-weight:600; min-width:0; gap:5px; }
  .report-filters input,.report-filters select { width:100%; font-size:16px; font-weight:500; min-height:42px; padding:8px; }
  .report-filters>.btn { grid-column:1/-1; justify-self:start; }
  table { font-size:17px; font-weight:500; line-height:1.4; }
  th { font-size:14px; padding:10px; }
  td { padding:11px 10px; }
  .task-cell { font-weight:600; }
  .task-cell small,.user-cell small { font-size:15px; font-weight:500; }
  .user-cell b { font-weight:700; }
  .report-total { font-size:17px; font-weight:700; }
  .bar-list { padding:0 12px 12px; }
  .bar-row { margin-top:12px; }
  .bar-label { font-size:17px; font-weight:600; }
  .bar-label b { font-size:16px; font-weight:700; }
  .bar-bg { margin-top:6px; height:7px; }
  .chart { height:170px; padding:12px 12px 20px; gap:8px; }
  .chart-col small,.chart-col b { font-size:13px; font-weight:600; }
  .section-label { font-size:15px; margin:18px 0 10px; }
  .subtle,.focus-label,.inline-project { font-size:15px; font-weight:500; line-height:1.4; }
  .badge { font-size:14px; font-weight:600; }
  .demo-strip { font-size:15px; padding:10px 12px; margin-top:14px; gap:7px; line-height:1.4; }
  .footer-note { font-size:14px; margin:14px 0; }
  .empty { padding:24px 12px; }
  .empty h3 { font-size:20px; }
  .empty p { font-size:17px; line-height:1.4; }
  dialog { width:calc(100vw - 16px); max-height:94vh; max-height:94dvh; }
  .modal-header { padding:14px; gap:8px; }
  .modal-header h2 { font-size:24px; }
  .modal-header p { font-size:16px; margin-top:4px; line-height:1.35; }
  .modal-body { padding:14px; }
  .modal-footer { padding:10px 14px; gap:8px; }
  .form-grid { gap:12px; }
  .field { gap:5px; }
  .field>label { font-size:16px; font-weight:600; }
  .field input,.field select,.field textarea { font-size:18px; font-weight:500; min-height:44px; padding:9px 10px; }
  .field textarea { min-height:90px; line-height:1.4; }
  .field small { font-size:15px; line-height:1.35; }
  .check-list { gap:10px; padding:4px 0; }
  .check-list label { font-size:17px; }
  .modal-subhead { font-size:15px; margin:16px 0 8px; }
  .time-summary,.notice { font-size:17px; line-height:1.4; padding:11px; }
  .form-error,.issue-info { font-size:16px; }
  .toast { font-size:16px; padding:11px 14px; bottom:16px; }
  .login-form>p { font-size:17px; }
  .planning-actions { gap:7px; margin-top:9px; }
  .planning-actions .btn.sm { font-size:15px; }
  .scope-row { grid-template-columns:minmax(0,1fr) auto; gap:5px 8px; padding:10px; }
  .scope-row>.subtle { grid-column:1; font-size:14px; }
  .scope-row>.text-btn { font-size:17px; }
  .scope-row small { font-size:14px; }
  .issue-planning .pill { font-size:14px; }
  .issue-planning svg { width:15px; height:15px; }
  .backlog-actions { align-items:flex-start; }
  .backlog-actions select { font-size:16px; max-width:100%; min-height:40px; }
  .planning-scope-head { margin-top:16px; }
  .planning-empty { padding:12px; }
}

/* Turn wide records into compact, readable records on a phone. */
@media (max-width: 640px) {
  .table-wrap .mobile-table { display:block; width:100%; }
  .mobile-table>thead { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .mobile-table>tbody { display:block; }
  .mobile-table>tbody>tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 12px; padding:12px; border-bottom:1px solid var(--line); }
  .mobile-table>tbody>tr:last-child { border-bottom:0; }
  .mobile-table>tbody>tr>td { display:block; min-width:0; min-height:0; max-width:none!important; width:auto; border:0; padding:0; white-space:normal; overflow-wrap:anywhere; font-size:17px; line-height:1.35; }
  .mobile-table>tbody>tr>td:first-child { grid-column:1/-1; font-size:18px; font-weight:600; }
  .mobile-table>tbody>tr>td::before { content:attr(data-label); display:block; font-size:14px; font-weight:600; line-height:1.3; color:#485970; margin-bottom:3px; }
  .mobile-table>tbody>tr>td[data-label=""]::before { display:none; }
  .mobile-table>tbody>tr>td:last-child:has(button) { justify-self:end; align-self:end; }
  .mobile-table .task-cell { min-width:0; }
  .mobile-table .task-cell small { margin-bottom:3px; }
  .mobile-table .user-cell { gap:7px; }
  .mobile-table .user-cell span { min-width:0; }
  .mobile-table .user-cell small { margin-top:2px; }
  .mobile-table td .inline { flex-wrap:wrap; gap:5px; }
  .mobile-table td .bar-bg { max-width:100%; }
  .mobile-table .task-cell .text-btn { font-size:15px!important; }
  .mobile-table .pill { white-space:normal; }
  .mobile-table td[data-label="Share of time"] { grid-column:1/-1; }
  .mobile-table>tfoot { display:block; }
  .mobile-table>tfoot>tr { display:flex; justify-content:space-between; gap:10px; padding:10px 12px; }
  .mobile-table>tfoot>tr>td { padding:0; border:0; white-space:normal; font-size:17px; }
  .mobile-table>tfoot td:empty { display:none; }
  .time-table>tbody>tr { grid-template-areas:"date hours" "issue issue" "person edit" "note note"; gap:6px 10px; align-items:center; }
  .time-table>tbody>tr>td::before { display:none; }
  .time-table .time-date { grid-area:date; font-size:16px; font-weight:600; }
  .time-table .entry-year { display:inline; color:#52637b; margin-left:5px; font-size:14px; font-weight:500; }
  .time-table .time-person { grid-area:person; font-size:16px; font-weight:600; }
  .time-table .time-issue { grid-area:issue; font-size:18px; font-weight:600; line-height:1.35; }
  .time-table .time-issue>small { margin:3px 0 0; font-size:14px; }
  .time-table .time-note { grid-area:note; color:#465970; font-size:16px; font-weight:500; line-height:1.4!important; }
  .time-table .time-hours { grid-area:hours; justify-self:end; font-size:22px; font-weight:700; }
  .time-table .time-hours b { font-weight:700!important; }
  .time-table .time-edit { grid-area:edit; justify-self:end; }
  .time-table .time-edit .icon-btn { min-width:40px; width:40px; height:40px; }
}

@media(max-width:800px){
  .ticket-discussion{margin-top:20px;padding-top:16px}
  .ticket-discussion h3{font-size:20px}.ticket-comment{padding:14px 0}
  .comment-heading b,.comment-composer>label,.comment-edit-label{font-size:17px}
  .comment-heading time,.attachment-picker small,.comment-hint{font-size:14px}
  .comment-body,.comment-composer textarea,.comment-edit{font-size:18px;line-height:1.6}
  .comment-actions{gap:12px}.comment-actions .text-btn{min-height:44px;font-size:16px}
  .attachment-download{padding:10px;min-height:52px;font-size:16px}
  .attachment-download small,.selected-files li{font-size:15px}
  .attachment-picker{gap:8px}.attachment-picker .btn,.comment-composer>.btn{min-height:44px}
}

@media(max-width:800px){
  .attachment-preview{padding:8px}.attachment-preview img{max-height:180px}
  .preview-hint,.preview-status{font-size:15px}
  .image-viewer-header{padding:10px 12px}.image-viewer-header h2{font-size:17px}
  .image-viewer-header .icon-btn{min-width:44px;width:44px;height:44px}
  .image-viewer-body{padding:8px}.image-viewer-footer{padding:10px 12px}
}

@media(max-width:800px){
  .field .check-list label{font-size:16px;min-height:44px;padding:8px 10px}
  .export-actions{gap:7px}.export-actions .btn{font-size:15px}
  .panel-head:has(.export-actions){flex-wrap:wrap}
  .toolbar .project-selector{padding:8px 10px}
}
@media(max-width:800px){
  .page-heading:has(.export-actions){flex-wrap:wrap}
  .page-heading:has(.export-actions)>.heading-actions{width:100%}
}