.canvas-root {
  min-width: 0;
  container-type: inline-size;
  color: var(--ink-graphite);
}
.canvas-root [hidden] { display: none; }
.canvas-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
}
.canvas-views { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--grid); }
.canvas-view-button {
  min-height: 36px;
  padding: 7px 16px;
  border: 0;
  border-radius: 0;
  background: var(--panel);
  color: var(--graphite-mid);
  font: 500 12px/1 var(--font-ui);
  text-transform: none;
}
.canvas-view-button + .canvas-view-button { border-left: 1px solid var(--grid); }
.canvas-view-button:hover { color: var(--accent-blue); background: var(--blue-wash); }
.canvas-view-button[aria-pressed="true"] { background: var(--accent-blue); color: #fff; }
.canvas-actions { flex-wrap: wrap-reverse; gap: 7px 14px; }
.canvas-count { margin: 0; color: var(--graphite-mid); font: 11px/1.4 var(--font-mono); }
.canvas-gap-count { min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--accent-blue); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.canvas-recheck, .canvas-trace {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--grid);
  border-radius: 0;
  color: var(--accent-blue);
  background: var(--panel);
  font: 500 12px/1.25 var(--font-ui);
  cursor: pointer;
}
.canvas-root button:focus-visible, .canvas-root a:focus-visible, .flow-plot:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: -2px;
}
.canvas-summary { max-width: 84ch; margin: 4px 0 14px; color: var(--graphite-mid); font-size: 14px; }
.canvas-recheck-status:empty { margin: 0; }
.canvas-recheck-status, .canvas-empty { color: var(--graphite-mid); font: 12px/1.5 var(--font-mono); }
.canvas-empty { margin: 0; padding: 16px; }

.canvas-petal, .canvas-flow {
  border: 1px solid var(--grid);
  background: var(--panel);
}
.canvas-petal {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
  align-items: stretch;
}
.petal-paper, .flow-plot {
  background-color: var(--panel);
  background-image: linear-gradient(to right, rgb(81 85 91 / 5%) 1px, transparent 1px),
                    linear-gradient(to bottom, rgb(81 85 91 / 5%) 1px, transparent 1px);
  background-size: 24px 24px;
}
.petal-paper {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 320px;
  padding: 12px 20px;
}
.petal-paper::before, .petal-paper::after {
  content: "+";
  position: absolute;
  color: #74787d;
  font: 14px/1 var(--font-mono);
}
.petal-paper::before { top: 10px; left: 12px; }
.petal-paper::after { right: 12px; bottom: 10px; }
.petal-drawing { display: block; width: min(100%, 394px); height: auto; overflow: visible; }
.petal-guides { fill: none; stroke: #b9c0c4; stroke-width: .8; }
.petal-leaf { cursor: pointer; outline: none; }
.petal-blade { fill: var(--panel); stroke: var(--graphite-mid); stroke-width: 1.25; }
.petal-vein { fill: none; stroke: var(--verdigris); stroke-width: 1; }
.petal-terminal { fill: var(--panel); stroke: var(--graphite-mid); stroke-width: 1; }
.petal-number { fill: var(--graphite-mid); font: 12px var(--font-mono); }
.petal-leaf[data-fill-state="missing"] .petal-blade { stroke-dasharray: 3 3; }
.petal-leaf[data-fill-state="missing"] .petal-vein { stroke: var(--grid); }
.petal-leaf:is(:hover, :focus-visible, [aria-pressed="true"]) .petal-blade { stroke: var(--accent-blue); fill: var(--blue-wash); stroke-width: 2; }
.petal-leaf:is(:hover, :focus-visible, [aria-pressed="true"]) .petal-terminal { fill: var(--accent-blue); }
.petal-leaf[aria-pressed="true"] .petal-number { fill: var(--accent-blue); font-weight: 600; }
.petal-hub circle { fill: var(--panel); stroke: var(--graphite-mid); stroke-width: 1.25; }
.petal-hub text { fill: var(--ink-graphite); font: 500 22px var(--font-display); }
.petal-index {
  min-width: 0;
  align-self: stretch;
  padding: 6px 22px 16px;
  border-left: 1px solid var(--grid);
  background: var(--panel);
}
.petal-index-head, .flow-index-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 10px 0;
}
.petal-index-head h4, .flow-index-head h4 {
  margin: 0;
  color: var(--graphite-mid);
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.petal-pager { display: flex; align-items: center; gap: 5px; color: var(--graphite-mid); font: 11px var(--font-mono); }
.petal-pager button { width: 32px; height: 32px; border: 1px solid var(--grid); background: none; color: var(--ink-graphite); cursor: pointer; }
.petal-pager button:disabled { opacity: .4; cursor: default; }
.petal-key {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 11px 4px;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--grid);
  background: transparent;
  color: var(--ink-graphite);
  cursor: pointer;
}
.petal-key:where(:hover, :focus-visible), .petal-key[aria-pressed="true"] { color: var(--accent-blue); }
.petal-key-number, .flow-step-number { font: 11px/1.45 var(--font-mono); }
.petal-key-name { font: 600 15px/1.35 var(--font-ui); overflow-wrap: anywhere; }
.petal-key-state { font: 11px/1.35 var(--font-mono); color: var(--graphite-mid); }
.petal-index .petal-detail {
  padding: 2px 0 14px 37px;
  border: none;
  background: transparent;
}
.petal-detail .canvas-tile-title, .petal-detail .canvas-fill-badge { display: none; }
.petal-detail .canvas-tile-head { margin-bottom: 5px; }

.canvas-bento, .canvas-share .canvas-bento {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.canvas-bento .canvas-tile, .canvas-list .canvas-tile {
  padding: 18px;
  border: 1px solid var(--grid);
  border-radius: 0;
  background: var(--panel);
  overflow-wrap: anywhere;
}
.canvas-bento .canvas-tile[data-fill-state="missing"], .canvas-list .canvas-tile[data-fill-state="missing"] {
  border: 1px dashed var(--graphite-mid); background: transparent;
}
.canvas-tile-kicker { color: var(--graphite-mid); font: 11px/1.4 var(--font-mono); text-transform: none; }
.canvas-tile-title { color: var(--ink-graphite); font: 500 clamp(24px, 3.3vw, 32px)/1.06 var(--font-display); }
.canvas-tile-why { color: var(--ink-graphite); font-size: 14px; line-height: 1.55; }
.canvas-tile-meta, .canvas-tile-link { font-size: 12px; }
.canvas-tile-link { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 3px; }
.canvas-fill-badge.fill-catalogue, .canvas-fill-badge.fill-external, .canvas-fill-badge.fill-missing {
  background: none;
  color: var(--graphite-mid);
  border: 1px solid var(--grid);
  border-radius: 0;
  white-space: nowrap;
  font: 10px/1.3 var(--font-mono);
  text-transform: none;
}
.canvas-fill-badge.fill-missing { border: 1px dashed var(--graphite-mid); }

.flow-plot { overflow: auto; max-width: 100%; overscroll-behavior-inline: contain; }
.flow-plot .canvas-diagram {
  --_fg: var(--ink-graphite);
  --_l: var(--graphite-mid);
  --_s: var(--panel);
  --_bg: var(--panel);
  --_b: var(--grid);
  display: block;
  width: auto;
  height: auto;
  min-height: 0;
  max-width: none;
  margin: 0 auto;
  font: 15px var(--font-ui);
}
.flow-plot .canvas-diagram .pele-node rect { rx: 4px; }
.flow-plot .canvas-diagram .pele-node .pele-label { font-size: 15px; }
.flow-plot .canvas-diagram .pele-edge path:not(.pele-marker) { stroke: var(--graphite-mid); stroke-width: 1.7px; }
.flow-plot .canvas-diagram .pele-marker { fill: var(--graphite-mid); stroke: none; }
.flow-plot .canvas-diagram .pele-edge-label text { fill: var(--graphite-mid); font: 12px var(--font-mono); }
.flow-plot .canvas-diagram .pele-edge-label rect { rx: 2px; fill: var(--panel); stroke: var(--grid); }
.flow-plot .canvas-diagram .pele-node.is-traced rect { stroke: var(--accent-blue); stroke-width: 2px; fill: var(--blue-wash); }
.flow-plot .canvas-diagram .pele-edge.is-traced path:not(.pele-marker) { stroke: var(--accent-blue); stroke-width: 2.7px; }
.flow-plot .canvas-diagram .pele-edge.is-traced .pele-marker { fill: var(--accent-blue); }
.flow-index-head { border-top: 1px solid var(--grid); padding: 10px 16px; }
.flow-index { list-style: none; padding: 0; margin: 0; }
.flow-step {
  display: grid;
  grid-template-columns: 25px minmax(130px, .8fr) minmax(0, 1.2fr);
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--grid);
  background: none;
  color: var(--ink-graphite);
  font: 14px/1.4 var(--font-ui);
  overflow-wrap: anywhere;
  cursor: pointer;
}
.flow-step strong { font-weight: 600; }
.flow-step-note { color: var(--graphite-mid); }
.flow-step[aria-pressed="true"] { background: var(--blue-wash); color: var(--accent-blue); }

.canvas-root:not(.canvas-share) .canvas-bento .canvas-tile[data-weight="3"] { grid-column: span 2; }
@container (max-width: 900px) {
  .canvas-bento, .canvas-share .canvas-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 700px) {
  .canvas-petal { grid-template-columns: 1fr; }
  .petal-paper { min-height: 0; padding: 8px 16px; }
  .petal-drawing { width: min(88%, 300px); }
  .petal-index { padding: 2px 14px 10px; border-left: none; border-top: 1px solid var(--grid); }
  .petal-index .petal-detail { padding: 14px 0; }
  .petal-detail .canvas-tile-title { display: block; }
  .canvas-toolbar { display: flex; }
}
@container (max-width: 460px) {
  .canvas-bento, .canvas-share .canvas-bento { grid-template-columns: 1fr; }
  .canvas-root:not(.canvas-share) .canvas-bento .canvas-tile[data-weight] { grid-column: auto; }
  .canvas-view-button { padding: 9px 14px; min-height: 40px; }
  .flow-step { grid-template-columns: 22px minmax(0, 1fr); }
  .flow-step-note { grid-column: 2; }
}
@media (prefers-reduced-motion: no-preference) {
  .petal-blade { transition: fill 160ms ease, stroke 160ms ease; }
  .petal-drawing { animation: plate-in 420ms ease-out both; }
  .canvas-bento:not([hidden]) .canvas-tile { animation: plate-in 280ms ease-out both; }
  .canvas-bento .canvas-tile:nth-child(2n) { animation-delay: 50ms; }
  .canvas-bento .canvas-tile:nth-child(3n) { animation-delay: 90ms; }
  .canvas-flow.is-playing .pele-edge.is-traced path:not(.pele-marker) { stroke-dasharray: 7 4; animation: trace-edge 700ms linear 2; }
  @keyframes plate-in { from { opacity: .5; transform: translateY(3px); } }
  @keyframes trace-edge { from { stroke-dashoffset: 33; } to { stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .canvas-trace { display: none; }
}

.petal-leaf:focus-visible { outline: none; }
.petal-leaf:focus-visible .petal-blade { stroke-width: 3; }

.flow-pan { display: flex; justify-content: flex-end; gap: 4px; padding: 4px 10px; border-top: 1px solid var(--grid); }
.flow-plot { align-content: center; scrollbar-color: var(--graphite-line) var(--panel); scrollbar-width: thin; }

@container (min-width: 900px) {
  .canvas-flow.has-relations:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(285px, 1fr);
    grid-template-rows: auto 1fr auto;
  }
  .has-relations .flow-plot { grid-area: 1 / 1 / 3; }
  .has-relations .flow-index-head { grid-area: 1 / 2; border-block-start: none; border-left: 1px solid var(--grid); }
  .has-relations .flow-index { grid-area: 2 / 2 / 4; border-left: 1px solid var(--grid); }
  .has-relations .flow-pan { grid-area: 3 / 1; }
  .has-relations .flow-step { grid-template-columns: 23px minmax(0, 1fr); padding: 14px; }
  .has-relations .flow-step-note { grid-column: 2; }
}
.canvas-loader { width: 24px; height: 24px; margin: -5px 5px -5px -4px; vertical-align: middle; }

.canvas-selection-evidence { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--grid); overflow-wrap: anywhere; }
.canvas-selection-evidence > summary, .flow-evidence > summary { min-height: 44px; padding-block: 10px; cursor: pointer; }
.canvas-selection-evidence a { display: block; margin-block: 8px; }
.canvas-alternative { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--grid); }
.canvas-alternative h5 { margin: 0; font: inherit; font-weight: 600; }
.flow-evidence { grid-column: 1 / -1; grid-row: 4; padding: 12px; border-top: 1px solid var(--grid); }
.flow-evidence > .canvas-tile + .canvas-tile { margin-top: 12px; }

/* Targeted revision controls share the existing workspace rather than opening an editor. */
.canvas-revisions{margin:1rem 0;border:1px solid var(--border,#c9d1d9);border-radius:10px;padding:.8rem;max-width:100%;overflow-wrap:anywhere}
.canvas-revisions summary{cursor:pointer;font-weight:650}.revision-controls{display:flex;flex-wrap:wrap;gap:.65rem;align-items:end}.revision-controls label{display:flex;flex-direction:column;gap:.25rem;max-width:100%;font-size:.85rem}.revision-controls input,.revision-controls select{max-width:100%;min-width:0;padding:.5rem;background:var(--surface,#fff);color:inherit;border:1px solid var(--border,#888);border-radius:5px}.revision-controls select{width:19rem}.revision-controls input{width:20rem}.canvas-revision-button{padding:.5rem .65rem;white-space:normal;border:1px solid var(--border,#888);border-radius:6px;background:transparent;color:inherit;cursor:pointer}.canvas-revision-button:disabled{opacity:.5;cursor:default}.canvas-revision-button:focus-visible,.canvas-revisions :is(select,input,summary):focus-visible{outline:2px solid currentColor;outline-offset:3px}.revision-alternatives{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}.revision-preview{max-width:100%}.revision-preview:empty{display:none}.revision-preview h3{font-size:1rem}.revision-preview button{margin:.3rem .5rem .3rem 0}.revision-version{font-size:.8rem;opacity:.8}.revision-preview ul{padding-left:1.2rem}.revision-preview li{margin:.3rem 0}
@media(max-width:600px){.revision-controls{display:grid;grid-template-columns:minmax(0,1fr)}.revision-controls input,.revision-controls select{width:100%;box-sizing:border-box}}