/* Small, user-opened notes. Each customer demo keeps its own visual language. */
.personalization-note {
  --note-ink: #ead9b9;
  --note-copy: #c3b9cd;
  --note-line: #dcc49a33;
  --note-surface: #dcc49a08;
  --note-focus: #f0ca86;
  width: 100%;
  max-width: 640px;
  min-width: 0;
  margin: 20px 0;
  border: 1px solid var(--note-line);
  border-radius: 13px;
  background: var(--note-surface);
  color: var(--note-ink);
  font-family: inherit;
  text-align: left;
  overflow-wrap: anywhere;
}

.personalization-note > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 4px 12px;
  align-items: center;
  min-height: 58px;
  padding: 12px 15px;
  list-style: none;
  cursor: pointer;
}

.personalization-note > summary::-webkit-details-marker { display: none; }
.personalization-note > summary::marker { content: ''; }
.personalization-note > summary:focus-visible { outline: 2px solid var(--note-focus); outline-offset: 4px; border-radius: 11px; }
.personalization-note > summary:hover { background: var(--note-surface); border-radius: 12px; }
.personalization-note .personalization-label { grid-column: 1; font-size: .8125rem; line-height: 1.45; font-weight: 560; letter-spacing: 0; }
.personalization-note .personalization-topics { grid-column: 1; color: var(--note-copy); font-size: .75rem; line-height: 1.5; font-weight: 400; letter-spacing: 0; }
.personalization-note .personalization-toggle { grid-column: 2; grid-row: 1 / 3; position: relative; display: block; width: 24px; height: 24px; border: 1px solid var(--note-line); border-radius: 50%; font-size: 0; line-height: 1; transform-origin: center; }
/* Draw around the circle's centre, independent of the font's glyph baseline. */
.personalization-note .personalization-toggle::before,
.personalization-note .personalization-toggle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); }
.personalization-note .personalization-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.personalization-note[open] .personalization-toggle { transform: rotate(45deg); }
.personalization-note .personalization-toggle {
  transition: transform 320ms cubic-bezier(.22, .75, .25, 1);
}

.personalization-note > .personalization-note-body {
  padding: 0 15px 15px;
  color: var(--note-copy);
  font-size: .875rem;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: 0;
}
.personalization-note .personalization-scope { display: block; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--note-line); font-size: .75rem; line-height: 1.65; }

.personalization-note[data-note-tone="light"] {
  --note-ink: #393b33;
  --note-copy: #626459;
  --note-line: #2526202b;
  --note-surface: #77766806;
  --note-focus: #575e45;
  border-radius: 3px;
}
.personalization-note[data-note-tone="light"] > summary:focus-visible,
.personalization-note[data-note-tone="light"] > summary:hover { border-radius: 2px; }
.hero-copy .personalization-note { margin: 18px 0 0; max-width: 390px; }
.collection > .personalization-note { margin: -16px 0 28px; max-width: 620px; }
.brand-note .personalization-note { margin: 18px 0 0; }
.demo-intro > .personalization-note { max-width: 620px; }
.result-heading > .personalization-note { max-width: 620px; }

@media (max-width: 700px) {
  .personalization-note { margin-block: 18px; }
  .personalization-note > summary { padding: 11px 12px; gap: 4px 8px; }
  .personalization-note > .personalization-note-body { padding: 0 12px 13px; font-size: .8125rem; line-height: 1.75; }
  .personalization-note .personalization-scope { font-size: .75rem; }
  .collection > .personalization-note { margin-top: -7px; margin-bottom: 25px; }
}

/* Keep native details semantics while easing both opening and closing. */
@supports selector(details::details-content) and (transition-behavior: allow-discrete) {
  .personalization-note::details-content {
    display: grid;
    grid-template-rows: 0fr;
    overflow: clip;
    opacity: 0;
    transition: grid-template-rows 320ms cubic-bezier(.22, .75, .25, 1),
                opacity 240ms ease,
                content-visibility 320ms allow-discrete;
  }
  .personalization-note[open]::details-content {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .personalization-note > .personalization-note-body {
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
    transition: padding-bottom 320ms cubic-bezier(.22, .75, .25, 1);
  }
  .personalization-note[open] > .personalization-note-body { padding-bottom: 15px; }
  @media (max-width: 700px) {
    .personalization-note[open] > .personalization-note-body { padding-bottom: 13px; }
  }
}

.is-reduced .personalization-note::details-content { transition: none; }
.is-reduced .personalization-note > .personalization-note-body,
.is-reduced .personalization-note .personalization-toggle { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .personalization-note::details-content { transition: none; }
  .personalization-note > .personalization-note-body,
  .personalization-note .personalization-toggle { transition: none; }
}