/* Mobile layout: one navigation drawer, a seven-column calendar and a compact editor. */
.mobile-format-toggle,.day-open{display:none}
.title-input{display:block;resize:none;overflow:hidden;font-family:inherit;line-height:1.3;min-height:1.3em}
body:has(#cloudStatus) #saveStatus{display:none!important}
.top-actions .cloud-status{border:0;background:transparent;font-size:11px;padding:6px;color:var(--muted);min-height:44px}
.top-actions .cloud-status[data-problem=true]{color:var(--accentText)}
.calendar-day-dialog .day-record{display:block;width:100%;margin:8px 0;text-align:left;white-space:normal;overflow-wrap:anywhere}
.calendar-day-dialog .day-record small{display:block;margin-bottom:5px;color:var(--muted)}
@media(max-width:820px),(max-width:1000px) and (max-height:500px){
  html{scroll-padding-top:64px}
  body{--sidebar-w:0px}
  .main,.page,.page-wrap,.editor-stage,.editor-card{min-width:0}
  .sidebar{width:min(300px,calc(100vw - 44px));padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));max-height:100dvh}
  .brand-row,.side-footer{flex-shrink:0}
  .side-spacer{min-height:8px}
  .nav-btn,.side-action{min-height:44px;height:auto;padding-block:10px!important;font-size:14px}
  .nav-icon{flex-shrink:0}
  body.sidebar-collapsed .brand-row{justify-content:flex-start}
  body.sidebar-collapsed .brand-mark{display:grid}
  .side-pop{width:min(270px,calc(100vw - 76px))}
  .manage-pop button{min-height:44px;font-size:14px}
  .theme-card{min-height:68px}
  .topbar{height:56px;padding-top:env(safe-area-inset-top);box-sizing:content-box}
  .topbar-inner{gap:4px;padding:0 8px}
  .mobile-menu,.back-btn{width:44px;height:44px;flex-shrink:0}
  .top-left{flex:1;min-width:0;gap:0}
  .page-crumb{font-size:12px;max-width:100%;min-width:0}
  .date-button{min-height:44px;font-size:12px;white-space:nowrap}
  .page-wrap{padding:20px 14px calc(24px + env(safe-area-inset-bottom))}
  .page-header{gap:12px;margin-bottom:18px;align-items:center}
  .page-header>div{min-width:0}
  .page-title{font-size:25px;overflow-wrap:anywhere}
  .eyebrow{font-size:10px;margin-bottom:6px}
  .page-sub{font-size:12px;line-height:1.5;margin-top:6px}
  .primary-btn,.secondary-btn{min-height:44px;font-size:13px}
  .calendar-card{padding:8px;border-radius:12px;overflow:visible}
  .calendar-inner{min-width:0;width:100%}
  .calendar-head{gap:0;margin-bottom:6px}
  .calendar-head-center{gap:7px;min-width:0}
  .calendar-title{font-size:16px;white-space:nowrap}
  .cal-btn{width:40px;height:44px;flex-shrink:0}
  .cal-today{min-height:40px;padding:7px;font-size:11px;white-space:nowrap}
  .weekdays,.calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
  .weekday{padding:5px 0;font-size:11px;color:var(--muted)}
  .day-cell{min-width:0;min-height:clamp(46px,calc((100svh - 320px)/6),72px);padding:3px}
  .day-number{height:24px;width:24px;font-size:11px}
  .day-status{display:none}
  .day-open{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;border:0;background:transparent;padding:3px;color:var(--accentText);font-size:10px;cursor:pointer}
  .day-open span{background:var(--accentSoft);border-radius:5px;min-width:20px;padding:2px 4px}
  .day-open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .calendar-legend{margin-top:9px;font-size:11px;line-height:1.5;color:var(--muted)}
  .entry-table-head,.entry-row{grid-template-columns:57px 64px minmax(0,1fr) 40px;padding:0 7px}
  .entry-table-head{font-size:11px;color:var(--muted)}
  .entry-row{min-height:60px}
  .entry-date,.entry-symbol{font-size:11px}
  .entry-symbol{white-space:normal;overflow-wrap:anywhere;padding-right:5px}
  .entry-copy{padding-right:4px}
  .entry-title{font-size:13px;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.45;min-height:44px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:5px 0}
  .row-menu-btn{width:40px;height:44px}
  .row-actions{top:42px}
  .row-actions button{min-height:44px;font-size:14px}
  .editor-stage{padding:22px 16px calc(32px + env(safe-area-inset-bottom))}
  .entry-meta{margin-bottom:14px;flex-wrap:wrap;gap:6px}
  .title-input{font-size:28px;margin-bottom:16px}
  .entry-fields{margin-bottom:14px}
  .entry-fields label{font-size:12px}
  .entry-fields input,.entry-fields select,.menu-dialog input,.menu-dialog select,.menu-dialog textarea{font-size:16px!important;min-height:44px}
  .editor{min-height:45svh;padding-bottom:60px}
  .format-row{gap:4px;padding:5px 0;margin-bottom:10px}
  .format-group{padding:0;min-width:0;flex-wrap:wrap;gap:2px}
  .format-btn{min-width:40px;height:44px;font-size:12px;padding:0 7px}
  .format-row select{min-width:0;height:44px;font-size:16px}
  .mobile-format-toggle{display:inline-flex;margin-left:auto;font-size:12px}
  .format-row:not(.expanded) .format-group{display:none}
  .format-row:not(.expanded) .format-group:nth-child(2),.format-row:not(.expanded) .format-group:nth-child(5){display:flex}
  .format-row:not(.expanded) .format-group:nth-child(2) button:nth-child(n+4),.format-row:not(.expanded) .format-group:nth-child(5) button:not(#insertImageButton){display:none}
  .format-row.expanded .format-group:first-child{width:100%;display:grid;grid-template-columns:1.15fr 1fr 1fr}
  .format-swatch{width:40px;height:40px}
  .menu-dialog{padding:18px;width:calc(100vw - 28px);max-height:calc(var(--visual-height,100dvh) - 28px);margin:auto}
  .menu-dialog h2{font-size:19px;overflow-wrap:anywhere}
  .menu-dialog-head{align-items:flex-start}
  .menu-dialog-head button{flex-shrink:0}
  .menu-dialog-actions{flex-wrap:wrap;margin-top:14px}
  .menu-dialog p{font-size:13px}
  .menu-dialog button{min-height:44px}
  .menu-dialog:focus{outline:none}
  .date-pop{max-height:calc(var(--visual-height,100dvh) - 72px);overflow-y:auto}
  .date-pop-day{height:40px;font-size:12px}
  .toast{max-width:calc(100vw - 28px);width:max-content;white-space:normal;text-align:center;bottom:calc(14px + env(safe-area-inset-bottom));font-size:12px}
  .anno-modal{height:var(--visual-height,100dvh);bottom:auto;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .anno-top{min-height:54px;flex-wrap:nowrap;overflow-x:auto;padding:5px 8px;gap:4px;overscroll-behavior-x:contain}
  .anno-top>*{flex-shrink:0}
  .tool-btn,.width-btn{min-width:44px;min-height:44px}
  .color-btn,.custom-color{width:36px;height:36px;flex-shrink:0}
  .anno-viewbar{padding:5px 6px;gap:4px}
  .anno-viewbar .zoom-btn{min-width:34px;height:44px}
  .anno-viewbar #zoomReset{min-width:56px}
  .anno-viewbar #closeAnno{min-height:44px;padding:8px}
  .anno-viewbar input[type=range]{min-width:24px;width:32px}
  .text-pop{max-width:calc(100vw - 20px)}
  .text-input{width:170px;min-width:0;font-size:16px;height:44px}
  .text-grip,.text-confirm{flex-shrink:0;height:44px;min-width:36px}
  .selection-float{max-width:calc(100vw - 16px)}
  .selection-float button{min-height:40px}
}
@media(max-width:360px){
  .page-wrap{padding-inline:10px}
  .calendar-card{padding:5px}
  .calendar-title{font-size:14px}
  .calendar-head-center{gap:4px}
  .date-button{font-size:11px;padding-inline:3px}
  .page-crumb{font-size:11px}
  .entry-table-head,.entry-row{grid-template-columns:64px 52px minmax(0,1fr) 36px;padding-inline:5px}
  .row-menu-btn{width:36px}
}