/* ============================================================
   journal.css — Journal-specific styles for journal.html
   ============================================================ */

/* ── Main Layout ── */
main{flex:1}
.page-header{width:min(100%,1120px);margin:0 auto;padding:2rem 1rem 1rem}
.page-title{margin:0;text-align:center;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.content{width:min(100%,760px);margin:0 auto;padding:0 1rem 5rem}

/* ── Day Group ── */
.day{margin:0 0 2rem;content-visibility:auto;contain-intrinsic-size:0 160px}
.day-header{display:flex;align-items:center;gap:.75rem;margin:0 0 .8rem;color:var(--text-muted);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.day-header::after{content:"";flex:1;height:1px;background:var(--border-color)}

/* ── Entry ── */
.entry{padding:.55rem 0;border-bottom:1px solid var(--border-color)}
.entry:last-child{border-bottom:0}
.entry-head{display:flex;align-items:flex-start;gap:.55rem}
.entry-head.has-toggle{cursor:pointer}
.entry-head:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:6px}
.entry-title{flex:1;min-width:0;color:var(--text-primary);font-size:.95rem;font-weight:600;line-height:1.4;word-break:break-word}
.entry-title a{color:var(--text-primary)}
.entry-meta{display:flex;align-items:center;gap:.45rem;flex-shrink:0}
.entry-time{color:var(--text-muted);font-size:.72rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── Chevron ── */
.chevron{width:13px;height:13px;flex-shrink:0;margin-top:3px;color:var(--text-muted);transition:transform .18s ease}
.entry-head[aria-expanded="true"] .chevron{transform:rotate(90deg)}

/* ── Entry Content ── */
.entry-content,.accordion-inner{color:var(--text-secondary);font-size:.9rem;line-height:1.7}
.entry-content a,.accordion-inner a{display:inline-flex;align-items:center;min-height:44px;margin:-.2em -.15em;padding:.2em .15em;border-radius:6px}
.entry-content a:hover,.entry-content a:focus,.accordion-inner a:hover,.accordion-inner a:focus{opacity:1}
.entry-content img,.accordion-inner img{max-width:100%;height:auto;border:1px solid var(--border-color);border-radius:8px;margin:.75rem 0}

/* ── Accordion ── */
.accordion[hidden]{display:none}
.accordion-inner{border-top:1px solid var(--border-color);margin-top:.5rem;padding-top:.75rem}
.accordion-inner h1,.accordion-inner h2,.accordion-inner h3{margin:1.2em 0 .4em;color:var(--text-primary);font-size:1rem;font-weight:800}
.accordion-inner p{margin:0 0 .85em}
.accordion-inner p:last-child{margin-bottom:0}
.accordion-inner ul,.accordion-inner ol{padding-left:1.25rem;margin:0 0 .85rem}
.accordion-inner li{margin:.2em 0}
.accordion-inner blockquote{margin:.85em 0;border-left:3px solid var(--border-color);padding-left:.85rem;color:var(--text-muted)}
.accordion-inner code{background:var(--bg-secondary);border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;padding:.1em .35em}
.accordion-inner pre{background:var(--bg-secondary);border-radius:8px;margin:0 0 .85rem;overflow-x:auto;padding:.85rem}
.accordion-inner pre code{background:transparent;padding:0}
.accordion-inner .loading{color:var(--text-muted);font-size:.85rem}
.video-placeholder{display:flex;align-items:center;justify-content:center;min-height:220px;margin:.75rem 0;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;font-weight:800}
.video-placeholder:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ── Load More & Empty State ── */
.load-more{display:none;width:100%;min-height:48px;margin:1rem 0 0;border:1px solid var(--border-color);border-radius:999px;background:var(--bg-secondary);color:var(--text-primary);font-weight:800;cursor:pointer}
.load-more.is-visible{display:inline-flex;align-items:center;justify-content:center}
.load-more:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
#empty{display:none;color:var(--text-muted);padding:2rem 0;font-size:.9rem}

/* ── Responsive ── */
@media (max-width:640px){
  .page-header{padding-top:1.4rem}
  .content{padding:0 .85rem 4rem}
  .entry-title{font-size:.92rem}
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .chevron,.entry-title a,.entry-content a,.accordion-inner a{transition:none}
}