/* Vendored subset of Web/Public/css/app.css — root color tokens
   (lines 1-50) plus the SVG-content rendering rules (#canvas
   onward: shapes, outlines, connectors, groups, arrows, text
   modifiers). Deliberately excludes the editor-chrome rules
   (toolbar, inspector panel, drag handles) that the read-only
   hero demo has no elements for. Re-copy this same line range
   if app.css's colour palette or shape styling changes upstream —
   see Site/README.md. */

:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #666666;
  --border: #d8d8d8;
  --editor-bg: #fafafa;
  --shape-fill: #ffffff;
  --shape-stroke: #1a1a1a;
  --accent: #2f6fed;
  --error: #c0392b;
  --line-highlight: rgba(255, 213, 0, 0.35);
  --line-error: rgba(192, 57, 43, 0.28);
  /* Fixed border: palette (docs/file-format.md § Named styles and
     per-shape status) — red/grey deliberately reuse --error/--muted
     rather than mint near-duplicate colors. purple/yellow/teal/pink/
     indigo use Tailwind's 600-weight scale for light mode, matching
     the saturation/legibility of the original 5. */
  --border-green: #2e7d32;
  --border-blue: #1565c0;
  --border-orange: #e67e22;
  --border-purple: #7c3aed;
  --border-yellow: #ca8a04;
  --border-teal: #0d9488;
  --border-pink: #db2777;
  --border-indigo: #4f46e5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1c1e;
    --fg: #f0f0f0;
    --muted: #9a9a9a;
    --border: #3a3a3c;
    --editor-bg: #141416;
    --shape-fill: #232326;
    --shape-stroke: #e8e8e8;
    --accent: #5b8dfb;
    --error: #ff6b5c;
    --line-highlight: rgba(255, 196, 0, 0.28);
    --line-error: rgba(255, 107, 92, 0.28);
    --border-green: #66bb6a;
    --border-blue: #6ea8fe;
    --border-orange: #f2a65a;
    --border-purple: #a78bfa;
    --border-yellow: #facc15;
    --border-teal: #2dd4bf;
    --border-pink: #f472b6;
    --border-indigo: #818cf8;
  }
}

#canvas {
  display: block;
  /* Without this, dragging a connector-creation/re-anchor handle across
     shape/connector labels triggers the browser's native text-selection
     (drag-to-select), painting its own blue highlight over every label
     the drag path crosses — visually unrelated to, and much noisier than,
     the intended dashed drop-target highlight (see DiagramCanvas.swift's
     isLiveDropTarget for the Mac equivalent, which has no such problem
     since AppKit doesn't auto-select Text views under a drag). */
  user-select: none;
  -webkit-user-select: none;
}

.shape .outline {
  fill: var(--shape-fill);
  stroke: var(--shape-stroke);
  stroke-width: 1.5;
}

.shape-text .outline {
  display: none;
}

/* Fixed border: palette (docs/file-format.md § Named styles and
   per-shape status) — the extra .outline class raises specificity above
   the plain ".shape .outline" rule above without needing !important, the
   same technique ".shape.selected .outline" below already relies on.
   Placed before that selected-ring rule so, on the rare shape that's
   both selected and styled, the selection ring (same specificity, later
   in source) keeps winning — a selected shape should stay unambiguously
   visible as selected.

   fill: uses color-mix() to wash the shape's own border color into its
   fill, strength controlled by --fill-alpha (0% by default — i.e. pure
   --shape-fill, identical to a plain uncolored shape — set to 12%/28%
   by .fill-tint/.fill-pastel on the SVG root when the diagram's fill:
   directive is set; docs/file-format.md § Fill directive). One rule per
   color handles all three fill: modes uniformly — no separate
   .fill-tint/.fill-pastel compound selector needed, since --fill-alpha
   already carries which mode (if any) is active via the cascade. */
.shape .outline.outline-green {
  stroke: var(--border-green);
  fill: color-mix(in srgb, var(--border-green) var(--fill-alpha, 0%), var(--shape-fill));
}

.shape .outline.outline-blue {
  stroke: var(--border-blue);
  fill: color-mix(in srgb, var(--border-blue) var(--fill-alpha, 0%), var(--shape-fill));
}

.shape .outline.outline-orange {
  stroke: var(--border-orange);
  fill: color-mix(in srgb, var(--border-orange) var(--fill-alpha, 0%), var(--shape-fill));
}

.shape .outline.outline-red {
  stroke: var(--error);
  fill: color-mix(in srgb, var(--error) var(--fill-alpha, 0%), var(--shape-fill));
}

.shape .outline.outline-grey {
  stroke: var(--muted);
  fill: color-mix(in srgb, var(--muted) var(--fill-alpha, 0%), var(--shape-fill));
}

.shape .outline.outline-purple {
  stroke: var(--border-purple);
  fill: color-mix(in srgb, var(--border-purple) var(--fill-alpha, 0%), var(--shape-fill));
}

.shape .outline.outline-yellow {
  stroke: var(--border-yellow);
  fill: color-mix(in srgb, var(--border-yellow) var(--fill-alpha, 0%), var(--shape-fill));
}

.shape .outline.outline-teal {
  stroke: var(--border-teal);
  fill: color-mix(in srgb, var(--border-teal) var(--fill-alpha, 0%), var(--shape-fill));
}

.shape .outline.outline-pink {
  stroke: var(--border-pink);
  fill: color-mix(in srgb, var(--border-pink) var(--fill-alpha, 0%), var(--shape-fill));
}

.shape .outline.outline-indigo {
  stroke: var(--border-indigo);
  fill: color-mix(in srgb, var(--border-indigo) var(--fill-alpha, 0%), var(--shape-fill));
}

/* fill: tint|pastel (docs/file-format.md § Fill directive) — applied to
   the SVG root by diagram-renderer.js when the diagram sets fill:.
   Absent entirely (fill: none, the default) leaves --fill-alpha
   undefined, so every .outline-<color> rule above's own var(--fill-alpha,
   0%) fallback kicks in — resolves to plain --shape-fill, unchanged
   from before this feature existed. The fallback lives in each
   color-mix() call rather than a :root default specifically so this
   doesn't depend on :root correctly matching inside an embedded/detached
   SVG (diagram-export.js's own EXPORT_STYLE mirror of this block reuses
   the exact same var(--fill-alpha, 0%) form for that reason). */
.fill-tint {
  --fill-alpha: 12%;
}

.fill-pastel {
  --fill-alpha: 28%;
}

.shape.selected .outline {
  stroke: var(--accent);
  stroke-width: 2.5;
}

.shape-label {
  fill: var(--fg);
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* text: trailing-token modifiers — combinable, applied to the label only
   (docs/file-format.md § Named styles and per-shape status). */
.text-strikethrough {
  text-decoration: line-through;
}

.text-bold {
  font-weight: 700;
}

.text-italic {
  font-style: italic;
}

.connector-line {
  stroke: var(--fg);
  stroke-width: 1.5;
  fill: none;
}

.connector.selected .connector-line {
  stroke: var(--accent);
  stroke-width: 2.5;
}

.connector-label {
  fill: var(--muted);
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Milestone 3: handles for dragging out a new connector — hidden by
   default, shown while the shape they belong to is caret-highlighted
   (see diagram-renderer.js's renderShape `showHandles` doc comment).
   Deliberately not hover-driven (an earlier design) — hidden state here
   just means "not the current caret target", not "not hovered". */
.connector-handle {
  fill: var(--accent);
  opacity: 0;
  pointer-events: none;
  cursor: crosshair;
}

.shape.handles-visible .connector-handle {
  opacity: 1;
  pointer-events: all;
}

/* Endpoint handles for re-anchoring a caret-highlighted connector. */
.connector-endpoint-handle {
  fill: var(--accent);
  cursor: crosshair;
}

/* Live dashed preview line for an in-progress drag-to-create-connector
   gesture — see connectorHandles in diagram-renderer.js. */
.connector-preview {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  fill: none;
  pointer-events: none;
}

/* Live drop-target highlight — toggled on whichever shape's <g> is
   currently under an in-progress connector-creation/re-anchor drag's
   point (see createDropTargetTracker in diagram-renderer.js). Mirrors
   DiagramCanvas.swift's isLiveDropTarget dashed ring. */
.shape.drop-target .outline {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 5 3;
}

.arrowhead {
  fill: var(--fg);
}

.group-outline {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
}

.group-label {
  fill: var(--muted);
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.diagram-title {
  font: 600 16px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  fill: var(--fg);
}

/* footer: is deliberately export-only (docs/file-format.md § Footer
   directive) — renderDiagram/renderSequenceDiagram/renderGanttDiagram
   always draw it into the live SVG whenever set (so the browser's own
   Print-to-PDF path, which prints that same live SVG as-is, has it
   available), but it stays hidden here on screen; the @media print
   block below is what actually reveals it. diagram-export.js's PNG path
   never goes through app.css at all (a fully detached, self-contained
   SVG — see EXPORT_STYLE), so its own .diagram-footer rule there is
   always visible regardless of this one. */
.diagram-footer,
.sequence-footer,
.gantt-footer {
  display: none;
  font: 10px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  fill: var(--muted);
}

/* Sequence diagrams (type: sequence) — entirely separate rules from the
   flowchart .shape/.connector classes above, drawn by
   sequence-renderer.js. v1 is view-only, so nothing here needs a
   :hover/.selected state the way the flowchart classes do. */
.sequence-title {
  font: 600 16px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  fill: var(--fg);
}

.sequence-lifeline {
  stroke: var(--border);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.sequence-participant-box {
  fill: var(--shape-fill);
  stroke: var(--shape-stroke);
  stroke-width: 1.5;
}

.sequence-participant-label,
.sequence-note-label,
.sequence-fragment-keyword,
.sequence-fragment-label,
.sequence-divider-label {
  font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  fill: var(--fg);
}

.sequence-message-line {
  stroke: var(--fg);
  stroke-width: 1.5;
}

.sequence-message-line.dashed {
  stroke-dasharray: 6 3;
}

.sequence-message-label {
  font: 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  fill: var(--muted);
}

.sequence-arrowhead {
  fill: var(--fg);
}

.sequence-arrowhead-open {
  stroke: var(--fg);
  stroke-width: 1.5;
  fill: none;
}

.sequence-failure-mark {
  stroke: var(--error);
  stroke-width: 2;
}

.sequence-activation-bar {
  fill: var(--shape-fill);
  stroke: var(--shape-stroke);
  stroke-width: 1.25;
}

.sequence-note-box {
  fill: #fdf6d8;
  stroke: var(--border);
  stroke-width: 1.25;
}

.sequence-divider-line {
  stroke: var(--border);
  stroke-width: 1.25;
}

.sequence-divider-label-box {
  fill: var(--bg);
  stroke: var(--border);
  stroke-width: 1.25;
}

.sequence-fragment-box {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.25;
  stroke-dasharray: 3 3;
}

.sequence-fragment-tab {
  fill: #eef1f5;
  stroke: var(--muted);
  stroke-width: 1.25;
}

.sequence-fragment-keyword {
  font-weight: 700;
  font-style: italic;
}

.sequence-fragment-else-line {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* Caret-follow highlighting: whichever element the text caret's current
   line belongs to (see app.js's caretHighlightedSequenceLine and
   sequence-renderer.js's own `highlightedLine` param) gets a
   ".highlighted" class alongside its base one. One shared accent-color
   treatment per element type, mirroring the flowchart .selected rules
   above (var(--accent), a step up in stroke-width) rather than each
   element inventing its own look. */
.sequence-participant-box.highlighted,
.sequence-activation-bar.highlighted,
.sequence-note-box.highlighted,
.sequence-fragment-box.highlighted,
.sequence-fragment-tab.highlighted {
  stroke: var(--accent);
  stroke-width: 2.5;
}

.sequence-message-line.highlighted,
.sequence-divider-line.highlighted,
.sequence-divider-label-box.highlighted,
.sequence-fragment-else-line.highlighted {
  stroke: var(--accent);
  stroke-width: 2;
}

.sequence-message-label.highlighted,
.sequence-fragment-label.highlighted {
  fill: var(--accent);
}

.sequence-arrowhead.highlighted {
  fill: var(--accent);
}

.sequence-arrowhead-open.highlighted {
  stroke: var(--accent);
}

/* Gantt charts (type: gantt) — entirely separate rules from the
   flowchart/sequence classes above, drawn by gantt-renderer.js. Bar/
   diamond fill color comes from literal hex (STYLE_COLOUR_HEX in
   gantt-renderer.js), same reasoning diagram-export.js's own detached-
   SVG palettes already established — not repeated as CSS custom
   properties here since these are drawn as plain `fill` attributes, not
   classed rules, matching how sequence's own arrowhead/note fills work. */
.gantt-title {
  font: 600 16px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  fill: var(--fg);
}

.gantt-grid-line {
  stroke: var(--border);
  stroke-width: 1;
}

.gantt-column-label {
  font: 11px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  fill: var(--muted);
}

.gantt-row-text {
  font: 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  fill: var(--fg);
}

.gantt-row-text.highlighted {
  fill: var(--accent);
}

/* Display-only row numbering (docs/file-format.md § Gantt charts) —
   never written to the file. Smaller and more muted than
   .gantt-row-text so it reads as a reference number, not part of the
   task label. */
.gantt-row-number {
  font: 10px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  fill: var(--muted);
}

.gantt-row-highlight {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
}

.gantt-collapse-triangle {
  fill: var(--muted);
}

.gantt-segment.highlighted {
  stroke: var(--accent);
  stroke-width: 2;
}

/* progress:n% (docs/file-format.md § Gantt charts) — a thin black core
   line over a slightly thicker white halo, so it stays visible against
   every bar fill color, including the default uncoloured bar's own
   near-black fill. Literal hex, not var(--fg)/var(--bg): this indicator
   must read the same regardless of the page's own light/dark theme,
   the same reasoning diagram-export.js's own detached-SVG palette
   already established for bar/diamond fills just above. */
.gantt-progress-halo {
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
}

.gantt-progress-core {
  stroke: #000000;
  stroke-width: 1.25;
  stroke-linecap: round;
}

/* The toolbar's "Print…" button (see app.js) just calls window.print()
   — printing operates on the *live*, already-styled DOM (unlike PNG
   export's detached-SVG technique, see diagram-export.js), so every CSS
   custom property/class here still resolves normally. Only two things
   need doing: hide everything except the diagram, and neutralize the
   on-screen scroll/flex constraints that would otherwise clip a diagram
   larger than one screen's worth of space instead of letting the
   browser paginate it naturally. Placed after the dark-mode block above
   so its :root override wins on cascade order for any property both
   touch. */
@media print {
  header,
  .editor-wrap,
  #splitter,
  #shape-context-menu,
  .inspector {
    display: none !important;
  }

  body,
  main {
    display: block;
    height: auto;
    overflow: visible;
  }

  .canvas-scroll {
    overflow: visible;
    padding: 0;
  }

  /* Forces the same light-mode values diagram-export.js's PNG path
     hardcodes — belt-and-suspenders against browsers that keep
     evaluating prefers-color-scheme: dark while printing (inconsistent
     across engines), matching the Mac export's "always force light"
     decision rather than trusting cascade order alone everywhere.
     --border added alongside the sequence-diagram renderer: flowchart's
     own .shape/.connector-* classes never reference it (only UI chrome
     like .toolbar/.field does), but sequence-renderer.js's lifelines/
     fragment boxes/notes/dividers do — without forcing it here too,
     printing a sequence diagram while the system is in dark mode would
     print those in dark mode's #3a3a3c instead of light mode's #d8d8d8. */
  :root {
    --bg: #ffffff !important;
    --fg: #1a1a1a !important;
    --muted: #666666 !important;
    --border: #d8d8d8 !important;
    --shape-fill: #ffffff !important;
    --shape-stroke: #1a1a1a !important;
  }

  /* The one place footer: actually becomes visible for the PDF export
     path (Print…) — see .diagram-footer's own comment above for why
     it's always drawn into the live SVG but display:none until now. */
  .diagram-footer,
  .sequence-footer,
  .gantt-footer {
    display: inline;
  }
}