/* Esser arrow 04. Transparent cutout controls directly under the projected paper.
   Existing buttons, accessible names, state gates, handlers, focus and 48px
   minimum touch height are preserved. Wider 120px targets let the 5:1 engraving
   remain legible rather than compressing it into an 8px-high square icon. */
nav[data-folio-native-flow][aria-label="Folio views"] > button {
  width:120px;
  min-height:48px;
  padding:8px 11px;
  font-size:0!important;
  line-height:0;
}
nav[data-folio-native-flow][aria-label="Folio views"] > button::before {
  content:"";
  display:block;
  width:96px;
  height:24px;
  background:url("/website/folio-v12/assets/folio-arrow04-dark-red.svg") center / contain no-repeat;
  pointer-events:none;
}
nav[data-folio-native-flow][aria-label="Folio views"] > button:first-child::before {
  transform:scaleX(-1);
}
/* Retain native visible glyphs in forced-color environments. */
@media (forced-colors:active) {
  nav[data-folio-native-flow][aria-label="Folio views"] > button {font-size:16px!important;line-height:normal}
  nav[data-folio-native-flow][aria-label="Folio views"] > button::before {display:none}
}

/* A stable below-stage rail owns the controls; read-only projection positions
   them four CSS pixels below the real paper, outside the stage focus clip.
   Offscreen/unsupported paper uses the explicit below-stage fallback. */
[data-folio-control-rail]{position:relative;display:flow-root;min-height:56px}
nav[data-folio-native-flow][aria-label="Folio views"]{
 position:absolute!important;right:auto!important;margin:0;padding:0!important;min-height:48px;
}
nav[data-folio-native-flow][aria-label="Folio views"] > button{position:absolute;top:0}
nav[data-folio-native-flow][aria-label="Folio views"] > button::before{width:100%;max-width:96px}
nav[data-folio-native-flow][aria-label="Folio views"] > button{
 background:transparent!important;border:0!important;border-radius:0!important;
 box-shadow:none!important;outline:0;appearance:none;-webkit-appearance:none;
}
/* The original SVG has no background/stroke. A mask recolors exactly that
   silhouette to copper on the dark rail; original red cutout is fallback. */
@supports ((mask-image:url("")) or (-webkit-mask-image:url(""))){
 nav[data-folio-native-flow][aria-label="Folio views"] > button::before{
  background:#bf865e;
  -webkit-mask:url("/website/folio-v12/assets/folio-arrow04-dark-red.svg") center / contain no-repeat;
  mask:url("/website/folio-v12/assets/folio-arrow04-dark-red.svg") center / contain no-repeat;
 }
}
/* Keyboard focus remains perceivable without a permanent rectangular outline. */
nav[data-folio-native-flow][aria-label="Folio views"] > button:focus-visible::before{
 filter:drop-shadow(0 0 2px #d29c7b) drop-shadow(0 0 4px #d29c7b);
}
@media(forced-colors:active){
 nav[data-folio-native-flow][aria-label="Folio views"] > button{color:ButtonText;forced-color-adjust:auto}
 nav[data-folio-native-flow][aria-label="Folio views"] > button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}
}


/* Paint reaches each outer paper edge; the existing projected rail and
   navigation lifecycle remain the authority for positioning and availability. */
nav[data-folio-native-flow][aria-label="Folio views"] > button{padding:0}
nav[data-folio-native-flow][aria-label="Folio views"] > button::before{max-width:none}

/* Compact ink action on the back-page receipt, with its existing 44px target.
   Receipt projection owns the font/min-height scaling and clipboard behavior. */
[data-folio-paper-copy] > button[data-folio-native-flow]{
 background:transparent;border:0;border-radius:0;box-shadow:none;
 padding:0 6px;line-height:1.1;text-decoration:underline;
 text-decoration-thickness:1px;text-underline-offset:.18em;
}
[data-folio-paper-copy] > button[data-folio-native-flow]:focus-visible{
 outline:2px solid #76521d;outline-offset:2px;
}

/* Original ribbon artwork for the back-page Copy code action.
   em sizing follows the existing projected receipt scale. */
[data-folio-paper-copy] > button[data-folio-native-flow]{
 width:10.5em;height:5.02em;max-width:100%;padding:0 1.25em .15em 0;
 background:url('/website/assets/approved-buttons/share-ribbon-left-original.png') center/contain no-repeat;
 color:#89601d;font-family:"SP Basteleur",serif;font-weight:700;
 text-decoration:none;text-transform:lowercase;
}

/* Smaller lettering; preserve the ribbon geometry and projected tap target. */
[data-folio-paper-copy] > button[data-folio-native-flow]{font-size-adjust:.35}

/* Second set, above the Folio. Same native actions/state and original arrow art. */
[data-folio-top-rail]{position:relative;min-height:56px;padding:0 12px}
[data-folio-top-rail] nav[data-folio-native-flow][aria-label="Folio views"]{position:relative!important;left:auto!important;top:auto!important;right:auto!important;width:100%;display:flex;justify-content:space-between}
[data-folio-top-rail] nav[data-folio-native-flow][aria-label="Folio views"][hidden]{display:none}
[data-folio-top-rail] nav[data-folio-native-flow][aria-label="Folio views"]>button{position:relative;left:auto!important;top:auto!important;width:120px;min-width:48px;min-height:48px;cursor:pointer}
[data-folio-top-rail] button:disabled{opacity:.35;cursor:default}

/* Owner correction: keep the top Folio arrows only. The hidden lower buttons
   retain the native handlers used by the top controls; remove the lower rail gap. */
[data-folio-control-rail]{display:none!important}