/* ---------------------------------------------------------------------------
   Operations Academia — shared UI for the parts that are new in v2:
   the account control, modals, and the site's own forms.

   Follows main.css: Source Sans Pro, #3B7DBC, links #0645ad, body #222.
   Form controls are set at 15px rather than the site's 16pt body size, which is
   far too large for a 19-field form.
   --------------------------------------------------------------------------- */

/* main.css's reset declares `section { display: block }` (and the same for
   article/aside/header/footer/nav/figure/details/menu). An author rule beats
   the user-agent's `[hidden] { display: none }`, so a hidden <section> stays
   VISIBLE — which briefly showed the maintainer's feedback inbox to everyone.
   Every panel in v2 is toggled with the `hidden` attribute, so restore it once,
   here, rather than remembering per element. */
[hidden] { display: none !important; }

/* …but `!important` also outranks a deliberate override, and oa-list.css has
   one: it re-shows every collapsed job card for print. Without this exception
   printing /v2/jobs.html gives a list of institution names and nothing else. */
@media print {
  .oa-card-body[hidden] { display: block !important; }
}

/* -------------------------------------------------------------- account chip */

/* #header is position:relative, height 3em, with #nav absolutely placed at
   left:8em — so the account control is pinned to the opposite corner rather
   than floated, which would drop it out of the fixed 2.5em header bar. */
#oa-account {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 2.5em;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.oa-acct-btn,
.oa-acct-chip {
  padding: 4px 12px;
  border: 1px solid #3b7dbc;
  border-radius: 3px;
  background: #fff;
  font: inherit;
  font-weight: 600;
  color: #3b7dbc;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
}

.oa-acct-btn:hover,
.oa-acct-chip:hover { background: #3b7dbc; color: #fff; }

.oa-acct-off {
  /* the state shown when sign-in is not configured or unreachable: same box as
     the real control, so the header row never changes height under it */
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  color: #999;
  cursor: default;
}

.oa-acct-wrap { position: relative; }

.oa-acct-menu {
  position: absolute;
  z-index: 10001;
  top: calc(100% + 6px);
  right: 0;
  min-width: 262px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
  text-align: left;
}

.oa-acct-menu[hidden] { display: none; }

/* the identity block at the top of the menu: avatar, name, e-mail */
.oa-acct-as {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-bottom: 1px solid #eee;
  font-size: 13px;
  line-height: 1.4;
  color: #777;
}

.oa-acct-who { min-width: 0; }

.oa-acct-as strong {
  display: block;
  color: #222;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.oa-acct-mail {
  display: block;
  margin-top: 1px;
  color: #8a8a8a;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.oa-acct-group { padding: 6px 0; }

.oa-acct-menu a,
.oa-acct-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 15px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: #222;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* the glyphs are set at a fixed width so every label starts on one line —
   emoji advance widths differ enough to look ragged otherwise */
.oa-mi {
  flex: none;
  width: 18px;
  text-align: center;
  font-size: 14px;
  opacity: 0.85;
}

.oa-acct-menu a:hover,
.oa-acct-menu button:hover { background: #f2f6fb; text-decoration: none; }

/* sign out is the one destructive item, so it sits below a rule of its own */
.oa-acct-out {
  border-top: 1px solid #eee !important;
  color: #666 !important;
  font-size: 13px !important;
}

.oa-acct-out:hover { background: #fdf3f3 !important; color: #b03636 !important; }

/* ------------------------------------------------------------ profile card */

.oa-profile-card { max-width: 460px; }

.oa-profile-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.oa-profile-head h3 { margin: 2px 0 4px; }
.oa-profile-head .oa-modal-lede { margin: 0; }

.oa-prow { display: flex; gap: 12px; }
.oa-prow > label { flex: 1 1 0; min-width: 0; }

/* "(optional)" rides on the label's own line; the note under the e-mail is a
   line of its own */
.oa-modal-card label .oa-opt {
  display: inline;
  margin-left: 0.35em;
  font-size: 12px;
  font-weight: 400;
  color: #999;
  /* oa-list.css uses `.oa-opt` for a row of the jobs filter dropdown (padded,
     clickable, blue on hover). jobs.html loads both sheets and the profile card
     opens over it, so the three properties this rule does not set have to be
     put back or "(optional)" is padded, cursored and highlights blue. */
  padding: 0;
  background: none;
  cursor: inherit;
}

.oa-modal-card label .oa-opt.oa-fine {
  display: block;
  margin: 4px 0 0;
}

#oa-profile-form input[disabled] { background: #f6f6f6; color: #777; }

/* A value we were GIVEN rather than one that is typed — an ORCID iD that came
   from an ORCID sign-in. Shaped like a label + field so it sits in the column
   with the real fields, but it is text, not an input. */
.oa-field-static { margin: 0 0 14px; }

/* the note under it is a line of its own, exactly as under a real field —
   .oa-opt.oa-fine's block rule is scoped to labels, and this is not one */
.oa-field-static .oa-opt.oa-fine { display: block; margin: 6px 0 0; }

.oa-flabel {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #313a45;
}

.oa-orcid-chip {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #cfe0b6;
  border-radius: 3px;
  background: #f4f9ec;
  font-size: 14px;
  color: #3c5220;
}

.oa-verified {
  margin-left: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1c6b45;
}

/* ------------------------------------------------- other accounts / merging */

.oa-acct-other {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #ececec;
}

.oa-acct-other h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: #313a45;
}

.oa-acct-other .oa-opt.oa-fine { display: block; margin: 4px 0 0; }
.oa-acct-signedin { margin: 0 0 12px; }
.oa-acct-linkrow { margin: 0 0 12px; }

.oa-acct-mergelede {
  margin: 14px 0 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #555;
}

.oa-mergebtn {
  padding: 7px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #313a45;
  cursor: pointer;
}

.oa-mergebtn:hover { background: #f5f7fa; border-color: #b9c6d4; }

.oa-merge-card { max-width: 520px; }

.oa-merge-card h4 {
  margin: 20px 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: #313a45;
}

/* The two accounts, drawn the same way so the direction of the move is the
   only difference the reader has to take in. */
.oa-merge-from,
.oa-merge-into {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 4px;
  padding: 12px 14px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background: #fafbfc;
}

.oa-merge-into { margin-top: 8px; border-color: #cfe0b6; background: #f7fbf1; }

.oa-merge-who { min-width: 0; }
.oa-merge-who strong { display: block; font-size: 14.5px; color: #313a45; }

.oa-merge-holds {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #666;
}

.oa-merge-note { margin: 0 0 12px !important; }

.oa-merge-log {
  margin: 14px 0 0;
  padding: 0 0 0 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #444;
  list-style: disc;
}

.oa-merge-log[hidden] { display: none; }

/* -------------------------------------------------------------------- modal */

.oa-modal {
  position: fixed;
  z-index: 20000;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;   /* long-hand fallback for `inset` */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 16px;
  overflow-y: auto;
  background: rgba(20, 30, 45, 0.55);
}

.oa-modal[hidden] { display: none; }

.oa-modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 26px 28px 24px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #222;
}

.oa-modal-card h3 { margin: 0 0 8px; font-size: 20px; color: #313a45; }

.oa-modal-lede { margin: 0 0 18px; font-size: 14px; color: #666; }

.oa-modal-x {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 2px 8px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: #999;
  cursor: pointer;
}

.oa-modal-x:hover { color: #222; }

.oa-auth-providers { display: flex; flex-direction: column; gap: 8px; }

.oa-auth-provider {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  background: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.oa-auth-provider:hover { background: #f5f7fa; }

.oa-or {
  margin: 14px 0;
  font-size: 13px;
  color: #999;
  text-align: center;
}

.oa-auth-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 16px;
}

.oa-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: #0645ad;
  text-decoration: underline;
  cursor: pointer;
}

.oa-auth-msg { margin: 12px 0 0; font-size: 14px; min-height: 1px; }
.oa-auth-msg.is-err { color: #b3261e; }
.oa-auth-msg.is-ok { color: #1c6b45; }

/* --------------------------------------------------------------------- forms */

.oa-form {
  max-width: 760px;
  margin: 0 auto;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #222;
}

.oa-form fieldset { margin: 0 0 26px; padding: 0; border: 0; }

.oa-form legend {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e6e6e6;
  font-size: 17px;
  font-weight: 600;
  color: #313a45;
}

.oa-field { margin: 0 0 18px; }

.oa-field > label,
.oa-field > .oa-label-text {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 600;
  color: #313a45;
}

.oa-req { color: #b3261e; font-weight: 400; }

.oa-hint {
  margin: 2px 0 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #777;
}

.oa-form input[type='text'],
.oa-form input[type='email'],
.oa-form input[type='url'],
.oa-form input[type='date'],
.oa-form input[type='number'],
.oa-form select,
.oa-form textarea,
.oa-modal-card input,
/* main.css:1571 styles `form input[type=password]` (borderless, grey, 0.5em
   radius) more specifically than `.oa-modal-card input`, so the sign-in modal's
   password field rendered as a grey pill under a white bordered e-mail box.
   Naming the type here outranks it. */
.oa-modal-card input[type='password'],
.oa-modal-card select,
.oa-modal-card textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: #222;
}

/* main.css:1568 applies `-webkit-appearance: none` to every `form select` as
   well as to inputs (see the checkbox note below), which drops the dropdown
   arrow: the control then looks exactly like the text boxes above and below it,
   and "Choose…" reads as an empty field. Handing the arrow back to the browser
   (`appearance: menulist`) also hands back its box, which comes out 3px shorter
   than the inputs it sits between — so draw the chevron ourselves, exactly as
   the checkboxes below are drawn, which keeps one box model and one look in
   every browser. */
.oa-form select,
.oa-modal-card select,
/* the focused pair is named too: main.css's `form select:focus` is a background
   SHORTHAND, so without them it would blank the chevron the moment the control
   is focused. */
.oa-form select:focus,
.oa-modal-card select:focus {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23555' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

.oa-modal-card label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #313a45;
}

.oa-modal-card label input { margin-top: 4px; font-weight: 400; }

.oa-form textarea { min-height: 92px; resize: vertical; }

.oa-form input:focus,
.oa-form select:focus,
.oa-form textarea:focus,
.oa-modal-card input:focus,
/* main.css:1585 turns `form input[type=text]:focus` grey, and names only `text`
   and `password` — so one field of a form went grey on focus while the e-mail,
   url and date fields beside it stayed white, which reads as a rendering fault.
   These two selectors carry the type so they outrank it; the white background
   below is what they are here for. */
.oa-form input[type='text']:focus,
.oa-modal-card input[type='password']:focus {
  outline: none;
  border-color: #3b7dbc;
  background-color: #fff;   /* not the shorthand: it would drop the select's chevron */
  box-shadow: 0 0 0 3px rgba(59, 125, 188, 0.18);
}

.oa-form input[aria-invalid='true'],
.oa-form select[aria-invalid='true'],
.oa-form textarea[aria-invalid='true'] { border-color: #b3261e; }

.oa-err {
  margin: 4px 0 0;
  font-size: 13px;
  color: #b3261e;
}

.oa-checks { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }

/* main.css:1568 applies `-webkit-appearance: none` to EVERY `form input`, which
   collapses a native checkbox to 0x0 — invisible and unclickable. Rather than
   fight that rule (it is load-bearing for the site's text inputs), draw the box
   ourselves, which also makes it look the same in every browser. */
.oa-check input[type='checkbox'],
.oa-check input[type='radio'] {
  position: relative;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 4px 0 0;
  padding: 0;
  border: 1px solid #9a9a9a;
  border-radius: 3px;
  background: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.oa-check input[type='radio'] { border-radius: 50%; }

.oa-check input[type='checkbox']:hover,
.oa-check input[type='radio']:hover { border-color: #3b7dbc; }

.oa-check input[type='checkbox']:checked,
.oa-check input[type='radio']:checked {
  border-color: #3b7dbc;
  background: #3b7dbc;
}

.oa-check input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 3px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.oa-check input[type='radio']:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

.oa-check input[type='checkbox']:focus-visible,
.oa-check input[type='radio']:focus-visible {
  outline: 2px solid #3b7dbc;
  outline-offset: 2px;
}

.oa-check input[disabled] { opacity: 0.5; cursor: default; }

.oa-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: #222;
  cursor: pointer;
}

.oa-check input { flex: 0 0 auto; margin-top: 5px; }

.oa-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}

.oa-row > .oa-field { flex: 1 1 240px; }

.oa-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid #e6e6e6;
}

.oa-form-msg { margin: 0; font-size: 15px; }
.oa-form-msg.is-err { color: #b3261e; }
.oa-form-msg.is-ok { color: #1c6b45; }

.oa-note {
  padding: 16px 18px;
  margin: 0 0 24px;
  background: rgb(249, 249, 249);
  border: 1px solid rgb(204, 204, 204);
  font-size: 15px;
  line-height: 1.6;
}

.oa-note.is-warn { background: #fff8e6; border-color: #e6c866; }

.oa-note p { margin: 0 0 8px; }
.oa-note p:last-child { margin-bottom: 0; }

.oa-done {
  padding: 26px 24px;
  background: #f2faf5;
  border: 1px solid #b6dfc7;
  border-radius: 4px;
}

.oa-done h3 { margin: 0 0 10px; font-size: 19px; color: #17573a; }
.oa-done p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.oa-done .oa-ticket {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 3px;
  background: #17573a;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  color: #fff;
}

button[disabled], .button[disabled] { opacity: 0.55; cursor: default; }

/* Header rules do NOT belong here: main.css hides #header-wrapper outright below
   841px, so anything about the account chip in this block is dead. The header's
   own narrow band is 841–980px and is handled beside the header rules below. */
@media screen and (max-width: 640px) {
  .oa-row > .oa-field { flex: 1 1 100%; }
  .oa-prow { flex-wrap: wrap; }
}

/* ------------------------------------------------------- feedback + inbox */

.oa-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

.oa-thumb {
  position: relative;
  width: 120px;
  margin: 0;
}

.oa-thumbs img {
  display: block;
  width: 120px;
  height: 90px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fafafa;
}

.oa-thumb button {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 50%;
  background: #fff;
  font-size: 15px;
  line-height: 1;
  color: #666;
  cursor: pointer;
}

.oa-thumb button:hover { color: #b3261e; border-color: #b3261e; }

.oa-tabs { display: flex; gap: 6px; margin-bottom: 14px; }

.oa-tab {
  padding: 5px 14px;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: #444;
  cursor: pointer;
}

.oa-tab.is-on { border-color: #3b7dbc; background: #3b7dbc; color: #fff; }

.oa-fb-card {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background: #fff;
}

.oa-fb-card header { margin-bottom: 10px; font-size: 13px; }

.oa-fb-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
}

.oa-fb-status.is-open { background: #b06b12; }
.oa-fb-status.is-closed { background: #2e7d5b; }

.oa-fb-body { margin: 10px 0 0; white-space: pre-wrap; font-size: 15px; line-height: 1.55; }

.oa-fb-res {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #2e7d5b;
  background: #f2faf5;
  font-size: 14px;
}

.oa-fb-card code {
  padding: 1px 5px;
  border-radius: 3px;
  background: #f2f2f2;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

/* --------------------------------------------------------------- alerts */

.oa-alert-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 10px;
  padding: 14px 16px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background: #fff;
}

.oa-alert-card.is-off { background: #fafafa; opacity: 0.75; }

.oa-alert-main { flex: 1 1 320px; }
.oa-alert-main strong { font-size: 16px; color: #313a45; }
.oa-alert-main .oa-hint { margin: 3px 0 0; }

.oa-alert-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.oa-alert-actions button {
  padding: 4px 11px;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: #444;
  cursor: pointer;
}

.oa-alert-actions button:hover { background: #f2f6fb; border-color: #3b7dbc; }
.oa-alert-actions button.is-danger:hover { background: #fdf2f1; border-color: #b3261e; color: #b3261e; }

/* the live example e-mail */
.oa-preview {
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}

.oa-preview-head {
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
  background: #f7f9fc;
  font-size: 14px;
}

.oa-preview-body { padding: 16px; font-size: 14px; line-height: 1.6; }
.oa-preview-body ul { margin: 8px 0 12px; padding-left: 20px; list-style: disc; }
.oa-preview-body li { margin-bottom: 8px; }
.oa-preview-body p { margin: 0 0 10px; }

.oa-preview-foot {
  margin-top: 14px !important;
  padding-top: 10px;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #888;
}

/* ------------------------------------------------------ the preview index */

.oa-preview-list { margin: 0 0 26px; padding: 0; list-style: none; }

.oa-preview-list > li {
  margin: 0 0 12px;
  padding: 14px 18px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background: #fff;
}

.oa-preview-list a { font-size: 17px; }
.oa-preview-list p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: #555; }

.oa-form code {
  padding: 1px 5px;
  border-radius: 3px;
  background: #f2f2f2;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}


/* ------------------------------------------------- the confirmation panel */

/* The two follow-on actions are buttons, not a line of links: at the end of a
   form the reader is choosing what to do next, and a choice should look like
   one. `.button` and `.button.blue` come from the site's own main.css; only the
   quiet variant is new. */
.oa-done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px !important;
}

.oa-done-actions .button { line-height: 2.6em; font-size: 15px; }

.button.oa-btn-ghost {
  border-color: #3b7dbc;
  background: #fff;
  color: #3b7dbc !important;   /* beats `.button { color: #343e49 !important }` */
}

.button.oa-btn-ghost:hover { background: #eef4fa; border-color: #4b8dcc; }
.button.oa-btn-ghost:active { background: #dceafa; }

@media screen and (max-width: 480px) {
  .oa-done-actions { flex-direction: column; }
  .oa-done-actions .button { width: 100%; box-sizing: border-box; }
}

/* the provider buttons carry their mark, as on /lit/ */
.oa-auth-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.oa-auth-provider svg { flex: 0 0 auto; }

/* ---------------------------------------------------- header: Feedback button

   /lit/ carries About / Data Analytics / Feedback / Sign in in its header, so
   feedback is one click from anywhere. Same idea here, pinned to the opposite
   corner from #nav (which main.css places absolutely at left:8em). */

#oa-headnav {
  position: absolute;
  /* #nav is placed at top:0.1em with a 2em line box, and both of those resolve
     against the HEADER's font size. Setting a font-size here first (the old
     rule did) makes the same em values resolve against 14px instead, which is
     what left the account button sitting a few pixels above the menu. So the
     box is positioned in the header's em, and the type size is set on the
     children. */
  top: 0.17em;
  right: 0;
  height: 2em;
  display: flex;
  align-items: center;
  gap: 8px;
  /* #nav is absolute too (left:8em) and neither box reserves space for the
     other, so this row slid over the last menu item — "About" — as the window
     narrowed, and being later in the DOM it won the hit test as well: clicking
     "About" opened feedback.html and its whole submenu became unreachable.
     #nav's width is em-based throughout (0.9em labels, 1.5em gaps), so it
     measures a constant ~30em at every one of main.css's breakpoints; reserving
     8em + 30em + 1em of clearance from the header's left edge keeps this row off
     it at every width and font size. */
  max-width: calc(100% - 39em);
}

/* …and the row gives way inside that bound rather than spilling out of it: the
   account name is the one content-sized part, so it is the part that ellipsises
   (`min-width: 0` is what lets a flex item shrink below its text). */
#oa-headnav #oa-account,
#oa-headnav .oa-acct-wrap,
#oa-headnav .oa-acct-chip { min-width: 0; }

/* the chip is inline-flex inside .oa-acct-wrap, so shrinking the wrap alone
   would leave it hanging out of the header's right edge instead */
#oa-headnav .oa-acct-btn,
#oa-headnav .oa-acct-chip,
#oa-headnav .oa-acct-off { max-width: 100%; }

/* the account control sits inside the row now, not pinned itself */
#oa-headnav #oa-account {
  position: static;
  height: auto;
  display: flex;
  align-items: center;
}

.oa-headbtn,
#oa-headnav .oa-acct-btn,
#oa-headnav .oa-acct-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #d9d9d9;
  border-radius: 15px;
  background: #fff;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #444 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.oa-headbtn:hover,
#oa-headnav .oa-acct-btn:hover,
#oa-headnav .oa-acct-chip:hover {
  border-color: #3b7dbc;
  color: #3b7dbc !important;
  background: #f6f9fd;
  box-shadow: 0 1px 3px rgba(59, 125, 188, 0.18);
}

.oa-headbtn.is-on { border-color: #3b7dbc; color: #3b7dbc !important; }

/* the account pill carries an avatar, so it is padded tighter on the left and
   keeps the site's blue for its own label */
#oa-headnav .oa-acct-chip { padding: 0 12px 0 4px; gap: 8px; }
#oa-headnav .oa-acct-btn { color: #3b7dbc !important; border-color: #3b7dbc; }

.oa-acct-name {
  min-width: 0;
  max-width: 15em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oa-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.55;
}

.oa-acct-chip[aria-expanded="true"] {
  border-color: #3b7dbc;
  background: #f6f9fd;
  color: #3b7dbc !important;
}

/* -------------------------------------------------------------- the avatar */

.oa-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: hsl(var(--oa-hue, 210) 48% 42%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.oa-avatar-lg { width: 38px; height: 38px; font-size: 15px; }
.oa-avatar-xl { width: 52px; height: 52px; font-size: 20px; }

/* Below 841px main.css hides the whole header bar and main.js's off-canvas panel
   takes over, so the band where this row has to be compact is 841–980px, NOT the
   736px the first version of this rule guarded — that one could never fire while
   the bar was on screen. There is only ~123px of clear space left of the menu at
   841px, so the pill keeps its glyph and drops its label, and the chip keeps its
   avatar and drops the name. */
@media screen and (min-width: 841px) and (max-width: 980px) {
  /* the label is a bare text node next to the glyph's span, so it is zeroed
     here and the glyph given its size back — the text stays in the document
     for screen readers, and Feedback is in the About menu either way */
  .oa-headbtn { font-size: 0; gap: 0; padding: 0 9px; }
  .oa-headbtn span[aria-hidden] { font-size: 15px; }
  .oa-acct-name { display: none; }
  #oa-headnav .oa-acct-chip { padding: 0 8px 0 4px; gap: 6px; }
  #oa-headnav .oa-acct-btn { padding: 0 9px; }
  /* "Sign-in unavailable" is the widest thing this row can hold and it carries
     no action at all, so where the space is tightest it is the first to go */
  #oa-headnav .oa-acct-off { display: none; }
}

/* Below 841px main.css hides #header-wrapper outright and main.js rebuilds the
   menu as the off-canvas #navPanel from #nav ALONE — so this row, and with it
   the site's only sign-out control, is gone on a phone. CSS cannot rescue it
   (the whole subtree is display:none from an ancestor); the items have to be
   appended to the panel by oa-accounts.js, which runs after main.js builds it.
   These are the styles they land in: an identity line above the account links,
   which carry main.css's own `link depth-0` classes and so need nothing here. */
@media screen and (max-width: 840px) {
  #navPanel .oa-np-as {
    display: block;
    padding: 14px 1em 10px;
    border-top: solid 1px rgba(255, 255, 255, 0.05);
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.45);
  }

  #navPanel .oa-np-as strong {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    overflow-wrap: anywhere;
  }
}

/* --------------------------------------------------------- feedback layout */

.oa-panel {
  margin: 0 0 22px;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.oa-panel-h {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 600;
  color: #313a45;
}

.oa-lede { font-size: 16px; line-height: 1.6; }
.oa-muted { color: #7a7a7a; font-weight: 400; }
.oa-rule { margin: 28px 0 22px; border: 0; border-top: 1px solid #ececec; }

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

/* the screenshot drop zone */
.oa-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 22px 18px;
  border: 2px dashed #cfd8e3;
  border-radius: 6px;
  background: #fafbfd;
  font: inherit;
  font-size: 14px;
  color: #444;
  text-align: left;
  cursor: pointer;
}

.oa-drop:hover, .oa-drop:focus-visible {
  border-color: #3b7dbc;
  background: #f2f6fb;
  outline: none;
}

.oa-drop.is-over { border-color: #3b7dbc; background: #e8f1fb; }
.oa-drop-icon { font-size: 22px; line-height: 1; }
.oa-drop-text strong { display: block; color: #313a45; }
.oa-drop-text .oa-muted { font-size: 13px; }

/* "reach me directly" */
.oa-contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oa-contacts a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid #e4e4e4;
  border-radius: 5px;
  background: #fff;
  font-size: 14px;
  color: #222 !important;
  text-decoration: none !important;
}

.oa-contacts a:hover { border-color: #3b7dbc; background: #f7fafd; }

.oa-contacts strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #313a45;
}

.oa-contacts span span, .oa-contacts a > span:last-child { line-height: 1.35; color: #777; font-size: 13px; }

.oa-contact-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid #e4e4e4;
  border-radius: 5px;
  background: #fafafa;
  font-size: 13px;
  font-weight: 700;
  color: #555;
}

@media screen and (max-width: 640px) {
  .oa-panel { padding: 20px 18px; }
  .oa-contacts { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- the posting gate

   /v2/post-a-job.html shows this INSTEAD of the form while signed out. The
   form is not merely disabled: filling in twenty fields and only then being
   told to sign in is the worst version of this, and a form rendered behind a
   notice invites exactly that. */

.oa-gate {
  max-width: 560px;
  margin: 10px auto 30px;
  padding: 34px 34px 30px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.oa-gate[hidden] { display: none; }

.oa-gate-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #f2f6fb;
  font-size: 24px;
  line-height: 54px;
}

.oa-gate h3 { margin: 0 0 10px; font-size: 20px; }

.oa-gate p {
  margin: 0 auto 18px;
  max-width: 42em;
  color: #555;
  line-height: 1.6;
}

.oa-gate-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px !important;
}

.oa-gate-actions .button { margin: 0; }

.oa-gate-fine {
  margin-bottom: 0 !important;
  font-size: 13px;
  color: #8a8a8a !important;
}

/* The season note that used to sit under the jobs heading was removed at the
   owner's request (2026-08-16), rules and element both. */

/* ------------------------------------------------ search-as-you-type picker
   The vocabulary picker on the posting form (assets/oa-combo.js). The input
   keeps the form's own styling; everything here is the list under it. */

.oa-combo { position: relative; }

.oa-combo-list {
  position: absolute;
  z-index: 70;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #cfd6dd;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.oa-combo-list[hidden] { display: none; }

.oa-combo-opt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}

.oa-combo-opt.is-active,
.oa-combo-opt:hover { background: #eaf3fb; }

.oa-combo-name { flex: 1 1 auto; }

.oa-combo-n {
  flex: 0 0 auto;
  font-size: 12px;
  color: #8a929b;
  font-variant-numeric: tabular-nums;
}

/* a value already used at the chosen university */
.oa-combo-opt.is-pref .oa-combo-name { font-weight: 600; }

/* the "type something new" row */
.oa-combo-add { border-top: 1px solid #eef1f4; color: #2f6ea8; }
.oa-combo-plus {
  flex: 0 0 auto;
  font-weight: 700;
  line-height: 1;
}

.oa-combo-hint,
.oa-combo-more,
.oa-combo-empty {
  margin: 0;
  padding: 6px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #77808a;
}

.oa-combo-hint { border-bottom: 1px solid #eef1f4; }

/* the read-back of what the two name fields will be published as */
.oa-derived { margin: -8px 0 18px; color: #4a6b8a; }
.oa-derived:empty { display: none; }

/* ------------------------------------------------------ the advert uploader
   A styled file picker: the native control cannot be styled, so the real
   input is visually hidden inside the label and the button+filename beside it
   are what the eye sees. Keyboard and screen-reader behaviour stay native. */

.oa-advert { max-width: 560px; }

.oa-file {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.oa-file input[type='file'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.oa-file-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid #3b7dbc;
  border-radius: 4px;
  background: #fff;
  color: #2f6ea8;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.oa-file:hover .oa-file-btn { background: #eaf3fb; }

.oa-file input[type='file']:focus-visible + .oa-file-btn {
  outline: 2px solid #3b7dbc;
  outline-offset: 2px;
}

.oa-file-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  color: #5b6470;
}

.oa-file-clear {
  margin-top: 6px;
  padding: 2px 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: #a3364a;
  text-decoration: underline;
  cursor: pointer;
}

.oa-advert-or { margin: 10px 0 6px; color: #8a929b; }

/* --------------------------------------------------------------- what's new
   The update log on whats-new.html, rendered from changelog.json — the /lit/
   About page's list, in this site's colours. */

.oa-wn-entry {
  margin: 0 0 22px;
  padding: 2px 0 2px 16px;
  border-left: 3px solid #3b7dbc;
}

.oa-wn-date {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a929b;
}

.oa-wn-title { margin: 0 0 6px; font-size: 17px; line-height: 1.35; }
.oa-wn-title a { color: #2f6ea8; text-decoration: none; }
.oa-wn-title a:hover { text-decoration: underline; }

.oa-wn-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #444;
}

/* the subscribe button rides inside the note's own paragraph */
.oa-wn-sub { display: inline-block; margin-left: 10px; vertical-align: middle; }