/* ytj. Same language as 23signs.org: monochrome, monospace, one serif, air. */

:root {
  --bg: #fafafa;
  --fg: #111111;
  --muted: #6b6b6b;
  --hair: rgba(17, 17, 17, 0.14);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0c0c0d; --fg: #ededed; --muted: #8a8a8a; --hair: rgba(237, 237, 237, 0.16); }
}
/* Time-of-day override (set by the head script) wins over system preference */
:root[data-theme="light"] { --bg: #fafafa; --fg: #111111; --muted: #6b6b6b; --hair: rgba(17, 17, 17, 0.14); }
:root[data-theme="dark"]  { --bg: #0c0c0d; --fg: #ededed; --muted: #8a8a8a; --hair: rgba(237, 237, 237, 0.16); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.6;
  min-height: 100dvh;
  padding: clamp(1.5rem, 6vw, 5rem);
  padding-top: clamp(3rem, 12vh, 7rem);
  transition: background-color 0.4s ease, color 0.4s ease;
}

main {
  max-width: 40rem;
  width: 100%;
  animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

h1 {
  font-family: 'Bodoni Moda', Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  font-size: clamp(3.25rem, 14vw, 6rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

.tag {
  margin-top: 1.75rem;
  font-size: clamp(1rem, 3.2vw, 1.2rem);
  max-width: 40ch;
}

/* Search: a single rule under the text, nothing else */
form {
  margin-top: 2.5rem;
}
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid var(--fg);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: clamp(1.1rem, 3.6vw, 1.35rem);
  line-height: 1.4;
  caret-color: var(--fg);
}
input[type="search"]::placeholder { color: var(--muted); opacity: 1; }
input[type="search"]:focus { outline: none; border-bottom-width: 2px; padding-bottom: calc(0.55rem - 1px); }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.hint, .status {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--muted);
  min-height: 1.6em;
}
.hint:empty, .status:empty { display: none; }
.hint .y { color: var(--fg); }
.status { margin-top: 2.5rem; }

/* Results: hairlines between rows, hierarchy from type alone */
.results {
  list-style: none;
  margin-top: 0.5rem;
}
.row {
  padding: 1.5rem 0;
  border-top: 1px solid var(--hair);
}
.row:first-child { border-top: 0; }
.row.is-inactive .name { color: var(--muted); }
.name {
  font-family: 'Bodoni Moda', Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  font-size: clamp(1.35rem, 4.4vw, 1.6rem);
  font-weight: 400;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.id {
  display: inline-block;
  padding: 10px;            /* 44px tap target without 44px of visual gap */
  margin: -4px -10px -6px;
}
.meta, .line, .aux {
  font-size: 0.82rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.line { color: var(--fg); margin-top: 0.15rem; }
.aux { margin-top: 0.15rem; }

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  transition: opacity 0.15s ease;
}
a:hover { opacity: 0.55; }

/* Inline text buttons: expand aliases, load more */
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  transition: opacity 0.15s ease;
}
button:hover { opacity: 0.55; }
.aux button { color: var(--muted); padding: 0.6rem; margin: -0.6rem; }
.more:not([hidden]) {
  display: block;
  margin-top: 1.5rem;
  min-height: 44px;
  padding: 0.5rem 0;
  text-align: left;
}
[hidden] { display: none; }
.empty { margin-top: 2.5rem; color: var(--muted); font-size: 0.82rem; }
.empty b { font-weight: 400; color: var(--fg); }

footer {
  margin-top: 4rem;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}
footer p + p { margin-top: 0.25rem; }
footer a { display: inline-block; padding: 0.6rem; margin: -0.6rem; }
.dataset:empty { display: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

::selection { background: var(--fg); color: var(--bg); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
.id:focus-visible, .aux button:focus-visible, footer a:focus-visible { outline-offset: -7px; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  a, button { transition: none; }
}