/*
 * Nutiliti brand for requests.nutiliti.com.
 * Paste into Fider: Site Settings → Advanced → Custom CSS.
 * Values are measured from the marketing site (p* purple, s* teal, n* neutral are its :root tokens).
 * Every selector starts `html body` so it outranks Fider's own rules, which go as far as
 * `#p-home .x` and per-breakpoint overrides, wherever this <style> lands in the page.
 * Colours go through Fider's --colors-* tokens so dark mode inherits Fider's dark palette.
 */

/* ---------- Tokens ---------- */

html body[data-theme="light"] {
  --primary-color: #5a52d9; /* p600 */
  --primary-color-dark: #4c43bf; /* p700 */
  --primary-color-light: #e2e8fd; /* p100 */
  --colors-blue-100: #eff3fe;
  --colors-blue-200: #e2e8fd;
  --colors-blue-300: #abb8f6;
  --colors-blue-400: #7d7fe9;
  --colors-blue-500: #5a52d9;
  --colors-blue-600: #4c43bf;
  --colors-blue-700: #4c43bf;
  --colors-green-500: #1cbd8f;
  --colors-green-600: #0e8d6c;
  --colors-black: #2a2a2a;
  --colors-white: #fff;
  --colors-gray-50: #f8f8f8;
  --colors-gray-100: #f8f8f8;
  --colors-gray-200: #f1f1f1;
  --colors-gray-300: #d4d4d4;
  --colors-gray-400: #d4d4d4;
  --colors-gray-500: #9c9c9c;
  --colors-gray-600: #9c9c9c;
  --colors-gray-700: #636363; /* body copy */
  --colors-gray-800: #2a2a2a;
  --colors-gray-900: #211f47; /* p950: every heading */
  --nu-badge-bg: #eff3fe;
  --nu-badge-border: #e2e8fd;
  --nu-badge-fg: #4c43bf;
  --nu-field-border: #d4d4d4;
  --nu-shadow-sm: 0 1px 1px #0000000d;
  --nu-shadow-md: 0 2px 2px #0000000f, 0 4px 3px #00000012;
  --nu-shadow-lg: 0 4px 3px #0000001a, 0 10px 8px #0000000a;
}

/* Fider's dark blue scale is INVERTED (50 darkest, 900 lightest) and hints, vote buttons and
   links read it directly. Keep that lightness order when remapping to purple, or their text
   goes dark-on-dark. */
html body[data-theme="dark"] {
  --primary-color: #7d7fe9; /* p500 holds contrast on dark */
  --primary-color-dark: #abb8f6;
  --primary-color-light: #2b2860;
  --colors-blue-50: #1e1b45;
  --colors-blue-100: #1e1b45;
  --colors-blue-200: #16143a;
  --colors-blue-300: #2b2860;
  --colors-blue-400: #3a3480;
  --colors-blue-500: #4c43bf;
  --colors-blue-600: #7d7fe9;
  --colors-blue-700: #9a9cf0;
  --colors-blue-800: #c9d2fa;
  --colors-blue-900: #eff3fe;
  --nu-badge-bg: rgba(125, 127, 233, 0.14);
  --nu-badge-border: rgba(125, 127, 233, 0.28);
  --nu-badge-fg: #abb8f6;
  --nu-field-border: var(--colors-gray-300);
  --nu-shadow-sm: none;
  --nu-shadow-md: none;
  --nu-shadow-lg: none;
}

html body {
  /* App UI runs one step below the marketing site (16px body, not 17) but keeps its ratios. */
  --nu-fs-display: clamp(36px, 1.4vw + 22px, 46px);
  --nu-fs-h1: clamp(28px, 0.9vw + 19px, 34px);
  --nu-fs-h2: 22px;
  --nu-fs-title: 20px;
  --nu-fs-lead: 17px;
  --nu-fs-body: 16px;
  --nu-fs-nav: 15px;
  --nu-fs-sm: 14px;
  --nu-fs-label: 13px;
  --nu-fs-chip: 12px;
  /* em-based so tracking scales with size, as on the marketing site */
  --nu-track-display: -0.04em;
  --nu-track-title: -0.03em;
}

/* ---------- Base ---------- */

/* Fider self-hosts Inter 4.1 variable as "InterVariable" but renders with the static cuts; the
   variable face gives the marketing site's exact 600/700 and optical sizing for headlines. */
html body,
html body button,
html body input,
html body textarea,
html body select {
  font-family: "InterVariable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  font-optical-sizing: auto;
}
html body {
  font-size: var(--nu-fs-body);
  line-height: 1.55;
  color: var(--colors-gray-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html body[data-theme="light"] {
  background-color: #fff;
  background-image: radial-gradient(60% 420px at 18% 0, #eff3fe 0, transparent 72%),
    radial-gradient(50% 380px at 88% 0, #edfcf6 0, transparent 72%);
  background-repeat: no-repeat;
}
html body[data-theme="light"] .page,
html body[data-theme="light"] #p-home {
  background-color: transparent;
}

/* ---------- Header ---------- */

/* backdrop-filter below makes the header a stacking context, which traps its absolutely
   positioned dropdowns under later page content (search box, idea box). Lift the whole header
   above the page; Fider's modals sit at z-index 100, so they still cover it. */
html body #c-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--colors-gray-200);
}
html body[data-theme="light"] #c-header {
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
html body #c-header .c-header__brand img {
  height: 30px;
  width: auto;
}
/* The logo is the wordmark, so the title slot shows a product label. Keep the site title
   "Nutiliti": it is also the browser-tab title and the name in emails. */
/* font-size: 0 leaves the h1 with a zero-size baseline, so the label rode high; a flex h1 with
   the nav links' exact line box (15px / 1.55) puts both baselines in the same place. */
html body #c-header .c-header__brand .text-header {
  display: flex;
  align-items: center;
  font-size: 0;
  line-height: normal;
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid var(--colors-gray-300);
}
html body #c-header .c-header__brand .text-header::after {
  content: "Feature Requests";
  display: block;
  line-height: 1.55;
  font-size: var(--nu-fs-nav);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--colors-gray-900);
}
html body #c-header .c-header__nav-link {
  font-size: var(--nu-fs-nav);
  font-weight: 500;
  color: var(--colors-gray-700);
}
html body #c-header .c-header__nav-link:hover {
  color: var(--colors-gray-900);
}
html body #c-header .c-header__nav-link--active {
  font-weight: 600;
  color: var(--colors-primary-dark);
}
/* Header CTA matches the marketing "Try the Demo" button */
html body #c-header .c-header__actions .c-button--primary {
  font-size: var(--nu-fs-nav);
  padding: 10px 18px;
  border: 0;
  background: linear-gradient(115deg, #7d7fe9, #1cbd8f);
}

/* ---------- Home hero ---------- */

/* Pill badge above the headline, as on the marketing hero */
html body #p-home .p-home__welcome-title::before {
  content: "Product Feedback";
  display: table;
  margin-bottom: 18px;
  padding: 7px 14px;
  border-radius: 9999px;
  border: 1px solid var(--nu-badge-border);
  background: var(--nu-badge-bg);
  color: var(--nu-badge-fg);
  font-size: var(--nu-fs-label);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html body #p-home .p-home__welcome-title {
  font-size: var(--nu-fs-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--nu-track-display);
  color: var(--colors-gray-900);
  text-wrap: balance;
}
html body #p-home .p-home__welcome-body,
html body #p-home .p-home__welcome-body p {
  font-size: var(--nu-fs-lead);
  line-height: 1.55;
  color: var(--colors-gray-700);
}
html body #p-home .p-home__welcome-body p + p {
  margin-top: 12px;
}
html body .c-powered a {
  color: var(--colors-gray-500);
}

/* The invitation box reads as the marketing hero's email input */
html body #p-home .p-home__add-idea-btn {
  border-radius: 8px;
  border: 1.5px solid var(--nu-field-border);
  box-shadow: var(--nu-shadow-sm);
  padding: 18px 20px;
  font-size: var(--nu-fs-body);
  font-weight: 500;
  color: var(--colors-gray-700);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html body #p-home .p-home__add-idea-btn:hover {
  border-color: var(--colors-primary-base);
  box-shadow: 0 0 0 3px var(--primary-color-light);
}
html body #p-home .p-home__add-idea-icon {
  color: var(--colors-primary-base);
}

/* Admin hints ("create at least 3 suggestions…"): badge colours, so both themes stay legible */
html body .c-hint {
  border-radius: 8px;
  border-inline-start: 3px solid var(--colors-primary-base);
  background-color: var(--nu-badge-bg);
  color: var(--colors-gray-800);
  font-size: 15px;
  line-height: 1.55;
}
html body .c-hint strong {
  color: var(--colors-gray-900);
}
html body .c-hint__close {
  color: var(--colors-gray-600);
}

/* ---------- Post list ---------- */

html body .c-posts-container__post {
  border-radius: 8px;
  padding: 22px 26px;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
html body[data-theme="light"] .c-posts-container__post {
  border: 1px solid var(--colors-gray-200);
  box-shadow: var(--nu-shadow-sm);
}
html body[data-theme="light"] .c-posts-container__post-link:hover .c-posts-container__post {
  border-color: var(--colors-blue-200);
  box-shadow: var(--nu-shadow-md);
  transform: translateY(-1px);
}
html body .c-posts-container__post-title {
  font-size: var(--nu-fs-title);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--nu-track-title);
}
html body .c-posts-container__postdescription {
  font-size: var(--nu-fs-body);
  line-height: 1.55;
  color: var(--colors-gray-700);
}
html body .c-posts-container__post-votes,
html body .c-posts-container__post-comments {
  font-size: var(--nu-fs-sm);
  font-weight: 600;
  color: var(--colors-gray-600);
}
html body .c-post-filter-btn,
html body .c-post-sort-btn {
  font-size: var(--nu-fs-sm);
  font-weight: 600;
}

/* Tags: the marketing utility chips (shape only; each tag keeps the colour set in admin) */
html body .c-tag {
  border-radius: 9999px;
  font-size: var(--nu-fs-chip);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Votes: 8px corners like every other surface; voted uses the badge colours */
html body .c-vote-counter__button,
html body .c-vote-counter__button--large {
  border-radius: 8px;
}
html body .c-vote-counter__count {
  font-weight: 700;
  letter-spacing: -0.02em;
}
html body .c-vote-counter__button--voted {
  color: var(--nu-badge-fg);
  background-color: var(--nu-badge-bg);
  border-color: var(--nu-badge-border);
}

/* ---------- Post page ---------- */

html body .p-show-post__title {
  font-size: var(--nu-fs-h1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--nu-track-title);
  color: var(--colors-gray-900);
  text-wrap: balance;
}
html body .p-show-post__description,
html body .p-show-post__description p {
  font-size: var(--nu-fs-lead);
  line-height: 1.6;
  color: var(--colors-gray-700);
}
html body .p-show-post__discussion-header,
html body .p-show-post__discussion-count {
  font-size: var(--nu-fs-h2);
  font-weight: 700;
  letter-spacing: var(--nu-track-title);
  color: var(--colors-gray-900);
}
html body .p-show-post__post-card,
html body .c-comment__card,
html body .c-comment-input-card,
html body .c-response-details__card {
  border-radius: 8px;
}
html body .c-markdown {
  line-height: 1.6;
}
html body .c-markdown h1,
html body .c-markdown h2,
html body .c-markdown h3 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--nu-track-title);
  color: var(--colors-gray-900);
}

/* ---------- Controls ---------- */

html body .c-button {
  border-radius: 8px;
  font-weight: 700;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.15s ease;
}
html body .c-button--primary {
  background-color: var(--colors-primary-base);
  border-color: var(--colors-primary-base);
}
html body .c-button--primary:hover {
  background-color: var(--colors-primary-dark);
  border-color: var(--colors-primary-dark);
  transform: translateY(-1px);
}
/* Secondary = the marketing "Learn More" ghost button */
html body .c-button--secondary {
  background-color: var(--nu-badge-bg);
  border-color: var(--nu-badge-bg);
  color: var(--nu-badge-fg);
}
html body .c-button--secondary:hover {
  transform: translateY(-1px);
}

html body .c-input,
html body .c-select,
html body .c-markdown-textarea,
html body .c-tags-select__container {
  border-radius: 8px;
  border-width: 1.5px;
  border-color: var(--nu-field-border);
  font-size: var(--nu-fs-body);
}
html body .c-input:focus,
html body .c-select:focus,
html body .c-markdown-textarea:focus {
  border-color: var(--colors-primary-base);
  box-shadow: 0 0 0 3px var(--primary-color-light);
  outline: none;
}

html body .c-dropdown__list {
  border-radius: 8px;
  box-shadow: var(--nu-shadow-lg);
}

/* Notifications panel (bell). "No new notifications" is a 32px/800 .text-display, and the empty
   state carries a 120px illustration svg; section labels ("Unread", "Previous") are .text-subtitle. */
html body .c-notifications-container .text-display {
  font-size: var(--nu-fs-title);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--nu-track-title);
  color: var(--colors-gray-900);
}
html body .c-notifications-container .text-center > svg {
  display: none;
}
html body .c-notifications-container .text-subtitle {
  font-size: var(--nu-fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colors-gray-700);
}

/* ---------- Modals (sign-in, new post) ---------- */

html body .c-modal-window {
  border-radius: 12px;
}
html body .c-modal-window .c-modal-header {
  font-size: var(--nu-fs-h2);
  font-weight: 700;
  letter-spacing: var(--nu-track-title);
  color: var(--colors-gray-900);
}

/* Sign-in: Nutiliti login is the only way in, so it is the primary button */
html body .c-signin-social-button {
  justify-content: center;
  padding: 14px 20px;
  border: 0;
  border-radius: 8px;
  background-color: var(--colors-primary-base);
  color: #fff;
  font-size: var(--nu-fs-body);
  font-weight: 700;
  transition: transform 0.18s ease, background-color 0.15s ease;
}
html body .c-signin-social-button:hover {
  background-color: var(--colors-primary-dark);
  color: #fff;
  transform: translateY(-1px);
}
html body .c-signin-social-button span {
  color: #fff; /* Fider colours the label span itself, gray */
}
html body .c-signin-social-button img {
  display: none;
}
/* With email sign-in disabled, "OR" has nothing after it. Remove this rule if email sign-in is
   ever re-enabled; the admin-bypass note below it stays. */
html body .c-signin-control .c-divider {
  display: none;
}
html body .c-signin-control .text-muted {
  font-size: var(--nu-fs-label);
  color: var(--colors-gray-500);
}