/* TEEL publications viewer styles. Hand-edited; not generated. */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #1a1a2e;
  --muted: #5c6370;
  --border: #d8dee6;
  --accent: #2d5a87;
  --tag-year-bg: #e8f0f8;
  --tag-year-fg: #1f4f78;
  --tag-venue-bg: #f0f2f5;
  --tag-venue-fg: #3d4654;
  --tag-warn-bg: #fef3c7;
  --tag-warn-fg: #92400e;
}

* { box-sizing: border-box; }

/* The page is embedded in a Google Sites iframe, which is a fixed pixel
   height that nothing here can change: Sites gives no way to run a resize
   listener in the parent, so the child cannot report its height.

   So the document never scrolls. It fills the frame exactly, the toolbar is
   pinned, and the result list is the only thing that scrolls. That removes
   the iframe's own scrollbar entirely -- whatever height the embed is set
   to, the layout adapts to it -- and leaves the outer page scrollbar as the
   only other one. */
html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Fira Sans", system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.toolbar, main, footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* The page has no heading: it is embedded in an iframe on a page that
   already has one, so the toolbar is the first thing visible. */
.toolbar {
  flex: 0 0 auto;
  background: var(--bg);
  padding-top: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.controls {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .controls {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    align-items: end;
  }
}

label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

input, select {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  background: var(--surface);
  color: var(--text);
}

.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.filter-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.filter-chip:hover {
  border-color: var(--accent);
}

.filter-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 0.5rem;
  color: var(--muted);
  font-size: 0.92rem;
}

main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Stop the wheel from chaining into the Google Sites page once the list
     hits its end -- that hand-off is what makes nested scrollbars fight. */
  overscroll-behavior: contain;
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.pub-list {
  display: grid;
  gap: 0.85rem;
}

.pub-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pub-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}

.tag {
  display: inline-block;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.tag-year {
  background: var(--tag-year-bg);
  color: var(--tag-year-fg);
}

.tag-venue {
  background: var(--tag-venue-bg);
  color: var(--tag-venue-fg);
  white-space: normal;
}

.tag-warn {
  background: var(--tag-warn-bg);
  color: var(--tag-warn-fg);
}

.tag-category {
  color: #fff;
}

.pub-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  line-height: 1.35;
}

.pub-authors {
  margin: 0 0 0.35rem;
  font-weight: 500;
  color: #2b3340;
}

.pub-venue {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.pub-links {
  margin-top: 0.55rem;
  font-size: 0.88rem;
}

.pub-links a {
  color: var(--accent);
  margin-right: 0.75rem;
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 2.5rem 1rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
}

footer {
  flex: 0 0 auto;
  padding: 0.85rem 1.25rem;
  color: var(--muted);
  font-size: 0.88rem;
  border-top: 1px solid var(--border);
}