/* ===================================================================
   muni-canvas.css -- Phase 60.1 D-CANVAS-01
   Quest authoring canvas family: MuniCanvas + MuniCanvasNode +
   MuniCanvasEdge + MuniCanvasMinimap civic skin.

   Plan 05.1 (2026-05-30) restyle: matches handoff-design-v2/quest-canvas.jsx
   verbatim -- header bands on nodes, prominent state borders, green filled
   out-port, dual-path edges (wide hit + narrow visible + polygon arrow),
   HTML overlay chips with attached inline toolbar.

   Civic palette tokens (from theme.jsx):
     --muni-paper       #f5efe1
     --muni-paper-soft  #ede4d0
     --muni-ink         #231f15
     --muni-ink-soft    #4a4332
     --muni-ink-mute    #7a6f55
     --muni-stamp       #8b2a1f   (terracotta/red)
     --muni-brass       #8a6c2d   (amber/gold)
     --muni-green       #2e5d3b   (sage/primary)
     --muni-slate       #5a6070   (condition/neutral)
   =================================================================== */

/* -------------------------------------------------------------------
   Canvas host (viewport -- outer element, overflow:hidden, receives events)
   The transform is NO LONGER applied here -- it goes on .muni-canvas__world.
   ------------------------------------------------------------------- */
.muni-canvas {
    position: relative;
    width: 100%;
    min-height: 480px;
    overflow: hidden;
    background-color: #ede4d0;
    background-image:
        radial-gradient(circle, rgba(35,31,21,.12) 1px, transparent 1px);
    background-size: 24px 24px;
    border: 1px solid rgba(35,31,21,.18);
    border-radius: 2px;
    touch-action: none;
    user-select: none;
}

/* Inner world layer -- receives the translate()+scale() transform.
   Holds the edge SVG + node container so the viewport element stays put
   while the user pans/zooms. transform-origin:0 0 is critical for
   correct zoom-toward-pointer arithmetic in quest-canvas.js. */
.muni-canvas__world {
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
    will-change: transform;
}

/* SVG edge layer -- sits above the paper background, below node cards.
   pointer-events:none on the SVG itself; the hit-path opts back in via
   the .muni-canvas-edge__hit rule below. */
.muni-canvas__edges {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* Chip overlay layer -- HTML siblings of the SVG, positioned absolute in
   world coords. pointer-events:none on the layer; chips re-opt in. */
.muni-canvas__chips {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Node container -- absolute-positioned children.
   pointer-events:none on the container so the empty space between node
   cards lets clicks fall through to the SVG edge layer underneath. The
   nodes themselves re-opt-in below. (Phase 60.1 Plan 05 step-5 UAT
   2026-05-30: clicks on edges were eaten by the empty nodes container.) */
.muni-canvas__nodes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.muni-canvas__nodes > .muni-canvas-node {
    pointer-events: auto;
}

/* Toolbar (zoom controls) */
.muni-canvas__toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}

/* -------------------------------------------------------------------
   Node card -- 236 x 128 px per design prototype.
   Layout: top accent rail, header band, body. Header has paperSoft
   background + bottom rule, creating the visual "banded" look. State
   modifiers swap the outer border (color + width + dashed/solid).
   ------------------------------------------------------------------- */
.muni-canvas-node {
    position: absolute;
    width: 236px;
    min-height: 128px;
    background: #f5efe1;
    border: 1px solid #231f15;
    border-radius: 2px;
    box-shadow: 0 2px 6px -3px rgba(35,31,21,.25);
    cursor: grab;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: "Libre Caslon Text", Georgia, "Times New Roman", serif;
    color: #231f15;
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

.muni-canvas-node:hover {
    box-shadow: 0 6px 18px -8px rgba(35,31,21,.35);
}

.muni-canvas-node:active {
    cursor: grabbing;
}

/* Top accent rail -- 4px stripe in the state's accent color. Driven by
   data-state on the rail (set by Razor). */
.muni-canvas-node__rail {
    height: 4px;
    width: 100%;
    background: #7a6f55;
    flex-shrink: 0;
}
.muni-canvas-node__rail[data-state="draft"]      { background: #7a6f55; }
.muni-canvas-node__rail[data-state="configured"] { background: #231f15; }
.muni-canvas-node__rail[data-state="active"]     { background: #2e5d3b; }
.muni-canvas-node__rail[data-state="completed"]  { background: #4a4332; }
.muni-canvas-node__rail[data-state="abandoned"]  { background: #8a6c2d; }
.muni-canvas-node__rail[data-state="error"]      { background: #8b2a1f; }

/* Header band -- paperSoft bg + ink rule bottom + flex row.
   Contains the number badge, title, and trigger sigil. */
.muni-canvas-node__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 6px;
    background: #ede4d0;
    border-bottom: 1px solid rgba(35,31,21,.18);
    flex-shrink: 0;
}

/* Number badge -- 20x20, 1px border in state accent, mono caps. */
.muni-canvas-node__number {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #7a6f55;
    border-radius: 2px;
    background: #f5efe1;
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    color: #7a6f55;
    line-height: 1;
}
.muni-canvas-node__number[data-state="configured"] { border-color: #231f15; color: #231f15; }
.muni-canvas-node__number[data-state="active"]     { border-color: #2e5d3b; color: #2e5d3b; }
.muni-canvas-node__number[data-state="completed"]  { border-color: #4a4332; color: #4a4332; }
.muni-canvas-node__number[data-state="abandoned"]  { border-color: #8a6c2d; color: #8a6c2d; }
.muni-canvas-node__number[data-state="error"]      { border-color: #8b2a1f; color: #8b2a1f; }

/* Title -- serif 14px, weight 600, ellipsis on overflow */
.muni-canvas-node__title {
    flex: 1;
    min-width: 0;
    font-family: "Libre Caslon Text", Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.1px;
    color: #231f15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Trigger sigil -- mono 8px boxed, colored to match state accent */
.muni-canvas-node__sigil {
    flex-shrink: 0;
    padding: 2px 4px;
    border: 1px solid #7a6f55;
    border-radius: 2px;
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #7a6f55;
    line-height: 1;
}
.muni-canvas-node__sigil[data-state="configured"] { border-color: #231f15; color: #231f15; }
.muni-canvas-node__sigil[data-state="active"]     { border-color: #2e5d3b; color: #2e5d3b; }
.muni-canvas-node__sigil[data-state="completed"]  { border-color: #4a4332; color: #4a4332; }
.muni-canvas-node__sigil[data-state="abandoned"]  { border-color: #8a6c2d; color: #8a6c2d; }
.muni-canvas-node__sigil[data-state="error"]      { border-color: #8b2a1f; color: #8b2a1f; }

/* Body -- description + meta row */
.muni-canvas-node__body {
    position: relative;
    padding: 7px 10px 9px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.muni-canvas-node__desc {
    font-family: "Libre Caslon Text", Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 11.5px;
    line-height: 1.4;
    color: #4a4332;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta row -- state pill + optional reward chip */
.muni-canvas-node__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Meta row no longer drives layout for the trigger/reward chips -- they are
   anchored to the bottom corners of the card (Nika 2026-05-30: bottom-left
   anchor the trigger pill instead of floating under the description). */
.muni-canvas-node__meta {
    position: static;
}

/* Trigger-choice chip -- mono caps, color tied to trigger kind. Replaces the
   old lifecycle State pill (which was hardcoded/placeholder). Denotes HOW the
   task advances: touch / region / group / approval. Anchored bottom-left. */
.muni-canvas-node__trigger {
    position: absolute;
    bottom: 8px;
    left: 10px;
    padding: 2px 6px;
    border: 1px solid rgba(35,31,21,.25);
    border-radius: 2px;
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #7a6f55;
    line-height: 1.2;
    background: transparent;
    white-space: nowrap;
}
/* touch = brass/amber */
.muni-canvas-node__trigger[data-trigger="touch"] {
    color: #8a6c2d;
    border-color: rgba(138,108,45,.40);
    background: rgba(138,108,45,.08);
}
/* region = slate */
.muni-canvas-node__trigger[data-trigger="region"] {
    color: #5a6070;
    border-color: rgba(90,96,112,.40);
    background: rgba(90,96,112,.08);
}
/* group = sage/green */
.muni-canvas-node__trigger[data-trigger="group"] {
    color: #2e5d3b;
    border-color: rgba(46,93,59,.40);
    background: rgba(46,93,59,.08);
}
/* approval = ink-mute (no in-world trigger; advances via approval) */
.muni-canvas-node__trigger[data-trigger="approval"] {
    color: #7a6f55;
    border-color: rgba(122,111,85,.40);
    background: rgba(122,111,85,.06);
}

/* State pill -- mono caps, color tied to state */
.muni-canvas-node__state {
    padding: 2px 6px;
    border: 1px solid rgba(35,31,21,.25);
    border-radius: 2px;
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #7a6f55;
    line-height: 1.2;
    background: transparent;
}
.muni-canvas-node__state[data-state="configured"] { color: #7a6f55; border-color: rgba(35,31,21,.25); }
.muni-canvas-node__state[data-state="active"] {
    color: #2e5d3b;
    border-color: transparent;
    background: rgba(46,93,59,.12);
}
.muni-canvas-node__state[data-state="completed"] {
    color: #f5efe1;
    border-color: transparent;
    background: #231f15;
}
.muni-canvas-node__state[data-state="abandoned"] {
    color: #8a6c2d;
    border-color: transparent;
    background: rgba(138,108,45,.12);
}
.muni-canvas-node__state[data-state="error"] {
    color: #8b2a1f;
    border-color: transparent;
    background: rgba(139,42,31,.12);
}

/* Reward chip -- sage tint, boxed */
.muni-canvas-node__chip {
    position: absolute;
    bottom: 8px;
    right: 10px;
    padding: 2px 6px;
    border: 1px solid #2e5d3b;
    border-radius: 2px;
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #2e5d3b;
    background: transparent;
}

/* Abandoned-state caution corner (top-right notched triangle) */
.muni-canvas-node__corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 16px solid #8a6c2d;
    border-left: 16px solid transparent;
    pointer-events: none;
}

/* -------------------------------------------------------------------
   IN / OUT ports -- left in (12x12 outlined), right out (16x16 solid green)
   per design prototype quest-canvas.jsx lines 119-135.
   ------------------------------------------------------------------- */
.muni-canvas-node__port {
    position: absolute;
    border-radius: 50%;
    z-index: 5;
}

.muni-canvas-node__port--in {
    left: -7px;
    top: calc(50% - 6px);
    width: 12px;
    height: 12px;
    border: 1.5px solid #7a6f55;
    background: #f5efe1;
}

.muni-canvas-node__port--out {
    right: -9px;
    top: calc(50% - 8px);
    width: 16px;
    height: 16px;
    border: 2px solid #f5efe1;
    background: #2e5d3b;
    cursor: crosshair;
    transition: box-shadow 100ms ease;
}

.muni-canvas-node:hover .muni-canvas-node__port--out,
.muni-canvas-node__port--out:hover {
    box-shadow: 0 0 0 4px rgba(46,93,59,.20);
}

/* -------------------------------------------------------------------
   Node state modifiers -- swap border (color, width, dashed/solid)
   per design stateStyle() in quest-canvas.jsx lines 29-38.
   ------------------------------------------------------------------- */

/* draft: dashed 1.5px ink-mute */
.muni-canvas-node--draft {
    border: 1.5px dashed #7a6f55;
    opacity: 0.92;
}

/* configured: solid 1px ink */
.muni-canvas-node--configured {
    border: 1px solid #231f15;
}

/* active: solid 2px sage */
.muni-canvas-node--active {
    border: 2px solid #2e5d3b;
}

/* completed: solid 1px ink + paperSoft bg + faded */
.muni-canvas-node--completed {
    border: 1px solid #231f15;
    background: #ede4d0;
    opacity: 0.92;
}

.muni-canvas-node--completed .muni-canvas-node__title {
    text-decoration: line-through;
    color: #7a6f55;
}

/* abandoned: 1.5px solid brass (amber) */
.muni-canvas-node--abandoned {
    border: 1.5px solid #8a6c2d;
}

/* error: 1.5px solid stamp (terracotta) */
.muni-canvas-node--error {
    border: 1.5px solid #8b2a1f;
}

/* selected: 2px outset sage ring + lifted shadow */
.muni-canvas-node--selected {
    box-shadow: 0 0 0 2px #2e5d3b, 0 10px 22px -10px rgba(35,31,21,.40);
}

/* -------------------------------------------------------------------
   Edge (SVG): dual-path -- wide invisible hit + narrow visible colored.
   Polygon arrowhead colored to match the visible path.
   ------------------------------------------------------------------- */

/* Wide transparent hit path -- 16px stroke for forgiving clicks.
   Opts back into pointer events (parent SVG is pointer-events:none). */
.muni-canvas-edge__hit {
    fill: none;
    stroke: transparent;
    stroke-width: 16;
    pointer-events: stroke;
    cursor: pointer;
}

/* Visible paths -- 2px stroke, color per edge label. No pointer events
   so the hit path always wins the click (it sits underneath in DOM
   order but at width 16 it intercepts the whole click region). */
.muni-canvas-edge--success,
.muni-canvas-edge--fail,
.muni-canvas-edge--condition {
    fill: none;
    stroke-width: 2;
    pointer-events: none;
}

.muni-canvas-edge--success { stroke: #2e5d3b; }
.muni-canvas-edge--fail    { stroke: #8b2a1f; }
.muni-canvas-edge--condition { stroke: #5a6070; }

/* Selected edge -- bump visible stroke to 3px */
.muni-canvas-edge--selected { stroke-width: 3; }

/* Polygon arrowheads -- fill matches stroke color. No pointer events. */
.muni-canvas-edge-arrow--success    { fill: #2e5d3b; pointer-events: none; }
.muni-canvas-edge-arrow--fail       { fill: #8b2a1f; pointer-events: none; }
.muni-canvas-edge-arrow--condition  { fill: #5a6070; pointer-events: none; }

/* -------------------------------------------------------------------
   Edge label chip -- HTML overlay button in world coords.
   Click selects the edge; selected chip sprouts the toolbar dropdown.
   ------------------------------------------------------------------- */

/* Wrapper holds the chip + dropdown stacked. Centered on the midpoint
   via translate(-50%, -50%). pointer-events:auto opts in over the
   transparent .muni-canvas__chips layer. */
.muni-canvas-edge-chip-wrap {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* The chip itself -- inline-flex pill, mono caps, color per edge type */
.muni-canvas-edge-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    background: #f5efe1;
    border: 1.5px solid #5a6070;
    border-radius: 2px;
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #5a6070;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.3;
    box-shadow: 0 1px 3px rgba(35,31,21,.18);
    transition: box-shadow 100ms ease;
}

.muni-canvas-edge-chip--success {
    border-color: #2e5d3b;
    color: #2e5d3b;
}

.muni-canvas-edge-chip--fail {
    border-color: #8b2a1f;
    color: #8b2a1f;
}

.muni-canvas-edge-chip--condition {
    border-color: #5a6070;
    color: #5a6070;
}

.muni-canvas-edge-chip:hover {
    box-shadow: 0 2px 6px rgba(35,31,21,.28);
}

.muni-canvas-edge-chip--selected {
    box-shadow: 0 0 0 2px #2e5d3b, 0 2px 6px rgba(35,31,21,.28);
}

.muni-canvas-edge-chip__glyph {
    font-size: 10px;
    line-height: 1;
}

.muni-canvas-edge-chip__text {
    text-transform: uppercase;
}

/* -------------------------------------------------------------------
   Inline edge toolbar -- attached below the selected chip.
   Glyph-only buttons matching design prototype EdgeChip dropdown.
   ------------------------------------------------------------------- */

.muni-canvas-edge-menu {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #f5efe1;
    border: 1px solid #231f15;
    border-radius: 2px;
    box-shadow: 0 6px 16px -6px rgba(35,31,21,.40);
}

.muni-canvas-edge-menu__btn {
    cursor: pointer;
    padding: 3px 7px;
    border: 1px solid rgba(35,31,21,.25);
    border-radius: 2px;
    background: transparent;
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}

.muni-canvas-edge-menu__btn--success {
    border-color: #2e5d3b;
    color: #2e5d3b;
}
.muni-canvas-edge-menu__btn--fail {
    border-color: #8b2a1f;
    color: #8b2a1f;
}
.muni-canvas-edge-menu__btn--condition {
    border-color: #5a6070;
    color: #5a6070;
}

.muni-canvas-edge-menu__btn--success.muni-canvas-edge-menu__btn--on {
    background: #2e5d3b;
    color: #f5efe1;
}
.muni-canvas-edge-menu__btn--fail.muni-canvas-edge-menu__btn--on {
    background: #8b2a1f;
    color: #f5efe1;
}
.muni-canvas-edge-menu__btn--condition.muni-canvas-edge-menu__btn--on {
    background: #5a6070;
    color: #f5efe1;
}

.muni-canvas-edge-menu__btn--delete {
    border-color: #8b2a1f;
    color: #8b2a1f;
    background: transparent;
}

.muni-canvas-edge-menu__btn--delete:hover {
    background: rgba(139,42,31,.10);
}

/* -------------------------------------------------------------------
   Minimap (bottom-right overlay)
   ------------------------------------------------------------------- */
.muni-canvas-minimap {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 10;
    background: rgba(237,228,208,.90);
    border: 1px solid rgba(35,31,21,.25);
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(35,31,21,.10);
    overflow: hidden;
    pointer-events: none;
}

.muni-canvas-minimap__svg {
    display: block;
}

/* Minimap node rects -- scaled mirror of the canvas cards, colored by the
   same trigger token as the node chip. */
.muni-canvas-minimap__node {
    fill: #7a6f55;
    opacity: 0.75;
}

.muni-canvas-minimap__node--touch    { fill: #8a6c2d; }
.muni-canvas-minimap__node--region   { fill: #5a6070; }
.muni-canvas-minimap__node--group    { fill: #2e5d3b; }
.muni-canvas-minimap__node--approval { fill: #7a6f55; }

.muni-canvas-minimap__viewport {
    fill: rgba(35,31,21,.06);
    stroke: #2e5d3b;
    stroke-width: 1.5;
}

/* -------------------------------------------------------------------
   Toolbar icon buttons (zoom controls)
   ------------------------------------------------------------------- */
.muni-icon-btn--civic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #f5efe1;
    border: 1px solid rgba(35,31,21,.30);
    border-radius: 2px;
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    color: #231f15;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
    padding: 0;
    line-height: 1;
}

.muni-icon-btn--civic:hover {
    background: rgba(35,31,21,.08);
    border-color: #231f15;
}

.muni-icon-btn--civic:active {
    background: rgba(35,31,21,.14);
}

/* -------------------------------------------------------------------
   Empty state placeholder (pre-canvas-load)
   ------------------------------------------------------------------- */
.muni-empty {
    padding: 24px;
    font-family: "Libre Caslon Text", Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 14px;
    color: #7a6f55;
}

/* -------------------------------------------------------------------
   Palette drag source (Plan 05 -- "+ New task" button in toolbar)
   ------------------------------------------------------------------- */
.muni-canvas-palette {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    background: rgba(46,93,59,.08);
    border: 1px dashed #2e5d3b;
    border-radius: 2px;
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #2e5d3b;
    cursor: grab;
    user-select: none;
    white-space: nowrap;
}

.muni-canvas-palette:active {
    cursor: grabbing;
}

/* -------------------------------------------------------------------
   Focus mode: hide toolbar + minimap via canvas flag class
   ------------------------------------------------------------------- */
.muni-canvas--focus .muni-canvas__toolbar {
    display: none;
}

.muni-canvas--focus .muni-canvas-minimap {
    display: none;
}

/* -------------------------------------------------------------------
   Focus outline for keyboard accessibility (tabindex="0")
   ------------------------------------------------------------------- */
.muni-canvas:focus {
    outline: 2px solid #2e5d3b;
    outline-offset: 2px;
}

.muni-canvas:focus-visible {
    outline: 2px solid #2e5d3b;
    outline-offset: 2px;
}

/* -------------------------------------------------------------------
   prefers-reduced-motion: disable all transition easing on canvas elements
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .muni-canvas,
    .muni-canvas-node,
    .muni-canvas-edge-chip,
    .muni-canvas-edge-menu__btn,
    .muni-canvas-node__port--out,
    .muni-icon-btn--civic {
        transition: none !important;
    }
}

/* -------------------------------------------------------------------
   Ask 2: entry badge -- pinned top-left of an entry node.
   Primary token; mono caps; tab-shaped with bottom-right square corner.
   Visually distinct from state chips (those are inside the node body).
   ------------------------------------------------------------------- */
.muni-canvas-node__entry-badge {
    position: absolute;
    top: -11px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--mud-palette-primary) !important;
    color: var(--muni-paper) !important;
    border: 1px solid var(--mud-palette-primary) !important;
    border-radius: 2px;
    padding: 2px 7px 2px 6px;
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 2px 5px -2px rgba(0,0,0,0.5);
    pointer-events: none;
    white-space: nowrap;
}

/* Entry node: allow badge overflow (it sits above the top edge). */
.muni-canvas-node--entry {
    overflow: visible !important;
}

/* Entry node top rail: always primary (overrides the state-driven rail color). */
.muni-canvas-node--entry .muni-canvas-node__rail {
    background: var(--mud-palette-primary) !important;
}

/* -------------------------------------------------------------------
   Ask 2: PLAYERS BEGIN start anchor -- 60x60 circle, primary hue,
   positioned in world coords (absolute inside .muni-canvas__world).
   Pointer-events: none (decorative).
   ------------------------------------------------------------------- */
.muni-canvas-entry-anchor {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-primary) !important;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
    z-index: 1;
    box-shadow: 0 4px 12px -5px rgba(0, 0, 0, 0.4);
}

.muni-canvas-entry-anchor__glyph {
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 15px;
    color: var(--mud-palette-primary) !important;
    line-height: 1;
}

.muni-canvas-entry-anchor__label {
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--mud-palette-primary) !important;
    text-align: center;
    line-height: 1.1;
}

/* -------------------------------------------------------------------
   Ask 3: flag chips on node cards (inside .muni-canvas-node__body).
   Rendered as a flex-wrap row below the meta row. Mono caps 8.5px.
   Hue is applied via inline style (per-flag civic token).
   Distinct from state chips: flag chips have the flag-name text and
   use border + filled/outlined based on grant/gate role.
   ------------------------------------------------------------------- */
/* Flag chips sit in their own row anchored just ABOVE the bottom-left trigger
   chip (which is position:absolute bottom:8px). Anchoring both -- with the card
   given extra height via --has-flags -- keeps the flag row and the trigger from
   colliding, which otherwise garbles a transparent "needs" chip over the trigger. */
.muni-canvas-node__flag-chips {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Cards carrying flag chips get a taller band so the flag row clears both the
   two-line description above and the anchored trigger chip below. */
.muni-canvas-node--has-flags {
    min-height: 152px;
}

.muni-canvas-node__flag-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: help;
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 2px;
    border: 1px solid;
    transition: box-shadow 0.1s ease;
    white-space: nowrap;
    pointer-events: auto;
}

/* -------------------------------------------------------------------
   Ask 3: flag-link midpoint glyph -- HTML overlay in .muni-canvas__chips.
   Centered on the bezier midpoint via translate(-50%, -50%).
   Mono caps 8.5px, hue via inline style. Pointer-events auto for hover.
   ------------------------------------------------------------------- */
.muni-canvas-flag-glyph {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 2px;
    background: var(--muni-paper);
    cursor: help;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(35,31,21,.15);
    transition: opacity 0.12s ease;
}

.muni-canvas-flag-glyph--lit {
    box-shadow: 0 2px 8px rgba(35,31,21,.25) !important;
}

/* -------------------------------------------------------------------
   Validation banner: discovered quest with zero entry interactables.
   Stamp-red (--muni-stamp), absolute over the canvas, pointer-events none.
   Intentionally visually distinct from the edge legend (which uses small
   inline SVG + mono text in the toolbar -- not an overlaid banner).
   ------------------------------------------------------------------- */
.muni-canvas-validation-banner {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    pointer-events: none;
    background: color-mix(in srgb, var(--muni-stamp) 10%, var(--muni-paper)) !important;
    border: 1.5px solid var(--muni-stamp) !important;
    border-radius: 2px;
    color: var(--muni-stamp) !important;
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 8px 18px;
    white-space: nowrap;
    box-shadow: 0 4px 12px -4px rgba(139,42,31,.35);
}