/* 3-column layout 20/60/20 */
body.hack {
  display: grid;
  grid-template-columns: 5% 15% 60% 15% 5%;
  grid-template-areas: "_before left main right _after";
  margin: 0 auto;
  padding: 0 0 2rem 0;
  max-width: 1500px;
  min-width: 360px;
}

/* Areas */
.left { 
  grid-area: left; 
  padding: 0 1rem; 
}
.main {
  grid-area: main;
  width: 100%;
  /* min-width:0 lets this grid item shrink below the intrinsic width of a wide
     child (e.g. a long <pre>), so the child scrolls instead of widening the
     whole page. A grid item's default min-width:auto would blow out the track. */
  min-width: 0;
}
.right { 
  grid-area: right; 
  padding: 0 1rem; 
}

.right section {
  max-width: 25rem;
}

.main .content {
  /* Ensure main column occupies at least 80% of viewport height */
  min-height: 60vh;
  /* allow flex/grid children to shrink so wide <pre> blocks scroll, not widen */
  min-width: 0;
}

/* Every flex cell inside the main column must be allowed to shrink below its
   content's intrinsic width. A flex item defaults to min-width:auto, so a nested
   `.cell` wrapping a wide <pre> (e.g. the HaveFun/Examples `-Nof12` sections)
   would grow to fit the widest line — and the <pre>'s max-width:100% is then
   100% of an already-widened cell. Pinning min-width:0 keeps the cell at column
   width so the <pre>'s overflow-x:auto scrolls instead of stretching. */
.main .cell {
  min-width: 0;
  max-width: 100%;
}

/* Responsive: stack (mobile: show left, right, main vertically) */
@media (max-width: 960px) {
  body.hack {
    grid-template-columns: 100%;
    grid-template-areas:
      "left"
      "right"
      "main";
  }
  .left, .right, .main { width: 100%; margin: 0;}
  .left, .right { display: block; }
  .main .content {
    min-height: 30vh;
  }
}

.state {
  color: #ccc;
  padding: 0.4rem 0.8rem;
  border: 1px solid #ccc;
  margin-bottom: 0;
  display: inline-block;
}
.state-success {
  color: #2d7;
  border-color: #2d7;
}
.state-error {
  color: #f44;
  border-color: #f44;
}

.spacer {
  min-height: 1rem;
}

.btn-small {
  padding: 0.4rem 0.8rem;
}

/* x-dog-only elements (blog meta, FAQ accordion, pagination) — depins has no
   equivalents. No .card rules here: card styling comes entirely from hack.css. */
.muted {
  color: #888;
}
/* Blog index: space the post entries and their metadata lines. */
.media {
  margin-bottom: 1.5rem;
}
.media-content {
  margin: 0.25rem 0;
}
.media-meta {
  font-size: 0.9rem;
}
/* hack.css zeroes section margins; restore vertical rhythm between the main
   content sections. */
.main .content section {
  padding: 0.5rem;
}
.hack p {
  margin: 0 0 1rem 0;
}
/* Cards that wrap onto multiple rows in a .cards grid need vertical spacing —
   the spacer cells only separate them horizontally. */
.cards.grid .card {
  margin-bottom: 1rem;
}
details > summary {
  cursor: pointer;
  padding: 0.3rem 0;
}
details[open] > summary {
  color: #ff2e88;
}
.pagination a {
  margin: 0 0.2rem;
}

/* Keep code/ASCII <pre> blocks inside the content column: they must not wrap
   (it would break ASCII-diagram and code alignment), but they should scroll
   horizontally within the column instead of widening the whole page layout.
   hack.css sets a 2rem pre padding, which is too roomy here — tighten to 0.5rem. */
.main .content pre {
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  padding: 0.5rem;
}

/* The execution log and result JSON are prose, not alignment-sensitive art, so
   they should wrap long lines (file paths, long JSON strings) instead of forcing
   a horizontal scrollbar or overflowing the two-column layout. */
#hf-log,
#hf-result-pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* flow deep-dive: inline SVG diagram fit. */
.diagram {
  margin: 1rem 0;
  overflow-x: auto;
}
.diagram svg {
  max-width: 100%;
  height: auto;
  background: #fff;
  padding: 0.5rem;
}