/* Stat Sentry on codice.pl. Dark like the codice.pl home page, with Stat Sentry's own blue. */
:root {
  color-scheme: dark;
  --bg: #05070d;
  --panel: #10141d;
  --panel-2: #161b26;
  --line: rgba(255, 255, 255, .09);
  --text: #e3e8ee;
  --muted: #9aa5b1;
  --blue: #4d99ff;
  --cyan: #3dd6f5;
  --orange: #ff9e42;
  --good: #4cd964;
  --warn: #ffcc00;
  --hot: #ff5a5f;
  --radius: 16px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 17px/1.6 var(--font);
  color: var(--text);
  background: #03050b;
  min-height: 100vh;
}
/* The sky stays put while the page scrolls. It's painted on fixed layers of its own, not with
   background-attachment: fixed, which makes Safari repaint the whole page on every scroll step. */
body::before, .stars {
  content: ""; position: fixed; inset: 0; pointer-events: none; transform: translateZ(0);
}
body::before {
  z-index: -2;
  background:
    radial-gradient(1100px 650px at 50% -12%, #12233f 0, transparent 60%),
    radial-gradient(900px 600px at 90% 105%, #1a1326 0, transparent 55%),
    linear-gradient(180deg, #05070d, #02030a);
}
.stars {
  z-index: -1; opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, #cfe, transparent),
    radial-gradient(1px 1px at 40% 80%, #fff, transparent),
    radial-gradient(1px 1px at 85% 25%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 15%, #fff, transparent),
    radial-gradient(1px 1px at 12% 65%, #fff, transparent),
    radial-gradient(1px 1px at 90% 80%, #cfe, transparent);
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
code, kbd { font-family: var(--mono); font-size: .88em; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: .1em .4em; }

/* Side gutter only, so each section keeps its own vertical spacing. */
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
.narrow { max-width: 760px; }

/* Header and footer */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
/* The home page names the app beside its hero icon, so its header holds only the navigation. */
.top.home { justify-content: flex-end; }
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--text); font-weight: 700; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 30px; height: 30px; }
.nav { display: flex; gap: 20px; flex-wrap: wrap; font-size: .95rem; }
.nav a { color: var(--muted); }
.nav a:hover, .nav a[aria-current] { color: var(--text); text-decoration: none; }
.foot { border-top: 1px solid var(--line); margin-top: 80px; padding: 28px 0 40px; color: var(--muted); font-size: .9rem; }
.foot .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
/* codice.pl's icon beside its name, as on the codice.pl home page. */
.foot .maker img { width: 22px; height: 22px; vertical-align: middle; margin: -3px 10px 0 0; }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: var(--muted); }

/* Type */
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 7vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 750; }
h3 { font-size: 1.15rem; font-weight: 650; }
p { margin: 0 0 1em; }
.lead { font-size: 1.2rem; color: #cdd5dd; max-width: 38ch; }
.muted { color: var(--muted); }
.gradient {
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--cyan); margin-bottom: .8em; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; font-weight: 650;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
}
.button:hover { text-decoration: none; border-color: rgba(255, 255, 255, .25); }
.button.primary { background: linear-gradient(90deg, var(--blue), #3d7ef0); border-color: transparent; color: #fff; }
.button.primary:hover { filter: brightness(1.08); }
.button[aria-disabled="true"] { opacity: .65; pointer-events: none; }
.note { font-size: .9rem; color: var(--muted); }

/* Hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding-block: 48px 32px; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 20px; } }

.hero-name { display: flex; align-items: center; gap: 22px; margin: 0 0 22px -8px; }
/* The rendered icon carries its own shadow; a CSS filter on a moving element would be redrawn every frame. */
.app-icon { display: block; flex: none; width: 112px; height: 112px; animation: float 7s ease-in-out infinite; will-change: transform; }
.app-name { font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Real panel screenshots, made in the app's demo mode so they show no one's data. */
.demo { display: flex; flex-direction: column; align-items: flex-end; }
/* No CSS shadow: the captures carry macOS's own window shadow, and a blurred filter over images this
   large makes Safari repaint them as the page scrolls, which stalls scrolling. */
.shot { display: block; width: 100%; max-width: 412px; height: auto; }

/* The hero: the menu bar items, drawn here so they can change, above the CPU panel captured from the
   app with its arrow under the CPU item. Lengths are the app's points, scaled with the frame like the
   capture, so the items stay over the arrow at any width. */
.hero-frame { width: 100%; max-width: 538px; container-type: inline-size; }
.hero-frame .hero-shot { max-width: none; }
.menubar {
  --u: calc(100cqw / 538);
  position: relative; width: calc(398 * var(--u)); height: calc(27 * var(--u)); overflow: hidden;
  background: url(menubar/wallpaper.svg) 0 0 / 100% 100%;
  -webkit-mask-image: linear-gradient(90deg, #000 97.5%, transparent); mask-image: linear-gradient(90deg, #000 97.5%, transparent);
  font: 500 calc(12 * var(--u)) / normal var(--font); font-variant-numeric: tabular-nums;
  color: #e8e9f0; white-space: nowrap; user-select: none; -webkit-user-select: none;
}
/* Twice as wide as the CPU item's center is from the left, so the middle column, the CPU item, is
   centered over the panel's arrow. The items to its left end where it starts, and any that don't fit
   are cut off at the left edge. */
.menubar .items {
  position: absolute; left: 0; top: calc(4.25 * var(--u)); width: calc(709.5 * var(--u)); height: calc(21.25 * var(--u));
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: calc(20.5 * var(--u)); align-items: center;
}
.menubar .others { display: flex; justify-content: flex-end; align-items: center; gap: calc(20.5 * var(--u)); }
.menubar .item { display: flex; align-items: center; gap: calc(4 * var(--u)); }
/* The highlight macOS draws behind an item while its panel is open. */
.menubar .open { position: relative; align-self: stretch; isolation: isolate; }
.menubar .open::before {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(-12.25 * var(--u));
  border-radius: 999px; background: rgba(255, 255, 255, .15);
}
/* A value reserves the width of its widest reading, like the app, so the items don't shift as it changes. */
.menubar .value, .menubar .pair > span { display: grid; }
.menubar .value, .menubar .rates { justify-items: end; }
.menubar .reserve { height: 0; visibility: hidden; }
.menubar .pair { gap: calc(3 * var(--u)); font-size: calc(9.5 * var(--u)); }
.menubar .pair > span > :nth-child(2) { margin-top: calc(-1 * var(--u)); }

/* SF Symbols as masks over the icon's color, so the color can change and fade. */
.menubar .symbol {
  display: block; background-color: currentColor; transition: color .8s;
  -webkit-mask: var(--symbol) center / contain no-repeat; mask: var(--symbol) center / contain no-repeat;
}
.menubar .cpu { width: calc(15 * var(--u)); height: calc(14 * var(--u)); --symbol: url(/statsentry/assets/menubar/cpu.png); }
.menubar .sparkles { width: calc(14 * var(--u)); height: calc(16 * var(--u)); --symbol: url(/statsentry/assets/menubar/sparkles.png); color: #4d99ff; }
.menubar .thermometer { width: calc(10 * var(--u)); height: calc(16 * var(--u)); --symbol: url(/statsentry/assets/menubar/thermometer-medium.png); }
.menubar .thermometer[data-symbol="low"] { --symbol: url(/statsentry/assets/menubar/thermometer-low.png); }
.menubar .thermometer[data-symbol="high"] { --symbol: url(/statsentry/assets/menubar/thermometer-high.png); }
/* Neutral while all is well, then yellow, orange and red: the app's status colors. */
.menubar [data-status="warning"] { color: #ffc24a; }
.menubar [data-status="hot"] { color: #ff9e42; }
.menubar [data-status="critical"] { color: #ff6b6b; }
/* Memory as a gauge: a fill 2 points inside an outline, at least 4 points tall, green for normal pressure. */
.menubar .level {
  position: relative; width: calc(8 * var(--u)); height: calc(16 * var(--u));
  border: calc(1 * var(--u)) solid rgba(232, 233, 240, .6); border-radius: calc(2.5 * var(--u));
}
.menubar .level i {
  position: absolute; inset: auto calc(1 * var(--u)) calc(1 * var(--u)); height: calc(12 * var(--u));
  border-radius: calc(1.2 * var(--u)); background: #63d68c; transform-origin: bottom; transition: transform .8s;
}

/* Sections */
section { padding-top: 96px; }
@media (max-width: 860px) { section { padding-top: 72px; } }
/* The eyebrow and heading sit closer to their content than sections sit to each other. */
section > .eyebrow + h2, .split > div > .eyebrow + h2 { margin-bottom: .6em; }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Six feature cards: three across, two across, then one, so no row is left half empty. */
.grid.features { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid.features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid.features { grid-template-columns: 1fr; } }
.card {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(22, 27, 38, .9), rgba(16, 20, 29, .9));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
}
.card p { color: #c3cbd4; margin: 0; font-size: .97rem; }
.icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 14px; background: rgba(77, 153, 255, .14); color: var(--blue); }
.icon svg { width: 22px; height: 22px; }
.card.new { border-color: rgba(61, 214, 245, .35); }
.badge { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bg); background: var(--cyan); padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.chip { padding: 7px 15px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font-size: .92rem; font-weight: 600; }
.chip:hover { text-decoration: none; border-color: rgba(255, 255, 255, .25); }
.tour-row { display: grid; grid-template-columns: 412px 1fr; gap: 64px; align-items: center; padding-top: 80px; scroll-margin-top: 24px; }
.tour-row.flip { grid-template-columns: 1fr 412px; }
.tour-row.flip .shot { order: 2; }
.tour-row h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.tour-row .checks li { color: #c3cbd4; }
@media (max-width: 860px) {
  .tour-row, .tour-row.flip { grid-template-columns: 1fr; gap: 28px; padding-top: 64px; }
  .tour-row.flip .shot { order: 0; }
  .tour-row .shot { max-width: 360px; margin: 0 auto; }
  .demo { align-items: center; }
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
/* Widget screenshots, rendered from the widgets' own views with made-up readings. */
.widget-shot { display: block; max-width: 100%; height: auto; }
#widgets .split .widget-shot { justify-self: center; }
.widget-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 22px; margin-top: 48px; }
/* Side-by-side cards share a height and keep their buttons on one line at the bottom. */
.split.cards { align-items: stretch; gap: 18px; }
.card .actions { margin-top: auto; padding-top: 24px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { padding-left: 28px; position: relative; margin: 0 0 10px; }
.checks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 16px; border-radius: 50%; background: rgba(76, 217, 100, .18); box-shadow: inset 0 0 0 1.5px var(--good); }

.notification {
  background: rgba(36, 38, 46, .95); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px;
  display: grid; grid-template-columns: 34px 1fr; gap: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); margin-bottom: 12px;
}
.notification .app { width: 34px; height: 34px; border-radius: 9px; background: #1b2130; display: grid; place-items: center; }
.notification b { display: block; font-size: 14px; }
.notification span { font-size: 13px; color: #c3cbd4; }
.notification small { color: var(--muted); font-size: 11px; float: right; }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.swatch { width: 74px; text-align: center; font-size: .78rem; color: var(--muted); }
.swatch div { height: 46px; border-radius: 10px; border: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 7px; margin-bottom: 6px; }
.swatch i { width: 6px; border-radius: 2px; display: block; }

.price { text-align: center; align-items: center; padding: 44px 24px; }
.price .amount { font: 800 3.4rem/1 var(--font); letter-spacing: -.03em; margin: 8px 0 12px; }

/* Long text pages */
.doc h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.doc h2 { font-size: 1.4rem; margin-top: 2em; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin-bottom: .5em; }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { counter-increment: step; position: relative; padding: 0 0 18px 48px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; background: rgba(77, 153, 255, .16); color: var(--blue);
}
.download { display: flex; flex-direction: row; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.sha { font-family: var(--mono); font-size: .8rem; word-break: break-all; color: var(--muted); }
details { border-top: 1px solid var(--line); padding: 14px 0; }
details summary { cursor: pointer; font-weight: 600; }
details p { margin: .7em 0 0; color: #c3cbd4; }

@media (prefers-reduced-motion: reduce) {
  .app-icon { animation: none; }
  .menubar .symbol, .menubar .level i { transition: none; }
}

@media (max-width: 560px) {
  .top { flex-wrap: wrap; row-gap: 10px; }
  .nav { gap: 16px; font-size: .9rem; }
  .app-icon { width: 88px; height: 88px; }
}