/* Canvas workspace: steady colors, large working surface, short controls. */
@media screen {
  .app-shell{grid-template-columns:196px minmax(0,1fr)}
  .sidebar{padding-top:26px}.brand{font-size:21px}
  .topbar{height:56px;padding:0 26px}
  .page-content{max-width:1500px;padding:18px 26px 20px}
  .page-heading{margin-bottom:10px;gap:14px}
  .title-line{margin-top:0}.title-line h1{font-size:24px;line-height:1.45;letter-spacing:-.6px}
  .document-label:empty{display:none}
  .document-label{font-size:12px}
  .date-button{font-size:13px;min-height:44px;padding:8px 12px}
  .page-navigation{margin-bottom:10px}
  .page-tabs button{font-size:15px;min-height:46px}
  .page-tabs button span{font-size:12px}
  .text-button{font-size:13px}
  .work-area,.work-area.single-column{display:block}
  .board-toolbar{margin-bottom:10px;gap:10px;min-height:44px}
  .board-trail{font-size:14px}.board-trail button{font-size:14px;min-height:44px;color:#486451}
  .board-trail strong{font-size:15px}
  .view-switch{padding:2px;gap:2px;background:#e7ece8}
  .view-switch button{min-height:40px;min-width:66px;font-size:14px;padding:6px 14px}
  .canvas-shell{position:relative;isolation:isolate;width:100%;height:clamp(440px,calc(100dvh - 265px),850px);border:1px solid #d6dfd8;border-radius:13px;overflow:hidden;background:#f5f8f5}
  #canvasViewport{width:100%;height:100%}
  .canvas-navigation{position:absolute;right:14px;top:14px;z-index:4;max-width:calc(100% - 28px)}
  .canvas-navigation select{border:1px solid #c8d5cb;border-radius:8px;min-height:44px;max-width:240px;background:#fff;color:#354e3c;padding:8px 30px 8px 13px;font-size:14px;box-shadow:0 2px 6px #1f35230b;text-overflow:ellipsis}
  .canvas-controls{position:absolute;z-index:4;bottom:14px;left:14px;display:flex;align-items:center;background:#fff;border:1px solid #c8d5cb;box-shadow:0 3px 12px #233e2810;border-radius:10px;padding:3px;gap:0}
  .canvas-controls button{height:44px;min-width:44px;padding:0 12px;border-radius:7px;font-size:13px;white-space:nowrap;font-weight:550}
  .canvas-controls button:hover{background:#eaf0ec}
  #zoomIn,#zoomOut{font-size:22px;padding:0}
  #zoomValue{width:49px;text-align:center;font-size:12px;color:#526a59;font-variant-numeric:tabular-nums}
  .control-divider{height:22px;width:1px;background:#d9e1dc;margin:0 4px}
  .canvas-gesture{position:absolute;z-index:3;right:18px;bottom:31px;color:#536e5c;font-size:12px;pointer-events:none;background:#f5f8f5e8;padding:3px 5px;border-radius:4px}
  .board-bottom{min-height:42px;font-size:12px;color:#536c5c}
  .board-bottom .text-button{font-size:13px}
  .board-wrap{max-width:900px;margin:0 auto;box-shadow:none}
  .board-column .board-wrap .list-board .cell.goal{min-height:105px}
  .reading-panel .panel-eyebrow{display:none}
  .reading-panel .panel-header{padding:17px 18px}
  .reading-panel .panel-heading h2{font-size:20px}
  .reading-panel .panel-footer{padding:10px 18px}
  .check-shape{border-color:#758b7c}
  .star-button{color:#677e6d}
  .action-row.completed .action-edit,.weekly-item.finished strong{color:#536d5b}
  .panel-footer,.board-bottom,.progress-summary{color:#536d5b}
  .icon-button,.panel-heading .icon-button,.title-line .icon-button{min-width:44px;width:44px;height:44px}
  .area-row,.action-edit{min-height:48px}
  .reference-info{color:#526a5c}
  #exampleDialog{width:min(580px,calc(100vw - 28px))}
  #exampleHeading:focus{outline:none}
  #exampleDialog h2{margin:8px 0 18px}
  #exampleDialog .dialog-actions{padding-bottom:12px}
  .reference-area,.reference-goal{font-size:16px;min-height:82px}
  .reference-actions{border-color:var(--color);margin-bottom:0}
  #createDialog{width:min(500px,calc(100vw - 28px))}
  #createGoal{min-height:116px;font-size:18px}
  #editDialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(410px,calc(100vw - 28px));height:100dvh;max-height:100dvh;border-radius:16px 0 0 16px;border-right:0;padding:26px;box-shadow:-14px 0 70px #253a2826}
  #editDialog::backdrop{background:#233b3024;backdrop-filter:none}
  #editDialog form{min-height:100%;display:flex;flex-direction:column}
  #editDialog .dialog-top span{max-width:280px;overflow-wrap:anywhere;line-height:1.5}
  #editDialog h2{font-size:24px;margin-top:10px}
  #editDialog #editTitle{font-size:18px;min-height:140px;line-height:1.65}
  #editDialog .dialog-checks{gap:20px;flex-wrap:wrap}
  #editDialog .dialog-checks label{font-size:15px;color:#354e3c}
  .selection-count{font-size:12px;color:#5c7464;margin:4px 0 16px}
  #editDialog .dialog-actions{position:sticky;bottom:-26px;margin-top:auto;flex-wrap:wrap;padding-top:22px}
  .clear-button{font-size:12px;line-height:1.5;max-width:160px;text-align:left}
  #weekScreen{max-width:900px;margin:0 auto}
  .week-heading{margin-top:24px}
  .weekly-text strong{font-size:16px}
  .toast{z-index:20}
}
@media screen and (max-width:1050px){
  .app-shell{grid-template-columns:1fr}.sidebar{display:none}.breadcrumb{display:none}
  .mobile-documents{display:flex;min-width:0;gap:6px;align-items:center;font-size:12px;color:#586e60}
  .mobile-documents select{min-height:44px;max-width:260px;min-width:0;border:0;background:transparent;font-size:14px;color:#354e3c;text-overflow:ellipsis}
  .mobile-only{display:inline-flex}.save-status{display:none}
  .canvas-shell{height:clamp(440px,calc(100dvh - 258px),800px)}
}
@media screen and (max-width:600px){
  .topbar{height:52px;padding:0 12px;gap:4px}
  .mobile-documents{font-size:0}.mobile-documents select{max-width:170px;font-size:14px}
  .top-actions{gap:0}.top-actions .text-button{font-size:12px}
  .page-content{padding:12px 12px 16px;max-width:none}
  .page-heading{align-items:center;flex-wrap:nowrap;gap:6px;margin-bottom:4px}
  .title-group{width:auto;flex:1;min-width:0}
  .title-line h1{font-size:20px;line-height:1.4}
  .document-label{font-size:11px}
  .reference-source{margin-left:7px;padding:3px 0}
  .date-button{font-size:11px;padding:6px;gap:4px;margin-top:0;min-height:44px;border-color:transparent;background:transparent}
  .date-button svg{width:15px}
  .page-tabs{gap:20px}.page-tabs button{font-size:14px;min-height:44px}
  .page-navigation{margin-bottom:7px}.page-navigation>.text-button{font-size:12px;padding:7px 0}
  .board-toolbar{margin-bottom:7px;gap:6px;flex-wrap:nowrap}
  .board-trail{min-width:0;gap:5px}.board-trail button{font-size:12px;white-space:nowrap}.board-trail strong{font-size:13px;line-height:1.45}
  .view-switch button{min-width:55px;min-height:40px;padding:6px 8px;font-size:13px}
  .canvas-shell{height:clamp(420px,calc(100dvh - 245px),750px);border-radius:10px}
  .canvas-navigation{right:10px;top:10px}.canvas-navigation select{min-height:40px;max-width:195px;font-size:13px;padding-left:10px}
  .canvas-controls{left:50%;transform:translateX(-50%);bottom:10px;padding:2px;max-width:calc(100% - 16px)}
  .canvas-controls button{padding:0 8px;font-size:12px}.canvas-controls .control-divider{margin:0 2px}
  .canvas-gesture{display:none}
  .board-bottom{font-size:11px;gap:5px}.board-bottom .text-button{font-size:12px}
  .board-wrap{padding:6px}.reading-panel .panel-header{padding:15px 12px}
  #editDialog{inset:auto 0 0;width:100%;height:auto;max-height:88dvh;margin:0;border-radius:18px 18px 0 0;padding:20px 20px max(18px,env(safe-area-inset-bottom));border-bottom:0;overflow-y:auto}
  #editDialog form{min-height:0}
  #editDialog::before{content:"";display:block;width:36px;height:4px;background:#c4d0c7;border-radius:5px;margin:-8px auto 12px}
  #editDialog .dialog-actions{bottom:-20px;margin-top:16px;padding-top:12px}
  #editDialog #editTitle{min-height:110px;font-size:17px}
  #editDialog h2{margin:5px 0 15px}
  .clear-button{max-width:130px}
  #exampleDialog{padding:20px;max-height:calc(100dvh - 24px)}
  .reference-area,.reference-goal{font-size:14px;min-height:76px}
  #exampleDialog .dialog-actions{padding-bottom:10px}
}
@media screen and (max-width:360px){
  .mobile-documents select{max-width:135px}
  .date-button{font-size:10px}
  .canvas-controls button{padding:0 6px}
  #zoomValue{width:42px}
  .canvas-shell{height:clamp(400px,calc(100dvh - 235px),680px)}
}
@media print{
  .canvas-shell,.canvas-navigation,.canvas-controls,.canvas-gesture{display:none!important}
  .board-wrap{display:block!important;max-width:none}
  .board-wrap .all-board{display:grid}
  .board-trail,.view-switch{display:none!important}
}
@media screen{.cv-title,.cv-summary-title{word-break:keep-all}.cv-area .cv-kicker{display:none}}
@media screen{
  .canvas-controls button[aria-pressed=true]{background:#eaf1ec;color:#2f563b}
  .cv-group-summary:not(.cv-goal-summary){position:relative;padding:28px 25px 150px;gap:0}
  .cv-group-summary:not(.cv-goal-summary)>.cv-kicker{display:none}
  .cv-group-summary:not(.cv-goal-summary)>.cv-meta{position:absolute;left:26px;bottom:47px;line-height:1.2}
  .cv-miniature{position:absolute;right:26px;bottom:26px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;width:108px;height:108px}
  .cv-miniature i{border:3px solid var(--cv-color);border-radius:3px;opacity:.35;background:white}
  .cv-miniature .cv-mini-filled{opacity:.65;background:var(--cv-light)}
  .cv-miniature .cv-mini-center,.cv-miniature .cv-mini-done{opacity:1;background:var(--cv-color)}
}
@media screen and (max-width:600px){#editDialog{max-width:none}}