/* Textures - short fragments and vignettes */

body {
  max-width: 65ch;
  margin: 0 auto;
  padding: 2rem;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  box-sizing: border-box;
}

/* Index page: center items within grid cells */
body.index-body .t {
  justify-items: center;
}

/* Texture page: reset to default alignment */
body.texture-page .t {
  justify-items: start;
}

/* Texture page: content with fade-in */
body.texture-page .content {
  max-width: 65ch;
  animation: content-fade 0.4s ease-out 0.1s both;
}

@keyframes content-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Texture title - grid item styled like disabled links, in last cell */
body.texture-page .texture-title {
  width: 11ch;
  text-align: right;
  font-family: monospace;
  color: #999;
  grid-column: -2 / -1;
  justify-self: end;
  cursor: pointer;
  position: relative;
}

/* View transition only for header nav (not footer) */
body.texture-page .header-nav .texture-title {
  view-transition-name: texture-id;
}

body.texture-page .texture-title:hover {
  color: #8bf;
}

body.texture-page .texture-title::after {
  content: attr(data-id);
}

body.texture-page .texture-title:hover::after {
  content: 'COPYTEXT';
}

body.texture-page .texture-title.copied::after {
  content: 'COPIED00';
}

/* Random button transitions to texture title */
.header-nav a[href="#"] {
  view-transition-name: texture-id;
  text-align: right;
}

::view-transition-old(texture-id),
::view-transition-new(texture-id) {
  animation-duration: 0.25s;
}

@media (prefers-color-scheme: dark) {
  .texture-title { color: #555; }
}

/* View transition for back button (header nav only) */
.header-nav .back-link {
  view-transition-name: back-button;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(back-button),
::view-transition-new(back-button) {
  animation-duration: 0.25s;
}

@media (prefers-color-scheme: dark) {
  html { background: #111; color: #ddd; }
  a { color: #8bf; }
  a:visited { color: #555; }
}

a:visited { color: #999; }

/* Responsive grid for all rows */
.t {
  display: grid;
  grid-template-columns: repeat(5, 11ch);
  justify-content: space-between;
  gap: 0.4rem;
}

/* All links in grid rows get hex-style formatting */
.t a {
  display: inline-block;
  width: 11ch;
  text-align: justify;
  text-align-last: justify;
  font-family: monospace;
  text-decoration: none;
}

@media (max-width: 750px) {
  .t { grid-template-columns: repeat(4, 11ch); }
}

@media (max-width: 600px) {
  .t { grid-template-columns: repeat(3, 11ch); }
}

@media (max-width: 400px) {
  .t { grid-template-columns: repeat(2, 11ch); }
}

.header-nav {
  margin-bottom: 2rem;
}

.footer-nav {
  margin-top: 2rem;
}

/* Position second item at right edge (only when there are multiple items) */
.header-nav a:last-child:not(:first-child),
.header-nav span:last-child:not(:first-child),
.footer-nav a:last-child:not(:first-child),
.footer-nav span:last-child:not(:first-child),
.prev-next a:last-child:not(:first-child),
.prev-next .disabled:last-child:not(:first-child) {
  grid-column: -2 / -1;
}

.t .current {
  width: 11ch;
  text-align: justify;
  text-align-last: justify;
  font-family: monospace;
  font-weight: bold;
}

/* Pagination */
.pagination {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #ccc;
}

.prev-next {
  margin-top: 0.5rem;
}

.prev-next .disabled {
  display: inline-block;
  width: 11ch;
  text-align: justify;
  text-align-last: justify;
  font-family: monospace;
  color: #999;
}

@media (prefers-color-scheme: dark) {
  .pagination { border-color: #444; }
  .prev-next .disabled { color: #555; }
}

/* Copy confirmation overlay */
.copy-confirm {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.copy-dialog {
  background: #fff;
  padding: 2rem;
  font-family: monospace;
  text-align: center;
}

.copy-dialog p {
  margin: 0 0 1rem 0;
}

.copy-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.copy-actions button {
  font-family: monospace;
  padding: 0.5rem 1rem;
  border: 1px solid #000;
  background: #fff;
  cursor: pointer;
}

.copy-actions button:hover {
  background: #000;
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .copy-dialog { background: #222; color: #ddd; }
  .copy-actions button { border-color: #ddd; background: #222; color: #ddd; }
  .copy-actions button:hover { background: #ddd; color: #222; }
}