/* Cartographer visual grammar. The "map-making hand" applied inside
 * canvas panels and to System Map SVGs that will be authored in Phase 2.
 *
 * Scope: classes defined here are consumed by inline SVG inside panels
 * and by panel chrome (crop-marks, scale bars, legends). Loaded after
 * canvas.css so these rules extend, not override, panel base styles.
 *
 * Phase 1 ships the vocabulary. Phase 2 applies it to panel content. */

/* ----- Node glyphs ----- */
/* Circle, filled amber: hero / "you are here" / panel's primary subject */
.cg-node-hero {
  fill: var(--amber);
  stroke: var(--amber);
  stroke-width: 1;
}

/* Circle, hairline ink: actor (agent, user, module) */
.cg-node-actor {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1;
}

/* Square, hairline ink: data store, memory layer, persistent entity */
.cg-node-store {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1;
}

/* Hexagon, hairline ink: external surface (Spotify, GitHub, Apple Health) */
.cg-node-external {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1;
}

/* Small dot: leaf concept, sub-item */
.cg-node-leaf {
  fill: var(--ink-mute);
  stroke: none;
}

/* Diamond, dashed ink: decision / routing */
.cg-node-decision {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}

/* ----- Edges ----- */
/* Solid, 1px ink at 50%: direct call, foreground relationship */
.cg-edge-direct {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: 0.5;
  stroke-width: 1;
}

/* Dashed, 1px teal at 40%: scheduled / async / cron */
.cg-edge-async {
  fill: none;
  stroke: var(--teal);
  stroke-opacity: 0.4;
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

/* Dotted, 0.8px ink at 35%: read-only dependency */
.cg-edge-read {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: 0.35;
  stroke-width: 0.8;
  stroke-dasharray: 1 3;
}

/* Solid, 1.2px amber: traced path on deep-link arrival */
.cg-edge-traced {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.2;
}

/* ----- Typography inside maps (Mono-only; Fraunces forbidden in map SVGs) ----- */
.cg-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--ink);
}
.cg-label-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  fill: var(--ink-mute);
}
.cg-label-meta {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--ink-mute);
}

/* ----- Region framing: corner crop-marks ----- */
/* Two mechanisms:
 *   1. `.cg-crop` path class for inline SVG crop-marks (inside map SVGs).
 *   2. `.panel-crop`: CSS-positioned 14x14 block anchored to each of a
 *      panel's 4 corners, drawing an L-bracket via two background gradients.
 *      No SVG needed, zero runtime cost, scales to any panel dimension.
 *
 * HTML pattern inside a .panel:
 *   <span class="panel-crop" data-corner="tl"></span>
 *   <span class="panel-crop" data-corner="tr"></span>
 *   <span class="panel-crop" data-corner="br"></span>
 *   <span class="panel-crop" data-corner="bl"></span>
 * (order doesn't matter) */

.cg-crop {
  stroke: var(--ink);
  stroke-opacity: 0.35;
  stroke-width: 1;
  fill: none;
}

.panel-crop {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(26,24,20,0.35), rgba(26,24,20,0.35)),
    linear-gradient(to bottom, rgba(26,24,20,0.35), rgba(26,24,20,0.35));
  background-size: 10px 1px, 1px 10px;
  background-repeat: no-repeat;
}
.panel-crop[data-corner="tl"] {
  top: 8px; left: 8px;
  background-position: 0 0, 0 0;
}
.panel-crop[data-corner="tr"] {
  top: 8px; right: 8px;
  background-position: right 0, right 0;
}
.panel-crop[data-corner="br"] {
  bottom: 8px; right: 8px;
  background-position: right bottom, right bottom;
}
.panel-crop[data-corner="bl"] {
  bottom: 8px; left: 8px;
  background-position: 0 bottom, 0 bottom;
}

/* Mobile: panels stack full-width. Crop marks off to keep stacked view
 * clean. */
@media (max-width: 760px) {
  .panel-crop { display: none; }
}

/* ----- Scale bar (System Map panels only) ----- */
.cg-scale-bar line {
  stroke: var(--ink);
  stroke-opacity: 0.5;
  stroke-width: 1;
}
.cg-scale-bar text {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--ink-mute);
}

/* ----- Legend block (System Map panels only) ----- */
.cg-legend {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  fill: var(--ink-soft);
}
.cg-legend .cg-legend-title {
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--ink-mute);
}

/* ----- Compass rose (same SVG used by landing map; shared here for panels) ----- */
.cg-compass {
  opacity: 0.4;
}
.cg-compass path,
.cg-compass line,
.cg-compass circle {
  stroke: var(--ink);
  stroke-width: 0.8;
  fill: none;
}
.cg-compass text {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.18em;
  fill: var(--ink-mute);
  text-transform: uppercase;
}

/* ----- Plum accent (warnings, or special annotations) ----- */
.cg-plum {
  fill: var(--plum);
  color: var(--plum);
}
.cg-plum-edge {
  stroke: var(--plum);
  stroke-width: 1;
  fill: none;
}

/* ----- Arrowhead marker conventions ----- */
/* Pages that use arrowheads define the <marker> inline; these classes
 * keep the stroke semantics consistent with the edge classes above. */
.cg-arrow-direct { fill: var(--ink); fill-opacity: 0.5; }
.cg-arrow-async  { fill: var(--teal); fill-opacity: 0.4; }
.cg-arrow-read   { fill: var(--ink); fill-opacity: 0.35; }
.cg-arrow-traced { fill: var(--amber); }

/* ----- Paper-background fill for label plates that need to mask
 *       a stroke or ring they overprint. Uses paper-soft so it blends
 *       with the panel surface. ----- */
.cg-plate { fill: var(--paper-soft); stroke: none; }