/* dockpicks: a calm directory of Mac apps. One font (Inter), neutral greys and one accent,
   indigo, in a few recurring places: the hero highlight, the bar beside each group heading (home
   and the Categories menu), the uppercase "Our take" kicker, the solid Website buttons and
   active filter, the Free badge tint, and the chat icon on the "Ask your AI" panels; plus links
   and focus. Light and dark
   follow the system unless the footer switch picks one (data-theme on <html>, which sets
   color-scheme).
   Every colour below is light-dark(light, dark): the whole palette is this one block. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  /* Neutrals */
  --bg: light-dark(#ffffff, #0e0e10);
  --bg-subtle: light-dark(#f6f6f7, #161619);
  --bg-hover: light-dark(#f0f0f2, #1e1e22);
  --border: light-dark(#e7e7ea, #26262b);
  --border-strong: light-dark(#d5d5da, #38383f);
  --text: light-dark(#121214, #ededf0);
  --text-2: light-dark(#46464d, #b6b6be);
  --muted: light-dark(#65656e, #94949e);
  --raised: light-dark(#ffffff, #2a2a30);
  /* Accent: indigo. --accent is for text and focus; --accent-solid fills (white text); the tint
     sits behind accent text; the wash is the faint glow behind the hero. */
  --accent: light-dark(#5144f0, #9ca9ff);
  --accent-solid: light-dark(#5144f0, #5959e8);
  --accent-solid-hover: light-dark(#4433d3, #6262ec);
  --accent-tint: light-dark(#e7e8ff, #262a5a);
  --wash: light-dark(#f1f0ff, #16152e);
  --shadow: 0 1px 2px rgb(16 16 20 / .05), 0 8px 28px rgb(16 16 20 / .09);
  --shadow-sm: 0 1px 2px rgb(16 16 20 / .08);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --max: 72rem;
  --pad: 16px;
  --header: 60px;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* Shadows can't use light-dark(), so dark gets deeper ones here. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 32px rgb(0 0 0 / .5); --shadow-sm: 0 1px 2px rgb(0 0 0 / .5); }
}
:root[data-theme="dark"] { --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 32px rgb(0 0 0 / .5); --shadow-sm: 0 1px 2px rgb(0 0 0 / .5); }

@media (min-width: 640px) { :root { --pad: 24px; } }
@media (min-width: 1024px) { :root { --pad: 32px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 650; letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
p { text-wrap: pretty; }
img, svg { display: block; }
a { color: var(--accent); text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in oklab, var(--accent) 25%, transparent); }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html:not(.js) .needs-js { display: none !important; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 50; padding: 8px 14px; border-radius: var(--radius-sm); background: var(--text); color: var(--bg); font-weight: 600; }
.skip:focus { top: 12px; }
.icon { flex: none; }

/* App icons: "shaped" files already have the macOS shape; full-bleed squares get the rounded mask
   and the same 80.5% grid scale, so both kinds sit the same size. */
.appicon { flex: none; object-fit: contain; }
.appicon--bleed {
  scale: .805;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C13 0 0 13 0 50s13 50 50 50 50-13 50-50S87 0 50 0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C13 0 0 13 0 50s13 50 50 50 50-13 50-50S87 0 50 0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Prose links are underlined so they read as links without colour; UI links are not. */
:is(.prose, .footer__fine) a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
.prose a:hover { text-decoration-color: currentColor; }

@media (prefers-reduced-motion: no-preference) {
  a, button, summary, .seg__opt span, .theme__opt span, input, select { transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s; }
}

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.header__bar { position: relative; display: flex; align-items: center; gap: 8px; height: var(--header); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-weight: 650; font-size: 16.5px; letter-spacing: -.02em; border-radius: 6px; margin-right: 12px; white-space: nowrap; }
.brand__mark { width: 24px; height: 24px; }
.nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.nav__item {
  display: inline-flex; align-items: center; gap: 4px;
  height: 34px; padding: 0 10px; border-radius: var(--radius-sm);
  color: var(--text-2); font-size: 14.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.nav__item:hover, .menu[open] > .nav__item { background: var(--bg-hover); color: var(--text); }
.nav__item[aria-current="page"] { color: var(--text); }
.nav__item .icon { width: 14px; height: 14px; color: var(--muted); }
.menu[open] > .nav__item .icon { rotate: 180deg; }
.sponsor {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 34px; padding: 0 12px; margin-left: 4px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text); font-size: 14px; font-weight: 550; white-space: nowrap;
}
.sponsor .icon { width: 15px; height: 15px; color: var(--accent); }
.sponsor:hover { background: var(--bg-hover); }
/* Phones: Sponsor shrinks to its heart (the label stays for screen readers), and below 360 px
   About moves to the footer only. */
@media (max-width: 519px) {
  .header__bar { gap: 4px; }
  .brand { margin-right: 4px; }
  .nav__item { padding: 0 8px; }
  .sponsor { width: 34px; padding: 0; justify-content: center; }
  .sponsor__label { display: none; }
}
@media (max-width: 359px) { .nav__item--about { display: none; } }

/* Categories menu: a <details> disclosure, so it works without JS. */
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute; top: calc(100% + 6px); left: var(--pad); z-index: 30;
  width: min(940px, calc(100vw - 2 * var(--pad)));
  max-height: calc(100dvh - var(--header) - 24px); overflow: auto;
  padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.menu__groups { columns: 250px 3; column-gap: 20px; }
.menu__group { break-inside: avoid; padding-bottom: 16px; }
.menu__head { margin: 0 8px 6px; padding-left: 9px; border-left: 2px solid var(--accent); font-size: 13px; font-weight: 650; line-height: 1.35; }
.menu__item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--text); font-size: 14.5px; }
.menu__item:hover { background: var(--bg-hover); }
.menu__item[aria-current="page"] { color: var(--accent); font-weight: 600; }
.search--menu { margin-bottom: 16px; }
@media (min-width: 860px) { body:not(.page-home) .search--menu { display: none; } }

/* ---------- search ---------- */
.search { position: relative; }
.search > .icon { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.search input {
  width: 100%; height: 40px; padding: 0 36px 0 38px;
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px;
  font-size: 15px; outline: none; -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search input:hover { border-color: color-mix(in oklab, var(--border-strong) 50%, var(--muted)); }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.search__key {
  position: absolute; right: 10px; top: 50%; translate: 0 -50%;
  min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--border); border-radius: 5px;
  color: var(--muted); font: 500 12px/18px var(--font); text-align: center; pointer-events: none;
}
.search input:focus ~ .search__key { opacity: 0; }
.search--header { width: 260px; margin-right: 4px; }
.search--header input { height: 34px; font-size: 14px; background: var(--bg-subtle); border-color: var(--border); }
.search--header input:focus { background: var(--bg); }
@media (max-width: 859px) { .search--header { display: none; } }
.search--hero { max-width: 560px; margin-top: 28px; }
.search--hero input { height: 50px; padding-left: 44px; font-size: 16.5px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.search--hero > .icon { left: 15px; width: 19px; height: 19px; }
.search--hero .search__key { right: 14px; }

.search__results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  min-width: min(340px, calc(100vw - 2 * var(--pad)));
  max-height: min(440px, 62vh); overflow: auto; padding: 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.search--header .search__results { left: auto; width: 380px; }
.search__results [role="option"] {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
}
.search__results .appicon { grid-row: span 2; width: 30px; height: 30px; }
.search__name { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.search__detail { grid-column: 2; color: var(--muted); font-size: 13px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__kind { grid-column: 3; grid-row: 1 / span 2; color: var(--muted); font-size: 12px; }
.search__results [aria-selected="true"], .search__results [role="option"]:hover { background: var(--bg-hover); }
.search__none { padding: 12px; color: var(--muted); font-size: 14.5px; }

/* ---------- shared bits ---------- */
.badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-subtle);
  color: var(--text-2); font-size: 12.5px; font-weight: 550; line-height: 1; letter-spacing: 0; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* The one accent badge is Free; paid prices are neutral, and Open source is a neutral outline,
   so a free open-source row shows one indigo badge, not two. */
.badge--free { border-color: transparent; background: var(--accent-tint); color: var(--accent); }
.badge--oss { background: transparent; }
.badge--builtin { background: transparent; color: var(--muted); }
/* The kicker: a small uppercase indigo label ("Our take", About and 404). The same style
   everywhere, so it reads as one recurring mark, and uppercase so it never reads as a link. */
.eyebrow, .app__label { color: var(--accent); font-size: 12.5px; font-weight: 650; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; }
.eyebrow { margin-bottom: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--bg);
  color: var(--text); font-size: 14px; font-weight: 550; white-space: nowrap;
}
.btn .icon { width: 14px; height: 14px; color: var(--muted); }
.btn:hover { background: var(--bg-hover); }
/* The row's primary link: the one solid indigo button per app. */
.btn--primary { border-color: transparent; background: var(--accent-solid); color: #fff; }
.btn--primary .icon { color: currentColor; }
.btn--primary:hover { background: var(--accent-solid-hover); }

/* ---------- home ---------- */
.hero {
  padding: 56px 0 56px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(60% 100% at 10% 0%, var(--wash), transparent 75%),
    var(--bg);
}
.hero__hl { color: var(--accent); }
.hero__title { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); font-weight: 680; letter-spacing: -.035em; line-height: 1.04; }
.hero__lead { max-width: 40em; text-wrap: balance; margin-top: 18px; color: var(--text-2); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; }
@media (min-width: 1024px) { .hero { padding: 88px 0 80px; } }

.section { margin-top: 56px; }
.section__head { margin-bottom: 20px; }
.section__title { font-size: 22px; letter-spacing: -.02em; }
.section__sub { margin-top: 4px; color: var(--muted); font-size: 15px; }
@media (min-width: 1024px) { .section { margin-top: 96px; } }
.hero + .wrap > .section:first-child { margin-top: 48px; }
@media (min-width: 1024px) { .hero + .wrap > .section:first-child { margin-top: 64px; } }

.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.pick {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: start; align-content: start; height: 100%;
  padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text);
}
.pick:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.pick:hover .pick__name { color: var(--accent); }
.pick .appicon { grid-row: span 2; width: 48px; height: 48px; }
.pick__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.pick__why { margin-top: 4px; color: var(--text-2); font-size: 14px; line-height: 1.45; }

/* Group headings: Inter in title case with a short indigo bar down the left of the heading and
   its line, and a neutral count pill beside the title. The bar is the only indigo here; the pill
   stays grey so it isn't mistaken for the indigo Free badge. */
.group { margin-top: 44px; }
.group__head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-bottom: 16px; padding-left: 16px; }
.group__head::before { content: ""; position: absolute; inset: 2px auto 2px 0; width: 3px; border-radius: 2px; background: var(--accent); }
.group__title { font-size: 19px; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; }
.group__count { padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-subtle); color: var(--muted); font-size: 12.5px; font-weight: 550; line-height: 1.5; white-space: nowrap; }
.group__sub { flex-basis: 100%; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.cat-list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; border-top: 1px solid var(--border); }
@media (min-width: 900px) { .cat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cat-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; height: 100%;
  padding: 14px 0; border-bottom: 1px solid var(--border); color: var(--text);
}
/* The hover fill bleeds 10px to each side so the text keeps its alignment with the rules. */
.cat-row:hover { background: var(--bg-subtle); box-shadow: -10px 0 0 var(--bg-subtle), 10px 0 0 var(--bg-subtle); }
.cat-row:hover .cat-row__name { color: var(--accent); }
.cat-row:focus-visible { outline-offset: -2px; border-radius: var(--radius-sm); }
.cat-row__name { font-weight: 600; font-size: 15.5px; line-height: 1.35; }
.cat-row__summary { grid-column: 1; margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.cat-row__icons { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; }
.cat-row__icons .appicon { width: 28px; height: 28px; }
@media (max-width: 479px) { .cat-row__icons .appicon:nth-child(n + 3) { display: none; } }

/* ---------- Ask your AI ---------- */
/* A quiet grey panel with the prompt on white, on home (after Start here) and at the end of each
   category. The chat icon is its one indigo mark; Copy is a neutral button, so the Website buttons
   stay the only solid accent. Desktop puts the heading beside the prompt. */
.ask { margin-top: 48px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-subtle); }
.ask__title { display: flex; align-items: flex-start; gap: 8px; font-size: 17px; letter-spacing: -.01em; line-height: 1.35; }
.ask__title .icon { width: 19px; height: 19px; margin-top: 2px; color: var(--accent); }
.ask__sub { margin-top: 6px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.ask__prompt { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.ask__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.ask__copy { min-width: 9.5rem; }
.ask__open { color: var(--muted); font-size: 14px; }
.ask__open a { color: var(--text-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
.ask__open a:hover { color: var(--accent); }
@media (max-width: 479px) { .ask { padding: 16px; } .ask__prompt { padding: 10px 12px; } }
@media (min-width: 900px) {
  .ask { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: 40px; padding: 28px; }
  .ask__head { grid-row: 1 / span 2; }
  .ask__prompt { margin-top: 0; }
}
@media (min-width: 1024px) { .hero + .wrap > .ask { margin-top: 64px; } }

/* ---------- category ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 28px; color: var(--muted); font-size: 14px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text-2); }
.cat__head { margin-top: 28px; }
.cat__head h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.875rem); font-weight: 680; letter-spacing: -.03em; line-height: 1.08; }
.cat__summary { margin-top: 10px; color: var(--text-2); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
.cat__meta { margin-top: 10px; color: var(--muted); font-size: 14px; }
@media (min-width: 1024px) { .crumbs { padding-top: 40px; } }


.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; }
@media (min-width: 640px) { .toolbar { margin-top: 40px; } }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-subtle); min-width: 0; }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg__opt span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 7px; color: var(--text-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
.seg__opt .seg__count { height: auto; padding: 0; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.seg__opt input:hover:not(:disabled) + span { color: var(--text); }
.seg__opt input:checked + span { background: var(--accent-solid); color: #fff; box-shadow: var(--shadow-sm); }
.seg__opt input:checked + span .seg__count { color: rgb(255 255 255 / .8); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg__opt input:disabled { cursor: default; }
.seg__opt input:disabled + span { opacity: .45; }
.toolbar__status { color: var(--muted); font-size: 14px; }
@media (max-width: 479px) {
  .seg { display: flex; width: 100%; flex-wrap: nowrap; }
  .seg__opt { flex: 1 1 auto; }
  .seg__opt span { width: 100%; justify-content: center; padding: 0 8px; }
  .seg__opt .seg__count { display: none; }
}
.toolbar__status:empty { display: none; }
.sort { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: 14px; }
@media (max-width: 479px) { .sort { margin-left: 0; } }
.sort select { height: 36px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: 14px; cursor: pointer; }

.apps { margin-top: 16px; border-top: 1px solid var(--border); }
.app { border-bottom: 1px solid var(--border); scroll-margin-top: calc(var(--header) + 12px); }
.app__card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 14px; padding: 24px 0; }
.app__icon { width: 48px; height: 48px; }
.app__head { align-self: center; }
.app__body, .app__actions { grid-column: 1 / -1; }
.app__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.app__name { font-size: 18px; letter-spacing: -.015em; }
.app__tagline { margin-top: 2px; color: var(--text); font-size: 15.5px; line-height: 1.45; }
.app__desc, .app__note { margin-top: 10px; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.app__label { margin-right: 4px; font-size: 12px; }
.app__facts { display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 10px; color: var(--muted); font-size: 13.5px; }
.app__facts > span:not(:last-child)::after { content: "·"; margin: 0 8px; }
.app__asof { color: var(--muted); }
.app__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }
.app__more { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.app__more a { color: var(--text-2); }
.app__more a:hover { color: var(--accent); }
@media (min-width: 720px) {
  .app__card { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 24px; padding: 28px 0; }
  .app__icon { width: 64px; height: 64px; grid-row: 1 / span 2; }
  .app__head { grid-column: 2; align-self: start; }
  .app__name { font-size: 19px; }
  .app__body { grid-column: 2; }
  .app__desc { margin-top: 8px; }
  .app__actions { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; align-self: start; margin-top: 0; }
  .app__more { flex-direction: column; align-items: flex-end; gap: 6px; }
}
@keyframes found { from { background-color: var(--accent-tint); } to { background-color: transparent; } }
.app--flash { animation: found 1.6s ease-out; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { .app--flash { animation: none; } }
.apps__empty { padding: 32px 0; color: var(--muted); }

.compare { margin-top: 40px; }
.compare > summary {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: 10px; font-size: 14.5px; font-weight: 550; cursor: pointer; list-style: none;
}
.compare > summary::-webkit-details-marker { display: none; }
.compare > summary:hover { background: var(--bg-hover); }
.compare > summary .icon { width: 15px; height: 15px; color: var(--muted); }
.compare[open] > summary .icon { rotate: 180deg; }
.compare__scroll { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.compare__table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.compare__table :is(th, td) { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.compare__table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.compare__table thead th { background: var(--bg-subtle); color: var(--muted); font-size: 13px; font-weight: 550; }
.compare__table tbody th { font-weight: 550; }
.compare__app { display: flex; align-items: center; gap: 10px; color: var(--text); line-height: 1.3; }
.compare__app:hover span { color: var(--accent); }
.compare__app .appicon { width: 24px; height: 24px; }
.dash { color: var(--muted); }
@media (max-width: 599px) {
  .compare__table :is(th, td):nth-child(3), .compare__table :is(th, td):nth-child(5) { display: none; }
  .compare__table :is(th, td) { padding: 10px; }
}

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
.pager__link { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); min-width: 0; }
.pager__link:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.pager__link--next { text-align: right; grid-column: 2; }
.pager__dir { color: var(--muted); font-size: 13px; }
.pager__name { font-weight: 600; font-size: 15.5px; }

/* ---------- about ---------- */
.prose-page { max-width: calc(46rem + 2 * var(--pad)); margin-inline: 0; padding-top: 48px; }
.prose-page h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.875rem); font-weight: 680; letter-spacing: -.03em; line-height: 1.08; }
.prose-page__lead { margin-top: 16px; color: var(--text-2); font-size: 18px; }
.prose section { margin-top: 44px; }
.prose h2 { font-size: 20px; letter-spacing: -.015em; }
.prose p { margin-top: 12px; color: var(--text-2); line-height: 1.65; }
.labels { display: grid; gap: 10px; margin-top: 16px; }
.labels > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; align-items: baseline; }
.labels dt { font-weight: 600; font-size: 15px; }
.labels dd { color: var(--text-2); font-size: 15px; }
@media (max-width: 519px) { .labels > div { grid-template-columns: 1fr; gap: 2px; } }
@media (min-width: 1024px) { .prose-page { padding-top: 72px; } }
@media (min-width: 1240px) { .prose-page { margin-inline: auto; max-width: calc(var(--max) + 2 * var(--pad)); padding-right: calc(var(--max) - 46rem + var(--pad)); } }

/* ---------- 404 ---------- */
.notfound { padding-top: 64px; }
.notfound h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.875rem); font-weight: 680; letter-spacing: -.03em; }
.notfound__lead { margin-top: 12px; color: var(--text-2); font-size: 18px; }
.notfound__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; }
.notfound__cats a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 8px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 14.5px; }
.notfound__cats a:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.notfound__cats .appicon { width: 20px; height: 20px; }

/* ---------- footer ---------- */
.footer { margin-top: 96px; padding: 40px 0 32px; border-top: 1px solid var(--border); background: var(--bg-subtle); font-size: 14px; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; }
.footer__about p { max-width: 36ch; margin-top: 10px; color: var(--muted); }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-start; }
.footer__links a { color: var(--text-2); }
.footer__links a:hover { color: var(--text); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }
.footer__fine { max-width: 80ch; color: var(--muted); font-size: 13px; }
.theme { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-subtle); }
.theme__opt { position: relative; }
.theme__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.theme__opt span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; color: var(--muted); font-size: 13px; font-weight: 500; }
.theme__opt input:hover + span { color: var(--text); }
.theme__opt input:checked + span { background: var(--raised); box-shadow: var(--shadow-sm); color: var(--text); }
.theme__opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }