/* cvtailore — plain UI. No theme, no decoration. Just readable boxes and text. */

:root {
  color-scheme: light;

  /* Greyscale for everything that is structure: boxes, rules, type. Hue is
     reserved for status, and there are exactly four of them. They are mixed
     dark and low in saturation on purpose, so a page reads as a form someone
     stamped rather than as a dashboard: at a glance the colour is barely
     there, and up close it tells you which of four things happened. */
  --bg:      #f1f1f1;   /* page behind the content */
  --card:    #ffffff;   /* every box */
  --card-2:  #f5f5f5;   /* subtle inset (pre, table stripes) */

  --tx:      #101010;   /* body text */
  --tx-2:    #3a3a3a;   /* secondary */
  --mu:      #707070;   /* muted / hints */

  --brd:     #cdcdcd;   /* every border */
  --brd-2:   #e4e4e4;   /* light divider */

  --accent:  #101010;   /* links + primary button */
  --accent-2:#3a3a3a;

  --ok:      #1f6b41;   /* finished, kept, scheduled */
  --err:     #9c2b2b;   /* failed, refused, deleted */
  --warn:    #8a5510;   /* waiting on you */
  --info:    #2b567f;   /* said in passing, nothing to do */

  --ok-soft:   #eaf3ed;
  --err-soft:  #f8ebeb;
  --warn-soft: #faf1e3;
  --info-soft: #eaf0f6;

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

  --r: 6px;

  /* aliases kept so older inline style="" references still resolve */
  --paper: var(--bg); --paper-2: var(--card); --paper-3: var(--card-2); --paper-4: var(--brd-2);
  --ink: var(--tx); --ink-2: var(--tx-2); --ink-3: var(--mu); --ink-4: var(--mu);
  --rule: var(--brd); --rule-2: var(--brd-2);
  --ox: var(--accent); --ox-2: var(--accent-2); --ox-soft: var(--info-soft);
  --sur: var(--card); --sur2: var(--card-2); --sur3: var(--brd-2);
  --brd2: var(--brd); --tx2: var(--tx-2); --lime: var(--accent);
  --green: var(--ok); --red: var(--err); --yellow: var(--warn);
  --gold: var(--warn); --gold-soft: var(--warn-soft);
  --sky: var(--accent); --sky-soft: var(--info-soft);
  --font-sans: var(--font); --font-serif: var(--font); --font-mono: var(--mono-font);
  --mono: var(--mono-font);
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--tx);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 600; margin: 0; }
p { margin: 0 0 10px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
code { font-family: var(--mono-font); font-size: 0.9em; }

/* ---------- shell ---------- */
.app { min-height: 100%; display: flex; flex-direction: column; }
.paper-bg { background: var(--bg); }

.shell-header {
  display: flex; align-items: center; gap: 24px;
  padding: 0 20px; height: 52px;
  background: var(--card); border-bottom: 1px solid var(--brd);
  position: sticky; top: 0; z-index: 20;
}
.logomark {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 16px; color: var(--tx); text-decoration: none;
}
.logomark:hover { text-decoration: none; }
.lm-mark { color: var(--accent); }

.shell-nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.shell-nav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--r);
  color: var(--tx-2); font-size: 14px; text-decoration: none;
}
.shell-nav a:hover { background: var(--card-2); text-decoration: none; }
.shell-nav a.active { background: var(--accent); color: #fff; }
.shell-header .right { margin-left: auto; }

/* Who you are, and the corner link across to the other workspace. */
.shell-account {
  margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0;
}
.shell-email {
  font-size: 12.5px; color: var(--mu);
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-switch {
  flex-shrink: 0; background: none; font-family: inherit; cursor: pointer;
  padding: 5px 11px; border: 1px solid var(--brd); border-radius: var(--r);
  font-size: 12.5px; color: var(--mu); text-decoration: none; white-space: nowrap;
}
.ws-switch:hover { background: var(--card-2); color: var(--tx); text-decoration: none; }
.ws-switch.active, .ws-switch.active:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ---------- sign in / sign up ---------- */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--card); border: 1px solid var(--brd); border-radius: var(--r);
  padding: 28px 24px;
}
.auth-card .logomark { margin-bottom: 14px; }
.auth-title { font-size: 21px; font-weight: 600; margin: 0 0 4px; }
.auth-card .page-subtitle { margin-bottom: 14px; }
.auth-points { list-style: none; margin: 0 0 20px; padding: 0; font-size: 13px; color: var(--mu); }
.auth-points li { position: relative; padding-left: 18px; margin-top: 7px; line-height: 1.45; }
.auth-points li::before { content: '\2713'; position: absolute; left: 0; color: var(--tx); }
.auth-card .btn-lg { width: 100%; justify-content: center; margin-top: 4px; }
.auth-alt { font-size: 13px; color: var(--mu); text-align: center; margin: 18px 0 0; }

.main-body { flex: 1; min-height: 0; }
.page-wrap { max-width: 900px; margin: 0 auto; padding: 24px 20px 80px; }
.page-wrap.wide { max-width: 1200px; }
.scroll-y { overflow-y: auto; }

/* ---------- headings ---------- */
.page-title { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
/* The title and the page's own buttons on one line, the buttons at the right. */
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 4px; }
.title-row .page-title { margin: 0; }
.title-actions { margin: 0; justify-content: flex-end; }
.page-subtitle { font-size: 14px; color: var(--mu); margin: 0 0 18px; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--tx-2); }
.serif { font-family: var(--font); }
.mono { font-family: var(--mono-font); }
.dim, .muted, .mu { color: var(--mu); }
.hairline, .rule, .line { border: 0; border-top: 1px solid var(--brd-2); flex: 1; height: 1px; }

/* ---------- boxes ---------- */
.panel, .card, .jd-paper, .subpanel, .entry-card, .resume-card, .llm-card {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 16px;
}
.subpanel, .entry-card { background: var(--card-2); }
.subpanel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.subpanel-head h3 { font-size: 15px; }
.row-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }

.empty {
  padding: 30px 18px; text-align: center; color: var(--mu); font-size: 14px;
  line-height: 1.55; background: var(--card-2);
  border: 1px dashed var(--brd); border-radius: var(--r);
}

.split-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .split-2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.detail-grid, .composer-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.toolbar { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ---------- forms ---------- */
.field-row { margin-bottom: 14px; }
.fl { display: block; font-size: 13px; font-weight: 600; color: var(--tx-2); margin-bottom: 5px; }
.fh { font-size: 12.5px; color: var(--mu); margin-top: 5px; }

input, textarea, select {
  width: 100%;
  font: inherit; font-size: 14px;
  color: var(--tx); background: var(--card);
  border: 1px solid var(--brd); border-radius: var(--r);
  padding: 8px 10px;
  outline: 0;
}
select { cursor: pointer; }
textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.09);
}
:is(button, a, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r);
}
input::placeholder, textarea::placeholder { color: #9b9b9b; }
input[type=checkbox], input[type=radio] { width: auto; }

.prof-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .prof-grid { grid-template-columns: 1fr 1fr; } }

.jd-area { width: 100%; min-height: 180px; font-size: 14px; }
.token-count { font-size: 12.5px; color: var(--mu); margin-bottom: 6px; }

/* choice row (tones, etc.) — plain buttons, no segmented pill */
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button {
  padding: 7px 12px; font-size: 13px;
  border: 1px solid var(--brd); border-radius: var(--r);
  background: var(--card); color: var(--tx-2);
}
.seg button:hover { border-color: var(--mu); }
.seg button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.seg button:disabled { opacity: 0.4; cursor: not-allowed; }
.seg button:disabled:hover { border-color: var(--brd); }
select:disabled, input:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; background: var(--card-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; font-size: 14px;
  border: 1px solid var(--brd); border-radius: var(--r);
  background: var(--card); color: var(--tx);
  text-decoration: none; white-space: nowrap;
}
.btn { transition: background 90ms ease, border-color 90ms ease; }
.btn:hover { background: var(--card-2); text-decoration: none; }
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-ox, .btn-primary, .bp { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ox:hover, .btn-primary:hover, .bp:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-danger, .bd { color: var(--err); border-color: var(--brd); }
.btn-danger:hover, .bd:hover { border-color: #e3bebe; }
.btn-danger:hover, .bd:hover { background: var(--err-soft); }
.btn-ghost, .btn-secondary { background: transparent; }
.btn-lg { padding: 10px 18px; font-size: 15px; }
.bsm { padding: 5px 10px; font-size: 13px; }
.icon-btn { padding: 5px 8px; }
.kbd { display: none; }

/* Icons are 15px line drawings that inherit the colour of whatever they sit
   in, so they never introduce a colour of their own. */
.ico { width: 15px; height: 15px; flex: none; vertical-align: -2px; }
.shell-nav .ico { opacity: 0.75; }
.shell-nav a.active .ico { opacity: 1; }
.pchip-dl { cursor: pointer; text-decoration: none; }
.pchip-dl:hover { background: var(--ok-soft); color: var(--ok); }
.pchip .ico { width: 12px; height: 12px; vertical-align: -1px; }

/* ---------- status ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px; font-size: 12px;
  border: 1px solid var(--brd); background: var(--card-2); color: var(--tx-2);
}
.badge .bd-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Tinted, not filled. A solid black pill on every row was the loudest thing
   on the page and it was saying "fine". */
.badge.done { background: var(--ok-soft); border-color: #bfdac9; color: var(--ok); }
.badge.error { background: var(--err-soft); border-color: #e3bebe; color: var(--err); font-weight: 600; }
.badge.pending { background: var(--warn-soft); border-color: #e6d3b3; color: var(--warn); }
.bp2 { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }

.chip, .tag, .tb-tag {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 12px; background: var(--card-2);
  border: 1px solid var(--brd-2); color: var(--tx-2);
}
.chip-ok { background: var(--tx); border-color: var(--tx); color: #fff; }
.chip-err { background: var(--err-soft); border-color: #e3bebe; color: var(--err); font-weight: 600; }
.chip-ox, .chip-sky { background: var(--card-2); border-color: var(--brd); color: var(--tx-2); }

/* What already exists for a job. Four of these sit together on a row, so they
   are the quietest thing that can still be read: a tint, an icon, no fill. */
.pchip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 6px; border-radius: 20px;
  font-size: 11.5px; font-weight: 500;
  background: var(--ok-soft); border: 1px solid #cfe2d7; color: var(--ok);
}
.pchip.wait { background: var(--warn-soft); border-color: #ecd9bb; color: var(--warn); }
/* A document whose prerequisite is not met yet: the CV before the analysis,
   the letter before the CV, the email before the letter. Muted and not
   clickable, so the order is obvious without reading the tooltip. */
.pchip.locked { background: transparent; border-color: var(--brd); color: var(--mu);
  cursor: not-allowed; opacity: 0.55; }
.pchip.locked .ico { opacity: 0.55; }
/* Facts about a listing rather than states of one: what a board tagged it, what
   kind of contract it is, where it came from. Hue is reserved for the four
   statuses, and none of these is a status — so they are grey, and the one that
   is worth spotting across a page is grey and darker. */
.pchip.quiet { background: var(--card-2); border-color: var(--brd-2); color: var(--mu); }
.pchip.mark  { background: var(--card-2); border-color: var(--brd); color: var(--tx); }
.pchip .ico { opacity: 0.85; }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

/* solid = ok, ring = error, hollow grey = pending */
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mu); display: inline-block; flex-shrink: 0; }
.dot-ok { background: var(--ok); }
.dot-err { background: var(--card); box-shadow: inset 0 0 0 2px var(--err); }
.dot-pending { background: var(--card); box-shadow: inset 0 0 0 2px var(--mu); }

/* Severity reads from the weight of the left rule, not from hue. */
.alert {
  padding: 10px 12px; border-radius: var(--r); font-size: 13.5px;
  border: 1px solid var(--brd); border-left: 3px solid var(--brd);
  background: var(--card-2); color: var(--tx-2);
  margin-bottom: 14px;
}
.alert.info { border-left-color: var(--info); background: var(--info-soft); }
.alert.warn { border-left-color: var(--warn); background: var(--warn-soft); color: var(--tx); }
.alert.error {
  border-left-color: var(--err); border-left-width: 4px;
  background: var(--err-soft); color: var(--tx); font-weight: 500;
}
.alert.ok { border-left-color: var(--ok); background: var(--ok-soft); }

.field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--tx-2); margin-bottom: 5px; }

.prompt-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.prompt-list-item { display: block; cursor: pointer; }
.prompt-list-item:hover { background: var(--card-2); }
.prompt-list-active { background: var(--card-2) !important; box-shadow: inset 3px 0 0 var(--tx); }

/* ---------- the run, drawn above the prompt editors ---------- */
/* Same vocabulary as the pipeline map: who does the work is carried by the
   fill, because this palette has no colour to spend on it. Solid means a model
   is asked, outline means arithmetic, dashed means something off this machine. */
.run-map {
  margin: 0 0 20px; padding: 0;
  background: var(--card); border: 1px solid var(--brd); border-radius: var(--r);
}
.run-map-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 12px 15px; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.run-map:not(.shut) .run-map-head { border-bottom: 1px solid var(--brd-2); }
.run-map-title { font-size: 14.5px; font-weight: 600; }
.run-map-toggle { font-size: 12px; color: var(--mu); white-space: nowrap; }
.run-map-head:hover .run-map-toggle { color: var(--tx-2); }
.run-map-lead {
  margin: 0; padding: 12px 15px 0; max-width: 78ch;
  font-size: 13.5px; color: var(--tx-2);
}

/* One row, scrolled sideways rather than wrapped: the order is the whole point
   of the thing, and a wrapped row reads as two runs. */
.run-strip-wrap { overflow-x: auto; padding: 12px 15px 4px; }
.run-strip {
  display: flex; align-items: stretch; gap: 0;
  margin: 0; padding: 0 0 8px; list-style: none;
}
.run-node {
  position: relative; flex: 0 0 auto; min-width: 118px; max-width: 168px;
  padding: 8px 10px 9px 12px; margin-right: 14px;
  background: var(--card); border: 1px solid var(--brd); border-radius: var(--r);
}
.run-node:last-child { margin-right: 0; }
/* The line between one step and the next. */
.run-node::after {
  content: ''; position: absolute; right: -14px; top: 50%;
  width: 14px; height: 1px; background: var(--brd);
}
.run-node:last-child::after { display: none; }
.run-node.k-py { background: var(--card-2); border-style: solid; }
.run-node.k-net { border-style: dashed; }
.run-node.pickable { cursor: pointer; }
.run-node.pickable:hover { border-color: var(--tx-2); }
.run-node.on { border-color: var(--tx); box-shadow: inset 0 0 0 1px var(--tx); }
.run-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-bottom: 5px; border-radius: 50%;
  border: 1px solid var(--brd); background: var(--card);
  font-family: var(--mono-font); font-size: 10px; color: var(--mu);
}
.run-node.k-ai .run-n { background: var(--tx); border-color: var(--tx); color: var(--card); }
.run-label { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.run-key {
  display: block; margin-top: 3px;
  font-family: var(--mono-font); font-size: 10.5px; color: var(--tx-2);
  overflow: hidden; text-overflow: ellipsis;
}
.run-note { display: block; margin-top: 3px; font-size: 10.5px; color: var(--mu); line-height: 1.3; }

.run-map-key { padding: 0 15px 13px; font-size: 12px; }
.run-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--brd); background: var(--card); vertical-align: -1px;
}
.run-dot.k-ai { background: var(--tx); border-color: var(--tx); }
.run-dot.k-py { background: var(--card-2); }
.run-dot.k-net { border-style: dashed; background: var(--card); }

/* ---------- the selected prompt's own card ---------- */
.role-card {
  margin: 0 0 14px; padding: 13px 16px 15px;
  background: var(--card); border: 1px solid var(--brd); border-radius: var(--r);
  border-left: 3px solid var(--tx);
}
.role-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 11px; }
.role-at { font-size: 12px; color: var(--tx-2); }
.role-where {
  margin-left: auto; font-family: var(--mono-font); font-size: 11px; color: var(--mu);
}
.role-grid { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 7px 16px; margin: 0; }
.role-grid dt {
  font-size: 12px; font-weight: 600; color: var(--tx-2); line-height: 1.45;
}
.role-grid dd { margin: 0; font-size: 13.5px; color: var(--tx-2); line-height: 1.45; }
.tips-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 14px 18px; }
.tips-grid dt { font-size: 13px; color: var(--tx); }
@media (max-width: 640px) { .tips-grid { grid-template-columns: 1fr; gap: 4px 0; } .tips-grid dd { margin-bottom: 10px; } }
.role-tune {
  margin-top: 13px; padding: 10px 12px;
  background: var(--card-2); border: 1px solid var(--brd-2);
  border-radius: var(--r);
}
.role-tune-title { font-size: 12px; font-weight: 600; color: var(--tx-2); margin-bottom: 4px; }
.role-tune p { margin: 0; font-size: 13.5px; color: var(--tx-2); line-height: 1.5; }

/* ---------- the sidebar rows, now numbered ---------- */
.pli-head { display: flex; align-items: center; gap: 7px; }
.pli-n {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--tx); color: var(--card);
  font-family: var(--mono-font); font-size: 10px;
}
.pli-label { font-weight: 500; font-size: 13.5px; line-height: 1.25; }
/* "sometimes" is the common case on the CV side and the quiet one; "always" is
   the exception worth marking, so only it is drawn with any weight. */
.pli-when {
  flex: 0 0 auto; margin-left: auto;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--mu); white-space: nowrap;
}
.pli-when.pli-always { color: var(--tx-2); font-weight: 600; }
.pli-desc { font-size: 12px; margin-top: 3px; line-height: 1.35; }

.field-hint { font-size: 12px; margin: 2px 0 6px; line-height: 1.45; max-width: 78ch; }

@media (max-width: 860px) {
  .role-grid { grid-template-columns: 1fr; gap: 2px; }
  .role-grid dd { margin-bottom: 7px; }
  .role-where { margin-left: 0; width: 100%; }
}

/* ---------- lists (jobs, letters, profiles, index) ---------- */
.jobs-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 760px) { .jobs-grid { grid-template-columns: 1fr 1fr; } }

.job-card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px; margin: 0;
  background: var(--card); border: 1px solid var(--brd); border-radius: var(--r);
}
.job-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.job-card-link { color: var(--tx); min-width: 0; }
.job-card-link:hover { text-decoration: none; }
.job-card-title { font-size: 15px; font-weight: 600; }
.job-card-link:hover .job-card-title { color: var(--accent); }
.job-card-co { font-size: 13px; color: var(--mu); margin-top: 2px; }
.job-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12.5px; color: var(--mu);
  border-top: 1px solid var(--brd-2); padding-top: 10px; margin-top: 2px;
}
.job-actions { display: flex; gap: 6px; }

.lrow {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; margin-bottom: 8px;
  background: var(--card); border: 1px solid var(--brd); border-radius: var(--r);
  color: var(--tx);
}
.lrow { transition: border-color 90ms ease, box-shadow 90ms ease; }
.lrow:hover { border-color: var(--accent); text-decoration: none; }
a.lrow:hover, .jrow:hover .jrow-main { box-shadow: inset 2px 0 0 var(--accent); }
.lrow-title { font-size: 14.5px; font-weight: 500; }
.lrow-sub { font-size: 12.5px; color: var(--mu); margin-top: 2px; }

/* A saved job. The link takes the whole row except the tick, which has to
   stay pressable, so it sits outside the anchor rather than inside it. */
.jrow { padding: 0; }
.jrow:hover { border-color: var(--brd); }
.jrow-main {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0; padding: 11px 14px; color: var(--tx);
  border-radius: var(--r) 0 0 var(--r);
}
.jrow-main:hover { text-decoration: none; background: var(--card-2); }
.jrow-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.jrow-chips:empty { display: none; }

/* The id La Bonne Alternance files a company under. It is the thing you match
   against their own page, so it is set apart from the SIRET beside it. */
.alt-id { color: var(--tx); font-weight: 600; }

/* A row that is finished with: a company this account has written to, a
   listing put aside, a job that has been applied for. It reads as done at a
   glance, which is the point of a list you go down once. */
.jrow.row-done { background: var(--ok-soft); border-color: #cfe2d7; }
.jrow.row-done .jrow-main:hover { background: transparent; }
.jrow.row-done .lrow-title { color: var(--ok); }

/* Download, on a profile row. Outside the anchor for the same reason the tick
   is, and held to its own width so a long profile name never squeezes it. */
.prof-dl { flex: none; margin-right: 10px; }

.applied-tick {
  flex: none; margin: 0 12px 0 4px; padding: 5px 11px;
  font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer;
  background: var(--card); color: var(--mu);
  border: 1px dashed var(--brd); border-radius: 999px;
}
.applied-tick:hover { color: var(--tx); border-color: var(--accent); }
.applied-tick.on {
  background: var(--ok-soft); border-style: solid; border-color: #bfdac9;
  color: var(--ok); font-weight: 600;
}
.applied-tick .ico { width: 13px; height: 13px; }

/* The row opens the job in its own tab, and the arrow is the only warning a
   link gets to give before it does that. Muted, because it is on every row. */
.jrow-ext {
  margin-left: 6px; font-size: 11px; color: var(--mu);
  vertical-align: 1px; opacity: 0.7;
}
.jrow-main:hover .jrow-ext { color: var(--tx-2); opacity: 1; }

/* ---------- filtering and paging the saved jobs ---------- */
.jfilters { padding: 12px 14px; }
.jfilters input[type=search] { flex: 1 1 240px; min-width: 180px; }
.jfilters select { flex: 0 1 auto; width: auto; max-width: 220px; }

.jcount {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  font-size: 15px; margin: 18px 0 10px;
}
.jcount-side {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.jcount .dim { font-weight: 400; font-size: 13px; }
#j-open-all-said:empty { display: none; }

.pager {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--brd-2);
}
.pager-at { font-size: 13px; color: var(--mu); padding: 0 4px; }
.pager-at strong { color: var(--tx); }
.pager-size {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--mu); white-space: nowrap;
}
.pager-size select { width: auto; padding: 4px 8px; font-size: 13px; }

@media (max-width: 640px) {
  .jfilters select { max-width: none; flex: 1 1 140px; }
  .pager-size { width: 100%; justify-content: flex-end; }
}

.idx-day { margin-bottom: 22px; }
.idx-day-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.idx-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 6px;
  background: var(--card); border: 1px solid var(--brd); border-radius: var(--r);
  color: var(--tx);
}
.idx-row:hover { border-color: var(--accent); text-decoration: none; }
.idx-num { display: none; }
.idx-title { font-size: 14.5px; font-weight: 500; }
.idx-co { font-size: 12.5px; color: var(--mu); margin-top: 2px; }
.idx-time { font-size: 12.5px; color: var(--mu); margin-left: auto; white-space: nowrap; }

/* The CV list's header on the Make CV page, matching a day heading below it. */
.cv-list-head { display: flex; align-items: center; gap: 10px; margin: 26px 0 10px; }
.id-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mu); margin-bottom: 16px; }


/* ---------- technical detail (collapsed by default) ---------- */
details.llm-fold, details.tech {
  border: 1px solid var(--brd); border-radius: var(--r);
  background: var(--card); margin-bottom: 10px;
}
details.llm-fold > summary, details.tech > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; cursor: pointer; font-size: 13.5px; color: var(--tx-2);
  list-style: none;
}
details.llm-fold > summary > :last-child,
details.tech > summary > :last-child { margin-left: auto; }
details.llm-fold > summary:hover, details.tech > summary:hover { background: var(--card-2); }
details.llm-fold > summary::-webkit-details-marker,
details.tech > summary::-webkit-details-marker { display: none; }
details.llm-fold > summary::before, details.tech > summary::before { content: "▸ "; color: var(--mu); }
details.llm-fold[open] > summary::before, details.tech[open] > summary::before { content: "▾ "; }
details.tech > .tech-body { padding: 0 12px 12px; }

.pre-block {
  font-family: var(--mono-font); font-size: 12px; line-height: 1.5;
  background: var(--card-2); border: 1px solid var(--brd-2); border-radius: var(--r);
  padding: 10px; margin: 0;
  white-space: pre-wrap; word-break: break-word;
  max-height: 340px; overflow: auto; color: var(--tx-2);
}

details.llm-fold > .pre-block, details.tech .pre-block { margin: 0 12px 12px; }

.llm-card { padding: 12px; margin-bottom: 10px; }
.llm-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.llm-label { font-weight: 600; }
.llm-kv { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 3px 10px; font-size: 12px; color: var(--tx-2); }
.llm-k { color: var(--mu); }
.llm-v { word-break: break-all; }
.llm-wait { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mu); margin-top: 8px; }
.llm-bar { display: inline-block; width: 60px; height: 3px; border-radius: 2px; background: var(--brd);
  background-image: linear-gradient(90deg, var(--accent) 0 40%, transparent 40%);
  background-size: 200% 100%; animation: slide 1.1s linear infinite; }
@keyframes slide { to { background-position: -200% 0; } }

/* The user-facing CV progress bar. A quiet strip on top of the run page:
   one small line of phase + percent, a thin track underneath. Kept compact
   on purpose — a run is watched at a glance, not read.
   The full hint is on hover; the phase name alone is enough on the page. */
.run-progress { display: grid; gap: 4px; width: 100%; max-width: 380px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--card-2); border: 1px solid var(--brd); }
.run-progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.run-progress-phase { font-weight: 500; font-size: 12.5px; color: var(--tx); }
.run-progress-pct   { font-size: 12px; color: var(--mu); font-variant-numeric: tabular-nums; }
.run-progress-track { position: relative; height: 4px; border-radius: 2px; background: var(--brd); overflow: hidden; }
.run-progress-fill  { position: absolute; inset: 0; width: 0%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
  transition: width 0.6s ease-out; }
.run-progress-track.stripes .run-progress-fill {
  background-image: linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.22) 75%,
    transparent 75%, transparent);
  background-size: 14px 14px; animation: stripes 1.2s linear infinite; }
@keyframes stripes { from { background-position: 0 0; } to { background-position: 14px 0; } }
.run-progress-actions { margin-top: 4px; }
.retry-bar { display: flex; align-items: center; gap: 8px; margin: 10px 0; }

.timeline { display: grid; gap: 6px; }
.timeline-item { padding: 8px 10px; border-left: 3px solid var(--brd); background: var(--card-2); border-radius: 0 var(--r) var(--r) 0; }
.timeline-item.done { border-left-color: var(--tx); }
.timeline-item.error { border-left-color: var(--tx); border-left-width: 5px; }
.timeline-item.pending { border-left-color: var(--mu); }

.trace-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stats-4 { grid-template-columns: repeat(4, 1fr); }
.trace-stat { padding: 8px 10px; background: var(--card-2); border: 1px solid var(--brd-2); border-radius: var(--r); }
.trace-stat-label { font-size: 12px; color: var(--mu); }
.trace-stat-value { font-family: var(--mono-font); font-size: 15px; margin-top: 2px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--brd); margin-bottom: 14px; }
.tab { padding: 8px 12px; font-size: 14px; color: var(--mu); border-bottom: 2px solid transparent; }
.tab.active { color: var(--tx); border-bottom-color: var(--accent); }

/* ---------- what went wrong ---------- */
.issue-list { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; }
.issue-list li {
  padding: 6px 0; border-top: 1px solid var(--brd-2);
  color: var(--tx-2); line-height: 1.45;
}
.issue-list li:first-child { border-top: 0; }
.issue-where {
  display: inline-block; min-width: 132px; margin-right: 8px;
  font-weight: 600; color: var(--tx);
}
.count-line {
  margin-top: 10px; padding: 8px 10px; border-radius: var(--r);
  background: var(--card-2); border: 1px solid var(--brd-2);
  font-family: var(--mono-font); font-size: 12px; color: var(--tx-2);
}

.tech-fold { margin-top: 10px; }
.tech-fold > summary {
  cursor: pointer; font-size: 12.5px; color: var(--mu);
  list-style: none; padding: 2px 0;
}
.tech-fold > summary::-webkit-details-marker { display: none; }
.tech-fold > summary::before { content: '▸ '; }
.tech-fold[open] > summary::before { content: '▾ '; }
.tech-fold > summary:hover { color: var(--tx); }
.tech-fold .pre-block { margin-top: 8px; }
@media (max-width: 860px) { .issue-where { display: block; min-width: 0; } }

/* ---------- resume-from-error card ---------- */
.resume-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-color: var(--tx); background: var(--card-2); }
.resume-card-main { display: flex; gap: 10px; flex: 1; min-width: 240px; }
.resume-card-icon { display: none; }
.resume-card-title { font-weight: 600; color: var(--err); }
.resume-card-error { font-size: 13px; color: var(--tx-2); margin-top: 3px; word-break: break-word; }
.resume-card-hint { font-size: 12.5px; color: var(--mu); margin-top: 5px; }

/* ---------- what this reads ---------- */
.scan-fold { margin-top: 12px; border-top: 1px solid var(--brd-2); padding-top: 10px; }
.scan-fold > summary {
  display: flex; align-items: baseline; gap: 6px;
  cursor: pointer; font-size: 13px; color: var(--tx-2); list-style: none;
}
.scan-fold > summary::-webkit-details-marker { display: none; }
.scan-fold > summary::before { content: "▸"; color: var(--mu); }
.scan-fold[open] > summary::before { content: "▾"; }
.scan-fold > summary > .dim { margin-left: auto; }
.scan-list { margin: 10px 0 0; padding-left: 18px; }
.scan-list li { font-size: 13px; color: var(--tx-2); line-height: 1.5; margin-bottom: 6px; }
.scan-list b { color: var(--tx); }

/* ---------- the page, line by line ----------
   One box per line the page will print. The payload holds the page's own
   breaks, so this is a list of what comes out rather than a drawing of it —
   which is the thing worth checking before spending a download on it. */
.cvl { border: 1px solid var(--brd); border-radius: var(--r); overflow: hidden; }
.cvl-sec {
  background: var(--bg-2, #f4f4f5); color: var(--tx);
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 10px; border-top: 1px solid var(--brd); border-bottom: 1px solid var(--brd);
}
.cvl-sec:first-child { border-top: 0; }
.cvl-line {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 10px; font-size: 12.5px; line-height: 1.45;
  border-top: 1px solid var(--brd-2);
}
.cvl-line:first-child { border-top: 0; }
.cvl-n {
  flex: none; width: 22px; text-align: right; color: var(--mu);
  font-size: 10.5px; font-variant-numeric: tabular-nums;
}
.cvl-b { flex: none; width: 7px; color: var(--tx-2); font-size: 11px; }
.cvl-t { flex: 1; color: var(--tx); }
.cvl-cont .cvl-t { color: var(--tx-2); }
.cvl-r { flex: none; color: var(--mu); font-size: 11.5px; white-space: nowrap; }

/* ---------- CV rendering ---------- */
.cv-kv { display: flex; gap: 10px; font-size: 14px; margin-bottom: 5px; }
.cv-k { min-width: 90px; color: var(--mu); flex-shrink: 0; }

.letter-body {
  background: var(--card); border: 1px solid var(--brd); border-radius: var(--r);
  padding: 24px; font-size: 15px; line-height: 1.7; white-space: pre-wrap;
}
.preview-frame { width: 100%; height: 800px; border: 1px solid var(--brd); border-radius: var(--r); background: var(--card); }

/* ---------- removed decoration ---------- */
.composer-hero { margin-bottom: 18px; }
.composer-eyebrow { display: none; }
.composer-title { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.composer-title .accent, .accent { color: inherit; }

/* ---------- pipeline map (/admin/pipeline) ---------- */
/* A numbered spine down the left, one card per step. Who does the work is
   carried by the fill of the number — solid means a model call — because the
   palette here has no colour to spend on it. */
.flow { position: relative; margin: 0; padding: 0; list-style: none; }
.flow::before {
  content: ''; position: absolute; left: 15px; top: 10px; bottom: 10px;
  width: 1px; background: var(--brd);
}
.flow-step { position: relative; padding-left: 46px; margin-bottom: 12px; }
.flow-step:last-child { margin-bottom: 0; }
.flow-num {
  position: absolute; left: 0; top: 12px;
  width: 31px; height: 31px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--brd);
  font-family: var(--mono-font); font-size: 13px; color: var(--tx-2);
}
.flow-step.k-ai .flow-num { background: var(--tx); border-color: var(--tx); color: var(--card); }
.flow-step.k-net .flow-num { border-style: dashed; }
.flow-card {
  background: var(--card); border: 1px solid var(--brd);
  border-radius: var(--r); padding: 13px 15px;
}
.flow-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.flow-title { font-size: 15px; font-weight: 600; }
.flow-card p { font-size: 14px; color: var(--tx-2); margin: 0 0 8px; }
.flow-card p:last-child { margin-bottom: 0; }
.flow-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--brd-2);
  font-family: var(--mono-font); font-size: 11.5px; color: var(--mu);
}
.flow-sub {
  margin: 10px 0 0; padding: 10px 12px;
  background: var(--card-2); border: 1px solid var(--brd-2);
  border-left: 3px solid var(--brd); border-radius: 0 var(--r) var(--r) 0;
}
.flow-sub-title { font-size: 12px; font-weight: 600; color: var(--tx-2); margin-bottom: 4px; }
.flow-sub p { font-size: 13.5px; }

/* The kind chip repeats what the number's fill says, in words. */
.kind {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 600; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--brd); color: var(--mu); white-space: nowrap;
}
.kind.k-ai { background: var(--tx); border-color: var(--tx); color: var(--card); }
.kind.k-net { border-style: dashed; }

.flow-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 12.5px; color: var(--mu); }
.flow-legend > span { display: inline-flex; align-items: center; gap: 6px; }

.flow-lead { max-width: 62ch; }
.flow-note { font-size: 14px; color: var(--tx-2); margin: 0; max-width: 74ch; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  /* Sidebar sits above the editor, capped so it can't push it off-screen. */
  .prompt-layout { grid-template-columns: 1fr; gap: 14px; }
  .prompt-layout > .panel:first-child { max-height: 210px; overflow-y: auto; }
}

@media (max-width: 720px) {
  /* Brand + workspace switch on one row, nav swipes horizontally underneath. */
  .shell-header { height: auto; min-height: 52px; padding: 8px 12px; gap: 10px; flex-wrap: wrap; }
  .logomark { order: 1; font-size: 15px; }
  /* Three pills now live here, so let them fall onto a second row on a narrow
     phone rather than pushing the header into a horizontal scroll. */
  .shell-account { order: 2; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .ws-switch { padding: 5px 9px; }
  /* The address is the first thing to go when the row gets tight. */
  .shell-email { display: none; }
  .shell-nav {
    order: 3; width: 100%; flex-wrap: nowrap; gap: 2px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .shell-nav::-webkit-scrollbar { display: none; }
  .shell-nav a { flex-shrink: 0; }

  .page-wrap { padding: 16px 12px 64px; }
  .page-title { font-size: 19px; }
  .panel, .card, .jd-paper, .subpanel, .entry-card, .resume-card, .llm-card {
    padding: 13px; margin-bottom: 12px;
  }
  .letter-body { padding: 16px; }

  /* 16px keeps iOS Safari from zooming the page when a field takes focus.
     !important because the JD and prompt editors set a smaller size inline. */
  input, textarea, select { font-size: 16px !important; }

  .btn { min-height: 40px; }
  .btn.bsm { min-height: 34px; }
  .seg button { min-height: 38px; }
  .toolbar { gap: 8px; }

  .flow-step { padding-left: 38px; }
  .flow::before { left: 13px; }
  .flow-num { width: 27px; height: 27px; font-size: 12px; top: 11px; }
  .flow-card { padding: 12px 13px; }

  .stats-4 { grid-template-columns: 1fr 1fr; }
  .llm-kv { grid-template-columns: 62px minmax(0, 1fr); }
  .preview-frame { height: 65vh; }
  .cv-k { min-width: 72px; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c2c2c2; border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Page rules ---------- */
.rule-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rule-table th {
  text-align: left; font-size: 12px; color: var(--mu); font-weight: 600;
  padding: 0 10px 6px 0; border-bottom: 1px solid var(--brd);
}
.rule-table td {
  padding: 7px 10px 7px 0; border-bottom: 1px solid var(--brd-2);
  vertical-align: top; color: var(--tx-2);
}
.rule-table tr:last-child td { border-bottom: 0; }
.rule-table .rule-num {
  font-family: var(--mono-font); font-size: 13px; color: var(--tx);
  white-space: nowrap; text-align: right; width: 1%;
}
.rule-where { white-space: nowrap; width: 1%; }
.rule-where .chip { margin-left: 4px; }
.rule-changed { font-weight: 600; color: var(--tx); }

/* ---------- Who talks to whom ---------- */
/* The diagram is drawn at a fixed width; a narrow window scrolls it rather
   than reflowing lanes that only mean something side by side. */
.wire-scroll { overflow-x: auto; padding-bottom: 4px; }
.wire { display: block; width: 100%; min-width: 940px; height: auto; }
.wire text { font-family: var(--font); }
.wire .w-lane-name { font-size: 12.5px; font-weight: 600; fill: var(--tx); }
.wire .w-lane-sub { font-size: 10.5px; fill: var(--mu); }
.wire .w-label { font-family: var(--mono-font); font-size: 11px; fill: var(--tx); }
.wire .w-note { font-size: 10.5px; fill: var(--mu); }
.wire .w-phase { font-size: 10.5px; font-weight: 600; fill: var(--mu); letter-spacing: .04em; }
.wire .w-line { stroke: var(--tx-2); stroke-width: 1.2; }
.wire .w-line.opt { stroke-dasharray: 4 3; stroke: var(--mu); }
.wire .w-life { stroke: var(--brd); stroke-width: 1; stroke-dasharray: 3 4; }
.wire .w-box { fill: var(--card-2); stroke: var(--brd); }
.wire .w-rule { stroke: var(--brd-2); stroke-width: 1; }

/* ---------- the job board ---------- */

/* Which half of the page you are on: the board, or your own list. Two buttons
   rather than tabs, because they are two different things to do and not two
   views of one thing. */
.board-modes { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }

/* Nine filters wrap onto as many lines as they need. They are equal in weight
   on purpose — none of them is the main one, and which one you reach for
   depends entirely on what you are looking for that day. */
.board-filters { flex-wrap: wrap; gap: 8px; }
.board-filters select { max-width: 210px; flex: 0 1 auto; }
.board-toggles { flex-wrap: wrap; gap: 14px; align-items: center; }
.board-toggles label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--mu); cursor: pointer;
}
.board-toggles input { margin: 0; }

/* The technologies an advert names, under the row. Quieter than the chips
   above it: this is the small print of a listing, not its headline. */
.board-stack {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
  font-family: var(--mono-font); font-size: 11px; color: var(--mu);
}
.board-stack span {
  border: 1px solid var(--brd-2); border-radius: 3px; padding: 1px 5px;
  background: var(--card-2);
}

/* What the reader made of one advert, opened out. A two-column grid so the
   labels line up and the eye can run down them. */
.board-facts {
  display: grid; grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 5px 14px; font-size: 13px; margin-bottom: 12px;
}
.board-k { color: var(--mu); }
.board-v { color: var(--tx-2); min-width: 0; overflow-wrap: anywhere; }
/* The advert's own words, where quoting beats paraphrasing: a wage, a sentence
   about a visa. Set apart so it is clear nobody rewrote it. */
.board-quote {
  display: inline-block; border-left: 2px solid var(--brd);
  padding-left: 8px; color: var(--tx); font-style: italic;
}

@media (max-width: 640px) {
  .board-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .board-k { margin-top: 8px; }
  .board-filters select { max-width: none; flex: 1 1 45%; }
}

/* The advert as the board published it, opened inside a row. Prose, not code —
   it is a job description — but bounded and scrollable, because forty of these
   open at full height is a page nobody can navigate. */
.board-advert {
  background: var(--card-2); border: 1px solid var(--brd-2); border-radius: var(--r);
  padding: 12px 14px; font-size: 13.5px; line-height: 1.6; color: var(--tx-2);
  white-space: pre-wrap; word-break: break-word;
  max-height: 420px; overflow: auto;
}


/* ============================================================ sections ======
 *
 * Which part of the app you are in, said in colour.
 *
 * The rule at the top of this file — hue is for status, and there are exactly
 * four of them — still holds, and this does not break it. A status colour says
 * what happened to one thing on the page; a section colour says where the whole
 * page is, and it never appears on a row, a chip or a badge. It lives in three
 * places only: the pill in the nav, the rule under the header, and a wash and a
 * watermark behind the content. Nothing you can mistake for a state.
 *
 * The hues are chosen to sit apart from the four status ones and from each
 * other, and they are all dark and low in saturation like everything else here.
 * The point is recognition at a glance, not decoration. */

[data-section] { --sec: #4a4a4a; --sec-soft: #f0f0f2; }
[data-section="jobs"]       { --sec: #3f4d8a; --sec-soft: #eef0f7; }  /* indigo */
[data-section="cv"]         { --sec: #6b3f8a; --sec-soft: #f3eef7; }  /* purple */
[data-section="letters"]    { --sec: #8a3f6b; --sec-soft: #f7eef3; }  /* plum   */
[data-section="drafts"]     { --sec: #8a5a2f; --sec-soft: #f7f2ec; }  /* clay   */
[data-section="alternance"] { --sec: #2f6b6b; --sec-soft: #ecf4f4; }  /* teal   */
[data-section="board"]      { --sec: #2f5f8a; --sec-soft: #ecf1f7; }  /* steel  */
[data-section="profiles"]   { --sec: #4a6b2f; --sec-soft: #f0f5ec; }  /* olive  */
[data-section="account"]    { --sec: #6b2f4a; --sec-soft: #f7ecf1; }  /* wine   */
[data-section="admin"]      { --sec: #3a3a3a; --sec-soft: #efefef; }  /* graphite */

/* The wash. Strongest at the very top where the title is, gone by the time the
   first rows arrive, so a long page still reads as paper. */
.app[data-section] > .main-body {
  background:
    linear-gradient(180deg, var(--sec-soft) 0, rgba(255,255,255,0) 460px),
    var(--bg);
}
.app[data-section] > .shell-header { border-bottom: 2px solid var(--sec); }
.app[data-section] .shell-nav a.active,
.app[data-section] .shell-nav a.active:hover { background: var(--sec); }
/* Profiles and Account sit with the account controls rather than in the
   workflow nav, and they are sections too — so they take the colour the same
   way when you are on one of them. */
.app[data-section] .ws-switch.active,
.app[data-section] .ws-switch.active:hover {
  background: var(--sec); border-color: var(--sec); color: #fff;
}

/* The watermark: the section's own mark, very large and very faint, out in the
   margin beside the content where there is nothing else. It is decoration and
   it is announced as such — aria-hidden, no pointer events, gone on a narrow
   screen where there is no margin to put it in. */
.page-mark {
  position: fixed; right: 2.5vw; top: 50%; transform: translateY(-50%);
  z-index: 0; pointer-events: none; user-select: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--sec); opacity: 0.13;
}
.page-mark svg { width: 215px; height: 215px; stroke-width: 0.7; }
.page-mark .page-mark-word {
  font-size: 29px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; white-space: nowrap;
}
/* Content sits above it, and keeps its own background so the watermark never
   shows through a card. */
.main-body > * { position: relative; z-index: 1; }

/* The title carries the colour too, as a small rule beside it — the one place
   the section colour lands next to words rather than behind them. */
.app[data-section] .page-title::before {
  content: ""; display: inline-block; vertical-align: 0.06em;
  width: 4px; height: 0.95em; margin-right: 10px; border-radius: 2px;
  background: var(--sec);
}

@media (max-width: 1400px) { .page-mark { opacity: 0.1; } }
@media (max-width: 1180px) { .page-mark { display: none; } }


/* ---------- picking rows out ---------- */

/* The tick sits in its own label so the whole cell is a target — a 13px box is
   not something to ask a cursor to find twice a second. */
.row-tick {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 22px; height: 22px; cursor: pointer;
}
.row-tick input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--sec, var(--accent)); }

.list-head { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; }
.list-head .eyebrow { flex: 1; }

/* What you can do with what you ticked. Fixed to the bottom of the window,
   because the rows being chosen between are spread down a long page and a bar
   at the top of it is a bar you have to scroll back to. */
.picked-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px;
  z-index: 30; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: min(900px, calc(100vw - 32px));
  padding: 10px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--brd);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
  font-size: 13px;
}
.picked-bar strong { white-space: nowrap; }

@media (max-width: 640px) {
  .picked-bar {
    left: 12px; right: 12px; transform: none; max-width: none;
    border-radius: var(--r); justify-content: center;
  }
  .picked-bar span[style] { display: none; }
}


/* ============================================================== polish ======
 *
 * Small things, all of them in service of the same two: knowing where you are,
 * and knowing what the list in front of you is showing.
 */

/* The line that counts a list keeps its tick beside it, not at the far end of
   a space-between. The tick belongs to the heading; the buttons do not. */
.jcount { justify-content: flex-start; }
.jcount h2 { margin-right: auto; }
.jcount-side { margin-left: auto; }

/* Which filters are on, in words, each one droppable. Nine dropdowns can hold
   nine answers, and a dropdown you are not looking at is one you do not read —
   so what is actually narrowing the list gets said out loud. */
.filter-chips {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12.5px;
}
.fchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 10px; border-radius: 20px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; line-height: 1.5;
  background: var(--sec-soft, var(--card-2));
  border: 1px solid var(--sec, var(--brd)); color: var(--sec, var(--tx-2));
}
.fchip span { font-size: 14px; opacity: 0.55; margin-top: -1px; }
.fchip:hover { background: var(--sec, var(--accent)); color: #fff; }
.fchip:hover span { opacity: 1; }
.fchip-all {
  background: none; border-style: dashed; border-color: var(--brd); color: var(--mu);
}
.fchip-all:hover { background: var(--card-2); color: var(--tx); border-color: var(--brd); }

/* A row under the cursor. The edge takes the section's colour rather than the
   flat black it had, which is the same cue as everything else on the page. */
a.lrow:hover, .jrow:hover .jrow-main { box-shadow: inset 2px 0 0 var(--sec, var(--accent)); }
.lrow { transition: background-color 0.12s ease; }
.jrow:hover, a.lrow:hover { background: var(--card); }
.lrow:has([data-tick]:checked) {
  background: var(--sec-soft, var(--card-2));
  border-color: var(--sec, var(--brd));
}

/* The counters at the top of a board. The number is the thing being read, so it
   is the thing that carries the colour and the weight. */
.trace-stat-label {
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--mu);
}
.trace-stat-value {
  font-size: 19px; font-weight: 600; margin-top: 3px;
  font-family: var(--font); color: var(--sec, var(--tx));
}
.app[data-section] .trace-stat { background: var(--card); }

/* The bar of ticked rows gets the section's colour on its edge, so it belongs
   to the page it is floating over. */
.picked-bar { border-left: 3px solid var(--sec, var(--accent)); }
.picked-gap { flex: 1; }

/* A little room under a long list, so the floating bar is never the last thing
   between you and the final row. */
.page-wrap { padding-bottom: 96px; }


/* ---------- the header, after the rearrangement ---------- */

/* The mark beside the name. Small, and the one place in the header that is
   always the app's own colour rather than the section's. */
.logomark .lm-mark { width: 17px; height: 17px; color: var(--accent); }

/* Between the boards and the workflow. They are two different kinds of thing —
   where work comes from, and what you do with it — and the eye should get that
   without being told. */
.nav-rule {
  width: 1px; align-self: stretch; margin: 8px 6px;
  background: var(--brd);
}

/* A button that is only its icon. It still has a name — the title and the
   aria-label carry it — it just does not need to spend a word of the header
   saying "log out" beside a door with an arrow through it. */
.ws-switch.icon-only {
  padding: 5px 7px; display: inline-flex; align-items: center; color: var(--mu);
}
.ws-switch.icon-only .ico { width: 15px; height: 15px; }
.ws-switch.icon-only:hover { color: var(--err); border-color: var(--err); background: none; }

/* Admin is not one of the workflow's rooms — it is the fuse box: one provider
   key, one set of prompts, shared by everyone, and nothing in it is about
   applying for anything. So it sits apart at the far end and wears a colour no
   other pill has, and it is the only thing in this app that is styled to be
   slightly unwelcoming. */
.admin-pill {
  border-color: #7a5a1f; color: #7a5a1f; background: #fbf6ea;
  font-variant-caps: all-small-caps; letter-spacing: 0.06em;
}
.admin-pill:hover, .admin-pill.active, .admin-pill.active:hover {
  background: #7a5a1f; border-color: #7a5a1f; color: #fff;
}
.admin-pill .ico { width: 13px; height: 13px; }
/* ...and it keeps that colour even on a page that has a section colour of its
   own, which every other pill defers to. */
.app[data-section] .ws-switch.admin-pill.active { background: #7a5a1f; border-color: #7a5a1f; }

/* Who you are, said once, on the page that is about you — big, because it is
   the only greeting in the app and a greeting in 12px is not one. */
.hello {
  font-size: 26px; font-weight: 600; margin: 0 0 2px; line-height: 1.25;
  overflow-wrap: anywhere;
}
.hello-who { color: var(--sec, var(--accent)); }


/* The filters are a question you ask the board, not a lens over rows already
   in hand — so when they change, this says the screen is out of date rather
   than letting you believe it has already answered. */
.pending-note {
  display: flex; align-items: center; gap: 7px;
  margin-top: 10px; padding: 7px 10px; border-radius: var(--r);
  background: var(--warn-soft); border: 1px solid #ecd9bb; color: var(--warn);
  font-size: 12.5px;
}
.pending-note .ico { width: 13px; height: 13px; flex-shrink: 0; }

/* A listing that has already crossed into Apply for. It is the one link on a
   row that leaves the board for the work, so it looks like the place it goes
   rather than like the buttons beside it. */
.apply-link, .apply-link:hover {
  border-color: #3f4d8a; color: #3f4d8a; background: #eef0f7; text-decoration: none;
}
.apply-link:hover { background: #3f4d8a; color: #fff; }

/* ---------- do it all (/do) ---------- */
/* The three steps that follow a job, on the pipeline page's numbered spine —
   except here the numbers are a state rather than a diagram: filled green for
   what exists, filled in the section's colour for what is next, hollow for
   what has not been reached. */
.do-setup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.do-setup select { width: 100%; }
.flow-step.do-done .flow-num {
  background: var(--ok); border-color: var(--ok); color: #fff;
}
.flow-step.do-done .flow-num .ico { width: 15px; height: 15px; stroke-width: 2; }
.flow-step.do-now .flow-num {
  background: var(--sec, var(--accent)); border-color: var(--sec, var(--accent)); color: #fff;
}
.flow-step.do-now > .flow-card { border-color: var(--sec, var(--accent)); }
/* The picker that appears the moment a step has more than one of its thing. */
.do-pick-sel { width: auto; max-width: 260px; padding: 4px 8px; font-size: 12.5px; }
/* What a finished CV is, in three words, without a table for three words. */
.do-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--mu); }
.do-facts span { white-space: nowrap; }
.flow-step .letter-body { margin-top: 8px; }

@media (max-width: 720px) {
  .do-setup { grid-template-columns: 1fr; }
  .do-pick-sel { max-width: 160px; }
}


/* ============================================================ admin bar ======
 * Sits above the main header. Only visible to the admin account.
 * In the admin workspace it carries the return link; on the main site it
 * carries the Settings link. */
.admin-bar {
  position: sticky; top: 0; z-index: 25;
  height: 32px; display: flex; align-items: center; justify-content: center;
  padding: 0 18px;
  background: #1a1a2e; color: #9a9ab8;
  font-size: 12px;
}
.admin-bar a, .admin-bar button {
  color: #c5c5e0; text-decoration: none; font-size: 12px; font-weight: 500;
  background: none; border: none; cursor: pointer;
  padding: 2px 8px; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 5px;
}
.admin-bar a:hover, .admin-bar button:hover {
  background: rgba(255,255,255,0.1); color: #fff;
}
.admin-bar .ico { width: 13px; height: 13px; }
/* Push the main header down when the admin bar is present */
.has-admin-bar .shell-header { top: 32px; }


/* ============================================================ admin sidebar ==
 * In the admin workspace the header carries no page pills — every admin page
 * lives in this sidebar on the left instead. Grouped by the same headings the
 * old inline index used, so a jump between pages is one click from anywhere.
 */
.admin-brand {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 14px; color: #7a5a1f;
  padding: 4px 10px; border-radius: 6px; background: #fbf6ea;
  font-variant-caps: all-small-caps; letter-spacing: 0.06em;
}
.admin-brand .ico { width: 14px; height: 14px; }
.shell-header-admin .shell-nav { display: none; }

/* External-jobs brand shares the same shape but takes the app's accent so it
 * does not read as an admin page — this is the main site, one room across. */
.admin-brand.board-brand {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, white);
}

.admin-shell {
  display: flex; align-items: stretch;
  flex: 1; min-height: 0; width: 100%;
}
.admin-sidebar {
  width: 248px; flex-shrink: 0;
  background: var(--card-2);
  border-right: 1px solid var(--brd);
  /* Sticks under the top bars (admin-bar 32px + shell-header 52px) so the
   * whole nav is visible without scrolling. */
  position: sticky;
  top: calc(32px + 52px);
  align-self: flex-start;
  max-height: calc(100vh - 32px - 52px);
  overflow-y: auto;
}
.app:not(.has-admin-bar) .admin-sidebar { top: 52px; max-height: calc(100vh - 52px); }

.admin-sidebar-inner {
  padding: 14px 10px 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.admin-side-group + .admin-side-group { margin-top: 14px; }
.admin-side-group-title {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--mu);
}
.admin-side-group-title .ico { width: 12px; height: 12px; opacity: 0.75; }
.admin-side-links { display: flex; flex-direction: column; gap: 1px; }
.admin-side-link {
  display: block;
  padding: 7px 12px 7px 22px;
  border-radius: 6px;
  color: var(--tx-2);
  font-size: 13.5px; line-height: 1.35;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.admin-side-link:hover {
  background: var(--card);
  color: var(--tx);
  text-decoration: none;
}
.admin-side-link.active {
  background: #7a5a1f;
  color: #fff;
  border-left-color: #4a3712;
  font-weight: 600;
}
.admin-side-link.active:hover { background: #7a5a1f; color: #fff; }

/* The boards sidebar reuses the admin-sidebar shell but takes the app's
 * accent colour — the boards are part of the main workspace, not an admin
 * page, and the graphite/tan of admin would mis-brand them. */
.board-sidebar .admin-side-link { padding-left: 12px; }
.board-sidebar .admin-side-link .ico { width: 14px; height: 14px; opacity: 0.75; margin-right: 6px; }
.board-sidebar .admin-side-link.active,
.board-sidebar .admin-side-link.active:hover {
  background: var(--accent); color: #fff; border-left-color: transparent;
}
.board-sidebar .admin-side-link.active .ico { opacity: 1; }

.admin-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.admin-main .main-body { flex: 1; }

/* On narrow screens the sidebar goes back to a horizontal, scrollable strip
 * above the content — a full-height column steals too much room. */
@media (max-width: 820px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar {
    width: 100%; max-height: none; overflow-y: visible;
    border-right: 0; border-bottom: 1px solid var(--brd);
    position: sticky; top: calc(32px + 52px);
  }
  .admin-sidebar-inner {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    gap: 4px; padding: 8px 12px;
  }
  .admin-side-group + .admin-side-group { margin-top: 0; }
  .admin-side-group {
    display: flex; align-items: center; gap: 4px;
    padding-right: 10px; border-right: 1px solid var(--brd-2);
  }
  .admin-side-group-title { padding: 4px 4px; white-space: nowrap; }
  .admin-side-group-title span { display: none; }
  .admin-side-links { flex-direction: row; gap: 2px; }
  .admin-side-link { padding: 6px 10px; white-space: nowrap; border-left: 0; }
  .admin-side-link.active { border-left: 0; }
}


/* ============================================================ toasts =========
 * Slide in from the top-right. Four types: info, success, error, warn. */
#toast-container {
  position: fixed; top: 16px; right: 16px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 9px;
  min-width: 260px; max-width: 380px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.20);
  font-size: 13.5px; line-height: 1.45; color: #fff;
  animation: toast-slide-in 0.22s cubic-bezier(.2,.8,.4,1) both;
}
.toast.toast-out {
  animation: toast-slide-out 0.25s ease forwards;
}
.toast.info    { background: #1d4ed8; }
.toast.success { background: #15803d; }
.toast.error   { background: #dc2626; }
.toast.warn    { background: #b45309; }
.toast-msg { flex: 1; }
.toast-close {
  background: none; border: none; color: inherit; opacity: 0.7;
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0; flex-shrink: 0;
}
.toast-close:hover { opacity: 1; }
@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-slide-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}


/* ============================================================ button colors ==
 * Named semantic variants on top of the base .btn. */
.btn.btn-green  { background: #16a34a; border-color: #15803d; color: #fff; }
.btn.btn-green:hover  { background: #15803d; border-color: #166534; }
.btn.btn-blue   { background: #2563eb; border-color: #1d4ed8; color: #fff; }
.btn.btn-blue:hover   { background: #1d4ed8; border-color: #1e40af; }
.btn.btn-indigo { background: #4f46e5; border-color: #4338ca; color: #fff; }
.btn.btn-indigo:hover { background: #4338ca; border-color: #3730a3; }
.btn.btn-red    { background: #dc2626; border-color: #b91c1c; color: #fff; }
.btn.btn-red:hover    { background: #b91c1c; border-color: #991b1b; }
.btn.btn-amber  { background: #d97706; border-color: #b45309; color: #fff; }
.btn.btn-amber:hover  { background: #b45309; border-color: #92400e; }


/* ============================================================ lang chips =====
 * Inline flag + language code. Flag is an emoji; chip keeps it quiet. */
.lang-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500;
  padding: 2px 8px; border-radius: 99px;
  background: var(--card-2); border: 1px solid var(--brd);
  color: var(--tx-2); white-space: nowrap; vertical-align: middle;
}
.lang-chip .flag { font-size: 13px; line-height: 1; display: inline-flex; align-items: center; }
.flag-svg svg { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); display: block; }
.flag-code { font-family: var(--mono-font); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--tx-2); }


/* ============================================================ badge extras ===
 * 'info' for neutral stopped state, so it doesn't read as a warning.
 * bd-icon replaces the dot with a ✓ or ✗ character for terminal states. */
.badge.info { background: #dbeafe; border-color: #bfdbfe; color: #1d4ed8; }
.bd-icon {
  width: auto !important; height: auto !important;
  border-radius: 0 !important; background: transparent !important;
  font-size: 10px; font-weight: 800; line-height: 1;
}


/* ============================================================ sources link ==
 * The "External jobs" entry point in the main header. A plain nav pill: one
 * click takes you into the boards, where the left sidebar carries the rest. */
.sources-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--r);
  border: 1px solid var(--brd); background: none;
  font-family: inherit; font-size: 14px; color: var(--tx-2);
  text-decoration: none; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sources-toggle:hover {
  background: var(--card-2); color: var(--tx); text-decoration: none;
}
.sources-toggle .ico { width: 15px; height: 15px; flex-shrink: 0; }


/* ============================================================ nav polish ====
 * Smooth transitions on all nav pills so clicking feels responsive. */
.shell-nav a {
  transition: background 0.13s, color 0.13s;
}


/* ============================================================ badge polish ==
 * Slightly rounder corners and a touch more padding so badges breathe. */
.badge {
  border-radius: 6px;
  letter-spacing: 0.01em;
}


/* ============================================================ profile edit ==
 * The form on the left, the same profile laid out as a page on the right. */
.prof-page { max-width: 960px; padding-bottom: 96px; }   /* room for the action bar */

/* One section at a time. The row of tabs is where you are; the badge on a tab
   is how much that section still has to answer for. */
.prof-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px;
  border-bottom: 1px solid var(--brd); padding-bottom: 0;
}
.prof-tabs button, .prof-tabs a {
  padding: 8px 12px 9px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: transparent; color: var(--tx-2); font: inherit; font-size: 13.5px; cursor: pointer;
}
.prof-tabs button:hover, .prof-tabs a:hover { color: var(--tx); background: var(--card-2); }
.prof-tabs button.on, .prof-tabs a.on { color: var(--tx); border-bottom-color: var(--accent); font-weight: 600; }
.prof-tabs button b { font-weight: 500; color: var(--mu); margin-left: 2px; }
.prof-tabs button.tab-fits::after, .prof-tabs button.tab-short::after {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 6px;
}
.prof-tabs button.tab-fits::after { background: var(--ok); }
.prof-tabs button.tab-short::after { background: var(--warn); }

/* Save never scrolls away. */
.prof-actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--card); border-top: 1px solid var(--brd);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
}
.prof-actions-note { font-size: 12.5px; }

/* What each field becomes on the page: copied, rewritten, or only read. */
.prof-legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  font-size: 12.5px; color: var(--mu); margin: 0 0 12px;
}
.ftag {
  display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 3px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  vertical-align: 1px; cursor: help;
}
.ftag-printed { background: var(--ok-soft); color: var(--ok); }
.ftag-written { background: var(--info-soft); color: var(--info); }
.ftag-ai      { background: var(--warn-soft); color: var(--warn); }
.ftag-unused  { background: var(--card-2); color: var(--mu); border: 1px solid var(--brd-2); }
.prof-legend > span { white-space: nowrap; }
.prof-legend .ftag { margin-left: 0; margin-right: 2px; }
/* The watermark sits where the page column now is. */
.app:has(.prof-page) .page-mark { display: none; }
.fcount { float: right; font-weight: 400; color: var(--mu); font-size: 12px; }
.f-issue:empty { display: none; }
.fh-error { color: var(--err); }
.fh-warn  { color: var(--warn); }
.fh-info  { color: var(--mu); }

.nav-issues {
  display: inline-block; min-width: 16px; margin-left: 6px; padding: 0 5px;
  border-radius: 10px; background: var(--err); color: #fff;
  font-size: 11px; font-weight: 600; text-align: center; line-height: 16px;
}

/* An entry folds to its header: what it is, when, how much is under it. */
.ecard { padding: 0; overflow: hidden; }
.ecard-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  padding: 10px 14px; cursor: pointer; user-select: none;
}
.ecard-head:hover { background: var(--brd-2); }
.ecard-chev { transition: transform 120ms ease; color: var(--mu); }
.ecard.open .ecard-chev { transform: rotate(180deg); }
.ecard-title { font-weight: 600; font-size: 14px; }
.ecard-meta { font-size: 12.5px; color: var(--mu); }
.ecard-issues { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.ecard-issues:empty { display: none; }
.ecard-body { padding: 4px 14px 14px; border-top: 1px solid var(--brd-2); background: var(--card); }
.chip-warn { background: var(--warn-soft); border-color: #e6d3b3; color: var(--warn); }
.chip-dim { color: var(--mu); }

/* The page. */
.prof-cv-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.prof-cv-head > div:first-child { flex: 1; min-width: 200px; }
.prof-cv-toggle { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tx-2); white-space: nowrap; }
.prof-cv-toggle input { width: auto; margin: 0; }

.cvp {
  background: #fff; color: #161616; border: 1px solid var(--brd);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 6px 22px rgba(0,0,0,0.06);
  padding: 30px 34px 34px; font-size: 13px; line-height: 1.42;
}
.cvp a { color: inherit; text-decoration: underline; text-decoration-color: #bbb; }
/* The header the page prints: the ways to reach you stacked on the left, the
   name in the middle, the photo on the right. The markup keeps the photo
   first, so the order is the grid's. */
.cvp-header { display: grid; grid-template-columns: auto 1fr 76px; gap: 18px; align-items: center; margin-bottom: 14px; }
.cvp-header > .cvp-photo { order: 3; }
.cvp-header > .cvp-contacts { order: 1; }
.cvp-header > .cvp-name, .cvp-header > div { order: 2; }
.cvp-photo { width: 76px; height: 76px; object-fit: cover; border-radius: 3px; flex: none; }
.cvp-photo-none { display: inline-block; background: #eee; }
/* No picture on this CV: the page prints the contacts left and the name hard
   right, with nothing in between, so the preview does the same rather than
   leaving a photo-shaped hole. */
.cvp-header[data-no-photo] { grid-template-columns: auto 1fr; }
.cvp-header[data-no-photo] > .cvp-name,
.cvp-header[data-no-photo] > div:not(.cvp-contacts) { text-align: right; }
.cvp-name { font-size: 24px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.15; cursor: pointer; text-align: center; }
.cvp-contacts { font-size: 12.5px; color: #333; word-break: break-word; text-align: left; line-height: 1.5; }
.cvp-sec { margin-top: 14px; }
.cvp-sec h4 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  border-bottom: 1.5px solid #161616; padding-bottom: 2px; margin: 0 0 7px;
}
.cvp-sec p { margin: 0; }
.cvp-entry { margin-bottom: 10px; padding: 4px 6px; margin-left: -6px; margin-right: -6px; border-radius: 4px; cursor: pointer; }
.cvp-entry:hover, .cvp-sec p[data-jump]:hover, .cvp-name:hover { background: #f6f6f6; }
.cvp-row { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.cvp-row > :first-child { min-width: 0; }
.cvp-r { flex: none; font-size: 12px; color: #444; white-space: nowrap; }
.cvp-sub { color: #444; }
.cvp-sub i:empty { display: none; }
.cvp ul { margin: 3px 0 0; padding-left: 18px; }
.cvp li { margin: 0 0 1px; }
.cvp-tech { font-size: 12.5px; color: #333; margin-top: 3px; }
.cvp-tech::before { content: ''; }
.cvp-off { opacity: 0.5; }
.cvp-off:hover { opacity: 0.85; }
.cvp-gap {
  display: inline-block; padding: 0 6px; border: 1px dashed #c9a06a; border-radius: 3px;
  color: #8a5510; font-size: 12px; font-style: normal;
}
/* Languages line: bold name, level in parens, comma-separated on one line —
 * the same shape the printed CV uses so the preview matches what is sent. */
.cvp-langs { display: block; line-height: 1.5; }
.cvp-langs .cvp-lang { white-space: nowrap; }
.cvp-langs .dim { color: #555; font-size: 12px; }

/* Read by the writer, not printed: set apart from the page around it. */
.cvp-ai {
  margin: 5px 0 0; padding: 5px 8px; border-left: 3px solid #e0c48f; background: #fbf6ec;
  font-size: 12px; color: #4a3a1a;
}
.cvp-ai-label {
  display: inline-block; margin-bottom: 2px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #8a5510;
}
.cvp-no-ai .cvp-ai { display: none; }

/* What the pipeline would do with each thing, said beside it. */
.cvp-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cvp-flags:empty { display: none; }
.cvp-state, .cvp-flag {
  display: inline-block; padding: 1px 7px; border-radius: 3px; font-size: 11px;
  background: #f0f0f0; color: #555; font-style: normal;
}
.cvp-state-ok { background: var(--ok-soft); color: var(--ok); }
.cvp-state-err, .cvp-flag-error { background: var(--err-soft); color: var(--err); }
.cvp-flag-warn { background: var(--warn-soft); color: var(--warn); }
.cvp-flag-info { background: #f0f0f0; color: #666; }
.cvp-flag { max-width: 100%; white-space: normal; }

@media (max-width: 640px) {
  .cvp { padding: 20px 16px 24px; }
  .cvp-header { grid-template-columns: 1fr 76px; gap: 10px; }
  .cvp-contacts { grid-column: 1 / -1; order: 4; }
  .cvp-row { flex-direction: column; gap: 0; }
}

/* A list as chips: one per item, wrapping, each removable on its own. The
   box looks like an input because it behaves like one. */
.chips {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  min-height: 38px; padding: 5px 6px; cursor: text;
  background: var(--card); border: 1px solid var(--brd); border-radius: var(--r);
}
.chips:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.09); }
.chipx {
  display: inline-flex; align-items: center; gap: 2px; max-width: 100%;
  padding: 2px 4px 2px 9px; border-radius: 4px; font-size: 13px; line-height: 1.5;
  background: var(--card-2); border: 1px solid var(--brd-2); color: var(--tx);
}
.chipx-t { cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chipx-t:hover { text-decoration: underline; text-decoration-style: dotted; }
.chipx-x {
  padding: 0 5px; border: 0; background: transparent; color: var(--mu);
  font-size: 15px; line-height: 1; cursor: pointer; border-radius: 3px;
}
.chipx-x:hover { color: var(--err); background: var(--err-soft); }
.chips-in {
  flex: 1; min-width: 140px; width: auto; border: 0; padding: 4px 6px;
  background: transparent; box-shadow: none; font-size: 13.5px;
}
.chips-in:focus { border: 0; box-shadow: none; }
.chipx-ghost {
  padding: 2px 9px; cursor: pointer; border-style: dashed; background: var(--card);
  color: var(--tx-2); font: inherit; font-size: 12.5px;
}
.chipx-ghost:hover { background: var(--card-2); border-color: var(--mu); }
.suggest { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 6px; font-size: 12.5px; }
.suggest:empty { display: none; }

/* The CV data explorer: a separate page, shown inside the admin while it is
   still an experiment, and labelled as one. */
.cv-data-wrap { padding-bottom: 24px; }
.cv-data-frame {
  display: block; width: 100%; height: calc(100vh - 230px); min-height: 480px;
  border: 1px solid var(--brd); border-radius: var(--r); background: #fff;
}
.test-badge {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--warn-soft); color: var(--warn); border: 1px solid #e6d3b3;
}

/* Month and year, or "still there"; city typed, country picked. */
.date-pick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.date-pick select { width: auto; flex: 1; min-width: 96px; }
.date-present { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--tx-2); white-space: nowrap; }
.date-present input { width: auto; margin: 0; }
.place-pick { display: flex; gap: 6px; }
.place-pick input { flex: 1; min-width: 0; }
.place-pick select { flex: 1; min-width: 0; width: auto; }

/* The offer under a chip box as you type. */
.chips-offer { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 2px 2px 3px; font-size: 12.5px; }
.chipx-offer { cursor: pointer; background: var(--accent); border-color: var(--accent); color: #fff; font: inherit; font-size: 12.5px; padding: 2px 10px; }
.chipx-offer:hover { background: var(--accent-2); }

/* The years an advert asks for, and a way in that skips the board's page. */
.pchip.years { border-color: #c9b48a; color: var(--warn); background: var(--warn-soft); }
.apply-direct { gap: 5px; }


/* ---- how the page was chosen (run page) ---- */
.how-entry { padding: 10px 0; border-top: 1px solid var(--brd); }
.how-entry:first-of-type { border-top: 0; }
.how-off { opacity: .55; }
.how-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 13px; }
.how-n { font-family: var(--mono-font); font-size: 11px; color: var(--tx-2); }
.how-state { margin-left: auto; font-size: 11.5px; color: var(--tx-2); }
.how-kept, .how-written { color: var(--ok); }
.how-writing, .how-summary-state { color: var(--ox); }
.how-summary { font-style: italic; font-size: 13px; margin: 6px 0 2px; }
.how-bullets { margin: 6px 0 0; padding-left: 22px; font-size: 13px; }
.how-bullets li { margin: 3px 0; }
.how-cut { text-decoration: line-through; opacity: .6; }
.how-cost { font-family: var(--mono-font); font-size: 10.5px; color: var(--tx-2); margin-right: 4px; }
.how-warn { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.how-warn span { font-size: 11.5px; padding: 2px 8px; border-radius: 4px; background: var(--card-2); border: 1px solid var(--brd); }
.how-compose { font-size: 13px; padding: 10px 12px; border: 1px solid var(--brd); border-radius: 6px; background: var(--card-2); }


/* ---- the admin, simplified ---- */
.embedded .page-wrap { padding: 0; max-width: none; }
.how-steps { margin: 0; padding-left: 22px; font-size: 13.5px; line-height: 1.5; }
.how-steps li { margin: 6px 0; }
.how-steps .dim { font-size: 12px; margin-left: 4px; }
.where-grid { grid-template-columns: 120px minmax(0, 1fr); }
.prof-tabs a { text-decoration: none; }

/* ---- the admin index: every page, grouped, with what it is for ---- */
.admin-index { border-left: 3px solid var(--tx); }
.admin-group + .admin-group { border-top: 1px solid var(--brd-2); }
.admin-cards { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 760px) { .admin-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.admin-card {
  display: block; text-decoration: none; padding: 11px 13px;
  background: var(--card-2); border: 1px solid var(--brd-2);
  border-radius: var(--r); transition: border-color .12s, background .12s;
}
.admin-card:hover { border-color: var(--tx); background: var(--card); }
.admin-card-name {
  font-size: 13.5px; font-weight: 600; color: var(--tx);
  display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
}
.admin-card-blurb { font-size: 12.5px; color: var(--tx-2); line-height: 1.5; }


/* ===================== the CV flow map ===================== */
:root {
  --f-ai: #5b4bd6;  --f-ai-soft: #eeebfb;
  --f-code: #475569; --f-code-soft: #eef1f5;
  --f-net: #0f766e; --f-net-soft: #e6f4f2;
  --f-read: #eef1f5; --f-write: #eeebfb; --f-judge: #fdf3e2; --f-compose: #e6f4f2; --f-finish: #e9f0fb;
}
.flayout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
@media (max-width: 980px) { .flayout { grid-template-columns: 1fr; } }
.fmap { display: flex; flex-direction: column; gap: 4px; }
.fphase { border-radius: 10px; padding: 14px 16px 16px; border: 1px solid var(--brd); }
.fphase-read { background: var(--f-read); } .fphase-write { background: var(--f-write); }
.fphase-judge { background: var(--f-judge); } .fphase-compose { background: var(--f-compose); }
.fphase-finish { background: var(--f-finish); }
.fphase-head { display: grid; grid-template-columns: auto auto 1fr; gap: 6px 12px; align-items: baseline; margin-bottom: 12px; }
.fphase-head h2 { margin: 0; font-size: 17px; }
.fphase-head p { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--tx-2); }
.fphase-n {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--tx); color: var(--card); font-family: var(--mono-font); font-size: 12px; font-weight: 600;
}
.fphase-arrow { text-align: center; color: var(--mu); font-size: 18px; line-height: 1; padding: 2px 0; }
.fn-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.fn-arrow { align-self: center; color: var(--mu); font-size: 16px; }
.fn-loop { margin-top: 10px; padding: 10px 12px 12px; border: 1.5px solid rgba(91,75,214,.35); border-radius: 10px; background: rgba(255,255,255,.55); }
.fn-loop + .fn-loop { margin-top: 8px; }
.fn-loop-label { font-size: 12px; font-weight: 600; color: var(--f-ai); margin-bottom: 8px; letter-spacing: .02em; }
.fn {
  display: flex; flex-direction: column; gap: 3px; min-width: 170px; max-width: 240px; flex: 1 1 170px;
  padding: 10px 12px 10px 14px; text-align: left; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--brd); border-left: 5px solid var(--brd); border-radius: 8px;
  font: inherit; color: var(--tx); transition: transform .08s, box-shadow .08s;
}
.fn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.fn.on { box-shadow: 0 0 0 3px rgba(0,0,0,.12); }
.fn-ai { border-left-color: var(--f-ai); } .fn-ai .fn-who { color: var(--f-ai); }
.fn-code { border-left-color: var(--f-code); } .fn-code .fn-who { color: var(--f-code); }
.fn-net { border-left-color: var(--f-net); } .fn-net .fn-who { color: var(--f-net); }
.fn-opt { border-style: dashed; border-left-style: solid; }
.fn-who { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.fn-title { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.fn-when { font-size: 11.5px; color: var(--tx-2); line-height: 1.3; }
.fn-model { font-family: var(--mono-font); font-size: 10.5px; color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-state { margin-top: 3px; font-size: 11.5px; font-weight: 600; font-family: var(--mono-font); }
.fn-ok, .fn-r-ok .fn-state { color: var(--ok); } .fn-err { color: var(--err); }
.fn-live { color: var(--f-ai); animation: fpulse 1.2s infinite; } .fn-skip { color: var(--mu); } .fn-wait { color: var(--mu); }
.fn-r-ok { background: #f6fbf7; } .fn-r-err { background: var(--err-soft); } .fn-r-skip { opacity: .55; }
.fn-r-live { box-shadow: 0 0 0 3px rgba(91,75,214,.25); }
@keyframes fpulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
.fkey { margin: 8px 0 14px; }
.fkey-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--brd); }
.fkey-ai { border-left: 4px solid var(--f-ai); } .fkey-code { border-left: 4px solid var(--f-code); } .fkey-net { border-left: 4px solid var(--f-net); }
.fkey-opt { border-style: dashed; }
.fwatch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 8px; background: var(--card); border: 1px solid var(--brd); border-radius: 8px; }
.fwatch select { flex: 1 1 320px; max-width: 100%; }
.fwatch-stats { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tx-2); }
/* the drawer */
.fside { position: sticky; top: 12px; }
@media (max-width: 980px) { .fside { position: static; } }
.fdrawer { background: var(--card); border: 1px solid var(--brd); border-radius: 10px; padding: 14px 16px 16px; border-top: 4px solid var(--brd); max-height: calc(100vh - 40px); overflow: auto; }
@media (max-width: 980px) { .fdrawer { max-height: none; } }
.fdrawer-empty { color: var(--tx-2); font-size: 13.5px; }
.fd-ai { border-top-color: var(--f-ai); } .fd-code { border-top-color: var(--f-code); } .fd-net { border-top-color: var(--f-net); }
.fd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.fd-head h3 { margin: 0; font-size: 16px; flex: 1 1 auto; }
.fd-head .fn-who { flex-basis: 100%; }
.fd-close { font-size: 20px; line-height: 1; padding: 0 6px; }
.fd-when { font-size: 13px; color: var(--tx-2); margin-bottom: 8px; }
.fd-text { font-size: 13.5px; color: var(--tx-2); margin: 0 0 10px; line-height: 1.5; }
.fd-io { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; margin: 8px 0 12px; padding: 10px 12px; background: var(--card-2); border-radius: 8px; }
.fd-io ul { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; line-height: 1.45; }
.fd-io-arrow { align-self: center; font-size: 18px; color: var(--mu); }
.fd-model { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.fd-model select, .fd-model input { flex: 1 1 180px; min-width: 0; }
.fd-run { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--brd); }
.fd-run .eyebrow { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.fd-list { margin: 6px 0; padding-left: 18px; font-size: 13px; line-height: 1.45; }
.fd-list > li { margin: 6px 0; }
.fd-bullets { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; color: var(--tx-2); }
.fd-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12.5px; }
.fd-quote { font-style: italic; font-size: 13.5px; background: var(--card-2); padding: 8px 10px; border-radius: 6px; margin: 6px 0; }
.fd-editor { margin-top: 12px; }
.fd-editor textarea { width: 100%; font-family: var(--mono-font); font-size: 12px; resize: vertical; }

.fdetails { margin-top: 18px; }
.fdetails .tech { margin-top: 10px; }

.fn-entry { margin-top: 8px; padding: 8px 10px 10px; border: 1px solid var(--brd); border-radius: 8px; background: var(--card); }
.fn-entry.on { box-shadow: 0 0 0 2px rgba(91,75,214,.35); }
.fn-entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.fn-entry-head .fn-state { margin-left: auto; margin-top: 0; }
.fn-row-small .fn { min-width: 140px; padding: 7px 10px 7px 12px; }
.fn-row-small .fn-who { display: none; }

/* ---- labonnealternance: the CV gate ---- */
.al-gate { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; border-left: 4px solid var(--warn); }
.al-gate-step { width: 30px; height: 30px; border-radius: 50%; background: var(--warn); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.al-cvline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin: 0 0 10px; background: var(--ok-soft); border: 1px solid var(--brd); border-radius: 8px; font-size: 13.5px; }
.al-cvchange { margin-left: auto; font-size: 12.5px; text-decoration: underline; color: var(--tx-2); }

/* The CV page's buttons, all three groups floating at the foot and following
   the scroll: where it came from on the left, the CV's own in the middle,
   where it goes next on the right. */
.d-bar { justify-content: center; }
.d-bar:empty { display: none; }
/* The two side groups sit halfway down the screen at either edge; only the
   middle one sits at the foot. */
.d-bar-left, .d-bar-right { top: 50%; bottom: auto; transform: translateY(-50%); }
.d-bar-left { left: 18px; right: auto; }
.d-bar-right { left: auto; right: 18px; }
.page-wrap:has(~ .d-bar) { padding-bottom: 110px; }
@media (max-width: 1100px) {
  .d-bar-left, .d-bar-right { position: static; transform: none; margin: 8px 12px; max-width: none; justify-content: flex-start; }
  .d-bar-right { justify-content: flex-end; }
}

/* the segmented buttons over the jobs list */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--brd); border-radius: 999px; background: var(--card-2); }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 999px; font: inherit; font-size: 12.5px; color: var(--tx-2); cursor: pointer; }
.seg button:hover { color: var(--tx); }
.seg button.on { background: var(--tx); color: var(--card); }
/* a CV row with its letters and emails beside it */
.idx-row-cv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.idx-row-cv .idx-main { display: flex; align-items: center; gap: 10px; flex: 1 1 320px; min-width: 0; text-decoration: none; color: inherit; }
.idx-chips { flex-basis: 100%; margin-top: -4px; }
.idx-chips:empty { display: none; }
a.pchip { text-decoration: none; }
a.pchip:hover { border-color: var(--accent); }

/* a country's flag on a row */
.cflag { display: inline-block; vertical-align: -3px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); margin-right: 2px; }
.cflag-name { font-size: 12px; color: var(--tx-2); }

/* ---- the jobs filter bar: search and the five buttons first, the rest under ---- */
.jf-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jf-search { flex: 1 1 260px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--card); border: 1px solid var(--brd); border-radius: 999px; }
.jf-search input { flex: 1; border: 0; background: transparent; padding: 8px 0; font: inherit; min-width: 0; }
.jf-search input:focus { outline: none; }
.jf-search .ico { color: var(--mu); flex: none; }
.jf-more select { max-width: 220px; }
.applied-tick .ico { margin-right: 4px; }

.preview-frame-tall { width: 100%; height: min(1100px, calc(100vh - 220px)); border: 1px solid var(--brd); border-radius: var(--r); background: #fff; }
.cflag-world { display: inline-block; vertical-align: -3px; }
.cflag-world svg { width: 100%; height: 100%; display: block; border-radius: 2px; }

/* a page banner lifted into the stack keeps its own colours and its buttons,
   drawn small: a note in the corner, not a panel over the page */
.toast.toast-banner { background: var(--card); color: var(--tx); padding: 0; min-width: 0; width: 340px; max-width: calc(100vw - 32px); border: 1px solid var(--brd); box-shadow: 0 6px 22px rgba(0,0,0,.14); }
.toast.toast-banner .toast-msg { padding: 0; min-width: 0; }
.toast.toast-banner .alert.hoisted { margin: 0; border: 0; border-left: 4px solid var(--brd); border-radius: 9px 0 0 9px; font-size: 12.5px; line-height: 1.4; padding: 9px 10px; }
.toast.toast-banner .alert.hoisted .btn { font-size: 12px; padding: 5px 10px; margin-top: 6px; }
.toast.toast-banner .alert.hoisted input { max-width: 90px; font-size: 12.5px; padding: 3px 6px; }
.toast.toast-banner .alert.hoisted strong { display: block; margin-bottom: 2px; }
.toast.toast-banner .alert.hoisted.info { border-left-color: var(--info); }
.toast.toast-banner .alert.hoisted.warn { border-left-color: var(--warn); }
.toast.toast-banner .alert.hoisted.error { border-left-color: var(--err); }
.toast.toast-banner .toast-close { color: var(--tx-2); padding: 10px 10px 0 0; }
#toast-container { max-height: calc(100vh - 100px); overflow-y: auto; align-items: flex-end; }
@media (max-width: 640px) { #toast-container { left: 12px; right: 12px; } .toast { max-width: none; min-width: 0; } }
.alert.alert-lifted { display: none; }

.al-set-h { display: flex; align-items: center; gap: 6px; margin: 16px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tx-2); }