:root {
  --bg: #f7f4ef;
  --ink: #1c1917;
  --muted: #57534e;
  --line: #d6d3d1;
  --accent: #0f4c5c;
  --accent-soft: #e6f1f3;
  --warn: #9a3412;
  --ok: #166534;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, #e8f2f4 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 0%, #f0e7dc 0%, transparent 50%),
    var(--bg);
  font-family: var(--font-body);
  line-height: 1.5;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--accent);
}

.brand-mark {
  display: block;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent);
}

.brand-sub {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-home .site-main {
  width: min(1080px, 100%);
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
}

nav a:hover, nav a:focus {
  color: var(--accent);
  text-decoration: underline;
}

.site-main {
  flex: 1;
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 1.75rem 1.25rem 3rem;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}

.lede {
  color: var(--muted);
  margin: 0 0 1.5rem;
  max-width: 42rem;
}

.search-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

input[type="search"], input[type="text"], input[type="password"] {
  flex: 1;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  background: #fff;
}

button, .btn {
  appearance: none;
  border: 0;
  border-radius: 6px;
  padding: 0.65rem 1rem;
  background: var(--accent);
  color: #fff;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

button:hover, .btn:hover { filter: brightness(1.08); }

.meta {
  color: var(--muted);
  font-size: 0.9rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,0.65);
}

th, td {
  text-align: left;
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }

a { color: var(--accent); }

.section {
  margin-top: 1.75rem;
}

.section h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}

.pill {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8rem;
}

.status-ok { color: var(--ok); }
.status-fail { color: var(--warn); }

.flash {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--line);
  margin-bottom: 1rem;
}

.flash.error { border-color: #fecaca; background: #fef2f2; }
.flash.ok { border-color: #bbf7d0; background: #f0fdf4; }

ul.clean {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.clean li {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
}

.pager {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  align-items: center;
}

pre.report {
  overflow: auto;
  background: #1c1917;
  color: #f5f5f4;
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.8rem;
}

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

.flash {
  padding: 0.85rem 1rem;
  background: var(--accent-soft);
  border-radius: 8px;
}

/* AlphabeticalIndexedList / EntityIndex (ADR-0015) */
.entity-index-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.entity-index-jump a {
  text-decoration: none;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  color: var(--muted);
}

.entity-index-jump a:hover,
.entity-index-jump a:focus {
  color: var(--accent);
  background: var(--accent-soft);
}

.entity-index__section {
  margin: 0 0 1.25rem;
}

.entity-index__header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  padding: 0.4rem 0.55rem;
  background: #efeae3;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 0.5rem;
}

.entity-index__letter {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}

.entity-index__count {
  color: var(--muted);
  font-size: 0.95rem;
}

.entity-index__entries {
  column-count: 3;
  column-gap: 1.25rem;
  column-fill: auto;
}

.entity-index__entry {
  display: block;
  break-inside: avoid;
  padding: 0.15rem 0;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entity-index__entry:hover .entity-index__label {
  color: var(--accent);
  text-decoration: underline;
}

.entity-index__label { font-weight: 500; }

.entity-index__meta {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
}

@media (max-width: 900px) {
  .entity-index__entries { column-count: 2; }
}

@media (max-width: 560px) {
  .entity-index__entries { column-count: 1; }
}

@media (max-width: 640px) {
  .site-header { padding: 0.85rem 1rem; }
  nav { gap: 0.65rem; }
}

/* Quiet chrome on Communication entry (home / empty search) */
.page-home .site-header,
.page-search-empty .site-header {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

.page-home .site-main,
.page-search-empty .site-main {
  width: min(720px, 100%);
  padding-top: 1.5rem;
}

.page-home .site-footer,
.page-search-empty .site-footer {
  border-top-color: transparent;
}

/* Google-like Communication entry — logo above search */
.google-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 0 1.5rem;
  min-height: min(52vh, 28rem);
}

.google-logo-mark {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 0 auto 1.1rem;
}

.google-logo-ub {
  display: block;
  width: 92px;
  height: 92px;
}

.google-logo-badge {
  position: absolute;
  right: -12px;
  bottom: -8px;
  width: 42px;
  height: 42px;
  background: rgba(247, 244, 239, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(247, 244, 239, 0.98);
}

.google-brand-wordmark {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1.1;
}

.google-brand-sub {
  margin: 0 0 1.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.google-prompt {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
}

.google-lede {
  margin: 0 0 1.5rem;
  max-width: 28rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--muted);
}

.google-search-form {
  width: 100%;
  max-width: 584px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.google-search-shell {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(28, 25, 23, 0.08);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.google-search-shell:focus-within {
  border-color: #b0adaa;
  box-shadow: 0 1px 8px rgba(28, 25, 23, 0.14);
}

.google-search-icon {
  flex-shrink: 0;
  color: var(--muted);
}

.google-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  padding: 0.45rem 0;
}

.google-search-input::placeholder {
  color: #a8a29e;
}

.google-search-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

.google-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  padding: 0.65rem 1.15rem;
  border-radius: 6px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.google-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.google-btn-primary:hover {
  filter: brightness(1.08);
}

.google-btn-secondary {
  background: #f1efeb;
  color: var(--ink);
  border-color: #e7e5e4;
}

.google-btn-secondary:hover,
.google-btn-secondary:focus-visible {
  border-color: var(--line);
  background: #e8e6e1;
  outline: none;
}

.google-provider-note {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  max-width: 36rem;
}

.google-provider-note a {
  color: var(--accent);
}

.home-below {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  text-align: left;
}

.home-section-lede {
  margin: -0.35rem 0 1rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.search-results-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  text-decoration: none;
  color: var(--accent);
}

.search-results-brand img {
  display: block;
  width: 40px;
  height: 40px;
}

.search-results-brand span {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}

.show-more-wrap {
  margin: 0.85rem 0 1.5rem;
  text-align: center;
}

.show-more-btn {
  appearance: none;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}

.show-more-btn:hover {
  background: var(--accent-soft);
}

.show-more-meta {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.home-section-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 0.85rem;
  color: var(--ink);
}

.home-modules {
  margin: 0 0 2.5rem;
}

.home-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-module {
  display: block;
  height: 100%;
  padding: 1rem 1.05rem;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-module:hover,
.home-module:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(15, 76, 92, 0.08);
  outline: none;
}

.home-module-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

.home-module-desc {
  display: block;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.4;
}

.home-journeys {
  margin: 0 0 1rem;
}

.journey-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 0;
  list-style: none;
  padding: 0;
}

.journey-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.1rem 1.15rem;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.journey-card:hover,
.journey-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(28, 25, 23, 0.06);
  outline: none;
}

.journey-kicker {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.journey-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

.journey-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.45;
}

.footer-brand strong {
  color: var(--ink);
  font-weight: 600;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.footer-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-nav a:hover {
  color: var(--accent);
}

@media (max-width: 640px) {
  .home-hero-brand {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-logo-uhk {
    right: -4px;
    bottom: -4px;
    width: 36px;
    height: 36px;
  }

  .home-search-actions {
    width: 100%;
  }

  .home-btn {
    flex: 1;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Brand hierarchy: Universal Brain = product hero; UHK = organization (footer/about) */
.google-logo-hero {
  display: block;
  width: clamp(160px, 30vw, 220px);
  height: auto;
  margin: 0 auto 1.25rem;
  border-radius: 18px;
}

.google-brand-org-link {
  color: var(--muted);
  text-decoration: none;
}

.google-brand-org-link:hover,
.google-brand-org-link:focus {
  color: var(--accent);
  text-decoration: underline;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.footer-org {
  display: inline-flex;
  align-items: center;
}

.footer-org-logo {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

/* About page — Universal Human Knowledge (organization) */
.about-page {
  padding: 2rem 0 3rem;
}

.about-inner {
  width: min(560px, 100%);
  margin: 0 auto;
  text-align: center;
}

.about-org-logo {
  display: block;
  width: clamp(140px, 28vw, 200px);
  height: auto;
  margin: 0 auto 1.5rem;
  border-radius: 18px;
}

.about-inner h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin: 0 0 1rem;
}

.about-inner p {
  margin: 0 0 1rem;
  line-height: 1.6;
  color: var(--ink);
  text-align: left;
}

.about-lede {
  font-size: 1.05rem;
}

.about-hierarchy {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 1.75rem 0;
  text-align: left;
}

.about-hierarchy-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.about-hierarchy-row img {
  flex: 0 0 auto;
  border-radius: 10px;
}

.about-hierarchy-row strong {
  display: block;
}

.about-hierarchy-row span {
  display: block;
  font-size: 0.9rem;
  color: var(--muted);
}

.about-back {
  margin-top: 1.5rem;
}

.about-back a {
  color: var(--muted);
  text-decoration: none;
}

.about-back a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Sticky navigation.

   A reader deep in a word list -- Polish W alone has 2,136 entries -- had to
   scroll back to the top to go anywhere. The header and footer navs already
   existed; only their positioning was missing.

   Deliberately NOT a fixed-height app shell with an internally scrolling
   middle: that breaks browser find-in-page, mobile URL-bar collapse, and the
   scroll restoration a reader relies on when returning from a word page.
   Sticky keeps normal document scrolling and pins the two bars.

   The footer sticks only when the page is long enough to need it, so short
   pages are not padded by a bar with nothing above it.
   --------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg, #fff);
}

.site-footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--bg, #fff);
}

/* Anchor targets and :target scroll must clear the pinned header, or a letter
   jump lands with its heading hidden underneath the bar. */
:target {
  scroll-margin-top: 5rem;
}

html {
  scroll-padding-top: 5rem;
}

/* A pinned bar on a short viewport costs more than it gives: below this the
   navs return to normal flow so the content keeps the screen. */
@media (max-height: 30rem) {
  .site-header,
  .site-footer {
    position: static;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ===========================================================================
   WORD BROWSING — visual treatment

   The existing palette is a warm parchment ground (#f7f4ef) with a Palatino
   display face: a scholarly reference look, chosen deliberately. This extends
   that language rather than replacing it, so the browsing pages read as part
   of the same book.

   Restraint here is functional, not timid. These pages show words in Cyrillic,
   Greek, Hebrew, Armenian, Georgian, Ge'ez and Arabic; a heavy or opinionated
   treatment fights scripts it was not designed for. The word is the content --
   everything else recedes.
   =========================================================================== */

/* --- the alphabet bar -------------------------------------------------- */

#wb-alphabet {
  gap: 0.25rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.wb-letter {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1;
  min-width: 2.1rem;
  text-align: center;
  color: var(--accent);
  background: transparent;
  transition: background 120ms ease, color 120ms ease;
}

.wb-letter:hover {
  background: var(--accent-soft);
}

.wb-letter.wb-current {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* A letter of the alphabet that begins no word. Present, because it belongs to
   the language; recessive, because it leads nowhere. Never hidden -- removing
   a letter from an alphabet is a statement about the language. */
.wb-empty {
  color: var(--muted);
  cursor: default;
}

/* --- the word list ----------------------------------------------------- */

#wb-list > div {
  border-bottom: 1px solid transparent;
}

#wb-list > div:hover {
  border-bottom-color: var(--line);
}

#wb-list a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
}

#wb-list a:hover {
  border-bottom-color: var(--accent);
}

/* The surface form is the content and carries the display face; the gloss is
   support and stays in the body face at a smaller size. Two typefaces doing
   two jobs, rather than one shouting. */
#wb-list strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.06rem;
}

/* Expanded comparative panel: an indent and a rule, no box. A nested card
   inside a list row implies a hierarchy that isn't there. */
.wb-siblings > div,
.wd-siblings > div {
  border-left: 2px solid var(--accent-soft);
}

/* --- the word page ----------------------------------------------------- */

.page-word h1 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.1rem;
}

/* Each sense is a band, not a card: senses are siblings of equal weight, and
   boxing them suggests they compete. */
.sense {
  border-left: 3px solid var(--accent-soft);
  padding: 0.1rem 0 0.1rem 0.9rem;
  margin: 0.9rem 0;
}

.sense:hover {
  border-left-color: var(--accent);
}

.sense h2 {
  font-family: var(--font-display);
  font-weight: 500;
}

.sense .pos {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
}

.sense details summary {
  color: var(--accent);
  list-style: none;
}

.sense details summary::-webkit-details-marker { display: none; }

.sense details summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 120ms ease;
}

.sense details[open] summary::before {
  content: "▾ ";
}

/* --- reading measure --------------------------------------------------- */

/* Long lines are hard to track. Columns already bound the word list; this
   bounds prose on the word page. */
.page-word p {
  max-width: 46rem;
}

@media (prefers-reduced-motion: reduce) {
  .wb-letter,
  .sense details summary::before {
    transition: none;
  }
}

/* --- the language index ------------------------------------------------ */

/* 658 rows that look identical are a list, not an index. The count is the one
   fact that says whether a language is worth opening, so it is present on
   every row but subordinate to the name. */
.entity-index__entry {
  display: block;
  padding: 0.18rem 0;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.entity-index__entry:hover {
  border-bottom-color: var(--line);
}

.entity-index__label {
  font-family: var(--font-display);
  color: var(--ink);
}

.entity-index__entry:hover .entity-index__label {
  color: var(--accent);
}

.entity-index__meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-left: 0.4rem;
  white-space: nowrap;
}

/* A language with nothing in it should not read the same as one with 53,886
   entries. Recessive, not hidden -- it is still a language in the catalogue. */
.entity-index__entry .entity-index__meta:only-child,
.entity-index__meta.is-empty {
  font-style: italic;
  opacity: 0.65;
}

/* Four knowledge tiers, beneath the search bar on the search skin.
   Humanity, Language, Science, Places — 2x2, three items per line.
   Text only for now: no links, because the destinations do not exist yet. */
.ub-tiers {
  margin: 0 0 2.5rem;
}

.ub-tier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.ub-tier {
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.ub-tier-name {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
}

.ub-tier-items {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.95;
  color: var(--muted);
}

@media (max-width: 40rem) {
  .ub-tier-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ub-tier-count {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

/* Console map. Status is the point of the page, so it is legible at a glance
   rather than decorative — an operator scanning for what works should not
   have to read every note. */
.console-group { margin: 1.5rem 0; }
.console-list { list-style: none; padding: 0; margin: .5rem 0; }
.console-entry {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline;
  padding: .35rem 0; border-bottom: 1px solid rgba(0,0,0,.06);
}
.console-status {
  font-size: .72rem; letter-spacing: .04em; padding: .1rem .5rem;
  border-radius: 999px; border: 1px solid currentColor;
}
.status-built .console-status { color: #0b5f4a; }
.status-environmentblocked .console-status { color: #8a5b12; }
.status-missing .console-status { color: #7a1f1f; }
.console-entry .meta { flex-basis: 100%; font-size: .82rem; opacity: .75; }