/* CU36 — seamless Hero/Main10 join + tighter expanded header/detail spacing while preserving card stack geometry. */
.cosmic-main10{
  min-height:0;
  padding-top:0;
  padding-bottom:clamp(36px,5vw,56px);
}
.top-visual + .cosmic-main10{
  margin-top:0;
}
.cosmic-main10__grid{
  width:min(920px,96%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
}

.cosmic-card{
  height:88px;
}
.cosmic-card__stack{
  height:70px;
}

/* All rear plates keep the exact same width. Depth is only offset / opacity / blur / light. */
.cosmic-card__ghost{
  transform:translate(3px,7px) translateZ(-24px);
}
.cosmic-card__ghost::before{
  transform:translate(3px,8px);
}
.cosmic-card__ghost::after{
  transform:translate(6px,16px);
}

.cosmic-card.is-launching .cosmic-card__ghost{
  transform:translate(4px,10px) translateZ(-30px);
}
.cosmic-card.is-launching .cosmic-card__ghost::before{
  transform:translate(5px,13px);
}
.cosmic-card.is-launching .cosmic-card__ghost::after{
  transform:translate(9px,25px);
}

.cosmic-expanded__ghost{
  transform:translate(5px,8px) translateZ(-34px);
}
.cosmic-expanded__ghost::before{
  transform:translate(5px,8px);
}
.cosmic-expanded__ghost::after{
  transform:translate(10px,16px);
}

@keyframes cosmicGhostSettle{
  0%{transform:translate(2px,3px);opacity:.12}
  100%{transform:translate(5px,8px) translateZ(-34px);opacity:.52}
}
@keyframes cosmicGhostSettle2{
  0%{transform:translate(2px,3px);opacity:.04}
  100%{transform:translate(5px,8px);opacity:.58}
}
@keyframes cosmicGhostSettle3{
  0%{transform:translate(3px,5px);opacity:0}
  100%{transform:translate(10px,16px);opacity:.34}
}

/* Never ellipsize Main10 titles. JS performs exact single-line fitting as a last-mile guard. */
.cosmic-card__top{
  padding:0 clamp(17px,2.7vw,24px);
}
.cosmic-card__icon{
  width:clamp(34px,5vw,42px);
  height:clamp(34px,5vw,42px);
}
.cosmic-card__divider{
  height:clamp(34px,4.5vw,42px);
  margin-left:clamp(12px,2vw,18px);
}
.cosmic-card__label{
  flex:1 1 auto;
  min-width:0;
  margin-left:clamp(13px,2vw,19px);
  font-size:clamp(14px,1.9vw,18px);
  line-height:1.16;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  transform-origin:left center;
}

/* Current Canon: keep the panel geometry, but repair its internal information architecture. */
.cosmic-expanded__top{
  height:clamp(88px,14%,100px);
  padding:0 clamp(28px,5vw,46px);
}
.cosmic-expanded__body{
  inset:clamp(88px,14%,100px) 0 48px;
  padding:clamp(12px,2vw,18px) clamp(24px,5vw,48px) 10px;
}
.cosmic-expanded:not(.is-supporters) .cosmic-expanded__top{
  border-bottom:0;
  box-shadow:none;
}
.cosmic-expanded:not(.is-supporters) .cosmic-expanded__label{
  flex:1 1 auto;
  min-width:0;
  max-height:2.44em;
  margin-left:clamp(18px,3vw,28px);
  margin-right:58px;
  color:rgba(243,249,255,.98);
  font-size:clamp(18px,2.8vw,28px);
  line-height:1.22;
  white-space:normal;
  overflow:hidden;
  text-overflow:clip;
  overflow-wrap:normal;
  word-break:normal;
  line-break:strict;
  text-wrap:balance;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
@supports (word-break:auto-phrase){
  .cosmic-expanded:not(.is-supporters) .cosmic-expanded__label,
  .cosmic-expanded:not(.is-supporters) .cosmic-expanded__lead,
  .cosmic-expanded:not(.is-supporters) .cosmic-expanded__copy{word-break:auto-phrase}
}
.cosmic-expanded:not(.is-supporters) .cosmic-expanded__body{
  display:flex;
  flex-direction:column;
  gap:clamp(11px,1.8vw,16px);
  overflow:auto;
  overscroll-behavior:contain;
}
.cosmic-expanded:not(.is-supporters) .cosmic-expanded__scan{
  width:18%;
  height:6px;
  opacity:.34;
}
.cosmic-expanded:not(.is-supporters) .cosmic-expanded__selection{
  width:100%;
  max-width:49rem;
  padding:clamp(14px,2vw,19px) clamp(16px,2.6vw,24px);
  border-color:rgba(215,229,255,.24);
  background:linear-gradient(112deg,rgba(228,236,255,.11),rgba(177,179,255,.065) 56%,rgba(116,88,255,.055));
  box-shadow:0 0 24px rgba(81,149,255,.055),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(115,115,255,.08);
}
.cosmic-expanded:not(.is-supporters) .cosmic-expanded__lead{
  font-size:clamp(16px,2vw,20px);
  line-height:1.54;
  line-break:strict;
  overflow-wrap:normal;
}
.cosmic-expanded__copy-group{
  display:grid;
  gap:clamp(9px,1.4vw,13px);
  max-width:49rem;
}
.cosmic-expanded:not(.is-supporters) .cosmic-expanded__copy{
  max-width:none;
  font-size:clamp(14px,1.5vw,16px);
  line-height:1.72;
  line-break:strict;
  overflow-wrap:normal;
}

/* Bottom Action Deck is part of the Current Canon. It does not change the panel's outer size. */
.cosmic-expanded__action-deck{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:7;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:6px clamp(24px,5vw,48px) 8px;
  border:0;
  background:transparent;
  box-shadow:none;
}
.cosmic-expanded__action-deck[hidden]{display:none!important}
.cosmic-expanded:not(.is-supporters) .cosmic-expanded__detail{
  position:relative;
  right:auto;
  bottom:auto;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:7px 12px;
  border:1px solid rgba(190,225,255,.30);
  border-radius:999px;
  background:linear-gradient(115deg,rgba(163,218,255,.085),rgba(83,105,194,.055) 52%,rgba(142,89,255,.07));
  color:rgba(238,248,255,.97);
  font:600 13px/1.2 ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;
  letter-spacing:.025em;
  text-decoration:none;
  box-shadow:inset 0 .6px 0 rgba(255,255,255,.16),0 0 18px rgba(73,166,255,.055);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.cosmic-expanded:not(.is-supporters) .cosmic-expanded__detail::after{
  content:none;
}
.cosmic-expanded__detail-arrow{
  font-size:14px;
  transform:translateY(-.5px);
  transition:transform .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .cosmic-expanded:not(.is-supporters) .cosmic-expanded__detail:hover{
    transform:translateY(-1px);
    color:rgba(246,252,255,.99);
    border-color:rgba(207,238,255,.48);
    background:linear-gradient(115deg,rgba(177,226,255,.12),rgba(86,116,207,.07) 52%,rgba(153,97,255,.09));
    box-shadow:inset 0 .6px 0 rgba(255,255,255,.20),0 0 20px rgba(70,182,255,.10);
  }
  .cosmic-expanded:not(.is-supporters) .cosmic-expanded__detail:hover .cosmic-expanded__detail-arrow{transform:translate(2px,-.5px)}
}
.cosmic-expanded__detail:focus-visible{
  outline:1px solid rgba(202,239,255,.72);
  outline-offset:3px;
}

/* Supporters keeps its established header action and is not redesigned here. */
.cosmic-expanded.is-supporters .cosmic-expanded__detail{
  position:absolute;
  right:16px;
  bottom:5px;
  z-index:10;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:28px;
  padding:4px 10px;
  border:.45px solid rgba(190,225,255,.30);
  border-radius:999px;
  background:linear-gradient(115deg,rgba(163,218,255,.075),rgba(83,105,194,.045) 52%,rgba(142,89,255,.06));
  color:rgba(232,246,255,.94);
  font:600 12px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;
  letter-spacing:.02em;
  text-decoration:none;
  box-shadow:inset 0 .6px 0 rgba(255,255,255,.16),0 0 18px rgba(73,166,255,.06);
  backdrop-filter:blur(12px) saturate(145%);
  -webkit-backdrop-filter:blur(12px) saturate(145%);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .cosmic-expanded.is-supporters .cosmic-expanded__detail:hover{
    transform:translateY(-1px);
    border-color:rgba(207,238,255,.50);
    background:linear-gradient(115deg,rgba(177,226,255,.12),rgba(86,116,207,.065) 52%,rgba(153,97,255,.085));
    box-shadow:inset 0 .6px 0 rgba(255,255,255,.22),0 0 22px rgba(70,182,255,.11);
  }
}

.cosmic-expanded.is-preparing .cosmic-expanded__action-deck{opacity:0;transform:translateY(8px)}
.cosmic-expanded__action-deck{transition:opacity .24s ease,transform .32s cubic-bezier(.16,1,.3,1)}
.cosmic-expanded.is-revealed .cosmic-expanded__action-deck{opacity:1;transform:none}
.cosmic-expanded.is-closing .cosmic-expanded__action-deck{opacity:0;transform:translateY(6px);transition-duration:.14s}

@media (max-width:560px){
  .cosmic-main10{min-height:0;padding:0 8px 30px}
  .cosmic-main10__grid{width:96%;gap:2px}
  .cosmic-card{height:86px}
  .cosmic-card__stack{height:68px}
  .cosmic-card__ghost{transform:translate(3px,7px) translateZ(-24px)}
  .cosmic-card__ghost::before{transform:translate(3px,8px)}
  .cosmic-card__ghost::after{transform:translate(6px,16px)}
  .cosmic-card__top{padding:0 15px}
  .cosmic-card__icon{width:34px;height:34px}
  .cosmic-card__divider{height:34px;margin-left:12px}
  .cosmic-card__label{margin-left:13px;font-size:16px;letter-spacing:-.005em}

  .cosmic-expanded{width:94vw;height:min(630px,78svh);min-height:min(455px,78svh)}
  .cosmic-expanded__top{height:86px;padding:0 18px}
  .cosmic-expanded__body{inset:86px 0 46px;padding:10px 18px 8px;gap:10px}
  .cosmic-expanded__icon{width:46px;height:46px}
  .cosmic-expanded__divider{height:46px;margin-left:16px}
  .cosmic-expanded:not(.is-supporters) .cosmic-expanded__label{margin-left:15px;margin-right:52px;font-size:clamp(16px,4.65vw,20px);line-height:1.20;max-height:2.4em}
  .cosmic-expanded:not(.is-supporters) .cosmic-expanded__selection{padding:13px 14px}
  .cosmic-expanded:not(.is-supporters) .cosmic-expanded__lead{font-size:clamp(15px,3.9vw,17px);line-height:1.50}
  .cosmic-expanded__copy-group{gap:9px}
  .cosmic-expanded:not(.is-supporters) .cosmic-expanded__copy{font-size:clamp(13px,3.45vw,15px);line-height:1.66}
  .cosmic-expanded__action-deck{min-height:46px;padding:5px 18px 7px}
  .cosmic-expanded:not(.is-supporters) .cosmic-expanded__detail{min-height:34px;padding:6px 11px;font-size:12px}
  .cosmic-expanded.is-supporters .cosmic-expanded__detail{right:12px;bottom:5px;min-height:28px;padding:4px 9px;font-size:11px}
  .cosmic-expanded__close{top:8px;right:10px}
  .cosmic-expanded__ghost{transform:translate(4px,7px) translateZ(-34px)}
  .cosmic-expanded__ghost::before{transform:translate(4px,7px)}
  .cosmic-expanded__ghost::after{transform:translate(8px,14px)}
}