/* Complete icon-only replacement; load after Thesis44c. */
:root{
 --eq-direction:url('./assets/brand/direction.svg?v=brand49');
 --eq-pause:url('./assets/brand/pause.svg');
 --eq-icon-idle:#8b9292;
 --eq-icon-active:#5daaa3;
}

/* Helpers remain decorative; their containing controls own the targets. */
body .eq-icon{
 --eq-turn:0deg;--eq-dx:0px;--eq-dy:-2px;
 display:inline-block!important;position:relative;flex:0 0 18px;
 box-sizing:border-box;width:18px!important;height:18px!important;
 min-width:18px;max-width:18px;min-height:18px;max-height:18px;
 margin:0;padding:0;border:0;background:none;vertical-align:-2px;
 line-height:1;color:var(--eq-icon-idle);pointer-events:none;
 animation:none!important;transition:none!important;transform:none!important;
}
body .eq-icon::before{
 content:'';position:absolute;inset:0;display:block;
 width:100%;height:100%;margin:0;border:0;border-radius:0;
 background:currentColor;
 -webkit-mask:var(--eq-direction) center/contain no-repeat;
 mask:var(--eq-direction) center/contain no-repeat;
 transform-origin:50% 50%;transform:rotate(var(--eq-turn));
 animation:none;transition:none;
}
body .eq-icon::after{content:none;display:none}
body .eq-icon--right,body .eq-icon--play{--eq-turn:90deg;--eq-dx:2px;--eq-dy:0px}
body .eq-icon--down{--eq-turn:180deg;--eq-dx:0px;--eq-dy:2px}
body .eq-icon--left{--eq-turn:-90deg;--eq-dx:-2px;--eq-dy:0px}
body .eq-icon--external{--eq-turn:45deg;--eq-dx:1.414px;--eq-dy:-1.414px}
body .eq-icon--pause{
 --eq-turn:0deg;--eq-dx:0px;--eq-dy:0px;
 flex-basis:16px;width:16px!important;height:16px!important;
 min-width:16px;max-width:16px;min-height:16px;max-height:16px;
}
body .eq-icon--pause::before{
 -webkit-mask-image:var(--eq-pause);mask-image:var(--eq-pause);
}

/* Chapter continuation: same head, just 3 normalized units more stem. */
body .thesis-continuation a .eq-icon:not(.eq-icon--pause)::after{
 content:'';position:absolute;inset:0;display:block;
 width:100%;height:100%;margin:0;border:0;border-radius:0;
 background:linear-gradient(currentColor,currentColor) center bottom/1px 25% no-repeat;
 -webkit-mask:none;mask:none;pointer-events:none;
 transform-origin:50% 50%;transform:rotate(var(--eq-turn));
 animation:none;transition:none;
}

/* Target sizing does not enlarge the artwork. */
body :is(.rail-arrow,.view-pager button,.teaser-controls button){
 box-sizing:border-box;min-width:44px;min-height:44px;
 display:inline-flex;align-items:center;justify-content:center;
}
body :is(.official-website,.thesis-scroll-invitation,.thesis-continuation a){
 box-sizing:border-box;min-width:44px;min-height:44px;
}
body :is(.official-website,.thesis-scroll-invitation){display:inline-flex;align-items:center}
body .official-website{gap:4px}
body[data-view='thesis'] .thesis-scroll-invitation{gap:8px}
/* Desktop-only removal; mobile retains its cue when the label is hidden. */
@media(min-width:701px){
 body .official-website .eq-icon{display:none!important}
 body .official-website{gap:0}
}

/* Native deep-dive disclosure: right when closed, down when open. */
body[data-view='thesis'] details.thesis-dive > summary{
 --eq-turn:90deg;--eq-dx:2px;--eq-dy:0px;
 box-sizing:border-box;min-width:44px;min-height:44px;list-style:none;
}
body[data-view='thesis'] details.thesis-dive[open] > summary{
 --eq-turn:180deg;--eq-dx:0px;--eq-dy:2px;
}
body[data-view='thesis'] details.thesis-dive > summary::marker{content:''}
body[data-view='thesis'] details.thesis-dive > summary::-webkit-details-marker{display:none}
body[data-view='thesis'] details.thesis-dive .thesis-dive-toggle{
 position:relative;display:block;box-sizing:border-box;flex:0 0 18px;
 width:18px;height:18px;min-width:18px;max-width:18px;
 min-height:18px;max-height:18px;padding:0;border:0;background:none;
 color:var(--eq-icon-idle);pointer-events:none;
 transform:none!important;animation:none!important;transition:none!important;
}
body[data-view='thesis'] details.thesis-dive .thesis-dive-toggle::before,
body[data-view='thesis'] details.thesis-dive[open] .thesis-dive-toggle::before{
 content:'';position:absolute;inset:0;display:block;
 width:18px;height:18px;margin:0;padding:0;border:0;border-radius:0;
 background:currentColor;
 -webkit-mask:var(--eq-direction) center/contain no-repeat;
 mask:var(--eq-direction) center/contain no-repeat;
 transform-origin:50% 50%;transform:rotate(var(--eq-turn));
 animation:none;transition:none;
}
body[data-view='thesis'] details.thesis-dive .thesis-dive-toggle::after,
body[data-view='thesis'] details.thesis-dive[open] .thesis-dive-toggle::after{
 content:none!important;display:none!important;
}

/* Mobile Options uses the same glyph without replacing native details. */
body .mobile-options > summary{
 --eq-turn:90deg;--eq-dx:2px;--eq-dy:0px;
 box-sizing:border-box;min-width:44px;min-height:44px;list-style:none;
}
body .mobile-options[open] > summary{
 --eq-turn:180deg;--eq-dx:0px;--eq-dy:2px;
}
body .mobile-options > summary::marker{content:''}
body .mobile-options > summary::-webkit-details-marker{display:none}
body .mobile-options > summary::after,
body .mobile-options[open] > summary::after{
 content:'';display:inline-block;position:relative;inset:auto;
 flex:0 0 16px;width:16px;height:16px;min-width:16px;
 margin:0 0 0 8px;margin-inline:8px 0;padding:0;border:0;border-radius:0;
 vertical-align:-2px;color:var(--eq-icon-idle);background:currentColor;
 -webkit-mask:var(--eq-direction) center/contain no-repeat;
 mask:var(--eq-direction) center/contain no-repeat;
 transform-origin:50% 50%;transform:rotate(var(--eq-turn));
 pointer-events:none;animation:none;transition:none;
}
@media(max-width:360px){
 body .mobile-options > summary::after{margin-inline-start:2px}
}

/* Colour only affects glyphs, not existing text styling. */
body :is(a,button):not(:disabled):not([aria-disabled='true']):is(:hover,:focus-visible) .eq-icon,
body[data-view='thesis'] details.thesis-dive > summary:is(:hover,:focus-visible) .thesis-dive-toggle,
body .mobile-options > summary:is(:hover,:focus-visible)::after{
 color:var(--eq-icon-active);
}
body :is(.rail-arrow,.view-pager button,.teaser-controls button,.official-website,.thesis-scroll-invitation,.thesis-continuation a):focus-visible,
body .mobile-options > summary:focus-visible{
 outline:2px solid var(--eq-icon-active);outline-offset:4px;
}

/* Translation stays in screen coordinates; rotation follows it. */
@media(prefers-reduced-motion:no-preference){
 body:not(.motion-paused) .eq-icon::before,
 body:not(.motion-paused) .thesis-continuation a .eq-icon:not(.eq-icon--pause)::after,
 body:not(.motion-paused)[data-view='thesis'] details.thesis-dive .thesis-dive-toggle::before,
 body:not(.motion-paused) .mobile-options > summary::after{
  transition:transform 160ms ease,color 160ms ease;
 }
 body:not(.motion-paused) :is(a,button):not(:disabled):not([aria-disabled='true']):is(:hover,:focus-visible) .eq-icon::before,
 body:not(.motion-paused) .thesis-continuation a:not([aria-disabled='true']):is(:hover,:focus-visible) .eq-icon:not(.eq-icon--pause)::after,
 body:not(.motion-paused)[data-view='thesis'] details.thesis-dive > summary:is(:hover,:focus-visible) .thesis-dive-toggle::before,
 body:not(.motion-paused) .mobile-options > summary:is(:hover,:focus-visible)::after{
  transform:translate(var(--eq-dx),var(--eq-dy)) rotate(var(--eq-turn));
 }
}
@media(forced-colors:active){
 body .eq-icon,
 body[data-view='thesis'] details.thesis-dive .thesis-dive-toggle,
 body .mobile-options > summary::after{color:ButtonText!important;forced-color-adjust:none}
 body :is(.rail-arrow,.view-pager button,.teaser-controls button,.official-website,.thesis-scroll-invitation,.thesis-continuation a):focus-visible,
  body .mobile-options > summary:focus-visible{outline-color:Highlight}
}

/* One keyboard focus indicator, on the small disclosure control. */
body[data-view='thesis'] details.thesis-dive > summary:focus-visible{outline:none}
body[data-view='thesis'] details.thesis-dive > summary:focus-visible .thesis-dive-toggle{outline:2px solid var(--eq-icon-active);outline-offset:4px}
@media(forced-colors:active){body[data-view='thesis'] details.thesis-dive > summary:focus-visible .thesis-dive-toggle{outline-color:Highlight}}

/* Keep the handoff glyph in the same neutral/teal family as the controls. */
body[data-view='thesis'] .thesis-next-title .eq-icon{color:var(--eq-icon-idle)}
body[data-view='thesis'] .thesis-continuation a:is(:hover,:focus-visible) .eq-icon{color:var(--eq-icon-active)}
body[data-view='thesis'] .thesis-continuation a:is(:hover,:focus-visible) .thesis-next-title{text-decoration-color:var(--eq-icon-active)}
@media(forced-colors:active){body[data-view='thesis'] .thesis-next-title .eq-icon{color:ButtonText!important}}
