/* Shared stylesheet for generated identifier pages.
 *
 * Linked once rather than inlined per page: there are 172 of them, and the
 * handout/physmap precedent for inlining does not transfer since those are
 * standalone printables meant to survive being emailed around.
 *
 * Tokens mirror site/src/styles/custom.css so these pages read as part of
 * uofa.net without depending on the Starlight bundle. */

:root {
  --bg: #0c0d0e;
  --bg-elev: #131418;
  --bg-code: #0f1013;
  --border: #25262c;
  --text: #e8e6e1;
  --text-muted: #9a988f;
  --text-faint: #6b6a64;
  --accent: #d4a35a;
  --stub: #b9a472;
  --warn: #c47b6a;

  --font-serif: 'Fraunces', ui-serif, Georgia, serif;
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --bg-elev: #faf8f3;
    --bg-code: #f7f4ec;
    --border: #d8d4c7;
    --text: #1a1a1a;
    --text-muted: #5a5752;
    --text-faint: #8a8780;
    --accent: #a07832;
    --stub: #8a7340;
    --warn: #9c4f3a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main, .iri-top, .iri-foot {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.iri-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.iri-top a { color: var(--text-muted); text-decoration: none; }
.iri-top a:hover { color: var(--accent); }
.iri-top .iri-home { color: var(--accent); }

main { padding-top: 1.75rem; padding-bottom: 2.5rem; }

.iri-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.4rem;
}

h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.15rem;
  margin: 2rem 0 0.6rem;
}

.iri-id code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  word-break: break-all;
}

.iri-source { font-size: 0.88rem; color: var(--text-muted); margin: 0.35rem 0 0; }
.iri-source a { color: var(--accent); }
.iri-note { font-size: 0.88rem; color: var(--text-muted); margin: 0 0 0.6rem; }

.iri-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.iri-table th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
  text-align: left;
  padding: 0 0.75rem 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.iri-table td {
  padding: 0.45rem 0.75rem 0.45rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.iri-table td.k { white-space: nowrap; }
.iri-table td.k code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); }
.iri-table td.v { width: 100%; }
.iri-table td.v code { font-family: var(--font-mono); font-size: 0.8rem; word-break: break-all; }
.iri-table td.k a { color: var(--text-muted); }
.iri-table pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-muted);
}

a.iri-link { color: var(--accent); text-decoration: none; }
a.iri-link:hover { text-decoration: underline; }
/* Dotted underline marks a target that exists but is described by nobody. */
a.iri-link-stub { color: var(--stub); text-decoration: underline dotted; }

.iri-banner {
  background: var(--bg-elev);
  border: 1px dashed var(--stub);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin: 1.25rem 0;
}
.iri-banner p { margin: 0; font-size: 0.92rem; }
.iri-banner strong { color: var(--stub); }

.iri-cmd, .iri-verify pre {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  overflow-x: auto;
}

.iri-group { margin: 1.75rem 0 0; }
.iri-group ul { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.iri-group li { padding: 0.18rem 0; font-size: 0.88rem; }
.iri-group li code { font-family: var(--font-mono); font-size: 0.8rem; }

.iri-foot {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  padding-bottom: 2rem;
  font-size: 0.82rem;
  color: var(--text-faint);
}
.iri-foot p { margin: 0; }

@media (max-width: 34rem) {
  h1 { font-size: 1.6rem; }
  .iri-table { font-size: 0.84rem; }
  .iri-table td.k { white-space: normal; }
}

/* ── Vocabulary pages ─────────────────────────────────────────────────── */

.v-banner {
  background: var(--bg-elev);
  border: 1px dashed var(--stub);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin: 1.25rem 0 0;
}
.v-banner p { margin: 0; font-size: 0.92rem; }
.v-banner strong { color: var(--stub); }
/* A well-documented namespace gets a solid border; the dashed one signals
   "read this before trusting what follows". */
.v-banner-ok { border-style: solid; border-color: var(--border); }
.v-banner-ok strong { color: var(--accent); }

.v-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.65rem;
  margin: 0.5rem 0 0;
  line-height: 1.9;
}
.v-index a { color: var(--text-muted); text-decoration: none; }
.v-index a:hover { color: var(--accent); }
.v-index code { font-family: var(--font-mono); font-size: 0.76rem; }

.v-term {
  padding: 1rem 0 0.9rem;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 1.5rem;
}
.v-term h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.02rem;
  margin: 0 0 0.15rem;
}
.v-term h3 a { color: var(--text); text-decoration: none; }
.v-term h3 a:hover { color: var(--accent); }
.v-term h3 .v-name { margin-left: 0.5rem; font-weight: 400; }
.v-term h3 .v-name code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); }

.v-iri { margin: 0 0 0.35rem; }
.v-iri code { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-faint); word-break: break-all; }

.v-meta { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 0.4rem; }
.v-meta code { font-family: var(--font-mono); font-size: 0.74rem; color: var(--accent); }

/* A deprecated term still resolves, so it is dimmed rather than hidden: the
   IRI has to keep working for anyone who already wrote it down. */
.v-term-dep { opacity: 0.72; }
.v-term-dep h3 a { text-decoration: line-through; text-decoration-thickness: 1px; }
.v-dep {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--warn);
}

.v-comment { font-size: 0.9rem; margin: 0 0 0.35rem; }
.v-provenance { font-size: 0.76rem; color: var(--text-faint); margin-left: 0.4rem; }
.v-sub { font-size: 0.84rem; color: var(--text-muted); margin: 0 0 0.35rem; }
.v-sub a { color: var(--accent); text-decoration: none; }

/* Which class carries the property, and what its value is. */
.v-sig { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 0.35rem; }
.v-sig code { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text); }
.v-sig a { text-decoration: none; }
.v-sig a code { color: var(--accent); }

.v-constraints { list-style: none; padding: 0; margin: 0.35rem 0 0; }
.v-constraints li {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0.15rem 0 0.15rem 0.7rem;
  border-left: 2px solid var(--border);
}
.v-constraints code { font-family: var(--font-mono); font-size: 0.76rem; color: var(--accent); }
.v-msg { display: block; color: var(--text-faint); font-size: 0.8rem; }

/* Stated explicitly rather than left as an empty gap: "we have nothing" is
   information, and a blank entry reads like an oversight. */
.v-none { font-size: 0.82rem; color: var(--text-faint); font-style: italic; margin: 0.3rem 0 0; }