/* Readspace prototype — screen layout only. Every component and value comes from the design system
   (ds/tokens.css + ds/bundle.css); this file places them on the two screens. */

html { background: var(--bg); }
body { min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0 0 auto; z-index: calc(var(--layer-header) + 1); height: env(safe-area-inset-top, 0px); background: var(--bg); }
.rs-header { top: env(safe-area-inset-top, 0px); }
#app { min-height: 100vh; }

.app-avatar-btn { width: var(--size-control-md); height: var(--size-control-md); border-radius: var(--radius-full); }
.app-avatar-btn[aria-expanded="true"] { background: transparent; box-shadow: 0 0 0 2px var(--primary-soft); }
.app-header-search { max-width: 440px; }
@media (hover: none) { .app-hide-touch { display: none; } }

/* ---------- search dialog ---------- */
.app-result { position: relative; }
.app-result[aria-selected="true"] { background: var(--surface-sunken); }
.app-result__enter { margin-left: auto; color: var(--text-subtle); opacity: 0; }
.app-result[aria-selected="true"] .app-result__enter { opacity: 1; }
.app-result__done { flex: none; color: var(--success); }
.app-result .rs-menu__text > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-search-empty { margin: var(--space-2); border: 0; }

/* ---------- screen A: library ---------- */
.lib {
  max-width: calc(var(--size-container) + 2 * var(--space-8)); margin: 0 auto;
  padding-block: var(--space-10) var(--space-20);
  padding-left: max(var(--space-8), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-8), env(safe-area-inset-right, 0px));
}
.lib__head { margin-bottom: var(--space-10); }
.lib__title { margin: 0; color: var(--text); }
.lib__desc { margin: var(--space-2) 0 0; color: var(--text-secondary); }
.lib__section + .lib__section { margin-top: var(--space-12); }
.lib__section-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-4); }
.lib__section-head h2 { margin: 0; color: var(--text); }
.lib__count { color: var(--text-secondary); }
.lib__continue { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-6); align-items: stretch; }
.lib__continue--single { grid-template-columns: minmax(0, 1fr); }
.lib__recent { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-raised); }
.lib__recent-title { margin: 0; padding: var(--space-2) var(--space-3) var(--space-1); color: var(--text-secondary); }
.lib__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.lib__search { width: 300px; }
.lib__chips { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.lib__chips::-webkit-scrollbar { display: none; }
.lib__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }

@media (max-width: 1023px) {
  .lib__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib__continue { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .lib { padding-block: var(--space-6) var(--space-16); padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
  .lib__head { margin-bottom: var(--space-8); }
  .lib__title.display { font-size: 24px; line-height: 32px; }
  .lib__toolbar { flex-direction: column; align-items: stretch; }
  .lib__search { width: 100%; }
  .lib__chips { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }
}
@media (max-width: 639px) {
  .lib__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

/* ---------- screen B: learning viewer ---------- */
.viewer__body { display: flex; align-items: flex-start; }
.viewer__sidebar {
  position: sticky; top: calc(var(--size-header) + env(safe-area-inset-top, 0px)); flex: none;
  width: var(--size-sidebar); height: calc(100vh - var(--size-header)); height: calc(100dvh - var(--size-header));
  border-right: 1px solid var(--border); background: var(--bg);
  transition: margin-left var(--rs-base) var(--rs-ease), visibility 0s linear 0s;
}
.viewer--collapsed .viewer__sidebar { margin-left: calc(-1 * var(--size-sidebar)); visibility: hidden; transition: margin-left var(--rs-base) var(--rs-ease), visibility 0s linear var(--rs-base); }
.side { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.side__top { display: flex; flex: none; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3); }
.side__book { display: flex; align-items: center; gap: var(--space-3); }
.side__book-text { flex: 1; min-width: 0; }
.side__book-title { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.side__book-meta { margin: 2px 0 0; color: var(--text-secondary); }
.side__tree { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1) var(--space-3) var(--space-8); border-top: 1px solid var(--border); }
.side__tree .rs-tree { padding-top: var(--space-2); }
.rs-drawer__body .side { height: auto; }
.rs-drawer__body .side__tree { overflow: visible; }

.viewer__main {
  position: relative; flex: 1; min-width: 0;
  padding-block: var(--space-12) var(--space-20); padding-inline: var(--space-10);
}
.viewer__doc { max-width: var(--size-prose); margin: 0 auto; }
.viewer__expand { position: fixed; top: calc(var(--size-header) + env(safe-area-inset-top, 0px) + var(--space-4)); left: max(var(--space-4), env(safe-area-inset-left, 0px)); z-index: 5; box-shadow: var(--shadow-sm); }
.viewer__toc-inline { margin: calc(-1 * var(--space-6)) 0 var(--space-8); }
.app-toc-h3 { padding-left: var(--space-8); }
.viewer__content { min-height: 240px; }
.doc-footer { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-16); }
.viewer__toc {
  position: sticky; top: calc(var(--size-header) + env(safe-area-inset-top, 0px)); flex: none;
  width: calc(var(--size-toc) + var(--space-8)); max-height: calc(100vh - var(--size-header)); overflow-y: auto;
  padding: var(--space-12) var(--space-8) var(--space-8) 0;
}

.doc-skeleton { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); }
.doc-skeleton span { display: block; height: 14px; border-radius: var(--radius-full); background: var(--surface-sunken); animation: doc-pulse 1.4s ease-in-out infinite; }
.doc-skeleton i { display: block; height: var(--space-6); }
@keyframes doc-pulse { 50% { opacity: 0.55; } }

@media (max-width: 1279px) {
  .viewer__main { padding-inline: var(--space-8); }
}
@media (max-width: 767px) {
  .viewer__main { padding-block: var(--space-6) var(--space-16); padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
  .viewer__header .rs-header__title { font-size: 15px; }
  .viewer__toc-inline { margin-top: calc(-1 * var(--space-4)); }
  .doc-footer { margin-top: var(--space-12); }
}

/* ---------- login screen, notices ---------- */
.app-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); box-sizing: border-box; background: var(--bg); }
.app-login__card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-md); }
.app-login__form { display: flex; flex-direction: column; gap: var(--space-4); }
.app-login__field { display: flex; flex-direction: column; gap: var(--space-1); }
.app-login__field label { color: var(--text-secondary); }
.app-login__field input { box-sizing: border-box; width: 100%; height: var(--size-control-lg); padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); font: inherit; }
.app-login__field input:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.app-login__error { margin: 0; min-height: 1.5em; color: var(--danger-text); }
.app-notice { position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%); z-index: calc(var(--layer-header) + 2); max-width: calc(100vw - 2 * var(--space-6)); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--danger-soft); color: var(--danger-text); box-shadow: var(--shadow-lg); }
.app-state { max-width: 560px; margin: 0 auto; padding: var(--space-20) var(--space-6); }