/* Q Trello: touch navigation and layouts for phones, tablets and short screens. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
html,body{width:100%;min-height:100%;overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{overflow:hidden}
.main,.page,.analysis-page,.calendar,.table-wrap,.board-canvas,.cards,.drawer-content{min-height:0}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
.nav-scrim,.sidebar-mobile-head,.touch-card-move{display:none}
.board-canvas,.cards,.page,.analysis-page,.calendar,.table-wrap,.drawer-content,.overlay,.timeline-scroll{-webkit-overflow-scrolling:touch}
.task-body{position:relative}
.topbar .search{min-width:90px}
.inbox-form,.inbox-add{min-width:0}
.dialog-body,.card-main,.card-actions,.card-layout{min-width:0}
.dialog-body>form,.dialog-body .row{max-width:100%}
.workspace-option strong,.rule-card strong,.template-row strong{overflow-wrap:anywhere}
@media(max-width:1180px){
 .workspace{padding:10px;gap:0;height:calc(100dvh - 60px - var(--safe-top));height:calc(100svh - 60px - var(--safe-top));height:calc(100dvh - 60px - var(--safe-top))}
 .topbar{height:calc(60px + var(--safe-top));padding-top:var(--safe-top)}
 .mobile-toggle{display:inline-flex;flex-shrink:0;min-height:44px;min-width:44px}
 .sidebar{display:none}
 .sidebar.open{display:flex;position:fixed;inset:0 auto 0 0;width:min(320px,calc(100vw - 48px));z-index:51;border-radius:0 16px 16px 0;border-left:0;box-shadow:18px 0 65px #0008;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}
 .sidebar-mobile-head{display:flex;align-items:center;justify-content:space-between;padding:12px 17px;border-bottom:1px solid #ffffff12}
 .sidebar-mobile-head button{min-height:44px;min-width:44px}
 .nav-scrim.visible{display:block;position:fixed;inset:0;z-index:50;background:#070b15b8;border-radius:0;padding:0;backdrop-filter:blur(2px)}
 .sidebar .nav button,.board-link{min-height:46px}
 .sidebar .workspace-picker{min-height:44px;max-width:210px}
 .sidebar .workspace-name{padding:15px 17px}
 .sidebar .workspace-name small{font-size:12px}
 .sidebar .sidebar-bottom{padding:12px 17px}
 .sidebar .section-label{padding-top:7px}
 .sidebar .board-links{overscroll-behavior:contain}
 .topbar .badge{display:none}
 .topbar{gap:14px}
 .board-header{padding:13px 18px;min-height:65px;height:auto}
 .board-title{max-width:45vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .board-canvas{scroll-snap-type:x proximity;scroll-padding-inline:18px;gap:14px;overscroll-behavior-x:contain}
 .board-canvas>.list{width:305px;scroll-snap-align:start;min-height:100px}
 .board-canvas>.collapsed-list{scroll-snap-align:start}
 .board-footer{padding-bottom:var(--safe-bottom);height:calc(32px + var(--safe-bottom));flex-shrink:0}
 .toolbar{padding:11px 18px;gap:8px}
 .toolbar button{min-height:42px}
 .toolbar>.row{font-size:12px}
 .toolbar .view-switch button{font-size:12px}
 .page-heading{gap:18px;flex-wrap:wrap}
 .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .metric-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .auth-art{padding:35px}
 .auth-art h1{font-size:32px}
}
@media(pointer:coarse),(max-width:1180px){
 button:not(.swatch):not(.cal-card),.icon-btn{min-height:44px}
 .icon-btn{min-width:44px}
 .list-head .icon-btn{min-width:40px;min-height:40px}
 .task-card{cursor:pointer}
 .touch-card-move{display:inline-flex;position:absolute;right:2px;bottom:2px;min-width:40px;min-height:40px;background:transparent;color:#b7c9e6;z-index:1;padding:10px}
 .task-body{padding-bottom:42px}
 .task-meta{padding-right:4px}
 .touch-card-move .icon{height:17px;width:17px}
 .check-row{min-height:44px;gap:12px}
 input[type=checkbox]{width:22px;height:22px}
 .menu-item{min-height:48px}
 .list-head{cursor:default}
 .cards{overscroll-behavior-y:contain}
 .task-card:active{border-color:#85b8ff}
}
@media(max-width:760px){
 .topbar{height:calc(58px + var(--safe-top));padding:var(--safe-top) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));gap:7px}
 .topbar>.icon-btn:not(.mobile-toggle){min-width:40px;padding:5px}
 .topbar .brand{flex-shrink:0}
 .topbar .brand-mark{height:34px;width:32px}
 .topbar .search{flex:1;min-width:50px;max-width:none}
 .topbar .search input{height:42px;padding:9px 8px 9px 32px;font-size:16px}
 .topbar .search>.icon{left:9px;top:12px;width:17px;height:17px}
 .topbar .create-btn{min-width:42px;min-height:42px;padding:10px}
 .topbar [data-action=notifications]{display:none}
 .topbar .avatar{width:31px;height:31px}
 .workspace{padding:6px;height:calc(100dvh - 58px - var(--safe-top))}
 .main{border-radius:12px}
 .board-header{min-height:62px;flex-wrap:nowrap;padding:9px 11px;gap:5px}
 .board-title{max-width:calc(100vw - 190px);font-size:16px;line-height:1.5}
 .board-header .icon-btn,.board-header .share-btn{min-width:40px;min-height:40px;padding:8px}
 .board-header .separator,.board-header .avatars{display:none}
 .toolbar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:8px 10px;gap:6px;flex-shrink:0}
 .toolbar::-webkit-scrollbar{display:none}
 .toolbar>.view-switch{flex-shrink:0;max-width:none;margin:0;padding:2px}
 .toolbar .view-switch button{min-height:40px;padding:8px 10px;font-size:12px}
 .toolbar .view-switch button.active span{max-width:150px}
 .toolbar .view-switch button:not(.active){display:none}
 .toolbar>.row{flex-shrink:0;font-size:12px;gap:6px;padding:8px 10px;min-height:44px}
 .toolbar>.row .icon{width:17px;height:17px}
 .board-canvas{padding:4px 10px 15px;scroll-padding-inline:10px;gap:12px}
 .board-canvas>.list{width:min(310px,calc(100vw - 58px));padding:9px;max-height:100%}
 .list-head{padding:0 3px 7px;min-height:42px}
 .list-head strong{font-size:14px}
 .task-title{font-size:14px;line-height:1.7}
 .task-label{font-size:11px}
 .task-body{padding:12px 12px 42px}
 .add-card{min-height:44px;font-size:14px;margin-top:6px}
 .add-list{width:min(280px,calc(100vw - 58px));font-size:14px}
 .board-footer{height:calc(25px + var(--safe-bottom));padding-inline:10px;font-size:9px}
 .board-footer>span:first-child .icon{height:12px;width:12px}
 .page{padding:22px 15px 25px}
 .page-heading{margin-bottom:20px;gap:12px}
 .page-heading>div{max-width:100%}
 .page-heading h1{font-size:23px;line-height:1.5;overflow-wrap:anywhere}
 .page-heading p{font-size:13px;line-height:1.7}
 .page-heading>.primary{width:100%;justify-content:center}
 .page-heading>.row{width:100%}
 .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .stat{padding:13px 9px}
 .stat small{line-height:1.6;display:block}
 .board-tile{height:155px}
 .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .dashboard-grid{grid-template-columns:1fr}
 .metric{padding:15px}
 .metric strong{font-size:27px}
 .chart-row{grid-template-columns:minmax(65px,95px) minmax(45px,1fr) 20px}
 .table-wrap{overflow:auto;max-width:100%;overscroll-behavior-x:contain;padding:0 0 15px}
 .task-table{min-width:650px}
 .task-table th,.task-table td{padding:12px;font-size:12px}
 .inbox-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
 .inbox-add>input{grid-column:1/-1}
 .inbox-add>select{max-width:none!important;min-width:0}
 .inbox-card{padding:14px;gap:10px}
 .inbox-card>.grow p{font-size:14px;line-height:1.65;overflow-wrap:anywhere}
 .inbox-card small{font-size:11px}
 .overlay{padding:0;align-items:stretch;overscroll-behavior:contain}
 .dialog,.dialog.wide{width:100%;max-width:100%;max-height:100dvh;min-height:min(100dvh,420px);border-radius:0;border:0;display:flex;flex-direction:column;overflow:hidden}
 .dialog-head{padding:calc(9px + var(--safe-top)) 14px 9px;min-height:64px;flex-shrink:0;background:#252a33;z-index:4;gap:9px}
 .dialog-head h2{font-size:17px;line-height:1.5;overflow-wrap:anywhere}
 .dialog-head .icon-btn{flex-shrink:0}
 .dialog>.dialog-body,.dialog>form{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain}
 .dialog-body{padding:18px 16px 22px}
 .dialog-footer{padding:12px 16px calc(12px + var(--safe-bottom));background:#252a33;flex-shrink:0;gap:9px;align-items:center;border-top:1px solid #475165}
 .dialog>form>.dialog-footer{position:sticky;bottom:0;z-index:3}
 .dialog-footer .save-state{display:none}
 .dialog-footer button{min-height:44px}
 .dialog-footer>.primary{flex:1;justify-content:center}
 .dialog-footer>.danger{flex:1;justify-content:center}
 .card-dialog-cover{height:60px;flex-shrink:0}
 .card-dialog-title{font-size:18px;padding:6px 0;line-height:1.6;min-height:45px}
 .card-layout{display:flex;flex-direction:column;gap:20px}
 .card-main h3{font-size:15px;margin-top:24px}
 .card-actions{display:flex;flex-direction:column;gap:7px;padding-top:18px}
 .card-actions label{margin:6px 0 2px}
 .card-actions button{font-size:14px;min-height:46px}
 .card-actions label.row{display:flex;flex-direction:row}
 .card-actions .subtle{margin-top:10px!important}
 .card-main .row>input:not([type=checkbox]){min-width:0}
 .card-main>.row.wrap{gap:12px}
 .card-main .task-label{padding:5px 8px}
 input:not([type=checkbox]):not([type=color]),textarea,select,.card-extra-fields input,.card-extra-fields select,.permission-fields select{font-size:16px;min-height:44px;max-width:100%}
 textarea{line-height:1.7;min-height:115px}
 input[type=datetime-local]{display:block;min-width:0;width:100%;box-sizing:border-box}
 .field{margin-bottom:20px}
 label,.card-extra-fields label{font-size:13px;line-height:1.6}
 .extra-grid{grid-template-columns:1fr;gap:0}
 .comment-text{font-size:14px}
 .comment-head{line-height:1.65}
 .comment-head small{display:block;margin-left:0}
 .attachment{gap:8px}
 .attachment>a{font-size:13px}
 .swatches{gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
 .swatch{height:46px}
 .workspace-option{padding:14px 10px;min-height:70px}
 .workspace-option .workspace-icon{width:38px;min-width:38px}
 .workspace-option strong{font-size:14px;white-space:normal;line-height:1.5}
 .workspace-option small{font-size:12px}
 .list-colors button{height:46px}
 .rule-card .row.wrap{gap:7px}
 .rule-card .row.wrap button{font-size:12px;flex:1;justify-content:center}
 .permission-fields .field{grid-template-columns:1fr;gap:9px}
 .permission-fields label{font-size:14px}
 .template-row{gap:9px}
 .template-row>.grow{flex-basis:100%}
 .drawer{position:absolute;inset:0;width:100%;max-width:100%;border:0;z-index:12}
 .drawer-head{padding:12px 16px;flex-shrink:0}
 .drawer-content{padding:15px 16px calc(15px + var(--safe-bottom));overscroll-behavior:contain}
 .drawer-head .icon-btn{min-height:44px;min-width:44px}
 .filter-panel{padding:12px;gap:9px;max-height:45dvh;overflow:auto;flex-shrink:0}
 .filter-panel>*{flex-basis:calc(50% - 9px);min-width:0}
 .calendar{padding:8px 10px 18px}
 .calendar-grid{min-width:600px}
 .month-nav strong{min-width:120px;font-size:13px}
 .month-nav .icon-btn{min-width:40px}
 .timeline-page .row.spread{gap:14px}
 .timeline-page .month-nav{justify-content:space-between;width:100%}
 .map-sidebar{max-height:260px}
 .osm-map{min-height:320px}
 #toast{bottom:calc(18px + var(--safe-bottom));font-size:13px;width:max-content;max-width:calc(100vw - 28px)}
 .auth-form{padding:30px 22px calc(30px + var(--safe-bottom))}
 .auth-box .brand{font-size:21px;margin-bottom:35px}
 .auth-box h2{font-size:26px;line-height:1.5}
}
@media(min-width:761px) and (max-width:1180px){
 input:not([type=checkbox]):not([type=color]),textarea,select{font-size:16px;min-height:44px}
 .overlay{padding:25px}
 .dialog{max-height:calc(100dvh - 50px);display:flex;flex-direction:column}
 .dialog>.dialog-body,.dialog>form{overflow:auto;min-height:0;overscroll-behavior:contain}
 .dialog-head{flex-shrink:0}
 .dialog-footer{position:sticky;bottom:0;background:#252a33;z-index:2;flex-shrink:0}
 .dialog.wide{width:900px;max-width:100%}
 .card-layout{grid-template-columns:minmax(0,1fr) 205px;gap:22px}
 .card-actions select,.card-actions input{font-size:14px}
 .task-title{font-size:14px}
 .analysis-page{padding:18px 22px 25px}
 .metric{padding:18px}
 .board-header .private{display:flex}
 .map-page{grid-template-columns:260px minmax(0,1fr)}
 .task-table{min-width:700px}
 .table-wrap{max-width:100%;overflow:auto}
 .inbox-add{flex-wrap:wrap}
 .inbox-add>input{flex-basis:100%}
 .inbox-add>select{max-width:none!important;flex:1}
}
@media(max-height:520px) and (max-width:1180px){
 .topbar{height:calc(50px + var(--safe-top))}
 .workspace{height:calc(100dvh - 50px - var(--safe-top));padding:4px}
 .board-header{min-height:50px;padding-block:4px}
 .toolbar{padding-block:4px}
 .board-footer{display:none}
 .overlay{padding:0}
 .dialog,.dialog.wide{max-height:100dvh;max-width:100%;border-radius:0}
 .dialog-head{min-height:50px;padding-block:4px}
 .sidebar.open{width:300px}
 .sidebar-mobile-head{padding-block:3px}
 .sidebar .workspace-name{padding-block:7px}
 .sidebar .nav{padding-block:6px}
 .sidebar .nav button{min-height:40px;padding-block:7px}
 .sidebar{overflow:auto}
 .sidebar .board-links{min-height:90px;flex-shrink:0}
 .sidebar .sidebar-bottom{display:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.board-title-edit{display:flex;align-items:center;gap:8px;background:transparent;color:inherit;font:inherit;max-width:100%;min-width:0;min-height:40px;padding:2px 0;border-radius:4px;text-align:left}.board-title-edit>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-title-edit>.icon{width:15px;height:15px;color:#d5c8e5;opacity:.65}.board-title-edit:hover{background:#ffffff0a}.board-title-edit:focus-visible{outline:2px solid #b7d5ff}
/* Keep primary actions visible while the form body scrolls. */
.board-title{min-width:0}
@media(max-width:1180px){
 .dialog>form{display:flex;flex-direction:column;overflow:hidden;min-height:0;flex:1}
 .dialog>form>.dialog-body{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain}
 .dialog>form>.dialog-footer{position:relative;flex-shrink:0}
}