/* PREVIEW ONLY. This file is left out of the final build (build.ps1 -Final). */

/* Watermark across every page */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='340'%3E%3Cg transform='rotate%28-24 320 170%29' font-family='Arial, sans-serif' font-weight='700' font-size='19' text-anchor='middle' letter-spacing='1.5'%3E%3Ctext x='320' y='176' fill='none' stroke='%23ffffff' stroke-opacity='.35' stroke-width='3'%3EPROPERTY OF COMPLETE COMPUTER SOLUTIONS %28DERBY%29 LTD%3C/text%3E%3Ctext x='320' y='176' fill='%23445' fill-opacity='.34'%3EPROPERTY OF COMPLETE COMPUTER SOLUTIONS %28DERBY%29 LTD%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Option switcher */
body { padding-bottom: 58px; }
.preview-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000;
  background: #101a1d; color: #fff; font: 600 14px/1.2 Arial, sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; min-height: 58px;
}
.preview-bar span { opacity: .75; margin-right: 6px; }
.preview-bar a { color: #fff; text-decoration: none; padding: 9px 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,.3); }
.preview-bar a:hover { background: rgba(255,255,255,.12); color: #fff; }
.preview-bar a.is-current { background: #d93a16; border-color: #d93a16; }
@media (max-width: 640px) { .preview-bar span { display: none; } .preview-bar a { padding: 9px 10px; } }
@media (max-width: 640px) { body::after { background-size: 350px auto; } }