/* ============================================================
   Highlights page — the reader's commonplace book.
   Header + tabs/search row + per-book sections (cover, articles,
   passages), or a flat list for the By date / With notes views.
   ============================================================ */

/* ── Page wrapper ──────────────────────────────────────────── */

.hl-page {
  max-width: var(--page-max, 1100px);
  margin: 0 auto;
  padding: 64px var(--page-gutter, clamp(1.5rem, 5vw, 4rem)) 96px;
}

/* ── Header ────────────────────────────────────────────────── */

.hl-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
}

.hl-header__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hl-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.hl-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.hl-intro {
  margin: 0;
  max-width: 560px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--color-ink-light);
}

.hl-header__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 4px;
  flex-shrink: 0;
}

.hl-summary {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-ink-light);
  text-align: right;
}

/* ── Tabs + search row ─────────────────────────────────────── */

.hl-tabs-row {
  margin-top: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--color-rule);
  flex-wrap: wrap;
}

.hl-tabs {
  display: flex;
  gap: 28px;
}

.hl-tab {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-ink-light);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 14px 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}

.hl-tab:hover {
  color: var(--color-ink);
}

.hl-tab--active {
  color: var(--color-ink);
  font-weight: 500;
  border-bottom-color: var(--color-primary);
}

.hl-search {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hl-search__input {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-ink);
  background: transparent;
  border: none;
  outline: none;
  width: 220px;
  padding: 12px 0;
}

.hl-search__input::placeholder {
  color: var(--color-ink-faint);
}

/* ── Empty state ───────────────────────────────────────────── */

.hl-empty {
  margin: 0;
  padding: 64px 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--color-ink-light);
}

/* ── Book group ────────────────────────────────────────────── */

.hl-book-group {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  padding: 48px 0;
  border-bottom: 1px solid var(--color-rule);
}

.hl-book-group__meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hl-book-group__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hl-book-group__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.hl-book-group__counts {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--color-ink-light);
}

.hl-book-group__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hl-book-group__link {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--color-ink);
}

.hl-book-group__export {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--color-ink-light);
}

.hl-book-group__export:hover {
  color: var(--color-ink);
}

.hl-book-group__articles {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* ── Article within a book group ──────────────────────────── */

.hl-article {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hl-article__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hl-article__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.hl-article__source {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.hl-article__passages {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Flat list (By date / With notes) ─────────────────────── */

.hl-flat-list {
  display: flex;
  flex-direction: column;
}

.hl-flat-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 0;
  border-bottom: 1px solid var(--color-rule);
}

.hl-flat-item__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-ui);
}

.hl-flat-item__title {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-ink);
}

.hl-flat-item__source,
.hl-flat-item__book {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

/* ── Passage ───────────────────────────────────────────────── */

.hl-passage {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 8px;
}

.hl-passage__mark {
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 0.9;
  color: var(--color-surface-high);
}

.hl-passage__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hl-passage__quote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.65;
  color: var(--color-ink);
  max-width: 640px;
}

.hl-passage__meta {
  display: flex;
  gap: 16px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-ink-faint);
}

.hl-passage__context {
  color: var(--color-ink-light);
}

.hl-passage__delete-form {
  display: contents;
}

.hl-passage__delete {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-ink-faint);
  cursor: pointer;
}

.hl-passage__delete:hover,
.hl-passage__delete:focus-visible {
  color: var(--color-ink-light);
  text-decoration: underline;
}

.hl-passage__note {
  max-width: 640px;
  margin-top: 4px;
  padding: 16px 20px;
  background: var(--color-bg-wash);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hl-passage__note-label {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-light);
}

.hl-passage__note-text {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-tertiary);
}

/* ── Preview for users without the feature (HR-11) ─────────── */

.hl-preview__body {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
  gap: 64px;
}

.hl-preview__example {
  padding: 32px;
  background: var(--color-bg-wash);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hl-preview__example-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
}

.hl-preview__example-book {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--color-ink);
}

.hl-preview__label {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-light);
}

.hl-preview__article {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--color-ink-light);
}

.hl-preview__note {
  padding: 16px 20px;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hl-preview__aside {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hl-preview__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hl-preview__step {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hl-preview__step-number {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-ink-faint);
}

.hl-preview__step-title {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--color-ink);
}

.hl-preview__step-text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-ink-light);
}

.hl-preview__plan {
  padding-top: 24px;
  border-top: 1px solid var(--color-rule);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.hl-preview__plan-text {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-ink);
}

/* ── Responsive ────────────────────────────────────────────── */

/* ── Import (issue #328) ───────────────────────────────────── */

.hl-import-page {
  max-width: 720px;
}

.hl-import-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hl-import-back {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-ink-light);
  text-decoration: none;
}

.hl-import-back:hover {
  color: var(--color-ink);
}

.hl-import-body {
  margin-top: 48px;
}

/* Choose an e-reader */

.hl-import-choices {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.hl-import-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 24px;
  background: var(--color-bg-wash);
  text-decoration: none;
  color: var(--color-ink);
}

a.hl-import-choice:hover {
  background: var(--color-surface);
}

.hl-import-choice--disabled {
  opacity: 0.55;
}

.hl-import-choice__name {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--color-ink);
}

.hl-import-choice__desc {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-ink-light);
}

.hl-import-choice__cta {
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Phone notice (shown only on narrow viewports — see media query below) */

.hl-import-phone-notice {
  display: none;
  margin: 24px 0 0;
  padding: 16px 20px;
  background: var(--color-bg-wash);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-ink-light);
}

/* Dropzone */

.hl-dropzone {
  padding: 64px 32px;
  text-align: center;
  border: 1px dashed var(--color-rule);
  cursor: pointer;
}

.hl-dropzone:hover,
.hl-dropzone--active {
  border-color: var(--color-ink-light);
  background: var(--color-bg-wash);
}

.hl-dropzone__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--color-ink);
}

.hl-dropzone__desc {
  margin: 8px 0 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-ink-light);
}

.hl-import-tip {
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-ink-faint);
}

.hl-import-tip kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 4px;
  background: var(--color-surface);
}

/* Reading / review / result / error states */

.hl-import-status {
  margin: 0 0 24px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--color-ink-light);
}

.hl-import-error {
  margin: 0 0 24px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-danger, #ba1a1a);
}

.hl-import-book-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.hl-import-book {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-rule);
}

.hl-import-book__title {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--color-ink);
}

.hl-import-book__counts {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-ink-light);
}

.hl-import-book__note {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-warn, #92400e);
}

.hl-import-book-list__warning {
  padding: 16px 0;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-warn, #92400e);
}

.hl-import-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.hl-import-unmatched {
  margin-bottom: 32px;
}

.hl-import-unmatched__title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin: 0 0 12px;
}

.hl-import-unmatched__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hl-import-unmatched__item {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-ink-light);
}

@media (max-width: 760px) {
  .hl-import-phone-notice {
    display: block;
  }

  .hl-import-body {
    display: none;
  }
}

@media (max-width: 760px) {
  .hl-page {
    padding: 40px 24px 64px;
  }

  .hl-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .hl-header__meta {
    align-items: flex-start;
  }

  .hl-summary {
    text-align: left;
  }

  .hl-tabs-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .hl-search {
    width: 100%;
    padding-bottom: 12px;
  }

  .hl-search__input {
    width: 100%;
  }

  .hl-book-group {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hl-passage {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .hl-passage__mark {
    font-size: 32px;
  }

  .hl-passage__quote {
    font-size: 17px;
  }

  .hl-preview__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .hl-preview__example {
    padding: 24px;
  }
}