/* =========================================================
   Senge — share.senge.io editorial interface (child quark2)
   Brutalista, minimalista, técnica. Ui de índice.
   ========================================================= */

:root {
  --senge-bg: #101212;
  --senge-fg: #e9ece9;
  --senge-muted: #8b9b8b;
  --senge-line: #2a2f2a;
  --senge-accent: #00BF62;
  --senge-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* widths — separar indexação de leitura */
  --senge-shell: 820px;      /* shell comum (home/category) */
  --senge-reading: 700px;    /* largura de leitura (artigo) */

  /* spacing scale */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;
  --sp-6: 96px;

  /* type scale */
  --fs-meta: 0.8rem;         /* ~12.8px metadata */
  --fs-desc: 0.9rem;         /* ~14.4px description */
  --fs-body: 1.0625rem;      /* 17px body */
  --fs-title: 1.1rem;        /* ~17.6px listing title */
}

/* Dark-first invariant: Senge public surface
   Default/root is dark. Quark2/Pico may set data-theme="light" from
   localStorage or browser preference; the Senge child theme treats that as
   non-authoritative for the public identity and keeps the surface dark. */
:root,
:root:not([data-theme]),
:root[data-theme="light"],
:root[data-theme="dark"],
html,
html[data-theme="light"],
html[data-theme="dark"] {
  color-scheme: dark;
  --pico-background-color: var(--senge-bg);
  --pico-color: var(--senge-fg);
  --pico-muted-color: var(--senge-muted);
  --pico-muted-border-color: var(--senge-line);
  --pico-primary: var(--senge-accent);
  --pico-primary-background: var(--senge-accent);
  --pico-primary-border: var(--senge-accent);
  --pico-primary-hover: #35d989;
  --pico-primary-hover-background: #00a956;
  --pico-primary-hover-border: #00a956;
  --pico-primary-focus: rgba(0,191,98,0.32);
  --pico-primary-inverse: #061006;
  --pico-h1-color: var(--senge-fg);
  --pico-h2-color: var(--senge-fg);
  --pico-h3-color: var(--senge-fg);
  --pico-h4-color: var(--senge-fg);
  --pico-h5-color: var(--senge-muted);
  --pico-h6-color: var(--senge-muted);
  --pico-card-background-color: #141716;
  --pico-card-border-color: var(--senge-line);
  --pico-card-sectioning-background-color: #171b17;
  --pico-code-background-color: #1a1f1a;
  --pico-code-color: #dce5dc;
  --pico-table-border-color: var(--senge-line);
  --pico-table-row-stripped-background-color: rgba(255,255,255,0.025);
  --pico-form-element-background-color: #151917;
  --pico-form-element-selected-background-color: #203027;
  --pico-form-element-border-color: var(--senge-line);
  --pico-form-element-color: var(--senge-fg);
  --pico-form-element-placeholder-color: var(--senge-muted);
  --pico-form-element-active-background-color: #101212;
  --pico-form-element-active-border-color: var(--senge-accent);
  --pico-form-element-focus-color: rgba(0,191,98,0.32);
  --pico-dropdown-background-color: #141716;
  --pico-dropdown-border-color: var(--senge-line);
  --pico-dropdown-color: var(--senge-fg);
  --pico-dropdown-hover-background-color: #1a1f1a;
  --pico-modal-overlay-background-color: rgba(5,7,6,0.82);
}

html,
body,
main,
body > main,
#page-wrapper,
#body-wrapper,
#body-wrapper > .container,
.content-item,
.senge-home,
.senge-category,
.senge-article,
section,
article,
footer,
nav {
  background-color: var(--senge-bg);
  color: var(--senge-fg);
}

input,
select,
textarea,
button,
[role="button"] {
  color-scheme: dark;
}

/* Base — override do quado da interface */
body, #page-wrapper { background: var(--senge-bg); color: var(--senge-fg); }
body a { color: var(--senge-accent); }
.content-item, .senge-home, .senge-category { max-width: var(--senge-shell); margin: 0 auto; }
.senge-article { max-width: var(--senge-reading); margin: 0 auto; }

/* Header — fixo escuro, sem fundo transparente */
#header { background: var(--senge-bg); border-bottom: 1px solid var(--senge-line); }
.navbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
.navbar-brand { display: flex; align-items: center; }
.navbar-brand img { height: 28px; width: auto; display: block; }
.desktop-menu { display: flex; }

/* Nav — só diretórios, monospace labels.
   Seletores mais específicos que o `.dropmenu ul { display:block }` do
   theme.css upstream (que empilhava os itens verticalmente -> header 142px). */
.dropmenu .senge-nav-list { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.senge-nav-list a {
  color: var(--senge-fg); text-decoration: none; font-family: var(--senge-mono);
  font-size: 0.85rem; letter-spacing: 0.02em; padding: 0.25rem 0;
}
.senge-nav-list a:hover, .senge-nav-list a[aria-current] { color: var(--senge-accent); text-decoration: underline; text-underline-offset: 4px; }

/* Logo no mobile-logo */
.mobile-logo img { height: 24px; width: auto; }

/* Labels / index numbers */
.senge-label { font-family: var(--senge-mono); color: var(--senge-accent); font-size: 0.8rem; letter-spacing: 0.08em; }
.mono { font-family: var(--senge-mono); }

/* Home */
.senge-home { padding: 3rem 0 4rem; }
.senge-intro { margin-bottom: 3.5rem; }
.senge-headline {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.08; font-weight: 700;
  margin: 0.75rem 0 1.25rem; letter-spacing: -0.02em;
}
.senge-intro-desc { color: var(--senge-muted); font-size: 1.02rem; line-height: 1.65; max-width: 56ch; }

.senge-dirs { margin-bottom: 3.5rem; }
.senge-index-head {
  font-family: var(--senge-mono); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.06em;
  color: var(--senge-muted); text-transform: uppercase; padding-bottom: 0.75rem; border-bottom: 1px solid var(--senge-line);
}
.senge-dir-list { border-top: 1px solid var(--senge-line); }
.senge-dir-row {
  display: grid; grid-template-columns: 3rem 1fr auto 1.5rem; align-items: center; gap: 1rem;
  padding: 1.25rem 0.25rem; border-bottom: 1px solid var(--senge-line); color: var(--senge-fg);
  text-decoration: none;
}
.senge-dir-row:hover { background: rgba(0,191,98,0.05); }
.senge-dir-no { color: var(--senge-muted); }
.senge-dir-title { font-size: 1.15rem; font-weight: 600; }
.senge-dir-desc { display: block; color: var(--senge-muted); font-size: 0.92rem; margin-top: 0.2rem; }
.senge-dir-count { color: var(--senge-muted); }
.senge-dir-arrow, .senge-recent-arrow, .senge-cat-arrow { color: var(--senge-accent); }

/* Recents */
.senge-recents { margin-bottom: 3.5rem; }
.senge-recent-row {
  display: grid; grid-template-columns: 8.5rem 6.5rem 1fr 1.5rem; align-items: baseline; gap: 1rem;
  padding: 0.9rem 0.25rem; border-bottom: 1px solid var(--senge-line); color: var(--senge-fg); text-decoration: none;
}
.senge-recent-row:hover { background: rgba(0,191,98,0.05); }
.senge-recent-date, .senge-recent-type { color: var(--senge-muted); font-size: 0.8rem; }
.senge-recent-title { font-weight: 600; }
.senge-recent-desc { display: block; color: var(--senge-muted); font-size: var(--fs-desc); line-height: 1.45; margin-top: 0.2rem; }

/* Category (auto-listing) */
.senge-category { padding: 2.5rem 0 4rem; }
.senge-breadcrumb { font-family: var(--senge-mono); font-size: 0.8rem; color: var(--senge-muted); margin-bottom: 2.5rem; }
.senge-breadcrumb a { color: var(--senge-muted); text-decoration: none; }
.senge-breadcrumb a:hover { color: var(--senge-accent); }
.senge-breadcrumb .sep { margin: 0 0.35rem; color: var(--senge-line); }
.senge-cat-title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin: 0.4rem 0 0.5rem; }
.senge-cat-desc { color: var(--senge-muted); max-width: 60ch; line-height: 1.6; }
.senge-cat-list { margin-top: 2rem; border-top: 1px solid var(--senge-line); }
.senge-cat-row {
  display: grid; grid-template-columns: 7.5rem 1fr 1.5rem; align-items: baseline; gap: 1rem;
  padding: 1.15rem 0.25rem; border-bottom: 1px solid var(--senge-line); color: var(--senge-fg); text-decoration: none;
}
.senge-cat-row:hover { background: rgba(0,191,98,0.05); }
.senge-cat-date { color: var(--senge-muted); font-size: var(--fs-meta); }
.senge-cat-item-title { font-size: var(--fs-title); font-weight: 600; line-height: 1.35; }
.senge-cat-item-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--senge-muted); font-size: var(--fs-desc); margin-top: 0.2rem; line-height: 1.5;
}
.senge-empty { color: var(--senge-muted); padding: 1.5rem 0.25rem; }

/* Article */
.senge-article { padding: 2.5rem 0 4rem; }
.senge-article-head { margin-bottom: var(--sp-4); }
.senge-article-title { font-size: clamp(1.7rem, 3.6vw, 2.3rem); line-height: 1.15; margin: 0.5rem 0; }
.senge-article-desc { color: var(--senge-muted); font-size: 1.05rem; line-height: 1.65; max-width: 60ch; margin-bottom: 0; }
.senge-article-body { font-size: var(--fs-body); line-height: 1.65; max-width: var(--senge-reading); }
/* upstream `p, li { font-size:1rem; line-height:1.7 }` vence a herança — reafirmar */
.senge-article-body p, .senge-article-body li { font-size: var(--fs-body); line-height: 1.65; }
.senge-article-body h1, .senge-article-body h2, .senge-article-body h3 { line-height: 1.3; margin: 2.2em 0 0.7em; }
.senge-article-body h2 { font-size: 1.45rem; border-bottom: 1px solid var(--senge-line); padding-bottom: 0.4rem; }
.senge-article-body h3 { font-size: 1.18rem; }
.senge-article-body p { margin: 0 0 1.15em; }
.senge-article-body code { font-family: var(--senge-mono); background: #1a1f1a; padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.9em; }
.senge-article-body pre { background: #0c0f0c; border: 1px solid var(--senge-line); padding: 1rem; overflow-x: auto; border-radius: 4px; line-height: 1.6; margin: 1.4em 0; }
.senge-article-body pre code { background: none; padding: 0; }
.senge-article-body blockquote { border-left: 3px solid var(--senge-accent); margin: 1.4em 0; padding: 0.4em 1em; color: var(--senge-muted); }
.senge-article-body ul, .senge-article-body ol { padding-left: 1.4em; margin: 0 0 1.15em; }
.senge-article-body table { border-collapse: collapse; width: 100%; margin: 1.4em 0; }
.senge-article-body th, .senge-article-body td { border: 1px solid var(--senge-line); padding: 0.5em 0.7em; text-align: left; }
.senge-article-body th { background: #171b17; }
.senge-article-back { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--senge-line); }
.senge-article-back a { color: var(--senge-accent); text-decoration: none; font-family: var(--senge-mono); font-size: 0.9rem; }
.senge-article-back a:hover { text-decoration: underline; }

/* Footer */
.senge-footer { background: var(--senge-bg); border-top: 1px solid var(--senge-line); padding: 1.6rem 0; }
.senge-footer-inner {
  max-width: var(--senge-shell); margin: 0 auto; font-family: var(--senge-mono); font-size: 0.8rem;
  color: var(--senge-muted); display: flex; gap: 0.5rem;
}
.senge-footer-brand { color: var(--senge-accent); }
.senge-footer-copy { margin-left: auto; }

/* Mobile */
@media (max-width: 768px) {
  .desktop-menu { display: none; }
  .senge-recent-row { grid-template-columns: 1fr 1.5rem; }
  .senge-recent-date, .senge-recent-type { grid-column: 1; }
  .senge-recent-body { grid-column: 1; }
  .senge-cat-row { grid-template-columns: 1fr 1.5rem; }
  .senge-cat-date { grid-column: 1; }
  .senge-cat-body { grid-column: 1; }
  .senge-cat-arrow { grid-column: 2; grid-row: 1; }
  .senge-dir-row { grid-template-columns: 2rem 1fr 1.5rem; }
  .senge-article-body, .senge-article-body p, .senge-article-body li { font-size: 1rem; }
}
@media (max-width: 390px) {
  .senge-dir-desc { font-size: 0.85rem; }
  .senge-headline { font-size: 1.6rem; }
}
/* =========================================================
   Consentimento (LGPD) — banner e painel de preferências
   ========================================================= */
.consent[hidden], .consent-prefs[hidden] { display: none; }
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--senge-bg); color: var(--senge-fg);
  border-top: 1px solid var(--senge-accent);
  box-shadow: 0 -4px 16px rgba(0,0,0,.35);
  max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
}
.consent-inner { max-width: var(--senge-shell); margin: 0 auto; padding: var(--sp-2); }
.consent-main { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.consent-copy { flex: 1 1 24rem; min-width: 0; }
.consent-title { font-size: 1rem; margin: 0 0 2px; color: var(--senge-fg); text-transform: none; letter-spacing: normal; }
.consent-title::before { content: none; display: none; }
.consent-title:focus { outline: 2px solid var(--senge-accent); outline-offset: 2px; }
.consent-text { font-size: var(--fs-desc); line-height: 1.45; margin: 0; color: var(--senge-fg); }
.consent-text a { text-decoration: underline; }
.consent-actions { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.consent-btn {
  width: auto; margin: 0; min-height: 40px; padding: 8px 14px; cursor: pointer;
  font: inherit; font-size: var(--fs-desc); font-weight: 600;
  background: transparent; color: var(--senge-fg);
  border: 2px solid var(--senge-accent); border-radius: 2px;
}
.consent-btn[data-consent="reject"], .consent-btn[data-consent="accept"] { min-width: 10rem; }
.consent-btn:hover { background: rgba(0,191,98,.16); }
.consent-btn:focus-visible, .senge-footer-link:focus-visible, .consent-opt input:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.consent-btn-link { border-color: transparent; color: var(--senge-muted); text-decoration: underline; }
.consent-prefs { margin-top: var(--sp-2); }
.consent-prefs fieldset { border: 1px solid var(--senge-line); padding: var(--sp-2); margin: 0 0 var(--sp-2); }
.consent-prefs legend { font-size: var(--fs-meta); color: var(--senge-muted); padding: 0 var(--sp-1); }
.consent-opt { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-desc); line-height: 1.45; margin: 0 0 var(--sp-2); }
.consent-opt:last-child { margin-bottom: 0; }
.consent-opt input { width: 1.1rem; height: 1.1rem; margin-top: 3px; flex: 0 0 auto; accent-color: var(--senge-accent); }
.consent-prefs .consent-btn { flex: none; }
.senge-footer-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--senge-muted); text-decoration: underline; cursor: pointer; }
.senge-footer-link:hover { color: var(--senge-accent); }
@media (max-width: 720px) {
  .consent-main { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .consent-copy { flex: 0 0 auto; }
  .consent-btn[data-consent="reject"], .consent-btn[data-consent="accept"] { flex: 1 1 0; }
  .consent-btn-link { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: no-preference) { .consent { animation: consent-in .2s ease-out; } }
@keyframes consent-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.senge-article-body table { display: block; overflow-x: auto; max-width: 100%; }

/* ---- Sumario automatico (page-toc): colapsavel, compacto, com icones ---- */
.senge-toc-wrap { margin: 1.5rem 0; border-top: 1px solid var(--senge-line);
  border-bottom: 1px solid var(--senge-line); }
.senge-toc-summary { display: flex; align-items: center; gap: .5rem;
  min-height: 48px; padding: .35rem 0; cursor: pointer; list-style: none; }
.senge-toc-summary::-webkit-details-marker { display: none; }
/* PicoCSS tambem estiliza este ::after (chevron SVG + float): desligado, icones sao SVG inline */
.senge-toc-summary::after { content: none; background: none; float: none; }
/* PicoCSS adiciona 16px de margin-bottom no summary quando aberto */
.senge-toc-wrap[open] > .senge-toc-summary { margin-bottom: 0; }
.senge-toc-summary:focus-visible { outline: 2px solid var(--senge-accent); outline-offset: 3px; }
.senge-toc-icon, .senge-toc-chevron { flex: 0 0 auto; color: var(--senge-muted);
  transition: color .15s ease, transform .15s ease; }
.senge-toc-icon { margin-top: -1px; }
.senge-toc-chevron { margin-left: auto; }
.senge-toc-title { margin: 0; font-size: .75rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--senge-fg); }
.senge-toc-count { margin-left: .1rem; font-size: .75rem; color: var(--senge-muted); }
/* estado aberto: icone da esquerda ganha a cor de destaque, seta gira */
.senge-toc-wrap[open] .senge-toc-icon { color: var(--senge-accent); }
.senge-toc-wrap[open] .senge-toc-chevron { transform: rotate(180deg); color: var(--senge-fg); }
.senge-toc-summary:hover .senge-toc-title { color: var(--senge-accent); }
.senge-toc { display: block; padding: .15rem 0 .8rem; }
.senge-toc ol:first-of-type, .senge-toc ol:last-of-type { margin-left: 0; margin-right: 0; }
/* tema: p,li { line-height: 1.7 } | Pico: margin negativa no link -> ambos neutralizados */
.senge-toc-list, .senge-toc-sub { margin: 0; padding: 0; list-style: none; }
.senge-toc-list > li, .senge-toc-sub > li { display: block; margin: 0; padding: 0; line-height: 1; }
/* Anatomia da linha de indice do site (.senge-cat-row): rotulo + seta em accent.
   NAO confundir os tres elementos deste bloco:
     .senge-toc-icon    -> marca o BLOCO como sumario (fica no <summary>)
     .senge-toc-chevron -> indica ABERTO/FECHADO (fica no <summary>)
     .senge-toc-arrow   -> marca cada ITEM como link (fica dentro do <a>)
   Os dois primeiros nao sao afetados por este bloco de regras. */
.senge-toc-list > li > a, .senge-toc-sub > li > a {
  display: flex; align-items: baseline; gap: .5rem; margin: 0; border-radius: 2px; }
.senge-toc-label { flex: 1 1 auto; min-width: 0; }
.senge-toc-arrow { flex: 0 0 auto; color: var(--senge-accent); opacity: .55; font-size: .9em; }
.senge-toc-list > li > a { padding: .34rem 0; font-size: .9375rem;
  line-height: 1.35; color: var(--senge-fg); }
.senge-toc-sub > li > a { padding: .18rem 0; font-size: .875rem;
  line-height: 1.3; color: var(--senge-muted); }
/* hover do sistema: tinta accent + sublinhado, como .senge-cat-row:hover e .senge-nav-list a:hover */
.senge-toc-list > li > a:hover, .senge-toc-list > li > a:focus-visible,
.senge-toc-sub > li > a:hover, .senge-toc-sub > li > a:focus-visible {
  background: rgba(0,191,98,.05); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.senge-toc-list > li > a:hover .senge-toc-arrow,
.senge-toc-list > li > a:focus-visible .senge-toc-arrow,
.senge-toc-sub > li > a:hover .senge-toc-arrow,
.senge-toc-sub > li > a:focus-visible .senge-toc-arrow { opacity: 1; }
.senge-toc-sub { margin: 0 0 .4rem .1rem; padding-left: .75rem;
  border-left: 1px solid var(--senge-line); }

.senge-toc a { text-decoration: none; }
.senge-toc a:hover, .senge-toc a:focus-visible { color: var(--senge-accent); }

.senge-toc a:focus-visible { outline: 2px solid var(--senge-accent); outline-offset: 2px; }
/* ancoras: o cabecalho fixo cobriria o titulo ao pular para a secao */
.senge-article-body h2, .senge-article-body h3 {
  scroll-margin-top: calc(var(--q2-header-height, 72px) + .75rem); }
.senge-anchor { opacity: .3; margin-left: .3em; text-decoration: none; }
h2:hover .senge-anchor, h3:hover .senge-anchor, .senge-anchor:focus-visible { opacity: 1; }
@media (max-width: 720px) {
  .senge-toc-wrap { margin: 1.15rem 0; }
  .senge-toc-wrap[open] .senge-toc { max-height: 52vh; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  /* alvo de toque confortavel no celular */
  .senge-toc-list > li > a { padding: .5rem 0; }
  .senge-toc-sub > li > a { padding: .3rem 0; }
}