/* Learning System v2 CSS */

/* ===================== HIGHLIGHT BAR ===================== */
.hl-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid oklch(90% 0.005 60);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  z-index: 300;
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -4px 20px oklch(0% 0 0 / 0.08);
}
.hl-bar.show { transform: translateY(0); }
.hl-color {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid oklch(92% 0.005 60);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, border-color 0.15s;
}
.hl-color:active { transform: scale(0.9); border-color: oklch(70% 0.01 60); }
.hl-icon {
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: oklch(95% 0.005 60);
  font-size: 1.125rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.hl-icon:active { background: oklch(90% 0.005 60); }

/* ===================== TOAST ===================== */
.hl-toast {
  position: fixed;
  bottom: calc(84px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%) translateY(20px);
  background: oklch(20% 0.01 60); color: white;
  padding: 10px 20px; border-radius: 10px;
  font-size: 0.875rem; font-family: var(--sans);
  z-index: 350; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.2);
}
.hl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast-undo {
  background: none; border: none;
  color: oklch(75% 0.12 220); font-size: 0.875rem;
  font-family: var(--sans); cursor: pointer; font-weight: 500; padding: 0;
}

/* ===================== HIGHLIGHT TAP MENU ===================== */
.hl-menu-overlay {
  position: fixed; inset: 0;
  background: oklch(0% 0 0 / 0.3); z-index: 400;
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeInOverlay 0.15s ease;
}
.hl-menu {
  background: white; width: 100%; max-width: 400px;
  border-radius: 16px 16px 0 0;
  padding: 20px 20px calc(16px + env(safe-area-inset-bottom));
}
.hl-menu-text { font-size: 0.8125rem; color: var(--text3); font-style: italic; line-height: 1.5; margin-bottom: 8px; }
.hl-menu-note { font-size: 0.875rem; color: var(--text2); padding: 8px 12px; background: oklch(96% 0.005 60); border-radius: 6px; margin-bottom: 12px; line-height: 1.6; }
.hl-menu-actions { display: flex; flex-direction: column; gap: 4px; }
.hl-menu-actions button {
  background: none; border: none; text-align: left;
  padding: 12px 8px; font-size: 0.9375rem; font-family: var(--sans);
  color: var(--text); cursor: pointer; border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.hl-menu-actions button:active { background: oklch(96% 0.005 60); }
.hl-menu-actions button.danger { color: oklch(50% 0.18 25); }

/* ===================== HIGHLIGHT MARKS ===================== */
.hl-mark {
  background: oklch(92% 0.08 85); cursor: pointer;
  border-radius: 2px; transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.hl-mark:hover { background: oklch(88% 0.10 85); }
.hl-mark[data-color="green"] { background: oklch(90% 0.10 155); }
.hl-mark[data-color="green"]:hover { background: oklch(86% 0.12 155); }
.hl-mark.has-note { border-bottom: 2px solid oklch(60% 0.12 200); }

/* ===================== NOTE OVERLAY ===================== */
.note-overlay {
  position: fixed; inset: 0;
  background: oklch(0% 0 0 / 0.4); z-index: 500;
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeInOverlay 0.15s ease;
}
.note-card {
  background: white; width: 100%; max-width: 480px;
  border-radius: 16px 16px 0 0;
  padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
}
.note-quote { font-size: 0.8125rem; color: var(--text3); font-style: italic; margin-bottom: 12px; line-height: 1.5; }
.note-textarea {
  width: 100%; min-height: 80px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--sans); font-size: 0.9375rem; line-height: 1.7;
  resize: none; background: var(--bg); color: var(--text);
}
.note-textarea:focus { outline: none; border-color: var(--text3); }
.note-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.note-cancel, .note-save {
  border: none; padding: 8px 20px; border-radius: 8px;
  font-size: 0.875rem; font-family: var(--sans); cursor: pointer;
}
.note-cancel { background: oklch(92% 0.005 60); color: var(--text2); }
.note-save { background: var(--text); color: white; }

/* ===================== TAGS ===================== */
.tag-badge {
  display: inline-block; font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.02em; padding: 3px 10px; border-radius: 100px;
  color: white; margin-right: 4px; margin-bottom: 4px;
}

/* ===================== STATUS / LEVEL BADGES ===================== */
.status-badge {
  display: inline-block; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.04em; padding: 3px 10px; border-radius: 100px;
}
.status-badge.unread { background: oklch(92% 0.005 60); color: var(--text3); }
.status-badge.reading { background: oklch(90% 0.08 220); color: oklch(40% 0.12 220); }
.status-badge.read { background: oklch(90% 0.08 150); color: oklch(40% 0.12 150); }

/* ===================== PROGRESS BAR ===================== */
.progress-bar {
  width: 100%; height: 4px; background: oklch(90% 0.005 60);
  border-radius: 2px; margin-top: 10px; overflow: hidden;
}
.progress-bar-fill {
  height: 100%; background: oklch(50% 0.12 30); border-radius: 2px; transition: width 0.3s;
}

/* ===================== HEATMAP ===================== */
.heatmap-wrapper {
  margin-top: 32px;
}
.heatmap-months {
  display: flex;
  gap: 0;
  margin-left: 36px;
  margin-bottom: 4px;
}
.heatmap-month-label {
  font-size: 0.6875rem;
  color: var(--text3);
  min-width: calc(14px * 4 + 3px * 3);
}
.heatmap-body {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}
.heatmap-days {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 28px;
}
.heatmap-day-label {
  font-size: 0.625rem;
  color: var(--text3);
  height: 14px;
  line-height: 14px;
}
.heatmap-weeks {
  display: flex;
  gap: 3px;
}
.heatmap-week {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.heatmap-cell {
  width: 14px; height: 14px;
  border-radius: 3px;
  background: oklch(94% 0.005 60);
  cursor: pointer;
  transition: outline 0.1s;
}
.heatmap-cell:hover { outline: 1px solid oklch(70% 0.01 60); }
.heatmap-cell.empty { background: transparent; cursor: default; }
.heatmap-cell.empty:hover { outline: none; }
.heatmap-cell[data-level="0"] { background: oklch(94% 0.005 60); }
.heatmap-cell[data-level="1"] { background: oklch(88% 0.06 150); }
.heatmap-cell[data-level="2"] { background: oklch(76% 0.10 150); }
.heatmap-cell[data-level="3"] { background: oklch(62% 0.14 150); }
.heatmap-cell[data-level="4"] { background: oklch(48% 0.16 150); }

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  justify-content: flex-end;
  font-size: 0.6875rem;
  color: var(--text3);
}
.heatmap-legend .heatmap-cell {
  width: 12px; height: 12px; cursor: default;
}
.heatmap-legend .heatmap-cell:hover { outline: none; }

.heatmap-detail {
  margin-top: 8px;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s, padding 0.2s;
  font-size: 0.8125rem;
  background: oklch(96% 0.005 60);
  border-radius: 6px;
}
.heatmap-detail.show {
  max-height: 200px;
  padding: 12px 16px;
}
.heatmap-detail-date { font-weight: 600; margin-bottom: 4px; }
.heatmap-detail-empty { color: var(--text3); }
.heatmap-detail-item { margin-top: 2px; }

/* ===================== DESKTOP RESPONSIVE ===================== */
@media (min-width: 768px) {
  /* --- Article page --- */
  .header, .article, .tldr, .toc, .tensions {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
  .article .ch p,
  .article .ch li {
    font-size: 1rem;
    line-height: 2;
  }
  .article .ch h2 {
    font-size: 1.375rem;
  }

  /* Progress bar always visible on desktop */
  .progress { display: block; }

  /* Highlight bar: float above selection on desktop */
  .hl-bar {
    position: absolute;
    bottom: auto;
    left: auto;
    right: auto;
    width: auto;
    border-radius: 12px;
    border-top: none;
    border: 1px solid oklch(90% 0.005 60);
    padding: 10px 20px;
    box-shadow: 0 4px 24px oklch(0% 0 0 / 0.12);
    transform: translateX(-50%) translateY(0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .hl-bar.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Note overlay as centered modal instead of bottom sheet */
  .note-overlay {
    align-items: center;
  }
  .note-card {
    border-radius: 16px;
    max-width: 520px;
  }

  /* Highlight menu as centered modal */
  .hl-menu-overlay {
    align-items: center;
  }
  .hl-menu {
    border-radius: 16px;
    max-width: 420px;
  }

  /* --- Homepage --- */
  .heatmap-body {
    overflow-x: visible;
  }
  .heatmap-wrapper {
    max-width: 100%;
  }

  /* --- Library page --- */
  .library-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .filters {
    flex-wrap: nowrap;
    overflow-x: visible;
  }

  /* --- Topics page --- */
  .topic-card {
    max-width: 100%;
  }
}

/* ===================== DESKTOP WIDE: TOC SIDEBAR ===================== */
@media (min-width: 1024px) {
  /* Article page: content stays centered, TOC becomes fixed sidebar */
  .header, .article, .tldr, .tensions {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  .toc {
    position: fixed;
    top: 80px;
    left: max(16px, calc(50% - 340px - 260px));
    width: 220px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding: 0 16px 0 0;
    margin: 0;
    z-index: 100;
  }
  .toc ol { columns: 1; }
  .toc .toc-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); margin-bottom: 8px; }
  .toc a { font-size: 0.8125rem; line-height: 1.6; }
}

/* ===================== ARTICLE TLDR ===================== */
.art-tldr { background: oklch(92% 0.04 25); border-radius: 14px; padding: 20px; margin: 24px 0; }
.art-tldr-label { font-size: 0.625rem; font-weight: 700; color: oklch(45% 0.12 25); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.art-tldr-text { font-size: 0.8125rem; line-height: 1.6; }
.art-tldr-stats { display: flex; gap: 20px; margin-top: 14px; padding-top: 12px; border-top: 1px solid oklch(88% 0.04 25); }
.art-stat { text-align: center; }
.art-stat-num { font-family: 'Noto Serif SC', serif; font-size: 1.125rem; font-weight: 700; color: oklch(45% 0.12 25); }
.art-stat-label { font-size: 0.625rem; color: oklch(62% 0.01 60); margin-top: 1px; }
.art-hl { background: linear-gradient(180deg, transparent 60%, oklch(90% 0.08 80 / 0.5) 60%); padding: 0 2px; }

/* ===================== ANIMATIONS ===================== */
@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}