/* Three calm selection steps: subject doors -> books -> five-question activities.
   Only each card track scrolls; headers, breadcrumbs and controls remain still. */
.garden-menu,
.library-screen {
  --selection-gap: clamp(12px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, 16px);
  min-height: 0;
  overflow: hidden;
}
.garden-menu > *,
.library-screen > * { min-width: 0; }
.garden-menu > .topbar,
.garden-menu > .garden-welcome,
.garden-menu > .garden-footer,
.garden-menu > .selection-footer,
.library-screen > .topbar,
.library-screen > .library-crumbs,
.library-screen > .selection-footer { flex: 0 0 auto; }
.garden-menu .garden-doors,
.library-track {
  display: flex;
  flex: 1 1 0;
  align-items: stretch;
  gap: var(--selection-gap);
  min-width: 0;
  min-height: 0;
  padding: 5px 4px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.garden-menu .garden-doors::-webkit-scrollbar,
.library-track::-webkit-scrollbar { display: none; }
.garden-menu .garden-door {
  flex: 0 0 calc((100% - 3 * var(--selection-gap)) / 3.18);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  touch-action: pan-x;
}
.garden-menu .garden-door:focus-visible,
.book-card:focus-visible {
  outline: 3px solid #548b8c;
  outline-offset: -5px;
}
.garden-menu .garden-footer { gap: 12px; min-height: 48px; padding-top: 0; }
.garden-footer > .selection-footer { flex: 1 1 auto; min-width: 0; }
.garden-menu .garden-album { flex: 0 1 auto; min-height: 48px; }
.garden-menu .parent-entry { flex: 0 0 auto; min-height: 48px; }

.library-screen .topbar,
.shelf--hierarchy .topbar { height: clamp(48px, 9vh, 68px); }
.library-screen .topbar-title { color: var(--forest); }
.library-screen .topbar .icon-button,
.library-screen .menu-fullscreen-button,
.library-screen .menu-install-button { min-height: 48px; }
.library-screen .menu-fullscreen-button,
.library-screen .menu-install-button,
.shelf--hierarchy .menu-fullscreen-button,
.shelf--hierarchy .menu-install-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.library-screen .menu-fullscreen-button span,
.library-screen .menu-install-button span,
.shelf--hierarchy .menu-fullscreen-button span,
.shelf--hierarchy .menu-install-button span { font-size: 19px; }
.library-screen .menu-fullscreen-button small,
.library-screen .menu-install-button small,
.shelf--hierarchy .menu-fullscreen-button small,
.shelf--hierarchy .menu-install-button small { font-size: 9px; white-space: nowrap; }
.library-crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 48px;
  overflow: hidden;
  color: #9d896c;
  font-size: 14px;
}
.library-crumbs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 48px;
  min-height: 48px;
  padding: 6px 13px;
  border: 1px solid #cdbb9d;
  border-radius: 15px;
  color: #54705a;
  background: #fffdf5a6;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.library-crumbs button:active { background: #ecedda; }
/* Only the book name yields space. Keep the final "あそび" step visible even
   when an unusually long workbook title is selected on a narrow screen. */
.library-crumbs button[data-action="open-books"] {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-crumbs > span[aria-hidden="true"],
.library-crumbs > [aria-current="page"] { flex: 0 0 auto; }
.library-crumbs strong,
.library-crumbs [aria-current] {
  min-width: 0;
  overflow: hidden;
  color: var(--forest);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book-card {
  --book-edge: var(--door-color, #a6bea0);
  --book-paper: var(--door-paper, #edf2df);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  justify-items: center;
  flex: 0 0 clamp(240px, 31vw, 330px);
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding: 15px 19px 13px 23px;
  border: 1.5px solid var(--book-edge);
  border-left-width: 5px;
  border-radius: 8px 24px 24px 8px;
  color: var(--forest);
  background: linear-gradient(90deg, #d8ca9a28, transparent 16px), radial-gradient(ellipse at 70% 20%, #fffef9 10%, transparent 80%), var(--book-paper);
  box-shadow: 0 5px 0 #786b491c, 3px 0 0 #fffaf0, 5px 0 0 #bba98555;
  text-align: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  touch-action: pan-x;
  transition: border-color .15s, background-color .15s;
}
.book-card:active { border-color: #456e52; background-color: #e8efd9; }
.book-card .book-number {
  justify-self: start;
  color: #8c795b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}
.book-card .book-cover {
  position: relative;
  display: grid;
  align-self: stretch;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 3px;
}
.book-card .book-cover::before {
  content: "";
  position: absolute;
  inset: 9% 11%;
  border-radius: 50%;
  background: #fffdf179;
  pointer-events: none;
}
.book-card .book-cover img {
  position: relative;
  display: block;
  width: clamp(80px, 20vh, 150px);
  height: clamp(80px, 20vh, 150px);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.book-card .book-spine {
  position: absolute;
  left: -18px;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: var(--book-edge);
  opacity: .35;
  pointer-events: none;
}
.book-title {
  display: -webkit-box;
  width: 100%;
  margin: 0;
  overflow: hidden;
  font-size: clamp(18px, 2.8vh, 24px);
  font-weight: 800;
  line-height: 1.32;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.book-summary { margin: 0; color: #8e7a5d; font-size: 12px; line-height: 1.4; white-space: nowrap; }
.book-progress { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 3px 10px; border-radius: 11px; color: #557156; background: #fdfcf0bb; font-size: 12px; font-weight: 800; white-space: nowrap; }
.book-open { align-self: end; justify-self: stretch; margin-top: 2px; padding-top: 9px; border-top: 1px solid #bba67a66; color: #526a4e; font-size: 13px; font-weight: 800; white-space: nowrap; }

.selection-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 0;
  min-height: 48px;
  color: var(--forest);
}
.selection-footer button,
.selection-footer .icon-button,
.shelf--hierarchy .shelf-footer .icon-button {
  flex: 0 0 auto;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 1.5px solid #b89c79;
  border-radius: 17px;
  color: #41634f;
  background: #fffaf0;
  font-size: 25px;
}
.selection-footer [data-selection-status] { min-width: 54px; text-align: center; color: #5b7259; font-size: 15px; font-weight: 800; white-space: nowrap; }
.selection-footer small { color: #9a8669; font-size: 11px; white-space: nowrap; }
.selection-footer button:disabled { opacity: .34; }

/* The breadcrumb and adult review/progress controls share one row. */
.shelf--hierarchy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "top top" "crumbs controls" "cards cards" "pager pager";
  gap: clamp(6px, 1.4vh, 12px) 10px;
  min-height: 0;
  overflow: hidden;
}
.shelf--hierarchy > .topbar { grid-area: top; }
.shelf--hierarchy > .library-crumbs { grid-area: crumbs; }
.shelf--hierarchy > .shelf-heading { grid-area: controls; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; padding: 0; }
.shelf--hierarchy > .stage-grid { grid-area: cards; min-height: 0; overflow-y: hidden; }
.shelf--hierarchy > .shelf-footer { grid-area: pager; min-height: 48px; }
.shelf--hierarchy.reviewing {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas: "top top" "crumbs controls" "reviews reviews" "cards cards" "pager pager";
}
.shelf--hierarchy > .test-review-toolbar { grid-area: reviews; }
.shelf--hierarchy .stage-operation { display: flex; min-height: 16px; font-size: 11px; }
.shelf--hierarchy .test-mode-toggle { min-height: 44px; }
.shelf--hierarchy .workbook-completion { display: inline-flex; }

@media (min-width: 900px) and (min-height: 500px) {
  .garden-menu .garden-door { flex-basis: calc((100% - 3 * var(--selection-gap)) / 4); }
  .garden-menu .garden-doors { padding-bottom: 10px; }
}
@media (max-height: 480px) {
  .garden-menu,
  .library-screen { --selection-gap: 13px; gap: 6px; }
  .garden-menu .garden-doors,
  .library-track { padding-top: 3px; padding-bottom: 7px; }
  .library-screen .topbar,
  .shelf--hierarchy .topbar { height: 48px; }
  .library-screen .topbar .icon-button,
  .library-screen .menu-fullscreen-button,
  .library-screen .menu-install-button { width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding-inline: 2px; }
  .library-screen .topbar-title { font-size: 21px; }
  .library-crumbs { gap: 7px; font-size: 12px; }
  .library-crumbs button { padding-inline: 10px; font-size: 12px; }
  .book-card {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 3px 8px;
    padding: 9px 11px 8px 13px;
    border-radius: 7px 18px 18px 7px;
  }
  .book-card .book-number { grid-column: 2; grid-row: 1; font-size: 10px; }
  .book-card .book-cover { grid-column: 1; grid-row: 1 / 5; padding: 0; }
  .book-card .book-cover img { width: min(100%, 120px); height: 100%; max-height: 140px; }
  .book-card .book-spine { left: -8px; }
  .book-card .book-title { grid-column: 2; grid-row: 2; font-size: 17px; line-height: 1.28; text-align: left; }
  .book-card .book-summary { grid-column: 2; grid-row: 3; font-size: 10px; justify-self: start; }
  .book-card .book-progress { grid-column: 2; grid-row: 4; min-height: 19px; padding: 2px 7px; font-size: 10px; justify-self: start; }
  .book-card .book-open { grid-column: 1 / -1; grid-row: 5; padding-top: 5px; margin-top: 2px; font-size: 11px; }
  .garden-footer > .selection-footer { gap: 6px; }
  .garden-footer .selection-footer small { display: none; }
  .garden-footer .garden-album { padding-inline: 10px; gap: 7px; }
  .garden-footer .garden-album small { display: none; }
  .garden-footer .parent-entry { padding-inline: 7px; font-size: 12px; }
  .shelf--hierarchy { gap: 6px 8px; }
  .shelf--hierarchy .stage-card img { height: min(66px, 100%); width: min(75px, 100%); }
  .shelf--hierarchy .stage-operation { display: flex; padding-top: 2px; min-height: 15px; font-size: 10px; }
  .shelf--hierarchy .stage-operation b { font-size: 14px; }
  .shelf--hierarchy .stage-title { font-size: 15px; line-height: 1.24; }
  .shelf--hierarchy:not(.reviewing) .stage-card { padding: 29px 9px 7px; gap: 3px; }
  .shelf--hierarchy .workbook-completion { display: inline-flex; min-width: 0; font-size: 10px; }
  .shelf--hierarchy .shelf-footer { gap: 12px; }
}
@media (max-height: 330px) {
  .garden-menu .garden-welcome { min-height: 39px; }
  .garden-menu .garden-door { padding-top: 7px; }
  .garden-menu .door-animal { padding-top: 0; }
  .garden-menu .door-progress { padding-top: 0; margin-top: 0; }
  .garden-menu .door-progress b { display: none; }
  .garden-menu .garden-album { min-height: 48px; }
  .book-card { gap: 2px 7px; padding-block: 7px; }
  .book-card .book-number { font-size: 9px; }
  .book-card .book-title { font-size: 15px; line-height: 1.2; }
  .book-card .book-progress { min-height: 16px; padding-block: 1px; font-size: 9px; }
  .book-card .book-open { padding-top: 3px; margin-top: 0; font-size: 10px; }
  .shelf--hierarchy .workbook-completion { display: none; }
  .shelf--hierarchy .stage-operation { display: flex; }
  .shelf--hierarchy .stage-title { font-size: 14px; }
}
@media (max-width: 700px) {
  .garden-menu .garden-footer { gap: 6px; }
  .garden-footer .garden-album strong { font-size: 12px; }
  .garden-footer .garden-album .mini-capsule { width: 22px; height: 27px; }
  .garden-footer .selection-footer { gap: 4px; }
  .garden-footer .selection-footer [data-selection-status] { min-width: 38px; font-size: 12px; }
  .garden-footer .parent-entry { font-size: 11px; padding-inline: 4px; }
  .shelf--hierarchy .library-crumbs { gap: 4px; }
  .shelf--hierarchy .library-crumbs button { padding-inline: 7px; }
  .shelf--hierarchy .workbook-completion { display: none; }
  .shelf--hierarchy .shelf-footer small { font-size: 10px; }
}
@media (orientation: portrait) and (max-width: 599px) {
  .garden-menu .garden-door,
  .library-screen .book-card { flex-basis: 83%; }
  .garden-menu .garden-welcome { gap: 8px; }
  .garden-menu .garden-resume { min-width: 0; max-width: 47%; padding-inline: 10px; }
  .garden-menu .garden-greeting img { width: 43px; height: 43px; }
  .garden-menu .garden-footer { flex-wrap: wrap; }
  .garden-footer > .selection-footer { order: -1; flex-basis: 100%; }
  .garden-menu .parent-entry { margin-left: auto; }
  .library-crumbs { gap: 5px; }
  .library-crumbs button { padding-inline: 8px; font-size: 12px; }
  .shelf--hierarchy { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "top" "crumbs" "controls" "cards" "pager"; }
  .shelf--hierarchy.reviewing { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; grid-template-areas: "top" "crumbs" "controls" "reviews" "cards" "pager"; }
}
@media (prefers-reduced-motion: reduce) {
  .garden-menu .garden-doors,
  .library-track { scroll-behavior: auto; }
  .book-card { transition: none; }
}