/* ============ Tokens ============ */
:root{
  --paper: #f6f1e6;
  --paper-2: #efe8d8;
  --ink: #241f18;
  --ink-soft: #5a5347;
  --ink-faint: #948c7c;
  --rule: #ddd3bd;
  --red: #b8412e;
  --red-dark: #8f2f20;
  --gold: #a9822f;
  --green: #4c7a5e;
  --white: #fffdf8;
  --shadow: 0 12px 30px -12px rgba(36,31,24,0.25);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Newsreader", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button{ font-family: inherit; cursor: pointer; }
textarea, input{ font-family: inherit; }

::selection{ background: #f0d3aa; }

/* subtle paper grain */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ============ App shell ============ */
.app{
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0,1fr) 340px;
  min-height: 100vh;
  z-index: 1;
}

/* ============ Sidebar ============ */
.sidebar{
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.sidebar-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding: 28px 22px 18px;
  border-bottom: 1px solid rgba(246,241,230,0.12);
}
.brand{ display:flex; gap:12px; align-items:flex-start; }
.brand-mark{
  font-size: 22px; color: var(--gold);
  transform: rotate(-8deg);
  margin-top: 2px;
}
.brand-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -0.2px;
}
.brand-sub{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 6px;
}
.sidebar-close{
  display:none;
  background:none; border:none; color: var(--paper);
  font-size: 26px; line-height: 1; opacity: 0.7;
}

.reviewer-box{
  padding: 16px 22px;
  border-bottom: 1px solid rgba(246,241,230,0.12);
}
.reviewer-box label{
  display:block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 6px;
}
.reviewer-box input{
  width: 100%; background: rgba(246,241,230,0.08);
  border: 1px solid rgba(246,241,230,0.18);
  border-radius: 4px; padding: 8px 10px;
  color: var(--paper); font-size: 14px;
}
.reviewer-box input:focus{ outline: 1px solid var(--gold); }
.reviewer-box input::placeholder{ color: var(--ink-faint); }

.progress-box{ padding: 16px 22px; border-bottom: 1px solid rgba(246,241,230,0.12); }
.progress-label{ font-family: var(--font-mono); font-size: 11px; color: var(--paper); opacity: 0.85; margin-bottom: 8px; }
.progress-label span{ color: var(--gold); font-weight: 600; }
.progress-track{ height: 5px; background: rgba(246,241,230,0.12); border-radius: 3px; overflow: hidden; }
.progress-fill{ height: 100%; width:0%; background: linear-gradient(90deg, var(--gold), #c79a45); transition: width 0.4s ease; }

.toc{ flex:1; overflow-y: auto; padding: 10px 0 10px; }
.toc-part{
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold);
  padding: 16px 22px 6px;
}
.toc-item{
  display:flex; align-items:center; gap: 10px;
  width: 100%;
  padding: 7px 22px;
  font-size: 14px;
  font-family: var(--font-body);
  color: rgba(246,241,230,0.78);
  cursor: pointer;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.toc-item:hover{ background: rgba(246,241,230,0.06); color: var(--paper); }
.toc-item.active{
  background: rgba(184,65,46,0.18);
  border-left-color: var(--red);
  color: var(--white);
}
.toc-dot{
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background: rgba(246,241,230,0.2);
}
.toc-item.has-note .toc-dot{ background: var(--red); }
.toc-item.reviewed .toc-dot{ background: var(--green); }
.toc-num{ font-family: var(--font-mono); color: var(--ink-faint); font-size: 11px; width: 20px; flex-shrink:0; }
.toc-item.active .toc-num{ color: var(--gold); }
.toc-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.sidebar-foot{ padding: 16px 22px 22px; border-top: 1px solid rgba(246,241,230,0.12); }
.storage-warning{
  font-size: 11.5px; line-height: 1.5; color: rgba(246,241,230,0.6);
  margin: 0 0 12px;
}
.export-row{ display:flex; gap: 8px; }
.btn-export{
  flex: 1; padding: 12px 6px; border: none; border-radius: 5px;
  background: var(--red); color: var(--white);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 14px -4px rgba(184,65,46,0.6);
  transition: transform 0.15s, background 0.15s;
}
.btn-export:hover{ background: var(--red-dark); transform: translateY(-1px); }
.btn-export:active{ transform: translateY(0); }
.btn-export.btn-export-alt{
  background: rgba(246,241,230,0.08);
  border: 1px solid rgba(246,241,230,0.22);
  box-shadow: none;
  color: var(--paper);
}
.btn-export.btn-export-alt:hover{ background: rgba(246,241,230,0.16); }
.btn-export:disabled, .btn-export-one:disabled{
  opacity: 0.4; cursor: wait; transform: none !important;
}

.sidebar-scrim{ display:none; }

/* ============ Reader ============ */
.reader{
  min-width: 0;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  background: var(--paper);
  position: relative;
}
.topbar{
  position: sticky; top:0; z-index: 5;
  display:flex; align-items:center; gap: 14px;
  padding: 16px 48px;
  background: rgba(246,241,230,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
.menu-btn, .notes-toggle{
  display:none;
  background: var(--white); border: 1px solid var(--rule); border-radius: 6px;
  padding: 8px 12px; font-size: 15px;
}
.topbar-title{
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.6px;
  color: var(--ink-faint); text-transform: uppercase;
  flex:1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.chapter-content{
  max-width: 700px;
  margin: 0 auto;
  padding: 56px 48px 40px;
}
.ch-part{
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.ch-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0 0 8px;
}
.ch-rule{
  width: 56px; height: 3px; background: var(--gold); margin: 22px 0 34px; border: none;
}

.ch-body p{
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 22px;
}
.ch-body p strong{ color: var(--ink); font-weight: 600; }
.ch-body p.boldpara{ font-weight: 500; }
.ch-body p.italic{
  font-style: italic;
  color: var(--ink-soft);
  border-left: 3px solid var(--rule);
  padding-left: 18px;
  margin-left: -21px;
}
.ch-body h3.subheading{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--red-dark);
  margin: 40px 0 16px;
}
.ch-body ul{
  margin: 0 0 24px;
  padding-left: 0;
  list-style: none;
}
.ch-body ul li{
  font-size: 17px;
  line-height: 1.65;
  padding-left: 26px;
  position: relative;
  margin-bottom: 10px;
}
.ch-body ul li::before{
  content: "—";
  position: absolute; left: 0; color: var(--gold); font-weight: 600;
}

.chapter-nav{
  display:flex; align-items:center; justify-content: space-between; gap: 16px;
  max-width: 700px; margin: 0 auto;
  padding: 28px 48px 72px;
  border-top: 1px solid var(--rule);
}
.nav-btn{
  background: var(--white); border: 1px solid var(--rule); border-radius: 7px;
  padding: 11px 18px; font-size: 14px; font-family: var(--font-mono);
  color: var(--ink); transition: border-color 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.nav-btn:hover:not(:disabled){ border-color: var(--gold); transform: translateY(-1px); }
.nav-btn:disabled{ opacity: 0.35; cursor: default; }
.reviewed-check{
  display:flex; align-items:center; gap:9px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft);
  text-align: center; justify-content: center;
}
.reviewed-check input{ width: 16px; height:16px; accent-color: var(--green); cursor:pointer; }

/* ============ Notes rail ============ */
.notes-rail{
  background: var(--white);
  border-left: 1px solid var(--rule);
  padding: 24px 26px;
  height: 100vh;
  position: sticky; top:0;
  display:flex; flex-direction:column;
}
.notes-head{
  display:flex; align-items:center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--red-dark); font-weight: 600;
  margin-bottom: 4px;
}
.notes-close{ display:none; background:none; border:none; font-size: 22px; color: var(--ink-faint); }
.notes-sub{
  font-family: var(--font-display); font-style: italic; font-size: 15px;
  color: var(--ink-soft); margin-bottom: 16px;
}
#notesArea{
  flex:1;
  width:100%;
  resize: none;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: repeating-linear-gradient(var(--white), var(--white) 27px, var(--rule) 28px);
  background-attachment: local;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 28px;
  color: var(--ink);
}
#notesArea:focus{ outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(184,65,46,0.12); }
#notesArea::placeholder{ color: var(--ink-faint); line-height: 1.6; font-family: var(--font-body); font-style: italic; }

.notes-status{
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint);
  margin: 10px 0 14px;
}
.notes-status.saved{ color: var(--green); }
.notes-rail .export-row{ display:flex; gap: 8px; }
.btn-export-one{
  flex: 1;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px;
  padding: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink);
}
.btn-export-one:hover{ border-color: var(--gold); }

/* ============ Responsive ============ */
@media (max-width: 1180px){
  .app{ grid-template-columns: 280px minmax(0,1fr); }
  .notes-rail{
    position: fixed; right:0; top:0; bottom:0; width: min(360px, 88vw);
    z-index: 40; box-shadow: var(--shadow);
    transform: translateX(100%); transition: transform 0.25s ease;
  }
  .notes-rail.open{ transform: translateX(0); }
  .notes-toggle{ display:inline-block; }
  .notes-close{ display:inline-block; }
}

@media (max-width: 860px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{
    position: fixed; left:0; top:0; bottom:0; width: min(300px, 84vw);
    z-index: 50; box-shadow: var(--shadow);
    transform: translateX(-100%); transition: transform 0.25s ease;
  }
  .sidebar.open{ transform: translateX(0); }
  .sidebar-close{ display:inline-block; }
  .menu-btn{ display:inline-block; }
  .sidebar-scrim.show{
    display:block; position: fixed; inset:0; background: rgba(36,31,24,0.4);
    z-index: 45;
  }
  .reader{ border-left:none; border-right:none; }
  .topbar{ padding: 14px 20px; }
  .chapter-content{ padding: 32px 20px 24px; }
  .chapter-nav{ padding: 20px 20px 56px; flex-wrap: wrap; }
}