/* Colors and shapes follow libadwaita's default stylesheet and the GNOME
   palette, so the page looks like the app it describes. The page follows the
   system style unless one is chosen in the main menu, which sets
   data-theme on the root; light-dark() then picks the colors. */
:root {
  color-scheme: light dark;

  --window-bg: light-dark(#fafafb, #222226);
  --view-bg: light-dark(#ffffff, #1d1d20);
  --headerbar-bg: light-dark(rgb(255 255 255 / 0.65), rgb(46 46 50 / 0.65));
  --headerbar-shade: light-dark(rgb(0 0 6 / 0.06), rgb(0 0 0 / 0.28));
  --popover-bg: light-dark(#ffffff, #36363a);
  --card-bg: light-dark(#ffffff, rgb(255 255 255 / 0.08));
  --card-shade: light-dark(rgb(0 0 6 / 0.07), rgb(0 0 6 / 0.36));
  --fg: light-dark(rgb(0 0 6 / 0.8), #ffffff);
  --dim: light-dark(rgb(0 0 6 / 0.6), rgb(255 255 255 / 0.62));
  --border: light-dark(rgb(0 0 6 / 0.12), rgb(255 255 255 / 0.12));
  --button-bg: light-dark(rgb(0 0 6 / 0.08), rgb(255 255 255 / 0.1));
  --button-hover: light-dark(rgb(0 0 6 / 0.13), rgb(255 255 255 / 0.15));
  --accent-bg: #3584e4;
  --accent: light-dark(#0461be, #81b5f0);
  --code-bg: light-dark(rgb(0 0 6 / 0.04), rgb(0 0 0 / 0.22));

  /* The branding colors of the app's metainfo, and a blue to fade into. */
  --brand: light-dark(#ddd3f5, #4f3a87);
  --brand-2: light-dark(#d4e4fb, #2b3d74);
  --tint: light-dark(#f3f0fb, #29272f);

  /* libadwaita's accent colors, for icons and highlights. */
  --blue: #3584e4;
  --teal: #2190a4;
  --green: #3a944a;
  --yellow: #c88800;
  --orange: #ed5b00;
  --red: #e62d42;
  --pink: #d56199;
  --purple: #9141ac;
  --slate: #6f8396;

  --sans: "Adwaita Sans", "Cantarell", "Inter", system-ui, sans-serif;
  --mono: "Adwaita Mono", "Source Code Pro", ui-monospace, monospace;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Elements that only fit one style, such as the screenshots. */
.only-dark { display: none !important; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display: none !important; }
  :root:not([data-theme="light"]) .only-dark { display: block !important; }
}

:root[data-theme="dark"] .only-light { display: none !important; }
:root[data-theme="dark"] .only-dark { display: block !important; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--window-bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

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

.container { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

.icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Header bar */

.headerbar {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* The background lies on a layer of its own, so it can fade in. At the top
   of the page the header bar lies on the hero's colors; site.js sets --fade
   from 0 to 1 over the first 240 pixels of scrolling. Without scripts the
   background stays. */
.headerbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--headerbar-bg);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 1px 10px var(--headerbar-shade);
  opacity: var(--fade, 1);
}
.js .headerbar { --fade: 0; }

.headerbar .container {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 64px;
}

.headerbar nav { display: flex; gap: 2px; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--fg);
  font-weight: 700;
}
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; }
.brand { font-size: 1.1rem; }

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 6px;
  background: var(--button-bg);
  color: var(--fg);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s;
}
.button:hover { background: var(--button-hover); text-decoration: none; }
.button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent-bg) 50%, transparent); outline-offset: 1px; }
.button.flat { background: transparent; }
.button.flat:hover { background: var(--button-bg); }
.button.image { width: 34px; padding: 0; }

.button.pill { min-height: 46px; padding: 0 30px; border-radius: 9999px; font-size: 1rem; }

.button.suggested { background: var(--accent-bg); color: #ffffff; }
.button.suggested:hover { background: color-mix(in srgb, var(--accent-bg), black 10%); }

/* Wide screens show the links and the style switcher in the header bar,
   narrow ones in the main menu. */
.narrow-only { display: none !important; }

@media (max-width: 760px) {
  .wide-only { display: none !important; }
  .narrow-only { display: inline-flex !important; }
}

/* Main menu: a popover like GTK's, with an arrow pointing at its button. */

.popover {
  position: fixed;
  inset: auto;
  width: 220px;
  margin: 0;
  padding: 6px;
  overflow: visible;
  border: none;
  border-radius: 12px;
  background: var(--popover-bg);
  color: var(--fg);
  box-shadow: 0 0 0 1px rgb(0 0 6 / 0.14), 0 2px 8px 2px rgb(0 0 6 / 0.2);
}
.popover::before {
  content: "";
  position: absolute;
  top: -6px;
  left: calc(var(--arrow-x, 50%) - 7px);
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--popover-bg);
  box-shadow: -1px -1px 0 0 rgb(0 0 6 / 0.1);
  transform: rotate(45deg);
}
.popover > * { position: relative; }

.popover hr {
  height: 1px;
  margin: 6px 0;
  border: none;
  background: var(--border);
}

.menu a {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--fg);
}
.menu a:hover, .menu a:focus-visible { background: var(--button-bg); text-decoration: none; outline: none; }

/* The style switcher, three round buttons as in GNOME Text Editor and the
   app's own main menu. */

.style-switcher {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 6px;
}

.style-switcher label {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
}
.style-switcher label:has(:checked) { box-shadow: inset 0 0 0 2px var(--accent-bg); }
.style-switcher label:has(:focus-visible) { outline: 2px solid color-mix(in srgb, var(--accent-bg) 50%, transparent); outline-offset: 2px; }

.style-switcher .follow { background: linear-gradient(to bottom right, #ffffff 49.99%, #202020 50.01%); }
.style-switcher .light { background: #ffffff; }
.style-switcher .dark { background: #202020; }
.style-switcher label { background-clip: content-box; padding: 1px; }

/* In the header bar: smaller, set apart from the links by a line. */
.style-switcher.compact {
  gap: 10px;
  margin: 0 0 0 10px;
  padding-left: 16px;
  box-shadow: inset 1px 0 0 var(--border);
}
.style-switcher.compact label { width: 28px; height: 28px; }
.style-switcher.compact .icon { width: 14px; height: 14px; padding: 2px; right: -3px; bottom: -3px; }

.style-switcher input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.style-switcher .icon {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 9999px;
  background: var(--accent-bg);
  color: #ffffff;
  visibility: hidden;
}
.style-switcher label:has(:checked) .icon { visibility: visible; }

/* Hero, on the branding colors of the app as on apps.gnome.org */

.hero-band {
  margin-top: -64px;
  padding-top: 64px;
  background:
    radial-gradient(ellipse 60% 50% at 85% 10%, color-mix(in srgb, var(--blue) 18%, transparent), transparent),
    radial-gradient(ellipse 50% 40% at 10% 30%, color-mix(in srgb, var(--pink) 14%, transparent), transparent),
    linear-gradient(to bottom, var(--brand) 0, var(--brand-2) 520px, var(--window-bg) 900px);
}

.hero { text-align: center; padding-top: 64px; padding-bottom: 40px; }

.hero .app-icon {
  width: 128px;
  height: 128px;
  margin: 0 auto 20px;
  filter: drop-shadow(0 6px 14px rgb(0 0 6 / 0.25));
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hero .summary {
  margin: 8px 0 0;
  font-size: clamp(1.25rem, 3.5vw, 1.6rem);
  font-weight: 700;
}

.hero .lead {
  max-width: 600px;
  margin: 16px auto 0;
  color: var(--dim);
  font-size: 1.1rem;
}

.hero .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.hero .actions .button:not(.suggested) { background: light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.12)); }
.hero .actions .button:not(.suggested):hover { background: light-dark(rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.18)); }

.hero .license { margin: 16px 0 0; color: var(--dim); font-size: 0.9rem; }
.hero .download-info { margin: 12px 0 0; color: var(--dim); font-size: 0.9rem; }
.hero .download-info + .license { margin-top: 4px; }

/* Screenshot switcher, styled like a linked group of toggle buttons. The
   radio inputs sit before the tabs and the screenshots, so plain CSS can
   show the chosen one. */

.showcase { padding-bottom: 48px; }

.showcase input { position: absolute; opacity: 0; pointer-events: none; }

.tabs {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 8px;
  padding: 3px;
  gap: 3px;
  border-radius: 9px;
  background: var(--button-bg);
  overflow-x: auto;
}

.tabs label {
  padding: 5px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
}
.tabs label:hover { background: var(--button-bg); }

/* Six tabs fit a phone only a little smaller. */
@media (max-width: 560px) {
  .tabs { gap: 2px; }
  .tabs label { padding: 5px; font-size: 0.8rem; }
}

#show-day:checked ~ .tabs [for="show-day"],
#show-calendar:checked ~ .tabs [for="show-calendar"],
#show-reports:checked ~ .tabs [for="show-reports"],
#show-notes:checked ~ .tabs [for="show-notes"],
#show-git:checked ~ .tabs [for="show-git"],
#show-phone:checked ~ .tabs [for="show-phone"] {
  background: var(--view-bg);
  box-shadow: 0 1px 3px var(--card-shade);
}

.showcase input:focus-visible ~ .tabs { outline: 2px solid var(--accent-bg); outline-offset: 2px; }

.shot { display: none; margin: 0; }
.shot img {
  width: 100%;
  height: auto;
  margin: 0 auto 12px;
  border-radius: 12px;
  box-shadow: 0 2px 12px var(--card-shade);
}
.shot figcaption {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  color: var(--dim);
}

#show-day:checked ~ .shots .shot-day,
#show-calendar:checked ~ .shots .shot-calendar,
#show-reports:checked ~ .shots .shot-reports,
#show-notes:checked ~ .shots .shot-notes,
#show-git:checked ~ .shots .shot-git,
#show-phone:checked ~ .shots .shot-phone { display: block; }

/* Sections */

section { padding: 64px 0; }
section.tinted { background: var(--tint); }

.section-title {
  margin: 0 0 8px;
  text-align: center;
  font-size: clamp(1.6rem, 4.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.section-lead {
  max-width: 620px;
  margin: 0 auto 36px;
  text-align: center;
  color: var(--dim);
  font-size: 1.05rem;
}
.section-lead.after-list { margin: 24px auto 0; }

/* Cards */

.card {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgb(0 0 6 / 0.03), 0 1px 3px 1px var(--card-shade),
    0 2px 6px 2px rgb(0 0 6 / 0.02);
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
}

.feature { padding: 22px 24px; transition: transform 0.15s, box-shadow 0.15s; }
.feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgb(0 0 6 / 0.03), 0 4px 12px 2px var(--card-shade);
}
.feature h3 { margin: 14px 0 4px; font-size: 1.05rem; }
.feature p { margin: 0; color: var(--dim); }

kbd {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--button-bg);
  box-shadow: inset 0 -1px 0 var(--border);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.8em;
  white-space: nowrap;
}

/* Colored icon tiles, like the panels of GNOME Settings. */
.icon-tile {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #ffffff;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c), white 12%), var(--c));
  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--c) 50%, transparent);
}
.icon-tile .icon { width: 20px; height: 20px; }

.blue { --c: var(--blue); }
.teal { --c: var(--teal); }
.green { --c: var(--green); }
.yellow { --c: var(--yellow); }
.orange { --c: var(--orange); }
.red { --c: var(--red); }
.pink { --c: var(--pink); }
.purple { --c: var(--purple); }
.slate { --c: var(--slate); }

/* Text and code side by side */

.split {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 40px;
  align-items: center;
}
.split > * { min-width: 0; }
.split h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 4vw, 1.8rem); font-weight: 800; }
.split p { margin: 0 0 12px; color: var(--dim); }
.split .fg { color: var(--fg); }

.split .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px 12px 4px 10px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: light-dark(color-mix(in srgb, var(--c), black 15%), color-mix(in srgb, var(--c), white 35%));
  font-size: 0.85rem;
  font-weight: 700;
}

@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; gap: 24px; }
}

.code { overflow: hidden; }
.code .code-title {
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dim);
  box-shadow: 0 1px 0 var(--border);
}
.code pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-size: 0.8rem;
  line-height: 1.6;
  background: var(--code-bg);
}
.code .c { color: var(--dim); }
.code .k { color: light-dark(#1c71d8, #62a0ea); }
.code .s { color: light-dark(#26a269, #8ff0a4); }
.code .p { color: light-dark(#9141ac, #dc8add); font-weight: 700; }
.code .t { color: light-dark(#c64600, #ffa348); }

/* The terminal is dark in both styles, as most terminals are. */
.code.terminal {
  --fg: #ffffff;
  --dim: rgb(255 255 255 / 0.55);
  --border: rgb(255 255 255 / 0.1);
  background: #1e1e22;
  color: var(--fg);
}
.code.terminal pre { background: transparent; }
.code.terminal .c { color: #8ff0a4; }
.code.terminal .dim { color: var(--dim); }
.code.terminal .blue { color: #62a0ea; }
.code.terminal .green { color: #57e389; }
.code.terminal .yellow { color: #f8e45c; }
.code.terminal .orange { color: #ffa348; }

/* Overhead: a sample day as a bar of its blocks */

/* What a dev log is: a short explanation between the screenshots and the
   rest, plain text without a card. */
section.devlog { padding-top: 24px; padding-bottom: 24px; text-align: center; }
.devlog .section-title { margin-bottom: 16px; }
.devlog p {
  max-width: 640px;
  margin: 0 auto 12px;
  color: var(--dim);
  font-size: 1.05rem;
}
.devlog p:first-of-type { color: var(--fg); }
/* The point of it all, set apart from the explanation above. */
.devlog .point { margin-top: 28px; }
.devlog .point strong {
  display: block;
  margin-bottom: 6px;
  color: var(--fg);
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}


.day-card { padding: 20px 22px; }

.day-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-weight: 700;
}
.day-head .total { color: var(--dim); font-weight: 400; }

.day-bar {
  display: flex;
  gap: 3px;
  height: 28px;
  margin-bottom: 16px;
}
.day-bar span { border-radius: 6px; background: var(--c); }
.day-bar .break {
  background: repeating-linear-gradient(-45deg, var(--c) 0 4px, transparent 4px 8px);
  opacity: 0.6;
}

.day-list { margin: 0; padding: 0; list-style: none; }
.day-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
.day-list li + li { box-shadow: inset 0 1px 0 var(--border); }
.day-list .dot { flex: none; width: 10px; height: 10px; border-radius: 9999px; background: var(--c); }
.day-list .tag {
  padding: 1px 8px;
  border-radius: 9999px;
  background: var(--button-bg);
  color: var(--dim);
  font-size: 0.78rem;
  font-weight: 700;
}
.day-list .tag.overhead {
  background: color-mix(in srgb, var(--yellow) 20%, transparent);
  color: light-dark(#8a5d00, #f8e45c);
}
.day-list .time { margin-left: auto; font-variant-numeric: tabular-nums; }
.day-list .muted { color: var(--dim); }
.day-list .muted .time { text-decoration: line-through; }

.day-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 12px;
  padding-top: 12px;
  box-shadow: inset 0 1px 0 var(--border);
  color: var(--dim);
  font-size: 0.9rem;
}
.day-foot b { color: var(--fg); }

/* What's new: the latest releases with the newest open */

.release-list {
  display: grid;
  /* Not wider than the page, so long commands in the notes scroll instead. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}

.release summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}
.release summary::-webkit-details-marker { display: none; }
.release summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-right: 2px solid var(--dim);
  border-bottom: 2px solid var(--dim);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}
.release[open] summary::after { transform: rotate(45deg); }
.release summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent-bg) 50%, transparent); outline-offset: -2px; border-radius: 12px; }

.release-name { font-weight: 700; }
.release-title { color: var(--dim); }
.release-badge {
  padding: 1px 8px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--green) 18%, transparent);
  color: light-dark(#26803a, #8ff0a4);
  font-size: 0.78rem;
  font-weight: 700;
}
.release time { margin-left: auto; color: var(--dim); font-size: 0.9rem; }

.release-notes {
  padding: 0 20px 18px;
  color: var(--dim);
}
.release-notes > :first-child { margin-top: 0; }
.release-notes > :last-child { margin-bottom: 0; }
.release-notes p, .release-notes ul, .release-notes ol { margin: 0 0 10px; }
.release-notes ul, .release-notes ol { padding-left: 22px; }
.release-notes li + li { margin-top: 2px; }
.release-notes h1, .release-notes h2, .release-notes h3,
.release-notes h4, .release-notes h5, .release-notes h6 {
  margin: 14px 0 6px;
  color: var(--fg);
  font-size: 1rem;
}
.release-notes pre { overflow-x: auto; padding: 10px 12px; border-radius: 8px; background: var(--code-bg); }

/* Install */

.boxed-list { max-width: 720px; margin: 0 auto; }
.boxed-list .row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
}
.boxed-list .row + .row { box-shadow: inset 0 1px 0 var(--border); }
.boxed-list .num {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  background: var(--c, var(--accent-bg));
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
}
.boxed-list .row > div { min-width: 0; flex: 1; }
.boxed-list h3 { margin: 3px 0 4px; font-size: 1rem; }
.boxed-list p { margin: 0; color: var(--dim); }
.boxed-list .install-download { margin-top: 12px; }
.boxed-list .install-download span { font-family: var(--mono); font-size: 0.85rem; font-weight: 600; }
.boxed-list pre {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
  background: var(--code-bg);
}

/* Footer */

footer {
  padding: 32px 0 48px;
  text-align: center;
  color: var(--dim);
  font-size: 0.9rem;
}
footer p { margin: 4px 0; }

/* Imprint and privacy policy */

.legal { max-width: 760px; padding-top: 48px; padding-bottom: 32px; }
.legal h1 { margin: 0 0 20px; font-size: clamp(1.8rem, 5vw, 2.2rem); font-weight: 800; }
.legal .intro { margin: 0 0 24px; color: var(--dim); font-size: 1.05rem; }
.legal .card { margin-bottom: 16px; padding: 20px 24px; }
.legal h2 { margin: 0 0 8px; font-size: 1.05rem; }
.legal .card h2 + * { margin-top: 0; }
.legal .card > * + h2 { margin-top: 20px; }
.legal p, .legal ul { margin: 0 0 10px; color: var(--dim); }
.legal .card > :last-child { margin-bottom: 0; }
.legal ul { padding-left: 22px; }
.legal address { font-style: normal; }

/* Links to GitHub carry its mark, so it is clear they leave the site. */
.menu a .icon { margin-right: 10px; }
.icon.external { width: 0.75em; height: 0.75em; margin-left: 0.25em; vertical-align: -0.02em; }