/* ---------------------------------------------------------------------------
   Operations Academia — filterable card list
   Replaces the Awesome Table "cards" visualization.

   The look is deliberately a faithful reproduction of the vendor's output, so
   the swap is invisible to visitors. The values below are lifted from the
   Awesome Table app's own stylesheet (which lived in the "Job Postings" Google
   Sheet's template tab):

       .label-primary background   #426394   -> the Featured badge
       filter selection highlight  #81C0F2
       card title / description    #616161
       card link colour            #767676
       .tg td padding              19px 10px, Arial 14px
       card content padding        12px 32px 22px 22px
       card font                   Roboto 400/500/700

   Everything else follows the site's own main.css (Source Sans Pro, #3B7DBC,
   links #0645ad).
   --------------------------------------------------------------------------- */

.oa-list {
  font-family: 'Roboto', 'Source Sans Pro', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #222;
}

/* ---------------------------------------------------------------- filter bar */

.oa-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 12px;
  padding: 4px 0 14px;
}

.oa-filter {
  display: flex;
  flex-direction: column;
  width: 180px;
  min-width: 0;
}

.oa-filter > label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: #222;
  margin-bottom: 3px;
}

/* the free-text control (University/Institution) */
.oa-filter input[type='search'] {
  width: 100%;
  height: 35px;
  box-sizing: border-box;
  /* main.css only sets this under a <form> ancestor and this control has none,
     so on WebKit the box would keep the native searchfield's pill shape and
     intrinsic height instead of the 35px that matches the five pickers. */
  -webkit-appearance: none;
  appearance: none;
  padding: 1px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 0;
  line-height: 31px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  color: #222;
  background: #fff;
}

.oa-filter input[type='search']:focus {
  outline: none;
  border-color: #81c0f2;
  box-shadow: 0 0 0 2px rgba(129, 192, 242, 0.35);
}

/* the value pickers — Awesome Table rendered these as a grey bar reading
   "Choose a value" with a + (multi-select) or a chevron (single dropdown). */
.oa-pick {
  position: relative;
}

.oa-pick-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  height: 35px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid #d9d9d9;
  background: #f1f1f1;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: #444;
  text-align: left;
  cursor: pointer;
}

.oa-pick-btn:hover { background: #e9e9e9; }

.oa-pick-btn[aria-expanded='true'] {
  border-color: #81c0f2;
  background: #fff;
}

.oa-pick-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oa-pick-btn.is-set .oa-pick-label { color: #222; font-weight: 500; }

.oa-pick-caret {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
  color: #666;
}

.oa-pick-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 2px);
  left: 0;
  min-width: 100%;
  max-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #d9d9d9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

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

/* Set by oa-list.js when an opened menu would run off the viewport's right
   edge (the phone layout puts pickers two per row, and a right-column menu is
   wider than its button). Measured, never guessed from column position. */
.oa-pick-menu.oa-menu-right { left: auto; right: 0; }

.oa-pick-search {
  width: calc(100% - 16px);
  margin: 4px 8px 6px;
  padding: 4px 6px;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  font: inherit;
  font-size: 13px;
}

.oa-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
}

.oa-opt:hover { background: #81c0f2; }

.oa-opt input { margin: 0; flex: 0 0 auto; }

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

.oa-opt-n {
  flex: 0 0 auto;
  color: rgba(97, 97, 97, 0.6);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.oa-opt.is-empty { color: #aaa; cursor: default; }
.oa-opt.is-empty:hover { background: transparent; }

/* Chosen values, shown under the control like Awesome Table's selected list.
   The WHOLE chip is the button that removes the value — see buildChips() — so
   it carries the pointer, the hover state and the focus ring, and the × is
   only a hint at what a click will do. */
.oa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* nothing chosen yet: no gap to leave under the control, and the phantom 4px
   is what the bottom-aligned Clear button would otherwise line up against */
.oa-chips:empty { margin-top: 0; }

.oa-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  margin: 0;
  padding: 2px 6px;
  border: 1px solid #81c0f2;
  border-radius: 2px;
  background: #81c0f2;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  color: #14405f;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease-out, border-color 0.12s ease-out;
}

.oa-chip:hover {
  background: #6ab1ec;
  border-color: #6ab1ec;
  color: #0b2c43;
}

.oa-chip:focus-visible {
  outline: 2px solid #3b7dbc;
  outline-offset: 1px;
}

.oa-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oa-chip-x {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
}

/* Bottom-align the Clear button with the 35px controls beside it, not with
   their bold labels. `align-items` cannot do it: .oa-filters aligns its items
   flex-start, so this box is shrink-to-fit and has no free space of its own to
   align inside — the alignment has to be asked for on the item itself. */
.oa-filter-actions {
  display: flex;
  align-self: flex-end;
  align-items: flex-end;
  margin-left: auto;
}

.oa-clear {
  height: 35px;
  padding: 0 12px;
  border: 1px solid #d9d9d9;
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: #444;
  cursor: pointer;
}

.oa-clear:hover { background: #f1f1f1; }
.oa-clear[disabled] { opacity: 0.45; cursor: default; }

/* ---------------------------------------------------------------- result bar */

.oa-resultbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid #e2e2e2;
  border-left: 0;
  border-right: 0;
  font-size: 13px;
  color: rgba(97, 97, 97, 0.9);
}

/* Before the data lands — and on the error path, which replaces only the card
   list — these two boxes have nothing in them, and an empty result bar still
   paints its top and bottom rules. Two hairlines around nothing, above "The job
   postings could not be loaded.", read as a second broken widget. */
.oa-filters:empty,
.oa-resultbar:empty { display: none; }

.oa-count { font-variant-numeric: tabular-nums; }

.oa-pager { display: flex; align-items: center; gap: 2px; }

.oa-pager button {
  width: 30px;
  height: 26px;
  border: 0;
  background: none;
  font-size: 19px;
  line-height: 1;
  color: #767676;
  cursor: pointer;
}

.oa-pager button:hover:not([disabled]) { color: #222; }
.oa-pager button[disabled] { opacity: 0.3; cursor: default; }

/* --------------------------------------------------------------------- cards */

.oa-cards { margin: 14px 0 0; padding: 0; list-style: none; }

/* THE CARD ELEVATION — every posting rests on a shadow, and the one under the
   pointer, alone, lifts off the page.

   Resting is two layers: a 1px contact shadow that keeps the card's bottom
   edge crisp against the white page, over a soft ambient one that gives it its
   weight. Hover adds a third, wide layer with a NEGATIVE spread, so the lift
   reads as height rather than as a dark halo, and raises the card 1px. Both
   are tinted navy (16, 24, 40) rather than pure black: a black shadow over a
   white page goes grey and muddy, and a stack of ten of them reads as dirt.

   Two rules are what make it say "you are over THIS one":
     - the lift is on :hover ONLY. It used to be on :focus-within as well, so a
       card someone had clicked stayed raised after the pointer had moved on
       and two cards looked hovered at once. Keyboard focus has its own ring on
       .oa-card-head below, which is a clearer indicator than a shadow anyway.
     - it is gated on a real pointer, because a tap leaves :hover stuck on a
       phone until something else is touched.
   The hovered card is also lifted out of the paint order (position/z-index):
   siblings are painted after it, so without that its own shadow is cut off by
   the next card's white background.

   The transition is dropped for readers who ask for less motion. */
.oa-card {
  position: relative;
  margin: 0 0 14px;
  background: #fff;
  border: 1px solid #e7e9ec;
  border-radius: 3px;
  box-shadow:
    0 1px 1px rgba(16, 24, 40, 0.05),
    0 2px 6px rgba(16, 24, 40, 0.08);
  transition: box-shadow 0.18s ease-out, border-color 0.18s ease-out,
    transform 0.18s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .oa-card:hover {
    z-index: 1;
    border-color: #dcdfe4;
    box-shadow:
      0 1px 1px rgba(16, 24, 40, 0.05),
      0 4px 10px -1px rgba(16, 24, 40, 0.10),
      0 14px 26px -6px rgba(16, 24, 40, 0.16);
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .oa-card { transition: none; }
  .oa-card:hover { transform: none; }
}

.oa-card-head {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 32px 22px 22px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.oa-card-head:hover .oa-card-title { text-decoration: underline; }

/* Keyboard focus, and keyboard focus only — this is the card's "you are here",
   which is why the hover lift above does not double as one. Rounded with the
   card so the ring sits inside its corners rather than across them. */
.oa-card-head:focus-visible {
  outline: 2px solid #3b7dbc;
  outline-offset: -2px;
  border-radius: 2px;
}

.oa-badges { margin-bottom: 6px; }

.oa-label {
  display: inline;
  padding: 0.2em 0.6em 0.3em;
  border-radius: 0.25em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: text-top;
}

.oa-label-primary { background-color: #426394; }
.oa-label-open { background-color: #2e7d5b; }

/* The three values below were 1.375rem / 0.9rem / 1.375rem — the vendor's own
   numbers, but `rem` resolves against the ROOT font size and nothing else on
   this page does: main.css leaves html at the browser's default and pins the
   list at 14px. So they alone tracked the reader's browser font-size setting,
   and at Chrome's "Large" the department subtitle overtook the fixed-16px
   university title. Same rendering at the 16px default, in the file's own px
   scale. */
.oa-card-title {
  margin: 5px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: #616161;
}

.oa-card-sub {
  margin: 5px 0 0;
  font-size: 14.4px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.54);
}

.oa-card-body { padding: 0 32px 6px 22px; }
.oa-card-body[hidden] { display: none; }

.oa-kv {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
}

.oa-kv th,
.oa-kv td {
  padding: 19px 10px;
  border: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.oa-kv th {
  width: 210px;
  font-weight: 700;
  color: #222;
}

.oa-kv td { color: #333; }
.oa-kv a { color: #0645ad; text-decoration: underline; }

.oa-empty {
  padding: 42px 10px;
  text-align: center;
  color: #767676;
}

.oa-empty strong { display: block; margin-bottom: 6px; color: #444; font-weight: 600; }

.oa-loading { padding: 42px 10px; text-align: center; color: #767676; }

/* --------------------------------------------------------------- responsive */

@media screen and (max-width: 980px) {
  .oa-filter { width: calc(50% - 6px); }
  .oa-filter-actions { width: 100%; margin-left: 0; }
}

@media screen and (max-width: 640px) {
  /* skel's mobile grid cancels its own gutter (#content pads 30px, .row pulls
     it back with -30px), so the whole list ran EDGE TO EDGE on a phone —
     labels starting on the screen edge, inputs and cards touching both sides.
     The list carries its own gutter instead of touching the shared theme. */
  .oa-list { padding: 0 14px; }

  /* Two pickers per row halves the wall of filters a phone reader scrolls
     before the first posting; the free-text university search keeps the full
     width — it is the primary way in. */
  .oa-filter { width: calc(50% - 6px); }
  .oa-filter:not(.oa-pick) { width: 100%; }

  /* 16px is not cosmetic: iOS Safari zooms the whole page into any focused
     input whose font is smaller, and leaves it zoomed. 42px tall is a real
     touch target (the desktop 35px is a mouse target). */
  .oa-filter input[type='search'],
  .oa-pick-btn {
    height: 42px;
    font-size: 16px;
    border-radius: 6px;
  }
  .oa-pick-search { font-size: 16px; padding: 8px 10px; }

  /* Never wider than the screen: a right-column picker's menu right-aligns
     itself (oa-menu-right, set by measurement in oa-list.js), and this cap is
     what guarantees the flipped menu still fits. */
  .oa-pick-menu { max-width: calc(100vw - 28px); max-height: 50vh; }
  .oa-opt { padding: 10px 12px; }

  .oa-clear { height: 42px; padding: 0 16px; border-radius: 6px; }

  /* pager chevrons at finger size */
  .oa-pager button { width: 42px; height: 40px; font-size: 24px; }

  .oa-chip { padding: 6px 10px; border-radius: 4px; }

  .oa-card { border-radius: 6px; }
  .oa-card-head { padding: 12px 16px 18px; }
  .oa-card-body { padding: 0 16px 6px; }
  .oa-kv th, .oa-kv td { display: block; width: auto; padding: 4px 0; }
  .oa-kv th { padding-top: 12px; }
  .oa-kv tr + tr th { border-top: 1px solid #f0f0f0; }
}

@media print {
  .oa-filters, .oa-pager, .oa-clear { display: none; }
  /* !important because oa-ui.css restores `[hidden] { display: none !important }`
     for the whole site and is loaded after this file — without matching it, a
     printed list was institution and department headings and nothing else. */
  .oa-card-body[hidden] { display: block !important; }
}

/* --------------------------------------------- Edit / Take down on a posting

   Drawn only on the postings the signed-in user may change (assets/
   oa-jobedit.js). Positioned over the card rather than inside its head,
   because the head is itself a button and nesting one inside it would be
   invalid — and every click on Edit would also toggle the card open. */

.oa-card { position: relative; }

.oa-card-actions {
  position: absolute;
  top: 10px;
  right: 12px;
  display: flex;
  gap: 6px;
  /* the card lifts on hover; the buttons must sit above the shadow */
  z-index: 2;
}

.oa-jobbtn {
  padding: 4px 10px;
  border: 1px solid #d3d9df;
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  /* Held back until the pointer is on the card: these are maintenance
     controls, not part of reading a posting, and at full strength on 94 cards
     they would be the loudest thing on the page. */
  opacity: 0.55;
  transition: opacity 0.15s ease-out, background-color 0.15s ease-out;
}

.oa-card:hover .oa-jobbtn,
.oa-card:focus-within .oa-jobbtn { opacity: 1; }

.oa-jobbtn-edit { color: #2f6ea8; }
.oa-jobbtn-edit:hover { background: #eaf3fb; border-color: #9cc3e4; }

.oa-jobbtn-del { color: #a3364a; }
.oa-jobbtn-del:hover { background: #fdf0f2; border-color: #e2aab4; }

.oa-jobbtn:focus-visible { outline: 2px solid #3b7dbc; outline-offset: 1px; }
.oa-jobbtn[disabled] { opacity: 0.5; cursor: default; }

/* the head's own padding has to clear the buttons, or a long institution name
   runs under them */
.oa-card-owned .oa-card-head { padding-right: 190px; }

.oa-card-note {
  margin: 0;
  padding: 8px 22px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #2e6b4f;
}

.oa-card-note.is-bad { color: #a3364a; }

.oa-card-gone { opacity: 0.55; }

@media screen and (max-width: 640px) {
  .oa-card-actions { position: static; padding: 0 16px 12px; }
  .oa-card-owned .oa-card-head { padding-right: 16px; }
  /* full strength and finger-sized: on a phone there is no hover to reveal
     them, and 4px-tall pills are a stylus target, not a thumb one */
  .oa-jobbtn { opacity: 1; padding: 8px 14px; font-size: 13px; border-radius: 6px; }
}

@media print { .oa-card-actions { display: none; } }

/* ------------------------------------------------- My postings (my-postings.html)

   The signed-in poster's own postings, every state included. Reuses the same
   .oa-jobbtn Edit / Take down pills as the public list (the owner asked for
   those to stay exactly as they are) — but always at full strength here: on a
   management page they are the point, not an aside. */

.oa-my-card {
  position: relative;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.04);
}

.oa-my-card .oa-jobbtn { opacity: 1; }

.oa-my-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding-right: 170px; }
.oa-my-inst { font-weight: 600; color: #22303c; }
.oa-my-dept { color: #5a6673; }

.oa-my-status {
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.oa-my-status.is-live    { background: #e7f5ec; color: #1e7c45; }
.oa-my-status.is-pending { background: #fdf3e0; color: #9c6410; }
.oa-my-status.is-down    { background: #eef0f3; color: #5a6673; }

.oa-my-meta { color: #5a6673; font-size: 13px; margin: 6px 0 0; line-height: 1.55; }
.oa-my-meta a { color: #2f6ea8; }
.oa-my-note { margin: 8px 0 0; font-size: 13px; color: #2e6b4f; }
.oa-my-note.is-bad { color: #a3364a; }

@media screen and (max-width: 640px) {
  .oa-my-head { padding-right: 0; }
  .oa-my-card .oa-card-actions { position: static; padding: 10px 0 0; }
}