/* ==========================================================================
   codex.css  -  the codex root index
   ==========================================================================
   Inherits the wing chrome. Adds the grouped item grid.
   ========================================================================== */
.cx .cx-group{ margin:0 0 6px; }
.cx .cx-h3{
  margin:20px 0 12px; font-family:"Press Start 2P",monospace; font-size:9.5px;
  color:#7A6E96; letter-spacing:.5px;
}
.cx .cx-count{
  display:inline-block; margin-left:7px; padding:2px 6px;
  background:#C7C4D9; color:#2e2838; font-size:8px;
}
.cx .cx-grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.cx .cx-item{
  display:flex; flex-direction:column; gap:6px;
  padding:12px 13px; text-decoration:none; color:#2e2838;
  background:#FFFFFB; border:2px solid #a99fc0;
  box-shadow:3px 3px 0 rgba(90,50,104,.18);
  transition:transform .08s;
}
.cx .cx-item:hover{
  transform:translate(-2px,-2px); border-color:#5A3268;
  box-shadow:5px 5px 0 rgba(90,50,104,.28); background:#fffdf4;
}
.cx .cx-item:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(90,50,104,.2); }
.cx .cx-title{ font-weight:600; font-size:16px; color:#5A3268; }
.cx .cx-sum{ font-size:13px; line-height:1.5; opacity:.82; }
.cx .cx-foot{
  margin-top:auto; padding-top:4px;
  font-family:"Press Start 2P",monospace; font-size:7px;
  letter-spacing:.3px; opacity:.65;
}
/* the maturity model, visible. a seed page is allowed to be thin. */
.cx .cx-status{ padding:2px 5px; margin-right:4px; }
.cx .cx-item--seed .cx-status{ background:#d4ead9; }
.cx .cx-item--growing .cx-status{ background:#f6ebbe; }
.cx .cx-item--ripe .cx-status{ background:#f2c0bf; }

.cx .cx-note{ margin:0 0 12px; font-size:14px; opacity:.8; }
.cx .cx-inline{ color:#0FA3A3; }
.cx .cx-inline:hover{ color:#d81888; }

@media (max-width:780px){ .cx .cx-grid{ grid-template-columns:1fr; } }

/* ---- SEARCH -------------------------------------------------------------- */
.sr-box{
  width:100%; box-sizing:border-box;
  padding:12px 14px; margin:0 0 10px;
  font-family:"Press Start 2P",monospace; font-size:12px;
  color:#2e2838; background:#FFFFFB;
  border:3px solid #5A3268; box-shadow:3px 3px 0 rgba(90,50,104,.28);
}
.sr-box:focus{ outline:none; background:#fffdf4; border-color:#d81888; }
.sr-count{
  margin:0 0 14px; font-family:basiic,monospace; font-size:12.5px;
  color:#6e6278;
}

/* ---- BLOG LIST ----------------------------------------------------------- */
.bl-list{ display:flex; flex-direction:column; gap:12px; }
.bl-post{
  display:flex; flex-direction:column; gap:6px;
  padding:14px 16px; text-decoration:none; color:#2e2838;
  background:#FFFFFB; border:2px solid #a99fc0;
  box-shadow:3px 3px 0 rgba(90,50,104,.18);
  transition:transform .08s;
}
.bl-post:hover{
  transform:translate(-2px,-2px); border-color:#5A3268;
  box-shadow:5px 5px 0 rgba(90,50,104,.28); background:#fffdf4;
}
.bl-post:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(90,50,104,.2); }
.bl-date{
  font-family:basiic,monospace; font-size:12px; color:#7A6E96;
}
.bl-title{ font-size:19px; font-weight:600; color:#5A3268; line-height:1.35; }
.bl-excerpt{ font-size:14px; line-height:1.6; opacity:.85; }
.bl-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.bl-tag{
  font-family:basiic,monospace; font-size:11px; color:#5A3268;
  padding:2px 7px; background:#f7f2f6; border:1px solid #C7C4D9;
}
.bl-empty{
  padding:22px 18px; margin:0;
  font-size:16px; line-height:1.7; color:#524860;
  background:#f7f2f6; border-left:5px solid #C7C4D9;
}
.bl-empty a{ color:#0FA3A3; }
.bl-empty a:hover{ color:#d81888; }
.sr-note{
  margin:-6px 0 16px; font-size:12.5px; font-style:italic;
  color:#6e6278; opacity:.8; line-height:1.55;
}

/* ---- MOBILE --------------------------------------------------------------
   THE PROBLEM: 236 index cards at one per row, 142px each, is a 33,700px
   scroll. That is not a page, it is a punishment. And the meta line was
   7-8px, which is unreadable on a phone.

   TWO COLUMNS and a tighter card. 236 cards at ~96px over two columns is
   ~11,300px - still long, because it is an index of 236 things, but it is
   a third of what it was and it scans. The summary is clamped to two lines
   so cards stay a predictable height instead of jittering.

   Pixel type has a hard floor of 11px on a phone; below that the basiic
   face turns to mush. Everything small comes up to meet it. */
@media (max-width: 900px){
  .cx .cx-grid{
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .cx .cx-item{ padding: 9px 10px; gap: 4px; }
  .cx .cx-title{ font-size: 14.5px; line-height: 1.3; }
  .cx .cx-sum{
    font-size: 11.5px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cx .cx-foot{ font-size: 11px; }
  .cx .cx-status{ padding: 1px 4px; }
  .cx .cx-h3{ font-size: 11px; }
  .cx .cx-count{ font-size: 11px; padding: 1px 5px; }
}
/* Two columns hold all the way down to a 320px phone. At 390px that is
   ~165px per card, which is tight but readable once the summary is clamped
   to two lines - and the alternative is a 28,000px single column, which is
   worse than tight. Only the very narrowest devices drop to one. */
@media (max-width: 330px){
  .cx .cx-grid{ grid-template-columns: 1fr; }
  .cx .cx-sum{ -webkit-line-clamp: 3; }
}


/* THE BACKGROUND (22 Sep 2026). Ashley: "the codex page does not have a
   background image." body.wing.cx (codex, search, the tag pages) had no
   background rule at all, so it sat on plain white while every codex ARTICLE
   (body.--post, index.css 19.x) drifts over bg7. The index now wears the
   same tile, the same slow drift, and the same two exemptions. */
body.wing.cx{
  background-image:
    url("images/backgrounds/bg7.png"),
    linear-gradient(#cce4ff, rgba(250, 250, 250, 0));
  background-repeat: repeat, no-repeat;
  background-color: transparent;
  background-attachment: scroll, scroll;
  animation: bg7slide 200s linear infinite;
}
@media (prefers-reduced-motion: reduce){ body.wing.cx{ animation: none; } }
@media (max-width: 1249px){ body.wing.cx{ animation: none; } }

/* THE BLOG BACKGROUND (29 Sep 2026). Same bug the codex index had on 22 Sep:
   blog.html is body.wing.bl, and the fix above was scoped to body.wing.cx, so
   the blog page stayed on plain white. It gets the same bg7 tile, the same
   slow drift and the same two exemptions. Appended here rather than added to
   the selector above, so this file only ever grows at the end. */
body.wing.bl{
  background-image:
    url("images/backgrounds/bg7.png"),
    linear-gradient(#cce4ff, rgba(250, 250, 250, 0));
  background-repeat: repeat, no-repeat;
  background-color: transparent;
  background-attachment: scroll, scroll;
  animation: bg7slide 200s linear infinite;
}
@media (prefers-reduced-motion: reduce){ body.wing.bl{ animation: none; } }
@media (max-width: 1249px){ body.wing.bl{ animation: none; } }