/* ===================================
   BENEFIT DETAIL LIST
   The "Tarifleistungen" detail list of a tariff (benefit-detail-list.ejs), ported one to one from
   the app's customer-contract-benefit-details.component.scss in its default density: bd-*, one
   hairline row per area with icon, title, refund, meta line, chevron, the info button and the
   sub-benefit drawer; the description line stays hidden, the info button explains the area; the
   tariff-note lines under the list. The app's rem values are written as px at its 16 px root
   (0.98 rem = 15.68 px), so the 18 px root of the campaign host does not scale them.
   The list renders twice on the tariff page: inside the tariff card (benefit-board.css) and as an
   open block in the basics section (tariff-basics.css). This stylesheet is linked wherever the
   partial renders, so it owns everything both instances share: the --tp-* token set of the tariff
   card family on both roots (.tariff-board, .tariff-detail-list), the chevron, the screen-reader
   text and the drawer mechanics. The campaign host (.bb-site) re-colours the tokens with
   --ui-accent; :where() keeps the specificity flat.
   Mobile first: the base rules are the narrow layout of the app (its container query below
   360 px: the refund under the title), the one-line row comes through min-width.
   =================================== */

/* --- Tokens of the tariff card family: the app's values as defaults --- */
.tariff-board,
.tariff-detail-list {
  /* Ink and lines of the card footer (tariff-details-panel: --offer-*). */
  --tp-ink: #17262b;
  --tp-muted: #5b6b72;
  --tp-line: rgba(0, 0, 0, 0.06);
  --tp-hover: #f3f7f7;
  /* Mint of the app: tile value, chips, toggles (#147a70), its soft tint and the light mint of the ladder. */
  --tp-mint: #147a70;
  --tp-mint-soft: #e6f3f1;
  --tp-mint-light: #24ada2;
  --tp-mint-rgb: 20, 122, 112;
  /* Tiles (_tiles.scss): covered on a soft mint tint, excluded or unstated on a light grey. */
  --tp-tile-bg: #eef7f5;
  --tp-tile-bg-hover: #e3f1ee;
  --tp-tile-label: rgba(23, 38, 43, 0.66);
  --tp-tile-grey-bg: #eef1f2;
  --tp-tile-grey-bg-hover: #e4e9ea;
  --tp-tile-grey-ink: #7d878c;
  --tp-tile-grey-label: rgba(23, 38, 43, 0.5);
  /* The luminous green of the "ohne Limit" pill and the highlight check circles. */
  --tp-green: #10b981;
  --tp-green-rgb: 16, 185, 129;
  /* The bold GOZ highlight text. */
  --tp-goz-ink: #0b5f5a;
  /* Detail list and ladder (customer-contract-benefit-details, customer-benefit-ladder). */
  --tp-detail-ink: #1a1a2e;
  --tp-detail-muted: #5f6b7a;
  --tp-detail-line: rgba(26, 26, 46, 0.08);
  --tp-detail-mint-soft: #e4f5f4;
  --tp-waiting-ok: #1b7a4a;
  --tp-waiting-pending: #a85f00;
  /* The area dialog (benefit-area-info-dialog: --offer-*). */
  --tp-dialog-line: #e3e9ea;
  --tp-dialog-mint: #0d6e68;
  --tp-dialog-mint-rgb: 13, 110, 104;
  --tp-motion: 260ms cubic-bezier(0.2, 0, 0, 1);
}
:where(.bb-site) .tariff-board,
:where(.bb-site) .tariff-detail-list {
  --tp-mint: var(--ui-accent);
  --tp-mint-soft: var(--ui-accent-soft);
  --tp-mint-light: var(--ui-accent-light, var(--ui-accent));
  --tp-tile-bg: color-mix(in srgb, var(--ui-accent) 9%, #fff);
  --tp-tile-bg-hover: color-mix(in srgb, var(--ui-accent) 15%, #fff);
  --tp-green: var(--ui-accent);
  --tp-goz-ink: var(--ui-accent-dark, var(--ui-accent));
  --tp-detail-mint-soft: var(--ui-accent-soft);
  --tp-dialog-mint: var(--ui-accent);
}

/* The partial root: a plain block that resets the tokens for its subtree, so the list looks the
   same inside the card and inside a section with its own --tp-* palette. */
.tariff-detail-list {
  display: block;
  color: var(--tp-ink);
}

.tariff-num {
  font-variant-numeric: tabular-nums;
}

/* Text for screen readers only (the translated labels of icon buttons). */
.tariff-card__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* .chevron: grey, rotating with the open state (the card's footer toggle recolours its own). */
.tariff-card__chevron {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #8a9aa0;
  transition: transform var(--tp-motion), color 180ms ease;
}
[aria-expanded="true"] > .tariff-card__chevron {
  transform: rotate(180deg);
}

/* The sub-benefit drawer: the grid-row trick animates the real content height without measuring it;
   `inert` on the closed drawer keeps its content out of the tab order. */
.bd-area__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--tp-motion);
}
.bd-area__panel.is-open {
  grid-template-rows: 1fr;
}
.bd-area__panel-inner {
  min-height: 0;
  overflow: hidden;
}

/* .tariff-note: the tariff's own note and the exclusion note under the list, 10 px below it. */
.tariff-note {
  font-size: 11px;
}
.bd-list + .tariff-note {
  margin-top: 10px;
}

/* --- Detail list (bd-*, default density): hairline rows, no boxes --- */
/* .bd-lead: the GOZ factor every covered area shares, above the list. */
.bd-lead {
  margin: 16px 0 6px;
  font-size: 14.88px;
  line-height: 1.5;
  color: var(--tp-detail-muted);
}

.bd-list {
  display: flex;
  flex-direction: column;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.bd-lead + .bd-list {
  margin-top: 0;
}

.bd-area + .bd-area {
  border-top: 1px solid var(--tp-detail-line);
}
.bd-area--muted {
  color: var(--tp-detail-muted);
}

/* The head and its info button side by side; the head takes the room, the button keeps its size. */
.bd-area__row {
  display: flex;
  align-items: flex-start;
}

/* Icon down the left; narrow (the app's container query below 360 px): the plain explanation under
   the title, then the refund so long labels and amounts never fight for one line, the meta line last. */
.bd-area__head {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    'icon title title chevron'
    'icon desc desc desc'
    'icon value value value'
    'icon meta meta meta';
  align-items: start;
  column-gap: 10px;
  min-width: 0;
  padding: 10px 2px;
  border-radius: 12px;
  text-align: left;
}
.bd-area__head--button {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
/* The whole row answers the hover; the chevron rotates and recolors with the open state. */
.bd-area__head--button:is(:hover, :focus-visible) {
  background: var(--tp-hover);
}
.bd-area__head--button:focus-visible {
  outline: 3px solid rgba(36, 173, 162, 0.5);
  outline-offset: -3px;
}

.bd-area__icon {
  grid-area: icon;
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.bd-area--muted .bd-area__icon {
  filter: grayscale(1);
  opacity: 0.55;
}

/* The wrapper only groups the two lines for screen readers; the grid places them. */
.bd-area__text {
  display: contents;
}

.bd-area__title {
  grid-area: title;
  align-self: center;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tp-detail-ink);
}
.bd-area--muted .bd-area__title {
  color: var(--tp-detail-muted);
}

/* The plain explanation of the area ("Kronen, Brücken, Implantate …"), readable without opening it. */
.bd-area__description {
  grid-area: desc;
  min-width: 0;
  margin-top: 2px;
  overflow-wrap: anywhere;
  font-size: 12.8px;
  line-height: 1.45;
  color: var(--tp-detail-muted);
}

/* The refund, right-aligned on the title line from 481 px. */
.bd-area__value {
  display: flex;
  grid-area: value;
  gap: 5px;
  align-items: center;
  align-self: center;
  justify-self: start;
  min-width: 0;
  margin-top: 2px;
}

.bd-area__refund {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tp-mint);
}
.bd-area--muted .bd-area__refund {
  font-size: 13.76px;
  font-weight: 500;
  color: var(--tp-detail-muted);
}

/* Limits, factor and waiting time as one quiet line, separated by middle dots. */
.bd-area__meta {
  grid-area: meta;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tp-detail-muted);
}
.bd-area__meta-item {
  display: inline;
}
.bd-area__meta-item + .bd-area__meta-item::before {
  content: '\00b7';
  margin: 0 6px;
  color: rgba(95, 107, 122, 0.6);
}
/* Above the GOZ maximum rate: a short positive chip ("GOZ+", the full wording as tooltip). */
.bd-area__goz {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px 1px 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tp-mint) 12%, transparent);
  color: var(--tp-mint);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
}
.bd-area__goz-icon {
  width: 13px;
  height: 13px;
  flex: none;
}
.bd-area__waiting[data-tone="ok"] {
  color: var(--tp-waiting-ok);
}
.bd-area__waiting[data-tone="pending"] {
  color: var(--tp-waiting-pending);
  font-weight: 500;
}

.bd-area__chevron {
  grid-area: chevron;
  align-self: center;
  width: 22px;
  height: 22px;
  margin: 0 -4px;
  color: var(--tp-detail-muted);
}
.bd-area__head--button[aria-expanded="true"] .bd-area__chevron {
  color: var(--tp-mint);
}
/* A plain row has nothing to open; the slot stays so every row shares the same column geometry. */
.bd-area__chevron--placeholder {
  visibility: hidden;
}

/* .bd-area__info: the info button of an area, a quiet circle on the title line that answers hover in mint. */
.bd-area__info {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 8px 0 0 -2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tp-detail-muted);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.bd-area__info svg {
  width: 18px;
  height: 18px;
}
.bd-area__info:is(:hover, :focus-visible) {
  background: var(--tp-detail-mint-soft);
  color: var(--tp-mint);
}
.bd-area__info:focus-visible {
  outline: 3px solid rgba(36, 173, 162, 0.5);
  outline-offset: 1px;
}
/* On touch screens the small info button keeps its look but answers to a 40 px area around it. */
@media (pointer: coarse) {
  .bd-area__info::after {
    content: '';
    position: absolute;
    inset: -6px;
  }
}

/* Sub-benefits: a quiet drawer aligned with the title column. */
.bd-items {
  margin: 0 4px 12px 42px;
  padding: 2px 10px;
  border-radius: 10px;
  background: rgba(var(--tp-mint-rgb), 0.045);
  list-style: none;
}

.bd-item {
  padding: 8px 0;
}
.bd-item + .bd-item {
  border-top: 1px solid rgba(26, 26, 46, 0.06);
}
.bd-item--uncovered {
  color: var(--tp-detail-muted);
}

.bd-item__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.bd-item__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  hyphens: auto;
  color: var(--tp-detail-ink);
}
.bd-item--uncovered .bd-item__title {
  color: var(--tp-detail-muted);
}

.bd-item__value {
  flex: 0 1 auto;
  max-width: 45%;
  overflow-wrap: anywhere;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--tp-mint);
}
.bd-item--uncovered .bd-item__value {
  font-weight: 500;
  color: var(--tp-detail-muted);
}

.bd-item__note {
  margin: 2px 0 0;
  font-size: 12.8px;
  line-height: 1.4;
  color: var(--tp-detail-muted);
}

/* --- Wider layouts: the one-line row of the app above its 360 px container width --- */
@media (min-width: 481px) {
  .bd-area__head {
    grid-template-areas:
      'icon title value chevron'
      'icon desc meta chevron';
    column-gap: 12px;
    padding: 12px 4px;
  }
  .bd-area__value {
    justify-self: end;
    margin-top: 0;
  }
  .bd-area__icon {
    width: 36px;
    height: 36px;
  }
  .bd-area__title {
    font-size: 15.68px;
  }
  .bd-area__refund {
    font-size: 16.32px;
  }
  .bd-area__description {
    font-size: 13.6px;
  }
  /* Limits, GOZ and waiting sit under the refund they qualify. */
  .bd-area__meta {
    justify-self: end;
    max-width: 220px;
    font-size: 12.5px;
    text-align: right;
  }
  .bd-items {
    margin-left: 52px;
    padding: 2px 12px;
  }
  .bd-item__title,
  .bd-item__value {
    font-size: 14.4px;
  }
  .bd-item__value {
    flex: 0 0 auto;
    max-width: none;
  }
}


@media (prefers-reduced-motion: reduce) {
  .bd-area__panel,
  .bd-area__head--button,
  .bd-area__info,
  .tariff-card__chevron {
    transition: none;
  }
}