/*
 * styles-7-anchor-scroll-tail.css
 *
 * Anchor scroll offsets, premium teasers, favorites, late-stage component polish.
 *
 * Phase 5 S3 pass-2: extracted from the monolithic styles.css
 * (8 286 LOC) to bring every CSS source file under the < 1 500
 * LOC bar. Load order in index.html preserves the original
 * cascade exactly: this file occupies lines 6234 - 7133 of the
 * pre-split styles.css.
 */

/* Today Brief + anchor scroll offset for bottom nav / sticky UI */
#today-brief-section,
#mobile-weather-brief,
#mobile-commute-brief,
#tile-datetime,
#weather-card,
#commute-card,
#stocks-tile,
#tile-news,
#todo-card,
#main-content {
  scroll-margin-top: 0.85rem;
}

@media (max-width: 820px) {
  #today-brief-section,
  #mobile-weather-brief,
  #mobile-commute-brief,
  #tile-datetime,
  #weather-card,
  #commute-card,
  #stocks-tile,
  #tile-news,
  #todo-card,
  #main-content {
    scroll-margin-top: calc(4.55rem + env(safe-area-inset-top, 0px));
  }
}

.today-brief {
  margin: 0 0 1.15rem;
  padding: 0;
}

.today-brief__intro {
  margin-bottom: 0.75rem;
}

.today-brief__hero-title {
  margin: 0;
  font-size: var(--type-title);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: var(--font-line-snug);
  color: var(--text);
}

.today-brief__hero-sep {
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.today-brief__hero-value {
  font-weight: var(--font-weight-regular);
  color: var(--text-secondary);
}

.today-brief__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.62rem;
  align-items: stretch;
  justify-items: stretch;
  width: 100%;
}

@media (min-width: 900px) {
  .today-brief__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.today-brief__card,
.today-brief__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  text-align: left;
  padding: 0.65rem 0.7rem;
  border-radius: var(--radius-card-secondary);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  box-shadow: var(--card-elev-subtle);
}

.today-brief__card {
  cursor: default;
  min-height: 4.5rem;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.today-brief__card.card-interactive {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-out);
}

.today-brief__card.card-interactive::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--accent) 22%, transparent),
    transparent 62%
  );
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
  pointer-events: none;
}

.today-brief__card.card-interactive:active::before {
  opacity: 1;
}

.today-brief__card.card-interactive:focus-within {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  box-shadow: var(--card-elev-standard);
}

.today-brief__card.card-interactive:active {
  transform: scale(0.98);
}

.today-brief__panel {
  cursor: default;
}

a.today-brief__panel {
  -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

a.today-brief__panel.surface-interactive {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-out);
}

a.today-brief__panel.surface-interactive::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--accent) 22%, transparent),
    transparent 62%
  );
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
  pointer-events: none;
}

a.today-brief__panel.surface-interactive:active::before {
  opacity: 1;
}

a.today-brief__panel.surface-interactive:active {
  transform: scale(0.98);
}

#brief-card-markets.today-brief__panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.today-brief__card--markets {
  min-height: 0;
  gap: 0.28rem;
  padding: 0.55rem 0.62rem 0.58rem;
}

.today-brief__markets-body {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.today-brief__markets-fx {
  margin: 0;
  font-size: clamp(0.62rem, 0.56rem + 0.22vw, 0.7rem);
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
  color: var(--text);
}

.today-brief__markets-indices {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.28rem 0.55rem;
  width: 100%;
  align-items: start;
}

.today-brief__markets-cell {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.today-brief__markets-cell .today-brief__markets-k {
  font-size: clamp(0.66rem, 0.6rem + 0.24vw, 0.78rem);
  line-height: 1.22;
}

.today-brief__markets-cell .today-brief__markets-v {
  flex: 0 0 auto;
  font-size: clamp(0.68rem, 0.62rem + 0.26vw, 0.82rem);
  line-height: 1.18;
  font-weight: var(--font-weight-medium);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.today-brief__markets-cell .today-brief__markets-chg {
  flex: 0 0 auto;
  font-size: clamp(0.68rem, 0.62rem + 0.24vw, 0.8rem);
  line-height: 1.18;
  text-align: left;
}

.today-brief__markets-k {
  flex: 0 0 auto;
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.today-brief__markets-chg {
  flex: 1 1 auto;
  text-align: right;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.today-brief__markets-chg.is-up {
  color: var(--stock-up);
}

.today-brief__markets-chg.is-down {
  color: var(--stock-down);
}

/* Brief chips: L1 at rest; interactive chips lift to L2 on hover */
.today-brief__card:not(.card-interactive):hover {
  border-color: var(--border);
  box-shadow: var(--card-elev-subtle);
}

.today-brief__card.card-interactive:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: var(--card-elev-standard);
}

.today-brief__panel.today-brief__card--markets:hover {
  border-color: var(--border);
  box-shadow: var(--card-elev-standard);
}

.today-brief__card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.today-brief__eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.today-brief__text {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.today-brief__ai-row {
  margin-top: 0.65rem;
}

.today-brief__ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.today-brief__ai-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.today-brief__ai-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.today-brief__ai-play {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1;
}

.pull-refresh-indicator {
  position: fixed;
  top: max(0.5rem, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-tight);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.pull-refresh-indicator[hidden] {
  display: none;
}

@media (min-width: 821px) {
  .pull-refresh-indicator {
    display: none !important;
  }
}

.app-bottom-nav {
  display: none;
}

@media (max-width: 820px) {
  .app-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    justify-content: space-around;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem max(0.5rem, env(safe-area-inset-left, 0px)) calc(0.55rem + env(safe-area-inset-bottom, 0px))
      max(0.5rem, env(safe-area-inset-right, 0px));
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    box-shadow:
      0 -1px 0 color-mix(in srgb, var(--border) 50%, transparent),
      0 -10px 40px rgba(0, 0, 0, 0.08);
  }

  .app-bottom-nav__link {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    min-height: max(3.1rem, calc(var(--touch-target-min) + 4px));
    padding: 0.48rem 0.32rem 0.42rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    line-height: var(--font-line-tight);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      color var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard),
      opacity var(--duration-fast) var(--ease-standard),
      background-color var(--duration-fast) var(--ease-standard);
  }

  .app-bottom-nav__link:hover,
  .app-bottom-nav__link:focus-visible {
    color: var(--text);
  }

  .app-bottom-nav__link:active {
    opacity: 0.9;
    transform: scale(0.97);
  }

  .app-bottom-nav__link:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-sm);
  }

  .app-bottom-nav__link--active {
    color: var(--accent);
  }

  .app-bottom-nav__link--active::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(2.25rem, 42%);
    height: 3px;
    border-radius: 0 0 6px 6px;
    background: var(--accent);
    pointer-events: none;
  }

  .app-bottom-nav__link--active > span:last-child {
    font-weight: 700;
    color: color-mix(in srgb, var(--accent) 18%, var(--text));
  }

  .app-bottom-nav__link--active.app-bottom-nav__link--btn > span:last-child {
    color: color-mix(in srgb, var(--accent) 22%, var(--text));
  }

  .app-bottom-nav__icon {
    font-size: clamp(1.625rem, 4.5vw, 1.75rem);
    line-height: 1;
  }

  .app-bottom-nav__link > span:last-child {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media (max-width: 390px) {
    .app-bottom-nav__link {
      gap: 0.14rem;
      padding: 0.42rem 0.12rem 0.38rem;
      font-size: clamp(0.56rem, 2.3vw, 0.64rem);
      letter-spacing: 0;
      min-height: max(2.95rem, var(--touch-target-min));
    }

    .app-bottom-nav__icon {
      font-size: clamp(1.5rem, 4vw, 1.65rem);
    }

    .app-bottom-nav__link[href="#favorites-card"] > span:last-child,
    #bottom-nav-settings > span:last-child {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      line-height: 1.05;
      font-size: clamp(0.5rem, 2.05vw, 0.58rem);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .app-bottom-nav__link:active {
      transform: none;
    }
  }

  /* Full-screen tiles (mobile): bottom-nav tabs replace dashboard with that tile’s UX */
  body.mobile-news-screen,
  body.mobile-stocks-screen,
  body.mobile-todos-screen,
  body.mobile-favorites-screen {
    overflow-x: hidden;
  }

  body.mobile-news-screen .dashboard__header,
  body.mobile-news-screen #today-brief-section,
  body.mobile-news-screen #mobile-weather-brief,
  body.mobile-news-screen #mobile-commute-brief,
  body.mobile-stocks-screen .dashboard__header,
  body.mobile-stocks-screen #today-brief-section,
  body.mobile-stocks-screen #mobile-weather-brief,
  body.mobile-stocks-screen #mobile-commute-brief,
  body.mobile-todos-screen .dashboard__header,
  body.mobile-todos-screen #today-brief-section,
  body.mobile-todos-screen #mobile-weather-brief,
  body.mobile-todos-screen #mobile-commute-brief,
  body.mobile-favorites-screen .dashboard__header,
  body.mobile-favorites-screen #today-brief-section,
  body.mobile-favorites-screen #mobile-weather-brief,
  body.mobile-favorites-screen #mobile-commute-brief {
    display: none !important;
  }

  body.mobile-news-screen #dashboard-tiles > :not(#tile-news),
  body.mobile-stocks-screen #dashboard-tiles > :not(#stocks-tile),
  body.mobile-todos-screen #dashboard-tiles > :not(#todo-card),
  body.mobile-favorites-screen #dashboard-tiles > :not(#favorites-card) {
    display: none !important;
  }

  /*
   * News full-screen: several flex-shrink:0 chrome rows plus a flex:1 story list can allocate
   * 0px to .news-tiles when this panel uses overflow:hidden (clips the scroll child). Let the
   * news tile scroll as one column; stocks/todos keep inner scrollports (see e2e).
   */
  /*
   * `backdrop-filter` on `#main-content.dashboard` (light/solarized) creates a containing block for
   * `position: fixed` descendants. Mobile tabs then position relative to `.dashboard`; when most
   * in-flow content is hidden the panel collapses and News/Stocks/TODO tiles clip or render empty.
   */
  body.mobile-news-screen #main-content.dashboard,
  body.mobile-stocks-screen #main-content.dashboard,
  body.mobile-todos-screen #main-content.dashboard,
  body.mobile-favorites-screen #main-content.dashboard {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html[data-theme="light"] body.mobile-news-screen #main-content.dashboard,
  html[data-theme="light"] body.mobile-stocks-screen #main-content.dashboard,
  html[data-theme="light"] body.mobile-todos-screen #main-content.dashboard,
  html[data-theme="light"] body.mobile-favorites-screen #main-content.dashboard,
  html[data-theme="solarized"] body.mobile-news-screen #main-content.dashboard,
  html[data-theme="solarized"] body.mobile-stocks-screen #main-content.dashboard,
  html[data-theme="solarized"] body.mobile-todos-screen #main-content.dashboard,
  html[data-theme="solarized"] body.mobile-favorites-screen #main-content.dashboard {
    background: var(--surface);
  }

  body.mobile-news-screen #tile-news,
  body.mobile-stocks-screen #stocks-tile,
  body.mobile-todos-screen #todo-card,
  body.mobile-favorites-screen #favorites-card {
    position: fixed;
    /* Above .app-bottom-nav (z-index 50) so the panel surface isn’t stacked under the tab bar */
    z-index: 60;
    left: max(0.5rem, env(safe-area-inset-left, 0px));
    right: max(0.5rem, env(safe-area-inset-right, 0px));
    top: max(0.35rem, env(safe-area-inset-top, 0px));
    /* Avoid top+bottom+height over-constraint; nav clearance is inside the calc height. */
    bottom: auto;
    width: auto;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    /* Explicit height: without this, flex children can expand the panel (no inner scroll). */
    height: calc(
        100dvh - max(0.35rem, env(safe-area-inset-top, 0px)) -
          (4.2rem + max(0.5rem, env(safe-area-inset-bottom, 0px)))
      )
      !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  body.mobile-news-screen #tile-news {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  body.mobile-news-screen #tile-news.news-summary--toolbar {
    min-height: 0 !important;
  }

  /*
   * Do not set height: 100% here — it overrides the calc() height on #tile-news above (same
   * specificity + later rule) and can collapse the full-screen news panel or hide its scroll area.
   */
  body.mobile-news-screen #tile-news.news-summary--toolbar.dashboard-tile--resizable-v {
    min-height: 0 !important;
  }

  body.mobile-news-screen #tile-news .news-tiles {
    flex: 0 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: visible;
    max-height: none !important;
  }

  body.mobile-news-screen #tile-news .tile-resize-handle {
    display: none !important;
  }

  body.mobile-stocks-screen #stocks-tile.card--stocks.dashboard-tile--resizable-v {
    min-height: 0 !important;
    flex: 1 1 auto;
  }

  body.mobile-stocks-screen #stocks-tile .stocks-card__footer {
    flex-shrink: 0;
  }

  body.mobile-stocks-screen #stocks-tile .stock-composer {
    flex-shrink: 0;
  }

  /*
   * Pin markets summary + add-a-stock; only .stocks-scroll (chip list) scrolls.
   */
  body.mobile-stocks-screen #stocks-tile .stocks-wrap {
    flex: 1 1 0%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
  }

  body.mobile-stocks-screen #stocks-tile .stocks-scroll {
    flex: 1 1 0%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  body.mobile-stocks-screen #stocks-tile .stocks-grid {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    max-height: none;
  }

  body.mobile-stocks-screen #stocks-tile .tile-resize-handle {
    display: none !important;
  }

  body.mobile-todos-screen #todo-card.tile-type-vertical {
    overflow-y: hidden;
    overflow-x: hidden;
  }

  /*
   * Full-screen TODO tab: let the list fill space between header and footer.
   * `.todo-scroll--limited` max-height (~5 rows) is for the dashboard tile only; it caused a short
   * scroll box and half-empty screen on mobile.
   */
  body.mobile-todos-screen #todo-card.tile-type-vertical .todo-scroll,
  body.mobile-todos-screen #todo-card.tile-type-vertical.todo-card--composer-open .todo-scroll {
    flex: 1 1 0%;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  body.mobile-todos-screen #todo-card .todo-composer {
    flex-shrink: 0;
  }

  body.mobile-favorites-screen #favorites-card.tile-type-vertical {
    overflow-y: hidden;
    overflow-x: hidden;
  }

  body.mobile-favorites-screen #favorites-card.tile-type-vertical .favorites-scroll {
    flex: 1 1 0%;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  #favorites-card .tile-collapse-btn {
    display: none !important;
  }
}

.prefs-saved-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 11rem;
  overflow: auto;
}

.prefs-saved-list__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.35;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
}

.prefs-saved-list__link {
  flex: 1;
  min-width: 0;
  color: var(--accent);
  text-decoration: none;
  word-break: break-word;
}

.prefs-saved-list__link:hover {
  text-decoration: underline;
}

.prefs-saved-list__remove {
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.prefs-saved-list__remove:hover {
  border-color: var(--warn);
  color: var(--warn);
}

.news-bookmark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 2.05rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.news-bookmark-btn:hover {
  border-color: var(--accent);
  background: var(--prefs-toggle-hover);
}

.news-bookmark-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.news-bookmark-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface-alt));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.favorites-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.favorites-remove-btn:hover {
  border-color: var(--warn);
  color: var(--warn);
}

#favorites-card .favorites-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#favorites-card .favorites-item .news-item__row {
  flex: 1 1 auto;
}

#favorites-card .favorites-item__open-row {
  display: flex;
  align-items: center;
  margin-top: 0.38rem;
  padding-top: 0.32rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.favorites-open-article-link {
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.favorites-open-article-link:hover {
  text-decoration: underline;
}

#favorites-card.favorites-card.tile-type-vertical {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#favorites-card .favorites-card__top {
  flex-shrink: 0;
}

#favorites-card .favorites-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 0.35rem;
}

#favorites-card .favorites-empty-hint {
  margin: 0.5rem 0 0;
}