/* Standalone styles for the architecture diagram partial (resources/views/landing/partials/architecture-diagram.blade.php),
   for use outside the landing page (e.g. the user guide) where landing.css isn't loaded. */
.architecture-diagram-scope {
    --color-primary:         #533afd;
    --color-brand-dark:      #1c1e54;
    --color-ink:             #0d253d;
    --color-ink-mute:        #64748d;
    --color-on-primary:      #ffffff;
    --color-canvas:          #ffffff;
    --color-hairline:        #e3e8ee;
}

.architecture-diagram-scope .architecture__diagram-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 16px;
}

.architecture-diagram-scope .architecture__diagram {
    display: block;
    width: 100%;
    min-width: 720px;
    height: auto;
}

.architecture-diagram-scope .architecture__label {
    font-size: 14px;
    font-weight: 400;
    fill: var(--color-ink);
}

.architecture-diagram-scope .architecture__sublabel {
    font-size: 12px;
    font-weight: 300;
    fill: var(--color-ink-mute);
}

.architecture-diagram-scope .architecture__flow-line {
    stroke: var(--color-primary);
    stroke-width: 2;
    fill: none;
}

.architecture-diagram-scope .architecture__flow-label {
    font-size: 12px;
    font-weight: 300;
    fill: var(--color-ink-mute);
}

.architecture-diagram-scope .architecture__zone-label {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 1px;
    fill: rgba(255,255,255,0.38);
}

.architecture-diagram-scope .architecture__zone-divider {
    stroke: rgba(255,255,255,0.1);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.architecture-diagram-scope .architecture__internal-arrow {
    stroke: rgba(255,255,255,0.5);
    stroke-width: 1.5;
    fill: none;
}

.architecture-diagram-scope .architecture__chip-encrypted {
    fill: rgba(255,255,255,0.13);
    stroke: rgba(168,161,255,0.45);
    stroke-width: 1;
}

.architecture-diagram-scope .architecture__server-title {
    font-size: 17px;
    font-weight: 300;
    letter-spacing: -0.2px;
    fill: var(--color-on-primary);
}

.architecture-diagram-scope .architecture__server-os {
    font-size: 11px;
    font-weight: 300;
    fill: rgba(255,255,255,0.65);
}

.architecture-diagram-scope .architecture__server-chip {
    fill: rgba(255,255,255,0.08);
    stroke: rgba(255,255,255,0.15);
    stroke-width: 1;
}

.architecture-diagram-scope .architecture__chip-text {
    font-size: 13px;
    font-weight: 400;
    fill: var(--color-on-primary);
}

.architecture-diagram-scope .architecture__chip-sublabel {
    font-size: 11px;
    font-weight: 300;
    fill: rgba(255,255,255,0.6);
}

.architecture-diagram-scope .architecture__export-line {
    stroke: var(--color-primary);
    stroke-width: 2.5;
    stroke-dasharray: 5 4;
    opacity: 0.75;
    fill: none;
}

.architecture-diagram-scope .architecture__export-node {
    fill: var(--color-canvas);
    stroke: var(--color-hairline);
    stroke-width: 1;
}

.architecture-diagram-scope .architecture__export-text {
    font-size: 15px;
    font-weight: 300;
    fill: var(--color-ink);
}

.architecture-diagram-scope .architecture__caption {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.39px;
    color: var(--color-ink-mute);
    text-align: center;
    margin-top: 24px;
}