/* ============================================================
   RESOURCES  —  tips cards, video grid, reading list,
   and code / math styling for individual tips pages
   ============================================================ */

/* --- Tips & code cards --- */
.tip-card{ display: flex; }
.tip-card .card__body{ display: flex; flex-direction: column; gap: var(--space-2); }
.tip-card__excerpt{ color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.55; margin-top: var(--space-1); }

/* --- Favorite videos --- */
.video__title{ font-family: var(--font-display); font-size: var(--text-md); margin: 0 0 var(--space-3); }
.video__frame{
  position: relative; padding-top: 56.25%;            /* 16:9 */
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2); box-shadow: var(--shadow-1);
}
.video__frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__desc{ color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.55; margin-top: var(--space-3); }

/* --- Reading list --- */
.reading-item{ padding-top: var(--space-4); border-top: 1px solid var(--border-strong); }
.reading-item__title{ font-family: var(--font-display); font-size: var(--text-md); margin: 0 0 var(--space-2); }
.reading-item__title a{ color: var(--ink); text-decoration: none; }
.reading-item__title a:hover{ color: var(--accent); }
.reading-item p{ color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.55; margin: 0; }

/* ============================================================
   Code + math on individual tips pages (.tips-post)
   ============================================================ */
.tips-post .post__body pre,
.tips-post .post__body .highlight{
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin: var(--space-5) 0; overflow: hidden;
}
.tips-post .post__body pre{ padding: var(--space-4); overflow-x: auto; }
.tips-post .post__body .highlight pre{ border: 0; margin: 0; }
.tips-post .post__body pre,
.tips-post .post__body pre code,
.tips-post .post__body .highlight code{
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6;
  color: var(--ink); background: none; border: 0; padding: 0; white-space: pre;
}
/* inline code */
.tips-post .post__body :not(pre) > code{
  font-family: var(--font-mono); font-size: .88em;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: .1em .4em; color: var(--ink);
}
/* rouge tokens — tuned to the Refined-earth palette */
.tips-post .highlight .c,  .tips-post .highlight .c1,
.tips-post .highlight .cm, .tips-post .highlight .cd{ color: var(--ink-faint); font-style: italic; }
.tips-post .highlight .k,  .tips-post .highlight .kd, .tips-post .highlight .kn,
.tips-post .highlight .kc, .tips-post .highlight .kr, .tips-post .highlight .kp{ color: var(--accent); font-weight: 600; }
.tips-post .highlight .s,  .tips-post .highlight .s1, .tips-post .highlight .s2,
.tips-post .highlight .se, .tips-post .highlight .dl, .tips-post .highlight .sb{ color: var(--accent-2); }
.tips-post .highlight .nf, .tips-post .highlight .nb, .tips-post .highlight .nc{ color: var(--hematite); }
.tips-post .highlight .m,  .tips-post .highlight .mi, .tips-post .highlight .mf,
.tips-post .highlight .il{ color: var(--hematite); }
.tips-post .highlight .o,  .tips-post .highlight .ow, .tips-post .highlight .p{ color: var(--ink-muted); }

/* MathJax display blocks shouldn't overflow narrow screens */
.tips-post .post__body mjx-container[display="true"]{ overflow-x: auto; overflow-y: hidden; }
.tips-post .equations{ margin: var(--space-5) 0; }
.tips-post .equations p{ margin: var(--space-3) 0; overflow-x: auto; overflow-y: hidden; }

/* collapsible full-source block */
.code-details{ margin-top: var(--space-6); border-top: 1px solid var(--border); padding-top: var(--space-5); }
.code-details > summary{
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); color: var(--ink-muted);
}
.code-details > summary::-webkit-details-marker{ display: none; }
.code-details > summary::before{ content: "+"; color: var(--accent); font-weight: 700; }
.code-details[open] > summary::before{ content: "\2013"; }
.code-details .code-block{
  margin-top: var(--space-4); max-height: 34rem; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-4); white-space: pre;
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6; color: var(--ink);
}