/*
 * Public styles for the Candidate Database shortcodes, scoped under .ks-cand.
 *
 * Deliberately matches the Keystone admin shell's own design language (ADR §H
 * component set: keystone/assets/design-system/{tokens,components}.css,
 * keystone/assets/app/app.css) rather than a separate look, per Ano's own
 * feedback — these pages should read as the same product as the backoffice,
 * not a different site bolted on. Public pages never get the shell's
 * `--ks-*` custom properties (those are injected on `.ks-root` at shell
 * render time only), so the values below are the SAME NUMBERS copied by
 * value, not by reference. If the admin tokens ever change, this file needs
 * updating by hand to match — it will not drift automatically.
 *
 * Two rules carried over on purpose because they fix real bugs, not just
 * match a look:
 *  - Cards/tables use box-shadow for elevation, never a border — a border
 *    AND a shadow together is what made the first pass look "boxier" than
 *    the admin shell.
 *  - The anchor-color exclusion a few rules down exists because a plain
 *    `.ks-cand a { color: ... }` rule beats a button class on specificity
 *    (type selector + class > class alone) — an `<a class="...btn--primary">`
 *    rendered as invisible blue-on-blue text without it. Found live.
 */

.ks-cand {
  --c-accent: #2563eb;
  --c-accent-hover: #1d4ed8;
  --c-accent-soft: #eaf1fe;
  --c-accent-fg: #ffffff;
  --c-text: #1b2233;
  --c-mute: #55607a;
  --c-faint: #8790a6;
  --c-border: #dde1eb;
  --c-hairline: #e4e7ef;
  --c-surface: #ffffff;
  --c-surface-2: #f6f8fb;
  --c-success: #0f9d6b;
  --c-success-soft: #e7f7f0;
  --c-warning: #d98324;
  --c-warning-soft: #fdf3e7;
  --c-danger: #e5484d;
  --c-danger-soft: #fdeaea;
  --c-radius: 8px;
  --c-radius-sm: 4px;
  --c-radius-pill: 999px;
  --c-shadow: 0 1px 2px rgba(20, 28, 51, .06), 0 4px 12px rgba(20, 28, 51, .06);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;

  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--c-text);
  line-height: 1.55;
  max-width: 1120px;
  margin: var(--s-4) auto;
  padding: var(--s-5) var(--s-4) var(--s-6);
  font-size: 14px;
  /* Transparent so the site's own theme background shows through (1.1.6) —
     the admin shell's pale canvas looked like an unstyled grey box dropped
     onto the page when the surrounding theme wasn't the same colour. */
  background: transparent;
  border-radius: var(--c-radius);
}
.ks-cand *, .ks-cand *::before, .ks-cand *::after { box-sizing: border-box; }
.ks-cand h1, .ks-cand h2, .ks-cand h3 { margin: 0; line-height: 1.25; color: var(--c-text); font-weight: 700; }
.ks-cand h1 { font-size: 26px; letter-spacing: -.01em; }
.ks-cand h2 { font-size: 18px; }
.ks-cand h3 { font-size: 15px; }
.ks-cand p { margin: 0; }

/* Plain body links use the accent; anything styled as a button keeps its own
   colour regardless (see the file header for why this has to be :not()). */
.ks-cand a:not([class*="ks-cand-btn"]) { color: var(--c-accent); text-decoration: none; }
.ks-cand a:not([class*="ks-cand-btn"]):hover { text-decoration: underline; }
.ks-cand a.ks-cand-btn { color: var(--c-text); text-decoration: none; }
.ks-cand a.ks-cand-btn--primary { color: var(--c-accent-fg); }
.ks-cand a.ks-cand-btn--danger { color: #fff; }

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

.ks-cand-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5); }
.ks-cand-lede { color: var(--c-mute); margin-top: var(--s-1); max-width: 60ch; font-size: 15px; }

/* ---- buttons (mirrors .ks-btn) --------------------------------------- */

.ks-cand-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  font: inherit; font-weight: 600; line-height: 1.2;
  border: 1px solid var(--c-border); border-radius: var(--c-radius-sm);
  cursor: pointer; background: var(--c-surface); color: var(--c-text);
  text-decoration: none; transition: background .12s ease, border-color .12s ease;
}
.ks-cand-btn:hover { background: var(--c-surface-2); border-color: var(--c-faint); text-decoration: none; }
.ks-cand-btn--primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-fg); }
.ks-cand-btn--primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.ks-cand-btn--danger { background: transparent; border-color: var(--c-danger); color: var(--c-danger); }
.ks-cand-btn--danger:hover { background: var(--c-danger-soft); }
.ks-cand-btn--sm { padding: var(--s-1) var(--s-3); font-size: 13px; }

/* ---- notices, pills, chips (mirrors .ks-notice / .ks-pill) ---------- */

.ks-cand-notice {
  background: var(--c-success-soft); color: var(--c-success);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  border-radius: var(--c-radius-sm); border-left: 3px solid var(--c-success);
  font-weight: 500;
}
.ks-cand-pill {
  display: inline-block; padding: 2px var(--s-2); border-radius: var(--c-radius-pill);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  background: var(--c-accent-soft); color: var(--c-accent);
}
.ks-cand-pill--ok { background: var(--c-success-soft); color: var(--c-success); }
.ks-cand-pill--warn { background: var(--c-warning-soft); color: var(--c-warning); }
.ks-cand-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ks-cand-chip { padding: 2px 10px; border-radius: var(--c-radius-pill); background: var(--c-accent-soft); color: var(--c-accent); font-size: 12px; font-weight: 600; }

/* ---- layout blocks (mirrors .ks-card: shadow, no border) ------------ */

.ks-cand-panel { background: var(--c-surface); box-shadow: var(--c-shadow); border-radius: var(--c-radius); padding: var(--s-5); }
.ks-cand-panel + .ks-cand-panel,
.ks-cand-panel + .ks-cand-form { margin-top: var(--s-4); }
.ks-cand-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.ks-cand-muted { color: var(--c-mute); font-size: 14px; }
.ks-cand-hint { color: var(--c-faint); font-size: 12px; margin-top: var(--s-1); }

/* ---- filter bar (a card, like the admin screens' own filter forms) -- */

.ks-cand-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3); align-items: end; }
.ks-cand-filter .ks-cand-field--wide { grid-column: span 2; }
@media (max-width: 640px) { .ks-cand-filter .ks-cand-field--wide { grid-column: auto; } }

.ks-cand-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin: var(--s-5) 0 var(--s-4); }
.ks-cand-count { font-weight: 600; }
.ks-cand-unlock {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  border-radius: var(--c-radius-sm); border-left: 3px solid var(--c-accent); background: var(--c-accent-soft);
}
.ks-cand-unlock--on { border-left-color: var(--c-success); background: var(--c-success-soft); }

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

.ks-cand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--s-4); }
.ks-cand-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--c-surface); box-shadow: var(--c-shadow); border-radius: var(--c-radius);
  padding: var(--s-4);
}
.ks-cand-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.ks-cand-card__name { font-size: 16px; font-weight: 700; }
.ks-cand-card__years { flex: none; font-size: 12px; font-weight: 600; color: var(--c-mute); background: var(--c-surface-2); border-radius: var(--c-radius-pill); padding: 2px 10px; }
.ks-cand-card__where { color: var(--c-mute); font-size: 13px; }
.ks-cand-card__about { color: var(--c-text); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ks-cand-card__foot { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--c-hairline); display: flex; flex-direction: column; gap: var(--s-3); }
.ks-cand-contact { display: grid; gap: var(--s-1); font-size: 14px; }
.ks-cand-contact a { font-weight: 600; word-break: break-all; }
.ks-cand-locked { color: var(--c-faint); font-size: 13px; }
.ks-cand-card__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

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

.ks-cand-form { display: grid; gap: var(--s-4); }
.ks-cand-section { background: var(--c-surface); box-shadow: var(--c-shadow); border-radius: var(--c-radius); padding: var(--s-5); }
.ks-cand-section__title { font-size: 15px; font-weight: 700; margin-bottom: var(--s-1); }
.ks-cand-section__lede { color: var(--c-mute); font-size: 13px; margin-bottom: var(--s-4); }
.ks-cand-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
.ks-cand-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 720px) { .ks-cand-grid-2, .ks-cand-grid-3 { grid-template-columns: 1fr; } }
.ks-cand-field { display: grid; gap: var(--s-1); align-content: start; }
.ks-cand-field > label, .ks-cand-field > .ks-cand-label { font-weight: 600; font-size: 13px; }
.ks-cand-input, .ks-cand-select, .ks-cand-textarea {
  width: 100%; font: inherit;
  padding: var(--s-2) var(--s-3);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--c-radius-sm);
  color: var(--c-text);
}
.ks-cand-input:focus, .ks-cand-select:focus, .ks-cand-textarea:focus, .ks-cand-multi > summary:focus-visible {
  outline: 2px solid var(--c-accent-soft); outline-offset: 1px; border-color: var(--c-accent);
}
.ks-cand-textarea { min-height: 88px; resize: vertical; }
.ks-cand-input--narrow { max-width: 160px; }
.ks-cand-consent { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border-radius: var(--c-radius-sm); background: var(--c-surface-2); }
.ks-cand-consent input { margin-top: 3px; }
.ks-cand-submit { display: flex; justify-content: flex-end; }

/* checkbox dropdown (multi-select without a native <select multiple>) */
.ks-cand-multi { position: relative; }
.ks-cand-multi > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border: 1px solid var(--c-border); border-radius: var(--c-radius-sm);
  background: var(--c-surface); color: var(--c-text);
}
.ks-cand-multi > summary::-webkit-details-marker { display: none; }
.ks-cand-multi > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--c-mute); border-bottom: 2px solid var(--c-mute); transform: rotate(45deg) translateY(-2px); flex: none; }
.ks-cand-multi[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.ks-cand-multi__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-cand-multi__label.is-placeholder { color: var(--c-faint); }
.ks-cand-multi__panel {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--c-surface); border-radius: var(--c-radius-sm);
  box-shadow: 0 2px 6px rgba(20, 28, 51, .08), 0 12px 28px rgba(20, 28, 51, .1);
  padding: var(--s-3);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-3);
  max-height: 280px; overflow: auto;
}
@media (max-width: 480px) { .ks-cand-multi__panel { grid-template-columns: 1fr; } }
.ks-cand-multi__panel label { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2); border-radius: var(--c-radius-sm); cursor: pointer; font-size: 14px; }
.ks-cand-multi__panel label:hover { background: var(--c-surface-2); }

/* work history rows */
.ks-cand-history { display: grid; gap: var(--s-3); }
.ks-cand-history__row { display: grid; grid-template-columns: 1.3fr 1.3fr .7fr .7fr 1.6fr; gap: var(--s-2); align-items: start; }
@media (max-width: 860px) { .ks-cand-history__row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ks-cand-history__row { grid-template-columns: 1fr; } }
.ks-cand-history__head { display: grid; grid-template-columns: 1.3fr 1.3fr .7fr .7fr 1.6fr; gap: var(--s-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-mute); }
@media (max-width: 860px) { .ks-cand-history__head { display: none; } }

/* history timeline on the candidate's own profile */
.ks-cand-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--s-4); border-left: 2px solid var(--c-hairline); display: grid; gap: var(--s-4); }
.ks-cand-timeline li { position: relative; }
.ks-cand-timeline li::before { content: ""; position: absolute; left: calc(-1 * var(--s-4) - 6px); top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); }
.ks-cand-timeline__role { font-weight: 700; }
.ks-cand-timeline__meta { color: var(--c-mute); font-size: 13px; }

/* ---- profile summary & stat strip ------------------------------------ */

.ks-cand-profile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: start; }
@media (max-width: 640px) { .ks-cand-profile { grid-template-columns: 1fr; } }
.ks-cand-stats { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-3); }
.ks-cand-stat { font-size: 13px; color: var(--c-mute); }
.ks-cand-stat strong { display: block; font-size: 18px; font-weight: 700; color: var(--c-text); }
.ks-cand-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-start; }

.ks-cand-empty { background: var(--c-surface); box-shadow: var(--c-shadow); border-radius: var(--c-radius); text-align: center; padding: var(--s-6) var(--s-4); color: var(--c-mute); }
.ks-cand-pager { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-5); color: var(--c-mute); font-size: 14px; }

/* employer dashboard */
.ks-cand-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }