/*
 * Volantis Help Center - customer-facing styling for /help/*.
 * Built entirely on the --v-* design tokens from volantis.css / volantis-theme.css.
 * volantis-theme.css flips the --v-* values for dark mode, so this file never hardcodes colors.
 */

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

body.help {
  margin: 0;
  min-height: 100vh;
  /* THE GROUND, and it is deliberately not white and deliberately not --v-bg.
     -------------------------------------------------------------------------------------------
     Pure white under the hero band left two unrelated surfaces stacked on each other - the band
     dissolved into nothing rather than into the page, and the white cards had no ground to lift
     off, so only their hairlines separated them.

     --v-bg (#F6F8FB) is the wrong fix: it is a grey-blue that belongs to no particular thing, and
     it was the original complaint. #F3F8FF is the same lightness but a CLEANER blue, drawn from
     the band's own family - so the page reads as the pale end of one surface rather than as a
     different surface. Cards stay --v-surface (white) and now genuinely sit above it.

     Local to the help centre. --v-bg keeps its meaning everywhere else in the app; changing that
     token would repaint the dashboard.

     !important is REQUIRED, not defensive: volantis-theme.css sets
     `body { background-color: var(--v-bg) !important }`, and an !important declaration beats any
     specificity a normal one can reach. Without it this rule loses and the page keeps the theme's
     grey-blue - which it silently did on the first attempt. */
  --help-ground: #F3F8FF;
  background: var(--help-ground) !important;
  color: var(--v-ink);
  font-family: var(--v-sans);
  font-size: 14px;
  line-height: 1.5;
}

a { text-decoration: none; }

/* The topbar is styled by volantis-theme.css and the account menu lives in
   assets/css/topbar-menu.css (2026-08-30). The copy that used to sit here was dead - the theme
   overrode all of it with !important. What follows is help-centre-only chrome. */

/* ---------- Slim section nav (secondary strip under the brand bar) ---------- */

.help-subnav {
  position: sticky;
  top: 60px;
  z-index: 19;
  background: var(--v-surface);
  border-bottom: 1px solid var(--v-border);
}

.help-subnav__inner {
  max-width: 860px;
  margin: 0 auto;
  /* 20px, matching .help-main. At 24px the nav links sat 4px inboard of every page's content
     and of the article breadcrumb - close enough to look like a mistake rather than a margin. */
  padding: 0 var(--v-s5);
  display: flex;
  align-items: center;
  gap: var(--v-s5);
}

.help-subnav__link {
  color: var(--v-muted);
  font-weight: 600;
  font-size: 13px;
  padding: 12px 2px;
  border-bottom: 2px solid transparent;
}

.help-subnav__link:hover { color: var(--v-ink); }

.help-subnav__link.is-active {
  color: var(--v-primary);
  border-bottom-color: var(--v-primary);
}

/* ---------- Live support availability (site-wide, help/presence.php via help.js) ----------
 *
 * Rebuilt 2026-07-26. This was a bordered pill with a tinted background, a shadow and a pulsing
 * ring: the archetypal SaaS status chip, and it sat in the nav looking like a component someone
 * dropped in rather than part of the page. It also pulsed forever, which is a lot of motion to
 * spend on "nobody is at their desk".
 *
 * Now it is nav text. Same weight and colour as the links beside it, a small solid dot for state,
 * and no chrome at all. It reads as a line of information in the header, which is what it is.
 */
.help-availability {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--v-muted);
  white-space: nowrap;
}

.help-availability__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v-faint);
}

/* Online is the only state worth colouring: it means "you can get an answer right now". */
.help-availability[data-state="online"] { color: var(--v-ink-2); font-weight: 600; }
.help-availability[data-state="online"] .help-availability__dot {
  background: var(--v-success);
  box-shadow: 0 0 0 3px rgba(14, 159, 110, .16);
}

/* Offline stays quiet. The copy carries the useful part (we reply by email), not the styling. */
.help-availability[data-state="offline"] .help-availability__dot { background: var(--v-faint); }

@media (max-width: 600px) {
  .help-availability { font-size: 12px; gap: 6px; }
}
/* Inline variant used inside the message composer (not pushed to the right of a flex row). */
.help-availability--inline {
  margin-left: 0;
  font-size: 13px;
  padding: 7px 14px 7px 12px;
  /* The base badge is nowrap because it lives in the subnav, where it is one short line beside
     other chrome. Inside the compose card it is a full sentence - and when support is online it
     grows an "Open live chat" control on the end - so on a narrow screen nowrap ran the offline
     copy off the edge of the card. Here it wraps. The dot is already flex:0 0 auto, so it stays
     on the first line rather than being wrapped onto its own row. */
  white-space: normal;
  flex-wrap: wrap;
  align-items: baseline;
}
/* Pin the dot to the FIRST text line. Centring it looks right on one line and wrong on two - it
   drifts to the middle of the paragraph and reads as a bullet for the wrong thing. */
.help-availability--inline .help-availability__dot { align-self: flex-start; margin-top: 6px; }
/* Take the remaining width of row one and wrap INSIDE itself. Basis auto, not 0: a basis of 0
   collapses the sentence to one word per line, and no basis at all makes a flex item break to a
   new row before it shrinks, which left the dot sitting alone above the text. */
.help-availability--inline .help-availability__text { flex: 1 1 auto; min-width: 0; }

/* ---------- Main container ---------- */

.help-main {
  max-width: 860px;
  margin: 0 auto;
  /* Named, because the full-bleed hero band has to cancel exactly this much with a negative top
     margin to sit flush under the subnav. Two literals would drift the day one of them changed -
     and the mobile override below uses a different value, so they already had. */
  --help-main-pad-top: var(--v-s8);
  padding: var(--help-main-pad-top) var(--v-s5) var(--v-s10);
}

/* ---------- Known-issues banner ---------- */

.help-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-lg);
  padding: var(--v-s4) var(--v-s5);
  margin-bottom: var(--v-s6);
  box-shadow: var(--v-sh-xs);
}

.help-banner strong {
  font-family: var(--v-display);
  font-size: 14.5px;
  font-weight: 600;
}

.help-banner span {
  font-size: 13.5px;
  color: var(--v-ink-2);
  line-height: 1.6;
}

.help-banner--info {
  background: var(--v-info-bg);
  border-color: var(--v-blue-200);
  color: var(--v-info-ink);
}
.help-banner--info strong { color: var(--v-info-ink); }

.help-banner--warning {
  background: var(--v-warning-bg);
  border-color: #F6D9A8;
  color: var(--v-warning-ink);
}
.help-banner--warning strong { color: var(--v-warning-ink); }

.help-banner--critical {
  background: var(--v-danger-bg);
  border-color: #F3B7B7;
  color: var(--v-danger-ink);
}
.help-banner--critical strong { color: var(--v-danger-ink); }

/* ---------- Hero ---------- */

.help-hero {
  text-align: center;
  /* --v-s10, NOT --v-s7: the scale is 1,2,3,4,5,6,8,10 and there is no s7. An undefined var()
     invalidates the WHOLE padding declaration, so the bottom padding computed to zero and the
     "Popular" row sat flush against the rule below it. See the same warning at help.css:750. */
  padding: var(--v-s10) 0 var(--v-s10);
  margin-bottom: var(--v-s8);
}
/* The compact variant is a page header, not a hero: no band, no rule, and its own tighter spacing.
   Everything below is scoped :not(--compact) for exactly this reason - the contact and tickets
   heroes carry dark text, and inheriting the band would put it on a navy ground.

   It needs its OWN padding and margin. Written as `margin-bottom: 0` it inherited the full hero's
   40px/40px padding and then sat flush against whatever followed - on help/tickets.php that put the
   toolbar hard under the subtitle with no gap at all. */
.help-hero--compact {
  padding: var(--v-s6) 0 var(--v-s5);
  margin-bottom: var(--v-s6);
}

/* ---------- Hero band (help/index.php, help/kb.php) ----------
   Contours of a ridge sweeping out of the bottom-left, flattening as they cross and fading out
   before they reach the heading. Same instrument as the live-chat widget and the ticket window
   (see tools/gen_help_hero_art.php) - the point of choosing it over a prettier one-off is that
   three surfaces then read as one hand.

   Static: one cached SVG, no animation, no compositor layer held alive, no JS. The band this
   replaced needed an IntersectionObserver just to stop animating off-screen. ---------- */

.help-hero:not(.help-hero--compact) {
  position: relative;
  isolation: isolate;
  /* NO overflow:hidden. The backdrop layer below deliberately hangs past the bottom edge so its
     dissolve has somewhere to finish; clipping it here is what forced the fade to complete inside
     the band and made it look like an edge. Nothing else overflows: ::before is inset horizontally,
     and html/body already carry overflow-x:hidden for the 100vw break-out. */
  /* Full-bleed break-out of .help-main's centred 860px column. html/body already carry
     overflow-x:hidden (top of this file) as the safety net for sub-pixel rounding. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Cancel .help-main's top padding so the band starts flush against the subnav. Without this
     there is a strip of page ground between the tab strip and the band, which reads as the band
     having been dropped in rather than being the top of the page. The value tracks
     --help-main-pad-top by inheritance, so the desktop and mobile paddings stay matched. */
  margin-top: calc(-1 * var(--help-main-pad-top));
  padding: var(--v-s10) var(--v-s6) var(--v-s10);
  /* Room for the backdrop's overhang to land in. The fade tail lives in this margin, so it is
     finishing over empty page rather than under the first card. */
  margin-bottom: calc(var(--v-s10) + var(--v-s10));
}

/* EVERYTHING VISUAL LIVES ON ::before, and that is what lets the fade be long.
 *
 * The first version masked the .help-hero element itself. A mask on an element masks its CHILDREN
 * too, so the dissolve was taking the heading, the search box and the Popular links down with it -
 * which forced it to hold at full strength until 84% and then fall off a cliff in the last 16%.
 * That cliff is the abruptness. Painting the band on a backdrop layer instead frees the fade to run
 * over the bottom two-thirds, and the text stays crisp at 100% the whole way down.
 *
 * The contours' left-to-right fade is baked into the SVG (tools/gen_help_hero_art.php) rather than
 * applied here, because an element gets exactly one mask and this one is spent on the vertical. */
.help-hero:not(.help-hero--compact)::before {
  content: "";
  position: absolute;
  /* Hangs 80px BELOW the band. The dissolve was previously confined to the band's own box, so
     however smooth the alpha ramp was it still had to reach zero at a fixed line - and a gradient
     that ends exactly where the box ends reads as an edge. With the overhang the tail finishes in
     the margin underneath, over white page, and there is no line to find. */
  inset: 0 0 -80px 0;
  z-index: -1;
  background-image:
    /* ?v= is a CONTENT HASH, not decoration. This stylesheet is cache-busted by filemtime; the SVG
       inside it is not, so retuning the art without bumping this leaves returning visitors on the
       old copy. tools/gen_help_hero_art.php prints the current value every time it runs. */
    url("/assets/brand/help-hero-contours.svg?v=768d1911"),
    radial-gradient(62% 130% at 90% -6%, rgba(112, 82, 236, .34), transparent 62%),
    linear-gradient(104deg, #0B2559 0%, #14459F 32%, #1E5AD0 60%, #3179EA 100%);
  background-size: cover, auto, auto;
  background-position: left bottom, center, center;
  background-repeat: no-repeat;
  /* Eased, not linear: a straight ramp reads as a visible edge travelling down the band, because
     perceived brightness is not linear in alpha. The extra stops front-load the hold and stretch
     the tail. */
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%, #000 26%,
    rgba(0,0,0,.98) 38%, rgba(0,0,0,.93) 48%, rgba(0,0,0,.84) 57%,
    rgba(0,0,0,.70) 65%, rgba(0,0,0,.54) 73%, rgba(0,0,0,.38) 80%,
    rgba(0,0,0,.23) 87%, rgba(0,0,0,.11) 93%, rgba(0,0,0,.04) 97%, transparent 100%);
  mask-image: linear-gradient(180deg,
    #000 0%, #000 26%,
    rgba(0,0,0,.98) 38%, rgba(0,0,0,.93) 48%, rgba(0,0,0,.84) 57%,
    rgba(0,0,0,.70) 65%, rgba(0,0,0,.54) 73%, rgba(0,0,0,.38) 80%,
    rgba(0,0,0,.23) 87%, rgba(0,0,0,.11) 93%, rgba(0,0,0,.04) 97%, transparent 100%);
}

/* Fixed light values, not --v-* tokens: this band is a brand surface that stays dark in both
   themes, so its text is pinned to it rather than to the page's ink tokens. Same reasoning the
   topbar block at the top of this file records for its hardcoded colours. */
.help-hero:not(.help-hero--compact) h1 { color: #fff; }
.help-hero:not(.help-hero--compact) p { color: rgba(255, 255, 255, .82); }
.help-hero:not(.help-hero--compact) .help-hero__popular-label { color: rgba(255, 255, 255, .48); }
.help-hero:not(.help-hero--compact) .help-hero__chip { color: rgba(255, 255, 255, .94); }
.help-hero:not(.help-hero--compact) .help-hero__chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
}
.help-hero:not(.help-hero--compact) .help-hero-search__box {
  border-color: transparent;
  box-shadow: 0 24px 50px -24px rgba(3, 12, 42, .8), 0 2px 6px rgba(3, 12, 42, .24);
}
.help-hero:not(.help-hero--compact) .help-hero-search__box:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 24px 50px -24px rgba(3, 12, 42, .8);
}

@media (max-width: 600px) {
  .help-hero:not(.help-hero--compact) {
    padding: var(--v-s8) var(--v-s4) var(--v-s10);
  }
}

.help-hero h1 {
  font-family: var(--v-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--v-ink);
  margin: 0 0 var(--v-s3);
  text-wrap: balance;
}

.help-hero p {
  font-size: 15px;
  color: var(--v-muted);
  margin: 0;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ---------- Action cards ---------- */

.help-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--v-s5);
}

.help-card {
  display: block;
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-lg);
  padding: var(--v-s5);
  box-shadow: var(--v-sh-xs);
  color: var(--v-ink);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

a.help-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--v-sh-md);
  border-color: var(--v-border-strong);
}

.help-card h2 {
  font-family: var(--v-display);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--v-ink);
}

.help-card p {
  font-size: 13.5px;
  color: var(--v-muted);
  margin: 0;
  line-height: 1.55;
}

.help-card--soon {
  cursor: default;
  opacity: .6;
}

.help-card--soon h2::after {
  content: "Soon";
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--v-muted);
  background: var(--v-surface-2);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-pill);
  padding: 2px 8px;
  vertical-align: middle;
}

/* ---------- Buttons (shared with any form pages under /help/*) ---------- */

.help-main button,
.help-main input[type="submit"] {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  background: var(--v-primary);
  border: 1px solid var(--v-primary);
  border-radius: var(--v-r-md);
  padding: 9px 16px;
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}

.help-main button:hover,
.help-main input[type="submit"]:hover {
  background: var(--v-primary-hover);
  border-color: var(--v-primary-hover);
}

.help-main button:active,
.help-main input[type="submit"]:active { transform: translateY(1px); }

.help-main button:focus-visible,
.help-main input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: var(--v-ring);
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
  .help-hero h1 { font-size: 26px; }
  .help-main { --help-main-pad-top: var(--v-s6); padding: var(--help-main-pad-top) var(--v-s4) var(--v-s8); }

  /* The section strip is a non-wrapping flex row of four links plus the availability line, and it
     had nothing to stop it setting a min-content width. On a phone that pushed the LAYOUT VIEWPORT
     out past the device: measured on a 390px window the viewport resolved to 485px because this row
     wanted 512px, so every help page - the ticket thread included - sat sideways-scrolled with its
     right edge off screen. The row scrolls itself now instead of widening the document. */
  .help-subnav__inner {
    gap: var(--v-s4);
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .help-subnav__inner::-webkit-scrollbar { display: none; }
  .help-subnav__link { white-space: nowrap; flex: 0 0 auto; }
  .help-availability { flex: 0 0 auto; margin-left: auto; padding-left: var(--v-s3); }
}

@media (prefers-color-scheme: dark) {
  /* No overrides needed here: volantis-theme.css already flips the --v-* token
     values for dark mode, and every rule above reads colors through those tokens. */
}

/* ==========================================================================
   My tickets + ticket thread (help/tickets.php, help/ticket.php)
   ========================================================================== */

.help-hero--compact { padding: var(--v-s3) 0 var(--v-s6); }

.help-back {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--v-muted);
  margin-bottom: var(--v-s4);
}
.help-back:hover { color: var(--v-ink); }

.help-flash { margin-bottom: var(--v-s5); }

/* ---------- Status chips (shared: ticket list rows + thread header) ---------- */

.help-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: var(--v-r-pill);
  padding: 3px 10px;
  white-space: nowrap;
}
.help-chip--new,
.help-chip--open    { background: var(--v-blue-50);    color: var(--v-primary); }
.help-chip--pending  { background: var(--v-warning-bg); color: var(--v-warning-ink); }
.help-chip--solved   { background: var(--v-success-bg); color: var(--v-success-ink); }
.help-chip--closed   { background: var(--v-surface-2);  color: var(--v-muted); }

/* ---------- My tickets list ---------- */

.help-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* was flex-end, which orphaned the lone button */
  margin-bottom: var(--v-s4);
}
.help-list-head__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--v-muted);
}

.help-new-btn {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--v-primary);
  border-radius: var(--v-r-md);
  padding: 8px 14px;
}
/* `color` is not redundant here. volantis-theme.css sets a global `a:hover { color:
   var(--v-primary-hover) }` at (0,1,1), which outranks this button's own `color:#fff` at (0,1,0) -
   so on hover the label turned the SAME colour as the background this rule paints, and "New ticket"
   rendered as a blank blue pill. A <button> would not have this problem; the theme rule only
   matches anchors. */
.help-new-btn:hover { background: var(--v-primary-hover); color: #fff; }

.help-empty {
  text-align: center;
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-lg);
  padding: var(--v-s8) var(--v-s5);
  color: var(--v-muted);
}
.help-empty p { margin: 0 0 var(--v-s4); }

.help-tickets { display: flex; flex-direction: column; gap: var(--v-s3); }

.help-ticket-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--v-s4);
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-lg);
  padding: var(--v-s4) var(--v-s5);
  color: var(--v-ink);
  transition: transform .1s ease, box-shadow .1s ease, border-color .1s ease;
}
.help-ticket-row:hover { transform: translateY(-1px); box-shadow: var(--v-sh-sm); border-color: var(--v-border-strong); }
.help-ticket-row__ref { font-family: var(--v-mono); font-size: 12px; color: var(--v-muted); }
.help-ticket-row__subject { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-ticket-row__time { font-size: 12px; color: var(--v-faint); white-space: nowrap; }

@media (max-width: 600px) {
  .help-ticket-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
  .help-ticket-row__ref { grid-row: 2; }
  .help-ticket-row__time { display: none; }
}

/* ---------- Ticket thread header ---------- */

.help-thead { margin-bottom: var(--v-s5); }
.help-thead__top { display: flex; align-items: center; gap: var(--v-s3); margin-bottom: var(--v-s2); }
.help-thead__ref { font-family: var(--v-mono); font-size: 12.5px; color: var(--v-muted); }
.help-thead__subject { font-family: var(--v-display); font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--v-ink); }
.help-thead__meta { font-size: 13px; color: var(--v-muted); }

/* ---------- Thread (public messages only) ---------- */

.help-thread {
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-lg);
  padding: var(--v-s5);
  box-shadow: var(--v-sh-xs);
  display: flex;
  flex-direction: column;
  gap: var(--v-s5);
  margin-bottom: var(--v-s5);
}

.help-msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--v-s3); }
.help-msg__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--v-display); font-size: 12px; font-weight: 600; color: #fff;
  background: var(--v-blue-600); /* staff shown to the customer as "Volantis Support" - flat brand */
}
/* Flat neutral initials for the customer's own avatar (no AI-looking gradient). */
.help-msg__avatar[data-kind="user"] { background: #EAEEF5; color: var(--v-ink-2); }
.help-msg__main { min-width: 0; }
.help-msg__head { display: flex; align-items: center; gap: var(--v-s2); margin-bottom: 5px; }
.help-msg__author { font-weight: 600; font-size: 13.5px; color: var(--v-ink); }
.help-msg__tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--v-primary);
  background: var(--v-blue-50);
  border-radius: var(--v-r-pill);
  padding: 2px 7px;
}
.help-msg__time { margin-left: auto; font-size: 12px; color: var(--v-faint); }
.help-msg__body {
  font-size: 14px; line-height: 1.6; color: var(--v-ink-2);
  white-space: pre-wrap; word-break: break-word;
  background: var(--v-surface-2); border: 1px solid var(--v-border);
  border-radius: var(--v-r-md); padding: var(--v-s3) var(--v-s4);
}
.help-msg--staff .help-msg__body { background: var(--v-blue-50); border-color: var(--v-blue-100); }

/* ---------- Reply composer ---------- */

.help-composer {
  background: var(--v-surface);
  border: 1px solid var(--v-border-strong);
  border-radius: var(--v-r-lg);
  padding: var(--v-s4);
  margin-bottom: var(--v-s6);
}
.help-composer textarea {
  width: 100%; min-height: 88px; resize: vertical;
  border: none; background: transparent; color: var(--v-ink);
  font-family: inherit; font-size: 14px; line-height: 1.6; padding: 0 0 var(--v-s2);
}
.help-composer textarea:focus { outline: none; }
.help-composer__bar { display: flex; align-items: center; gap: var(--v-s3); padding-top: var(--v-s2); border-top: 1px solid var(--v-border); }
.help-composer__error { font-size: 12.5px; color: var(--v-danger-ink); flex: 1; }

.help-closed-note { font-size: 13.5px; color: var(--v-muted); margin-bottom: var(--v-s6); }

/* ---------- CSAT rating ---------- */

.help-rate {
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-lg);
  padding: var(--v-s5);
  text-align: center;
}
.help-rate h2 { font-family: var(--v-display); font-size: 16px; margin: 0 0 4px; }
.help-rate p { font-size: 13.5px; color: var(--v-muted); margin: 0 0 var(--v-s4); }
.help-rate--done p { margin: 0; }

.help-rate__stars { display: flex; justify-content: center; gap: 6px; margin-bottom: var(--v-s4); }
.help-star {
  appearance: none; background: none; border: none; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--v-border-strong);
  transition: color .1s ease, transform .06s ease;
}
.help-star:hover { transform: scale(1.1); }
.help-star.is-active { color: var(--v-warning); }

.help-rate textarea {
  width: 100%; max-width: 420px; min-height: 64px; resize: vertical;
  border: 1px solid var(--v-border); border-radius: var(--v-r-md);
  background: var(--v-surface-2); color: var(--v-ink);
  font-family: inherit; font-size: 13.5px; padding: var(--v-s3);
  margin: 0 auto var(--v-s3); display: block;
}
.help-rate .help-composer__bar { border-top: none; justify-content: center; padding-top: 0; }

/* ==========================================================================
   Message composer (help/new.php) - framed as starting a conversation, not filing a form.
   ========================================================================== */

.help-compose {
  max-width: 640px;
  margin: 0 auto var(--v-s8);
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-xl);
  padding: var(--v-s6);
  box-shadow: var(--v-sh-sm);
}

.help-compose .help-availability--inline { margin-bottom: var(--v-s5); }

.help-compose__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v-s4);
}
.help-compose .v-field { margin-bottom: var(--v-s4); }

.help-compose__msg { min-height: 128px; }

.help-compose__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s4);
  margin-top: var(--v-s5);
}
.help-compose__hint { font-size: 12.5px; color: var(--v-muted); }

.help-compose__send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--v-primary);
  background: var(--v-primary);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: var(--v-r-md);
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.help-compose__send svg { width: 17px; height: 17px; }
.help-compose__send:hover { background: var(--v-primary-hover); border-color: var(--v-primary-hover); }
.help-compose__send:active { transform: translateY(1px); }
.help-compose__send:focus-visible { outline: none; box-shadow: var(--v-ring); }

@media (max-width: 600px) {
  .help-compose__row { grid-template-columns: 1fr; }
  .help-compose__foot { flex-direction: column-reverse; align-items: stretch; }
  .help-compose__send { justify-content: center; }
}

/* ==========================================================================
   Knowledge base (help/kb.php, help/article.php)
   ========================================================================== */

.kb-section-title {
  font-family: var(--v-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--v-ink);
  margin: 0 0 var(--v-s4);
}

/* Category headings carry their own count and a rule running out to the margin, so the page reads as
   a contents page you can scan rather than one long undifferentiated stack of identical cards. */
/* --v-s8, not --v-s7: the scale is 1,2,3,4,5,6,8,10 and there is no s7, so an invalid var() there
   drops the declaration and the categories run straight into each other. */
.kb-cat { margin-bottom: var(--v-s8); }
.kb-cat__title {
  display: flex;
  align-items: center;
  gap: var(--v-s3);
  font-family: var(--v-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--v-ink);
  margin: 0 0 var(--v-s4);
}
.kb-cat__title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--v-border);
}
.kb-cat__count {
  flex: 0 0 auto;
  order: 1;                       /* sits before the rule, right after the title */
  font-family: var(--v-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--v-muted);
  background: var(--v-surface-2);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-pill);
  padding: 2px 9px;
}
.kb-cat__title::after { order: 2; }

.kb-article-list {
  display: flex;
  flex-direction: column;
  gap: var(--v-s3);
}

.kb-result {
  display: block;
  position: relative;
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-lg);
  padding: var(--v-s4) calc(var(--v-s5) + 22px) var(--v-s4) var(--v-s5);
  color: var(--v-ink);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.kb-result:hover {
  transform: translateY(-2px);
  box-shadow: var(--v-sh-md);
  border-color: var(--v-border-strong);
}
/* A chevron that says "this opens something", drawn rather than typed so it cannot be selected with
   the article text. It is always present at low contrast and slides on hover - a row that only shows
   its affordance on hover gives a touch user nothing at all. */
.kb-result::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--v-s5);
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.6px solid var(--v-faint);
  border-top: 1.6px solid var(--v-faint);
  transform: rotate(45deg);
  transition: transform .14s ease, border-color .14s ease;
}
.kb-result:hover::after {
  border-color: var(--v-primary);
  transform: rotate(45deg) translate(2px, -2px);
}

.kb-result__title {
  font-family: var(--v-display);
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--v-ink);
}
.kb-result:hover .kb-result__title { color: var(--v-primary); }

.kb-result__snippet {
  font-size: 13px;
  color: var(--v-muted);
  margin: 0;
  line-height: 1.55;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Single article ---------- */

/* No card chrome. The article IS the page now - a bordered, shadowed panel only made sense while
   it was floating on a tinted ground, and the .kb-article-view__cat pill it used to open with was
   replaced by the breadcrumb. */
/* No measure cap. The article used to sit at 68ch - the textbook reading width - which on a
   1440px screen left 173px of empty page each side and read as squished. It now fills whatever
   column it is given: .help-main's 860px on an article with no contents rail, and the wide
   break-out below when there is one. The trade is line length: ~110 characters at the widest,
   past the comfortable 60-90 range, which is why the line-height stays at 1.7 to keep the eye
   from losing its place on the return sweep. */
.kb-article-view {
  overflow-wrap: break-word;
}

.kb-article-view__title {
  font-family: var(--v-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--v-ink);
  margin: 0;
  text-wrap: balance;
}

/* The prose treatment itself lives on .kb-article (below), which is SHARED with the staff editor's
   live preview via desk.css - so it is not touched here. These declarations are the reading change,
   and they apply only to the public article page.
   TWO CLASSES, not one: the element carries `kb-article-view__body kb-article`, and .kb-article is
   defined LATER in this file. At equal specificity the later rule wins, so a single-class selector
   here silently lost and the body stayed at 14.5px in a 72ch column. */
.kb-article-view__body.kb-article { font-size: 17px; max-width: none; }
.kb-article-view__body h2,
.kb-article-view__body h3 {
  /* Anchored headings: without this, following a contents link puts the heading flush against the
     top of the viewport with nothing above it to show you have arrived somewhere. */
  scroll-margin-top: var(--v-s6);
}

/* ---------- Rendered article prose (.kb-article: the safe-markdown output of kb_render_body(),
   shared by help/article.php and mirrored into desk.css for the staff editor's live preview) ---------- */

.kb-article {
  max-width: 72ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--v-ink-2);
  overflow-wrap: break-word;
}

.kb-article h2,
.kb-article h3 {
  font-family: var(--v-display);
  font-weight: 600;
  color: var(--v-ink);
  line-height: 1.3;
  text-wrap: balance;
}
.kb-article h2 { font-size: 20px; margin: var(--v-s6) 0 var(--v-s3); }
.kb-article h3 { font-size: 16.5px; margin: var(--v-s5) 0 var(--v-s3); }
.kb-article h2:first-child,
.kb-article h3:first-child { margin-top: 0; }

.kb-article p { margin: 0 0 var(--v-s4); }
.kb-article p:last-child { margin-bottom: 0; }

.kb-article a { color: var(--v-primary); text-decoration: underline; text-underline-offset: 2px; }
.kb-article a:hover { color: var(--v-primary-hover); }

.kb-article strong { color: var(--v-ink); font-weight: 600; }

.kb-article ul,
.kb-article ol {
  margin: 0 0 var(--v-s4);
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kb-article li { padding-left: 2px; }
.kb-article li::marker { color: var(--v-muted); }

.kb-article blockquote {
  margin: 0 0 var(--v-s4);
  padding: var(--v-s3) var(--v-s4);
  border-left: 3px solid var(--v-primary);
  background: var(--v-surface-2);
  border-radius: 0 var(--v-r-md) var(--v-r-md) 0;
  color: var(--v-ink-2);
}
.kb-article blockquote p:last-child { margin-bottom: 0; }

.kb-article code {
  font-family: var(--v-mono);
  font-size: 0.92em;
  background: var(--v-surface-2);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-sm);
  padding: 1px 6px;
}

.kb-article pre {
  margin: 0 0 var(--v-s4);
  background: var(--v-surface-2);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-md);
  padding: var(--v-s4);
  overflow-x: auto;
}
.kb-article pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
}

.kb-article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--v-r-md);
  display: block;
  margin: var(--v-s4) 0;
}

@media (max-width: 600px) {
  .kb-article { max-width: 100%; }
}

/* ---------- Helpful vote ---------- */

.kb-vote {
  text-align: center;
  background: var(--v-surface-2);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-md);
  padding: var(--v-s5);
  margin: var(--v-s8) 0 0;
}
.kb-vote__prompt { font-size: 13.5px; font-weight: 600; color: var(--v-ink); margin: 0 0 var(--v-s3); }
.kb-vote__thanks { font-size: 13.5px; color: var(--v-muted); margin: 0; }
.kb-vote__form { display: flex; justify-content: center; gap: var(--v-s3); }

.kb-still-need-help {
  text-align: center;
  font-size: 13px;
  color: var(--v-muted);
}
.kb-still-need-help a { color: var(--v-primary); font-weight: 600; }

@media (max-width: 600px) {
  .kb-article-view { padding: var(--v-s5) var(--v-s4); }
  .kb-article-view__title { font-size: 22px; }
}

/* ==========================================================================
   Gradient hero + live search (help/index.php, help/kb.php)
   ========================================================================== */

/* ---------- Home / library hero, on white ----------
   No band, no gradient, no motion. The hero is now just the top of the page: the question, the
   search box, and the three things people look for most. The blue band that was here (a full-bleed
   50%-50vw break-out carrying a generated line field, two drifting ribbon layers and an SVG grain
   filter) was removed on 2026-08-30 - it read as a marketing landing page rather than a help
   centre. It is in the promotion snapshots if it is ever wanted back. ---------- */

.help-hero__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.help-hero__popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--v-s3);
  margin-top: var(--v-s6);
  min-height: 22px;          /* holds the row height while the suggestions dropdown is open */
}

.help-hero__popular-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--v-faint);
}

/* Plain text links. On a white ground a filled chip is a button, and these are not buttons. */
.help-hero__chip {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--v-primary);
  text-decoration: none;
}
.help-hero__chip:hover { text-decoration: underline; }
.help-hero__chip:focus-visible { outline: none; box-shadow: var(--v-ring); border-radius: var(--v-r-sm); }

.help-hero.is-suggesting .help-hero__popular { visibility: hidden; }

/* ---------- Hero search box: white field with a leading magnifier + a nested Search button.
   Soft 16px outer radius with a 10px inner button radius (not a pill-in-a-pill, which looked
   crammed) so the button sits cleanly inside the field. ---------- */

.help-hero-search {
  position: relative;
  max-width: 600px;
  margin: var(--v-s6) auto 0;
}

/* A white field on a white page needs an edge. The old rule had none - it relied entirely on a
   heavy drop shadow to lift it off the blue band, and both the shadow and the white focus ring
   read as nothing now. */
.help-hero-search__box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--v-surface);
  border: 1px solid var(--v-border-strong);
  border-radius: 12px;
  padding: 7px 7px 7px 15px;
  box-shadow: var(--v-sh-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.help-hero-search__box:focus-within {
  border-color: var(--v-primary);
  box-shadow: var(--v-ring);
}

.help-hero-search__icon {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  color: var(--v-faint);
}

.help-hero-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--v-sans);
  font-size: 15px;
  color: var(--v-ink);
  padding: 12px 0;
}
.help-hero-search__input::placeholder { color: var(--v-faint); }

.help-hero-search__btn {
  flex: 0 0 auto;
  appearance: none;
  cursor: pointer;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: var(--v-primary);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 0 22px;
  transition: background .15s ease;
}
.help-hero-search__btn:hover { background: var(--v-primary-hover); }
/* Was a white ring, for contrast against the blue band. Invisible on white; use the brand ring. */
.help-hero-search__btn:focus-visible { outline: none; box-shadow: var(--v-ring); }

.help-hero-search__suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-lg);
  box-shadow: var(--v-sh-lg);
  text-align: left;
  z-index: 30;
  max-height: 340px;
  overflow-y: auto;
}

.help-hero-search__item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--v-r-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--v-ink);
}
.help-hero-search__item a::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  opacity: .35;
  -webkit-mask: var(--help-doc-icon) center/contain no-repeat;
  mask: var(--help-doc-icon) center/contain no-repeat;
}
.help-hero-search__item a:hover,
.help-hero-search__item.is-active a {
  background: var(--v-blue-50);
  color: var(--v-primary);
}
.help-hero-search__item a:hover::before,
.help-hero-search__item.is-active a::before { opacity: .8; }

/* Small document glyph for suggestion rows (inline data-URI so there is no extra request). */
.help-hero-search {
  --help-doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='13' y2='17'/%3E%3C/svg%3E");
}

/* ---------- Featured article (help/index.php) ---------- */

.kb-featured { margin-bottom: var(--v-s8); }

.kb-featured__eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v-muted);
  margin-bottom: var(--v-s3);
}

.kb-featured__card {
  display: block;
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-xl);
  padding: var(--v-s6);
  color: var(--v-ink);
  transition: border-color .12s ease, background .12s ease;
}
.kb-featured__card:hover {
  border-color: var(--v-border-strong);
  background: var(--v-surface-2);
}

.kb-featured__card h2 {
  font-family: var(--v-display);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 var(--v-s2);
  color: var(--v-ink);
}

.kb-featured__card p {
  font-size: 14px;
  color: var(--v-muted);
  margin: 0 0 var(--v-s3);
  line-height: 1.6;
}

.kb-featured__cta { font-size: 13px; font-weight: 600; color: var(--v-primary); }

/* ---------- Home category card grid (help/index.php) ---------- */

.kb-home-cat { margin-bottom: var(--v-s8); }

.kb-home-cat__title {
  font-family: var(--v-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--v-ink);
  margin: 0 0 var(--v-s4);
}

.kb-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--v-s4);
}

.kb-home-card {
  display: block;
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-lg);
  padding: var(--v-s4) var(--v-s5);
  color: var(--v-ink);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.kb-home-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--v-sh-md);
  border-color: var(--v-border-strong);
}

.kb-home-card h3 {
  font-family: var(--v-display);
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--v-ink);
}
.kb-home-card:hover h3 { color: var(--v-primary); }

.kb-home-card p {
  font-size: 13px;
  color: var(--v-muted);
  margin: 0;
  line-height: 1.55;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Browse by topic (help/index.php only): category tiles, NOT an article dump.
   This is what distinguishes the home landing from /help/kb.php (the full article library). ---------- */

.help-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v-s4);
  margin: 0 0 var(--v-s4);
}
.help-section__title {
  font-family: var(--v-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--v-ink);
  margin: 0;
}
.help-section__link { font-size: 13px; font-weight: 600; color: var(--v-primary); white-space: nowrap; }
.help-section__link:hover { color: var(--v-primary-hover); }

.help-topics { margin-bottom: var(--v-s8); }

.help-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: var(--v-s4);
}

.help-topic {
  display: flex;
  align-items: center;
  gap: var(--v-s4);
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-lg);
  padding: var(--v-s4) var(--v-s5);
  color: var(--v-ink);
  transition: border-color .12s ease, background .12s ease;
}
.help-topic:hover {
  border-color: var(--v-border-strong);
  background: var(--v-surface-2);
}

.help-topic__badge {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--v-primary);
  background: var(--v-blue-50);
  border: 1px solid var(--v-blue-100);
}
.help-topic__badge svg { width: 21px; height: 21px; }

.help-topic__body { min-width: 0; }
.help-topic__name {
  display: block;
  font-family: var(--v-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--v-ink);
  margin: 0 0 1px;
}
.help-topic:hover .help-topic__name { color: var(--v-primary); }
.help-topic__count { display: block; font-size: 12.5px; color: var(--v-muted); }

.help-topic__arrow {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--v-faint);
  font-size: 17px;
  transition: transform .12s ease, color .12s ease;
}
.help-topic:hover .help-topic__arrow { color: var(--v-primary); transform: translateX(2px); }

/* ---------- Contact band (help/index.php): the "get to a human" call to action ---------- */

.help-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s5);
  /* Was a cyan radial wash over the surface. It was the last blue field on the page after the hero
     band went, and on a white ground it read as a stain rather than as depth. */
  background: var(--v-surface-2);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-xl);
  padding: var(--v-s6);
  margin-bottom: var(--v-s6);
}
.help-contact__body { min-width: 0; }
.help-contact__title {
  font-family: var(--v-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--v-ink);
  margin: 0 0 3px;
}
.help-contact__sub { font-size: 13.5px; color: var(--v-muted); margin: 0; line-height: 1.55; }

.help-contact__actions { display: flex; gap: var(--v-s3); flex-wrap: wrap; flex: 0 0 auto; }
.help-contact__btn {
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--v-r-md);
  padding: 10px 18px;
  white-space: nowrap;
  color: #fff;
  background: var(--v-primary);
  border: 1px solid var(--v-primary);
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
/* Same trap as .help-new-btn:hover above - the theme's a:hover would otherwise repaint this
   label to match the background. border-color does NOT count as pinning the text colour. */
.help-contact__btn:hover { background: var(--v-primary-hover); border-color: var(--v-primary-hover); color: #fff; }
.help-contact__btn:active { transform: translateY(1px); }
.help-contact__btn--ghost {
  color: var(--v-ink-2);
  background: var(--v-surface);
  border-color: var(--v-border-strong);
}
.help-contact__btn--ghost:hover { background: var(--v-surface-2); border-color: var(--v-muted); }

@media (max-width: 600px) {
  .help-hero-search__box { padding-left: 14px; gap: 8px; }
  .help-hero-search__btn { padding: 0 15px; font-size: 13px; }
  .help-contact { flex-direction: column; align-items: flex-start; }
  .help-contact__actions { width: 100%; }
  .help-contact__btn { flex: 1; justify-content: center; }
}

/* The gradient band's dark-mode note and its animation-pause rule lived here. Both went with the
   band on 2026-08-30: the hero is now ordinary --v-* surfaces and text, which theme themselves, and
   there is no animation left to pause. The IntersectionObserver that toggled .is-paused was removed
   from assets/support/help.js in the same change rather than left observing an element that no
   longer exists. */

/* ── Contact wizard (help/new.php) ─────────────────────────────────────────
   The hide rule is scoped to .is-stepped, which assets/support/wizard.js adds.
   With no JavaScript the class never lands, every step renders stacked, and the
   page is the plain form it used to be. Do not move this rule off .is-stepped. */
.help-wiz.is-stepped .help-wiz__step { display: none; }
.help-wiz.is-stepped .help-wiz__step.is-current { display: block; }
.help-wiz__step + .help-wiz__step { margin-top: var(--v-s5); }

.help-wiz__q {
  font-family: var(--v-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--v-ink);
  margin: 0 0 var(--v-s4);
}
.help-wiz__q:focus { outline: none; }

.help-wiz__progress { display: flex; align-items: center; gap: var(--v-s3); margin-bottom: var(--v-s5); }
.help-wiz__progress-track {
  flex: 1; height: 4px; border-radius: var(--v-r-pill);
  background: var(--v-border); overflow: hidden;
}
.help-wiz__progress-fill {
  display: block; height: 100%; width: 0;
  background: var(--v-primary); border-radius: var(--v-r-pill);
  transition: width .22s ease;
}
.help-wiz__progress-label { font-size: 12.5px; color: var(--v-muted); white-space: nowrap; }

.help-wiz__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v-s3); }
@media (max-width: 560px) { .help-wiz__tiles { grid-template-columns: 1fr; } }

.help-wiz__tile { position: relative; display: block; cursor: pointer; }
.help-wiz__tile input {
  position: absolute; opacity: 0; width: 1px; height: 1px;   /* focusable, not visible */
}
.help-wiz__tile-label {
  display: block; padding: 16px 18px;
  border: 1px solid var(--v-border); border-radius: var(--v-r-md);
  background: var(--v-surface); color: var(--v-ink); font-weight: 500;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.help-wiz__tile-name { display: block; }
.help-wiz__tile-hint {
  display: block; margin-top: 3px;
  font-size: 12.5px; font-weight: 400; color: var(--v-muted);
}
.help-wiz__tile:hover .help-wiz__tile-label { border-color: var(--v-border-strong); background: var(--v-surface-2); }
.help-wiz__tile input:checked + .help-wiz__tile-label {
  border-color: var(--v-primary); background: var(--v-blue-50); color: var(--v-primary);
}
.help-wiz__tile input:focus-visible + .help-wiz__tile-label { box-shadow: var(--v-ring); }

.help-wiz__drop {
  margin-top: var(--v-s3); padding: 14px 16px;
  border: 1px dashed var(--v-border-strong); border-radius: var(--v-r-md);
  background: var(--v-surface-2);
}
.help-wiz__drop.is-over { border-color: var(--v-primary); background: var(--v-blue-50); }
.help-wiz__drop-cta { cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--v-ink-2); }
.help-wiz__drop-cta span { color: var(--v-muted); font-weight: 400; }
.help-wiz__drop-preview { display: flex; align-items: center; gap: var(--v-s3); margin-top: var(--v-s3); }
.help-wiz__thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--v-r-sm); }
.help-wiz__thumb-name { font-size: 13px; color: var(--v-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Scoped past `.help-main button` (help.css:395), which paints EVERY bare button in the help
   centre as a filled primary. That rule is (0,1,1); a lone .help-wiz__thumb-rm is (0,1,0) and
   loses to it, so this quiet text button would render as a blue "Remove" call to action. Same
   reason for the .help-wiz__nav and .help-availability scoping below - do not flatten these. */
.help-wiz__drop-preview .help-wiz__thumb-rm {
  margin-left: auto; border: none; background: none; padding: 4px 6px;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--v-danger-ink); cursor: pointer;
}
.help-wiz__drop-preview .help-wiz__thumb-rm:hover { background: none; text-decoration: underline; }

.help-wiz__suggest {
  margin-bottom: var(--v-s5); padding: 16px 18px;
  border: 1px solid var(--v-border); border-radius: var(--v-r-md); background: var(--v-surface-2);
}
.help-wiz__suggest-title { margin: 0 0 var(--v-s2); font-size: 13.5px; font-weight: 600; color: var(--v-ink-2); }
.help-wiz__suggest-list { list-style: none; margin: 0; padding: 0; }
.help-wiz__suggest-list li + li { margin-top: 6px; }
.help-wiz__suggest-list a { color: var(--v-primary); text-decoration: none; font-size: 14px; }
.help-wiz__suggest-list a:hover { text-decoration: underline; }
.help-wiz__suggest-out { display: inline-block; margin-top: var(--v-s3); font-size: 12.5px; color: var(--v-muted); }

.help-wiz__next { font-size: 13.5px; color: var(--v-ink-2); margin: 0 0 var(--v-s4); }
.help-wiz__err { margin: var(--v-s3) 0 0; font-size: 13px; color: var(--v-danger-ink); }

.help-wiz__nav { display: flex; gap: var(--v-s3); margin-top: var(--v-s5); }
.help-wiz__nav .help-wiz__back, .help-wiz__nav .help-wiz__next-btn {
  font: inherit; font-size: 14px; font-weight: 500; padding: 10px 20px;
  border-radius: var(--v-r-md); cursor: pointer; transition: background .15s ease;
}
.help-wiz__nav .help-wiz__back {
  border: 1px solid var(--v-border); background: var(--v-surface); color: var(--v-ink-2);
}
.help-wiz__nav .help-wiz__back:hover { background: var(--v-surface-2); border-color: var(--v-border-strong); }
.help-wiz__nav .help-wiz__next-btn {
  margin-left: auto; border: 1px solid var(--v-primary); background: var(--v-primary); color: #fff;
}
.help-wiz__nav .help-wiz__next-btn:hover { background: var(--v-primary-hover); border-color: var(--v-primary-hover); }
.help-wiz__nav .help-wiz__back:focus-visible,
.help-wiz__nav .help-wiz__next-btn:focus-visible { outline: none; box-shadow: var(--v-ring); }

/* The screen-reader-only label used on the message box, whose question is the step heading. */
.v-label--sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Scoped past `.help-main button` (help.css:395) for the same reason as .help-wiz__nav above:
   this is a quiet inline link, not a filled primary button. */
.help-availability .help-availability__chat {
  /* Its own row inside the wrapping badge, at every width. Sharing row one with the status
     sentence means the two compete for space: the sentence is long, the link is unbreakable, and
     at narrow widths they overlap. A full-basis row is predictable and needs no breakpoint. */
  flex: 0 0 100%;
  margin: 5px 0 0; padding: 0; border: 0; background: none;
  font: inherit; font-size: inherit; font-weight: 600; text-align: left;
  color: var(--v-primary); text-decoration: underline; cursor: pointer;
}
.help-availability .help-availability__chat:hover { background: none; color: var(--v-primary-hover); }
.help-availability .help-availability__chat:focus-visible {
  outline: none; box-shadow: var(--v-ring); border-radius: var(--v-r-sm);
}

/* ── Article page: breadcrumb, meta, contents, related ─────────────────────
   The prose itself is styled by .kb-article above (shared with the staff editor preview via
   desk.css); everything here is the documentation furniture around it. */

.kb-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-s2);
  font-size: 13px; color: var(--v-muted); margin-bottom: var(--v-s5);
}
.kb-crumbs a { color: var(--v-muted); text-decoration: none; }
.kb-crumbs a:hover { color: var(--v-ink); text-decoration: underline; }
.kb-crumbs__sep { color: var(--v-faint); }
.kb-crumbs__here { color: var(--v-ink-2); font-weight: 500; }

.kb-article-meta {
  display: flex; flex-wrap: wrap; gap: var(--v-s2) var(--v-s4);
  font-size: 13px; color: var(--v-muted);
  margin: var(--v-s3) 0 var(--v-s6); padding-bottom: var(--v-s5);
  border-bottom: 1px solid var(--v-border);
}

/* NO CONTENTS RAIL. An "On this page" list was built here and removed on 2026-08-30.
   It could not coexist with the page frame: the rail needed horizontal room, which forced the
   article out of .help-main and onto a different left edge from the breadcrumb and the nav
   above it. The article is a single column in the page column now.

   Headings keep their ids (kb_heading_id in includes/support/kb.php), so #anchor deep links
   still work - that never depended on the rail. */

.kb-related { margin-top: var(--v-s8); padding-top: var(--v-s5); border-top: 1px solid var(--v-border); }
.kb-related__title { font-family: var(--v-display); font-size: 15px; font-weight: 600; color: var(--v-ink); margin: 0 0 var(--v-s3); }
.kb-related ul { list-style: none; margin: 0; padding: 0; }
.kb-related li { margin-bottom: 8px; }
.kb-related a { color: var(--v-primary); text-decoration: none; font-size: 14.5px; }
.kb-related a:hover { text-decoration: underline; }

.kb-still-need-help { margin-top: var(--v-s6); }

@media (max-width: 600px) {
  .kb-article-view__title { font-size: 25px; }
  /* Two classes, matching the desktop rule above - a single-class selector here loses to it and
     the phone silently kept the 17px desktop size. */
  .kb-article-view__body.kb-article { font-size: 16px; }
}

/* The vote buttons carry .v-btn.v-btn-secondary, which is (0,1,0) and therefore LOSES to
   `.help-main button` (0,1,1) at help.css:395 - so "Yes / No" rendered as two filled blue primary
   buttons, reading as a call to action rather than a quiet pair of choices. Same trap as
   .help-wiz__nav and .help-availability__chat above. Scoped to win it back. */
.kb-vote__form .v-btn-secondary {
  background: var(--v-surface);
  color: var(--v-ink);
  border: 1px solid var(--v-border-strong);
  min-width: 72px;
}
.kb-vote__form .v-btn-secondary:hover {
  background: var(--v-surface-2);
  border-color: var(--v-muted);
  color: var(--v-ink);
}

/* The submit button once wizard.js has moved it into the last step's nav row. Two classes because
   the no-JS page still renders it inside .help-compose__foot, where the footer's own layout
   applies and this rule must not. */
.help-wiz__nav .help-wiz__submit { margin-left: auto; }

/* With the button gone from the footer, the hint stops being one half of a split row and becomes a
   line of its own sitting above the nav. Only under .is-stepped: with no JavaScript the button is
   still down there and the footer must keep its original two-up layout. */
.help-wiz.is-stepped .help-compose__foot {
  display: block;
  border-top: none;
  padding-top: 0;
  margin-bottom: var(--v-s3);
}