/* Talent Tabloid "block" theme (owner-approved design, design-ref/talent-tabloid-design.html; 2026-10-15).
   One shared set of tokens for the public site, the dashboards and the admin panel (:root). The block styling below
   is scoped to the public pages (pages with the shared footer #main_footer, and the journal .tt-journal) so private
   screens keep their layout until they are restyled on purpose. Visual only: no selector here changes behaviour. */
:root {
  --tt-ink: #14161A;
  --tt-page: #F1F2F4;
  --tt-card: #FFFFFF;
  --tt-mint: #8EE3C0;
  --tt-mint-soft: #E3F7EE;
  --tt-verified: #DDF5E9;
  --tt-muted: #3B404A;
  --tt-line: 2px solid #14161A;
  --tt-shadow-sm: 3px 3px 0 #14161A;
  --tt-shadow: 5px 5px 0 #14161A;
  --tt-shadow-lg: 8px 8px 0 #14161A;
  --tt-radius: 18px;
  --tt-radius-sm: 12px;
  --tt-font-head: "Bricolage Grotesque", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --tt-font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

/* The mark is drawn in the palette now: no colour filter. */
.tt-logo-mark { filter: none !important; }

/* ---------- Speed: content is visible before the app script runs ----------
   Entrance animations started at opacity 0 and only appeared after the 1.3 MB app script ran (mobile LCP ~11 s).
   On public pages they are shown at once. */
body:has(#main_footer) .reveal-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }
body:has(#main_footer) main [style*="opacity"] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- Base ---------- */
body:has(#main_footer) {
  --font-sans: var(--tt-font-body);
  --font-serif: var(--tt-font-head);
  --font-display: var(--tt-font-head);
  background: var(--tt-page) !important;
  color: var(--tt-ink);
  font-family: var(--tt-font-body);
}
body:has(#main_footer) #root > div,
body:has(#main_footer) main,
body:has(#main_footer) section:not([class*="bg-[#111318]"]):not([class*="bg-stone-900"]):not([class*="bg-[#2B5F5C]"]):not([class*="bg-[#E31B23]"]):not([class*="bg-red-6"]):not([class*="bg-[#0B0D10]"]) {
  background-color: transparent !important;
  background-image: none !important;
}
body:has(#main_footer) .font-sans { font-family: var(--tt-font-body) !important; }
body:has(#main_footer) h1, body:has(#main_footer) h2, body:has(#main_footer) h3,
body:has(#main_footer) .font-serif, body:has(#main_footer) .font-display {
  font-family: var(--tt-font-head) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: -0.03em !important;
}
body:has(#main_footer) h1 { line-height: 1.02 !important; letter-spacing: -0.035em !important; }
body:has(#main_footer) h4, body:has(#main_footer) h5 { font-family: var(--tt-font-head) !important; font-weight: 800 !important; }
body:has(#main_footer) .italic { font-style: normal !important; }
body:has(#main_footer) .font-mono { font-family: var(--tt-font-body) !important; letter-spacing: 0.06em; }

/* ---------- Colour: red / gold / teal accents become ink, mint and mint-soft ---------- */
body:has(#main_footer) main [class~="text-[#E31B23]"], body:has(#main_footer) main [class~="text-[#D3131C]"],
body:has(#main_footer) main [class~="text-[#C1121F]"], body:has(#main_footer) main [class~="text-[#2B5F5C]"],
body:has(#main_footer) main [class~="text-[#8A6305]"], body:has(#main_footer) main [class~="text-[#B8860B]"],
body:has(#main_footer) main [class~="text-[#7F1D1D]"], body:has(#main_footer) main .text-red-500,
body:has(#main_footer) main .text-red-600, body:has(#main_footer) main .text-red-700 { color: var(--tt-ink) !important; }
body:has(#main_footer) main [class~="text-[#3A2E22]"], body:has(#main_footer) main [class~="text-[#111318]"],
body:has(#main_footer) main [class~="text-[#101318]"], body:has(#main_footer) main [class~="text-[#0B0D10]"],
body:has(#main_footer) main .text-stone-900 { color: var(--tt-ink) !important; }
body:has(#main_footer) main [class~="text-[#6B5E4F]"], body:has(#main_footer) main [class~="text-[#5A4D3E]"],
body:has(#main_footer) main [class~="text-[#8B7D6B]"], body:has(#main_footer) main [class~="text-[#667085]"],
body:has(#main_footer) main [class~="text-[#344054]"], body:has(#main_footer) main .text-stone-600,
body:has(#main_footer) main .text-stone-700, body:has(#main_footer) main .text-stone-500 { color: var(--tt-muted) !important; }

/* Soft tinted backgrounds -> mint-soft */
body:has(#main_footer) main [class~="bg-[#FFF0F1]"], body:has(#main_footer) main [class~="bg-[#FFF8F8]"],
body:has(#main_footer) main [class~="bg-[#FFE7E9]"], body:has(#main_footer) main .bg-red-50,
body:has(#main_footer) main [class~="bg-[#2B5F5C]/5"], body:has(#main_footer) main [class~="bg-[#2B5F5C]/10"],
body:has(#main_footer) main [class~="bg-[#2B5F5C]/15"], body:has(#main_footer) main [class~="bg-[#B8860B]/10"],
body:has(#main_footer) main [class~="bg-[#B8860B]/15"] { background-color: var(--tt-mint-soft) !important; }
body:has(#main_footer) main [class~="bg-[#FAF7EE]"], body:has(#main_footer) main [class~="bg-[#F4ECE0]"],
body:has(#main_footer) main [class~="bg-[#F4ECE0]/60"], body:has(#main_footer) main [class~="bg-[#FCFCFD]"],
body:has(#main_footer) main [class~="bg-[#F2F4F7]"], body:has(#main_footer) main .bg-stone-50,
body:has(#main_footer) main .bg-stone-100 { background-color: var(--tt-page) !important; }

/* Dark panels -> ink (white text stays white) */
body:has(#main_footer) main div[class~="bg-[#2B5F5C]"], body:has(#main_footer) main section[class~="bg-[#2B5F5C]"],
body:has(#main_footer) main div[class~="bg-[#E31B23]"], body:has(#main_footer) main section[class~="bg-[#E31B23]"],
body:has(#main_footer) main div.bg-red-600, body:has(#main_footer) main section.bg-red-600,
body:has(#main_footer) main [class~="bg-[#111318]"], body:has(#main_footer) main [class~="bg-[#0B0D10]"],
body:has(#main_footer) main .bg-stone-900 { background-color: var(--tt-ink) !important; background-image: none !important; }
body:has(#main_footer) main section[class~="bg-[#2B5F5C]"], body:has(#main_footer) main section[class~="bg-[#E31B23]"],
body:has(#main_footer) main section.bg-red-600, body:has(#main_footer) main section.bg-stone-900,
body:has(#main_footer) main section[class~="bg-[#111318]"] { border-top: var(--tt-line); border-bottom: var(--tt-line); }
body:has(#main_footer) main [class~="bg-[#111318]"] [class*="text-[#"]:not(:is(a, button)[class*="bg-"]):not(:is(a, button)[class*="bg-"] *),
body:has(#main_footer) main .bg-stone-900 [class*="text-[#"]:not(:is(a, button)[class*="bg-"]):not(:is(a, button)[class*="bg-"] *),
body:has(#main_footer) main div[class~="bg-[#2B5F5C]"] [class*="text-[#"]:not(:is(a, button)[class*="bg-"]):not(:is(a, button)[class*="bg-"] *) { color: #FFFFFF !important; }
/* Light buttons inside dark panels keep ink text */
body:has(#main_footer) main :is([class~="bg-[#111318]"], .bg-stone-900, div[class~="bg-[#2B5F5C]"]) :is(a, button):is([class~="bg-white"], [class~="bg-[#FBF6EC]"], [class~="bg-[#FFFFFF]"]),
body:has(#main_footer) main :is([class~="bg-[#111318]"], .bg-stone-900, div[class~="bg-[#2B5F5C]"]) :is(a, button):is([class~="bg-white"], [class~="bg-[#FBF6EC]"], [class~="bg-[#FFFFFF]"]) * { color: var(--tt-ink) !important; }

/* Borders -> ink */
body:has(#main_footer) main [class~="border-[#E8DFCF]"], body:has(#main_footer) main [class~="border-[#D6CBB8]"],
body:has(#main_footer) main [class~="border-[#E5E7EB]"], body:has(#main_footer) main [class~="border-[#E4E7EC]"],
body:has(#main_footer) main [class~="border-[#F0D2D4]"], body:has(#main_footer) main [class~="border-[#FF9CA2]"],
body:has(#main_footer) main [class~="border-[#E31B23]"], body:has(#main_footer) main [class~="border-[#2B5F5C]"],
body:has(#main_footer) main [class*="border-[#2B5F5C]/"], body:has(#main_footer) main [class*="border-[#B8860B]/"],
body:has(#main_footer) main .border-stone-100, body:has(#main_footer) main .border-stone-200,
body:has(#main_footer) main .border-red-600, body:has(#main_footer) main .border-red-100,
body:has(#main_footer) main [class~="border-[#E3E5E8]"], body:has(#main_footer) main [class~="border-[#E1E3E6]"] { border-color: var(--tt-ink) !important; }

/* ---------- Cards: 2px ink border, hard offset shadow ---------- */
body:has(#main_footer) main :is(div, article, a, li, details)[class*="rounded-"][class~="border"],
body:has(#main_footer) main :is(div, article, a, li, details)[class*="rounded-"][class~="border-2"] {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--tt-ink) !important;
  box-shadow: var(--tt-shadow) !important;
}
body:has(#main_footer) main :is(div, article)[class~="rounded-2xl"][class~="border"],
body:has(#main_footer) main :is(div, article)[class~="rounded-3xl"][class~="border"],
body:has(#main_footer) main :is(div, article)[class*="rounded-[3"][class~="border"],
body:has(#main_footer) main :is(div, article)[class*="rounded-[4"][class~="border"] { border-radius: 20px !important; }
/* Cards inside cards: lighter shadow */
body:has(#main_footer) main [class*="rounded-"][class~="border"] :is(div, a, li)[class*="rounded-"][class~="border"] { box-shadow: var(--tt-shadow-sm) !important; }
body:has(#main_footer) main [class*="shadow-[0_"], body:has(#main_footer) main .shadow-xl, body:has(#main_footer) main .shadow-2xl,
body:has(#main_footer) main .shadow-lg { box-shadow: var(--tt-shadow) !important; }
body:has(#main_footer) main [class*="rounded-"][class~="bg-white"]:not([class~="border"]):not(a):not(button):not(span) { border: var(--tt-line); box-shadow: var(--tt-shadow); }

/* ---------- Buttons ---------- */
body:has(#main_footer) :is(a, button)[class~="bg-[#E31B23]"], body:has(#main_footer) :is(a, button)[class~="bg-[#2B5F5C]"],
body:has(#main_footer) :is(a, button).bg-red-600, body:has(#main_footer) :is(a, button)[class~="bg-[#2B5F5C]/80"],
body:has(#main_footer) :is(a, button)[class~="bg-[#111318]"], body:has(#main_footer) main :is(a, button).bg-stone-900 {
  background: var(--tt-mint) !important;
  color: var(--tt-ink) !important;
  border: var(--tt-line) !important;
  box-shadow: 4px 4px 0 var(--tt-ink) !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
}
body:has(#main_footer) :is(a, button)[class*="border"][class*="rounded-"]:not([class*="bg-[#E31B23]"]):not([class*="bg-[#2B5F5C]"]):not(.bg-red-600):not([class*="text-white"]):not([class*="text-[#FBF6EC]"]) {
  border: var(--tt-line) !important;
  border-radius: 14px !important;
  box-shadow: 4px 4px 0 var(--tt-ink) !important;
  font-weight: 700 !important;
  color: var(--tt-ink) !important;
  background-color: #FFFFFF;
}
body:has(#main_footer) main :is(a, button)[class*="text-white"][class*="border"]:not([class*="bg-[#E31B23]"]):not([class*="bg-[#2B5F5C]"]):not(.bg-red-600),
body:has(#main_footer) main :is(a, button)[class*="text-[#FBF6EC]"][class*="border"]:not([class*="bg-[#2B5F5C]"]) {
  border: 2px solid #FFFFFF !important; border-radius: 14px !important; font-weight: 700 !important;
}
body:has(#main_footer) main :is(a, button)[class~="bg-[#FBF6EC]"], body:has(#main_footer) main :is(a, button)[class~="bg-white"][class*="text-[#2B5F5C]"] {
  background: #FFFFFF !important; color: var(--tt-ink) !important; border: var(--tt-line) !important;
  box-shadow: 4px 4px 0 var(--tt-ink) !important; border-radius: 14px !important; font-weight: 700 !important;
}
body:has(#main_footer) :is(a, button)[class*="bg-"][class*="rounded-"],
body:has(#main_footer) :is(a, button)[class*="border"][class*="rounded-"] {
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease !important;
}
body:has(#main_footer) :is(a, button)[class*="bg-"][class*="rounded-"]:not([class*="bg-transparent"]):not([class*="bg-white/"]):hover,
body:has(#main_footer) :is(a, button)[class*="border"][class*="rounded-"]:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tt-ink) !important; }
body:has(#main_footer) :is(a, button)[class*="bg-"][class*="rounded-"]:active,
body:has(#main_footer) :is(a, button)[class*="border"][class*="rounded-"]:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tt-ink) !important; }
body:has(#main_footer) :is(a, button):focus-visible { outline: 3px solid var(--tt-ink) !important; outline-offset: 3px; }

/* ---------- Pills and badges ---------- */
body:has(#main_footer) main :is(span, div)[class~="rounded-full"][class~="border"] {
  background-color: #FFFFFF !important; border: var(--tt-line) !important; color: var(--tt-ink) !important; font-weight: 700 !important;
}
body:has(#main_footer) main :is(span, div)[class~="rounded-full"]:is([class*="bg-emerald"], [class*="bg-green"], [class~="bg-[#FFF0F1]"], [class~="bg-red-50"]) {
  background-color: var(--tt-verified) !important; color: var(--tt-ink) !important; border: var(--tt-line) !important;
}
body:has(#main_footer) main .text-emerald-500, body:has(#main_footer) main .text-emerald-600 { color: #0F7A4F !important; }

/* Headline accent: the coloured second line becomes a mint block */
body:has(#main_footer) main h1 span {
  display: inline-block !important; color: var(--tt-ink) !important; background: var(--tt-mint);
  border: var(--tt-line); border-radius: 14px; box-shadow: 4px 4px 0 var(--tt-ink); padding: 0 .3em; margin-top: .25em;
}
body:has(#main_footer) main h2 span[class*="text-[#"], body:has(#main_footer) main h2 span[class*="text-red"] {
  color: var(--tt-ink) !important; background: linear-gradient(transparent 58%, var(--tt-mint) 58%);
}

/* ---------- Inputs ---------- */
body:has(#main_footer) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border: var(--tt-line) !important; border-radius: 12px !important; background-color: #FFFFFF !important; color: var(--tt-ink) !important;
}
body:has(#main_footer) header :is(input:not([type="checkbox"]):not([type="radio"])) { border-radius: 999px !important; }
body:has(#main_footer) :is(input, select, textarea):focus { outline: 3px solid var(--tt-mint) !important; outline-offset: 1px; }

/* ---------- Header ---------- */
body:has(#main_footer) header.fixed, body:has(#main_footer) #root > div > header, body:has(#main_footer) nav.sticky {
  background: #FFFFFF !important; border-bottom: var(--tt-line) !important; backdrop-filter: none !important;
}
body:has(#main_footer) header nav a { color: var(--tt-ink) !important; font-weight: 700 !important; }
body:has(#main_footer) header nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--tt-mint); text-underline-offset: 6px; }
body:has(#main_footer) header button:not([class*="bg-"]) { color: var(--tt-ink) !important; font-weight: 700 !important; }

/* ---------- Footer ---------- */
#main_footer { background: var(--tt-ink) !important; color: #C8CDD6 !important; border-top: var(--tt-line) !important; font-family: var(--tt-font-body); }
#main_footer h4 { color: #FFFFFF !important; font-family: var(--tt-font-head) !important; font-weight: 800 !important; letter-spacing: -0.01em; }
#main_footer a, #main_footer p, #main_footer li { color: #C8CDD6 !important; }
#main_footer a:hover { color: var(--tt-mint) !important; }
#main_footer [class*="border-white"] { border-color: #2E333D !important; }
#main_footer img.tt-logo-mark { background: var(--tt-mint) !important; border: 2px solid #FFFFFF; }

/* ---------- Guides block (added on home, /employers and /global-migrants) ---------- */
.tt-guides { max-width: 1240px; margin: 0 auto; padding: 72px 24px 88px; font-family: var(--tt-font-body); color: var(--tt-ink); }
.tt-guides__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.tt-guides__pill { display: inline-block; background: #FFFFFF; border: var(--tt-line); border-radius: 999px; padding: 6px 16px; font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.tt-guides h2 { margin: 0; font-family: var(--tt-font-head) !important; font-weight: 800; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.03em; color: var(--tt-ink); }
.tt-guides__all { background: #FFFFFF; color: var(--tt-ink) !important; text-decoration: none; font-weight: 700; padding: 11px 20px; border-radius: 12px; border: var(--tt-line); box-shadow: 4px 4px 0 var(--tt-ink); transition: transform .12s ease, box-shadow .12s ease; }
.tt-guides__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.tt-guides__card { display: flex; flex-direction: column; gap: 10px; height: 100%; box-sizing: border-box; background: #FFFFFF; border: var(--tt-line); border-radius: 20px; box-shadow: 6px 6px 0 var(--tt-ink); padding: 22px; text-decoration: none; color: var(--tt-ink) !important; transition: transform .12s ease, box-shadow .12s ease; }
.tt-guides__card:hover, .tt-guides__all:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--tt-ink); }
.tt-guides__card:active, .tt-guides__all:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tt-ink); }
.tt-guides__tag { align-self: flex-start; background: var(--tt-mint-soft); border: var(--tt-line); border-radius: 999px; padding: 2px 12px; font-size: 13px; font-weight: 700; }
.tt-guides__title { font-family: var(--tt-font-head); font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
.tt-guides__desc { font-size: 16px; line-height: 1.5; color: var(--tt-muted); }

/* ---------- Small screens: no sideways scrolling ---------- */
@media (max-width: 640px) {
  body:has(#main_footer) { overflow-x: hidden; }
  body:has(#main_footer) main :is(div, article, a)[class*="rounded-"][class~="border"] { box-shadow: 4px 4px 0 var(--tt-ink) !important; }
  body:has(#main_footer) main h1 span { box-shadow: 3px 3px 0 var(--tt-ink); }
  body:has(#main_footer) main .break-words, body:has(#main_footer) main a[href^="mailto:"] { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  body:has(#main_footer) :is(a, button) { transition: none !important; }
}

/* ---------- Remaining red accents (badges, icons, glows, hover text) ---------- */
body:has(#main_footer) main :is(span, small, p, div)[class~="bg-[#E31B23]"]:not(section) { background-color: var(--tt-mint) !important; color: var(--tt-ink) !important; border-left: var(--tt-line); border-bottom: var(--tt-line); }
body:has(#main_footer) main :is(span, small, p)[class~="bg-[#E31B23]"] { font-weight: 800 !important; }
body:has(#main_footer) main [class~="bg-[#E31B23]/10"], body:has(#main_footer) main [class~="bg-[#E31B23]/8"],
body:has(#main_footer) main .bg-rose-50 { background-color: var(--tt-mint-soft) !important; }
body:has(#main_footer) main [class*="from-[#FFF8F8]"], body:has(#main_footer) main [class*="via-[#FFE7E9]"],
body:has(#main_footer) main [class*="to-[#FFD8DB]"] { background-image: none !important; background-color: var(--tt-mint-soft) !important; }
body:has(#main_footer) main [class~="text-[#F1B4B8]"] { color: #2FAE7E !important; }
body:has(#main_footer) main .text-rose-600, body:has(#main_footer) main [class~="group-hover:text-[#D3131C]"] { color: var(--tt-ink) !important; }
body:has(#main_footer) main [class~="border-[#FF9CA2]"], body:has(#main_footer) main [class~="hover:border-[#F2A6AB]"]:hover,
body:has(#main_footer) main [class~="border-[#DDE0E4]"] { border-color: var(--tt-ink) !important; }
body:has(#main_footer) main [class~="fill-[#E31B23]"], body:has(#main_footer) main [fill="#E31B23"] { fill: #2FAE7E !important; }
body:has(#main_footer) main [stroke="#E31B23"] { stroke: var(--tt-ink) !important; }
body:has(#main_footer) main [fill="#FFF4F5"] { fill: var(--tt-mint-soft) !important; }
body:has(#main_footer) main [class~="hover:text-[#C1121F]"]:hover, body:has(#main_footer) main [class~="hover:text-[#FF5A62]"]:hover,
body:has(#main_footer) header [class~="hover:text-[#C1121F]"]:hover { color: var(--tt-ink) !important; }
body:has(#main_footer) ::selection { background: var(--tt-mint); color: var(--tt-ink); }
/* Pricing toggle: the selected plan button is mint, the other stays plain */
body:has(#main_footer) main button.rounded-lg[class~="bg-[#E31B23]"] { box-shadow: 2px 2px 0 var(--tt-ink) !important; border-radius: 10px !important; }

/* ==================================================================================================================
   Release B (2026-10-15): job-seeker dashboard, employer dashboard and admin panel in the block theme.
   Scope: app screens = pages without the public footer and without a public profile. Visual only: colours, borders,
   shadows, radii, type, hover / pressed states, transitions. Semantic colours (rose = danger, emerald = success,
   amber = warning, purple, blue) keep their meaning. Inline styles (users' own colour choices) are never touched.
   ================================================================================================================== */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) {
  --font-sans: var(--tt-font-body);
  --font-serif: var(--tt-font-head);
  --font-display: var(--tt-font-head);
  font-family: var(--tt-font-body);
  color: var(--tt-ink);
  background: var(--tt-page);
}
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(.font-serif, .font-display, h1, h2, h3) {
  font-family: var(--tt-font-head) !important; font-weight: 800 !important; font-style: normal !important; letter-spacing: -0.02em;
}
body:not(:has(#main_footer)):not(:has(#public_profile_page)) .font-sans { font-family: var(--tt-font-body) !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) .font-mono { font-family: var(--tt-font-body) !important; font-weight: 700; letter-spacing: 0.04em; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) .italic { font-style: normal !important; }

/* Page and panel backgrounds */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is([class~="bg-stone-50"], [class~="bg-[#FBF6EC]"], [class~="bg-[#FBF6EC]/60"], [class~="bg-[#FBF6EC]/50"], [class~="bg-[#FBF6EC]/40"], [class~="bg-[#FBF6EC]/30"], [class~="bg-[#FAF7EE]"], [class~="bg-[#F4ECE0]"], [class~="bg-stone-50/50"], [class~="bg-stone-50/30"]) { background-color: var(--tt-page) !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) [class*="bg-[radial-gradient(#E8DFCF"] { background-image: radial-gradient(#C9CDD3 1.5px, transparent 1.5px) !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is([class~="bg-[#FFFFFF]"], [class~="bg-white"]) { background-color: #FFFFFF; }

/* Text */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is([class~="text-[#3A2E22]"], [class~="text-slate-900"], [class~="text-stone-900"], [class~="text-stone-800"], [class~="text-[#2B5F5C]"], [class~="text-[#1b4d3e]"]) { color: var(--tt-ink) !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is([class~="text-[#8B7D6B]"], [class~="text-[#6B5E4F]"], [class~="text-[#8C7E70]"], [class~="text-stone-500"], [class~="text-stone-600"], [class~="text-stone-700"]) { color: var(--tt-muted) !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is([class~="text-[#B8860B]"], [class~="text-[#8A6305]"]) { color: #0F6B47 !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is([class~="hover:text-[#3A2E22]"], [class~="hover:text-[#2B5F5C]"], [class~="hover:text-[#234F4C]"]):hover { color: var(--tt-ink) !important; }

/* Lines: dividers become neutral; cards get the ink block border below */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is([class~="border-[#E8DFCF]"], [class~="border-[#E8DFCF]/60"], [class~="border-[#E8DFCF]/70"], [class~="border-stone-200"], [class~="border-stone-200/80"], [class~="border-stone-100"]) { border-color: #C9CDD3 !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is([class~="border-[#2B5F5C]"], [class~="border-[#2B5F5C]/20"], [class~="border-[#2B5F5C]/30"], [class~="border-[#2B5F5C]/40"], [class~="border-[#B8860B]/20"], [class~="border-[#B8860B]/30"], [class~="border-[#B8860B]/60"], [class~="focus:border-[#2B5F5C]"]:focus) { border-color: var(--tt-ink) !important; }

/* Cards: white panels with a border become ink blocks with a hard shadow */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(div, section, article, li, details)[class~="border"]:is([class~="rounded-xl"], [class~="rounded-2xl"], [class~="rounded-3xl"], [class*="rounded-[2"], [class*="rounded-[3"]):is([class~="bg-white"], [class~="bg-[#FFFFFF]"]) {
  border: 2px solid var(--tt-ink) !important;
  box-shadow: 4px 4px 0 var(--tt-ink) !important;
}
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(div, section, article)[class~="border"]:is([class~="rounded-2xl"], [class~="rounded-3xl"], [class*="rounded-[2"], [class*="rounded-[3"]):is([class~="bg-white"], [class~="bg-[#FFFFFF]"]) { border-radius: 18px !important; }
/* Cards inside cards: lighter */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) [class~="border"][class*="rounded-"]:is([class~="bg-white"], [class~="bg-[#FFFFFF]"]) :is(div, li, article)[class~="border"][class*="rounded-"]:is([class~="bg-white"], [class~="bg-[#FFFFFF]"]) { box-shadow: 2px 2px 0 var(--tt-ink) !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is([class*="shadow-[0_"], [class*="shadow-[1px_"], .shadow-sm, .shadow-xs, .shadow-2xs, .shadow-md):not(button):not(a):not(input):not(select):not(textarea):not([class~="border"]) { box-shadow: none !important; }

/* Primary buttons: mint, ink border, offset shadow */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(a, button):is([class~="bg-[#2B5F5C]"], [class~="bg-red-600"], [class~="bg-[#B8860B]"], [class~="bg-teal-600"], [class~="bg-stone-900"]):not(:disabled) {
  background-color: var(--tt-mint) !important; color: var(--tt-ink) !important;
  border: 2px solid var(--tt-ink) !important; box-shadow: 3px 3px 0 var(--tt-ink) !important; font-weight: 700 !important;
}
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(a, button):is([class~="bg-[#2B5F5C]"], [class~="bg-red-600"], [class~="bg-[#B8860B]"], [class~="bg-teal-600"], [class~="bg-stone-900"]):not(:disabled) * { color: var(--tt-ink) !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(a, button):is([class~="bg-[#2B5F5C]"], [class~="bg-red-600"], [class~="bg-[#B8860B]"]):disabled { background-color: #DCDFE3 !important; color: var(--tt-muted) !important; border: 2px solid #9AA1AD !important; box-shadow: none !important; }
/* Secondary buttons: white with ink border */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) button[class~="border"]:is([class~="bg-white"], [class~="bg-[#FFFFFF]"], [class~="bg-transparent"]):is([class~="rounded-xl"], [class~="rounded-lg"], [class~="rounded-full"]):not(:disabled) {
  border: 2px solid var(--tt-ink) !important; box-shadow: 2px 2px 0 var(--tt-ink) !important; color: var(--tt-ink);
}
/* Interactive feel: hover lift, pressed, smooth */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(a, button)[class*="rounded-"] { transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(a, button)[class*="rounded-"]:is([style*="box-shadow"], [class~="border"], [class*="bg-[#2B5F5C]"], [class~="bg-red-600"], [class*="bg-[#B8860B]"]):not(:disabled):hover { transform: translate(-1px, -1px); }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(a, button)[class*="rounded-"]:is([class*="bg-[#2B5F5C]"], [class~="bg-red-600"], [class*="bg-[#B8860B]"]):not(:disabled):hover { box-shadow: 5px 5px 0 var(--tt-ink) !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(a, button)[class*="rounded-"]:not(:disabled):active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--tt-ink) !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(a, button, [role=tab]):focus-visible { outline: 3px solid var(--tt-ink) !important; outline-offset: 2px; }

/* Tints: teal / gold washes become mint-soft (selected nav items, soft badges, hover rows) */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is([class~="bg-[#2B5F5C]/5"], [class~="bg-[#2B5F5C]/10"], [class~="bg-[#2B5F5C]/15"], [class~="bg-[#B8860B]/10"], [class~="bg-[#B8860B]/15"], [class~="bg-[#E8DFCF]/70"], [class~="bg-[#E8DFCF]"]) { background-color: var(--tt-mint-soft) !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) button:is([class~="bg-[#2B5F5C]/10"], [class~="bg-[#2B5F5C]/15"]) { box-shadow: inset 0 0 0 2px var(--tt-ink) !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is([class~="hover:bg-[#2B5F5C]/5"], [class~="hover:bg-[#2B5F5C]/10"], [class~="hover:bg-[#2B5F5C]/15"], [class~="hover:bg-[#FAF7EE]"], [class~="hover:bg-[#FBF6EC]"], [class~="hover:bg-[#F5EFEB]"], [class~="hover:bg-[#F6F0E2]"], [class~="hover:bg-[#E8DFCF]/50"], [class~="hover:bg-[#B8860B]/25"]):hover { background-color: var(--tt-mint-soft) !important; }
/* Non-button fills (progress, active markers, the logo badge): mint */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(div, span):is([class~="bg-[#2B5F5C]"], [class~="bg-red-600"], [class~="bg-[#B8860B]"]) { background-color: var(--tt-mint) !important; color: var(--tt-ink) !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(div, span):is([class~="bg-[#2B5F5C]"], [class~="bg-red-600"], [class~="bg-[#B8860B]"]) :is(svg, span) { color: var(--tt-ink) !important; }

/* Text inside those mint fills stays readable (ink, not white) */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(div, span):is([class~="bg-[#2B5F5C]"], [class~="bg-red-600"], [class~="bg-[#B8860B]"]) :is([class*="text-white"], [class*="text-[#FBF6EC]"], [class*="text-emerald"], [class*="text-stone-"], [class*="text-[#E8DFCF]"]) { color: var(--tt-ink) !important; }

/* Progress bars (track + fill) */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) div[class~="rounded-full"]:is([class~="h-1"], [class~="h-1.5"], [class~="h-2"], [class~="h-2.5"], [class~="h-3"]):has(> div) { background-color: #FFFFFF !important; border: 2px solid var(--tt-ink); box-sizing: content-box; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) div[class~="rounded-full"]:is([class~="h-1"], [class~="h-1.5"], [class~="h-2"], [class~="h-2.5"], [class~="h-3"]) > div { transition: width .4s ease; }

/* Friendly empty and drop areas */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(div, label, button)[class~="border-dashed"] { border: 2px dashed var(--tt-ink) !important; background-color: var(--tt-mint-soft) !important; border-radius: 16px !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(div, label, button)[class~="border-dashed"]:hover { background-color: #D4F1E3 !important; }

/* Inputs */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]), select, textarea) {
  border: 2px solid var(--tt-ink) !important; border-radius: 12px !important; background-color: #FFFFFF !important; color: var(--tt-ink) !important;
}
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(input, select, textarea):focus { outline: 3px solid var(--tt-mint) !important; outline-offset: 1px; box-shadow: none !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(input[type=checkbox], input[type=radio], input[type=range]) { accent-color: var(--tt-ink); }

/* Tables (admin, finances) */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) table { border-collapse: separate; border-spacing: 0; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) thead th, body:not(:has(#main_footer)):not(:has(#public_profile_page)) thead { background-color: var(--tt-mint-soft) !important; color: var(--tt-ink) !important; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) thead th { border-bottom: 2px solid var(--tt-ink) !important; font-weight: 800; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) tbody tr { transition: background-color .12s ease; }
body:not(:has(#main_footer)):not(:has(#public_profile_page)) tbody tr:hover { background-color: #F6FBF8; }

/* Badges / pills with a border */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) span[class~="rounded-full"][class~="border"]:not(:empty):not([class*="rose"]):not([class*="red"]):not([class*="amber"]) { border: 2px solid var(--tt-ink) !important; font-weight: 700; }

/* Dark gradient banner -> ink */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) [class~="from-emerald-950"] { background-image: none !important; background-color: var(--tt-ink) !important; }

/* Scrollbars in long sidebars and lists */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) * { scrollbar-color: #9AA1AD transparent; }

/* ---------- Skeleton loader (replaces the spinner screen while the app checks sign-in) ---------- */
.tt-skel { min-height: 100vh; background: var(--tt-page); display: grid; grid-template-columns: 260px 1fr; gap: 28px; padding: 28px; box-sizing: border-box; }
.tt-skel__side, .tt-skel__card { background: #FFFFFF; border: 2px solid var(--tt-ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--tt-ink); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.tt-skel__main { display: flex; flex-direction: column; gap: 22px; }
.tt-skel__bar { height: 14px; border-radius: 999px; background: linear-gradient(90deg, #E3E6EA 25%, #EEF7F2 50%, #E3E6EA 75%); background-size: 200% 100%; animation: tt-shimmer 1.3s ease-in-out infinite; }
.tt-skel__bar--lg { height: 26px; width: 55%; }
.tt-skel__bar--md { width: 80%; }
.tt-skel__bar--sm { width: 40%; }
.tt-skel__dot { width: 72px; height: 72px; border-radius: 999px; border: 2px solid var(--tt-ink); background: var(--tt-mint-soft); }
.tt-skel__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@keyframes tt-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (max-width: 760px) { .tt-skel { grid-template-columns: 1fr; padding: 16px; } .tt-skel__side { display: none; } }
@media (prefers-reduced-motion: reduce) { .tt-skel__bar { animation: none; } body :is(a, button) { transition: none !important; } }

/* Release D2 (2026-10-15): inside mint-filled panels (formerly dark teal), dark chips and translucent buttons become
   white with an ink border so their text stays readable (Compare Candidates workspace, similar panels). */
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(div, span):is([class~="bg-[#2B5F5C]"], [class~="bg-red-600"], [class~="bg-[#B8860B]"]) :is([class~="bg-[#234F4C]"], [class*="bg-white/"], [class*="bg-black/"]) {
  background-color: #FFFFFF !important; border: 2px solid var(--tt-ink) !important; color: var(--tt-ink) !important;
}
body:not(:has(#main_footer)):not(:has(#public_profile_page)) :is(div, span):is([class~="bg-[#2B5F5C]"], [class~="bg-red-600"], [class~="bg-[#B8860B]"]) :is([class~="bg-[#234F4C]"], [class*="bg-white/"], [class*="bg-black/"]) * { color: var(--tt-ink) !important; }

/* ---------- Home hero, left column (2026-10-15, design-ref/talent-tabloid-design.html) ---------- */
body:has(#main_footer) main .tt-hero-h1 {
  margin: 0 !important; max-width: 680px; overflow-wrap: break-word;
  font-family: var(--tt-font-head) !important; font-weight: 800 !important; font-style: normal !important;
  font-size: clamp(42px, 6vw, 76px) !important; line-height: 1.02 !important; letter-spacing: -0.035em !important;
  color: var(--tt-ink) !important;
}
body:has(#main_footer) main .tt-hero-h1 .tt-hero-mark {
  display: inline-block !important; margin-top: 8px !important; padding: 0 14px !important;
  background: var(--tt-mint) !important; color: var(--tt-ink) !important;
  border: 2px solid var(--tt-ink) !important; border-radius: 14px !important; box-shadow: 4px 4px 0 var(--tt-ink) !important;
}
body:has(#main_footer) main .tt-hero-lead {
  margin: 28px 0 0; max-width: 580px; font-family: var(--tt-font-body); font-size: 20px; line-height: 1.6; color: var(--tt-muted);
}
body:has(#main_footer) main .tt-hero-ctas { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px; }
body:has(#main_footer) main .tt-hero-btn {
  font-family: var(--tt-font-body); font-weight: 700; font-size: 18px; line-height: 1.2; padding: 15px 30px;
  color: var(--tt-ink); border: 2px solid var(--tt-ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--tt-ink);
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
body:has(#main_footer) main .tt-hero-btn--mint { background: var(--tt-mint); }
body:has(#main_footer) main .tt-hero-btn--white { background: #FFFFFF; }
body:has(#main_footer) main .tt-hero-btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--tt-ink); }
body:has(#main_footer) main .tt-hero-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tt-ink); }
body:has(#main_footer) main .tt-hero-btn:focus-visible { outline: 3px solid var(--tt-ink); outline-offset: 3px; }
body:has(#main_footer) main .tt-hero-chips { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
body:has(#main_footer) main .tt-hero-chip {
  background: var(--tt-ink); color: #FFFFFF; font-family: var(--tt-font-body); font-size: 15px; font-weight: 700;
  line-height: 1.4; padding: 7px 14px; border-radius: 10px;
}
/* Right column: the example profile card, vertically centred, no gap where the illustration was */
body:has(#main_footer) main .grid:has(.tt-hero-h1) { align-items: center !important; }
body:has(#main_footer) main .grid:has(.tt-hero-h1) [class~="min-[1400px]:-translate-x-4"] { translate: none !important; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  body:has(#main_footer) main .tt-hero-ctas { flex-direction: column; }
  body:has(#main_footer) main .tt-hero-btn { width: 100%; text-align: center; }
  body:has(#main_footer) main .tt-hero-lead { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { body:has(#main_footer) main .tt-hero-btn { transition: none; } }

/* ---------- Logo mark = favicon colours (2026-10-15, Release F) ----------
   The favicon is the mark on a pale mint tile (#E3F7EE) with an ink border and rounded corners. The header showed the
   bare mark and the footer put it on a bright mint tile with a white border (green half of the T disappeared). */
img.tt-logo-mark,
#main_footer img.tt-logo-mark {
  background: #E3F7EE !important; border: 2px solid var(--tt-ink, #14161A) !important;
  border-radius: 24% !important; padding: 3px !important; box-sizing: border-box !important;
}