/* Rules for pages the prototype did not have.
 *
 * Nothing here overrides sediment.css — it only adds. Same tokens, same
 * 2px rules, same monospace. Kept in a separate file so the prototype's
 * design can always be diffed against the original, untouched.
 */

/* --- navigation between the three pages --------------------------- */
.nav{
  display:flex;gap:16px;flex-wrap:wrap;
  margin-top:14px;font-size:11px;letter-spacing:0.4px;
}
.nav a{color:var(--dim);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;}
.nav a:hover{color:var(--ink);border-bottom-color:var(--ink);}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:600;}

/* --- the /recent grid --------------------------------------------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;
}
.tile{
  border:2px solid var(--rule);background:#fff;
  text-decoration:none;color:var(--ink);display:block;
}
.tile:hover{opacity:0.88;}
.tile canvas{width:100%;aspect-ratio:1/1;display:block;background:#fff;}
.tile .meta{
  border-top:2px solid var(--rule);
  padding:8px 10px;font-size:10.5px;line-height:1.5;
}
.tile .meta .h{word-break:break-all;color:var(--dim);}
.tile .meta .who{display:flex;justify-content:space-between;gap:8px;margin-top:3px;}
.tile .meta .who span:first-child{font-weight:600;}
.tile .meta .who span:last-child{color:var(--dim);font-variant-numeric:tabular-nums;}

/* --- states -------------------------------------------------------- */
/* A class that sets `display` outranks the browser's own [hidden] rule, so
   `el.hidden = true` silently does nothing on .grid and .statusline. Put it
   back, or the empty status line leaves a gap under the header on exactly
   the pages where something has already gone wrong. */
.grid[hidden], .statusline[hidden], .state[hidden]{display:none;}

.state{
  border:2px solid var(--rule);background:#fff;
  padding:22px;font-size:12px;color:var(--dim);
}
.state b{color:var(--ink);font-weight:600;}
.statusline{
  font-size:11px;color:var(--dim);margin:0 0 22px;
  display:flex;gap:14px;flex-wrap:wrap;
}