/* Set in Selawik — Microsoft's own metric-compatible stand-in for Segoe UI, and the face the
   library bundles. It is served out of the wasm distribution's resources rather than copied, so the
   site cannot drift from what the components are drawn in. */
@font-face {
  font-family: "Selawik";
  font-weight: 300;
  src: url("composeResources/io.github.youndie.kvadrant.resources/font/selawik_semilight.ttf");
}
@font-face {
  font-family: "Selawik";
  font-weight: 400;
  src: url("composeResources/io.github.youndie.kvadrant.resources/font/selawik_regular.ttf");
}
@font-face {
  font-family: "Selawik";
  font-weight: 600;
  src: url("composeResources/io.github.youndie.kvadrant.resources/font/selawik_semibold.ttf");
}

:root {
  --background: #1f1f1f;
  --foreground: #ffffff;
  --subtle: rgba(255, 255, 255, 0.55);
  --chrome: #1f1f1f;
  --accent: #1ba1e2;
  --line: rgba(255, 255, 255, 0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 24px 64px;
  background: var(--background);
  color: var(--foreground);
  font-family: "Selawik", "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  max-width: 1100px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; color: #d6d6d6; }

/* The page chrome is the phone's: a small upper-case application title, and a page title several
   times its size sitting directly under it with no rule between them. */
.chrome { padding: 32px 0 24px; }
.app-title {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foreground);
  opacity: 0.75;
}
.page-title {
  margin: 4px 0 0;
  font-size: 42px;
  font-weight: 300;
  line-height: 1.05;
}
.subtitle { margin: 6px 0 0; color: var(--subtle); }
.api-link {
  float: right;
  margin-left: 18px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The demo is a phone-shaped application and is framed as one. A border rather than a bezel
   drawing: this is a component library's documentation, not a device mock-up. */
.demo-frame { margin: 28px 0; }
.demo-frame iframe {
  width: 400px;
  height: 720px;
  max-width: 100%;
  border: 1px solid var(--line);
  background: #000;
}

.prose { max-width: 68ch; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px 18px; padding: 0; }
.prose li { margin-bottom: 6px; }
.prose .gap { color: var(--subtle); }

table.params { border-collapse: collapse; margin: 0 0 18px; }
table.params td { border-top: 1px solid var(--line); padding: 8px 14px 8px 0; vertical-align: top; }
table.params td:first-child { white-space: nowrap; }

.group { margin-top: 40px; }
.group h2 { font-size: 24px; font-weight: 300; margin: 0 0 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px; }
.card {
  display: block;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--foreground);
}
.card:hover { background: var(--accent); text-decoration: none; }
.card:hover .card-summary { color: rgba(255, 255, 255, 0.9); }
.card-name { display: block; font-size: 17px; }
.card-summary { display: block; margin-top: 4px; font-size: 13px; color: var(--subtle); }

.preview { margin-top: 36px; }
.preview h3 { font-size: 19px; font-weight: 300; margin: 0 0 12px; max-width: 68ch; }
.frames { display: flex; flex-wrap: wrap; gap: 16px; }
.frame { margin: 0; }
.frame figcaption {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-bottom: 6px;
}
/* A fixed width, because a component that reflows with the browser window is a component being
   shown at a size no phone had. 360 is the width the previews are measured at in the render
   guard. */
.canvas { width: 360px; border: 1px solid var(--line); }
.mounted-as { font-size: 12px; color: var(--subtle); }
.why { font-size: 24px; font-weight: 300; margin: 48px 0 14px; }
/* The path to the source is longer than the column it sits in, and a link that overflows takes the
   page's horizontal scrollbar with it. */
.source { margin-top: 40px; overflow-wrap: anywhere; }

footer {
  margin-top: 64px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--subtle);
}

@media (max-width: 800px) {
  .page-title { font-size: 32px; }
  .canvas { width: 100%; max-width: 360px; }
}