/* ============================================================
   LG ACADEMIC NOTES — CANÓNICO
   Base: Research / Words / Profile + apontamentos LG.
   Regra de largura: WordPress controla a geometria exterior; conteúdo interno a 100%; media centrada.
   ============================================================ */

#textures-app,
#textures-app *,
#textures-app *::before,
#textures-app *::after{
  box-sizing:border-box;
}

/* WORDPRESS BOUNDARY — CANÓNICO
   O tema WordPress controla width/max-width/margens do elemento raiz.
   Não criar breakout da .entry-content; 100% aplica-se apenas dentro da app.
*/
#textures-app{
  --lg-accent:#F6A400;
  --lg-blue:#0A84FF;
  --lg-ink:#171717;
  --lg-muted:#62666d;
  --lg-line:#d8d8d8;
  --lg-line-soft:#ececec;
  --lg-paper:#ffffff;
  --lg-soft:#f7f7f7;

  min-width:0;
  padding:0;

  color:var(--lg-ink);
  background:transparent;

  font-family:inherit;
  font-size:16.5px;
  line-height:1.62;

  overflow-x:hidden;
  scroll-behavior:smooth;
}

#textures-app p{
  width:100%;
  max-width:100%;
  margin:.72rem 0 0;
  color:var(--lg-ink);
  font-size:16.5px;
  line-height:1.62;
  text-align:left;
  hyphens:auto;
  overflow-wrap:break-word;
}

#textures-app ul,
#textures-app ol{
  width:100%;
  max-width:100%;
  margin:.72rem 0 0;
  padding-left:1.35rem;
}

#textures-app li{
  margin:.22rem 0;
  font-size:16px;
  line-height:1.58;
}

#textures-app p a,
#textures-app li a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:#aeb2b6;
  text-decoration-thickness:1px;
  text-underline-offset:.14em;
}

#textures-app p a:hover,
#textures-app li a:hover{
  color:var(--lg-blue);
  text-decoration-color:currentColor;
}

#textures-app a:focus-visible,
#textures-app button:focus-visible,
#textures-app input:focus-visible{
  outline:2px solid var(--lg-blue);
  outline-offset:3px;
}

@media(max-width:640px){
  #textures-app{
    font-size:16px;
  }

  #textures-app p{
    font-size:16px;
    line-height:1.58;
  }

  #textures-app li{
    font-size:15.7px;
  }
}

@media(prefers-reduced-motion:reduce){
  #textures-app{
    scroll-behavior:auto;
  }

  #textures-app *,
  #textures-app *::before,
  #textures-app *::after{
    transition:none !important;
  }
}

/* ESTRUTURA */
#textures-app .layout,
#textures-app .content,
#textures-app .pane,
#textures-app .grid{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* HERO / BLOCOS EDITORIAIS */
#textures-app .hero,
#textures-app .card{
  width:100%;
  max-width:100%;
  margin:0 0 3.8rem;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  scroll-margin-top:28px;
}

#textures-app .hero > h2,
#textures-app .card > h3{
  position:relative;
  display:block;
  width:100%;
  margin:0 0 1.55rem;
  padding:0 0 .7rem;
  color:var(--lg-ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--lg-ink);
  font-size:.80rem;
  line-height:1.22;
  font-weight:780;
  letter-spacing:.145em;
  text-transform:uppercase;
}

#textures-app .hero > h2::after,
#textures-app .card > h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:34px;
  height:3px;
  border-radius:99px;
  background:var(--lg-accent);
}

#textures-app .muted{
  width:100%;
  max-width:100%;
  margin:.72rem 0 0;
  color:var(--lg-ink);
  font-size:16.5px;
  line-height:1.62;
  font-style:normal;
  text-align:left;
  hyphens:auto;
}

#textures-app .card .muted{
  color:var(--lg-muted);
  font-size:14.25px;
  line-height:1.54;
}

/* Legenda conceptual — sem pills coloridas */
#textures-app .hr{ display:none; }

#textures-app .legend{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .65rem;
  margin:1.1rem 0 0;
  padding:.75rem 0 0;
  border-top:1px solid var(--lg-line);
}

#textures-app .pill{
  display:inline;
  margin:0;
  padding:0;
  color:var(--lg-muted);
  background:transparent;
  border:0;
  border-radius:0;
  font-size:12.5px;
  line-height:1.35;
  font-weight:750;
  letter-spacing:.05em;
  text-transform:uppercase;
}

#textures-app .pill:not(:last-child)::after{
  content:" ·";
  margin-left:.45rem;
  color:var(--lg-accent);
}

/* Texto dos blocos dinâmicos */
#textures-app .card p{
  margin:.9rem 0 0;
}

#textures-app .card p strong{
  font-weight:750;
}

/* Vídeo */
#textures-app .media{
  display:block;
  width:100%;
  max-width:800px;
  margin:2.25rem auto 2.5rem;
}

#textures-app .media iframe{
  display:block !important;
  width:100% !important;
  max-width:800px !important;
  height:auto !important;
  aspect-ratio:16/9 !important;
  margin:0 auto !important;
  background:#000 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Skeleton */
#textures-app .skeleton{
  width:100%;
  min-height:90px;
  background:#f7f7f7;
  border:1px solid var(--lg-line-soft);
  border-radius:4px;
}

/* TOC */
#textures-app #toc-btn{
  position:fixed;
  top:24px;
  left:24px;
  z-index:99998;
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  color:var(--lg-ink);
  background:rgba(255,255,255,.96);
  border:1px solid var(--lg-ink);
  border-radius:6px;
  box-shadow:none;
  font:inherit;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}

#textures-app #toc-btn::before{
  content:"☰";
  line-height:1;
}

#textures-app #toc-btn::after{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  bottom:-2px;
  height:3px;
  border-radius:99px;
  background:var(--lg-accent);
}

#textures-app #toc-btn:hover{
  background:#f4f4f4;
}

#textures-app .toc{
  position:fixed;
  top:74px;
  left:24px;
  z-index:99997;
  display:block;
  width:310px;
  max-width:calc(100vw - 48px);
  height:auto;
  max-height:72vh;
  margin:0;
  padding:14px 0;
  overflow-y:auto;
  overflow-x:hidden;
  background:rgba(255,255,255,.985);
  border:1px solid var(--lg-ink);
  border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  transform:translateY(-6px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease, visibility .14s ease;
}

#textures-app .toc.open{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

#textures-app #toc-links a{
  position:relative;
  display:block;
  margin:0;
  padding:.46rem 14px .46rem 17px;
  color:var(--lg-ink);
  background:transparent;
  border:0;
  border-radius:0;
  font-size:13.25px;
  line-height:1.35;
  font-weight:650;
  text-decoration:none;
}

#textures-app #toc-links a::before{
  content:"";
  position:absolute;
  left:0;
  top:.42rem;
  bottom:.42rem;
  width:2px;
  background:transparent;
}

#textures-app #toc-links a:hover{
  color:var(--lg-blue);
  background:#f7f7f7;
}

#textures-app #toc-links a.active,
#textures-app #toc-links a[aria-current="true"]{
  color:var(--lg-ink);
  background:#f7f7f7;
}

#textures-app #toc-links a.active::before,
#textures-app #toc-links a[aria-current="true"]::before{
  background:var(--lg-accent);
}

@media(max-width:782px){
  .admin-bar #textures-app #toc-btn{ top:58px; }
  .admin-bar #textures-app .toc{ top:108px; }
}

@media(max-width:640px){
  #textures-app .hero,
  #textures-app .card{ margin-bottom:3rem; }

  #textures-app .hero > h2,
  #textures-app .card > h3{
    margin-bottom:1.35rem;
    padding-bottom:.62rem;
    font-size:.76rem;
    letter-spacing:.125em;
  }

  #textures-app .muted{ font-size:16px; line-height:1.58; }

  #textures-app .media{
    max-width:100%;
    margin:1.8rem auto 2rem;
  }

  #textures-app #toc-btn{ left:12px; }

  #textures-app .toc{
    left:12px;
    width:310px;
    max-width:calc(100vw - 24px);
    max-height:calc(100dvh - 90px);
  }
}