/* Base */
:root { --col-gap: 1rem; --btn-pad: 0.35rem 0.55rem; --actions-w: 6.5rem; --teal: #40e0d0; }
html,body{margin:0;padding:0;box-sizing:border-box}
body{
  font:16px/1.45 "Times New Roman",Times,serif;
  color:#111;
  border:0.5rem solid var(--teal);
  background:conic-gradient(#3498db 0 25%, #f0f0f0 0 50%, #3498db 0 75%, #f0f0f0 0);
  background-size:2rem 2rem;
  animation:fold 4s linear infinite;
}
.site-header{padding:1rem 1rem 0.5rem;text-align:center}
.site-title{margin:0;font-weight:800;letter-spacing:-0.01em;font-size:2rem}
.site-tag{margin:0;color:#666;font-style:italic}
.site-github{margin-top:.5rem}
.site-github a{color:var(--teal);text-decoration:none}
.site-github a:hover{text-decoration:underline}

@keyframes fold{
  0%{background-position:0 0}
  25%{background-position:2rem 0}
  50%{background-position:2rem 2rem}
  75%{background-position:0 2rem}
  100%{background-position:0 0}
}

/* Episode summary */
.episode{padding:0 1rem 0.5rem;border-bottom:1px solid #eee}
.episode-title{margin:0.25rem 0 0}
.episode-date{margin:0;color:#888;font-size:.9rem}
.episode-body{margin:.5rem 0 1rem;color:#222}

/* WALL OF TINY TEXT (flood mode) */
.micro-lines-container{ padding: 0 1rem 1rem; }
.mode-flood .micro-lines-container{
  column-count: 5;
  column-gap: var(--col-gap);
}
@media (max-width: 1200px){ .mode-flood .micro-lines-container{ column-count:4; } }
@media (max-width: 900px){ .mode-flood .micro-lines-container{ column-count:3; } }
@media (max-width: 600px){ .mode-flood .micro-lines-container{ column-count:1; } }

/* Each microline is a block that avoids breaking across columns */
.microline{
  position: relative;
  break-inside: avoid;
  padding: .15rem .25rem;
  border-radius: .15rem;
  border:1px solid #ddd;
  transition: background-color .12s ease-in-out, border-color .12s ease-in-out;
}
.microline:hover, .microline:focus-within{ background:#f0f7f7; border-color: var(--teal); }

/* Tiny, dense text; reserve space on the right for actions to prevent CLS */
.microtext{
  display: block;
  font-size: .65rem;      /* tinier */
  line-height: 1.1;       /* denser */
  letter-spacing: .01em;
  color:#111;
  margin: 0 calc(var(--actions-w) + .5rem) .1rem 0;  /* reserve action width */
}

/* Actions: absolutely positioned; fade in (no layout shift) */
.actions{
  position: absolute;
  top: 0;
  right: .25rem;
  display: inline-flex;
  gap: .35rem;
  height: 1.4rem;
  align-items: center;
  opacity: 0;
  transition: opacity .12s ease-in-out;
  width: var(--actions-w);
  justify-content: flex-end;
}
.microline:hover .actions,
.microline:focus-within .actions{ opacity: 1; }

/* Buttons */
.btn{
  font-size: .9rem;
  border: 1px solid #888;
  padding: var(--btn-pad);
  border-radius: .35rem;
  background: #e0e0e0;
  color:#111;
  text-decoration: none;
  transition: background-color .12s ease-in-out, color .12s ease-in-out, border-color .12s ease-in-out;
}
.btn:hover, .btn:focus{ background: var(--teal); color:#fff; border-color: var(--teal); }
.btn:focus-visible{ outline: 2px solid #000; outline-offset: 2px; }

/* Flood toggle */
.flood-toggle{
  position: fixed;
  top: .5rem;
  right: .5rem;
  z-index: 10;
}

.mode-flood .flood-toggle{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
}



/* Mobile: always show actions, stacked after the line to avoid hover dependency */
@media (max-width: 600px){
  .actions{
    position: static;
    width: auto;
    opacity: 1;
    justify-content: flex-start;
    margin: .2rem 0 .35rem;
  }
  .microtext{ margin-right: 0; }
}

/* Utility */
.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}