@charset "UTF-8";
/* ============================================================
   AgilePoint Help Center — Light Theme (v3.0)
   Aligned to the HelpDesk_Light Figma reference design.
   All colors come from manifest.json {{settings.*}} tokens.
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* ---- Core surfaces (driven by manifest.json settings) ---- */
  --bg: #FFFFFF;
  /* #FFFFFF  page */
  --bg-2: #F8F9FA;
  /* #F8F9FA  alternating band */
  --surface: #F8F9FA;
  /* #F8F9FA  card resting on --bg */
  --surface-2: #FFFFFF;
  /* card resting on --bg-2, and hover/elevated state */

  /* ---- Lines ---- */
  --border: #E6E6E6;
  --border-strong: #CACED5;

  /* ---- Text (Gray scale) ---- */
  --text: #3B4455;
  /* #3B4455  Gray 1 */
  --text-muted: #667287;
  /* #667287  Gray 2 */
  --text-heading: #000000;
  /* Page + section headings are near-black in the design; card and item
     titles stay at --text (#3B4455). */
  --text-faint: #676E7B;
  /* Gray 3 — tertiary text. Gray_VPAT (#8B93A7) is too light for
     body copy on #F8F9FA (2.9:1) and is not what the design uses. */

  /* ---- Brand accent (AgilePoint Blue) ---- */
  --accent: #0077D9;
  /* #0077D9 */
  --accent-ink: #FFFFFF;
  /* #FFFFFF  text on accent */
  --accent-hover: #3392E1;
  --accent-pressed: #026DC4;
  --accent-disabled: #80BBEC;
  --accent-tint: #E6F1FB;
  --accent-soft: rgba(0, 119, 217, 0.12);

  /* ---- Status ---- */
  --success: #17803D;
  --success-hover: #459964;
  --success-disabled: #8BBF9E;
  --success-soft: #E5F2EA;
  --danger: #B6383E;
  --danger-hover: #C56065;
  --danger-disabled: #DA9B9E;
  --danger-soft: #FCE8EB;
  --warning: #B15C0B;
  --warning-hover: #C17D3C;
  --warning-disabled: #D8AD85;
  --warning-soft: #FFF5E0;

  /* ---- Hero ---- */
  --hero-bg: #E8F1FB;
  --hero-dot: #CADAEC;

  /* ---- Elevation (light-mode weights) ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.30);

  /* ---- Button colours (from the Figma Buttons board).
     Geometry is intentionally unchanged from the existing theme. ---- */
  --btn-sec-line: #667287;
  --btn-sec-hover: #E0E3E7;
  --btn-sec-pressed: #CACED5;
  --btn-off: #CACED5;
  /* Form fields rest on --border-strong (#CACED5); hover darkens one step
     so the change is actually visible, focus goes to --accent. */
  --field-line-hover: #8B93A7;

  /* ---- Geometry ---- */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --maxw: 1180px;

  /* ---- Type ---- */
  --mono: "Roboto Mono", "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  background: var(--bg);
  color: var(--text-muted);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* body>main {
  padding-bottom: 120px;
} */

/* Constrain bare text/elements injected directly into main by Zendesk (e.g., error messages) */
main>p,
main>h1,
main>h2,
main>h3,
main>div:not([class]) {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 24px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

h1,
h2 {
  color: var(--text-heading);
}

h1 {
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.05;
}

h2 {
  font-size: clamp(22px, 3.4vw, 38px);
  line-height: 1.1;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 15px;
}

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

a:hover,
a:active,
a:focus {
  color: var(--accent);
  text-decoration: none;
}

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

input,
textarea,
select {
  color: var(--text);
  font-size: 14px;
  font-family: var(--sans);
}

input {
  font-weight: 400;
  max-width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border 0.15s ease-in-out;
}

input:focus {
  border-color: var(--accent);
}

input[disabled] {
  background-color: var(--surface-2);
  opacity: 0.5;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--surface) url("/hc/theming_assets/01M1MASA8JYFG499SHW6SE1ZBN") no-repeat right 10px center;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: var(--text-muted);
  width: 100%;
}

select:focus {
  border-color: var(--accent);
}

select::-ms-expand {
  display: none;
}

textarea {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
  background: var(--surface);
  color: var(--text);
}

textarea:focus {
  border-color: var(--accent);
}

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

/* ---------- Container ---------- */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 1200px) {
  .container {
    padding: 0;
    width: 90%;
  }
}

.ap-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.container-divider {
  border-top: 1px solid var(--border);
  margin-bottom: 0;
}

.error-page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 24px;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.error-page h1 {
  margin-bottom: 24px;
}

/* Align community footer to the left to match the rest of the layout */
.community-footer {
  text-align: left;
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Fix missing social icons on share buttons */
.share a {
  font-size: 0 !important;
}

.share a::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.share-facebook::before {
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%202h-3a5%205%200%200%200-5%205v3H7v4h3v8h4v-8h3l1-4h-4V7a1%201%200%200%201%201-1h3z%22%2F%3E%3C%2Fsvg%3E');
  mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%202h-3a5%205%200%200%200-5%205v3H7v4h3v8h4v-8h3l1-4h-4V7a1%201%200%200%201%201-1h3z%22%2F%3E%3C%2Fsvg%3E');
}

.share-twitter::before {
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M18.901%201.153h3.68l-8.04%209.19L24%2022.846h-7.406l-5.8-7.584-6.638%207.584H.474l8.6-9.83L0%201.154h7.594l5.243%206.932ZM17.61%2020.644h2.039L6.486%203.24H4.298Z%22%2F%3E%3C%2Fsvg%3E');
  mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M18.901%201.153h3.68l-8.04%209.19L24%2022.846h-7.406l-5.8-7.584-6.638%207.584H.474l8.6-9.83L0%201.154h7.594l5.243%206.932ZM17.61%2020.644h2.039L6.486%203.24H4.298Z%22%2F%3E%3C%2Fsvg%3E');
}

.share-linkedin::before {
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%208a6%206%200%200%201%206%206v7h-4v-7a2%202%200%200%200-2-2%202%202%200%200%200-2%202v7h-4v-7a6%206%200%200%201%206-6z%22%3E%3C%2Fpath%3E%3Crect%20x%3D%222%22%20y%3D%229%22%20width%3D%224%22%20height%3D%2212%22%3E%3C%2Frect%3E%3Ccircle%20cx%3D%224%22%20cy%3D%224%22%20r%3D%222%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');
  mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%208a6%206%200%200%201%206%206v7h-4v-7a2%202%200%200%200-2-2%202%202%200%200%200-2%202v7h-4v-7a6%206%200%200%201%206-6z%22%3E%3C%2Fpath%3E%3Crect%20x%3D%222%22%20y%3D%229%22%20width%3D%224%22%20height%3D%2212%22%3E%3C%2Frect%3E%3Ccircle%20cx%3D%224%22%20cy%3D%224%22%20r%3D%222%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');
}

/* ---------- Eyebrow / Section Labels ---------- */
.ap-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}

.ap-eyebrow b {
  color: var(--accent);
  font-weight: 600;
}

/* ============================================================
   BUTTONS
   Geometry is unchanged from the previous theme. Only the colours
   follow the Figma Buttons board:

     Primary    default #0077D9   hover #3392E1   pressed #026DC4   disabled #80BBEC   (text #FFF)
     Secondary  default #FFF + #667287 border, text #667287
                hover   #E0E3E7   pressed #CACED5   disabled #FFF + #CACED5
   ============================================================ */
.ap-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--btn-sec-line);
  color: var(--btn-sec-line);
  transition: all 0.15s;
  cursor: pointer;
  background: var(--surface-2);
  text-decoration: none;
}

.ap-btn:hover,
.ap-btn:focus {
  background: var(--btn-sec-hover);
  border-color: var(--btn-sec-hover);
  color: var(--btn-sec-line);
  text-decoration: none;
}

.ap-btn:active {
  background: var(--btn-sec-pressed);
  border-color: var(--btn-sec-pressed);
  color: var(--btn-sec-line);
}

.ap-btn[disabled],
.ap-btn[data-disabled] {
  background: var(--surface-2);
  border-color: var(--btn-off);
  color: var(--btn-off);
  cursor: default;
}

/* Ghost keeps its transparent ground but picks up the secondary line/text */
.ap-btn--ghost {
  background: transparent;
}

.ap-btn--primary,
.ap-btn--white {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.ap-btn--primary:hover,
.ap-btn--primary:focus,
.ap-btn--white:hover,
.ap-btn--white:focus {
  background: var(--accent-hover);
  color: var(--accent-ink);
  border-color: var(--accent-hover);
  text-decoration: none;
  filter: none;
}

.ap-btn--primary:active,
.ap-btn--white:active {
  background: var(--accent-pressed);
  color: var(--accent-ink);
  border-color: var(--accent-pressed);
}

.ap-btn--primary[disabled],
.ap-btn--primary[data-disabled],
.ap-btn--white[disabled],
.ap-btn--white[data-disabled] {
  background: var(--accent-disabled);
  color: var(--accent-ink);
  border-color: var(--accent-disabled);
  cursor: default;
}

/* Legacy button compat */
.button,
[role="button"] {
  border: 1px solid var(--btn-sec-line);
  border-radius: 999px;
  color: var(--btn-sec-line);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  min-height: 38px;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  background: var(--surface-2);
}

@media (min-width: 768px) {

  .button,
  [role="button"] {
    width: auto;
  }
}

.button:hover,
.button:focus,
[role="button"]:hover,
[role="button"]:focus {
  background-color: var(--btn-sec-hover);
  border-color: var(--btn-sec-hover);
  color: var(--btn-sec-line);
  text-decoration: none;
}

.button:active,
.button[aria-selected="true"],
[role="button"]:active,
[role="button"][aria-selected="true"] {
  background-color: var(--btn-sec-pressed);
  border-color: var(--btn-sec-pressed);
  color: var(--btn-sec-line);
  text-decoration: none;
}

.button[aria-selected="true"]:hover,
[role="button"][aria-selected="true"]:hover {
  background-color: var(--btn-sec-pressed);
  border-color: var(--btn-sec-pressed);
}

.button[data-disabled],
[role="button"][data-disabled],
.button[disabled],
[role="button"][disabled] {
  background-color: var(--surface-2);
  border-color: var(--btn-off);
  color: var(--btn-off);
  cursor: default;
  opacity: 1;
}

.button-large,
input[type="submit"] {
  background-color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.5px;
  min-width: 200px;
  padding: 10px 24px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

@media (min-width: 768px) {

  .button-large,
  input[type="submit"] {
    width: auto;
  }
}

.button-large:hover,
.button-large:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
  text-decoration: none;
}

.button-large:active,
input[type="submit"]:active {
  background-color: var(--accent-pressed);
  border-color: var(--accent-pressed);
  color: var(--accent-ink);
}

.button-large[disabled],
input[type="submit"][disabled] {
  background-color: var(--accent-disabled);
  border-color: var(--accent-disabled);
  color: var(--accent-ink);
  cursor: default;
}

.button-secondary,
.button-large.button-secondary {
  color: var(--btn-sec-line);
  border: 1px solid var(--btn-sec-line);
  background-color: var(--surface-2);
}

.button-secondary:hover,
.button-secondary:focus,
.button-large.button-secondary:hover,
.button-large.button-secondary:focus {
  color: var(--btn-sec-line);
  border-color: var(--btn-sec-hover);
  background-color: var(--btn-sec-hover);
}

.button-secondary:active,
.button-large.button-secondary:active {
  color: var(--btn-sec-line);
  border-color: var(--btn-sec-pressed);
  background-color: var(--btn-sec-pressed);
}

.button-secondary[disabled],
.button-large.button-secondary[disabled] {
  color: var(--btn-off);
  border-color: var(--btn-off);
  background-color: var(--surface-2);
}

/* ============================================================
   TABLES
   ============================================================ */
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}

.table th,
.table th a {
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--mono);
}

[dir="rtl"] .table th,
[dir="rtl"] .table th a {
  text-align: right;
}

.table tr {
  border-bottom: 1px solid var(--border);
  display: block;
  padding: 16px 0;
}

@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}

.table td {
  display: block;
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}

@media (min-width: 768px) {

  .table td,
  .table th {
    padding: 14px 20px;
    height: auto;
  }
}

@media (min-width: 1024px) {

  .table td,
  .table th {
    padding: 16px 24px;
  }
}

/* ============================================================
   FORMS
   ============================================================ */
.form {
  max-width: 680px;
}

.form-field~.form-field {
  margin-top: 25px;
}

.form-field label {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-weight: 500;
}

.form-field input {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 14px;
  width: 100%;
  background: var(--surface);
  color: var(--text);
}

.form-field input:focus {
  border-color: var(--accent);
}

.form-field input[type="text"] {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
}

.form-field input[type="text"]:focus {
  border-color: var(--accent);
}

.form-field input[type="checkbox"] {
  width: auto;
}

.form-field .nesty-input {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--surface);
  color: var(--text);
  position: relative;
}

.form-field .nesty-input::after {
  content: "\25BE" !important;
  color: var(--text-faint);
}

.form-field .nesty-input:focus {
  border-color: var(--accent);
  text-decoration: none;
}

/* Zendesk Nesty Dropdown Panels */
.nesty-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-md) !important;
}

.nesty-panel ul {
  background-color: var(--surface);
}

.nesty-panel li {
  color: var(--text) !important;
  padding: 10px 16px !important;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 0 !important;
}

.nesty-panel li:hover,
.nesty-panel li:focus,
.nesty-panel li.is-active,
.nesty-panel li.is-selected {
  background: var(--border) !important;
  color: var(--text) !important;
}

.form-field textarea {
  vertical-align: middle;
}

.form-field input[type="checkbox"]+label {
  margin: 0 0 0 10px;
}

.form-field.required>label::after {
  content: "*";
  color: var(--danger);
  margin-left: 2px;
}

.form-field p {
  color: var(--text-faint);
  font-size: 12px;
  margin: 5px 0;
}

/* Fix for CC and Multi-select tagger fields having white background by default */
.form-field .tagger,
.form-field .multiselect-choices,
.form-field ul[data-hc-pills-container],
ul[data-hc-pills-container],
.hc-multiselect>.hc-multiselect-toggle {
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

.form-field ul[data-hc-pills-container]:focus,
.form-field ul[data-hc-pills-container]:has(input:focus),
.hc-multiselect>.hc-multiselect-toggle:focus,
.hc-multiselect>.hc-multiselect-toggle:has(:hover),
.hc-multiselect>.hc-multiselect-toggle:has(:focus){
  border: 1px solid var(--accent) !important;
}

.form-field .tagger input,
.form-field .multiselect-choices input,
.form-field ul[data-hc-pills-container] input,
ul[data-hc-pills-container],
.hc-multiselect-toggle {
  background-color: transparent !important;
  color: var(--text) !important;
  border: none !important;
  box-shadow: none !important;
}

.hc-multiselect-toggle::after {
  content: "\25BE" !important;
  color: var(--text-faint);
}

.hc-multiselect-menu {
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  overflow: auto;
}

/* Uploaded file items styling */
.upload-item {
  background-color: var(--surface-2) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  padding: 8px 12px;
  margin-top: 8px;
}

.upload-item .upload-link {
  color: var(--text) !important;
}

.upload-item .upload-link:hover {
  color: var(--accent) !important;
}

.upload-item .upload-remove {
  color: var(--text-muted) !important;
}

.upload-item .upload-remove:hover {
  color: var(--text) !important;
}

.upload-item .upload-progress {
  background-color: var(--accent) !important;
}

.hc-multiselect-menu ul[role="listbox"] {
  list-style: none;
  margin: 0;
  padding: 4px;
}

.hc-multiselect-menu li {
  border-radius: 6px;
  margin: 0;
  transition: background-color 0.12s, color 0.12s;
}

.hc-multiselect-menu li label {
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
}

.hc-multiselect-menu li label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  margin: 0;
  flex: none;
  cursor: pointer;
}

/* Hover / keyboard focus: primary fill, white text */
.hc-multiselect-menu li:hover,
.hc-multiselect-menu li:focus,
.hc-multiselect-menu li:focus-within,
.hc-multiselect-menu li[aria-checked="true"]:hover {
  background-color: var(--accent);
  outline: none;
}

.hc-multiselect-menu li:hover label,
.hc-multiselect-menu li:focus label,
.hc-multiselect-menu li:focus-within label {
  color: var(--accent-ink);
}

.hc-multiselect-menu li:hover label input[type="checkbox"],
.hc-multiselect-menu li:focus label input[type="checkbox"],
.hc-multiselect-menu li:focus-within label input[type="checkbox"] {
  accent-color: var(--accent-ink);
}

/* Already-selected rows read as selected without a hover */
.hc-multiselect-menu li[aria-checked="true"] {
  background-color: var(--accent-tint);
}

.hc-multiselect-menu li[aria-checked="true"] label {
  color: var(--text);
  font-weight: 500;
}


/* Style the actual selected pills/tags in the multiselect.
   NOTE: ul[role="listbox"] li[role="option"] also matches the options inside
   Zendesk's nesty dropdown panels, which are not pills. The nesty rules at the
   end of this file re-assert themselves with higher specificity. */
ul[role="listbox"] li[role="option"],
ul[data-hc-pills-container] li,
.form-field .tagger li,
.form-field .multiselect-choices li {
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 4px !important;
}

ul[role="listbox"] li[role="option"] span[aria-label="close"],
ul[data-hc-pills-container] li span[aria-label="close"] {
  color: var(--text-muted) !important;
  cursor: pointer;
}

ul[role="listbox"] li[role="option"] span[aria-label="close"]:hover,
ul[data-hc-pills-container] li span[aria-label="close"]:hover {
  color: var(--text) !important;
}

/* Close icon in multiselect*/
ul[data-hc-pills-container] li[data-hc-pill=true]>span[aria-label=close]::before,
.hc-multiselect-toggle li span[aria-label]::before{
  content: "\00D7";
  color: var(--text);
}

/* Custom submit button styling for forms to match primary button */
.form footer input[type="submit"] {
  background-color: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  filter: none;
}

.form footer input[type="submit"]:hover,
.form footer input[type="submit"]:focus,
.form footer input[type="submit"]:active {
  background-color: var(--accent-hover);
  color: var(--accent-ink);
  border-color: var(--accent-hover);
  filter: none;
}

/* File upload dropzone styling */
.upload-dropzone {
  border: 2px dashed var(--border-strong) !important;
  border-radius: var(--radius) !important;
  padding: 40px !important;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-loading="true"] input,
[data-loading="true"] textarea {
  background: transparent url("/hc/theming_assets/01J858QRXQRCXXWVNX9FK9XW72") 99% 50% no-repeat;
  background-size: 16px 16px;
}

.form footer {
  margin-top: 40px;
  padding-top: 30px;
}

.form footer a {
  color: var(--text-muted);
  cursor: pointer;
  margin-right: 15px;
}

.form footer .upload-notice a {
  margin-right: 0;
}

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}

.form .suggestion-list label {
  border-bottom: 1px solid var(--border);
  display: block;
  padding-bottom: 5px;
}

.form .suggestion-list li {
  padding: 10px 0;
}

.form .suggestion-list li a:visited {
  color: var(--accent-pressed);
}

/* ============================================================
   NAVIGATION (Header)
   ============================================================ */
.ap-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.ap-nav__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 80px;
  flex-wrap: nowrap;
  position: relative;
}

.ap-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  font-weight: 600;
  color: var(--text);
  font-size: 18px;
  white-space: nowrap;
  flex: none;
  text-decoration: none;
}

.ap-brand:hover {
  text-decoration: none;
  color: var(--text);
}

.ap-brand__logo {
  height: 30px;
  width: auto;
  display: block;
  flex: none;
}

.ap-brand__tag {
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  border-left: 1px solid var(--border-strong);
  padding-left: 13px;
  white-space: nowrap;
}

.ap-nav-links {
  display: flex;
  gap: 26px;
  margin-left: 8px;
  flex: none;
}

.ap-nav-links a,
.ap-nav-link {
  font-size: 15px;
  color: var(--text-muted);
  transition: color 0.15s;
  white-space: nowrap;
  text-decoration: none;
}

.ap-nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 28px;
}

.ap-nav-links a:hover,
.ap-nav-link:hover {
  color: var(--text);
  text-decoration: none;
}

.ap-nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  white-space: nowrap;
}

/* Custom Avatar / Initials */
.custom-avatar-wrapper {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-initials {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
}

.ap-nav-ghost {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
}

.ap-nav-ghost:hover {
  color: var(--text);
  text-decoration: none;
}

.ap-nav-toggle {
  display: none;
  cursor: pointer;
  color: var(--text);
  font-size: 24px;
}

/* user_info styling */
.ap-nav .user-info {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ap-nav .user-info .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--text-muted);
}

.ap-nav .user-info .dropdown-toggle:hover {
  color: var(--text);
}

.ap-nav .user-info a,
.ap-nav .user-info .dropdown-menu-user-name {
  color: var(--text-muted);
  font-size: 14px;
  text-decoration: none;
}

.ap-nav .user-info a:hover {
  color: var(--text);
}

.ap-nav .user-info .my-activities a {
  color: var(--text-muted);
}

/* Mobile nav */
@media (max-width: 880px) {
  .ap-nav-links {
    display: none;
  }

  .ap-nav-ghost {
    display: none;
  }

  .ap-nav-toggle {
    display: block;
  }
}

/* ============================================================
   HERO
   ============================================================ */
.ap-hero {
  position: relative;
  padding: 84px 0 72px;
  overflow: hidden;
  background-color: var(--hero-bg);
}

.ap-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 2px dots on a 40px grid, per the Figma hero texture */
  background-image: radial-gradient(circle, var(--hero-dot) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: 0 21px;
}

.ap-hero__inner {
  position: relative;
  text-align: center;
}

.ap-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--text-muted);
  margin-bottom: 26px;
}

.ap-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.ap-hero__title {
  max-width: 760px;
  margin: 0 auto 16px;
}

.ap-hero__sub {
  max-width: 560px;
  margin: 0 auto 34px;
  font-size: 17px;
}

/* Search */
.ap-search {
  max-width: 680px;
  margin: 0 auto;
}

.ap-search .search,
.ap-search .search-form,
.ap-search form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 8px 8px 18px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ap-search form:focus-within {
  border-color: var(--accent);
}

.ap-search input[type="search"],
.ap-search input[type="text"] {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-size: 16px;
  font-family: var(--sans);
  padding: 10px 0;
}

.ap-search input::placeholder {
  color: var(--text-faint);
}

.ap-search button[type="submit"],
.ap-search input[type="submit"] {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  font-weight: 600;
  border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
  min-width: auto;
}

.ap-search svg {
  flex: none;
  color: var(--text-faint);
}

.ap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin-top: 20px;
}

.ap-chip {
  font-size: 13px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all 0.15s;
  text-decoration: none;
}

.ap-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.ap-block {
  padding: 72px 0;
  border-top: 1px solid var(--border);
}

.ap-block--alt {
  background: var(--bg-2);
}

.ap-sec-head {
  max-width: 680px;
  margin-bottom: 42px;
}

.ap-sec-head p {
  margin: 14px 0 0;
  font-size: 16px;
}

/* ============================================================
   CATEGORY CARD GRID
   ============================================================ */
.ap-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}

.ap-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: all 0.18s;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-muted);
}

.ap-card:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  transform: translateY(-3px);
  text-decoration: none;
  color: var(--text-muted);
}

.ap-card__ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: 18px;
  flex: none;
  /* The exported icon PNGs already carry their own tinted, rounded tile
     (blue at 10% alpha, green/purple opaque), so the wrapper must stay
     transparent or the tile would be drawn twice. */
  background: transparent;
}

.ap-card__ico img,
.ap-card__ico svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Tile sits above the title in the community tiles too */
.ap-topic .ap-card__ico {
  margin-bottom: 16px;
}

.ap-card__title {
  margin-bottom: 7px;
}

.ap-card__desc {
  margin: 0 0 16px;
  font-size: 14.5px;
}



.ap-card__arrow {
  position: absolute;
  top: 24px;
  right: 22px;
  color: var(--text-faint);
  font-size: 18px;
  transition: all 0.18s;
}

.ap-card:hover .ap-card__arrow {
  color: var(--accent);
  transform: translate(2px, -2px);
}

/* ============================================================
   SUPPORT / TICKET SPLIT
   ============================================================ */
.ap-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  align-items: stretch;
}

.ap-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 32px;
}

.ap-panel--feature {
  background: linear-gradient(180deg, rgba(0, 119, 217, 0.06), transparent 60%), var(--surface);
  border-color: var(--border-strong);
  display: flex;
  flex-direction: column;
}

.ap-panel h2 {
  font-size: 26px;
  margin-bottom: 12px;
}

.ap-panel p {
  font-size: 15.5px;
  margin: 0 0 24px;
}

.ap-panel--feature .ap-btn {
  align-self: flex-start;
}

.ap-status {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  font-size: 14px;
}

.ap-status b {
  color: var(--text);
}

.ap-status a {
  color: var(--accent);
}

.ap-status__live {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(23, 128, 61, 0.16);
  animation: ap-pulse 2s ease-in-out infinite;
}

@keyframes ap-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(23, 128, 61, 0.16);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(23, 128, 61, 0.06);
  }
}

.ap-contact-list {
  display: flex;
  flex-direction: column;
}

.ap-contact-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.15s;
}

.ap-contact-row:first-child {
  border-top: 0;
}

.ap-contact-row:hover {
  text-decoration: none;
}

.ap-contact-row__ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--accent);
  border: 1px solid var(--border);
}

.ap-contact-row__title {
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
}

.ap-contact-row__sub {
  font-size: 13.5px;
  color: var(--text-muted);
}

.ap-contact-row__go {
  margin-left: auto;
  color: var(--text-faint);
  transition: color 0.15s;
}

.ap-contact-row:hover .ap-contact-row__go {
  color: var(--accent);
}

/* ============================================================
   COMMUNITY TOPICS
   ============================================================ */
.ap-topic {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  transition: 0.18s;
  text-decoration: none;
  color: var(--text-muted);
  display: block;
}

.ap-topic:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  text-decoration: none;
  color: var(--text-muted);
}

.ap-topic h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

.ap-topic p {
  font-size: 13.5px;
  margin: 0 0 14px;
}



/* ============================================================
   RECENT ACTIVITY
   ============================================================ */
.activity {
  margin-top: 0;
}

.activity .recent-activity-header {
  color: var(--text-heading);
  font-weight: 600;
  margin-bottom: 24px;
  font-size: 24px;
}

.activity .recent-activity-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.activity .recent-activity-item {
  display: grid;
  grid-template-columns: 2fr 3fr 2fr;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.activity .recent-activity-item:hover {
  background: var(--surface);
}

/* Column 1: Parent/Category */
.activity .recent-activity-item-parent {
  color: var(--text) !important;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  word-break: break-word;
}

/* Column 2: Article/Post Link */
.activity .recent-activity-item-link {
  color: var(--text-faint) !important;
  font-size: 14px;
  text-decoration: none;
  word-break: break-word;
}

.activity .recent-activity-item-link:hover,
.activity .recent-activity-item-parent:hover {
  color: var(--accent) !important;
}

/* Column 3: Meta data (Date, Comments) */
.activity .recent-activity-item-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-faint);
  text-align: right;
}

.activity .recent-activity-item-time {
  margin: 0;
}

.activity .recent-activity-item-comment {
  display: flex;
  align-items: center;
  gap: 4px;
}

.activity .recent-activity-item-comment::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: currentColor;
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 3.5C2 2.67157 2.67157 2 3.5 2H12.5C13.3284 2 14 2.67157 14 3.5V10.5C14 11.3284 13.3284 12 12.5 12H10.1983L6.96967 14.8694C6.54573 15.2462 5.86241 14.9453 5.86241 14.3755V12H3.5C2.67157 12 2 11.3284 2 10.5V3.5Z" fill="white"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 3.5C2 2.67157 2.67157 2 3.5 2H12.5C13.3284 2 14 2.67157 14 3.5V10.5C14 11.3284 13.3284 12 12.5 12H10.1983L6.96967 14.8694C6.54573 15.2462 5.86241 14.9453 5.86241 14.3755V12H3.5C2.67157 12 2 11.3284 2 10.5V3.5Z" fill="black"/></svg>') no-repeat center / contain;
}

/* Mobile responsive layout */
@media (max-width: 768px) {
  .activity .recent-activity-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px;
  }

  .activity .recent-activity-item-meta {
    justify-content: flex-start;
    text-align: left;
    margin-top: 4px;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */

/* Ensure exactly 120px gap above the footer by removing bottom margins/padding from the last page elements */
main> :last-child:not(.community-footer),
main>.container:last-child> :last-child:not(.button-large),
main>.container-divider:last-child+.container> :last-child:not(.button-large),
main>.container:last-child>.article-container:last-child> :last-child:not(.button-large),
main>.container:last-child>.section-container:last-child> :last-child:not(.button-large) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.ap-footer {
  margin-top: 120px;
  border-top: 1px solid var(--border);
  padding: 64px 0 40px;
  background: var(--bg-2);
}

.ap-foot-top {
  display: grid;
  grid-template-columns: 2.2fr repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 46px;
  border-bottom: 1px solid var(--border);
}

.ap-foot-about {
  max-width: 340px;
}

.ap-foot-about .ap-brand {
  margin-bottom: 16px;
}

.ap-foot-about p {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

.ap-foot-col h4 {
  color: var(--text);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
  font-family: var(--mono);
  font-weight: 600;
}

.ap-foot-col a {
  display: block;
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 11px;
  transition: color 0.15s;
  text-decoration: none;
}

.ap-foot-col a:hover {
  color: var(--accent);
}

.ap-foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  font-size: 14px;
  color: var(--text-faint);
}

.ap-foot-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ap-foot-socials {
  display: flex;
  gap: 16px;
}

.ap-foot-socials a {
  color: var(--text-faint);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ap-foot-socials a svg {
  width: 18px;
  height: 18px;
  transition: color 0.18s ease;
}

.ap-foot-socials a:hover {
  color: var(--accent);
}

/* ============================================================
   SUB-NAV (Breadcrumbs + Search)
   ============================================================ */
.sub-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  gap: 16px;
}

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 4px;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: var(--text-faint);
}

.breadcrumbs li::after {
  content: ">";
  margin: 0 6px;
  color: var(--text-faint);
  opacity: 0.5;
}

.breadcrumbs li:last-child::after {
  display: none;
}

.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.breadcrumbs a:hover {
  color: var(--accent);
}

/* Search in sub-nav */
.sub-nav .search {
  flex: none;
}

.sub-nav .search input[type="search"],
.sub-nav .search input[type="text"] {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--text);
  font-size: 14px;
  width: 260px;
  outline: none;
}

.sub-nav .search input:focus {
  border-color: var(--accent);
}

/* ============================================================
   PAGE HEADERS
   ============================================================ */
.page-header {
  margin-bottom: 30px;
  padding-top: 10px;
}

.page-header h1 {
  margin-bottom: 24px;
  font-size: clamp(22px, 3vw, 34px);
}

.page-header-description {
  color: var(--text-muted);
  font-size: 15px;
  margin: 0;
}

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.article-container {
  display: flex;
  gap: 80px;
  padding: 20px 0 60px;
}

.article-sidebar {
  flex: 0 0 300px;
  min-width: 0;
}

@media (max-width: 880px) {
  .article-container {
    flex-direction: column;
  }

  .article-sidebar {
    flex: none;
  }
}

.section-articles h3,
.collapsible-sidebar-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--mono);
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 12px;
}

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

.article-sidebar li {
  margin-bottom: 0;
}

.article-sidebar a,
.sidenav-item {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-muted);
  border-radius: 6px;
  transition: all 0.15s;
  text-decoration: none;
  border-left: 2px solid transparent;
}

.article-sidebar a:hover {
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
}

.article-sidebar a.current-article,
.sidenav-item.current-article {
  color: var(--accent);
  background: var(--accent-soft);
  border-left-color: transparent;
  font-weight: 600;
}

.article-sidebar-item {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--accent);
  margin-top: 4px;
}

.article {
  flex: 1;
  min-width: 0;
  max-width: 750px;
}

.article-header {
  margin-bottom: 24px;
}

.article-title {
  font-size: clamp(22px, 3vw, 34px);
  margin-bottom: 16px;
}

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

.article-author a {
  color: var(--accent);
  text-decoration: none;
}

.article-author a:hover {
  text-decoration: underline;
}

.article-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.avatar {
  position: relative;
  display: inline-flex;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}

.meta-group {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.meta-data {
  font-size: 13px;
  color: var(--text-faint);
}

.meta-data::before {
  content: "·";
  margin-right: 8px;
}

.meta-data:first-child::before {
  display: none;
}

.meta-count {
  font-weight: 600;
  color: var(--accent);
}

.article-body {
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 15px;
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
  color: var(--text);
  margin-top: 32px;
  margin-bottom: 12px;
}

.article-body span,
.article-body p,
.article-body div,
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6,
.article-body li,
.article-body table,
.article-body tr,
.article-body th,
.article-body td,
.post-body span,
.post-body p,
.post-body div,
.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6,
.post-body li,
.post-body table,
.post-body tr,
.post-body th,
.post-body td {
  background-color: transparent !important;
  color: var(--text) !important;
}

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

.article-body a {
  color: var(--accent);
  text-decoration: underline;
}

.article-body a:hover {
  color: var(--accent-hover);
}

.article-body img {
  border-radius: 8px;
  margin: 16px 0;
}

.article-body code {
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--accent);
}

.article-body pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
}

.article-body pre code {
  background: none;
  padding: 0;
}

.article-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  margin: 16px 0;
  color: var(--text-muted);
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.article-body th,
.article-body td {
  border: 1px solid var(--border);
  padding: 10px 14px;
  text-align: left;
}

.article-body th {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}

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

.article-body li {
  margin-bottom: 6px;
  list-style: inherit;
}

/* Article attachments */
.attachments {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

.attachment-item {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--surface);
}

.attachment-item a {
  color: var(--accent);
}

.attachment-meta {
  margin-top: 4px;
}

/* Article footer */
.article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  margin-top: 32px;
}

.article-votes {
  padding: 24px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}

.article-votes-question {
  display: block;
  margin-bottom: 12px;
  color: var(--text);
  font-weight: 500;
}

.article-votes-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.article-vote {
  padding: 8px 20px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  transition: all 0.15s;
  cursor: pointer;
  background: transparent;
}

.article-vote:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.article-vote[aria-selected="true"],
.article-vote[aria-selected="true"]:hover {
  background-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
}

.article-vote-up::after {
  content: "Yes";
  font-weight: 500;
}

.article-vote-down::after {
  content: "No";
  font-weight: 500;
}

.article-votes-count {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-faint);
}

.article-more-questions {
  padding: 24px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}

.article-return-to-top {
  text-align: center;
  padding: 16px 0;
}

.article-return-to-top a {
  color: var(--text-faint);
  font-size: 14px;
  text-decoration: none;
}

.article-return-to-top a:hover {
  color: var(--accent);
}

.article-relatives {
  padding: 24px 0;
  border-top: 1px solid var(--border);
}

.article-relatives section+section {
  margin-top: 32px;
}

.article-relatives h3 {
  margin-bottom: 12px;
}

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

.article-relatives .article-list li {
  padding: 6px 0;
}

.article-relatives .article-list a {
  color: var(--text-muted);
}

.article-relatives .article-list a:hover {
  color: var(--accent);
}

/* Share */
.share {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-muted);
  transition: all 0.15s;
}

.share a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   COMMENTS
   ============================================================ */
.comment-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.comment-heading {
  color: var(--text);
  font-size: 18px;
  margin: 0;
}

.comment-callout {
  color: var(--text-faint);
  font-size: 14px;
  margin: 4px 0 0;
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}

.comment:first-child {
  border-top: 0;
}

.comment-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* WYSIWYG Editor Overrides */
#hc-wysiwyg {
  background-color: var(--surface-2) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  overflow: hidden;
}

#hc-wysiwyg [role="toolbar"] {
  background-color: var(--bg-2) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 4px;
}

#hc-wysiwyg [role="button"] {
  color: var(--text) !important;
  border-radius: 4px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px;
}

#hc-wysiwyg [role="button"]:hover,
#hc-wysiwyg [role="button"]:focus {
  background-color: #F1F2F4 !important;
}

#hc-wysiwyg iframe {
  /* Light theme: Zendesk's own editor chrome is already light, so the
     dark-mode invert()/hue-rotate() hack is removed rather than retuned. */
  background-color: #FFFFFF !important;
}

#hc-wysiwyg [class^="wysiwyg-icon-"] {
  filter: none;
  color: var(--text-muted);
}

.comment-wrapper.comment-official {
  border-radius: var(--radius);
  padding: 20px;
}

.comment-info {
  flex: 1;
}

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

.comment-author a {
  color: var(--accent);
  text-decoration: none;
}

.comment-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.comment-body {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 15px;
}

.comment-body a {
  color: var(--accent);
}

.comment-labels {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.comment-actions-container {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
}

/* Votes */
.vote {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vote-up,
.vote-down {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 12px;
  background: transparent;
  text-decoration: none;
}

.vote-up:hover,
.vote-down:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

.vote-up.vote-voted:hover,
.vote-down.vote-voted:hover {
  color: var(--accent-ink);
}

.vote-up::after {
  content: "Upvote";
}

.vote-down::after {
  content: "Downvote";
}

.vote-voted {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.vote-sum {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}

.comment-actions {
  margin-left: auto;
}

.post-actions-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  margin-top: 24px;
}

/* Comment form */
.comment-form {
  display: flex;
  gap: 12px;
  padding: 24px 0;
  align-items: flex-start;
}

.comment-form .comment-avatar {
  flex: none;
}

.comment-container {
  flex: 1;
}

.comment-show-container {
  padding: 14px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s;
}

.comment-show-container:hover {
  border-color: var(--accent);
}

.comment-show-container.hidden {
  display: none;
}

.comment-fields.shown {
  display: block;
}

.comment-form-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}

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

.upload-notice {
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 24px;
}

/* ============================================================
   STATUS LABELS
   ============================================================ */
.status-label {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--mono);
}

.status-label-open {
  background: var(--success-soft);
  color: var(--success);
}

.status-label-pending {
  background: var(--warning-soft);
  color: var(--warning);
}

.status-label-solved,
.status-label-closed {
  background: #F1F2F4;
  color: var(--text-muted);
}

.status-label-new {
  background: var(--accent-tint);
  color: var(--accent);
}

.status-label-hold {
  background: #F0EBFA;
  color: #6E40CF;
}

.status-label-pinned {
  background: var(--warning-soft);
  color: var(--warning);
}

.status-label-featured {
  background: var(--accent-tint);
  color: var(--accent);
}

.status-label-official {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Community Specific Statuses */
.status-label-answered {
  background: #F0EBFA;
  color: #6E40CF;
}

.status-label-completed {
  background: var(--success-soft);
  color: var(--success);
}

.status-label-planned {
  background: var(--accent-tint);
  color: var(--accent);
}

.status-label-not-planned {
  background: #F1F2F4;
  color: var(--text-muted);
}

.escalation-badge {
  background: var(--danger-soft);
  color: var(--danger);
  text-decoration: none;
}

/* ============================================================
   SECTION PAGE
   ============================================================ */
.section-container {
  padding: 20px 0 60px;
}

.section-content {
  max-width: 100%;
}

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

.article-list-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.article-list-item:last-child {
  border-bottom: none;
}

.article-list-link {
  color: var(--text);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.15s;
}

.article-list-link:hover {
  color: var(--accent);
  text-decoration: none;
}

.article-promoted {
  position: relative;
}

.see-all-articles {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  color: var(--accent);
}

/* ============================================================
   CATEGORY PAGE
   ============================================================ */
.category-container {
  padding: 20px 0 60px;
}

.section-tree .section {
  margin-bottom: 32px;
}

.section-tree-title {
  font-size: 18px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.section-tree-title a {
  color: var(--text);
  text-decoration: none;
}

.section-tree-title a:hover {
  color: var(--accent);
}

.section-empty,
.category-empty {
  color: var(--text-faint);
  font-style: italic;
  display: block;
  padding: 12px 0;
}

.section-empty a,
.category-empty a {
  color: var(--accent);
}

/* ============================================================
   SEARCH RESULTS
   ============================================================ */
.search-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 20px 0 60px;
}

@media (max-width: 880px) {
  .search-results {
    grid-template-columns: 1fr;
  }
}

.search-results-column {}

.search-results-subheading {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--mono);
  color: var(--text-faint);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.search-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.search-result {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.search-result-link {
  color: var(--text);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
}

.search-result-link:hover {
  color: var(--accent);
}

.search-result-votes {
  display: inline-block;
  margin-left: 8px;
  font-weight: 600;
  color: var(--accent);
  font-size: 13px;
}

.search-result-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.search-result-breadcrumbs li {
  font-size: 13px;
  color: var(--text-faint);
}

.search-result-breadcrumbs li::after {
  content: ">";
  margin: 0 4px;
}

.search-result-breadcrumbs li:last-child::after {
  display: none;
}

.search-result-breadcrumbs a {
  color: var(--text-faint);
  text-decoration: none;
}

.search-result-breadcrumbs a:hover {
  color: var(--accent);
}

.search-result-description {
  color: var(--text-faint);
  font-size: 14px;
  margin-top: 6px;
  line-height: 1.5;
}

.search-result-meta-count {
  font-weight: 600;
  color: var(--accent);
  font-size: 13px;
  margin-left: 8px;
}

/* ============================================================
   REQUEST PAGES
   ============================================================ */
.request-breadcrumbs {
  margin-top: 16px;
  margin-bottom: 16px;
}

.request-title {
  font-size: clamp(20px, 3vw, 30px);
  margin-bottom: 24px;
}

.request-container {
  display: flex;
  gap: 40px;
  padding: 0 0 60px;
}

.request-main {
  flex: 1;
  min-width: 0;
}

.request-sidebar {
  flex: 0 0 280px;
}

.request-sidebar.collapsible-sidebar {}

@media (max-width: 880px) {
  .request-container {
    flex-direction: column;
  }

  .request-sidebar {
    flex: none;
  }
}

.request-details {
  margin: 0 0 16px;
  padding: 0;
}

.request-details dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--mono);
  color: var(--text-faint);
  margin-top: 14px;
  font-weight: 600;
}

.request-details dt:first-child {
  margin-top: 0;
}

.request-details dd {
  margin: 4px 0 0 0;
  color: var(--text-muted);
  font-size: 14px;
}

.request-collaborators {
  list-style: none;
  padding: 0;
  margin: 0;
}

.request-collaborators li {
  font-size: 14px;
}

.request-follow-up {
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.request-submit-comment {
  display: inline-block;
}

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

/* Request list table */
.requests-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.requests-table-toolbar .search {
  flex: 1;
  min-width: 200px;
}

.requests-search {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--text);
  width: 100%;
}

.requests-search:focus {
  border-color: var(--accent);
}

.request-table-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.request-filter-label {
  font-size: 13px;
  color: var(--text-faint);
  white-space: nowrap;
}

.request-filter {
  min-width: 120px;
}

.requests-search-info {
  color: var(--text-faint);
  font-size: 14px;
  margin-bottom: 12px;
}

.requests-table-info {}

.requests-table-meta {
  display: none;
}

@media (max-width: 768px) {
  .requests-table-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
  }
}

.requests-table-status {}

.no-activities {
  color: var(--text-faint);
  padding: 20px 0;
}

.request-closed {
  opacity: 0.6;
}

/* ============================================================
   MY ACTIVITIES NAV (Requests, Contributions, Subscriptions)
   ============================================================ */
.my-activities-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.collapsible-nav-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}

.collapsible-nav-list.container {
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 1200px) {
  .collapsible-nav-list.container {
    padding: 0;
  }
}

.collapsible-nav-list li {
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: default;
  border-bottom: 2px solid transparent;
  transition: color 0.15s;
}

.collapsible-nav-list li[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.collapsible-nav-list li a {
  color: var(--text-muted);
  text-decoration: none;
}

.collapsible-nav-list li a:hover {
  color: var(--text);
}

.my-activities-header {
  padding: 24px 0 16px;
}

.my-activities-header h1 {
  font-size: clamp(22px, 3vw, 30px);
  margin-bottom: 12px;
}

.my-activities-sub-nav .collapsible-nav-list {
  gap: 4px;
}

.my-activities-sub-nav .collapsible-nav-list li {
  padding: 8px 14px;
  border-radius: 999px;
  border-bottom: none;
  font-size: 13px;
}

.my-activities-sub-nav .collapsible-nav-list li[aria-selected="true"] {
  background: var(--accent-soft);
  border-bottom: none;
}

.my-activities-sub-nav .collapsible-nav-list li a:hover {
  text-decoration: none;
}

.my-activities-following-header {
  padding: 16px 0;
}

/* Striped list (used in community) */
.striped-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.striped-list-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.striped-list-info {
  flex: 1;
  min-width: 0;
}

.striped-list-title {
  color: var(--text);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  display: inline;
  margin-right: 8px;
  vertical-align: middle;
}

.striped-list-title:hover {
  color: var(--accent);
  text-decoration: none;
}

.striped-list-count {
  display: flex;
  gap: 16px;
  flex: none;
  align-items: center;
}

.striped-list-count-item {
  text-align: center;
  font-size: 13px;
  color: var(--text-faint);
}

.striped-list-number {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.striped-list-status {
  margin-left: 8px;
}

.post-overview-item {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  vertical-align: middle;
  margin-bottom: 4px;
}

.post-overview-count {
  display: flex;
  gap: 16px;
}

.post-featured {
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 16px !important;
}

/* ============================================================
   COMMUNITY PAGES
   ============================================================ */
/* Community hero */
.community-hero {
  position: relative;
  padding: 40px 0 32px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}

.community-hero .hero-inner,
.hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.community-hero .search,
.hero-inner .search {
  max-width: 600px;
  margin: 0 auto;
}

.community-hero .search input,
.hero-inner .search input {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--text);
  font-size: 16px;
  width: 100%;
}

.community-hero .search input:focus,
.hero-inner .search input:focus {
  border-color: var(--accent);
}

.community-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 16px 0 0 0;
  flex-wrap: wrap;
  margin-bottom: 28px !important;
}

.community-search-inline {
  flex: 1;
  max-width: 450px;
  margin: 0;
}

.community-search-inline .search {
  width: 100%;
  margin: 0;
}

.community-search-inline .search form {
  margin: 0;
}

.community-search-inline .search input[type="search"] {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--text);
  width: 100%;
  height: 42px;
  box-sizing: border-box;
}

.community-search-inline .search input[type="search"]:focus {
  border-color: var(--accent);
}

.community-header .dropdown-toggle,
.community-header .ap-btn {
  height: 42px;
  box-sizing: border-box;
}

.community-header h4 {
  margin: 0;
}

.community-follow {
  margin-left: auto;
}

.post-to-community {
  display: inline-block;
  margin-left: auto;
}

.topic-header {
  display: flex;
  gap: 12px;
  padding: 0 0 16px;
  flex-wrap: wrap;
}

.topic-filters {
  display: flex;
  gap: 12px;
}

/* Community blocks (topics grid) */
.blocks {
  padding: 0;
}

.blocks-list {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 880px) {
  .blocks-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .blocks-list {
    grid-template-columns: 1fr;
  }
}

.blocks-item {}

.blocks-item-link {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px;
  transition: all 0.18s;
  text-decoration: none;
  color: var(--text-muted);
}

.blocks-item-link:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  text-decoration: none;
  background: var(--surface-2);
}

.blocks-item-link img {
  display: none;
  /* Hide old injected images in new design */
}

.blocks-item-title {
  color: var(--text);
  font-weight: 600;
  margin: 0 0 6px;
  font-size: 16px;
}

.blocks-item-description {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.blocks-item-internal {}

/* Community featured posts */
.community-featured-posts {
  padding: 24px 0;
}

.community-featured-posts h3 {
  margin-bottom: 12px;
}

.promoted-articles {
  list-style: none;
  padding: 0;
  margin: 0;
}

.promoted-articles-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.promoted-articles-item a {
  color: var(--text);
  text-decoration: none;
}

.promoted-articles-item a:hover {
  color: var(--accent);
}

/* Community footer */
.community-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 0;
  border-top: 1px solid var(--border);
}

.community-footer h4 {
  margin-bottom: 16px;
}

.community-activity {
  padding: 24px 0;
}

/* Post page */
.post-container {
  display: flex;
  gap: 40px;
  padding: 20px 0 60px;
}

.post {
  flex: 1;
  min-width: 0;
  max-width: 750px;
}

.post-sidebar {
  flex: 0 0 260px;
}

@media (max-width: 880px) {
  .post-container {
    flex-direction: column;
  }

  .post-sidebar {
    flex: none;
  }
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.post-title h1 {
  font-size: clamp(20px, 3vw, 30px);
}

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

.post-body {
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 15px;
}

.post-body a {
  color: var(--accent);
}

.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  margin-top: 24px;
}

.post-comments {
  padding: 24px 0;
}

.post-sidebar .sidebar-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--mono);
  color: var(--text-faint);
  margin-bottom: 16px;
}

/* New community post page */
.form-header {
  margin-bottom: 24px;
}

.new_community_post {
  max-width: 680px;
}

/* ============================================================
   USER PROFILE
   ============================================================ */
.profile-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
}

.profile-info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.profile-avatar {
  flex: none;
}

.profile-avatar .user-avatar {
  width: 72px;
  height: 72px;
}

.basic-info {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.basic-info .name {
  font-size: 24px;
  margin: 0;
}

.basic-info .name a {
  color: var(--text);
  text-decoration: none;
}

.basic-info .name a:hover {
  color: var(--accent);
}

.options {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.profile-private-badge {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.description {
  color: var(--text-muted);
  font-size: 15px;
  margin-top: 12px;
}

.profile-stats {
  display: flex;
  gap: 40px;
  list-style: none;
  padding: 16px 0 0;
  margin: 16px 0 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.profile-stats .stat {}

.stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-faint);
  text-transform: uppercase;
  font-family: var(--mono);
  letter-spacing: 0.06em;
}

.stat-value {
  display: block;
  font-size: 16px;
  color: var(--text);
  font-weight: 600;
  margin-top: 2px;
}

.profile-stats-counters {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 16px;
}

.profile-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.profile-section {
  padding: 24px 0 60px;
}

.profile-section-header {
  margin-bottom: 20px;
}

.profile-section-title {
  font-size: 20px;
  margin-bottom: 4px;
}

.profile-section-description {
  color: var(--text-faint);
  font-size: 14px;
}

.profile-section-sorter {
  margin-left: 12px;
}

.profile-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-activity {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.profile-activity-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.profile-activity-header .user-avatar {
  width: 28px;
  height: 28px;
}

.profile-activity-description {
  color: var(--text-faint);
  font-size: 14px;
  margin: 0;
}

.profile-activity-description time {
  display: block;
}

.profile-contribution {
  padding: 16px 0;
}

.profile-contribution-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.profile-contribution-title {
  font-size: 16px;
  margin: 0;
}

.profile-contribution-title a {
  color: var(--text);
  text-decoration: none;
}

.profile-contribution-title a:hover {
  color: var(--accent);
}

.profile-contribution-breadcrumbs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  gap: 4px;
  flex-wrap: wrap;
}

.profile-contribution-breadcrumbs li {
  font-size: 13px;
  color: var(--text-faint);
}

.profile-contribution-breadcrumbs li::after {
  content: ">";
  margin: 0 4px;
}

.profile-contribution-breadcrumbs li:last-child::after {
  display: none;
}

.profile-contribution-breadcrumbs a {
  color: var(--text-faint);
  text-decoration: none;
}

.profile-contribution-breadcrumbs a:hover {
  color: var(--accent);
}

.profile-contribution-body {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.no-activity,
.private-activity {
  color: var(--text-faint);
  font-size: 15px;
  padding: 20px 0;
  display: block;
}

/* ============================================================
   DROPDOWNS
   ============================================================ */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  background: var(--surface);
}

.dropdown-toggle::after {
  display: none !important;
}

.dropdown-profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
}

.custom-avatar-wrapper--lg {
  width: 40px !important;
  height: 40px !important;
}

.custom-avatar-wrapper--lg .custom-initials {
  font-size: 16px !important;
}

.dropdown-profile-text {
  display: flex;
  flex-direction: column;
}

.dropdown-user-name {
  color: var(--text) !important;
  font-weight: 600;
  font-size: 14px;
  padding: 0 !important;
}

.dropdown-user-email {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 2px;
}

.dropdown-user-email:empty {
  display: none;
}

.dropdown-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 220px;
  margin-top: 8px;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-md) !important;
  height: auto !important;
}

/* When Zendesk JS renders dropdown upwards due to lack of space */
.dropdown-menu.dropdown-menu-top {
  top: auto !important;
  bottom: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* Invisible bridge to prevent hover loss when moving mouse from toggle to menu */
.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  background: transparent !important;
  border: none !important;
}

/* Hide Zendesk's default white triangle pointer */
.dropdown-menu::after {
  display: none !important;
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
}

.dropdown-toggle::after {
  content: "";
  display: inline-block !important;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='black' viewBox='0 0 12 12'%3E%3Cpath stroke-linecap='round' stroke-width='1.5' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='black' viewBox='0 0 12 12'%3E%3Cpath stroke-linecap='round' stroke-width='1.5' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.user-info .dropdown-toggle::after {
  display: none !important;
}

/* Ensure all subscribe buttons use flexbox to align text, badge, and chevron */
[data-follower-count] {
  display: inline-flex !important;
  align-items: center;
}

/* Add native follower count as a badge, and push it between text and chevron */
[data-follower-count]::before {
  content: attr(data-follower-count);
  order: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-width: 24px;
  padding: 0 8px;
  margin-left: 8px;
  background-color: var(--bg-2);
  color: var(--text);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}

[data-follower-count]:hover::before {
  background-color: var(--accent);
  color: var(--accent-ink);
}

/* Ensure the chevron appears after the follower count badge (only for dropdowns) */
.dropdown-toggle[data-follower-count]::after {
  order: 2;
}

.dropdown-menu-end {
  left: auto;
  right: 0;
}

.dropdown-menu a,
.dropdown-menu [role="menuitem"] {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
  color: var(--text-muted) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none;
  width: 100%;
  cursor: pointer;
}

.dropdown-menu a::after,
.dropdown-menu [role="menuitem"]::after {
  content: "\2192";
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.2s ease;
  color: var(--accent) !important;
  font-size: 16px;
  font-weight: bold;
}

.dropdown-menu a[aria-selected="true"]::after,
.dropdown-menu [role="menuitem"][aria-selected="true"]::after {
  content: "\2713";
}

.dropdown-menu a:hover,
.dropdown-menu [role="menuitem"]:hover {
  background: var(--surface) !important;
  color: var(--text) !important;
}

.dropdown-menu a:hover::after,
.dropdown-menu a[aria-selected="true"]::after,
.dropdown-menu [role="menuitem"]:hover::after,
.dropdown-menu [role="menuitem"][aria-selected="true"]::after {
  opacity: 1;
  transform: translateX(0);
}

.dropdown-menu a[aria-selected="true"],
.dropdown-menu [role="menuitem"][aria-selected="true"] {
  color: var(--accent) !important;
  background: var(--surface) !important;
}

.dropdown.open .dropdown-menu,
.dropdown[aria-expanded="true"] .dropdown-menu {
  display: block !important;
}

/* Comment sorter dropdown */
.comment-sorter {
  float: right;
}

.comment-sorter .dropdown-toggle {
  border: none;
  padding: 0;
  background: transparent;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  padding: 32px 0;
}

.pagination ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination a,
.pagination .pagination-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}

.pagination a {
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.pagination a:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

.pagination .pagination-current {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

/* ============================================================
   NOTIFICATION BANNER
   ============================================================ */
.alertbox {
  position: relative;
  z-index: 60;
}

.ns-box {
  position: relative;
}

.ns-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 40px 12px 16px;
  background: var(--success-soft);
  border-bottom: 1px solid #CCE5D3;
}

.ns-type-notice-custom {}

.ns-box-inner,
.ns-box-inner-custom {
  display: flex;
  align-items: center;
  gap: 10px;
}

.headerTextCustom {
  font-size: 14px;
  color: var(--text);
  margin: 0;
}

.headerTextCustom a {
  color: var(--text);
  text-decoration: underline;
  font-weight: 500;
}

.megaphoneCustom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--success);
  flex: none;
}

.megaphoneCustom svg {
  width: 100%;
  height: 100%;
}

.ns-close-focable {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  text-decoration: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.ns-close-focable:hover {
  color: var(--text);
}



/* Icon system compat */
.icon-lock::before {
  content: "🔒";
  font-size: 14px;
  margin-left: 4px;
}

.icon-star::before {
  content: "⭐";
  font-size: 14px;
  margin-right: 4px;
}

.icon-comments::before {
  content: "💬";
  font-size: 14px;
  margin-right: 4px;
}

.icon-agent {
  position: absolute;
  bottom: -2px;
  right: -2px;
}

.icon-agent::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}

.icon-arrow-up::before {
  content: " ↑";
}

.icon-menu {
  display: none;
  cursor: pointer;
  color: var(--text);
  font-size: 24px;
}

.icon-menu::before {
  content: "☰";
}

/* Language selector in footer */
.language-selector .dropdown-toggle {
  font-size: 13px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px) {
  .ap-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ap-split {
    grid-template-columns: 1fr;
  }

  .ap-foot-top {
    grid-template-columns: 1fr 1fr;
  }

  .search-results {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .ap-grid {
    grid-template-columns: 1fr;
  }

  .ap-foot-top {
    grid-template-columns: 1fr;
  }

  .ap-nav-right .ap-btn:not(.ap-btn--primary):not(.ap-btn--white) {
    display: none;
  }

  .profile-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .options {
    margin-left: 0;
    justify-content: center;
  }
}

/* ============================================================
   RICH TEXT EDITORS (CKEditor 5, TinyMCE, Zendesk zd-editor)
   Light theme. Both vendors ship a light skin by default, so these
   rules align them to the AgilePoint palette rather than repaint
   them wholesale. Coverage extends past the editable area to the
   toolbar popouts, balloons, menus, dialogs and status bar, which
   the dark theme left on vendor defaults.
   ============================================================ */
.zd-editor {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
}

.zd-editor:focus-within {
  border-color: var(--accent);
}

/* ---------- CKEditor 5 (Community post / comment composer) ---------- */
.ck.ck-editor__main>.ck-editor__editable,
.ck.ck-editor__main>.ck-editor__editable:not(.ck-editor__nested-editable) {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}

.ck.ck-editor__main>.ck-editor__editable.ck-focused {
  border-color: var(--accent) !important;
}

.ck.ck-toolbar {
  background: var(--bg-2) !important;
  border-color: var(--border) !important;
}

.ck.ck-toolbar .ck.ck-toolbar__separator {
  background: var(--border) !important;
}

.ck.ck-button,
.ck.ck-button.ck-off {
  color: var(--text) !important;
  background: transparent !important;
}

.ck.ck-button:not(.ck-disabled):hover,
.ck.ck-button.ck-on {
  background: #F1F2F4 !important;
  color: var(--text) !important;
}

.ck.ck-button.ck-on {
  color: var(--accent) !important;
}

.ck.ck-button.ck-disabled {
  color: var(--text-faint) !important;
}

.ck.ck-button .ck.ck-icon,
.ck.ck-button .ck.ck-icon * {
  color: inherit !important;
  fill: currentColor !important;
}

/* Dropdown panels, balloons and tooltips */
.ck.ck-dropdown__panel,
.ck.ck-balloon-panel,
.ck.ck-list {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--text) !important;
}

.ck.ck-balloon-panel .ck-balloon-panel__arrow::before,
.ck.ck-balloon-panel .ck-balloon-panel__arrow::after {
  border-bottom-color: var(--surface-2) !important;
  border-top-color: var(--surface-2) !important;
}

.ck.ck-list__item .ck-button:hover,
.ck.ck-list__item .ck-button.ck-on {
  background: var(--accent-tint) !important;
  color: var(--accent) !important;
}

.ck.ck-tooltip .ck-tooltip__text {
  background: var(--text) !important;
  color: #FFFFFF !important;
}

/* Inputs inside link / image balloons */
.ck.ck-input,
.ck.ck-input-text {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}

.ck.ck-input:focus,
.ck.ck-input-text:focus {
  border-color: var(--accent) !important;
}

.ck.ck-labeled-field-view__status,
.ck.ck-label {
  color: var(--text-muted) !important;
}

/* ---------- TinyMCE (legacy / ticket composer) ---------- */
.tox-tinymce {
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
}

.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary,
.tox .tox-menubar,
.tox .tox-editor-header {
  background: var(--bg-2) !important;
  border-color: var(--border) !important;
}

.tox .tox-tbtn {
  color: var(--text) !important;
  background: transparent !important;
}

.tox .tox-tbtn:hover,
.tox .tox-tbtn--enabled {
  background: #F1F2F4 !important;
  color: var(--text) !important;
}

.tox .tox-tbtn--enabled {
  color: var(--accent) !important;
}

.tox .tox-tbtn svg {
  fill: currentColor !important;
}

.tox .tox-tbtn--disabled,
.tox .tox-tbtn--disabled svg {
  color: var(--text-faint) !important;
  fill: var(--text-faint) !important;
}

.tox .tox-edit-area__iframe {
  background: #FFFFFF !important;
}

/* Menus, dialogs and status bar */
.tox .tox-menu,
.tox .tox-collection--list,
.tox .tox-collection--toolbar {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
}

.tox .tox-collection__item {
  color: var(--text) !important;
}

.tox .tox-collection__item--active,
.tox .tox-collection__item:hover {
  background: var(--accent-tint) !important;
  color: var(--accent) !important;
}

.tox .tox-dialog {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
}

.tox .tox-dialog__header,
.tox .tox-dialog__footer {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.tox .tox-dialog__title {
  color: var(--text) !important;
}

.tox .tox-textfield,
.tox .tox-textarea,
.tox .tox-selectfield select {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}

.tox .tox-textfield:focus,
.tox .tox-textarea:focus {
  border-color: var(--accent) !important;
}

.tox .tox-label,
.tox .tox-toolbar-label {
  color: var(--text-muted) !important;
}

.tox .tox-statusbar {
  background: var(--bg-2) !important;
  border-top-color: var(--border) !important;
  color: var(--text-faint) !important;
}

.tox .tox-statusbar a,
.tox .tox-statusbar__path-item {
  color: var(--text-muted) !important;
}

.tox .tox-button {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}

.tox .tox-button:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.tox .tox-button--secondary {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}

.tox .tox-button--secondary:hover {
  background: #E0E3E7 !important;
}

/* Token field (CCs) */
.ccs-input {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
}

.ccs-input:focus-within {
  border-color: var(--accent);
}

/* Hidden helper — legacy compat */
.hidden {
  display: none;
}

.shown {
  display: block;
}

/* ==================================================== */
/* Recent Activity List Padding                         */
/* ==================================================== */
.recent-activity-item,
.activity-list-item {
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-left: -16px !important;
  margin-right: -16px !important;
  border-radius: 8px;
}

/* ==================================================== */
/* Announcement Alerts                                  */
/* ==================================================== */
.alertbox {
  width: 100%;
}

.ap-alert {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  font-family: var(--sans);
  font-size: 14px;
  color: #222;
  position: relative;
}

.ap-alert--success {
  background-color: var(--success-soft);
}

.ap-alert--warning {
  background-color: var(--warning-soft);
}

.ap-alert--error {
  background-color: var(--danger-soft);
}

.ap-alert__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.ap-alert__content {
  flex: 1;
  line-height: 1.5;
}

.ap-alert__content b {
  font-weight: 600;
}

.ap-alert__content a {
  color: #222;
  text-decoration: underline;
  font-weight: 600;
}

.ap-alert__content a:hover {
  text-decoration: none;
}

.ap-alert__close {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  flex: none;
}

.ap-alert__close:hover {
  color: #111;
}

/* Print */
@media print {

  .ap-nav,
  .ap-footer,
  .alertbox,
  .ap-hero::before {
    display: none;
  }

  body {
    background: #fff;
    color: #222;
  }

  a {
    color: #222;
  }
}

.article-author {
  display: flex;
  align-items: center;
}

.article-subscribe {
  margin-left: auto;
}

/* Classic WYSIWYG editor toolbar (article comments) */
#hc-wysiwyg [role="toolbar"] {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex-wrap: wrap;
  padding: 8px 12px !important;
  box-sizing: content-box;
}

#hc-wysiwyg [role=menu] {
  background: var(--surface-2) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  color: var(--text);
  z-index: 1;
}

#hc-wysiwyg [role=menu]>[role=button][data-block=p]:hover {
  color: var(--accent);
}

#hc-wysiwyg [role=form][aria-expanded=true] {
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

#hc-wysiwyg [role=form] input {
  color: var(--text);
  background-color: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}

#hc-wysiwyg [role=form] input:focus {
  border-color: var(--accent);
  outline: none;
}

#hc-wysiwyg [role=form] [role=button] {
  background: transparent;
  color: var(--text);
}

#hc-wysiwyg [role="toolbar"] [role="button"] {
  transition: opacity 0.2s !important;
  background-color: transparent !important;
}

#hc-wysiwyg [role="toolbar"] [role="button"]:hover,
#hc-wysiwyg [role="toolbar"] [role="button"]:focus,
#hc-wysiwyg [role="toolbar"] [aria-haspopup="true"]:hover > [role="button"],
#hc-wysiwyg [role="toolbar"] [aria-haspopup="true"]:focus > [role="button"] {
  background-color: transparent !important;
  opacity: 0.6 !important;
}

/** Everything else after subject and cc and before footer **/
#new_request {
	display: flex;
	width: 100%;
	flex-direction: column;
  gap: 12px;
}
.form-field ~ .form-field {order: 5;} 
/** Form Footer at the very bottom **/
form footer {
	order:10;
}
/** Set Subject as the first field **/
div.form-field.request_subject {
	order: 1;
	margin-bottom:5px;
  margin-top: 0;
}
/** Set CC as the second field **/
div.form-field.request_cc_emails {
	order: 2;
}

.form-field textarea {
  height: 210px;
}

/* ============================================================
   LIGHT THEME — CONTEXTUAL SURFACES
   In the Figma reference a card is #F8F9FA when it sits on the
   white page and #FFFFFF when it sits on the #F8F9FA band, so the
   surface inverts by context rather than being a single value.
   ============================================================ */
.ap-block--alt .ap-card,
.ap-block--alt .ap-topic,
.ap-block--alt .ap-panel,
.ap-block--alt .ap-status {
  background: var(--surface-2);
}

.ap-block--alt .ap-panel--feature {
  background: linear-gradient(180deg, rgba(0, 119, 217, 0.06), transparent 60%), var(--surface-2);
}

/* Hover lifts the tile to white with a soft elevation (the design shows a
   drop rather than the dark theme's border-brightening). .ap-topic had no
   background in its own :hover rule, so the community tiles stayed grey. */
.ap-card:hover,
.ap-card:focus-visible,
.ap-topic:hover,
.ap-topic:focus-visible {
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
  border-color: var(--border);
}

.ap-block--alt .ap-card:hover,
.ap-block--alt .ap-topic:hover {
  background: var(--surface-2);
}

/* Selection + focus ring in brand blue.
   Text-entry controls opt out below and use a border colour change instead. */
::selection {
  background: var(--accent-tint);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* ============================================================
   COMMUNITY PAGE (light redesign)
   Topics list sits on a #F8F9FA band with white cards; everything
   below it (featured posts, activity, CTA) is on white.
   ============================================================ */

/* ---- Active nav link (applies to every page; set by script.js) ---- */
.ap-nav-link.is-active,
.ap-nav-links a.is-active {
  color: var(--accent);
  font-weight: 600;
}

.ap-nav-link.is-active:hover,
.ap-nav-links a.is-active:hover {
  color: var(--accent-hover);
}

/* ---- Grey band behind breadcrumbs + filters + topic grid ---- */
.community-band {
  background: var(--bg-2);
  padding: 4px 0 56px;
}

.community-band + .container,
.community-band ~ .container {
  padding-top: 8px;
}

.community-band .sub-nav {
  padding: 18px 0 12px;
}

.community-band .breadcrumbs li:last-child,
.community-band .breadcrumbs li:last-child a {
  color: var(--text-heading);
  font-weight: 600;
}

/* ---- Filter row: topics dropdown, search, New post ---- */
.community-header {
  gap: 14px;
  margin-bottom: 22px !important;
}

.community-header .dropdown-toggle {
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 16px;
  color: var(--text-muted);
  font-size: 15px;
}

.community-header .dropdown-toggle h4 {
  font-size: 15px;
  font-weight: 400;
  color: var(--text-muted);
}

.community-search-inline {
  max-width: 460px;
}

.community-search-inline .search input[type="search"] {
  height: 44px;
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 16px 0 44px;
  font-size: 15px;
}

.community-search-inline .search input[type="search"]::placeholder {
  color: var(--text-muted);
}

/* ---- Topic cards: white on the grey band ---- */
.community-band .blocks-item-link {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.community-band .blocks-item-link:hover {
  background: var(--surface-2);
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}

.blocks-item-title {
  color: var(--text-heading);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.blocks-item-description {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 10px;
}

.blocks-item-link .meta-group {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--text-faint);
  font-size: 14px;
}

.blocks-item-link .meta-group .meta-data {
  color: var(--text-faint);
}

.blocks-item-link .meta-group .meta-data + .meta-data::before {
  content: "\00B7";
  margin-right: 6px;
  color: var(--border-strong);
}

/* ---- Featured posts: two columns with an icon tile ---- */
.community-featured-posts {
  padding: 48px 0 8px;
}

.community-featured-posts h3 {
  color: var(--text-heading);
  font-size: 24px;
  margin-bottom: 22px;
}

.community-featured-posts .promoted-articles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 48px;
}

@media (max-width: 720px) {
  .community-featured-posts .promoted-articles {
    grid-template-columns: 1fr;
  }
}

.community-featured-posts .promoted-articles-item {
  border-bottom: 0;
  padding: 0;
}

.community-featured-posts .promoted-articles-item a {
  display: flex;
  /* The design centres the title against the icon for both one- and
     two-line titles (measured midpoints agree within 2px). */
  align-items: center;
  gap: 14px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
  text-decoration: none;
}

.community-featured-posts .promoted-articles-item a:hover {
  color: var(--accent);
}

.promoted-articles-item .ap-post-ico {
  width: 40px;
  height: 40px;
  flex: none;
  display: block;
}

/* ---- Closing call to action ---- */
.community-footer {
  border-top: 0;
  padding: 56px 0 72px;
  gap: 20px;
}

.community-footer h4 {
  color: var(--text-heading);
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}


/* ============================================================
   SEARCH ICON
   --search-icon is set in document_head.hbs so the real theme asset
   ({{asset 'search_icon.png'}}) can be used from CSS on every page.
   One rule covers the hero, sub-nav, community and scoped searches.
   ============================================================ */
.ap-search input[type="search"],
.ap-search input[type="text"],
.sub-nav .search input[type="search"],
.sub-nav .search input[type="text"],
.community-search-inline .search input[type="search"],
.community-hero .search input,
.hero-inner .search input,
.search-full input[type="search"],
.page-header .search input[type="search"],
form.search input[type="search"] {
  background-image: var(--search-icon);
  background-repeat: no-repeat;
  background-position: left 16px center;
  background-size: 17px 17px;
  padding-left: 44px;
}

/* The hero field is a flex row whose wrapper already pads the left edge,
   so the icon sits against the input's own box instead. */
.ap-search input[type="search"],
.ap-search input[type="text"] {
  background-position: left center;
  padding-left: 28px;
}

.sub-nav .search input[type="search"],
.sub-nav .search input[type="text"] {
  padding-right: 14px;
}

/* Fallback: if the custom property is ever missing (asset removed, or the
   head template not rendered) collapse the padding so text is not indented
   against an invisible icon. */
@supports not (background-image: var(--search-icon)) {

  .ap-search input[type="search"],
  .sub-nav .search input[type="search"],
  .community-search-inline .search input[type="search"] {
    padding-left: 16px;
  }
}


/* ============================================================
   DROPDOWN INTERACTION STATES
   Placed last so the scoped rules earlier in the file (notably
   .community-header .dropdown-toggle, which has the same specificity
   as .dropdown-toggle:hover) cannot cancel the hover treatment.
   Filled hover matches the Secondary button, so every bordered white
   control in the theme reacts the same way.
   ============================================================ */
.dropdown-toggle:not(.comment-sorter .dropdown-toggle):not(.user-info .dropdown-toggle):hover,
.dropdown-toggle:not(.comment-sorter .dropdown-toggle):not(.user-info .dropdown-toggle):focus-visible,
.dropdown:hover > .dropdown-toggle:not(.user-info .dropdown-toggle) {
  background-color: var(--btn-sec-hover);
  border-color: var(--btn-sec-hover);
  color: var(--text);
  text-decoration: none;
}

.dropdown-toggle:not(.comment-sorter .dropdown-toggle):not(.user-info .dropdown-toggle):active,
.dropdown-toggle[aria-expanded="true"]:not(.user-info .dropdown-toggle) {
  background-color: var(--btn-sec-pressed);
  border-color: var(--btn-sec-pressed);
  color: var(--text);
}

/* The follower-count badge sits inside a toggle; keep it readable on the
   filled hover rather than letting it blend into the new background. */
.dropdown-toggle:hover [data-follower-count]::before,
[data-follower-count]:hover::before {
  background-color: var(--accent);
  color: var(--accent-ink);
}

/* Comment sorter is a borderless text control - hover shifts the text only */
.comment-sorter .dropdown-toggle:hover,
.comment-sorter .dropdown-toggle:focus-visible {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
}

/* Avatar menu in the header has no border to fill */
.ap-nav .user-info .dropdown-toggle:hover {
  background: transparent;
  border-color: transparent;
  color: var(--text);
}


/* ============================================================
   NESTY DROPDOWN OPTIONS (priority, type, and other select fields)
   Matches the multiselect menu: primary fill + white text on hover,
   a tint for the already-selected row.

   These selectors are deliberately long. The generic pill rule
   `ul[role="listbox"] li[role="option"]` (0,2,2 + !important) is written
   for multiselect pills but also matches these options, so anything
   shorter loses to it and the option renders as a bordered pill.
   ============================================================ */
.nesty-panel {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: auto;
}

.nesty-panel ul,
.nesty-panel ul[role="listbox"] {
  background-color: var(--surface-2);
  list-style: none;
  margin: 0;
  padding: 4px;
}

.nesty-panel ul[role="listbox"] li[role="option"],
.nesty-panel li {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  padding: 8px 12px !important;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.12s, color 0.12s;
}

/* Hover / keyboard focus: primary fill, white text */
.nesty-panel ul[role="listbox"] li[role="option"]:hover,
.nesty-panel ul[role="listbox"] li[role="option"]:focus,
.nesty-panel li:hover,
.nesty-panel li:focus,
.nesty-panel li.is-active {
  background-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  outline: none;
}

/* Current value reads as selected without needing a hover */
.nesty-panel ul[role="listbox"] li[role="option"][aria-selected="true"],
.nesty-panel li.nesty-selected,
.nesty-panel li.is-selected {
  background-color: var(--accent-tint) !important;
  color: var(--text) !important;
  font-weight: 500;
}

/* ...but hovering the selected row still gives the primary fill */
.nesty-panel ul[role="listbox"] li[role="option"][aria-selected="true"]:hover,
.nesty-panel ul[role="listbox"] li[role="option"][aria-selected="true"]:focus,
.nesty-panel li.nesty-selected:hover,
.nesty-panel li.nesty-selected:focus,
.nesty-panel li.is-selected:hover {
  background-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}


/* ============================================================
   FORM FIELD FOCUS / HOVER
   Inputs signal hover and focus with the border colour alone - no
   outline and no glow ring. The outline in the block above is kept
   for links and buttons, which have no border to recolour.
   ============================================================ */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
[contenteditable]:focus,
[contenteditable]:focus-visible,
.nesty-input:focus,
.nesty-input:focus-visible,
.hc-multiselect-toggle:focus,
.hc-multiselect-toggle:focus-visible,
.ap-search form:focus-within,
.zd-editor:focus-within {
  outline: none;
  box-shadow: none;
}

/* Hover darkens the border one step. It must not use --border-strong,
   which is already the resting colour of these fields - that reads as
   no hover at all. */
.form-field input:hover,
.form-field textarea:hover,
.form-field select:hover,
.form-field .nesty-input:hover,
.sub-nav .search input:hover,
.community-search-inline .search input[type="search"]:hover,
.community-hero .search input:hover,
.hero-inner .search input:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="search"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
textarea:hover,
select:hover {
  border-color: var(--field-line-hover);
}

/* Focus wins over hover */
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.form-field .nesty-input:focus,
.sub-nav .search input:focus,
.community-search-inline .search input[type="search"]:focus,
.community-hero .search input:focus,
.hero-inner .search input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
}

/* The hero search is a wrapper around a borderless input, so the
   wrapper carries the state instead. */
.ap-search form:hover {
  border-color: var(--field-line-hover);
}

.ap-search form:focus-within {
  border-color: var(--accent);
}