/*
 * Meow OS: the site. Quiet, pale and grey, set in Roboto, with a scroll banner on top and a
 * handful of small words at the bottom. Sizes follow the width of the window in the same steps
 * the page it was modelled on uses: 20px, then 18px below 1200px, then 16px below 769px.
 */

@font-face { font-family: "Roboto Medium"; font-style: normal; font-weight: 500; src: url(/assets/fonts/Roboto-Medium.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Roboto Bold"; font-style: normal; font-weight: 700; src: url(/assets/fonts/Roboto-Bold.woff2) format("woff2"); font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; padding: 0; }
html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  position: relative;
  min-height: 100%;
  color: #717171;
  background: #d8d8d8;
  font-family: "Roboto Medium", Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  overflow-x: hidden;
}
@media (max-width: 1199.98px) { body { font-size: 18px; } }
@media (max-width: 768.98px) { body { font-size: 16px; } }

/* ------------------------------------------------------------------------- */
/* The wallpaper: pale ribbons, fixed behind everything, with grain on top    */
/* ------------------------------------------------------------------------- */

.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #d8d8d8 url(/assets/wallpaper.svg) center / cover no-repeat;
}
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.3  0 0 0 0 0.3  0 0 0 0 0.3  0 0 0 1.1 -0.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

a { color: #444; text-decoration: none; background-color: transparent; }
a:hover { color: #1e1e1e; text-decoration: underline; }
button { font: inherit; color: inherit; }

/* ------------------------------------------------------------------------- */
/* The top: the cat, the banner, LOGIN                                         */
/* ------------------------------------------------------------------------- */

.header-fixed { z-index: 10; }

.menu-btn {
  position: fixed;
  left: 16px;
  top: 33px;
  z-index: 12;
  width: 32px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-btn img { display: block; width: 100%; height: 100%; }
body.menu-open .menu-btn { left: 116px; }

/* The banner is part of the page: it scrolls away with it. */
.banner-link {
  position: absolute;
  left: 50%;
  top: 22px;
  z-index: 11;
  width: 100%;
  max-width: 280px;
  transform: translateX(-50%);
}
@media (min-width: 992px) { .banner-link { max-width: 370px; } }
.banner-link:hover { text-decoration: none; }
.banner { display: block; width: 100%; height: auto; }

.auth {
  position: fixed;
  right: 15px;
  top: 40px;
  z-index: 12;
  font-family: "Roboto Bold", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
}
.auth:hover, .auth:active { color: #717171; text-decoration: none; }
/* A line that draws itself under it, left to right. */
.auth::after, .footer-bottom .left a::after, .footer-bottom .right a::after { content: none; }
.auth::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  width: 0;
  height: 1px;
  background: #666;
  transition: all 0.3s ease;
}
.auth:hover::after, .auth:active::after { width: 100%; }

/* ------------------------------------------------------------------------- */
/* The menu on the left                                                       */
/* ------------------------------------------------------------------------- */

.b-nav {
  position: fixed;
  z-index: 997;
  left: 16px;
  top: 33px;
  max-width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
.b-nav.open { visibility: visible; opacity: 1; transition: opacity 0.8s ease; }
.b-nav ul { margin: 0; padding: 0; }
.b-nav li { list-style: none; padding-top: 35.4px; text-align: left; line-height: 15px; }
.b-nav li:first-child { padding-top: 67px; }
.b-nav .b-nav-link {
  font-family: "Roboto Bold", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
}
.b-nav .b-nav-link:hover { color: #717171; text-decoration: none; }
@media (max-width: 768.98px) {
  .b-nav { left: 0; top: 0; width: 100vw; height: 100vh; background: #fff; }
  .b-nav li { text-align: center; }
  .b-nav li:first-child { padding-top: 21vh; }
  .b-nav .b-nav-link { font-size: 21px; }
  body.menu-open .menu-btn { left: 16px; }
}

/* ------------------------------------------------------------------------- */
/* The bottom                                                                  */
/* ------------------------------------------------------------------------- */

.c-footer { position: relative; z-index: 1; width: 100%; margin: 0; padding: 0; background: transparent; }
body.home .c-footer, body.error .c-footer { position: fixed; bottom: 0; }

.c-footer__links { padding: 20px; text-transform: uppercase; }
@media (min-width: 769px) { .c-footer__links { padding: 20px 35px 20px 20px; } }
@media (min-width: 992px) { .c-footer__links { padding: 20px 35px; } }

.c-footer__links a {
  position: relative;
  color: #717171;
  font-family: "Roboto Medium", Roboto, Arial, sans-serif;
  font-size: 11px;
  cursor: pointer;
}
.c-footer__links a:hover, .c-footer__links a:active, .c-footer__links a:focus { color: #666; text-decoration: none; }

.footer-top { margin-bottom: -21px; text-align: center; }
@media (max-width: 991.98px) { .footer-top { margin-bottom: 20px; } }
.footer-top .footer-center { display: inline-block; transition: all 0.5s ease; }
@media (min-width: 992px) { .footer-top .footer-center:hover { transform: scale(1.2); } }

.footer-bottom { margin-bottom: 25px; }
.footer-bottom a { margin-right: 10px; }
.footer-bottom a:last-child { margin-right: 0; }
.footer-bottom a:hover, .footer-bottom a:active, .footer-bottom a:focus { color: #000; }
.footer-bottom .left { float: left; display: flex; justify-content: space-between; width: 20.6%; margin-left: -1.4%; }
.footer-bottom .right { float: right; display: flex; justify-content: space-between; width: 19.7%; }
@media (max-width: 991.98px) {
  .footer-bottom { display: flex; justify-content: space-evenly; margin-bottom: 10px; }
  .footer-bottom .left { float: none; width: 50%; margin-left: 0; }
  .footer-bottom .right { float: none; width: 50%; }
}

.footer-copyright { text-align: center; }
.footer-copyright small { color: #717171; font-family: "Roboto Medium", Roboto, Arial, sans-serif; font-size: 10px; margin-top: 10px; margin-bottom: 5px; }

/* A word about something that did not work, just above the bottom. */
.notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 96px;
  z-index: 5;
  margin: 0;
  text-align: center;
  color: #000;
  font-family: "Roboto Bold", Roboto, Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------------- */
/* Pages                                                                       */
/* ------------------------------------------------------------------------- */

#maincontent { min-height: 100%; padding: 135px 0 40px; }
body.home #maincontent, body.error #maincontent { padding: 0; min-height: 0; }

/* What is live right now, on the Update page. */
.live { margin: 0 0 20px; font-size: 14px; line-height: 1.35; }
.live small { display: block; margin-bottom: 3px; font-size: 11px; text-transform: uppercase; }
.live div { margin-bottom: 2px; }

.content-asset-container { width: 100%; margin: 0 auto; padding: 0 15px; }
@media (min-width: 769px) { .content-asset-container { width: 50%; } }

/* The text is 14px whatever the window: the line height follows the 20/18/16px steps. */
#maincontent .content-asset-container { --step: 20px; }
@media (max-width: 1199.98px) { #maincontent .content-asset-container { --step: 18px; } }
@media (max-width: 768.98px) { #maincontent .content-asset-container { --step: 16px; } }
#maincontent h1, #maincontent h2, #maincontent h3, #maincontent p, #maincontent li { font-size: 14px; line-height: var(--step); }
#maincontent h1, #maincontent h2, #maincontent h3 { margin: 0 0 var(--step); color: #717171; font-family: "Roboto Bold", Roboto, Arial, sans-serif; font-weight: 700; text-transform: uppercase; }
#maincontent h1 { margin-bottom: 0; }
#maincontent p { margin: 0 0 var(--step); }
#maincontent ul, #maincontent ol { margin: 0 0 var(--step); padding-left: 2em; }
#maincontent li { margin: 0; }
#maincontent a { color: #717171; text-decoration: underline; }
#maincontent a:hover { color: #000; }
#maincontent b, #maincontent strong { font-family: "Roboto Bold", Roboto, Arial, sans-serif; font-weight: 700; }
#maincontent code { font-family: "Roboto Medium", ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: #444; }

/* A message in the middle of the window (an error, or a moment of waiting). */
.middle { position: fixed; inset: 0; display: grid; place-items: center; padding: 0 20px; text-align: center; }
.middle p { margin: 0; font-family: "Roboto Bold", Roboto, Arial, sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; color: #717171; }
.middle p + p { margin-top: 12px; font-family: "Roboto Medium", Roboto, Arial, sans-serif; font-weight: 500; font-size: 0.85rem; }

.small { font-size: 0.7rem; text-transform: uppercase; }

/* ------------------------------------------------------------------------- */
/* Forms                                                                       */
/* ------------------------------------------------------------------------- */

.ch-label { display: block; margin: 16px 0 3px; color: #717171; font-family: "Roboto Medium", Roboto, Arial, sans-serif; font-size: 12px; line-height: 1.6; }
.ch-label .req { color: #c00; }
.ch-input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 6px 12px;
  border: 1px solid #e2e2e2;
  border-radius: 0;
  background: #fff;
  color: #495057;
  font-family: "Roboto Medium", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  outline: none;
}
.ch-input:focus { border-color: #000; }
textarea.ch-input { height: auto; min-height: 110px; resize: vertical; line-height: 1.35; }
select.ch-input { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23495057'/></svg>") right 12px center no-repeat; padding-right: 30px; }

.ch-btn {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 24px;
  padding: 7px 16px 5px;
  border: 3px solid #000;
  border-radius: 5px;
  background: transparent;
  color: #000;
  font-family: "Roboto Bold", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}
.ch-btn:hover { background: #000; color: #fff; }
.ch-btn[disabled] { opacity: 0.4; pointer-events: none; }
label.ch-btn { text-decoration: none; }
.ch-btn--quiet { border-color: #717171; color: #717171; }
.ch-btn--quiet:hover { background: #717171; color: #fff; }

.ch-check { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; font-size: 12px; line-height: 1.3; }
.ch-check input { margin: 2px 0 0; accent-color: #000; }

.err { margin: 10px 0 0; color: #c00; font-family: "Roboto Bold", Roboto, Arial, sans-serif; font-size: 12px; text-transform: uppercase; }
.note { margin: 14px 0 0; font-size: 11px; text-transform: uppercase; line-height: 1.3; }

.bar { height: 6px; margin: 20px 0 10px; background: rgba(255, 255, 255, 0.7); border: 1px solid #e2e2e2; }
.bar i { display: block; width: 0; height: 100%; background: #000; }

.cmd { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid #e2e2e2; background: #fff; }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; }
.cmd button { flex: none; height: 28px; padding: 0 12px; border: 2px solid #000; border-radius: 4px; background: transparent; color: #000; font-family: "Roboto Bold", Roboto, Arial, sans-serif; font-size: 11px; text-transform: uppercase; cursor: pointer; }
.cmd button:hover { background: #000; color: #fff; }

[hidden] { display: none !important; }