/* annot — canvas.css (Agent B)
 * Mörkt tema, prickat rutnät, flytande vertikalt verktygsfält.
 * Alla klasser prefixade med .ac- så de inte krockar med app.css/comments.css.
 */

.ac-root {
  /* Tokens ärvs från theme.css (@instinctly/ui). Deklarera dem inte om här —
     en lokal kopia på .ac-root vinner över :root och låser canvasen i ett tema. */

  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  /* iOS: sidan ska aldrig studsa eller dra-uppdatera bakom canvasen. */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  contain: paint;
}

/* ------------------------------------------------------------ viewport */

.ac-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  background-color: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--color-ink) 12%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  cursor: default;
}

.ac-root[data-tool="hand"] .ac-viewport { cursor: grab; }
.ac-root.ac-spacing .ac-viewport { cursor: grab; }
.ac-root.ac-panning .ac-viewport { cursor: grabbing; }
.ac-root[data-tool="comment"] .ac-viewport { cursor: crosshair; }
.ac-root[data-tool="pen"] .ac-viewport,
.ac-root[data-tool="arrow"] .ac-viewport,
.ac-root[data-tool="rect"] .ac-viewport,
.ac-root[data-tool="ellipse"] .ac-viewport,
.ac-root[data-tool="connect"] .ac-viewport { cursor: crosshair; }
.ac-root[data-tool="text"] .ac-viewport { cursor: text; }
.ac-root.ac-measuring .ac-viewport { cursor: crosshair; }

.ac-root.ac-dropping .ac-viewport {
  outline: 2px dashed var(--accent);
  outline-offset: -8px;
}

/* --------------------------------------------------------------- värld */

#world.ac-world,
.ac-world {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.ac-layer {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

.ac-nodes,
.ac-pins {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

/* ---------------------------------------------------------------- nod */

.ac-node {
  position: absolute;
  box-sizing: border-box;
  background: var(--panel);
  border-radius: 4px;
  will-change: transform;
  contain: layout style;
  /* iOS: långtryck ska öppna noden, inte iOS delningsmeny. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.ac-node.ac-editing,
.ac-node .ac-editing { -webkit-touch-callout: default; }

.ac-node .ac-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: var(--color-bg);
  pointer-events: none;
  -webkit-user-drag: none;
}

.ac-node-cap {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: calc(6px * var(--ac-inv, 1));
  font-size: calc(12px * var(--ac-inv, 1));
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}

.ac-kind-note {
  background: var(--color-surface-2);
  border: 1px solid var(--line);
  padding: 14px 16px;
}
.ac-note-body { overflow: hidden; }
.ac-note-title {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--ink);
  outline: none;
  min-height: 1em;
}
.ac-note-body {
  font-size: 14px;
  color: var(--muted);
  white-space: pre-wrap;
  outline: none;
}
.ac-editing {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
  box-shadow: 0 0 0 1px var(--accent);
  border-radius: 3px;
}

.ac-kind-frame {
  background: transparent;
  border: calc(2px * var(--ac-inv, 1)) solid var(--line);
  border-radius: 6px;
}
.ac-frame-title {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: calc(8px * var(--ac-inv, 1));
  font-size: calc(13px * var(--ac-inv, 1));
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.ac-node.ac-selected {
  box-shadow: 0 0 0 calc(2px * var(--ac-inv, 1)) var(--accent);
}
/* Kopian som följer pekaren under Alt+drag. Den är en klon av nodens DOM och
   ska se ut EXAKT som en nod — det är hela beskedet till användaren: "det här
   blir ett till objekt". Enda skillnaden är att den inte finns för pekaren:
   träfftest, markering och muspekare ska fortsätta gälla det som ligger under. */
.ac-node.ac-ghost { pointer-events: none; }

.ac-node.ac-connect-src { box-shadow: 0 0 0 calc(2px * var(--ac-inv, 1)) var(--accent); }
.ac-node.ac-connect-dst { box-shadow: 0 0 0 calc(3px * var(--ac-inv, 1)) var(--guide); }

/* handtag: alltid 10 skärmpixlar oavsett zoom */
.ac-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  background: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  display: none;
  transform-origin: 50% 50%;
}
.ac-node.ac-selected > .ac-handle { display: block; }
.ac-h-nw { left: 0; top: 0; transform: translate(-50%, -50%) scale(var(--ac-inv, 1)); cursor: nwse-resize; }
.ac-h-ne { left: 100%; top: 0; transform: translate(-50%, -50%) scale(var(--ac-inv, 1)); cursor: nesw-resize; }
.ac-h-sw { left: 0; top: 100%; transform: translate(-50%, -50%) scale(var(--ac-inv, 1)); cursor: nesw-resize; }
.ac-h-se { left: 100%; top: 100%; transform: translate(-50%, -50%) scale(var(--ac-inv, 1)); cursor: nwse-resize; }

/* --------------------------------------------------------- connectors */

.ac-conn-line {
  fill: none;
  stroke-linecap: round;
}
.ac-conn-lblbg {
  fill: var(--panel);
  stroke: var(--line);
  stroke-width: 1;
}
.ac-conn-lbl {
  fill: var(--ink);
  font-size: 13px;
  text-anchor: middle;
  font-family: inherit;
}
.ac-conn-preview {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-dasharray: 7 6;
}

.ac-draw-text { font-family: inherit; font-weight: 600; }

/* --------------------------------------- markerad ritning eller koppling
   Varje streck har en genomskinlig, fet kopia av sig själv först i gruppen
   (.ac-halo, ritad av canvas.js). Den syns inte förrän objektet markeras, då
   blir den glöden bakom strecket. Färgen sätts här i CSS och vinner därför
   över presentationsattributet i JS.

   Träffytan är INTE den här: ritlagret är ett 1×1 px <svg> med
   overflow: visible, och webbläsarna är oense om ifall innehåll utanför den
   rutan träffas alls. canvas.js prövar geometrin i världskoordinater i
   stället — se markableAtWorld. */

.ac-drawing.ac-selected .ac-halo,
.ac-connector.ac-selected .ac-halo {
  stroke: var(--accent);
  stroke-opacity: 0.32;
}
.ac-drawing.ac-selected .ac-draw-text {
  paint-order: stroke;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------- pins */

.ac-pinwrap {
  position: absolute;
  width: 0;
  height: 0;
  transform: scale(var(--ac-inv, 1));
  transform-origin: 0 0;
}

.ac-pin {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(0, -28px);
  width: 28px;
  height: 28px;
  border-radius: 50% 50% 50% 4px;
  background: var(--pc, var(--note-issue));
  color: var(--color-accent-ink);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: var(--shadow-md);
  border: 2px solid color-mix(in oklch, var(--color-bg) 65%, transparent);
}
.ac-pin:hover { filter: brightness(1.15); }
.ac-pin.ac-resolved { opacity: 0.42; filter: saturate(0.4); }
.ac-pin.ac-pulse { animation: ac-pulse var(--dur-pulse) ease-out 1; }

@keyframes ac-pulse {
  0% { box-shadow: 0 0 0 0 var(--pc, var(--note-issue)); }
  100% { box-shadow: 0 0 0 22px transparent; }
}

/* ------------------------------------------------------------ overlay */

.ac-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.ac-guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ac-guide {
  stroke: var(--guide);
  stroke-width: 1;
  stroke-dasharray: 5 4;
  shape-rendering: crispEdges;
}

.ac-mline {
  stroke: var(--measure);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.ac-mbox {
  fill: none;
  stroke: var(--measure);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.75;
}

.ac-chips { position: absolute; inset: 0; }

/* Scopade under .ac-chips: comments.css använder också .ac-chip, för filterchipsen
   i kommentarspanelen. Utan den här inramningen får de position:absolute och
   lägger sig ovanpå varandra. */
.ac-chips .ac-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  color: var(--color-accent-ink);
  pointer-events: none;
}
.ac-chips .ac-chip-size { background: var(--accent); transform: translate(-50%, -100%); }
.ac-chips .ac-chip-dist { background: var(--measure); }

/* ----------------------------------------------------------- närvaro */

.ac-presence { position: absolute; inset: 0; }

.ac-cursor {
  position: absolute;
  transform: translate(-2px, -2px);
  pointer-events: none;
  white-space: nowrap;
  /* uttoning efter 10 s stillhet, styrs från canvas.js */
  transition: opacity var(--dur-slower) linear;
}
.ac-cursor-name {
  position: absolute;
  left: 14px;
  top: 14px;
  background: var(--uc, var(--accent));
  color: var(--color-accent-ink);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------- hud */

.ac-hud { position: absolute; inset: 0; }

.ac-textinput {
  position: absolute;
  pointer-events: auto;
  background: var(--color-surface);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 4px 8px;
  font: inherit;
  font-weight: 600;
  min-width: 180px;
  outline: none;
}

/* ------------------------------------------------------------ dragruta
   Ritas i skärmkoordinater i .ac-hud, alltså inte i världen — rutan ska ha
   samma tjocklek oavsett zoom. */

.ac-marquee {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--accent);
  border-radius: var(--radius-xs);
  background: color-mix(in oklch, var(--color-accent) 14%, transparent);
  pointer-events: none;
}

/* --------------------------------------------------------- kontextmeny
   Högerklick på en nod, långtryck på pekskärm. Ligger i .ac-root (inte i
   overlayen, som är genomsläpplig) och positioneras av canvas.js. */

.ac-menu {
  position: absolute;
  z-index: 30;
  min-width: 184px;
  padding: var(--space-1);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  pointer-events: auto;
  animation: ac-menu-in var(--dur-fast) var(--ease-out) 1;
}

@keyframes ac-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* En animation med noll duration hoppar ändå till slutläget — den måste
   stängas av för sig, inte bara nollas via --dur-*. Se DESIGN.md §8. */
@media (prefers-reduced-motion: reduce) {
  .ac-menu { animation: none; }
}

.ac-menuitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-1-5) var(--space-2-5);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.ac-menuitem:hover,
.ac-menuitem:focus {
  background: color-mix(in oklch, var(--color-ink) 10%, transparent);
  outline: none;
}
.ac-menuitem:focus-visible {
  outline: 2px solid var(--guide);
  outline-offset: -2px;
}
.ac-menuitem[data-action="delete"] { color: var(--bad); }
.ac-menuitem[data-action="delete"]:hover,
.ac-menuitem[data-action="delete"]:focus {
  background: color-mix(in oklch, var(--color-danger) 18%, transparent);
}

.ac-menulabel { flex: 1 1 auto; }
.ac-menukey {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- verktygsfält */

.ac-toolbar {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-xl);
  pointer-events: auto;
}

.ac-tool {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ac-tool:hover { background: color-mix(in oklch, var(--color-ink) 8%, transparent); color: var(--ink); }
.ac-tool.ac-active { background: var(--accent); color: var(--color-accent-ink); }
.ac-tool:disabled { opacity: 0.35; cursor: default; }
.ac-tool:disabled:hover { background: transparent; color: var(--muted); }
.ac-tool:focus-visible { outline: 2px solid var(--guide); outline-offset: 2px; }

.ac-sep {
  width: 22px;
  height: 1px;
  background: var(--line);
  margin: 3px 0;
}

.ac-zoom {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  padding: 2px 0 1px;
  letter-spacing: 0.3px;
}

.ac-drawpanel {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  width: 100%;
}
.ac-drawpanel.ac-show { display: flex; }

.ac-swatches {
  display: grid;
  grid-template-columns: repeat(2, 14px);
  gap: 5px;
  justify-content: center;
}
.ac-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
}
.ac-swatch.ac-active { border-color: var(--ink); }
.ac-colorpick {
  grid-column: span 2;
  width: 33px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.ac-widthrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ac-width {
  width: 32px;
  accent-color: var(--accent);
  cursor: pointer;
}
.ac-widthval {
  font-size: 10px;
  color: var(--muted);
}

/* ==================================================================== touch
   Pekvänliga träffytor. Visuellt lika stora som förut — träffytan växer via
   ett osynligt ::before med negativ inset, aldrig via större ikon.
   .ac-coarse sätts från JS med matchMedia('(pointer: coarse)').
   ==================================================================== */

.ac-pin::before,
.ac-handle::before,
.ac-tool::before {
  content: none;
}

@media (pointer: coarse) {
  /* pin är 28×28 → 44×44 träffyta */
  .ac-pin::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
  }
  /* handtag är 10×10 (i skärmpixlar via --ac-inv) → 44×44 träffyta */
  .ac-handle::before {
    content: '';
    position: absolute;
    inset: -17px;
    border-radius: 6px;
  }
  .ac-tool { width: 44px; height: 44px; }
  .ac-swatch::before {
    content: '';
    position: absolute;
    inset: -15px;
    border-radius: 50%;
  }
  .ac-swatch { position: relative; }
  .ac-pin:hover { filter: none; }

  /* Menyraden är en rad, inte en ikonknapp: den får växa på höjden. Ett
     ::before med negativ inset hade gett överlappande träffytor mellan
     raderna, och den som ligger sist i DOM:en hade vunnit. Se DESIGN.md §7. */
  .ac-menu { min-width: 216px; }
  .ac-menuitem { min-height: 44px; padding-block: var(--space-2); }
}

.ac-root.ac-coarse .ac-pin::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}
.ac-root.ac-coarse .ac-handle::before {
  content: '';
  position: absolute;
  inset: -17px;
  border-radius: 6px;
}
.ac-root.ac-coarse .ac-tool { width: 44px; height: 44px; }
.ac-root.ac-coarse .ac-swatch { position: relative; }
.ac-root.ac-coarse .ac-swatch::before {
  content: '';
  position: absolute;
  inset: -15px;
  border-radius: 50%;
}
.ac-root.ac-coarse .ac-menu { min-width: 216px; }
.ac-root.ac-coarse .ac-menuitem { min-height: 44px; padding-block: var(--space-2); }
/* Handtagen syns alltid på markerad nod, även utan hover. */
.ac-root.ac-coarse .ac-node.ac-selected > .ac-handle { display: block; }

/* ============================================================ små skärmar
   Under 700 px: verktygsfältet vågrätt längs underkanten, med plats för
   iPhones hemindikator. Horisontellt scrollbart om ikonerna inte får plats.
   ==================================================================== */

@media (max-width: 700px) {
  .ac-toolbar {
    left: 8px;
    right: 8px;
    top: auto;
    /* Ovanför kommentarsarket, som ligger längst ned på telefon. Måttet bor i
       theme.css så att de två komponenterna inte behöver känna till varandra —
       de kommer bara överens om samma tal. Utan det här hamnar verktygsfältet
       under arket och går inte att nå. */
    bottom: calc(var(--sheet-peek, 0px) + var(--safe-b, 0px) + 8px);
    transform: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 6px 8px;
    padding-bottom: 6px;
    padding-left: calc(8px + env(safe-area-inset-left, 0px));
    padding-right: calc(8px + env(safe-area-inset-right, 0px));
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .ac-toolbar::-webkit-scrollbar { display: none; }

  .ac-toolbar > * { flex: 0 0 auto; }

  .ac-tool { width: 44px; height: 44px; }

  .ac-sep {
    width: 1px;
    height: 24px;
    margin: 0 3px;
  }

  .ac-zoom {
    padding: 0 4px;
    font-size: 11px;
  }

  /* Ritpanelen blir en vågrät sektion i samma rad. */
  .ac-drawpanel {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 0;
    margin-left: 4px;
    padding-top: 0;
    padding-left: 10px;
    border-top: 0;
    border-left: 1px solid var(--line);
    width: auto;
  }
  .ac-drawpanel.ac-show { display: flex; }

  .ac-swatches {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 10px;
  }
  .ac-swatch { width: 18px; height: 18px; }
  .ac-colorpick { width: 34px; height: 26px; }

  .ac-widthrow {
    flex-direction: row;
    gap: 6px;
  }
  .ac-width { width: 84px; }

  /* Textfältet ska inte hamna under verktygsfältet. */
  .ac-textinput { font-size: 16px; }   /* 16px = iOS zoomar inte in vid fokus */
}

/* Väldigt låg höjd (liggande telefon): krymp lite till. */
@media (max-width: 700px) and (max-height: 460px) {
  .ac-toolbar { bottom: calc(var(--sheet-peek, 0px) + var(--safe-b, 0px) + 4px); padding-top: 4px; }
  .ac-tool { width: 40px; height: 40px; }
}

/* --- vad rollen får se ------------------------------------------------------
   `body[data-role]` sätts i index.html men lästes tidigare aldrig. Kommentaren
   där lovade att en läsare inte skulle se ett ritverktyg som ändå nekas, men
   bara delaknappen doldes — resten av verktygsfältet stod kvar och bjöd in
   till något servern svarar 403 på.

   Läsare får titta och navigera. Kommentator får dessutom sätta nålar. Att
   rita och koppla kräver redigerare. Detta är kosmetika ovanpå den riktiga
   spärren i resolveAccess() — aldrig i stället för den. */
body[data-role="viewer"]    .ac-toolbar [data-tool="comment"],
body[data-role="viewer"]    .ac-toolbar [data-tool="pen"],
body[data-role="viewer"]    .ac-toolbar [data-tool="connect"],
body[data-role="viewer"]    .ac-toolbar [data-tool="arrow"],
body[data-role="viewer"]    .ac-toolbar [data-tool="rect"],
body[data-role="viewer"]    .ac-toolbar [data-tool="ellipse"],
body[data-role="viewer"]    .ac-toolbar [data-tool="text"],
body[data-role="commenter"] .ac-toolbar [data-tool="pen"],
body[data-role="commenter"] .ac-toolbar [data-tool="connect"],
body[data-role="commenter"] .ac-toolbar [data-tool="arrow"],
body[data-role="commenter"] .ac-toolbar [data-tool="rect"],
body[data-role="commenter"] .ac-toolbar [data-tool="ellipse"],
body[data-role="commenter"] .ac-toolbar [data-tool="text"] { display: none; }

/* Färg- och tjockleksväljaren hör till ritandet. Specificiteten räcker över
   `.ac-drawpanel.ac-show` utan !important. */
body[data-role="viewer"]    .ac-drawpanel,
body[data-role="commenter"] .ac-drawpanel { display: none; }

/* --- nodens rubrik: markera, döp om, status --------------------------------
   Rubriken var tidigare `pointer-events: none` och alltså död. Den fungerar
   nu som i Figma: klicka för att markera noden, dubbelklicka för att döpa om.
   Att göra den klickbar räcker — den ligger inuti .ac-node, så markering och
   drag följer med utan någon egen hantering. */
.ac-node-cap {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ac-inv, 1));
}

.ac-cap-name {
  cursor: default;
  border-radius: calc(3px * var(--ac-inv, 1));
  padding: 0 calc(2px * var(--ac-inv, 1));
}

.ac-node.ac-selected .ac-cap-name { color: var(--color-ink); }

.ac-cap-name.ac-editing {
  outline: calc(1px * var(--ac-inv, 1)) solid var(--color-accent);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: text;
}

/* Statusflaggan. Liten och tyst tills någon sätter den — de flesta noder ska
   inte bära någon. Färgerna är samma som trådtyperna använder, så en röd
   flagga betyder samma sak överallt i verktyget. */
.ac-cap-status {
  font-size: calc(10px * var(--ac-inv, 1));
  font-weight: var(--weight-semibold);
  line-height: 1;
  padding: calc(3px * var(--ac-inv, 1)) calc(6px * var(--ac-inv, 1));
  border-radius: calc(4px * var(--ac-inv, 1));
  white-space: nowrap;
  color: var(--color-bg);
}

.ac-cap-status[data-status="done"]  { background: var(--color-success); }
.ac-cap-status[data-status="issue"] { background: var(--color-danger); }
.ac-cap-status[data-status="wip"]   { background: var(--color-info); }