/* Responsive, print-first Lean Canvas. Canvas UI is an adapted Lean Canvas visual layout. */
.canvas-app { --c-ink:#183249; --c-mute:#637687; --c-border:#dce7ed; --c-bg:#fbfdfe; margin:1.7rem 0 2rem; color:var(--c-ink); font-size:15px; }
.canvas-toolbar { background:#142b47; color:#fff; border-radius:17px 17px 0 0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:15px; padding:17px 20px; }
.canvas-toolbar-left { display:flex; flex-direction:column; gap:3px; }
.canvas-toolbar-left strong { font-size:1.13rem; }
.canvas-toolbar-left #canvas-status { font-size:.78rem; color:#bddeeb; }
.canvas-label-overline { text-transform:uppercase; font-size:.65rem; letter-spacing:.19em; color:#65d5d0; font-weight:850; }
.canvas-toolbar-actions { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.c-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; font-family:inherit; font-size:.77rem; font-weight:760; border:1px solid transparent; border-radius:9px; padding:9px 11px; line-height:1.25; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .15s,transform .15s; }
.c-btn:hover { transform:translateY(-1px); }
.c-btn-outline { background:#203b59; border-color:#365471; color:white; }
.c-btn-outline:hover { background:#365373; }
.c-btn-muted { border-color:#63839e; color:#edf6fd; background:transparent; }
.c-btn-muted:hover { background:#264766; }
.c-btn-primary { color:#123347; background:#72e4d8; border-color:#72e4d8; }
.c-btn-primary:hover { background:#a8f6ee; }
.canvas-document { padding:16px; background:#fff; border:1px solid #d5e1e8; box-shadow:0 20px 48px rgba(13,48,74,.09); }
.canvas-doc-header { display:flex; gap:20px; align-items:end; justify-content:space-between; margin-bottom:13px; }
.canvas-wordmark { display:flex; gap:12px; align-items:center; flex-shrink:0; }
.canvas-wordmark span { display:block; font-size:.57rem; letter-spacing:.18em; font-weight:800; color:#77909d; }
.canvas-wordmark strong { display:block; color:#172a46; font-size:1.5rem; letter-spacing:-.045em; line-height:1; font-weight:900; }
.canvas-wordmark-boxes { width:36px; height:36px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:3px; transform:rotate(-7deg); }
.canvas-wordmark-boxes i { background:#2c9fa9; border-radius:2px; }.canvas-wordmark-boxes i:nth-child(2){background:#f2bb66}.canvas-wordmark-boxes i:nth-child(3){background:#5a79bb}.canvas-wordmark-boxes i:nth-child(4){background:#ea8c7f}
.canvas-meta { display:grid; grid-template-columns:minmax(130px,1.2fr) minmax(120px,1fr) minmax(105px,.78fr) 58px; gap:7px; flex:1; max-width:625px; }
.canvas-meta label { font-size:.56rem; letter-spacing:.09em; font-weight:900; color:#718596; margin:0; display:flex; flex-direction:column; gap:4px; white-space:nowrap; }
.canvas-meta input { width:100%; min-width:0; height:31px; padding:5px 7px; border:1px solid var(--c-border); color:#183249; border-radius:6px; background:#f8fbfd; font-size:.82rem; letter-spacing:0; font-family:inherit; }
.canvas-grid { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); grid-template-rows:220px 220px 180px; gap:8px; }
.canvas-cell { background:#fff; border:1px solid #cedee7; border-top:5px solid var(--accent,#9db8c8); padding:12px; min-width:0; min-height:0; display:flex; flex-direction:column; border-radius:8px; overflow:hidden; }
.cell-problem {grid-area:1 / 1 / 3 / 3; --accent:#eaa08b;}
.cell-solution {grid-area:1 / 3 / 2 / 5; --accent:#779ce7;}
.cell-metrics {grid-area:2 / 3 / 3 / 5; --accent:#ab9cdb;}
.cell-uvp {grid-area:1 / 5 / 3 / 7; --accent:#e5b365;}
.cell-advantage {grid-area:1 / 7 / 2 / 9; --accent:#b99edb;}
.cell-channels {grid-area:2 / 7 / 3 / 9; --accent:#74c4b8;}
.cell-customers {grid-area:1 / 9 / 3 / 11; --accent:#6bbfab;}
.cell-costs {grid-area:3 / 1 / 4 / 6; --accent:#eea3a6;}
.cell-revenue {grid-area:3 / 6 / 4 / 11; --accent:#9ad09c;}
.canvas-cell-heading { display:flex; gap:3px; justify-content:space-between; align-items:flex-start; min-height:22px; line-height:1.13; }
.canvas-cell-heading > div { display:flex; gap:5px; align-items:flex-start; }
.canvas-cell-heading a {font-size:.88rem; color:#182e43 !important; text-decoration:none !important; font-weight:900; letter-spacing:-.027em; }
.canvas-cell-heading a:hover {color:#086c81 !important; text-decoration:underline !important;}
.canvas-number { font-size:.57rem; padding:3px 4px; min-width:21px; text-align:center; border-radius:4px; background:#eaf1f6; color:#647b8f; font-weight:900; }
.canvas-tint { font-size:.53rem; padding:4px 5px; color:#8194a2; font-weight:850; letter-spacing:.07em; }
.canvas-hint {font-size:.68rem !important; line-height:1.3 !important; color:#738493; margin:5px 0 8px !important;}
.canvas-cell textarea { display:block; resize:vertical; width:100%; flex:1; min-height:35px; border:1px solid transparent; background:#f5f9fc; border-radius:5px; outline:none; color:#183249; padding:7px 8px; font:inherit; font-size:.8rem; line-height:1.36; transition:background .18s,border-color .18s; }
.canvas-cell textarea::placeholder {color:#99a9b5; opacity:1;}
.canvas-cell textarea:focus {background:#fff; border-color:#5fa7df; box-shadow:0 0 0 2px rgba(65,148,198,.13);}
.canvas-subhead { margin-top:10px; border-top:1px dashed #cbdbe4; padding-top:10px; color:#425d72; font-size:.67rem; letter-spacing:.065em; font-weight:900; }
.canvas-cell .subhint {margin:3px 0 5px !important;}
.canvas-cell textarea.canvas-subtext { flex:0 0 24%; }
.cell-uvp textarea.canvas-subtext, .cell-customers textarea.canvas-subtext { flex-basis:22%; }
.canvas-sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.canvas-doc-footer { display:flex; justify-content:space-between; gap:12px; font-size:.61rem; color:#7d90a0; line-height:1.3; padding:11px 3px 0; }
.canvas-instructions { display:flex; align-items:center; gap:20px; justify-content:space-between; border-radius:0 0 16px 16px; background:#edf6fa; padding:13px 18px; }
.canvas-instructions strong {font-size:.85rem; color:#21435c;}
.canvas-instructions p {color:#55728a; font-size:.79rem; margin:3px 0 0 !important; line-height:1.4 !important;}
.canvas-progress-track {flex:0 0 145px; height:8px; border-radius:100px; background:#cadce8; overflow:hidden;}
.canvas-progress-track > div {height:100%; width:0; border-radius:100px; transition:width .3s; background:linear-gradient(90deg,#2998b2,#2bc3a4);}
.canvas-app input:focus-visible,.canvas-app button:focus-visible,.canvas-app label.c-btn:focus-visible { outline:2px solid #13b6be; outline-offset:2px; }
[data-bs-theme="dark"] .canvas-app { color:#183249; }
@media (max-width:1250px){ .canvas-doc-header{align-items:stretch;flex-direction:column;}.canvas-meta{max-width:none;} .canvas-grid{grid-template-rows:230px 230px 190px;} .canvas-cell{padding:9px;} .canvas-cell-heading a {font-size:.78rem;} }
@media (max-width:780px){ .canvas-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:9px;} .canvas-cell {grid-area:auto;min-height:195px;padding:13px;} .cell-problem,.cell-uvp,.cell-customers{min-height:310px;} .canvas-cell-heading a{font-size:1rem;} .canvas-cell textarea.canvas-subtext{flex-basis:65px;} .canvas-toolbar-actions{justify-content:start;} }
@media (max-width:520px){ .canvas-grid{grid-template-columns:1fr;} .canvas-meta{grid-template-columns:repeat(2,minmax(0,1fr));} .canvas-document{padding:9px;} .canvas-instructions{align-items:stretch;flex-direction:column;gap:9px;} .canvas-progress-track{flex-basis:auto;width:100%;} }
/* Print the canvas as one actual page, hiding the entire Quarto book chrome. */
@media print {
  html, body { background:#fff !important; color:#000 !important; margin:0 !important; padding:0 !important; }
  body:has(#lean-canvas-app) #quarto-header, body:has(#lean-canvas-app) #quarto-sidebar, body:has(#lean-canvas-app) #quarto-margin-sidebar, body:has(#lean-canvas-app) #quarto-footer, body:has(#lean-canvas-app) .sidebar, body:has(#lean-canvas-app) .page-columns .margin-sidebar, body:has(#lean-canvas-app) nav, body:has(#lean-canvas-app) .quarto-title-block, body:has(#lean-canvas-app) .chapter-intro, body:has(#lean-canvas-app) #quarto-content > .sidebar, body:has(#lean-canvas-app) main.content > :not(#lean-canvas-app), body:has(#lean-canvas-app) .screen-only { display:none !important; }
  body:has(#lean-canvas-app) #quarto-content, body:has(#lean-canvas-app) main.content, body:has(#lean-canvas-app) .page-columns, body:has(#lean-canvas-app) .page-layout-article, body:has(#lean-canvas-app) #quarto-document-content { display:block !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; overflow:visible !important; box-shadow:none !important; }
  body:has(#lean-canvas-app) main.content > *:not(#lean-canvas-app){display:none !important;}
  body:has(#lean-canvas-app) main.content {padding:0 !important;}
  #lean-canvas-app.canvas-app {margin:0 !important; width:100% !important; font-size:10px !important; break-inside:avoid !important; page-break-inside:avoid !important;}
  #lean-canvas-app .canvas-document {padding:2mm !important; border:0 !important; box-shadow:none !important;}
  #lean-canvas-app .canvas-doc-header {display:flex !important; flex-direction:row !important; align-items:center !important; gap:10px !important; margin-bottom:2.2mm !important;}
  #lean-canvas-app .canvas-wordmark strong {font-size:18px !important;}
  #lean-canvas-app .canvas-wordmark span{font-size:6px !important;}
  #lean-canvas-app .canvas-wordmark-boxes{width:25px;height:25px;}
  #lean-canvas-app .canvas-meta {grid-template-columns:1.2fr 1fr 95px 55px !important; gap:4px !important; width:65% !important; max-width:none !important; flex:0 0 65% !important;}
  #lean-canvas-app .canvas-meta label{font-size:6px !important;gap:2px !important;}
  #lean-canvas-app .canvas-meta input{height:21px !important;border-color:#d7e3e8 !important;font-size:9px !important;padding:2px 4px !important;color:#152f41 !important;}
  #lean-canvas-app .canvas-grid{display:grid !important;grid-template-columns:repeat(10,minmax(0,1fr)) !important; grid-template-rows:2.23in 2.23in 1.63in !important;gap:4px !important;}
  #lean-canvas-app .canvas-cell{padding:5px 7px !important;border-radius:4px !important;border:1px solid #bdcdd6 !important;border-top:4px solid var(--accent,#9db8c8) !important;overflow:hidden !important;min-height:0 !important;break-inside:avoid !important; print-color-adjust:exact;-webkit-print-color-adjust:exact;}
  #lean-canvas-app .cell-problem{grid-area:1 / 1 / 3 / 3 !important;}
  #lean-canvas-app .cell-solution{grid-area:1 / 3 / 2 / 5 !important;}
  #lean-canvas-app .cell-metrics{grid-area:2 / 3 / 3 / 5 !important;}
  #lean-canvas-app .cell-uvp{grid-area:1 / 5 / 3 / 7 !important;}
  #lean-canvas-app .cell-advantage{grid-area:1 / 7 / 2 / 9 !important;}
  #lean-canvas-app .cell-channels{grid-area:2 / 7 / 3 / 9 !important;}
  #lean-canvas-app .cell-customers{grid-area:1 / 9 / 3 / 11 !important;}
  #lean-canvas-app .cell-costs{grid-area:3 / 1 / 4 / 6 !important;}
  #lean-canvas-app .cell-revenue{grid-area:3 / 6 / 4 / 11 !important;}
  #lean-canvas-app .canvas-cell-heading {min-height:15px !important;}
  #lean-canvas-app .canvas-cell-heading a{font-size:10px !important;color:#183249 !important;}
  #lean-canvas-app .canvas-number{font-size:6px !important;min-width:15px !important;padding:2px !important;}
  #lean-canvas-app .canvas-tint{font-size:6px !important;}
  #lean-canvas-app .canvas-hint{font-size:7.2px !important;line-height:1.18 !important;margin:2px 0 5px !important;}
  #lean-canvas-app .canvas-subhead{font-size:8px !important;margin-top:4px !important;padding-top:5px !important;}
  #lean-canvas-app .canvas-cell textarea{display:none !important;}
  #lean-canvas-app .print-mirror{font-size:9.3px;line-height:1.31;white-space:pre-wrap;overflow-wrap:anywhere;overflow:hidden;flex:1;color:#142a40;background:transparent;padding:1px;}
  #lean-canvas-app .print-mirror.sub{flex:0 0 26%;}
  #lean-canvas-app .canvas-doc-footer {font-size:7px !important;padding-top:5px !important;}
}