/* Page styles for the SCORE customizing pages (module score.app, /score/w/:code/customizing/...).
   Only what the shared components cannot express: the status graph editor (SVG, enhanced by
   public/js/score-status-graph.js) and the weight editor rows (public/js/score-weights.js).
   Positions are SVG attributes; nothing here relies on inline styles (CSP style-src 'self'). */

/* Weight editor ------------------------------------------------------------------------------ */

.score-weight-row {
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-line);
  border-radius: 0.6rem;
}

.score-weight-row--selected {
  border-color: var(--color-brand-border);
  background: var(--color-brand-soft);
}

.score-weight-row__controls {
  display: grid;
  grid-template-columns: 6.5rem auto minmax(8rem, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.score-weight-row__number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.score-weight-row__range {
  width: 100%;
  accent-color: var(--color-brand);
}

@media (max-width: 560px) {
  .score-weight-row__controls {
    grid-template-columns: 6.5rem auto;
  }

  .score-weight-row__range {
    grid-column: 1 / -1;
  }
}

.score-level-text {
  white-space: pre-line;
}

/* Status graph editor ------------------------------------------------------------------------ */

.score-graph {
  display: grid;
  gap: 0.6rem;
}

.score-graph__zoom {
  min-width: 3.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.score-graph [data-graph-connect][aria-pressed="true"] {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.score-graph__viewport {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 0.6rem;
  background: var(--color-canvas);
}

.score-graph__svg {
  display: block;
  width: 100%;
  height: clamp(280px, 50vh, 560px);
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.score-graph--panning .score-graph__svg,
.score-graph--panning .score-graph__node {
  cursor: grabbing;
}

.score-graph__svg marker path {
  fill: var(--color-muted);
}

.score-graph__svg #score-graph-arrow-active path {
  fill: var(--color-brand);
}

.score-graph__edge {
  fill: none;
  stroke: var(--color-muted);
  stroke-width: 1.7;
  opacity: 0.75;
}

.score-graph__edge--inactive {
  stroke-dasharray: 6 5;
  opacity: 0.4;
}

.score-graph--highlight .score-graph__edge {
  opacity: 0.15;
}

.score-graph--highlight .score-graph__edge.score-graph__edge--highlighted {
  stroke: var(--color-brand);
  stroke-width: 3;
  opacity: 1;
}

.score-graph__edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 10;
  pointer-events: stroke;
  cursor: pointer;
}

.score-graph__edge-group:has(.score-graph__edge-hit:hover) .score-graph__edge,
.score-graph__edge-group:has(.score-graph__edge-hit:focus-visible) .score-graph__edge {
  stroke: var(--color-brand);
  stroke-width: 3;
  opacity: 1;
}

.score-graph__edge-hit:focus {
  outline: none;
}

.score-graph__preview {
  display: none;
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 2.5;
  stroke-dasharray: 7 4;
  pointer-events: none;
}

.score-graph__preview--visible {
  display: inline;
}

.score-graph__node {
  cursor: grab;
}

.score-graph--connecting .score-graph__node {
  cursor: crosshair;
}

.score-graph__node:focus {
  outline: none;
}

.score-graph__node-box {
  fill: var(--color-surface);
  stroke: var(--color-brand);
  stroke-width: 1.7;
}

.score-graph__node--blue .score-graph__node-box {
  fill: light-dark(#edf4ff, #1d2f47);
}

.score-graph__node--amber .score-graph__node-box {
  fill: light-dark(#fff3db, #43361b);
}

.score-graph__node--green .score-graph__node-box {
  fill: light-dark(#e3f4e9, #1d3a2a);
}

.score-graph__node--initial .score-graph__node-box {
  stroke-width: 3.5;
}

.score-graph__node--inactive .score-graph__node-box {
  stroke-dasharray: 5 4;
  opacity: 0.65;
}

.score-graph__node:hover .score-graph__node-box,
.score-graph__node:focus-visible .score-graph__node-box,
.score-graph__node--source .score-graph__node-box {
  stroke-width: 4;
}

.score-graph__node--target .score-graph__node-box {
  stroke: var(--color-success);
  stroke-width: 5;
}

.score-graph__node-inner {
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 1;
}

.score-graph__node-label {
  fill: var(--color-ink);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}

.score-graph__node-kind {
  fill: var(--color-ink-soft);
  font-size: 11px;
  pointer-events: none;
}

.score-graph__port {
  cursor: crosshair;
}

.score-graph__port circle {
  fill: var(--color-brand);
  stroke: var(--color-surface);
  stroke-width: 2;
}

.score-graph__port:hover circle,
.score-graph__port:focus-visible circle {
  fill: var(--color-surface);
  stroke: var(--color-brand);
  stroke-width: 3;
}

.score-graph__port:focus {
  outline: none;
}

@media (forced-colors: active) {
  .score-graph__node-box,
  .score-graph__edge {
    stroke: CanvasText;
  }

  .score-graph__node-label,
  .score-graph__node-kind {
    fill: CanvasText;
  }
}