/* ==========================================================================
   Switchboard customer UI: feature styles (ADR-0030)
   --------------------------------------------------------------------------
   Only what the design system (Switchboard.Design) doesn't cover, and that
   more than one page shares. Page-only styles live in that page's
   .razor.css. Follows the design-system rules: tokens only, rem units, and
   weights 400/500. The `sb-` prefix marks product (not design-system)
   classes; answer markup keeps the class names AnswerMarkup emits (tested).
   ========================================================================== */

/* ---- Sign-in panel -------------------------------------------------------- */
.sb-login {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.sb-login__lede {
  color: var(--color-text-muted);
}

/* "or" between the code and passkey sign-in, a hairline either side. */
.sb-login__or {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--color-text-subtle);
  font-size: var(--text-caption-size);

  &::before,
  &::after {
    content: "";
    flex: 1;
    border-top: var(--border-hairline);
  }
}

.sb-login__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-12);
}

/* The post-sign-in passkey offer sits above the page, in its own column. */
.sb-nudge:empty {
  display: none;
}

/* ---- Radio lists in dialogs ------------------------------------------------ */
.sb-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.sb-radio-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sb-signed-in {
  margin-top: var(--space-28);
}

/* ---- Answers from the equipment manuals (AnswerMarkup output) -------------- */
.answer p {
  margin: 0 0 var(--space-8);
}

.answer p:last-child {
  margin-bottom: 0;
}

.answer ul,
.answer ol {
  margin: 0 0 var(--space-8);
  padding-left: var(--space-20);
}

.answer li {
  margin-bottom: var(--space-4);
}

.answer__heading {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.cite-ref {
  font-size: 0.7em;
  font-weight: var(--weight-medium);
  color: var(--color-brand-text);
  margin-left: 0.0625rem;
}

/* ---- Numbered manual citations (AnswerCitations) --------------------------- */
.sb-citations {
  margin-top: var(--space-12);
}

.sb-citation__num {
  display: inline-grid;
  place-items: center;
  inline-size: var(--control-sm);
  block-size: var(--control-sm);
  border-radius: var(--radius-full);
  background: var(--color-brand-tint);
  color: var(--color-brand-on-tint);
  font-size: var(--text-caption-size);
  font-weight: var(--weight-medium);
  flex-shrink: 0;
}

.sb-citation__actions {
  display: flex;
  gap: var(--space-8);
}

/* Phones: the source's title needs the width, so View shrinks to its icon (the word stays for screen readers). */
@media (max-width: 37.4375rem) {
  .sb-citation__label {
    position: absolute;
    inline-size: 0.0625rem;
    block-size: 0.0625rem;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---- Document Center browse rows (ManufacturerList, EquipmentTypeList, DocumentsBackLink; ADR-0041) ---- */
.sb-doc-rows li {
  display: flex;
}

/* The portal row is a button; rows read left to right like the links above it. */
.sb-doc-rows .ds-row {
  color: inherit;
  text-align: left;
  text-decoration: none;
}

.sb-doc-rows .ds-row__trailing,
.sb-docs-back__icon {
  color: var(--color-text-muted);
}

.sb-docs-back {
  color: inherit;
  text-decoration: none;
}

.sb-docs-back .ds-row__title {
  white-space: normal;
  overflow-wrap: anywhere;
}