/* Responsive refinements for phones, tablets and touch screens. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block: 70px;
}

body { overflow-x: clip; }
main, section, header, .intro > div, .shelf-bar > div,
.writing-layout > *, .book-heading h2, .book-bottom > *,
.backup-card, .dialog-head > * { min-width: 0; }

button, a, input, select, textarea, #editor { touch-action: manipulation; }
button:disabled { cursor: default; opacity: .35; }
.toolbar { flex-wrap: wrap; }
.toolbar button, .toolbar select { min-height: 36px; }
.toolbar select { max-width: 100%; }
.book-meta, .book-bottom, .editor-footer { flex-wrap: wrap; }
.cover-author { max-width: 100%; overflow-wrap: anywhere; }
.chapter-book h2, .backup-card p, .backup-notice p,
.muted, #confirmText { overflow-wrap: anywhere; }
#chapterTitle:focus-visible, #editor:focus-visible {
  outline: 2px solid #a8b79c;
  outline-offset: 6px;
}
#editor { caret-color: var(--green); }
#editor img, #editor table { max-width: 100%; }
#editor ul, #editor ol { white-space: normal; padding-inline-start: 1.6em; }
#editor li { white-space: pre-wrap; }
#toast {
  bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 14px));
  overflow-wrap: anywhere;
  line-height: 1.7;
}

dialog {
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
dialog .close { flex: 0 0 44px; width: 44px; height: 44px; }
.dialog-head { gap: 12px; }

@media (pointer: coarse) {
  .nav, .primary, .subtle, .tab, .link, .continue,
  .book-menu, .toolbar button, .toolbar select,
  .chapter-select, .chapter-actions button,
  .chapter-heading button { min-height: 44px; }
  .book-menu, .toolbar button, .chapter-actions button,
  .chapter-heading button { min-width: 44px; }
  .book-menu { font-size: 23px; }
  input, select, textarea { font-size: 16px; }
  .chapter-actions { gap: 2px; }
}

@media (max-width: 1024px) {
  .sidebar {
    position: static;
    width: auto;
    padding: max(12px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 12px max(24px, env(safe-area-inset-left, 0px));
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .brand { padding: 0; margin-right: auto; font-size: 24px; }
  .brand-icon { width: 36px; height: 40px; line-height: 40px; font-size: 22px; }
  .brand small, .nav-label, .nav span, .nav em, .side-note, .local-info { display: none; }
  .nav { font-size: 13px; min-height: 44px; padding: 10px 14px; margin: 0; white-space: nowrap; }
  main { margin-left: 0; }
  header { height: 60px; padding-inline: 30px; gap: 16px; }
  .header-right { gap: 16px; flex-shrink: 0; }
  #breadcrumb { line-height: 1.7; }
  #breadcrumb span { padding-inline: 8px; }
  #library, #backupPage { padding: 36px 30px 24px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats .quote { display: none; }
  .stats > div:nth-child(3) { border-right: 0; }
  .stats strong { font-size: clamp(23px, 3vw, 30px); overflow-wrap: anywhere; }
  .shelf-tools input { min-width: 0; font-size: 16px; min-height: 44px; }
  .shelf-tools select { min-height: 44px; font-size: 16px; }
  .primary, .subtle, .tab, .link, .continue { min-height: 44px; }
  .book-menu { width: 44px; height: 44px; top: 6px; right: 6px; font-size: 23px; }
  .cover-genre { max-width: calc(100% - 72px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-top { min-height: 68px; height: auto; padding: 10px 24px; gap: 12px; flex-wrap: wrap; }
  .workspace-top > div { gap: 8px; flex-wrap: wrap; }
  .writing-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: calc(100dvh - 200px); }
  .chapters { padding: 20px 12px; }
  .chapter-heading button { min-width: 44px; min-height: 44px; }
  .chapter-item { padding: 8px; flex-wrap: wrap; }
  .chapter-select { flex-basis: 100%; min-height: 44px; font-size: 13px; }
  .chapter-select small { font-size: 11px; }
  .chapter-actions { flex-direction: row; justify-content: flex-end; margin-left: auto; }
  .chapter-actions button { min-width: 44px; min-height: 44px; font-size: 14px; }
  .toolbar { gap: 4px; padding: 8px 12px; }
  .toolbar button { min-width: 44px; min-height: 44px; font-size: 16px; }
  .toolbar select { min-height: 44px; font-size: 16px; }
  .paper { margin: 24px 18px; padding: 30px; }
  #chapterTitle { font-size: 25px; }
  .editor-footer { gap: 8px 20px; line-height: 1.7; padding: 12px 24px; }
  .focus-mode .writing-layout { grid-template-columns: minmax(0, 1fr); }
  .focus-mode .paper { margin-inline: auto; width: min(850px, calc(100% - 36px)); }
  label input, label select, label textarea { font-size: 16px; min-height: 46px; }
}

@media (max-width: 760px) {
  .sidebar {
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    gap: 4px;
  }
  .brand { font-size: 22px; gap: 8px; letter-spacing: 2px; }
  .brand-icon { width: 32px; height: 36px; line-height: 36px; font-size: 20px; }
  .nav { padding: 10px; font-size: 12px; }
  header {
    min-height: 54px;
    height: auto;
    padding: 12px max(18px, env(safe-area-inset-right, 0px)) 12px max(18px, env(safe-area-inset-left, 0px));
    gap: 10px;
    font-size: 11px;
  }
  .save-state { font-size: 10px; line-height: 1.6; }
  .header-right { max-width: 47%; }
  #library, #backupPage {
    padding: 28px max(18px, env(safe-area-inset-right, 0px)) 24px max(18px, env(safe-area-inset-left, 0px));
  }
  .intro { gap: 14px; }
  .eyebrow { font-size: 8px; line-height: 1.7; }
  h1 { font-size: 28px; }
  h1 span { font-size: 11px; }
  .primary { padding: 12px 16px; font-size: 13px; }
  .stats { margin-block: 24px; padding-block: 20px; }
  .stats > div { padding-inline: 12px; }
  .stats span { font-size: 10px; }
  .stats strong { font-size: clamp(22px, 6vw, 28px); margin-top: 10px; line-height: 1.25; }
  .stats strong small { margin-left: 4px; }
  .shelf-bar { gap: 6px; }
  .shelf-bar > div:first-child { display: flex; width: 100%; }
  .tab { padding: 12px 4px 14px; margin-right: 22px; font-size: 13px; }
  .shelf-tools { gap: 8px; align-items: stretch; flex-wrap: wrap; }
  .shelf-tools input { width: 0; flex: 1 1 160px; }
  .shelf-tools select { flex: 0 1 112px; max-width: 100%; font-size: 14px; }
  .books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .book-card:hover { transform: none; }
  .book-cover { height: 166px; padding-top: 46px; }
  .cover-title { font-size: 20px; letter-spacing: 2px; }
  .cover-author { font-size: 10px; letter-spacing: 1px; }
  .book-content { padding: 14px; }
  .book-heading h2 { white-space: normal; overflow-wrap: anywhere; font-size: 15px; line-height: 1.6; }
  .book-desc { font-size: 12px; min-height: 46px; }
  .book-meta { font-size: 11px; gap: 4px 12px; }
  .book-bottom { margin-top: 14px; padding-top: 8px; gap: 2px 8px; }
  .book-bottom small { font-size: 10px; }
  .continue { text-align: left; font-size: 12px; padding: 8px 0; }
  .new-card { min-height: 360px; padding: 24px 12px; text-align: center; font-size: 13px; line-height: 1.7; }
  .new-card small { font-size: 11px; }
  .library-bottom { flex-wrap: wrap; gap: 8px; margin-top: 24px; }
  .library-bottom > span { max-width: 100%; font-size: 11px; }
  .library-bottom .link { padding: 8px 0; font-size: 12px; }
  .workspace-top { padding: 8px max(14px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px)); gap: 4px 8px; }
  .workspace-top > .link { font-size: 12px; }
  .workspace-top > div { gap: 6px; margin-left: auto; }
  .workspace-top .subtle { min-height: 44px; padding: 8px 10px; font-size: 12px; }
  .writing-layout { display: flex; flex-direction: column; min-height: 0; }
  .chapters { padding: 6px max(14px, env(safe-area-inset-right, 0px)) 12px max(14px, env(safe-area-inset-left, 0px)); }
  .chapter-heading { padding: 0 2px; font-size: 12px; min-height: 44px; }
  #chapterList {
    display: flex;
    width: 100%;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #bac5b1 transparent;
    padding-block: 2px 6px;
    -webkit-overflow-scrolling: touch;
  }
  .chapter-item {
    flex: 0 0 min(232px, 76vw);
    min-width: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 8px 10px 4px;
    background: #e9ece2;
    border: 1px solid transparent;
    scroll-snap-align: start;
  }
  .chapter-item.active { border-color: #b5c3a9; background: #e1e7d8; }
  .chapter-select { flex: 1; width: 100%; min-height: 44px; padding: 2px; }
  .chapter-select span { font-size: 13px; }
  .chapter-select small { margin-top: 4px; font-size: 10px; }
  .chapter-actions { flex-direction: row; justify-content: flex-end; gap: 4px; border-top: 1px solid #d9dfd0; }
  .chapter-actions button { width: 44px; min-height: 44px; font-size: 17px; padding: 4px; border-radius: 4px; }
  .chapter-actions button:not(:disabled):active { background: #d3ddc9; }
  .paper-area { width: 100%; }
  .toolbar {
    gap: 2px;
    justify-content: flex-start;
    padding: 6px max(12px, env(safe-area-inset-right, 0px)) 6px max(12px, env(safe-area-inset-left, 0px));
    top: 0;
    z-index: 3;
  }
  .toolbar button { min-width: 44px; min-height: 44px; padding: 6px 8px; font-size: 15px; }
  .toolbar select { min-height: 44px; margin-left: auto; padding: 6px 4px; font-size: 16px; }
  .tool-divider { margin-inline: 2px; flex-shrink: 0; }
  .paper, .focus-mode .paper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 28px max(22px, env(safe-area-inset-right, 0px)) 60px max(22px, env(safe-area-inset-left, 0px));
    min-height: 60vh;
    min-height: 60dvh;
  }
  #chapterTitle { font-size: 24px; line-height: 1.65; margin-bottom: 24px; border-radius: 0; padding: 0; }
  #editor { min-height: 45vh; min-height: 45dvh; line-height: 1.95; }
  .editor-footer {
    padding: 12px max(18px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
    font-size: 11px;
  }
  .backup-grid { margin-top: 24px; gap: 18px; }
  .backup-card { padding: 24px; }
  .backup-card p, .backup-notice p { font-size: 13px; }
  .backup-card > small { font-size: 11px; line-height: 1.8; }
  .backup-notice { padding: 20px; }
  .page-footer { padding: 24px 18px max(24px, calc(env(safe-area-inset-bottom, 0px) + 12px)); font-size: 10px; letter-spacing: 1px; }
  dialog { width: calc(100vw - 24px); padding: 20px; border-radius: 12px; }
  dialog .dialog-head { margin-bottom: 8px; }
  .dialog-head h2, dialog > h2 { font-size: 22px; }
  dialog label { font-size: 13px; margin-block: 14px; }
  .form-row { gap: 12px; }
  .dialog-actions { margin-top: 20px; }
  .dialog-actions button { min-height: 46px; font-size: 14px; }
  .export-options { gap: 8px; }
  .export-options button { min-width: 0; padding: 20px 6px; }
  .export-options strong { font-size: 18px; }
  .export-options small { font-size: 11px; line-height: 1.7; }
}

@media (max-width: 420px) {
  .books { grid-template-columns: minmax(0, 1fr); }
  .book-cover { height: 185px; }
  .cover-title { font-size: 25px; }
  .book-content { padding: 18px; }
  .book-bottom { flex-wrap: nowrap; }
  .new-card { min-height: 190px; }
  .workspace-top > .link { flex: 1 0 100%; text-align: left; }
  .workspace-top > div { margin-left: 0; flex: 1; }
  .workspace-top .subtle { flex: 1; }
  .header-right { display: flex; }
  .stats strong small { font-size: 9px; }
}

@media (max-width: 340px) {
  .brand { font-size: 19px; }
  .nav { padding-inline: 7px; font-size: 11px; }
  .intro { flex-wrap: wrap; }
  .intro > .primary { width: 100%; }
  .stats > div { padding-inline: 8px; }
  .stats strong { font-size: 20px; }
  .form-row { display: block; }
  .export-options { flex-direction: column; }
  .export-options button { padding: 14px; }
  .export-options small { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}