/**
 * Van de Graaf Canon Grid — CSS
 * Overlay dev tool (Shift+V toggle)
 */


/* ============================================
   Container
   ============================================ */

.vdg-grid {
    position: fixed;
    inset: 0;
    z-index: 9989;
    pointer-events: none;
    display: none;
    background-color: rgba(0, 0, 0, 0.88);
}

.vdg-grid.is--visible {
    display: block;
}


/* ============================================
   SVG — Lines & shapes
   ============================================ */

.vdg-grid__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.vdg-grid__diagonals line {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.vdg-grid__main-lines line {
    stroke: rgba(255, 113, 34, 0.4);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.vdg-grid__margins rect {
    fill: rgba(255, 113, 34, 0.04);
    stroke: none;
}

.vdg-grid__power-lines line {
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
}

.vdg-grid__content-block {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}


/* ============================================
   Annotations — HTML overlay
   ============================================ */

.vdg-grid__annotations {
    position: absolute;
    inset: 0;
    font-family: 'PP Neue Montreal', -apple-system, sans-serif;
    color: rgba(255, 255, 255, 0.5);
}

.vdg-grid__anno {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}


/* --- Top-left brand --- */

.vdg-grid__anno--tl {
    top: 2.5em;
    left: 2.5em;
}

.vdg-grid__anno-brand {
    font-size: var(--11px-size);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.7);
}

.vdg-grid__anno-agency {
    font-size: var(--11px-size);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
}


/* --- Number (01) --- */

.vdg-grid__anno--num {
    top: 2.5em;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--14px-size);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
}


/* --- Title: Grid / Golden Canon --- */

.vdg-grid__anno--title {
    top: 2.5em;
    right: 2.5em;
    align-items: flex-end;
}

.vdg-grid__anno-heading {
    font-size: var(--14px-size);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
}

.vdg-grid__anno-sub {
    font-size: var(--11px-size);
    font-weight: 400;
    color: rgba(255, 113, 34, 0.6);
}


/* --- Left-side metadata stack --- */

.vdg-grid__anno--margins {
    top: 30%;
    left: 2.5em;
}

.vdg-grid__anno--power {
    top: 42%;
    left: 2.5em;
}

.vdg-grid__anno--used {
    top: 54%;
    left: 2.5em;
}

.vdg-grid__anno-label {
    font-size: var(--11px-size);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.35);
}

.vdg-grid__anno-value {
    font-size: var(--14px-size);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
}


/* --- Resolution --- */

.vdg-grid__anno--res {
    bottom: 2.5em;
    left: 2.5em;
    font-size: var(--11px-size);
    font-weight: 400;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.3);
}


/* --- Steps (right side) --- */

.vdg-grid__anno--step1 {
    top: 30%;
    right: 2.5em;
    align-items: flex-end;
}

.vdg-grid__anno--step2 {
    top: 46%;
    right: 2.5em;
    align-items: flex-end;
}

.vdg-grid__anno-step {
    font-size: var(--11px-size);
    font-weight: 500;
    color: rgba(255, 113, 34, 0.5);
}

.vdg-grid__anno-desc {
    font-size: var(--14px-size);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

.vdg-grid__anno-note {
    font-size: var(--11px-size);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
    max-width: 22em;
    text-align: right;
}


/* --- Advice block (bottom-right) --- */

.vdg-grid__anno--advice {
    bottom: 2.5em;
    right: 2.5em;
    align-items: flex-end;
    max-width: 28em;
}

.vdg-grid__anno--advice .vdg-grid__anno-heading {
    margin-bottom: 0.5em;
    font-size: var(--12px-size);
}

.vdg-grid__anno-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    text-align: right;
}

.vdg-grid__anno-list li {
    font-size: var(--11px-size);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.3);
}

.vdg-grid__anno-list li::before {
    content: counter(list-item) ". ";
    color: rgba(255, 113, 34, 0.4);
}