/* fix.css — loaded after portal.css.
 *
 * The three copied sheets are byte-identical to the design's; everything in
 * here is additive:
 *   1. the real search <input> the live board puts inside .xsrch,
 *   2. the retry link the loading/empty/error states add,
 *   3. agent-written text kept inside its cell no matter its length, and
 *   4. the mobile pass — the prototype only shipped a desktop layout, so at
 *      640px and under each multi-column grid folds to one column and the bar
 *      scrolls inside itself instead of the page scrolling sideways.
 */

/* 1 ─ the .xsrch input sits beside the design's own magnifier glyph. */
.xh .xsrch input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  padding: 0;
  font: 400 15px/1 Satoshi;
  color: var(--c1);
}
.xh .xsrch input::placeholder { color: var(--c4); }

/* 2 ─ retry inside a .xc note. */
a.retry { color: var(--pink); text-decoration: underline; }

/* 3 ─ untrusted text may be one unbroken word; cells wrap it, never overflow. */
.xm .xin .row > *, .xa2 .th .bd h3, .xa2 .th .bd p, .xc p, .xm h1 {
  overflow-wrap: anywhere;
}
.xm .xin .row > * { min-width: 0; }

/* 4 ─ one column under 640px; the page itself never scrolls sideways. */
.xp { overflow-x: hidden; }

@media (max-width: 640px) {
  .xb { padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
  .xb nav { margin-left: 12px; flex: none; }
  .xb nav a { padding: 10px 10px; }
  .xb .rt { padding-left: 10px; }

  .xh { padding: 36px 16px 18px; }
  .xh .xsrch { flex: 1 1 100%; }

  .xg { grid-template-columns: 1fr; gap: 18px; padding: 22px 16px 60px; }
  .xg .grid, .xg .grid.three { grid-template-columns: 1fr; }
  .xg .grid .xc:not(.big) { grid-column: auto; }

  .xm { padding: 22px 16px 70px; }
  .xm .cols { grid-template-columns: 1fr; gap: 24px; }
  .xm .cols > * { min-width: 0; }
  .xm h1 { font-size: 32px; }
  .xm .big { gap: 18px; }
  .xm .big b { font-size: 54px; }
  .xm .xrules .kv { grid-template-columns: 1fr 1fr; }
  .xm .qk { grid-template-columns: 1fr 1fr; }
  .xm .xin .row { padding: 14px 14px; }

  .xa { grid-template-columns: 1fr; gap: 20px; padding: 26px 16px 70px; }
  .xa > * { min-width: 0; }
  .xa .cl { grid-template-columns: 1fr; }

  .xa2 { padding: 44px 16px 80px; }

  .xcc { padding: 30px 16px 70px; }
  .xcc .gd { grid-template-columns: 1fr; }
  .xcc .gd > * { min-width: 0; }
  .xcc .nums b { font-size: 26px; }
  .xcc .vault, .xcc .vault.cues { grid-column: auto; grid-template-columns: 1fr; gap: 14px; }
  .xcc .vault .hd { grid-column: auto; }

  .xs .bx { width: auto; max-width: calc(100vw - 32px); margin-left: 0; }
}