/* AP 4.76 — Template panel presentation skins.
   Geometry lives in Template Manager. This file changes skin only.
   Available panel_border values: none | thin_shadow | grunge. */
:root{
  --ap-grunge-border-width:2px;
  --ap-grunge-border-color:#070d18;
  --ap-grunge-shadow-x:2px;
  --ap-grunge-shadow-y:2px;
  --ap-grunge-shadow-blur:0px;
  --ap-grunge-shadow-color:#070d18;
  --ap-grunge-neon:#00f0ff;
  --ap-grunge-neon-alpha:.22;
  --ap-grunge-paper:#fbf7ee;
  --ap-grunge-radius:4px;
  --ap-thin-border:#111827;
  --ap-thin-shadow:rgba(15,23,42,.24);
}

/* Template outer margin is presentation authority; desktop/mobile inherit the same value. */
.ap-story-canvas.ap-t1-family{
  box-sizing:border-box!important;
}
.apse-tpl-canvas{
  padding:var(--ap-template-outer-margin,10px);
  box-sizing:border-box;
}
.apse-tpl-canvas-small{
  padding:min(3px,var(--ap-template-outer-margin,10px));
}
.apse-tpl-canvas .apse-tpl-text{box-sizing:border-box!important;padding:var(--ap-text-inner-padding,10px)!important;}
.apse-tpl-canvas-small .apse-tpl-text{padding:min(3px,var(--ap-text-inner-padding,10px))!important;}

/* Pair frames are non-content overlays. They never affect reading order or hit testing. */
.ap-it-pair-frame{
  display:none!important;
  min-width:0!important;
  min-height:0!important;
  pointer-events:none!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  box-sizing:border-box!important;
}

/* Shared cleanup: skin controls visible edges; geometry remains untouched. */
.ap-t1-family[data-panel-border]>.ap-six-zone,
.apse-tpl-canvas[data-panel-border]>.apse-tpl-zone{
  position:relative!important;
  isolation:isolate!important;
}

/* ============================================================
   NONE — no visible panel border or shadow.
   ============================================================ */
.ap-t1-family[data-panel-border="none"]>.ap-six-zone,
.ap-t1-family[data-panel-border="none"] .ap-six-text.ap-paper-text-zone,
.apse-tpl-canvas[data-panel-border="none"]>.apse-tpl-zone{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
  border-radius:0!important;
}
.ap-t1-family[data-panel-border="none"]>.ap-six-zone::before,
.ap-t1-family[data-panel-border="none"]>.ap-six-zone::after,
.apse-tpl-canvas[data-panel-border="none"]>.apse-tpl-zone::before,
.apse-tpl-canvas[data-panel-border="none"]>.apse-tpl-zone::after{
  content:none!important;
  display:none!important;
}

/* ============================================================
   THIN BLACK + 3D SHADOW — one outer frame around each IT pair.
   ART + TXT remain separate semantic slots, but visually read as one set.
   ============================================================ */
.ap-t1-family[data-panel-border="thin_shadow"]>.ap-six-zone,
.ap-t1-family[data-panel-border="thin_shadow"] .ap-six-text.ap-paper-text-zone,
.apse-tpl-canvas[data-panel-border="thin_shadow"]>.apse-tpl-zone{
  border:0!important;
  border-radius:1px!important;
  box-shadow:inset 0 0 0 1px rgba(17,24,39,.44)!important;
  filter:none!important;
}
.ap-t1-family[data-panel-border="thin_shadow"]>.ap-six-zone::before,
.ap-t1-family[data-panel-border="thin_shadow"]>.ap-six-zone::after,
.apse-tpl-canvas[data-panel-border="thin_shadow"]>.apse-tpl-zone::before,
.apse-tpl-canvas[data-panel-border="thin_shadow"]>.apse-tpl-zone::after{
  content:none!important;
  display:none!important;
}
@media (min-width:768px){
  .ap-t1-family[data-panel-border="thin_shadow"]>.ap-it-pair-frame{
    display:block!important;
    z-index:40!important;
    border:var(--ap-panel-border-width,1px) solid var(--ap-thin-border)!important;
    border-radius:3px!important;
    box-shadow:var(--ap-panel-shadow-strength,2px) var(--ap-panel-shadow-strength,2px) 0 rgba(15,23,42,.18),0 7px 14px var(--ap-thin-shadow)!important;
  }
}
.apse-tpl-canvas[data-panel-border="thin_shadow"]>.ap-it-pair-frame{
  display:block!important;
  z-index:40!important;
  border:var(--ap-panel-border-width,1px) solid var(--ap-thin-border)!important;
  border-radius:3px!important;
  box-shadow:var(--ap-panel-shadow-strength,2px) var(--ap-panel-shadow-strength,2px) 0 rgba(15,23,42,.16),0 5px 10px rgba(15,23,42,.20)!important;
}

/* ============================================================
   GRUNGE / RĂNG CƯA — reusable SVG distorted ink edge.
   Filter applies to border overlay only, never to text or artwork.
   ============================================================ */
.ap-t1-family[data-panel-border="grunge"]>.ap-six-zone{
  border:0!important;
  border-radius:var(--ap-grunge-radius)!important;
  box-shadow:none!important;
}
.ap-t1-family[data-panel-border="grunge"]>.ap-six-zone::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:1px!important;
  z-index:20!important;
  pointer-events:none!important;
  border:var(--ap-panel-border-width,var(--ap-grunge-border-width)) solid var(--ap-grunge-border-color)!important;
  border-radius:inherit!important;
  box-shadow:
    var(--ap-panel-shadow-strength,var(--ap-grunge-shadow-x)) var(--ap-panel-shadow-strength,var(--ap-grunge-shadow-y)) var(--ap-grunge-shadow-blur) var(--ap-grunge-shadow-color),
    0 0 12px rgba(0,240,255,var(--ap-grunge-neon-alpha))!important;
  filter:url("grunge-border-filter.svg#grunge-medium");
}
.ap-t1-family[data-panel-border="grunge"][data-grunge-preset="thin"]>.ap-six-zone::after{filter:url("grunge-border-filter.svg#grunge-thin")}
.ap-t1-family[data-panel-border="grunge"][data-grunge-preset="medium"]>.ap-six-zone::after{filter:url("grunge-border-filter.svg#grunge-medium")}
.ap-t1-family[data-panel-border="grunge"][data-grunge-preset="thick"]>.ap-six-zone::after{filter:url("grunge-border-filter.svg#grunge-thick")}
.ap-t1-family[data-panel-border="grunge"]>.ap-six-zone::before{
  content:""!important;display:block!important;position:absolute!important;top:5px!important;right:6px!important;
  width:20px!important;height:3px!important;z-index:21!important;pointer-events:none!important;
  background:linear-gradient(90deg,transparent,var(--ap-grunge-neon))!important;
  box-shadow:0 0 8px rgba(0,240,255,.42)!important;opacity:.78!important;
}

/* Admin mock preview mirrors the same grunge skin. */
.apse-tpl-canvas[data-panel-border="grunge"]>.apse-tpl-zone{
  border:0!important;border-radius:var(--ap-grunge-radius)!important;box-shadow:none!important;
}
.apse-tpl-canvas[data-panel-border="grunge"]>.apse-tpl-zone::after{
  content:"";display:block;position:absolute;inset:1px;z-index:20;pointer-events:none;
  border:var(--ap-panel-border-width,var(--ap-grunge-border-width)) solid var(--ap-grunge-border-color);border-radius:inherit;
  box-shadow:var(--ap-panel-shadow-strength,var(--ap-grunge-shadow-x)) var(--ap-panel-shadow-strength,var(--ap-grunge-shadow-y)) var(--ap-grunge-shadow-blur) var(--ap-grunge-shadow-color),0 0 12px rgba(0,240,255,var(--ap-grunge-neon-alpha));
  filter:url("grunge-border-filter.svg#grunge-medium");
}
.apse-tpl-canvas[data-panel-border="grunge"]>.apse-tpl-zone::before{
  content:"";display:block;position:absolute;top:5px;right:6px;width:18px;height:3px;z-index:21;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ap-grunge-neon));box-shadow:0 0 7px rgba(0,240,255,.42);opacity:.78;
}

/* Shared paper/image treatment remains independent from the chosen border skin. */
.ap-t1-family[data-panel-border] .ap-six-text.ap-paper-text-zone,
.apse-tpl-canvas[data-panel-border] .apse-tpl-text{
  background:var(--ap-grunge-paper)!important;
}
.ap-t1-family[data-panel-border] .ap-six-art .ap-story-art img,
.apse-tpl-canvas[data-panel-border] .apse-tpl-art img{
  filter:contrast(1.06) saturate(1.04)!important;
}