/* A small, useful reward on profile pages: a bookmark with a single soft flourish. */
.profile-heading-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 100%;
  margin-bottom: 16px;
}
.profile-heading-meta .eyebrow {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.profile-save {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  border: 1px solid #dce2ea;
  border-radius: 50%;
  background: #fff;
  color: #697785;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.profile-save .save-bookmark {
  position: relative;
  z-index: 1;
  display: block;
  width: 22px;
  height: 22px;
  fill: transparent;
  stroke: currentColor;
  transition: fill .18s, transform .18s;
}
.profile-save:active { transform: scale(.94); }
.profile-save.is-saved {
  border-color: #cee2fa;
  background: #eaf3ff;
  color: var(--accent);
  box-shadow: inset 0 1px 0 #ffffffb3;
}
.profile-save.is-saved .save-bookmark { fill: currentColor; }
.profile-save-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.save-halo {
  position: absolute;
  z-index: -1;
  inset: -1px;
  border: 1px solid #80b7f4;
  border-radius: inherit;
  background: #dcecff;
  opacity: 0;
  pointer-events: none;
}
.save-sparks { position: absolute; inset: 0; pointer-events: none; }
.save-sparks i {
  --spark-x: -25px;
  --spark-y: -28px;
  position: absolute;
  top: calc(50% - 2px);
  left: calc(50% - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #69a8ec;
  opacity: 0;
}
.save-sparks i:nth-child(2) { --spark-x: 27px; --spark-y: -23px; width: 3px; height: 3px; background: #99c6f6; }
.save-sparks i:nth-child(3) { --spark-x: 29px; --spark-y: 21px; background: #6caeea; }
.save-sparks i:nth-child(4) { --spark-x: -23px; --spark-y: 27px; width: 3px; height: 3px; background: #a8c9ed; }
.profile-save.is-celebrating .save-bookmark { animation: save-spring 650ms cubic-bezier(.22, 1, .36, 1) both; }
.profile-save.is-celebrating .save-halo { animation: profile-save-halo 650ms ease-out both; }
.profile-save.is-celebrating .save-sparks i { animation: profile-save-spark 650ms cubic-bezier(.18, .7, .3, 1) both; }

/* A consistent entry point for the collection, including direct landings. */
.header-tools { display: flex; grid-column: 3; align-items: center; justify-self: end; gap: 8px; min-width: 0; }
.header-tools .lang-switch { grid-column: auto; grid-row: auto; }
.saved-pages { position: relative; flex: 0 0 auto; }
.saved-pages-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink-soft);
  -webkit-tap-highlight-color: transparent;
  transition: color .18s, background .18s, border-color .18s;
}
.saved-pages-toggle svg { display: block; width: 20px; height: 20px; }
.saved-pages-toggle[aria-expanded="true"] { border-color: #d5e5f9; background: #eaf3ff; color: var(--accent); }
.saved-pages-toggle.has-saves { color: var(--accent); }
.saved-pages-toggle.has-saves .save-bookmark { fill: currentColor; }
.saved-count {
  position: absolute;
  top: 0;
  right: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid var(--bg);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.saved-pages-dialog {
  position: fixed;
  inset: 92px max(24px, calc((100vw - 1136px) / 2)) auto auto;
  width: 360px;
  max-width: calc(100% - 32px);
  max-height: min(70vh, 540px);
  margin: 0;
  padding: 10px 20px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #e3e7ed;
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 70px #18304a26, 0 4px 18px #18304a0a;
}
.saved-pages-dialog[open] { animation: saved-pages-arrive 200ms cubic-bezier(.2, .8, .2, 1) both; }
.saved-pages-dialog::backdrop { background: #15233126; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.saved-pages-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; margin-bottom: 8px; }
.saved-pages-head h2 { margin: 0; font-size: 19px; font-weight: 650; line-height: 1.35; letter-spacing: -.025em; }
.saved-pages-close, .saved-page-remove {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink-muted);
  transition: color .18s, background .18s;
}
.saved-pages-close { margin-right: -10px; }
.saved-pages-close svg { width: 18px; height: 18px; }
.saved-page-remove svg { width: 16px; height: 16px; }
.saved-pages-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.saved-page-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.saved-page-row a { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 8px 2px; color: var(--ink); font-size: 14px; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; }
.saved-page-row a > svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--accent); }
.saved-page-row a > span { min-width: 0; }
.saved-page-row a:hover { color: var(--accent); text-decoration: none; }
.saved-pages-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 4px 0 0; padding: 28px 10px 34px; text-align: center; color: var(--ink-muted); font-size: 13px; line-height: 1.6; }
.saved-pages-empty > svg { width: 30px; height: 30px; color: #8da6c0; }
.saved-pages-empty p { margin: 0; }
.saved-pages-note { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--ink-muted); font-size: 11px; line-height: 1.5; text-align: center; }
.profile-save-status { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; z-index: 45; max-width: calc(100% - 40px); padding: 9px 17px; border: 1px solid #e0e7f0; border-radius: 999px; background: #fff; color: var(--ink-soft); box-shadow: 0 4px 22px #18304a12; font-size: 12px; text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%, 5px); transition: opacity .18s, transform .18s; }
.profile-save-status.is-visible { opacity: 1; transform: translate(-50%, 0); }
:where(.profile-save, .saved-pages-toggle, .saved-pages-close, .saved-page-remove, .saved-page-row a):focus-visible { outline: 3px solid #4e9cf0; outline-offset: 3px; }

@keyframes save-spring {
  0% { transform: scale(.82) translateY(1px); }
  36% { transform: scale(1.15) translateY(-1px); }
  65% { transform: scale(.97); }
  100% { transform: scale(1); }
}
@keyframes profile-save-halo {
  0% { opacity: .48; transform: scale(.92); }
  100% { opacity: 0; transform: scale(1.55); }
}
@keyframes profile-save-spark {
  0% { opacity: 0; transform: translate(calc(var(--spark-x) * .65), calc(var(--spark-y) * .65)) scale(.4); }
  28% { opacity: .8; }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(.6); }
}
@keyframes saved-pages-arrive {
  from { opacity: 0; transform: translateY(-5px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (hover: hover) {
  .profile-save:hover { border-color: #b8d3ef; background: #f6faff; color: var(--accent); }
  .profile-save.is-saved:hover { border-color: #b8d3ef; background: #e2efff; }
  .saved-pages-toggle:hover { background: var(--bg-sunk); color: var(--ink); }
  .saved-pages-close:hover, .saved-page-remove:hover { background: var(--bg-tint); color: var(--ink); }
}
@media (max-width: 1050px) {
  .header-tools { grid-column: 2; grid-row: 1; }
  .saved-pages-dialog { top: 142px; }
}
@media (max-width: 760px) {
  .header-tools { grid-column: 2; gap: 5px; }
  .profile-heading-meta { gap: 14px; margin-bottom: 14px; }
  .saved-pages-dialog {
    inset: auto 12px max(12px, env(safe-area-inset-bottom)) 12px;
    width: calc(100% - 24px);
    max-width: 440px;
    max-height: min(70vh, 540px);
    max-height: min(70dvh, 540px);
    margin: 0 auto;
    padding: 10px 20px 18px;
    border-radius: 24px;
  }
  .saved-pages-dialog[open] { animation-name: saved-pages-sheet-arrive; }
  @keyframes saved-pages-sheet-arrive {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
@media (max-width: 380px) {
  .header-tools { gap: 2px; }
  .brand small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-save, .profile-save *, .saved-pages-toggle, .saved-pages-dialog, .saved-pages-close, .saved-page-remove, .profile-save-status { animation: none !important; transition: none !important; }
  .save-halo, .save-sparks { display: none; }
}
@media print {
  .profile-save, .saved-pages-dialog, .profile-save-status { display: none !important; }
}