/* Fonts are Polyscope's own (SIL OFL 1.1, see /fonts), served from this site so no page calls a third party. */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Red Hat Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/red-hat-mono-latin-wght-normal.woff2') format('woff2');
}

/* Colours are Polyscope's: its slate theme for the product, its light theme for the publisher. */
:root {
  --slate-950: #141a25;
  --slate-900: #171d29;
  --slate-850: #1b2230;
  --slate-800: #212a3a;
  --slate-700: #2b3548;
  --slate-600: #364257;
  --line: #262f40;
  --text: #d5dce8;
  --text-dim: #8591a7;
  --text-faint: #5d697f;
  --glint: #eef2f8;
  --healthy: #6cc68b;
  --danger: #f08a8a;
  --caution: #e5b567;
  --env-prod: #e5484d;
  --env-staging: #f76b15;
  --log-error: #f28b82;
  --log-warning: #e8c170;
  --log-info: #8ab4f8;
  --log-debug: #8391a8;
  --log-date: #7fb8a4;
  --log-number: #b5cea8;

  --sans: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --mono: 'Red Hat Mono', ui-monospace, Consolas, monospace;
  --measure: 66ch;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  background: var(--bg);
  color: var(--fg);
}

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

code, pre { font-family: var(--mono); font-size: 0.9em; }

img { max-width: 100%; height: auto; display: block; }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: 0.5rem 0.9rem;
  background: var(--fg);
  color: var(--bg);
  z-index: 10;
}
.skip:focus { top: 1rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.button {
  display: inline-block;
  padding: 0.62rem 1.15rem;
  border: 1px solid var(--button-border);
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.button:hover { background: var(--button-hover); }
.button.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.button.primary:hover { background: var(--fg-strong); }

.foot {
  padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 3rem;
  border-top: 1px solid var(--rule);
  color: var(--fg-dim);
  font-size: 0.9375rem;
}
.foot p { margin: 0 0 0.4rem; }
.foot p a + a { margin-left: 1.25rem; }

/* ---------- Publisher page ---------- */

.publisher {
  --bg: #f1f4f8;
  --fg: #1f2735;
  --fg-strong: #141a25;
  --fg-dim: #566276;
  --rule: #d0d7e2;
  --focus: #1a5fb4;
  --button-border: #c3ccd9;
  --button-hover: #e6eaf0;
  --tape: #a9b1be;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.pub {
  flex: 1;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(4rem, 12vh, 8rem) clamp(1.25rem, 5vw, 3rem) 4rem;
}

.pub-head { margin-bottom: clamp(3.5rem, 9vh, 6rem); }

/* The name, on a strip of tape torn at both ends. */
.tape {
  position: relative;
  display: inline-block;
  margin: 0 0 2rem;
  padding: 0.18em 0.75em 0.22em;
  font-size: clamp(2.6rem, 8vw, 5.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--fg-strong);
  isolation: isolate;
}
.tape::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: rotate(-1.6deg);
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.13) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #b8bfca, var(--tape) 55%, #9ba4b2);
  clip-path: polygon(
    0 0, 100% 0,
    98.6% 12%, 100% 24%, 98.4% 37%, 100% 50%, 98.7% 63%, 100% 76%, 98.5% 88%, 100% 100%,
    0 100%,
    1.4% 88%, 0 76%, 1.6% 63%, 0 50%, 1.3% 37%, 0 24%, 1.5% 12%
  );
}

.pub-lede {
  max-width: 34ch;
  margin: 0;
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  line-height: 1.4;
}

.app {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.75rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}
.app-icon { width: 96px; height: 96px; }
.app h3 { margin: 0.2rem 0 0.6rem; font-size: 1.75rem; line-height: 1.2; }
.app h3 a { text-decoration: none; }
.app h3 a:hover { text-decoration: underline; }
.app-body p { max-width: var(--measure); margin: 0 0 0.9rem; }
.app-meta { color: var(--fg-dim); font-size: 0.9375rem; }
.app-links { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-top: 0.6rem; }

@media (max-width: 34rem) {
  .app { grid-template-columns: 1fr; gap: 1rem; }
  .app-icon { width: 72px; height: 72px; }
}

/* ---------- Product page ---------- */

.product {
  --bg: var(--slate-850);
  --fg: var(--text);
  --fg-strong: var(--glint);
  --fg-dim: var(--text-dim);
  --rule: var(--line);
  --focus: var(--glint);
  --button-border: var(--slate-600);
  --button-hover: var(--slate-700);
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem var(--gutter);
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.bar a { text-decoration: none; }
.bar a:hover { color: var(--text); text-decoration: underline; }
.bar-home { font-weight: 700; }
.bar nav { display: flex; gap: 1.5rem; }

.hero { padding: clamp(2.5rem, 8vh, 5rem) var(--gutter) 0; }
.hero-text { max-width: 46rem; }

.product-name {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.4rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--glint);
}
.product-name img { width: 56px; height: 56px; }

.lede {
  margin: 0 0 1.25rem;
  font-size: clamp(2.4rem, 6.2vw, 4.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--glint);
  text-wrap: balance;
}

.hero-sub {
  max-width: 58ch;
  margin: 0 0 2rem;
  font-size: 1.1875rem;
  color: var(--text);
}

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* The hero viewer: a working miniature of Polyscope following a log. */
.viewer {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  margin: clamp(3rem, 8vh, 4.5rem) 0 0;
  border: 1px solid var(--slate-600);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  background: var(--slate-850);
  box-shadow: 0 -1px 0 var(--slate-700) inset, 0 30px 80px -30px rgb(0 0 0 / 0.6);
  font-size: 0.875rem;
}

.viewer-side {
  padding: 0.8rem 0 1rem;
  background: var(--slate-900);
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.side-head { padding: 0 1rem 0.6rem; font-weight: 700; color: var(--text); }
.side-group { padding: 0.7rem 1rem 0.25rem; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--text-faint); }
.node { display: flex; align-items: center; gap: 0.4rem; padding: 0.22rem 1rem; color: var(--text); }
.node.l2 { padding-left: 1.9rem; }
.node.l3 { padding-left: 2.8rem; }
.node.l4 { padding-left: 4.3rem; }
.node.selected { background: var(--slate-700); box-shadow: 2px 0 0 var(--glint) inset; }
.caret { display: inline-block; width: 0.8rem; color: var(--text-faint); }
.caret.open { transform: rotate(90deg); }
.count { margin-left: auto; color: var(--text-dim); font-size: 0.8125rem; }
.count.warn { color: var(--caution); }
.dot { width: 0.5rem; height: 0.5rem; margin-left: auto; border-radius: 50%; }
.dot.ok { background: var(--healthy); }
.dot.bad { background: var(--danger); }
.tag { padding: 0 0.45rem; border: 1px solid var(--slate-600); border-radius: 999px; font-size: 0.75rem; color: var(--text-faint); }

.env {
  display: inline-block;
  padding: 0.02rem 0.5rem 0.08rem;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}
.env.prod { background: var(--env-prod); }
.env.staging { background: var(--env-staging); }

.viewer-main { display: flex; flex-direction: column; min-width: 0; }
.viewer-tabs { display: flex; background: var(--slate-800); border-bottom: 1px solid var(--line); }
.vtab { padding: 0.55rem 1.4rem; background: var(--slate-850); color: var(--glint); }
.vtab.prod-tab { box-shadow: 0 2px 0 var(--env-prod) inset; }
.viewer-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
}
.tool {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--slate-600);
  border-radius: 5px;
  background: var(--slate-800);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.tool:hover { background: var(--slate-700); }
.tool[aria-pressed='true'] { color: var(--glint); border-color: var(--text-faint); }
.tool[aria-pressed='true']::before {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--healthy);
  vertical-align: 0.1em;
}

.log {
  flex: 1;
  margin: 0;
  padding: 0.7rem 0 0.9rem;
  list-style: none;
  counter-reset: line 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
  min-height: calc(9 * 1.85em + 1.6rem);
}
.log li { counter-increment: line; }
.log li::before {
  content: counter(line);
  display: inline-block;
  width: 3.2rem;
  padding-right: 1.2rem;
  text-align: right;
  color: var(--text-faint);
}
.log time { color: var(--log-date); }
.log i { font-style: normal; color: var(--log-number); }
.log b { display: inline-block; min-width: 5.5ch; font-weight: 400; }
.log .info { color: var(--log-info); }
.log .warn { color: var(--log-warning); }
.log .error { color: var(--log-error); font-weight: 700; }
.log .debug { color: var(--log-debug); }
.log li.new { animation: arrive 0.9s ease-out; }
@keyframes arrive { from { background: rgb(138 180 248 / 0.14); } to { background: transparent; } }

.viewer-status {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--slate-950);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
}
.status-env { padding: 0.3rem 0.9rem; background: var(--env-prod); color: #fff; font-weight: 600; }
.status-path { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; }
.status-ro { margin-left: auto; padding-right: 1rem; }

@media (max-width: 52rem) {
  .viewer { grid-template-columns: minmax(0, 1fr); }
  .viewer-side { display: none; }
}
@media (max-width: 34rem) {
  .bar nav a:not(:last-child) { display: none; }
  .log li::before { width: 2rem; padding-right: 0.7rem; }
  .tools-label { display: none; }
}

/* Sections below the hero sit on the deeper slate, as the app's chrome does around its editor. */
.block {
  padding: clamp(3.5rem, 9vh, 6rem) var(--gutter);
  border-top: 1px solid var(--line);
  background: var(--slate-950);
}
.hero + .block { border-top-color: var(--slate-600); }
.block h2 {
  max-width: 24ch;
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--glint);
}
.block-intro { max-width: var(--measure); margin: 0 0 2.25rem; color: var(--text); }
.block h2 + :not(.block-intro) { margin-top: 2.25rem; }

.table-wrap { overflow-x: auto; }
.sources { width: 100%; min-width: 40rem; border-collapse: collapse; }
.sources th, .sources td { padding: 1rem 1.5rem 1rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.sources thead th { padding-top: 0; font-size: 0.875rem; font-weight: 400; color: var(--text-dim); }
.sources tbody th { width: 14rem; font-weight: 700; color: var(--glint); }
.sources td:last-child { color: var(--text-dim); }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 2.5rem 3.5rem;
  margin: 0;
}
.features dt { margin-bottom: 0.4rem; font-size: 1.1875rem; font-weight: 700; color: var(--glint); }
.features dd { max-width: 48ch; margin: 0; color: var(--text); }

.shots { max-width: 80rem; }
.shot-tabs {
  display: flex;
  overflow-x: auto;
  background: var(--slate-800);
  border: 1px solid var(--slate-600);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.shot-tabs button {
  flex: none;
  padding: 0.7rem 1.25rem;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}
.shot-tabs button:hover { color: var(--text); }
.shot-tabs button[aria-selected='true'] { background: var(--slate-850); color: var(--glint); box-shadow: 0 2px 0 var(--glint) inset; }
.shot-tabs button:focus-visible { outline-offset: -3px; }
.shot { border: 1px solid var(--slate-600); border-radius: 0 0 8px 8px; overflow: hidden; background: var(--slate-850); }

.install {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: 3rem 4rem;
}
.install > div { min-width: 0; }
.install h3 { margin: 0 0 0.5rem; font-size: 1.3125rem; color: var(--glint); }
.install p { max-width: 52ch; margin: 0 0 1.25rem; }
.platforms { margin: 0 0 1.5rem; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.platforms li { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.platforms strong { color: var(--glint); }
.platforms span { color: var(--text-dim); }
.note { font-size: 0.9375rem; color: var(--text-dim); }
.cmd {
  margin: 0;
  padding: 0.9rem 1.1rem;
  overflow-x: auto;
  border: 1px solid var(--slate-600);
  border-radius: 6px;
  background: var(--slate-900);
  color: var(--text);
}

@media (max-width: 34rem) {
  .install { grid-template-columns: 1fr; }
  .platforms li { grid-template-columns: 1fr; gap: 0.1rem; }
}

.product .foot { background: var(--slate-950); }

@media (prefers-reduced-motion: reduce) {
  .log li.new { animation: none; }
}

/* On phones, each Source becomes a short stack instead of a table row. */
@media (max-width: 40rem) {
  .sources { min-width: 0; }
  .sources thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sources tr { display: block; padding: 1rem 0; border-bottom: 1px solid var(--line); }
  .sources th, .sources td { display: block; width: auto; padding: 0; border: 0; }
  .sources tbody th { width: auto; margin-bottom: 0.3rem; }
  .sources td:last-child { margin-top: 0.3rem; font-size: 0.9375rem; }
}