/* =========================================================================
   apps.nekowo.ir — Material Design 3 design system
   Typeface: Figtree (SIL Open Font License 1.1), Google's open-source
   stand-in for the proprietary Google Sans / Product Sans corporate face.
   Colour: an M3 tonal palette expressed in oklch(), so the accent hue can be
   re-seeded in the browser and the whole scheme re-derives (Material You).
   ========================================================================= */

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- tokens */
:root {
  /* Material You seed — re-written at runtime by app.js */
  --h: 264;
  --cs: 1;

  color-scheme: light;

  /* --- primary: the accent ramp ------------------------------------- */
  --primary: oklch(0.52 calc(0.19 * var(--cs)) var(--h));
  --on-primary: oklch(1 0 0);
  --primary-container: oklch(0.90 calc(0.06 * var(--cs)) var(--h));
  --on-primary-container: oklch(0.32 calc(0.12 * var(--cs)) var(--h));

  --secondary: oklch(0.52 calc(0.075 * var(--cs)) var(--h));
  --on-secondary: oklch(1 0 0);
  --secondary-container: oklch(0.91 calc(0.035 * var(--cs)) var(--h));
  --on-secondary-container: oklch(0.33 calc(0.055 * var(--cs)) var(--h));

  --tertiary: oklch(0.53 calc(0.115 * var(--cs)) calc(var(--h) + 60));
  --on-tertiary: oklch(1 0 0);
  --tertiary-container: oklch(0.91 calc(0.05 * var(--cs)) calc(var(--h) + 60));
  --on-tertiary-container: oklch(0.34 calc(0.07 * var(--cs)) calc(var(--h) + 60));

  --error: oklch(0.52 calc(0.19) 27);
  --on-error: oklch(1 0 0);
  --error-container: oklch(0.91 calc(0.09) 27);
  --on-error-container: oklch(0.32 calc(0.14) 27);

  /* --- neutrals -------------------------------------------------------- */
  --background: oklch(0.985 calc(0.004 * var(--cs)) var(--h));
  --on-background: oklch(0.21 calc(0.02 * var(--cs)) var(--h));
  --surface: oklch(0.985 calc(0.004 * var(--cs)) var(--h));
  --on-surface: oklch(0.21 calc(0.02 * var(--cs)) var(--h));
  --surface-variant: oklch(0.90 calc(0.012 * var(--cs)) var(--h));
  --on-surface-variant: oklch(0.45 calc(0.022 * var(--cs)) var(--h));

  --surface-dim: oklch(0.885 calc(0.012 * var(--cs)) var(--h));
  --surface-bright: oklch(0.985 calc(0.004 * var(--cs)) var(--h));
  --surface-container-lowest: oklch(1 0 0);
  --surface-container-low: oklch(0.975 calc(0.006 * var(--cs)) var(--h));
  --surface-container: oklch(0.955 calc(0.008 * var(--cs)) var(--h));
  --surface-container-high: oklch(0.935 calc(0.01 * var(--cs)) var(--h));
  --surface-container-highest: oklch(0.905 calc(0.012 * var(--cs)) var(--h));

  --outline: oklch(0.53 calc(0.018 * var(--cs)) var(--h));
  --outline-variant: oklch(0.80 calc(0.014 * var(--cs)) var(--h));
  --inverse-surface: oklch(0.28 calc(0.02 * var(--cs)) var(--h));
  --inverse-on-surface: oklch(0.955 calc(0.008 * var(--cs)) var(--h));
  --inverse-primary: oklch(0.80 calc(0.13 * var(--cs)) var(--h));
  --scrim: oklch(0 0 0);
  --shadow: oklch(0 0 0);

  /* --- shape ----------------------------------------------------------- */
  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-xl: 28px;
  --shape-xxl: 36px;
  --shape-full: 999px;
  --shape-icon-sm: 12px;
  --shape-icon-md: 16px;
  --shape-icon-lg: 24px;

  /* --- motion ---------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  --dur-short: 200ms;
  --dur-medium: 300ms;
  --dur-long: 450ms;
  --dur-extra: 600ms;

  /* --- layout ---------------------------------------------------------- */
  --page-max: 1240px;
  --gutter: clamp(16px, 4vw, 32px);
  --topbar-h: 64px;
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --primary: oklch(0.80 calc(0.13 * var(--cs)) var(--h));
  --on-primary: oklch(0.28 calc(0.10 * var(--cs)) var(--h));
  --primary-container: oklch(0.36 calc(0.15 * var(--cs)) var(--h));
  --on-primary-container: oklch(0.90 calc(0.06 * var(--cs)) var(--h));

  --secondary: oklch(0.80 calc(0.06 * var(--cs)) var(--h));
  --on-secondary: oklch(0.28 calc(0.05 * var(--cs)) var(--h));
  --secondary-container: oklch(0.32 calc(0.05 * var(--cs)) var(--h));
  --on-secondary-container: oklch(0.91 calc(0.035 * var(--cs)) var(--h));

  --tertiary: oklch(0.80 calc(0.10 * var(--cs)) calc(var(--h) + 60));
  --on-tertiary: oklch(0.28 calc(0.08 * var(--cs)) calc(var(--h) + 60));
  --tertiary-container: oklch(0.34 calc(0.08 * var(--cs)) calc(var(--h) + 60));
  --on-tertiary-container: oklch(0.91 calc(0.05 * var(--cs)) calc(var(--h) + 60));

  --error: oklch(0.80 calc(0.14) 27);
  --on-error: oklch(0.28 calc(0.13) 27);
  --error-container: oklch(0.36 calc(0.14) 27);
  --on-error-container: oklch(0.90 calc(0.09) 27);

  --background: oklch(0.155 calc(0.012 * var(--cs)) var(--h));
  --on-background: oklch(0.90 calc(0.01 * var(--cs)) var(--h));
  --surface: oklch(0.155 calc(0.012 * var(--cs)) var(--h));
  --on-surface: oklch(0.90 calc(0.01 * var(--cs)) var(--h));
  --surface-variant: oklch(0.30 calc(0.015 * var(--cs)) var(--h));
  --on-surface-variant: oklch(0.80 calc(0.014 * var(--cs)) var(--h));

  --surface-dim: oklch(0.155 calc(0.012 * var(--cs)) var(--h));
  --surface-bright: oklch(0.34 calc(0.018 * var(--cs)) var(--h));
  --surface-container-lowest: oklch(0.11 calc(0.010 * var(--cs)) var(--h));
  --surface-container-low: oklch(0.21 calc(0.013 * var(--cs)) var(--h));
  --surface-container: oklch(0.245 calc(0.014 * var(--cs)) var(--h));
  --surface-container-high: oklch(0.29 calc(0.015 * var(--cs)) var(--h));
  --surface-container-highest: oklch(0.34 calc(0.017 * var(--cs)) var(--h));

  --outline: oklch(0.60 calc(0.016 * var(--cs)) var(--h));
  --outline-variant: oklch(0.30 calc(0.015 * var(--cs)) var(--h));
  --inverse-surface: oklch(0.90 calc(0.01 * var(--cs)) var(--h));
  --inverse-on-surface: oklch(0.28 calc(0.02 * var(--cs)) var(--h));
  --inverse-primary: oklch(0.52 calc(0.19 * var(--cs)) var(--h));
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 24px);
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--on-surface);
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

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

a {
  color: var(--primary);
  text-decoration: none;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--shape-xs);
}

::selection { background: var(--primary-container); color: var(--on-primary-container); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------- typography */
.t-display-lg { font-size: clamp(2.5rem, 6vw, 3.5625rem); line-height: 1.15; letter-spacing: -0.015em; font-weight: 700; }
.t-display-sm { font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; }
.t-headline-lg { font-size: clamp(1.75rem, 3.6vw, 2rem); line-height: 1.25; letter-spacing: -0.008em; font-weight: 700; }
.t-headline-md { font-size: clamp(1.5rem, 3vw, 1.75rem); line-height: 1.3; letter-spacing: -0.005em; font-weight: 700; }
.t-headline-sm { font-size: 1.5rem; line-height: 1.35; letter-spacing: 0; font-weight: 650; }
.t-title-lg { font-size: 1.375rem; line-height: 1.4; letter-spacing: -0.003em; font-weight: 650; }
.t-title-md { font-size: 1rem; line-height: 1.5; letter-spacing: 0.009em; font-weight: 600; }
.t-title-sm { font-size: 0.875rem; line-height: 1.45; letter-spacing: 0.007em; font-weight: 600; }
.t-body-lg { font-size: 1.0625rem; line-height: 1.6; letter-spacing: 0.012em; }
.t-body-md { font-size: 0.9375rem; line-height: 1.6; letter-spacing: 0.014em; }
.t-body-sm { font-size: 0.8125rem; line-height: 1.5; letter-spacing: 0.016em; }
.t-label-lg { font-size: 0.875rem; line-height: 1.43; letter-spacing: 0.007em; font-weight: 600; }
.t-label-md { font-size: 0.75rem; line-height: 1.33; letter-spacing: 0.045em; font-weight: 600; text-transform: uppercase; }
.t-label-sm { font-size: 0.6875rem; line-height: 1.45; letter-spacing: 0.04em; font-weight: 600; text-transform: uppercase; }

.ink-muted { color: var(--on-surface-variant); }
.ink-primary { color: var(--primary); }
.ink-inverse { color: var(--inverse-on-surface); background: var(--inverse-surface); }

/* --------------------------------------------------------------- layout */
.shell { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.shell--wide { max-width: 1500px; }
main { flex: 1 0 auto; }
.section { padding-block: clamp(32px, 6vw, 64px); }
.section--tight { padding-block: clamp(20px, 3vw, 32px); }
.stack > * + * { margin-top: var(--gap, 16px); }
.row { display: flex; align-items: center; gap: 12px; }
.row--wrap { flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-200%);
  background: var(--primary); color: var(--on-primary);
  padding: 12px 20px; border-radius: var(--shape-full);
  font-weight: 600;
  transition: transform var(--dur-short) var(--ease-emphasized);
}
.skip-link:focus { transform: translateY(0); text-decoration: none; }

/* -------------------------------------------------------------- top bar */
.topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--topbar-h);
  display: flex; align-items: center;
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-medium) var(--ease-standard),
              background var(--dur-medium) var(--ease-standard);
}
.topbar[data-scrolled='true'] { border-bottom-color: var(--outline-variant); }
.topbar__inner { display: flex; align-items: center; gap: 8px; width: 100%; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--on-surface); font-weight: 700; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name { font-size: 1.0625rem; letter-spacing: -0.01em; }
.brand__name b { font-weight: 800; color: var(--primary); }

.topbar__nav { display: flex; align-items: center; gap: 2px; margin-inline-start: 12px; }
.navlink {
  position: relative; display: inline-flex; align-items: center; height: 40px;
  padding-inline: 14px; border-radius: var(--shape-full);
  color: var(--on-surface-variant); font-weight: 600; font-size: 0.875rem;
  transition: background var(--dur-short) var(--ease-standard),
              color var(--dur-short) var(--ease-standard);
}
.navlink:hover { background: color-mix(in oklab, var(--on-surface) 8%, transparent); color: var(--on-surface); text-decoration: none; }
.navlink[aria-current='page'] { background: var(--secondary-container); color: var(--on-secondary-container); }

.topbar__actions { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }

/* ------------------------------------------------------------- icon button */
.iconbtn {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border: 0; border-radius: var(--shape-full);
  background: transparent; color: var(--on-surface-variant);
  overflow: hidden;
  transition: color var(--dur-short) var(--ease-standard);
}
.iconbtn:hover { color: var(--on-surface); }
.iconbtn svg { width: 22px; height: 22px; }
.iconbtn--filled { background: var(--surface-container-high); color: var(--on-surface); }
.iconbtn--filled:hover { background: var(--surface-container-highest); }
.iconbtn--tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.iconbtn--tonal:hover { background: color-mix(in oklab, var(--secondary-container) 80%, var(--on-secondary-container) 8%); }

/* state layer: a pressed/hover wash painted over the content */
.state { position: relative; isolation: isolate; }
.state::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: currentColor; opacity: 0;
  transition: opacity var(--dur-short) var(--ease-standard);
  pointer-events: none;
}
.state:hover::after { opacity: 0.08; }
.state:active::after { opacity: 0.12; }
.state:focus-visible::after { opacity: 0.10; }

/* ---------------------------------------------------------------- buttons */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding-inline: 24px; border: 0; border-radius: var(--shape-full);
  font-size: 0.875rem; font-weight: 650; letter-spacing: 0.007em;
  text-decoration: none; white-space: nowrap;
  transition: box-shadow var(--dur-short) var(--ease-standard),
              background var(--dur-short) var(--ease-standard),
              transform var(--dur-short) var(--ease-emphasized-accel);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.975); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--filled { background: var(--primary); color: var(--on-primary); }
.btn--tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn--outlined { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 1px var(--outline); }
.btn--outlined:hover { background: color-mix(in oklab, var(--primary) 8%, transparent); }
.btn--text { background: transparent; color: var(--primary); padding-inline: 16px; }
.btn--elevated {
  background: var(--surface-container-low); color: var(--primary);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.16), 0 2px 6px oklch(0 0 0 / 0.11);
}
.btn--lg { height: 52px; padding-inline: 28px; font-size: 0.9375rem; }
.btn--sm { height: 36px; padding-inline: 18px; font-size: 0.8125rem; }
.btn--block { width: 100%; }
.btn[disabled] { pointer-events: none; opacity: 0.38; box-shadow: none; }

/* ----------------------------------------------------------------- search */
.searchbar {
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding-inline: 16px;
  background: var(--surface-container-high);
  border-radius: var(--shape-full);
  border: 1px solid transparent;
  transition: background var(--dur-medium) var(--ease-standard),
              border-color var(--dur-medium) var(--ease-standard),
              box-shadow var(--dur-medium) var(--ease-standard);
}
.searchbar:focus-within {
  background: var(--surface-container-highest);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 14%, transparent);
}
.searchbar__icon { color: var(--on-surface-variant); flex: none; }
.searchbar__icon svg { width: 22px; height: 22px; }
.searchbar input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  background: none; border: 0; outline: none; font-size: 1rem;
}
.searchbar input::placeholder { color: var(--on-surface-variant); }
.searchbar kbd {
  font-family: inherit; font-size: 0.6875rem; font-weight: 600;
  color: var(--on-surface-variant);
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-xs);
  padding: 2px 6px; line-height: 1.2;
}

/* ------------------------------------------------------------------ chips */
.chiprow {
  display: flex; gap: 8px; overflow-x: auto; padding-block: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.chiprow::-webkit-scrollbar { display: none; }
.chip {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 40px; padding-inline: 18px; border: 0;
  border-radius: var(--shape-sm);
  background: var(--surface-container);
  color: var(--on-surface-variant);
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.007em;
  scroll-snap-align: start;
  transition: background var(--dur-medium) var(--ease-standard),
              color var(--dur-medium) var(--ease-standard),
              border-radius var(--dur-medium) var(--ease-standard);
}
.chip[aria-pressed='true'],
.chip[aria-selected='true'] {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-radius: var(--shape-sm);
}
.chip[aria-pressed='true']:hover { background: var(--secondary-container); }
.chip__count { font-size: 0.75rem; opacity: 0.7; font-variant-numeric: tabular-nums; }

select.chip {
  appearance: none; padding-inline-end: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.chip option { background: var(--surface-container-high); color: var(--on-surface); }

/* ------------------------------------------------------------------ cards */
.card {
  position: relative;
  background: var(--surface-container-low);
  border-radius: var(--shape-lg);
  color: var(--on-surface);
  overflow: hidden;
}
.card--outlined { background: var(--surface); box-shadow: inset 0 0 0 1px var(--outline-variant); }
.card--filled { background: var(--surface-container-high); }
.card--interactive {
  transition: transform var(--dur-medium) var(--ease-emphasized),
              box-shadow var(--dur-medium) var(--ease-standard),
              background var(--dur-medium) var(--ease-standard);
}
.card--interactive:hover {
  background: var(--surface-container);
  transform: translateY(-3px);
  box-shadow: 0 4px 8px oklch(0 0 0 / 0.08), 0 8px 24px oklch(0 0 0 / 0.10);
}
.card--interactive:active { transform: translateY(-1px) scale(0.995); }

/* ------------------------------------------------------------------ icons */
.appicon {
  --size: 64px;
  position: relative; flex: none;
  width: var(--size); height: var(--size);
  border-radius: calc(var(--size) * 0.235);
  background:
    linear-gradient(150deg,
      color-mix(in oklab, var(--app-h, var(--h)) 26%, var(--surface-container-highest)),
      color-mix(in oklab, var(--app-h, var(--h)) 8%, var(--surface-container-high)));
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.14);
  overflow: hidden;
  display: grid; place-items: center;
}
.appicon img {
  width: 78%; height: 78%; object-fit: contain;
  border-radius: calc(var(--size) * 0.11);
}
.appicon--sq img { border-radius: calc(var(--size) * 0.05); }
.appicon--hero { --size: 128px; }
.appicon--hero img { border-radius: calc(var(--size) * 0.1); }
.appicon--sm { --size: 44px; }
.appicon--lg { --size: 88px; }

/* -------------------------------------------------------------- app card */
.appcard {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  height: 100%;
  padding: 20px;
  background: var(--surface-container-low);
  border-radius: var(--shape-xl);
  color: var(--on-surface);
  transition: transform var(--dur-medium) var(--ease-emphasized),
              box-shadow var(--dur-medium) var(--ease-standard),
              background var(--dur-medium) var(--ease-standard);
}
.appcard:hover {
  text-decoration: none;
  background: var(--surface-container);
  transform: translateY(-4px);
  box-shadow: 0 4px 10px oklch(0 0 0 / 0.09), 0 12px 28px oklch(0 0 0 / 0.11);
}
.appcard:active { transform: translateY(-1px) scale(0.99); }
.appcard::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--outline-variant);
  opacity: 0.75; pointer-events: none;
}
.appcard:hover::after { opacity: 1; }
.appcard__head { display: flex; align-items: flex-start; gap: 14px; }
.appcard__headings { min-width: 0; flex: 1 1 auto; }
.appcard__name {
  margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.008em;
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.appcard__role { display: block; color: var(--on-surface-variant); font-size: 0.8125rem; font-weight: 500; }
.appcard__blurb {
  margin: 14px 0 0; color: var(--on-surface-variant);
  font-size: 0.875rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  flex: 1 1 auto;
}
.appcard__foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--outline-variant);
}

.grid-apps {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
.grid-apps--dense { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }

/* ------------------------------------------------------------------ badge */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding-inline: 9px;
  border-radius: var(--shape-sm);
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
}
.badge svg { width: 13px; height: 13px; }
.badge--foss { background: color-mix(in oklab, #2e9e5b 18%, var(--surface-container-high)); color: color-mix(in oklab, #1c6b3d 88%, var(--on-surface)); }
.badge--source { background: color-mix(in oklab, #d08b1a 20%, var(--surface-container-high)); color: color-mix(in oklab, #7a4d05 90%, var(--on-surface)); }
.badge--closed { background: color-mix(in oklab, #c0532a 18%, var(--surface-container-high)); color: color-mix(in oklab, #7d3116 90%, var(--on-surface)); }
.badge--primary { background: var(--primary-container); color: var(--on-primary-container); }
:root[data-theme='dark'] .badge--foss { color: color-mix(in oklab, #7fdcA2 90%, var(--on-surface)); }
:root[data-theme='dark'] .badge--source { color: color-mix(in oklab, #f3c05f 90%, var(--on-surface)); }
:root[data-theme='dark'] .badge--closed { color: color-mix(in oklab, #f0a184 90%, var(--on-surface)); }

/* ----------------------------------------------------------------- pills */
.metarow { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.meta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--on-surface-variant); font-size: 0.75rem; font-weight: 550;
}
.meta svg { width: 14px; height: 14px; opacity: 0.85; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(28px, 5vw, 56px) clamp(20px, 3vw, 32px); }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__bg span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5;
}
.hero__bg span:nth-child(1) {
  width: 46vw; height: 46vw; top: -22%; inset-inline-end: -8%;
  background: color-mix(in oklab, var(--h) 45%, transparent);
  max-width: 620px; max-height: 620px;
}
.hero__bg span:nth-child(2) {
  width: 36vw; height: 36vw; bottom: -28%; inset-inline-start: -6%;
  background: color-mix(in oklab, calc(var(--h) + 65) 40%, transparent);
  max-width: 480px; max-height: 480px;
}
.hero__inner { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.hero h1 { margin: 0 0 16px; }
.hero p.lede { margin: 0 0 26px; max-width: 46ch; font-size: 1.0625rem; line-height: 1.6; color: var(--on-surface-variant); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 32px; }
.stat__value { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--on-surface); }
.stat__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.045em; text-transform: uppercase; color: var(--on-surface-variant); }

/* Hero showcase: a stack of the newest app tiles */
.showcase { position: relative; min-height: 260px; }
.showcase__tile {
  position: absolute; display: grid; place-items: center;
  border-radius: 28px;
  background: var(--surface-container-low);
  box-shadow: 0 2px 6px oklch(0 0 0 / 0.10), 0 12px 34px oklch(0 0 0 / 0.14);
  border: 1px solid var(--outline-variant);
  animation: float-in var(--dur-extra) var(--ease-emphasized-decel) backwards;
}
.showcase__tile img { width: 60%; height: 60%; object-fit: contain; }
.showcase__tile--1 { width: 118px; height: 118px; top: 4%; left: 6%;  animation-delay: 60ms; }
.showcase__tile--2 { width: 148px; height: 148px; top: 32%; left: 30%; animation-delay: 140ms; }
.showcase__tile--3 { width: 104px; height: 104px; top: 6%;  left: 62%; animation-delay: 220ms; }
.showcase__tile--4 { width: 128px; height: 128px; top: 56%; left: 72%; animation-delay: 300ms; }
.showcase__tile--5 { width: 92px;  height: 92px;  top: 68%; left: 10%; animation-delay: 380ms; }
@media (max-width: 899px) { .showcase { display: none; } }

@keyframes float-in {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- section header */
.sectionhead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.sectionhead h2 { margin: 0; }
.sectionhead p { margin: 6px 0 0; color: var(--on-surface-variant); font-size: 0.9375rem; }
.sectionhead__link { margin-inline-start: auto; }

/* -------------------------------------------------------------- app page */
.apphero { padding-block: clamp(20px, 3vw, 36px) clamp(28px, 4vw, 48px); }
.apphero__grid { display: grid; gap: clamp(22px, 4vw, 40px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .apphero__grid { grid-template-columns: minmax(0, 1fr) 340px; } }
.apphero__head { display: flex; align-items: center; gap: 20px; }
.apphero h1 { margin: 0 0 6px; }
.apphero__role { display: flex; align-items: center; gap: 8px; color: var(--on-surface-variant); font-size: 0.9375rem; margin-bottom: 16px; flex-wrap: wrap; }
.apphero__tagline { font-size: 1.0625rem; line-height: 1.6; color: var(--on-surface); margin: 0 0 18px; max-width: 60ch; }

.sidebar { position: sticky; top: calc(var(--topbar-h) + 20px); display: grid; gap: 14px; }
.panel { background: var(--surface-container-low); border-radius: var(--shape-lg); padding: 20px; }
.panel--accent { background: var(--primary-container); color: var(--on-primary-container); }
.panel h3 { margin: 0 0 14px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--on-surface-variant); }
.panel--accent h3 { color: inherit; opacity: 0.75; }
.panel .btn { box-shadow: none; }

.speclist { display: grid; gap: 0; }
.speclist__row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--outline-variant); }
.speclist__row:last-child { border-bottom: 0; }
.speclist__key { color: var(--on-surface-variant); font-size: 0.8125rem; flex: none; min-width: 108px; }
.speclist__val { font-size: 0.875rem; font-weight: 550; text-align: end; margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.speclist__val a { color: inherit; }

.prose { max-width: 72ch; }
.prose p { margin: 0 0 18px; font-size: 1.0625rem; line-height: 1.7; color: var(--on-surface); }
.prose h2 { margin: 40px 0 14px; }
.prose__h { margin: 32px 0 12px; display: flex; align-items: center; gap: 10px; }
.prose__h::before {
  content: ''; width: 4px; height: 1.1em; flex: none; border-radius: 2px;
  background: var(--primary);
}
.prose > :first-child { margin-top: 0; }
.prose ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 12px; }
.prose li { position: relative; padding-inline-start: 30px; color: var(--on-surface); font-size: 1rem; line-height: 1.6; }
.prose li::before {
  content: ''; position: absolute; inset-inline-start: 4px; top: 0.55em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--primary);
}

.checklist { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.55; }
.checklist svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--primary); }

/* ------------------------------------------------------------ screenshots */
.shots { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 18px; scroll-snap-type: x mandatory; }
.shots img {
  height: clamp(280px, 46vh, 440px); width: auto; flex: none;
  border-radius: var(--shape-lg);
  background: var(--surface-container-high);
  scroll-snap-align: center;
  box-shadow: 0 0 0 1px var(--outline-variant), 0 6px 18px oklch(0 0 0 / 0.10);
}
.shotframe {
  position: relative; border-radius: var(--shape-xl); overflow: hidden;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--app-h) 18%, var(--surface-container)),
    color-mix(in oklab, calc(var(--app-h) + 55) 14%, var(--surface-container-high)));
  padding: clamp(20px, 4vw, 48px);
}

/* --------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--outline-variant); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; flex: none; height: 48px; padding-inline: 16px;
  border: 0; background: none; color: var(--on-surface-variant);
  font-size: 0.875rem; font-weight: 650; letter-spacing: 0.007em;
  transition: color var(--dur-short) var(--ease-standard);
}
.tab:hover { color: var(--on-surface); }
.tab[aria-selected='true'] { color: var(--primary); }
.tab[aria-selected='true']::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--primary);
  animation: tab-in var(--dur-medium) var(--ease-emphasized-decel);
}
@keyframes tab-in { from { transform: scaleX(0.2); opacity: 0; } to { transform: none; opacity: 1; } }

/* --------------------------------------------------------------- dialog */
dialog.sheet {
  width: min(560px, calc(100vw - 32px));
  padding: 0; border: 0; color: var(--on-surface);
  background: var(--surface-container-high);
  border-radius: var(--shape-xl);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.20), 0 24px 64px oklch(0 0 0 / 0.24);
}
dialog.sheet::backdrop { background: oklch(0 0 0 / 0.42); backdrop-filter: blur(3px); }
dialog.sheet[open] { animation: sheet-in var(--dur-medium) var(--ease-emphasized-decel); }
dialog.sheet[open]::backdrop { animation: fade-in var(--dur-medium) var(--ease-standard); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.sheet__head { display: flex; align-items: center; gap: 12px; padding: 24px 24px 0; }
.sheet__body { padding: 8px 24px 24px; max-height: min(64vh, 560px); overflow-y: auto; }
.sheet__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 16px 16px; }

.setting { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--outline-variant); }
.setting:last-of-type { border-bottom: 0; }
.setting__text { flex: 1 1 auto; min-width: 0; }
.setting__title { font-size: 0.9375rem; font-weight: 600; }
.setting__desc { font-size: 0.8125rem; color: var(--on-surface-variant); }
.setting input[type='color'] {
  width: 52px; height: 40px; padding: 0; border: 1px solid var(--outline-variant);
  border-radius: var(--shape-sm); background: none; cursor: pointer;
}
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  width: 40px; height: 40px; border-radius: var(--shape-full); border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.1); cursor: pointer; padding: 0;
  transition: transform var(--dur-short) var(--ease-emphasized);
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed='true'] { border-color: var(--on-surface); }

/* M3 segmented button (theme picker) */
.segmented { display: inline-flex; background: var(--surface-container-high); border-radius: var(--shape-full); padding: 4px; gap: 2px; }
.segmented button {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding-inline: 14px;
  border: 0; border-radius: var(--shape-full); background: none;
  color: var(--on-surface-variant); font-size: 0.8125rem; font-weight: 600;
  transition: background var(--dur-medium) var(--ease-emphasized), color var(--dur-medium);
}
.segmented button svg { width: 16px; height: 16px; }
.segmented button[aria-pressed='true'] { background: var(--primary); color: var(--on-primary); }
.segmented button:hover:not([aria-pressed='true']) { color: var(--on-surface); }

/* -------------------------------------------------------------- snackbar */
.snackbar {
  position: fixed; inset-inline: 0; bottom: 20px; z-index: 90;
  margin-inline: auto; width: min(560px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 14px 20px;
  background: var(--inverse-surface); color: var(--inverse-on-surface);
  border-radius: var(--shape-md);
  box-shadow: 0 4px 10px oklch(0 0 0 / 0.18), 0 12px 32px oklch(0 0 0 / 0.20);
  transform: translateY(150%);
  transition: transform var(--dur-medium) var(--ease-emphasized-decel);
}
.snackbar[data-show='true'] { transform: none; }
.snackbar__text { flex: 1 1 auto; font-size: 0.875rem; }
.snackbar__action {
  border: 0; background: none; color: var(--inverse-primary);
  font-size: 0.875rem; font-weight: 700; padding: 8px 12px; border-radius: var(--shape-sm);
}

/* ------------------------------------------------------------- commands */
.cmdk { position: fixed; inset: 0; z-index: 100; display: none; }
.cmdk[data-open='true'] { display: block; }
.cmdk__scrim { position: absolute; inset: 0; background: oklch(0 0 0 / 0.45); backdrop-filter: blur(4px); animation: fade-in var(--dur-short) var(--ease-standard); }
.cmdk__panel {
  position: relative; width: min(640px, calc(100vw - 24px));
  margin: clamp(48px, 12vh, 120px) auto 0;
  background: var(--surface-container-high);
  border-radius: var(--shape-xl);
  box-shadow: 0 12px 32px oklch(0 0 0 / 0.22), 0 32px 80px oklch(0 0 0 / 0.26);
  overflow: hidden;
  animation: sheet-in var(--dur-medium) var(--ease-emphasized-decel);
}
.cmdk__input {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--outline-variant);
}
.cmdk__input input { flex: 1; border: 0; background: none; outline: none; font-size: 1.0625rem; }
.cmdk__results { max-height: min(52vh, 420px); overflow-y: auto; padding: 8px; }
.cmdk__group { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--on-surface-variant); padding: 12px 12px 6px; }
.cmdk__item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: var(--shape-md);
  background: none; color: var(--on-surface); text-align: start; text-decoration: none;
  font-size: 0.9375rem;
}
.cmdk__item:hover, .cmdk__item[aria-selected='true'] { background: color-mix(in oklab, var(--on-surface) 8%, transparent); text-decoration: none; }
.cmdk__item small { display: block; color: var(--on-surface-variant); font-size: 0.75rem; }
.cmdk__empty { padding: 32px 20px; text-align: center; color: var(--on-surface-variant); }

/* ----------------------------------------------------------------- footer */
.footer { margin-top: 64px; background: var(--surface-container-low); border-top: 1px solid var(--outline-variant); }
.footer__grid { display: grid; gap: 32px; padding-block: 48px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.footer h4 { margin: 0 0 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--on-surface-variant); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { color: var(--on-surface-variant); font-size: 0.875rem; }
.footer a:hover { color: var(--on-surface); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-block: 20px; border-top: 1px solid var(--outline-variant); font-size: 0.8125rem; color: var(--on-surface-variant); }

/* ------------------------------------------------------------------ misc */
.divider { height: 1px; background: var(--outline-variant); border: 0; margin: 0; }
.empty { padding: 56px 20px; text-align: center; color: var(--on-surface-variant); }
.empty svg { width: 40px; height: 40px; margin-inline: auto; margin-bottom: 12px; opacity: 0.5; }

.fab {
  position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 70;
  width: 56px; height: 56px; border-radius: var(--shape-lg);
  display: grid; place-items: center; border: 0;
  background: var(--primary-container); color: var(--on-primary-container);
  box-shadow: 0 2px 6px oklch(0 0 0 / 0.16), 0 8px 20px oklch(0 0 0 / 0.18);
  transition: transform var(--dur-medium) var(--ease-emphasized-decel);
}
.fab:hover { transform: translateY(-3px) scale(1.03); }
.fab:active { transform: scale(0.96); }
.fab svg { width: 24px; height: 24px; }

.to-top { position: fixed; inset-inline-end: 20px; bottom: 88px; z-index: 69; opacity: 0; pointer-events: none; transition: opacity var(--dur-medium); }
.to-top[data-show='true'] { opacity: 1; pointer-events: auto; }

.notice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--shape-md);
  background: var(--surface-container); color: var(--on-surface);
  font-size: 0.875rem; line-height: 1.55;
}
.notice svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--primary); }
.notice a { font-weight: 600; }

.listrow {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: var(--shape-md);
  color: var(--on-surface); text-decoration: none;
  transition: background var(--dur-short) var(--ease-standard);
}
.listrow:hover { background: var(--surface-container); text-decoration: none; }
.listrow__text { min-width: 0; flex: 1 1 auto; }
.listrow__title { font-size: 0.9375rem; font-weight: 600; }
.listrow__sub { font-size: 0.8125rem; color: var(--on-surface-variant); }
.listrow__trail { color: var(--on-surface-variant); display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; }
.listrow__trail svg { width: 16px; height: 16px; }

@media print {
  .topbar, .footer, .fab, .to-top, .cmdk, .snackbar { display: none !important; }
  body { background: #fff; color: #000; }
}