@charset "UTF-8";
/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/***** Base *****/
* {
  box-sizing: border-box;
}

body {
  background-color: #FFFFFF;
  color: #030612;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "DM Sans", system-ui, sans-serif;
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
}

h4 {
  font-size: 16px;
}

a {
  color: #4033CF;
  text-decoration: none;
}
a:visited {
  color: #9358B0;
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

.hbs-form input,
.hbs-form textarea, .search input,
.search textarea {
  color: #000;
  font-size: 14px;
}
.hbs-form input, .search input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
}
.hbs-form input:where(:not([type=checkbox])), .search input:where(:not([type=checkbox])) {
  outline: none;
}
.hbs-form input:where(:not([type=checkbox])):focus, .search input:where(:not([type=checkbox])):focus {
  border: 1px solid #392FB4;
}
.hbs-form input[disabled], .search input[disabled] {
  background-color: #ddd;
}
.hbs-form select, .search select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #848F99;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}
.hbs-form select:focus, .search select:focus {
  border: 1px solid #392FB4;
}
.hbs-form select::-ms-expand, .search select::-ms-expand {
  display: none;
}
.hbs-form textarea, .search textarea {
  border: 1px solid #848F99;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
.hbs-form textarea:focus, .search textarea:focus {
  border: 1px solid #392FB4;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .container {
    padding: 0;
    width: 90%;
  }
}

.container-divider {
  border-top: 1px solid #ddd;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.error-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .error-page {
    padding: 0;
    width: 90%;
  }
}

.visibility-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/***** Buttons *****/
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid #392FB4;
  border-radius: 4px;
  color: #392FB4;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}
@media (min-width: 768px) {
  .button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
    width: auto;
  }
}

/* ==========================================================================
   NIBBLES BRAND & FIGMA CUSTOM STYLING OVERRIDES
   ========================================================================== */

:root {
  --nibbles-blue: #0052FF;
  --nibbles-blue-hover: #0040CC;
  --nibbles-bg-light: #FDFCF8;
  --nibbles-text-dark: #1A1C23;
  --nibbles-text-light: #6B7280;
  --border-radius-lg: 20px;
  --border-radius-md: 12px;
  --border-radius-pill: 9999px;
  --font-family-brand: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   KIBBLE TOKENS
   Copied from Kibble on staging (nibbl.es, quote/src/styles/index.css and
   quote/tailwind.config.js, 2026-10-27). Primitives, then semantic roles.
   Header, home page and footer use these. Light mode only.
   ========================================================================== */

:root {
  /* Primitives */
  --white: oklch(1 0 0);

  --whisker-50:  oklch(0.985 0.002 248.6);
  --whisker-100: oklch(0.967 0.003 264.5);
  --whisker-200: oklch(0.928 0.006 264.5);
  --whisker-300: oklch(0.87 0.01 267.3);
  --whisker-400: oklch(0.792 0.014 266.7);
  --whisker-500: oklch(0.549 0.023 270);
  --whisker-600: oklch(0.44 0.027 260);
  --whisker-700: oklch(0.371 0.03 264.1);
  --whisker-800: oklch(0.276 0.028 261.5);
  --whisker-900: oklch(0.207 0.031 269.5);
  --whisker-950: oklch(0.126 0.03 266.3);

  --cork-50:  oklch(0.961 0.018 269.1);
  --cork-100: oklch(0.927 0.035 273.2);
  --cork-200: oklch(0.865 0.067 274.6);
  --cork-300: oklch(0.779 0.113 275.1);
  --cork-600: oklch(0.506 0.244 276.3);
  --cork-700: oklch(0.453 0.226 276.1);
  --cork-800: oklch(0.415 0.199 276.6);
  --cork-900: oklch(0.355 0.144 278.1);
  --cork-950: oklch(0.254 0.093 281);

  --fizz-50:  oklch(0.973 0.013 28.6);
  --fizz-100: oklch(0.942 0.029 30.5);
  --fizz-200: oklch(0.896 0.055 32);
  --fizz-800: oklch(0.453 0.141 33.3);
  --fizz-900: oklch(0.421 0.131 33.3);

  /* Semantic roles */
  --font-display: "Fraunces", Georgia, serif;
  --font-text: "DM Sans", system-ui, sans-serif;
  --font-regular: 400;
  --font-semibold: 600;
  --font-bold: 800; /* display face only */

  --radius: 1rem;
  --radius-2xl: calc(var(--radius) * 2);
  --radius-xl: calc(var(--radius) * 1.5);
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) * 0.75);
  --radius-sm: calc(var(--radius) * 0.5);

  --background: var(--whisker-50);
  --foreground: var(--whisker-950);
  --foreground-blue: var(--cork-700);
  --card: var(--white);
  --card-foreground: var(--whisker-950);
  --popover: var(--white);
  --background-brand: var(--cork-950);
  --card-brand: var(--cork-900);
  --foreground-brand: var(--cork-50);
  --background-info: var(--cork-100);
  --background-info-bright: var(--cork-50);
  --foreground-info: var(--cork-900);
  --background-error: var(--fizz-100);
  --foreground-error: var(--fizz-900);
  --background-neutral: var(--whisker-100);
  --foreground-neutral: var(--whisker-800);
  --primary: var(--cork-800);
  --primary-foreground: var(--cork-50);
  --primary-inverted: var(--cork-50);
  --primary-inverted-foreground: var(--cork-800);
  --muted-foreground: var(--whisker-800);
  --subtle: var(--whisker-600);
  --destructive: var(--fizz-800);
  --destructive-foreground: var(--fizz-50);
  --border: var(--whisker-300);
  --input: var(--whisker-400);
  --ring: var(--cork-600);

  /* Tailwind shadow-sm and shadow-md, as Card uses them */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* Fluid type scale, 375px to 1440px viewport (text-shadcn-*) */
  --text-xs:  clamp(0.75rem, calc(0.1878vw + 0.7060rem), 0.875rem);
  --text-sm:  clamp(0.875rem, calc(0.1878vw + 0.8310rem), 1rem);
  --text-md:  clamp(1rem, calc(0.1878vw + 0.9560rem), 1.125rem);
  --text-lg:  clamp(1.125rem, calc(0.1878vw + 1.0810rem), 1.375rem);
  --text-xl:  clamp(1.375rem, calc(0.3756vw + 1.2869rem), 1.625rem);
  --text-2xl: clamp(1.625rem, calc(0.3756vw + 1.5369rem), 1.875rem);
  --text-4xl: clamp(2.25rem, calc(0.7512vw + 2.0739rem), 2.75rem);
}

/* Kibble fonts, uploaded as theme assets. Same files and ranges as the app's fontLoader. */
@font-face {
  font-family: "DM Sans";
  src: url(/hc/theming_assets/01M6GZG94MX5S23HN0TYQMYS5J) format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: "DM Sans";
  src: url(/hc/theming_assets/01M6GZG965YMY33J6ZCWWDWX7Y) format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  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: "Fraunces";
  src: url(/hc/theming_assets/01M6GZG8WD728RP9R09W3NRYT5) format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: "Fraunces";
  src: url(/hc/theming_assets/01M6GZG91R07DYVETC2DVCHPDZ) format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  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;
}

/* Shared defaults for the Kibble-styled parts of the page */
.figma-header-bar,
.nibbles-home-layout,
.nibbles-footer {
  font-family: var(--font-text);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nibbles-home-layout h1,
.nibbles-home-layout h2,
.nibbles-home-layout h3 {
  text-wrap: balance;
}

.nibbles-home-layout p,
.nibbles-home-layout li {
  text-wrap: pretty;
}

svg.lucide {
  shape-rendering: geometricPrecision;
}

/* --- HEADER --- */
/* Reference: help.shopify.com. A Cork 900 band (Kibble --card-brand, the brand
   surface; text Cork 50) with the white logo left, the title centered and the
   actions right. The light page sits in it like the panel in a Cork 900
   surround on the paid statics. The page sits under it as a sheet
   with rounded top corners, so the header seems to wrap the content. The
   corners belong to the sticky header, so they stay in place while the page
   scrolls. No border line: once the page scrolls, script.js adds
   .is-scrolled and the bar casts a soft shadow. The corners stay at every
   screen size.
   Buttons are Kibble's outline and primary-inverted Button, size sm, as on a
   brand surface. */

body {
  background-color: var(--background);
}

body > main {
  background-color: var(--background);
}

.skip-navigation {
  position: absolute;
  left: -9999px;
}

.skip-navigation:focus {
  left: 12px;
  top: 12px;
  z-index: 100001;
  background: var(--card);
  color: var(--foreground);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.figma-header-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: var(--card-brand);
  transition: filter 0.2s ease;
}

/* A drop-shadow filter, not box-shadow, so the shadow follows the curved
   corners as well as the bar. Values follow Kibble shadow-md. */
.figma-header-bar.is-scrolled {
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.06)) drop-shadow(0 2px 4px rgb(0 0 0 / 0.04));
}

/* The sheet's rounded top corners hang off the header: white outside the
   curve, see-through inside, so content scrolls under them and the corners
   never move. */
.figma-header-bar::before,
.figma-header-bar::after {
  content: "";
  position: absolute;
  top: 100%;
  width: var(--radius-md);
  height: var(--radius-md);
  pointer-events: none;
}

.figma-header-bar::before {
  left: 0;
  background: radial-gradient(
    circle at 100% 100%,
    transparent calc(var(--radius-md) - 0.5px),
    var(--card-brand) var(--radius-md)
  );
}

.figma-header-bar::after {
  right: 0;
  background: radial-gradient(
    circle at 0% 100%,
    transparent calc(var(--radius-md) - 0.5px),
    var(--card-brand) var(--radius-md)
  );
}

.figma-header-container {
  height: 52px;
  padding: 0 8px 0 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.figma-header-bar a,
.figma-header-bar a:hover,
.figma-header-bar a:focus {
  text-decoration: none;
}

/* Cork 300 ring: the usual Cork 600 does not show on Cork 900 (as in the footer) */
.figma-header-bar a:focus-visible,
.figma-header-bar button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--cork-300);
  border-radius: var(--radius-sm);
}

/* Left: logo */
.figma-logo-box {
  justify-self: start;
}

.figma-logo-box a {
  display: flex;
  align-items: center;
}

.figma-logo-img {
  display: block;
  height: 38px;
  width: auto;
}

/* Center: title */
.figma-header-title,
.figma-header-title:visited,
.figma-header-title:hover {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  line-height: 1.2;
  color: var(--foreground-brand);
  white-space: nowrap;
}

/* Right: action buttons */
.figma-header-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.figma-btn-request,
.figma-btn-request:visited,
.figma-btn-signin,
.figma-btn-signin:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  transition: background-color 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

/* Kibble Button variant="outline", on the brand surface: Cork 50 line and text */
.figma-btn-request,
.figma-btn-request:visited {
  border: 1.5px solid color-mix(in oklch, var(--foreground-brand) 45%, transparent);
  background: transparent;
  color: var(--foreground-brand);
}

.figma-btn-request:hover {
  background: color-mix(in oklch, var(--foreground-brand) 12%, transparent);
  color: var(--foreground-brand);
}

/* Kibble Button variant="primary-inverted" */
.figma-btn-signin,
.figma-btn-signin:visited {
  background: var(--primary-inverted);
  color: var(--primary-inverted-foreground);
}

.figma-btn-signin:hover {
  background: var(--cork-100);
  color: var(--primary-inverted-foreground);
}

.figma-btn-request:active,
.figma-btn-signin:active {
  transform: scale(0.98);
}

/* Profile dropdown (signed in), Kibble DropdownMenu */
.figma-profile-dropdown {
  position: relative;
  display: inline-block;
}

.figma-profile-dropdown .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0 8px 0 4px;
  cursor: pointer;
  font-family: var(--font-text);
  color: var(--foreground-brand);
}

.figma-profile-dropdown .dropdown-toggle:hover {
  background: color-mix(in oklch, var(--foreground-brand) 12%, transparent);
}

.figma-profile-dropdown .user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.figma-profile-dropdown .user-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--foreground-brand);
}

.figma-profile-dropdown .dropdown-toggle svg {
  width: 16px;
  height: 16px;
  color: var(--cork-200);
}

.figma-profile-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 4px;
  min-width: 180px;
  z-index: 100000;
}

.figma-profile-dropdown .dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
  display: block;
}

.figma-profile-dropdown .dropdown-menu a,
.figma-profile-dropdown .dropdown-menu a:visited {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--foreground);
}

.figma-profile-dropdown .dropdown-menu a:hover,
.figma-profile-dropdown .dropdown-menu a:focus {
  background-color: var(--background-neutral);
  box-shadow: none;
}

.figma-profile-dropdown .separator {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}


/* Phones: logo and actions only; the logo already leads home */
@media (max-width: 479px) {
  .figma-header-container {
    grid-template-columns: 1fr auto;
  }

  .figma-header-title {
    display: none;
  }

  .figma-logo-img {
    height: 34px;
  }

  .figma-btn-request,
  .figma-btn-signin {
    padding: 0 12px;
  }

  .figma-profile-dropdown .user-name {
    display: none;
  }
}

/* --- LAYOUT STACKING --- */

/* Force page elements to stack vertically instead of side-by-side */
body, 
main, 
body > main,
#main-content {
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- HOME PAGE --- */
/* Kibble recipes: Fraunces display for the hero title only, DM Sans for all
   other text, Input lg for search, Card for the topic and help cards. */

.nibbles-home-layout {
  width: 100%;
  display: block;
  clear: both;
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.4;
}

.nibbles-home-layout a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
}

.nibbles-container {
  max-width: 1200px;
  width: 92%;
  margin: 0 auto;
  padding: 0 0 80px;
}

/* Hero */
/* Bottom padding matches the space between home sections, so search reads as its own section */
.nibbles-hero {
  padding: 64px 16px 88px;
  text-align: center;
}

.nibbles-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}

/* Display title: font-shadcn-display text-shadcn-4xl font-shadcn-bold */
.nibbles-hero-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: normal;
  color: var(--foreground);
  margin: 0 0 40px;
}

/* Search: Kibble Input size="lg" with a leading search icon */
.nibbles-search-box {
  position: relative;
}

.nibbles-search-box .nb-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  color: var(--whisker-900);
  pointer-events: none;
  z-index: 1;
}

.nibbles-search-box .clear-button,
.nibbles-search-box [type="reset"] {
  display: none;
}

.nibbles-search-box form[role="search"] {
  display: flex;
  width: 100%;
  margin: 0;
}

.nibbles-search-box input[type="search"] {
  width: 100%;
  height: 64px;
  padding: 0 20px 0 54px;
  font-family: var(--font-text);
  font-size: var(--text-lg);
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--whisker-200);
  border-radius: var(--radius-lg);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nibbles-search-box input[type="search"]::placeholder {
  color: var(--subtle);
}

.nibbles-search-box input[type="search"]:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring);
}

.nibbles-search-box input[type="search"]::-webkit-search-cancel-button,
.nibbles-search-box input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* Below the search: built to Gabo's Figma frame (Code Canvas, node 110:879).
   Section labels 16px semibold caps; card titles 18px semibold; links and
   body 16px in --subtle. Cards are white, 24px corners, shadow-sm, no border,
   8px apart. 48px between sections, 16px from a label to its content.
   Sizes are fixed at the Figma values (text-shadcn-lg 18, md 16). */

.nibbles-home-layout {
  --nb-hairline: var(--whisker-200);
}

/* Space between home sections: almost double the original 48 (Gabo, 2026-10-28) */
.nb-home-section {
  margin-top: 88px;
}

.nb-home-section:first-child {
  margin-top: 0;
}

.nibbles-section-title {
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--foreground);
  margin: 0 0 24px;
}

/* Shared card: Kibble Card, radius-xl, shadow-sm */
.nb-topic-card,
.nb-help-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

/* Level 1 and 2: topic cards in a row, sections listed under the name */
.nb-topic-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.nb-topic-card {
  padding-bottom: 32px;
}

/* Brand spot illustration, on the card's white as the illustration style asks */
.nb-topic-card-art {
  display: block;
  width: 72px;
  height: 72px;
  margin: -8px 0 -8px -8px;
}

.nb-topic-card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.nb-topic-card-title {
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  margin: 0;
}

.nb-topic-card-title a,
.nb-topic-card-title a:visited {
  color: var(--foreground);
  text-decoration: none;
}

.nb-topic-card-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nb-topic-card-links a,
.nb-topic-card-links a:visited,
.nb-popular-list a,
.nb-popular-list a:visited {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--subtle);
  text-decoration: none;
}

.nb-topic-card-title a:hover,
.nb-topic-card-links a:hover,
.nb-popular-list a:hover {
  color: var(--foreground-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Level 3: popular questions, two columns of rows split by hairlines */
.nb-popular-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
}

.nb-popular-list li {
  border-bottom: 1px solid var(--nb-hairline);
}

.nb-popular-list li:nth-child(-n+2) {
  border-top: 1px solid var(--nb-hairline);
}

.nb-popular-list a,
.nb-popular-list a:visited {
  display: block;
  padding: 16px 0;
}

/* Still need help: two cards side by side, a button in each */
.nb-help-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.nb-help-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nb-help-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  color: var(--foreground);
  margin: 0;
}

.nb-help-title-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--destructive);
}

.nb-help-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--subtle);
}

.nb-help-block .nb-button {
  margin-top: auto;
}

/* Small screens */
@media (max-width: 1023px) {
  .nb-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .nibbles-hero { padding: 40px 16px 72px; }
  .nibbles-hero-title { margin-bottom: 28px; }
  .nibbles-search-box input[type="search"] { height: 56px; font-size: var(--text-md); padding: 0 12px 0 44px; }
  .nibbles-search-box .nb-search-icon { left: 14px; width: 20px; height: 20px; }
  .nb-home-section { margin-top: 72px; }
  .nb-home-section:first-child { margin-top: 0; }
  .nb-topic-grid { grid-template-columns: 1fr; }
  .nb-topic-card,
  .nb-help-block { padding: 20px; gap: 20px; }
  .nb-topic-card { padding-bottom: 28px; }
  .nb-popular-list { grid-template-columns: 1fr; }
  .nb-popular-list li:nth-child(2) { border-top: 0; }
  .nb-help-panel { grid-template-columns: 1fr; }
}

/* --- CATEGORY, SECTION, ARTICLE AND SEARCH PAGES --- */
/* Same design language as the home page (Gabo's Figma frame, Code Canvas
   node 110:879): white cards with radius-xl and shadow-sm, 18px semibold
   card titles, 16px links in --subtle, caps section labels, hairline rows,
   size sm buttons. Fixed sizes, not the fluid scale. Page titles are 32px
   DM Sans semibold; Fraunces stays on the home hero only. */

.nb-page {
  font-family: var(--font-text);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--background);
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.4;
  min-height: 60vh;
  padding-bottom: 80px;
  --nb-hairline: var(--whisker-200);
}

.nb-page h1,
.nb-page h2,
.nb-page h3 {
  text-wrap: balance;
}

.nb-page p,
.nb-page li {
  text-wrap: pretty;
}

.nb-page a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
  border-radius: var(--radius-sm);
}

.nb-page-inner {
  max-width: 1200px;
  width: 92%;
  margin: 0 auto;
}

/* Sub nav: breadcrumbs and a compact search, on the page background */
.nb-subnav-inner {
  max-width: 1200px;
  width: 92%;
  margin: 0 auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}

.nb-subnav-search {
  position: relative;
  flex: 0 1 360px;
}

.nb-subnav-search .nb-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--whisker-900);
  pointer-events: none;
}

.nb-subnav-search form[role="search"] {
  display: flex;
  margin: 0;
}

.nb-subnav-search input[type="search"] {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 42px;
  font-family: var(--font-text);
  font-size: 0.9375rem;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--nb-hairline);
  border-radius: var(--radius-md);
  -webkit-appearance: none;
  appearance: none;
}

.nb-subnav-search input[type="search"]::placeholder {
  color: var(--subtle);
}

.nb-subnav-search input[type="search"]:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring);
}

.nb-subnav-search .clear-button {
  display: none;
}

/* Breadcrumbs, as Zendesk's {{breadcrumbs}} renders them */
.nb-page .breadcrumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  font-size: 0.9375rem;
}

.nb-page .breadcrumbs li {
  display: inline-flex;
  align-items: center;
  color: var(--subtle);
}

.nb-page .breadcrumbs li + li::before {
  content: "/";
  margin: 0 8px;
  color: var(--whisker-400);
}

.nb-page .breadcrumbs a,
.nb-page .breadcrumbs a:visited {
  color: var(--subtle);
  text-decoration: none;
}

.nb-page .breadcrumbs a:hover {
  color: var(--foreground-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nb-page .breadcrumbs li:last-child a {
  color: var(--foreground);
}

/* Breadcrumb on phones: one link back to the page one level up ("‹ Insurance")
   instead of a trail that wraps. That page is the item before the current one,
   or the last item when the trail ends one level up (articles, a request).
   script.js marks the current item; hand-written trails mark it in the template. */
@media (max-width: 639px) {
  .nb-page .breadcrumbs li {
    display: none;
  }

  .nb-page .breadcrumbs li:has(+ li[aria-current="page"]),
  .nb-page .breadcrumbs li:has(+ li > a[aria-current="page"]),
  .nb-page .breadcrumbs:not(:has([aria-current="page"])) li:last-child {
    display: inline-flex;
  }

  .nb-page .breadcrumbs li + li::before {
    content: none;
  }

  .nb-page .breadcrumbs a,
  .nb-page .breadcrumbs a:visited {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-block: 4px;
    color: var(--foreground);
    font-weight: var(--font-semibold);
  }

  /* Lucide chevron-left */
  .nb-page .breadcrumbs a::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    margin-left: -4px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* Page header */
.nb-page-header {
  padding: 40px 0 32px;
}

.nb-page-title {
  font-family: var(--font-text);
  font-size: 2rem;
  font-weight: var(--font-semibold);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--foreground);
  margin: 0;
}

.nb-page-description {
  margin: 12px 0 0;
  max-width: 640px;
  font-size: 1rem;
  color: var(--subtle);
}

/* Kibble Button: primary and outline, size md */
.nb-button,
.nb-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: var(--font-semibold);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.nb-button:hover {
  text-decoration: none;
}

.nb-button:active {
  transform: scale(0.98);
}

.nb-button-primary,
.nb-button-primary:visited {
  border: 0;
  background: var(--primary);
  color: var(--primary-foreground);
}

.nb-button-primary:hover {
  filter: brightness(1.1);
  color: var(--primary-foreground);
}

.nb-button-outline,
.nb-button-outline:visited {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
}

.nb-button-outline:hover {
  background: var(--background-neutral);
  color: var(--foreground);
}

/* Kibble Button variant="destructive" */
.nb-button-destructive,
.nb-button-destructive:visited {
  border: 0;
  background: var(--destructive);
  color: var(--destructive-foreground);
}

.nb-button-destructive:hover {
  filter: brightness(1.1);
  color: var(--destructive-foreground);
}

/* Kibble Button size="sm" */
.nb-button-sm,
.nb-button-sm:visited {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}

/* Kibble Button variant="link" */
.nb-link,
.nb-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: var(--font-semibold);
  color: var(--foreground-blue);
  text-decoration: none;
  text-underline-offset: 4px;
}

.nb-link:hover {
  color: var(--foreground-blue);
  text-decoration: underline;
}

.nb-link svg {
  width: 16px;
  height: 16px;
}

/* Still need help: the home page's two help cards, after every list and article */
.nb-page-help {
  margin-top: 88px;
}

/* Sidebar label and links */
.nb-side-title {
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--foreground);
  margin: 0 0 12px;
}

.nb-side-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nb-side-link,
.nb-side-link:visited {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--subtle);
  text-decoration: none;
}

.nb-side-link:hover {
  background: var(--whisker-100);
  color: var(--foreground);
  text-decoration: none;
}

.nb-side-link.is-current {
  background: var(--background-info);
  color: var(--foreground-info);
  font-weight: var(--font-semibold);
}

.nb-side-link.is-nested {
  padding-left: 24px;
}

/* Pagination, as Zendesk's {{pagination}} renders it */
.nb-page .pagination {
  margin-top: 24px;
}

/* Previous on the list's left edge, Next on its right edge. Next stays right
   on the first page, where Zendesk prints no Previous */
.nb-page .pagination-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nb-page .pagination-next {
  margin-left: auto;
}

.nb-page .pagination-list a,
.nb-page .pagination-list a:visited,
.nb-page .pagination-current span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  min-width: 40px;
  padding: 0 14px;
  border: 1px solid var(--nb-hairline);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-size: 0.9375rem;
  font-weight: var(--font-semibold);
  color: var(--foreground);
  text-decoration: none;
}

.nb-page .pagination-list a:hover {
  background: var(--whisker-100);
  text-decoration: none;
}

.nb-page .pagination-current span {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

/* Zendesk prints First, Previous, Next and Last. Only Previous and Next are
   kept: First and Last read as odd next to them, and the pages are short */
.nb-page .pagination-first,
.nb-page .pagination-last {
  display: none;
}

/* --- Category page: one card per section, as the home topic cards --- */
.nb-section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Two or four sections fill two columns, so no card sits alone on a row */
@media (min-width: 1024px) {
  .nb-section-grid:has(> .nb-section-card:nth-child(2):last-child),
  .nb-section-grid:has(> .nb-section-card:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.nb-section-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 24px 32px;
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.nb-section-card-title {
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  margin: 0;
}

.nb-section-card-title a,
.nb-section-card-title a:visited {
  color: var(--foreground);
  text-decoration: none;
}

.nb-article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nb-article-link,
.nb-article-link:visited,
.nb-list-row,
.nb-list-row:visited {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--subtle);
  text-decoration: none;
}

.nb-section-card-title a:hover,
.nb-article-link:hover,
.nb-list-row:hover {
  color: var(--foreground-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.nb-section-card .nb-link {
  margin-top: 8px;
}

/* --- Section page: two columns of hairline rows, as the home popular questions --- */
.nb-list-card {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
}

.nb-list-card + .nb-list-card,
.nb-list-card + .pagination + .nb-list-card {
  margin-top: 40px;
}

.nb-list-card li {
  border-bottom: 1px solid var(--nb-hairline);
}

.nb-list-card li:nth-child(-n+2) {
  border-top: 1px solid var(--nb-hairline);
}

.nb-list-row,
.nb-list-row:visited {
  display: block;
  padding: 16px 0;
}

/* One column on phones, as the popular questions */
@media (max-width: 639px) {
  .nb-list-card { grid-template-columns: 1fr; }
  .nb-list-card li:nth-child(2) { border-top: 0; }
}

/* --- Article page: the article, and "On this page" at the right edge --- */
.nb-article-layout {
  max-width: 1200px;
  width: 92%;
  margin: 0 auto;
  padding-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 720px) 220px;
  justify-content: space-between;
  gap: 64px;
  align-items: start;
}

/* The column runs the article's full height, so the list inside can stick */
.nb-toc {
  align-self: stretch;
}

.nb-toc-inner {
  position: sticky;
  top: 96px;
}

.nb-article {
  max-width: 720px;
}

.nb-article-header {
  margin-bottom: 32px;
}

.nb-article-body [tabindex="-1"]:focus,
.nb-article-header [tabindex="-1"]:focus {
  outline: none;
}

.nb-article-meta {
  margin: 12px 0 0;
  font-size: 0.9375rem;
  color: var(--subtle);
}

/* Article body: Zendesk's article HTML on the same scale */
.nb-article-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--foreground);
  overflow-wrap: break-word;
}

.nb-article-body > :first-child {
  margin-top: 0;
}

.nb-article-body h2 {
  font-family: var(--font-text);
  font-size: 1.5rem;
  font-weight: var(--font-semibold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
  scroll-margin-top: 96px;
}

.nb-article-body h3 {
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  margin: 32px 0 8px;
  scroll-margin-top: 96px;
}

.nb-article-body h4 {
  font-size: 1rem;
  font-weight: var(--font-semibold);
  margin: 24px 0 8px;
}

.nb-article-body p {
  margin: 0 0 16px;
}

.nb-article-body ul,
.nb-article-body ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.nb-article-body ul {
  list-style: disc;
}

.nb-article-body ol {
  list-style: decimal;
}

.nb-article-body li {
  margin: 6px 0;
}

.nb-article-body a,
.nb-article-body a:visited {
  color: var(--foreground-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nb-article-body strong,
.nb-article-body b {
  font-weight: var(--font-semibold);
}

.nb-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.nb-article-body blockquote {
  margin: 0 0 16px;
  padding-left: 16px;
  border-left: 4px solid var(--nb-hairline);
  color: var(--subtle);
}

.nb-article-body table {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.nb-article-body th,
.nb-article-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--nb-hairline);
  text-align: left;
  vertical-align: top;
}

.nb-article-body th {
  font-weight: var(--font-semibold);
  background: var(--whisker-100);
}

.nb-article-body hr {
  border: 0;
  border-top: 1px solid var(--nb-hairline);
  margin: 32px 0;
}

/* Attachments */
.nb-attachments {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.nb-attachment,
.nb-attachment:visited {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  font-size: 0.9375rem;
  color: var(--foreground);
  text-decoration: none;
}

.nb-attachment-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--foreground-info);
}

.nb-attachment-name {
  flex: 1;
  font-weight: var(--font-semibold);
}

.nb-attachment-size {
  color: var(--subtle);
}

/* Article footer: votes, then the help cards */
.nb-article-footer {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--nb-hairline);
}

.nb-votes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.nb-votes-question {
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: var(--font-semibold);
  margin: 0;
}

.nb-votes-controls {
  display: flex;
  gap: 8px;
}

/* Vote buttons: Kibble Button outline, size sm */
.nb-votes .nb-vote {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}

.nb-votes .nb-vote.is-selected,
.nb-votes .nb-vote[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.nb-article-footer .nb-page-help {
  margin-top: 88px;
}

/* Related articles, as Zendesk's {{related_articles}} renders them */
.nb-article-relatives {
  margin-top: 48px;
}

.nb-article-relatives .related-articles-title {
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.nb-article-relatives ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nb-article-relatives li {
  border-bottom: 1px solid var(--nb-hairline);
}

.nb-article-relatives li:first-child {
  border-top: 1px solid var(--nb-hairline);
}

.nb-article-relatives li a,
.nb-article-relatives li a:visited {
  display: block;
  padding: 16px 0;
  font-size: 1rem;
  color: var(--subtle);
  text-decoration: none;
}

.nb-article-relatives li a:hover {
  color: var(--foreground-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nb-toc-top {
  margin-top: 8px;
  padding-left: 12px;
  font-size: 0.9375rem;
}

.nb-toc-top[hidden] {
  display: none;
}

/* --- Search results --- */
.nb-search-header-inner {
  max-width: 1200px;
  width: 92%;
  margin: 0 auto;
  padding: 24px 0 0;
}

/* The query box, heading, results and the no-results card share one 800px
   column, left aligned with the breadcrumbs */
.nb-search-header .nibbles-search-box {
  max-width: 800px;
  margin-top: 32px;
}

.nb-results-layout {
  max-width: 800px;
  padding-top: 40px;
}

.nb-results-heading {
  font-family: var(--font-text);
  font-size: 1.5rem;
  font-weight: var(--font-semibold);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

/* Results as hairline rows, as the section page and the home popular questions */
.nb-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nb-results-list > li {
  border-bottom: 1px solid var(--nb-hairline);
}

.nb-results-list > li:first-child {
  border-top: 1px solid var(--nb-hairline);
}

.nb-result-card,
.nb-result-card:visited {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 0;
  color: var(--foreground);
  text-decoration: none;
}

.nb-result-card:hover {
  color: var(--foreground);
  text-decoration: none;
}

.nb-result-card:hover .nb-result-title {
  color: var(--foreground-blue);
}

.nb-result-path {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--subtle);
}

.nb-result-path li + li::before {
  content: "/";
  margin: 0 6px;
  color: var(--whisker-400);
}

/* Every result starts with "Nibbles Help Center"; the path shows from the category */
.nb-result-path li:first-child {
  display: none;
}

.nb-result-path li:nth-child(2)::before {
  content: none;
}

.nb-result-title {
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  margin: 0;
  transition: color 0.15s ease;
}

.nb-result-text {
  margin: 0;
  font-size: 1rem;
  color: var(--subtle);
}

.nb-result-text em {
  font-style: normal;
  font-weight: var(--font-semibold);
  color: var(--foreground);
}

/* Empty states: one centered card */
.nb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px;
  text-align: center;
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.nb-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 24px;
  border-radius: var(--radius-sm);
  background: var(--background-info);
  color: var(--foreground-info);
}

.nb-empty-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
}

.nb-empty-title {
  font-family: var(--font-text);
  font-size: 1.5rem;
  font-weight: var(--font-semibold);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.nb-empty-text {
  max-width: 46ch;
  margin: 0 0 24px;
  font-size: 1rem;
  color: var(--subtle);
}

.nb-empty-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- Responsive --- */
@media (max-width: 1023px) {
  /* The article alone; "On this page" goes */
  .nb-article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-toc {
    display: none;
  }

  .nb-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .nb-subnav-search {
    flex: 1 1 100%;
  }

  .nb-page-header {
    padding: 32px 0 24px;
  }

  .nb-page-title {
    font-size: 1.75rem;
  }

  .nb-section-grid {
    grid-template-columns: 1fr;
  }

  .nb-section-card {
    padding: 20px 20px 28px;
  }

  .nb-page-help {
    margin-top: 72px;
  }

  .nb-article-layout {
    padding-top: 24px;
  }

  .nb-results-layout {
    padding-top: 24px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .nb-button,
  .nb-result-title { transition: none; }
  .nb-button:active { transform: none; }
}

/* --- ACCOUNT AND SYSTEM PAGES --- */
/* My requests, one request, comments, following, profile and the error page,
   in the home page language: white cards with radius-xl and shadow-sm, 18px
   semibold titles, 16px text, --subtle for secondary text, hairline rows. */

/* Error pages: an inner page header, then the way forward, in the same 800px
   column as search results */
.nb-error-layout {
  padding-top: 24px;
  padding-bottom: 64px;
}

.nb-error-layout #main-content {
  max-width: 800px;
}

.nb-error-popular {
  margin-top: 88px;
}

/* Avatars and badges */
.nb-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--whisker-100);
}

.nb-avatar--lg {
  width: 64px;
  height: 64px;
}

/* Kibble Badge */
.nb-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: var(--font-semibold);
  line-height: 1;
  white-space: nowrap;
}

.nb-badge--info,
.nb-status--new,
.nb-status--open {
  background: var(--background-info);
  color: var(--foreground-info);
}

/* Waiting on the member: the strongest of the three */
.nb-status--pending,
.nb-status--hold {
  background: var(--background-brand);
  color: var(--foreground-brand);
}

.nb-badge--neutral,
.nb-status--solved,
.nb-status--closed {
  background: var(--background-neutral);
  color: var(--foreground-neutral);
}

/* Filter chips */
.nb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

/* No filters, or only one, means nothing to choose: hide the row */
.nb-chips:empty,
.nb-chips:has(> .nb-chip:only-child) {
  display: none;
}

.nb-chip,
.nb-chip:visited {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--nb-hairline);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.9375rem;
  color: var(--subtle);
  text-decoration: none;
}

.nb-chip:hover {
  color: var(--foreground);
  text-decoration: none;
}

.nb-chip.is-current {
  border-color: transparent;
  background: var(--background-info);
  color: var(--foreground-info);
  font-weight: var(--font-semibold);
}

/* Activity lists: one card of hairline rows */
.nb-activity-list {
  list-style: none;
  margin: 0;
  padding: 0 24px;
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.nb-activity {
  padding: 20px 0;
}

.nb-activity + .nb-activity {
  border-top: 1px solid var(--nb-hairline);
}

.nb-activity--action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nb-activity-main {
  min-width: 0;
}

.nb-activity-label {
  margin: 0 0 4px;
  font-size: 0.875rem;
  color: var(--subtle);
}

.nb-activity-title,
.nb-activity-title:visited {
  font-size: 1.125rem;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  color: var(--foreground);
  text-decoration: none;
}

.nb-activity-title:hover {
  color: var(--foreground-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.nb-activity-excerpt {
  margin: 6px 0 0;
  font-size: 1rem;
  color: var(--subtle);
}

.nb-activity-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--subtle);
}

/* Zendesk's {{subscribe}} button, as Kibble Button outline size sm */
.nb-activity-action {
  flex: none;
}

.nb-activity-action button,
.nb-activity-action [role="button"] {
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: var(--font-semibold);
  color: var(--foreground);
  cursor: pointer;
}

.nb-empty--compact {
  padding: 24px;
}

.nb-empty--compact .nb-empty-text {
  margin: 0;
}

/* --- One request: conversation and details --- */
.nb-request-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
  font-size: 0.9375rem;
  color: var(--subtle);
}

.nb-thread-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

.nb-comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nb-comment {
  padding: 24px;
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.nb-comment-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.nb-comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.nb-comment-name {
  font-size: 1rem;
  font-weight: var(--font-semibold);
  color: var(--foreground);
}

.nb-comment-date {
  flex-basis: 100%;
  font-size: 0.875rem;
  color: var(--subtle);
}

.nb-comment .nb-attachments {
  margin-top: 16px;
}

.nb-comment .nb-attachment {
  box-shadow: none;
  border: 1px solid var(--nb-hairline);
}

/* Solved requests: helper text under the reply field, 8px below it */
.nb-reply-hint {
  flex-basis: 100%;
  margin: -8px 0 0;
  font-size: 0.9375rem;
  color: var(--subtle);
}

/* Zendesk's callout once a request is closed ("This request is closed for
   comments. You can create a follow-up."). It takes the reply card's place,
   in the same card, since it is the way forward. Empty on open and solved
   requests, apart from whitespace, so :empty alone never matches */
.nb-request-callout {
  margin-top: 16px;
  padding: 24px;
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  font-size: 1rem;
  color: var(--foreground);
}

.nb-request-callout:empty,
.nb-request-callout:not(:has(*)) {
  display: none;
}

.nb-request-callout p {
  margin: 0;
}

.nb-request-callout a,
.nb-request-callout a:visited {
  font-weight: var(--font-semibold);
  color: var(--foreground-blue);
  text-decoration: none;
  text-underline-offset: 4px;
}

.nb-request-callout a:hover {
  text-decoration: underline;
}

/* Reply card. Visibility follows Copenhagen: the fields and the submit
   button show once "Add to conversation" is pressed, or after a failed send */
.nb-reply-card {
  margin-top: 16px;
  padding: 24px;
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.nb-reply-card .comment-show-container.hidden,
.nb-reply-card .comment-fields,
.nb-reply-card .request-submit-comment,
.nb-reply-card .comment-form-controls input[type="checkbox"] {
  display: none;
}

.nb-reply-card .comment-fields.shown {
  display: block;
}

/* Closed: the prompt and Mark as solved share one row. Open: the fields take
   the full width and the buttons drop to a row of their own, on the right */
.nb-reply-card .comment-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 8px;
}

.nb-reply-card .comment-fields {
  flex-basis: 100%;
}

.nb-reply-prompt {
  flex: 1 1 240px;
  height: 40px;
  padding: 0 16px;
  font-family: var(--font-text);
  font-size: 1rem;
  text-align: left;
  color: var(--subtle);
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  cursor: text;
}

.nb-reply-prompt:hover {
  border-color: var(--whisker-500);
}

.nb-reply-prompt:focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring);
}

.nb-reply-card .request-submit-comment.shown {
  display: inline-block;
}

/* script.js sets display: block on the controls, so they align with text-align */
.nb-reply-card .comment-form-controls {
  margin-left: auto;
  text-align: right;
}

.nb-reply-card .comment-form-controls > * + * {
  margin-left: 8px;
}

/* On a solved request the row is empty until the reply opens (no Mark as
   solved; script.js shows Submit with an inline style), so it would only add
   a row gap under "Replying reopens this request." */
.nb-reply-card .comment-form-controls:not(:has(.mark-as-solved, .request-submit-comment.shown, .request-submit-comment[style*="inline-block"])) {
  display: none;
}

.nb-reply-card textarea,
.nb-reply-card input[type="text"],
.nb-reply-card input[type="email"] {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
}

.nb-reply-card textarea {
  min-height: 160px;
  resize: vertical;
}

.nb-reply-card textarea:focus,
.nb-reply-card input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring);
}

.nb-reply-card .comment-ccs {
  margin-bottom: 12px;
}

.nb-reply-card .comment-attachments {
  margin-top: 12px;
  font-size: 0.9375rem;
}

/* Zendesk's {{upload}} drop zone, as the Contact us attachments field */
.nb-reply-card .upload-dropzone {
  position: relative;
  padding: 16px;
  text-align: center;
  font-weight: var(--font-semibold);
  color: var(--foreground-blue);
  background: var(--card);
  border: 1.5px dashed var(--input);
  border-radius: var(--radius-lg);
}

.nb-reply-card .upload-dropzone:hover {
  background: var(--background-info-bright);
  border-color: var(--cork-300);
}

/* Details card */
.nb-request-details {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.nb-detail-list {
  margin: 0;
}

.nb-detail {
  padding: 12px 0;
}

.nb-detail-list .nb-detail:first-child {
  padding-top: 0;
}

.nb-detail + .nb-detail {
  border-top: 1px solid var(--nb-hairline);
}

.nb-detail dt,
.nb-detail-label {
  display: block;
  margin: 0 0 4px;
  font-size: 0.875rem;
  font-weight: var(--font-regular);
  color: var(--subtle);
}

.nb-detail dd {
  margin: 0;
  font-size: 1rem;
  color: var(--foreground);
  overflow-wrap: anywhere;
}

.nb-detail-people {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nb-request-files .nb-attachments {
  margin-top: 0;
}

/* --- Profile --- */
.nb-profile-card {
  margin-top: 40px;
  margin-bottom: 64px;
  padding: 32px;
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.nb-profile-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.nb-profile-name-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.nb-profile-card .nb-page-description {
  margin-top: 16px;
}



/* --- My requests: Zendesk's request-list module (Garden components) --- */
/* Only the table shows. The module's own tabs ("My requests", "Requests I am CC'd
   on") and its toolbar (count, search, Filter) are hidden; the screen reader count
   stays. Selectors follow the module's structure in Copenhagen's source
   (RequestsList: tabs, status, toolbar, table as children of the container). If
   the real markup differs they match nothing and the controls stay visible. */
.nb-requests-card #main-content > div:has([role="tablist"]),
.nb-requests-card #main-content > div:has(input[type="search"]) {
  display: none;
}

.nb-requests-card [data-garden-id="tables.table"] {
  width: 100%;
  font-family: var(--font-text);
}

.nb-requests-card [data-garden-id="tables.header_cell"] {
  padding: 12px;
  border-bottom: 1px solid var(--nb-hairline);
  font-size: 0.875rem;
  font-weight: var(--font-semibold);
  color: var(--subtle);
  text-align: left;
}

.nb-requests-card [data-garden-id="tables.row"] {
  border-bottom: 1px solid var(--nb-hairline);
}

/* The card's edge closes the list, so the last row has no line under it */
.nb-requests-card [data-garden-id="tables.body"] [data-garden-id="tables.row"]:last-child {
  border-bottom: 0;
}

.nb-requests-card [data-garden-id="tables.body"] [data-garden-id="tables.row"]:hover {
  background: var(--whisker-50);
}

.nb-requests-card [data-garden-id="tables.cell"] {
  padding: 16px 12px;
  font-size: 1rem;
  color: var(--foreground);
  vertical-align: middle;
}

.nb-requests-card [data-garden-id="tables.cell"] a,
.nb-requests-card [data-garden-id="tables.cell"] a:visited {
  font-weight: var(--font-semibold);
  color: var(--foreground);
  text-decoration: none;
}

/* The whole row opens the request: the subject link's hit area is stretched over
   the row, so it stays one link for keyboards and screen readers */
.nb-requests-card [data-garden-id="tables.body"] [data-garden-id="tables.row"] {
  position: relative;
  cursor: pointer;
}

.nb-requests-card [data-garden-id="tables.body"] [data-garden-id="tables.cell"] a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.nb-requests-card [data-garden-id="tables.cell"] a:hover {
  text-decoration: none;
}

.nb-requests-card [data-garden-id="tables.body"] [data-garden-id="tables.row"]:hover a {
  color: var(--foreground-blue);
}

.nb-requests-card [data-garden-id="tables.cell"] a:focus-visible {
  outline: none;
  box-shadow: none;
}

.nb-requests-card [data-garden-id="tables.body"] [data-garden-id="tables.row"]:has(a:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

/* The pill keeps its label on one line; the column widens to fit it */
.nb-requests-card [data-garden-id="tags.tag_view"] {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.nb-requests-card [data-garden-id="forms.input"],
.nb-requests-card [data-garden-id="forms.faux_input"],
.nb-requests-card [data-garden-id="dropdowns.combobox"],
.nb-requests-card [data-garden-id="dropdowns.combobox.trigger"] {
  min-height: 44px;
  font-family: var(--font-text);
  font-size: 1rem;
  border-color: var(--input);
  border-radius: var(--radius-md);
}

.nb-requests-card [data-garden-id="forms.input_label"],
.nb-requests-card [data-garden-id="dropdowns.combobox.label"] {
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: var(--font-semibold);
  color: var(--foreground);
}

/* --- Responsive --- */
@media (max-width: 1023px) {
  .nb-thread-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Status is in the page header, so the conversation comes first */
  .nb-request-details {
    position: static;
  }
}

@media (max-width: 639px) {
  .nb-error-popular {
    margin-top: 72px;
  }

  .nb-activity-list {
    padding: 0 20px;
  }

  .nb-activity--action {
    flex-direction: column;
    align-items: flex-start;
  }

  .nb-comment,
  .nb-reply-card,
  .nb-request-callout,
  .nb-request-details {
    padding: 20px;
  }

  .nb-profile-card {
    margin-top: 24px;
    padding: 24px 20px;
  }

  /* Edit profile drops below, so the name keeps its line */
  .nb-profile-actions {
    flex-basis: 100%;
  }
}

/* My requests on phones: each request is its own card, subject, then status,
   then last activity. 768 is the module's own phone breakpoint, where it also
   switches to the subject, last activity and status columns. Cells are found
   by the module's data-test-id ("table-cell-<column>"), not by position. */
@media (max-width: 768px) {
  .nb-request-card.nb-requests-card {
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .nb-requests-card [data-garden-id="tables.table"],
  .nb-requests-card [data-garden-id="tables.body"] {
    display: block;
  }

  /* Column titles, sorting and the column picker have no place in a card */
  .nb-requests-card [data-garden-id="tables.head"] {
    display: none;
  }

  .nb-requests-card [data-garden-id="tables.body"] [data-garden-id="tables.row"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    padding: 20px;
    background: var(--card);
    border: 0;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
  }

  .nb-requests-card [data-garden-id="tables.body"] [data-garden-id="tables.row"]:hover {
    background: var(--card);
  }

  .nb-requests-card [data-garden-id="tables.body"] [data-garden-id="tables.cell"] {
    display: block;
    padding: 0;
  }

  .nb-requests-card [data-test-id="table-cell-subject"] {
    order: 1;
    font-size: 1.125rem;
  }

  .nb-requests-card [data-test-id="table-cell-status"] {
    order: 2;
  }

  .nb-requests-card [data-test-id="table-cell-updated_at"] {
    order: 3;
    font-size: 0.875rem;
    color: var(--subtle);
  }

  .nb-requests-card [data-test-id="table-cell-updated_at"]::before {
    content: "Updated ";
  }

  /* ID, created date and the module's empty end cell stay off the card */
  .nb-requests-card [data-garden-id="tables.body"] [data-test-id="table-cell-id"],
  .nb-requests-card [data-garden-id="tables.body"] [data-test-id="table-cell-created_at"],
  .nb-requests-card [data-garden-id="tables.body"] [data-garden-id="tables.cell"]:empty {
    display: none;
  }
}

/* --- CONTACT US (new request) PAGE --- */
/* The form is drawn by Zendesk's new-request-form module with Garden
   components. These rules restyle it to Kibble through Garden's stable
   data-garden-id attributes, scoped under #new-request-form so they outrank
   Garden's own class rules without !important. The description editor is
   CKEditor, restyled through its CSS variables. */

.nb-page .breadcrumbs li[aria-current="page"] {
  color: var(--foreground);
}

.nb-request-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

/* Kibble Card size="lg" around the form */
.nb-request-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}

.nb-request-aside {
  position: sticky;
  top: 76px;
  display: grid;
  gap: 16px;
}

/* Side cards: the home page card, title 18px semibold, text and links 16px */
.nb-request-tip,
.nb-request-faster {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.nb-request-tip-title {
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  color: var(--foreground);
  margin: 0;
}

/* What to have ready: an info note at the top of the form, set apart from the
   links in the side column */
.nb-request-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 24px;
  padding: 12px 16px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--foreground-info);
  background: var(--background-info);
  border-radius: var(--radius-md);
}

.nb-request-note svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.nb-request-tip-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--subtle);
}

.nb-request-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nb-request-link,
.nb-request-link:visited {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--subtle);
  text-decoration: none;
}

.nb-request-link:hover {
  color: var(--foreground-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Form */
#new-request-form {
  font-family: var(--font-text);
  color: var(--foreground);
}

#new-request-form form {
  gap: 24px;
}

#new-request-form [data-garden-id="typography.paragraph"] {
  margin: 0 0 24px;
  font-size: 0.9375rem;
  color: var(--subtle);
}

#new-request-form [data-garden-id="forms.input_label"] {
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  color: var(--foreground);
}

/* Optional fields are marked, not required ones. The module's asterisks and its
   "Fields marked with an asterisk (*) are required." line are hidden; a label
   without the module's required marker gets "(optional)". Required inputs keep
   their required attribute, so screen readers still announce them. */
#new-request-form p[aria-hidden="true"][data-garden-id="typography.paragraph"],
#new-request-form [data-garden-id="forms.input_label"] > [aria-hidden="true"][data-garden-id="typography.font"] {
  display: none;
}

#new-request-form [data-garden-id="forms.input_label"]:not(:has(> [aria-hidden="true"][data-garden-id="typography.font"]))::after {
  content: " (optional)";
  font-weight: var(--font-regular);
  color: var(--subtle);
}

#new-request-form [data-garden-id="forms.input_hint"] {
  margin-top: 2px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--subtle);
}

/* Kibble Input size="md" */
#new-request-form [data-garden-id="forms.input"],
#new-request-form [data-garden-id="forms.textarea"],
#new-request-form [data-garden-id="forms.select"],
#new-request-form [data-garden-id="dropdowns.combobox"],
#new-request-form [data-garden-id="dropdowns.faux_input"] {
  min-height: 48px;
  padding: 0 16px;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--foreground);
  background-color: var(--card);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  box-shadow: none;
}

#new-request-form [data-garden-id="forms.textarea"] {
  padding: 12px 16px;
}

#new-request-form [data-garden-id="forms.input"]:hover,
#new-request-form [data-garden-id="forms.textarea"]:hover {
  border-color: var(--input);
}

#new-request-form [data-garden-id="forms.input"]:focus,
#new-request-form [data-garden-id="forms.input"]:focus-visible,
#new-request-form [data-garden-id="forms.textarea"]:focus-visible,
#new-request-form [data-garden-id="dropdowns.combobox"]:focus-within {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring);
}

#new-request-form [aria-invalid="true"] {
  border-color: var(--destructive);
}

/* Errors: Zendesk's own after a failed send (a message under the field, and an
   alert at the top for the whole form), and the theme's instant check from
   script.js (.nb-field-error), in the same place and color */
#new-request-form [data-garden-id="forms.input_message"],
#new-request-form .nb-field-error {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--foreground-error);
}

#new-request-form [data-garden-id="notifications.alert"] {
  padding: 12px 16px;
  font-family: var(--font-text);
  font-size: 0.9375rem;
  color: var(--foreground-error);
  background: var(--background-error);
  border: 0;
  border-radius: var(--radius-md);
}

#new-request-form [aria-invalid="true"]:focus-visible {
  border-color: var(--destructive);
  box-shadow: 0 0 0 1px var(--destructive);
}

/* Attachments drop zone */
#new-request-form [data-garden-id="forms.file_upload"] {
  padding: 24px;
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: var(--font-semibold);
  color: var(--foreground-blue);
  background: var(--card);
  border: 1.5px dashed var(--input);
  border-radius: var(--radius-lg);
}

#new-request-form [data-garden-id="forms.file_upload"]:hover {
  color: var(--foreground-blue);
  background: var(--background-info-bright);
  border-color: var(--cork-300);
}

#new-request-form [data-garden-id="forms.file_upload"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
}

/* Submit: Kibble Button variant="primary" size="md" */
#new-request-form [data-garden-id="buttons.button"] {
  height: 48px;
  padding: 0 24px;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: var(--font-semibold);
  line-height: 1;
  color: var(--primary-foreground);
  background-color: var(--primary);
  border: 0;
  border-radius: var(--radius-md);
  transition: filter 0.2s ease, transform 0.2s ease;
}

#new-request-form [data-garden-id="buttons.button"]:hover {
  background-color: var(--primary);
  filter: brightness(1.1);
}

#new-request-form [data-garden-id="buttons.button"]:active {
  transform: scale(0.98);
}

#new-request-form [data-garden-id="buttons.button"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ring);
}

#new-request-form [data-garden-id="buttons.button"]:disabled {
  color: var(--whisker-500);
  background-color: var(--whisker-200);
  filter: none;
}

/* Description editor (CKEditor) */
#new-request-form .ck.ck-editor {
  --ck-font-face: var(--font-text);
  --ck-border-radius: var(--radius-md);
  --ck-color-base-border: var(--input);
  --ck-color-base-background: var(--card);
  --ck-color-base-foreground: var(--background-neutral);
  --ck-color-toolbar-background: var(--background-neutral);
  --ck-color-toolbar-border: var(--input);
  --ck-color-button-default-hover-background: var(--whisker-200);
  --ck-color-button-on-background: var(--background-info);
  --ck-color-button-on-color: var(--foreground-info);
  --ck-color-focus-border: var(--ring);
  --ck-focus-ring: 1px solid var(--ring);
  --ck-focus-outer-shadow: 0 0 0 1px var(--ring);
  --ck-inner-shadow: none;
  --ck-color-text: var(--foreground);
  font-family: var(--font-text);
}

#new-request-form .ck.ck-editor__editable {
  min-height: 160px;
  padding: 4px 16px;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--foreground);
}

/* Phones: the form first; "Find a faster answer" supports it, below. What to
   have ready is already the note at the top of the form */
@media (max-width: 899px) {
  .nb-request-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .nb-request-aside {
    position: static;
  }
}

@media (max-width: 639px) {
  .nb-request-card {
    padding: 20px;
  }

  #new-request-form [data-garden-id="buttons.button"] {
    width: 100%;
  }
}

/* --- FOOTER & LEGAL FINE PRINT --- */
/* Dark surface, as the v2 footer on the Hugo landing pages: the footer
   remaps the role tokens to Kibble's dark palette (the same values as the
   .dark scope in Kibble's tokens.css), so every rule below keeps using role
   tokens. Ground whisker-900, headings whisker-50, links whisker-200, legal
   copy whisker-400, dividers whisker-500. */

.nibbles-footer {
  --background: var(--whisker-900);
  --foreground: var(--whisker-50);
  --muted-foreground: var(--whisker-200);
  --subtle: var(--whisker-400);
  --border: var(--whisker-500);
  --ring: var(--cork-300);
  background-color: var(--background);
  padding: 48px 0 32px;
  color: var(--muted-foreground);
}

.nibbles-footer-container {
  max-width: 1200px;
  width: 92%;
  margin: 0 auto;
}

.nibbles-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

.nibbles-footer-brand .footer-title {
  display: block;
  margin-bottom: 4px;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--foreground);
}

.nibbles-footer-brand .footer-tagline {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

.nibbles-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.nibbles-footer-links a,
.nibbles-footer-links a:visited {
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.15s ease;
}

.nibbles-footer-links a:hover {
  color: var(--foreground);
  text-decoration: none;
}

.nibbles-footer-links a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
  border-radius: var(--radius-sm);
}

/* Legal fine print: caption recipe, text-shadcn-xs */
.nibbles-legal-disclaimers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--subtle);
}

.nibbles-legal-disclaimers p {
  margin: 0;
}

/* Two columns from 1024 wide: full width lines ran about 190 characters.
   Footnotes never split across the columns */
@media (min-width: 1024px) {
  .nibbles-legal-disclaimers {
    display: block;
    column-count: 2;
    column-gap: 48px;
  }

  .nibbles-legal-disclaimers p {
    break-inside: avoid;
    margin-bottom: 12px;
  }
}

.nibbles-legal-disclaimers sup {
  font-weight: var(--font-semibold);
  color: var(--muted-foreground);
}

.nibbles-footer-bottom {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--subtle);
}

.nibbles-footer-bottom p {
  margin: 0;
}