/* FC Labz theme. Values are the Recruiting Tool's own public/css/theme.css
   :root -- the closest thing to a canonical FCL design system -- not invented.
   Outfit/JetBrains Mono are webfonts the gateway loads from a CDN; MV3 forbids
   remote code and fonts, so the stack falls through to the platform UI font
   rather than shipping 200KB of woff2 for a 380px panel. */
:root {
  --bg: #050907;
  --s1: #0A0F0D;
  --card-fill: rgba(255, 255, 255, .02);
  --card-border: rgba(255, 255, 255, .05);
  --card-radius: 16px;
  --accent: #3DFFC2;
  --accent-soft: rgba(61, 255, 194, .08);
  --accent-line: rgba(61, 255, 194, .40);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, .55);
  --danger: #ff6b6b;
  --warn: #ffd166;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Derived tones, so a light palette can restate them instead of every rule carrying a
     hard-coded rgba() that only reads on black. */
  --soft: rgba(255, 255, 255, .04);
  --on-accent: #04120c;
  --danger-soft: rgba(255, 107, 107, .10);
  --danger-line: rgba(255, 107, 107, .38);
  --danger-text: #ffd5d5;
  --warn-soft: rgba(255, 209, 102, .10);
  --warn-line: rgba(255, 209, 102, .40);
  --warn-text: #ffe9b8;
  color-scheme: dark;
}

/* Light mode (0.3.1): same structure, a palette that reads on white. Mint stays the accent
   but darkened so white text on a button and mint text on white both pass contrast. */
:root[data-theme="light"] {
  --bg: #f3f6f4;
  --s1: #ffffff;
  --card-fill: #ffffff;
  --card-border: rgba(5, 9, 7, .12);
  --accent: #0b8a66;
  --accent-soft: rgba(11, 138, 102, .10);
  --accent-line: rgba(11, 138, 102, .45);
  --text: #0b1512;
  --muted: rgba(11, 21, 18, .62);
  --danger: #b3261e;
  --warn: #8a5a00;
  --soft: rgba(5, 9, 7, .05);
  --on-accent: #ffffff;
  --danger-soft: rgba(179, 38, 30, .08);
  --danger-line: rgba(179, 38, 30, .35);
  --danger-text: #7a1a14;
  --warn-soft: rgba(138, 90, 0, .10);
  --warn-line: rgba(138, 90, 0, .40);
  --warn-text: #5a3a00;
  color-scheme: light;
}

/* `hidden` must actually hide. The UA stylesheet's [hidden] { display: none } is a
   plain attribute selector, so ANY class rule that sets display beats it -- which is
   why .banner { display: flex } left the update banner permanently on screen no matter
   what el.hidden was set to, and made clicking "Apply now" look broken when it was in
   fact working. Every show() in sidepanel.js toggles el.hidden, so this is the one line
   that makes that contract hold for every element, including ones added later. */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 12px 16px;
  background: var(--bg); color: var(--text);
  font: 13px/1.45 var(--font);
  /* The panel is ~380px and the only scroll axis is vertical. Wide content wraps;
     nothing is allowed to push the panel sideways. */
  overflow-x: hidden;
}
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 0 6px; }
p { margin: 6px 0; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-weight: 400; }
.lede { color: var(--muted); margin: 10px 0 14px; }

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 0; position: sticky; top: 0; z-index: 2;
  background: var(--bg); border-bottom: 1px solid var(--card-border);
}
.brand { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.brand svg { width: 20px; height: 20px; display: block; }
.brand b { font-weight: 700; letter-spacing: .01em; }
.ver { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.barright { display: inline-flex; align-items: center; gap: 8px; }
.theme { background: transparent; border: 1px solid var(--card-border); color: var(--muted); border-radius: 8px; width: 26px; height: 24px; padding: 0; margin: 0; cursor: pointer; font-size: 13px; line-height: 1; }
.theme:hover { color: var(--text); border-color: var(--accent-line); }
.foot { position: static; border-bottom: 0; border-top: 1px solid var(--card-border); margin-top: 14px; }

label { display: block; margin: 10px 0 0; font-weight: 600; font-size: 12px; }
input, textarea {
  width: 100%; margin-top: 4px; padding: 8px 9px;
  background: var(--s1); color: var(--text);
  border: 1px solid var(--card-border); border-radius: 9px;
  font: inherit; resize: vertical;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent-line); }

.btn {
  margin-top: 10px; padding: 8px 12px; border-radius: 9px; cursor: pointer;
  background: var(--s1); color: var(--text);
  border: 1px solid var(--card-border); font: inherit; font-weight: 600;
}
.btn:hover:not(:disabled) { border-color: var(--accent-line); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: 8px; }
.row .btn { flex: 1; }
.link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.mt { margin-top: 12px; }

/* The tool toggle: one segmented control under the header, Employer Finder | Fit Check.
   Sticky with the header so it is always one click away, whichever tool is scrolled. */
.tools { display: flex; gap: 4px; padding: 4px; margin-top: 10px; background: var(--s1);
  border: 1px solid var(--card-border); border-radius: 11px; position: sticky; top: 45px; z-index: 2; }
.tool { flex: 1; padding: 7px 8px; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600;
  background: transparent; color: var(--muted); border: 0; }
.tool:hover { color: var(--text); }
.tool.on { color: var(--on-accent); background: var(--accent); }

.tabs { display: flex; gap: 6px; margin-top: 14px; }
.tab { flex: 1; padding: 6px; border-radius: 8px; cursor: pointer; font: inherit;
  background: transparent; color: var(--muted); border: 1px solid var(--card-border); }
.tab.on { color: var(--text); border-color: var(--accent-line); background: var(--accent-soft); }

.card { background: var(--card-fill); border: 1px solid var(--card-border);
  border-radius: var(--card-radius); padding: 12px; margin-top: 12px; }

.msg { border-radius: 9px; padding: 8px 10px; font-size: 12px; }
.msg.err { background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger-text); }
.msg.warn { background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn-text); }
.msg.ok { background: var(--accent-soft); border: 1px solid var(--accent-line); }
.inflight { color: var(--muted); font-size: 12px; }

.banner { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 9px; padding: 7px 10px; margin-top: 10px; font-size: 12px; }

.appeal { margin-top: 10px; padding: 10px; border-radius: 9px;
  background: var(--card-fill); border: 1px solid var(--warn); }
.appealLede { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
/* Only the CONFIRM is loud. The first click commits nothing, so a mint button there
   competes with "Add to queue" directly above it for no reason -- and the two do very
   different things. Amber, not mint, so the armed state cannot be mistaken for either. */
.appeal .btn.armed { background: var(--warn); border-color: var(--warn); color: #241c00;
  font-weight: 600; }
.appeal .row { justify-content: space-between; align-items: center; }

/* Counters. No target and no progress bar anywhere in here, deliberately: 50/100 were
   rough numbers on a call and there is nothing to hit, so a denominator would invent a
   quota nobody agreed to. */
.stats { display: flex; flex-wrap: wrap; gap: 8px; }
.stat { flex: 1 1 calc(33% - 8px); min-width: 78px; background: var(--card-fill);
  border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 10px; }
.statN { font-size: 19px; font-weight: 600; line-height: 1.1; }
.statL { font-size: 11px; color: var(--muted); margin-top: 2px; }
.stat.good .statN { color: var(--accent); }
.stat.warn .statN { color: var(--warn); }
.statRow { width: 100%; display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--card-border); font-size: 12px; }
.statRow:last-child { border-bottom: 0; }
.statRow .who { font-weight: 600; }
.statRow .nums { color: var(--muted); font-variant-numeric: tabular-nums; }

.rolesbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 14px; font-size: 12px; }
.rolesbar .btn.small { padding: 5px 10px; font-size: 12px; font-weight: 600; }
.listhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.item { background: var(--card-fill); border: 1px solid var(--card-border);
  border-radius: 12px; overflow: hidden; }
.item.unseen { border-color: var(--accent-line); }
.itemhead { display: flex; gap: 8px; align-items: flex-start; width: 100%;
  padding: 10px; background: none; border: 0; color: inherit; font: inherit;
  text-align: left; cursor: pointer; user-select: none; -webkit-user-select: none; }
.itemhead:hover { background: var(--soft); }
/* Never truncate with an ellipsis -- it hides data. Wrap instead, and break only
   at real word boundaries (never `anywhere`, which snaps mid-word). */
.label { display: block; font-weight: 600; overflow-wrap: break-word; }
.meta { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; overflow-wrap: break-word; }
.chip { flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid var(--card-border); color: var(--muted); }
/* Status is carried by the word, not only the colour. */
.chip.done { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.chip.run { color: var(--warn); border-color: var(--warn-line); }
.chip.fail { color: var(--danger); border-color: var(--danger-line); }

.result { padding: 0 10px 10px; border-top: 1px solid var(--card-border); }
.cand { padding: 9px 0; border-bottom: 1px dashed var(--card-border); }
.cand:last-child { border-bottom: 0; }
.cand h3 { margin: 0; font-size: 13px; overflow-wrap: break-word; }
.cand .size { margin: 2px 0 0; font-size: 12px; }
.score { float: right; color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 700; }
.why { color: var(--muted); margin: 4px 0 6px; overflow-wrap: break-word; }
.ev { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ev li { font-size: 11px; color: var(--muted); overflow-wrap: break-word; }
.tag { display: inline-block; margin-right: 5px; padding: 1px 5px; border-radius: 4px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.tag.distinctive { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.tag.commodity { background: var(--soft); color: var(--muted); border: 1px solid var(--card-border); }
.chk { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; font-size: 12px; }
.chk input { width: auto; margin: 0; }

/* Who is hiring (0.4): under each employer in a result card. */
.hire { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--soft); display: flex; flex-direction: column; gap: 4px; }
.hire + .hire { margin-top: 6px; }
.hire .small { font-size: 11px; margin: 0; }
.hire .why { margin: 2px 0; font-size: 12px; }
.hire .btn.small { align-self: flex-start; padding: 4px 9px; font-size: 12px; font-weight: 600; }
.hire .status-line.err { color: var(--danger); }
.hire-name { font-weight: 700; font-size: 13px; overflow-wrap: break-word; }
.hire-contact { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.hire-contact .link { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: left; }
.hire-alts summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; }
.hire-alts summary::-webkit-details-marker { display: none; }
.hire-alts ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hire-alts li { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.hire .spin { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; border: 2px solid var(--accent-line); border-top-color: var(--accent); border-radius: 50%; animation: hire-spin .8s linear infinite; }
@keyframes hire-spin { to { transform: rotate(360deg); } }
.hire-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.hire-pick { font-size: 12px; padding: 4px 6px; max-width: 100%; min-width: 0; flex: 1 1 140px; }
.hire-log { list-style: none; margin: 4px 0 0; padding: 0; font-size: 11px; }
.hire-top { padding: 8px 0 4px; border-bottom: 1px dashed var(--card-border); }
.hire-top-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hire-top .hire { margin-top: 6px; }