/* support.css: the Concierge desk (/support/ and /es/soporte/).
   Every selector is scoped under body[data-floor="concierge"]. Tokens only (site.css); gold is decoration only.
   The FAQ is plain <details>/<summary>: it opens and closes with no JavaScript. support.js (optional) opens the
   entry a #hash points at. The open/closed state is shown by the chevron's direction and announced by the
   browser (expanded / collapsed), never by colour alone. */

/* ---------------------------------------------------------------- page head */
body[data-floor="concierge"] .desk-head__bell {
  display: block;
  width: 3.25rem;
  height: auto;
  margin-block-end: var(--s-3);
}
body[data-floor="concierge"] .desk-head .lede { max-width: 40rem; }

/* ---------------------------------------------------------------- front desk: contact + topic directory */
body[data-floor="concierge"] .desk-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 56rem) {
  body[data-floor="concierge"] .desk-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
body[data-floor="concierge"] .desk-card h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); }
body[data-floor="concierge"] .desk-card .doors { margin-block: var(--s-3) var(--s-2); }
body[data-floor="concierge"] .desk-door__use {
  margin: 0.35rem 0 var(--s-3);
  padding-inline-start: 0.25rem;
  font-size: var(--t-subhead);
  color: var(--ink-2);
}
body[data-floor="concierge"] .desk-include {
  margin: var(--s-2) 0 var(--s-3);
  padding-inline-start: 1.25em;
  color: var(--ink-2);
}
body[data-floor="concierge"] .desk-include li { margin-block-end: 0.35rem; }
body[data-floor="concierge"] .desk-caution {
  margin: 0;
  padding: 0.75rem 0.9rem;
  font-size: var(--t-subhead);
  color: var(--ink-1);
  border: 1px solid var(--mark-2);
  border-inline-start-width: 4px;
  border-radius: var(--radius-1);
  background: var(--fill-4);
}

body[data-floor="concierge"] .desk-topics__title {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-1);
}
body[data-floor="concierge"] .desk-topics ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--deco-gold-line);
}
body[data-floor="concierge"] .desk-topics li { margin: 0; border-block-end: 1px solid var(--deco-gold-faint); }
body[data-floor="concierge"] .desk-topics a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  min-height: 3.25rem;
  padding: 0.5rem 0.25rem;
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
body[data-floor="concierge"] .desk-topics__desc {
  font-size: var(--t-subhead);
  font-weight: 400;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- FAQ groups */
body[data-floor="concierge"] .faq-group + .faq-group { border-block-start: 1px solid var(--deco-gold-faint); }
body[data-floor="concierge"] .faq-group__intro {
  max-width: min(44rem, 56ch);           /* about 75 characters per line at most on desktop */
  margin: 0 0 var(--s-4);
  color: var(--ink-2);
}
body[data-floor="concierge"] .faq {
  max-width: 50rem;
  margin: 0;
  border-block-start: 1px solid var(--mark-3);
}
body[data-floor="concierge"] .faq__item { border-block-end: 1px solid var(--mark-3); }
body[data-floor="concierge"] .faq__item > summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 3.25rem;
  padding: 0.75rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-weight: 650;
  font-size: 1.0625em;
  line-height: 1.35;
  color: var(--ink-1);
  border-radius: var(--radius-1);
}
body[data-floor="concierge"] .faq__item > summary::-webkit-details-marker { display: none; }
body[data-floor="concierge"] .faq__item > summary::marker { content: ""; }
body[data-floor="concierge"] .faq__item > summary::after {      /* chevron: down = closed, up = open */
  content: "";
  flex: 0 0 auto;
  width: 0.55em;
  height: 0.55em;
  margin-inline-start: auto;
  margin-inline-end: 0.35rem;
  border-inline-end: 2px solid var(--brand-accent);
  border-block-end: 2px solid var(--brand-accent);
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--dur-disclosure) ease-in-out;
}
body[data-floor="concierge"] .faq__item[open] > summary::after { transform: translateY(0.15em) rotate(-135deg); }
body[data-floor="concierge"] .faq__item > summary:hover { color: var(--ink-1); text-decoration: underline; text-decoration-color: var(--brand-accent); text-underline-offset: 0.2em; }
body[data-floor="concierge"] .faq__item > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
body[data-floor="concierge"] .faq__item:target > summary { text-decoration: underline; text-decoration-color: var(--deco-gold); text-underline-offset: 0.2em; }

body[data-floor="concierge"] .faq__body {
  max-width: 44rem;
  padding: 0 0.25rem var(--s-4);
  color: var(--ink-2);
}
body[data-floor="concierge"] .faq__body > * + * { margin-block-start: 0.75em; }
body[data-floor="concierge"] .faq__body :is(p, si-p),
body[data-floor="concierge"] .faq__body ul,
body[data-floor="concierge"] .faq__body ol { margin-block-end: 0; }
body[data-floor="concierge"] .faq__body ul,
body[data-floor="concierge"] .faq__body ol { padding-inline-start: 1.35em; }
body[data-floor="concierge"] .faq__body li + li { margin-block-start: 0.4em; }
body[data-floor="concierge"] .faq__body strong { color: var(--ink-1); font-weight: 650; }
body[data-floor="concierge"] .faq__body .pairs { margin-block: var(--s-2) 0; }
body[data-floor="concierge"] .faq__body .price-disclosure { max-width: none; font-size: 1em; }
body[data-floor="concierge"] .faq__more { font-size: var(--t-subhead); }

/* In-app labels and paths ("About › Account settings… › Delete account"): words, weight and the › mark carry it. */
body[data-floor="concierge"] .ui { font-weight: 650; color: var(--ink-1); }
body[data-floor="concierge"] .ui-path { font-weight: 650; color: var(--ink-1); }
body[data-floor="concierge"] .ui-path .sep { padding-inline: 0.2em; color: var(--deco-gold); font-weight: 400; }
body[data-floor="concierge"] .ui-quote { color: var(--ink-1); font-style: italic; }

/* The "what we don't do" list: a hollow square glyph beside each line (decor; the words carry the meaning). */
body[data-floor="concierge"] .notdo-list { list-style: none; padding-inline-start: 0; }
body[data-floor="concierge"] .notdo-list li { position: relative; padding-inline-start: 1.6em; }
body[data-floor="concierge"] .notdo-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.1em;
  inset-block-start: 0.45em;
  width: 0.7em;
  height: 0.7em;
  border: 2px solid var(--mark-2);
  background: linear-gradient(45deg, transparent 43%, var(--mark-2) 43% 57%, transparent 57%);
}

/* Privacy and terms: three document cards */
body[data-floor="concierge"] .desk-docs { margin-block-end: var(--s-5); }
@media (min-width: 48rem) {
  body[data-floor="concierge"] .desk-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body[data-floor="concierge"] .desk-docs h3 { font-size: 1.375rem; }
body[data-floor="concierge"] .desk-docs :is(p, si-p) { color: var(--ink-2); }
/* The cards' cross-links stand alone, so each gets a full 44 px touch target. */
body[data-floor="concierge"] .desk-docs .card__cta a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

@media (prefers-reduced-motion: reduce) {
  body[data-floor="concierge"] .faq__item > summary::after { transition: none; }
}
html[data-motion="off"] body[data-floor="concierge"] .faq__item > summary::after { transition: none; }

@media (forced-colors: active) {
  body[data-floor="concierge"] .faq__item > summary::after { border-color: CanvasText; }
  body[data-floor="concierge"] .notdo-list li::before { border-color: CanvasText; background: none; }
}