/* SPDX-License-Identifier: Apache-2.0 */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: #29272e;
  font: 14px system-ui;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  min-width: 40px;
  min-height: 40px;
  background: white;
  border: 1px solid #e8e7ed;
  border-radius: 8px;
  padding: 8px 12px;
}
button:disabled,
button[aria-disabled=true] {
  opacity: .45;
  cursor: default;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.scene:focus-visible {
  outline: 3px solid #7051cf;
  outline-offset: 3px;
}
button[aria-pressed=true],
.primary {
  background: #7051cf;
  color: white;
}
.scene {
  position: absolute;
  inset: 0;
  background-color: #fafafa;
  background-image: radial-gradient(#ddd 1px,transparent 1px);
  background-size: 24px 24px;
  touch-action: none;
  overflow: hidden;
}
.scene > div {
  pointer-events: none;
}
.scene.grab { cursor: grab; }
.scene.grabbing { cursor: grabbing; }
main {
  position: relative;
  min-height: 640px;
  height: 100dvh;
  overflow: hidden;
}
.floating {
  background: #fff;
  border: 1px solid #e9e7ed;
  border-radius: 12px;
  box-shadow: 0 2px 8px #29202e0a;
  padding: 6px;
  position: absolute;
  z-index: 3;
}
.file {
  top: 12px;
  left: 12px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  max-width: calc(100% - 344px);
}
.file > button:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px;
  border: 0;
}
.board-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
.brand {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: #302d36;
  color: white;
  border-radius: 6px;
}
.file small {
  background: #f5f0ff;
  color: #7051cf;
  padding: 4px 6px;
  border-radius: 6px;
}
.actions {
  right: 12px;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  min-height: 48px;
  max-width: 312px;
}
.save-status {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  font-size: 12px;
}
svg { flex-shrink: 0; }
.divider {
  width: 1px;
  height: 20px;
  background: #e8e7ed;
  flex-shrink: 0;
}
.notice {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: min(660px,calc(100% - 24px));
  font-size: 12px;
  background: #f3f0f8e8;
  border: 1px solid #e1dce8;
  padding: 10px 14px;
  border-radius: 10px;
  z-index: 4;
}
.notice button {
  margin-left: 8px;
}
.palette {
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
}
.icon-button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
}
.palette { height: 56px; align-items: center; }
.tool-divider { margin-left: 9px; }
.tool-divider::before {
  content: "";
  position: absolute;
  left: -7px;
  width: 1px;
  height: 20px;
  background: #e8e7ed;
}
.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #302d36;
  color: white;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  visibility: hidden;
  z-index: 5;
}
.icon-button:hover .tooltip,
.icon-button:focus-visible .tooltip { visibility: visible; }
.file .tooltip { bottom: auto; top: calc(100% + 8px); }
button:hover:not(:disabled):not([aria-disabled=true]) { background: #f1eff5; }
button[aria-pressed=true]:hover,
button[aria-pressed=true] { background: #7051cf; color: white; }
button.error { background: #a32940; color: white; }
button.primary:hover:not(:disabled) { background: #6142be; }
button.error:hover:not(:disabled) { background: #8d2036; }
.zoom {
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.zoom button {
  border: 0;
  padding: 4px;
}
.objects,
.details,
.navigation {
  right: 12px;
  top: 130px;
  width: 288px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100% - 220px);
  overflow: auto;
}
.details {
  left: 12px;
  right: auto;
  top: 70px;
}
.navigation {
  top: auto;
  bottom: 78px;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
h2 {
  font-size: 14px;
  margin: 0;
}
input,
select,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #dcd9e2;
  border-radius: 7px;
  background: white;
}
textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.45;
}
.moves {
  display: flex;
  gap: 5px;
}
small {
  color: #79737f;
  font-size: 12px;
}
.context {
  position: absolute;
  width: max-content;
  flex-wrap: nowrap;
  height: 40px;
  background: #302d36;
  color: white;
  display: flex;
  gap: 4px;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  padding: 0 8px;
  z-index: 1;
}
.context button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  color: white;
}
.context button:hover:not(:disabled) { color: #29272e; }
.context small { color: #eee; white-space: nowrap; }
.context .divider { background: #79737f; }
.context > span:first-child { white-space: nowrap; }
.object-commands { display: flex; gap: 8px; flex-wrap: wrap; }
.object-commands button { display: inline-flex; gap: 4px; align-items: center; }
.information { position: absolute; left: 12px; bottom: 12px; }
.information .tooltip { left: 0; transform: none; }
.information-panel {
  left: 12px;
  bottom: 60px;
  width: min(288px, calc(100% - 24px));
  padding: 12px;
  max-height: calc(100% - var(--panel-top) - 140px);
  overflow: auto;
}
.information-panel p { margin-top: 0; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
[hidden] { display: none !important; }
.inline {
  position: absolute;
  z-index: 2;
}
.inline label,
.inline small {
  position: absolute;
  left: -10000px;
}
.inline textarea {
  font: inherit;
  line-height: 1.45;
  padding: 0;
  border: 0;
  border-radius: 0;
  resize: none;
  background: transparent;
  width: 100%;
  height: 100%;
  min-height: 0;
  outline: 0;
}
.inline:focus-within {
  outline: 3px solid #7051cf;
  outline-offset: 4px;
}
@media (max-width:1000px) {
  .palette {
    bottom: 72px;
  }
  .zoom {
    bottom: 12px;
  }
  .objects {
    max-height: calc(100% - 280px);
  }
}
@media (max-width:767px) {
  main {
    min-height: 900px;
  }
  .file {
    left: 12px;
    right: 12px;
    max-width: none;
  }
  .actions {
    top: 68px;
    left: 12px;
    right: 12px;
    max-width: none;
    justify-content: space-between;
  }
  .notice {
    top: 145px;
  }
  .objects,
  .details {
    top: 220px;
    left: 12px;
    right: 12px;
    width: calc(100% - 24px);
    max-width: 360px;
    max-height: calc(100% - 380px);
  }
  .palette {
    bottom: 76px;
  }
  .navigation {
    max-width: calc(100% - 24px);
  }
  .context {
    display: none;
  }
}

/* Stack status and secondary surfaces beneath the actual action-bar height. */
.notice {
  top: var(--notice-top,80px);
}
.objects,
.details {
  top: var(--panel-top,130px);
  max-height: calc(100% - var(--panel-top,130px) - 154px);
}

@media (max-width:767px) {
  .file > button:first-child { flex: 1; }
  .file { gap: 2px; }
  .file small { padding: 4px; }
}

/* W5 controls share the shell's target sizes, focus and icon states. */
.object-styles { display: grid; gap: 8px; }
.object-formats { display: flex; gap: 8px; flex-wrap: wrap; }
.format-preview { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; color: #4b4752; }
.alignments, .formats, .colour-control { display: inline-flex; gap: 4px; }
.context .context-size {
  width: 124px;
  min-height: 40px;
  padding: 4px;
  background: #302d36;
  color: white;
  border: 1px solid #79737f;
  flex-shrink: 0;
}
.context .context-size:disabled { opacity: .45; }
.colour-dot {
  display: block;
  width: 22px;
  height: 22px;
  border: 1px solid #79737f;
  border-radius: 50%;
}
.swatches {
  position: absolute;
  width: 196px;
  height: 108px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 40px);
  gap: 4px;
  background: white;
  border: 1px solid #e9e7ed;
  border-radius: 12px;
  box-shadow: 0 2px 8px #29202e20;
}
.context .swatches button[aria-pressed=true] .colour-dot {
  outline: 2px solid #7051cf;
  outline-offset: 3px;
}

/* W7 selection preview sits above objects and below floating controls. */
.selection-box {
  position: absolute;
  border: 1px solid #518de0;
  background: rgb(81 141 224 / 12%);
  pointer-events: none;
}
.colour-dot.mixed {
  background: conic-gradient(#f2dce5 0deg 45deg, #f8e9a6 45deg 90deg,
    #f9d9bd 90deg 135deg, #d6ecc9 135deg 180deg, #cbe9e3 180deg 225deg,
    #d4e3f8 225deg 270deg, #e2dbf6 270deg 315deg, #e9e7ed 315deg 360deg);
}
.objects select[multiple] { min-height: 132px; overflow-y: auto; }

/* W8 handles use CSS pixels and route presses through the scene's capture. */
.scene > .resize-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.resize-handle::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: white;
  border: 1px solid #518de0;
}
.resize-handle.nw, .resize-handle.se { cursor: nwse-resize; }
.resize-handle.ne, .resize-handle.sw { cursor: nesw-resize; }
.sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }

/* W9 uses the same commands in the contextual popover and Objects. */
.arrange-control { display: inline-flex; }
.arrange-menu {
  position: absolute;
  width: 268px;
  padding: 10px;
  overflow: auto;
  background: white;
  color: #29272e;
  border: 1px solid #e9e7ed;
  border-radius: 12px;
  box-shadow: 0 2px 8px #29202e20;
}
.arrange-group { display: grid; gap: 4px; }
.arrange-group + .arrange-group { margin-top: 8px; }
.arrange-group h3 { margin: 0; font-size: 12px; color: #79737f; }
.arrange-group > span { display: block; }
.arrange-group button,
.context .arrange-group button {
  width: 100%;
  min-height: 40px;
  padding: 6px 8px;
  color: #29272e;
  text-align: left;
  background: white;
  border: 1px solid #e8e7ed;
}
.objects-arrange { display: grid; gap: 8px; }

/* W10 outlines are sized in CSS pixels, above objects and below controls. */
.group-outline {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}
.group-outline rect {
  fill: none;
  stroke: #518de0;
  stroke-width: 1px;
  stroke-dasharray: 4px 4px;
}
.arrange-group[aria-label="Group"] {
  border-top: 1px solid #e8e7ed;
  padding-top: 8px;
}

/* Sections use a drawing preview and a compact editor above their saved frame. */
.selection-box.drawing {
  border: 1.5px dashed #518de0;
  background: rgb(81 141 224 / 6%);
}
.inline.name-field {
  background: white;
  border: 2px solid #518de0;
  border-radius: 4px;
  font-weight: 600;
}
.inline.name-field:focus-within { outline: none; }
.inline.name-field textarea { line-height: 1; }

/* Basic shapes share the idea controls while keeping their own paint. */
.shapes-panel { left: 12px; top: 70px; width: 264px; padding: 12px; }
.shapes-panel h3 { font-size: 13px; margin: 12px 0; }
.shapes-panel p { color: #79737f; font-size: 12px; }
.shape-tiles { display: flex; gap: 8px; }
.shape-tiles button { display: grid; justify-items: center; gap: 8px; flex: 1; }
.shape-control { display: inline-flex; }
.shape-menu, .shape-paint-panel {
  position: absolute; left: 0; top: 48px; background: #1f1f22; color: white;
  border-radius: 12px; padding: 12px; box-shadow: 0 2px 8px #29202e20;
}
.shape-menu { display: grid; gap: 4px; min-width: 160px; }
.shape-menu button[aria-checked=true] { background: #7051cf; }
.shape-paint-panel { width: 508px; }
.paint-modes { display: flex; gap: 8px; margin-bottom: 12px; }
.paint-modes button { flex: 1; }
.context .paint-modes button[aria-pressed=true] { background: #7051cf; }
.shape-swatches { display: grid; grid-template-columns: repeat(11, 40px); gap: 4px; }
.shape-swatches .colour-dot { width: 26px; height: 26px; }
.shape-swatches button[aria-pressed=true] .colour-dot, .custom-colour[data-pressed=true] {
  outline: 2px solid white; outline-offset: 2px;
}
.custom-colour { position: relative; width: 28px; height: 28px; margin: 6px; border-radius: 50%;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.custom-colour-input { width: 1px; height: 1px; padding: 0; border: 0; position: absolute;
  opacity: 0; pointer-events: none; }
.custom-colour .custom-colour-input { width: 100%; height: 100%; inset: 0; pointer-events: auto; cursor: pointer; }
.custom-colour:focus-within { outline: 3px solid #a88cf4; outline-offset: 3px; }
.colour-dot.no-fill { background: transparent !important; border-color: white; }
.grow-shape { position: absolute; z-index: 1; transform: translate(-50%, -50%); width: 24px; height: 24px;
  min-width: 24px; min-height: 24px; border: 0; border-radius: 6px; padding: 2px; background: #518de0; color: white; }
.inline.shape-editor { display: flex; align-items: center; }
.inline.shape-editor textarea { height: auto; max-height: 100%; min-height: 1.45em; field-sizing: content;
  color: inherit; text-align: inherit; overflow-y: auto; }
.shape-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #929292; pointer-events: none; }
@media (max-width:767px) { .shapes-panel { top: var(--panel-top); max-width: calc(100% - 24px); } }

/* Connection dots are pointer controls; routes and labels remain document-free. */
.scene > .connection-dot {
  position: absolute; width: 16px; height: 16px; transform: translate(-50%, -50%);
  pointer-events: auto; cursor: crosshair;
}
.connection-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #8fbdf5; }
.connection-preview { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.connection-preview line, .connection-preview circle { stroke: #518de0; fill: none; }
.connection-target { position: absolute; border: 3px solid #518de0; pointer-events: none; }
.inline.connector-editor { background: #fafafa; border: 1.5px solid #518de0; color: #2c2c2c; }
.inline.connector-editor:focus-within { outline: none; }
.inline.connector-editor textarea { text-align: center; }
.inline.connector-editor textarea::placeholder { color: #929292; opacity: 1; }
.board-file-commands { display: flex; flex-direction: column; gap: 12px; }
.boards-heading { margin: 0; font-size: 14px; }
.boards-list { display: flex; flex-direction: column; gap: 8px; }
.boards-list button { text-align: left; overflow-wrap: anywhere; }
.boards-list button > span, .boards-list small { display: block; }
.boards-list small { margin-top: 4px; }
.boards-list [aria-current=true] { border-color: #7051cf; background: #f5f0ff; }
.board-question { width: min(520px, calc(100% - 24px)); padding: 24px; border: 1px solid #e9e7ed; border-radius: 12px; color: #29272e; }
.board-question::backdrop { background: #29272e66; }
.board-question h2 { margin-top: 0; font-size: 20px; }
.board-question p { overflow-wrap: anywhere; }
.board-question-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width:399px) {
  .board-question-actions { flex-wrap: wrap; }
}

/* Templates share toolbar pressed states and stay within the viewport. */
.templates-panel {
  left: calc(50% + 40px); bottom: 78px; width: 448px;
  max-height: calc(100% - 170px); overflow: auto; padding: 16px;
}
.templates-panel h3 { margin: 16px 0 12px; font-size: 13px; }
.template-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.template-card { min-width: 0; }
.template-preview { position: relative; aspect-ratio: 200 / 130; background: #fafafa; border: 1px solid #e9e7ed; border-radius: 8px; }
.template-preview svg { display: block; width: 100%; height: 100%; }
.template-preview rect, .template-preview line { stroke-width: 2; vector-effect: non-scaling-stroke; }
.add-template { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; opacity: 0; }
.template-card:hover .add-template, .add-template:focus { opacity: 1; }
.template-card h4 { font-size: 14px; margin: 10px 0 6px; }
.template-card p { font-size: 12px; margin: 0 0 8px; }
@media (max-width:1000px) {
  .templates-panel { bottom: 138px; }
}
@media (max-width:999.98px) {
  .templates-panel { left: 12px; width: calc(100% - 24px); }
}
@media (max-width:767px) {
  .templates-panel { bottom: 142px; }
}
@media (max-width:599px) {
  .templates-panel { max-height: calc(100% - 300px); }
  .template-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Drawing controls share the toolbar container and stay a single scrollable row. */
.drawing-bar { bottom: 78px; left: 50%; transform: translateX(-50%); display: flex; align-items: center;
  gap: 4px; max-width: calc(100% - 24px); width: max-content; overflow-x: auto; flex-wrap: nowrap; }
.drawing-bar .icon-button { min-width: 36px; min-height: 36px; }
.drawing-bar button[aria-pressed=true] { background: #e9e2fb; color: #29272e; }
.drawing-bar .ink-dot[aria-pressed=true] { background: white; }
.drawing-bar .ink-dot[aria-pressed=true] .colour-dot { outline: 2px solid #7051cf; outline-offset: 2px; }
.drawing-bar button:disabled { opacity: .35; }
.context:has(.arrange-menu), .context:has(#colour-swatches), .context:has(details[open]) { z-index: 6; }
.stroke-control { position: relative; }
.stroke-control summary { display: inline-flex; gap: 6px; align-items: center; min-height: 40px; cursor: pointer; list-style: none; }
.stroke-control summary::-webkit-details-marker { display: none; }
.stroke-control summary[aria-disabled=true] { opacity: .45; cursor: default; }
.stroke-control summary:focus-visible { outline: 3px solid #7051cf; outline-offset: 3px; }
.ink-menu { position: absolute; top: 48px; left: 0; min-width: 160px; background: white; color: #29272e;
  padding: 8px; border: 1px solid #e9e7ed; border-radius: 12px; box-shadow: 0 2px 8px #29202e20; }
.context .ink-menu button { width: 100%; min-height: 40px; color: #29272e; padding: 6px 8px; }
.context .ink-menu button[aria-pressed=true] { background: #e9e2fb; }
@media (max-width:1000px) { .drawing-bar { bottom: 138px; } }
@media (max-width:767px) { .drawing-bar { bottom: 142px; } }