/* I2L Design as the idea canvas in Flow (docs/design-link-plan.md, "A forked canvas"). Applies only inside Flow's frame:
   index.html's small script sets data-flow="canvas" on <html> when the page is framed with the window name "i2l-canvas".
   Everywhere else I2L Design looks as it always did. Colours are Flow's (apps/web/src/app/globals.css). */
html[data-flow="canvas"] body {
  --color-background-primary: #ffffff;
  --color-background-secondary: #f0ede7;
  --color-background-tertiary: #f7f5f1;
  --color-background-quaternary: #e8e5df;
  --color-foreground-primary: #1c1b19;
  --color-foreground-secondary: #6b675f;
  --color-accent-primary: #0f6b5c;
  --color-accent-secondary: #0a4f44;
  --color-accent-tertiary: #0f6b5c;
  --canvas-background-color: #f0ede7;
  --app-background: #f0ede7;
  --panel-background-color: #ffffff;
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
}

/* The ground: Flow's dotted warm grey instead of the page's own colour (the page colour is drawn twice: the svg's style and a rect). */
html[data-flow="canvas"] .main_ui_workspace__workspace-content {
  background-color: #f0ede7 !important;
  background-image: radial-gradient(#d9d4ca 1px, transparent 1px);
  background-size: 24px 24px;
}
html[data-flow="canvas"] svg#render { background-color: transparent !important; }
html[data-flow="canvas"] svg#render > rect:first-of-type { fill: transparent; }

/* The panels float over the canvas as cards, like Flow's own notes. */
html[data-flow="canvas"] .main_ui_workspace__workspace-content { position: absolute; inset: 0; width: auto; height: auto; }
html[data-flow="canvas"] #left-sidebar-aside,
html[data-flow="canvas"] #right-sidebar-aside {
  position: absolute; top: 12px; bottom: 12px; z-index: 5; height: auto;
  border: 1px solid #e8e5df; border-radius: 14px; overflow: hidden; background: #ffffff;
  box-shadow: 0 6px 24px rgba(28, 27, 25, 0.06);
}
html[data-flow="canvas"] #left-sidebar-aside { left: 12px; }
html[data-flow="canvas"] #right-sidebar-aside { right: 12px; width: 318px; }