/* dial-publications.css — styles for dial-publications.js
   All classes are prefixed with "dp-" so they don't clash with your page.
   Override the variables below to match your site. */

.dial-publications {
  --dp-accent: #1d5a9e;                                         /* year labels */
  --dp-muted: color-mix(in srgb, currentColor 62%, transparent); /* venue */
  --dp-rule: color-mix(in srgb, currentColor 13%, transparent);  /* separators */
  --dp-year-width: 4.25rem;
  --dp-top: .75em;      /* space above the very first line */
  --dp-gap: .1em;          /* extra space between entries (0 = standard line spacing) */
  --dp-year-pad: .3em;  /* space above and below the divider line between years */

  container-type: inline-size;
}

/* ---------- year groups: year in a left column, entries on the right ---------- */

.dial-publications .dp-year {
  display: grid;
  grid-template-columns: var(--dp-year-width) minmax(0, 1fr);
  column-gap: 1.5rem;
  padding: var(--dp-year-pad) 0;
  border-top: 1px solid var(--dp-rule);
}
.dial-publications .dp-year:first-child { border-top: 0; padding-top: var(--dp-top); }

.dial-publications .dp-year-label {
  margin: 0;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  color: var(--dp-accent);
  font-variant-numeric: tabular-nums;
  position: sticky;
  top: 1rem;
  align-self: start;
}

@container (max-width: 34rem) {
  .dial-publications .dp-year { grid-template-columns: minmax(0, 1fr); }
  .dial-publications .dp-year-label { position: static; margin-bottom: .35rem; }
}

/* ---------- entries ---------- */

.dial-publications .dp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--dp-gap);
}
.dial-publications > .dp-list { padding-top: var(--dp-top); } /* when not grouped by year */

.dial-publications .dp-item { margin: 0; padding: 0; }

/* Everything inherits your page's font, size and line height.
   Title, authors, venue and links flow on one line: Title. Authors. Venue. [DOI] [DIAL] */

+.dial-publications .dp-title { text-decoration: underline; } /* linked titles use your page's link colour */

.dial-publications .dp-venue { color: var(--dp-muted); }
.dial-publications .dp-venue i { font-style: italic; }

/* ---------- DOI / DIAL link pills ---------- */

.dial-publications .dp-link {
  display: inline-block;
  padding: .2em .6em .16em;
  border: 1px solid color-mix(in srgb, var(--dp-accent) 45%, transparent);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: .08em;
  color: var(--dp-accent);
  transition: background-color .15s, color .15s, border-color .15s;
}
.dial-publications .dp-link:hover,
.dial-publications .dp-link:focus-visible {
  background: var(--dp-accent);
  border-color: var(--dp-accent);
  color: #fff;
}

/* ---------- status / footer ---------- */

.dial-publications .dp-status { color: var(--dp-muted); font-style: italic; }
.dial-publications .dp-more { margin: var(--dp-top) 0 0; }

/* If your site has a dark theme, give the accent a lighter value there, e.g.
   [data-theme="dark"] .dial-publications { --dp-accent: #8ab8ec; } */