/* The blueprint logo: a stage as big as the window, an SVG the script fills with the drawing. Every colour is a
   variable here: the blueprint and its lines, the white paper and its blue lines, the approval stamp. */
:root {
  --blueprint: #1c5296;       /* the blueprint sheet */
  --blueprint-deep: #133c73;  /* the blueprint towards the corners */
  --blueprint-line: #eef6ff;  /* the lines on the blueprint */
  --blueprint-grid: #8fbcf0;  /* the grid on the blueprint */
  --paper: #f7f5ee;           /* the white paper */
  --paper-deep: #e8e4d6;      /* the paper towards the corners */
  --paper-line: #1f4fa0;      /* the blue lines on the paper */
  --paper-grid: #8cb0dc;      /* the grid on the paper */
  --stamp: #ff5a46;           /* the approval stamp */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

/* the two papers: the script picks one */
html {
  --bg: var(--blueprint);
  --bg-deep: var(--blueprint-deep);
  --ln: var(--blueprint-line);
  --gr: var(--blueprint-grid);
}
html[data-paper='white'] {
  --bg: var(--paper);
  --bg-deep: var(--paper-deep);
  --ln: var(--paper-line);
  --gr: var(--paper-grid);
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: radial-gradient(130% 100% at 50% 42%, var(--bg) 52%, var(--bg-deep));
  background-color: var(--bg);
  overflow: hidden;
}

.scena {
  position: relative;
  height: var(--screen);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* the logo is drawn in this face (its outlines come from the font file); the notes are in the mono face */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: 'Barlow', 'Arial Narrow', sans-serif;
  font-weight: 700;
}

/* the grid */
.griglia-fine { fill: none; stroke: var(--gr); stroke-width: 0.6; opacity: 0.32; }
.griglia { stroke: var(--gr); stroke-width: 0.9; opacity: 0.45; }

/* the border */
.cornice,
.cornice-fine,
.tacca {
  fill: none;
  stroke: var(--ln);
}
.cornice { stroke-width: 1.6; }
.cornice-fine { stroke-width: 0.7; opacity: 0.6; }
.tacca { stroke-width: 1.2; }

/* construction */
.guida,
.asse,
.cerchio,
.croce {
  fill: none;
  stroke: var(--ln);
  stroke-linecap: round;
}
.guida { stroke-width: 0.8; opacity: 0.5; }
.asse { stroke-width: 0.8; opacity: 0.7; }
.cerchio { stroke-width: 1; opacity: 0.8; }
.croce { stroke-width: 1; }
.nome-guida {
  fill: var(--ln);
  opacity: 0.75;
}

/* dimensions */
.quota {
  fill: none;
  stroke: var(--ln);
  stroke-width: 0.9;
}
.freccia { fill: var(--ln); }
.misura { fill: var(--ln); }

/* every note is set in the mono face */
.nome-guida,
.misura,
.cartiglio-nome,
.cartiglio-dato,
.timbro-piccolo {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
}

/* the outline of the logo and its points */
.contorno {
  fill: none;
  stroke: var(--ln);
  stroke-linejoin: round;
  stroke-linecap: round;
}
.punto { fill: var(--bg); stroke: var(--ln); stroke-width: 1; }
.maniglia { fill: none; stroke: var(--ln); stroke-width: 0.7; opacity: 0.6; }
.controllo { fill: var(--ln); }
.lucido { fill: #fff; opacity: 0; }

/* the compass, in lines: filled with the paper colour so that it hides the drawing under it */
.compasso-gamba,
.compasso-impugnatura,
.compasso-cerniera {
  fill: var(--bg);
  stroke: var(--ln);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.compasso-punta { fill: none; stroke: var(--ln); stroke-width: 1.2; stroke-linecap: round; }
.compasso-righe { fill: none; stroke: var(--ln); stroke-width: 0.8; opacity: 0.8; }
.compasso-ombra { fill: none; stroke: var(--bg-deep); stroke-width: 3; stroke-linecap: round; opacity: 0.55; }

/* the approval stamp */
.timbro-bordo { fill: none; stroke: var(--stamp); }
.timbro-scritta,
.timbro-piccolo { fill: var(--stamp); }
.scheggia { stroke: var(--stamp); stroke-linecap: round; }

/* the title block */
.cartiglio-riga { fill: none; stroke: var(--ln); }
.cartiglio-fondo { fill: var(--bg); }
.cartiglio-nome { fill: var(--ln); opacity: 0.7; }
.cartiglio-dato { fill: var(--ln); }
.cartiglio-progetto { fill: var(--ln); font-family: 'Barlow', 'Arial Narrow', sans-serif; font-weight: 700; }

.nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(14px, env(safe-area-inset-bottom));
  margin: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--ln);
  opacity: 0.6;
  pointer-events: none;
}