/* One glass navigation plane; its controls use thin fills, not nested blur.
   Inspired by Apple's Meet Liquid Glass principles, not a native material. */
[data-design] .case-end {
  --case-nav-inset: var(--frame-inset);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  margin-top: 42px;
  padding: var(--case-nav-inset);
  border: 1px solid var(--glass-edge, var(--line));
  border-radius: calc(var(--radius-nested-control) + var(--case-nav-inset));
  background: var(--raised);
  box-shadow: inset 0 1px 0 light-dark(#fffe, #ffffff24), 0 10px 32px light-dark(#24352a12, #0004);
}
[data-design] .case-end::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, light-dark(#ffffff66, #ffffff0d), transparent 45% 75%, light-dark(#ffffff22, #ffffff05));
}
[data-design] .case-end > a {
  position: relative;
  min-width: 0;
  min-height: 64px;
  border: 1px solid transparent;
  border-radius: var(--radius-nested-control);
  color: var(--ink);
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
[data-design] .case-end > a:focus-visible { outline-offset: -3px; }
[data-design] .case-end .case-back { display: flex; align-items: center; justify-content: center; align-self: center; justify-self: start; min-height: var(--control-height); gap: var(--space-2); font-size: 13px; line-height: var(--control-content-height); padding: var(--control-padding); }
.case-end .case-back .ui-icon { width: 18px; height: 18px; }
.case-end .case-next { display: flex; align-items: center; gap: var(--space-4); padding: var(--control-padding); background: color-mix(in srgb, var(--raised) 55%, transparent); }
.case-end .case-next > img { width: 66px; height: 66px; flex: 0 0 66px; object-fit: cover; object-position: top; border-radius: var(--radius-small); background: var(--surface); }
.case-next-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.case-next-copy > span { color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.case-next-copy > strong { font: 550 18px/1.3 var(--sans); letter-spacing: -.025em; }
.case-end .case-next > [data-icon] { margin-left: auto; }
.case-end .case-next .ui-icon { width: 22px; height: 22px; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-design] .case-end {
    background: var(--glass-tint, color-mix(in srgb, var(--bg) 76%, transparent));
    -webkit-backdrop-filter: blur(24px) saturate(1.25);
    backdrop-filter: blur(24px) saturate(1.25);
  }
}
@media (hover: hover) {
  [data-design] .case-end > a:hover { background: color-mix(in srgb, var(--raised) 82%, transparent); border-color: var(--glass-button-edge, var(--line)); }
  .case-end .case-next:hover > [data-icon] { transform: translate(2px,-2px); }
}
.case-end .case-next > [data-icon] { transition: transform .2s; }
[data-design] .case-end > a:active { transform: scale(.985); }
@media (max-width: 560px) {
  [data-design] .case-end { grid-template-columns: 1fr; gap: 4px; margin-top: 28px; }
  .case-end .case-next { grid-row: 1; gap: var(--space-3); }
  .case-end .case-next > img { width: 54px; height: 62px; flex-basis: 54px; }
  .case-next-copy > strong { font-size: 17px; }
  [data-design] .case-end .case-back { justify-self: center; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  [data-design] .case-end { background: var(--raised); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--muted); }
  [data-design] .case-end::before { display: none; }
  .case-end .case-next { background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design] .case-end > a, .case-end .case-next > [data-icon] { transition: none; }
  [data-design] .case-end > a:active, .case-end .case-next:hover > [data-icon] { transform: none; }
}
@media (forced-colors: active) {
  [data-design] .case-end { background: Canvas; border-color: CanvasText; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  [data-design] .case-end::before { display: none; }
  [data-design] .case-end > a { background: Canvas; color: LinkText; border-color: ButtonText; }
}