/* ============================================================
   Codeflow — overrides do skin ADF Fusion
   Ajustes específicos do projeto. O adf-fusion.css base
   permanece intacto; tudo daqui usa o prefixo cf-.
   ============================================================ */

/* ---------- Abas de navegação: um respiro acima da aba Home ---------- */
.af-navTabs { padding-top: 10px; }

/* ---------- Barra de branding: 46px de altura, logo de 26px (desktop e celular) ---------- */
:root { --cf-bar-h: 46px; }
.af-branding { height: var(--cf-bar-h); }

/* ---------- Branding ---------- */
.af-branding .cf-brandLink {           /* logo + nome levam à Home do idioma; visual idêntico ao texto anterior */
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.af-branding .cf-brandLink:hover .cf-brandName { color: #e8f0fa; }
.cf-brandLogo {
  width: 26px;
  height: 26px;
  vertical-align: middle;
  display: block;
  position: relative;          /* fica acima do halo */
  z-index: 1;
}
/* Halo: anel de luz que segue o contorno externo do hexágono (assets/logo-glow.png, gerado por scripts/make_icons.py
   a partir do logo); o interior do desenho não acende. Pulsa devagar; fica parado para quem prefere menos movimento. */
.cf-logoHalo {
  position: relative;
  display: inline-flex;
  margin-right: 6px;
}
.cf-logoHalo::before {
  content: "";
  position: absolute;
  inset: -8px;                 /* a imagem do halo tem 6px de margem em volta do logo (proporcional aos 26px) */
  background: url("../logo-glow.png") center / 100% 100% no-repeat;   /* anel que segue o contorno externo do hexágono */
  opacity: 0;
  pointer-events: none;
  /* ciclo de 7s: logo normal por ~4s, o brilho acende (1,1s) e, assim que chega ao máximo, já começa a apagar (1,3s).
     Não depende de prefers-reduced-motion: no Linux o Chrome herda essa preferência das animações do desktop e a
     deixava parada; um esmaecimento lento de opacidade não é o movimento que a preferência quer evitar. */
  animation: cfLogoHalo 7s ease-in-out infinite;
}
@keyframes cfLogoHalo {
  0%, 58%   { opacity: 0; }
  74%       { opacity: .45; }
  93%, 100% { opacity: 0; }
}
.af-branding .cf-brandName {
  font: bold 14px Tahoma, Verdana, sans-serif;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
/* "CODEFLOW" e todo caixa-alta; o nome da aplicacao ao lado tem descendentes
   (g, c-cedilha), o que joga sua massa visual ~1px abaixo do centro optico do
   logotipo, embora as caixas de linha estejam centradas. O -1px realinha os dois. */
.af-branding .app-name {
  position: relative;
  top: -1px;
}

/* O select herda o visual do adf-fusion.css (appearance:none + zona de botão
   desenhada); a seta vem do wrapper .af-selectWrap — não sobrescrever
   background/padding aqui, senão a zona do botão some. */
.af-branding .af-selectWrap { vertical-align: middle; }
.cf-langSelect { vertical-align: middle; }

/* ---------- Alternância de visões (protótipo) ---------- */
.cf-view { display: none; }
.cf-view.active { display: block; }

/* ---------- Chips: tags e labels ---------- */
.cf-tag,
a.cf-tag {
  /* badge Fusion: pílula com o degradê de rótulo e borda de botão */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 16px;
  padding: 0 7px;
  border: 1px solid #8098b2;
  border-radius: 9px;
  background: linear-gradient(#fefefe, #edf1f6 45%, #d9e2ec);
  color: #145fa8;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
  line-height: 14px;
  vertical-align: middle;
  box-sizing: border-box;
}
a.cf-tag:hover {
  border-color: #88aed6;
  background: linear-gradient(#ffffff, #f2f6fb 45%, #e2ebf4);
  color: #0d3a6b;
}
.cf-tag .cnt { color: #6b7a89; font-weight: normal; }

.cf-label {
  display: inline-block;
  padding: 0 6px 1px;
  border: 1px solid #8098b2;
  border-radius: 2px;
  background: linear-gradient(#fefefe, #edf1f6 45%, #d9e2ec);
  color: #3e4b58;
  font-weight: bold;
  white-space: nowrap;
  line-height: 14px;
}
.cf-label.primary {
  background: linear-gradient(#6b90b6, #3d6791);
  border-color: #2e5378;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

/* ---------- Cabeçalho do artigo ---------- */
.cf-articleMeta {
  color: #6b7a89;
  margin: 2px 0 6px;
}
.cf-articleMeta b { color: #3e4b58; }
.cf-articleMeta .sep { margin: 0 5px; color: #a9b8c7; }

.cf-chipRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0 0 6px;
}
.cf-chipRow .rowLabel { color: #3e4b58; margin-right: 2px; }
.cf-postLabels { margin-bottom: 14px; }   /* respiro entre a linha de Labels e o primeiro painel do artigo */

.cf-langBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid #b0bdcb;
  background: linear-gradient(#f6f9fc, #e9eff5);
  margin: 0 0 10px;
}
.cf-langBar .cur {
  font-weight: bold;
  color: #15497e;
  background: #cfe2f7;
  border: 1px solid #91b6e0;
  padding: 0 5px 1px;
  border-radius: 2px;
}
.cf-langBar .sep { color: #a9b8c7; }
.cf-langBar .note { color: #6b7a89; margin-left: auto; }

/* ---------- Corpo do artigo ---------- */
.cf-article { max-width: none; }   /* corpo do post ocupa toda a largura do painel */
.cf-article p {
  margin: 0 0 8px;
  line-height: 1.5;
}
.cf-article .af-panelBox { margin: 0 0 10px; }   /* nota recolhível: mesmo respiro das figuras antes do próximo parágrafo */
.cf-article .lead { color: #44566a; }
sup.cf-cite { line-height: 0; }
sup.cf-cite a {
  font-size: 9px;
  text-decoration: none;
}
sup.cf-cite a:hover { text-decoration: underline; }

/* ---------- Bloco de código ---------- */
.cf-codeBox {
  border: 1px solid #a9b8c7;
  background: #fbfcfe;
  margin: 0 0 10px;
}
.cf-codeBox .codeHdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: linear-gradient(#fafcfd, #e4eaf1);
  border-bottom: 1px solid #c3cedb;
  color: #15497e;
  font-weight: bold;
}
.cf-codeBox .codeHdr .lang {
  font-weight: normal;
  color: #6b7a89;
}
.cf-codeBox .codeHdr .af-button.small { margin-left: auto; }
.cf-codeBox pre {
  margin: 0;
  padding: 7px 9px;
  overflow-x: auto;
  font: 11px Consolas, "Courier New", monospace;
  line-height: 1.45;
  color: #1a1a1a;
}
.cf-codeBox .k { color: #00308f; font-weight: bold; } /* palavra-chave */
.cf-codeBox .c { color: #3f7f3f; }                    /* comentário   */
.cf-codeBox .s { color: #8a3e1f; }                    /* string       */
.cf-codeBox .n { color: #7a4a9b; }                    /* número       */

/* ---------- Referências ---------- */
.cf-refList {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cf-refList li {
  display: flex;
  gap: 7px;
  padding: 4px 2px;
  border-bottom: 1px dotted #c3cedb;
}
.cf-refList li:last-child { border-bottom: none; }
.cf-refList .refNum {
  flex: none;
  width: 22px;
  font-weight: bold;
  color: #15497e;
}
.cf-refList .refType {
  flex: none;
  margin-left: auto;
  align-self: flex-start;
}
/* Badge Fusion neutro (tipo de referência, conceitos-chave): pílula com o degradê de rótulo, texto de rótulo */
.cf-badge,
.cf-refList .refType.cf-label {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 8px;
  border: 1px solid #8098b2;
  border-radius: 9px;
  background: linear-gradient(#fefefe, #edf1f6 45%, #d9e2ec);
  color: #3e4b58;
  font-weight: bold;
  white-space: nowrap;
  line-height: 14px;
  vertical-align: middle;
  box-sizing: border-box;
}
.cf-refList cite { font-style: italic; }
.cf-refList .refSrc { color: #6b7a89; }

/* ---------- Sumário (gaveta) ---------- */
.cf-toc a {
  display: block;
  padding: 2px 4px;
  border: 1px solid transparent;
  text-decoration: none;
}
.cf-toc a:hover { background: #e4eefa; border-color: #b9d2ee; }
.cf-toc .lvl2 { padding-left: 18px; }

/* ---------- Painel esquerdo ---------- */
.cf-tagCloud {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.cf-archList div { margin: 0 0 3px; }

/* ---------- Tabelas de listagem ---------- */
.af-table td .cf-tag { margin-right: 2px; }
.cf-langCell { white-space: nowrap; color: #3e4b58; }

/* ---------- Descrição de abertura com ícone informativo ---------- */
.cf-intro {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
}
.cf-intro .cf-infoIcon { flex: none; margin-top: 1px; }
.cf-intro .introText { min-width: 0; }
.cf-intro p {
  margin: 0 0 7px;
  line-height: 1.55;
  color: #44566a;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.cf-intro p:last-child { margin-bottom: 0; }
.cf-intro b { color: #15497e; }

/* ---------- Figuras e diagramas (páginas de artigo) ---------- */
.cf-figure {
  border: 1px solid #a9b8c7;
  background: #fbfcfe;
  margin: 0 0 10px;
}
.cf-figure .figHdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: linear-gradient(#fafcfd, #e4eaf1);
  border-bottom: 1px solid #c3cedb;
  color: #15497e;
  font-weight: bold;
}
.cf-figure .figHdr .figNum { color: #6b7a89; font-weight: normal; }
.cf-figure .figHdr .af-button.small { margin-left: auto; }
.cf-figure .figBody {
  padding: 9px 8px;
  background: #fff;
  text-align: center;
  overflow-x: auto;
}
.cf-figure .figBody svg { max-width: 100%; height: auto; }
.cf-figure .figCaption {
  padding: 4px 7px;
  border-top: 1px solid #c3cedb;
  background: #f4f7fa;
  color: #5b6b7a;
  text-align: left;
  line-height: 1.45;
}
.cf-figure .figCaption b { color: #3e4b58; }

/* Banner de abertura do artigo */
.cf-hero {
  border: 1px solid #a9b8c7;
  /* mesmo degradê e barra inferior do SVG, para o quadro continuar o banner quando a tela é mais larga que 880px */
  background: linear-gradient(#f8fbfd, #dae6f2 calc(100% - 4px), #3d6791 calc(100% - 4px));
  margin: 0 0 10px;
  line-height: 0;
  text-align: center;
}
.cf-hero svg { display: inline-block; vertical-align: top; width: 100%; max-width: 880px; height: auto; }

/* ---------- Fórmulas ---------- */
.cf-formula {
  border: 1px solid #c3cedb;
  background: linear-gradient(#fdfeff, #f3f7fb);
  padding: 10px 9px;
  margin: 0 0 10px;
  text-align: center;
  font: 14px Cambria, Georgia, "Times New Roman", serif;
  color: #1a2836;
}
.cf-formula .var { font-style: italic; }
.cf-formula .op { margin: 0 4px; color: #44566a; }
.cf-formula .frac {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin: 0 2px;
}
.cf-formula .frac .num { display: block; padding: 0 4px; }
.cf-formula .frac .den {
  display: block;
  padding: 0 4px;
  border-top: 1px solid #44566a;
}
.cf-formula .fName { font-variant: small-caps; color: #15497e; }
.cf-formula .eqNum { float: right; color: #8a99a8; font: 11px Tahoma, sans-serif; }

/* ---------- Glossário de símbolos ---------- */
.cf-symbols dt { font: italic 12px Cambria, Georgia, serif; color: #15497e; }

/* ---------- Corpo do artigo: listas ---------- */
.cf-article ul, .cf-article ol { margin: 0 0 8px; padding-left: 20px; }
.cf-article li { margin: 0 0 3px; line-height: 1.5; }
.cf-article code {
  font: 11px Consolas, "Courier New", monospace;
  background: #f2f5f9;
  border: 1px solid #dde5ee;
  padding: 0 3px;
  color: #1a3a5c;
}

/* ---------- Lista de posts com excerto (Home) ---------- */
.cf-postList { padding: 0 9px; background: #fff; }
.cf-post {
  padding: 10px 0 12px;
  border-bottom: 1px dotted #c3cedb;
}
.cf-post:first-child { padding-top: 8px; }
.cf-post:last-child { border-bottom: none; }
.cf-post .postTitle {
  margin: 0 0 3px;
  font: bold 12px Tahoma, sans-serif;
}
.cf-post .postTitle a { color: #15497e; }
.cf-post .postTitle a:hover { color: #0d3a6b; }
.cf-post .cf-articleMeta { margin: 0 0 10px; }   /* respiro entre a linha de metadados e o excerto */
.cf-post p {
  margin: 0 0 9px;   /* respiro antes do Read more */
  line-height: 1.55;
  color: #1a1a1a;
}
.cf-post .postFoot {
  display: flex;
  align-items: baseline;   /* texto das tags na mesma linha de base do Read more (medido) */
  flex-wrap: wrap;
  gap: 4px;
}
.cf-post .readMore {
  font-weight: bold;
  margin-right: 8px;
  white-space: nowrap;
}
.cf-postList .empty { padding: 14px 0; color: #6b7a89; }
.af-statusBar .pager a.disabled { pointer-events: none; text-decoration: none; }
.af-statusBar .pager a.disabled { pointer-events: none; text-decoration: none; }
.af-statusBar #clearFilter { margin-left: 4px; }

/* ---------- Árvore: títulos longos não podem esmagar o ícone ---------- */
.af-treeRow > svg,
.af-treeRow .tw { flex: none; }
.af-treeRow .lbl {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Árvore: twisties [+]/[-] em vez de setas ---------- */
.af-treeRow .tw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 14px;
  cursor: pointer;
}
.af-treeRow .tw svg { display: block; }
.af-treeRow .tw:hover svg rect { stroke: #35618f; fill: #eef4fa; }

/* ---------- Accordion: triângulo menor e centrado com o texto ---------- */
.af-accHeader .disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 14px;
  font-size: 7px;
  line-height: 1;
  position: relative;
  top: 1px;    /* ajuste fino visual; 1px abaixo do centro geométrico da mancha do texto */
}

/* ---------- Splitter: linha fina; grip só no hover; arrasta e colapsa ---------- */
.af-panelLeft { border-right: none; }   /* a única linha entre menu e conteúdo é a do splitter */
.af-splitter {
  width: 5px;                       /* área de clique; a linha visível tem 1px */
  margin-left: -2px;                /* monta 2px sobre o painel: a linha encosta no gradiente dos cabeçalhos */
  border-right: none;
  background: linear-gradient(90deg, transparent 2px, #b9c6d3 2px, #b9c6d3 3px, transparent 3px);
  cursor: col-resize;
}
.af-splitter:hover,
.af-splitter.dragging {
  background: linear-gradient(90deg, transparent 2px, #6b90b6 2px, #6b90b6 3px, transparent 3px);
}
.af-splitter .grip {
  position: sticky;             /* 50% da JANELA, não do splitter: em posts longos o 50% do splitter fica fora da tela */
  top: calc(50vh - 19px);
  left: auto;                   /* o skin base traz left:0 (absolute); no sticky seria ancoragem horizontal */
  display: flex;                /* mantém a seta centrada, como no skin base */
  width: 11px;
  height: 38px;
  margin: 0 0 0 -3px;           /* centra os 11px sobre os 5px do splitter */
  transform: none;
  border: 1px solid #9fb2c4;
  border-radius: 3px;
  background: linear-gradient(90deg, #f6f9fc, #d7e1ec);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  color: #35597d;
  font-size: 7px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s;
}
.af-splitter:hover .grip,
.af-splitter.dragging .grip,
.af-shell.collapsed .af-splitter .grip { opacity: 1; }
.af-splitter .grip:hover { background: linear-gradient(90deg, #ffffff, #cfe0f2); color: #15497e; }

/* menu recolhido: o painel some, a linha fica na borda e o grip inteiro dentro da tela */
.af-shell.collapsed .af-panelLeft { display: none; }
.af-shell.collapsed .af-splitter {
  cursor: default;
  margin-left: 0;
  background: linear-gradient(90deg, #b9c6d3 1px, transparent 1px);
}
.af-shell.collapsed .af-splitter .grip {
  margin-left: 1px;              /* inteiro dentro da tela quando o menu some */
}
body.cf-resizing { cursor: col-resize; user-select: none; }
body.cf-resizing .af-panelMain { pointer-events: none; }

/* ============================================================
   Mobile (<= 768px): mesmo visual ADF, layout reflui.
   O painel lateral vira gaveta deslizante; o resto empilha.
   ============================================================ */
.cf-menuBtn { display: none; }            /* só aparece no mobile */
.cf-drawerHead { display: none; }
.cf-backdrop { display: none; }

@media (max-width: 768px) {
  body { min-width: 0; font-size: 12px; }
  input[type="text"], input[type="password"], select, .af-button, .af-toolButton {
    font-size: 12px;
  }
  input[type="text"], input[type="password"] { height: 26px; }
  select { min-height: 26px; }
  .af-button, .cf-searchRow .af-button.small { height: 26px; padding: 0 12px; box-sizing: border-box; }   /* mesma altura dos campos */

  /* --- barra de branding: logo + idioma; o resto some --- */
  .af-branding { padding: 0 8px; height: 46px; }                 /* barra um pouco mais alta no celular */
  .cf-brandLogo { width: 26px; height: 26px; }                     /* logo levemente maior */
  .cf-logoHalo::before { inset: -8px; }
  .af-globalLinks > *:not(.af-selectWrap) { display: none; }   /* fica só o seletor de idioma */
  .af-globalLinks { font-size: 0; }                             /* engole qualquer texto solto */
  .af-globalLinks .af-selectWrap, .af-globalLinks select { font-size: 12px; }
  .af-globalLinks .af-selectWrap { display: none; }               /* no celular usa a folha inferior */
  .af-globalLinks .cf-langBtn { display: inline-flex; }            /* só a bandeira; abre a folha de idiomas */
  .cf-langBtn .flag { position: relative; top: 2px; }              /* o emoji desenha alto; desce para o centro ótico */
  .af-branding .app-name .release { top: 1px; }                    /* badge um fio mais baixo */

  /* --- botão de menu (três traços) antes do logo, na barra de branding --- */
  .af-navTabs { align-items: flex-end; padding: 10px 8px 0; }
  .cf-menuBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 30px;
    margin: 0 8px 0 0;
    padding: 0;
    background: none;                 /* só os três traços, sem moldura nem fundo */
    border: 0;
    box-shadow: none;
    border-radius: 3px;
    color: #fff;
  }
  .cf-menuBtn:hover, .cf-menuBtn:active { background: none; border: 0; box-shadow: none; color: #cfe2f7; }
  .cf-menuBtn:focus-visible { outline: 1px dotted rgba(255, 255, 255, .7); outline-offset: 2px; }
  .cf-menuBtn .bars { display: block; width: 20px; height: 20px; }   /* três traços desenhados em SVG: centram no botão sem depender da métrica da fonte */

  /* --- shell empilhado: sem splitter, painel principal ocupa tudo --- */
  .af-shell { display: block; min-height: 0; }
  .af-splitter { display: none; }
  .af-panelMain { padding: 8px 10px 16px; overflow: visible; }

  /* --- painel lateral vira gaveta --- */
  .af-panelLeft,
  .af-shell.collapsed .af-panelLeft {
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(300px, 86vw);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid #8fa6c0;
    box-shadow: 3px 0 10px rgba(0, 0, 0, .25);
    transform: translateX(-102%);
    transition: transform .2s ease-out;
    z-index: 60;
  }
  .af-shell.menu-open .af-panelLeft { transform: none; }
  .cf-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(20, 40, 70, .35);
    opacity: 0; pointer-events: none;
    transition: opacity .2s;
    z-index: 55;
  }
  .af-shell.menu-open .cf-backdrop { opacity: 1; pointer-events: auto; }
  body.cf-menuOpen { overflow: hidden; }

  /* cabeçalho da gaveta, no estilo da barra de branding */
  .cf-drawerHead {
    display: flex;
    align-items: center;
    height: var(--cf-bar-h);
    padding: 0 8px 0 10px;
    background: linear-gradient(#54749b 0%, #3a5c86 48%, #1f3f63 100%);
    border-bottom: 1px solid #122a44;
    color: #fff;
    font: bold 12px Tahoma, Verdana, sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
    position: sticky; top: 0; z-index: 1;
  }
  .cf-drawerHead .close {
    margin-left: auto;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #7f9bbd;
    border-radius: 3px;
    background: linear-gradient(#6b90b6, #3d6791);
    color: #fff; font-size: 13px; cursor: pointer;
  }

  /* alvos de toque maiores dentro da gaveta */
  .af-accHeader { padding: 8px 8px; }
  .af-treeRow { padding: 4px 3px; }
  .af-tree ul { padding-left: 14px; }
  .cf-tagCloud { gap: 5px; }
  .cf-tag, a.cf-tag { padding: 3px 7px 4px; }
  .cf-archList div { margin: 0 0 7px; }

  /* --- cabeçalho da página: título e filtro empilham --- */
  .af-panelHeader { flex-wrap: wrap; gap: 6px 0; }
  .af-panelHeader h1 { font-size: 15px; }
  .af-panelMain .af-subHeader { font-size: 14px; margin: 18px 0 8px; }   /* títulos de seção acima dos cabeçalhos de painel (12px) */

  /* --- lista de posts --- */
  .cf-postList { padding: 0 8px; }
  .cf-post .postTitle { font-size: 13px; line-height: 1.35; }
  .cf-post .cf-articleMeta { line-height: 1.6; }
  .cf-post p { line-height: 1.6; }
  .cf-post .postFoot { gap: 6px; }
  .cf-post .readMore { padding: 3px 0; }

  /* --- barra de status: contador em cima, paginação embaixo --- */
  .af-statusBar { flex-wrap: wrap; padding: 6px 8px; row-gap: 5px; }
  .af-statusBar .pager { width: 100%; display: flex; justify-content: space-between; align-items: center; }
  .af-statusBar .pager a { padding: 4px 6px; }

  /* --- rodapé --- */
  :root { --cf-footer-h: 30px; }
  .af-footer { padding: 0 10px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .af-footer .links { margin-left: 0; width: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .af-footer .links a { margin-left: 0; }
}

@media (max-width: 400px) {
  .af-branding .cf-brandName { font-size: 13px; }
  .af-panelMain { padding: 8px 6px 14px; }
  .cf-postList { padding: 0 6px; }
}

/* ---------- Badge de versão na barra de branding ---------- */
.af-branding .app-name .release {
  display: inline-block;
  margin-left: 0;
  padding: 0 6px 1px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 9px;
  background: linear-gradient(rgba(255, 255, 255, .24), rgba(255, 255, 255, .08));
  color: #fff;
  font: bold 9px Tahoma, Verdana, sans-serif;
  letter-spacing: .3px;
  line-height: 13px;
  vertical-align: 1px;
  position: relative;
  top: 1.5px;        /* centro do badge no centro das capitais de CODEFLOW (medido; move 1:1, ao contrário do vertical-align dentro do flex) */
  text-shadow: none;
}

/* ---------- Rodapé: separador vertical, como o da barra de branding ---------- */
.af-footer .sep {
  margin: 0 7px;
  color: #a9b8c7;
}

/* ---------- Barra de branding fixa no topo ao rolar ---------- */
.af-branding {
  position: sticky;
  top: 0;
  z-index: 30;   /* acima do conteúdo e do splitter; abaixo das gavetas (40+), do backdrop (55) e do diálogo (500) */
}

/* ---------- Ícone de info no título da página ---------- */
.af-panelHeader h1 .cf-infoIcon {
  vertical-align: -3px;
  margin-right: 6px;
}

/* ---------- Navegação da série (Previous / Next) ao fim do post ---------- */
.cf-seriesNav {
  margin-top: 12px;
  border: 1px solid #a9b8c7;      /* a af-statusBar só traz border-top; aqui ela está solta, sem panelCollection */
}
.cf-seriesNav .pager:first-child { margin-left: 0; }   /* Previous encostado à esquerda; o auto do 2º empurra o Next à direita */

/* ---------- Bloco de código: calha de números de linha ---------- */
.cf-codeBox .cf-codeBody { display: flex; align-items: stretch; }
.cf-codeBox .cf-lineNums {
  flex: none;
  padding: 7px 7px 7px 9px;
  overflow: visible;
  text-align: right;
  color: #8a99a8;
  background: #f2f5f9;
  border-right: 1px solid #dde5ee;
  user-select: none;
}
.cf-codeBox .cf-codeBody pre:not(.cf-lineNums) { flex: 1; min-width: 0; }

/* ---------- Tabelas soltas (fora de af-panelCollection) recebem a moldura completa ----------
   As células do skin só desenham border-right/border-bottom; a moldura externa vem do
   af-panelCollection. Uma af-table solta ficava sem a linha esquerda e a do topo. */
.af-table:not(.af-panelCollection > .af-table) { border: 1px solid #a9b8c7; }
.af-table:not(.af-panelCollection > .af-table) th:last-child,
.af-table:not(.af-panelCollection > .af-table) td:last-child { border-right-color: #a9b8c7; }
.af-table:not(.af-panelCollection > .af-table) tbody tr:last-child td { border-bottom-color: #a9b8c7; }

/* ---------- Gavetas laterais (post): acompanham a rolagem e ficam abaixo da barra fixa ----------
   No skin base o dock é uma coluna do flex (relative, z 41) e as gavetas são absolute no shell:
   rolam com a página e, com z-index acima dos 30 da barra sticky, tampavam a barra. */
.af-drawerDock {
  position: sticky;
  top: var(--cf-bar-h);          /* altura da barra de branding */
  align-self: flex-start;        /* sem isso o item é esticado e o sticky não tem para onde ir */
  height: calc(100vh - var(--cf-bar-h));
  z-index: 26;                   /* abaixo da barra (30): nem a sombra a invade */
}
.af-drawer {
  position: fixed;
  top: var(--cf-bar-h);
  bottom: 0;
  right: 26px;                   /* largura do dock */
  z-index: 25;
}

/* ---------- Comentários (giscus) ao fim do post ---------- */
.cf-comments { margin-top: 14px; }
.cf-comments .boxBody { padding: 8px 10px 10px; }
.cf-giscus { margin-top: 6px; }
.cf-giscus .giscus, .cf-giscus .giscus-frame { width: 100%; }

/* ---------- Rodapé fixo no fim da janela (espelho da barra de branding no topo) ----------
   position: fixed (e não sticky): sticky depende de nenhum ancestral ter overflow, e no mobile o body
   recebe overflow:hidden com a gaveta aberta — o rodapé "soltava". A altura do rodapé fica numa variável
   para reservar espaço no fim do conteúdo e recuar gavetas e dock. 100dvh acompanha a barra de endereço do celular. */
:root { --cf-footer-h: 24px; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--cf-footer-h);   /* o conteúdo termina acima do rodapé fixo */
}
.af-shell { flex: 1 0 auto; }
.af-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;                          /* mesmo nível da barra do topo */
  box-sizing: border-box;
  height: var(--cf-footer-h);
  align-items: center;
}
.af-drawer { bottom: var(--cf-footer-h); }
.af-drawerDock { height: calc(100vh - var(--cf-bar-h) - var(--cf-footer-h)); height: calc(100dvh - var(--cf-bar-h) - var(--cf-footer-h)); }

/* ---------- Tabelas: rolagem horizontal própria em telas estreitas ---------- */
.cf-tableScroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cf-tableScroll > .af-table { margin-bottom: 0 !important; }
.cf-tableScroll { margin-bottom: 10px; }
@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* sem "font boosting" em células largas */
  .af-panelMain { overflow-x: hidden; }            /* nada pode alargar a página */
  .cf-formula { overflow-x: auto; }

  /* Tabelas com cabeçalho viram cartões: uma linha = um bloco, cada célula com o nome da coluna à esquerda */
  .cf-stack, .cf-stack tbody, .cf-stack tr, .cf-stack td { display: block; }
  .cf-stack thead { display: none; }
  .cf-stack tr { border: 1px solid #a9b8c7; margin-bottom: 8px; background: #fff; }
  .cf-stack tr:last-child { margin-bottom: 0; }
  .cf-stack td {
    display: flex; gap: 8px; padding: 4px 7px;
    border-right: 0; border-bottom: 1px solid #e9edf1; white-space: normal;
  }
  .cf-stack td:last-child { border-bottom: 0; }
  .cf-stack td::before { content: attr(data-label); flex: 0 0 38%; color: #20456b; }
  .cf-stack td[data-label=""]::before { display: none; }
  .cf-stack td.cf-rowTitle {
    background: linear-gradient(#fafcfd, #e4eaf1); border-bottom: 1px solid #a9b8c7;
    font-weight: bold; color: #20456b;
  }
  .cf-stack td.cf-rowTitle::before { font-weight: normal; }
  .cf-stack tbody tr.band td, .cf-stack tbody tr:hover td { background: transparent; }
  .cf-stack tbody tr.band td.cf-rowTitle, .cf-stack tbody tr:hover td.cf-rowTitle { background: linear-gradient(#fafcfd, #e4eaf1); }
  .cf-stack td.num { text-align: left; }
  /* tabelas sem cabeçalho (sem cartões) continuam rolando na horizontal */
  .cf-tableScroll > .af-table:not(.cf-stack) { min-width: 560px; }
}


/* ---------- Seletor de idioma no celular: botão + folha inferior (bottom sheet) ---------- */
.cf-langBtn {
  display: none;                          /* só no mobile: a bandeira do idioma atual abre a folha de idiomas */
  align-items: center; justify-content: center;
  width: 34px; height: 30px; padding: 0;
  font-size: 22px; line-height: 1;
  background: transparent; border: 0; border-radius: 3px;
  vertical-align: middle; cursor: pointer;
}
.cf-langBtn:active { background: rgba(255, 255, 255, .15); }
.cf-sheet .sheetItem .flag { font-size: 18px; line-height: 1; margin-right: 2px; }
.cf-sheetOverlay { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(60, 76, 94, .35); }
.cf-sheetOverlay.open { display: block; }
body.cf-sheetOpen { overflow: hidden; }
.cf-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-top: 1px solid #5c7fa6; box-shadow: 0 -4px 14px rgba(20, 40, 70, .5);
  padding-bottom: env(safe-area-inset-bottom);
  animation: cfSheetUp .18s ease-out;
}
@keyframes cfSheetUp { from { transform: translateY(100%); } to { transform: none; } }
.cf-sheet .sheetTitle {
  padding: 6px 10px; font-weight: bold; color: #173f6b;
  background: linear-gradient(#e7eff8, #c4d6e9); border-bottom: 1px solid #9fb5cc;
}
.cf-sheet .sheetList { list-style: none; margin: 0; padding: 4px 0; max-height: 60vh; overflow-y: auto; }
.cf-sheet .sheetItem { display: flex; align-items: center; gap: 8px; padding: 11px 12px; font-size: 14px; color: #1f3a5a; border-bottom: 1px solid #e6edf4; cursor: pointer; }
.cf-sheet .sheetItem:last-child { border-bottom: 0; }
.cf-sheet .sheetItem:active { background: #e3ecf6; }
.cf-sheet .sheetItem.current { font-weight: bold; color: #173f6b; }
.cf-sheet .sheetItem .chk { width: 16px; text-align: center; color: #2a6db3; }
.cf-sheet .sheetFoot { padding: 6px 8px; background: #eff3f7; border-top: 1px solid #d3dce5; text-align: right; }

/* Meta do artigo: cada par rótulo+valor não quebra no meio ("Autor:" numa linha e o nome na outra) */
.cf-articleMeta .item { white-space: nowrap; }

/* ---------- Gavetas no celular: sem dock lateral; a gaveta Sumário abre em tela cheia pelo botão do cabeçalho ---------- */
@media (max-width: 768px) {
  .af-drawerDock { display: none; }
  .af-drawer {
    left: 0; right: 0; width: auto;
    top: var(--cf-bar-h); bottom: var(--cf-footer-h);
    z-index: 70;                       /* acima do menu lateral (60) */
    border-left: 0; box-shadow: none;
  }
  .af-drawer .drExpand { display: none; }   /* já ocupa a tela toda */
}

/* ---------- Celular: cabeçalho de figura em linha corrida e barra de abas rolável ---------- */
@media (max-width: 768px) {
  /* título da figura em texto corrido: "— Figura 4" acompanha a última palavra em vez de cair sozinho à direita */
  .cf-figure .figHdr { display: block; line-height: 1.35; }
  .cf-figure .figHdr .figNum { white-space: nowrap; }
  .cf-figure .figHdr .af-button.small { float: right; margin-left: 6px; }
  /* abas do artigo: rolam na horizontal em vez de serem cortadas */
  .af-tabBar {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 0 4px;
  }
  .af-tabBar::-webkit-scrollbar { display: none; }
  .af-tab { flex: none; padding-left: 9px; padding-right: 9px; }
}

/* ---------- Dock das gavetas sem painel: só as abas Sumário/Ajuda, coladas na margem direita (todos os posts) ---------- */
.af-drawerDock { background: transparent; border-left: 0; align-items: flex-end; }   /* abas coladas na margem direita */
.af-drawerTab { margin-left: 0; margin-right: -1px; border-right: none; border-radius: 4px 0 0 4px; box-shadow: -1px 1px 2px rgba(20, 40, 70, .12); }

/* ---------- Lista da Home: "Leia mais" numa linha, tags na linha de baixo; no celular só o "Leia mais" ---------- */
.cf-post .postFoot { display: block; }
.cf-post .postTags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
@media (max-width: 768px) {
  .cf-post .postTags { display: none; }
}


/* ---------- Página interna /stack/: sem menu lateral, árvore de tópicos com descrição ---------- */
.af-shell.cf-noSidebar .af-panelMain { padding: 10px 16px 18px; }
.cf-stackIntro { margin: 0 0 10px; }
.cf-stackTabs { margin-top: 0; }
.cf-stackBar { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.cf-stackActions .af-button { margin-left: 4px; }
.cf-stackTree .af-treeRow { align-items: flex-start; padding: 4px 6px; }
.cf-stackTree .af-treeRow .tw { margin-top: 3px; }
.cf-stackTree .af-treeRow svg { flex: none; margin-top: 1px; }
.cf-stackTree .af-treeRow .lbl { white-space: normal; overflow: visible; display: block; line-height: 1.4; }
.cf-stackTree .af-treeRow .lbl b { color: #15497e; }
.cf-stackTree .af-treeRow.topic .lbl b { font-size: 12px; }
.cf-stackTree .af-treeRow .desc { display: block; color: #5b6b7a; }
.cf-stackTree .af-treeNode.closed > ul { display: none; }
.cf-stackTree ul { padding-left: 22px; }
.cf-stackTree > .af-treeNode { margin-bottom: 2px; }

/* ---------- Lista da Home: capa do post (o banner de abertura, capturado em assets/covers/) ---------- */
.cf-post .cover { float: left; width: 176px; margin: 2px 14px 6px 0; border: 1px solid #a9b8c7; line-height: 0; background: #eef3f8; }   /* 112px de altura */
/* o resumo é cortado no mesmo número de linhas que a altura da capa (7 x 16,5px = 115px no desktop) */
.cf-post p.excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; margin-bottom: 8px; }
.cf-post .cover img { display: block; width: 100%; height: auto; }
.cf-post .postFoot { clear: both; }
.cf-post .postFoot .readMore { display: block; text-align: right; }   /* "Leia mais" abaixo do texto, alinhado à direita */
@media (max-width: 768px) {
  .cf-post .cover { width: 144px; margin: 2px 10px 4px 0; }       /* 92px: 5 linhas de 18px */
  .cf-post p.excerpt { -webkit-line-clamp: 5; }
}

/* ---------- Interactive exercises (cf-exercise): editor, blanks, validation result ---------- */
.cf-exercise { border: 1px solid #a9b8c7; background: #fbfcfe; margin: 0 0 14px; }
.cf-exercise .exHdr { display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: linear-gradient(#fafcfd, #e4eaf1); border-bottom: 1px solid #c3cedb; color: #15497e; font-weight: bold; }
.cf-exercise .exHdr .lang { font-weight: normal; color: #6b7a89; }
.cf-exercise .exHdr .exKind { margin-left: auto; font-weight: normal; color: #6b7a89; }
.cf-exercise .exTask { margin: 7px 9px; }
.cf-exercise .exEditor { display: flex; border-top: 1px solid #d4dce4; border-bottom: 1px solid #d4dce4; background: #fff; }
.cf-exercise .exGutter { margin: 0; padding: 7px 6px; min-width: 22px; text-align: right; color: #8a99a8; background: #f2f5f8; border-right: 1px solid #d4dce4; font: 11px Consolas, "Courier New", monospace; line-height: 1.45; user-select: none; overflow: hidden; }
.cf-exercise textarea { flex: 1; margin: 0; padding: 7px 9px; border: 0; outline: none; resize: vertical; min-height: 130px; font: 11px Consolas, "Courier New", monospace; line-height: 1.45; color: #1a1a1a; background: #fff; white-space: pre; overflow: auto; tab-size: 4; }
.cf-exercise textarea:focus { background: #fffdf3; }
.cf-exercise .exBlanks { margin: 0; padding: 7px 9px; border-top: 1px solid #d4dce4; border-bottom: 1px solid #d4dce4; background: #fff; font: 11px Consolas, "Courier New", monospace; line-height: 2; white-space: pre; overflow-x: auto; color: #1a1a1a; }
.cf-exercise .exBlanks input { font: inherit; padding: 0 3px; border: 1px solid #a9b8c7; border-bottom: 2px solid #3d6791; background: #fffdf3; text-align: center; color: #00308f; }
.cf-exercise .exBlanks input:focus { outline: none; border-color: #15497e; background: #fff; }
.cf-exercise .exBlanks input.ok { border-color: #3d8b2f; background: #eef8ea; }
.cf-exercise .exBlanks input.err { border-color: #b3271b; background: #fbeeec; }
.cf-exercise .af-buttonBar { margin: 8px 9px; justify-content: flex-start; }
.cf-exercise .exHint { margin: 0 9px 8px; color: #6b7a89; font-size: 10px; }
.cf-exercise .exResult { margin: 0 9px 9px; border: 1px solid #b0bdcb; background: #fbfcfd; }
.cf-exercise .exResult .msgHead { padding: 4px 8px; background: linear-gradient(#f6f8fa, #e8edf2); border-bottom: 1px solid #d4dce4; font-weight: bold; color: #b00000; }
.cf-exercise .exResult.ok .msgHead { color: #2f6f2f; }
.cf-exercise .exResult ul { margin: 5px 0 6px; padding-left: 12px; list-style: none; }
.cf-exercise .exResult li { margin: 3px 0; }
.cf-exercise .exResult .detail { display: block; margin-left: 15px; color: #6b7a89; font-size: 10px; }
.cf-exercise .exSolution { margin: 0 9px 9px; }

/* ---------- Lab drawer: the post's exercises, with a chip nav and progress ---------- */
.af-drawer.cf-labDrawer { width: 560px; }
.af-drawer.cf-labDrawer.expanded { width: auto; }   /* expandido: da margem esquerda até o dock, como as outras gavetas */
.af-drawer.cf-labDrawer .drBody { padding: 8px 10px 14px; }
.af-drawer .drHeader .labProgress { margin-left: 6px; font-weight: normal; color: #6b7a89; font-size: 10px; }
.cf-labNav { display: flex; flex-wrap: wrap; gap: 4px; margin: -8px -10px 10px; padding: 6px 10px; position: sticky; top: 0; z-index: 1; background: #fff; border-bottom: 1px solid #e4eaf1; }   /* fica visível enquanto a gaveta rola */
.cf-labNav .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid #a9b8c7; border-radius: 10px; background: linear-gradient(#fafcfd, #e4eaf1); color: #15497e; cursor: pointer; font-size: 10px; white-space: nowrap; }
.cf-labNav .chip:hover { border-color: #3d6791; background: #eef4fa; }
.cf-labNav .chip.done { border-color: #3d8b2f; background: #eef8ea; color: #2f6f2f; }
.cf-labNav .chip .num { font-weight: bold; }
.cf-exercise .exHdr .exDone { color: #2f6f2f; font-weight: normal; font-size: 10px; }
.cf-exercise .exHdr .exSection { color: #6b7a89; font-weight: normal; font-size: 10px; text-decoration: none; }
.cf-exercise .exHdr .exSection:hover { color: #15497e; text-decoration: underline; }
.cf-exercise.flash { animation: cfExFlash 1.4s ease-out; }
@keyframes cfExFlash { from { box-shadow: 0 0 0 3px #f2c94c; } to { box-shadow: 0 0 0 0 transparent; } }
/* multiple choice and short text answers */
.cf-exercise .exOptions { list-style: none; margin: 4px 9px 8px; padding: 0; }
.cf-exercise .exOptions li { margin: 3px 0; padding: 3px 6px; border: 1px solid transparent; border-radius: 3px; }
.cf-exercise .exOptions li label { display: flex; align-items: flex-start; gap: 6px; cursor: pointer; }
.cf-exercise .exOptions li input { margin: 2px 0 0; }
.cf-exercise .exOptions li.ok { border-color: #3d8b2f; background: #eef8ea; }
.cf-exercise .exOptions li.err { border-color: #b3271b; background: #fbeeec; }
.cf-exercise .exOptions li.missed { border-color: #d99a17; background: #fff8e1; }
.cf-exercise .exTextRow { display: flex; align-items: center; gap: 6px; margin: 4px 9px 8px; }
.cf-exercise .exText { flex: 1; max-width: 420px; padding: 3px 5px; border: 1px solid #a9b8c7; border-bottom: 2px solid #3d6791; background: #fffdf3; font: 11px Tahoma, Verdana, sans-serif; }
.cf-exercise .exText:focus { outline: none; border-color: #15497e; background: #fff; }
.cf-exercise .exText.ok { border-color: #3d8b2f; background: #eef8ea; }
.cf-exercise .exText.err { border-color: #b3271b; background: #fbeeec; }
/* link from a section of the article to its exercise in the Lab */
a.cf-labLink { display: inline-block; vertical-align: baseline; padding: 1px 7px 2px; line-height: 1.3; border: 1px solid #a9b8c7; border-radius: 3px; background: linear-gradient(#fafcfd, #e4eaf1); color: #15497e; text-decoration: none; font-size: 10px; white-space: nowrap; }   /* inline-block: a base do texto do botão fica na linha do texto ao lado */
a.cf-labLink:hover { border-color: #3d6791; background: #eef4fa; text-decoration: none; }
a.cf-labLink::before { content: ""; display: inline-block; width: 9px; height: 10px; margin-right: 4px; vertical-align: -1px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6 2h4M7 2v4.5L3.2 12.4A1.5 1.5 0 0 0 4.5 14.5h7a1.5 1.5 0 0 0 1.3-2.1L9 6.5V2' fill='%23e8f0fa' stroke='%2335618f' stroke-width='1.4' stroke-linejoin='round'/></svg>") no-repeat center / contain; }
@media (max-width: 768px) { .af-drawer.cf-labDrawer { width: auto; } }

/* ---------- Home: "Latest articles" carousel (Fusion af:carousel spotlight: covers on a stage, the current one in the
   centre and its neighbours receding to the sides; caption below; arrows and position dots in the footer bar) ---------- */
#latestHeading[hidden] { display: none; }
.cf-carousel { margin: 0 0 14px; outline: none; }
.cf-carousel:focus-visible { box-shadow: 0 0 0 2px #88aed6; }
.cf-carousel .boxBody { padding: 0; }
.cf-carousel .crStage { position: relative; height: 222px; overflow: hidden; border-radius: 3px 3px 0 0; background: linear-gradient(#e6edf5, #c5d3e2 70%, #b7c8da); box-shadow: inset 0 1px 0 #f4f8fc, inset 0 -8px 12px -8px rgba(20, 40, 70, .35); }
.cf-carousel .crStage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #8fa6c0; }
.cf-carousel .crCard { position: absolute; left: 50%; top: 50%; width: 300px; border: 1px solid #7d94ac; background: #fff; line-height: 0; box-shadow: 0 6px 14px rgba(20, 40, 70, .35); transition: transform .5s ease, opacity .5s ease; transform-origin: center; }
.cf-carousel .crCard.current { border-color: #2e5378; box-shadow: 0 0 0 2px #cfe2f7, 0 10px 22px rgba(20, 40, 70, .45); cursor: pointer; }
.cf-carousel .crCard:not(.current) { cursor: pointer; filter: saturate(.7); }
.cf-carousel .crCard img { display: block; width: 100%; height: auto; }
.cf-carousel .crNoCover { display: flex; align-items: center; justify-content: center; height: 187px; padding: 12px; line-height: 1.4; color: #15497e; font-weight: bold; text-align: center; }
.cf-carousel.noAnim .crCard, .cf-carousel.noAnim .crCaption { transition: none; }
.cf-carousel .crCaption { max-width: 640px; margin: 0 auto; padding: 10px 14px 8px; text-align: left; opacity: 0; transition: opacity .35s ease; }   /* a centred column: title centred, excerpt left-aligned, Read more at the column's right edge */
.cf-carousel .crCaption.in { opacity: 1; }
.cf-carousel .crTitle { font-size: 14px; font-weight: bold; line-height: 1.3; margin-bottom: 6px; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cf-carousel .crTitle a { color: #15497e; text-decoration: none; }
.cf-carousel .crTitle a:hover { color: #0d3a6b; text-decoration: underline; }
.cf-carousel .crExcerpt { margin: 0 0 4px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #33536f; }
.cf-carousel .readMore { display: block; text-align: right; }
.cf-carousel .crNav { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-top: 1px solid #d4dce4; background: linear-gradient(#f8fafc, #e7edf3); border-radius: 0 0 3px 3px; }
.cf-carousel .crNav .crArrow { min-width: 26px; height: 22px; padding: 0 6px; border: 0; background: none; box-shadow: none; color: #3d6791; font-size: 12px; line-height: 1; cursor: pointer; }   /* bare arrows: no frame, only the blue changes on hover */
.cf-carousel .crNav .crArrow:hover { color: #15497e; background: none; border: 0; box-shadow: none; }
.cf-carousel .crNav .crArrow:active { color: #0d3a6b; }
.cf-carousel .crNav .crArrow:focus-visible { outline: 1px dotted #3d6791; outline-offset: 1px; }
.cf-carousel .crDots { flex: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.cf-carousel .crDot { width: 10px; height: 10px; padding: 0; border: 1px solid #7d94ac; border-radius: 2px; background: linear-gradient(#fafcfd, #dbe5ef); cursor: pointer; }
.cf-carousel .crDot:hover { border-color: #3d6791; }
.cf-carousel .crDot.on { background: linear-gradient(#6b90b6, #2e5378); border-color: #2e5378; }
@media (max-width: 768px) {
  .cf-carousel .crStage { height: 150px; }
  .cf-carousel .crCard { width: 196px; }
  .cf-carousel .crNoCover { height: 122px; }
  .cf-carousel .crCaption { padding: 8px 10px 6px; }
  .cf-carousel .crTitle { font-size: 12px; }
  .cf-carousel .crNav .crArrow { min-width: 36px; height: 28px; font-size: 14px; }
  .cf-carousel .crDot { width: 12px; height: 12px; }
}