/* EKNT Interaction PASS · Editorial indices v1 · 07/11/2026
   Scope: existing reading TOCs, master chapterbar and article-library filter.
   This file is loaded ONLY on the isolated preview branch and relevant routes.
   Functional tokens, NOT a new global palette. */
body{
  --ek-ix-surface:#f5f1eb;
  --ek-ix-ink:#292d2e;
  --ek-ix-muted:#6b6862;
  --ek-ix-line:#cfc9bf;
  --ek-ix-hover:rgba(41,45,46,.065);
  --ek-ix-focus:#96523e;
  --ek-ix-active:#e9e4dc;
}
:root[data-ek-theme="dark"] body{
  --ek-ix-surface:#292d2e;
  --ek-ix-ink:#f5f1eb;
  --ek-ix-muted:#d0c8be;
  --ek-ix-line:#6a6a66;
  --ek-ix-hover:rgba(245,241,235,.10);
  --ek-ix-focus:#f1b79d;
  --ek-ix-active:#434647;
}
/* A reading index is a small, self-contained disclosure, not a new H1.
   It adopts the reading-column width but never overflows the parent. */
body .ek-reading-index{
  box-sizing:border-box!important;
  display:block!important;
  width:min(100%,760px)!important;
  max-width:100%!important;
  margin:clamp(18px,3vw,30px) auto!important;
  padding:0!important;
  border:1px solid var(--ek-ix-line)!important;
  border-radius:16px!important;
  background:var(--ek-ix-surface)!important;
  color:var(--ek-ix-ink)!important;
  box-shadow:none!important;
  isolation:isolate;
  overflow:hidden;
}
body .ek-reading-index>summary.ek-reading-index-trigger{
  display:flex!important;align-items:center;justify-content:flex-start;
  gap:clamp(10px,2vw,18px);
  min-height:58px;padding:15px 20px!important;
  box-sizing:border-box;list-style:none;
  color:var(--ek-ix-ink)!important;
  background:transparent!important;border:0!important;
  border-radius:15px!important;
  cursor:pointer;
  font-family:var(--ek-font-body,"Onest",system-ui,sans-serif)!important;
  font-size:15px!important;font-weight:600!important;line-height:1.4!important;
  text-align:left;
  transition:background-color .16s ease;
}
body .ek-reading-index>summary::-webkit-details-marker{display:none}
body .ek-reading-index>summary::marker{content:""}
body .ek-reading-index .ek-reading-index-title{
  min-width:0;flex:1;
  font-size:15px!important;line-height:1.4!important;
  letter-spacing:0!important;text-transform:none!important;
  font-family:inherit!important;font-weight:600!important;
}
body .ek-reading-index .ek-reading-index-count{
  flex:none;white-space:nowrap;font:400 12px/1.4 var(--ek-font-body,system-ui,sans-serif)!important;
  color:var(--ek-ix-muted)!important;letter-spacing:0!important;
}
body .ek-reading-index .ek-reading-index-chevron{
  display:block;width:18px;height:18px;flex:none;
  fill:none;stroke:var(--ek-ix-ink);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .16s ease;
}
body .ek-reading-index[open] .ek-reading-index-chevron{transform:rotate(180deg)}
@media(hover:hover) and (pointer:fine){
 body .ek-reading-index>summary:hover{background:var(--ek-ix-hover)!important}
}
body .ek-reading-index>summary:focus:not(:focus-visible){outline:none!important}
body .ek-reading-index>summary:focus-visible{
  outline:2px solid var(--ek-ix-focus)!important;outline-offset:-4px!important;
}
body .ek-reading-index[open]>summary{
  border-bottom:1px solid var(--ek-ix-line)!important;
  border-radius:15px 15px 0 0!important;
}
body .ek-reading-index :is(.ek-reading-index-internal-heading){
  display:none!important;
}
/* Single column on phones, two on wide screens. Content has internal
   scroll when many chapters exist: no huge 9-chapter wall on screen. */
body.ek-integrated[data-route] main .ek-reading-index>nav.ek-section-index,
body.ek-integrated .ek-reading-index>nav.ek-section-index,
body.ek-long-article .ek-reading-index>nav.toc{
  box-sizing:border-box!important;
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;max-width:none!important;
  max-height:min(58svh,480px)!important;overflow-y:auto!important;
  overscroll-behavior:contain;
  padding:10px 18px 17px!important;margin:0!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  color:var(--ek-ix-ink)!important;
  gap:0 20px!important;
}
body.ek-integrated[data-route] main .ek-reading-index>nav.ek-section-index::before{
  content:none!important;display:none!important;
}
body .ek-reading-index>nav.toc ol{
  grid-column:1/-1;list-style:none!important;
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0 20px!important;padding:0!important;margin:0!important;
}
body .ek-reading-index>nav.toc li{min-width:0}
body.ek-integrated[data-route] main .ek-reading-index>nav.ek-section-index>a,
body .ek-reading-index>nav.toc a{
  min-width:0;min-height:44px!important;
  padding:11px 12px!important;
  box-sizing:border-box!important;
  border:0!important;border-radius:10px!important;
  background:transparent!important;color:var(--ek-ix-ink)!important;
  box-shadow:none!important;text-decoration:none!important;
  font-family:var(--ek-font-body,system-ui,sans-serif)!important;
  font-size:14px!important;font-weight:500!important;
  line-height:1.45!important;
}
body.ek-integrated[data-route] main .ek-reading-index>nav.ek-section-index>a::before,
body .ek-reading-index>nav.toc a span{
  color:var(--ek-ix-muted)!important;
}
@media(hover:hover) and (pointer:fine){
 body.ek-integrated[data-route] main .ek-reading-index>nav.ek-section-index>a:hover,
 body .ek-reading-index>nav.toc a:hover{
   background:var(--ek-ix-hover)!important;
   color:var(--ek-ix-ink)!important;text-decoration:none!important;
 }
}
body.ek-integrated[data-route] main .ek-reading-index>nav.ek-section-index>a:focus-visible,
body .ek-reading-index>nav.toc a:focus-visible{
  outline:2px solid var(--ek-ix-focus)!important;outline-offset:-2px!important;
  background:var(--ek-ix-hover)!important;
}
@media(max-width:700px){
 body .ek-reading-index{
   width:100%!important;margin:18px auto 28px!important;border-radius:16px!important;
 }
 body .ek-reading-index>summary.ek-reading-index-trigger{min-height:56px;padding:14px 16px!important}
 body.ek-integrated[data-route] main .ek-reading-index>nav.ek-section-index,
 body.ek-integrated .ek-reading-index>nav.ek-section-index,
 body.ek-long-article .ek-reading-index>nav.toc{
   display:grid!important;grid-template-columns:minmax(0,1fr)!important;
   padding:8px 10px 12px!important;max-height:min(54svh,420px)!important;
 }
 body .ek-reading-index>nav.toc ol{
   grid-template-columns:minmax(0,1fr)!important;
 }
 body .ek-reading-index .ek-reading-index-count{font-size:11px!important}
}
/* The existing MASTER article already has a working sticky details chapterbar.
   Align its control/panel to this language, preserving sticky positioning and
   its dynamic current-chapter title. No second TOC or extra H1. */
body.ek-blog-pilot-v2 .ek-blog-chapterbar{
  background:var(--ek-ix-surface)!important;
  color:var(--ek-ix-ink)!important;
  border-bottom:1px solid var(--ek-ix-line)!important;
}
body.ek-blog-pilot-v2 .ek-blog-chapterbar-inner{
  width:min(100%,760px)!important;max-width:100%!important;
  box-sizing:border-box;margin-inline:auto!important;
}
body.ek-blog-pilot-v2 .ek-blog-chapters>summary{
  color:var(--ek-ix-ink)!important;
  font-family:var(--ek-font-body,system-ui,sans-serif)!important;
  min-height:54px!important;
}
body.ek-blog-pilot-v2 .ek-blog-chapters>summary:focus-visible{
  outline:2px solid var(--ek-ix-focus)!important;outline-offset:-3px!important;
}
body.ek-blog-pilot-v2 .ek-blog-chapters>ol{
  background:var(--ek-ix-surface)!important;
  color:var(--ek-ix-ink)!important;
  border:1px solid var(--ek-ix-line)!important;
  border-radius:0 0 14px 14px!important;
  box-shadow:none!important;
}
body.ek-blog-pilot-v2 .ek-blog-chapters>ol a{
  color:var(--ek-ix-ink)!important;
  border-radius:10px!important;
  font-family:var(--ek-font-body,system-ui,sans-serif)!important;
}
body.ek-blog-pilot-v2 .ek-blog-chapters>ol a span{
  color:var(--ek-ix-muted)!important;
}
body.ek-blog-pilot-v2 .ek-blog-chapters>ol a:is(:hover,:focus-visible),
body.ek-blog-pilot-v2 .ek-blog-chapters>ol a[aria-current="location"]{
  background:var(--ek-ix-hover)!important;
  color:var(--ek-ix-ink)!important;
}
body.ek-blog-pilot-v2 .ek-blog-chapters>ol a:focus-visible{
  outline:2px solid var(--ek-ix-focus)!important;outline-offset:-2px!important;
}
/* /articulos/ is a library of readings, not a long-form TOC: its Topic filter
   remains visible and functional. Only its popover/option visual language is
   aligned. Never hide the directory under an artificial disclosure. */
body.ek-articulos-page .catalog-tools .ek-select-trigger,
body.ek-articulos-page .catalog-tools .ek-select-menu{
  background:var(--ek-ix-surface)!important;
  color:var(--ek-ix-ink)!important;
  border-color:var(--ek-ix-line)!important;
  font-family:var(--ek-font-body,system-ui,sans-serif)!important;
}
body.ek-articulos-page .catalog-tools .ek-select-trigger{
  border-radius:12px!important;min-height:44px!important;
}
body.ek-articulos-page .catalog-tools .ek-select-menu{
  border-radius:12px!important;
}
body.ek-articulos-page .catalog-tools :is(.ek-select-trigger,.ek-select-menu button):focus-visible{
  outline:2px solid var(--ek-ix-focus)!important;outline-offset:2px!important;
}
body.ek-articulos-page .catalog-tools .ek-select-menu [aria-selected="true"]{
  background:var(--ek-ix-active)!important;
  color:var(--ek-ix-ink)!important;
}
@media(prefers-reduced-motion:reduce){
 body .ek-reading-index>summary,
 body .ek-reading-index .ek-reading-index-chevron{transition:none!important}
}
/* Correct same-page anchor landing under the sticky header/chapterbar. */
body :is(.reading,.ek-section,.ek-chapter)>[id]{
  scroll-margin-top:clamp(90px,12vh,154px);
}


/* Existing service/problem TOCs already have one native disclosure. The
   canonical visual card is that SAME details, not a second wrapper. */
body.ek-integrated[data-route] main nav.ek-section-index.ek-reading-index-host{
  box-sizing:border-box!important;
  display:block!important;
  width:min(100%,760px)!important;max-width:100%!important;
  margin:clamp(18px,3vw,30px) auto!important;
  padding:0!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
}
body.ek-integrated[data-route] main nav.ek-section-index.ek-reading-index-host::before{
  content:none!important;display:none!important;
}
body.ek-integrated[data-route] main nav.ek-section-index.ek-reading-index-host>.ek-reading-index--native{
  width:100%!important;
  margin:0!important;
  padding:0!important;
}
/* One spacing contract for all native editorial indices. */
body.ek-integrated main nav.ek-section-index.ek-reading-index-host>.ek-reading-index--native>summary.ek-reading-index-trigger{
 box-sizing:border-box!important;
 padding:16px 24px!important;
 text-align:left!important;
 gap:14px!important;
}
@media(max-width:700px){
 body.ek-integrated main nav.ek-section-index.ek-reading-index-host>.ek-reading-index--native>summary.ek-reading-index-trigger{
  padding:15px 18px!important;
 }
}
body.ek-integrated[data-route] main nav.ek-section-index.ek-reading-index-host>.ek-reading-index--native>ol.ek-index-list{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0 16px!important;
  width:100%!important;max-width:none!important;
  max-height:min(58svh,480px)!important;
  overflow-y:auto!important;overscroll-behavior:contain;
  list-style:none!important;
  margin:0!important;padding:8px 12px 15px!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;
}
body.ek-integrated[data-route] main nav.ek-section-index.ek-reading-index-host>.ek-reading-index--native>ol.ek-index-list>li{
  min-width:0!important;list-style:none!important;
  margin:0!important;padding:0!important;
}
body.ek-integrated[data-route] main nav.ek-section-index.ek-reading-index-host>.ek-reading-index--native>ol.ek-index-list a{
  display:flex!important;align-items:center!important;
  min-height:44px!important;
  box-sizing:border-box!important;
  padding:11px 12px!important;margin:0!important;
  border:0!important;border-radius:10px!important;
  background:transparent!important;
  color:var(--ek-ix-ink)!important;
  font:500 14px/1.45 var(--ek-font-body,system-ui,sans-serif)!important;
  text-decoration:none!important;
}
@media(hover:hover) and (pointer:fine){
 body.ek-integrated[data-route] main nav.ek-section-index.ek-reading-index-host>.ek-reading-index--native>ol.ek-index-list a:hover{
   color:var(--ek-ix-ink)!important;
   background:var(--ek-ix-hover)!important;
 }
}
body.ek-integrated[data-route] main nav.ek-section-index.ek-reading-index-host>.ek-reading-index--native>ol.ek-index-list a:focus-visible{
  outline:2px solid var(--ek-ix-focus)!important;
  outline-offset:-2px!important;
  background:var(--ek-ix-hover)!important;
}
@media(max-width:700px){
 body.ek-integrated[data-route] main nav.ek-section-index.ek-reading-index-host{
   width:100%!important;margin:18px auto 28px!important;
 }
 body.ek-integrated[data-route] main nav.ek-section-index.ek-reading-index-host>.ek-reading-index--native>ol.ek-index-list{
   grid-template-columns:minmax(0,1fr)!important;
   max-height:min(54svh,420px)!important;
   padding:8px 10px 12px!important;
 }
}


/* Desktop long-form article lead currently uses 678px summary + 432px TOC,
   while reading text is ~720px. Align BOTH to the real reading column after
   progressive disclosure; no 430px narrow 2-column list of long headings.
   Master article has its own chapterbar and is intentionally excluded. */
body.ek-long-article:not(.ek-blog-pilot-v2) .lead-grid:has(>.ek-reading-index){
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:min(100%,720px)!important;
  max-width:720px!important;
  gap:clamp(16px,3vw,28px)!important;
  margin-left:auto!important;margin-right:auto!important;
}
body.ek-long-article:not(.ek-blog-pilot-v2) .lead-grid>.ek-reading-index{
  grid-column:1/-1!important;
  width:100%!important;max-width:720px!important;
  justify-self:stretch!important;
  margin:0 auto clamp(16px,4vw,42px)!important;
}
body.ek-long-article:not(.ek-blog-pilot-v2) .lead-grid:has(>.ek-reading-index)>.summary{
  min-width:0!important;width:100%!important;max-width:720px!important;
}


/* Master chapterbar still inherits an older id-specific !important paper
   background. Override its actual owner at the same specificity, then force
   the dark mode pair as one atomic surface (ink & background together). */
body.ek-blog-pilot-v2 main#articulo>.ek-blog-chapterbar{
  background:var(--ek-ix-surface)!important;
  color:var(--ek-ix-ink)!important;
  border-bottom:1px solid var(--ek-ix-line)!important;
}
:root[data-ek-theme="dark"] body.ek-blog-pilot-v2 main#articulo>.ek-blog-chapterbar,
:root[data-ek-theme="dark"] body.ek-blog-pilot-v2 main#articulo>.ek-blog-chapterbar .ek-blog-chapterbar-inner{
  background:#292d2e!important;
  color:#f5f1eb!important;
  border-bottom-color:#6a6a66!important;
}
:root[data-ek-theme="dark"] body.ek-blog-pilot-v2 main#articulo>.ek-blog-chapterbar .ek-blog-chapters>summary,
:root[data-ek-theme="dark"] body.ek-blog-pilot-v2 main#articulo>.ek-blog-chapterbar .ek-blog-chapters>summary :is(span,svg){
  color:#f5f1eb!important;
  stroke:currentColor!important;
}


/* /articulos/ CURRENT UI (F11), not the archived .catalog-tools selector:
   one search entry + topic chips, with real mobile sheet. No extra index. */
body.ek-articulos-page .ek-articulos-tools .ek-article-search-launch{
  border:1px solid var(--ek-ix-line)!important;
  color:var(--ek-ix-ink)!important;
  background:var(--ek-ix-surface)!important;
  border-radius:14px!important;
  min-height:56px!important;
  padding:14px 18px!important;
  box-sizing:border-box!important;
  box-shadow:none!important;
}
@media(hover:hover) and (pointer:fine){
 body.ek-articulos-page .ek-articulos-tools .ek-article-search-launch:hover{
  background:var(--ek-ix-hover)!important;
 }
}
body.ek-articulos-page .ek-articulos-tools .ek-article-search-launch:focus-visible,
body.ek-articulos-page .ek-article-search .symptom-chips button.chip:focus-visible{
  outline:2px solid var(--ek-ix-focus)!important;
  outline-offset:2px!important;
}
body.ek-articulos-page .ek-article-search .symptom-chips button.chip{
  background:transparent!important;
  color:var(--ek-ix-ink)!important;
  border:1px solid var(--ek-ix-line)!important;
  border-radius:999px!important;
  min-height:44px!important;
  padding:10px 16px!important;
  box-shadow:none!important;
}
body.ek-articulos-page .ek-article-search .symptom-chips button.chip[aria-pressed="true"]{
  background:var(--ek-ix-active)!important;
  color:var(--ek-ix-ink)!important;
  border-color:var(--ek-ix-line)!important;
}
@media(hover:hover) and (pointer:fine){
 body.ek-articulos-page .ek-article-search .symptom-chips button.chip:not([aria-pressed="true"]):hover{
  background:var(--ek-ix-hover)!important;
 }
}
body.ek-articulos-page .ek-article-search-sheet{
  background:var(--ek-ix-surface)!important;
  color:var(--ek-ix-ink)!important;
  border-color:var(--ek-ix-line)!important;
}
body.ek-articulos-page .ek-article-search-sheet :is(.ek-article-sheet-head h2,.symptom-chips-label){
  color:var(--ek-ix-ink)!important;
}
body.ek-articulos-page .ek-articulos-rail-actions button:not(:disabled){
  border-color:var(--ek-ix-line)!important;
  background:transparent!important;color:var(--ek-ix-ink)!important;
  border-radius:50%!important;
}
body.ek-articulos-page .ek-articulos-rail-actions button:not(:disabled):focus-visible{
  outline:2px solid var(--ek-ix-focus)!important;outline-offset:2px!important;
}


/* P0 G6 · The archived article stylesheet has a higher-specificity dark
   .chip ink rule. Pair ink/surface explicitly so unselected topic chips do
   not become graphite-on-graphite in the real mobile search sheet. */
:root[data-ek-theme="dark"] body.ek-articulos-page .ek-article-search .symptom-chips button.chip{
  color:#f5f1eb!important;
  -webkit-text-fill-color:#f5f1eb!important;
  background:transparent!important;
  border-color:#6a6a66!important;
}
:root[data-ek-theme="dark"] body.ek-articulos-page .ek-article-search .symptom-chips button.chip[aria-pressed="true"]{
  color:#f5f1eb!important;
  -webkit-text-fill-color:#f5f1eb!important;
  background:#434647!important;
  border-color:#a8a5a0!important;
}
:root[data-ek-theme="dark"] body.ek-articulos-page .ek-article-search .symptom-chips button.chip:not([aria-pressed="true"]):is(:hover,:focus-visible){
  color:#f5f1eb!important;
  background:#434647!important;
  border-color:#a8a5a0!important;
}


/* F1: mobile contextual TOC. The document and footer reserve no extra space. */
body .ek-toc-fab[hidden]{display:none!important}
@media(min-width:701px){body .ek-toc-fab{display:none!important}}
@media(max-width:700px){
 body .ek-toc-fab{
  position:fixed;z-index:90;right:clamp(14px,4vw,22px);
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  display:grid;place-items:center;box-sizing:border-box;
  width:48px;height:48px;min-height:48px;padding:0;
  border-radius:50%;background:var(--ek-ix-ink);color:var(--ek-ix-surface);
  border:1px solid var(--ek-ix-line);box-shadow:0 5px 18px #0003;cursor:pointer
 }
 body .ek-toc-fab svg{width:21px;height:21px}
 body .ek-toc-fab:focus-visible{outline:3px solid var(--ek-ix-focus);outline-offset:3px}
 body .ek-toc-dialog{
  position:fixed;inset:auto 0 0;margin:0 auto;
  width:min(100%,100vw);max-width:620px;max-height:min(76dvh,680px);box-sizing:border-box;
  padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px));
  background:var(--ek-ix-surface);color:var(--ek-ix-ink);
  border:1px solid var(--ek-ix-line);border-bottom:0;border-radius:22px 22px 0 0;
  box-shadow:0 -15px 60px #0003;overflow:auto
 }
 body .ek-toc-dialog:not([open]){display:none}
 body .ek-toc-dialog::backdrop{background:rgba(18,22,23,.55)}
 body .ek-toc-dialog-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:3px 0 12px;border-bottom:1px solid var(--ek-ix-line)
 }
 body .ek-toc-dialog-head h2{
  color:var(--ek-ix-ink)!important;font:600 17px/1.35 var(--ek-font-body,system-ui,sans-serif)!important;
  margin:0!important
 }
 body .ek-toc-dialog-close{
  min-height:44px;padding:10px 14px;border:1px solid var(--ek-ix-line);
  border-radius:10px;color:var(--ek-ix-ink);background:transparent;
  font:500 14px/1.2 var(--ek-font-body,system-ui,sans-serif);cursor:pointer
 }
 body .ek-toc-dialog-close:focus-visible{outline:2px solid var(--ek-ix-focus);outline-offset:2px}
 body.ek-integrated .ek-toc-dialog-content nav.ek-section-index.ek-reading-index-host{
  width:100%!important;max-width:100%!important;margin:10px 0 0!important
 }
 body.ek-integrated .ek-toc-dialog-content .ek-reading-index{
  width:100%!important;max-width:100%!important;margin:0!important;
  border:0!important;border-radius:0!important;background:transparent!important
 }
 body.ek-integrated .ek-toc-dialog-content .ek-reading-index>summary{display:none!important}
 body.ek-integrated .ek-toc-dialog-content .ek-reading-index>ol.ek-index-list{
  max-height:none!important;overflow:visible!important;
  grid-template-columns:minmax(0,1fr)!important;padding:4px 0!important
 }
 body.ek-integrated .ek-toc-dialog-content .ek-index-list a{min-height:48px!important}
}

/* ATO-553 · Editorial mobile sheet owns the reading context.
   The intelligent header/pill remains unchanged outside the sheet;
   while open, avoid a second blurred navigation bar behind the backdrop. */
@media(max-width:700px){
 html.ek-editorial-sheet-active body.ek-integrated .ek-header,
 html.ek-editorial-sheet-active body.ek-integrated .ek-header.is-pill,
 html.ek-editorial-sheet-active body.ek-integrated .ek-header.is-hidden{
  visibility:hidden!important;pointer-events:none!important;
 }
}

/* ATO-553: keep the preserved article TOC heading in the DOM for semantic
   parity, without rendering a second visual title beside the shared summary. */
body .ek-reading-index-host > h2{
 position:absolute!important;width:1px!important;height:1px!important;
 margin:-1px!important;padding:0!important;overflow:hidden!important;
 clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}