/* Talent Intelligence Tracker.

   Accessibility is built in, not bolted on:
   - Colours are validated colourblind-safe (blue/orange/violet, worst adjacent
     CVD separation dE 24.7). The old green/red pair was the classic red-green
     failure case and is gone.
   - Colour NEVER carries meaning alone: every tag also carries its words.
   - Text meets WCAG AA (4.5:1) against its surface. The parent theme was
     washing our text out to near-invisible grey, so colours are declared with
     enough weight to win.
   - Mobile first. Nothing bleeds horizontally: wide content scrolls inside its
     own container, never the page body.
*/

.tit-wrap {
  --tit-fg:#111418;         /* 16.1:1 on white */
  --tit-mut:#4a5560;        /* 7.9:1 on white — readable, not decorative */
  --tit-line:#d9dee5;
  --tit-surface:#f7f9fb;
  --tit-hiring:#2a78d6;     /* blue   */
  --tit-cutting:#eb6834;    /* orange */
  --tit-pay:#4a3aa7;        /* violet */
  --tit-neutral:#5b6570;
  color:var(--tit-fg); font-size:16px; line-height:1.55; max-width:100%;
}
.tit-wrap, .tit-wrap p, .tit-wrap td, .tit-wrap th, .tit-wrap span, .tit-wrap a {
  -webkit-text-size-adjust:100%;
}

.tit-empty { border:1px solid var(--tit-line); border-radius:12px; padding:28px; text-align:center; }
.tit-empty h2 { margin:0 0 8px; font-size:20px; color:var(--tit-fg); }
.tit-empty p { margin:0 auto; max-width:56ch; color:var(--tit-mut); }
.tit-empty-note { margin-top:10px !important; font-size:14px; }

/* --- Stat tiles ------------------------------------------------------- */
.tit-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:0 0 22px; }
@media (min-width:700px){ .tit-stats { grid-template-columns:repeat(4,1fr); } }
.tit-stat { border:1px solid var(--tit-line); border-radius:12px; padding:16px 12px;
  text-align:center; background:var(--tit-surface); }
.tit-wrap .tit-n { display:block; font-size:30px; font-weight:700; line-height:1.1;
  color:var(--tit-fg); font-variant-numeric:tabular-nums; }
.tit-wrap .tit-l { display:block; font-size:13px; color:var(--tit-mut);
  margin-top:5px; font-weight:500; }

/* --- Pillar bars ------------------------------------------------------ */
.tit-pillars { display:grid; gap:14px; margin:0 0 24px; }
@media (min-width:760px){ .tit-pillars { grid-template-columns:repeat(2,1fr); gap:14px 28px; } }
.tit-pillar-head { display:flex; justify-content:space-between; gap:12px;
  font-size:15px; margin-bottom:6px; color:var(--tit-fg); }
.tit-pillar-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.tit-pillar-n { font-variant-numeric:tabular-nums; color:var(--tit-mut); flex:none; font-weight:600; }
.tit-bar { background:#e6eaef; border-radius:99px; height:9px; overflow:hidden; }
.tit-bar span { display:block; height:100%; background:var(--tit-hiring); border-radius:99px; }

/* --- Filters ---------------------------------------------------------- */
.tit-filters { display:grid; grid-template-columns:1fr; gap:8px; margin:0 0 16px; }
@media (min-width:560px){ .tit-filters { grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .tit-filters { grid-template-columns:repeat(3,1fr); } }
.tit-filters select, .tit-filters input {
  width:100%; min-width:0; padding:11px 12px; font-size:15px;
  border:1px solid var(--tit-line); border-radius:9px;
  background:#fff; color:var(--tit-fg); appearance:auto; }
.tit-filters select:focus-visible, .tit-filters input:focus-visible {
  outline:2px solid var(--tit-hiring); outline-offset:1px; }

.tit-note { font-size:14px; color:var(--tit-mut); margin:0 0 16px; max-width:70ch; }

/* --- Table ------------------------------------------------------------ */
.tit-table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--tit-line); border-radius:12px; }
.tit-table { width:100%; border-collapse:collapse; font-size:15px; min-width:760px; }
.tit-table th, .tit-table td { padding:13px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--tit-line); }
.tit-wrap .tit-table th { font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--tit-mut); background:var(--tit-surface); font-weight:600; }
.tit-table tr:last-child td { border-bottom:0; }

.tit-headline { max-width:430px; }
.tit-wrap .tit-h { display:block; font-weight:600; color:var(--tit-fg); }
/* Our interpretation, visually separated from the sourced fact. */
.tit-wrap .tit-rt { display:block; margin-top:5px; font-size:14px; color:var(--tit-mut);
  border-left:3px solid var(--tit-line); padding-left:9px; }

/* Colour never carries meaning alone: each tag also carries its words. */
.tit-tag, .tit-conf { display:inline-block; padding:3px 9px; border-radius:99px;
  font-size:13px; white-space:nowrap; font-weight:500; }
.tit-tag { background:#eef1f5; color:var(--tit-fg); }
.tit-hiring     { background:#e3edfa; color:#17457d; box-shadow:inset 0 0 0 1px #b9d3f2; }
.tit-displacement { background:#fdeae1; color:#8c3410; box-shadow:inset 0 0 0 1px #f6c7ae; }
.tit-comp_shift { background:#eae7f7; color:#332874; box-shadow:inset 0 0 0 1px #cbc4ec; }

.tit-conf { border:1px solid var(--tit-line); color:var(--tit-fg); }
.tit-c-verified { background:#e3edfa; color:#17457d; border-color:#b9d3f2; }
.tit-c-rumored  { background:#f4f6f8; color:var(--tit-mut); font-style:italic; }

.tit-hq { font-size:12px; padding:2px 6px; border-radius:5px;
  background:#eef1f5; color:var(--tit-fg); }
.tit-when { font-size:12.5px; color:var(--tit-mut); }
.tit-cite { margin:16px 0 0; font-size:13.5px; color:var(--tit-mut); }

.tit-wrap a { color:#1a5fb4; text-decoration:underline; }
.tit-wrap a:hover { color:#12447f; }

/* NO prefers-color-scheme block, deliberately.

   The parent WordPress theme paints a white page background regardless of the
   OS setting. Honouring prefers-color-scheme here produced light text on that
   white background — the exact unreadability this rewrite set out to fix.
   Our surface is not ours to control, so we style for the surface we are
   actually given. Revisit only if the theme gains a real dark mode. */

/* --- Company profile pages -------------------------------------------- */
.tit-company h1 { font-size:32px; margin:6px 0 8px; color:var(--tit-fg); }
.tit-crumb { font-size:14px; color:var(--tit-mut); margin:0 0 4px; }
.tit-crumb span { margin:0 4px; }

.tit-timeline { list-style:none; margin:22px 0 0; padding:0; }
.tit-event { display:grid; grid-template-columns:1fr; gap:4px;
  padding:18px 0; border-top:1px solid var(--tit-line); }
@media (min-width:700px){
  .tit-event { grid-template-columns:118px 1fr; gap:20px; }
}
.tit-event-when { font-size:14px; color:var(--tit-mut);
  font-variant-numeric:tabular-nums; padding-top:3px; }
.tit-company .tit-h { font-size:18px; margin:8px 0 0; font-weight:600; }
.tit-company .tit-rt { margin:7px 0 0; border-left:3px solid var(--tit-line);
  padding-left:10px; color:var(--tit-mut); font-size:15px; }
.tit-event-meta { margin:9px 0 0; font-size:14px; color:var(--tit-mut); }
.tit-event-meta strong { color:var(--tit-fg); }
.tit-event .tit-tag { margin-right:5px; }

/* --- Sources page ------------------------------------------------------ */
.tit-sources h1 { font-size:32px; margin:6px 0 10px; color:var(--tit-fg); }
.tit-src-cat { font-size:19px; margin:28px 0 10px; color:var(--tit-fg); }
.tit-callout { border:1px solid var(--tit-line); border-left:4px solid var(--tit-hiring);
  background:var(--tit-surface); border-radius:10px; padding:14px 16px;
  margin:6px 0 22px; font-size:14.5px; color:var(--tit-mut); max-width:78ch; }
.tit-callout strong { color:var(--tit-fg); }
.tit-sources .tit-table { min-width:720px; }

/* ======================================================================
   Visual layer. The palette is the validated colourblind-safe set (blue /
   orange / violet / teal, worst adjacent CVD separation dE 24.7). Colour is
   always paired with a word or an icon so it never carries meaning alone.
   ====================================================================== */

.tit-wrap {
  --tit-blue:#2a78d6; --tit-orange:#eb6834; --tit-violet:#4a3aa7;
  --tit-teal:#1baf7a; --tit-ink-blue:#17457d; --tit-ink-orange:#8c3410;
  --tit-ink-violet:#332874; --tit-ink-teal:#0c6349;
}

/* --- Hero -------------------------------------------------------------- */
.tit-hero { border:1px solid var(--tit-line); border-radius:16px;
  padding:22px 22px 20px; margin:0 0 22px;
  background:linear-gradient(140deg,#f4f8fe 0%,#fdf6f2 55%,#f7f4fd 100%); }
.tit-hero h2 { margin:0 0 6px; font-size:23px; color:var(--tit-fg); font-weight:650; }
.tit-hero p { margin:0; color:var(--tit-mut); font-size:15px; max-width:62ch; }
.tit-live { display:inline-flex; align-items:center; gap:7px; font-size:13px;
  font-weight:600; color:var(--tit-ink-teal); background:#e4f6ee;
  border:1px solid #b9e6d3; border-radius:99px; padding:4px 11px; margin:0 0 12px; }
.tit-live-dot { width:8px; height:8px; border-radius:50%; background:var(--tit-teal);
  box-shadow:0 0 0 3px rgba(27,175,122,.22); }
.tit-hero-figs { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.tit-hero-fig { background:#fff; border:1px solid var(--tit-line); border-radius:10px;
  padding:9px 13px; font-size:14px; color:var(--tit-mut); }
.tit-hero-fig strong { color:var(--tit-fg); font-size:17px; margin-right:5px;
  font-variant-numeric:tabular-nums; }

/* --- Stat tiles get their own accent ---------------------------------- */
.tit-stat { position:relative; overflow:hidden; }
.tit-stat::before { content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:var(--tit-blue); }
.tit-stat:nth-child(2)::before { background:var(--tit-orange); }
.tit-stat:nth-child(3)::before { background:var(--tit-violet); }
.tit-stat:nth-child(4)::before { background:var(--tit-teal); }

/* --- Pillar bars, one hue each, with a label chip ---------------------- */
.tit-pillar-name::before { content:""; display:inline-block; width:9px; height:9px;
  border-radius:2px; margin-right:8px; background:var(--tit-blue); vertical-align:middle; }
.tit-pillar:nth-child(2) .tit-pillar-name::before { background:var(--tit-orange); }
.tit-pillar:nth-child(3) .tit-pillar-name::before { background:var(--tit-violet); }
.tit-pillar:nth-child(4) .tit-pillar-name::before { background:var(--tit-teal); }
.tit-pillar:nth-child(2) .tit-bar span { background:var(--tit-orange); }
.tit-pillar:nth-child(3) .tit-bar span { background:var(--tit-violet); }
.tit-pillar:nth-child(4) .tit-bar span { background:var(--tit-teal); }

/* --- Charts ------------------------------------------------------------ */
.tit-charts { display:grid; grid-template-columns:1fr; gap:16px; margin:0 0 24px; }
@media (min-width:820px){ .tit-charts { grid-template-columns:1fr 1fr; } }
.tit-chart { border:1px solid var(--tit-line); border-radius:12px; padding:16px 18px;
  background:#fff; }
.tit-chart h3 { margin:0 0 3px; font-size:15px; color:var(--tit-fg); font-weight:650; }
.tit-chart .tit-sub { margin:0 0 14px; font-size:13px; color:var(--tit-mut); }
.tit-rank { display:grid; gap:9px; }
.tit-rank-row { display:grid; grid-template-columns:104px 1fr auto; gap:10px;
  align-items:center; font-size:14px; }
.tit-rank-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--tit-fg); }
.tit-rank-track { background:#eef1f5; border-radius:99px; height:10px; overflow:hidden; }
.tit-rank-fill { display:block; height:100%; border-radius:99px; background:var(--tit-blue); }
.tit-rank-n { font-variant-numeric:tabular-nums; color:var(--tit-mut);
  font-weight:600; min-width:22px; text-align:right; }
/* One hue for a magnitude chart. Colour by rank would repaint the survivors
   every time a filter changed the order, so the country chart stays one blue
   and the bar length carries the magnitude. */
.tit-rank-row[data-dir="hiring"]       .tit-rank-fill { background:var(--tit-orange); }
.tit-rank-row[data-dir="displacement"] .tit-rank-fill { background:var(--tit-violet); }
.tit-rank-row[data-dir="comp_shift"]   .tit-rank-fill { background:var(--tit-teal); }
.tit-rank-row[data-dir="neutral"]      .tit-rank-fill { background:#6b7684; }

/* --- Table: colour the direction column, keep the words ---------------- */
.tit-table tbody tr:hover { background:#f9fbfd; }
.tit-h a { text-decoration:none; }
.tit-h a:hover { text-decoration:underline; }

/* ---------------------------------------------------------------------------
   The theme's Table of Contents plugin injects itself into any post with
   headings, and it lands in the middle of the hero. This stylesheet only ever
   loads on our own routes, so hiding it here cannot affect a normal blog post.
   The server-side filter in page.php is the real fix; this covers the case
   where the TOC plugin renders through a path the filter does not reach.
   --------------------------------------------------------------------------- */
.tit-wrap #ez-toc-container,
.tit-wrap .ez-toc-title-container,
#tit-dashboard #ez-toc-container { display:none !important; }

/* At a glance ------------------------------------------------------------ */
.tit-glance { margin:16px 0 0; border-top:1px solid var(--tit-line); }
.tit-glance-row { display:grid; grid-template-columns:1fr; gap:2px;
  padding:11px 0; border-bottom:1px solid var(--tit-line); }
@media (min-width:640px){
  .tit-glance-row { grid-template-columns:120px 1fr; gap:16px; align-items:baseline; }
}
.tit-wrap .tit-glance-when { font-size:13px; font-weight:650; color:var(--tit-fg);
  text-transform:uppercase; letter-spacing:.04em; }
.tit-wrap .tit-glance-what { font-size:15px; color:var(--tit-mut); }
.tit-wrap .tit-glance-what strong { color:var(--tit-fg); font-size:17px;
  font-variant-numeric:tabular-nums; }
.tit-hero-fine { margin:14px 0 0 !important; font-size:13.5px; }

/* Region strip ----------------------------------------------------------- */
.tit-regions { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.tit-wrap .tit-region { display:inline-flex; align-items:center; gap:8px;
  padding:8px 13px; border:1px solid var(--tit-line); border-radius:99px;
  background:#fff; color:var(--tit-fg); font-size:14px; font-weight:550;
  cursor:pointer; line-height:1.2; font-family:inherit; }
.tit-wrap .tit-region:hover { border-color:var(--tit-blue); }
.tit-wrap .tit-region:focus-visible { outline:2px solid var(--tit-blue); outline-offset:2px; }
/* Selection is a filled pill plus a weight change, never colour alone. */
.tit-wrap .tit-region.is-on { background:var(--tit-blue); border-color:var(--tit-blue);
  color:#fff; font-weight:700; }
.tit-region-flag { font-size:15px; }
.tit-region-n { font-size:12.5px; font-variant-numeric:tabular-nums;
  color:var(--tit-mut); background:#f1f4f8; border-radius:99px; padding:1px 7px; }
.tit-wrap .tit-region.is-on .tit-region-n { background:rgba(255,255,255,.24); color:#fff; }

/* The theme tracks its headings wide, which turns "11" into "1 1". Numerals in
   our own figures opt out. */
.tit-wrap .tit-glance-what strong, .tit-wrap .tit-n,
.tit-rank-n, .tit-region-n { letter-spacing:0; }

.tit-chart-wide { grid-column:1 / -1; }
.tit-chart-wide .tit-pillars { margin:0; }

@media (min-width:560px){ .tit-rank-row { grid-template-columns:150px 1fr auto; } }
.tit-wrap .tit-chart-wide { margin:0 0 16px; }

/* ---------------------------------------------------------------------------
   Narrow screens: the table becomes cards.
   A six-column table squeezed into a phone gives every headline a column about
   one word wide, and side-scrolling a table means the employer scrolls out of
   view while you read what happened to them. Below the breakpoint each row
   becomes a card and each cell wears its column name.
   --------------------------------------------------------------------------- */
@media (max-width:860px){
  .tit-table-scroll { overflow-x:visible; border:0; border-radius:0; }
  .tit-table { min-width:0; display:block; }
  .tit-table thead { position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; }
  .tit-table tbody, .tit-table tr, .tit-table td { display:block; }
  .tit-table tr { border:1px solid var(--tit-line); border-radius:12px;
    padding:14px 16px; margin:0 0 12px; background:#fff; }
  .tit-table td { border:0; padding:0; }
  .tit-table td + td { margin-top:9px; }
  /* The headline leads the card, so it is the one cell with no label. */
  .tit-table td[data-label]:not(.tit-headline)::before {
    content:attr(data-label) ": "; font-size:12px; text-transform:uppercase;
    letter-spacing:.04em; color:var(--tit-mut); margin-right:6px; }
  .tit-headline { max-width:none; }
  .tit-wrap .tit-table .tit-h { font-size:16px; }
  .tit-wrap .tit-table .tit-rt { border-left:3px solid var(--tit-line);
    padding-left:11px; margin-top:8px; }
}

/* A single inline figure wants proportional numerals. Tabular figures pad the
   narrow "1" to a full advance width, which made "11" read as "1 1". */
.tit-wrap .tit-glance-what strong { font-variant-numeric:normal; }

/* ---------------------------------------------------------------------------
   Full bleed on phones.
   The theme nests two padded containers, which on a 375px screen leaves the
   dashboard 219px to work in: the headline breaks over six lines and the stat
   tiles have no room for their numbers. This cancels both containers so the
   content spans the viewport, and puts back a single sane gutter. Standard
   full-bleed, so nothing can exceed the viewport width.
   --------------------------------------------------------------------------- */
@media (max-width:700px){
  /* Block themes set `.entry-content > * { margin-inline:auto }`, which beats a
     single-class selector. The theme's own container is what we are cancelling,
     so its rule is exactly the one that has to lose. */
  /* max-width:100% resolves against the padded container, so it pinned the
     width back to 219px even with the negative margins applied. */
  .entry-content .tit-wrap, .tit-wrap { box-sizing:border-box; width:100vw;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
    padding-left:14px; padding-right:14px; }
  .tit-hero { padding:16px 15px 15px; border-radius:12px; }
  .tit-wrap .tit-hero h2 { font-size:20px; line-height:1.25; }
  .tit-wrap .tit-hero p { font-size:14.5px; }
  .tit-glance-row { padding:10px 0; }
  .tit-wrap .tit-n { font-size:26px; }
  .tit-stat { padding:14px 10px; }
}