/* ==========================================================================
   themes/support.css — Apex Holding · Support world
   PURPOSE: The world-specific layer for the Help Center hub (support/index.html)
   and every guide page under support/guides/. Support is where the design gets
   out of the way: high clarity, generous whitespace, action-blue interactives,
   almost no atmosphere.

   SCOPE DISCIPLINE
   - This file NEVER redefines a --w-* semantic token. tokens.css owns those.
   - It adds support-only constructs, and retunes a handful of SHARED components
     through the knobs those components already expose (--btn-bg and friends).
     Every retune is here for one reason: contrast. On the support ground
     (#101826) --w-accent lands at 4.0:1, which is fine for fills and large text
     but fails AA for the small uppercase type inside .btn--primary and an active
     .chip. Those two swap to --w-accent-soft (#7FB3DC, 7.9:1 against the ground)
     so the most-used controls on the calmest page are also the most legible.
   - Everything else is a new class owned entirely by this file.

   INVENTORY
     Hub      .scope-note  .route-grid  .action-grid .action-block .action-card
              .action-note .subject-list .subject-list__link
              .support-toolbar .support-search .filter-bar .support-count
              .guide-grid .guide-card__summary .support-empty
              .faq .faq__heading  .escalate
     Guides   .guide-page .breadcrumb .guide-head .guide-summary
              .needs .steps .step .step__marker .step__body .step__title
              .callout .callout--warning .related

   Loaded LAST of the six stylesheets, after motion.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. SHARED-COMPONENT RETUNES (contrast only — see the header note)
   Prefixed with [data-world="support"] so the intent reads at the selector and
   so these always out-specify the base component rules they are correcting.
   -------------------------------------------------------------------------- */

/* Filled buttons carry small uppercase utility type. On this ground that needs
   the lifted accent behind it, not the base accent. */
[data-world="support"] .btn--primary {
  --btn-bg: var(--w-accent-soft);
  --btn-line: var(--w-accent-soft);
  --btn-fg: var(--w-base);
  --btn-rule: var(--w-base);
}

[data-world="support"] .btn--primary:hover,
[data-world="support"] .btn--primary:focus-visible {
  --btn-bg: color-mix(in srgb, var(--w-accent-soft) 78%, var(--w-text));
  --btn-line: color-mix(in srgb, var(--w-accent-soft) 78%, var(--w-text));
}

/* An active filter chip is the same problem: small uppercase text on a fill. */
[data-world="support"] .chip--active,
[data-world="support"] .chip[aria-pressed="true"] {
  background-color: var(--w-accent-soft);
  border-color: var(--w-accent-soft);
  color: var(--w-base);
}

[data-world="support"] .chip--active:hover,
[data-world="support"] .chip[aria-pressed="true"]:hover {
  background-color: color-mix(in srgb, var(--w-accent-soft) 78%, var(--w-text));
  border-color: color-mix(in srgb, var(--w-accent-soft) 78%, var(--w-text));
}


/* --------------------------------------------------------------------------
   2. PAGE RHYTHM
   Support pages are read, not toured. Bands sit a little closer together than
   the portal's cinematic spacing, and the reading column is wider than .prose
   because guides carry lists and steps as well as sentences.
   -------------------------------------------------------------------------- */

[data-world="support"] {
  --section-space: var(--space-10);
  /* Comfortable measure for support running text — wider than --maxw-prose,
     narrower than --maxw-content. */
  --support-measure: 52rem;
}

/* components.css styles running copy inside a section head with `.section__head p`
   (0,1,1), which out-specifies `.eyebrow` (0,1,0) — an eyebrow placed in a
   section head, which is exactly where eyebrows belong, would be repainted as
   dim body copy at the wrong size. Restore its own type. Scoped to this world
   so it corrects support pages without reaching into anyone else's. */
[data-world="support"] .section__head .eyebrow {
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--w-accent-soft);
}


/* --------------------------------------------------------------------------
   3. SCOPE NOTE
   The single most important sentence on the page: what this Help Center is for
   and, more usefully, what it is not for. Given a left accent rule and a raised
   surface so it cannot be skimmed past.
   -------------------------------------------------------------------------- */

.scope-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7);
  border: 1px solid var(--w-line);
  border-inline-start: 3px solid var(--w-accent);
  border-radius: var(--radius-md);
  background-color: var(--w-surface);
}

.scope-note__title {
  font-family: var(--font-utility);
  font-size: var(--step--1);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--w-accent-soft);
}

.scope-note__text {
  max-width: var(--support-measure);
  font-size: var(--step-1);
  line-height: var(--lh-body);
  color: var(--w-text);
}


/* --------------------------------------------------------------------------
   4. ROUTE GRID — the three world hand-offs
   Uses the shared .route-card surface. The only additions are the stretched
   link (so the whole card is one target) and the trailing arrow.
   -------------------------------------------------------------------------- */

.route-grid {
  --grid-min: 17rem;
}

/* The routing cards belong to the scope statement above them, so the gap is
   owned by the pair rather than set at either call site. */
.scope-note + .route-grid {
  margin-block-start: var(--space-6);
}

.route-grid .route-card {
  position: relative;
  justify-content: space-between;
}

.route-card__text {
  font-size: var(--step--1);
  line-height: var(--lh-body);
  color: var(--w-text-dim);
}

.route-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  min-height: 2.75rem;
  color: var(--w-accent-soft);
  font-family: var(--font-utility);
  font-size: var(--step--1);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-decoration: none;
}

/* Stretch the call to action over the whole card. The link text stays the
   accessible name, so the target grows without the label getting vaguer. */
.route-card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
}

.route-card__cta > span {
  transition: transform var(--dur-micro) var(--ease-out-soft);
}

.route-card:hover .route-card__cta > span,
.route-card:focus-within .route-card__cta > span {
  transform: translateX(4px);
}


/* --------------------------------------------------------------------------
   5. PRIMARY ACTIONS
   Two enormous targets — call and email — then the six subject templates that
   pre-route an email before it is written.
   -------------------------------------------------------------------------- */

.action-grid {
  --grid-min: 20rem;
}

.action-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.action-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon label"
    "icon value";
  align-items: center;
  column-gap: var(--space-5);
  row-gap: var(--space-1);
  min-height: 6rem;
  padding: var(--space-6);
  border: 1px solid var(--w-line);
  border-radius: var(--radius-md);
  background-color: var(--w-surface);
  color: var(--w-text);
  text-decoration: none;
  transition:
    background-color var(--dur-micro) var(--ease-out-soft),
    border-color var(--dur-micro) var(--ease-out-soft),
    transform var(--dur-micro) var(--ease-out-soft);
}

.action-card:hover,
.action-card:focus-visible {
  background-color: var(--w-surface-2);
  border-color: var(--w-accent);
  transform: translateY(-2px);
}

.action-card__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--w-accent) 18%, transparent);
  color: var(--w-accent-soft);
}

.action-card__icon > svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.action-card__label {
  grid-area: label;
  font-family: var(--font-utility);
  font-size: var(--step--1);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--w-text-dim);
}

/* The number and the address are data. Mono, tabular, no letter-spacing games —
   they have to be read aloud down a phone line and typed by hand. */
.action-card__value {
  grid-area: value;
  font-family: var(--font-utility);
  font-size: var(--step-1);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-normal);
  font-variant-numeric: tabular-nums;
  color: var(--w-text);
  overflow-wrap: anywhere;
}

.action-note {
  font-size: var(--step--1);
  line-height: var(--lh-body);
  color: var(--w-text-dim);
}


/* --- Subject templates ------------------------------------------------- */

.action-grid + .subject-block {
  margin-block-start: var(--space-6);
}

.subject-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--w-line);
  border-radius: var(--radius-md);
  background-color: var(--w-base-2);
}

.subject-block__title {
  font-family: var(--font-utility);
  font-size: var(--step--1);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--w-accent-soft);
}

.subject-list {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.subject-list__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--w-text);
  font-size: var(--step-0);
  text-decoration: none;
  transition:
    background-color var(--dur-micro) var(--ease-out-soft),
    border-color var(--dur-micro) var(--ease-out-soft),
    color var(--dur-micro) var(--ease-out-soft);
}

/* Leading mono chevron, decorative — the link text carries the meaning. */
.subject-list__link::before {
  content: "→";
  flex: none;
  color: var(--w-accent-soft);
  font-family: var(--font-utility);
}

.subject-list__link:hover,
.subject-list__link:focus-visible {
  background-color: var(--w-surface);
  border-color: var(--w-accent);
  color: var(--w-text);
}


/* --------------------------------------------------------------------------
   6. GUIDE LIBRARY
   support.js reads the data-hooks in this region: [data-support-search],
   [data-support-filter], [data-support-count], [data-support-empty] and each
   .guide-card's data-guide-category / data-guide-keywords.
   -------------------------------------------------------------------------- */

.support-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-block-end: var(--space-7);
}

.support-search {
  max-width: 30rem;
}

.support-search .field__input {
  /* A search field on the calmest page in the system should look like the one
     thing you are meant to touch. */
  background-color: var(--w-surface);
  font-size: var(--step-1);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.support-count {
  font-family: var(--font-utility);
  font-size: var(--step--1);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--w-text-dim);
}

.guide-grid {
  --grid-min: 20rem;
}

/* .guide-card, .guide-card__title and .guide-card__meta come from
   components.css. Only the summary line and the stretched link are new. */
.guide-card__summary {
  font-size: var(--step--1);
  line-height: var(--lh-body);
  color: var(--w-text-dim);
}

/* Colour and decoration already come from base.css's a:where([class]) reset.
   All this adds is the stretch, so the whole card is one target while the
   link text stays the accessible name. */
.guide-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* No visible result. Deliberately styled as a calm statement rather than an
   error — nothing has gone wrong, the query is simply too narrow. */
.support-empty {
  padding: var(--space-8);
  border: 1px dashed var(--w-line);
  border-radius: var(--radius-md);
  color: var(--w-text-dim);
  text-align: center;
}


/* --------------------------------------------------------------------------
   7. FAQ
   The accordion component itself lives in components.css and is driven by
   support.js.

   ONE DELIBERATE OVERRIDE, and the reasoning matters because it is the only
   place in this file that argues with a shared component.

   components.css collapses .accordion__panel with a grid 0fr → 1fr animation
   keyed off `.accordion__trigger[aria-expanded="true"] + .accordion__panel`.
   support.js animates the panel's own height instead. Running both means two
   mechanisms fighting over one box, and that sibling selector would also forbid
   wrapping each trigger in a heading — which the FAQ needs, so the questions
   are reachable from a screen reader's heading list.

   So under .js the panel becomes an ordinary block and support.js is the sole
   owner of open/close. Visibility keys off the [hidden] ATTRIBUTE rather than
   a class, because support.js sets .is-open and aria-expanded at the START of a
   close but only sets hidden once the height animation has finished — keying off
   anything else would clip the answer away instantly and the close would never
   be seen.

   The 9 panels ship with [hidden] in the markup, so with scripting on the
   browser collapses them before first paint and nothing flashes open. With
   scripting off, nothing can ever remove that attribute — hence the
   html:not(.js) rule, which puts every answer back on the page. An author
   display declaration outranks the UA's [hidden] { display: none }.
   -------------------------------------------------------------------------- */

.faq {
  max-width: var(--support-measure);
}

.js .faq .accordion__panel {
  display: block;
}

.js .faq .accordion__panel[hidden] {
  display: none;
}

/* No script: every answer is simply part of the page. */
html:not(.js) .faq .accordion__panel {
  display: block;
}

/* The grid collapse is off here, so the panel's child no longer needs to clip.
   Left in place it would shave the focus ring off any link that starts a line.
   support.js reinstates clipping on the panel itself while it animates. */
.js .faq .accordion__panel > * {
  overflow: visible;
}

/* The trigger is wrapped in an h3 so the FAQ is navigable by heading. The
   heading is a semantic container only — the button owns the type. */
.faq__heading {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

.faq__answer {
  padding-block-end: var(--space-6);
  max-width: var(--maxw-prose);
}

.faq__answer > * + * {
  margin-block-start: var(--space-4);
}

.faq__answer p {
  color: var(--w-text-dim);
}


/* --------------------------------------------------------------------------
   8. ESCALATION BANNER
   The last thing on every support page: if the page failed you, here are two
   humans. One soft accent wash is the entire atmosphere budget.
   -------------------------------------------------------------------------- */

.escalate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-9) var(--space-6);
  border: 1px solid var(--w-line);
  border-radius: var(--radius-lg);
  background-color: var(--w-surface);
  background-image: radial-gradient(
    110% 130% at 0% 0%,
    color-mix(in srgb, var(--w-accent) 20%, transparent),
    transparent 60%
  );
  text-align: center;
}

.escalate__title {
  font-size: var(--step-3);
}

.escalate__text {
  max-width: 44ch;
  color: var(--w-text-dim);
}

.escalate__actions {
  justify-content: center;
}

/* Guide pages add one quiet way back to the hub beneath the two loud ones. */
.escalate__back {
  font-size: var(--step--1);
  color: var(--w-text-dim);
}


/* ==========================================================================
   9. GUIDE PAGES  (support/guides/*.html)
   Built from _guide-template.html. One readable column, a breadcrumb home, a
   numbered step list, optional callouts, related guides, escalation footer.
   ========================================================================== */

.guide-page {
  max-width: var(--support-measure);
}

.guide-page > * + * {
  margin-block-start: var(--space-8);
}


/* --- Breadcrumb --------------------------------------------------------
   Deliberately NOT a <nav>. The site contract allows exactly one nav landmark
   per page and chrome.js's primary navigation owns it; a second one only adds
   noise to a landmark list. The ordered list still conveys the hierarchy. */

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-utility);
  font-size: var(--step--1);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--w-text-dim);
}

.breadcrumb__list li + li::before {
  content: "/";
  padding-inline-end: var(--space-3);
  color: var(--w-line);
}

.breadcrumb__list a {
  color: var(--w-accent-soft);
  text-decoration: none;
}

.breadcrumb__list a:hover {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}


/* --- Head + summary ---------------------------------------------------- */

.guide-head > * + * {
  margin-block-start: var(--space-4);
}

.guide-summary {
  font-size: var(--step-1);
  line-height: var(--lh-body);
  color: var(--w-text-dim);
}


/* --- "What you will need" ---------------------------------------------- */

.needs {
  padding: var(--space-6);
  border: 1px solid var(--w-line);
  border-radius: var(--radius-md);
  background-color: var(--w-base-2);
}

.needs__title {
  margin-block-end: var(--space-4);
  font-family: var(--font-utility);
  font-size: var(--step--1);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--w-accent-soft);
}

.needs__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.needs__list li {
  display: flex;
  gap: var(--space-3);
  color: var(--w-text);
}

/* Decorative tick. The list semantics already say "these are the items". */
.needs__list li::before {
  content: "▪";
  flex: none;
  color: var(--w-accent-soft);
  font-family: var(--font-utility);
  line-height: var(--lh-body);
}


/* --- Numbered steps ----------------------------------------------------
   The marker number is a CSS counter, not typed into the markup, so a guide
   author can add, delete or reorder steps in the template without renumbering
   anything by hand. The <ol> already carries the real numbering for assistive
   technology, which is why the visible marker is aria-hidden. */

.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  counter-reset: apex-step;
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  counter-increment: apex-step;
}

.step__marker {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--w-accent);
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--w-accent) 14%, transparent);
  color: var(--w-accent-soft);
  font-family: var(--font-utility);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.step__marker::before {
  content: counter(apex-step, decimal-leading-zero);
}

.step__body > * + * {
  margin-block-start: var(--space-3);
}

.step__title {
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-normal);
  color: var(--w-text);
}

.step__body p {
  color: var(--w-text-dim);
}


/* --- Callouts ----------------------------------------------------------
   Two tones. The warning tone is carried by the Apex champagne (--w-accent-2)
   rather than a red, because nothing in a support guide is an emergency and a
   red rule on a blue page reads as a system error. */

.callout {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--w-line);
  border-inline-start: 3px solid var(--w-accent);
  border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--w-accent) 8%, var(--w-surface));
}

.callout__title {
  font-family: var(--font-utility);
  font-size: var(--step--1);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--w-accent-soft);
}

.callout p {
  color: var(--w-text);
}

.callout--warning {
  border-inline-start-color: var(--w-accent-2);
  background-color: color-mix(in srgb, var(--w-accent-2) 10%, var(--w-surface));
}

.callout--warning .callout__title {
  color: var(--w-accent-2);
}


/* --- Related guides ---------------------------------------------------- */

.related {
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--w-line);
}

.related__title {
  margin-block-end: var(--space-4);
  font-family: var(--font-utility);
  font-size: var(--step--1);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--w-accent-soft);
}

.related__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.related__list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  margin-inline-start: calc(var(--space-3) * -1);
  border-radius: var(--radius-sm);
  color: var(--w-text);
  text-decoration: none;
  transition:
    background-color var(--dur-micro) var(--ease-out-soft),
    color var(--dur-micro) var(--ease-out-soft);
}

.related__list a::before {
  content: "→";
  flex: none;
  color: var(--w-accent-soft);
  font-family: var(--font-utility);
}

.related__list a:hover,
.related__list a:focus-visible {
  background-color: var(--w-surface);
  color: var(--w-accent-soft);
}


/* --------------------------------------------------------------------------
   10. NARROW VIEWPORTS
   -------------------------------------------------------------------------- */

@media (max-width: 40em) {
  .scope-note,
  .subject-block,
  .needs {
    padding: var(--space-5);
  }

  .action-card {
    column-gap: var(--space-4);
    padding: var(--space-5);
  }

  .escalate {
    padding: var(--space-7) var(--space-5);
  }

  .escalate__actions {
    inline-size: 100%;
  }

  .steps {
    gap: var(--space-6);
  }

  .step {
    gap: var(--space-4);
  }
}


/* --------------------------------------------------------------------------
   11. REDUCED MOTION
   motion.css collapses every duration globally; these rules remove the two
   TRANSFORMS this file introduces, so state still changes but nothing travels.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .action-card,
  .route-card__cta > span,
  .subject-list__link,
  .related__list a {
    transition: none;
  }

  .action-card:hover,
  .action-card:focus-visible,
  .route-card:hover .route-card__cta > span,
  .route-card:focus-within .route-card__cta > span {
    transform: none;
  }
}