/* Visual system colour roles, in one place.
 *
 * Five meanings, not five colours: secret, public, hashed, address, warn. Each
 * role also carries a shape rule in src/learn-visuals.js, so a drawing still
 * works in greyscale, for a colour blind reader, and in a black and white
 * print. Contrast is measured by tools/viz-contrast.js (npm run test:viz), not
 * asserted here.
 *
 * index.html, test/self-test.html and the sample sheet all link this file, so
 * a diagram cannot be rendered against tokens that were never loaded, which is
 * what happens when the roles live only inside the app stylesheet.
 */
:root {
  --viz-secret: #fbbf24;
  --viz-public: #60a5fa;
  --viz-hashed: #c4b5fd;
  --viz-address: #4ade80;
  --viz-warn: #f87171;
  --viz-line: rgba(255, 255, 255, 0.28);
  --viz-surface: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] {
  --viz-secret: #92400e;
  --viz-public: #1d4ed8;
  --viz-hashed: #5b21b6;
  --viz-address: #15803d;
  --viz-warn: #b91c1c;
  --viz-line: rgba(0, 0, 0, 0.28);
  --viz-surface: #ffffff;
}

    /* ---------------------------------------------------------------- layout --
     * A drawing is drawn at the width its content needs, and on a narrow screen
     * it keeps that width and scrolls rather than being scaled to fit. Measured
     * before this rule: the words-to-bits drawing scaled to a 390 pixel phone
     * screen rendered its 11 pixel labels at 5.1 pixels, which is not readable,
     * and the comparison rows pushed the whole page 116 pixels sideways. */
    .viz-host {
      max-width: 100%;
    }
    .viz-frame-hint {
      display: none;
    }
    @media (max-width: 720px) {
      .viz-host {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
      }
      .viz-host > .viz-svg {
        min-width: var(--viz-natural, 640px);
      }
      .viz-frame-hint {
        display: block;
        margin: 6px 0 0;
        font-size: 11px;
        color: var(--text-muted);
      }
    }