/* Navigation controls only; nested content retains the shared composition layout. */
.koshi-navigation { box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; container: koshi-navigation / inline-size; }
.koshi-composition-navigation { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-block: 1.5rem; }
.koshi-composition-navigation__button {
  appearance: none; font: inherit; color: inherit; background: transparent;
  border: 0; border-block-end: .0625rem solid transparent;
  padding: .5rem .75rem; max-inline-size: 100%; overflow-wrap: anywhere; cursor: pointer;
}
.koshi-composition-navigation__button[aria-selected="true"],
.koshi-composition-navigation__button:is([aria-current="true"],[aria-current="page"]),
.koshi-composition-navigation__button[aria-expanded="true"] { border-block-end-color: currentColor; }
.koshi-composition-navigation__button:focus-visible { outline: .125rem solid currentColor; outline-offset: .25rem; }
.koshi-composition-navigation__button:disabled { opacity: .4; cursor: default; }
.koshi-composition-navigation__dot {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.75rem; min-inline-size: 2.75rem; block-size: 2.75rem;
  padding: .5rem; border: 0; border-radius: 50%;
}
.koshi-composition-navigation__dot > span {
  display: block; inline-size: .375rem; block-size: .375rem;
  border-radius: 50%; background: currentColor; opacity: .4;
}
.koshi-composition-navigation__dot:is([aria-current="true"],[aria-current="page"]) > span { opacity: 1; }
.koshi-navigation--accordion[data-koshi-navigation-enhanced="true"] > .koshi-composition-navigation__button {
  display: block; text-align: start; inline-size: 100%; margin-block: .5rem;
}
.koshi-navigation[data-koshi-orientation="vertical"] > .koshi-composition-navigation { flex-direction: column; align-items: start; }
/* Delivered legacy markup has no local viewport host; retain its existing fallback until migrated. */
@media (min-width: 48rem) {
  .koshi-navigation--accordion:not(:has(> .koshi-navigation__viewport))[data-koshi-navigation-enhanced="true"][data-koshi-orientation="horizontal"] { display: flex; align-items: stretch; }
  .koshi-navigation--accordion:not(:has(> .koshi-navigation__viewport))[data-koshi-orientation="horizontal"] > .koshi-composition-navigation__button {
    writing-mode: vertical-rl; transform: rotate(180deg); inline-size: auto; flex: 0 0 auto; margin: 0;
  }
  .koshi-navigation--accordion:not(:has(> .koshi-navigation__viewport))[data-koshi-orientation="horizontal"] > [data-koshi-panel-id] { flex: 1 1 0; }
}

/* Native child slots preserve editor wrappers; controls never own editable content. */
.koshi-navigation__viewport, .koshi-navigation__panels { min-inline-size: 0; max-inline-size: 100%; }
.koshi-navigation__panels > .koshi-editor-block { min-inline-size: 0; max-inline-size: 100%; }
.koshi-navigation__panels > .koshi-editor-block > [data-koshi-panel-id] { inline-size: 100%; block-size: 100%; margin: 0; }
.koshi-navigation [data-koshi-navigation-control][hidden] { display: none !important; }
.koshi-navigation--accordion .koshi-navigation__panels { --koshi-navigation-axis: vertical; }
.koshi-navigation--accordion[data-koshi-navigation-enhanced="true"] > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-composition-navigation__button {
  display: block; text-align: start; inline-size: 100%; margin-block: .5rem;
}
@container koshi-navigation (min-width: 48rem) {
  .koshi-navigation--accordion[data-koshi-navigation-enhanced="true"][data-koshi-orientation="horizontal"] > .koshi-navigation__viewport > .koshi-navigation__panels { display: flex; align-items: stretch; --koshi-navigation-axis: horizontal; }
  .koshi-navigation--accordion[data-koshi-orientation="horizontal"] > .koshi-navigation__viewport > .koshi-navigation__panels > .koshi-composition-navigation__button { writing-mode: vertical-rl; transform: rotate(180deg); inline-size: auto; flex: 0 0 auto; margin: 0; }
  .koshi-navigation--accordion[data-koshi-orientation="horizontal"] > .koshi-navigation__viewport > .koshi-navigation__panels > :is([data-koshi-panel-id],.koshi-editor-block) { flex: 1 1 0; min-inline-size: 0; }
}
.koshi-navigation--carousel:is([data-koshi-carousel-mode="strip"],[data-koshi-carousel-mode="pages"]) {
  --koshi-navigation-visible: 3; --koshi-navigation-mobile: 1; --koshi-navigation-gap: 1.5rem;
}
.koshi-navigation[data-koshi-items-visible="1"] { --koshi-navigation-visible: 1; }
.koshi-navigation[data-koshi-items-visible="2"] { --koshi-navigation-visible: 2; }
.koshi-navigation[data-koshi-items-visible="4"] { --koshi-navigation-visible: 4; }
.koshi-navigation[data-koshi-items-mobile="2"] { --koshi-navigation-mobile: 2; }
.koshi-navigation[data-koshi-navigation-gap="none"] { --koshi-navigation-gap: 0rem; }
.koshi-navigation[data-koshi-navigation-gap="small"] { --koshi-navigation-gap: .75rem; }
.koshi-navigation[data-koshi-navigation-gap="large"] { --koshi-navigation-gap: clamp(1.5rem,4cqi,3rem); }
.koshi-navigation--carousel[data-koshi-carousel-mode="strip"] > .koshi-navigation__viewport {
  --koshi-navigation-effective-visible: var(--koshi-navigation-visible);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain;
}
.koshi-navigation--carousel[data-koshi-carousel-mode="strip"] > .koshi-navigation__viewport:focus-visible { outline: .125rem solid currentColor; outline-offset: .25rem; }
.koshi-navigation--carousel[data-koshi-carousel-mode="strip"] > .koshi-navigation__viewport > .koshi-navigation__panels { display: flex; align-items: stretch; gap: var(--koshi-navigation-gap); }
.koshi-navigation--carousel[data-koshi-carousel-mode="strip"] > .koshi-navigation__viewport > .koshi-navigation__panels > :is([data-koshi-panel-id],.koshi-editor-block) {
  flex: 0 0 calc((100% - (var(--koshi-navigation-effective-visible) - 1) * var(--koshi-navigation-gap)) / var(--koshi-navigation-effective-visible));
  inline-size: auto; min-inline-size: 0; max-inline-size: 100%; margin: 0; scroll-snap-align: start;
}
@container koshi-navigation (max-width: 47.99rem) {
  .koshi-navigation--carousel[data-koshi-carousel-mode="strip"] > .koshi-navigation__viewport { --koshi-navigation-effective-visible: var(--koshi-navigation-mobile); }
}
/* Paged navigation keeps authored children and exposes only the current group. */
/* Bound the first paint only when scripting is enabled; no-script readers retain every item. */
@media (scripting: enabled) {
  @container koshi-navigation (min-width:48rem) {
    .koshi-navigation[data-koshi-carousel-mode="pages"]:not([data-koshi-navigation-enhanced])[data-koshi-items-visible="1"] > .koshi-navigation__viewport > .koshi-navigation__panels > :nth-child(n+2),
    .koshi-navigation[data-koshi-carousel-mode="pages"]:not([data-koshi-navigation-enhanced])[data-koshi-items-visible="2"] > .koshi-navigation__viewport > .koshi-navigation__panels > :nth-child(n+3),
    .koshi-navigation[data-koshi-carousel-mode="pages"]:not([data-koshi-navigation-enhanced]):not([data-koshi-items-visible="1"]):not([data-koshi-items-visible="2"]):not([data-koshi-items-visible="4"]) > .koshi-navigation__viewport > .koshi-navigation__panels > :nth-child(n+4),
    .koshi-navigation[data-koshi-carousel-mode="pages"]:not([data-koshi-navigation-enhanced])[data-koshi-items-visible="4"] > .koshi-navigation__viewport > .koshi-navigation__panels > :nth-child(n+5) { display:none; }
  }
  @container koshi-navigation (max-width:47.99rem) {
    .koshi-navigation[data-koshi-carousel-mode="pages"]:not([data-koshi-navigation-enhanced]):not([data-koshi-items-mobile="2"]) > .koshi-navigation__viewport > .koshi-navigation__panels > :nth-child(n+2),
    .koshi-navigation[data-koshi-carousel-mode="pages"]:not([data-koshi-navigation-enhanced])[data-koshi-items-mobile="2"] > .koshi-navigation__viewport > .koshi-navigation__panels > :nth-child(n+3) { display:none; }
  }
}
.koshi-navigation--carousel[data-koshi-carousel-mode="pages"] > .koshi-navigation__viewport {
  --koshi-navigation-effective-visible: var(--koshi-navigation-visible);
  overflow: hidden;
}
.koshi-navigation--carousel[data-koshi-carousel-mode="pages"] > .koshi-navigation__viewport > .koshi-navigation__panels {
  display: grid; grid-template-columns: repeat(var(--koshi-navigation-effective-visible), minmax(0,1fr)); gap: var(--koshi-navigation-gap);
}
@container koshi-navigation (max-width: 47.99rem) {
  .koshi-navigation--carousel[data-koshi-carousel-mode="pages"] > .koshi-navigation__viewport { --koshi-navigation-effective-visible: var(--koshi-navigation-mobile); }
}