/* Tim Berners-Lee's quiet radical choice: to link to any page you need only its
   address — no registration, no gatekeeper, no fee. Click two sites to link them
   and an open mesh forms with zero permission requests. Flip to the gatekept web
   and every link must route through one approver. He gave the web away royalty-free
   so the open version would win. Vanilla JS, no deps, no build. Dark theme.
   Palette shared with siblings: green = the open/free link (the win), violet =
   the gatekeeper's toll, white = primary. No red. */

#permissionless-web {
  --pw-open: #30d158;                /* a free, direct link — the win */
  --pw-gate: #b488ff;               /* routed through the gatekeeper — violet, not red */
  --pw-node: #5ac8fa;
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-bg-elevated, #111111);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  padding: clamp(16px, 3vw, 26px);
  margin: 2.5rem 0;
  color: var(--color-text-primary, #ffffff);
}

.pw-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.pw-explain {
  font-size: 0.9rem; line-height: 1.55; margin: 8px 0 16px;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
}

/* mode toggle */
.pw-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px;
  background: var(--color-bg-surface, #1a1a1a); margin-bottom: 8px; }
.pw-mode {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.84rem; font-weight: 600;
  border: 0; background: transparent; color: var(--color-text-secondary, rgba(255,255,255,0.55));
  padding: 7px 14px; border-radius: 7px; transition: color 0.18s, background 0.18s;
}
.pw-mode:hover { color: var(--color-text-primary, #fff); }
.pw-mode.is-on { color: #0b0b0b; background: var(--color-accent, #fff); }

.pw-stage { width: 100%; height: auto; display: block; touch-action: manipulation; }

/* SVG */
.pw-link { stroke-width: 2.5; opacity: 0; transition: opacity 0.35s; }
.pw-link.show { opacity: 0.9; }
.pw-link.open { stroke: var(--pw-open); }
.pw-link.gate { stroke: var(--pw-gate); }
.pw-node { fill: var(--color-bg-surface, #1a1a1a); stroke: var(--pw-node); stroke-width: 2; cursor: pointer; transition: stroke 0.2s, fill 0.2s; }
.pw-node:hover { fill: rgba(90,200,250,0.12); }
.pw-node.selected { stroke: #fff; stroke-width: 3; fill: rgba(255,255,255,0.1); }
.pw-hub { fill: rgba(180,136,255,0.14); stroke: var(--pw-gate); stroke-width: 2; opacity: 0.35; transition: opacity 0.25s; }
.pw-hub.active { opacity: 1; }
.pw-nodelabel { fill: var(--color-text-secondary, rgba(255,255,255,0.78)); font-size: 12px; text-anchor: middle; pointer-events: none; font-family: var(--font-family, sans-serif); }
.pw-hublabel { fill: var(--pw-gate); font-size: 11px; text-anchor: middle; pointer-events: none; opacity: 0.4; transition: opacity 0.25s; font-family: var(--font-mono, monospace); }
.pw-hublabel.active { opacity: 1; }

/* readout */
.pw-readout {
  margin-top: 14px; display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
  background: var(--color-bg-surface, #1a1a1a);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  border-radius: 12px; padding: 13px 16px;
}
.pw-metric { font-size: 0.8rem; color: var(--color-text-secondary, rgba(255,255,255,0.6)); }
.pw-metric b { display: block; font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 2px; }
.pw-metric--perm.zero b { color: var(--pw-open); }
.pw-metric--perm.some b { color: var(--pw-gate); }

.pw-caption {
  margin-top: 12px; font-size: 0.88rem; line-height: 1.5; min-height: 1.4em;
  color: var(--color-text-secondary, rgba(255,255,255,0.72));
}
.pw-caption b { color: #fff; }
.pw-caption .pw-hl-open { color: var(--pw-open); font-weight: 650; }
.pw-caption .pw-hl-gate { color: var(--pw-gate); font-weight: 650; }

.pw-reset {
  margin-top: 12px; appearance: none; cursor: pointer; font: inherit; font-size: 0.84rem;
  background: transparent; color: var(--color-text-primary, #fff);
  border: 1px solid var(--color-border, rgba(255,255,255,0.15)); border-radius: 8px; padding: 7px 14px;
  transition: border-color 0.15s, background 0.15s;
}
.pw-reset:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }

.pw-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }