/* NeurIPS 2026 workshops.
   Styled after an academic web page of the mid nineties: white ground, serif body text,
   beveled form widgets, blue underlined links, monospace for identifiers. No rounded
   corners, no shadows, no gradients, no webfonts, no dark mode -- none of which existed.

   This is the lab-page branch of the old web rather than the GeoCities branch. A
   directory people use to find submission deadlines is better served by density and
   plain type than by animated rules and a visitor counter. The virtues being borrowed
   are real ones: everything on screen is information, nothing decorative pretends to be
   functional, and the whole page is a few kilobytes of CSS over system fonts. */

/* ---------- ground ---------- */
:root {
  --rule: #808080;
  --face: #c0c0c0;        /* the classic widget grey */
  --link: #0000ee;
  --seen: #551a8b;
  --ink: #000;
  --quiet: #555;
  --shade: #f0f0f0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.45;
}

.field { display: none; }        /* the ambient gradient panel has no business here */

.wrap {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 16px;
}

a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--seen); }
a:hover { background: #ffffcc; }

code, .k, .chip, .tt-n, .m-terms, .pct, .dlg-k {
  font-family: "Courier New", Courier, monospace;
}

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

/* ---------- masthead ---------- */
.masthead {
  border-bottom: 3px double var(--rule);
  padding: 18px 0 12px;
  margin-bottom: 4px;
}
.topbar { display: block; }

.eyebrow {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--quiet);
  margin-bottom: 2px;
}
.pulse { display: none; }

.masthead h1 {
  font-size: 30px;
  font-weight: bold;
  margin: 0 0 6px;
  letter-spacing: 0;
}
.lede { margin: 0 0 12px; max-width: 62ch; }

/* the counts, as a 90s definition list rather than dashboard tiles */
.readout {
  display: block;
  margin: 10px 0 0;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  background: var(--shade);
  font-size: 13px;
}
.readout > div { display: inline; margin-right: 18px; white-space: nowrap; }
.readout dt { display: inline; font-weight: bold; }
.readout dt::after { content: ":"; }
.readout dd {
  display: inline;
  margin: 0 0 0 4px;
  font-family: "Courier New", Courier, monospace;
}

/* ---------- section tabs ---------- */
.tabnav {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 14px;
  padding-top: 6px;
}
.tab {
  font-family: inherit;
  font-size: 15px;
  padding: 4px 14px;
  margin-right: 4px;
  border: 2px outset var(--face);
  background: var(--face);
  color: var(--ink);
  cursor: pointer;
}
.tab.on {
  border-style: inset;
  background: #fff;
  font-weight: bold;
}

/* ---------- theme tabs ---------- */
.theme-tabs { margin: 0 0 10px; }
.theme-tab {
  font-family: inherit;
  font-size: 13px;
  padding: 2px 8px;
  margin: 0 3px 4px 0;
  border: 2px outset var(--face);
  background: var(--face);
  cursor: pointer;
}
.theme-tab.on { border-style: inset; background: #fff; font-weight: bold; }
.tt-n { font-size: 11px; color: var(--quiet); }
.theme-tab.on .tt-n { color: var(--ink); }

/* ---------- controls ---------- */
.controls {
  border: 1px solid var(--rule);
  background: var(--shade);
  padding: 8px;
  margin-bottom: 8px;
}
.controls input[type="search"],
.controls select {
  font-family: inherit;
  font-size: 14px;
  padding: 2px 4px;
  border: 2px inset var(--face);
  background: #fff;
  margin: 0 6px 4px 0;
}
.controls input[type="search"] { width: 250px; }

button,
.btn-ghost, .btn-primary {
  font-family: inherit;
  font-size: 14px;
  padding: 3px 10px;
  border: 2px outset var(--face);
  background: var(--face);
  color: var(--ink);
  cursor: pointer;
}
button:active,
.btn-ghost:active, .btn-primary:active { border-style: inset; }
.btn-primary { font-weight: bold; }
.btn-ghost.small, .small { font-size: 12px; padding: 2px 7px; }
.danger { color: #900; }

.dir-count {
  font-size: 13px;
  color: var(--quiet);
  margin: 6px 0;
  font-style: italic;
}

.shortlist-bar, .matches-bar {
  border: 1px solid var(--rule);
  background: #ffffe0;
  padding: 6px 8px;
  margin-bottom: 10px;
  font-size: 13px;
}
.shortlist-actions, .matches-actions { display: inline; margin-left: 8px; }

/* ---------- workshop cards ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.card {
  border: 1px solid var(--rule);
  border-top: 4px solid var(--rule);
  background: #fff;
  padding: 8px 10px 10px;
  position: relative;
  cursor: pointer;
}
.card:hover { background: #ffffcc; }
.card:focus { outline: 2px solid var(--link); }

.card .k {
  font-size: 11px;
  color: var(--quiet);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.card h3 {
  font-size: 16px;
  margin: 2px 0 3px;
  font-weight: bold;
  color: var(--link);
  text-decoration: underline;
}
.card .sub { font-size: 13px; font-style: italic; color: var(--quiet); margin: 0 0 5px; }
.card .sum { font-size: 13.5px; margin: 0 0 8px; }

.meta { font-size: 0; }        /* kill inline-block gaps, chips set their own size */
.chip {
  display: inline-block;
  font-size: 11px;
  padding: 1px 5px;
  margin: 0 4px 3px 0;
  border: 1px solid var(--rule);
  background: var(--shade);
  white-space: nowrap;
}
.chip.date { background: #ffffcc; }
.chip.date.soon { background: #ffd9d9; font-weight: bold; }
.chip.date.past { background: var(--shade); color: var(--quiet); text-decoration: line-through; }
.chip.tbd { color: var(--quiet); font-style: italic; }

.pin {
  position: absolute; top: 6px; right: 6px;
  border: none; background: none; font-size: 15px; padding: 0; cursor: pointer;
}

/* ---------- matcher ---------- */
.instrument-head { margin-bottom: 10px; }
.instrument-head h2 { font-size: 22px; margin: 4px 0 6px; }
.instrument-head p { max-width: 66ch; margin: 0 0 10px; font-size: 14.5px; }
.tag {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  border: 1px solid var(--rule); background: var(--shade); padding: 1px 5px;
}

.console { border: 1px solid var(--rule); background: var(--shade); padding: 8px; }
.console textarea {
  width: 100%;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  padding: 5px;
  border: 2px inset var(--face);
  background: #fff;
}
.console-bar { margin-top: 6px; }
.hint { font-size: 12px; color: var(--quiet); margin-left: 10px; font-style: italic; }

/* Standing note, not the dynamic hint above it: app.js replaces #match-hint with result
   counts as soon as a ranking runs, which is the exact moment someone has just pasted an
   unpublished abstract and might want the assurance still on screen. */
.privacy {
  border: 1px solid var(--rule);
  background: #ffffe0;
  padding: 6px 9px;
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.matches { list-style: none; margin: 12px 0 24px; padding: 0; counter-reset: m; }
.match {
  border-bottom: 1px solid #ccc;
  padding: 8px 0 8px 34px;
  position: relative;
}
.match:hover { background: #ffffcc; }
.rank {
  position: absolute; left: 0; top: 8px;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px; font-weight: bold; color: var(--quiet);
}
.m-title { font-size: 15.5px; font-weight: bold; color: var(--link); text-decoration: underline; }
.m-group, .m-meta { font-size: 12px; color: var(--quiet); }
.m-terms { font-size: 12px; color: #060; }
.m-quote {
  font-size: 13px;
  border-left: 3px solid var(--rule);
  padding-left: 8px;
  margin: 4px 0 0;
  color: #333;
}
.m-quote mark { background: #ffff00; color: #000; }
.m-body { margin-top: 3px; }

/* score as a text percentage plus a plain bar, the way a CGI script would have done it */
.pct { font-size: 12px; font-weight: bold; }
.gauge {
  display: inline-block; width: 90px; height: 10px;
  border: 1px inset var(--face); background: #fff;
  vertical-align: middle; margin-left: 6px;
}
.gauge .fill { display: block; height: 100%; background: #000080; }

.no-match { padding: 10px; font-style: italic; color: var(--quiet); }
.simlist { font-size: 12.5px; }
.simlink { margin-right: 8px; }
.simpct { color: var(--quiet); font-family: "Courier New", Courier, monospace; }

/* ---------- detail dialog ---------- */
dialog#detail {
  max-width: 780px; width: 92%;
  border: 2px outset var(--face);
  background: #fff;
  padding: 0;
}
dialog#detail::backdrop { background: rgba(0, 0, 0, .45); }
#dlg-body { padding: 14px 18px 20px; }
.dlg-close {
  float: right; margin: 6px 6px 0 0;
  border: 2px outset var(--face); background: var(--face);
  font-family: "Courier New", Courier, monospace; cursor: pointer;
}
.dlg-sub { font-style: italic; color: var(--quiet); }
.dlg-block { margin: 12px 0; }
.dlg-grid { margin: 8px 0; }
.dlg-k {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--quiet); display: block;
}
.dlg-note { font-size: 12.5px; color: var(--quiet); font-style: italic; }
.dlg-actions { margin: 10px 0; padding-top: 8px; border-top: 1px solid var(--rule); }
.facts { margin: 8px 0; }
.fact { margin-bottom: 3px; font-size: 13.5px; }
.fk { font-weight: bold; }
.fv { font-family: "Courier New", Courier, monospace; font-size: 12.5px; }
.people { font-size: 13px; }
.topic-tags { margin: 6px 0; }
.track { font-size: 12.5px; margin-bottom: 3px; }
.cfp {
  border: 1px solid var(--rule);
  background: #fcfcf5;
  padding: 10px;
  margin-top: 8px;
}
.cfp-body {
  white-space: pre-wrap;
  font-family: "Courier New", Courier, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  max-height: 460px;
  overflow-y: auto;
}
.cfp-body.tbd { font-style: italic; color: var(--quiet); font-family: inherit; }
.lbl { font-weight: bold; font-size: 13px; }
.val { font-family: "Courier New", Courier, monospace; font-size: 12.5px; }
.t { font-weight: bold; }
.primary { font-weight: bold; }
.dates { font-size: 13px; }
.dlg-link { word-break: break-all; }
.dlg-ics { margin-left: 6px; }

/* ---------- footer ---------- */
.foot {
  border-top: 3px double var(--rule);
  margin-top: 20px;
  padding: 12px 0 30px;
  font-size: 13px;
  color: var(--quiet);
}
.foot p { max-width: 78ch; }
.built { font-size: 12px; }

/* ---------- small screens ---------- */
@media (max-width: 620px) {
  body { font-size: 15px; }
  .masthead h1 { font-size: 23px; }
  .grid { grid-template-columns: 1fr; }
  .controls input[type="search"] { width: 100%; }
  .readout > div { display: block; margin: 2px 0; }
}