/* The open positions board, both sides of it.
 *
 * The one colour decision worth naming: the kind of position is a *label*,
 * not a scale, so it is drawn as five flat tags that differ in hue and do not
 * imply an order. The heat ramp on the meeting planner is the opposite case —
 * one quantity in five steps — and using the same treatment here would say
 * that a faculty post outranks a student project. */

.jobbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.jobtabs{display:flex;gap:4px}
.jobtabs a{padding:7px 14px;border-radius:999px;color:var(--muted);
  font-size:14.5px;font-weight:600}
.jobtabs a:hover{background:var(--soft);color:var(--ink)}
.jobtabs a.on{background:var(--soft);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line)}
.jobdo{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}

.jobsearch{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 18px}
.jobsearch input[type=search]{flex:1 1 300px;min-width:0;padding:9px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);
  color:var(--ink);font:inherit;font-size:15px}
.jobsearch input[type=search]:focus{outline:2px solid var(--blue);outline-offset:1px}

.jobgrid{display:grid;grid-template-columns:210px 1fr;gap:26px;align-items:start}
.jobfacets{position:sticky;top:12px}
.facet{margin:0 0 18px}
.facet h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:0 0 6px}
.facet ul{list-style:none;margin:0;padding:0}
.facet li{margin:0 0 2px}
.facet a{display:flex;gap:8px;font-size:13.5px;color:var(--ink);
  padding:3px 6px;border-radius:7px}
.facet a:hover{background:var(--soft)}
.facet a span{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}

.joblist .job{border-bottom:1px solid var(--line);padding:0 0 18px;margin:0 0 18px}
.job h2{font-size:18px;margin:0 0 4px;letter-spacing:-.01em}
.jobwhere{margin:0 0 8px;color:var(--muted);font-size:13.5px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.jobsay{margin:0 0 8px;font-size:14.5px;color:var(--quote)}
.jobwhen{margin:0;font-size:13.5px;color:var(--muted)}
.jobtags{margin:8px 0 0;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tagwhat{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin-right:2px}

/* A deadline the reader can still act on. Orange, and it carries the number
   of days as words — a date alone makes the reader do the arithmetic, which
   is the one thing this board exists to save them. */
.soon{color:var(--orange);font-weight:700;margin-left:4px}

/* Five kinds, five hues, no order implied. */
.kindtag{display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:12px;font-weight:700;white-space:nowrap;
  background:var(--tag-bg);color:var(--tag-fg);
  box-shadow:inset 0 0 0 1px var(--tag-line)}
.kindtag.k-phd{background:var(--tag-bg);color:var(--tag-fg);
  box-shadow:inset 0 0 0 1px var(--tag-line)}
.kindtag.k-postdoc{background:var(--tag-t-bg);color:var(--tag-t-fg);
  box-shadow:inset 0 0 0 1px var(--tag-t-line)}
.kindtag.k-assistant{background:var(--tag-f-bg);color:var(--tag-f-fg);
  box-shadow:inset 0 0 0 1px var(--tag-f-line)}
.kindtag.k-student{background:var(--tag-r-bg);color:var(--tag-r-fg);
  box-shadow:inset 0 0 0 1px var(--tag-r-line)}
.kindtag.k-faculty{background:var(--note-bg);color:var(--note-fg);
  box-shadow:inset 0 0 0 1px var(--note-line)}

table.jobfacts{width:100%;border-collapse:collapse;font-size:14.5px}
table.jobfacts th{text-align:left;font-weight:600;color:var(--muted);
  padding:7px 14px 7px 0;white-space:nowrap;vertical-align:top;
  font-size:13.5px}
table.jobfacts td{padding:7px 0;vertical-align:top}
.jobbody{font-size:15px;color:var(--quote)}
.jobmine{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Where a candidate would go. Set apart from the rest of the card because it
   is the question the reader opened the page with. */
.candwhere{margin:0 0 8px;font-size:14.5px;background:var(--soft);
  border-left:3px solid var(--blue);padding:7px 12px;border-radius:0 8px 8px 0}

/* The two forms. One column, wide fields, help under each — a fourteen-field
   form in two columns is a form people fill in the wrong order. */
.jobform{max-width:620px}
.jobform .frow{margin:0 0 18px}
.jobform label{display:block;font-weight:600;font-size:14.5px;margin:0 0 4px}
.jobform input[type=text],.jobform input[type=url],.jobform input[type=date],
.jobform select,.jobform textarea{width:100%;padding:9px 11px;
  border:1px solid var(--line);border-radius:9px;background:var(--bg);
  color:var(--ink);font:inherit;font-size:15px}
.jobform textarea{resize:vertical}
.jobform .mhint{display:block;margin:4px 0 0}
.jobform .err{display:block;margin:4px 0 0;color:var(--err);font-size:13.5px}
.jobform .frow.bad input,.jobform .frow.bad textarea,
.jobform .frow.bad select{border-color:var(--err)}
/* The ticked vocabularies are long — eighty-five techniques and rather more
   keywords — and Django renders a CheckboxSelectMultiple as nested <div>s,
   not a <ul>. Styling the list rather than the widget's own element is why
   the first version of this page was seventeen thousand pixels tall: every
   term was a full-width row and the Post button was fifty screens down.
   Held to a scrolling box, and laid out in columns inside it. */
.jobform .frow > div[id^="id_techniques"],
.jobform .frow > div[id^="id_research_keywords"],
.jobform .frow > div[id^="id_interests"],
.jobform .frow > div[id^="id_institutions"]{
  max-height:260px;overflow-y:auto;border:1px solid var(--line);
  border-radius:9px;background:var(--soft);padding:8px 10px;
  columns:2 190px;column-gap:18px}
.jobform .frow > div[id^="id_"] > div{break-inside:avoid;padding:1px 0}
.jobform .frow > div[id^="id_"] label{display:block;font-weight:400;
  font-size:14px;margin:0}
/* The one that is a single tick, not a list. */
.jobform .frow > div[id^="id_wants"]{columns:1;max-height:none;
  border:1px solid var(--line);border-radius:9px;background:var(--soft);
  padding:8px 10px}

@media (max-width:820px){
  /* The list first, the filters under it. Stacked the other way round — which
     is what a two-column grid does by default — a phone opens the board on
     five columns of filters and the first job is a screen and a half down.
     Somebody arrives here to see what is open, not to narrow it. */
  .jobgrid{grid-template-columns:1fr;display:flex;flex-direction:column}
  .joblist{order:1}
  .jobfacets{order:2;position:static;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
    border-top:1px solid var(--line);padding-top:16px}
  .facet ul{max-height:150px;overflow-y:auto}
}


/* Find the laboratory — the first box in the "where" part of the form.
   Set apart from the fields below it, because it is a shortcut for filling
   three of them rather than a fourth thing to answer. */
.jobform .labfind{position:relative;background:var(--soft);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.jobform .labfind input[type=search]{width:100%;padding:10px 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--bg);
  color:var(--ink);font:inherit;font-size:15px}
.jobform .labfind input[type=search]:focus{outline:2px solid var(--blue);
  outline-offset:1px}
.jobform .labfind.done input[type=search]{border-color:var(--green)}
#labfind-list{position:absolute;left:14px;right:14px;z-index:20;
  list-style:none;margin:4px 0 0;padding:4px;max-height:320px;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 26px var(--shadow)}
#labfind-list li{padding:8px 10px;border-radius:7px;cursor:pointer;
  display:flex;flex-direction:column;gap:1px}
#labfind-list li strong{font-weight:600;font-size:14.5px}
#labfind-list li span{color:var(--muted);font-size:12.5px}
#labfind-list li.on,#labfind-list li:hover{background:var(--soft)}
#labfind-list li.none{cursor:default;color:var(--muted);font-size:13.5px}

/* Where a lab sits — /lab/<slug>/where/ */
table.places { border-collapse: collapse; width: 100%; max-width: 640px; }
table.places th { text-align: left; font-size: 12.5px; font-weight: 600;
  color: var(--muted, #5b6470); padding: 4px 8px; }
table.places td { padding: 8px; border-top: 1px solid var(--line, #e3e6ea);
  vertical-align: top; }
table.places td:first-child, table.places td:last-child,
table.places th:first-child, table.places th:last-child { width: 64px; text-align: center; }
table.places input { width: 18px; height: 18px; }
ul.plain { margin: 0 0 8px; padding-left: 18px; }

/* Found on other job boards — the relayed adverts.
   ------------------------------------------------
   Søren, 24 September 2026, on what should happen to what the nightly sweep
   finds: *"do the second option"* — their own section, never mixed in with
   what members posted. So the section has to read as a different kind of
   thing at a glance, not merely be under a heading: it is set on the soft
   background, its cards have no bottom rule (they are not part of the list
   above), and every title carries the outward arrow, because clicking one
   leaves NAD Network for whoever is actually hiring. */
.elsewhere{margin:26px 0 0;padding:18px 18px 4px;background:var(--soft);
  border:1px solid var(--line);border-radius:14px}
.elsewhere > h2{font-size:17px;margin:0 0 4px;letter-spacing:-.01em}
.elsewhere > .mhint{margin:0 0 14px}
.joblist .elsewhere .job{border-bottom:0;padding:0 0 14px;margin:0 0 14px}
.joblist .elsewhere .job + .job{border-top:1px solid var(--line);
  padding-top:14px}
.elsewhere .job h3{font-size:16px;margin:0 0 4px;letter-spacing:-.01em}
.elsewhere .job h3 a::after{content:"↗";font-size:12px;margin-left:4px;
  color:var(--muted);vertical-align:super}
.elsewhere .via{color:var(--muted);font-size:13px}

/* …and the ones outside Denmark, inside that same section but set apart.
   Søren: *"We could also have a category of international Neuroscience
   jobs."* Its own list rather than mixed in — a position in Aalborg and a
   position in Heidelberg are different kinds of news, and interleaving them
   would make the Danish ones harder to find, which is the opposite of what
   this board is for. The country is set in bold because with these it is the
   first question, not a detail. */
.elsewhere .abroad{margin-top:16px;padding-top:16px;
  border-top:2px solid var(--line)}
.elsewhere .abroad > h3{font-size:15px;margin:0 0 3px;letter-spacing:-.01em}
.elsewhere .abroad > .mhint{margin:0 0 12px}
.elsewhere .abroad .job h4{font-size:15.5px;margin:0 0 4px;
  letter-spacing:-.01em;font-weight:600}
.elsewhere .abroad .job h4 a::after{content:"↗";font-size:12px;
  margin-left:4px;color:var(--muted);vertical-align:super}

/* No facets, no column for them. Søren, 25 September 2026, looking at a board
   that carried only relayed adverts: *"Why is it to the right?"* Because the
   grid reserved 210px for a sidebar whether or not there was one in it, and
   the facets are counted over NAD's own advertisements — so a board with none
   of those drew every relayed advert a column's width to the right of its own
   heading, beside nothing at all. An empty sidebar is not a sidebar. */
.jobgrid.nofacets{grid-template-columns:1fr}

/* ======================================================================
   The board as one sortable list — chips, Cards/Table, column narrowing.
   Søren, 25 September 2026: *"I would like it to look more like the
   activities page with regard to sorting and filtering. Also the card vs
   list."* Written against this application's own tokens rather than copied
   off the website, so it reads as the same interaction in the same hand,
   not as a transplanted page.
   ====================================================================== */
.board{margin-top:6px}

/* The chips. Two rows: where it came from, then what the post is. Two rows
   rather than one because they answer different questions and a single run
   of eleven chips reads as a list of eleven equal things. */
.jchips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 8px;
  align-items:flex-start}
.jchips.kinds{margin-bottom:14px}
/* `.jchip` and not `.chip`: the application already has a `.chip`, on the
   collaboration and keyword rows, with its own padding and a remove button
   inside it. Two components with one name is how a stylesheet starts lying
   about what it does. */
.jchip{border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font:inherit;font-size:13.5px;padding:5px 12px;border-radius:999px;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  line-height:1.45;white-space:nowrap;
  transition:background .12s,border-color .12s}
.jchip:hover{border-color:var(--muted)}
.jchip .n{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.jchip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.jchip.on .n{color:var(--bg);opacity:.72}
/* A chip that would empty the page is dimmed, never removed: its absence
   would read as "there are none of those, ever". */
.jchip.none{opacity:.42}
.jchip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* The count line and the view switch, on one rule. */
.actbar{display:flex;align-items:center;justify-content:space-between;
  gap:16px;border-top:1px solid var(--line);padding-top:10px;margin:0 0 14px}
.actbar .count{margin:0;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.viewswitch{display:inline-flex;border:1px solid var(--line);
  border-radius:9px;overflow:hidden}
.viewswitch button{font:inherit;font-size:13.5px;padding:5px 13px;border:0;
  background:var(--bg);color:var(--ink);cursor:pointer}
.viewswitch button + button{border-left:1px solid var(--line)}
.viewswitch button.on{background:var(--green,#0f9d76);color:#fff}
.viewswitch button:focus-visible{outline:2px solid var(--blue);
  outline-offset:-2px}

/* Cards. The relayed ones keep the outward arrow they had, and carry a
   quiet tag saying which side of the board they are from — the sections
   used to say that, and without them each row has to say it itself. */
.joblist .job[hidden]{display:none}
.job h2 a.out::after,.datatable a.out::after{content:"↗";font-size:11px;
  margin-left:4px;color:var(--muted);vertical-align:super}
.origintag{display:inline-block;padding:2px 8px;border-radius:999px;
  font-size:11.5px;background:var(--soft);color:var(--muted);
  border:1px solid var(--line)}
.job .via{color:var(--muted);font-size:12.5px}
.job .nodate{color:var(--muted)}
.jobtags .tag{display:inline-block;margin:0 5px 4px 0;padding:1px 8px;
  border-radius:999px;background:var(--soft);border:1px solid var(--line);
  font-size:12px;color:var(--muted)}

/* The table. Small-caps headings, a sort arrow that only appears when the
   column is the one being sorted by, and a `+` that opens the tick list. */
.acttable{overflow-x:auto}
table.datatable{border-collapse:collapse;width:100%;font-size:14.5px}
/* `position:relative` on the cell, not on the `.headbar` inside it: the
   narrow panel is a sibling of the head bar, so anchoring it to the bar
   would leave it anchored to nothing at all — which it was, and it opened
   against the bottom-left of the window instead of under its own column. */
table.datatable th{text-align:left;vertical-align:bottom;position:relative;
  border-bottom:1px solid var(--line);padding:0 10px 7px 0}
table.datatable td{padding:9px 10px 9px 0;vertical-align:top;
  border-bottom:1px solid var(--line)}
table.datatable tr[hidden]{display:none}
table.datatable td a{font-weight:500}
.headbar{display:inline-flex;align-items:center;gap:3px;position:relative}
.sorter{font:inherit;font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);background:none;border:0;
  padding:4px 2px;cursor:pointer;display:inline-flex;align-items:center;
  gap:4px;white-space:nowrap}
.sorter:hover{color:var(--ink)}
.sorter .arrow{width:8px;display:inline-block}
.sorter.up .arrow::before{content:"▲";font-size:8px}
.sorter.down .arrow::before{content:"▼";font-size:8px}
.adder{font:inherit;background:none;border:1px solid transparent;
  color:var(--muted);cursor:pointer;border-radius:6px;padding:1px 5px;
  line-height:1.4;display:inline-flex;align-items:center;gap:3px}
.adder:hover{border-color:var(--line);color:var(--ink)}
.adder.on{border-color:var(--green,#0f9d76);color:var(--green,#0f9d76)}
.adder .on-n{font-size:10.5px;font-variant-numeric:tabular-nums}
.sorter:focus-visible,.adder:focus-visible{outline:2px solid var(--blue);
  outline-offset:1px}

.narrowpanel{position:absolute;top:100%;left:0;z-index:30;min-width:210px;
  max-height:300px;overflow-y:auto;background:var(--card,var(--bg));
  border:1px solid var(--line);border-radius:10px;padding:7px;
  box-shadow:0 10px 26px var(--shadow,rgba(0,0,0,.2))}
.narrowpanel label{display:flex;align-items:center;gap:8px;padding:4px 6px;
  border-radius:7px;font-size:13.5px;font-weight:400;text-transform:none;
  letter-spacing:0;color:var(--ink);cursor:pointer}
.narrowpanel label:hover{background:var(--soft)}
.narrowpanel label span:first-of-type{flex:1}
.narrowpanel .n{color:var(--muted);font-size:12px;
  font-variant-numeric:tabular-nums}
.narrowpanel .nonein{margin:4px 6px;color:var(--muted);font-size:13px}

.board .none{margin:18px 0;color:var(--muted)}

@media (max-width:820px){
  /* The table is the thing that cannot shrink, so on a phone the switch
     stays but the table scrolls sideways rather than squeezing six columns
     into 390px and making every one of them unreadable. */
  .actbar{flex-wrap:wrap;gap:8px}
  .jchips{gap:6px}
  .jchip{font-size:13px;padding:4px 10px;white-space:normal}
  table.datatable{min-width:700px}
}

/* The archive. Søren: *"We also need an archive for positions that are past
   the application date."* A `<details>`, shut, and outside everything above
   it — the chips count what is still open, and a count that included closed
   adverts would answer a question nobody asked. Its rows are quieter than
   the live ones on purpose: they are readable, not actionable. */
.archive{margin:30px 0 0;border-top:1px solid var(--line);padding-top:14px}
.archive > summary{cursor:pointer;display:flex;align-items:center;gap:9px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;list-style:none;
  padding:4px 0}
.archive > summary::-webkit-details-marker{display:none}
.archive > summary::before{content:"▸";color:var(--muted);font-size:12px}
.archive[open] > summary::before{content:"▾"}
.archive > summary .n{font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;border:1px solid var(--line);
  border-radius:999px;padding:1px 8px;font-weight:400}
/* How far back the archive goes, on the summary line rather than in a
   paragraph under it — see the comment in positions.html. Lighter than the
   count beside it and not in a pill, because it is a caption on the heading
   and not a number to read. */
.archive > summary .since{font-size:12px;color:var(--muted);font-weight:400}
.archive > .mhint{margin:2px 0 14px;max-width:70ch}
.joblist.gone .job{opacity:.72;padding-bottom:12px;margin-bottom:12px}
.joblist.gone .job h3{font-size:15.5px;margin:0 0 4px;letter-spacing:-.01em}
.joblist.gone .job h3 a{font-weight:600}