/* Material library: a focused reading workspace. */
.brand-lockup { display: flex; align-items: center; gap: 24px; min-width: 0; }
.brand-mark, .brand-tagline, .library-header-tools { display: none; }

body.library-mode { background: #fbfaf7; }
body.library-mode .site-header {
  height: 74px;
  grid-template-columns: 470px minmax(310px, 590px) minmax(100px, 1fr);
  padding-left: 27px;
  padding-right: 70px;
  background: #fbfaf7;
}
body.library-mode .site-nav, body.library-mode .header-spacer, body.library-mode .site-footer { display: none; }
body.library-mode .brand-lockup { grid-column: 1; }
body.library-mode .wordmark { display: inline-flex; align-items: center; gap: 15px; font-size: 23px; letter-spacing: -.04em; white-space: nowrap; }
body.library-mode .brand-mark { display: inline-block; position: relative; width: 27px; height: 27px; border-radius: 75% 4% 75% 4%; transform: rotate(-15deg); background: #91afa0; box-shadow: inset 0 0 0 2px #315847; }
body.library-mode .brand-mark::after { content: ""; position: absolute; top: 4px; left: 12px; width: 2px; height: 23px; background: #315847; transform: rotate(45deg); }
body.library-mode .brand-tagline { display: inline-block; border-left: 1px solid #deded7; padding-left: 20px; color: #8b8f8a; font-size: 13px; white-space: nowrap; }
body.library-mode .library-header-tools { grid-column: 2 / 4; display: flex; align-items: center; gap: 26px; min-width: 0; }
.header-search { position: relative; flex: 1; max-width: 590px; }
.header-search input { display: block; width: 100%; height: 42px; border: 0; border-radius: 7px; padding: 0 18px 0 52px; background: #f0f0ed; color: var(--ink); font-size: 14px; outline-offset: 2px; }
.header-search input::placeholder { color: #979b97; }
.search-icon { position: absolute; top: 13px; left: 19px; width: 15px; height: 15px; border: 1.7px solid #727a75; border-radius: 50%; pointer-events: none; }
.search-icon::after { content: ""; position: absolute; right: -6px; bottom: -3px; width: 7px; height: 1.7px; background: #727a75; transform: rotate(45deg); }
#header-new-material { margin-left: auto; border: 0; padding: 7px 0; background: transparent; color: #3d4840; font-size: 15px; white-space: nowrap; }
#header-new-material:hover { color: var(--moss); }

#library-view { width: 100%; }
#library-view .library-layout { display: grid; grid-template-columns: 180px 350px minmax(0, 1fr); min-height: calc(100dvh - 74px); border: 0; }
.library-rail { display: flex; flex-direction: column; gap: 6px; border-right: 1px solid #ecece7; padding: 30px 15px; }
.rail-link { display: flex; align-items: center; gap: 15px; width: 100%; height: 53px; border: 0; border-radius: 7px; padding: 0 18px; background: transparent; color: #626a64; text-align: left; font-size: 15px; }
.rail-link:hover { background: #f0f2ec; }
.rail-link.active { background: #e9efe9; color: var(--moss); font-weight: 600; }
.rail-symbol { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 1.5px solid currentColor; border-radius: 5px; font-size: 15px; line-height: 1; }
.rail-link[data-view="thinking"] .rail-symbol { border-radius: 50%; font-size: 23px; }

#library-view .library-list { min-width: 0; border-right: 1px solid #ecece7; padding: 28px 17px 30px 20px; }
.library-list-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 0 2px; }
.library-list-heading h1 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.045em; }
.library-list-heading button { border: 0; padding: 0 5px; background: transparent; color: #657168; font-size: 26px; line-height: 1; }
.library-list-heading button:hover { color: var(--moss); }
.library-count { display: flex; justify-content: space-between; align-items: center; height: 44px; margin-top: 28px; border-radius: 7px; padding: 0 15px; background: #edf1ed; color: #325b48; font-size: 14px; font-weight: 600; }
.library-count span { color: #8b928b; font-size: 12px; font-weight: 400; }
#library-view .material-list { max-height: calc(100dvh - 235px); margin-top: 22px; overflow-y: auto; overflow-x: hidden; }
#library-view .material-row { display: flex; align-items: flex-start; gap: 13px; min-height: 76px; margin-bottom: 6px; border: 0; border-left: 3px solid transparent; border-radius: 7px; padding: 16px 13px 13px 15px; background: transparent; }
#library-view .material-row:hover { background: #f2f3ee; }
#library-view .material-row.selected { border-left-color: var(--moss); background: #eaece7; }
#library-view .material-marker { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid #78867b; border-radius: 3px; color: #536b5b; background: none; font-size: 10px; }
#library-view .material-row.selected .material-marker { border-color: var(--moss); color: var(--moss); background: none; }
#library-view .material-row strong { color: #222923; font-size: 15px; font-weight: 600; line-height: 1.5; }
#library-view .material-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 5px; color: #959993; font-size: 12px; }

#library-view .detail-pane { min-width: 0; min-height: calc(100dvh - 74px); border: 0; padding: 28px clamp(28px, 3.4vw, 56px) 72px; background: #fbfaf7; }
#library-view .empty-detail { display: grid; place-items: center; min-height: 55vh; color: #929991; font-size: 16px; }
#library-view .detail-header { min-height: 29px; }
.reader-path { color: #969c96; font-size: 13px; }
#library-view .detail-actions { gap: 18px; }
#library-view .detail-actions button { color: #737b75; font-size: 13px; }
#library-view .detail-actions .danger { color: #a26b63; }
#library-view .detail-pane h2 { max-width: 830px; margin: 39px 0 10px; color: #181f1a; font-size: clamp(28px, 2.5vw, 39px); font-weight: 650; line-height: 1.3; letter-spacing: -.055em; }
.reader-meta { color: #909690; font-size: 14px; line-height: 1.7; }
#library-view .detail-tabs { width: min(100%, 420px); justify-content: space-around; gap: 0; margin-top: 37px; }
#library-view .detail-tabs button { min-width: 88px; padding-bottom: 16px; font-size: 16px; }
#library-view .detail-content { width: 100%; max-width: 1100px; min-height: 0; padding-top: 19px; }

#library-view .reading-sheet { min-height: 540px; border: 1px solid #f2f1ec; padding: 0 clamp(28px, 4vw, 78px) 22px; background: #fffefd; box-shadow: 0 14px 45px rgba(39, 48, 39, .035); }
#library-view .paper-body { display: flex; align-items: center; min-height: 440px; padding: 46px clamp(0px, 3vw, 38px); }
#library-view .original-content { max-width: 730px; margin: 0 auto; color: #20261f; font: 400 clamp(17px, 1.33vw, 20px)/2.05 "Noto Serif SC", "Songti SC", serif; letter-spacing: .01em; white-space: pre-wrap; overflow-wrap: anywhere; }
#library-view .source-highlight { border-radius: 2px; padding: 2px 4px; background: #e5efe4; color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
#library-view .paper-body .detail-image { width: auto; max-width: 100%; max-height: 520px; margin: 0 auto; object-fit: contain; }
#library-view .paper-body-image { display: block; min-height: 0; padding: 42px 0 46px; }
#library-view .image-spread { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 3vw, 54px); align-items: start; }
#library-view .image-original, #library-view .image-ocr { min-width: 0; }
#library-view .image-original .detail-image { max-height: 650px; margin: 18px auto 0; }
#library-view .image-ocr { border-left: 1px solid #e5e9e3; padding-left: clamp(26px, 2.6vw, 46px); }
#library-view .image-section-label { display: block; color: #5d7867; font-size: 12px; font-weight: 600; letter-spacing: .08em; }
#library-view .image-ocr .original-content { max-width: none; margin: 18px 0 0; font-family: var(--sans); font-size: 15px; line-height: 1.95; letter-spacing: 0; }
#library-view .source-note { margin: 0; border-top: 1px solid #e8eae4; padding: 17px 0; }
#library-view .paper-footer { border-top: 1px solid #e9ebe5; padding-top: 17px; }
#library-view .paper-ai { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: start; gap: 28px; border-radius: 8px; padding: 22px 25px; background: #edf2ed; }
#library-view .paper-ai-label { border-right: 1px solid #cad7cb; padding-right: 14px; color: var(--moss); font-size: 14px; font-weight: 600; white-space: nowrap; }
#library-view .paper-ai p { margin: -2px 0 0; color: #636c65; font-size: 15px; line-height: 1.85; }
#library-view .paper-footer .ai-disclaimer { margin: 11px 4px 0; text-align: right; }
#library-view .paper-ai-empty { display: inline-block; margin: 0 18px 0 0; color: var(--muted); font-size: 14px; }

@media (max-width: 1380px) {
  #library-view .image-spread { grid-template-columns: 1fr; gap: 30px; }
  #library-view .image-ocr { border-left: 0; border-top: 1px solid #e5e9e3; padding: 27px 0 0; }
}

#library-view .insight-sheet, #library-view .links-sheet { padding-top: clamp(45px, 5vw, 76px); padding-bottom: 55px; }
#library-view .insight-kicker, #library-view .links-kicker { color: var(--moss); font-size: 12px; font-weight: 600; letter-spacing: .12em; }
#library-view .insight-summary { max-width: 720px; margin: 22px 0 60px; color: #1e2720; font-size: clamp(24px, 2.2vw, 32px); font-weight: 550; line-height: 1.65; letter-spacing: -.045em; }
#library-view .insight-section-title { margin-bottom: 14px; color: #79847a; font-size: 13px; }
#library-view .insight-points { max-width: 750px; }
#library-view .insight-point summary { gap: 24px; padding: 20px 0; font-size: 16px; }
#library-view .insight-point .point-evidence { margin-left: 44px; }
#library-view .insight-sheet > .text-button { margin-top: 28px; color: var(--moss); }
#library-view .insight-empty { max-width: 650px; margin: 35px 0; }
#library-view .links-sheet .connection-row { max-width: 760px; }
#library-view .links-sheet .connection-target { margin-bottom: 5px; }

#library-view .edit-panel { max-width: 760px; margin-top: 24px; }
#library-view .detail-pane > .edit-panel + * { margin-top: 20px; }

@media (max-width: 1280px) {
  body.library-mode .site-header { grid-template-columns: 250px minmax(260px, 1fr) auto; }
  body.library-mode .brand-tagline { display: none; }
  #library-view .library-layout { grid-template-columns: 78px 295px minmax(0, 1fr); }
  .library-rail { padding-inline: 10px; }
  .rail-link { display: grid; justify-items: center; gap: 2px; height: 64px; padding: 8px 3px; font-size: 11px; }
  #library-view .library-list { padding-inline: 14px; }
  #library-view .detail-pane { padding-inline: 30px; }
  #library-view .reading-sheet { padding-inline: 38px; }
  #library-view .paper-body { padding-inline: 0; }
}

@media (max-width: 760px) {
  body.library-mode .site-header { display: grid; grid-template-columns: 1fr auto; gap: 12px; height: auto; padding: 15px 20px; }
  body.library-mode .brand-lockup { grid-column: 1; grid-row: 1; }
  body.library-mode .wordmark { font-size: 21px; }
  body.library-mode .library-header-tools { display: contents; }
  body.library-mode .header-search { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  body.library-mode #header-new-material { grid-column: 2; grid-row: 1; margin-left: 0; }
  #library-view .library-layout { display: block; min-height: 0; }
  .library-rail { display: flex; flex-direction: row; gap: 0; overflow-x: auto; border-right: 0; border-bottom: 1px solid #ecece7; padding: 5px 16px; }
  .rail-link { display: flex; justify-content: center; flex: none; gap: 9px; width: auto; height: 43px; padding: 0 13px; font-size: 13px; }
  .rail-symbol { width: 17px; height: 17px; font-size: 12px; }
  .rail-link[data-view="thinking"] .rail-symbol { font-size: 18px; }
  #library-view .library-list { border-right: 0; border-bottom: 1px solid #ecece7; padding: 19px 20px 13px; }
  .library-list-heading h1 { font-size: 19px; }
  .library-count { height: 37px; margin-top: 16px; }
  #library-view .material-list { display: flex; max-height: none; overflow-x: auto; overflow-y: hidden; margin-top: 12px; }
  #library-view .material-row { flex: 0 0 225px; min-height: 74px; margin-bottom: 0; border-left: 0; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; padding: 11px 12px; }
  #library-view .material-row.selected { border-bottom-color: var(--moss); }
  #library-view .detail-pane { min-height: 0; padding: 26px 20px 60px; scroll-margin-top: 16px; }
  #library-view .detail-pane h2 { margin-top: 28px; font-size: 29px; }
  #library-view .detail-tabs { margin-top: 26px; }
  #library-view .detail-tabs button { font-size: 14px; }
  #library-view .reading-sheet { min-height: 420px; padding: 0 23px 21px; }
  #library-view .paper-body { min-height: 310px; padding: 42px 0; }
  #library-view .original-content { font-size: 17px; line-height: 1.95; }
  #library-view .paper-ai { display: block; padding: 18px; }
  #library-view .paper-ai-label { display: block; border: 0; padding: 0 0 9px; }
  #library-view .paper-ai p { font-size: 14px; }
  #library-view .insight-sheet, #library-view .links-sheet { padding-top: 42px; }
}

@media (max-width: 380px) {
  body.library-mode .site-header { padding-inline: 15px; }
  #library-view .library-list, #library-view .detail-pane { padding-inline: 16px; }
  .rail-link { padding-inline: 10px; }
  #library-view .reading-sheet { padding-inline: 17px; }
  #library-view .detail-actions { gap: 10px; }
}

/* Keep the cloud sign-out control in the header's right-hand slot. */
body.cloud-session .header-spacer { display: flex; align-items: center; justify-content: flex-end; justify-self: end; }
body.library-mode.cloud-session .site-header { grid-template-columns: 470px minmax(310px, 590px) minmax(100px, 1fr) auto; }
body.library-mode.cloud-session .header-spacer { grid-column: 4; grid-row: 1; }

@media (min-width: 681px) and (max-width: 900px) {
  body.cloud-session:not(.library-mode) .site-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; }
}

@media (max-width: 1280px) {
  body.library-mode.cloud-session .site-header { grid-template-columns: 250px minmax(260px, 1fr) minmax(0, 1fr) auto; }
}

@media (max-width: 760px) {
  body.library-mode.cloud-session .site-header { grid-template-columns: 1fr auto auto; }
  body.library-mode.cloud-session #header-new-material { grid-column: 2; grid-row: 1; }
  body.library-mode.cloud-session .header-spacer { grid-column: 3; grid-row: 1; }
}

@media (max-width: 680px) {
  body.cloud-session:not(.library-mode) .header-spacer { order: 1; margin-left: auto; }
}