:root{--green:#244b40;--ink:#263d35;--muted:#8b9085;--paper:#faf9f5;--line:#e7e7dd;--verse:28px}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,"Microsoft JhengHei",sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit;color:inherit;background:none;border:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #b4884e;outline-offset:4px}a{color:inherit}.app{max-width:1600px;min-height:100vh;margin:auto;display:grid;grid-template-columns:245px 1fr}aside{padding:43px 25px;background:#f0f1e9;border-right:1px solid var(--line)}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;font-family:serif;font-size:22px;font-weight:bold;white-space:nowrap}.brand small{font:10px system-ui;display:block;margin-top:8px;color:#858b7e;letter-spacing:1px}.seal{background:var(--green);color:white;padding:10px 5px;writing-mode:vertical-rl;font-size:18px;border-radius:3px;letter-spacing:4px}.side-label{font-size:11px;color:var(--muted);letter-spacing:2px;margin:55px 15px 18px}nav{display:grid;gap:9px}nav button{display:flex;gap:15px;align-items:center;text-align:left;padding:14px 16px;border-radius:8px;color:#737e70}nav button.active{background:var(--green);color:#fff}nav b{font:21px serif}nav small{font-size:10px;opacity:.65;display:block;margin-top:4px}.nav-icon{font:22px serif;border:1px solid currentColor;width:30px;height:33px;text-align:center;opacity:.7}.aside-note{margin:60px 15px 30px;font:21px/1.9 serif;letter-spacing:3px}.aside-note span{display:block;font:10px system-ui;letter-spacing:0;color:var(--muted);margin-top:16px}.saved-nav{border-top:1px solid #dcded1;width:100%;text-align:left;padding:23px 12px;font-size:13px}.saved-nav span{float:right}main{padding:0 48px}header{height:83px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:11px;color:#8c9388}header button{font-size:11px}.intro{padding:40px 0 33px}.eyebrow{font-size:10px;letter-spacing:2px;color:#929378}h1{font:36px/1.4 "Noto Serif TC",serif;letter-spacing:3px;margin:13px 0}.intro p{font-size:12px;color:#83897e}.workspace{display:grid;grid-template-columns:250px minmax(0,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;min-height:590px}.catalog{padding:25px 20px;background:#f5f6ef;border-right:1px solid var(--line)}.catalog-head{display:flex;justify-content:space-between;align-items:center}.catalog-head small{font-size:10px;color:#8c9485}.catalog h2{font:26px serif;margin:8px 0 24px}.book-mark{font:38px serif;color:#d4d8c8}.search{display:flex;align-items:center;background:#fff;border:1px solid var(--line);padding:9px;border-radius:6px;gap:5px}.search input{width:100%;min-width:0;border:0;background:transparent;font:11px system-ui;color:var(--ink);outline:none}.catalog-label{display:flex;justify-content:space-between;font-size:10px;color:#969c8e;padding:25px 0 13px}.chapter-item{width:100%;text-align:left;padding:15px 12px;margin-bottom:7px;border-radius:6px}.chapter-item.active{background:#e2e8db;border-left:3px solid var(--green)}.chapter-item b{font-size:13px;font-weight:500}.chapter-item small{display:block;font-size:10px;margin-top:9px;color:#89917f}.sample-note{font-size:10px;line-height:1.9;color:#959b8d;margin-top:35px}article{padding:23px 35px}.reader-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#8c9586}.reader-top button{font-size:11px;border:1px solid var(--line);border-radius:5px;padding:7px 10px}.chapter-heading{margin:33px 0 25px}.chapter-heading>span{font-size:10px;letter-spacing:2px;color:#a18b63}.chapter-heading h2{font:29px serif;letter-spacing:3px;margin:10px 0}.chapter-heading p{font-size:11px;color:#93998c}.tools{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:10px 0;font-size:11px;color:#7e8978}.tools label{display:flex;align-items:center;gap:6px}.tools input{accent-color:var(--green)}.tools button{padding:0 8px}.original{padding:25px 0 30px}.section-label{font-size:10px;color:#8a957f;letter-spacing:2px;margin-bottom:19px}#verse{font:var(--verse)/2.05 "Noto Serif TC","PMingLiU",serif;letter-spacing:3px}ruby{ruby-position:over}rt{font:10px/1 system-ui;letter-spacing:0;color:#88947a}.tabs{display:flex;gap:27px;border-bottom:1px solid var(--line)}.tabs button{font-size:12px;padding:12px 0;color:#909987}.tabs button[aria-selected=true]{border-bottom:2px solid var(--green);color:var(--green);font-weight:600}.annotation{background:#f6f7f1;margin:20px 0;padding:20px;border-radius:7px}.annotation-title{font-size:11px;color:#6c7d61}.annotation p{font:15px/2 serif;color:#5e6d55;margin:12px 0}.annotation #annotationNote{font-size:10px;line-height:1.7;color:#969e8d}.reader-footer{display:flex;justify-content:space-between;font-size:10px;color:#919985;padding:5px 0 10px}.reader-footer a{text-decoration:none}footer{padding:27px 0;font-size:10px;color:#9ca291;display:flex;justify-content:space-between}dialog{border:1px solid var(--line);border-radius:15px;max-width:480px;width:90%;padding:30px;color:var(--ink)}dialog::backdrop{background:#18392d70}dialog h2{font-family:serif}dialog p{font-size:14px;line-height:1.9}dialog button{background:var(--green);color:#fff;padding:11px 20px;border-radius:6px}@media(min-width:1400px){main{padding:0 65px}.workspace{grid-template-columns:280px 1fr}article{padding:26px 48px}}@media(max-width:1050px){.app{grid-template-columns:190px 1fr}aside{padding:32px 16px}.brand{font-size:18px;gap:8px}.brand small{font-size:8px}main{padding:0 25px}.workspace{grid-template-columns:190px 1fr}article{padding:22px}.catalog{padding:22px 14px}}@media(max-width:760px){.app{display:block}aside{padding:18px 20px 12px;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:21px}.seal{font-size:14px;padding:6px 4px}.brand small{font-size:9px}.side-label,.aside-note{display:none}nav{grid-template-columns:repeat(4,1fr);gap:6px;margin-top:18px}nav button{padding:10px 5px;justify-content:center;gap:0}nav b{font-size:17px}.nav-icon,nav small{display:none}.saved-nav{position:absolute;right:15px;top:26px;border:0;width:auto;padding:8px;font-size:11px}.saved-nav span{margin-left:6px}main{padding:0 18px}header{height:46px;font-size:10px}.intro{padding:27px 0 23px}h1{font-size:28px;letter-spacing:1px}.intro p{font-size:11px;line-height:1.8}.workspace{display:block}.catalog{border-right:0;border-bottom:1px solid var(--line);padding:18px}.catalog-head{float:left;width:100%;margin-bottom:12px}.catalog h2{font-size:21px;display:inline;margin-left:10px}.catalog-head small{font-size:10px}.book-mark{font-size:23px}.search{clear:both}.catalog-label{padding:15px 0 7px}.chapter-item{padding:10px;margin-bottom:0}.chapter-item small{margin-top:6px}.sample-note{margin:12px 0 0;font-size:9px}.sample-note br{display:none}article{padding:20px}.chapter-heading{margin:28px 0 20px}.chapter-heading h2{font-size:26px}#verse{letter-spacing:2px}.reader-footer{gap:10px;font-size:9px}footer{font-size:9px}rt{font-size:9px}}
/* Full corpus navigation and personal reading workspace */
[hidden]{display:none!important}button:disabled{cursor:default;opacity:.4}.notice{background:#fff0d8;color:#775127;padding:14px 18px;border-radius:8px;font-size:13px;line-height:1.7;margin-top:16px}.backup-actions{display:grid;gap:7px;margin:8px 10px;font-size:12px}.backup-actions>span{font-size:10px;color:#8b9085;margin-bottom:6px}.backup-actions button{text-align:left;padding:9px;border:1px solid #d7dccd;border-radius:5px;background:#ffffff70}.backup-actions p{font-size:10px;line-height:1.7;overflow-wrap:anywhere}#chapters{max-height:620px;overflow:auto;scrollbar-width:thin;scrollbar-color:#c6cebc transparent}.catalog-filters{display:grid;gap:10px;margin-top:14px}.catalog-filters label{font-size:10px;color:#7f8974;display:flex;align-items:center;gap:8px}.catalog-filters select{width:100%;min-width:0;padding:8px 6px;border:1px solid #dfe4d7;border-radius:5px;background:#fff;color:#466039;font:12px system-ui}.note-dot{display:block;font-size:9px;color:#6c8756;margin-top:5px}.review-status{display:block;text-align:left;font-size:10px;line-height:1.7;background:#f6f1e5;color:#8b7349;padding:8px 11px;border-radius:5px;margin-top:13px;width:100%}.original{padding-top:23px}#verse p{margin:0 0 16px;white-space:pre-line;overflow-wrap:anywhere}#verse ruby{padding-top:6px}.reading-corrected{text-decoration:underline;text-decoration-style:dotted;text-decoration-color:#a2ac8e;text-underline-offset:5px}.annotation p{white-space:pre-wrap;overflow-wrap:anywhere}.annotation h3{font-size:13px;margin:25px 0 10px}.annotation .annotation-note{font:10px/1.9 system-ui;color:#87917c;border-top:1px solid #e1e5d8;padding-top:13px}.zhu-passage{margin:18px 0 24px}.passage-reference{font:12px/1.9 serif;color:#7d8c6b;text-decoration:none;border-left:2px solid #b9c6a6;padding-left:10px;display:block}.editor-label{display:block;font-size:12px;margin:15px 0 10px}.editor-help{font:11px/1.8 system-ui!important;color:#8a937e}.notes{padding:21px 0;border-top:1px solid var(--line);margin-top:25px}.notes-heading{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:13px}.notes-heading span{font-size:10px;color:#969c8d}textarea{resize:vertical;display:block;width:100%;max-width:100%;min-height:130px;border:1px solid #dce1d2;border-radius:7px;background:#fffefa;color:#344b34;padding:14px;font:16px/1.9 system-ui;outline-offset:3px}textarea:focus{outline:2px solid #b3c39e}.text-button{font-size:11px;text-decoration:underline;padding:12px 0;color:#7d876d}#saveStatus{font-size:10px;color:#6e875b;line-height:1.7}#saveStatus.error{color:#a6452c}.chapter-navigation{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-top:1px solid var(--line);margin-top:8px;font-size:12px}.chapter-navigation span{font-size:10px;color:#8e9784}.chapter-navigation button{padding:10px;border:1px solid #e1e5d8;border-radius:5px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}.dialog-actions button:first-child{background:#e9ecdf;color:#58704a}dialog{max-height:85dvh;overflow:auto}dialog.audit-dialog{max-width:720px}.audit-dialog h3{font-size:14px}.audit-dialog details{border-bottom:1px solid #e1e5d8;padding:13px 0}.audit-dialog summary{cursor:pointer;font-size:13px}.audit-dialog li{font-size:12px;line-height:1.9;margin:10px 0;overflow-wrap:anywhere}.import-choice{font-size:13px;line-height:1.8}.import-choice input{accent-color:var(--green)}@media(max-width:1050px){.workspace{grid-template-columns:210px minmax(0,1fr)}}@media(max-width:760px){.workspace{display:block}.backup-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 0}.backup-actions>span{margin:0 4px 0 0;font-size:9px}.backup-actions button{font-size:10px;padding:7px 9px}.backup-actions p{margin:0;width:100%}.catalog-filters{grid-template-columns:1fr 1fr;gap:10px}.catalog-filters label{gap:5px}#chapters{max-height:180px;border-top:1px solid #e5e8dc}.catalog-head{margin-bottom:12px}.review-status{font-size:9px}.tabs{gap:22px}.tabs button{font-size:11px}.annotation{padding:17px}.reader-top{gap:8px;line-height:1.7}.reader-top button{white-space:nowrap}.chapter-heading h2{line-height:1.6;overflow-wrap:anywhere;letter-spacing:1px}.original{padding-bottom:15px}.intro p{max-width:95%}dialog{padding:23px}dialog p{font-size:13px}}
/* Explicit side-by-side layout keeps Zhuyin on the right in Safari and Chrome. */
#verse ruby {
  display: inline-grid;
  grid-template-columns: 1em .65em;
  column-gap: .06em;
  align-items: center;
  padding: 0;
  margin-inline-end: .08em;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: baseline;
  break-inside: avoid;
}
#verse .ruby-character { grid-column: 1; grid-row: 1; }
#verse ruby rt {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  align-items: center;
  position: relative;
  font: 700 .34em/1 system-ui, "Microsoft JhengHei", sans-serif;
  letter-spacing: 0;
  text-align: center;
  color: #88947a;
}
#verse .zhuyin-symbols {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1;
  letter-spacing: 0;
}
#verse .zhuyin-tone {
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: horizontal-tb;
  line-height: 1;
}
#verse .neutral-tone {
  left: 0;
  top: 0;
  transform: none;
  width: 1em;
}
/* Editable personal Zhuyin, with the same right-side bold layout. */
#verse ruby[role="button"] { cursor: pointer; border-radius: .12em; }
#verse ruby[role="button"]:hover { background: #f1f3e8; }
#verse ruby[role="button"]:focus-visible { outline: 2px solid #b4884e; outline-offset: 2px; }
#verse ruby.personal-reading { background: #edf0df; }
#verse ruby.personal-reading rt { color: #586f37; }
#readingInput { width: 100%; padding: 12px 14px; border: 1px solid #bdcba8; border-radius: 7px; color: var(--green); font: 700 24px/1.5 system-ui, "Microsoft JhengHei", sans-serif; }
#readingInput:focus-visible { outline: 2px solid #b4884e; outline-offset: 3px; }
#readingContext { overflow-wrap: anywhere; }
.reading-error { color: #a6452c; font-size: 12px; min-height: 1.5em; }
.reading-actions { flex-wrap: wrap; }
.reading-actions button { font-size: 12px; padding: 10px 13px; }
.reading-actions button:nth-child(2) { background: #e9ecdf; color: #58704a; }
/* Give tablet portrait readers a full-width workspace instead of three narrow columns. */
@media (min-width: 761px) and (max-width: 1100px) {
  .app { display: block; }
  aside { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px 20px; padding: 18px 25px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { font-size: 21px; }
  .brand small { font-size: 9px; }
  .side-label, .aside-note { display: none; }
  nav { grid-column: 2; grid-row: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: center; }
  nav button { justify-content: center; padding: 12px 5px; }
  nav .nav-icon, nav small { display: none; }
  nav b { font-size: 20px; }
  .saved-nav { grid-column: 1; grid-row: 2; padding: 12px 8px; border-top: 0; }
  .backup-actions { grid-column: 2; grid-row: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
  .backup-actions > span { margin: 0 3px 0 0; }
  .backup-actions p { flex-basis: 100%; margin: 0; }
  main { padding: 0 25px; }
  .workspace { grid-template-columns: 210px minmax(0, 1fr); }
}
/* Native input fonts stay legible when focused on touch devices. */
@media (pointer: coarse) {
  .search input, .catalog-filters select { font-size: 16px; }
  .tools button, .reader-top button, .tabs button, .backup-actions button, .saved-nav, .chapter-navigation button, nav button { min-height: 44px; }
  .tools button { min-width: 44px; }
  .tools label { min-height: 44px; }
  #verse ruby[role="button"] { min-width: 44px; min-height: 44px; }
}
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.app { padding-bottom: env(safe-area-inset-bottom, 0px); }