/* Kabirr Education Partners.
 *
 * Same family as the Finance section: black and white, one restrained accent,
 * the mark used sparingly. This is a private research desk, not a school
 * website — no illustrations, no encouraging colours, nothing that treats the
 * person reading it as a child. The only colour on the screen carries meaning
 * (open, closing, met, not met), which is the whole reason it reads as
 * professional.
 *
 * The amber is the one accent the app already leans on for "attention, not
 * alarm". It is defined here per theme rather than reaching for a hard-coded
 * hex at each use, so the dark theme is not a washed-out version of the light
 * one.
 */

.edu-amber { color: var(--edu-amber); }

:root {
  --edu-amber:      #9A6B00;
  --edu-amber-bg:   rgba(214, 158, 46, 0.14);
  --edu-green:      #1B7F4B;
  --edu-green-bg:   rgba(27, 127, 75, 0.12);
  --edu-red:        #B3261E;
  --edu-red-bg:     rgba(179, 38, 30, 0.10);
  --edu-blue:       #1B5FA8;
  --edu-blue-bg:    rgba(27, 95, 168, 0.12);
}

:root[data-appearance="dark"] {
  --edu-amber:      #E8B23D;
  --edu-amber-bg:   rgba(232, 178, 61, 0.16);
  --edu-green:      #4ED08A;
  --edu-green-bg:   rgba(78, 208, 138, 0.14);
  --edu-red:        #FF6B60;
  --edu-red-bg:     rgba(255, 107, 96, 0.14);
  --edu-blue:       #6FB1FF;
  --edu-blue-bg:    rgba(111, 177, 255, 0.14);
}

/* The wordmark sits a touch tighter here than on Finance: this screen opens
   with six figures under it and needs the room. */
.edu-brand { padding-bottom: 12px; }
.edu-brand .fin-brand-text b { letter-spacing: 0.06em; font-size: 0.78em; }

/* ---------- the six figures ---------- */

.edu-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--card-edge);
  border: 0.5px solid var(--card-edge);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 16px;
}

.edu-stat {
  background: var(--card);
  padding: 12px 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.edu-stat-value {
  font-size: 1.45em;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.edu-stat-label {
  font-size: 0.68em;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edu-stat-note { font-size: 0.64em; color: var(--text-3); }

/* ---------- search ---------- */

.edu-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--fill);
  border-radius: var(--radius-pill);
  padding: 0 14px;
  height: 40px;
  margin-bottom: 12px;
}

.edu-search-icon { display: flex; color: var(--text-3); flex-shrink: 0; }
.edu-search-icon svg { width: 17px; height: 17px; }

.edu-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.92em;
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
}
.edu-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---------- tabs ----------
   Scrolls sideways on a narrow phone rather than wrapping into two rows or
   pushing the page wider than the screen. */

.edu-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}
.edu-tabs::-webkit-scrollbar { display: none; }

.edu-tab {
  flex: 0 0 auto;
  border: 0.5px solid var(--separator);
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 0.78em;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  cursor: pointer;
}
.edu-tab.on {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* ---------- filter chips ---------- */

.edu-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.edu-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

.edu-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0.5px solid var(--separator);
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 0.78em;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.edu-chip svg { width: 14px; height: 14px; }
.edu-chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---------- badges ----------
   Every colour on this screen means something. Nothing is coloured for looks. */

.edu-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68em;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: var(--fill);
  color: var(--text-2);
}
.edu-badge svg { width: 11px; height: 11px; }

.edu-badge.green { background: var(--edu-green-bg); color: var(--edu-green); }
.edu-badge.amber { background: var(--edu-amber-bg); color: var(--edu-amber); }
.edu-badge.red   { background: var(--edu-red-bg);   color: var(--edu-red); }
.edu-badge.blue  { background: var(--edu-blue-bg);  color: var(--edu-blue); }
.edu-badge.grey  { background: var(--fill);         color: var(--text-2); }

/* ---------- an opportunity in the list ---------- */

.edu-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.edu-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 0.5px solid var(--card-edge);
  border-radius: var(--radius-card);
  padding: 14px 15px 12px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.edu-card:active { background: var(--pressed); }

.edu-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.edu-card-employer {
  font-size: 0.74em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edu-match {
  flex-shrink: 0;
  font-size: 0.86em;
  font-weight: 600;
  color: var(--edu-amber);
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  background: none;
  border: 0;
  font-family: inherit;
  padding: 0;
}
.edu-match small { font-size: 0.62em; font-weight: 400; color: var(--text-3); }
.edu-match.lg { font-size: 1.5em; cursor: pointer; }
.edu-match.lg small { font-size: 0.38em; }

.edu-card-title {
  font-size: 1.02em;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 3px 0 7px;
  line-height: 1.3;
}

.edu-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 0.76em;
  color: var(--text-2);
  margin-bottom: 9px;
}
.edu-card-meta span { position: relative; }

.edu-card-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }

.edu-card-foot {
  font-size: 0.7em;
  color: var(--text-3);
  border-top: 0.5px solid var(--separator);
  padding-top: 8px;
}

.edu-count { text-align: center; margin-bottom: 18px; }

/* SYRIX's read of the list, above the rows it is about. */
.edu-overview { margin-bottom: 14px; }
.edu-overview .syrix-ov-body-wrap { margin-top: 2px; }

/* ---------- universities ----------
   A grouped list rather than cards: these are one line of fact each and a way
   through to somebody else's site, so they should read like a directory, not
   compete with the vacancies above them. */
.edu-unis {
  background: var(--card);
  border: 0.5px solid var(--card-edge);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 10px;
}

.edu-uni {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border-bottom: 0.5px solid var(--separator);
  color: inherit;
  text-decoration: none;
}
.edu-uni:last-child { border-bottom: 0; }
.edu-uni:active { background: var(--pressed); }

.edu-uni-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.edu-uni-name {
  font-size: 0.92em;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edu-uni-where { font-size: 0.74em; color: var(--text-2); }
.edu-uni .chevron { flex-shrink: 0; display: flex; color: var(--text-3); }
.edu-uni .chevron svg { width: 13px; height: 13px; }
.edu-uni .edu-badge { flex-shrink: 0; }

/* ---------- polish ----------
   Kabirr: "ui looks cheap and bad". Three things were doing that, and none of
   them were the colours: the cards sat flat against the page with a hairline
   that read as a table row, every card shouted the same three badges at the
   same weight, and the level was printed twice. Depth, one quiet badge row and
   a single level phrase fix it without adding decoration. */
.edu-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 8px rgba(0, 0, 0, 0.03);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.edu-card:active {
  transform: scale(0.994);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
:root[data-appearance="dark"] .edu-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* The level is the one piece of meta that tells you what kind of thing this
   is, so it carries a little more weight than the place and the pay. */
.edu-card-level { font-weight: 550; color: var(--text); }

/* Separators between the meta items, so they read as a line rather than as
   four things that happen to be near each other. */
.edu-card-meta span + span::before {
  content: '';
  display: inline-block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--text-3);
  vertical-align: middle;
  margin-right: 10px;
  margin-left: -6px;
}

/* ---------- setup and status ---------- */

.edu-setup { display: flex; flex-direction: column; gap: 10px; }
.edu-setup-title { font-weight: 600; font-size: 1.02em; }
.edu-setup .btn { align-self: flex-start; }

.edu-status { display: flex; flex-direction: column; gap: 7px; }
.edu-status-detail { font-size: 0.92em; font-weight: 500; }

/* ---------- eligibility ---------- */

.edu-elig { display: flex; flex-direction: column; gap: 9px; }

/* The two columns that must never be read as the same thing. Stacked on a
   phone, because side by side at 375px they become four words each. */
.edu-split {
  display: grid;
  gap: 10px;
  background: var(--surface-sunk);
  border-radius: var(--radius-lg);
  padding: 12px 13px;
}
.edu-split > div { display: flex; flex-direction: column; gap: 2px; }
.edu-split b { font-size: 0.82em; }
.edu-split span { font-size: 0.76em; color: var(--text-2); line-height: 1.45; }

@media (min-width: 560px) {
  .edu-split { grid-template-columns: 1fr 1fr; }
}

/* ---------- requirements ---------- */

.edu-req {
  border-bottom: 0.5px solid var(--separator);
  padding: 11px 0;
}
.edu-req:last-of-type { border-bottom: 0; }

.edu-req-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.edu-req-name { font-weight: 600; font-size: 0.9em; min-width: 0; }

.edu-req-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8em;
  padding: 2px 0;
}
.edu-req-line span { color: var(--text-2); flex-shrink: 0; }
.edu-req-line b { font-weight: 500; text-align: right; min-width: 0; }

/* ---------- alternative routes ---------- */

.edu-routes { display: flex; flex-direction: column; gap: 12px; }

.edu-route {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 13px;
  background: var(--surface-sunk);
  border-radius: var(--radius-lg);
}
.edu-route b { font-size: 0.9em; }
.edu-route > span { font-size: 0.8em; color: var(--text-2); line-height: 1.45; }
.edu-route.loading > span { color: var(--text-3); }

.edu-route-meta {
  font-size: 0.7em;
  color: var(--text-3);
  margin-top: 2px;
}
.edu-route .btn { align-self: flex-start; padding-left: 0; }

/* ---------- the advert text ---------- */

.edu-prose { margin-bottom: 14px; }
.edu-prose:last-child { margin-bottom: 0; }
.edu-prose b { font-size: 0.86em; display: block; margin-bottom: 4px; }
.edu-prose p {
  font-size: 0.86em;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- the detail header ---------- */

.edu-detail-head { margin-bottom: 14px; }
.edu-detail-employer {
  font-size: 0.76em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.edu-detail-title {
  font-size: 1.5em;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: 4px 0 8px;
}

/* ---------- the profile editor ---------- */

.edu-qual {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-bottom: 8px;
}
.edu-qual .input,
.edu-qual .select { min-width: 0; flex: 1; margin: 0; }
.edu-qual .select { flex: 0 1 34%; }

.edu-qual-x {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 0;
  background: var(--fill);
  border-radius: 50%;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.edu-qual-x svg { width: 13px; height: 13px; }

/* Very narrow phones: the three-across figure grid becomes two, or the labels
   truncate to nothing useful. */
@media (max-width: 359px) {
  .edu-stats { grid-template-columns: repeat(2, 1fr); }
}