/* =========================================================
   Global IT Finest — design tokens
   ========================================================= */
:root{
  --ink:        #101826;
  --ink-soft:   #3C4550;
  --paper:      #F1F3F2;
  --paper-dim:  #E6E9E7;
  --steel:      #2E5266;
  --steel-dim:  #4F7284;
  --amber:      #B8863B;
  --line:       #D3D7D5;
  --line-dark:  #2A3646;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max: 1180px;
  --gutter: 6vw;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.12;
  margin:0 0 0.5em;
  color:var(--ink);
}
h1{ font-size:clamp(2.4rem, 5vw, 4rem); letter-spacing:-0.01em; }
h2{ font-size:clamp(1.7rem, 3vw, 2.5rem); letter-spacing:-0.005em; }
h3{ font-size:1.15rem; font-weight:600; }

p{ margin:0 0 1em; max-width:62ch; color:var(--ink-soft); }
a{ color:inherit; }

.eyebrow{
  font-size:0.85rem;
  color:var(--steel-dim);
  margin:0 0 0.9em;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(241,243,242,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--gutter);
  max-width:var(--max); margin:0 auto;
}
.logo{
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:600;
  text-decoration:none;
  color:var(--ink);
  display:flex; align-items:center; gap:0.55em;
}
.logo svg{ flex:none; }
.logo-mark{
  flex:none; width:26px; height:26px; border-radius:50%;
  object-fit:cover; object-position:38% 66%; transform:none;
  box-shadow:0 0 0 1.5px var(--amber);
}


.nav-links{
  display:flex; align-items:center; gap:1.5rem;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none;
  font-size:0.92rem;
  color:var(--ink-soft);
  padding:0.3em 0;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--amber);
}
.nav-cta{
  background:var(--ink);
  color:var(--paper) !important;
  padding:0.6em 1.2em;
  border-radius:2px;
  font-size:0.92rem !important;
  border-bottom:none !important;
}
.nav-cta:hover{ background:var(--steel); }

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line); border-radius:2px;
  padding:0.5em 0.7em; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  display:block; width:18px; height:2px; background:var(--ink);
  position:relative; transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before, .nav-toggle span::after{ content:""; position:absolute; left:0; }
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }

@media (max-width:1100px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:0.5rem var(--gutter) 1.3rem;
    gap:1rem;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-cta{ margin-top:0.4rem; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.5em;
  padding:0.75em 1.5em;
  font-size:0.95rem;
  text-decoration:none;
  border-radius:2px;
  border:1px solid var(--ink);
  cursor:pointer;
  font-family:var(--sans);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--steel); border-color:var(--steel); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ border-color:var(--steel); color:var(--steel); }

/* ---------- Hero ---------- */
.hero{
  padding:5.5rem 0 4.5rem;
  border-bottom:1px solid var(--line);
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:3rem;
  align-items:center;
}
.hero-copy p.lede{
  font-size:1.1rem;
  color:var(--ink-soft);
  max-width:46ch;
}
.hero-actions{ display:flex; gap:1rem; margin-top:1.8rem; flex-wrap:wrap; }
.hero-stats{
  display:flex; gap:2.2rem; margin-top:2.8rem;
  border-top:1px solid var(--line); padding-top:1.6rem;
}
.hero-stats div strong{
  display:block; font-family:var(--serif); font-size:1.6rem; color:var(--ink);
}
.hero-stats div span{ font-size:0.85rem; color:var(--ink-soft); }

.hero-diagram{ width:100%; height:auto; }

/* Phones and tablets: the square logo (index.html swaps it in below 1200px) as a
   banner across the top, cropped to the horse and company name. */
.hero-art{
  display:block; height:min(42vw, 320px); overflow:hidden;
  background:#0f1720; border-bottom:1px solid var(--amber);
}
.hero-art picture{ display:contents; }
.hero-art img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center 62%; }
/* Laptops and desktops: a full-height strip on the left edge that stays fixed while the page scrolls. */
@media (min-width:1200px){
  .hero-art{
    display:block;
    position:fixed; z-index:60; left:0; top:0; bottom:0;
    width:140px; height:auto;
    overflow:hidden;
    border-bottom:0;
    border-right:1px solid var(--amber);
    box-shadow:6px 0 24px -18px rgba(16,24,38,0.5);
  }
  .hero-art img{ object-position:center; }
  /* On laptop-width screens the side margins are too narrow for the strip,
     so the page moves over to make room instead of being covered. */
  body:has(> .hero-art){ padding-left:140px; }
}
@media (min-width:1400px){
  .hero-art{ width:clamp(110px, calc((100vw - 1240px) / 2 + 6vw - 24px), 240px); }
  body:has(> .hero-art){ padding-left:0; }
}



.hero-diagram .shield-track{ opacity:0.35; }
.hero-diagram .shield-glow{
  stroke-dasharray:920;
  stroke-dashoffset:920;
  opacity:0;
}
.hero-diagram .draw{
  stroke-dasharray:200;
  stroke-dashoffset:200;
}
.hero-diagram .node{ opacity:0; }
.hero-diagram.play .shield-glow{
  animation:shield-sweep 6.8s ease-in-out forwards;
}
.hero-diagram.play .draw{
  animation:draw-line 0.48s ease-out forwards;
}
.hero-diagram.play .node{
  animation:node-in 0.42s ease-out forwards;
}
.hero-diagram.play .spoke:nth-child(1){ animation-delay:1.05s; }
.hero-diagram.play .spoke:nth-child(2){ animation-delay:1.22s; }
.hero-diagram.play .spoke:nth-child(3){ animation-delay:1.39s; }
.hero-diagram.play .spoke:nth-child(4){ animation-delay:1.56s; }
.hero-diagram.play .spoke:nth-child(5){ animation-delay:1.73s; }
.hero-diagram.play .spoke:nth-child(6){ animation-delay:1.90s; }
.hero-diagram.play .entity:nth-of-type(1){ animation-delay:0.72s; }
.hero-diagram.play .entity:nth-of-type(2){ animation-delay:0.90s; }
.hero-diagram.play .entity:nth-of-type(3){ animation-delay:1.08s; }
.hero-diagram.play .entity:nth-of-type(4){ animation-delay:1.26s; }
.hero-diagram.play .entity:nth-of-type(5){ animation-delay:1.44s; }
.hero-diagram.play .entity:nth-of-type(6){ animation-delay:1.62s; }
.hero-diagram.play .center-dot{
  opacity:1;
  animation:pulse-glow 2.2s ease-in-out 0.2s infinite;
}
@keyframes shield-sweep{
  0%{ stroke-dashoffset:920; opacity:0; }
  6%{ opacity:1; }
  47%{ stroke-dashoffset:0; opacity:1; }
  70%,100%{ stroke-dashoffset:0; opacity:0.9; }
}
@keyframes draw-line{ to{ stroke-dashoffset:0; } }
@keyframes node-in{ to{ opacity:1; } }
@keyframes pulse-glow{ 0%,100%{ opacity:1; } 50%{ opacity:0.62; } }

/* ---------- Section shell ---------- */
.section{ padding:4.5rem 0; border-bottom:1px solid var(--line); }
.section:last-of-type{ border-bottom:none; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; margin-bottom:2.6rem; flex-wrap:wrap;
}
.section-dark{ background:var(--ink); color:var(--paper); }
.section-dark h2, .section-dark h3{ color:var(--paper); }
.section-dark p{ color:#B9C2C9; }
.section-dark .eyebrow{ color:#8FB0BE; }

/* ---------- Service rows (flat, not cards) ---------- */
.service-row{
  display:grid;
  grid-template-columns:2.2rem 1fr 1.4fr;
  gap:2rem;
  padding:2rem 0;
  border-top:1px solid var(--line);
  align-items:start;
}
.service-list .service-row:last-child{ border-bottom:1px solid var(--line); }
.service-index{
  font-family:var(--serif); color:var(--steel-dim); font-size:1.05rem; padding-top:0.15em;
}
.service-row h3{ margin-bottom:0.5em; }
.service-row .tag{
  display:inline-block;
  font-size:0.78rem;
  color:var(--amber);
  border:1px solid var(--amber);
  padding:0.15em 0.6em;
  border-radius:2px;
  margin-bottom:0.7em;
}
.service-row.pending{ opacity:0.72; }
.service-row.pending .tag{ color:var(--ink-soft); border-color:var(--line); }

/* ---------- Value grid ---------- */
.value-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.value-grid > div{
  padding:2rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
@media (max-width:820px){
  .value-grid{ grid-template-columns:1fr; }
}

/* ---------- Process (true sequence -> numbers OK) ---------- */
.process{ counter-reset:step; }
.process-step{
  display:grid; grid-template-columns:3.5rem 1fr; gap:1.5rem;
  padding:1.6rem 0; border-top:1px solid var(--line);
}
.process-step:last-child{ border-bottom:1px solid var(--line); }
.process-step .num{
  font-family:var(--serif); font-size:1.4rem; color:var(--amber);
}

/* ---------- Team / about ---------- */
.person-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem;
}
.person-card{ border-top:1px solid var(--line); padding-top:1.2rem; }
.person-card .avatar{
  width:100%; aspect-ratio:4/3; background:var(--paper-dim);
  border:1px solid var(--line); margin-bottom:1rem;
  display:flex; align-items:center; justify-content:center;
  color:var(--line-dark); font-family:var(--serif); font-size:1.8rem;
}
@media (max-width:820px){ .person-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .person-grid{ grid-template-columns:1fr; } }

/* ---------- Contact ---------- */
.contact-grid{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:3.5rem;
}
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.field{ margin-bottom:1.3rem; }
.field label{
  display:block; font-size:0.85rem; color:var(--ink-soft); margin-bottom:0.4em;
}
.field input, .field textarea, .field select{
  width:100%;
  font-family:var(--sans);
  font-size:1rem;
  padding:0.75em 0.9em;
  border:1px solid var(--line);
  background:#fff;
  border-radius:2px;
  color:var(--ink);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--steel);
}
.form-note{ font-size:0.82rem; color:var(--ink-soft); margin-top:0.6rem; }
.form-status{ font-size:0.9rem; margin-top:1rem; min-height:1.2em; }
.form-status.ok{ color:#2E6B45; }
.form-status.err{ color:#B23A32; }

/* honeypot field — visually hidden, still in tab order removed */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

.info-list{ list-style:none; margin:0; padding:0; }
.info-list li{
  padding:1rem 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1rem;
}
.info-list li:last-child{ border-bottom:1px solid var(--line); }
.info-list span:first-child{ color:var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink); color:#B9C2C9;
  padding:3rem 0 2rem;
}
.footer-grid{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem;
  border-bottom:1px solid var(--line-dark);
  padding-bottom:2rem; margin-bottom:1.4rem;
}
.footer-grid a{ text-decoration:none; color:#B9C2C9; }
.footer-grid a:hover{ color:#fff; }
.footer-cols{ display:flex; gap:3.5rem; flex-wrap:wrap; }
.footer-cols h4{ color:#fff; font-size:0.85rem; margin:0 0 0.8em; font-family:var(--sans); font-weight:600; }
.footer-cols ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.55em; font-size:0.9rem; }
.footer-bottom{ font-size:0.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem; }

/* ---------- Page hero (sub-pages) ---------- */
.page-hero{ padding:4rem 0 3rem; border-bottom:1px solid var(--line); }
.page-hero p{ font-size:1.05rem; max-width:56ch; }
.about-hero{ padding:5.5rem 0; background:var(--paper-dim); }
.about-hero .wrap{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,0.95fr); gap:5rem; align-items:center; }
.about-hero-copy h1{ max-width:10ch; margin-bottom:0.65em; }
.about-hero-copy .about-hero-lede{ color:var(--ink); font-family:var(--serif); font-size:1.45rem; line-height:1.3; max-width:30ch; }
.about-hero-copy p:last-child{ margin-bottom:0; }
.about-hero-map{ position:relative; aspect-ratio:600/440;background:var(--ink); overflow:hidden; border:1px solid var(--steel); }
.about-hero-map::before,.about-hero-map::after{ content:""; position:absolute; background:rgba(214,167,93,0.16); }
.about-hero-map::before{ width:1px; top:0; bottom:0; left:50%; }
.about-hero-map::after{ height:1px; left:0; right:0; top:50%; }
.about-hero-horse{ position:absolute; inset:0; width:100%; height:100%; }
.about-hero-horse .horse-glow{ fill:#D6A75D; opacity:0.35; }
.about-hero-horse .horse-facets polygon{ stroke:rgba(255,255,255,0.45); stroke-width:0.6; stroke-linejoin:round; }
.about-hero-horse .horse-edge use{ fill:none; stroke:#F6E6BF; stroke-width:1.2; stroke-linejoin:round; }
.about-hero-horse .horse-spark path{ fill:#fff; }
.about-hero-horse .horse-moon{ fill:#E9D9B4; opacity:0.85; }
.about-hero-horse .horse-hills{ fill:rgba(214,167,93,0.1); }
.about-hero-node{ position:absolute; z-index:1; display:flex; flex-direction:column; justify-content:center; width:74px; height:74px; border:1px solid var(--amber); border-radius:50%; background:var(--ink); color:#fff; text-align:center; font-family:var(--serif); font-size:1.3rem; }
.about-hero-node small{ display:block; color:#B9C2C9; font-family:var(--sans); font-size:0.58rem; line-height:1.1; }
.about-hero-node{ transform:translate(-50%,-50%); }
.node-one{ top:86.6%; left:30.8%; }.node-two{ top:57.7%; left:32.7%; }.node-three{ top:56.4%; left:51.9%; }.node-four{ top:36.7%; left:62.5%; }.node-five{ top:13%; left:75%; }
.section-head-note{ margin:0; color:var(--steel-dim); font-size:0.9rem; line-height:1.45; text-align:right; }

/* ---------- Careers ---------- */
.careers-hero h1{ max-width:14ch; }
.careers-hero .btn{ margin-top:0.7rem; }
.section-lede{ max-width:56ch; color:var(--ink-soft); }
.section-dark .section-lede{ color:#B9C2C9; }
.journey-list{ position:relative; border-top:1px solid var(--line); }
.journey-list::before{ content:""; position:absolute; top:0; bottom:0; left:1.35rem; width:1px; background:var(--line); }
.journey-step{ position:relative; display:grid; grid-template-columns:4rem minmax(0,1fr); gap:2rem; padding:2.7rem 0; border-bottom:1px solid var(--line); }
.journey-number{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:2.7rem; height:2.7rem; border:1px solid var(--amber); border-radius:50%; background:var(--paper); color:var(--amber); font-family:var(--sans); font-size:0.8rem; }
.journey-content{ max-width:72ch; }
.journey-content .eyebrow{ margin-bottom:0.35rem; }
.journey-content h3{ font-size:1.8rem; margin-bottom:0.7rem; }
.journey-step:nth-child(even) .journey-content{ padding-left:1.5rem; border-left:2px solid var(--paper-dim); }
.journey-content p:last-child{ margin-bottom:0; }
.about-statement h2{ max-width:20ch; }
.about-statement p{ color:#B9C2C9; max-width:65ch; }
.about-two-column{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:4rem; }
.about-two-column p:last-child{ margin-bottom:0; }
.journey-next{ display:grid; grid-template-columns:1fr 0.8fr; gap:3rem 5rem; align-items:start; }
.journey-next > div{ max-width:52ch; }
.journey-chain{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); counter-reset:item; }
.journey-chain li{ padding:0.8rem 0; border-bottom:1px solid var(--line); font-family:var(--serif); font-size:1.2rem; }
.journey-chain li::before{ content:counter(item, decimal-leading-zero); counter-increment:item; display:inline-block; width:2.5rem; color:var(--amber); font-family:var(--sans); font-size:0.8rem; }
.journey-signoff{ grid-column:1 / -1; padding-top:1.5rem; border-top:1px solid var(--line); font-family:var(--serif); font-size:1.25rem; color:var(--ink); }
.journey-signoff span{ color:var(--steel-dim); font-family:var(--sans); font-size:0.9rem; }
.career-values{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.career-values > div{ padding:1.7rem 1.5rem 0 0; border-right:1px solid var(--line); }
.career-values > div:not(:first-child){ padding-left:1.5rem; }
.career-values > div:last-child{ border-right:none; }
.career-values strong{ display:block; color:var(--ink); font-family:var(--serif); font-size:1.15rem; margin-bottom:0.5rem; }
.career-values p{ font-size:0.92rem; color:var(--steel-dim); }
.career-roles{ border-top:1px solid var(--line-dark); }
.career-role{ display:flex; justify-content:space-between; align-items:center; gap:2rem; padding:1.7rem 0; border-bottom:1px solid var(--line-dark); }
.career-role h3{ color:var(--paper); margin-bottom:0.35rem; }
.career-role p{ color:#B9C2C9; margin-bottom:0; }
.career-role .role-team{ color:#D6A75D; font-size:0.8rem; margin-bottom:0.35rem; }
.career-role .btn-ghost{ color:var(--paper); border-color:#8B98A3; white-space:nowrap; }
.career-role .btn-ghost:hover{ color:var(--ink); background:var(--paper); border-color:var(--paper); }
.careers-contact-inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.careers-contact h2{ margin-bottom:0; }
.footer-intro{ max-width:320px; }
.footer-intro p:last-child{ color:#8B98A3; font-size:0.9rem; }
.footer-logo{ color:#fff; margin-bottom:0.6em; }
.footer-offices{
  display:grid;
  grid-template-columns:repeat(2, minmax(190px, 1fr));
  gap:2.5rem;
  max-width:650px;
}
.footer-office h3{
  color:#fff;
  font-family:var(--sans);
  font-size:0.95rem;
  font-weight:600;
  margin:0 0 0.55rem;
}
.footer-office h3 span{ color:#B9C2C9; font-weight:400; }
.footer-office p{ margin:0 0 0.75rem; }
.footer-office .footer-motto{ color:#D6A75D; font-family:var(--serif); font-size:1.05rem; }
.footer-office address{ color:#B9C2C9; font-size:0.9rem; font-style:normal; line-height:1.65; }

@media (max-width:820px){
  .about-hero{ padding:4rem 0; }
  .about-hero .wrap{ grid-template-columns:1fr; gap:2.5rem; }
  .about-hero-map{ max-width:520px; }
  .section-head-note{ text-align:left; }
  .footer-offices{ grid-template-columns:1fr; gap:1.5rem; width:100%; }
  .journey-step{ grid-template-columns:2.5rem minmax(0,1fr); gap:1rem; }
  .about-two-column, .journey-next{ grid-template-columns:1fr; gap:2rem; }
  .journey-signoff{ grid-column:auto; }
  .career-values{ grid-template-columns:1fr 1fr; }
  .career-values > div, .career-values > div:not(:first-child){ padding:1.4rem 1rem 1.4rem 0; border-right:none; border-bottom:1px solid var(--line); }
  .career-values > div:nth-child(even){ padding-left:1rem; }
  .career-role{ align-items:flex-start; flex-direction:column; gap:1rem; }
  .careers-contact-inner{ align-items:flex-start; flex-direction:column; }
}
@media (max-width:560px){
  .career-values{ grid-template-columns:1fr; }
  .career-values > div:nth-child(even){ padding-left:0; }
}

@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-diagram{ max-width:420px; }
  .service-row{ grid-template-columns:2rem 1fr; }
  .service-row > div:last-child{ grid-column:2; }
}

/* =========================================================
   Testimonials
   ========================================================= */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.testimonial-card{
  padding:2.2rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.testimonial-card blockquote{
  margin:0 0 1.2rem;
  font-family:var(--serif);
  font-size:1.15rem;
  line-height:1.45;
  color:var(--ink);
}
.testimonial-card cite{
  font-style:normal;
  font-size:0.88rem;
  color:var(--ink-soft);
  display:block;
}
.testimonial-card cite strong{ color:var(--ink); display:block; margin-bottom:0.1em; }
@media (max-width:820px){ .testimonial-grid{ grid-template-columns:1fr; } }

/* =========================================================
   FAQ accordion
   ========================================================= */
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-question{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:none; border:none; text-align:left; cursor:pointer;
  padding:1.4rem 0;
  font-family:var(--serif); font-size:1.05rem; color:var(--ink);
}
.faq-question .icon{
  flex:none; width:20px; height:20px; position:relative;
}
.faq-question .icon::before, .faq-question .icon::after{
  content:""; position:absolute; background:var(--steel); border-radius:1px;
}
.faq-question .icon::before{ top:9px; left:2px; width:16px; height:2px; }
.faq-question .icon::after{ top:2px; left:9px; width:2px; height:16px; transition:transform .2s ease; }
.faq-item.open .faq-question .icon::after{ transform:rotate(90deg); }
.faq-answer{
  max-height:0; overflow:hidden;
  transition:max-height .25s ease;
}
.faq-answer p{ padding-bottom:1.4rem; margin:0; max-width:68ch; }
.faq-category{ margin:2.6rem 0 0.8rem; }
.faq-category:first-child{ margin-top:0; }
.help-search{ margin-bottom:2rem; padding:1.1rem 1.2rem; border:1px solid var(--line); background:var(--paper-dim); }
.help-search label{ display:block; font-size:0.82rem; font-weight:600; margin-bottom:0.4rem; }
.help-search input{ width:100%; padding:0.75em 0.8em; border:1px solid var(--line); background:#fff; font:inherit; }
.help-search .form-note{ min-height:1.1em; margin:0.5rem 0 0; }
.faq-item.search-hidden,.faq-category.search-hidden{ display:none; }

/* =========================================================
   Portal hub + landing pages
   ========================================================= */
.portal-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.portal-card{
  background:var(--paper);
  padding:2.4rem;
  display:flex; flex-direction:column;
}
.portal-card h3{ font-size:1.4rem; }
.portal-card p{ flex:1; }
.portal-card .btn{ align-self:flex-start; margin-top:1rem; }
@media (max-width:820px){ .portal-grid{ grid-template-columns:1fr; } }

.portal-login{
  max-width:420px;
  border:1px solid var(--line);
  padding:2.2rem;
  background:#fff;
}
.portal-login .field{ margin-bottom:1.1rem; }
.vendor-signin-top,.vendor-signup-top{ color:var(--steel); font-size:0.85rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.vendor-signin-top:hover{ color:var(--amber); }
.vendor-signup-top:hover{ color:var(--amber); }
.vendor-entry-actions{ display:flex; flex-wrap:wrap; gap:0.8rem; margin-top:1.3rem; }
.vendor-entry-actions .btn-secondary{ color:var(--ink); }
.account-view{ display:none; }
.account-view.active{ display:block; }
.account-back-link{ display:inline-block; color:var(--ink-soft); text-decoration:none; font-size:0.85rem; margin-bottom:1rem; }
.account-back-link:hover{ color:var(--ink); }
.vendor-public-grid{ display:block; max-width:760px; margin:0 auto 2.4rem; }
.vendor-welcome{ padding:1.2rem 0; }
.vendor-welcome h2{ font-family:var(--serif); font-size:1.8rem; line-height:1.2; color:var(--ink); margin:0.35rem 0 0.8rem; }
.vendor-welcome p{ max-width:52ch; }
.vendor-application-card{ border:1px solid var(--line); background:#fff; padding:1.5rem; margin-top:1.4rem; }
.vendor-application-card h2{ font-size:1.2rem; margin-bottom:1rem; color:var(--ink); }
.vendor-application-card textarea{ width:100%; min-height:110px; resize:vertical; font:inherit; padding:0.7em; border:1px solid var(--line); }
.vendor-signin-card{ max-width:760px; margin:0 auto; scroll-margin-top:100px; }
.vendor-signup-card{ max-width:760px; margin-top:2rem; padding:1.5rem; border:1px solid var(--line); background:var(--paper-dim); scroll-margin-top:100px; }
.vendor-signup-card h2{ color:var(--ink); font-family:var(--serif); font-size:1.45rem; margin:0.3rem 0 0.4rem; }
.vendor-signup-card > p{ font-size:0.88rem; margin-bottom:1rem; }
.vendor-signup-card .field-row, .vendor-entry-form .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .vendor-signup-card .field-row, .vendor-entry-form .field-row{ grid-template-columns:1fr; gap:0; } }
.portal-status{
  font-size:0.88rem;
  color:var(--steel-dim);
  background:var(--paper-dim);
  border:1px solid var(--line);
  padding:0.9rem 1rem;
  margin-bottom:1.6rem;
}

/* =========================================================
   Chatbot widget
   ========================================================= */
#chat-launcher{
  position:fixed; right:1.6rem; bottom:1.6rem; z-index:80;
  width:56px; height:56px; border-radius:50%;
  background:var(--ink); color:var(--paper);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(16,24,38,0.25);
  transition:background .15s ease;
}
#chat-launcher:hover{ background:var(--steel); }
#chat-launcher svg{ width:24px; height:24px; }

#chat-panel{
  position:fixed; right:1.6rem; bottom:5.6rem; z-index:80;
  width:min(340px, calc(100vw - 2.4rem));
  max-height:min(480px, calc(100vh - 8rem));
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 12px 32px rgba(16,24,38,0.18);
  display:none;
  flex-direction:column;
  overflow:hidden;
}
#chat-panel.open{ display:flex; }

.chat-head{
  background:var(--ink); color:var(--paper);
  padding:1rem 1.2rem;
  display:flex; justify-content:space-between; align-items:center;
}
.chat-head strong{ font-family:var(--serif); font-size:1.02rem; font-weight:600; }
.chat-head span{ display:block; font-size:0.76rem; color:#9FB2BD; margin-top:0.1em; }
.chat-close{
  background:none; border:none; color:var(--paper); cursor:pointer;
  font-size:1.2rem; line-height:1; padding:0.2em 0.4em;
}

.chat-body{
  flex:1; overflow-y:auto;
  padding:1rem 1.1rem;
  display:flex; flex-direction:column; gap:0.7rem;
  background:#fff;
}
.chat-msg{
  max-width:85%;
  padding:0.6em 0.85em;
  border-radius:3px;
  font-size:0.9rem;
  line-height:1.4;
}
.chat-msg.bot{
  align-self:flex-start;
  background:var(--paper-dim);
  color:var(--ink);
}
.chat-msg.user{
  align-self:flex-end;
  background:var(--steel);
  color:#fff;
}

.chat-form{
  display:flex; gap:0.5rem;
  padding:0.8rem;
  border-top:1px solid var(--line);
  background:var(--paper);
}
.chat-form input{
  flex:1;
  font-family:var(--sans);
  font-size:0.9rem;
  padding:0.6em 0.7em;
  border:1px solid var(--line);
  border-radius:2px;
}
.chat-form button{
  background:var(--ink); color:var(--paper);
  border:none; border-radius:2px;
  padding:0 1em;
  font-size:0.85rem;
  cursor:pointer;
}
.chat-form button:hover{ background:var(--steel); }

/* =========================================================
   Employee onboarding dashboard
   ========================================================= */

.progress-shell{
  display:flex; align-items:center; gap:1rem;
  margin-bottom:2.2rem;
}
.progress-track{
  flex:1; height:8px;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  background:var(--steel);
  width:0%;
  transition:width .3s ease;
}
.progress-label{
  font-size:0.85rem; color:var(--ink-soft);
  white-space:nowrap;
}

.tab-nav{
  display:flex; gap:0.4rem;
  border-bottom:1px solid var(--line);
  margin-bottom:2.2rem;
  flex-wrap:wrap;
}
.tab-btn{
  background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-size:0.92rem; color:var(--ink-soft);
  padding:0.8em 0.2em;
  margin-right:1.6rem;
  border-bottom:2px solid transparent;
}
.tab-btn:hover{ color:var(--ink); }
.tab-btn.active{ color:var(--ink); border-bottom-color:var(--amber); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.task-list{ list-style:none; margin:0; padding:0; }
.task-item{
  display:flex; align-items:flex-start; gap:0.9rem;
  padding:1.1rem 0;
  border-top:1px solid var(--line);
}
.task-list li:last-child{ border-bottom:1px solid var(--line); }
.task-item input[type="checkbox"]{
  margin-top:0.3em; width:17px; height:17px; accent-color:var(--steel);
  flex:none;
}
.task-item label{ font-weight:500; color:var(--ink); display:block; cursor:pointer; }
.task-item p{ margin:0.25em 0 0; font-size:0.88rem; }
.task-item.done label{ color:var(--ink-soft); text-decoration:line-through; text-decoration-color:var(--line-dark); }

.doc-row{
  display:grid;
  grid-template-columns:1.6fr 1fr auto;
  gap:1rem; align-items:center;
  padding:1.1rem 0;
  border-top:1px solid var(--line);
}
.doc-list .doc-row:last-child{ border-bottom:1px solid var(--line); }
.doc-row h3{ font-size:0.98rem; margin-bottom:0.2em; }
.doc-row p{ margin:0; font-size:0.82rem; }
.doc-file-label{
  display:inline-block;
  font-size:0.85rem;
  border:1px solid var(--ink);
  padding:0.5em 1em;
  cursor:pointer;
  border-radius:2px;
  white-space:nowrap;
}
.doc-file-label:hover{ background:var(--ink); color:var(--paper); }
.doc-row input[type="file"]{ display:none; }

button.doc-file-label:disabled{ opacity:0.55; cursor:default; }
button.doc-file-label:disabled:hover{ background:none; color:var(--ink); }

.status-badge{
  display:inline-block;
  font-size:0.76rem;
  padding:0.25em 0.7em;
  border-radius:2px;
  border:1px solid var(--line);
  color:var(--ink-soft);
  white-space:nowrap;
}
.status-badge.uploaded{ color:#2E6B45; border-color:#2E6B45; }
.status-badge.pending{ color:var(--amber); border-color:var(--amber); }

.compliance-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.6rem;
  margin-bottom:1.6rem;
}
@media (max-width:820px){
  .compliance-grid{ grid-template-columns:1fr; }
  .doc-row{ grid-template-columns:1fr; }
}

.save-status{
  font-size:0.88rem; margin-top:0.8rem; min-height:1.2em;
}
.save-status.ok{ color:#2E6B45; }

/* ---------- Vendor approval status stepper ---------- */
.status-track{ display:flex; align-items:flex-start; margin:2rem 0 1.6rem; }
.status-step{ flex:1; text-align:center; position:relative; }
.status-step:not(:last-child)::after{
  content:""; position:absolute; top:14px; left:50%; width:100%; height:2px;
  background:var(--line); z-index:0;
}
.status-step .dot{
  width:28px; height:28px; border-radius:50%; background:#fff;
  border:2px solid var(--line); margin:0 auto 0.6rem; position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:0.85rem; color:var(--ink-soft);
}
.status-step.current .dot{ border-color:var(--amber); color:var(--amber); }
.status-step.complete .dot{ border-color:var(--steel); background:var(--steel); color:#fff; }
.status-step .label{ font-size:0.82rem; color:var(--ink-soft); }
.status-step.current .label{ color:var(--ink); font-weight:600; }
/* =========================================================
   Vendor portal app shell (top bar + dropdown nav)
   ========================================================= */
.portal-topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--ink); color:var(--paper);
  padding:0.9rem 1.4rem;
  margin-bottom:1.6rem;
  flex-wrap:wrap; gap:1rem;
}
.topbar-left{ display:flex; align-items:center; gap:0.8rem; }
.topbar-home{
  background:none; border:1px solid #3A4658; color:var(--paper);
  border-radius:2px; padding:0.5em 0.9em; font-size:0.88rem; cursor:pointer;
  font-family:var(--sans);
}
.topbar-home:hover, .topbar-home.active{ background:var(--steel); border-color:var(--steel); }

.topbar-dropdown{ position:relative; }
.dropdown-toggle{
  background:none; border:1px solid #3A4658; color:var(--paper);
  border-radius:2px; padding:0.5em 0.9em; font-size:0.88rem; cursor:pointer;
  font-family:var(--sans); display:flex; align-items:center; gap:0.4em;
}
.dropdown-toggle:hover{ border-color:var(--amber); }
.dropdown-menu{
  display:none;
  position:absolute; top:calc(100% + 6px); left:0;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line);
  min-width:230px;
  box-shadow:0 10px 28px rgba(16,24,38,0.22);
  z-index:60;
  flex-direction:column;
}
.dropdown-menu.open{ display:flex; }
.dropdown-menu button{
  background:none; border:none; text-align:left; cursor:pointer;
  font-family:var(--sans); font-size:0.9rem; color:var(--ink);
  padding:0.75em 1rem;
  border-bottom:1px solid var(--line);
}
.dropdown-menu button:last-child{ border-bottom:none; }
.dropdown-menu button:hover, .dropdown-menu button.active{ background:var(--paper-dim); color:var(--steel); }

.topbar-title{
  font-family:var(--serif); font-size:1.05rem; font-weight:600;
  color:var(--paper);
}

.topbar-signout{
  background:none; border:1px solid #3A4658; color:var(--paper);
  border-radius:2px; padding:0.5em 1em; font-size:0.85rem; cursor:pointer;
  font-family:var(--sans);
}
.topbar-signout:hover{ background:#B23A32; border-color:#B23A32; }

/* Home overview cards */
.overview-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-bottom:2rem;
}
.overview-card{ background:var(--paper); padding:1.4rem; }
.overview-card .k{ font-size:0.8rem; color:var(--ink-soft); margin-bottom:0.4em; }
.overview-card .v{ font-family:var(--serif); font-size:1.5rem; color:var(--ink); }
@media (max-width:900px){ .overview-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .overview-grid{ grid-template-columns:1fr; } }

/* Read-only vs editable profile fields */
.field.readonly input{ background:var(--paper-dim); color:var(--ink-soft); }
.field .field-note{ font-size:0.78rem; color:var(--ink-soft); margin-top:0.3em; }
.profile-admin-note{
  font-size:0.85rem; color:var(--steel-dim);
  background:var(--paper-dim); border:1px solid var(--line);
  padding:0.9rem 1rem; margin:1.4rem 0 0;
}

/* Financial transactions table */
.finance-table{ width:100%; border-collapse:collapse; margin-bottom:1rem; }
.finance-table th, .finance-table td{
  text-align:left; padding:0.8em 0.9em; border-bottom:1px solid var(--line);
  font-size:0.9rem;
}
.finance-table th{ color:var(--ink-soft); font-weight:500; border-bottom:2px solid var(--line); }
.finance-table td.amount{ font-family:var(--serif); }
.finance-status{ font-size:0.78rem; padding:0.2em 0.6em; border-radius:2px; border:1px solid var(--line); }
.finance-status.paid{ color:#2E6B45; border-color:#2E6B45; }
.finance-status.pending{ color:var(--amber); border-color:var(--amber); }

/* Contact directory */
.contact-directory{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.contact-card{ background:var(--paper); padding:1.4rem; }
.contact-card h3{ font-size:0.98rem; margin-bottom:0.6em; }
.contact-card dl{ margin:0; }
.contact-card dt{ font-size:0.78rem; color:var(--ink-soft); margin-top:0.6em; }
.contact-card dt:first-child{ margin-top:0; }
.contact-card dd{ margin:0.1em 0 0; font-size:0.92rem; }
@media (max-width:820px){ .contact-directory{ grid-template-columns:1fr; } }

/* =========================================================
   Vendor portal — sidebar app shell (Supplier Portal style)
   ========================================================= */
.portal-topbar2{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.4rem;
  border:1px solid var(--line); border-bottom:none;
  background:#fff;
}
.portal-topbar2 .title{ font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--ink); }
.portal-topbar2 .greet{ display:flex; align-items:center; gap:1rem; font-size:0.9rem; color:var(--ink-soft); }
.portal-topbar2 .signout-link{
  background:none; border:1px solid var(--line); border-radius:2px;
  padding:0.4em 0.9em; font-size:0.82rem; cursor:pointer; color:var(--ink);
  font-family:var(--sans);
}
.portal-topbar2 .signout-link:hover{ background:var(--ink); color:#fff; }

.portal-shell{ display:flex; border:1px solid var(--line); align-items:stretch; }
.portal-sidebar{
  width:230px; flex:none;
  background:var(--paper-dim);
  border-right:1px solid var(--line);
  padding:1.4rem 0;
}
.sidebar-group{ margin-bottom:1.5rem; }
.sidebar-group-label{
  display:flex; align-items:center; gap:0.5em;
  font-family:var(--sans); font-weight:600; font-size:0.85rem;
  color:var(--ink); padding:0 1.2rem; margin-bottom:0.4rem;
}
.sidebar-links{ list-style:none; margin:0; padding:0; }
.sidebar-links button{
  display:block; width:100%; text-align:left;
  background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-size:0.88rem; color:var(--ink-soft);
  padding:0.5em 1.2rem 0.5em 2rem;
  border-left:3px solid transparent;
}
.sidebar-links button:hover{ color:var(--ink); background:var(--paper); }
.sidebar-links button.active{
  color:var(--steel); background:var(--paper);
  border-left-color:var(--amber); font-weight:600;
}
.portal-main{ flex:1; padding:1.8rem 2rem; min-width:0; }

.employee-home-grid{ display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:1.8rem; align-items:start; }
.uscis-news{ border:1px solid var(--line); background:#fff; padding:1.2rem; }
.news-heading{ display:flex; align-items:flex-start; justify-content:space-between; gap:0.8rem; }
.news-heading .eyebrow{ margin:0 0 0.25rem; }
.news-heading h2{ font-size:1.2rem; margin:0; }
.news-live{ display:inline-block; color:#2E6B45; border:1px solid #2E6B45; border-radius:2px; padding:0.2em 0.55em; font-size:0.72rem; white-space:nowrap; }
.news-room-tab{ display:flex !important; align-items:center; justify-content:space-between; gap:0.6rem; }
.news-count{ min-width:1.35em; padding:0.1em 0.35em; border-radius:10px; background:var(--amber); color:#fff; font-size:0.7rem; line-height:1.2; text-align:center; }
.news-intro{ font-size:0.82rem; color:var(--ink-soft); margin:0.8rem 0; }
.news-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0.8rem 0; }
.news-toolbar .news-intro{ margin:0; }
.news-refresh{ flex:none; padding:0.45em 0.8em; font-size:0.8rem; }
.news-notification{ color:var(--steel); font-size:0.82rem; background:var(--paper-dim); border:1px solid var(--line); padding:0.7rem 0.9rem; }
.news-filters{ display:grid; grid-template-columns:minmax(180px,2fr) repeat(3,minmax(120px,1fr)); gap:0.8rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.news-filters .field{ margin:0; }
.news-filters label{ font-size:0.75rem; }
.news-filters input,.news-filters select{ width:100%; padding:0.55em 0.65em; border:1px solid var(--line); background:#fff; font:inherit; font-size:0.85rem; }
.news-reset{ align-self:end; padding:0.55em 0.8em; font-size:0.8rem; }
.news-list{ border-top:1px solid var(--line); }
.news-item{ padding:0.8rem 0; border-bottom:1px solid var(--line); }
.news-item p{ margin:0; color:var(--ink); font-size:0.92rem; line-height:1.4; }
.news-item.new{ border-left:3px solid var(--amber); padding-left:0.8rem; }
.news-date{ display:block; color:var(--ink-soft); font-size:0.72rem; margin-bottom:0.25rem; }
.timesheet-deadline{ background:var(--paper-dim); border-left:3px solid var(--amber); padding:0.8rem 1rem; max-width:70ch; }
.timesheet-section-title{ font-size:1rem; margin:2rem 0 0.7rem; }
.timesheet-form{ max-width:760px; }
.timesheet-form input:disabled{ background:var(--paper-dim); color:var(--ink-soft); }
.timesheet-status{ font-size:0.78rem; padding:0.2em 0.6em; border:1px solid var(--line); color:var(--ink-soft); white-space:nowrap; }
.timesheet-status.locked{ color:#8A3E35; border-color:#8A3E35; }
.timesheet-status.open{ color:#2E6B45; border-color:#2E6B45; }
.hr-override{ margin-top:2rem; padding:1rem; border:1px solid var(--line); background:var(--paper-dim); max-width:760px; }
.hr-override p{ margin:0.35rem 0 0.8rem; font-size:0.85rem; color:var(--ink-soft); }
.btn-secondary{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn-secondary:hover{ background:var(--ink); color:#fff; }

@media (max-width:900px){ .employee-home-grid{ grid-template-columns:1fr; } }
@media (max-width:820px){ .news-filters{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .news-toolbar{ align-items:flex-start; flex-direction:column; } .news-filters{ grid-template-columns:1fr; } }

@media (max-width:820px){
  .portal-shell{ flex-direction:column; }
  .portal-sidebar{ width:100%; border-right:none; border-bottom:1px solid var(--line); }
}

/* Onboarding requirements table (matches the reference layout) */
.requirements-header{ display:flex; align-items:center; gap:0.6rem; margin-bottom:0.7rem; }
.requirements-header .back{ text-decoration:none; color:var(--ink-soft); font-size:1.2rem; line-height:1; }
.requirements-header h2{ font-size:1.2rem; margin:0; }
.requirements-meta{
  display:flex; gap:2rem; flex-wrap:wrap;
  font-size:0.88rem; color:var(--ink-soft);
  margin-bottom:1.4rem; padding-bottom:1rem; border-bottom:1px solid var(--line);
}
.requirements-table{ width:100%; border-collapse:collapse; }
.requirements-table th, .requirements-table td{
  text-align:left; padding:0.9em 1em; border-bottom:1px solid var(--line); font-size:0.9rem;
}
.requirements-table th{ color:var(--ink-soft); font-weight:500; border-bottom:2px solid var(--line); }
.req-status{ font-size:0.85rem; }
.req-status.verified{ color:#2E6B45; }
.req-status.pending{ color:var(--amber); }
.req-upload-label{
  font-size:0.8rem; border:1px solid var(--ink); border-radius:2px;
  padding:0.35em 0.8em; cursor:pointer; white-space:nowrap;
}
.req-upload-label:hover{ background:var(--ink); color:#fff; }
.req-upload-label input[type="file"]{ display:none; }
.req-doc-count{ font-size:0.85rem; color:var(--ink-soft); margin-top:1rem; }

.simple-table{ width:100%; border-collapse:collapse; }
.simple-table th, .simple-table td{
  text-align:left; padding:0.85em 1em; border-bottom:1px solid var(--line); font-size:0.9rem;
}
.simple-table th{ color:var(--ink-soft); font-weight:500; border-bottom:2px solid var(--line); }

/* =========================================================
   Portal UI v2 — shared building blocks
   (no inline styles anywhere: the pages ship a strict CSP)
   ========================================================= */
:root{
  --ok:#2E6B45; --ok-bg:#E7F1EA;
  --bad:#B23A32; --bad-bg:#F8E9E7;
  --warn:#8A6420; --warn-bg:#F6EEDC;
  --info:#2E5266; --info-bg:#E6EEF2;
  --radius:4px;
}
[hidden]{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.eyebrow a{ color:inherit; }
.footer-tag{ color:#8B98A3; font-size:0.9rem; }
.footer-intro{ max-width:320px; }
.footer-logo{ color:#fff; margin-bottom:0.6em; }

/* Buttons */
.btn:disabled{ opacity:0.5; cursor:not-allowed; }
.btn-sm{ padding:0.45em 0.95em; font-size:0.84rem; }
.btn-block{ width:100%; justify-content:center; }
.btn-secondary{ background:#fff; }
.btn-danger{ background:var(--bad); border-color:var(--bad); color:#fff; }
.btn-danger:hover{ background:#8F2D26; border-color:#8F2D26; }
.link-btn{ background:none; border:none; color:var(--steel); cursor:pointer; font:inherit; font-size:0.82rem; text-decoration:underline; padding:0; }
.icon-btn{ background:none; border:1px solid var(--line); border-radius:var(--radius); width:30px; height:30px; font-size:1.2rem; line-height:1; cursor:pointer; color:var(--ink-soft); }
.icon-btn:hover{ color:var(--bad); border-color:var(--bad); }
.btn:focus-visible, .icon-btn:focus-visible, .link-btn:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

/* Forms */
.card-title{ font-size:1.2rem; margin-bottom:1rem; }
.field-error{ color:var(--bad); font-size:0.82rem; margin:0.35rem 0 0; }
.field-error:empty{ display:none; }
.field .req{ color:var(--bad); }
.field input:disabled, .field select:disabled{ background:var(--paper-dim); color:var(--ink-soft); cursor:not-allowed; }
.field input[readonly]{ background:var(--paper-dim); color:var(--ink-soft); }
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.6rem; max-width:760px; }
.form-grid .form-actions{ grid-column:1 / -1; }
.form-actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:0.6rem; }
.lede-small{ max-width:68ch; color:var(--ink-soft); }
.panel-head{ margin-bottom:1.4rem; }
.panel-head h2{ font-size:1.5rem; margin-bottom:0.35rem; }
.panel-head p{ margin:0; }
code{ font-size:0.88em; background:var(--paper-dim); padding:0.1em 0.35em; border-radius:2px; }

/* Sign-in */
.portal-section .wrap{ max-width:1240px; }
.login-layout{ display:grid; grid-template-columns:minmax(300px,420px) minmax(0,1fr); gap:2.4rem; align-items:start; }
.login-layout .portal-login{ max-width:none; }
.help-box{ border:1px solid var(--line); background:var(--info-bg); padding:1.8rem; }
.help-box p{ max-width:60ch; }
@media (max-width:860px){ .login-layout{ grid-template-columns:1fr; } }

/* App shell */
.app-topbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:0.85rem 1.2rem; background:var(--ink); color:var(--paper); border:1px solid var(--ink); }
.app-title{ font-family:var(--serif); font-size:1.1rem; font-weight:600; }
.app-title span{ font-family:var(--sans); font-size:0.78rem; font-weight:400; color:#9FB2BD; margin-left:0.6rem; }
.app-user{ display:flex; align-items:center; gap:1rem; }
.app-user .who{ display:flex; flex-direction:column; text-align:right; line-height:1.2; }
.app-user .who strong{ font-size:0.9rem; font-weight:600; }
.app-user .who span{ font-size:0.74rem; color:#9FB2BD; }
.app-user .btn-secondary{ background:transparent; color:var(--paper); border-color:#3A4658; }
.app-user .btn-secondary:hover{ background:#B23A32; border-color:#B23A32; color:#fff; }
.portal-shell{ background:#fff; }
.portal-main{ padding:1.8rem clamp(1rem,2.4vw,2.2rem); }
.portal-sidebar{ width:220px; }
.sidebar-links button:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; }
@media (max-width:820px){
  .portal-sidebar{ display:flex; overflow-x:auto; padding:0; gap:0; }
  .sidebar-group{ display:flex; margin:0; flex:none; }
  .sidebar-group-label{ display:none; }
  .sidebar-links{ display:flex; }
  .sidebar-links li{ flex:none; }
  .sidebar-links button{ white-space:nowrap; padding:0.85em 1rem; border-left:none; border-bottom:3px solid transparent; }
  .sidebar-links button.active{ border-bottom-color:var(--amber); }
  .app-user .who{ display:none; }
}

/* Notification bell */
.bell{ position:relative; }
.bell-btn{ background:none; border:1px solid #3A4658; color:var(--paper); border-radius:var(--radius); width:38px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; }
.bell-btn:hover{ border-color:var(--amber); }
.bell-count{ position:absolute; top:-7px; right:-7px; background:var(--amber); color:#fff; font-size:0.66rem; min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.bell-menu{ display:none; position:absolute; right:0; top:calc(100% + 8px); width:min(360px,86vw); background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:0 12px 30px rgba(16,24,38,0.22); z-index:70; max-height:420px; overflow:auto; }
.bell.open .bell-menu{ display:block; }
.bell-head{ display:flex; justify-content:space-between; align-items:center; padding:0.7rem 0.9rem; border-bottom:1px solid var(--line); }
.bell-menu ul{ list-style:none; margin:0; padding:0; }
.bell-menu li{ padding:0.7rem 0.9rem; border-bottom:1px solid var(--line); font-size:0.85rem; line-height:1.4; }
.bell-menu li.unread{ background:var(--info-bg); }
.bell-menu time{ display:block; font-size:0.72rem; color:var(--ink-soft); margin-top:0.2rem; }
.bell-empty{ padding:1rem 0.9rem; margin:0; font-size:0.85rem; }

/* Sub-tabs */
.subtabs{ display:flex; gap:0.3rem; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:1.4rem; }
.subtab{ background:none; border:none; border-bottom:3px solid transparent; padding:0.7em 1em; font:inherit; font-size:0.92rem; color:var(--ink-soft); cursor:pointer; margin-bottom:-1px; }
.subtab:hover{ color:var(--ink); }
.subtab.active{ color:var(--ink); border-bottom-color:var(--amber); font-weight:600; }
.subtab:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; }
.count{ display:inline-block; min-width:1.5em; text-align:center; background:var(--amber); color:#fff; border-radius:10px; font-size:0.72rem; padding:0.05em 0.45em; margin-left:0.3em; }
.count.zero{ background:var(--paper-dim); color:var(--ink-soft); }

/* Badges / chips / notices */
.badge{ display:inline-block; font-size:0.76rem; font-weight:500; padding:0.22em 0.7em; border-radius:20px; border:1px solid var(--line); white-space:nowrap; background:#fff; color:var(--ink-soft); }
.badge.is-approved{ color:var(--ok); border-color:var(--ok); background:var(--ok-bg); }
.badge.is-rejected{ color:var(--bad); border-color:var(--bad); background:var(--bad-bg); }
.badge.is-pending{ color:var(--warn); border-color:#C9A25A; background:var(--warn-bg); }
.badge.is-draft{ color:var(--info); border-color:var(--steel-dim); background:var(--info-bg); }
.chips{ display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; }
.chip{ display:inline-block; font-size:0.76rem; padding:0.15em 0.6em; border:1px solid var(--line); border-radius:3px; background:var(--paper); color:var(--ink-soft); white-space:nowrap; }
.chip strong{ color:var(--ink); font-weight:600; }
.chip.warn{ color:var(--warn); border-color:#C9A25A; background:var(--warn-bg); }
.chip.ok{ color:var(--ok); border-color:var(--ok); background:var(--ok-bg); }
.chip.today{ color:#fff; background:var(--steel); border-color:var(--steel); }
.notice{ padding:0.75rem 1rem; border:1px solid var(--line); border-left-width:4px; margin:0 0 1rem; font-size:0.9rem; background:var(--paper); color:var(--ink); max-width:none; }
.notice.info{ border-color:var(--steel); background:var(--info-bg); }
.notice.warn{ border-color:var(--amber); background:var(--warn-bg); }
.notice.error{ border-color:var(--bad); background:var(--bad-bg); }
.notice.success{ border-color:var(--ok); background:var(--ok-bg); }
.notice.neutral{ border-color:var(--line); background:var(--paper); color:var(--ink-soft); }
.notice.compact{ padding:0.5rem 0.8rem; margin:0.5rem 0 0; font-size:0.84rem; }
.ts-muted{ color:var(--ink-soft); font-size:0.82rem; }
.ts-note{ margin-top:0.2rem; color:var(--ink-soft); font-style:italic; }
.ts-urgent{ color:var(--bad); font-weight:600; }
.subhead{ font-size:1rem; margin:1.6rem 0 0.7rem; }
.empty{ border:1px dashed var(--line); background:var(--paper); padding:2rem 1rem; text-align:center; }
.empty p{ margin:0.3rem auto 0; }
.more{ text-align:center; margin-top:1rem; }

/* Tables */
.table-scroll{ overflow-x:auto; border:1px solid var(--line); background:#fff; }
.data-table{ width:100%; border-collapse:collapse; font-size:0.9rem; }
.data-table th, .data-table td{ text-align:left; padding:0.7em 0.9em; border-bottom:1px solid var(--line); vertical-align:middle; }
.data-table thead th{ background:var(--paper-dim); color:var(--ink-soft); font-weight:600; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap; }
.data-table tbody tr:hover{ background:#FAFBFA; }
.data-table .num, .data-table th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.data-table td.ts-act{ text-align:right; white-space:nowrap; }
/* Several action buttons in one cell: keep the cell a normal table cell, wrap the buttons inside it */
.data-table td.row-actions{ text-align:right; }
.row-actions .btn-set{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:0.4rem; }
.data-table tfoot th{ background:var(--paper-dim); }
.ts-detail .ts-day-head th{ background:#F7F8F7; font-size:0.82rem; text-transform:none; letter-spacing:0; }
@media (max-width:700px){
  .data-table:not(.ts-detail) thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .data-table:not(.ts-detail) tr{ display:block; border-bottom:6px solid var(--paper-dim); padding:0.4rem 0; }
  .data-table:not(.ts-detail) td{ display:flex; justify-content:space-between; gap:1rem; border:none; padding:0.35em 0.9em; text-align:right; }
  .data-table:not(.ts-detail) td::before{ content:attr(data-label); color:var(--ink-soft); font-size:0.76rem; text-align:left; flex:none; }
  .data-table:not(.ts-detail) td:not([data-label])::before{ content:none; }
  .data-table:not(.ts-detail) td.ts-act{ justify-content:flex-end; }
  .data-table:not(.ts-detail) td.row-actions{ justify-content:flex-end; }
  .row-actions .btn-set{ justify-content:flex-end; }
}

/* Stats, filters, toggles */
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin:0 0 1.2rem; }
.stat{ background:#fff; padding:0.9rem 1.1rem; }
.stat span{ display:block; font-size:0.76rem; color:var(--ink-soft); }
.stat strong{ font-family:var(--serif); font-size:1.5rem; font-weight:600; }
.stat.attention strong{ color:var(--bad); }
.filters{ display:flex; flex-wrap:wrap; gap:0.8rem 1rem; align-items:flex-end; padding:1rem; background:var(--paper); border:1px solid var(--line); margin-bottom:1.1rem; }
.filters .field{ margin:0; flex:0 1 160px; min-width:130px; }
.filters .field.grow{ flex:1 1 200px; }
.filters label{ font-size:0.74rem; font-weight:600; color:var(--ink-soft); }
.filters input, .filters select{ padding:0.5em 0.6em; font-size:0.88rem; }
.filter-actions{ display:flex; gap:0.5rem; margin-left:auto; }
.view-toggle{ display:inline-flex; border:1px solid var(--ink); border-radius:var(--radius); overflow:hidden; margin-bottom:1rem; }
.view-toggle button{ background:#fff; border:none; padding:0.45em 1em; font:inherit; font-size:0.85rem; cursor:pointer; color:var(--ink); }
.view-toggle button.active{ background:var(--ink); color:#fff; }
.bulk-bar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:0.8rem; flex-wrap:wrap; }
.check{ display:inline-flex; align-items:center; gap:0.5rem; font-size:0.88rem; cursor:pointer; }
input[type="checkbox"], input[type="radio"]{ accent-color:var(--steel); }

/* Timesheet entry */
.ts-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.ts-nav{ display:flex; align-items:center; gap:0.2rem; padding:0.25rem; background:#fff; border:1px solid var(--line); border-radius:999px; box-shadow:0 1px 2px rgba(16,24,38,0.05); }
.ts-step{ width:34px; height:34px; border-radius:50%; border:none; background:transparent; font-size:1.3rem; line-height:1; cursor:pointer; color:var(--ink); }
.ts-step:hover:not(:disabled){ background:var(--paper-dim); }
.ts-step:disabled{ opacity:0.35; cursor:not-allowed; }
.ts-step:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; }
.ts-week{ display:flex; align-items:center; gap:0.7rem; flex-wrap:wrap; padding:0 0.7rem; font-family:var(--serif); font-size:1.12rem; }
.ts-jump{ display:flex; align-items:center; gap:0.5rem; }
.ts-jump input{ padding:0.42em 0.7em; border:1px solid var(--line); font:inherit; font-size:0.85rem; background:#fff; border-radius:6px; }

.ts-hero{ display:grid; grid-template-columns:minmax(220px,1.2fr) minmax(0,1.4fr); gap:1.2rem 2rem; padding:1.2rem 1.4rem; margin-bottom:1.1rem; border-radius:10px; color:var(--paper); background:linear-gradient(135deg,#101826 0%,#1E3647 100%); box-shadow:0 6px 18px rgba(16,24,38,0.16); }
.ts-total-label{ font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:#9FB2BD; }
.ts-total-line{ display:flex; align-items:baseline; gap:0.6rem; margin:0.15rem 0 0.7rem; }
.ts-total-line strong{ font-family:var(--serif); font-size:2.5rem; font-weight:600; line-height:1; color:#fff; }
.ts-target{ font-size:0.82rem; color:#9FB2BD; }
.ts-bar{ height:8px; background:rgba(255,255,255,0.14); border-radius:4px; overflow:hidden; }
.ts-bar-fill{ height:100%; width:0; background:linear-gradient(90deg,#D6A75D,#E9C47E); border-radius:4px; transition:width .25s ease; }
.ts-hero-facts{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-content:center; }
.ts-hero-facts span{ display:block; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:#9FB2BD; }
.ts-hero-facts strong{ display:block; color:#fff; font-weight:600; font-size:0.98rem; }
.ts-hero-facts em{ font-style:normal; font-size:0.82rem; color:#C9D3D9; }
.ts-hero-facts em.ts-urgent{ color:#FFB4AC; }
.ts-hero-chips{ grid-column:1 / -1; padding-top:0.9rem; border-top:1px solid rgba(255,255,255,0.14); }
.ts-hero .chip{ background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.18); color:#DCE4E8; }
.ts-hero .chip strong{ color:#fff; }
.ts-hero .ts-muted{ color:#9FB2BD; }

.ts-days{ display:flex; flex-direction:column; gap:0.7rem; }
.ts-day-group{ background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 1px 2px rgba(16,24,38,0.04); overflow:hidden; }
.ts-day-group.today{ border-color:var(--steel); box-shadow:0 0 0 3px rgba(46,82,102,0.12); }
.ts-day-group.weekend{ background:#FAFBFA; }
.ts-day-group.future{ opacity:0.55; background:var(--paper); box-shadow:none; }
.ts-day-head{ display:flex; align-items:center; gap:0.9rem; padding:0.7rem 1rem; }
.ts-day-group:not(.collapsed) .ts-day-head{ border-bottom:1px solid var(--line); background:linear-gradient(#FBFCFB,#F4F6F5); }
.ts-date{ width:44px; height:46px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:8px; background:var(--paper-dim); color:var(--ink); line-height:1.05; }
.ts-date .dow{ font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }
.ts-date .dom{ font-family:var(--serif); font-size:1.2rem; font-weight:600; }
.ts-day-group.today .ts-date{ background:var(--steel); color:#fff; }
.ts-day-group.today .ts-date .dow{ color:#CFE0E8; }
.ts-day-title{ display:flex; align-items:center; gap:0.55rem; flex-wrap:wrap; flex:1; min-width:0; }
.ts-day-title strong{ font-weight:600; }
.ts-day-total{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:600; padding:0.2em 0.75em; border-radius:999px; background:var(--info-bg); color:var(--info); font-size:0.88rem; }
.ts-day-total.empty{ background:transparent; color:var(--ink-soft); font-weight:400; }
.ts-add{ flex:none; background:transparent; border:1px dashed var(--steel-dim); color:var(--steel); border-radius:999px; padding:0.3em 0.95em; font:inherit; font-size:0.82rem; font-weight:500; cursor:pointer; }
.ts-add:hover{ background:var(--steel); border-style:solid; border-color:var(--steel); color:#fff; }
.ts-add:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

.ts-rows{ padding:0.5rem 1rem 0.8rem; }
.ts-row{ display:grid; grid-template-columns:minmax(230px,1.5fr) minmax(0,1.6fr) 88px minmax(0,1fr) 32px; gap:0.7rem; align-items:end; padding:0.55rem 0; }
.ts-row + .ts-row, .ts-error-row + .ts-row{ border-top:1px dashed var(--line); }
.ts-cell{ min-width:0; }
.ts-cap{ display:block; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 0.25rem 0.1rem; }
.ts-row select, .ts-row input{ width:100%; font:inherit; font-size:0.92rem; padding:0.55em 0.7em; border:1px solid transparent; background:var(--paper); border-radius:7px; color:var(--ink); transition:border-color .12s, background .12s, box-shadow .12s; }
.ts-row select:hover:not(:disabled), .ts-row input:hover:not(:disabled){ border-color:var(--line); background:#fff; }
.ts-row select:focus, .ts-row input:focus{ border-color:var(--steel); background:#fff; outline:none; box-shadow:0 0 0 3px rgba(46,82,102,0.18); }
.ts-row input.ts-hours{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.ts-row.invalid select, .ts-row.invalid input{ border-color:var(--bad); background:#FFF8F7; }
.ts-row select:disabled, .ts-row input:disabled{ background:transparent; color:var(--ink); cursor:default; opacity:1; -webkit-text-fill-color:var(--ink); appearance:none; }
.ts-row input:disabled::placeholder{ color:transparent; }
.ts-act{ display:flex; align-items:center; justify-content:center; height:38px; }
.ts-error-row{ margin:0.1rem 0 0.4rem; padding:0.4rem 0.7rem; border-radius:6px; background:var(--bad-bg); color:var(--bad); font-size:0.82rem; }

.ts-actions{ position:sticky; bottom:0; z-index:5; display:flex; gap:0.7rem; align-items:center; flex-wrap:wrap; margin-top:1.1rem; padding:0.8rem 1rem; background:rgba(255,255,255,0.96); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:10px; box-shadow:0 -6px 18px rgba(16,24,38,0.08); }
.ts-spacer{ flex:1; }
.ts-saved{ font-size:0.82rem; color:var(--ink-soft); }
.ts-actions .btn{ border-radius:7px; }
@media (max-width:900px){
  .ts-hero{ grid-template-columns:1fr; }
  .ts-row{ grid-template-columns:1fr 1fr 32px; }
  .ts-cell.c-project, .ts-cell.c-task, .ts-cell.c-comment{ grid-column:1 / -1; }
  .ts-cell.c-hours{ grid-column:1 / 3; }
  .ts-act{ grid-column:3; grid-row:3; }
}
@media (max-width:560px){
  .ts-actions{ position:static; }
  .ts-day-head{ flex-wrap:wrap; gap:0.6rem; padding:0.65rem 0.8rem; }
  .ts-day-total{ margin-left:0; }
  .ts-rows{ padding:0.4rem 0.8rem 0.7rem; }
  .ts-actions .btn{ flex:1 1 140px; justify-content:center; }
  .ts-total-line strong{ font-size:2.1rem; }
  .ts-hero-facts{ grid-template-columns:1fr; }
}

/* Row cards (documents, trainings) */
.card-list{ display:flex; flex-direction:column; gap:0.8rem; }
.row-card{ display:flex; justify-content:space-between; gap:1.4rem; padding:1.1rem 1.2rem; border:1px solid var(--line); background:#fff; align-items:flex-start; }
.row-card h3{ font-size:1.02rem; margin-bottom:0.25rem; }
.row-card p{ margin:0 0 0.5rem; font-size:0.88rem; }
.row-main{ min-width:0; flex:1; }
.row-side{ display:flex; flex-direction:column; align-items:flex-end; gap:0.6rem; flex:none; }
.btn-row{ display:flex; gap:0.5rem; }
.file-line{ font-size:0.82rem !important; color:var(--ink-soft); }
.file-name{ color:var(--ink); font-weight:500; word-break:break-all; }
.file-btn{ position:relative; cursor:pointer; }
.file-btn input[type="file"]{ position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; font-size:0; }
.file-btn:focus-within{ outline:2px solid var(--amber); outline-offset:2px; }
.progress-line{ display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; font-size:0.86rem; color:var(--ink-soft); }
.progress-line .progress-track{ flex:1; max-width:380px; }
@media (max-width:640px){ .row-card{ flex-direction:column; } .row-side{ align-items:flex-start; } }

/* Tasks */
.task-item{ align-items:center; }
.task-item > div{ flex:1; }
.task-item p{ max-width:70ch; }
.task-title{ font-weight:500; color:var(--ink); display:block; cursor:default; }
.task-item.done .task-title{ color:var(--ink-soft); text-decoration:line-through; text-decoration-color:var(--line-dark); }
.task-mark{ flex:none; width:19px; height:19px; border:1.5px solid var(--line-dark); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.7rem; color:#fff; }
.task-mark.on{ background:var(--ok); border-color:var(--ok); }

/* Profile / compliance */
.info-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem 1.6rem; margin:0 0 1.4rem; padding:1rem 1.2rem; background:var(--paper); border:1px solid var(--line); max-width:760px; }
.info-grid dt{ font-size:0.74rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; }
.info-grid dd{ margin:0.1rem 0 0; font-weight:500; }
.field .field-note{ font-size:0.76rem; color:var(--ink-soft); margin:0.3rem 0 0; }
.field.readonly label{ color:var(--ink-soft); }
.compliance-cards{ max-width:760px; }
.comp-card{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1rem 1.2rem; border:1px solid var(--line); background:#fff; margin-bottom:0.8rem; }
.comp-card .field{ margin:0; flex:1; max-width:320px; }
.comp-status{ padding-top:1.6rem; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } .comp-card{ flex-direction:column; } .comp-status{ padding-top:0; } }

/* Home dashboard */
.home-head h2{ font-size:1.7rem; margin-bottom:0.2rem; }
.home-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; margin:1.2rem 0; }
.home-cols{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:1rem; }
.panel-card{ border:1px solid var(--line); background:#fff; padding:1.2rem 1.3rem; }
.panel-card.accent{ border-color:var(--steel); background:var(--info-bg); }
.panel-card h3{ font-size:0.95rem; margin-bottom:0.6rem; font-family:var(--sans); color:var(--ink-soft); font-weight:600; }
.panel-card p{ margin:0 0 0.7rem; }
.big-number{ font-family:var(--serif); font-size:2.1rem; line-height:1.1; color:var(--ink); margin:0.2rem 0 0.6rem; }
.big-number.small{ font-size:1.5rem; }
.big-number small{ font-family:var(--sans); font-size:0.8rem; color:var(--ink-soft); margin-left:0.3rem; }
.panel-card .progress-track{ margin-bottom:0.6rem; }
.action-list, .note-list{ list-style:none; margin:0; padding:0; }
.action-list li{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0.7rem 0.8rem; margin-bottom:0.5rem; border-left:4px solid var(--steel); background:var(--info-bg); font-size:0.88rem; }
.action-list li.tone-warn{ border-color:var(--amber); background:var(--warn-bg); }
.action-list li.tone-error{ border-color:var(--bad); background:var(--bad-bg); }
.action-list .btn{ flex:none; }
.note-list li{ padding:0.6rem 0; border-bottom:1px solid var(--line); font-size:0.86rem; }
.note-list time{ display:block; font-size:0.72rem; color:var(--ink-soft); }
@media (max-width:900px){ .home-cols{ grid-template-columns:1fr; } .action-list li{ flex-direction:column; align-items:flex-start; } }

/* Course player */
.course-progress{ display:flex; align-items:center; gap:0.4rem; margin-bottom:1.2rem; }
.course-progress span{ flex:1; height:6px; background:var(--paper-dim); border-radius:3px; }
.course-progress span.done{ background:var(--steel); }
.course-progress span.current{ background:var(--amber); }
.course-progress em{ font-size:0.78rem; color:var(--ink-soft); font-style:normal; margin-left:0.6rem; white-space:nowrap; }
.course h3{ font-size:1.3rem; }
.course-text{ font-size:1.05rem; max-width:none; color:var(--ink); line-height:1.6; }
.quiz{ border:1px solid var(--line); padding:0.9rem 1.1rem; margin:0 0 1rem; }
.quiz legend{ padding:0 0.4rem; font-weight:600; font-size:0.92rem; }
.radio{ display:flex; gap:0.6rem; align-items:flex-start; padding:0.35rem 0; cursor:pointer; font-size:0.92rem; }

/* Modal + toast */
body.modal-open{ overflow:hidden; }
.modal-backdrop{ position:fixed; inset:0; background:rgba(16,24,38,0.55); z-index:200; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal{ background:#fff; width:min(520px,100%); max-height:calc(100vh - 2rem); display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(16,24,38,0.35); }
.modal.wide{ width:min(880px,100%); }
.modal-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.3rem; border-bottom:1px solid var(--line); }
.modal-head h2{ font-size:1.15rem; margin:0; }
.modal-x{ background:none; border:none; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--ink-soft); padding:0 0.3rem; }
.modal-body{ padding:1.2rem 1.3rem; overflow-y:auto; }
.modal-foot{ display:flex; justify-content:flex-end; gap:0.6rem; padding:0.9rem 1.3rem; border-top:1px solid var(--line); background:var(--paper); flex-wrap:wrap; }
.modal-text{ max-width:none; color:var(--ink); }
.timeline{ list-style:none; margin:0; padding:0 0 0 1rem; border-left:2px solid var(--line); }
.timeline li{ padding:0.35rem 0 0.7rem; font-size:0.86rem; position:relative; }
.timeline li::before{ content:""; position:absolute; left:-1.35rem; top:0.65rem; width:9px; height:9px; border-radius:50%; background:var(--steel); }
#toast-host{ position:fixed; left:50%; transform:translateX(-50%); bottom:1.4rem; z-index:300; display:flex; flex-direction:column; gap:0.5rem; align-items:center; width:min(520px,92vw); pointer-events:none; }
.toast{ background:var(--ink); color:#fff; padding:0.7rem 1.1rem; border-radius:var(--radius); font-size:0.9rem; box-shadow:0 8px 24px rgba(16,24,38,0.3); border-left:4px solid var(--steel-dim); transition:opacity .3s ease, transform .3s ease; pointer-events:auto; }
.toast.success{ border-left-color:#5DB37E; }
.toast.error{ border-left-color:#E5776F; background:#3B1411; }
.toast.leaving{ opacity:0; transform:translateY(6px); }

/* Vendor-only */
.vendor-landing{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2.4rem; align-items:start; }
.vendor-landing .vendor-public-grid{ max-width:none; margin:0; }
.vendor-landing .vendor-application-card{ margin-top:0; }
@media (max-width:860px){ .vendor-landing{ grid-template-columns:1fr; } }
.status-step.rejected .dot{ border-color:var(--bad); background:var(--bad); color:#fff; }
.report-bars{ display:flex; flex-direction:column; gap:0.6rem; max-width:560px; }
.report-bar{ display:grid; grid-template-columns:140px 1fr 50px; gap:0.8rem; align-items:center; font-size:0.88rem; }
.report-bar .track{ background:var(--paper-dim); height:14px; border-radius:2px; overflow:hidden; }
.report-bar .fill{ height:100%; background:var(--steel); }

html{ scroll-padding-top:96px; }

/* Replacements for former inline styles (blocked by the pages' CSP) */
.cta-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; }
h2.tight{ margin-bottom:0.3em; }
.form-note.spaced{ margin-top:1.5rem; }
.wrap.narrow{ max-width:76ch; }
.value-grid.on-dark, .value-grid.on-dark > div, .process-step.on-dark{ border-color:var(--line-dark); }
.process-step.on-dark.last{ border-bottom:1px solid var(--line-dark); }

/* Inline forms under vendor tables, busy state for uploads */
.inline-form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0.9rem 1.2rem; align-items:end; margin-top:1.6rem; padding-top:0.4rem; }
.inline-form .subhead, .inline-form .field-error, .inline-form .form-actions{ grid-column:1 / -1; margin:0; }
/* File picker: a styled button, the chosen file's name, and a cross to remove it */
.inline-form .file-field{ grid-column:1 / -1; margin-bottom:0; }
.inline-form .form-note{ grid-column:1 / -1; margin:0; }
/* A set of file pickers (e.g. a consultant's documents): two columns, one picker each */
.inline-form .docs-grid{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0.9rem 1.2rem; align-items:start; }
.inline-form .docs-grid .file-field{ grid-column:auto; margin:0; }
.file-pick{ display:flex; align-items:center; gap:0.7rem; padding:0.45em 0.6em; border:1px solid var(--line); background:#fff; border-radius:2px; min-width:0; }
.file-pick.invalid{ border-color:var(--bad); }
.file-pick:focus-within{ border-color:var(--steel); }
.file-pick .file-btn{ flex:none; margin:0; }
.field .file-btn input[type="file"]{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; opacity:0; cursor:pointer; font-size:0; }
.file-pick .file-chosen{ flex:1; min-width:0; font-size:0.9rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-pick .file-chosen.has-file{ color:var(--ink); font-weight:500; }
.file-pick .icon-btn{ flex:none; }
.file-hint{ display:block; margin-top:0.35rem; font-size:0.78rem; color:var(--ink-soft); }
.file-btn.is-busy{ opacity:0.6; pointer-events:none; }

/* Staggered draw-in delays for the hero diagram (no inline styles: the site CSP forbids them) */
.delay-072{ --delay:0.72s; }
.delay-090{ --delay:0.90s; }
.delay-105{ --delay:1.05s; }
.delay-108{ --delay:1.08s; }
.delay-122{ --delay:1.22s; }
.delay-126{ --delay:1.26s; }
.delay-139{ --delay:1.39s; }
.delay-144{ --delay:1.44s; }
.delay-156{ --delay:1.56s; }
.delay-162{ --delay:1.62s; }
.delay-173{ --delay:1.73s; }
.delay-190{ --delay:1.90s; }

/* Keep the footer compact */
.site-footer{ padding:2rem 0 1.3rem; }
.footer-grid{ gap:1.4rem 2.5rem; padding-bottom:1.3rem; margin-bottom:1rem; }
.footer-cols{ gap:2.5rem; }

/* Requests to HR: a short conversation with files either way */
.req-toolbar{ margin-bottom:1rem; }
.req-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin:0.8rem 0 1rem; }
.req-head h3{ margin:0 0 0.25rem; font-size:1.25rem; }
.req-head p{ margin:0; }
.req-thread{ display:flex; flex-direction:column; gap:0.8rem; max-width:760px; margin-bottom:1.4rem; }
.req-msg{ border:1px solid var(--line); background:#fff; padding:0.8rem 1rem; border-radius:3px; }
.req-msg.by-staff{ background:var(--info-bg); border-color:var(--steel-dim); }
.req-msg header{ display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; font-size:0.88rem; margin-bottom:0.35rem; }
.req-msg p{ margin:0; overflow-wrap:anywhere; }
.req-files{ list-style:none; margin:0.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:0.25rem; }
.req-reply{ max-width:760px; border-top:1px solid var(--line); padding-top:1rem; }
.req-reply .btn-set{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.form-grid .full{ grid-column:1 / -1; }
@media (max-width:640px){ .req-head{ flex-direction:column; } }