/* ==========================================================================
   Ireland Job Tracker
   Design notes: dark-first, because this gets checked late at night. Score
   bands carry the colour so the eye lands on the best jobs before reading.
   ========================================================================== */

:root {
  --bg: #0d1117;
  --bg-elevated: #161b22;
  --bg-hover: #1c2330;
  --border: #262d3a;
  --border-strong: #364152;

  --text: #e6edf3;
  --text-muted: #8b949e;
  --text-dim: #6e7681;

  --accent: #4a9eff;
  --accent-dim: #1f4e85;

  --excellent: #3fb950;
  --strong: #56d364;
  --decent: #d29922;
  --stretch: #db6d28;
  --weak: #6e7681;

  --sponsor: #a371f7;
  --new: #f778ba;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .2);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="light"] {
  --bg: #f6f8fa;
  --bg-elevated: #ffffff;
  --bg-hover: #f0f3f6;
  --border: #d8dee4;
  --border-strong: #b9c0c8;
  --text: #1f2328;
  --text-muted: #59636e;
  --text-dim: #818b98;
  --accent: #0969da;
  --accent-dim: #b6d4fe;
  --excellent: #1a7f37;
  --strong: #2da44e;
  --decent: #9a6700;
  --stretch: #bc4c00;
  --weak: #818b98;
  --sponsor: #8250df;
  --new: #bf3989;
  --shadow: 0 1px 3px rgba(31, 35, 40, .12), 0 8px 24px rgba(31, 35, 40, .08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ------------------------------------------------------------------ header */

header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  position: sticky;
  top: 0;
  z-index: 50;
}

.head-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 16px;
  letter-spacing: -.01em;
}

.brand .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--excellent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--excellent) 22%, transparent);
}

.head-stats {
  display: flex;
  gap: 18px;
  margin-left: auto;
  align-items: center;
  flex-wrap: wrap;
}

.stat { display: flex; flex-direction: column; line-height: 1.2; }
.stat b { font-size: 16px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

.icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-strong); }

/* ----------------------------------------------------------------- filters */

.filters {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin: 20px 0;
  box-shadow: var(--shadow);
}

.filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filter-row + .filter-row { margin-top: 10px; }

input[type="search"], select, input[type="text"] {
  /* A select sizes itself to its widest option, and one tracked company with a
     long name was enough to push the whole page wider than a phone screen and
     give it a sideways scrollbar. Nothing here may outgrow its container. */
  max-width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
}
input[type="search"]:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
input[type="search"] { flex: 1; min-width: 240px; }

.chip {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .12s;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.on {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 550;
}

.slider-wrap { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-muted); }
input[type="range"] { accent-color: var(--accent); width: 130px; }

.filter-meta {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

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

.jobs { display: flex; flex-direction: column; gap: 10px; padding-bottom: 60px; }

.job {
  /* Skip the layout and paint work for cards that are scrolled out of view.
     Measured at roughly seven times faster on long lists, and unlike virtual
     scrolling the rows stay in the DOM - so Ctrl+F and screen readers still
     find them. The intrinsic size keeps the scrollbar from jumping. */
  content-visibility: auto;
  contain-intrinsic-size: auto 210px;

  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--band, var(--weak));
  border-radius: var(--radius);
  padding: 15px 17px;
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 16px;
  align-items: start;
  transition: border-color .12s, transform .12s;
}
.job:hover { border-color: var(--border-strong); border-left-color: var(--band, var(--weak)); }
.job.applied { opacity: .55; }

.score-box { text-align: center; }
.score-num {
  font-size: 25px;
  font-weight: 700;
  color: var(--band);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.score-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dim);
  font-weight: 600;
}
.score-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  margin-top: 6px;
  overflow: hidden;
}
.score-bar i { display: block; height: 100%; background: var(--band); border-radius: 2px; }

.job-main { min-width: 0; }
.job-title {
  font-size: 15.5px;
  font-weight: 600;
  margin: 0 0 3px;
  letter-spacing: -.005em;
}
.job-title a { color: var(--text); }
.job-title a:hover { color: var(--accent); }

.job-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 8px; }
.job-sub b { color: var(--text); font-weight: 550; }

.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}
.tag.new { border-color: var(--new); color: var(--new); font-weight: 600; }
.tag.sponsor { border-color: var(--sponsor); color: var(--sponsor); }
.tag.grad { border-color: var(--excellent); color: var(--excellent); }
.tag.lang { border-color: var(--accent); color: var(--accent); font-weight: 600; }

.job-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }

.btn {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 6px 13px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .12s;
}
.btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-strong); }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 550;
}
.btn.primary:hover { filter: brightness(1.1); color: #fff; }
.btn.on { background: color-mix(in srgb, var(--excellent) 18%, transparent); border-color: var(--excellent); color: var(--excellent); }

/* ---------------------------------------------------------------- why panel */

.why {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: none;
}
.job.open .why { display: block; }

.why h4 {
  margin: 0 0 9px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  font-weight: 600;
}

.why-row {
  display: grid;
  grid-template-columns: 165px 52px 1fr;
  gap: 10px;
  padding: 4px 0;
  font-size: 12.5px;
  align-items: baseline;
}
.why-row .lbl { color: var(--text-muted); }
.why-row .pts { font-family: var(--mono); font-weight: 600; text-align: right; }
.why-row .pts.pos { color: var(--excellent); }
.why-row .pts.neg { color: var(--stretch); }
.why-row .pts.zero { color: var(--text-dim); }
.why-row .note { color: var(--text-dim); }

.why-desc {
  margin-top: 12px;
  padding: 11px 13px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text-muted);
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
  border: 1px solid var(--border);
}

/* ------------------------------------------------------------------ empty */

.empty {
  text-align: center;
  padding: 70px 20px;
  color: var(--text-muted);
}
.empty h3 { color: var(--text); margin: 0 0 8px; font-weight: 600; }

footer {
  border-top: 1px solid var(--border);
  padding: 22px 0 34px;
  color: var(--text-dim);
  font-size: 12.5px;
  text-align: center;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 720px) {
  .job { grid-template-columns: 52px 1fr; }
  .job-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .why-row { grid-template-columns: 1fr 46px; }
  .why-row .note { grid-column: 1 / -1; padding-left: 0; }
  .head-stats { width: 100%; margin-left: 0; justify-content: space-between; }
}

/* ------------------------------------------- application record editor */
/* Shown on any job that has entered the application pipeline, so the four
   columns no ATS publishes - hiring manager, recruiter, follow-up date -
   can be typed in where the job is, and land in the workbook. */
.appdetail {
  display: none;
  grid-column: 1 / -1;
  margin-top: 12px;
  padding: 13px 15px 15px;
  border-top: 1px dashed var(--border);
  background: var(--bg);
  border-radius: var(--radius-sm);
}
.job.tracking .appdetail { display: block; }
.job.tracking { opacity: 1; }
.job.tracking .job-title a { opacity: .75; }

.appdetail h4 {
  margin: 0 0 11px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  font-weight: 600;
}
.appdetail h4 span { text-transform: none; letter-spacing: 0; font-weight: 400; }

.appgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
}
.appf { display: flex; flex-direction: column; gap: 4px; }
.appf.wide { margin-top: 11px; }
.appf > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  font-weight: 600;
}
.appf input {
  font: inherit;
  font-size: 13px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text);
}
.appf input::placeholder { color: var(--text-dim); }
.appf input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}
.icon-btn.on {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--text);
}

.tag.closing { background: rgba(219, 109, 40, .16); color: var(--stretch); border-color: rgba(219, 109, 40, .35); font-weight: 600; }
.tag.pay     { background: rgba(63, 185, 80, .13); color: var(--excellent); border-color: rgba(63, 185, 80, .3); }

/* ------------------------------------------------------------ the byline */
/* His name leads and the tracker describes it: the page is opened from his
   LinkedIn as often as by him, so it should say whose work it is. */
.brand-name { font-weight: 700; letter-spacing: -.01em; }
.brand-sep  { color: var(--text-dim); margin: 0 2px; font-weight: 400; }
.brand-what { font-weight: 500; color: var(--text-muted); }
@media (max-width: 640px) {
  .brand-sep, .brand-what { display: none; }
}

/* ------------------------------------------------------------------ tabs */
/* Three lists, not three filters: the board you work from, the applications
   you have made, and the things you have put aside. Counts sit in the tab so
   you can see at a glance whether anything is waiting. */
.tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--border);
}
.tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); border-bottom-color: var(--accent); }
.tab b {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 20px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.tab.on b { background: var(--accent-dim); border-color: var(--accent); color: var(--text); }

.hidden-panel { display: none !important; }

/* --------------------------------------------------- hide / put back */
.btn.dismiss { color: var(--text-dim); }
.btn.dismiss:hover {
  color: var(--stretch);
  border-color: var(--stretch);
  background: rgba(219, 109, 40, .10);
}
.btn.restore {
  color: var(--excellent);
  border-color: rgba(63, 185, 80, .35);
}
.btn.restore:hover { background: rgba(63, 185, 80, .12); }

/* -------------------------------------------------------------- pagination */
.pager {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 18px 2px 4px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
}
.page {
  appearance: none;
  min-width: 34px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.page:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
.page.on {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}
.page:disabled { opacity: .35; cursor: default; }
.pager .gap { color: var(--text-dim); padding: 0 2px; }
.pager-note {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .page.step { display: none; }
  .pager-note { margin-left: 0; width: 100%; padding-top: 6px; }
}

.legend { color: var(--text-dim); font-size: 12px; }

/* A posting whose link was unusable - or was refused as unsafe. The card still
   shows, because the job may be worth searching for by name; the button just
   has nowhere legitimate to send you. */
.btn.primary.disabled {
  background: var(--bg-elevated);
  color: var(--text-dim);
  border: 1px solid var(--border);
  cursor: not-allowed;
  text-align: center;
}

/* A vacancy that has come off its own careers page. Only ever seen under
   Applied - you went for it, and it is no longer taking applications. */
.tag.closed {
  background: var(--muted-bg, rgba(148, 163, 184, .15));
  color: var(--muted-fg, #94a3b8);
  border-color: var(--muted-fg, #94a3b8);
}
.job:has(.tag.closed) { opacity: .62; }

/* Nothing scrolls sideways. On a phone the page itself had a horizontal
   scrollbar, which makes every vertical swipe feel like it is fighting back. */
html, body { max-width: 100%; overflow-x: hidden; }

/* --------------------------------------------------------- permit badges */
.tag.nosponsor   { background: rgba(239, 68, 68, .12);  color: #f87171; border-color: #f87171; }
.tag.yessponsor  { background: rgba(34, 197, 94, .12);  color: #4ade80; border-color: #4ade80; }
.tag.permits     { background: rgba(34, 197, 94, .12);  color: #4ade80; border-color: #4ade80; }
.tag.csep        { background: rgba(34, 197, 94, .10);  color: #4ade80; border-color: #4ade80; }
.tag.generalroute{ background: rgba(234, 179, 8, .12);  color: #facc15; border-color: #facc15; }
.tag.belowbar    { background: rgba(239, 68, 68, .10);  color: #f87171; border-color: #f87171; }

/* Colour is never the only signal: a refusal and a salary under the bar both
   carry their meaning in the words, so the badges still read in greyscale and
   to anyone who cannot separate red from green. */

/* ------------------------------------------------------- time-bound badges */
.tag.sincevisit { background: rgba(56, 189, 248, .12); color: #38bdf8; border-color: #38bdf8; }
.tag.stale      { background: rgba(234, 179, 8, .12);  color: #facc15; border-color: #facc15; }
.tag.ghosted    { background: rgba(148, 163, 184, .14); color: #94a3b8; border-color: #94a3b8; }

/* The one line on the page that asks something of you rather than listing
   something for you, so it sits above the list and looks unlike it. */
.today {
  margin-top: 8px;
  padding: 9px 12px;
  border-left: 3px solid #facc15;
  background: rgba(234, 179, 8, .07);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.today strong { color: #facc15; }

/* Scan now: the scanner is a GitHub workflow, and a public page cannot be
   given a credential to start one without handing that credential to everybody
   who opens the page. So the button goes to the place that can, rather than
   pretending to do it here. */
.scan-btn { text-decoration: none; display: inline-flex; align-items: center; }

/* A check that has gone cold should look it. */
.stat.stale-check b       { color: #facc15; }
.stat.very-stale-check b  { color: #f87171; }
.stat.very-stale-check span { color: #f87171; }

/* ------------------------------------------------------------------ lock */
/* A class selector beats the UA stylesheet's [hidden] rule, so without this
   the overlay goes invisible but keeps swallowing every click on the board. */
.lock[hidden] { display: none !important; }
body.locked > *:not(#lock) { display: none !important; }
.lock {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--bg); padding: 24px;
}
.lock-box { width: min(380px, 100%); display: flex; flex-direction: column; gap: 10px; text-align: center; }
.lock-box h1 { font-size: 1.25rem; margin: 0; color: var(--text); letter-spacing: -0.01em; }
.lock-box p  { margin: 0 0 4px; color: var(--text-muted); font-size: .9rem; }
.lock-box input {
  padding: 11px 13px; font-size: 1rem; letter-spacing: .06em; text-align: center;
  border: 1px solid var(--line, var(--bg-hover)); border-radius: 8px;
  background: var(--bg-elevated); color: var(--text);
}
.lock-box input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.lock-box button {
  padding: 11px 13px; font-size: .95rem; font-weight: 600;
  border: 0; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #fff;
}
.lock-box button[disabled] { opacity: .6; cursor: progress; }
.lock-box small { color: var(--text-dim); font-size: .78rem; line-height: 1.45; }
.lock-msg { min-height: 1.1em; font-size: .85rem; color: var(--text-muted); }
.lock-msg.bad { color: #f85149; }

/* --------------------------------------------------- eligibility markers */
/* Theme variables, not fixed hex - the board has a light mode and hardcoded
   colours here rendered dark text on a dark card. */
.tag.blocked { background: transparent; color: #f85149; border-color: #f85149; }
.tag.flagged { background: transparent; color: #d29922; border-color: #d29922; }
.tag.funded  { background: transparent; color: #3fb950; border-color: #3fb950; }
.chip-block.on { border-color: #f85149; color: #f85149; }

.blocknote, .flagnote {
  /* The card is a three-column grid; without this the block lands in one
     narrow cell and wraps a word per line. */
  grid-column: 1 / -1;
  margin: 10px 0 0; padding: 10px 12px; border-radius: 8px;
  border: 1px solid #f85149; background: var(--bg-hover); font-size: .85rem;
}
.flagnote { border-color: #d29922; }
.blocknote h4 { margin: 0 0 8px; font-size: .85rem; color: #f85149; }
.blocknote p, .flagnote p { margin: 0 0 8px; display: flex; flex-direction: column; gap: 3px; }
.blocknote p b, .flagnote p b { font-weight: 600; color: var(--text); }
.blocknote span, .flagnote span { color: var(--text-muted); font-style: italic; }
.blocknote small { color: var(--text-dim); font-size: .75rem; }

/* Critical Skills Occupations List (Dept. of Enterprise, 2026) */
.tag.csol { background: transparent; color: #a371f7; border-color: #a371f7; font-weight: 600; }

/* Crack-IT: the office jobs she can walk into, listed apart from the fit score */
.tag.crackit { background: transparent; color: #f0883e; border-color: #f0883e; font-weight: 600; }
body.tab-crackit #sort,
body.tab-crackit .slider-wrap,
body.tab-crackit #f-band,
body.tab-crackit [data-quick="blocked"] { display: none; }
/* Four tabs on a phone: keep each label on one line and let the row scroll
   sideways rather than breaking "Crack-IT" at its hyphen. */
.tab { white-space: nowrap; flex: 0 0 auto; }
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
@media (max-width: 480px) { .tab { padding: 9px 10px; } }