/*
 * Lyli's coming-soon page: one of the public system pages (Canvas 04 kit-U8, the app's SystemPage
 * and its short-link gone page). A 400 px column on paper with the cat on top (the master, 27 x 32),
 * the 20/28 title and 13/20 words, centered over a 56 px foot; on phones sign-in's layout, the
 * width less 16 px a side, 64 px from the top. The Console's tokens are written out, light, then
 * dark by the device's own scheme (no one is signed in to have a preference).
 */

/* IBM Plex Sans, latin subset, every weight in one file (OFL, fonts/LICENSE). */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #ffffff;
  --ink: #111418;
  --ink-2: #4a5058;
  --ink-3: #686e77;
  --rule-strong: #cdd1d6;
  --focus: #111418;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1115;
    --ink: #e9ebee;
    --ink-2: #b4b9c0;
    --ink-3: #8d939b;
    --rule-strong: #353a41;
    --focus: #e9ebee;
    color-scheme: dark;
  }
}

html,
body {
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font: 400 13px/18px var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The room the column sits in, over the 56 px foot sign-in keeps for its terms. Without place.js
   the column is simply centered; with it, its top is on the 4 px grid and its left on a whole
   pixel (data-placed). */
.stage {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.stage[data-placed] {
  align-items: flex-start;
  justify-content: flex-start;
}

.foot {
  flex: none;
  height: 56px;
}

main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 400px;
  min-width: 0;
}

.mark {
  display: block;
  flex: none;
  color: var(--ink);
}

/* The title and what it says under it (.sp-head): 24 px under the mark, 4 apart. */
.head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
}

h1 {
  margin: 0;
  font: 600 20px/28px var(--sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}

p {
  margin: 0;
  font: 400 13px/20px var(--sans);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* A number and its unit stay on one line ("1 KB"). */
.nb {
  white-space: nowrap;
}

/* A line of the page's own under the head (sign-in's .u1-line, 24 px down as its body). */
.line {
  margin-top: 24px;
  color: var(--ink-3);
}

/* A link in a sentence (sign-in's .u1-a): ink, a quiet underline that turns ink on hover. */
a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--ink);
}

a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 767px) {
  .stage,
  .stage[data-placed] {
    align-items: flex-start;
  }

  main {
    box-sizing: border-box;
    width: 100%;
    max-width: 432px;
    margin-top: 64px;
    padding: 0 16px;
  }
}