/* ==========================================================================
   OgbonMath — Bookmarks + Notes list styling
   --------------------------------------------------------------------------
   Styles for the POPULATED (non-empty) Bookmarks and Notes views. Empty
   states already use .empty-state from empty-states.css. This file
   targets the inline-styled list items that render when there's data.

   Scoped to body[data-view="bookmarks"] / body[data-view="notes"].
   ========================================================================== */

/* ==========================================================================
   Shared page treatment
   ==========================================================================
*/
body[data-view="bookmarks"] #ct,
body[data-view="notes"] #ct {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
  font-family: var(--font-sans);
}

body[data-view="bookmarks"] #ct > .ls,
body[data-view="notes"] #ct > .ls {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body[data-view="bookmarks"] #ct h2,
body[data-view="notes"] #ct h2 {
  font-family: var(--font-display) !important;
  font-size: var(--fs-3xl) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-tight) !important;
  line-height: var(--lh-tight) !important;
  color: var(--tx) !important;
  margin-bottom: var(--sp-5) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* ==========================================================================
   Bookmark list items
   ==========================================================================
   app.js renders each as:
     <div style="padding:12px 0;border-bottom:2px solid var(--bdr);cursor:pointer" data-lid="...">
       <span style="font-size:14px;font-weight:600">Title</span>
     </div>
   We target by structure + data-lid attribute.
*/
body[data-view="bookmarks"] #ct > .ls > div[data-lid] {
  padding: var(--sp-4) var(--sp-4) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: var(--sp-2) !important;
  background: var(--bg2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

body[data-view="bookmarks"] #ct > .ls > div[data-lid]:hover {
  border-color: var(--ac) !important;
  background: var(--ac-soft);
  transform: translateX(2px);
}

body[data-view="bookmarks"] #ct > .ls > div[data-lid]::before {
  content: "★";
  color: var(--ac);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

body[data-view="bookmarks"] #ct > .ls > div[data-lid] > span {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--tx);
  flex: 1;
}

body[data-view="bookmarks"] #ct > .ls > div[data-lid]::after {
  content: "›";
  color: var(--tx3);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--dur-fast);
}

body[data-view="bookmarks"] #ct > .ls > div[data-lid]:hover::after {
  color: var(--ac);
}

/* ==========================================================================
   Notes list items
   ==========================================================================
   app.js renders each as:
     <div style="padding:14px 0;border-bottom:2px solid var(--bdr)">
       <div data-lid="..." style="font-size:12px;...color:var(--ac)...">Title</div>
       <div style="font-size:13px;...font-family:var(--mono)">Note body</div>
     </div>
*/
body[data-view="notes"] #ct > .ls > div {
  padding: var(--sp-4) var(--sp-4) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: var(--sp-3) !important;
  background: var(--bg2);
  transition: border-color var(--dur-fast) var(--ease-out);
}

body[data-view="notes"] #ct > .ls > div:hover {
  border-color: var(--bdr2);
}

/* First child = title with data-lid (clickable) */
body[data-view="notes"] #ct > .ls > div > div[data-lid] {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-widest) !important;
  text-transform: uppercase !important;
  color: var(--ac) !important;
  margin-bottom: var(--sp-2) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: var(--ac-soft);
  border: 1px solid var(--ac);
  transition: background var(--dur-fast);
}

body[data-view="notes"] #ct > .ls > div > div[data-lid]:hover {
  background: var(--ac);
  color: var(--ac-tx) !important;
}

body[data-view="notes"] #ct > .ls > div > div[data-lid]::before {
  content: "→ ";
  opacity: 0.7;
}

/* Second child = note body */
body[data-view="notes"] #ct > .ls > div > div:nth-child(2) {
  font-family: var(--font-serif) !important;
  font-size: var(--fs-base) !important;
  line-height: var(--lh-relaxed) !important;
  color: var(--tx1) !important;
  white-space: pre-wrap;
  margin-top: var(--sp-2);
}

/* ==========================================================================
   Mobile
   ==========================================================================
*/
@media (max-width: 560px) {
  body[data-view="bookmarks"] #ct,
  body[data-view="notes"] #ct {
    padding: var(--sp-4) var(--sp-3) var(--sp-6);
  }
  body[data-view="bookmarks"] #ct h2,
  body[data-view="notes"] #ct h2 {
    font-size: var(--fs-2xl) !important;
  }
}