/* Visitor Wall /visitors (vision §E8): AI images visitors hung from the Studio, as uniform flat
   squares in 4 / 3 / 2 columns. AI work never gets the lamp pool or a shadow; every tile carries
   the AI stamp and "AI-generated" in its caption, never over the image. */
@layer pages {
  .wall-page {
    padding-block: var(--space-5) var(--section);
  }

  /* ---- Local nav: Make | Visitor Wall (same look as /create) --------------------------------- */
  .studio-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .studio-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    font: var(--ja-nav-type, 600 12.5px/1 var(--font-ui));
    letter-spacing: var(--ja-nav-track, 0.16em);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-2);
    transition: color var(--dur-quick) var(--ease-set);
  }
  .studio-nav a:hover { color: var(--ink); }
  .studio-nav a[aria-current] { color: var(--ink); }
  .studio-nav a[aria-current]::after {
    content: "";
    position: absolute;
    inset-inline: -3px calc(var(--ja-nav-track, 0.16em) * -1 - 2px);
    inset-block-end: 8px;
    block-size: 2px;
    background: currentColor;
    -webkit-mask: var(--brush-underline) center / 100% 100% no-repeat;
    mask: var(--brush-underline) center / 100% 100% no-repeat;
  }

  /* ---- Head ------------------------------------------------------------------------------------ */
  .wall__head {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
    max-inline-size: 46rem;
    margin-block: var(--space-6) var(--space-7);
  }
  .wall__title { margin: 0; }
  .wall__intro {
    max-inline-size: 48ch;
    margin: 0;
    color: var(--ink-2);
  }
  .wall__make { margin: var(--space-2) 0 0; }

  /* ---- Filters and count -------------------------------------------------------------------------- */
  .wall__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    margin-block-end: var(--space-6);
  }
  .wall__filters { margin: 0; }
  .wall__n {
    margin-inline-start: 0.55em;
    font: 400 var(--step--2)/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
  }
  .wall__n:empty { display: none; }
  .wall__status {
    margin: 0;
    font: 450 var(--step--2)/1.4 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
  }

  /* ---- Grid ------------------------------------------------------------------------------------- */
  .wall__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .wall__grid[aria-busy="true"] { min-block-size: 70svh; }
  @media (min-width: 600px) { .wall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .wall__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-8); } }
  .wall__item[hidden] { display: none; }

  .wall__tile { gap: var(--space-3); }
  .wall__frame {
    display: grid;
    place-items: center;
    inline-size: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--sunken);
  }
  .wall__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }
  .wall__hanging {
    inline-size: 100%;
    block-size: 100%;
  }
  .wall__label { gap: 5px; }
  /* AI titles are Instrument Sans 600 roman everywhere (as on the home AI band): Fraunces italic
     always means a title by Jamal. */
  .ai-title { font-family: var(--font-ui); font-style: normal; font-weight: 600; letter-spacing: 0; }
  .wall__label .label__title { font-size: var(--step-0); }
  .wall__tile:is(:hover, :focus-visible) .label__title { text-decoration: underline 1px var(--accent); text-underline-offset: 0.2em; }
  .wall__tile:focus-visible { outline-offset: 4px; }

  /* Fact rows: "AI AI-generated · by tom" and "●●●● OCEAN DEPTHS · LAST MONTH". Each fact carries
     its dot in the gutter before it; the row starts one gutter early and that strip is clipped, so a
     wrapped line never begins with a dot. */
  .wall__facts {
    --gap: 1.1em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 2px;
    inline-size: calc(100% + var(--gap));
    margin-inline-start: calc(var(--gap) * -1);
    clip-path: inset(-6px -6px -6px var(--gap));
    font-size: var(--step--1);
    line-height: 1.4;
    color: var(--ink-2);
  }
  .wall__fact {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-inline-size: 0;
    margin-inline-start: var(--gap);
  }
  .wall__fact::before {
    content: "·";
    content: "·" / "";
    position: absolute;
    inset-inline-start: calc(var(--gap) * -1);
    inline-size: var(--gap);
    text-align: center;
  }
  .wall__fact .ai-stamp__text { margin-inline-start: 0; }
  .wall__fact--by { overflow-wrap: anywhere; }
  .wall__facts--mono {
    font: 450 var(--step--2)/1.4 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .wall__facts--mono .wall__fact { white-space: nowrap; }

  /* ---- Empty and error ---------------------------------------------------------------------------- */
  .wall__empty,
  .wall__error {
    display: grid;
    justify-items: start;
    gap: var(--space-4);
    padding-block: var(--space-7);
  }
  .wall__empty[hidden],
  .wall__error[hidden] { display: none; }
  .wall__empty-title {
    margin: 0;
    font: 400 var(--step-3)/1.15 var(--font-display);
    max-inline-size: 24ch;
  }
  .wall__error-text {
    display: flex;
    gap: 0.5em;
    margin: 0;
    color: var(--alert);
  }
  .wall__error-text::before {
    content: "";
    flex: none;
    inline-size: 1.1em;
    block-size: 1.1em;
    margin-block-start: 0.25em;
    background: currentColor;
    -webkit-mask: var(--icon-alert) center / contain no-repeat;
    mask: var(--icon-alert) center / contain no-repeat;
  }
  .wall__error-text:focus { outline: none; }
  .wall__noscript {
    padding: var(--space-3) var(--space-4);
    background: var(--raised);
    box-shadow: var(--e1);
  }

  @media (max-width: 599.98px) {
    .wall__bar { flex-direction: column; align-items: flex-start; }
    .wall__n { display: none; }
    .wall__filters > label { padding-inline: var(--space-3); }
    .wall__facts--mono { font-size: 11px; letter-spacing: 0.04em; }
  }
  @media (forced-colors: active) {
    .studio-nav a[aria-current]::after { background: CanvasText; }
    .wall__frame { border: 1px solid CanvasText; }
    .wall__error-text::before { forced-color-adjust: none; background: CanvasText; }
  }
}