.strategy-canvas { min-height:100dvh; background:#f2f2f7; color:#17171c; }
.canvas-header { min-height:70px; background:#fff; border-bottom:1px solid #dedfe6; display:flex; align-items:center; gap:22px; padding:12px 24px; }
.canvas-header>a { display:flex; }
.canvas-team { font-size:16px; letter-spacing:-.025em; }
.canvas-tools,.canvas-cost,.lane-summary,.point,.tile-foot>span { display:flex; align-items:center; gap:8px; }
.canvas-tools { margin-left:auto; gap:14px; }
.canvas-tools small { color:#566472; font-size:11px; }
.canvas-tools>div>small { display:block; margin-bottom:2px; }
.point { gap:4px; white-space:nowrap; }
.canvas-cost { font-size:12px; gap:14px; }
.canvas-avatar { border-radius:50%; background:#dce9ff; object-fit:contain; }
.avatar-stack { border:0; background:transparent; display:flex; align-items:center; padding:8px 0 8px 8px; }
.avatar-stack>* { margin-left:-7px; border:1px solid white; }
.avatar-stack small { background:#eff1f6; border-radius:50%; padding:3px; }
.info-circle { border:1px solid #c8cbd3; border-radius:50%; background:#fff; width:32px; height:32px; font:bold 18px Georgia,serif; }
.canvas-name { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.canvas-status { margin:0; padding:10px 26px; background:#e2ebff; }
.canvas-lanes { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(265px,1fr); gap:16px; padding:38px 26px; overflow-x:auto; align-items:stretch; min-height:calc(100dvh - 70px); scroll-snap-type:x proximity; scroll-padding:26px; }
.stage-lane { min-width:0; padding:18px 16px; background:#fbfbfd; border:1px solid white; border-radius:24px; box-shadow:0 4px 14px #2526380c; scroll-snap-align:start; }
.stage-lane h2 { font-size:19px; margin:0 0 6px; }
.lane-question { color:#515663; font-size:13px; line-height:1.45; min-height:38px; margin:0 0 10px; }
.lane-summary { gap:9px; font-size:11px; font-weight:650; margin-bottom:17px; }
.tactic-glyph { object-fit:contain; vertical-align:middle; }
.tactic-art { object-fit:contain; flex:none; }
.tactic-tile { background:#fff; border-radius:21px; padding:12px; margin-bottom:12px; box-shadow:0 5px 13px #2424320c; }
.tile-open,.deck-choice { display:flex; width:100%; text-align:left; align-items:flex-start; gap:10px; border:0; background:transparent; color:inherit; padding:0; }
.tile-open>span,.deck-choice>span { display:grid; gap:4px; }
.tile-open { min-height:100px; }
.tile-open strong,.deck-choice strong { font-size:17px; line-height:1.2; }
.tile-open span span,.deck-choice span span { font-size:14px; line-height:1.4; }
.tile-modes,.filter-segments { display:flex; background:#ededf1; padding:3px; border-radius:12px; margin:12px 0; }
.tile-modes button,.filter-segments button { flex:1; min-width:0; border:0; border-radius:9px; background:transparent; font-size:11px; padding:7px 2px; min-height:38px; color:#353741; }
.tile-modes button[aria-pressed=true],.filter-segments button[aria-pressed=true] { background:white; font-weight:bold; box-shadow:0 2px 6px #14141912; }
.tile-modes button:disabled { opacity:1; cursor:default; }
.tactic-tile>.canvas-cost { justify-content:center; font-weight:600; }
.tile-foot { border:0; width:100%; display:flex; align-items:center; justify-content:space-between; background:none; margin-top:18px; padding:3px 0; color:#666c77; }
.tile-foot>span { font-size:12px; gap:4px; }
.add-tactic { width:100%; min-height:114px; border:1px dashed #abaeb8; border-radius:12px; background:#fff; color:#0459cd; font-weight:600; box-shadow:0 6px 12px #28283808; }
.add-tactic:hover,.deck-choice:hover:not(:disabled) { background:#f1f6ff; }
.canvas-dialog { position:fixed; inset:0 0 0 auto; margin:0; padding:0; width:min(465px,100vw); max-width:100vw; height:100dvh; max-height:100dvh; border:none; border-left:1px solid #dcdde5; color:#191a21; background:#fff; overflow:auto; }
.canvas-dialog::backdrop { background:#1a203851; }
.canvas-dialog>header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; background:#fff; padding:20px 24px; border-bottom:1px solid #e2e3e8; }
.canvas-dialog>header h2 { margin:0; font-size:23px; }
.canvas-dialog>header button { border:none; border-radius:50%; width:36px; height:36px; font-size:23px; background:#f1f2f5; }
.drawer-body { padding:24px; }
.drawer-body h3 { margin-top:22px; }
.drawer-body li { padding:0 0 12px 3px; line-height:1.45; }
.drawer-body ol { padding-left:18px; }
.filter-segments { margin:0 0 16px; }
.filter-segments button { font-size:14px; min-height:38px; }
.deck-item { border:1px solid #dfe2e8; border-radius:16px; padding:14px; margin-bottom:10px; }
.deck-choice { border-radius:8px; }
.deck-choice small { color:#365679; }
.deck-choice:disabled { opacity:.65; }
.canvas-dialog form,.canvas-dialog label { display:grid; gap:7px; }
.canvas-dialog form { margin-top:15px; gap:12px; }
.canvas-dialog label { font-weight:600; font-size:13px; }
.canvas-dialog select,.canvas-dialog textarea,.canvas-dialog input { max-width:100%; width:100%; padding:10px; background:#fff; color:#222; border:1px solid #c3c8d1; border-radius:7px; font-size:16px; }
.detail-lead { display:flex; gap:17px; align-items:center; }
.detail-lead p { margin:0; }
.card-prompt { background:#eff5ff; padding:15px; border-radius:12px; margin:16px 0; }
.canvas-dialog details { border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:14px 0; }
.discussion-note { border-bottom:1px solid #eee; padding:12px 0; overflow-wrap:anywhere; }
.discussion-note p { white-space:pre-wrap; margin:4px 0; }
.card-detail-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.fac-lanes { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:20px 0; }
.fac-lanes>section { background:#f5f6fa; padding:12px; border-radius:10px; }
.fac-lanes h3 { font-size:16px; }
.fac-tactic { display:flex; align-items:center; gap:6px; background:white; border:1px solid #dedfe4; border-radius:8px; margin:6px 0; text-align:left; width:100%; }
@media(max-width:700px) {
  .canvas-team { display:none; }
  .canvas-name { position:static; width:auto; height:auto; clip-path:none; padding:14px 20px 0; margin:0; font-size:14px; color:#505965; }
  .canvas-header { padding:10px 14px; gap:5px; }
  .canvas-header>a img { width:64px; height:auto; }
  .canvas-tools,.canvas-cost { gap:8px; }
  .canvas-lanes { grid-auto-columns:min(82vw,310px); padding:18px 20px 26px; scroll-padding:20px; min-height:calc(100dvh - 100px); }
  .canvas-tools .canvas-cost { font-size:11px; }
  .canvas-header .canvas-avatar { width:23px; height:23px; }
  .drawer-body { padding:18px; }
}

.canvas-error { position:sticky; top:77px; margin:0; padding:12px 22px; background:#fff1de; color:#754512; z-index:1; }
.tactic-tile[draggable=true] { cursor:grab; }

.canvas-header { position:sticky; top:0; z-index:10; }
.tactic-tile { position:relative; }
.tile-menu { position:absolute; top:7px; right:7px; z-index:2; }
.tile-menu summary { list-style:none; width:30px; height:30px; display:grid; place-items:center; background:#fff; border-radius:50%; font-size:23px; cursor:pointer; }
.tile-menu summary::-webkit-details-marker { display:none; }
.tile-menu[open] { z-index:5; }
.tile-menu-options { position:absolute; right:0; top:32px; width:172px; padding:5px; border:1px solid #dfe2e8; border-radius:12px; background:white; box-shadow:0 8px 24px #171d3026; }
.tile-menu-options button { display:block; width:100%; padding:12px; border:0; border-radius:8px; background:white; text-align:left; font-size:13px; }
.tile-menu-options button:hover { background:#edf4ff; }
.tile-open { padding-top:22px; }
.move-dialog { inset:0; margin:auto; height:fit-content; max-height:90dvh; width:min(440px,calc(100vw - 28px)); border:1px solid #dedfe6; border-radius:20px; box-shadow:0 20px 60px #17203835; }
.canvas-notifications { position:fixed; inset:auto 16px 18px auto; width:min(390px,calc(100vw - 32px)); padding:0; border:0; background:transparent; color:white; overflow:visible; }
.canvas-toast { display:flex; align-items:center; gap:12px; border-radius:12px; background:#1c2d42; padding:13px 15px; box-shadow:0 4px 18px #10203030; margin-top:8px; font-size:14px; line-height:1.4; }
.canvas-toast button { margin-left:auto; flex-shrink:0; width:28px; height:28px; background:transparent; color:white; border:0; font-size:22px; }
.drag-over { outline:2px solid #0868f9; outline-offset:-2px; background:#f0f5ff; }
@media(max-width:380px) { .canvas-tools .avatar-stack { display:none; } }

.card-drag-source { opacity:.3; }
.card-drag-ghost { position:fixed; top:0; left:0; z-index:30; pointer-events:none; opacity:1; max-height:220px; overflow:hidden; box-shadow:0 14px 32px #14213b40; transform-origin:top left; margin:0; }
.card-drop-marker { position:fixed; z-index:31; height:4px; border-radius:4px; background:var(--blue); pointer-events:none; }
.canvas-dragging .canvas-lanes { scroll-snap-type:none; }
@media(pointer:coarse) {
  .tactic-tile { -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
}
.touch-drag-hint { display:none; }
@media(pointer:coarse) {
  .touch-drag-hint { display:block; position:absolute; top:12px; left:14px; font-size:11px; color:#586274; }
}
.canvas-dragging .canvas-notifications { visibility:hidden; pointer-events:none; }

.canvas-dragging, .canvas-dragging .tactic-tile { cursor:grabbing; }

.discussion-image { display:block; width:100%; margin-top:10px; padding:0; border:1px solid #dce0e8; border-radius:12px; background:#f5f6fa; overflow:hidden; text-align:center; }
.discussion-image:disabled { opacity:1; cursor:default; }
.discussion-image img { display:block; width:100%; max-height:260px; object-fit:contain; }
.discussion-image img[hidden] { display:none; }
.discussion-image span { display:block; padding:24px 12px; color:#647581; font-size:13px; }
.discussion-image span[hidden] { display:none; }
.image-dialog { inset:0; margin:auto; width:min(1000px,calc(100vw - 24px)); height:fit-content; max-height:94dvh; border:1px solid #dce0e8; border-radius:16px; }
.image-dialog>header h2 { font-size:17px; overflow-wrap:anywhere; padding-right:12px; }
.image-dialog>header button { flex-shrink:0; }
.image-preview-body { padding:16px; display:grid; gap:16px; justify-items:center; }
.image-preview-body>img { max-width:100%; max-height:calc(94dvh - 180px); object-fit:contain; }

.canvas-dialog .workshop-brief { display:block; padding:24px 18px 18px; margin:0; color:var(--ink); }
.workshop-brief h2 { font-size:24px; line-height:1.15; margin:0; }
.workshop-brief>h2:not(:first-child) { margin-top:32px; padding-top:24px; border-top:1px solid var(--line); }
.workshop-brief h3 { font-size:17px; line-height:1.15; margin:28px 0 12px; }
.workshop-brief p { font-size:15px; line-height:1.65; color:var(--muted); margin:16px 0 0; }
.brief-challenge-art { width:100%; margin:8px 0 0; overflow:hidden; }
.brief-challenge-art img { display:block; width:100%; height:auto; object-fit:contain; margin-block:-14%; }
.proto-personas { margin:16px 0 0; padding:0; border:0; display:grid; gap:12px; }
.proto-personas legend { font-size:11px; font-weight:650; color:#243f50; margin-bottom:12px; }
.canvas-dialog .proto-persona { position:relative; display:block; cursor:pointer; }
.proto-persona input { position:absolute; width:1px; height:1px; opacity:0; }
.proto-persona-content { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:7px; min-height:90px; color:#476075; }
.proto-persona-content>img { flex-shrink:0; object-fit:contain; }
.proto-persona-content>span { display:grid; gap:6px; }
.proto-persona-content strong { font-size:16px; font-weight:700; line-height:1.3; }
.proto-persona-content>span>span { font-size:13px; font-weight:400; line-height:20px; }
.proto-persona input:checked + .proto-persona-content { border:2px solid var(--blue); padding:9px; color:var(--blue-dark); }
.proto-persona input:focus-visible + .proto-persona-content { outline:3px solid #91bfff; outline-offset:3px; }
.proto-persona:has(input:disabled) { cursor:default; }
.canvas-dialog .brief-hypothesis { display:block; font-size:11px; font-weight:650; color:#243f50; margin-top:24px; }
.brief-optional { color:var(--muted); font-weight:400; padding-left:5px; }
.canvas-dialog .brief-hypothesis textarea { display:block; resize:vertical; margin-top:8px; min-height:101px; line-height:1.6; font-weight:400; }
.brief-lane-example { height:314px; overflow:hidden; display:flex; justify-content:center; padding:10px 0; }
.brief-lane-example>section { width:180px; min-width:180px; padding:5px 10px 20px; border:1px solid #fff; border-radius:15px; background:#fbfbfd; box-shadow:0 3px 9px #2526380c; }
.brief-lane-example h4 { font-size:10px; margin:0 0 10px; letter-spacing:0; }
.brief-example-cost { display:flex; gap:5px; align-items:center; font-size:6px; }
.brief-example-cost .point { gap:2px; }
.brief-example-cost .tactic-glyph { width:10px; height:10px; }
.brief-lane-example article { display:flex; flex-direction:column; justify-content:space-between; padding:5px; margin:15px 0 8px; height:164px; border-radius:15px; background:white; box-shadow:0 3px 8px #2526380c; }
.brief-example-title { display:flex; gap:5px; }
.brief-example-title>span { display:grid; gap:3px; font-size:9px; line-height:1.2; }
.brief-example-title b { font-size:10px; }
.brief-example-modes { display:flex; align-items:center; gap:2px; background:#ededf1; border-radius:8px; padding:2px; font-size:6px; text-align:center; }
.brief-example-modes>* { flex:1; padding:7px 2px; }
.brief-example-modes b { background:white; border-radius:6px; }
.brief-example-footer { display:flex; align-items:center; justify-content:space-between; font-size:7px; color:#a0a4ac; }
.brief-example-footer .tactic-glyph { width:10px; height:10px; }
.brief-example-add { height:75px; border:1px dashed #97979799; border-radius:8px; display:grid; place-items:center; font-size:8px; color:var(--blue); background:white; }
.brief-discussion-example { height:314px; overflow:hidden; padding:10px 0; display:flex; align-items:flex-end; justify-content:center; }
.brief-discussion-example img { width:200px; height:343px; object-fit:cover; flex-shrink:0; }
.brief-budget-example { height:210px; overflow:hidden; padding-top:10px; display:flex; justify-content:center; }
.brief-budget-example img { width:313px; height:681px; max-width:none; object-fit:fill; flex-shrink:0; transform:translateY(-46px); }
.brief-panel[open] { display:flex; flex-direction:column; overflow:hidden; }
.brief-panel>header { flex-shrink:0; }
.canvas-dialog.brief-panel .workshop-brief { flex:1; min-height:0; overflow-y:auto; padding-bottom:24px; scroll-padding-block:20px; }
.brief-actions { display:flex; align-items:stretch; gap:10px; flex-shrink:0; padding:14px 18px max(14px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:white; }
.brief-actions .button { flex:1; min-width:0; font-size:12px; padding:12px; }
.brief-cancel { flex:0 0 94px; border:0; border-radius:8px; background:transparent; color:var(--blue); font-size:12px; font-weight:600; padding:10px 6px; }
.brief-cancel:hover { background:var(--soft-blue); }
.canvas-brief-summary { padding:14px 26px 0; color:var(--ink); }
.canvas-brief-summary strong { font-size:14px; }
.canvas-brief-summary p { margin:4px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; color:#515663; }
.panel .canvas-brief-summary { padding:0 0 16px; }

.scenario-hero .scenario-foot { width:100%; padding:17px 0 0; background:transparent; color:inherit; border:0; border-top:1px solid #ffffff60; font-size:14px; font-weight:600; text-align:left; text-decoration:none; }
.scenario-foot::after { content:""; position:absolute; inset:0; cursor:pointer; }
.scenario-hero:has(.scenario-foot:focus-visible) { outline:3px solid var(--blue-dark); outline-offset:4px; }
.scenario-hero:hover .scenario-foot { text-decoration:underline; }
.landing-brief { align-self:flex-start; padding:0; border:0; background:none; color:var(--blue); font:inherit; }
.landing-brief:hover { text-decoration:underline; }
.canvas-header picture, .canvas-header picture img { display:block; }
@media(min-width:701px) { .canvas-header picture img { width:197px; height:auto; } }
.tile-modes:has(button:enabled), .filter-segments:has(button:enabled) { background:#e7f1ff; }