/* JobHunt — one stylesheet, no build step, no external fonts.
   RTL first: everything uses logical properties so the layout mirrors cleanly.
   Mixed Hebrew/Latin/number content lives inside .bidi (unicode-bidi: plaintext). */

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --border: #e3e7ec;
  --border-strong: #ccd4dd;
  --text: #1b2733;
  --text-soft: #3d4a58;
  --muted: #6d7887;

  --accent: #2f5d8c;
  --accent-dark: #24486c;
  --accent-soft: #eaf1f8;

  --green: #1a7f4f;
  --green-soft: #e6f4ec;
  --teal: #0f7a75;
  --teal-soft: #e2f1f0;
  --amber: #96660a;
  --amber-soft: #fbf1dc;
  --red: #ad3229;
  --red-soft: #fbeceb;
  --greyred: #7f5f65;
  --greyred-soft: #f1eaec;
  --grey-soft: #eef1f4;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(20, 33, 48, .05), 0 4px 14px rgba(20, 33, 48, .04);
  --space: 20px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Hebrew",
          "Helvetica Neue", Arial, "Arial Hebrew", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.3; font-weight: 600; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .8em; }
ul, ol { margin: 0 0 .8em; padding-inline-start: 1.3em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); background: var(--grey-soft); padding: 1px 5px; border-radius: 4px; font-size: .88em; }

/* Mixed-script containers: keeps "5 דקות" and "Acme Ltd" from reordering. */
.bidi { unicode-bidi: plaintext; }
.muted { color: var(--muted); }
.tiny { font-size: .8rem; }
.pre-line { white-space: pre-line; }
.mono { font-family: var(--mono); font-size: .85rem; }
.spacer { flex: 1; }
.warn-text { color: var(--amber); }

/* ---------------------------------------------------------------- topbar */
.topbar {
  background: var(--surface);
  border-block-end: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 600; }
.brand:hover { text-decoration: none; }
.brand-mark {
  background: var(--accent);
  color: #fff;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: .78rem; letter-spacing: .5px;
}
.mainnav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.mainnav a {
  color: var(--text-soft);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: .95rem;
}
.mainnav a:hover { background: var(--grey-soft); text-decoration: none; }
.mainnav a.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.topbar-side { display: flex; align-items: center; gap: 14px; }
.linkish {
  background: none; border: none; padding: 0;
  color: var(--accent); font: inherit; font-size: .9rem; cursor: pointer;
}
.linkish:hover { text-decoration: underline; }
.linkish-danger { color: var(--red); }

.task-indicator {
  font-size: .82rem;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- layout */
.page { max-width: 1360px; margin: 0 auto; padding: 24px; }
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-block-end: 18px; flex-wrap: wrap;
}
.page-head p { margin: 0; }
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space);
  margin-block-end: 18px;
  box-shadow: var(--shadow);
}
.card-title { margin: 0 0 12px; font-size: 1.05rem; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-end: 12px; }
.card-head .card-title { margin: 0; }
.card-notice { border-color: #e6d4a8; background: #fdf8ec; }
.subtitle { font-size: .92rem; color: var(--text-soft); margin: 16px 0 8px; font-weight: 600; }
.subblock { margin-block-start: 14px; }
.hint { font-size: .87rem; margin-block-end: 12px; }
.empty-line { padding: 10px 0; }
.empty-state { text-align: center; padding: 36px 20px; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }

/* ---------------------------------------------------------------- banners */
.banner { padding: 10px 24px; font-size: .9rem; text-align: center; }
.banner-danger { background: var(--red); color: #fff; }
.flash-area { margin-block-end: 14px; }
.flash {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-block-end: 8px;
  border: 1px solid transparent;
  font-size: .93rem;
}
.flash-ok { background: var(--green-soft); border-color: #bfe0cd; color: #12603b; }
.flash-error { background: var(--red-soft); border-color: #f0c9c6; color: #8c2820; }
.flash-text { flex: 1; unicode-bidi: plaintext; }
.flash-close { background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; color: inherit; opacity: .6; }
.flash-close:hover { opacity: 1; }
.inline-error {
  background: var(--red-soft); border: 1px solid #f0c9c6; color: #8c2820;
  padding: 8px 12px; border-radius: var(--radius-sm); font-size: .9rem;
  unicode-bidi: plaintext;
}
.alert { border-radius: var(--radius-sm); padding: 12px 14px; margin-block-start: 14px; }
.alert .subtitle { margin-block-start: 0; }
.alert-danger { background: var(--red-soft); border: 1px solid #f0c9c6; }
.alert-danger .subtitle { color: #8c2820; }
.alert-warn { background: var(--amber-soft); border: 1px solid #ecd7a6; }
.alert-warn .subtitle { color: #7d5605; }

/* ---------------------------------------------------------------- forms */
.field { display: block; margin-block-end: 12px; }
.field-label { display: block; font-size: .84rem; color: var(--text-soft); margin-block-end: 4px; font-weight: 500; }
.field-hint { display: block; font-size: .78rem; color: var(--muted); margin-block-start: 4px; }
.field-inline { margin-block-end: 0; }

input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="number"], input[type="date"], input[type="search"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: .93rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input:disabled, select:disabled, textarea:disabled { background: var(--grey-soft); color: var(--muted); }
select { cursor: pointer; }
.checkline { display: flex; align-items: center; gap: 7px; font-size: .9rem; margin-block-end: 8px; }
.checkline input { width: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: .9rem; font-weight: 500;
  padding: 8px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--muted); text-decoration: none; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--surface); border-color: var(--border-strong); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
.btn-quiet { background: transparent; border-color: var(--border); color: var(--text-soft); }
.btn-danger { background: var(--surface); border-color: #e2b6b2; color: var(--red); }
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); }
.btn-small { padding: 5px 11px; font-size: .84rem; }
.btn-block { width: 100%; }
.inline-form { display: inline-block; margin: 0; }
.danger-form { margin-block-start: 18px; padding-block-start: 14px; border-block-start: 1px solid var(--border); }
.subform {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-block-end: 14px;
}

.filterbar {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding-block-end: 14px; margin-block-end: 14px;
  border-block-end: 1px solid var(--border);
}
.filterbar .field { min-width: 150px; }
.filterbar-actions { display: flex; gap: 8px; }

/* ---------------------------------------------------------------- tables */
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th {
  text-align: start;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  padding: 8px 10px;
  border-block-end: 1px solid var(--border);
  white-space: nowrap;
}
.table td { padding: 11px 10px; border-block-end: 1px solid var(--border); vertical-align: top; }
.table tbody tr:last-child td { border-block-end: none; }
.table tbody tr:hover { background: var(--surface-2); }
.table-compact td { padding: 8px 10px; }
.cell-commute, .cell-fit { width: 1%; white-space: nowrap; }
.cell-title { min-width: 220px; }
.cell-sub { font-size: .83rem; color: var(--muted); margin-block-start: 2px; }
.cell-links { display: flex; gap: 10px; flex-wrap: wrap; margin-block-start: 3px; }
.cell-why { max-width: 380px; font-size: .87rem; color: var(--text-soft); }
.cell-actions { white-space: nowrap; }
.cell-actions form { display: block; margin-block-start: 4px; }
.job-link { font-weight: 600; }
.employer-name { font-weight: 600; }
.row-form td { background: var(--surface-2); }

/* ---------------------------------------------------------------- badges */
.badge {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  border: 1px solid transparent;
  unicode-bidi: plaintext;
  white-space: nowrap;
}
.badge-note { font-size: .7rem; font-weight: 500; opacity: .8; }
.badge-excellent { background: var(--green-soft); color: var(--green); border-color: #bfe0cd; }
.badge-good { background: var(--teal-soft); color: var(--teal); border-color: #b8dedb; }
.badge-warn { background: var(--amber-soft); color: var(--amber); border-color: #ecd7a6; }
.badge-far { background: var(--greyred-soft); color: var(--greyred); border-color: #ddc9cd; }
.badge-unknown { background: var(--grey-soft); color: var(--muted); border-color: var(--border); }

.badge-fit { min-width: 40px; justify-content: center; }
.badge-none { background: var(--grey-soft); color: var(--muted); }
.badge-verdict-strong { background: var(--green-soft); color: var(--green); border-color: #bfe0cd; }
.badge-verdict-good { background: var(--teal-soft); color: var(--teal); border-color: #b8dedb; }
.badge-verdict-stretch { background: var(--amber-soft); color: var(--amber); border-color: #ecd7a6; }
.badge-verdict-weak { background: var(--grey-soft); color: var(--muted); border-color: var(--border); }
.badge-verdict-reject { background: var(--red-soft); color: var(--red); border-color: #f0c9c6; }

.chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .8rem;
  background: var(--grey-soft);
  color: var(--text-soft);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.chip-preparing, .chip-interested { background: var(--accent-soft); color: var(--accent-dark); border-color: #cfe0ef; }
.chip-applied, .chip-acknowledged { background: #eef0fb; color: #45499a; border-color: #d3d7f2; }
.chip-phone_screen, .chip-interview, .chip-assessment, .chip-final { background: var(--teal-soft); color: var(--teal); border-color: #b8dedb; }
.chip-offer, .chip-accepted { background: var(--green-soft); color: var(--green); border-color: #bfe0cd; }
.chip-rejected, .chip-withdrawn { background: var(--red-soft); color: var(--red); border-color: #f0c9c6; }
.chip-archived { background: var(--grey-soft); color: var(--muted); }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  background: var(--grey-soft); color: var(--muted);
}
.pill-supported { background: var(--green-soft); color: var(--green); }
.pill-embellished { background: var(--amber-soft); color: var(--amber); }
.pill-unsupported { background: var(--red-soft); color: var(--red); }
.pill-manual { background: var(--grey-soft); color: var(--text-soft); }
.pill-pending { background: var(--accent-soft); color: var(--accent-dark); }
.pill-status-clean { background: var(--green-soft); color: var(--green); }
.pill-status-flagged { background: var(--amber-soft); color: var(--amber); }
.pill-status-failed { background: var(--red-soft); color: var(--red); }
.pill-status-pending { background: var(--grey-soft); color: var(--muted); }
.pill-approved { background: var(--green-soft); color: var(--green); }
.pill-msg-draft { background: var(--grey-soft); color: var(--muted); }
.pill-msg-in_gmail { background: var(--accent-soft); color: var(--accent-dark); }
.pill-msg-sent { background: var(--green-soft); color: var(--green); }
.pill-msg-replied { background: var(--teal-soft); color: var(--teal); }

/* ---------------------------------------------------------------- dashboard */
.queue-block { margin-block-end: 22px; }
.queue-block:last-child { margin-block-end: 0; }
.queue-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .95rem; padding-block-end: 6px;
  border-block-end: 2px solid var(--border);
  margin-block-end: 8px;
}
.queue-title .count {
  background: var(--grey-soft); color: var(--muted);
  border-radius: 999px; padding: 0 8px; font-size: .8rem;
}
.queue-overdue { border-color: var(--red); }
.queue-overdue .count { background: var(--red-soft); color: var(--red); }
.queue-today { border-color: var(--amber); }
.queue-today .count { background: var(--amber-soft); color: var(--amber); }
.queue-week { border-color: var(--accent); }
.queue-week .count { background: var(--accent-soft); color: var(--accent-dark); }
.queue-stale { border-color: var(--greyred); }
.queue-stale .count { background: var(--greyred-soft); color: var(--greyred); }

.nextaction { display: block; unicode-bidi: plaintext; }
.nextaction-rel { font-size: .8rem; color: var(--muted); margin-inline-start: 6px; }
.nextaction.overdue .nextaction-date { color: var(--red); font-weight: 600; }
.nextaction.overdue .nextaction-rel { color: var(--red); }
.nextaction.today .nextaction-date { color: var(--amber); font-weight: 600; }
.nextaction-text { display: block; font-size: .82rem; color: var(--muted); unicode-bidi: plaintext; }

.stage-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.stage-tile {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  text-align: center;
  color: var(--text);
}
.stage-tile:hover { border-color: var(--accent); text-decoration: none; }
.stage-tile.is-active { border-color: var(--accent); background: var(--accent-soft); }
.stage-tile.is-empty { opacity: .55; }
.stage-tile-count { display: block; font-size: 1.3rem; font-weight: 600; }
.stage-tile-label { display: block; font-size: .78rem; color: var(--muted); }

.metric-row { display: flex; gap: 12px; flex-wrap: wrap; }
.metric {
  flex: 1 1 130px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}
.metric-num { display: block; font-size: 1.4rem; font-weight: 600; unicode-bidi: plaintext; }
.metric-label { display: block; font-size: .8rem; color: var(--muted); }
.notice-list { margin: 0; padding-inline-start: 1.2em; }
.notice-list li { margin-block-end: 4px; }

/* ---------------------------------------------------------------- job cockpit */
.job-head-main h1 { margin-block-end: 4px; }
.job-head-sub { color: var(--muted); margin-block-end: 8px; }
.job-head-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.control-card { padding: 14px 20px; }
.control-grid { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
.control-block { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.control-next { flex: 1; min-width: 320px; }
.control-next .field-inline { flex: 1; min-width: 140px; }
.control-tasks { gap: 8px; }
.control-tasks form { margin: 0; }

.cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, .95fr);
  gap: 18px;
  align-items: start;
}
.cockpit-col { margin-block-end: 18px; }
@media (max-width: 1180px) {
  .cockpit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .cockpit { grid-template-columns: minmax(0, 1fr); }
}

.deflist { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 8px; font-size: .92rem; }
.deflist dt { color: var(--muted); font-size: .84rem; }
.deflist dd { margin: 0; }
.bullets { margin: 0; padding-inline-start: 1.25em; font-size: .92rem; }
.bullets li { margin-block-end: 4px; }
.prose { font-size: .92rem; }
.prose h1, .prose h2, .prose h3 { font-size: 1rem; margin-block-start: 1em; }
.prose ul { padding-inline-start: 1.3em; }
.prose-line { font-size: .93rem; }

.disclosure {
  margin-block-start: 14px;
  border-block-start: 1px solid var(--border);
  padding-block-start: 10px;
}
.disclosure > summary {
  cursor: pointer;
  font-size: .89rem;
  color: var(--accent);
  list-style: none;
  padding: 3px 0;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: "▸ "; display: inline-block; }
.disclosure[open] > summary::before { content: "▾ "; }
details.card.disclosure { padding: 14px 20px; border-block-start: 1px solid var(--border); }

.fit-top { display: flex; gap: 18px; align-items: center; margin-block-end: 14px; }
.ring { position: relative; width: 104px; height: 104px; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--grey-soft); stroke-width: 9; }
.ring-value { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; }
.ring-strong .ring-value { stroke: var(--green); }
.ring-good .ring-value { stroke: var(--teal); }
.ring-stretch .ring-value { stroke: var(--amber); }
.ring-weak .ring-value { stroke: var(--muted); }
.ring-reject .ring-value { stroke: var(--red); }
.ring-center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  flex-direction: row-reverse;
}
.ring-score { font-size: 1.7rem; font-weight: 600; }
.ring-max { font-size: .75rem; color: var(--muted); }
.fit-verdict { flex: 1; }
.verdict { display: inline-block; font-weight: 600; margin-block-end: 8px; }
.verdict-strong { color: var(--green); }
.verdict-good { color: var(--teal); }
.verdict-stretch { color: var(--amber); }
.verdict-weak { color: var(--muted); }
.verdict-reject { color: var(--red); }
.subscores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; font-size: .84rem; }
.subscores li { display: flex; justify-content: space-between; gap: 8px; }
.subscores span { color: var(--muted); }
.commute-line { font-size: .9rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; unicode-bidi: plaintext; }

.angles { list-style: none; margin: 0; padding: 0; }
.angle {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-block-end: 10px;
  background: var(--surface-2);
}
.angle-need { font-size: .87rem; color: var(--muted); }
.angle-arrow { color: var(--accent); font-size: .9rem; line-height: 1.1; }
.angle-have { font-size: .93rem; font-weight: 500; }
.angle-facts { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-block-start: 1px dashed var(--border); font-size: .84rem; color: var(--text-soft); }
.angle-facts li { margin-block-end: 4px; }
.fact-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .72rem;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 4px;
  padding: 0 5px;
  margin-inline-end: 4px;
}

.gaps { list-style: none; margin: 0; padding: 0; }
.gap {
  border-inline-start: 3px solid var(--border-strong);
  padding: 6px 10px;
  margin-block-end: 8px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: .9rem;
}
.gap-blocking { border-inline-start-color: var(--red); }
.gap-major { border-inline-start-color: var(--amber); }
.gap-minor { border-inline-start-color: var(--border-strong); }
.gap-sev { font-size: .76rem; font-weight: 600; color: var(--muted); margin-inline-end: 6px; }
.gap-blocking .gap-sev { color: var(--red); }
.gap-major .gap-sev { color: var(--amber); }
.gap-how { font-size: .84rem; color: var(--muted); margin-block-start: 3px; }
.gap-bridge { display: inline-block; font-size: .74rem; color: var(--green); background: var(--green-soft); border-radius: 999px; padding: 0 8px; margin-block-start: 4px; }

.intel { font-size: .91rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
.sources { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.sources li { margin-block-end: 4px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 4px; border-block-end: 1px solid var(--border); margin-block-end: 16px; flex-wrap: wrap; }
.tab {
  background: none; border: none; border-block-end: 2px solid transparent;
  font: inherit; font-size: .93rem; color: var(--muted);
  padding: 8px 14px; cursor: pointer; margin-block-end: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent-dark); border-block-end-color: var(--accent); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-item { display: flex; gap: 14px; padding: 7px 0; border-block-end: 1px solid var(--border); }
.timeline-item:last-child { border-block-end: none; }
.timeline-when { color: var(--muted); white-space: nowrap; width: 122px; flex: none; unicode-bidi: plaintext; }
.timeline-body { font-size: .9rem; }
.timeline-type {
  display: inline-block; font-size: .74rem; font-weight: 600;
  background: var(--grey-soft); color: var(--muted);
  border-radius: 4px; padding: 1px 6px; margin-inline-end: 7px;
}
.timeline-item.is-error .timeline-type { background: var(--red-soft); color: var(--red); }

/* ---------------------------------------------------------------- CV workspace */
.cv-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .cv-layout { grid-template-columns: minmax(0, 1fr); } }
.cv-side { position: sticky; top: 74px; }
.version-list { list-style: none; margin: 0 0 14px; padding: 0; }
.version { margin-block-end: 6px; }
.version a {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--text);
}
.version a:hover { border-color: var(--accent); text-decoration: none; }
.version.is-current a { border-color: var(--accent); background: var(--accent-soft); }
.version-label { display: block; font-size: .88rem; font-weight: 600; }
.version-meta { display: flex; gap: 5px; margin-block-start: 4px; flex-wrap: wrap; }
.version-date { display: block; color: var(--muted); margin-block-start: 3px; unicode-bidi: plaintext; }

.cv-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-block-end: 10px; }
.cv-actions form { margin: 0; }
.cv-status { display: flex; gap: 6px; }
.approve-why {
  font-size: .87rem; color: #7d5605;
  background: var(--amber-soft); border: 1px solid #ecd7a6;
  border-radius: var(--radius-sm); padding: 8px 12px;
}
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-block-start: 10px; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-item::before { content: ""; width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend-supported::before { background: var(--green); }
.legend-embellished::before { background: var(--amber); }
.legend-unsupported::before { background: var(--red); }
.legend-manual::before { background: var(--muted); }
.legend-pending::before { background: var(--border-strong); }

.cv-section { font-size: .95rem; color: var(--muted); margin: 20px 0 8px; padding-block-end: 4px; border-block-end: 1px solid var(--border); }
.cvblock {
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-block-end: 8px;
  background: var(--surface);
}
.cvblock-supported { border-inline-start-color: var(--green); }
.cvblock-embellished { border-inline-start-color: var(--amber); background: #fffdf7; }
.cvblock-unsupported { border-inline-start-color: var(--red); background: #fffafa; }
.cvblock-manual { border-inline-start-color: var(--muted); }
.cvblock-pending { border-inline-start-color: var(--border-strong); }
.cvblock-head { display: flex; align-items: center; gap: 10px; margin-block-end: 6px; flex-wrap: wrap; }
.cvblock-kind { font-size: .74rem; color: var(--muted); text-transform: none; }
.cvblock-text { font-size: .96rem; line-height: 1.65; }
.cvblock-reason { font-size: .84rem; color: #8c2820; margin: 6px 0 0; }
.cvblock-facts {
  margin-block-start: 10px; padding-block-start: 10px;
  border-block-start: 1px dashed var(--border);
}
.fact-cites { list-style: none; margin: 0; padding: 0; font-size: .87rem; }
.fact-cites li { margin-block-end: 8px; }
.fact-text { color: var(--text-soft); }
.fact-meta { display: block; color: var(--muted); margin-block-start: 2px; }
.cvblock-edit { margin-block-start: 10px; }
.cvblock-edit textarea { margin-block-end: 6px; }

/* ---------------------------------------------------------------- outreach */
.outreach-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 940px) { .outreach-layout { grid-template-columns: minmax(0, 1fr); } }
.message { scroll-margin-top: 74px; }
.message-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-block-end: 10px; }
.message-channel { font-size: .85rem; color: var(--text-soft); margin-inline-start: 6px; margin-inline-end: 6px; }
.why-note {
  background: var(--accent-soft);
  border: 1px solid #cfe0ef;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: .88rem;
  margin-block-end: 12px;
}
.why-label { display: block; font-size: .76rem; font-weight: 600; color: var(--accent-dark); margin-block-end: 3px; }
.message-body { font-size: .95rem; line-height: 1.7; }
.message-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.message-tools {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-block-start: 16px; padding-block-start: 14px;
  border-block-start: 1px solid var(--border);
}
.message-tools .tool { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; margin: 0; }
.message-tools .tool .field { margin-block-end: 8px; }

/* ---------------------------------------------------------------- profile */
.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
  background: var(--surface-2);
  margin-block-end: 12px;
  transition: border-color .12s ease, background .12s ease;
}
.dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone-text { margin-block-end: 8px; color: var(--muted); }
.dropzone-name { margin: 8px 0 0; font-size: .88rem; unicode-bidi: plaintext; }

.fact-group { margin-block-end: 20px; }
.fact-list { list-style: none; margin: 0; padding: 0; }
.fact {
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  margin-block-end: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: start;
  scroll-margin-top: 74px;
}
.fact.is-confirmed { border-inline-start-color: var(--green); }
.fact-main { min-width: 0; }
.fact-body { font-size: .93rem; }
.fact-actions { display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.fact .subform { grid-column: 1 / -1; margin-block-end: 0; }

.questions { list-style: decimal; margin: 0; padding-inline-start: 1.4em; }
.question { margin-block-end: 18px; }
.question-text { font-size: .96rem; font-weight: 500; margin-block-end: 3px; }
.question-why { margin-block-end: 6px; }
.question textarea { margin-block-end: 6px; }

/* ---------------------------------------------------------------- employers */
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.area-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--surface-2);
  display: flex; flex-direction: column; gap: 7px;
}
.area-card.is-empty { opacity: .72; }
.area-card.is-active { border-color: var(--accent); background: var(--accent-soft); }
.area-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.area-name { font-weight: 600; font-size: .95rem; color: var(--text); }
.area-count { font-size: 1.05rem; font-weight: 600; color: var(--accent-dark); }
.area-meta { display: flex; align-items: center; gap: 6px; }
.area-card form { margin: 0; margin-block-start: auto; }
.table-employers .cell-title { min-width: 200px; }

/* ---------------------------------------------------------------- settings */
.status { font-size: .95rem; }
.status-ok { color: var(--green); }
.status-warn { color: var(--amber); }
.status-bad { color: var(--red); }
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 5px; }
.status-ok-dot { background: var(--green); }
.status-warn-dot { background: var(--amber); }
.status-bad-dot { background: var(--red); }

/* ---------------------------------------------------------------- login */
.login-body { display: grid; place-items: center; min-height: 100vh; background: var(--bg); }
.login-wrap { width: 100%; max-width: 380px; padding: 24px; }
.login-card { margin: 0; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-block-end: 20px; }
.login-brand h1 { margin: 0; font-size: 1.3rem; }
.login-brand p { margin: 0; font-size: .87rem; }

/* ---------------------------------------------------------------- task overlay */
.task-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 33, 48, .42);
  display: grid; place-items: center;
  padding: 24px;
}
.task-overlay[hidden] { display: none; }
.task-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(20, 33, 48, .22);
}
.spinner {
  width: 34px; height: 34px;
  border: 3px solid var(--grey-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 0 auto 14px;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.task-label { font-weight: 600; margin-block-end: 4px; }
.task-step { font-size: .9rem; color: var(--muted); min-height: 1.4em; unicode-bidi: plaintext; }
.task-hint { font-size: .8rem; color: var(--muted); margin-block-start: 12px; }
.task-error {
  margin-block-start: 12px;
  background: var(--red-soft); border: 1px solid #f0c9c6; color: #8c2820;
  border-radius: var(--radius-sm); padding: 8px 12px; font-size: .88rem;
  unicode-bidi: plaintext;
}
#task-dismiss { margin-block-start: 12px; }

@media print {
  .topbar, .task-overlay, .btn, .filterbar, .tabs { display: none !important; }
  .card { box-shadow: none; border-color: #ccc; }
}

/* --- processing queue -------------------------------------------------- */
/* The app does no thinking of its own; these surfaces explain the wait. */

.callout-wait {
  border-inline-start: 3px solid var(--amber, #a8710e);
}

.callout-ok {
  border-inline-start: 3px solid var(--teal, #0f6e5c);
}

.mono-block {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.05rem;
  background: var(--surface-2, #f1f3f2);
  border: 1px solid var(--rule, #d6dcd9);
  border-radius: 3px;
  padding: 0.6rem 0.9rem;
  display: inline-block;
  unicode-bidi: plaintext;
}

.chip-amber {
  background: color-mix(in srgb, var(--amber, #a8710e) 16%, transparent);
  color: var(--amber, #a8710e);
}

td.num, th.num {
  font-variant-numeric: tabular-nums;
  text-align: start;
}