/**
 * @framework-doc
 * {
 *   "schema": 1,
 *   "layer": "style",
 *   "role": "공개·React 공통 카드 스택과 프레임 스타일",
 *   "responsibilities": [
 *     "공개·React 공통 카드 스택, 헤더, 도크, 패널, 즐겨찾기의 배치와 반응형 규칙을 정의한다.",
 *     "겹침 순서는 common.css의 --frame-layer-* 토큰만 참조해 정한다."
 *   ],
 *   "contracts": [
 *     "표시 스타일만 담당하며 업무 상태와 권한은 변경하지 않는다.",
 *     "숫자 z-index(11 이상)를 쓰지 않는다. tests/frame-layers.test.mjs가 강제한다."
 *   ],
 *   "related": ["public-news/common.css", "tests/frame-layers.test.mjs"]
 * }
 * @end-framework-doc
 */
.stack-top {
  position: sticky;
  top: 0;
  z-index: var(--frame-layer-chrome);
  background: var(--ui-color-surface);
  border-bottom: 1px solid var(--ui-line);
}
.stack-top-inner {
  position: relative;
  margin: auto;
  padding: var(--ui-space-8) var(--ui-space-16);
}
.stack-search-row {
  display: flex;
  align-items: center;
  gap: var(--ui-space-12);
}
.stack-brand .logo {
  font-size: var(--ui-font-18);
  white-space: nowrap;
  gap: 0;
}
.stack-brand .mark,
.stack-brand > span {
  display: none;
}
.stack-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
#component-search {
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  padding: var(--ui-space-8) var(--ui-space-12);
  background: var(--ui-color-background);
  font-size: var(--ui-font-body);
}
#component-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 12px;
  right: 12px;
  padding: var(--ui-space-8);
  background: var(--ui-color-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-popup);
  max-height: 40dvh;
  overflow: auto;
  gap: var(--ui-space-4);
  flex-wrap: wrap;
}
.stack-top-inner:focus-within #component-results {
  display: flex;
}
#component-results button {
  font-size: var(--ui-font-small);
  min-height: 44px;
  flex: 1 0 130px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-8);
}
button {
  cursor: pointer;
  border: 1px solid var(--ui-line);
  background: var(--ui-color-surface);
  color: var(--ui-accent);
  padding: var(--ui-space-6) var(--ui-space-10);
  border-radius: var(--ui-radius);
  min-height: 36px;
}
button:hover {
  background: var(--ui-color-accent-soft);
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
.stack-shell {
  margin: auto;
  padding: 0 var(--ui-space-16);
}
.stack-intro {
  display: none;
}
#stack-message {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
#component-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-12);
}
.stack-card {
  width: 100%;
  min-width: 0;
  background: var(--ui-color-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  overflow: hidden;
  scroll-margin-top: var(--ui-space-72);
}
.stack-card:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}
.stack-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-8);
  padding: 0 var(--ui-space-12);
  min-height: 44px;
  border-bottom: 1px solid var(--ui-line);
}
.stack-card-head small {
  display: none;
}
.stack-card-head h2 {
  margin: 0;
  font-size: var(--ui-font-body);
  line-height: var(--ui-line-heading);
}
.stack-card-head button {
  border: 0;
  font-size: var(--ui-font-18);
  min-width: 44px;
  height: 44px;
  padding: 0;
}
.stack-pages {
  padding: 0 var(--ui-space-12);
  touch-action: pan-y;
  overflow-wrap: anywhere;
}
/* Share one grid cell so every page contributes to the tallest page's height.
   Hidden pages still size the grid, but cannot be seen or focused. */
html.stack-ready .stack-card:not([data-view='expanded']) .stack-pages:not([hidden]) {
  display: grid;
  align-items: start;
  overflow: clip;
}
html.stack-ready .stack-card:not([data-view='expanded']) .stack-pages > .stack-page {
  grid-area: 1 / 1;
  min-width: 0;
}
html.stack-ready .stack-card:not([data-view='expanded']) .stack-page[hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}
html.stack-ready .stack-card:not([data-view='expanded']) .stack-page[hidden][data-motion-visible] {
  visibility: visible;
}
.stack-page .news-card {
  border: 0;
  border-radius: 0;
  box-shadow: var(--ui-shadow-none);
  padding: var(--ui-space-12) 0;
  margin: 0;
  border-bottom: 1px solid var(--ui-line);
}
.stack-page .news-card:last-child {
  border-bottom: 0;
}
.stack-page .news-card [data-el='title'] {
  font-size: var(--ui-font-18);
  margin: var(--ui-space-8) 0;
  line-height: var(--ui-line-body);
}
.stack-page .news-card [data-el='summary'] {
  font-size: var(--ui-font-small);
  line-height: var(--ui-line-body);
}
.stack-page .card-footer {
  margin-top: var(--ui-space-10);
  padding-top: var(--ui-space-6);
  gap: var(--ui-space-8);
}
.stack-page .card-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--ui-font-small);
}
.stack-page .dates {
  color: var(--ui-muted);
  font-size: var(--ui-font-small);
  gap: var(--ui-space-4) var(--ui-space-10);
}
.stack-page .card-top {
  color: var(--ui-muted);
  font-size: var(--ui-font-small);
}
.stack-page .pill {
  font-size: var(--ui-font-small);
  padding: var(--ui-space-2) var(--ui-space-6);
}
.stack-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--ui-space-8);
  border-top: 1px solid var(--ui-line);
  font-size: var(--ui-font-small);
  min-height: 44px;
}
.stack-pager button {
  border: 0;
  min-width: 64px;
  height: 44px;
  font-size: var(--ui-font-small);
}
.stack-pager[hidden] {
  display: none;
}
.stack-page p {
  overflow-wrap: anywhere;
}
.swipe-hint {
  color: var(--ui-muted);
  font-size: var(--ui-font-small);
  margin-left: var(--ui-space-8);
}
footer.stack-shell {
  margin: var(--ui-space-24) auto 0;
  padding: var(--ui-space-12) var(--ui-space-16);
  font-size: var(--ui-font-small);
}
#search-empty {
  position: absolute;
  top: 100%;
  left: 12px;
  right: 12px;
  background: var(--ui-color-surface);
  border: 1px solid var(--ui-line);
  padding: var(--ui-space-12);
  margin: 0;
  font-size: var(--ui-font-small);
  display: none;
}
.stack-top-inner:focus-within #search-empty:not([hidden]) {
  display: block;
}
@media (max-width: 760px) {
  .stack-top-inner {
    padding: var(--ui-space-8) var(--ui-space-12);
  }
  .stack-search-row {
    gap: var(--ui-space-8);
  }
  .stack-brand .logo {
    font-size: var(--ui-font-body);
  }
  .stack-shell {
    padding: 0 var(--ui-space-12);
  }
  .stack-card .stack-pages {
    min-height: 0;
  }
  .stack-card-head {
    height: 44px;
  }
  .stack-page .news-card [data-el='title'] {
    font-size: var(--ui-font-18);
  }
  .stack-page .source-status {
    font-size: var(--ui-font-small);
  }
  .stack-page > p a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .stack-page > p {
    margin: var(--ui-space-6) 0;
  }
  .stack-card {
    scroll-margin-top: var(--ui-space-72);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}
html:not(.stack-ready) .stack-page[hidden] {
  display: block !important;
}
html:not(.stack-ready) .stack-pager {
  display: none;
}
/* Header and search below recommendations. */
.stack-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: var(--ui-space-2) var(--ui-space-12);
  margin: auto;
}
.stack-header-inner .logo {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ui-font-18);
  color: var(--ui-accent);
  letter-spacing: 0;
}
.stack-tools-slot {
  margin-top: var(--ui-space-8);
}
.stack-dock[data-modal-blocked] {
  visibility: hidden;
  pointer-events: none;
}
.stack-dock {
  position: relative;
  /* Favorites inherit this stacking context. */
  z-index: var(--frame-layer-navigation);
  background: var(--ui-color-surface);
}
/* Focused card inputs stay below shared navigation and search layers. */
.layout-frame [data-frame-input][data-viewport-floating] {
  z-index: var(--frame-layer-card);
}
.stack-top-inner {
  padding: var(--ui-space-8) 0;
}
.stack-dock[data-floating] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--frame-layer-navigation);
  box-shadow: var(--ui-shadow-popup);
  padding-bottom: env(safe-area-inset-bottom);
}
.stack-dock[data-floating] .stack-top-inner {
  max-width: var(--tools-width);
}
.stack-dock[data-editing-keyboard],
.stack-dock[data-editing-keyboard] .favorites-floating {
  visibility: hidden;
  pointer-events: none;
}
.stack-dock[data-compact-floating] #component-recommendations,
.stack-dock[data-compact-floating] #recommendation-scrollbar,
.stack-dock[data-compact-floating] #recommendations-empty,
.stack-dock[data-compact-floating] .stack-search-prompt {
  display: none;
}
.stack-search-prompt {
  margin: var(--ui-space-8) 0 var(--ui-space-6);
  color: var(--ui-color-accent-hover);
  font-size: var(--ui-font-label);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-line-body);
}
.stack-search-row {
  gap: var(--ui-space-4);
  border: 2px solid var(--ui-color-accent);
  border-radius: var(--ui-radius);
  background: var(--ui-color-accent-soft);
  box-shadow: var(--ui-shadow-popup);
  padding: var(--ui-space-4);
}
.stack-search-row:focus-within {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}
.stack-search-row #component-search {
  flex: 1;
  min-height: 48px;
  border: 0;
  background: transparent;
  outline: none;
  box-shadow: none;
}
#search-submit {
  flex-shrink: 0;
  min-height: 44px;
  color: var(--ui-color-on-accent);
  background: var(--ui-color-accent);
  border-color: var(--ui-color-accent);
}
#search-submit:hover {
  background: var(--ui-color-accent-hover);
}
#component-results .component-result-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--ui-radius-round);
  background: var(--ui-color-accent-soft);
  color: var(--ui-color-accent-hover);
  font-weight: var(--ui-font-weight-bold);
}
#component-results .component-result-label {
  flex: 1;
  min-width: 0;
}
#component-search {
  font-size: var(--ui-font-body);
  background: var(--ui-color-surface);
}
#component-recommendations {
  display: flex;
  gap: var(--ui-space-4);
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  gap: var(--ui-space-6);
  padding: var(--ui-space-2) 0;
  align-items: center;
}
#component-recommendations button {
  font-size: var(--ui-font-small);
  min-height: 36px;
  border-radius: var(--ui-radius);
  flex-shrink: 0;
  white-space: nowrap;
  padding: var(--ui-space-4) var(--ui-space-12);
  color: var(--ui-color-accent-hover);
  background: var(--ui-color-accent-soft);
  border-color: var(--krds-color-light-primary-20);
  font-weight: var(--ui-font-weight-bold);
}
#component-results {
  position: fixed;
  top: var(--results-top, 0px);
  bottom: auto;
  left: var(--results-left, 12px);
  right: auto;
  width: var(--results-width, calc(100% - 24px));
  max-height: var(--results-height, 192px);
  box-sizing: border-box;
  z-index: var(--frame-layer-panel);
  box-shadow: var(--ui-shadow-popup);
  overscroll-behavior: contain;
}
.stack-top-inner:focus-within #component-results {
  display: none;
}
.layout-frame[data-searching] #component-results {
  display: block;
}
#search-empty {
  position: fixed;
  top: var(--results-top, 0px);
  bottom: auto;
  left: var(--results-left, 12px);
  right: auto;
  width: var(--results-width, calc(100% - 24px));
  max-height: var(--results-height, 192px);
  box-sizing: border-box;
  z-index: var(--frame-layer-panel);
  overflow: auto;
}
.stack-top-inner:focus-within #search-empty:not([hidden]) {
  display: none;
}
.layout-frame[data-searching] #search-empty:not([hidden]) {
  display: block;
}
#search-close {
  min-width: 44px;
  min-height: 44px;
}
.stack-card {
  scroll-margin-top: var(--ui-space-60);
  scroll-margin-bottom: var(--ui-space-12);
}
body {
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--ui-space-8));
}
.stack-card-head h2 {
  font-size: var(--ui-font-body);
}
.stack-page .news-card [data-el='title'] {
  font-size: var(--ui-font-19);
}
.stack-page .news-card [data-el='summary'],
.stack-page > p,
.stack-page .source-status {
  font-size: var(--ui-font-body);
  line-height: var(--ui-line-body);
  color: var(--ui-text);
}
.stack-page .news-card :is([data-el='published'], [data-el='reflected'], [data-el='effective']),
.stack-page .dates,
.stack-page .card-top,
.stack-page .card-footer a,
.stack-page .pill,
.stack-pager,
.stack-pager button,
.swipe-hint {
  font-size: var(--ui-font-small);
  color: var(--ui-muted);
}
.stack-page .card-footer a {
  color: var(--ui-accent);
}
.stack-page .pill {
  background: var(--ui-color-accent-soft);
  border: 0;
}
.stack-card-head {
  border-bottom-color: var(--ui-color-border-soft);
}
.stack-page .card-footer {
  border-top-color: var(--ui-color-border-soft);
}
@media (max-width: 760px) {
  .stack-card .stack-pages {
    min-height: 0;
  }
  .stack-card-head h2 {
    font-size: var(--ui-font-body);
  }
  .stack-page .news-card [data-el='title'] {
    font-size: var(--ui-font-19);
  }
}

#recommendations-empty {
  font-size: var(--ui-font-small);
  color: var(--ui-muted);
}
html:not(.stack-ready) .stack-tools-slot {
  display: none;
}

/* Existing KRDS tokens supply the selected header and pagination colors. */
.stack-top {
  background: var(--ui-color-accent-hover);
  border-bottom: 0;
}
.stack-header-inner .logo {
  color: var(--ui-color-surface);
}
.stack-menu {
  position: relative;
  flex-shrink: 0;
}
.stack-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: var(--ui-font-22);
  color: var(--ui-accent);
}
.stack-menu summary::-webkit-details-marker {
  display: none;
}
.stack-menu summary:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: -2px;
}
.stack-menu-items {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--frame-layer-panel);
  min-width: 160px;
  max-width: calc(100vw - 24px);
  background: var(--ui-color-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-popup);
  padding: var(--ui-space-4);
}
.stack-menu-items a,
.stack-menu-items button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  height: auto;
  padding: var(--ui-space-6) var(--ui-space-10);
  font-size: var(--ui-font-small);
  text-align: left;
  color: var(--ui-accent);
  border: 0;
}
.source-tools {
  display: flex;
  align-items: center;
  gap: var(--ui-space-4);
  min-width: 0;
}
.stack-page .card-top {
  gap: var(--ui-space-4);
  flex-wrap: wrap;
}
.stack-page .source-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ui-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.stack-page .news-card [data-el='title'] {
  margin-top: 0;
}
.stack-pager {
  padding: 0 var(--ui-space-12);
  gap: var(--ui-space-4);
  min-height: 45px;
  background: var(--ui-color-accent-soft);
}
.stack-pager button {
  min-height: 44px;
  min-width: 44px;
  height: auto;
  padding: 0 var(--ui-space-8);
  font-size: var(--ui-font-small);
  flex-shrink: 0;
  color: var(--ui-color-accent-hover);
}
.stack-pager button:not(:disabled) {
  background: var(--ui-color-accent);
  color: var(--ui-color-surface);
  border-radius: var(--ui-radius);
}
.stack-pager button:hover:not(:disabled) {
  background: var(--ui-color-accent-hover);
}
.stack-pager button:disabled {
  opacity: 1;
  color: var(--ui-muted);
  background: var(--ui-color-accent-subtle);
}
.stack-page-position {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--ui-space-4) var(--ui-space-8);
  min-width: 0;
  color: var(--ui-text);
  font-weight: var(--ui-font-weight-bold);
}
.stack-progress {
  display: flex;
  align-items: center;
  gap: var(--ui-space-4);
}
.stack-progress i {
  width: 6px;
  height: 6px;
  border-radius: var(--ui-radius);
  background: var(--ui-muted);
}
.stack-progress i.current {
  width: 16px;
  background: var(--ui-color-accent);
}
@media (max-width: 760px) {
  body {
    background: var(--ui-color-surface);
  }
  main.stack-shell {
    padding: 0;
  }
  .stack-tools-slot,
  #stack-empty,
  noscript {
    margin-left: var(--ui-space-12);
    margin-right: var(--ui-space-12);
  }
  #component-stack {
    gap: var(--ui-space-12);
  }
  .stack-card {
    border: 0;
    border-radius: 0;
    overflow: visible;
    border-bottom: 1px solid var(--ui-line);
  }
  .stack-card-head {
    min-height: 44px;
    height: auto;
    background: var(--ui-color-accent-soft);
    border-top: 1px solid var(--ui-line);
    border-bottom: 0;
    color: var(--ui-color-accent-hover);
  }
  .stack-pages {
    padding: 0 var(--ui-space-12);
  }
  .stack-page .news-card {
    padding: 0 0 var(--ui-space-12);
  }
  .stack-page > p {
    margin: 0;
  }
  .stack-page > p a {
    display: flex;
    min-height: 48px;
    padding: var(--ui-space-6) 0;
    border-bottom: 1px solid var(--ui-line);
  }
  .stack-page > p:last-child a {
    border-bottom: 0;
  }
  .stack-page .source-status,
  .stack-page > h3 {
    margin-top: var(--ui-space-12);
  }
  .stack-page .pill {
    white-space: normal;
  }
}

.stack-header-inner {
  height: auto;
  min-height: 48px;
}
#component-search {
  height: auto;
  min-height: 44px;
  line-height: var(--ui-line-body);
}

#component-recommendations::-webkit-scrollbar {
  display: none;
}
#component-recommendations button:hover {
  background: var(--ui-color-accent-subtle);
  border-color: var(--ui-color-accent);
}
#component-recommendations button:focus-visible {
  outline-offset: -3px;
}
#recommendation-scrollbar {
  position: relative;
  height: 16px;
  margin-top: var(--ui-space-2);
  cursor: pointer;
  touch-action: none;
}
#recommendation-scrollbar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 6px;
  border-radius: var(--ui-radius);
  background: var(--ui-color-accent-subtle);
}
#recommendation-scrollbar span {
  position: absolute;
  top: 5px;
  left: 0;
  height: 6px;
  border-radius: var(--ui-radius);
  background: var(--ui-color-accent);
}
#recommendation-scrollbar:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 0;
}

.stack-card-head h2 {
  flex: 1;
  min-width: 0;
}
.stack-window-controls {
  display: flex;
  flex-shrink: 0;
}
.stack-card-head .stack-window-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-round);
  background: transparent;
  color: var(--ui-color-accent-hover);
}
.stack-window-controls button[aria-pressed='true'] {
  outline: 1px solid var(--ui-color-accent);
  outline-offset: calc(-1 * var(--ui-space-6));
}
.stack-card-head .stack-window-controls button:focus-visible {
  outline: 2px solid var(--ui-color-accent);
  outline-offset: calc(-1 * var(--ui-space-6));
}
.stack-card-head .stack-window-controls button:hover {
  background: radial-gradient(
    circle at center,
    var(--ui-color-accent-subtle) 0 18px,
    transparent 18px
  );
}
.stack-card[data-view='expanded'] .stack-pages {
  min-height: 0;
  touch-action: pan-y;
}
.stack-card[data-view='expanded'] .stack-page + .stack-page {
  border-top: 1px solid var(--ui-line);
}
.stack-card[data-view='minimized'] .stack-card-head {
  border-bottom: 0;
}
html:not(.stack-ready) .stack-window-controls {
  display: none;
}

/* Both adapters render the same layout tree and use the same frame width. */
.layout-frame .stack-shell,
.layout-frame .stack-header-inner,
.layout-frame .stack-top-inner {
  width: 100%;
  max-width: var(--frame-width, 960px);
}
.frame-header-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}
.stack-header-inner .frame-session {
  min-width: 44px;
  padding: var(--ui-space-8);
  background: transparent;
  border: 0;
  color: var(--ui-color-on-accent);
}
.layout-frame .feature-stack {
  gap: var(--ui-space-12);
}
.layout-frame .feature-card-body {
  min-height: 0;
  padding: var(--ui-space-16);
}
.layout-frame .page-intro {
  gap: var(--ui-space-12);
  margin-bottom: var(--ui-space-16);
  align-items: flex-start;
  flex-wrap: wrap;
}
.layout-frame .page-intro .eyebrow {
  display: none;
}
.layout-frame .page-intro h1 {
  font-size: var(--ui-font-20);
  line-height: var(--ui-line-heading);
}
.layout-frame .page-intro p {
  font-size: var(--ui-font-body);
}
.layout-frame :is(.news-source, .news-item, .news-release, .newsroom-summary) {
  padding: var(--ui-space-16);
}
.layout-frame .stack-settings-actions {
  position: static;
}
.layout-frame .feature-suggestions {
  display: contents;
}
.layout-frame .feature-card-toolbar {
  border-bottom: 0;
}
.layout-frame .stack-card-head strong {
  font-size: var(--ui-font-body);
}
.layout-frame .feature-card[data-view='minimized'] .feature-card-body {
  display: none;
}
.layout-frame .feature-card[data-view='expanded'] .feature-card-body {
  padding: var(--ui-space-24);
}
@media (max-width: 760px) {
  .layout-frame .feature-card-body {
    padding: var(--ui-space-12);
  }
}

.layout-frame .skip {
  position: absolute;
  left: 20px;
  top: -100px;
  background: var(--ui-color-surface);
  padding: var(--ui-space-10);
}
.layout-frame .skip:focus {
  top: 10px;
  z-index: var(--frame-layer-panel);
}
.layout-frame .frame-login .login-panel {
  width: 100%;
  max-width: none;
  padding: var(--ui-space-20);
}

.layout-frame {
  min-height: 100dvh;
}

/* Keep card boundaries when window controls return to the initial view. */
.layout-frame .ui-card.stack-card {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  /* Clip rounded corners without creating a scroll container for the sticky heading. */
  overflow: clip;
  scroll-margin-top: calc(var(--frame-header-height, 48px) + 16px);
}
.layout-frame .stack-card-head {
  position: sticky;
  top: calc(var(--frame-header-height, 48px) - var(--frame-heading-offset, 0px));
  z-index: var(--frame-layer-card);
  border-top: 0;
  border-bottom: 1px solid var(--ui-color-border-soft);
}
.layout-frame .stack-card-head .stack-title-button {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.layout-frame .stack-title-button:hover {
  text-decoration: underline;
}
.layout-frame .stack-title-button:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}
.layout-frame .stack-card[data-view='minimized'] .stack-card-head {
  border-bottom: 0;
}
.layout-frame main.stack-shell {
  padding-top: var(--ui-space-8);
}
.stack-header-inner {
  gap: var(--ui-space-4);
  flex-wrap: wrap;
}
#frame-stack-controls {
  margin-left: auto;
  min-width: 0;
}
.stack-bulk-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-space-4);
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}
.stack-bulk-actions .ui-button {
  white-space: normal;
  min-height: 44px;
  padding: var(--ui-space-4) var(--ui-space-6);
  border: 0;
  background: transparent;
  color: var(--ui-color-on-accent);
  font-size: var(--ui-font-small);
}
.layout-frame .stack-bulk-actions .ui-button:not(:last-child) {
  color: var(--ui-color-black);
  border: 1px solid var(--ui-line);
  background: var(--ui-color-surface);
}
.layout-frame .stack-bulk-actions .ui-button[aria-pressed='true'] {
  background: var(--ui-color-accent-soft);
  border-color: var(--ui-color-accent);
  box-shadow: inset 0 0 0 1px var(--ui-color-accent);
}
@media (max-width: 760px) {
  .stack-bulk-actions .ui-button {
    min-height: 44px;
    padding: var(--ui-space-2) var(--ui-space-4);
    font-size: var(--ui-font-label);
  }
}

/* Shared favorites adapter for public and member/admin stacks. */
.favorites-floating {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  z-index: var(--frame-layer-chrome);
}
.layout-frame .favorites-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-round);
  background: var(--ui-color-surface);
  color: var(--ui-color-accent);
  box-shadow: 0 2px 6px var(--ui-color-shadow);
  cursor: grab;
  touch-action: none;
  transition:
    background-color 140ms ease-out,
    border-color 140ms ease-out;
}
.favorites-toggle svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.layout-frame .favorites-toggle:hover,
.layout-frame .favorites-toggle[aria-expanded='true'] {
  background: var(--ui-color-accent-soft);
  border-color: var(--ui-color-accent);
}
.favorites-toggle:focus-visible {
  outline: 2px solid var(--ui-color-accent);
  outline-offset: 3px;
}
.favorites-floating[data-dragging] .favorites-toggle {
  cursor: grabbing;
  transition: none;
}
.favorites-panel {
  position: fixed;
  z-index: var(--frame-layer-panel);
  width: min(280px, 100vw);
  max-height: 45dvh;
  overflow: auto;
  padding: var(--ui-space-12);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-popup);
}
.favorites-panel:not([hidden]) {
  display: grid;
  gap: var(--ui-space-4);
  animation: favorites-reveal 140ms ease-out;
}
@keyframes favorites-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.favorites-panel button {
  min-height: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.favorites-panel-heading {
  margin: 0;
  padding: var(--ui-space-4) var(--ui-space-8) var(--ui-space-8);
  font-weight: var(--ui-font-weight-bold);
  font-size: var(--ui-font-small);
}
.favorites-empty {
  margin: 0;
  padding: var(--ui-space-8);
  color: var(--ui-muted);
  font-size: var(--ui-font-small);
  line-height: var(--ui-line-body);
}
.layout-frame .favorites-panel > .ui-button {
  justify-content: flex-start;
  text-align: left;
  border-color: transparent;
  background: var(--ui-color-surface);
  box-shadow: none;
}
.layout-frame .favorites-panel > .ui-button:hover {
  background: var(--ui-color-accent-soft);
}
.layout-frame .favorites-panel > .favorites-manage {
  display: flex;
  align-items: center;
  gap: var(--ui-space-8);
  margin-top: var(--ui-space-8);
  background: var(--ui-color-accent-soft);
}
.favorites-manage svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .layout-frame .favorites-toggle {
    transition: none;
  }
  .favorites-panel:not([hidden]) {
    animation: none;
  }
}
.favorites-search-label {
  display: grid;
  gap: var(--ui-space-4);
  margin-bottom: var(--ui-space-8);
}
.favorites-manager-list {
  max-height: 440px;
  overflow: auto;
  overflow-anchor: none;
}
.favorites-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-8);
  margin-top: var(--ui-space-8);
}
.favorites-pagination button {
  min-height: 44px;
}
.favorites-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--ui-space-4);
  border-bottom: 1px solid var(--ui-line);
  padding: var(--ui-space-4) 0;
}
.favorites-row label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ui-space-8);
  min-height: 44px;
  overflow-wrap: anywhere;
}
.favorites-row button {
  min-height: 44px;
  padding: var(--ui-space-4);
  white-space: nowrap;
}
.favorites-management > label {
  margin-bottom: var(--ui-space-8);
}
@media (max-width: 760px) {
  .favorites-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'name name' 'up down';
  }
  .favorites-row label {
    grid-area: name;
    min-height: 44px;
  }
  .favorites-row button {
    min-width: 72px;
  }
  .favorites-row > button:nth-of-type(1) {
    grid-area: up;
  }
  .favorites-row > button:nth-of-type(2) {
    grid-area: down;
  }
  .stack-bulk-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: var(--ui-space-4);
  }
  .stack-bulk-actions .ui-button {
    white-space: nowrap;
    padding-inline: var(--ui-space-2);
  }
}

/* Detail cards are siblings of their list, with an independent display state. */
.layout-frame [data-detail-host] {
  display: contents;
}
.layout-frame .component-detail-card .stack-card-head strong {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Card headings stay in document flow; the shared header owns global controls. */
@media (max-width: 760px), (max-height: 499px) {
  .layout-frame .stack-top {
    position: relative;
    top: auto;
  }
  .layout-frame .ui-card.stack-card {
    scroll-margin-top: 16px;
  }
  .layout-frame .stack-card-head {
    position: relative;
    top: auto;
  }
}
.layout-frame #component-recommendations button {
  min-height: 44px;
}
#component-results .news-search-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 44px;
  white-space: normal;
  text-align: left;
  padding: 8px 12px;
}
#component-results .news-search-result[hidden] {
  display: none;
}
.news-search-result small {
  font-weight: var(--ui-font-weight-regular);
}
.public-update-summary {
  padding: 8px 12px;
  margin: 8px 0;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-color-accent-soft);
}
.public-update-summary p {
  margin: 4px 0;
  font-size: var(--ui-font-small);
}
.public-update-summary small {
  display: block;
  font-size: var(--ui-font-small);
}
.shortcut-directory summary {
  min-height: 44px;
  padding: 12px;
  cursor: pointer;
  font-weight: var(--ui-font-weight-bold);
}

/* The decision area stays in its original form; only its placement changes. */
.layout-frame [data-frame-decision][data-decision-floating] {
  position: fixed;
  inset: var(--decision-top) auto auto var(--decision-left);
  width: var(--decision-width);
  max-height: var(--decision-height);
  overflow: auto;
  box-sizing: border-box;
  margin: 0;
  z-index: var(--frame-layer-card);
  background: var(--ui-color-surface);
  outline: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-dock);
}
.layout-frame .stack-card:has([data-decision-floating]) {
  overflow: visible;
  container-type: normal;
}
.layout-frame .feature-card-body:has([data-decision-floating]) {
  content-visibility: visible;
}
.layout-frame [data-frame-decision-placeholder][hidden] {
  display: none;
}

/* The frame owns viewport layers; cards cannot grow mobile fixed toolbars. */
.layout-frame {
  isolation: isolate;
}
.layout-frame .stack-top {
  z-index: var(--frame-layer-chrome);
}
.layout-frame .stack-dock,
.layout-frame .stack-dock[data-floating] {
  z-index: var(--frame-layer-navigation);
}
.layout-frame #frame-overlay {
  display: contents;
}
.layout-frame #component-results,
.layout-frame #search-empty,
.layout-frame .favorites-panel,
.layout-frame .stack-menu-items {
  z-index: var(--frame-layer-panel);
}
.layout-frame .favorites-floating {
  position: relative;
  order: 1;
  flex: 0 0 auto;
  z-index: auto;
}
.layout-frame .favorites-toggle {
  cursor: pointer;
  touch-action: manipulation;
}
.layout-frame #frame-stack-controls {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0 auto;
  padding: 0;
  max-width: 100%;
  background: transparent;
}
.layout-frame #frame-stack-controls:empty {
  display: none;
}
.layout-frame .stack-bulk-actions {
  flex-wrap: wrap;
}
.layout-frame .stack-bulk-actions .ui-button {
  flex: 1;
  min-height: 44px;
  color: var(--ui-color-accent-hover);
  background: var(--ui-color-surface);
  border: 1px solid var(--ui-line);
}
@media (max-width: 760px), (max-height: 499px) {
  .layout-frame .stack-top-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 12px;
  }
  .layout-frame .stack-search-prompt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .layout-frame #component-recommendations {
    padding: 0;
    gap: 4px;
    min-height: 44px;
  }
  .layout-frame #component-recommendations:empty {
    min-height: 0;
  }
  .layout-frame #recommendations-empty {
    display: none;
  }
  .layout-frame #recommendation-scrollbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 48px;
    height: 3px;
    margin: 0;
  }
  .layout-frame #recommendation-scrollbar::before,
  .layout-frame #recommendation-scrollbar span {
    top: 0;
    height: 3px;
  }
  .layout-frame .stack-search-row {
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .layout-frame .stack-search-row #component-search {
    height: 44px;
    min-height: 44px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-color-surface);
  }
  .layout-frame #search-submit,
  .layout-frame #search-close {
    height: 44px;
    min-height: 44px;
    padding-block: 0;
  }
}
@media (min-width: 640px) and (max-height: 499px) {
  .layout-frame .stack-top-inner {
    display: grid;
    grid-template-columns: minmax(240px, 0.45fr) minmax(0, 0.55fr);
    align-items: center;
    gap: 8px;
    padding-block: 4px;
  }
  .layout-frame .stack-search-row {
    grid-column: 1;
    grid-row: 1;
  }
  .layout-frame #dock-recommendations {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Global controls sit at the upper right of the shared recommendation/search dock. */
.layout-frame .stack-header-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}
.layout-frame .stack-bulk-actions {
  flex-wrap: nowrap;
}
.frame-account-menu {
  position: relative;
  flex: 0 0 44px;
}
.frame-account-menu:has(.frame-header-actions:empty) {
  display: none;
}
.frame-account-menu > summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  list-style: none;
  color: var(--ui-color-on-accent);
}
.frame-account-menu > summary::-webkit-details-marker {
  display: none;
}
.frame-account-menu .frame-header-actions {
  position: absolute;
  top: 44px;
  right: 0;
  padding: 4px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-color-accent);
  box-shadow: var(--ui-shadow-popup);
  z-index: var(--frame-layer-panel);
}
/* Preserve the page header; only stack controls float above the dock. */
.layout-frame .stack-header-inner {
  justify-content: space-between;
}
.layout-frame .stack-tools-slot {
  padding-top: var(--frame-toolbar-height, 44px);
}
.layout-frame .stack-dock #frame-stack-controls {
  position: absolute;
  inset: auto 0 100% auto;
  margin: 0;
  background: transparent;
  z-index: var(--frame-layer-chrome);
}
.layout-frame .stack-dock .stack-bulk-actions {
  gap: 2px;
}
.layout-frame .stack-dock .stack-bulk-actions .ui-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--ui-control-height, 44px);
  min-width: 44px;
  min-height: 44px;
  padding: 4px;
  font-size: var(--ui-font-small);
  white-space: nowrap;
  color: var(--ui-color-accent-hover);
  background: var(--ui-color-surface);
  border-radius: var(--ui-radius);
  border: 0;
}
.layout-frame .stack-bulk-actions .ui-button svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.layout-frame .stack-dock .stack-bulk-actions .ui-button[aria-pressed='true'] {
  background: var(--ui-color-accent-soft);
}
@media (max-width: 760px), (max-height: 499px) {
  .layout-frame {
    padding-top: 44px;
  }
  .layout-frame .stack-top {
    position: fixed;
    inset: 0 0 auto;
    height: 44px;
    min-height: 44px;
    padding: 0;
    z-index: var(--frame-layer-navigation);
  }
  .layout-frame .stack-header-inner {
    height: 44px;
    padding: 0 8px;
    flex-wrap: nowrap;
  }
  .layout-frame .stack-header-inner > .logo {
    font-size: var(--ui-font-label);
    flex: 0 1 auto;
  }
  .layout-frame .frame-header-actions {
    gap: 0;
    flex-wrap: nowrap;
  }
  .layout-frame .stack-top-inner {
    padding-block: 2px;
  }
  .layout-frame .ui-card.stack-card {
    scroll-margin-top: 60px;
  }
}
@media (min-width: 640px) and (max-height: 499px) {
  .layout-frame .stack-dock[data-floating] {
    top: calc(var(--frame-header-height, 44px) + var(--frame-toolbar-height, 44px));
    bottom: auto !important;
    left: 0;
    right: 0;
    height: auto;
    padding-bottom: 0;
  }
  .layout-frame .stack-dock[data-floating] .stack-top-inner {
    grid-template-columns: minmax(160px, 1fr) minmax(100px, 1fr);
    padding: 0 4px;
    gap: 4px;
  }
}

.layout-frame .stack-dock[data-compact-floating] .stack-top-inner {
  display: flex;
  flex-direction: column;
  position: relative;
}
.layout-frame .stack-dock[data-compact-floating] .stack-search-row {
  align-self: stretch;
}

/* Search results use one readable row per choice across both renderers. */
.layout-frame #component-results {
  padding: 8px;
  scrollbar-gutter: stable;
  overflow-x: hidden;
}
.layout-frame #component-results > button,
.layout-frame #component-results .search-result-group > button {
  width: 100%;
  margin: 0 0 4px;
  min-height: 44px;
  padding: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: var(--ui-font-body);
}
.layout-frame #component-results .component-result-label {
  flex: 1;
  min-width: 0;
}
.layout-frame #component-results button[hidden] {
  display: none;
}
.layout-frame #component-results .news-search-result {
  margin-bottom: 4px;
  min-height: 60px;
  gap: 4px;
  overflow-wrap: anywhere;
}
.search-result-heading {
  margin: 0 0 8px;
  padding: 8px 4px;
  font-size: var(--ui-font-small);
  color: var(--ui-text);
}
.search-result-group + .search-result-group {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--ui-line);
}

/* Recommendations and the next-card affordance stay in the stack's reading order. */
.layout-frame .frame-related {
  position: relative;
  min-width: 0;
  margin: var(--ui-space-8) 0;
}
.layout-frame .frame-related .feature-suggestions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--ui-space-6);
}
.layout-frame .frame-related #recommendation-scrollbar {
  position: relative;
  inset: auto;
}
.layout-frame .frame-related #recommendations-empty:not([hidden]) {
  display: block;
}
.layout-frame .frame-add-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-8);
  width: 100%;
  min-height: 160px;
  margin: var(--ui-space-8) 0;
  padding: var(--ui-space-24);
  border: 2px dashed var(--ui-line);
  border-radius: var(--ui-radius);
  color: var(--ui-muted);
  background: var(--ui-color-surface);
  font: inherit;
  cursor: pointer;
}
.layout-frame .frame-add-placeholder strong {
  color: var(--ui-color-accent-hover);
}
.layout-frame .frame-add-icon {
  font-size: var(--ui-font-24);
  line-height: var(--ui-line-heading);
}
.layout-frame .frame-add-placeholder:hover {
  border-color: var(--ui-color-accent);
  background: var(--ui-color-accent-soft);
}
.layout-frame .frame-add-placeholder:focus-visible {
  outline: 2px solid var(--ui-color-accent);
  outline-offset: 3px;
}
/* Recommended components and the add button read as one dashed set. */
.layout-frame .frame-add-set {
  margin: var(--ui-space-8) 0;
  padding: var(--ui-space-12);
  border: 2px dashed var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-color-surface);
}
.layout-frame .frame-add-set .frame-related {
  margin: 0 0 var(--ui-space-8);
}
.layout-frame .frame-add-set .frame-add-placeholder {
  margin: 0;
  min-height: 96px;
  border: 0;
  background: transparent;
}
.layout-frame .frame-add-set:hover,
.layout-frame .frame-add-set:focus-within {
  border-color: var(--ui-color-accent);
}
.layout-frame .frame-related-title {
  display: flex;
  align-items: center;
  gap: var(--ui-space-6);
  margin: 0 0 var(--ui-space-6);
  font-size: var(--ui-font-small);
  font-weight: var(--ui-font-weight-bold);
  color: var(--ui-muted);
}
.layout-frame .frame-related-badge {
  display: inline-block;
  padding: 0 var(--ui-space-6);
  border-radius: var(--ui-radius);
  background: var(--ui-color-accent);
  color: var(--ui-color-surface);
  font-size: var(--ui-font-small);
  line-height: var(--ui-line-body);
}
/* Off-screen recommendations ride in the dock directly above the search bar. */
.layout-frame #dock-recommendations:empty {
  display: none;
}
.layout-frame #dock-recommendations .frame-related {
  margin: 0 0 var(--ui-space-6);
}
.layout-frame #dock-recommendations .frame-related-title {
  display: none;
}
@media print {
  .layout-frame .frame-add-set,
  .layout-frame .frame-related,
  .layout-frame .frame-add-placeholder {
    display: none;
  }
}

/* Route bodies keep their content layout inside the shared card and frame. */
.layout-frame [data-page-content] {
  min-width: 0;
  overflow-wrap: anywhere;
}
.layout-frame .article {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.layout-frame .news-listing {
  container-type: inline-size;
}
.layout-frame .news-listing .hero {
  padding-top: var(--ui-space-16);
}
.layout-frame .news-listing .hero h1,
.layout-frame .article h1,
.layout-frame .report-content h1 {
  font-size: var(--ui-font-23);
  line-height: var(--ui-line-heading);
  letter-spacing: normal;
}
.layout-frame .news-listing .controls {
  flex-wrap: wrap;
}
.layout-frame .news-listing .controls > * {
  min-width: 0;
  max-width: 100%;
}
@container (max-width: 680px) {
  .news-listing .hero,
  .news-listing .layout {
    display: block;
  }
  .news-listing .hero-aside {
    display: none;
  }
  .news-listing .side {
    margin-top: var(--ui-space-24);
  }
}
.layout-frame .report-content form,
.layout-frame .report-content label {
  display: grid;
  gap: var(--ui-space-12);
}
.layout-frame .report-content textarea {
  resize: vertical;
}