/* CallGenix — Navy Command Theme */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'DM Sans', sans-serif;
  background: #f4f7fb;
  color: #1e2a4a;
  line-height: 1.6;
  font-size: 15px;
}

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
  background: #1c3461;
  border-bottom: 2px solid #e8a020;
  padding: 0 24px;
  height: 58px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.site-logo {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: contain;
}

.site-title {
  font-family: 'Monda', monospace;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.header-username {
  font-size: 13px;
  color: rgba(255,255,255,0.90);
}

.header-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 0.5px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: #ffffff;
  flex-shrink: 0;
}

/* ── Layout ──────────────────────────────────────────────────── */
.wrapper {
  display: flex;
  min-height: calc(100vh - 60px);
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: 270px;
  background: #1c3461;
  border-right: none;
  padding: 4px 0 16px;
  flex-shrink: 0;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.menu { list-style: none; }

.menu-section {
  font-size: 11px;
  font-weight: 500;
  color: #e8a020;
  padding: 0 16px;
  margin: 14px 0 4px;
  letter-spacing: 0.07em;
}

.menu-item a {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 5px 12px;
  margin: 1px 8px;
  border-radius: 6px;
  color: rgba(255,255,255,0.90);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  border-left: 2px solid transparent;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-item a:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}

.menu-item.active a {
  background: #e8a020;
  color: #ffffff;
  border-left: 2px solid transparent;
  font-weight: 500;
}

.menu-item.active a:hover { background: #d49018; }

/* "Register" / "Sign in" sub-links under Talk to your Diagram (2026-07-23,
   replaces the old single "Live Demo" sub-link so a returning verified
   visitor isn't shown the full name+company capture form just to log back
   in — see the ?mode= query param handling in process-diagram-converter.html)
   — subdued but readable, not full-brightness like a normal item, not so
   faint it's missable. */
.menu-item-sub a {
  color: rgba(232,160,32,0.8);
  font-size: 12.5px;
  padding-left: 32px;
  gap: 14px;
}
.menu-item-sub a:hover {
  color: rgba(232,160,32,1);
  background: rgba(255,255,255,0.06);
}
.menu-item-sub a i { font-size: 13px; }

.menu-item a i {
  font-size: 16px;
  flex-shrink: 0;
}

/* ── Content wrap ────────────────────────────────────────────── */
.content-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.page-topbar {
  background: #ffffff;
  border-bottom: 0.5px solid #d8dde8;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 60px;
  z-index: 50;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #8090b8;
}

.breadcrumb i { font-size: 14px; }
.breadcrumb-sep { color: #c8d4e8; }
.breadcrumb-current { color: #1c3461; font-weight: 500; }

.topbar-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #e8a020;
  text-decoration: none;
  font-weight: 500;
}

.topbar-action:hover { text-decoration: underline; }

/* ── Content area ────────────────────────────────────────────── */
.content {
  padding: 24px 28px;
  background: #f4f7fb;
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: #ffffff;
  border: 0.5px solid #d8dde8;
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 16px;
}

.card:last-child { margin-bottom: 0; }

.card-title {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title i { font-size: 15px; }

/* ── Profile ─────────────────────────────────────────────────── */
.profile-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.profile-photo {
  width: 92px;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.profile-name {
  font-size: 18px;
  font-weight: 500;
  color: #1c3461;
  margin: 0 0 4px;
}

.profile-role {
  font-size: 13px;
  color: #8090b8;
  margin: 0 0 10px;
}

.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }

.tag {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(28,52,97,0.06);
  color: #1c3461;
  border: 0.5px solid rgba(28,52,97,0.2);
}

.profile-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #1c5ab4;
  text-decoration: none;
}

.profile-link:hover { text-decoration: underline; }

/* ── Divider ─────────────────────────────────────────────────── */
.divider { height: 0.5px; background: #e8edf5; margin: 16px 0; }

/* ── Stats grid ──────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.stat-box {
  background: #f4f7fb;
  border: 0.5px solid #d8dde8;
  border-radius: 8px;
  padding: 12px 14px;
}

.stat-label { font-size: 11px; color: #8090b8; margin: 0 0 4px; }
.stat-value { font-size: 13px; color: #1c3461; font-weight: 500; line-height: 1.4; margin: 0; }

/* ── Prose ───────────────────────────────────────────────────── */
.card p {
  font-size: 14px;
  color: #4a5a7a;
  line-height: 1.8;
  margin: 0 0 10px;
}

.card p:last-child { margin-bottom: 0; }
.card p strong { color: #1c3461; }
.card p a { color: #1c5ab4; }

/* ── Sub-heading inside card ─────────────────────────────────── */
.sub-heading {
  font-size: 14px;
  font-weight: 500;
  color: #1c3461;
  margin: 18px 0 8px;
  padding-left: 10px;
  border-left: 3px solid #e8a020;
  border-radius: 0;
}

/* ── Lists ───────────────────────────────────────────────────── */
.content-list {
  margin: 0 0 12px 18px;
  font-size: 14px;
  color: #4a5a7a;
  line-height: 1.8;
}

.content-list li { margin-bottom: 6px; }
.content-list li:last-child { margin-bottom: 0; }
.content-list li strong { color: #1c3461; }
.content-list ul { margin-top: 4px; margin-left: 16px; }

/* ── Images ──────────────────────────────────────────────────── */
.content-img {
  max-width: 85%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 0.5px solid #d8dde8;
  margin: 10px 0;
}

.content-img.full-width { width: 85%; }

.img-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 10px 0;
}

.img-row .content-img { flex: 1 1 180px; margin: 0; max-width: 100%; }

.img-caption {
  font-size: 12px;
  color: #8090b8;
  text-align: center;
  margin-top: -4px;
  margin-bottom: 8px;
}

/* ── Video ───────────────────────────────────────────────────── */
.video-wrap {
  margin: 10px 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  border: 0.5px solid #d8dde8;
}

.video-wrap video { width: 100%; display: block; max-height: 520px; }

/* ── Blockquote ──────────────────────────────────────────────── */
.highlight-block {
  background: #fef8ec;
  border-left: 3px solid #e8a020;
  border-radius: 0 6px 6px 0;
  padding: 12px 16px;
  margin: 12px 0;
  font-style: italic;
  font-size: 14px;
  color: #5a4820;
}

/* ── Cert row ────────────────────────────────────────────────── */
.cert-row { display: flex; gap: 12px; }

.cert-box {
  flex: 1;
  border-radius: 8px;
  background: #f4f7fb;
  border: 0.5px solid #d8dde8;
  overflow: hidden;
}

.cert-box img { width: 100%; height: auto; display: block; }

/* ── Feature blocks ──────────────────────────────────────────── */
.feature-block {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 0.5px solid #edf0f8;
}

.feature-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.feature-title {
  font-size: 14px;
  font-weight: 500;
  color: #1c3461;
  margin: 10px 0 5px;
}

.feature-block p {
  font-size: 14px;
  color: #4a5a7a;
  line-height: 1.75;
  margin: 0;
}

/* ── Next list ───────────────────────────────────────────────── */
.next-list { margin-left: 0; list-style: none; }
.next-list li { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 0.5px solid #edf0f8; }
.next-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.next-list li p { font-size: 14px; color: #4a5a7a; margin: 0; line-height: 1.7; }
.next-list li p strong { color: #1c3461; }

/* ── Global links ────────────────────────────────────────────── */
a { color: #1c5ab4; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #dce4f2; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #c8d4e8; }

/* ── Tablet (769px – 1024px) ────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
  .sidebar { width: 190px; }
  .menu-item a { font-size: 13px; padding: 5px 10px; }
}

/* ── Mobile (≤768px) ─────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Sidebar: 130px with visible text labels ── */
  .sidebar {
    width: 130px;
    min-width: 130px;
    flex-shrink: 0;
    position: relative;
    height: auto;
    padding: 8px 0;
    
  }

  .menu-section {
    display: block;
    font-size: 9px;
    padding: 0 8px;
    margin: 10px 0 3px;
  }

  .menu-item a {
    padding: 5px 6px;
    margin: 1px 4px;
    font-size: 11px;
    white-space: normal;
    overflow: visible;
    border-left: none;
    border-radius: 6px;
    gap: 5px;
    align-items: flex-start;
    line-height: 1.25;
  }

  .menu-item a i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
  .menu-item a span { display: block; }
  .menu-item.active a { border-radius: 6px; }

  /* ── Header ── */
  .site-header { padding: 0 12px; }
  .site-title { font-size: 13px; }
  .header-username { display: none; }

  /* ── Topbar ── */
  .page-topbar { padding: 8px 10px; }
  .breadcrumb { font-size: 12px; }
  .topbar-action span { display: none; }

  /* ── Content: white bg, generous padding ── */
  .content {
    padding: 16px 14px 24px;
    background: #ffffff;
  }

  /* ── Cards: flat on mobile — no box, just spacing + separator ── */
  .card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 0 22px 0;
    margin-bottom: 22px;
    border-bottom: 1px solid #e8edf5;
  }

  .card:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /* ── Card title: larger, navy ── */
  .card-title {
    font-size: 15px;
    color: #1c3461;
    margin-bottom: 14px;
    gap: 8px;
  }

  .card-title i { font-size: 17px; }

  /* ── Body text: larger, aired ── */
  .card p {
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 16px;
    color: #2d3a5a;
  }

  /* ── Sub-headings ── */
  .sub-heading { font-size: 15px; margin: 20px 0 10px; }

  /* ── Lists ── */
  .content-list { font-size: 16px; line-height: 1.9; }

  /* ── Stats: stack vertically ── */
  .stats-grid { grid-template-columns: 1fr; gap: 8px; }
  .stat-box { padding: 10px 12px; }
  .stat-label { font-size: 11px; }
  .stat-value { font-size: 14px; }

  /* ── Profile ── */
  .profile-row { flex-direction: column; align-items: center; gap: 14px; }
  .profile-photo { width: 120px; }
  .profile-name { font-size: 20px; text-align: center; }
  .profile-role { font-size: 14px; text-align: center; }
  .tags { justify-content: center; }
  .profile-link { font-size: 14px; }

  /* ── Images ── */
  .img-row { flex-direction: column; }
  .content-img { border-radius: 6px; }

  /* ── Video ── */
  .video-wrap { border-radius: 6px; }
  .video-wrap video { max-height: 220px; }

  /* ── Certs ── */
  .cert-row { flex-direction: column; }

  /* ── Highlight block ── */
  .highlight-block { font-size: 15px; line-height: 1.8; }

  /* ── Feature blocks ── */
  .feature-title { font-size: 15px; }
  .feature-block p { font-size: 16px; line-height: 1.85; }

  /* ── Next list ── */
  .next-list li p { font-size: 15px; line-height: 1.8; }
}

@media (max-width: 768px) {
  .content-img { max-width: 85%; }
  .content-img.full-width { width: 85%; }
  .img-row .content-img { max-width: 100%; }
}

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

/* ── Sidebar era groups ───────────────────────────────────────── */
.menu-group { list-style: none; margin: 6px 0 2px; }

.menu-group-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 16px);
  margin: 0 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.06);
  border: none;
  border-left: 2px solid rgba(232,160,32,0.5);
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  transition: background 0.15s;
}

.menu-group-btn:hover { background: rgba(255,255,255,0.1); }

.menu-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-group-header > i { font-size: 15px; color: #e8a020; }

.menu-group-era {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #e8a020;
  line-height: 1.3;
  text-align: left;
}

.menu-group-sub {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  line-height: 1.3;
  text-align: left;
}

.menu-group-chevron {
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.menu-group.open .menu-group-chevron { transform: rotate(180deg); }

.menu-group-items {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

/* Era group mobile fixes */
@media (max-width: 768px) {
  .sidebar { width: 160px; min-width: 160px; }
  .menu-group-btn { width: calc(100% - 8px); margin: 0 4px; padding: 5px 6px; }
  .menu-group-era { font-size: 10px; }
  .menu-group-sub { display: none; }
  .menu-group-header > i { font-size: 13px; }
  .menu-group-chevron { font-size: 12px; }
  .menu-group-items .menu-item a { overflow: hidden; white-space: normal; }
}

.no-transition * { transition: none !important; }

html, body { overflow-x: hidden; }

@media (max-width: 768px) { .sidebar { top: 0; } }

/* Mobile vertical space optimisation */
@media (max-width: 768px) {
  .stats-grid { display: block; }
  .stat-box { background: transparent; border: none; border-radius: 0; padding: 5px 0; margin-bottom: 0; border-bottom: 0.5px solid #e8edf5; display: flex; align-items: baseline; gap: 20px; }
  .stat-box:last-child { border-bottom: none; }
  .stat-label { font-size: 12px; color: #1c3461; font-weight: 500; min-width: 90px; flex-shrink: 0; margin: 0; }
  .stat-value { font-size: 14px; margin: 0; }
  .feature-block { margin-bottom: 12px; padding-bottom: 12px; }
  .divider { margin: 10px 0; }
  .sub-heading { margin: 12px 0 6px; }
  .card-title { margin-bottom: 10px; }
  .highlight-block { padding: 10px 14px; margin: 10px 0; }
  .next-list li { margin-bottom: 10px; padding-bottom: 10px; }
}

/* ── Sidebar toggle button ── */
.sidebar-toggle { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.85); padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: background 0.15s, color 0.15s; flex-shrink: 0; margin-right: 8px; }
.sidebar-toggle:hover { background: rgba(255,255,255,0.12); color: #ffffff; }
.sidebar-toggle i { font-size: 22px; }

/* ── Sidebar collapsible ── */
.sidebar { transition: width 0.3s ease, min-width 0.3s ease, padding 0.3s ease; }
.sidebar.collapsed { width: 0 !important; min-width: 0 !important; padding: 0 !important; overflow: hidden; }
.no-transition, .no-transition * { transition: none !important; }

/* ── Sidebar rail tab ── */
.sidebar-tab { flex-shrink: 0; width: 18px; background: #1c3461; border: none; border-right: 1px solid rgba(255,255,255,0.1); cursor: pointer; color: #e8a020; display: flex; align-items: flex-start; justify-content: center; padding-top: 48px; position: sticky; top: 60px; height: calc(100vh - 60px); transition: background 0.15s; z-index: 50; }
.sidebar-tab:hover { background: rgba(255,255,255,0.08); }
.sidebar-tab i { font-size: 13px; transition: transform 0.3s ease; }
.sidebar.collapsed + .sidebar-tab i { transform: rotate(180deg); }
@media (max-width: 768px) { .sidebar-tab { position: relative; top: 0; height: auto; padding: 16px 0; align-items: center; } }

@media (min-width: 769px) { .sidebar-toggle { display: none; } }

.sidebar-tab { background: #0f1e3a; border-right: 2px solid #e8a020; }
.sidebar-tab i { font-size: 16px; }

.sidebar-tab { background: #0f1e3a; border-right: 2px solid #e8a020; }
.sidebar-tab i { font-size: 16px; }

/* Icon rail */
.rail-toggle-item { list-style: none; }
.rail-toggle { display: flex; align-items: center; gap: 20px; width: 100%; padding: 10px 14px; background: rgba(0,0,0,0.25); border: none; border-bottom: 1px solid rgba(255,255,255,0.12); cursor: pointer; color: #e8a020; margin-bottom: 4px; white-space: nowrap; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.rail-toggle:hover, .rail-toggle:focus { background: rgba(255,255,255,0.1); outline: none; }
.rail-toggle i { font-size: 22px; flex-shrink: 0; }
.rail-toggle span { font-size: 12px; color: rgba(255,255,255,0.65); font-family: "DM Sans",sans-serif; }

/* Collapsed icon-rail state */
.sidebar.collapsed { width: 52px !important; min-width: 52px !important; padding: 4px 0 !important; }
.sidebar.collapsed .rail-toggle { justify-content: center; padding: 12px 4px; }
.sidebar.collapsed .menu-section,
.sidebar.collapsed .menu-item a span,
.sidebar.collapsed .menu-group-era,
.sidebar.collapsed .menu-group-sub,
.sidebar.collapsed .menu-group-chevron,
.sidebar.collapsed .rail-toggle span { display: none !important; }
.sidebar.collapsed .menu-item a { justify-content: center; padding: 10px 4px; margin: 1px 4px; border-left: none; }
.sidebar.collapsed .menu-group-btn { justify-content: center; padding: 8px 4px; width: calc(100% - 8px); margin: 2px 4px; border-left: none; }
.sidebar.collapsed .menu-group-items { max-height: 800px !important; }
.sidebar-tab { display: none; }

.rail-toggle span { display: none; }
.sidebar.collapsed .menu-group-btn { display: none; }
.breadcrumb-current { font-size: 15px; font-weight: 700; }
@media (max-width: 768px) { .breadcrumb-current { font-size: 17px; font-weight: 700; } .breadcrumb { gap: 8px; } }

.content-img { box-shadow: 8px 8px 4px rgba(0,0,0,0.38); margin: 30px auto; max-width: 75%; }


/* ── Fixed sidebar + scrollable content ─────────────────────────────
   Replace the previous sidebar-fix block at the bottom of style.css
   with this complete updated version.
──────────────────────────────────────────────────────────────────── */

html, body { height: 100%; }

body { display: flex; flex-direction: column; overflow: hidden; }

.site-header { flex-shrink: 0; position: sticky; top: 0; z-index: 200; }

.wrapper { flex: 1; overflow: hidden; display: flex; min-height: 0; }

/* Sidebar animates width smoothly so content area expands/contracts */
.sidebar {
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  transition: width 0.25s ease, min-width 0.25s ease;
}

/* Content fills whatever space the sidebar leaves behind */
.content-wrap {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  min-width: 0;
  transition: none;
}

/* Stop the page topbar from floating over content */
.page-topbar { position: static; }

/* On mobile: fully hide the sidebar when collapsed */
@media (max-width: 768px) {
  .sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: none;
  }
}

/* --- 2026-07 partials refactor: sidebar "dead" menu item -----------------
   Was copy-pasted into a <style> block on 13 separate pages. Moved here
   once so future edits (or removal of the dead "Welcome to my HD Claude"
   entry) only happen in one place. */
.menu-item-inactive { opacity: 1; }
.menu-item-link-dead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: #6B6560;
  cursor: default;
  pointer-events: none;
  font-size: 0.875rem;
}
.menu-item-link-dead i { color: #5A5550; }

/* ── Header-user: LinkedIn CTA + language toggle ─────────────────────
   2026-07-29: moved here from JS-injected <style> blocks in sidebar.js
   and translate.js. Both used to build their markup AND inject their
   own CSS on every page load, after DOMContentLoaded — since .header-user
   started out empty in the static HTML, that meant a visible pop-in
   flash (icon/name/flags appearing from nothing) on every navigation.
   Now the markup is static in every page (see .header-user in each
   file), present at first paint, and this CSS is just always-loaded
   like everything else in this file — sidebar.js/translate.js only
   attach behavior to these elements now, they don't create them. */
.lnkd-cta {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; text-decoration: none; padding: 3px 8px; border-radius: 8px;
  white-space: nowrap; transition: background 0.15s ease; flex-shrink: 0;
}
.lnkd-cta:hover { background: rgba(255,255,255,0.10); text-decoration: none; }
.lnkd-cta:hover .lnkd-mark-bg { fill: #0f7ae0; }
.lnkd-cta svg { display: block; width: 22px; height: 22px; }
.lnkd-cta span {
  font-family: "DM Sans", sans-serif; font-size: 8px; font-weight: 700;
  letter-spacing: 0.07em; color: rgba(255,255,255,0.85);
}
@media (max-width: 480px) { .lnkd-cta { padding: 2px 6px; } .lnkd-cta svg { width: 19px; height: 19px; } .lnkd-cta span { font-size: 7px; } }

.lang-toggle{display:inline-flex;align-items:center;gap:6px;margin-left:12px;padding-bottom:10px;}
/* 2026-08-11, per Harding: standardized away from a Brazilian-flag icon on
   the BR button (now plain "PT" text, same treatment as the "EN" button --
   see the HTML) and fixed the pill visibly shifting upward a few pixels
   whenever it became active. Root cause of the shift: .lang-flag.active
   used to carry its own margin-bottom:10px (to leave room below for the
   little green "currently active" dot), and since align-items:center on
   .lang-toggle centers each child's full margin box, adding a bottom
   margin ONLY on the active state pulled that one button upward relative
   to its neighbor -- exactly the flicker Harding was seeing. Fixed by
   reserving that space once, permanently, on the shared .lang-toggle
   container instead (padding-bottom:10px above) so neither button's own
   margin ever changes between states -- the rounded rectangle stays put,
   only the small dot appears/disappears beneath it. */
.lang-flag{font-size:11px;font-weight:700;line-height:1;width:32px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:5px;cursor:pointer;border:1px solid rgba(245,244,240,0.35);background:#f5f4f0;color:#1a1a18;opacity:.85;padding:0;
  position:relative;transition:opacity .15s,border-color .15s,box-shadow .15s;}
.lang-flag:hover{opacity:1;}
.lang-flag.active{opacity:1;border-color:#185FA5;box-shadow:0 0 0 2px rgba(24,95,165,0.35);}
.lang-flag.active::after{content:'';display:block;position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#00c04b;box-shadow:0 0 2px rgba(0,192,75,0.6);}
.lang-status{display:inline-flex;align-items:center;gap:6px;margin-left:4px;font-family:"JetBrains Mono",monospace;font-size:11px;color:#6b6a63;}
.lang-status .status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6b6a63;}
.lang-status .status-dot.processing{background:#BA7517;animation:langPulseAmber 1.2s ease-in-out infinite;}
.lang-status .status-dot.done{background:#1D9E75;}
@keyframes langPulseAmber{0%,100%{opacity:1;}50%{opacity:.5;}}

/* ── Anti-flicker language gate ──────────────────────────────────────
   2026-07-28. Every page on this site is a static ENGLISH html file, so
   on a Portuguese session the browser paints English first and translate.js
   swaps the text afterwards. That produced the EN/PT "fight" on every
   navigation: content visibly redrawing, and the green dot painting under
   the EN flag before jumping to the BR flag.

   lang-boot.js runs in <head>, before the body is parsed, and puts these
   classes on <html> when the session is already Portuguese. The English
   frame is therefore never painted, and the dot is on the BR flag from the
   first painted frame. translate.js removes cg-lang-pending as soon as the
   text swap is in place (and lang-boot.js removes it on its own safety
   timeout regardless, so the page can never stay blank).

   html gets an explicit background because visibility:hidden on the body
   hides the body's own background too — without this the hidden moment
   would flash white instead of the page's normal color. */
html { background: #f4f7fb; }
html.cg-lang-pending body { visibility: hidden; }

/* Flag + green dot state before any JS has run. The static markup
   hardcodes class="active" on the EN button (correctly: the file itself is
   English), so on a Portuguese session that has to be undone in CSS at
   paint time, not by setActiveFlag() after translation finishes. Values
   below deliberately mirror .lang-flag.active and #langFlagBR.active above
   — keep them in sync if those change. */
html.cg-lang-pt #langFlagEN.active{opacity:.85;border-color:rgba(245,244,240,0.35);box-shadow:none;}
html.cg-lang-pt #langFlagEN.active::after{content:none;}
html.cg-lang-pt #langFlagBR{opacity:1;border-color:#185FA5;box-shadow:0 0 0 2px rgba(24,95,165,0.35);}
html.cg-lang-pt #langFlagBR::after{content:'';display:block;position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#00c04b;box-shadow:0 0 2px rgba(0,192,75,0.6);}

/* --- "Last Updated" footer, site-wide (2026-08-09, per Harding) ---
   Moved here from a page-local rule in analytics.html so it's automatically
   available on every page that loads style.css (i.e. all of them) instead
   of being analytics.html-only. Any page can opt in just by adding
   <div class="site-last-updated" id="siteLastUpdated" data-no-translate></div>
   right before its sidebar's closing </nav> -- sidebar.js's shared fetch
   logic (reads api/last-updated.txt) fills it in on every page that has it.
   position: fixed against the viewport (not .sidebar) on purpose: .sidebar
   loses its fixed-height box below the 768px breakpoint (see the mobile
   .sidebar override above), so anchoring to .sidebar's own box broke this
   entirely at that width. Fixed positioning is anchored to the real screen
   corner instead, independent of any ancestor's box model. Hidden below
   768px since the mobile sidebar collapses to icons-only with no stable
   "lower left of the sidebar" to visually associate it with there. Text
   is secondary/helper content, so per CLAUDE.md's dark-background contrast
   rule this uses rgba(255,255,255,0.55), the documented floor for that
   text class -- not the dimmer 0.38 floor, reserved for placeholders only.
   z-index kept low (5) so it never sits above the login overlay (500) or
   any real click target; pointer-events:none so it can never intercept a
   click even if something is layered oddly on a page we haven't checked. */
.site-last-updated {
  position: fixed;
  left: 16px;
  bottom: 14px;
  z-index: 5;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .02em;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 768px) {
  .site-last-updated { display: none; }
}
/* Collapsed sidebar (2026-08-09, per Harding): the rail-toggle button sets
   width:0 on .sidebar via .collapsed, but .site-last-updated is
   position:fixed against the VIEWPORT, not .sidebar's own box -- fixed
   positioning ignores an ancestor's width/overflow entirely (that's the
   whole point of using fixed here, see the comment above), so collapsing
   the sidebar left the footer text floating in place, now overlapping
   whatever page content had taken over that space instead of disappearing
   along with the blue sidebar it's meant to visually belong to. Simple
   fix: hide it whenever the sidebar it's nested inside carries .collapsed
   -- no JS needed, the existing rail-toggle class already does the work. */
.sidebar.collapsed .site-last-updated { display: none; }